@ledgerhq/lumen-ui-react-visualization 0.1.15 → 0.1.17

package/dist/lib/Components/CartesianChart/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE7E,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/D;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/D;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/dist/lib/Components/CartesianChart/utils.d.ts

@@ -2,16 +2,27 @@ import { ChartInset } from '../../utils/types';
 import { CartesianChartProps } from './types';
 export declare const DEFAULT_HEIGHT = 160;
 /**
- * Internal buffer that prevents SVG content (labels, points, ticks) from being
- * clipped at the edge of the container. Compensated by negative margins on the
- * wrapper so the chart's visual footprint stays unchanged.
+ * Internal buffer added around the drawing area so SVG content (labels, points,
+ * ticks) drawn at the edges is not clipped. The SVG canvas is enlarged by this
+ * buffer on every side and shifted back by {@link OVERFLOW_OFFSET} so
+ * the chart's layout footprint (and the drawing area) stays exactly the
+ * consumer-provided width/height.
  */
 export declare const OVERFLOW_BUFFER: ChartInset;
-export declare const OVERFLOW_NEGATIVE_MARGIN: {
-    marginTop: number;
-    marginRight: number;
-    marginBottom: number;
-    marginLeft: number;
+/**
+ * Top/left offset applied to the (enlarged) SVG so its drawing area aligns with
+ * the container's top-left. The extra width/height added to the SVG overflows
+ * symmetrically on every side via `overflow: visible`.
+ *
+ * Uses `position: relative` rather than negative margins: a negative
+ * `margin-top` would collapse through the container (which has no border,
+ * padding, or block-formatting context), shifting the whole container instead
+ * of offsetting the SVG inside it.
+ */
+export declare const OVERFLOW_OFFSET: {
+    position: "relative";
+    top: number;
+    left: number;
 };
 export declare const ZERO_PADDING: ChartInset;
 export declare const resolveInset: (inset: CartesianChartProps["inset"]) => ChartInset;

package/dist/lib/Components/CartesianChart/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,UAK7B,CAAC;AACF,eAAO,MAAM,wBAAwB;;;;;CAKpC,CAAC;AACF,eAAO,MAAM,YAAY,EAAE,UAK1B,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,mBAAmB,CAAC,OAAO,CAAC,KAClC,UAqBF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,SAAS,mBAAmB,CAAC,aAAa,CAAC,KAC1C,UAQF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,UAK7B,CAAC;AACF;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;;;CAI3B,CAAC;AACF,eAAO,MAAM,YAAY,EAAE,UAK1B,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,mBAAmB,CAAC,OAAO,CAAC,KAClC,UAqBF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,SAAS,mBAAmB,CAAC,aAAa,CAAC,KAC1C,UAQF,CAAC"}

package/dist/lib/Components/CartesianChart/utils.js

@@ -1,19 +1,18 @@
-const m = 160, r = {
-  top: 50,
-  right: 50,
-  bottom: 50,
-  left: 50
+const l = 160, r = {
+  top: 25,
+  right: 25,
+  bottom: 25,
+  left: 25
 }, f = {
-  marginTop: -50,
-  marginRight: -50,
-  marginBottom: -50,
-  marginLeft: -50
+  position: "relative",
+  top: -25,
+  left: -25
 }, e = {
   top: 0,
   right: 0,
   bottom: 0,
   left: 0
-}, l = (t) => {
+}, m = (t) => {
   let o;
   return t === void 0 ? o = e : typeof t == "number" ? o = { top: t, right: t, bottom: t, left: t } : o = {
     top: t.top ?? 0,
@@ -26,17 +25,17 @@ const m = 160, r = {
     bottom: o.bottom + r.bottom,
     left: o.left + r.left
   };
-}, g = (t) => t === void 0 ? e : {
+}, b = (t) => t === void 0 ? e : {
   top: t.top ?? 0,
   right: t.right ?? 0,
   bottom: t.bottom ?? 0,
   left: t.left ?? 0
 };
 export {
-  m as DEFAULT_HEIGHT,
+  l as DEFAULT_HEIGHT,
   r as OVERFLOW_BUFFER,
-  f as OVERFLOW_NEGATIVE_MARGIN,
+  f as OVERFLOW_OFFSET,
   e as ZERO_PADDING,
-  g as resolveAxisPadding,
-  l as resolveInset
+  b as resolveAxisPadding,
+  m as resolveInset
 };

package/dist/lib/Components/Line/utils.d.ts

@@ -5,6 +5,10 @@ type Point = [x: number, y: number];
  *
  * When `xData` contains numeric values, those values are fed into the scale
  * instead of the array index so the points honour a numeric X domain.
+ *
+ * When `xData` is provided, iteration is capped at `xData.length` so a series
+ * with more points than the axis has labels does not overflow past the right
+ * edge of the chart. The axis is treated as authoritative for the X domain.
  */
 export declare const toScaledPoints: (data: (number | null)[], xScale: ChartScaleFunction, yScale: NumericScale, xData?: readonly (string | number)[]) => Point[] | null;
 /**

package/dist/lib/Components/Line/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Line/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,kBAAkB,EAClB,WAAW,EACX,YAAY,EACb,MAAM,mBAAmB,CAAC;AAE3B,KAAK,KAAK,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AAEpC;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GACzB,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,EACvB,QAAQ,kBAAkB,EAC1B,QAAQ,YAAY,EACpB,QAAQ,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KACnC,KAAK,EAAE,GAAG,IAmBZ,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,QAAQ,KAAK,EAAE,KAAG,MAAM,GAAG,IAOxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,KAAK,EAAE,EACf,aAAa,WAAW,KACvB,MAAM,GAAG,IAUX,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Line/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,kBAAkB,EAClB,WAAW,EACX,YAAY,EACb,MAAM,mBAAmB,CAAC;AAE3B,KAAK,KAAK,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AAEpC;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,GACzB,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,EACvB,QAAQ,kBAAkB,EAC1B,QAAQ,YAAY,EACpB,QAAQ,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KACnC,KAAK,EAAE,GAAG,IAoBZ,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,QAAQ,KAAK,EAAE,KAAG,MAAM,GAAG,IAOxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,KAAK,EAAE,EACf,aAAa,WAAW,KACvB,MAAM,GAAG,IAUX,CAAC"}

package/dist/lib/Components/Line/utils.js

@@ -1,22 +1,22 @@
 import { isCategoricalScale as p } from "../../utils/scales/scales.js";
-import h from "../../../node_modules/d3-shape/src/line.js";
+import f from "../../../node_modules/d3-shape/src/line.js";
 import { bumpX as s } from "../../../node_modules/d3-shape/src/curve/bump.js";
-import f from "../../../node_modules/d3-shape/src/area.js";
-const v = (n, t, e, o) => {
-  const u = [];
-  for (let r = 0; r < n.length; r++) {
-    const i = n[r];
-    if (i === null) continue;
-    const l = o && typeof o[r] == "number" ? o[r] : r, c = p(t) ? (t(l) ?? 0) + t.bandwidth() / 2 : t(l), m = e(i);
-    u.push([c, m]);
+import y from "../../../node_modules/d3-shape/src/area.js";
+const d = (o, t, e, n) => {
+  const i = [], c = n ? Math.min(o.length, n.length) : o.length;
+  for (let r = 0; r < c; r++) {
+    const l = o[r];
+    if (l === null) continue;
+    const u = n && typeof n[r] == "number" ? n[r] : r, m = p(t) ? (t(u) ?? 0) + t.bandwidth() / 2 : t(u), h = e(l);
+    i.push([m, h]);
   }
-  return u.length >= 2 ? u : null;
-}, P = (n) => h().x((t) => t[0]).y((t) => t[1]).curve(s)(n) ?? null, B = (n, t) => {
+  return i.length >= 2 ? i : null;
+}, B = (o) => f().x((t) => t[0]).y((t) => t[1]).curve(s)(o) ?? null, C = (o, t) => {
   const e = t.y + t.height;
-  return f().x((o) => o[0]).y0(e).y1((o) => o[1]).curve(s)(n) ?? null;
+  return y().x((n) => n[0]).y0(e).y1((n) => n[1]).curve(s)(o) ?? null;
 };
 export {
-  B as buildAreaPath,
-  P as buildLinePath,
-  v as toScaledPoints
+  C as buildAreaPath,
+  B as buildLinePath,
+  d as toScaledPoints
 };

package/dist/lib/Components/LineChart/LineChart.d.ts

@@ -1,3 +1,3 @@
 import { LineChartProps } from './types';
-export declare function LineChart({ series, showArea, areaType, showXAxis, showYAxis, xAxis, yAxis, width, height, inset, enableScrubbing, onScrubberPositionChange, animate, children, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function LineChart({ series, showArea, areaType, showXAxis, showYAxis, xAxis, yAxis, width, height, inset, enableScrubbing, onScrubberPositionChange, animate, magnetRadius, children, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/lib/Components/LineChart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/LineChart/LineChart.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAgB,EAChB,QAAqB,EACrB,SAAiB,EACjB,SAAiB,EACjB,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAY,EACZ,KAAK,EACL,eAAe,EACf,wBAAwB,EACxB,OAAO,EACP,QAAQ,GACT,EAAE,cAAc,2CA2EhB"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAgB,EAChB,QAAqB,EACrB,SAAiB,EACjB,SAAiB,EACjB,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAY,EACZ,KAAK,EACL,eAAe,EACf,wBAAwB,EACxB,OAAO,EACP,YAAY,EACZ,QAAQ,GACT,EAAE,cAAc,2CA8DhB"}

package/dist/lib/Components/LineChart/LineChart.js

@@ -1,89 +1,79 @@
-import { jsxs as j, jsx as e } from "react/jsx-runtime";
-import { useMemo as F } from "react";
-import { DEFAULT_AXIS_WIDTH as U, YAxis as V } from "../Axis/YAxis/YAxis.js";
-import { DEFAULT_AXIS_HEIGHT as m, XAxis as W } from "../Axis/XAxis/XAxis.js";
-import { CartesianChart as h } from "../CartesianChart/CartesianChart.js";
-import { Line as v } from "../Line/Line.js";
-function J({
-  series: r,
-  showArea: d = !1,
-  areaType: c = "gradient",
-  showXAxis: t = !1,
-  showYAxis: i = !1,
-  xAxis: f,
-  yAxis: l,
-  width: x = "100%",
-  height: y = 160,
-  inset: T,
-  enableScrubbing: g,
-  onScrubberPositionChange: u,
-  animate: A,
-  children: D
+import { jsxs as b, jsx as n } from "react/jsx-runtime";
+import { useMemo as j } from "react";
+import { defaultYAxisProps as y, DEFAULT_AXIS_HEIGHT as m, defaultXAxisProps as A } from "../Axis/Axis.constants.js";
+import { CartesianChart as E } from "../CartesianChart/CartesianChart.js";
+import { XAxis as H } from "../Axis/XAxis/XAxis.js";
+import { YAxis as T } from "../Axis/YAxis/YAxis.js";
+import { Line as _ } from "../Line/Line.js";
+function k({
+  series: e,
+  showArea: f = !1,
+  areaType: a = "gradient",
+  showXAxis: i = !1,
+  showYAxis: o = !1,
+  xAxis: d,
+  yAxis: s,
+  width: l = "100%",
+  height: u = 160,
+  inset: x,
+  enableScrubbing: c,
+  onScrubberPositionChange: g,
+  animate: C,
+  magnetRadius: I,
+  children: L
 }) {
-  const {
-    scaleType: C,
-    data: I,
-    domain: P,
-    ...n
-  } = f ?? {}, {
-    scaleType: L,
-    data: S,
-    domain: _,
-    ...o
-  } = l ?? {}, b = {
-    scaleType: C,
-    data: I,
-    domain: P
-  }, E = {
-    scaleType: L,
-    data: S,
-    domain: _
-  }, H = F(() => {
-    if (!t && !i) return;
-    const a = n.position === "top" ? "top" : "bottom", s = o.position === "end" ? "right" : "left", p = o.width ?? U;
-    return {
-      top: t && a === "top" ? m : 0,
-      bottom: t && a === "bottom" ? m : 0,
-      left: i && s === "left" ? p : 0,
-      right: i && s === "right" ? p : 0
-    };
+  const r = {
+    ...A,
+    ...d
+  }, t = {
+    ...y,
+    ...s
+  }, P = j(() => {
+    if (!(!i && !o))
+      return {
+        top: i && r.position === "top" ? m : 0,
+        bottom: i && r.position === "bottom" ? m : 0,
+        left: o && t.position === "start" ? t.width : 0,
+        right: o && t.position === "end" ? t.width : 0
+      };
   }, [
-    t,
     i,
-    n.position,
-    o.position,
-    o.width
+    o,
+    r?.position,
+    t?.position,
+    t?.width
   ]);
-  return /* @__PURE__ */ j(
-    h,
+  return /* @__PURE__ */ b(
+    E,
     {
-      series: r ?? [],
-      xAxis: b,
-      yAxis: E,
-      width: x,
-      height: y,
-      inset: T,
-      axisPadding: H,
-      enableScrubbing: g,
-      onScrubberPositionChange: u,
-      animate: A,
+      series: e ?? [],
+      xAxis: r,
+      yAxis: t,
+      width: l,
+      height: u,
+      inset: x,
+      axisPadding: P,
+      enableScrubbing: c,
+      onScrubberPositionChange: g,
+      animate: C,
+      magnetRadius: I,
       children: [
-        t && /* @__PURE__ */ e(W, { ...n }),
-        i && /* @__PURE__ */ e(V, { ...o }),
-        r?.map((a) => /* @__PURE__ */ e(
-          v,
+        i && /* @__PURE__ */ n(H, { ...r }),
+        o && /* @__PURE__ */ n(T, { ...t }),
+        e?.map((p) => /* @__PURE__ */ n(
+          _,
           {
-            seriesId: a.id,
-            showArea: d,
-            areaType: c
+            seriesId: p.id,
+            showArea: f,
+            areaType: a
           },
-          a.id
+          p.id
         )),
-        D
+        L
       ]
     }
   );
 }
 export {
-  J as LineChart
+  k as LineChart
 };

package/dist/lib/Components/LineChart/__stories__/chartStoryFixtures.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Shared fixtures for the Visualization Storybook stories.
+ *
+ * Every chart story renders through `<LineChart>` (never `<CartesianChart>`)
+ * and, where it makes sense, reuses the same dimensions and series so the
+ * examples stay visually consistent across the main component and its
+ * sub-components.
+ */
+/** Standard chart width (CSS length) shared by every story. */
+export declare const CHART_WIDTH = "100%";
+/** Standard chart height (px) shared by every story. */
+export declare const CHART_HEIGHT = 250;
+/**
+ * Canonical single-series dataset reused across stories. Declared with
+ * `satisfies` so `data` stays a concrete `number[]` (handy for index lookups
+ * in tooltip/label stories) while remaining assignable to `Series[]`.
+ */
+export declare const sampleSeries: {
+    id: string;
+    stroke: string;
+    data: number[];
+}[];
+/** Canonical two-series dataset for multi-line examples. */
+export declare const multiSeries: {
+    id: string;
+    label: string;
+    stroke: string;
+    data: number[];
+}[];
+/**
+ * Dense, deterministic single-series dataset (160 points) shaped like a real
+ * price series: a seeded random walk with mild mean reversion and occasional
+ * larger moves. Deterministic so stories (and visual snapshots) render
+ * identically every time. Useful for features that need many data points to
+ * read clearly, such as the magnetic scrubber: the scrubber glides over the
+ * many ordinary points but snaps onto the few magnetic ones.
+ */
+export declare const denseData: number[];
+export declare const denseSeries: {
+    id: string;
+    stroke: string;
+    data: number[];
+}[];
+/** Month labels aligned to the 14-point `sampleSeries`, for axis/scrubber stories. */
+export declare const monthLabels: string[];
+//# sourceMappingURL=chartStoryFixtures.d.ts.map

package/dist/lib/Components/LineChart/__stories__/chartStoryFixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartStoryFixtures.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/LineChart/__stories__/chartStoryFixtures.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,+DAA+D;AAC/D,eAAO,MAAM,WAAW,SAAS,CAAC;AAElC,wDAAwD;AACxD,eAAO,MAAM,YAAY,MAAM,CAAC;AAEhC;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;GAML,CAAC;AAErB,4DAA4D;AAC5D,eAAO,MAAM,WAAW;;;;;GAaJ,CAAC;AAErB;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,UAqBlB,CAAC;AAEL,eAAO,MAAM,WAAW;;;;GAEJ,CAAC;AAErB,sFAAsF;AACtF,eAAO,MAAM,WAAW,UAevB,CAAC"}

package/dist/lib/Components/LineChart/__stories__/cryptoChartData.d.ts

@@ -0,0 +1,85 @@
+import { FormattedValue } from '@ledgerhq/lumen-ui-react';
+import { ScrubberTooltipContent } from '../../Scrubber';
+/**
+ * Deterministic fixtures and helpers backing the interactive LineChart story.
+ *
+ * This lives outside the story's render on purpose: composing the chart with
+ * design-system components is what the story demonstrates, while generating
+ * realistic market data is an app concern that consumers own themselves.
+ */
+export type Period = '24H' | '1W' | '1M' | '6M' | '1Y' | '5Y' | 'All';
+export type TransactionType = 'buy' | 'sell';
+export type Transaction = {
+    type: TransactionType;
+    value: number;
+};
+export type ChartMarker = {
+    index: number;
+    /**
+     * A single entry is a standalone transaction; multiple entries are a cluster
+     * of transactions that sit too close together to display individually.
+     */
+    transactions: Transaction[];
+};
+export type ChartModel = {
+    data: number[];
+    markers: ChartMarker[];
+    markerByIndex: Map<number, ChartMarker>;
+    average: number;
+    isPositive: boolean;
+    highIndex: number;
+    lowIndex: number;
+    yDomain: {
+        min: number;
+        max: number;
+    };
+    xTicks: number[];
+    yTicks: number[];
+};
+type PeriodConfig = {
+    points: number;
+    label: string;
+    spanDays: number;
+    seed: number;
+    dateFormat: Intl.DateTimeFormatOptions;
+};
+export declare const PERIODS: Record<Period, PeriodConfig>;
+export declare const ACTIONS: readonly [{
+    readonly label: "Receive";
+    readonly appearance: "base";
+    readonly icon: {
+        ({ ref, className, disabled, ...props }: Omit<import('@ledgerhq/lumen-ui-react/Icon').IconProps, "children">): import('react').FunctionComponentElement<import('@ledgerhq/lumen-ui-react/Icon').IconProps>;
+        displayName: string;
+    };
+}, {
+    readonly label: "Buy";
+    readonly appearance: "gray";
+    readonly icon: {
+        ({ ref, className, disabled, ...props }: Omit<import('@ledgerhq/lumen-ui-react/Icon').IconProps, "children">): import('react').FunctionComponentElement<import('@ledgerhq/lumen-ui-react/Icon').IconProps>;
+        displayName: string;
+    };
+}, {
+    readonly label: "Sell";
+    readonly appearance: "gray";
+    readonly icon: {
+        ({ ref, className, disabled, ...props }: Omit<import('@ledgerhq/lumen-ui-react/Icon').IconProps, "children">): import('react').FunctionComponentElement<import('@ledgerhq/lumen-ui-react/Icon').IconProps>;
+        displayName: string;
+    };
+}, {
+    readonly label: "Send";
+    readonly appearance: "gray";
+    readonly icon: {
+        ({ ref, className, disabled, ...props }: Omit<import('@ledgerhq/lumen-ui-react/Icon').IconProps, "children">): import('react').FunctionComponentElement<import('@ledgerhq/lumen-ui-react/Icon').IconProps>;
+        displayName: string;
+    };
+}];
+export declare const usdFormatter: (value: number) => FormattedValue;
+export declare const formatUsd: (value: number) => string;
+export declare const getMarkerColor: (marker: ChartMarker) => string;
+export declare const getMarkerTooltip: (marker: ChartMarker) => ScrubberTooltipContent;
+/** Builds the full deterministic dataset (series, markers, ticks) for a period. */
+export declare const buildChartModel: (period: Period) => ChartModel;
+/** Builds an x-axis tick formatter that renders dates for the given period. */
+export declare const createAxisDateFormatter: (period: Period, dataLength: number) => ((value: number | string) => string);
+export {};
+//# sourceMappingURL=cryptoChartData.d.ts.map

package/dist/lib/Components/LineChart/__stories__/cryptoChartData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cryptoChartData.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/LineChart/__stories__/cryptoChartData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAQ/D,OAAO,KAAK,EAEV,sBAAsB,EACvB,MAAM,gBAAgB,CAAC;AAExB;;;;;;GAMG;AAEH,MAAM,MAAM,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAaF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,EAAE,WAAW,EAAE,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACxC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAkDhD,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKV,CAAC;AA+HX,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,cAS5C,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,MAAM,KAAG,MAIpC,CAAC;AAEP,eAAO,MAAM,cAAc,GAAI,QAAQ,WAAW,KAAG,MASpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,WAAW,KAClB,sBAyBF,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,KAAG,UAqChD,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,uBAAuB,GAClC,QAAQ,MAAM,EACd,YAAY,MAAM,KACjB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAarC,CAAC"}

package/dist/lib/Components/LineChart/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { AxisConfigProps, ChartInset, Series } from '../../utils/types';
+import { ChartInset, Series } from '../../utils/types';
 import { XAxisProps } from '../Axis/XAxis';
 import { YAxisProps } from '../Axis/YAxis';
 export type LineChartProps = {
@@ -33,12 +33,12 @@ export type LineChartProps = {
      * Combined axis configuration and visual props for the x-axis.
      * Includes scale/domain settings as well as visual options like `showGrid` and `showLine`.
      */
-    xAxis?: Partial<AxisConfigProps> & XAxisProps;
+    xAxis?: XAxisProps;
     /**
      * Combined axis configuration and visual props for the y-axis.
      * Includes scale/domain settings as well as visual options like `showGrid` and `showLine`.
      */
-    yAxis?: Partial<AxisConfigProps> & YAxisProps;
+    yAxis?: YAxisProps;
     /**
      * Width of the chart.
      * A number is treated as pixels; a string (e.g. `'100%'`) fills the container.
@@ -75,5 +75,12 @@ export type LineChartProps = {
      * @default true
      */
     animate?: boolean;
+    /**
+     * Pixel radius within which the scrubber magnetically snaps to registered
+     * magnetic `<Point>` components. Requires `enableScrubbing` to be `true`.
+     * Set to `0` to disable magnetization.
+     * @default 8
+     */
+    magnetRadius?: number;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/LineChart/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/LineChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/D;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/LineChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/D;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/dist/lib/Components/Point/Point.d.ts

@@ -1,4 +1,4 @@
 import { PointLabelProps, PointProps } from './types';
 export declare function PointLabel({ style, textAnchor, dominantBaseline, ...props }: Readonly<PointLabelProps>): import("react/jsx-runtime").JSX.Element;
-export declare function Point({ dataX, dataY, color, label, LabelComponent, labelPosition, hidePoint, showLabelArrow, size, onClick, }: Readonly<PointProps>): import("react/jsx-runtime").JSX.Element | null;
+export declare function Point({ dataX, dataY, color, label, LabelComponent, labelPosition, hidePoint, showLabelArrow, size, onClick, magnetic, }: Readonly<PointProps>): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=Point.d.ts.map

package/dist/lib/Components/Point/Point.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Point.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/Point.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAU3D,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,UAAqB,EACrB,gBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAe3B;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,cAAc,EACd,aAAqB,EACrB,SAAiB,EACjB,cAAqB,EACrB,IAAmB,EACnB,OAAO,GACR,EAAE,QAAQ,CAAC,UAAU,CAAC,kDA4DtB"}
+{"version":3,"file":"Point.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/Point.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAS3D,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,UAAqB,EACrB,gBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAe3B;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,cAAc,EACd,aAAqB,EACrB,SAAiB,EACjB,cAAqB,EACrB,IAAmB,EACnB,OAAO,EACP,QAAgB,GACjB,EAAE,QAAQ,CAAC,UAAU,CAAC,kDAgEtB"}

package/dist/lib/Components/Point/Point.js

@@ -1,11 +1,13 @@
-import { jsxs as W, jsx as n } from "react/jsx-runtime";
-import { useMemo as j } from "react";
-import { projectPoint as k } from "../../utils/scales/scales.js";
-import { isWithinBounds as C, resolveLabel as E, STROKE_WIDTH as T, buildArrowPoints as z, computeLabelY as D, DEFAULT_SIZE as F } from "./utils.js";
-import { useCartesianChartContext as I } from "../CartesianChart/context/cartesianChartContext.js";
-import { useRevealClip as R } from "../CartesianChart/RevealClip/context.js";
+import { jsxs as k, jsx as n } from "react/jsx-runtime";
+import { useMemo as E } from "react";
+import { projectPoint as M } from "../../utils/scales/scales.js";
+import { STROKE_WIDTH as R, DEFAULT_SIZE as T } from "./constants.js";
+import { useMagneticRegistration as z, isWithinBounds as D, resolveLabel as F, buildArrowPoints as I, computeLabelY as Y } from "./utils.js";
+import { useCartesianChartContext as _ } from "../CartesianChart/context/cartesianChartContext.js";
+import { useRevealClip as B } from "../CartesianChart/RevealClip/context.js";
+import { useMagneticPointsContext as H } from "./pointContext/magneticPointsContext.js";
 import { cssVar as o } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
-function Y({
+function K({
   style: e,
   textAnchor: r = "middle",
   dominantBaseline: i = "auto",
@@ -27,34 +29,37 @@ function Y({
     }
   );
 }
-function V({
+function $({
   dataX: e,
   dataY: r,
   color: i,
   label: s,
-  LabelComponent: p,
-  labelPosition: f = "top",
-  hidePoint: y = !1,
-  showLabelArrow: x = !0,
-  size: b = F,
-  onClick: d
+  LabelComponent: d,
+  labelPosition: m = "top",
+  hidePoint: x = !1,
+  showLabelArrow: y = !0,
+  size: g = T,
+  onClick: u,
+  magnetic: b = !1
 }) {
-  const { getXScale: v, getYScale: g, drawingArea: h } = I(), L = R(), l = v(), a = g(), c = b / 2, S = i ?? o("var(--background-muted-strong)"), t = j(() => {
+  const { getXScale: v, getYScale: h, getXAxisConfig: L, drawingArea: S } = _(), C = B(), w = H();
+  z(b, e, L, w);
+  const l = v(), a = h(), c = g / 2, A = i ?? o("var(--background-muted-strong)"), t = E(() => {
     if (!(!l || !a))
-      return k(e, r, l, a);
+      return M(e, r, l, a);
   }, [e, r, l, a]);
-  if (!t || !C(t.x, t.y, h))
+  if (!t || !D(t.x, t.y, S))
     return null;
-  const u = E(s, e), w = u != null, m = x && w, A = D(t.y, c, f, m), P = p ?? Y;
-  return /* @__PURE__ */ W(
+  const f = F(s, e), P = f != null, p = y && P, W = Y(t.y, c, m, p), j = d ?? K;
+  return /* @__PURE__ */ k(
     "g",
     {
       "data-testid": "point-group",
-      clipPath: L,
-      onClick: d,
-      style: d ? { cursor: "pointer" } : void 0,
+      clipPath: C,
+      onClick: u,
+      style: u ? { cursor: "pointer" } : void 0,
       children: [
-        !y && /* @__PURE__ */ n(
+        !x && /* @__PURE__ */ n(
           "circle",
           {
             "data-testid": "point-circle",
@@ -62,26 +67,26 @@ function V({
             cy: t.y,
             r: c,
             style: {
-              fill: S,
+              fill: A,
               stroke: o("var(--background-canvas)")
             },
-            strokeWidth: T
+            strokeWidth: R
           }
         ),
-        m && /* @__PURE__ */ n(
+        p && /* @__PURE__ */ n(
           "polygon",
           {
             "data-testid": "point-arrow",
-            points: z(t.x, t.y, c, f),
+            points: I(t.x, t.y, c, m),
             style: { fill: o("var(--text-base)") }
           }
         ),
-        u != null && /* @__PURE__ */ n(P, { x: t.x, y: A, children: u })
+        f != null && /* @__PURE__ */ n(j, { x: t.x, y: W, children: f })
       ]
     }
   );
 }
 export {
-  V as Point,
-  Y as PointLabel
+  $ as Point,
+  K as PointLabel
 };