@ledgerhq/lumen-ui-react-visualization 0.1.20 → 0.1.22

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

@@ -1,4 +1,4 @@
-import { useContext as e, createContext as n, useMemo as r } from "react";
+import { createContext as n, useContext as e, useMemo as r } from "react";
 const o = n(void 0), s = () => e(o)?.clipPathAttr, c = () => {
   const t = e(o);
   return r(() => t?.getPointRevealStyle(), [t]);

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, magnetic, }: Readonly<PointProps>): import("react/jsx-runtime").JSX.Element | null;
+export declare function Point({ dataX, dataY, color, label, LabelComponent, labelPosition, hidePoint, showLabelArrow, size, onClick, magnetic, labelAlignment, }: 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":"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,kDAmEtB"}
+{"version":3,"file":"Point.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/Point.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,eAAe,EAEf,UAAU,EACX,MAAM,SAAS,CAAC;AAIjB,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,UAAqB,EACrB,gBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAe3B;AA+BD,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,EAChB,cAAuB,GACxB,EAAE,QAAQ,CAAC,UAAU,CAAC,kDA2DtB"}

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

@@ -1,94 +1,122 @@
-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 { useMagneticPointsContext as B } from "./pointContext/magneticPointsContext.js";
-import { usePointReveal as H } from "../CartesianChart/RevealAnimation/context.js";
-import { cssVar as e } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
-function K({
-  style: o,
-  textAnchor: r = "middle",
-  dominantBaseline: i = "auto",
-  ...s
+import { jsxs as A, jsx as n } from "react/jsx-runtime";
+import { DEFAULT_SIZE as E, LABEL_FONT_SIZE as P, STROKE_WIDTH as S } from "./constants.js";
+import { usePointGeometry as T } from "./usePointGeometry.js";
+import { resolveLabel as k, computeLabelGeometry as _, buildArrowPoints as w } from "./utils.js";
+import { cssVar as l } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
+function F({
+  style: t,
+  textAnchor: e = "middle",
+  dominantBaseline: o = "auto",
+  ...r
 }) {
   return /* @__PURE__ */ n(
     "text",
     {
-      textAnchor: r,
-      dominantBaseline: i,
+      textAnchor: e,
+      dominantBaseline: o,
       style: {
-        fill: e("var(--text-base)"),
-        fontSize: e("var(--font-style-body-4-size)"),
-        fontWeight: e("var(--font-style-body-4-weight-medium)"),
-        fontFamily: e("var(--font-family-font)"),
-        ...o
+        fill: l("var(--text-base)"),
+        fontSize: P,
+        fontWeight: l("var(--font-style-body-4-weight-medium)"),
+        fontFamily: l("var(--font-family-font)"),
+        ...t
       },
-      ...s
+      ...r
     }
   );
 }
-function $({
-  dataX: o,
-  dataY: r,
-  color: i,
-  label: s,
-  LabelComponent: p,
-  labelPosition: m = "top",
-  hidePoint: y = !1,
-  showLabelArrow: x = !0,
-  size: g = T,
-  onClick: u,
-  magnetic: v = !1
+function G({ x: t, y: e, size: o, color: r }) {
+  const u = o / 2, a = r ?? l("var(--background-muted-strong)");
+  return /* @__PURE__ */ n(
+    "circle",
+    {
+      "data-testid": "point-circle",
+      cx: t,
+      cy: e,
+      r: u,
+      style: {
+        fill: a,
+        stroke: l("var(--background-canvas)")
+      },
+      strokeWidth: S
+    }
+  );
+}
+function I({ x: t, y: e, size: o, position: r }) {
+  return /* @__PURE__ */ n(
+    "polygon",
+    {
+      "data-testid": "point-arrow",
+      points: w(t, e, o / 2, r),
+      style: { fill: l("var(--text-base)") }
+    }
+  );
+}
+function Z({
+  dataX: t,
+  dataY: e,
+  color: o,
+  label: r,
+  LabelComponent: u,
+  labelPosition: a = "top",
+  hidePoint: d = !1,
+  showLabelArrow: m = !0,
+  size: f = E,
+  onClick: x,
+  magnetic: p = !1,
+  labelAlignment: b = "auto"
 }) {
-  const { getXScale: b, getYScale: h, getXAxisConfig: S, drawingArea: L } = _(), w = B();
-  z(v, o, S, w);
-  const l = b(), a = h(), c = g / 2, A = i ?? e("var(--background-muted-strong)"), t = E(() => {
-    if (!(!l || !a))
-      return M(o, r, l, a);
-  }, [o, r, l, a]), C = H();
-  if (!t || !D(t.x, t.y, L))
+  const { pixel: i, drawingArea: v, revealStyle: g, isVisible: L } = T({
+    dataX: t,
+    dataY: e,
+    magnetic: p
+  });
+  if (!L || !i)
     return null;
-  const f = F(s, o), P = f != null, d = x && P, W = Y(t.y, c, m, d), j = p ?? K;
-  return /* @__PURE__ */ k(
+  const s = k(r, t), y = s !== void 0, c = y ? _({
+    text: s,
+    pixelX: i.x,
+    pixelY: i.y,
+    size: f,
+    labelPosition: a,
+    showLabelArrow: m,
+    area: v,
+    alignment: b
+  }) : null, h = u ?? F;
+  return /* @__PURE__ */ A(
     "g",
     {
       "data-testid": "point-group",
-      onClick: u,
+      onClick: x,
       style: {
-        ...C,
-        ...u ? { cursor: "pointer" } : void 0
+        ...g,
+        ...x ? { cursor: "pointer" } : void 0
       },
       children: [
-        !y && /* @__PURE__ */ n(
-          "circle",
+        !d && /* @__PURE__ */ n(G, { x: i.x, y: i.y, size: f, color: o }),
+        y && m && /* @__PURE__ */ n(
+          I,
           {
-            "data-testid": "point-circle",
-            cx: t.x,
-            cy: t.y,
-            r: c,
-            style: {
-              fill: A,
-              stroke: e("var(--background-canvas)")
-            },
-            strokeWidth: R
+            x: i.x,
+            y: i.y,
+            size: f,
+            position: a
           }
         ),
-        d && /* @__PURE__ */ n(
-          "polygon",
+        s != null && c && /* @__PURE__ */ n(
+          h,
           {
-            "data-testid": "point-arrow",
-            points: I(t.x, t.y, c, m),
-            style: { fill: e("var(--text-base)") }
+            x: c.x,
+            y: c.y,
+            textAnchor: c.textAnchor,
+            children: s
           }
-        ),
-        f != null && /* @__PURE__ */ n(j, { x: t.x, y: W, children: f })
+        )
       ]
     }
   );
 }
 export {
-  $ as Point,
-  K as PointLabel
+  Z as Point,
+  F as PointLabel
 };

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

@@ -4,4 +4,6 @@ export declare const ARROW_WIDTH = 6;
 export declare const ARROW_HEIGHT = 4;
 export declare const GAP = 4;
 export declare const LABEL_FONT_SIZE = 10;
+/** Approximate width of a character in the label font, as a ratio of the font size. */
+export declare const LABEL_CHAR_WIDTH_RATIO = 0.6;
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,GAAG,IAAI,CAAC;AACrB,eAAO,MAAM,eAAe,KAAK,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,GAAG,IAAI,CAAC;AACrB,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,uFAAuF;AACvF,eAAO,MAAM,sBAAsB,MAAM,CAAC"}

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

@@ -1,9 +1,10 @@
-const o = 10, t = 2, c = 6, n = 4, s = 4, E = 10;
+const _ = 10, o = 2, t = 6, A = 4, T = 4, c = 10, n = 0.6;
 export {
-  n as ARROW_HEIGHT,
-  c as ARROW_WIDTH,
-  o as DEFAULT_SIZE,
-  s as GAP,
-  E as LABEL_FONT_SIZE,
-  t as STROKE_WIDTH
+  A as ARROW_HEIGHT,
+  t as ARROW_WIDTH,
+  _ as DEFAULT_SIZE,
+  T as GAP,
+  n as LABEL_CHAR_WIDTH_RATIO,
+  c as LABEL_FONT_SIZE,
+  o as STROKE_WIDTH
 };

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

@@ -5,6 +5,28 @@ export type PointLabelProps = {
     children: string;
 } & Omit<SVGProps<SVGTextElement>, 'x' | 'y' | 'children'>;
 export type PointLabelComponent = ComponentType<PointLabelProps>;
+/**
+ * Horizontal alignment strategy for a point's label.
+ *
+ * - `'auto'`: keep the label inside the drawing area, anchoring it to the
+ *   nearest edge when it would overflow.
+ * - `'center'`: always centre the label on the point.
+ */
+export type LabelAlignment = 'center' | 'auto';
+/**
+ * Pixel position and styling inputs shared by the point's rendered glyphs. Each
+ * glyph picks the subset it needs and derives its own pixel geometry (e.g.
+ * radius from `size`).
+ */
+type PointGlyphProps = {
+    x: number;
+    y: number;
+    size: number;
+    color?: string;
+    position: 'top' | 'bottom';
+};
+export type PointMarkerProps = Pick<PointGlyphProps, 'x' | 'y' | 'size' | 'color'>;
+export type PointArrowProps = Pick<PointGlyphProps, 'x' | 'y' | 'size' | 'position'>;
 export type PointProps = {
     /**
      * X coordinate in data space (index or explicit value).
@@ -74,5 +96,15 @@ export type PointProps = {
      * @default false
      */
     magnetic?: boolean;
+    /**
+     * Horizontal alignment of the label relative to the chart's drawing area.
+     * With `'auto'`, a label that would overflow the left/right edge is anchored
+     * to that edge and grows inward instead of being clipped, while the arrow
+     * keeps pointing at the exact data point. Use `'center'` to always centre the
+     * label on the point.
+     * @default 'auto'
+     */
+    labelAlignment?: LabelAlignment;
 };
+export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,MAAM,eAAe,GAAG;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACjD;;;;;OAKG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,MAAM,eAAe,GAAG;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEjE;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE/C;;;;GAIG;AACH,KAAK,eAAe,GAAG;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,eAAe,EACf,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,CAC7B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,eAAe,EACf,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,UAAU,CAChC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACjD;;;;;OAKG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC"}

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

@@ -0,0 +1,33 @@
+import { CSSProperties } from 'react';
+import { DrawingArea } from '../../utils/types';
+import { BaseAxisProps } from '../Axis';
+import { MagneticPointsContextValue } from './pointContext/magneticPointsContext';
+type Pixel = {
+    x: number;
+    y: number;
+};
+type UsePointGeometryParams = {
+    dataX: number;
+    dataY: number;
+    magnetic: boolean;
+};
+type PointGeometry = {
+    pixel: Pixel | undefined;
+    drawingArea: DrawingArea;
+    revealStyle: CSSProperties | undefined;
+    isVisible: boolean;
+};
+/**
+ * Resolves a point's chart geometry and behaviour: projects its data
+ * coordinates to pixels, registers it as a magnetic snap target when enabled,
+ * exposes the reveal-animation style, and reports whether it falls inside the
+ * drawing area.
+ */
+export declare const usePointGeometry: ({ dataX, dataY, magnetic, }: UsePointGeometryParams) => PointGeometry;
+/**
+ * Registers/unregisters a data index as a magnetic snap target
+ * when the Point has `magnetic` enabled.
+ */
+export declare const useMagneticRegistration: (magnetic: boolean, dataX: number, getXAxisConfig: () => BaseAxisProps | undefined, { register, unregister }: MagneticPointsContextValue) => void;
+export {};
+//# sourceMappingURL=usePointGeometry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePointGeometry.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/usePointGeometry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAsB,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGvF,KAAK,KAAK,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtC,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;IACvC,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,6BAI9B,sBAAsB,KAAG,aAqB3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,UAAU,OAAO,EACjB,OAAO,MAAM,EACb,gBAAgB,MAAM,aAAa,GAAG,SAAS,EAC/C,0BAA0B,0BAA0B,KACnD,IAQF,CAAC"}

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

@@ -0,0 +1,30 @@
+import { useMemo as x, useEffect as a } from "react";
+import { projectPoint as v } from "../../utils/scales/scales.js";
+import { isWithinBounds as C, resolveDataXToIndex as S } from "./utils.js";
+import { useCartesianChartContext as g } from "../CartesianChart/context/cartesianChartContext.js";
+import { useMagneticPointsContext as y } from "./pointContext/magneticPointsContext.js";
+import { usePointReveal as P } from "../CartesianChart/RevealAnimation/context.js";
+const A = ({
+  dataX: t,
+  dataY: e,
+  magnetic: n
+}) => {
+  const { getXScale: r, getYScale: i, getXAxisConfig: o, drawingArea: u } = g(), f = y();
+  d(n, t, o, f);
+  const c = r(), m = i(), s = x(() => {
+    if (!(!c || !m))
+      return v(t, e, c, m);
+  }, [t, e, c, m]), l = P(), p = s !== void 0 && C(s.x, s.y, u);
+  return { pixel: s, drawingArea: u, revealStyle: l, isVisible: p };
+}, d = (t, e, n, { register: r, unregister: i }) => {
+  a(() => {
+    if (!t) return;
+    const o = S(e, n());
+    if (o !== void 0)
+      return r(o), () => i(o);
+  }, [t, e, n, r, i]);
+};
+export {
+  d as useMagneticRegistration,
+  A as usePointGeometry
+};

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

@@ -1,6 +1,7 @@
 import { DrawingArea } from '../../utils/types';
 import { BaseAxisProps } from '../Axis';
-import { MagneticPointsContextValue } from './pointContext/magneticPointsContext';
+import { LabelAlignment } from './types';
+export type LabelTextAnchor = 'start' | 'middle' | 'end';
 export declare const isWithinBounds: (px: number, py: number, area: DrawingArea) => boolean;
 /**
  * Builds the three SVG points of the arrow triangle.
@@ -15,12 +16,36 @@ export declare const buildArrowPoints: (cx: number, cy: number, radius: number,
 export declare const resolveLabel: (label: string | ((dataIndex: number) => string) | undefined, dataX: number) => string | undefined;
 export declare const resolveDataXToIndex: (dataX: number, axisConfig: BaseAxisProps | undefined) => number | undefined;
 /**
- * Registers/unregisters a data index as a magnetic snap target
- * when the Point has `magnetic` enabled.
+ * Computes the label's horizontal placement, keeping it inside the drawing area
+ * near the left/right edges. Centred on the point when it fits; otherwise
+ * anchored to the edge and aligned with the arrow's outer vertex (offset by half
+ * the arrow width from the point, when an arrow is rendered).
  */
-export declare const useMagneticRegistration: (magnetic: boolean, dataX: number, getXAxisConfig: () => BaseAxisProps | undefined, { register, unregister }: MagneticPointsContextValue) => void;
+export declare const computeLabelX: (pixelX: number, label: string, area: DrawingArea, alignment: LabelAlignment, hasArrow: boolean) => {
+    x: number;
+    textAnchor: LabelTextAnchor;
+};
 /**
  * Computes the vertical position of the label text baseline.
  */
 export declare const computeLabelY: (pixelY: number, radius: number, labelPosition: "top" | "bottom", renderArrow: boolean) => number;
+/**
+ * Computes where a point's label is drawn: the (optionally clamped) horizontal
+ * placement and the vertical baseline. Label content is resolved separately via
+ * {@link resolveLabel}.
+ */
+export declare const computeLabelGeometry: ({ text, pixelX, pixelY, size, labelPosition, showLabelArrow, area, alignment, }: {
+    text: string;
+    pixelX: number;
+    pixelY: number;
+    size: number;
+    labelPosition: "top" | "bottom";
+    showLabelArrow: boolean;
+    area: DrawingArea;
+    alignment: LabelAlignment;
+}) => {
+    x: number;
+    y: number;
+    textAnchor: LabelTextAnchor;
+};
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAEvF,eAAO,MAAM,cAAc,GACzB,IAAI,MAAM,EACV,IAAI,MAAM,EACV,MAAM,WAAW,KAChB,OAIyB,CAAC;AAE7B;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,IAAI,MAAM,EACV,IAAI,MAAM,EACV,QAAQ,MAAM,EACd,UAAU,KAAK,GAAG,QAAQ,KACzB,MAYF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,EAC3D,OAAO,MAAM,KACZ,MAAM,GAAG,SAGX,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,MAAM,EACb,YAAY,aAAa,GAAG,SAAS,KACpC,MAAM,GAAG,SAMX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,UAAU,OAAO,EACjB,OAAO,MAAM,EACb,gBAAgB,MAAM,aAAa,GAAG,SAAS,EAC/C,0BAA0B,0BAA0B,KACnD,IAQF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,QAAQ,MAAM,EACd,eAAe,KAAK,GAAG,QAAQ,EAC/B,aAAa,OAAO,KACnB,MAMF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Point/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEzD,eAAO,MAAM,cAAc,GACzB,IAAI,MAAM,EACV,IAAI,MAAM,EACV,MAAM,WAAW,KAChB,OAIyB,CAAC;AAE7B;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,IAAI,MAAM,EACV,IAAI,MAAM,EACV,QAAQ,MAAM,EACd,UAAU,KAAK,GAAG,QAAQ,KACzB,MAYF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,EAC3D,OAAO,MAAM,KACZ,MAAM,GAAG,SAGX,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,MAAM,EACb,YAAY,aAAa,GAAG,SAAS,KACpC,MAAM,GAAG,SAMX,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,OAAO,MAAM,EACb,MAAM,WAAW,EACjB,WAAW,cAAc,EACzB,UAAU,OAAO,KAChB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,eAAe,CAAA;CAgB1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,QAAQ,MAAM,EACd,eAAe,KAAK,GAAG,QAAQ,EAC/B,aAAa,OAAO,KACnB,MAMF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,iFASlC;IACD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,KAAK,GAAG,QAAQ,CAAC;IAChC,cAAc,EAAE,OAAO,CAAC;IACxB,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,cAAc,CAAC;CAC3B,KAAG;IACF,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,eAAe,CAAC;CAY7B,CAAC"}

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

@@ -1,38 +1,54 @@
-import { useEffect as d } from "react";
-import { GAP as i, LABEL_FONT_SIZE as p, ARROW_HEIGHT as f, ARROW_WIDTH as v } from "./constants.js";
-const R = (t, n, o) => t >= o.x && t <= o.x + o.width && n >= o.y && n <= o.y + o.height, W = (t, n, o, r) => {
-  const s = v / 2;
+import { GAP as i, LABEL_FONT_SIZE as h, LABEL_CHAR_WIDTH_RATIO as x, ARROW_WIDTH as A, ARROW_HEIGHT as d } from "./constants.js";
+const _ = (t, o, n) => t >= n.x && t <= n.x + n.width && o >= n.y && o <= n.y + n.height, I = (t, o, n, r) => {
+  const e = A / 2;
   if (r === "top") {
-    const c = n - o - i, $ = c - f;
-    return `${t},${c} ${t - s},${$} ${t + s},${$}`;
+    const f = o - n - i, u = f - d;
+    return `${t},${f} ${t - e},${u} ${t + e},${u}`;
   }
-  const e = n + o + i, u = e + f;
-  return `${t},${e} ${t - s},${u} ${t + s},${u}`;
-}, b = (t, n) => {
-  const o = typeof t == "function" ? t(n) : t;
-  return o === "" ? void 0 : o;
-}, h = (t, n) => {
-  const o = n?.data;
-  if (!o || typeof o[0] != "number") return t;
-  const r = o.indexOf(t);
+  const s = o + n + i, c = s + d;
+  return `${t},${s} ${t - e},${c} ${t + e},${c}`;
+}, R = (t, o) => {
+  const n = typeof t == "function" ? t(o) : t;
+  return n === "" ? void 0 : n;
+}, T = (t, o) => {
+  const n = o?.data;
+  if (!n || typeof n[0] != "number") return t;
+  const r = n.indexOf(t);
   if (r !== -1)
     return r;
-}, A = (t, n, o, { register: r, unregister: s }) => {
-  d(() => {
-    if (!t) return;
-    const e = h(n, o());
-    if (e !== void 0)
-      return r(e), () => s(e);
-  }, [t, n, o, r, s]);
-}, E = (t, n, o, r) => {
-  const s = r ? f + i : i;
-  return o === "top" ? t - n - s - i : t + n + s + i + p;
+}, L = (t, o, n, r, e) => {
+  if (r === "center")
+    return { x: t, textAnchor: "middle" };
+  const s = o.length * h * x / 2, c = e ? A / 2 : 0;
+  return t - s < n.x ? { x: t - c, textAnchor: "start" } : t + s > n.x + n.width ? { x: t + c, textAnchor: "end" } : { x: t, textAnchor: "middle" };
+}, O = (t, o, n, r) => {
+  const e = r ? d + i : i;
+  return n === "top" ? t - o - e - i : t + o + e + i + h;
+}, b = ({
+  text: t,
+  pixelX: o,
+  pixelY: n,
+  size: r,
+  labelPosition: e,
+  showLabelArrow: s,
+  area: c,
+  alignment: f
+}) => {
+  const { x: u, textAnchor: $ } = L(
+    o,
+    t,
+    c,
+    f,
+    s
+  ), m = O(n, r / 2, e, s);
+  return { x: u, y: m, textAnchor: $ };
 };
 export {
-  W as buildArrowPoints,
-  E as computeLabelY,
-  R as isWithinBounds,
-  h as resolveDataXToIndex,
-  b as resolveLabel,
-  A as useMagneticRegistration
+  I as buildArrowPoints,
+  b as computeLabelGeometry,
+  L as computeLabelX,
+  O as computeLabelY,
+  _ as isWithinBounds,
+  T as resolveDataXToIndex,
+  R as resolveLabel
 };

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react-visualization",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "@ledgerhq/lumen-design-core": "0.1.17",
-    "@ledgerhq/lumen-ui-react": "0.1.40",
+    "@ledgerhq/lumen-ui-react": "0.1.42",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "react": "^18.0.0 || ^19.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react-visualization",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -33,8 +33,8 @@
     ]
   },
   "peerDependencies": {
-    "@ledgerhq/lumen-design-core": "0.1.17",
-    "@ledgerhq/lumen-ui-react": "0.1.41",
+    "@ledgerhq/lumen-design-core": "0.1.18",
+    "@ledgerhq/lumen-ui-react": "0.1.43",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "react": "^18.0.0 || ^19.0.0",
@@ -42,7 +42,7 @@
     "tailwind-merge": "^2.6.0"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.1.5",
+    "@ledgerhq/lumen-utils-shared": "0.1.6",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0"