@ledgerhq/lumen-ui-react 0.1.56 → 0.1.57

package/dist/lib/Components/visualization/Point/pointContext/MagneticPointsProvider.js

@@ -0,0 +1,22 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as l, useState as v, useCallback as n, useMemo as g } from "react";
+import { MagneticRegistryProvider as h, MagneticSnapshotProvider as M } from "./magneticPointsContext.js";
+function S({
+  children: f
+}) {
+  const e = l(/* @__PURE__ */ new Set()), [s, o] = v(0), i = n((r) => {
+    e.current.has(r) || (e.current.add(r), o((t) => t + 1));
+  }, []), c = n((r) => {
+    e.current.has(r) && (e.current.delete(r), o((t) => t + 1));
+  }, []), u = n(() => e.current, []), m = g(
+    () => ({ register: i, unregister: c }),
+    [i, c]
+  ), p = g(
+    () => ({ version: s, getMagneticPoints: u }),
+    [s, u]
+  );
+  return /* @__PURE__ */ a(h, { value: m, children: /* @__PURE__ */ a(M, { value: p, children: f }) });
+}
+export {
+  S as MagneticPointsProvider
+};

package/dist/lib/Components/visualization/Point/pointContext/index.d.ts

@@ -0,0 +1,3 @@
+export { useMagneticRegistry, useMagneticSnapshot, type MagneticRegistryValue, type MagneticSnapshotValue, } from './magneticPointsContext';
+export { MagneticPointsProvider } from './MagneticPointsProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/visualization/Point/pointContext/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/visualization/Point/pointContext/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,GAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/lib/Components/visualization/Point/pointContext/magneticPointsContext.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Stable registration API for magnetic points. Its identity never changes for
+ * the provider's lifetime, so consumers (every `Point`) do not re-render when
+ * the magnetic set changes — only when they mount/unmount.
+ */
+export type MagneticRegistryValue = {
+    register: (dataIndex: number) => void;
+    unregister: (dataIndex: number) => void;
+};
+/**
+ * Mutable snapshot of the registered magnetic points. Changes on every
+ * register/unregister (via `version`) and is consumed only by the scrubber,
+ * which needs to recompute its snap targets when the set changes.
+ */
+export type MagneticSnapshotValue = {
+    version: number;
+    getMagneticPoints: () => ReadonlySet<number>;
+};
+declare const MagneticRegistryProvider: import('react').FC<{
+    children: import('react').ReactNode;
+    value: MagneticRegistryValue;
+}>;
+declare const MagneticSnapshotProvider: import('react').FC<{
+    children: import('react').ReactNode;
+    value: MagneticSnapshotValue;
+}>;
+export declare const useMagneticRegistry: () => MagneticRegistryValue;
+export declare const useMagneticSnapshot: () => MagneticSnapshotValue;
+export { MagneticRegistryProvider, MagneticSnapshotProvider };
+//# sourceMappingURL=magneticPointsContext.d.ts.map

package/dist/lib/Components/visualization/Point/pointContext/magneticPointsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"magneticPointsContext.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/visualization/Point/pointContext/magneticPointsContext.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,QAAA,MAAO,wBAAwB;;;EAC+B,CAAC;AAE/D,QAAA,MAAO,wBAAwB;;;EAC+B,CAAC;AAE/D,eAAO,MAAM,mBAAmB,QAAO,qBAInC,CAAC;AAEL,eAAO,MAAM,mBAAmB,QAAO,qBAInC,CAAC;AAEL,OAAO,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/lib/Components/visualization/Point/pointContext/magneticPointsContext.js

@@ -0,0 +1,14 @@
+import { createSafeContext as e } from "../../../../../libs/utils-shared/dist/index.js";
+const [a, t] = e("MagneticRegistry"), [o, n] = e("MagneticSnapshot"), i = () => t({
+  consumerName: "useMagneticRegistry",
+  contextRequired: !0
+}), c = () => n({
+  consumerName: "useMagneticSnapshot",
+  contextRequired: !0
+});
+export {
+  a as MagneticRegistryProvider,
+  o as MagneticSnapshotProvider,
+  i as useMagneticRegistry,
+  c as useMagneticSnapshot
+};

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

@@ -0,0 +1,110 @@
+import { ComponentType, MouseEvent, SVGProps } from 'react';
+export type PointLabelProps = {
+    x: number;
+    y: number;
+    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).
+     */
+    dataX: number;
+    /**
+     * Y coordinate in data space.
+     */
+    dataY: number;
+    /**
+     * Fill color of the point circle.
+     * Defaults to `var(--background-muted-strong)`.
+     *
+     * Use the `cssVar` helper from `@ledgerhq/lumen-design-core` to
+     * resolve a design-token CSS variable at runtime:
+     *
+     * @example
+     * ```tsx
+     * import { cssVar } from '@ledgerhq/lumen-design-core';
+     *
+     * <Point dataX={0} dataY={42} color={cssVar('var(--background-error-strong)')} />
+     * ```
+     */
+    color?: string;
+    /**
+     * Text label displayed near the point.
+     * A string is rendered directly; a function receives `dataX` and returns
+     * the label string, enabling index-based formatting.
+     */
+    label?: string | ((dataIndex: number) => string);
+    /**
+     * Custom component rendered instead of the default `PointLabel`.
+     * Receives pixel coordinates (`x`, `y`) and the resolved label as
+     * `children`. Use `PointLabel` inside your component to retain
+     * design-token styling while customising layout or appearance.
+     */
+    LabelComponent?: PointLabelComponent;
+    /**
+     * Placement of the label relative to the point.
+     * @default 'top'
+     */
+    labelPosition?: 'top' | 'bottom';
+    /**
+     * When `true`, the point circle is hidden but the label (if any) is still rendered.
+     * @default false
+     */
+    hidePoint?: boolean;
+    /**
+     * Diameter of the point circle in pixels.
+     * Internally converted to an SVG radius (`size / 2`).
+     * @default 10
+     */
+    size?: number;
+    /**
+     * When `true`, an arrow is displayed pointing from the point to the label.
+     * @default true
+     */
+    showLabelArrow?: boolean;
+    /**
+     * Called when the point is clicked.
+     */
+    onClick?: (event: MouseEvent<SVGGElement>) => void;
+    /**
+     * When `true`, the scrubber magnetically snaps to this point within the
+     * chart's `magnetRadius`. Requires `enableScrubbing` to be set on the
+     * parent chart.
+     * @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/visualization/Point/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/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/visualization/Point/usePointGeometry.d.ts

@@ -0,0 +1,33 @@
+import { CSSProperties } from 'react';
+import { BaseAxisProps } from '../Axis';
+import { DrawingArea } from '../utils/types';
+import { MagneticRegistryValue } 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 }: MagneticRegistryValue) => void;
+export {};
+//# sourceMappingURL=usePointGeometry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePointGeometry.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/Point/usePointGeometry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAsB,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAGlF,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,qBAAqB,KAC9C,IAQF,CAAC"}

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

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

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

@@ -0,0 +1,51 @@
+import { BaseAxisProps } from '../Axis';
+import { DrawingArea } from '../utils/types';
+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.
+ *
+ * `'top'`    → arrow sits below the label, tip pointing **down** toward the circle.
+ * `'bottom'` → arrow sits above the label, tip pointing **up** toward the circle.
+ */
+export declare const buildArrowPoints: (cx: number, cy: number, radius: number, position: "top" | "bottom") => string;
+/**
+ * Resolves the label prop to a string or undefined.
+ */
+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;
+/**
+ * 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 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/visualization/Point/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/Point/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C,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,MAQF,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/visualization/Point/utils.js

@@ -0,0 +1,54 @@
+import { chartConfig as d } from "../config.js";
+const { point: e } = d, p = (t, n, o) => t >= o.x && t <= o.x + o.width && n >= o.y && n <= o.y + o.height, m = (t, n, o, s) => {
+  const r = e.arrowWidth / 2;
+  if (s === "top") {
+    const h = n - o - e.labelGap, a = h - e.arrowHeight;
+    return `${t},${h} ${t - r},${a} ${t + r},${a}`;
+  }
+  const i = n + o + e.labelGap, c = i + e.arrowHeight;
+  return `${t},${i} ${t - r},${c} ${t + r},${c}`;
+}, w = (t, n) => {
+  const o = typeof t == "function" ? t(n) : t;
+  return o === "" ? void 0 : o;
+}, x = (t, n) => {
+  const o = n?.data;
+  if (!o || typeof o[0] != "number") return t;
+  const s = o.indexOf(t);
+  if (s !== -1)
+    return s;
+}, u = (t, n, o, s, r) => {
+  if (s === "center")
+    return { x: t, textAnchor: "middle" };
+  const i = n.length * e.labelFontSize * e.labelCharWidthRatio / 2, c = r ? e.arrowWidth / 2 : 0;
+  return t - i < o.x ? { x: t - c, textAnchor: "start" } : t + i > o.x + o.width ? { x: t + c, textAnchor: "end" } : { x: t, textAnchor: "middle" };
+}, b = (t, n, o, s) => {
+  const r = s ? e.arrowHeight + e.labelGap : e.labelGap;
+  return o === "top" ? t - n - r - e.labelGap : t + n + r + e.labelGap + e.labelFontSize;
+}, G = ({
+  text: t,
+  pixelX: n,
+  pixelY: o,
+  size: s,
+  labelPosition: r,
+  showLabelArrow: i,
+  area: c,
+  alignment: h
+}) => {
+  const { x: a, textAnchor: l } = u(
+    n,
+    t,
+    c,
+    h,
+    i
+  ), f = b(o, s / 2, r, i);
+  return { x: a, y: f, textAnchor: l };
+};
+export {
+  m as buildArrowPoints,
+  G as computeLabelGeometry,
+  u as computeLabelX,
+  b as computeLabelY,
+  p as isWithinBounds,
+  x as resolveDataXToIndex,
+  w as resolveLabel
+};

package/dist/lib/Components/visualization/ReferenceLine/ReferenceLine.d.ts

@@ -0,0 +1,3 @@
+import { ReferenceLineProps } from './types';
+export declare function ReferenceLine(props: Readonly<ReferenceLineProps>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ReferenceLine.d.ts.map

package/dist/lib/Components/visualization/ReferenceLine/ReferenceLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferenceLine.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/ReferenceLine/ReferenceLine.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAYlD,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,kDAmChE"}

package/dist/lib/Components/visualization/ReferenceLine/ReferenceLine.js

@@ -0,0 +1,42 @@
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { chartConfig as h } from "../config.js";
+import { useReferenceLineGeometry as m } from "./useReferenceLineGeometry.js";
+const { color: o, font: t, referenceLine: y, strokeWidth: x } = h, u = {
+  fill: o.textMuted,
+  fontSize: t.labelSize,
+  fontWeight: t.labelWeightMedium,
+  fontFamily: t.family
+};
+function A(n) {
+  const r = m(n), { label: l, stroke: a = o.stroke, lineStyle: s = "dashed" } = n, d = s === "dashed" ? y.dashArray : void 0;
+  if (!r) return null;
+  const { linePoints: c, labelCoords: e } = r;
+  return /* @__PURE__ */ f("g", { "data-testid": "reference-line", children: [
+    /* @__PURE__ */ i(
+      "line",
+      {
+        "data-testid": "reference-line-line",
+        ...c,
+        stroke: a,
+        strokeWidth: x.line,
+        strokeDasharray: d,
+        strokeLinecap: "round"
+      }
+    ),
+    e && /* @__PURE__ */ i(
+      "text",
+      {
+        "data-testid": "reference-line-label",
+        x: e.x,
+        y: e.y,
+        textAnchor: e.textAnchor,
+        dominantBaseline: e.dominantBaseline,
+        style: u,
+        children: l
+      }
+    )
+  ] });
+}
+export {
+  A as ReferenceLine
+};

package/dist/lib/Components/visualization/ReferenceLine/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ReferenceLine';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/visualization/ReferenceLine/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/ReferenceLine/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}

package/dist/lib/Components/visualization/ReferenceLine/types.d.ts

@@ -0,0 +1,74 @@
+export type LabelAlignment = 'start' | 'center' | 'end';
+export type LabelPosition = 'start' | 'center' | 'end';
+export type ReferenceLineBaseProps = {
+    /**
+     * Label text displayed near the reference line.
+     */
+    label?: string;
+    /**
+     * Horizontal pixel offset applied to the label position.
+     * @default 0
+     */
+    labelDx?: number;
+    /**
+     * Vertical pixel offset applied to the label position.
+     * @default 0
+     */
+    labelDy?: number;
+    /**
+     * Position of the label along the line.
+     * @default 'end'
+     */
+    labelPosition?: LabelPosition;
+    /**
+     * Controls the direction the label text extends from its position.
+     * - `'start'`: text extends toward the start of the axis (left)
+     * - `'center'`: text is centered on the position
+     * - `'end'`: text extends toward the end of the axis (right)
+     *
+     * Defaults: `'center'` for vertical lines, inferred from `labelPosition` for horizontal lines.
+     */
+    labelHorizontalAlignment?: LabelAlignment;
+    /**
+     * Controls the direction the label text extends from its position.
+     * - `'start'`: text extends toward the start of the axis (up)
+     * - `'center'`: text is vertically centered on the position
+     * - `'end'`: text extends toward the end of the axis (down)
+     *
+     * Defaults: `'end'` for horizontal lines, inferred from `labelPosition` for vertical lines.
+     */
+    labelVerticalAlignment?: LabelAlignment;
+    /**
+     * Line color.
+     * @default cssVar('var(--border-muted)')
+     */
+    stroke?: string;
+    /**
+     * Line dash style.
+     * - `'dashed'`: rounded dots with `strokeDasharray="0.1 6"`
+     * - `'solid'`: continuous line
+     * @default 'dashed'
+     */
+    lineStyle?: 'solid' | 'dashed';
+};
+export type HorizontalReferenceLineProps = ReferenceLineBaseProps & {
+    /**
+     * Y-axis value in data space where the horizontal line is drawn.
+     * The horizontal line is rendered at this Y position spanning the full
+     * width of the drawing area.
+     */
+    dataY: number;
+    dataX?: never;
+};
+export type VerticalReferenceLineProps = ReferenceLineBaseProps & {
+    /**
+     * Data index along the X axis. When `xAxis.data` contains numeric values,
+     * the index is mapped to the corresponding axis value automatically.
+     * The vertical line is drawn at this position spanning the full height
+     * of the drawing area.
+     */
+    dataX: number;
+    dataY?: never;
+};
+export type ReferenceLineProps = HorizontalReferenceLineProps | VerticalReferenceLineProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/visualization/ReferenceLine/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/ReferenceLine/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;;OAOG;IACH,wBAAwB,CAAC,EAAE,cAAc,CAAC;IAC1C;;;;;;;OAOG;IACH,sBAAsB,CAAC,EAAE,cAAc,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,sBAAsB,GAAG;IAClE;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,sBAAsB,GAAG;IAChE;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B,4BAA4B,GAC5B,0BAA0B,CAAC"}

package/dist/lib/Components/visualization/ReferenceLine/useReferenceLineGeometry.d.ts

@@ -0,0 +1,21 @@
+import { ReferenceLineProps } from './types';
+import { LabelCoordinates } from './utils';
+type ReferenceLineGeometry = {
+    linePoints: {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    };
+    labelCoords: LabelCoordinates | null;
+};
+/**
+ * Resolves a reference line's chart geometry: reads the chart context, projects
+ * the targeted `dataX` (vertical) or `dataY` (horizontal) value to a validated
+ * pixel, and derives the line endpoints and optional label coordinates.
+ * Returns `null` when the value cannot be projected into the drawing area
+ * (see {@link resolvePixel}) or when neither axis is set.
+ */
+export declare const useReferenceLineGeometry: (props: Readonly<ReferenceLineProps>) => ReferenceLineGeometry | null;
+export {};
+//# sourceMappingURL=useReferenceLineGeometry.d.ts.map

package/dist/lib/Components/visualization/ReferenceLine/useReferenceLineGeometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReferenceLineGeometry.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/ReferenceLine/useReferenceLineGeometry.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,SAAS,CAAC;AAEjB,KAAK,qBAAqB,GAAG;IAC3B,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACtC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,GACnC,OAAO,QAAQ,CAAC,kBAAkB,CAAC,KAClC,qBAAqB,GAAG,IAwD1B,CAAC"}

package/dist/lib/Components/visualization/ReferenceLine/useReferenceLineGeometry.js

@@ -0,0 +1,49 @@
+import { resolvePixel as n, computeHorizontalLabelCoordinates as s, computeVerticalLabelCoordinates as c } from "./utils.js";
+import { useCartesianChartContext as g } from "../CartesianChart/context/cartesianChartContext.js";
+const m = (e) => {
+  const { getXScale: o, getYScale: x, getXAxisConfig: r, getYAxisConfig: d, drawingArea: l } = g(), t = {
+    labelPosition: e.labelPosition ?? "end",
+    drawingArea: l,
+    dx: e.labelDx ?? 0,
+    dy: e.labelDy ?? 0,
+    horizontalAlignment: e.labelHorizontalAlignment,
+    verticalAlignment: e.labelVerticalAlignment
+  };
+  if (e.dataY !== void 0) {
+    const a = n({
+      dataValue: e.dataY,
+      scale: x(),
+      axis: "y",
+      drawingArea: l,
+      axisConfig: d()
+    });
+    return a === void 0 ? null : {
+      linePoints: {
+        x1: l.x,
+        y1: a,
+        x2: l.x + l.width,
+        y2: a
+      },
+      labelCoords: e.label ? s({ pixel: a, ...t }) : null
+    };
+  }
+  const i = n({
+    dataValue: e.dataX,
+    scale: o(),
+    axis: "x",
+    drawingArea: l,
+    axisConfig: r()
+  });
+  return i === void 0 ? null : {
+    linePoints: {
+      x1: i,
+      y1: l.y,
+      x2: i,
+      y2: l.y + l.height
+    },
+    labelCoords: e.label ? c({ pixel: i, ...t }) : null
+  };
+};
+export {
+  m as useReferenceLineGeometry
+};

package/dist/lib/Components/visualization/ReferenceLine/utils.d.ts

@@ -0,0 +1,50 @@
+import { BaseAxisProps } from '../Axis';
+import { ChartScaleFunction, DrawingArea } from '../utils/types';
+import { LabelAlignment, LabelPosition } from './types';
+export type LabelCoordinates = {
+    x: number;
+    y: number;
+    textAnchor: 'start' | 'middle' | 'end';
+    dominantBaseline: 'hanging' | 'central' | 'auto';
+};
+type ResolvePixelParams = {
+    dataValue: number;
+    scale: ChartScaleFunction | undefined;
+    axis: 'x' | 'y';
+    drawingArea: DrawingArea;
+    axisConfig?: BaseAxisProps;
+};
+type LabelParams = {
+    pixel: number;
+    labelPosition: LabelPosition;
+    drawingArea: DrawingArea;
+    dx?: number;
+    dy?: number;
+    horizontalAlignment?: LabelAlignment;
+    verticalAlignment?: LabelAlignment;
+};
+/**
+ * Checks whether a pixel coordinate falls within the drawing area
+ * along a single axis.
+ */
+export declare const isPixelWithinDrawingArea: (pixel: number, axis: "x" | "y", drawingArea: DrawingArea) => boolean;
+/**
+ * Resolves a data-space value to a validated pixel coordinate.
+ * When `axisConfig` is provided, the data value is first translated
+ * through the axis data array before being projected onto the scale.
+ * Returns `undefined` if the value is out of bounds, the scale is missing,
+ * the result is not finite, or the pixel falls outside the drawing area.
+ */
+export declare const resolvePixel: ({ dataValue, scale, axis, drawingArea, axisConfig, }: ResolvePixelParams) => number | undefined;
+/**
+ * Computes the label pixel coordinates and text alignment attributes
+ * for a horizontal reference line.
+ */
+export declare const computeHorizontalLabelCoordinates: ({ pixel, labelPosition, drawingArea, dx, dy, horizontalAlignment, verticalAlignment, }: LabelParams) => LabelCoordinates;
+/**
+ * Computes the label pixel coordinates and text alignment attributes
+ * for a vertical reference line.
+ */
+export declare const computeVerticalLabelCoordinates: ({ pixel, labelPosition, drawingArea, dx, dy, horizontalAlignment, verticalAlignment, }: LabelParams) => LabelCoordinates;
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/Components/visualization/ReferenceLine/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/ReferenceLine/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEtE,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,gBAAgB,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;CAClD,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACtC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChB,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,WAAW,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mBAAmB,CAAC,EAAE,cAAc,CAAC;IACrC,iBAAiB,CAAC,EAAE,cAAc,CAAC;CACpC,CAAC;AAuBF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,OAAO,MAAM,EACb,MAAM,GAAG,GAAG,GAAG,EACf,aAAa,WAAW,KACvB,OAKF,CAAC;AAqBF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,sDAM1B,kBAAkB,KAAG,MAAM,GAAG,SAehC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iCAAiC,GAAI,wFAQ/C,WAAW,KAAG,gBAKf,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,+BAA+B,GAAI,wFAQ7C,WAAW,KAAG,gBAKf,CAAC"}