@wallarm-org/design-system 0.35.0 → 0.36.0

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>;

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

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { TestIdProvider } from "../../../utils/testId.js";
+import { lineChartEmptyMessageClasses, lineChartEmptyMessageTextClasses, lineChartEmptyRootClasses } from "./classes.js";
+import { LINE_CARD_HEIGHT, LINE_DEFAULT_BODY_MARGIN, LINE_GRID_DASHARRAY, LINE_HEADER_HEIGHT, LINE_X_LABEL_HEIGHT, LINE_Y_LABEL_WIDTH } from "./constants.js";
+const DEFAULT_BODY_HEIGHT = LINE_CARD_HEIGHT - LINE_HEADER_HEIGHT;
+const EMPTY_GRID_LINES = 3;
+const LineChartEmpty = ({ height = DEFAULT_BODY_HEIGHT, className, children, ref, 'data-testid': testId, ...props })=>{
+    const axisY = Math.max(0, height - LINE_X_LABEL_HEIGHT);
+    const lines = Array.from({
+        length: EMPTY_GRID_LINES
+    }, (_, i)=>axisY * (i + 1) / (EMPTY_GRID_LINES + 1));
+    return /*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsxs("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "line-chart-empty",
+            "data-testid": testId,
+            className: cn(lineChartEmptyRootClasses, className),
+            style: {
+                height
+            },
+            children: [
+                /*#__PURE__*/ jsxs("svg", {
+                    height: height,
+                    preserveAspectRatio: "none",
+                    "aria-hidden": "true",
+                    className: "absolute top-0",
+                    style: {
+                        left: LINE_Y_LABEL_WIDTH,
+                        width: `calc(100% - ${LINE_Y_LABEL_WIDTH + LINE_DEFAULT_BODY_MARGIN.right}px)`
+                    },
+                    "data-slot": "line-chart-empty-grid",
+                    children: [
+                        lines.map((y, i)=>/*#__PURE__*/ jsx("line", {
+                                x1: "0",
+                                x2: "100%",
+                                y1: y,
+                                y2: y,
+                                stroke: "var(--color-border-primary-light)",
+                                strokeDasharray: LINE_GRID_DASHARRAY,
+                                strokeWidth: 1
+                            }, i)),
+                        /*#__PURE__*/ jsx("line", {
+                            x1: "0",
+                            x2: "100%",
+                            y1: axisY,
+                            y2: axisY,
+                            stroke: "var(--color-border-primary-light)",
+                            strokeWidth: 1,
+                            "data-slot": "line-chart-empty-axis"
+                        })
+                    ]
+                }),
+                null != children && /*#__PURE__*/ jsx("div", {
+                    className: lineChartEmptyMessageClasses,
+                    style: {
+                        height: axisY
+                    },
+                    children: /*#__PURE__*/ jsx("span", {
+                        className: lineChartEmptyMessageTextClasses,
+                        children: children
+                    })
+                })
+            ]
+        })
+    });
+};
+LineChartEmpty.displayName = 'LineChartEmpty';
+export { LineChartEmpty };

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

@@ -0,0 +1,19 @@
+import type { FC } from 'react';
+export interface LineChartGridProps {
+    /** Render vertical grid lines in addition to the default horizontal ones. */
+    vertical?: boolean;
+    /**
+     * Keep the topmost horizontal grid line unconditionally. By default the line
+     * is dropped only when it would visually crowd the chart's top edge — see
+     * {@link dropEdgeGridLines} for the threshold (Figma "no top x-line" rule).
+     */
+    keepTopLine?: boolean;
+    /**
+     * Keep the bottommost horizontal grid line. By default the line is dropped
+     * because the solid `<LineChartXAxis>` axis line owns the bottom rail — set
+     * to `true` when the X-axis line is hidden and the grid should draw the
+     * bottom rail itself.
+     */
+    keepBottomLine?: boolean;
+}
+export declare const LineChartGrid: FC<LineChartGridProps>;

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

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { CartesianGrid } from "recharts";
+import { LINE_GRID_DASHARRAY } from "./constants.js";
+import { dropEdgeGridLines } from "./lib/dropEdgeGridLines.js";
+import { tickHorizontalCoordinates } from "./lib/tickHorizontalCoordinates.js";
+const LineChartGrid = ({ vertical = false, keepTopLine = false, keepBottomLine = false })=>/*#__PURE__*/ jsx(CartesianGrid, {
+        strokeDasharray: LINE_GRID_DASHARRAY,
+        stroke: "var(--color-border-primary-light)",
+        vertical: vertical,
+        horizontal: dropEdgeGridLines({
+            keepTop: keepTopLine,
+            keepBottom: keepBottomLine
+        }),
+        horizontalCoordinatesGenerator: tickHorizontalCoordinates
+    });
+LineChartGrid.displayName = 'LineChartGrid';
+export { LineChartGrid };

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

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

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

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { lineChartHoverPopoverClasses } from "./classes.js";
+const LineChartHoverPopover = ({ ref, className, children, ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "line-chart-hover-popover",
+        role: "tooltip",
+        "aria-live": "polite",
+        className: cn(lineChartHoverPopoverClasses, className),
+        children: children
+    });
+LineChartHoverPopover.displayName = 'LineChartHoverPopover';
+export { LineChartHoverPopover };

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

@@ -0,0 +1,14 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { ChartColor } from '../types';
+export interface LineChartHoverPopoverDotProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    /**
+     * Dot colour. Either a built-in palette token (`'brand'`, `'red'`, …) or any
+     * CSS colour string (`'var(--color-violet-500)'`, `'#8b5cf6'`, `'oklch(…)'`).
+     * Same shape as `LineChartSeries.color`, so passing `color={series.color}`
+     * keeps the dot in sync with its line. Consumer-supplied
+     * `style.backgroundColor` still wins when present.
+     */
+    color?: ChartColor | (string & {});
+}
+export declare const LineChartHoverPopoverDot: FC<LineChartHoverPopoverDotProps>;

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

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { lineChartHoverPopoverDotClasses } from "./classes.js";
+import { resolveSeriesColor } from "./constants.js";
+const LineChartHoverPopoverDot = ({ color, className, style, ref, ...props })=>{
+    const backgroundColor = style?.backgroundColor ?? resolveSeriesColor(color);
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "line-chart-hover-popover-dot",
+        "aria-hidden": "true",
+        className: cn(lineChartHoverPopoverDotClasses, className),
+        style: {
+            ...style,
+            backgroundColor
+        }
+    });
+};
+LineChartHoverPopoverDot.displayName = 'LineChartHoverPopoverDot';
+export { LineChartHoverPopoverDot };

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

@@ -0,0 +1,12 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import type { LineChartSeries } from './LineChartContext';
+export interface LineChartHoverPopoverRowProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /** Series whose colour and label feed the row. */
+    series: LineChartSeries;
+    /** Raw datum value at the active index. `null`/`undefined` renders an em-dash. */
+    value?: number | string | null;
+    /** Optional value formatter. Defaults to `Number.toLocaleString` / `String`. */
+    formatValue?: (value: number | string | null | undefined) => ReactNode;
+}
+export declare const LineChartHoverPopoverRow: FC<LineChartHoverPopoverRowProps>;

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

@@ -0,0 +1,33 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { lineChartHoverPopoverRowClasses, lineChartHoverPopoverRowDotClasses, lineChartHoverPopoverRowLabelClasses, lineChartHoverPopoverRowValueClasses } from "./classes.js";
+import { LineChartHoverPopoverDot } from "./LineChartHoverPopoverDot.js";
+const defaultFormatValue = (value)=>{
+    if (null == value) return '—';
+    return 'number' == typeof value ? value.toLocaleString() : String(value);
+};
+const LineChartHoverPopoverRow = ({ series, value, formatValue = defaultFormatValue, ref, className, children, ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "line-chart-hover-popover-row",
+        "data-key": series.key,
+        className: cn(lineChartHoverPopoverRowClasses, className),
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(LineChartHoverPopoverDot, {
+                    color: series.color ?? 'slate',
+                    className: lineChartHoverPopoverRowDotClasses
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: lineChartHoverPopoverRowLabelClasses,
+                    children: series.label
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: lineChartHoverPopoverRowValueClasses,
+                    children: formatValue(value)
+                })
+            ]
+        })
+    });
+LineChartHoverPopoverRow.displayName = 'LineChartHoverPopoverRow';
+export { LineChartHoverPopoverRow };

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

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

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

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

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

@@ -0,0 +1,15 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { LineChartLegendOrientation } from './LineChartContext';
+export interface LineChartLegendProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * How legend rows lay out inside the legend itself. Defaults to `'horizontal'`.
+     * Use `'vertical'` when the legend sits to the side of the chart (the consumer
+     * controls placement by JSX child order or by wrapping body+legend in an
+     * `<HStack>`). Layout-vs-orientation is the only knob the legend exposes.
+     */
+    orientation?: LineChartLegendOrientation;
+    /** Cross-axis alignment of the legend rows. Default `'start'`. */
+    align?: 'start' | 'center' | 'end';
+}
+export declare const LineChartLegend: FC<LineChartLegendProps>;

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

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { lineChartLegendVariants } from "./classes.js";
+const LineChartLegend = ({ orientation = 'horizontal', align = 'start', className, ref, ...props })=>{
+    const testId = useTestId('legend');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "line-chart-legend",
+        "data-testid": testId,
+        className: cn(lineChartLegendVariants({
+            orientation,
+            align
+        }), className)
+    });
+};
+LineChartLegend.displayName = 'LineChartLegend';
+export { LineChartLegend };

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

@@ -0,0 +1,14 @@
+import { type FC, type HTMLAttributes, type Ref } from 'react';
+export interface LineChartLegendItemProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /** Joins to `LineChartSeries.key`. Drives hover sync, dim, and `aria-current`. */
+    seriesKey: string;
+    /**
+     * Explicit selection state. When omitted, falls back to "not in `filteredKeys`".
+     * `true` = row is on (line drawn); `false` = row is off (line hidden, dimmed).
+     * Passing this prop fully overrides the context — useful when the legend
+     * renders rows that are not part of the chart's filter set.
+     */
+    selected?: boolean;
+}
+export declare const LineChartLegendItem: FC<LineChartLegendItemProps>;

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

@@ -0,0 +1,112 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useContext, useMemo } from "react";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { lineChartLegendItemVariants } from "./classes.js";
+import { LineChartActiveContext, LineChartDataContext, LineChartItemContext, LineChartSelectionContext, isHoverSyncTarget } from "./LineChartContext.js";
+const LineChartLegendItem = ({ seriesKey, selected: selectedProp, className, children, ref, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props })=>{
+    const testId = useTestId('legend-item');
+    const dataCtx = useContext(LineChartDataContext);
+    const { activeKey } = useContext(LineChartActiveContext);
+    const { hiddenSet } = useContext(LineChartSelectionContext);
+    const series = dataCtx?.seriesByKey.get(seriesKey);
+    const interactive = 'function' == typeof onClick;
+    const active = activeKey === seriesKey;
+    const selected = selectedProp ?? !hiddenSet.has(seriesKey);
+    const dimmed = !selected && !active && hiddenSet.size > 0;
+    const color = series?.color;
+    const label = series?.label;
+    const itemValue = useMemo(()=>({
+            seriesKey,
+            selected,
+            interactive,
+            active,
+            color,
+            label
+        }), [
+        seriesKey,
+        selected,
+        interactive,
+        active,
+        color,
+        label
+    ]);
+    const setActive = dataCtx?.setActiveKey;
+    const handleMouseEnter = useCallback((event)=>{
+        onMouseEnter?.(event);
+        if (event.defaultPrevented) return;
+        setActive?.(seriesKey);
+    }, [
+        onMouseEnter,
+        setActive,
+        seriesKey
+    ]);
+    const handleMouseLeave = useCallback((event)=>{
+        onMouseLeave?.(event);
+        if (event.defaultPrevented) return;
+        if (isHoverSyncTarget(event.relatedTarget)) return;
+        setActive?.(null);
+    }, [
+        onMouseLeave,
+        setActive
+    ]);
+    const handleFocus = useCallback((event)=>{
+        onFocus?.(event);
+        if (event.defaultPrevented) return;
+        setActive?.(seriesKey);
+    }, [
+        onFocus,
+        setActive,
+        seriesKey
+    ]);
+    const handleBlur = useCallback((event)=>{
+        onBlur?.(event);
+        if (event.defaultPrevented) return;
+        if (isHoverSyncTarget(event.relatedTarget)) return;
+        setActive?.(null);
+    }, [
+        onBlur,
+        setActive
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        onKeyDown?.(event);
+        if (!interactive || event.defaultPrevented) return;
+        if ('Enter' === event.key || ' ' === event.key) {
+            event.preventDefault();
+            event.currentTarget.click();
+        }
+    }, [
+        interactive,
+        onKeyDown
+    ]);
+    return /*#__PURE__*/ jsx(LineChartItemContext.Provider, {
+        value: itemValue,
+        children: /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "line-chart-legend-item",
+            "data-testid": testId,
+            "data-key": seriesKey,
+            "data-active": active ? 'true' : void 0,
+            "data-selected": selected ? 'true' : void 0,
+            role: interactive ? 'button' : void 0,
+            tabIndex: interactive ? 0 : void 0,
+            "aria-current": selected ? 'true' : void 0,
+            onClick: onClick,
+            onKeyDown: handleKeyDown,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            className: cn(lineChartLegendItemVariants({
+                interactive,
+                active,
+                selected,
+                dimmed
+            }), className),
+            children: children
+        })
+    });
+};
+LineChartLegendItem.displayName = 'LineChartLegendItem';
+export { LineChartLegendItem };

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

@@ -0,0 +1,17 @@
+import { type FC, type MouseEvent } from 'react';
+export interface LineChartLineProps {
+    /** Joins to `LineChartSeries.key` from the root `series` prop. */
+    seriesKey: string;
+    /** Recharts curve type. Defaults to `'monotone'`. */
+    curve?: 'linear' | 'monotone';
+    /** Force-disable the recharts mount animation. */
+    disableAnimation?: boolean;
+    /** Recharts pass-through — when `true`, the line bridges `null`/`undefined` gaps. */
+    connectNulls?: boolean;
+    /** Stroke width override. Defaults to `LINE_STROKE_WIDTH`. */
+    strokeWidth?: number;
+    onClick?: (event: MouseEvent<SVGPathElement>) => void;
+    onMouseEnter?: (event: MouseEvent<SVGPathElement>) => void;
+    onMouseLeave?: (event: MouseEvent<SVGPathElement>) => void;
+}
+export declare const LineChartLine: FC<LineChartLineProps>;

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

@@ -0,0 +1,57 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext, useEffect } from "react";
+import { Line } from "recharts";
+import { LINE_ACTIVE_DOT_RADIUS, LINE_ANIMATION_BEGIN, LINE_ANIMATION_DURATION, LINE_DASH_DASHARRAY, LINE_INACTIVE_OPACITY, LINE_STROKE_FILL, LINE_STROKE_WIDTH, resolveSeriesColor } from "./constants.js";
+import { LineChartActiveContext, LineChartDataContext } from "./LineChartContext.js";
+import { warnLineChartLine } from "./lib/warn.js";
+const wrap = (cb)=>cb ? (_props, event)=>cb(event) : void 0;
+const LineChartLine = ({ seriesKey, curve = 'monotone', disableAnimation = false, connectNulls = false, strokeWidth = LINE_STROKE_WIDTH, onClick, onMouseEnter, onMouseLeave })=>{
+    const dataCtx = useContext(LineChartDataContext);
+    const { activeKey } = useContext(LineChartActiveContext);
+    const series = dataCtx?.seriesByKey.get(seriesKey);
+    const isHidden = dataCtx?.hiddenSet.has(seriesKey) ?? false;
+    useEffect(()=>{
+        if ('production' === process.env.NODE_ENV) return;
+        if (!dataCtx) return;
+        if (!series) warnLineChartLine(`\`seriesKey="${seriesKey}"\` does not match any entry in the root \`series\` array. The line will not render. Add the series to the schema or check the key spelling.`);
+    }, [
+        dataCtx,
+        series,
+        seriesKey
+    ]);
+    if (!series || isHidden) return null;
+    const stroke = resolveSeriesColor(series.color) ?? LINE_STROKE_FILL.slate;
+    const strokeDasharray = 'dashed' === series.variant ? LINE_DASH_DASHARRAY : void 0;
+    const isActive = activeKey === seriesKey;
+    const opacity = null === activeKey || isActive ? 1 : LINE_INACTIVE_OPACITY;
+    return /*#__PURE__*/ jsx(Line, {
+        dataKey: seriesKey,
+        name: series.label,
+        type: curve,
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        strokeDasharray: strokeDasharray,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        dot: false,
+        activeDot: {
+            r: LINE_ACTIVE_DOT_RADIUS,
+            stroke,
+            strokeWidth: 0
+        },
+        opacity: opacity,
+        connectNulls: connectNulls,
+        isAnimationActive: disableAnimation ? false : 'auto',
+        animationBegin: LINE_ANIMATION_BEGIN,
+        animationDuration: LINE_ANIMATION_DURATION,
+        animationEasing: "ease-out",
+        onClick: wrap(onClick),
+        onMouseEnter: wrap(onMouseEnter),
+        onMouseLeave: wrap(onMouseLeave),
+        "data-slot": "line-chart-line",
+        "data-key": seriesKey,
+        "data-active": isActive ? 'true' : void 0
+    });
+};
+LineChartLine.displayName = 'LineChartLine';
+export { LineChartLine };

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

@@ -0,0 +1,31 @@
+import { type FC, type ReactNode } from 'react';
+import { type LineChartDatum, type LineChartSeries } from './LineChartContext';
+export interface LineChartTooltipRow {
+    /** Series schema for this row. */
+    series: LineChartSeries;
+    /** Raw datum value at the active index for `series.key`. */
+    value: number | string | null | undefined;
+}
+export interface LineChartTooltipRenderArgs {
+    /** Active datum at the cursor's nearest X position. */
+    datum: LineChartDatum;
+    /**
+     * Pre-resolved popover rows — visible series joined with their value at the
+     * active index, in render order. Lets the render-prop be "just lay it out"
+     * instead of "join + look up + format".
+     */
+    rows: LineChartTooltipRow[];
+    /** Raw `xKey` value at the active datum. */
+    xValue: number | string;
+}
+export interface LineChartTooltipProps {
+    /**
+     * Render-prop override for the popover body. Receives the active datum, the
+     * pre-resolved `rows` (visible series + value pairs), and the X value at the
+     * cursor. When omitted, the default surface renders timestamp + rows.
+     */
+    children?: (args: LineChartTooltipRenderArgs) => ReactNode;
+    /** Custom formatter for the default popover timestamp slot. */
+    xTickFormatter?: (value: unknown) => ReactNode;
+}
+export declare const LineChartTooltip: FC<LineChartTooltipProps>;

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

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { Tooltip, usePlotArea } from "recharts";
+import { lineChartTooltipCenterClasses } from "./classes.js";
+import { HOVER_POPOVER_TOP } from "./constants.js";
+import { LineChartDataContext, LineChartSelectionContext, LineChartZoomContext } from "./LineChartContext.js";
+import { LineChartHoverPopover } from "./LineChartHoverPopover.js";
+import { LineChartHoverPopoverRow } from "./LineChartHoverPopoverRow.js";
+import { LineChartHoverPopoverTimestamp } from "./LineChartHoverPopoverTimestamp.js";
+const TOOLTIP_CURSOR = {
+    stroke: 'var(--color-border-primary-light)',
+    strokeWidth: 1,
+    strokeDasharray: '4 4'
+};
+const TOOLTIP_ALLOW_ESCAPE = {
+    x: false,
+    y: false
+};
+const formatXValue = (value, formatter)=>{
+    if (formatter) return formatter(value);
+    return String(value);
+};
+const LineChartTooltip = ({ children, xTickFormatter })=>{
+    const dataCtx = useContext(LineChartDataContext);
+    const { hiddenSet } = useContext(LineChartSelectionContext);
+    const zoomCtx = useContext(LineChartZoomContext);
+    const plotArea = usePlotArea();
+    const visibleSeries = useMemo(()=>dataCtx ? dataCtx.series.filter((s)=>!hiddenSet.has(s.key)) : [], [
+        dataCtx,
+        hiddenSet
+    ]);
+    if (!dataCtx) return null;
+    const centerY = plotArea ? plotArea.y + plotArea.height / 2 : HOVER_POPOVER_TOP;
+    const renderContent = ({ active, payload })=>{
+        if (!active || !payload || 0 === payload.length) return null;
+        if (zoomCtx?.drag || zoomCtx?.pending) return null;
+        const datum = payload[0]?.payload;
+        if (!datum) return null;
+        const xValue = datum[dataCtx.xKey];
+        const rows = visibleSeries.map((s)=>({
+                series: s,
+                value: datum[s.key]
+            }));
+        const body = children ? children({
+            datum,
+            rows,
+            xValue
+        }) : /*#__PURE__*/ jsxs(LineChartHoverPopover, {
+            children: [
+                /*#__PURE__*/ jsx(LineChartHoverPopoverTimestamp, {
+                    children: formatXValue(xValue, xTickFormatter)
+                }),
+                rows.map((row)=>/*#__PURE__*/ jsx(LineChartHoverPopoverRow, {
+                        series: row.series,
+                        value: row.value
+                    }, row.series.key))
+            ]
+        });
+        return /*#__PURE__*/ jsx("div", {
+            className: lineChartTooltipCenterClasses,
+            children: body
+        });
+    };
+    return /*#__PURE__*/ jsx(Tooltip, {
+        cursor: zoomCtx?.drag || zoomCtx?.pending ? false : TOOLTIP_CURSOR,
+        isAnimationActive: false,
+        position: {
+            y: centerY
+        },
+        allowEscapeViewBox: TOOLTIP_ALLOW_ESCAPE,
+        content: renderContent
+    });
+};
+LineChartTooltip.displayName = 'LineChartTooltip';
+export { LineChartTooltip };

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

@@ -0,0 +1,51 @@
+import { type FC } from 'react';
+/**
+ * Tick-spacing preset. Maps to `minTickGap` so callers don't have to think in
+ * pixels for the common case — explicit `minTickGap` still wins if passed.
+ *
+ *   - `'sparse'` → 64px gap (wide labels, long ranges)
+ *   - `'normal'` → 32px gap (sane default for hourly / daily timeseries)
+ *   - `'dense'`  → 16px gap (short labels, short ranges)
+ */
+export type LineChartXAxisDensity = 'sparse' | 'normal' | 'dense';
+export interface LineChartXAxisProps {
+    /** Format the rendered tick label. Receives the raw datum value at the tick. */
+    tickFormatter?: (value: unknown, index: number) => string;
+    /**
+     * Curated tick-spacing preset (`'sparse' | 'normal' | 'dense'`). Sets
+     * `minTickGap` to 64/32/16px respectively. Explicit `minTickGap` overrides
+     * the preset — reach for that escape hatch when no preset fits.
+     */
+    density?: LineChartXAxisDensity;
+    /** Recharts tick interval — `0` to render every tick, the literal strings to auto-pick. */
+    interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart';
+    /** Recharts target tick count. */
+    tickCount?: number;
+    /** Explicit tick values. Overrides recharts' generator. */
+    ticks?: ReadonlyArray<number | string>;
+    /** Minimum gap (in pixels) between rendered tick labels. Overrides `density`. */
+    minTickGap?: number;
+    /** Recharts domain override — `['auto', 'auto']` by default. */
+    domain?: [
+        number | string | 'auto' | 'dataMin' | 'dataMax',
+        number | string | 'auto' | 'dataMin' | 'dataMax'
+    ];
+    /** Padding between the plot edge and the first/last tick. */
+    padding?: {
+        left?: number;
+        right?: number;
+    } | 'gap' | 'no-gap';
+    /** Recharts axis scale type — `'category'` (default for line charts) or `'number'` for continuous X. */
+    type?: 'category' | 'number';
+    /** Render the axis area as a spacer (preserves layout, hides the labels). */
+    hideTicks?: boolean;
+    /**
+     * Render the solid bottom axis line. Defaults to `true` — the line owns the
+     * bottom rail of the plot (the `<LineChartGrid>` drops its bottom horizontal
+     * grid line to avoid stacking on top of it). Pass `false` for sparkline-style
+     * plots; in that case set `<LineChartGrid keepBottomLine />` if a bottom rail
+     * is still wanted.
+     */
+    axisLine?: boolean;
+}
+export declare const LineChartXAxis: FC<LineChartXAxisProps>;