@wallarm-org/design-system 4.0.0 → 4.1.0-rc-feat-WDS-192.1

package/dist/components/SimpleCharts/Metric/MetricSparkline.d.ts

@@ -0,0 +1,30 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../../utils/testId.js';
+export type MetricSparklineColor = 'brand' | 'positive' | 'negative' | 'neutral';
+export interface MetricSparklinePoint {
+    /** The point's position on the period — a date (`Date`, timestamp, ISO string) or any label. */
+    x: Date | number | string;
+    value: number;
+}
+export interface MetricSparklineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** The trend over the period, oldest first. */
+    data: MetricSparklinePoint[];
+    /**
+     * Line colour. Independent of the `MetricDelta` sentiment — set both. `brand` (default) ·
+     * `positive` (success) · `negative` (danger) · `neutral` (slate).
+     */
+    color?: MetricSparklineColor;
+    /** Series name on the hover popover row (Figma "Attribute"). */
+    label?: ReactNode;
+    /** Formats the hovered point's `x` for the popover. Defaults to `1 Jan, 2026` for dates. */
+    formatX?: (x: MetricSparklinePoint['x']) => ReactNode;
+    /** Formats the hovered value. Defaults to `toLocaleString('en-US')`. */
+    formatValue?: (value: number) => ReactNode;
+}
+/**
+ * The trend under a `Metric`: a 48px line + area spanning the card width, with a ruler and a
+ * date/value popover on hover. Compose it inside `Chart`, after `Metric` — the metric's bottom
+ * padding is the 8px gap, and the sparkline sits flush with the card's bottom edge.
+ */
+export declare const MetricSparkline: FC<MetricSparklineProps>;

package/dist/components/SimpleCharts/Metric/MetricSparkline.js

@@ -0,0 +1,365 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useEffect, useId, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { useDateFormat } from "../../DateFormatProvider/useDateFormat.js";
+import { ChartHoverCardRow } from "../internal/ChartHoverCard.js";
+import { LineChartHoverPopover, LineChartHoverPopoverTimestamp } from "../LineChart/index.js";
+import { LINE_CURSOR_DASHARRAY } from "../LineChart/constants.js";
+import { formatChartDate } from "../lib/timeFormatters.js";
+import { metricSparklineClasses, metricSparklinePlotClasses, metricSparklinePopoverClasses, metricSparklineRulerClasses } from "./classes.js";
+const SPARKLINE_COLORS = {
+    brand: {
+        line: "var(--color-bg-fill-brand)",
+        area: "var(--color-bg-fill-brand)"
+    },
+    positive: {
+        line: "var(--color-bg-fill-success)",
+        area: "var(--color-bg-fill-success)"
+    },
+    negative: {
+        line: "var(--color-bg-fill-danger)",
+        area: "var(--color-bg-fill-danger)"
+    },
+    neutral: {
+        line: "var(--color-border-strong-primary)",
+        area: "var(--color-bg-strong-primary)"
+    }
+};
+const HEIGHT = 48;
+const PAD_TOP = 4;
+const PAD_BOTTOM = 8;
+const STROKE_WIDTH = 1.5;
+const POPOVER_OFFSET_X = 8;
+const POPOVER_OFFSET_Y = 14;
+const buildPaths = (values)=>{
+    const ys = 1 === values.length ? values.concat(values) : values;
+    const finite = ys.filter(Number.isFinite);
+    const min = Math.min(...finite);
+    const span = Math.max(...finite) - min;
+    const inner = HEIGHT - PAD_TOP - PAD_BOTTOM;
+    const toY = (v)=>0 === span ? PAD_TOP + inner / 2 : PAD_TOP + (1 - (v - min) / span) * inner;
+    const line = [];
+    const area = [];
+    let runEnd = -1;
+    ys.forEach((v, i)=>{
+        if (!Number.isFinite(v)) {
+            if (runEnd >= 0) area.push(`L${runEnd},${HEIGHT} Z`);
+            runEnd = -1;
+            return;
+        }
+        const y = toY(v);
+        line.push(`${runEnd < 0 ? "M" : "L"}${i},${y}`);
+        area.push(runEnd < 0 ? `M${i},${HEIGHT} L${i},${y}` : `L${i},${y}`);
+        runEnd = i;
+    });
+    if (runEnd >= 0) area.push(`L${runEnd},${HEIGHT} Z`);
+    return {
+        width: ys.length - 1,
+        line: line.join(" "),
+        area: area.join(" ")
+    };
+};
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}/;
+const MetricSparkline = (t0)=>{
+    const $ = c(61);
+    let className;
+    let data;
+    let formatValue;
+    let formatX;
+    let label;
+    let props;
+    let ref;
+    let t1;
+    let testIdProp;
+    if ($[0] !== t0) {
+        ({ data, color: t1, label, formatX, formatValue, className, ref, "data-testid": testIdProp, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = data;
+        $[3] = formatValue;
+        $[4] = formatX;
+        $[5] = label;
+        $[6] = props;
+        $[7] = ref;
+        $[8] = t1;
+        $[9] = testIdProp;
+    } else {
+        className = $[1];
+        data = $[2];
+        formatValue = $[3];
+        formatX = $[4];
+        label = $[5];
+        props = $[6];
+        ref = $[7];
+        t1 = $[8];
+        testIdProp = $[9];
+    }
+    const color = void 0 === t1 ? "brand" : t1;
+    const testId = useTestId("sparkline", testIdProp);
+    const popoverTestId = testId ? `${testId}--popover` : void 0;
+    const { order } = useDateFormat();
+    const t2 = useId();
+    let t3;
+    if ($[10] !== t2) {
+        let t4;
+        if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+            t4 = /[^\w-]/g;
+            $[12] = t4;
+        } else t4 = $[12];
+        t3 = t2.replace(t4, "");
+        $[10] = t2;
+        $[11] = t3;
+    } else t3 = $[11];
+    const gradientId = `metric-sparkline-${t3}`;
+    const [hover, setHover] = useState(null);
+    const { line, area } = SPARKLINE_COLORS[color];
+    let t4;
+    if ($[13] !== data) {
+        t4 = data.length > 0 ? buildPaths(data.map(_temp)) : null;
+        $[13] = data;
+        $[14] = t4;
+    } else t4 = $[14];
+    const paths = t4;
+    const last = data.length - 1;
+    let t5;
+    if ($[15] !== last) {
+        t5 = (index)=>0 === last ? 0.5 : index / last;
+        $[15] = last;
+        $[16] = t5;
+    } else t5 = $[16];
+    const fractionOf = t5;
+    let t6;
+    if ($[17] !== last) {
+        t6 = (event)=>{
+            const rect = event.currentTarget.getBoundingClientRect();
+            if (last < 0 || 0 === rect.width) return;
+            const ratio = Math.min(Math.max((event.clientX - rect.left) / rect.width, 0), 1);
+            setHover({
+                index: Math.round(ratio * last),
+                left: rect.left,
+                top: rect.top,
+                width: rect.width
+            });
+        };
+        $[17] = last;
+        $[18] = t6;
+    } else t6 = $[18];
+    const handlePointerMove = t6;
+    let t7;
+    if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+        t7 = ()=>setHover(null);
+        $[19] = t7;
+    } else t7 = $[19];
+    const handlePointerLeave = t7;
+    const isHovering = null !== hover;
+    let t8;
+    let t9;
+    if ($[20] !== isHovering) {
+        t8 = ()=>{
+            if (!isHovering) return;
+            const clear = ()=>setHover(null);
+            window.addEventListener("scroll", clear, {
+                capture: true,
+                passive: true
+            });
+            window.addEventListener("resize", clear);
+            return ()=>{
+                window.removeEventListener("scroll", clear, {
+                    capture: true
+                });
+                window.removeEventListener("resize", clear);
+            };
+        };
+        t9 = [
+            isHovering
+        ];
+        $[20] = isHovering;
+        $[21] = t8;
+        $[22] = t9;
+    } else {
+        t8 = $[21];
+        t9 = $[22];
+    }
+    useEffect(t8, t9);
+    const index_0 = hover && hover.index <= last ? hover.index : null;
+    const point = null === index_0 ? void 0 : data[index_0];
+    const fraction = null === index_0 ? 0 : fractionOf(index_0);
+    const flip = fraction > 0.5;
+    let t10;
+    if ($[23] !== formatX || $[24] !== order || $[25] !== point) {
+        t10 = point ? formatX ? formatX(point.x) : "string" != typeof point.x || ISO_DATE.test(point.x) ? formatChartDate(point.x, {
+            order,
+            withYear: true
+        }) || String(point.x) : point.x : null;
+        $[23] = formatX;
+        $[24] = order;
+        $[25] = point;
+        $[26] = t10;
+    } else t10 = $[26];
+    const formattedX = t10;
+    let t11;
+    if ($[27] !== className) {
+        t11 = cn(metricSparklineClasses, className);
+        $[27] = className;
+        $[28] = t11;
+    } else t11 = $[28];
+    const t12 = testId && `${testId}--plot`;
+    let t13;
+    if ($[29] !== area || $[30] !== gradientId || $[31] !== line || $[32] !== paths) {
+        t13 = paths && /*#__PURE__*/ jsxs("svg", {
+            className: "block size-full",
+            viewBox: `0 0 ${paths.width} ${HEIGHT}`,
+            preserveAspectRatio: "none",
+            children: [
+                /*#__PURE__*/ jsx("defs", {
+                    children: /*#__PURE__*/ jsxs("linearGradient", {
+                        id: gradientId,
+                        x1: "0",
+                        y1: "0",
+                        x2: "0",
+                        y2: "1",
+                        children: [
+                            /*#__PURE__*/ jsx("stop", {
+                                offset: "0",
+                                stopColor: area,
+                                stopOpacity: 0.2
+                            }),
+                            /*#__PURE__*/ jsx("stop", {
+                                offset: "1",
+                                stopColor: area,
+                                stopOpacity: 0
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: paths.area,
+                    fill: `url(#${gradientId})`
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: paths.line,
+                    fill: "none",
+                    stroke: line,
+                    strokeWidth: STROKE_WIDTH,
+                    strokeLinejoin: "round",
+                    strokeLinecap: "round",
+                    vectorEffect: "non-scaling-stroke"
+                })
+            ]
+        });
+        $[29] = area;
+        $[30] = gradientId;
+        $[31] = line;
+        $[32] = paths;
+        $[33] = t13;
+    } else t13 = $[33];
+    let t14;
+    if ($[34] !== fraction || $[35] !== point || $[36] !== testId) {
+        t14 = point && /*#__PURE__*/ jsx("svg", {
+            "data-slot": "metric-sparkline-ruler",
+            "data-testid": testId && `${testId}--ruler`,
+            className: metricSparklineRulerClasses,
+            style: {
+                left: `${100 * fraction}%`
+            },
+            children: /*#__PURE__*/ jsx("line", {
+                x1: "0.5",
+                x2: "0.5",
+                y1: "0",
+                y2: "100%",
+                stroke: "var(--color-border-strong-primary)",
+                strokeDasharray: LINE_CURSOR_DASHARRAY
+            })
+        });
+        $[34] = fraction;
+        $[35] = point;
+        $[36] = testId;
+        $[37] = t14;
+    } else t14 = $[37];
+    let t15;
+    if ($[38] !== handlePointerMove || $[39] !== t12 || $[40] !== t13 || $[41] !== t14) {
+        t15 = /*#__PURE__*/ jsxs("div", {
+            "data-slot": "metric-sparkline-plot",
+            "data-testid": t12,
+            "aria-hidden": "true",
+            className: metricSparklinePlotClasses,
+            onPointerMove: handlePointerMove,
+            onPointerLeave: handlePointerLeave,
+            children: [
+                t13,
+                t14
+            ]
+        });
+        $[38] = handlePointerMove;
+        $[39] = t12;
+        $[40] = t13;
+        $[41] = t14;
+        $[42] = t15;
+    } else t15 = $[42];
+    let t16;
+    if ($[43] !== flip || $[44] !== formatValue || $[45] !== formattedX || $[46] !== fraction || $[47] !== hover || $[48] !== label || $[49] !== line || $[50] !== point || $[51] !== popoverTestId) {
+        t16 = hover && point && /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+            className: cn(metricSparklinePopoverClasses, flip && "-translate-x-full"),
+            style: {
+                left: hover.left + fraction * hover.width + (flip ? -POPOVER_OFFSET_X : POPOVER_OFFSET_X),
+                top: hover.top + POPOVER_OFFSET_Y
+            },
+            children: /*#__PURE__*/ jsxs(LineChartHoverPopover, {
+                "data-testid": popoverTestId,
+                children: [
+                    /*#__PURE__*/ jsx(LineChartHoverPopoverTimestamp, {
+                        children: formattedX
+                    }),
+                    /*#__PURE__*/ jsx(ChartHoverCardRow, {
+                        color: line,
+                        label: label,
+                        value: Number.isFinite(point.value) ? point.value : null,
+                        formatValue: formatValue && ((v)=>"number" == typeof v ? formatValue(v) : "—")
+                    })
+                ]
+            })
+        }), document.body);
+        $[43] = flip;
+        $[44] = formatValue;
+        $[45] = formattedX;
+        $[46] = fraction;
+        $[47] = hover;
+        $[48] = label;
+        $[49] = line;
+        $[50] = point;
+        $[51] = popoverTestId;
+        $[52] = t16;
+    } else t16 = $[52];
+    let t17;
+    if ($[53] !== color || $[54] !== props || $[55] !== ref || $[56] !== t11 || $[57] !== t15 || $[58] !== t16 || $[59] !== testId) {
+        t17 = /*#__PURE__*/ jsxs("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "metric-sparkline",
+            "data-testid": testId,
+            "data-color": color,
+            className: t11,
+            children: [
+                t15,
+                t16
+            ]
+        });
+        $[53] = color;
+        $[54] = props;
+        $[55] = ref;
+        $[56] = t11;
+        $[57] = t15;
+        $[58] = t16;
+        $[59] = testId;
+        $[60] = t17;
+    } else t17 = $[60];
+    return t17;
+};
+MetricSparkline.displayName = "MetricSparkline";
+function _temp(d) {
+    return d.value;
+}
+export { MetricSparkline };

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

@@ -6,3 +6,7 @@ export declare const metricTotalValueClasses = "font-sans-display text-lg font-m
 export declare const metricTotalWordClasses = "text-xs font-normal text-text-secondary";
 export declare const metricCaptionClasses = "text-xs text-text-secondary";
 export declare const metricSkeletonLineClasses = "w-full py-4";
+export declare const metricSparklineClasses = "mt-auto w-full px-px";
+export declare const metricSparklinePlotClasses = "relative h-48";
+export declare const metricSparklineRulerClasses = "pointer-events-none absolute top-0 h-full w-px -translate-x-1/2 overflow-visible";
+export declare const metricSparklinePopoverClasses = "pointer-events-none fixed z-(--tooltip-z-index)";

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

@@ -6,4 +6,8 @@ const metricTotalValueClasses = 'font-sans-display text-lg font-medium text-text
 const metricTotalWordClasses = 'text-xs font-normal text-text-secondary';
 const metricCaptionClasses = 'text-xs text-text-secondary';
 const metricSkeletonLineClasses = 'w-full py-4';
-export { metricCaptionClasses, metricHeaderClasses, metricRootClasses, metricSkeletonLineClasses, metricTotalClasses, metricTotalValueClasses, metricTotalWordClasses, metricValueClasses };
+const metricSparklineClasses = 'mt-auto w-full px-px';
+const metricSparklinePlotClasses = 'relative h-48';
+const metricSparklineRulerClasses = 'pointer-events-none absolute top-0 h-full w-px -translate-x-1/2 overflow-visible';
+const metricSparklinePopoverClasses = 'pointer-events-none fixed z-(--tooltip-z-index)';
+export { metricCaptionClasses, metricHeaderClasses, metricRootClasses, metricSkeletonLineClasses, metricSparklineClasses, metricSparklinePlotClasses, metricSparklinePopoverClasses, metricSparklineRulerClasses, metricTotalClasses, metricTotalValueClasses, metricTotalWordClasses, metricValueClasses };

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

@@ -3,5 +3,6 @@ export { MetricCaption, type MetricCaptionProps } from './MetricCaption.js';
 export { MetricDelta, type MetricDeltaProps } from './MetricDelta.js';
 export { MetricHeader, type MetricHeaderProps } from './MetricHeader.js';
 export { MetricSkeleton, type MetricSkeletonProps } from './MetricSkeleton.js';
+export { MetricSparkline, type MetricSparklineColor, type MetricSparklinePoint, type MetricSparklineProps, } from './MetricSparkline.js';
 export { MetricTotal, type MetricTotalConnector, type MetricTotalProps } from './MetricTotal.js';
 export { MetricValue, type MetricValueProps } from './MetricValue.js';

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

@@ -3,5 +3,6 @@ export { MetricCaption } from "./MetricCaption.js";
 export { MetricDelta } from "./MetricDelta.js";
 export { MetricHeader } from "./MetricHeader.js";
 export { MetricSkeleton } from "./MetricSkeleton.js";
+export { MetricSparkline } from "./MetricSparkline.js";
 export { MetricTotal } from "./MetricTotal.js";
 export { MetricValue } from "./MetricValue.js";

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

@@ -5,6 +5,6 @@ export { HorizontalBarStack, type HorizontalBarStackDatum, type HorizontalBarSta
 export { type ChartTimeFormatters, useChartTimeFormatters } from './hooks/index.js';
 export { LineChart, LineChartBody, type LineChartBodyProps, type LineChartDatum, LineChartEmpty, type LineChartEmptyProps, LineChartGrid, type LineChartGridProps, LineChartHoverPopover, LineChartHoverPopoverDot, type LineChartHoverPopoverDotProps, type LineChartHoverPopoverProps, LineChartHoverPopoverRow, type LineChartHoverPopoverRowProps, LineChartHoverPopoverTimestamp, type LineChartHoverPopoverTimestampProps, LineChartLegend, LineChartLegendItem, type LineChartLegendItemProps, type LineChartLegendOrientation, type LineChartLegendProps, LineChartLine, type LineChartLineProps, type LineChartProps, type LineChartSeries, LineChartTooltip, type LineChartTooltipProps, type LineChartTooltipRenderArgs, LineChartXAxis, type LineChartXAxisProps, LineChartYAxis, type LineChartYAxisProps, LineChartZoomBrush, type LineChartZoomBrushProps, LineChartZoomPopover, LineChartZoomPopoverConfirm, type LineChartZoomPopoverConfirmProps, type LineChartZoomPopoverProps, LineChartZoomPopoverRange, type LineChartZoomPopoverRangeProps, type LineChartZoomRange, } from './LineChart/index.js';
 export { type ChartHourCycle, type ChartTimeFormatterOptions, type ChartTimeOrder, formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, withTimezoneChip, } from './lib/index.js';
-export { Metric, MetricCaption, type MetricCaptionProps, MetricDelta, type MetricDeltaProps, MetricHeader, type MetricHeaderProps, type MetricProps, MetricSkeleton, type MetricSkeletonProps, MetricTotal, type MetricTotalConnector, type MetricTotalProps, MetricValue, type MetricValueProps, } from './Metric/index.js';
+export { Metric, MetricCaption, type MetricCaptionProps, MetricDelta, type MetricDeltaProps, MetricHeader, type MetricHeaderProps, type MetricProps, MetricSkeleton, type MetricSkeletonProps, MetricSparkline, type MetricSparklineColor, type MetricSparklinePoint, type MetricSparklineProps, MetricTotal, type MetricTotalConnector, type MetricTotalProps, MetricValue, type MetricValueProps, } from './Metric/index.js';
 export { LegendDot, type LegendDotProps, PieChart, PieChartCenter, PieChartCenterLabel, type PieChartCenterLabelPluralRules, type PieChartCenterLabelProps, type PieChartCenterProps, PieChartCenterValue, type PieChartCenterValueProps, type PieChartDatum, PieChartDonut, type PieChartDonutProps, PieChartLegend, PieChartLegendItem, type PieChartLegendItemProps, PieChartLegendPercent, type PieChartLegendPercentProps, type PieChartLegendPercentVariant, type PieChartLegendProps, PieChartLegendValue, type PieChartLegendValueProps, type PieChartProps, PieChartSkeleton, type PieChartSkeletonProps, } from './PieChart/index.js';
 export type { ChartColor } from './types.js';

package/dist/components/SimpleCharts/index.js

@@ -5,5 +5,5 @@ export { HorizontalBarStack, HorizontalBarStackSkeleton } from "./HorizontalBarS
 export { useChartTimeFormatters } from "./hooks/index.js";
 export { LineChart, LineChartBody, LineChartEmpty, LineChartGrid, LineChartHoverPopover, LineChartHoverPopoverDot, LineChartHoverPopoverRow, LineChartHoverPopoverTimestamp, LineChartLegend, LineChartLegendItem, LineChartLine, LineChartTooltip, LineChartXAxis, LineChartYAxis, LineChartZoomBrush, LineChartZoomPopover, LineChartZoomPopoverConfirm, LineChartZoomPopoverRange } from "./LineChart/index.js";
 export { formatChartDate, formatChartDateTime, formatChartHour, formatChartTimezone, withTimezoneChip } from "./lib/index.js";
-export { Metric, MetricCaption, MetricDelta, MetricHeader, MetricSkeleton, MetricTotal, MetricValue } from "./Metric/index.js";
+export { Metric, MetricCaption, MetricDelta, MetricHeader, MetricSkeleton, MetricSparkline, MetricTotal, MetricValue } from "./Metric/index.js";
 export { LegendDot, PieChart, PieChartCenter, PieChartCenterLabel, PieChartCenterValue, PieChartDonut, PieChartLegend, PieChartLegendItem, PieChartLegendPercent, PieChartLegendValue, PieChartSkeleton } from "./PieChart/index.js";

package/dist/components/SimpleCharts/lib/timeFormatters.d.ts

@@ -10,9 +10,13 @@ export interface ChartTimeFormatterOptions {
 export declare const formatChartHour: (value: unknown, options?: {
     hourCycle?: ChartHourCycle;
 }) => string;
-/** `24 Jan` (day-first) / `Jan 24` (month-first). Year is omitted — axis space is precious. */
+/**
+ * `24 Jan` (day-first) / `Jan 24` (month-first). Year is omitted by default — axis space is
+ * precious; `withYear` gives `24 Jan, 2026` / `Jan 24, 2026` for popovers.
+ */
 export declare const formatChartDate: (value: unknown, options?: {
     order?: ChartTimeOrder;
+    withYear?: boolean;
 }) => string;
 /** Combined `24 Jan 14:32`. Respects both `order` and `hourCycle`. */
 export declare const formatChartDateTime: (value: unknown, options?: ChartTimeFormatterOptions) => string;

package/dist/components/SimpleCharts/lib/timeFormatters.js

@@ -1,10 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { format, isValid } from "date-fns";
+import { format, isValid, parseISO } from "date-fns";
 import { formatTimezone } from "../../../utils/formatDateTime.js";
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
 const toDate = (value)=>{
     if (value instanceof Date) return isValid(value) ? value : null;
     if ('number' == typeof value || 'string' == typeof value) {
-        const d = new Date(value);
+        const d = 'string' == typeof value && DATE_ONLY.test(value) ? parseISO(value) : new Date(value);
         return isValid(d) ? d : null;
     }
     return null;
@@ -25,7 +26,7 @@ const formatChartHour = (value, options = {})=>{
 const formatChartDate = (value, options = {})=>{
     const date = toDate(value);
     if (!date) return '';
-    return format(date, datePattern(options.order ?? 'day-first', false));
+    return format(date, datePattern(options.order ?? 'day-first', options.withYear ?? false));
 };
 const formatChartDateTime = (value, options = {})=>{
     const date = toDate(value);

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "3.4.0",
-  "generatedAt": "2026-10-22T11:42:57.295Z",
+  "version": "4.0.0",
+  "generatedAt": "2026-10-22T12:30:52.881Z",
   "components": [
     {
       "name": "Accordion",
@@ -103713,6 +103713,312 @@
             }
           ]
         },
+        {
+          "name": "MetricSparkline",
+          "props": [
+            {
+              "name": "data",
+              "type": "MetricSparklinePoint[]",
+              "required": true,
+              "description": "The trend over the period, oldest first."
+            },
+            {
+              "name": "color",
+              "type": "MetricSparklineColor | undefined",
+              "required": false,
+              "description": "Line colour. Independent of the `MetricDelta` sentiment — set both. `brand` (default) ·\n`positive` (success) · `negative` (danger) · `neutral` (slate).",
+              "defaultValue": "brand"
+            },
+            {
+              "name": "label",
+              "type": "ReactNode",
+              "required": false,
+              "description": "Series name on the hover popover row (Figma \"Attribute\")."
+            },
+            {
+              "name": "formatX",
+              "type": "((x: string | number | Date) => ReactNode) | undefined",
+              "required": false,
+              "description": "Formats the hovered point's `x` for the popover. Defaults to `1 Jan, 2026` for dates."
+            },
+            {
+              "name": "formatValue",
+              "type": "((value: number) => ReactNode) | undefined",
+              "required": false,
+              "description": "Formats the hovered value. Defaults to `toLocaleString('en-US')`."
+            },
+            {
+              "name": "defaultChecked",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultValue",
+              "type": "string | number | readonly string[] | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressContentEditableWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressHydrationWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "accessKey",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCapitalize",
+              "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "contentEditable",
+              "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+              "required": false
+            },
+            {
+              "name": "contextMenu",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "draggable",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "enterKeyHint",
+              "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+              "required": false
+            },
+            {
+              "name": "hidden",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "lang",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "nonce",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "spellCheck",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "tabIndex",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "translate",
+              "type": "\"yes\" | \"no\" | undefined",
+              "required": false
+            },
+            {
+              "name": "radioGroup",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "role",
+              "type": "AriaRole | undefined",
+              "required": false
+            },
+            {
+              "name": "about",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "content",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "datatype",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inlist",
+              "type": "any",
+              "required": false
+            },
+            {
+              "name": "prefix",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "property",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rel",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "resource",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rev",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "typeof",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "vocab",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCorrect",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoSave",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemProp",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemScope",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "itemType",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemID",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemRef",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "results",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "security",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "unselectable",
+              "type": "\"off\" | \"on\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popover",
+              "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTargetAction",
+              "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTarget",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inert",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
+            },
+            {
+              "name": "inputMode",
+              "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+              "required": false,
+              "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+            },
+            {
+              "name": "is",
+              "type": "string | undefined",
+              "required": false,
+              "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+            },
+            {
+              "name": "exportparts",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+            },
+            {
+              "name": "part",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+            },
+            {
+              "name": "data-testid",
+              "type": "string | undefined",
+              "required": false
+            }
+          ]
+        },
         {
           "name": "MetricTotal",
           "props": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "4.0.0",
+  "version": "4.1.0-rc-feat-WDS-192.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",