@wallarm-org/design-system 0.39.0 → 0.39.1

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

@@ -1,7 +1,7 @@
 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 { 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;
@@ -34,11 +34,7 @@ const LineChartLine = ({ seriesKey, curve = 'monotone', disableAnimation = false
         strokeLinecap: "round",
         strokeLinejoin: "round",
         dot: false,
-        activeDot: {
-            r: LINE_ACTIVE_DOT_RADIUS,
-            stroke,
-            strokeWidth: 0
-        },
+        activeDot: false,
         opacity: opacity,
         connectNulls: connectNulls,
         isAnimationActive: disableAnimation ? false : 'auto',

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

@@ -2,15 +2,15 @@ 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 { HOVER_POPOVER_TOP, LINE_CURSOR_DASHARRAY } 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)',
+    stroke: 'var(--color-border-strong-primary)',
     strokeWidth: 1,
-    strokeDasharray: '4 4'
+    strokeDasharray: LINE_CURSOR_DASHARRAY
 };
 const TOOLTIP_ALLOW_ESCAPE = {
     x: false,

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

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { XAxis } from "recharts";
-import { LINE_AXIS_TICK_TEXT_PROPS } from "./constants.js";
 import { LineChartDataContext } from "./LineChartContext.js";
+import { renderAxisTick } from "./lib/renderAxisTick.js";
 const DENSITY_MIN_TICK_GAP = {
     sparse: 64,
     normal: 32,
@@ -11,7 +11,16 @@ const DENSITY_MIN_TICK_GAP = {
 const AXIS_LINE_PROPS = {
     stroke: 'var(--color-border-primary-light)'
 };
-const LineChartXAxis = ({ tickFormatter, density, interval, tickCount, ticks, minTickGap, domain, padding, type, hideTicks = false, axisLine = true })=>{
+const renderTick = renderAxisTick(({ index, visibleTicksCount })=>{
+    if (0 === index) return {
+        anchor: 'start'
+    };
+    if (index === visibleTicksCount - 1) return {
+        anchor: 'end'
+    };
+    return {};
+});
+const LineChartXAxis = ({ tickFormatter, density, interval = 'preserveStartEnd', tickCount, ticks, minTickGap, domain, padding, type, hideTicks = false, axisLine = true })=>{
     const dataCtx = useContext(LineChartDataContext);
     const xKey = dataCtx?.xKey ?? 'x';
     const resolvedMinTickGap = minTickGap ?? (density ? DENSITY_MIN_TICK_GAP[density] : void 0);
@@ -20,7 +29,7 @@ const LineChartXAxis = ({ tickFormatter, density, interval, tickCount, ticks, mi
         type: type,
         tickLine: false,
         axisLine: axisLine ? AXIS_LINE_PROPS : false,
-        tick: hideTicks ? false : LINE_AXIS_TICK_TEXT_PROPS,
+        tick: hideTicks ? false : renderTick,
         tickFormatter: tickFormatter,
         interval: interval,
         tickCount: tickCount,

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

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

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

@@ -1,7 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
-import { ReferenceArea } from "recharts";
+import { ReferenceArea, usePlotArea } from "recharts";
+import { formatChartDateTime } from "../lib/timeFormatters.js";
 import { lineChartZoomCursorPopoverClasses } from "./classes.js";
 import { useZoomPendingListeners } from "./hooks/useZoomPendingListeners.js";
 import { LineChartDataContext, LineChartZoomContext } from "./LineChartContext.js";
@@ -9,12 +10,24 @@ import { LineChartZoomPopover } from "./LineChartZoomPopover.js";
 import { LineChartZoomPopoverConfirm } from "./LineChartZoomPopoverConfirm.js";
 import { LineChartZoomPopoverRange } from "./LineChartZoomPopoverRange.js";
 import { formatRange as formatRange_js_formatRange } from "./lib/formatRange.js";
+const defaultFormatRange = formatRange_js_formatRange((value)=>formatChartDateTime(value) || String(value));
 const POPOVER_OFFSET_X = 12;
-const POPOVER_OFFSET_Y = 12;
-const LineChartZoomBrush = ({ disabled = false, formatRange = formatRange_js_formatRange, confirmLabel = 'Zoom in', container })=>{
+const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange, confirmLabel = 'Zoom in', container })=>{
     const dataCtx = useContext(LineChartDataContext);
     const zoomCtx = useContext(LineChartZoomContext);
     const popoverRef = useRef(null);
+    const plotArea = usePlotArea();
+    const rootRef = zoomCtx?.rootRef;
+    const centerY = useMemo(()=>{
+        if (!plotArea || !rootRef?.current) return null;
+        const surface = rootRef.current.querySelector('.recharts-surface');
+        if (!surface) return null;
+        const rect = surface.getBoundingClientRect();
+        return rect.top + plotArea.y + plotArea.height / 2;
+    }, [
+        plotArea,
+        rootRef
+    ]);
     const registerEnabled = zoomCtx?.registerEnabled;
     useEffect(()=>{
         if (disabled || !registerEnabled) return;
@@ -27,7 +40,6 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = formatRange_js_for
     const pending = zoomCtx?.pending ?? null;
     const cancelPending = zoomCtx?.cancelPending;
     const confirmZoom = zoomCtx?.confirmZoom;
-    const rootRef = zoomCtx?.rootRef;
     useZoomPendingListeners({
         enabled: null !== pending,
         rootRef,
@@ -67,9 +79,9 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = formatRange_js_for
         "data-zoom-state": isPending ? 'pending' : 'dragging',
         className: lineChartZoomCursorPopoverClasses,
         style: {
-            top: popoverPosition.clientY - POPOVER_OFFSET_Y,
+            top: centerY ?? popoverPosition.clientY,
             left: popoverPosition.clientX + POPOVER_OFFSET_X,
-            transform: 'translateY(-100%)',
+            transform: 'translateY(-50%)',
             pointerEvents: isPending ? 'auto' : 'none'
         },
         onMouseDown: (e)=>e.stopPropagation(),
@@ -92,8 +104,7 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = formatRange_js_for
                 x2: range.to,
                 fill: "var(--color-states-primary-hover)",
                 fillOpacity: 1,
-                stroke: "var(--color-border-primary-light)",
-                strokeOpacity: 1,
+                stroke: "none",
                 ifOverflow: "visible"
             }) : null,
             popoverContent ? /*#__PURE__*/ createPortal(popoverContent, container ?? document.body) : null

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

@@ -6,7 +6,7 @@ const lineChartZoomCursorPopoverClasses = "fixed z-30 pointer-events-none";
 const lineChartLegendVariants = cva('flex', {
     variants: {
         orientation: {
-            horizontal: 'flex-row flex-wrap items-center gap-6 pl-12 py-2',
+            horizontal: 'flex-row flex-wrap items-center gap-6 pl-12 py-2 [&:last-child]:pb-8',
             vertical: 'flex-col gap-6 px-12 py-2 max-w-160'
         },
         align: {

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

@@ -1,8 +1,8 @@
 export { CHART_PALETTE_FILL as LINE_STROKE_FILL, resolveChartColor as resolveSeriesColor, } from '../lib/chartPalette';
 export declare const LINE_STROKE_WIDTH = 2;
 export declare const LINE_DASH_DASHARRAY = "6 4";
-export declare const LINE_ACTIVE_DOT_RADIUS = 4;
 export declare const LINE_GRID_DASHARRAY = "4 4";
+export declare const LINE_CURSOR_DASHARRAY = "4 2";
 export declare const LINE_ANIMATION_DURATION = 400;
 export declare const LINE_ANIMATION_BEGIN = 0;
 export declare const LINE_INACTIVE_OPACITY = 0.3;

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

@@ -1,8 +1,8 @@
 import { CHART_PALETTE_FILL, resolveChartColor } from "../lib/chartPalette.js";
 const LINE_STROKE_WIDTH = 2;
 const LINE_DASH_DASHARRAY = '6 4';
-const LINE_ACTIVE_DOT_RADIUS = 4;
 const LINE_GRID_DASHARRAY = '4 4';
+const LINE_CURSOR_DASHARRAY = '4 2';
 const LINE_ANIMATION_DURATION = 400;
 const LINE_ANIMATION_BEGIN = 0;
 const LINE_INACTIVE_OPACITY = 0.3;
@@ -23,4 +23,4 @@ const LINE_AXIS_TICK_TEXT_PROPS = {
     fontFamily: 'var(--font-sans)',
     fontWeight: 400
 };
-export { HOVER_POPOVER_TOP, LINE_ACTIVE_DOT_RADIUS, LINE_ANIMATION_BEGIN, LINE_ANIMATION_DURATION, LINE_AXIS_TICK_TEXT_PROPS, LINE_CARD_HEIGHT, LINE_DASH_DASHARRAY, LINE_DEFAULT_BODY_MARGIN, LINE_GRID_DASHARRAY, LINE_HEADER_HEIGHT, LINE_INACTIVE_OPACITY, CHART_PALETTE_FILL as LINE_STROKE_FILL, LINE_STROKE_WIDTH, LINE_X_LABEL_HEIGHT, LINE_Y_LABEL_WIDTH, resolveChartColor as resolveSeriesColor };
+export { HOVER_POPOVER_TOP, LINE_ANIMATION_BEGIN, LINE_ANIMATION_DURATION, LINE_AXIS_TICK_TEXT_PROPS, LINE_CARD_HEIGHT, LINE_CURSOR_DASHARRAY, LINE_DASH_DASHARRAY, LINE_DEFAULT_BODY_MARGIN, LINE_GRID_DASHARRAY, LINE_HEADER_HEIGHT, LINE_INACTIVE_OPACITY, CHART_PALETTE_FILL as LINE_STROKE_FILL, LINE_STROKE_WIDTH, LINE_X_LABEL_HEIGHT, LINE_Y_LABEL_WIDTH, resolveChartColor as resolveSeriesColor };

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

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

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

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

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { TextAnchor } from 'recharts/types/component/Text';
+import type { XAxisTickContentProps, YAxisTickContentProps } from 'recharts/types/util/types';
+export interface AxisTickDecision {
+    /** When `true`, render nothing for this tick. */
+    skip?: boolean;
+    /** Override the axis-derived text anchor. */
+    anchor?: TextAnchor;
+}
+type AxisTickProps = XAxisTickContentProps | YAxisTickContentProps;
+type Decide<T extends AxisTickProps> = (props: T) => AxisTickDecision;
+export declare const renderAxisTick: <T extends AxisTickProps>(decide?: Decide<T>) => (props: T) => ReactNode;
+export {};

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

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { Text } from "recharts";
+import { LINE_AXIS_TICK_TEXT_PROPS } from "../constants.js";
+const renderAxisTick = (decide)=>(props)=>{
+        const decision = decide?.(props) ?? {};
+        if (decision.skip) return null;
+        const { x, y, payload, textAnchor, verticalAnchor, tickFormatter, orientation } = props;
+        const value = tickFormatter ? tickFormatter(payload.value, payload.index) : payload.value;
+        const isHorizontal = 'top' === orientation || 'bottom' === orientation;
+        const anchorToCoordinate = null != decision.anchor;
+        return /*#__PURE__*/ jsx(Text, {
+            x: anchorToCoordinate && isHorizontal ? payload.coordinate : x,
+            y: anchorToCoordinate && !isHorizontal ? payload.coordinate : y,
+            textAnchor: decision.anchor ?? textAnchor,
+            verticalAnchor: verticalAnchor,
+            ...LINE_AXIS_TICK_TEXT_PROPS,
+            children: value
+        });
+    };
+export { renderAxisTick };

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

@@ -3,7 +3,7 @@ const jitter = (i, seed, salt)=>{
     return v - Math.floor(v);
 };
 const genHourly = (count, seed = 1)=>{
-    const start = Date.UTC(2025, 0, 1, 0, 0, 0);
+    const start = new Date(2025, 0, 1, 0, 0, 0).getTime();
     const out = [];
     for(let i = 0; i < count; i++){
         const t = start + 60 * i * 60000;
@@ -20,7 +20,7 @@ const genHourly = (count, seed = 1)=>{
     return out;
 };
 const genDaily = (count)=>{
-    const start = Date.UTC(2024, 0, 1, 0, 0, 0);
+    const start = new Date(2024, 0, 1, 0, 0, 0).getTime();
     const out = [];
     for(let i = 0; i < count; i++){
         const t = start + 24 * i * 3600000;
@@ -90,7 +90,7 @@ const dailyData60 = genDaily(60);
 const hourlyData1000 = genHourly(1000);
 const singlePointData = [
     {
-        timestamp: Date.UTC(2025, 0, 1, 12, 0, 0),
+        timestamp: new Date(2025, 0, 1, 12, 0, 0).getTime(),
         requests: 142
     }
 ];

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

@@ -7,11 +7,6 @@ export interface ChartTimeFormatters {
     formatHourWithTimezone: (value: unknown) => ReactNode;
     formatDateWithTimezone: (value: unknown) => ReactNode;
     formatDateTimeWithTimezone: (value: unknown) => ReactNode;
-    /** `from → to` using `formatDate`. Suitable for `<LineChartZoomBrush formatRange>`. */
-    formatDateRange: (range: {
-        from: unknown;
-        to: unknown;
-    }) => string;
 }
 /**
  * Memoised bundle of chart time formatters bound to `DateFormatProvider`

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

@@ -22,8 +22,7 @@ const useChartTimeFormatters = ()=>{
             formatTimezone: formatChartTimezone,
             formatHourWithTimezone: withTimezoneChip(formatHour),
             formatDateWithTimezone: withTimezoneChip(formatDate),
-            formatDateTimeWithTimezone: withTimezoneChip(formatDateTime),
-            formatDateRange: ({ from, to })=>`${formatDate(from)} → ${formatDate(to)}`
+            formatDateTimeWithTimezone: withTimezoneChip(formatDateTime)
         };
     }, [
         order,

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.38.2",
-  "generatedAt": "2026-05-18T13:33:44.697Z",
+  "version": "0.39.0",
+  "generatedAt": "2026-05-19T14:54:13.372Z",
   "components": [
     {
       "name": "Accordion",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.39.0",
+  "version": "0.39.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",