@ledgerhq/lumen-ui-react-visualization 0.1.3 → 0.1.5

package/dist/index.js

@@ -1,4 +1,7 @@
-import { LineChart as o } from "./lib/Components/LineChart/LineChart.js";
+import { LineChart as t } from "./lib/Components/LineChart/LineChart.js";
+import { Point as i, PointLabel as n } from "./lib/Components/Point/Point.js";
 export {
-  o as LineChart
+  t as LineChart,
+  i as Point,
+  n as PointLabel
 };

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

@@ -0,0 +1,33 @@
+export type BaseAxisProps = {
+    /**
+     * Whether to render grid lines at each tick.
+     * @default false
+     */
+    showGrid?: boolean;
+    /**
+     * Appearance of the grid lines.
+     * @default 'dashed'
+     */
+    gridLineStyle?: 'solid' | 'dashed';
+    /**
+     * Whether to render the axis baseline.
+     * @default false
+     */
+    showLine?: boolean;
+    /**
+     * Whether to render tick marks at each tick position.
+     * @default false
+     */
+    showTickMark?: boolean;
+    /**
+     * Explicit tick positions along the axis.
+     * When omitted, ticks are computed automatically from the scale.
+     */
+    ticks?: number[];
+    /**
+     * Formats a tick value into its display label.
+     * Receives the raw tick value (number or string label) and must return a string.
+     */
+    tickLabelFormatter?: (value: number | string) => string;
+};
+//# sourceMappingURL=Axis.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Axis.types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Axis/Axis.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAC;CACzD,CAAC"}

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

@@ -0,0 +1,4 @@
+import { XAxisProps } from './types';
+export declare const DEFAULT_AXIS_HEIGHT = 28;
+export declare function XAxis({ gridLineStyle, position, showGrid, showLine, showTickMark, ticks: ticksProp, tickLabelFormatter, }: XAxisProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=XAxis.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,83 @@
+import { jsxs as k, jsx as a } from "react/jsx-runtime";
+import { useMemo as T } from "react";
+import { buildTicksData as C, isTickOnXAxisDomainEdge as E } from "../../../utils/ticks/ticks.js";
+import { useCartesianChartContext as D } from "../../CartesianChart/context/cartesianChartContext.js";
+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",
+  position: l = "bottom",
+  showGrid: p = !1,
+  showLine: u = !1,
+  showTickMark: g = !1,
+  ticks: d,
+  tickLabelFormatter: x
+}) {
+  const { getXScale: v, getXAxisConfig: A, drawingArea: e } = D(), r = v(), m = A(), n = T(
+    () => r ? C(r, m, d, x) : [],
+    [r, m, d, x]
+  );
+  if (!r || e.width <= 0)
+    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(
+      "line",
+      {
+        x1: t.position,
+        y1: e.y,
+        x2: t.position,
+        y2: e.y + e.height,
+        style: { stroke: o("var(--border-muted-subtle)") },
+        strokeWidth: o("var(--stroke-1)"),
+        strokeDasharray: h === "dashed" ? "3 3" : void 0
+      },
+      `grid-${t.value}-${i}`
+    )),
+    u && /* @__PURE__ */ a(
+      "line",
+      {
+        x1: e.x,
+        y1: s,
+        x2: e.x + e.width,
+        y2: s,
+        style: { stroke: o("var(--border-muted)") },
+        strokeWidth: o("var(--stroke-1)"),
+        shapeRendering: "crispEdges",
+        strokeLinecap: "square"
+      }
+    ),
+    g && n.map((t, i) => /* @__PURE__ */ a(
+      "line",
+      {
+        x1: t.position,
+        y1: s,
+        x2: t.position,
+        y2: s + y * c,
+        style: { stroke: o("var(--border-muted)") },
+        strokeWidth: o("var(--stroke-1)")
+      },
+      `tick-${t.value}-${i}`
+    )),
+    n.map((t, i) => /* @__PURE__ */ a(
+      "text",
+      {
+        x: t.position,
+        y: b,
+        textAnchor: "middle",
+        dominantBaseline: l === "top" ? "auto" : "hanging",
+        style: {
+          fill: o("var(--text-muted)"),
+          fontSize: o("var(--font-style-body-4-size)"),
+          fontFamily: o("var(--font-family-font)")
+        },
+        children: t.label
+      },
+      `label-${t.value}-${i}`
+    ))
+  ] });
+}
+export {
+  F as DEFAULT_AXIS_HEIGHT,
+  K as XAxis
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/XAxis/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACrD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,9 @@
+import { BaseAxisProps } from '../Axis.types';
+export type XAxisProps = BaseAxisProps & {
+    /**
+     * Where the x-axis is rendered relative to the drawing area.
+     * @default 'bottom'
+     */
+    position?: 'top' | 'bottom';
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/XAxis/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC7B,CAAC"}

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

@@ -0,0 +1,4 @@
+import { YAxisProps } from './types';
+export declare const DEFAULT_AXIS_WIDTH = 40;
+export declare function YAxis({ gridLineStyle, position, showGrid, showLine, showTickMark, ticks: ticksProp, tickLabelFormatter, }: YAxisProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=YAxis.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,83 @@
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { useMemo as C } from "react";
+import { buildTicksData as D, isTickOnYAxisDomainEdge as S } from "../../../utils/ticks/ticks.js";
+import { useCartesianChartContext as T } from "../../CartesianChart/context/cartesianChartContext.js";
+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",
+  position: l = "start",
+  showGrid: u = !1,
+  showLine: p = !1,
+  showTickMark: v = !1,
+  ticks: d,
+  tickLabelFormatter: x
+}) {
+  const { getYScale: g, getYAxisConfig: A, drawingArea: e } = T(), i = g(), m = A(), n = C(
+    () => i ? D(i, m, d, x) : [],
+    [i, m, d, x]
+  );
+  if (!i || e.height <= 0)
+    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(
+      "line",
+      {
+        x1: e.x,
+        y1: t.position,
+        x2: e.x + e.width,
+        y2: t.position,
+        style: { stroke: s("var(--border-muted-subtle)") },
+        strokeWidth: s("var(--stroke-1)"),
+        strokeDasharray: h === "dashed" ? "3 3" : void 0
+      },
+      `grid-${t.value}-${o}`
+    )),
+    p && /* @__PURE__ */ a(
+      "line",
+      {
+        x1: r,
+        y1: e.y,
+        x2: r,
+        y2: e.y + e.height,
+        style: { stroke: s("var(--border-muted)") },
+        strokeWidth: s("var(--stroke-1)"),
+        shapeRendering: "crispEdges",
+        strokeLinecap: "square"
+      }
+    ),
+    v && n.map((t, o) => /* @__PURE__ */ a(
+      "line",
+      {
+        x1: r,
+        y1: t.position,
+        x2: r + c * f,
+        y2: t.position,
+        style: { stroke: s("var(--border-muted)") },
+        strokeWidth: s("var(--stroke-1)")
+      },
+      `tick-${t.value}-${o}`
+    )),
+    n.map((t, o) => /* @__PURE__ */ a(
+      "text",
+      {
+        x: k,
+        y: t.position,
+        textAnchor: l === "start" ? "end" : "start",
+        dominantBaseline: "central",
+        style: {
+          fill: s("var(--text-muted)"),
+          fontSize: s("var(--font-style-body-4-size)"),
+          fontFamily: s("var(--font-family-font)")
+        },
+        children: t.label
+      },
+      `label-${t.value}-${o}`
+    ))
+  ] });
+}
+export {
+  w as DEFAULT_AXIS_WIDTH,
+  F as YAxis
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/YAxis/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,14 @@
+import { BaseAxisProps } from '../Axis.types';
+export type YAxisProps = BaseAxisProps & {
+    /**
+     * Where the y-axis is rendered relative to the drawing area.
+     * @default 'start'
+     */
+    position?: 'start' | 'end';
+    /**
+     * Width of the axis in pixels.
+     * @default 40
+     */
+    width?: number;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/YAxis/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

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":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAoCnD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAuB,EACvB,KAAK,EACL,WAAW,EACX,SAAmB,EACnB,QAAQ,GACT,EAAE,mBAAmB,2CAuErB"}
+{"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"}

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

@@ -1,69 +1,78 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useRef as A, useState as I, useCallback as D, useEffect as P, useMemo as d } from "react";
-import { useBuildChartContext as T } from "./context/useBuildChartContext.js";
-import { CartesianChartProvider as z } from "./context/cartesianChartContext.js";
-const M = 160, o = {
-  top: 8,
-  right: 0,
-  bottom: 0,
-  left: 0
-}, O = { top: 0, right: 0, bottom: 0, left: 0 }, W = (t) => t === void 0 ? o : typeof t == "number" ? { top: t, right: t, bottom: t, left: t } : {
-  top: t.top ?? o.top,
-  right: t.right ?? o.right,
-  bottom: t.bottom ?? o.bottom,
-  left: t.left ?? o.left
-}, _ = (t) => t === void 0 ? O : {
-  top: t.top ?? 0,
-  right: t.right ?? 0,
-  bottom: t.bottom ?? 0,
-  left: t.left ?? 0
-};
+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: t,
+  series: b,
   xAxis: p,
-  yAxis: h,
+  yAxis: C,
   width: e = "100%",
-  height: n = M,
-  inset: i,
-  axisPadding: c,
-  ariaLabel: C = "Chart",
-  children: y
+  height: t = G,
+  inset: a,
+  axisPadding: d,
+  ariaLabel: y = "Chart",
+  children: h
 }) {
-  const s = A(null), [u, g] = I(
+  const s = I(null), [c, R] = M(
     typeof e == "number" ? e : void 0
-  ), l = typeof e != "number", m = D((r) => {
-    const [v] = r;
-    v && g(v.contentRect.width);
+  ), o = typeof e != "number", l = O((r) => {
+    const [f] = r;
+    f && R(f.contentRect.width);
   }, []);
-  P(() => {
-    if (!l || !s.current || typeof ResizeObserver > "u")
+  W(() => {
+    if (!o || !s.current || typeof ResizeObserver > "u")
       return;
-    const r = new ResizeObserver(m);
+    const r = new ResizeObserver(l);
     return r.observe(s.current), () => r.disconnect();
-  }, [l, m]);
-  const a = typeof e == "number" ? e : u ?? 0, R = d(() => W(i), [i]), x = d(
-    () => _(c),
-    [c]
-  ), E = T({
-    series: t,
+  }, [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: h,
-    width: a,
-    height: n,
-    inset: R,
-    axisPadding: x
-  }), b = /* @__PURE__ */ f(
+    yAxis: C,
+    width: i,
+    height: t,
+    inset: x,
+    axisPadding: E
+  }), u = /* @__PURE__ */ n(
     "svg",
     {
-      width: a,
-      height: n,
+      "data-testid": "chart-svg",
+      width: i,
+      height: t,
       role: "img",
-      "aria-label": C || "Chart",
+      "aria-label": y || "Chart",
       style: { display: "block", overflow: "visible" },
-      children: /* @__PURE__ */ f(z, { value: E, children: y })
+      children: /* @__PURE__ */ n(T, { value: A, children: h })
+    }
+  );
+  return o ? /* @__PURE__ */ n(
+    "div",
+    {
+      ref: s,
+      "data-testid": "chart-container",
+      style: {
+        width: e,
+        height: t,
+        ...m
+      },
+      children: c !== void 0 && u
+    }
+  ) : /* @__PURE__ */ n(
+    "div",
+    {
+      "data-testid": "chart-container",
+      style: {
+        width: i,
+        height: t,
+        ...m
+      },
+      children: u
     }
   );
-  return l ? /* @__PURE__ */ f("div", { ref: s, style: { width: e, height: n }, children: u !== void 0 && b }) : b;
 }
 export {
   L as CartesianChart

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

@@ -26,8 +26,10 @@ export type CartesianChartProps = {
      */
     height?: number;
     /**
-     * Padding between the SVG edge and the drawing area.
-     * A number applies uniformly; a partial object overrides individual sides.
+     * Extra padding between the SVG edge and the drawing area, added on top of
+     * a built-in overflow buffer that prevents content (labels, points, ticks)
+     * from being clipped. A number applies uniformly; a partial object sets
+     * individual sides (unset sides default to `0`).
      */
     inset?: number | Partial<ChartInset>;
     /**

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

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

@@ -0,0 +1,19 @@
+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.
+ */
+export declare const OVERFLOW_BUFFER: ChartInset;
+export declare const OVERFLOW_NEGATIVE_MARGIN: {
+    marginTop: number;
+    marginRight: number;
+    marginBottom: number;
+    marginLeft: number;
+};
+export declare const ZERO_PADDING: ChartInset;
+export declare const resolveInset: (inset: CartesianChartProps["inset"]) => ChartInset;
+export declare const resolveAxisPadding: (padding: CartesianChartProps["axisPadding"]) => ChartInset;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,42 @@
+const m = 160, r = {
+  top: 30,
+  right: 20,
+  bottom: 30,
+  left: 20
+}, f = {
+  marginTop: -30,
+  marginRight: -20,
+  marginBottom: -30,
+  marginLeft: -20
+}, e = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+}, l = (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,
+    right: t.right ?? 0,
+    bottom: t.bottom ?? 0,
+    left: t.left ?? 0
+  }, {
+    top: o.top + r.top,
+    right: o.right + r.right,
+    bottom: o.bottom + r.bottom,
+    left: o.left + r.left
+  };
+}, g = (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,
+  r as OVERFLOW_BUFFER,
+  f as OVERFLOW_NEGATIVE_MARGIN,
+  e as ZERO_PADDING,
+  g as resolveAxisPadding,
+  l as resolveInset
+};

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

@@ -1 +1 @@
-{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Line/Line.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMzC,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAM,EACN,QAAgB,EAChB,QAAQ,EAAE,SAAsB,GACjC,EAAE,SAAS,kDAgEX"}
+{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Line/Line.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAM,EACN,QAAgB,EAChB,QAAQ,EAAE,SAAsB,GACjC,EAAE,SAAS,kDA6EX"}

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

@@ -1,47 +1,68 @@
 import { jsxs as l, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { useId as y, useMemo as c } from "react";
+import { useId as S, useMemo as d } from "react";
 import { isNumericScale as A } from "../../utils/scales/scales.js";
-import { toScaledPoints as P, buildLinePath as T, buildAreaPath as I } from "./utils.js";
-import { useCartesianChartContext as L } from "../CartesianChart/context/cartesianChartContext.js";
-const O = 2, _ = 0.2;
-function M({
+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;
+function N({
   seriesId: g,
   stroke: h,
-  showArea: s = !1,
-  areaType: j = "gradient"
+  showArea: n = !1,
+  areaType: _ = "gradient"
 }) {
-  const { getXScale: x, getYScale: C, getXAxisConfig: S, drawingArea: i, seriesMap: k } = L(), a = x(), o = C(), d = S(), p = y(), n = k.get(g), r = h ?? n?.stroke, t = c(
-    () => n?.data && a && o && A(o) ? P(n.data, a, o, d?.data) : null,
-    [n, a, o, d]
-  ), f = c(
-    () => t ? T(t) : null,
+  const { getXScale: x, getYScale: k, getXAxisConfig: C, drawingArea: i, seriesMap: y } = T(), s = x(), o = k(), c = C(), p = S(), r = y.get(g), a = h ?? r?.stroke, t = d(
+    () => r?.data && s && o && A(o) ? P(r.data, s, o, c?.data) : null,
+    [r, s, o, c]
+  ), f = d(
+    () => t ? I(t) : null,
     [t]
-  ), u = c(
-    () => s && t && i ? I(t, i) : null,
-    [s, t, i]
+  ), u = d(
+    () => n && t && i ? L(t, i) : null,
+    [n, t, i]
   );
   return f ? /* @__PURE__ */ l(m, { children: [
-    s && u && r && /* @__PURE__ */ l(m, { children: [
-      /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l("linearGradient", { id: p, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ e(
-          "stop",
-          {
-            offset: "0%",
-            stopColor: r,
-            stopOpacity: _
-          }
-        ),
-        /* @__PURE__ */ e("stop", { offset: "100%", stopColor: r, stopOpacity: 0 })
-      ] }) }),
-      /* @__PURE__ */ e("path", { d: u, fill: `url(#${p})`, stroke: "none" })
+    n && u && a && /* @__PURE__ */ l(m, { children: [
+      /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l(
+        "linearGradient",
+        {
+          "data-testid": "line-gradient",
+          id: p,
+          x1: "0",
+          y1: "0",
+          x2: "0",
+          y2: "1",
+          children: [
+            /* @__PURE__ */ e(
+              "stop",
+              {
+                offset: "0%",
+                stopColor: a,
+                stopOpacity: O
+              }
+            ),
+            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: a, stopOpacity: 0 })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          "data-testid": "line-area",
+          d: u,
+          fill: `url(#${p})`,
+          stroke: "none"
+        }
+      )
     ] }),
     /* @__PURE__ */ e(
       "path",
       {
+        "data-testid": "line-path",
         d: f,
         fill: "none",
-        stroke: r,
-        strokeWidth: O,
+        stroke: a,
+        strokeWidth: j("var(--stroke-2)"),
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
@@ -49,5 +70,5 @@ function M({
   ] }) : null;
 }
 export {
-  M as Line
+  N as Line
 };

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

@@ -6,7 +6,7 @@ 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.
  */
-export declare const toScaledPoints: (data: Array<number | null>, xScale: ChartScaleFunction, yScale: NumericScale, xData?: ReadonlyArray<string | number>) => Point[] | null;
+export declare const toScaledPoints: (data: (number | null)[], xScale: ChartScaleFunction, yScale: NumericScale, xData?: readonly (string | number)[]) => Point[] | null;
 /**
  * Build the SVG `d` attribute for the line stroke.
  */

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,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,EAC1B,QAAQ,kBAAkB,EAC1B,QAAQ,YAAY,EACpB,QAAQ,aAAa,CAAC,MAAM,GAAG,MAAM,CAAC,KACrC,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;;;;;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"}

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,2CAqEhB"}
+{"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"}