@ledgerhq/lumen-ui-react-visualization 0.1.9 → 0.1.11

package/dist/index.js

@@ -1,7 +1,13 @@
-import { LineChart as t } from "./lib/Components/LineChart/LineChart.js";
-import { Point as i, PointLabel as n } from "./lib/Components/Point/Point.js";
+import { ChartTooltip as t } from "./lib/Components/ChartTooltip/ChartTooltip.js";
+import { LineChart as p } from "./lib/Components/LineChart/LineChart.js";
+import { Point as b, PointLabel as f } from "./lib/Components/Point/Point.js";
+import { Scrubber as i } from "./lib/Components/Scrubber/Scrubber.js";
+import { useScrubberContext as a } from "./lib/Components/Scrubber/context/scrubberContext.js";
 export {
-  t as LineChart,
-  i as Point,
-  n as PointLabel
+  t as ChartTooltip,
+  p as LineChart,
+  b as Point,
+  f as PointLabel,
+  i as Scrubber,
+  a as useScrubberContext
 };

package/dist/lib/Components/Axis/XAxis/XAxis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/XAxis/XAxis.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,wBAAgB,KAAK,CAAC,EACpB,aAAwB,EACxB,QAAmB,EACnB,QAAgB,EAChB,QAAgB,EAChB,YAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,kBAAkB,GACnB,EAAE,UAAU,kDAqFZ"}
+{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/XAxis/XAxis.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,wBAAgB,KAAK,CAAC,EACpB,aAAuB,EACvB,QAAmB,EACnB,QAAgB,EAChB,QAAgB,EAChB,YAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,kBAAkB,GACnB,EAAE,UAAU,kDAuFZ"}

package/dist/lib/Components/Axis/XAxis/XAxis.js

@@ -5,9 +5,9 @@ import { useCartesianChartContext as D } from "../../CartesianChart/context/cart
 import { cssVar as o } from "../../../../libs/design-core/dist/lib/cssVar/cssVar.js";
 const c = 4, S = 6, F = 28;
 function K({
-  gridLineStyle: h = "dashed",
+  gridLineStyle: p = "solid",
   position: l = "bottom",
-  showGrid: p = !1,
+  showGrid: h = !1,
   showLine: u = !1,
   showTickMark: g = !1,
   ticks: d,
@@ -21,16 +21,18 @@ function K({
     return null;
   const f = l === "top", s = f ? e.y : e.y + e.height, y = f ? -1 : 1, b = s + y * (c + S);
   return /* @__PURE__ */ k("g", { "data-testid": "x-axis", children: [
-    p && n.filter((t) => E(t, e)).map((t, i) => /* @__PURE__ */ a(
+    h && n.filter((t) => E(t, e)).map((t, i) => /* @__PURE__ */ a(
       "line",
       {
         x1: t.position,
         y1: e.y,
         x2: t.position,
         y2: e.y + e.height,
-        style: { stroke: o("var(--border-muted-subtle)") },
+        style: {
+          stroke: o("var(--border-muted-subtle-transparent)")
+        },
         strokeWidth: o("var(--stroke-1)"),
-        strokeDasharray: h === "dashed" ? "3 3" : void 0
+        strokeDasharray: p === "dashed" ? "3 3" : void 0
       },
       `grid-${t.value}-${i}`
     )),

package/dist/lib/Components/Axis/YAxis/YAxis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/YAxis/YAxis.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,wBAAgB,KAAK,CAAC,EACpB,aAAwB,EACxB,QAAkB,EAClB,QAAgB,EAChB,QAAgB,EAChB,YAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,kBAAkB,GACnB,EAAE,UAAU,kDAqFZ"}
+{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/YAxis/YAxis.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,wBAAgB,KAAK,CAAC,EACpB,aAAuB,EACvB,QAAkB,EAClB,QAAgB,EAChB,QAAgB,EAChB,YAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,kBAAkB,GACnB,EAAE,UAAU,kDAuFZ"}

package/dist/lib/Components/Axis/YAxis/YAxis.js

@@ -5,10 +5,10 @@ import { useCartesianChartContext as T } from "../../CartesianChart/context/cart
 import { cssVar as s } from "../../../../libs/design-core/dist/lib/cssVar/cssVar.js";
 const f = 4, E = 6, w = 40;
 function F({
-  gridLineStyle: h = "dashed",
+  gridLineStyle: h = "solid",
   position: l = "start",
-  showGrid: u = !1,
-  showLine: p = !1,
+  showGrid: p = !1,
+  showLine: u = !1,
   showTickMark: v = !1,
   ticks: d,
   tickLabelFormatter: x
@@ -21,20 +21,22 @@ function F({
     return null;
   const y = l === "start", r = y ? e.x : e.x + e.width, c = y ? -1 : 1, k = r + c * (f + E);
   return /* @__PURE__ */ b("g", { "data-testid": "y-axis", children: [
-    u && n.filter((t) => S(t, e)).map((t, o) => /* @__PURE__ */ a(
+    p && n.filter((t) => S(t, e)).map((t, o) => /* @__PURE__ */ a(
       "line",
       {
         x1: e.x,
         y1: t.position,
         x2: e.x + e.width,
         y2: t.position,
-        style: { stroke: s("var(--border-muted-subtle)") },
+        style: {
+          stroke: s("var(--border-muted-subtle-transparent)")
+        },
         strokeWidth: s("var(--stroke-1)"),
         strokeDasharray: h === "dashed" ? "3 3" : void 0
       },
       `grid-${t.value}-${o}`
     )),
-    p && /* @__PURE__ */ a(
+    u && /* @__PURE__ */ a(
       "line",
       {
         x1: r,

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

@@ -1,3 +1,3 @@
 import { CartesianChartProps } from './types';
-export declare function CartesianChart({ series, xAxis, yAxis, width, height, inset, axisPadding, ariaLabel, children, }: CartesianChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartesianChart({ series, xAxis, yAxis, width, height, inset, axisPadding, ariaLabel, enableScrubbing, onScrubberPositionChange, children, }: CartesianChartProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CartesianChart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/CartesianChart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQnD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAuB,EACvB,KAAK,EACL,WAAW,EACX,SAAmB,EACnB,QAAQ,GACT,EAAE,mBAAmB,2CA2FrB"}
+{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/CartesianChart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQnD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAuB,EACvB,KAAK,EACL,WAAW,EACX,SAAmB,EACnB,eAAuB,EACvB,wBAAwB,EACxB,QAAQ,GACT,EAAE,mBAAmB,2CA4GrB"}

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

@@ -1,79 +1,96 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useRef as I, useState as M, useCallback as O, useEffect as W, useMemo as v } from "react";
-import { resolveInset as g, resolveAxisPadding as z, OVERFLOW_NEGATIVE_MARGIN as m, DEFAULT_HEIGHT as G } from "./utils.js";
-import { useBuildChartContext as P } from "./context/useBuildChartContext.js";
-import { CartesianChartProvider as T } from "./context/cartesianChartContext.js";
-function L({
-  series: b,
-  xAxis: p,
-  yAxis: C,
+import { jsx as t } from "react/jsx-runtime";
+import { useRef as C, useState as W, useCallback as z, useEffect as G, useMemo as y } from "react";
+import { ScrubberProvider as T } from "../Scrubber/ScrubberProvider.js";
+import { resolveInset as V, resolveAxisPadding as _, OVERFLOW_NEGATIVE_MARGIN as R, DEFAULT_HEIGHT as k } from "./utils.js";
+import { useBuildChartContext as F } from "./context/useBuildChartContext.js";
+import { CartesianChartProvider as H } from "./context/cartesianChartContext.js";
+function D({
+  series: h,
+  xAxis: x,
+  yAxis: E,
   width: e = "100%",
-  height: t = G,
+  height: r = k,
   inset: a,
-  axisPadding: d,
-  ariaLabel: y = "Chart",
-  children: h
+  axisPadding: c,
+  ariaLabel: I = "Chart",
+  enableScrubbing: o = !1,
+  onScrubberPositionChange: b,
+  children: l
 }) {
-  const s = I(null), [c, R] = M(
+  const n = C(null), f = C(null), [u, A] = W(
     typeof e == "number" ? e : void 0
-  ), o = typeof e != "number", l = O((r) => {
-    const [f] = r;
-    f && R(f.contentRect.width);
+  ), i = typeof e != "number", v = z((s) => {
+    const [p] = s;
+    p && A(p.contentRect.width);
   }, []);
-  W(() => {
-    if (!o || !s.current || typeof ResizeObserver > "u")
+  G(() => {
+    if (!i || !n.current || typeof ResizeObserver > "u")
       return;
-    const r = new ResizeObserver(l);
-    return r.observe(s.current), () => r.disconnect();
-  }, [o, l]);
-  const i = typeof e == "number" ? e : c ?? 0, x = v(() => g(a), [a]), E = v(
-    () => z(d),
-    [d]
-  ), A = P({
-    series: b,
-    xAxis: p,
-    yAxis: C,
-    width: i,
-    height: t,
-    inset: x,
-    axisPadding: E
-  }), u = /* @__PURE__ */ n(
+    const s = new ResizeObserver(v);
+    return s.observe(n.current), () => s.disconnect();
+  }, [i, v]);
+  const d = typeof e == "number" ? e : u ?? 0, M = y(() => V(a), [a]), O = y(
+    () => _(c),
+    [c]
+  ), P = F({
+    series: h,
+    xAxis: x,
+    yAxis: E,
+    width: d,
+    height: r,
+    inset: M,
+    axisPadding: O
+  }), m = /* @__PURE__ */ t(
     "svg",
     {
+      ref: f,
       "data-testid": "chart-svg",
-      width: i,
-      height: t,
+      width: d,
+      height: r,
       role: "img",
-      "aria-label": y || "Chart",
-      style: { display: "block", overflow: "visible" },
-      children: /* @__PURE__ */ n(T, { value: A, children: h })
+      "aria-label": I || "Chart",
+      tabIndex: o ? 0 : void 0,
+      style: {
+        display: "block",
+        overflow: "visible",
+        outline: o ? "none" : void 0
+      },
+      children: /* @__PURE__ */ t(H, { value: P, children: o ? /* @__PURE__ */ t(
+        T,
+        {
+          svgRef: f,
+          enableScrubbing: o,
+          onScrubberPositionChange: b,
+          children: l
+        }
+      ) : l })
     }
   );
-  return o ? /* @__PURE__ */ n(
+  return i ? /* @__PURE__ */ t(
     "div",
     {
-      ref: s,
+      ref: n,
       "data-testid": "chart-container",
       style: {
         width: e,
-        height: t,
-        ...m
+        height: r,
+        ...R
       },
-      children: c !== void 0 && u
+      children: u !== void 0 && m
     }
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ t(
     "div",
     {
       "data-testid": "chart-container",
       style: {
-        width: i,
-        height: t,
-        ...m
+        width: d,
+        height: r,
+        ...R
       },
-      children: u
+      children: m
     }
   );
 }
 export {
-  L as CartesianChart
+  D as CartesianChart
 };

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

@@ -46,5 +46,16 @@ export type CartesianChartProps = {
      * SVG content rendered inside the chart's context provider.
      */
     children?: ReactNode;
+    /**
+     * Enables scrubbing (hover/touch/keyboard) interactions on the chart.
+     * When true, the SVG becomes focusable and captures pointer/keyboard events.
+     * @default false
+     */
+    enableScrubbing?: boolean;
+    /**
+     * Callback fired whenever the scrubber moves to a new data index or is cleared.
+     * Receives `undefined` when the scrubber leaves the chart.
+     */
+    onScrubberPositionChange?: (index: number | undefined) => void;
 };
 //# sourceMappingURL=types.d.ts.map

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;CACtB,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,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;CAChE,CAAC"}

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

@@ -0,0 +1,23 @@
+import { ChartTooltipProps } from './types';
+/**
+ * Renders a structured tooltip anchored to the scrubber line.
+ *
+ * Visible at every scrubber position by default. To limit which positions
+ * show a tooltip, return an empty array from `items` for unwanted indices.
+ *
+ * Must be used as a child of `LineChart` (or `CartesianChart`) with
+ * `enableScrubbing` enabled.
+ *
+ * @example
+ * ```tsx
+ * <LineChart series={series} enableScrubbing>
+ *   <Scrubber />
+ *   <ChartTooltip
+ *     title={(i) => `${count[i]} Transactions`}
+ *     items={(i) => [{ label: 'Index', value: i }]}
+ *   />
+ * </LineChart>
+ * ```
+ */
+export declare function ChartTooltip({ title, items, offset, side, tooltipWidth, }: Readonly<ChartTooltipProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ChartTooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAwB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAwBvE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,MAAuB,EACvB,IAAa,EACb,YAAoC,GACrC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAqE7B"}

package/dist/lib/Components/ChartTooltip/ChartTooltip.js

@@ -0,0 +1,81 @@
+import { jsx as l, jsxs as P } from "react/jsx-runtime";
+import { resolvePixelX as b } from "../Scrubber/utils.js";
+import { ChartTooltipItem as A } from "./ChartTooltipItem.js";
+import { TOOLTIP_TRANSITION as L, BORDER_RADIUS as S, DEFAULT_TOOLTIP_WIDTH as C, PADDING_Y as d, ROW_HEIGHT as o, PADDING_X as R, ROW_GAP as I, DEFAULT_OFFSET as F, TITLE_GAP as G } from "./constants.js";
+import { useScrubberContext as H } from "../Scrubber/context/scrubberContext.js";
+import { useCartesianChartContext as X } from "../CartesianChart/context/cartesianChartContext.js";
+import { cssVar as e } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
+const p = /* @__PURE__ */ l(
+  "g",
+  {
+    "data-testid": "chart-tooltip",
+    role: "tooltip",
+    "aria-hidden": "true",
+    style: { opacity: 0, pointerEvents: "none", transition: "none" }
+  }
+), w = {
+  opacity: 1,
+  transition: L,
+  pointerEvents: "none"
+}, N = {
+  fontSize: e("var(--font-style-body-4-size)"),
+  fontFamily: e("var(--font-family-font)"),
+  fill: e("var(--text-base)"),
+  fontWeight: e("var(--font-style-body-4-weight-medium)")
+};
+function V({
+  title: s,
+  items: g,
+  offset: c = F,
+  side: f = "auto",
+  tooltipWidth: i = C
+}) {
+  const { scrubberPosition: n } = H(), { getXScale: v, getXAxisConfig: O, drawingArea: t } = X();
+  if (n === void 0) return p;
+  const r = b(n, v, O());
+  if (r === void 0) return p;
+  const a = g(n);
+  if (a.length === 0) return p;
+  const m = typeof s == "function" ? s(n) : s, h = m != null, _ = f === "left" || f === "auto" && r + c + i > t.x + t.width, T = Math.max(
+    t.x,
+    _ ? r - c - i : r + c
+  ), u = h ? o + G : 0, E = d * 2 + u + a.length * o + (a.length - 1) * I, D = t.y + d + u;
+  return /* @__PURE__ */ P("g", { "data-testid": "chart-tooltip", role: "tooltip", style: w, children: [
+    /* @__PURE__ */ l(
+      "rect",
+      {
+        x: T,
+        y: t.y,
+        width: i,
+        height: E,
+        rx: S,
+        fill: e("var(--background-muted)")
+      }
+    ),
+    h && /* @__PURE__ */ l(
+      "text",
+      {
+        "data-testid": "chart-tooltip-title",
+        x: T + R,
+        y: t.y + d + o / 2,
+        dominantBaseline: "middle",
+        style: N,
+        children: m
+      }
+    ),
+    a.map((y, x) => /* @__PURE__ */ l(
+      A,
+      {
+        label: y.label,
+        value: y.value,
+        x: T,
+        y: D + x * (o + I) + o / 2,
+        width: i
+      },
+      x
+    ))
+  ] });
+}
+export {
+  V as ChartTooltip
+};

package/dist/lib/Components/ChartTooltip/ChartTooltipItem.d.ts

@@ -0,0 +1,3 @@
+import { ChartTooltipItemProps } from './types';
+export declare function ChartTooltipItem({ label, value, x, y, width, }: Readonly<ChartTooltipItemProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartTooltipItem.d.ts.map

package/dist/lib/Components/ChartTooltip/ChartTooltipItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltipItem.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ChartTooltip/ChartTooltipItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,CAAK,EACL,CAAK,EACL,KAAK,GACN,EAAE,QAAQ,CAAC,qBAAqB,CAAC,2CA+BjC"}

package/dist/lib/Components/ChartTooltip/ChartTooltipItem.js

@@ -0,0 +1,46 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { PADDING_X as n } from "./constants.js";
+import { cssVar as t } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
+function y({
+  label: r,
+  value: l,
+  x: e = 0,
+  y: o = 0,
+  width: f
+}) {
+  return /* @__PURE__ */ a("g", { children: [
+    /* @__PURE__ */ i(
+      "text",
+      {
+        x: e + n,
+        y: o,
+        dominantBaseline: "middle",
+        style: {
+          fontSize: t("var(--font-style-body-4-size)"),
+          fontFamily: t("var(--font-family-font)"),
+          fill: t("var(--text-muted)")
+        },
+        children: r
+      }
+    ),
+    /* @__PURE__ */ i(
+      "text",
+      {
+        x: e + f - n,
+        y: o,
+        dominantBaseline: "middle",
+        textAnchor: "end",
+        style: {
+          fontSize: t("var(--font-style-body-4-size)"),
+          fontFamily: t("var(--font-family-font)"),
+          fill: t("var(--text-base)"),
+          fontWeight: t("var(--font-style-body-4-weight-medium)")
+        },
+        children: l
+      }
+    )
+  ] });
+}
+export {
+  y as ChartTooltipItem
+};

package/dist/lib/Components/ChartTooltip/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const DEFAULT_OFFSET = 10;
+export declare const DEFAULT_TOOLTIP_WIDTH = 120;
+export declare const PADDING_X = 8;
+export declare const PADDING_Y = 8;
+export declare const ROW_HEIGHT = 16;
+export declare const ROW_GAP = 6;
+export declare const TITLE_GAP = 6;
+export declare const BORDER_RADIUS = 4;
+export declare const TOOLTIP_TRANSITION = "opacity 0.15s ease-out 0.05s";
+//# sourceMappingURL=constants.d.ts.map

package/dist/lib/Components/ChartTooltip/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ChartTooltip/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,OAAO,IAAI,CAAC;AACzB,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,kBAAkB,iCAAiC,CAAC"}

package/dist/lib/Components/ChartTooltip/constants.js

@@ -0,0 +1,12 @@
+const T = 10, o = 120, s = 8, t = 8, c = 16, I = 6, _ = 6, n = 4, D = "opacity 0.15s ease-out 0.05s";
+export {
+  n as BORDER_RADIUS,
+  T as DEFAULT_OFFSET,
+  o as DEFAULT_TOOLTIP_WIDTH,
+  s as PADDING_X,
+  t as PADDING_Y,
+  I as ROW_GAP,
+  c as ROW_HEIGHT,
+  _ as TITLE_GAP,
+  D as TOOLTIP_TRANSITION
+};

package/dist/lib/Components/ChartTooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { ChartTooltip } from './ChartTooltip';
+export type { ChartTooltipProps, ChartTooltipItemData } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/ChartTooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ChartTooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,61 @@
+import { ReactElement, SVGProps } from 'react';
+/**
+ * Valid content for an SVG `<text>` element: a plain string,
+ * a number, or a `<tspan>` element.
+ */
+export type SvgTextContent = string | number | ReactElement<SVGProps<SVGTSpanElement>, 'tspan'>;
+export type ChartTooltipItemData = {
+    /** Label displayed on the left side of the row. */
+    label: SvgTextContent;
+    /** Value displayed on the right side of the row. */
+    value: SvgTextContent;
+};
+export type ChartTooltipItemProps = ChartTooltipItemData & {
+    /**
+     * X position in SVG coordinate space.
+     * @default 0
+     */
+    x?: number;
+    /**
+     * Y midline position in SVG coordinate space.
+     * @default 0
+     */
+    y?: number;
+    /**
+     * Width allocated to this row, used to right-align the value text.
+     */
+    width: number;
+};
+export type ChartTooltipProps = {
+    /**
+     * Optional header rendered at the top of the tooltip card.
+     * Accepts a static value or a callback receiving the active data index.
+     * A callback may return `null` or `undefined` to suppress the title for a
+     * specific data index without unmounting the tooltip.
+     */
+    title?: SvgTextContent | ((index: number) => SvgTextContent | null | undefined);
+    /**
+     * Produces tooltip rows from the active data index.
+     * Each returned item is rendered as a `<ChartTooltipItem>`.
+     * Return an empty array to suppress the tooltip at a given index.
+     */
+    items: (index: number) => ChartTooltipItemData[];
+    /**
+     * Horizontal gap in pixels between the scrubber line and the tooltip box.
+     * @default 10
+     */
+    offset?: number;
+    /**
+     * Which side of the scrubber line the tooltip appears on.
+     * `'auto'` flips to the left when the right side would overflow.
+     * @default 'auto'
+     */
+    side?: 'auto' | 'left' | 'right';
+    /**
+     * Fixed width of the tooltip box in pixels.
+     * Used for flip-side detection and for right-aligning value text.
+     * @default 120
+     */
+    tooltipWidth?: number;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ChartTooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,MAAM,GACN,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD,MAAM,MAAM,oBAAoB,GAAG;IACjC,mDAAmD;IACnD,KAAK,EAAE,cAAc,CAAC;IACtB,oDAAoD;IACpD,KAAK,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,GAAG;IACzD;;;OAGG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,KAAK,CAAC,EACF,cAAc,GACd,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC3D;;;;OAIG;IACH,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,oBAAoB,EAAE,CAAC;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACjC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

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

@@ -4,7 +4,7 @@ import { isNumericScale as A } from "../../utils/scales/scales.js";
 import { toScaledPoints as P, buildLinePath as I, buildAreaPath as L } from "./utils.js";
 import { useCartesianChartContext as T } from "../CartesianChart/context/cartesianChartContext.js";
 import { cssVar as j } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
-const O = 0.2;
+const O = 0.15;
 function N({
   seriesId: g,
   stroke: h,

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, children, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function LineChart({ series, showArea, areaType, showXAxis, showYAxis, xAxis, yAxis, width, height, inset, enableScrubbing, onScrubberPositionChange, 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,QAAQ,GACT,EAAE,cAAc,2CAwEhB"}
+{"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,QAAQ,GACT,EAAE,cAAc,2CA0EhB"}