@ledgerhq/lumen-utils-shared 0.0.19 → 0.1.0

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './lib/cn';
 export * from './lib/isTextChildren';
 export * from './lib/useMergeRef';
 export * from './lib/getObjectPath';
+export * from './lib/components';
 export * from './lib/throttle';
 export * from './lib/debounce';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}

package/dist/index.js

@@ -1,162 +1,203 @@
-import { jsx as W } from "react/jsx-runtime";
-import { createContext as k, useMemo as A, use as F } from "react";
+import { jsx as k } from "react/jsx-runtime";
+import { createContext as W, useMemo as D, useContext as F } from "react";
 import { clsx as _ } from "clsx";
 import { twMerge as j } from "tailwind-merge";
 function q(t) {
-  return t ? t.split(/[-_ ]+/).map((n) => n.charAt(0).toUpperCase() + n.slice(1).toLowerCase()).join("") : "";
+  return t ? t.split(/[-_ ]+/).map((e) => e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()).join("") : "";
 }
-const z = 48, N = 17, R = 2;
+const N = 48, R = 17, w = 2;
 function G(t) {
-  const n = t.replace(/\D/g, "").length;
+  const e = t.replace(/\D/g, "").length;
   return Math.max(
-    N,
-    z - n * R
+    R,
+    N - e * w
   );
 }
-function D(t, n = !0) {
+function C(t, e = !0) {
   if (!t) return "";
-  const l = t.includes("."), [o, r] = t.split("."), c = o.replace(/\B(?=(\d{3})+(?!\d))/g, " ");
-  return l && n ? r ? `${c}.${r}` : `${c}.` : c;
+  const o = t.includes("."), [c, r] = t.split("."), u = c.replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+  return o && e ? r ? `${u}.${r}` : `${u}.` : u;
 }
-function H(t, n = {}) {
+function H(t, e = {}) {
   const {
-    allowDecimals: l = !0,
-    thousandsSeparator: o = !0,
+    allowDecimals: o = !0,
+    thousandsSeparator: c = !0,
     maxIntegerLength: r = 9,
-    maxDecimalLength: c = 9
-  } = n, i = t.replace(",", ".").replace(/[^\d.]/g, "");
-  let e = i;
-  if (e = e.replace(/^0+(?=\d)/, ""), !l)
-    return e = e.replace(/\D/g, ""), r > 0 && e.length > r && (e = e.slice(0, r)), o ? D(e) : e;
-  e === "." && (e = "0.");
-  const f = e.indexOf(".");
-  if (f !== -1) {
-    let s = e.slice(0, f), a = e.slice(f + 1).replace(/\./g, "");
-    r > 0 && s.length > r && (s = s.slice(0, r)), a = a.slice(0, c), s === "" && (s = "0");
-    const g = i.endsWith(".") || e.endsWith(".");
-    e = a.length > 0 ? `${s}.${a}` : g ? `${s}.` : s;
+    maxDecimalLength: u = 9
+  } = e, i = t.replace(",", ".").replace(/[^\d.]/g, "");
+  let n = i;
+  if (n = n.replace(/^0+(?=\d)/, ""), !o)
+    return n = n.replace(/\D/g, ""), r > 0 && n.length > r && (n = n.slice(0, r)), c ? C(n) : n;
+  n === "." && (n = "0.");
+  const a = n.indexOf(".");
+  if (a !== -1) {
+    let s = n.slice(0, a), f = n.slice(a + 1).replace(/\./g, "");
+    r > 0 && s.length > r && (s = s.slice(0, r)), f = f.slice(0, u), s === "" && (s = "0");
+    const h = i.endsWith(".") || n.endsWith(".");
+    n = f.length > 0 ? `${s}.${f}` : h ? `${s}.` : s;
   } else
-    r > 0 && e.length > r && (e = e.slice(0, r));
-  return o ? D(e) : e;
+    r > 0 && n.length > r && (n = n.slice(0, r));
+  return c ? C(n) : n;
 }
-function J(t, n) {
-  const l = k(n), o = ({ children: c, value: i }) => {
-    const e = A(
+function J(t, e) {
+  const o = W(e), c = ({ children: u, value: i }) => {
+    const n = D(
       () => i,
       Object.values(i ?? {})
     );
-    return /* @__PURE__ */ W(l, { value: e, children: c });
+    return /* @__PURE__ */ k(o.Provider, { value: n, children: u });
   };
-  o.displayName = t + "Provider";
+  c.displayName = t + "Provider";
   function r({
-    consumerName: c,
+    consumerName: u,
     contextRequired: i
   }) {
-    const e = F(l);
-    if (e)
-      return e;
+    const n = F(o);
+    if (n)
+      return n;
     if (i)
       throw new Error(
-        `${c} must be used within ${t}`
+        `${u} must be used within ${t}`
       );
-    return n || {};
+    return e || {};
   }
-  return [o, r];
+  return [c, r];
 }
 function K(...t) {
   return j(_(t));
 }
-const I = (t) => typeof t == "string" || typeof t == "number", Q = (t) => Array.isArray(t) ? t.every(I) : I(t);
-function M(t, n) {
+const S = (t) => typeof t == "string" || typeof t == "number", Q = (t) => Array.isArray(t) ? t.every(S) : S(t);
+function I(t, e) {
   if (typeof t == "function")
-    return t(n);
-  typeof t == "object" && t !== null && "current" in t && (t.current = n);
+    return t(e);
+  typeof t == "object" && t !== null && "current" in t && (t.current = e);
 }
-function w(...t) {
-  const n = /* @__PURE__ */ new Map();
-  return (l) => {
-    if (l === null) {
-      t.forEach((o) => {
-        const r = n.get(o);
-        typeof r == "function" && r(), M(o, null);
-      }), n.clear();
+function z(...t) {
+  const e = /* @__PURE__ */ new Map();
+  return (o) => {
+    if (o === null) {
+      t.forEach((c) => {
+        const r = e.get(c);
+        typeof r == "function" && r(), I(c, null);
+      }), e.clear();
       return;
     }
-    t.forEach((o) => {
-      const r = M(o, l);
-      typeof r == "function" && n.set(o, r);
+    t.forEach((c) => {
+      const r = I(c, o);
+      typeof r == "function" && e.set(c, r);
     });
   };
 }
 function Y(...t) {
-  return A(() => w(...t), t);
+  return D(() => z(...t), t);
 }
-const tt = (t, n) => {
-  let l = t;
-  for (const o of n) {
-    if (l == null)
+const tt = (t, e) => {
+  let o = t;
+  for (const c of e) {
+    if (o == null)
       return;
-    l = l[o];
+    o = o[c];
   }
-  return l;
+  return o;
+}, et = ({
+  currentStep: t,
+  totalSteps: e,
+  size: o,
+  label: c,
+  strokeWidth: r = 4,
+  arcPercentage: u = 0.75
+}) => {
+  const i = Math.min(Math.max(t, 0), e), n = c ?? `${i}/${e}`, a = e <= 0 ? 0 : i / e, s = (o - r) / 2, f = o / 2, h = o / 2, m = 2 * Math.PI * s, g = m * u, T = g * (1 - a), p = i <= 0, A = `${g} ${m}`, $ = p ? g - 2 : T;
+  return {
+    displayLabel: n,
+    progress: a,
+    r: s,
+    cx: f,
+    cy: h,
+    circumference: m,
+    trackArcLength: g,
+    trackDashArray: `${g} ${m}`,
+    progressDashArray: A,
+    progressDashOffset: $,
+    showMinimalDot: p
+  };
+}, nt = (t) => D(
+  () => ({
+    integerPart: Array.from(t.integerPart, (e) => ({
+      value: e,
+      type: e.match(/^\d$/) ? "digit" : "separator"
+    })),
+    decimalPart: t.decimalPart ? Array.from(t.decimalPart, (e) => ({
+      value: e,
+      type: "digit"
+    })) : []
+  }),
+  [t.integerPart, t.decimalPart]
+), rt = (t, e, o) => {
+  if (e) return o;
+  const c = t.decimalPart ? `${t.decimalSeparator}${t.decimalPart}` : "", r = `${t.integerPart}${c}`;
+  return t.currencyPosition === "end" ? `${r} ${t.currencyText}` : `${t.currencyText} ${r}`;
 };
-function V(t, n, l = {}) {
-  const { leading: o = !1, trailing: r = !0, maxWait: c } = l;
-  let i = null, e = null, f = null, s = 0, a = null, g = null, d;
-  const x = c !== void 0, S = x ? Math.max(c, n) : 0, T = (u) => {
-    s = u;
-    const m = a, h = g;
-    return a = null, g = null, d = t.apply(h, m), d;
-  }, E = (u) => {
-    const m = f ? u - f : 0;
-    return n - m;
-  }, v = (u) => {
-    const m = f ? u - f : n, h = u - s;
-    return f === null || m >= n || m < 0 || x && h >= S;
-  }, C = (u) => (i = null, r && a ? T(u) : (a = null, g = null, d)), p = () => {
-    const u = Date.now();
-    if (v(u)) {
-      C(u);
+function V(t, e, o = {}) {
+  const { leading: c = !1, trailing: r = !0, maxWait: u } = o;
+  let i = null, n = null, a = null, s = 0, f = null, h = null, m;
+  const g = u !== void 0, T = g ? Math.max(u, e) : 0, p = (l) => {
+    s = l;
+    const d = f, y = h;
+    return f = null, h = null, m = t.apply(y, d), m;
+  }, A = (l) => {
+    const d = a ? l - a : 0;
+    return e - d;
+  }, $ = (l) => {
+    const d = a ? l - a : e, y = l - s;
+    return a === null || d >= e || d < 0 || g && y >= T;
+  }, M = (l) => (i = null, r && f ? p(l) : (f = null, h = null, m)), x = () => {
+    const l = Date.now();
+    if ($(l)) {
+      M(l);
       return;
     }
-    i = setTimeout(p, E(u));
-  }, P = () => {
-    const u = Date.now();
-    e = null, a && (T(u), i !== null && (clearTimeout(i), i = setTimeout(p, n)));
-  }, b = (u) => (s = u, i = setTimeout(p, n), x && (e = setTimeout(P, S)), o ? T(u) : d), $ = () => {
-    i !== null && clearTimeout(i), e !== null && clearTimeout(e), s = 0, a = null, g = null, f = null, i = null, e = null;
-  }, L = () => i === null && e === null ? d : C(Date.now()), O = () => i !== null || e !== null, y = function(...u) {
-    const m = Date.now(), h = v(m);
-    if (a = u, g = this, f = m, h) {
+    i = setTimeout(x, A(l));
+  }, b = () => {
+    const l = Date.now();
+    n = null, f && (p(l), i !== null && (clearTimeout(i), i = setTimeout(x, e)));
+  }, v = (l) => (s = l, i = setTimeout(x, e), g && (n = setTimeout(b, T)), c ? p(l) : m), E = () => {
+    i !== null && clearTimeout(i), n !== null && clearTimeout(n), s = 0, f = null, h = null, a = null, i = null, n = null;
+  }, L = () => i === null && n === null ? m : M(Date.now()), O = () => i !== null || n !== null, P = function(...l) {
+    const d = Date.now(), y = $(d);
+    if (f = l, h = this, a = d, y) {
       if (i === null)
-        return b(m);
-      if (x)
-        return clearTimeout(i), i = setTimeout(p, n), T(m);
+        return v(d);
+      if (g)
+        return clearTimeout(i), i = setTimeout(x, e), p(d);
     }
-    return i === null && (i = setTimeout(p, n)), d;
+    return i === null && (i = setTimeout(x, e)), m;
   };
-  return y.cancel = $, y.flush = L, y.pending = O, y;
+  return P.cancel = E, P.flush = L, P.pending = O, P;
 }
-function et(t, n, l = {}) {
-  const { leading: o = !0, trailing: r = !0 } = l;
-  return V(t, n, {
-    leading: o,
+function it(t, e, o = {}) {
+  const { leading: c = !0, trailing: r = !0 } = o;
+  return V(t, e, {
+    leading: c,
     trailing: r,
-    maxWait: n
+    maxWait: e
   });
 }
 export {
-  M as assignRef,
+  I as assignRef,
+  rt as buildAriaLabel,
   K as cn,
   J as createSafeContext,
   V as debounce,
-  D as formatThousands,
+  C as formatThousands,
   G as getFontSize,
   tt as getObjectPath,
+  et as getStepperCalculations,
   Q as isTextChildren,
-  w as mergeRefs,
+  z as mergeRefs,
   H as textFormatter,
-  et as throttle,
+  it as throttle,
   q as toPascalCase,
-  Y as useMergedRef
+  Y as useMergedRef,
+  nt as useSplitText
 };

package/dist/lib/components/amountDisplayHelpers/buildAriaLabel.d.ts

@@ -0,0 +1,3 @@
+import { FormattedValue } from './types';
+export declare const buildAriaLabel: (parts: FormattedValue, hidden: boolean, hiddenLabel: string) => string;
+//# sourceMappingURL=buildAriaLabel.d.ts.map

package/dist/lib/components/amountDisplayHelpers/buildAriaLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildAriaLabel.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/amountDisplayHelpers/buildAriaLabel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,cAAc,UAClB,cAAc,UACb,OAAO,eACF,MAAM,KAClB,MAaF,CAAC"}

package/dist/lib/components/amountDisplayHelpers/index.d.ts

@@ -0,0 +1,4 @@
+export { useSplitText } from './useSplitText';
+export { buildAriaLabel } from './buildAriaLabel';
+export type { FormattedValue, SplitChar } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/amountDisplayHelpers/index.d.ts.map

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

package/dist/lib/components/amountDisplayHelpers/types.d.ts

@@ -0,0 +1,30 @@
+export type SplitChar = {
+    value: string;
+    type: 'digit' | 'separator';
+};
+export type FormattedValue = {
+    /**
+     * The whole number portion of the amount (e.g., "1234" from 1234.56)
+     */
+    integerPart: string;
+    /**
+     * The fractional portion of the amount without the separator (e.g., "56" from 1234.56)
+     * @optional
+     */
+    decimalPart?: string;
+    /**
+     * The currency text or symbol (e.g., "$", "USD", "€", "BTC")
+     */
+    currencyText: string;
+    /**
+     * The character which separates integer and fractional parts.
+     */
+    decimalSeparator: '.' | ',';
+    /**
+     * Position of the currency text relative to the amount.
+     * @optional
+     * @default 'start'
+     */
+    currencyPosition?: 'start' | 'end';
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/components/amountDisplayHelpers/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/amountDisplayHelpers/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,WAAW,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,gBAAgB,EAAE,GAAG,GAAG,GAAG,CAAC;IAC5B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACpC,CAAC"}

package/dist/lib/components/amountDisplayHelpers/useSplitText.d.ts

@@ -0,0 +1,6 @@
+import { FormattedValue, SplitChar } from './types';
+export declare const useSplitText: (value: FormattedValue) => {
+    integerPart: SplitChar[];
+    decimalPart: SplitChar[];
+};
+//# sourceMappingURL=useSplitText.d.ts.map

package/dist/lib/components/amountDisplayHelpers/useSplitText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitText.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/amountDisplayHelpers/useSplitText.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,YAAY,UAChB,cAAc,KACpB;IACD,WAAW,EAAE,SAAS,EAAE,CAAC;IACzB,WAAW,EAAE,SAAS,EAAE,CAAC;CAiB1B,CAAC"}

package/dist/lib/components/getStepperCalculations/getStepperCalculations.d.ts

@@ -0,0 +1,61 @@
+export type StepperCalculationsInput = {
+    /** Current step number (1-based). Use 0 or negative for minimal dot. */
+    currentStep: number;
+    /** Total number of steps. */
+    totalSteps: number;
+    /** Size of the circular stepper in pixels. */
+    size: number;
+    /** Optional custom label. Defaults to "{currentStep}/{totalSteps}". */
+    label?: string;
+    /** Stroke width in pixels. @default 4 */
+    strokeWidth?: number;
+    /** Percentage of full circle to show as arc (0–1). @default 0.75 (270°) */
+    arcPercentage?: number;
+};
+export type StepperCalculationsOutput = {
+    /** Label text displayed in the center. */
+    displayLabel: string;
+    /** Progress value between 0 and 1. */
+    progress: number;
+    /** Circle radius in pixels. */
+    r: number;
+    /** Center x coordinate. */
+    cx: number;
+    /** Center y coordinate. */
+    cy: number;
+    /** Full circle circumference. */
+    circumference: number;
+    /** Length of the visible arc (track). */
+    trackArcLength: number;
+    /** strokeDasharray for the gray track circle. */
+    trackDashArray: string;
+    /** strokeDasharray for the progress (purple) circle. */
+    progressDashArray: string;
+    /** strokeDashoffset for the progress (purple) circle. */
+    progressDashOffset: number;
+    /** Whether to show minimal dot instead of progress arc. */
+    showMinimalDot: boolean;
+};
+/**
+ * Computes all SVG-related values needed to render a circular stepper.
+ *
+ * This is a pure utility shared between React (web) and React Native
+ * implementations of the Stepper component.
+ *
+ * @example
+ * ```ts
+ * const calcs = getStepperCalculations({
+ *   currentStep: 2,
+ *   totalSteps: 4,
+ *   size: 48,
+ * });
+ *
+ * // calcs.displayLabel → '2/4'
+ * // calcs.progress → 0.5
+ * // calcs.trackDashArray → '<trackArcLength> <circumference>'
+ * // calcs.progressDashArray → '<trackArcLength> <circumference>'
+ * // calcs.progressDashOffset → offset for 50% fill
+ * ```
+ */
+export declare const getStepperCalculations: ({ currentStep, totalSteps, size, label, strokeWidth, arcPercentage, }: StepperCalculationsInput) => StepperCalculationsOutput;
+//# sourceMappingURL=getStepperCalculations.d.ts.map

package/dist/lib/components/getStepperCalculations/getStepperCalculations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getStepperCalculations.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/getStepperCalculations/getStepperCalculations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,wBAAwB,GAAG;IACrC,wEAAwE;IACxE,WAAW,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,0CAA0C;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,2BAA2B;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,cAAc,EAAE,MAAM,CAAC;IACvB,wDAAwD;IACxD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yDAAyD;IACzD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,2DAA2D;IAC3D,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,sBAAsB,0EAOhC,wBAAwB,KAAG,yBAmC7B,CAAC"}

package/dist/lib/components/getStepperCalculations/index.d.ts

@@ -0,0 +1,2 @@
+export { getStepperCalculations, type StepperCalculationsInput, type StepperCalculationsOutput, } from './getStepperCalculations';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/getStepperCalculations/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/getStepperCalculations/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,yBAAyB,GAC/B,MAAM,0BAA0B,CAAC"}

package/dist/lib/components/index.d.ts

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

package/dist/lib/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC"}

package/dist/lib/createSafeContext/createSafeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createSafeContext.d.ts","sourceRoot":"","sources":["../../../src/lib/createSafeContext/createSafeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAEnE,wBAAgB,iBAAiB,CAAC,YAAY,SAAS,MAAM,EAC3D,iBAAiB,EAAE,MAAM,EACzB,cAAc,CAAC,EAAE,YAAY;cAKjB,SAAS;WACZ,YAAY;KAaG,eAAe,SAAS,OAAO,gDAGpD;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,eAAe,CAAC;CAClC,KAAG,eAAe,SAAS,IAAI,GAAG,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,EAgBxE"}
+{"version":3,"file":"createSafeContext.d.ts","sourceRoot":"","sources":["../../../src/lib/createSafeContext/createSafeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE1E,wBAAgB,iBAAiB,CAAC,YAAY,SAAS,MAAM,EAC3D,iBAAiB,EAAE,MAAM,EACzB,cAAc,CAAC,EAAE,YAAY;cAKjB,SAAS;WACZ,YAAY;KAaG,eAAe,SAAS,OAAO,gDAGpD;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,eAAe,CAAC;CAClC,KAAG,eAAe,SAAS,IAAI,GAAG,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,EAgBxE"}

package/dist/lib/getStepperCalculations/getStepperCalculations.d.ts

@@ -0,0 +1,61 @@
+export type StepperCalculationsInput = {
+    /** Current step number (1-based). Use 0 or negative for minimal dot. */
+    currentStep: number;
+    /** Total number of steps. */
+    totalSteps: number;
+    /** Size of the circular stepper in pixels. */
+    size: number;
+    /** Optional custom label. Defaults to "{currentStep}/{totalSteps}". */
+    label?: string;
+    /** Stroke width in pixels. @default 4 */
+    strokeWidth?: number;
+    /** Percentage of full circle to show as arc (0–1). @default 0.75 (270°) */
+    arcPercentage?: number;
+};
+export type StepperCalculationsOutput = {
+    /** Label text displayed in the center. */
+    displayLabel: string;
+    /** Progress value between 0 and 1. */
+    progress: number;
+    /** Circle radius in pixels. */
+    r: number;
+    /** Center x coordinate. */
+    cx: number;
+    /** Center y coordinate. */
+    cy: number;
+    /** Full circle circumference. */
+    circumference: number;
+    /** Length of the visible arc (track). */
+    trackArcLength: number;
+    /** strokeDasharray for the gray track circle. */
+    trackDashArray: string;
+    /** strokeDasharray for the progress (purple) circle. */
+    progressDashArray: string;
+    /** strokeDashoffset for the progress (purple) circle. */
+    progressDashOffset: number;
+    /** Whether to show minimal dot instead of progress arc. */
+    showMinimalDot: boolean;
+};
+/**
+ * Computes all SVG-related values needed to render a circular stepper.
+ *
+ * This is a pure utility shared between React (web) and React Native
+ * implementations of the Stepper component.
+ *
+ * @example
+ * ```ts
+ * const calcs = getStepperCalculations({
+ *   currentStep: 2,
+ *   totalSteps: 4,
+ *   size: 48,
+ * });
+ *
+ * // calcs.displayLabel → '2/4'
+ * // calcs.progress → 0.5
+ * // calcs.trackDashArray → '<trackArcLength> <circumference>'
+ * // calcs.progressDashArray → '<trackArcLength> <circumference>'
+ * // calcs.progressDashOffset → offset for 50% fill
+ * ```
+ */
+export declare const getStepperCalculations: ({ currentStep, totalSteps, size, label, strokeWidth, arcPercentage, }: StepperCalculationsInput) => StepperCalculationsOutput;
+//# sourceMappingURL=getStepperCalculations.d.ts.map

package/dist/lib/getStepperCalculations/getStepperCalculations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getStepperCalculations.d.ts","sourceRoot":"","sources":["../../../src/lib/getStepperCalculations/getStepperCalculations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,wBAAwB,GAAG;IACrC,wEAAwE;IACxE,WAAW,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,0CAA0C;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,2BAA2B;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,cAAc,EAAE,MAAM,CAAC;IACvB,wDAAwD;IACxD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yDAAyD;IACzD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,2DAA2D;IAC3D,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,sBAAsB,0EAOhC,wBAAwB,KAAG,yBAkC7B,CAAC"}

package/dist/lib/getStepperCalculations/index.d.ts

@@ -0,0 +1,2 @@
+export { getStepperCalculations, type StepperCalculationsInput, type StepperCalculationsOutput, } from './getStepperCalculations';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/getStepperCalculations/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/getStepperCalculations/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,yBAAyB,GAC/B,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-utils-shared",
-  "version": "0.0.19",
+  "version": "0.1.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/index.ts

@@ -5,5 +5,6 @@ export * from './lib/cn';
 export * from './lib/isTextChildren';
 export * from './lib/useMergeRef';
 export * from './lib/getObjectPath';
+export * from './lib/components';
 export * from './lib/throttle';
 export * from './lib/debounce';

package/src/lib/components/amountDisplayHelpers/buildAriaLabel.ts

@@ -0,0 +1,20 @@
+import { FormattedValue } from './types';
+
+export const buildAriaLabel = (
+  parts: FormattedValue,
+  hidden: boolean,
+  hiddenLabel: string,
+): string => {
+  if (hidden) return hiddenLabel;
+
+  const decimal = parts.decimalPart
+    ? `${parts.decimalSeparator}${parts.decimalPart}`
+    : '';
+  const amount = `${parts.integerPart}${decimal}`;
+
+  if (parts.currencyPosition === 'end') {
+    return `${amount} ${parts.currencyText}`;
+  }
+
+  return `${parts.currencyText} ${amount}`;
+};

package/src/lib/components/amountDisplayHelpers/index.ts

@@ -0,0 +1,3 @@
+export { useSplitText } from './useSplitText';
+export { buildAriaLabel } from './buildAriaLabel';
+export type { FormattedValue, SplitChar } from './types';

package/src/lib/components/amountDisplayHelpers/types.ts

@@ -0,0 +1,30 @@
+export type SplitChar = {
+  value: string;
+  type: 'digit' | 'separator';
+};
+
+export type FormattedValue = {
+  /**
+   * The whole number portion of the amount (e.g., "1234" from 1234.56)
+   */
+  integerPart: string;
+  /**
+   * The fractional portion of the amount without the separator (e.g., "56" from 1234.56)
+   * @optional
+   */
+  decimalPart?: string;
+  /**
+   * The currency text or symbol (e.g., "$", "USD", "€", "BTC")
+   */
+  currencyText: string;
+  /**
+   * The character which separates integer and fractional parts.
+   */
+  decimalSeparator: '.' | ',';
+  /**
+   * Position of the currency text relative to the amount.
+   * @optional
+   * @default 'start'
+   */
+  currencyPosition?: 'start' | 'end';
+};

package/src/lib/components/amountDisplayHelpers/useSplitText.test.ts

@@ -0,0 +1,101 @@
+import { renderHook } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import { FormattedValue } from './types';
+import { useSplitText } from './useSplitText';
+
+const createValue = (
+  overrides: Partial<FormattedValue> = {},
+): FormattedValue => ({
+  integerPart: '1234',
+  decimalPart: '56',
+  currencyText: 'USD',
+  decimalSeparator: '.',
+  currencyPosition: 'start',
+  ...overrides,
+});
+
+describe('useSplitText', () => {
+  it('splits integer part into individual digit characters', () => {
+    const { result } = renderHook(() => useSplitText(createValue()));
+
+    expect(result.current.integerPart).toEqual([
+      { value: '1', type: 'digit' },
+      { value: '2', type: 'digit' },
+      { value: '3', type: 'digit' },
+      { value: '4', type: 'digit' },
+    ]);
+  });
+
+  it('splits decimal part into individual digit characters', () => {
+    const { result } = renderHook(() => useSplitText(createValue()));
+
+    expect(result.current.decimalPart).toEqual([
+      { value: '5', type: 'digit' },
+      { value: '6', type: 'digit' },
+    ]);
+  });
+
+  it('returns empty decimal part when decimalPart is undefined', () => {
+    const { result } = renderHook(() =>
+      useSplitText(createValue({ decimalPart: undefined })),
+    );
+
+    expect(result.current.decimalPart).toEqual([]);
+  });
+
+  it('classifies group separators in integer part', () => {
+    const { result } = renderHook(() =>
+      useSplitText(createValue({ integerPart: '1,234,567' })),
+    );
+
+    expect(result.current.integerPart).toEqual([
+      { value: '1', type: 'digit' },
+      { value: ',', type: 'separator' },
+      { value: '2', type: 'digit' },
+      { value: '3', type: 'digit' },
+      { value: '4', type: 'digit' },
+      { value: ',', type: 'separator' },
+      { value: '5', type: 'digit' },
+      { value: '6', type: 'digit' },
+      { value: '7', type: 'digit' },
+    ]);
+  });
+
+  it('classifies space separators in integer part', () => {
+    const { result } = renderHook(() =>
+      useSplitText(createValue({ integerPart: '1 234 567' })),
+    );
+
+    expect(result.current.integerPart).toEqual([
+      { value: '1', type: 'digit' },
+      { value: ' ', type: 'separator' },
+      { value: '2', type: 'digit' },
+      { value: '3', type: 'digit' },
+      { value: '4', type: 'digit' },
+      { value: ' ', type: 'separator' },
+      { value: '5', type: 'digit' },
+      { value: '6', type: 'digit' },
+      { value: '7', type: 'digit' },
+    ]);
+  });
+
+  it('handles single digit integer part', () => {
+    const { result } = renderHook(() =>
+      useSplitText(createValue({ integerPart: '0' })),
+    );
+
+    expect(result.current.integerPart).toEqual([{ value: '0', type: 'digit' }]);
+  });
+
+  it('handles long decimal part', () => {
+    const { result } = renderHook(() =>
+      useSplitText(createValue({ decimalPart: '00123456' })),
+    );
+
+    expect(result.current.decimalPart).toHaveLength(8);
+    expect(result.current.decimalPart.every((c) => c.type === 'digit')).toBe(
+      true,
+    );
+  });
+});

package/src/lib/components/amountDisplayHelpers/useSplitText.ts

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import { FormattedValue, SplitChar } from './types';
+
+export const useSplitText = (
+  value: FormattedValue,
+): {
+  integerPart: SplitChar[];
+  decimalPart: SplitChar[];
+} => {
+  return useMemo(
+    () => ({
+      integerPart: Array.from(value.integerPart, (digit) => ({
+        value: digit,
+        type: digit.match(/^\d$/) ? 'digit' : 'separator',
+      })),
+      decimalPart: value.decimalPart
+        ? Array.from(value.decimalPart, (digit) => ({
+            value: digit,
+            type: 'digit',
+          }))
+        : [],
+    }),
+    [value.integerPart, value.decimalPart],
+  );
+};

package/src/lib/components/getStepperCalculations/getStepperCalculations.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { getStepperCalculations } from '../getStepperCalculations';
+
+describe('getStepperCalculations', () => {
+  const defaultInput = {
+    currentStep: 2,
+    totalSteps: 4,
+    size: 48,
+  };
+
+  it('should compute display label as "currentStep/totalSteps"', () => {
+    const result = getStepperCalculations(defaultInput);
+    expect(result.displayLabel).toBe('2/4');
+  });
+
+  it('should use custom label when provided', () => {
+    const result = getStepperCalculations({
+      ...defaultInput,
+      label: 'Step 2 of 4',
+    });
+    expect(result.displayLabel).toBe('Step 2 of 4');
+  });
+
+  it('should compute progress as currentStep / totalSteps', () => {
+    const result = getStepperCalculations(defaultInput);
+    expect(result.progress).toBe(0.5);
+  });
+
+  it('should clamp progress and label when currentStep is out of bounds', () => {
+    const negative = getStepperCalculations({
+      ...defaultInput,
+      currentStep: -3,
+    });
+    expect(negative.progress).toBe(0);
+    expect(negative.displayLabel).toBe('0/4');
+
+    const overflow = getStepperCalculations({
+      ...defaultInput,
+      currentStep: 10,
+    });
+    expect(overflow.progress).toBe(1);
+    expect(overflow.displayLabel).toBe('4/4');
+  });
+
+  it('should handle zero totalSteps gracefully', () => {
+    const result = getStepperCalculations({
+      ...defaultInput,
+      totalSteps: 0,
+    });
+    expect(result.progress).toBe(0);
+  });
+
+  it('should show minimal dot when currentStep <= 0', () => {
+    const zero = getStepperCalculations({
+      ...defaultInput,
+      currentStep: 0,
+    });
+    expect(zero.showMinimalDot).toBe(true);
+
+    const started = getStepperCalculations(defaultInput);
+    expect(started.showMinimalDot).toBe(false);
+  });
+});

package/src/lib/components/getStepperCalculations/getStepperCalculations.ts

@@ -0,0 +1,104 @@
+export type StepperCalculationsInput = {
+  /** Current step number (1-based). Use 0 or negative for minimal dot. */
+  currentStep: number;
+  /** Total number of steps. */
+  totalSteps: number;
+  /** Size of the circular stepper in pixels. */
+  size: number;
+  /** Optional custom label. Defaults to "{currentStep}/{totalSteps}". */
+  label?: string;
+  /** Stroke width in pixels. @default 4 */
+  strokeWidth?: number;
+  /** Percentage of full circle to show as arc (0–1). @default 0.75 (270°) */
+  arcPercentage?: number;
+};
+
+export type StepperCalculationsOutput = {
+  /** Label text displayed in the center. */
+  displayLabel: string;
+  /** Progress value between 0 and 1. */
+  progress: number;
+  /** Circle radius in pixels. */
+  r: number;
+  /** Center x coordinate. */
+  cx: number;
+  /** Center y coordinate. */
+  cy: number;
+  /** Full circle circumference. */
+  circumference: number;
+  /** Length of the visible arc (track). */
+  trackArcLength: number;
+  /** strokeDasharray for the gray track circle. */
+  trackDashArray: string;
+  /** strokeDasharray for the progress (purple) circle. */
+  progressDashArray: string;
+  /** strokeDashoffset for the progress (purple) circle. */
+  progressDashOffset: number;
+  /** Whether to show minimal dot instead of progress arc. */
+  showMinimalDot: boolean;
+};
+
+/**
+ * Computes all SVG-related values needed to render a circular stepper.
+ *
+ * This is a pure utility shared between React (web) and React Native
+ * implementations of the Stepper component.
+ *
+ * @example
+ * ```ts
+ * const calcs = getStepperCalculations({
+ *   currentStep: 2,
+ *   totalSteps: 4,
+ *   size: 48,
+ * });
+ *
+ * // calcs.displayLabel → '2/4'
+ * // calcs.progress → 0.5
+ * // calcs.trackDashArray → '<trackArcLength> <circumference>'
+ * // calcs.progressDashArray → '<trackArcLength> <circumference>'
+ * // calcs.progressDashOffset → offset for 50% fill
+ * ```
+ */
+export const getStepperCalculations = ({
+  currentStep,
+  totalSteps,
+  size,
+  label,
+  strokeWidth = 4,
+  arcPercentage = 0.75,
+}: StepperCalculationsInput): StepperCalculationsOutput => {
+  // Clamp currentStep: minimum 0, maximum totalSteps
+  const clampedCurrentStep = Math.min(Math.max(currentStep, 0), totalSteps);
+
+  const displayLabel = label ?? `${clampedCurrentStep}/${totalSteps}`;
+  const progress = totalSteps <= 0 ? 0 : clampedCurrentStep / totalSteps;
+
+  // SVG circle geometry
+  const r = (size - strokeWidth) / 2;
+  const cx = size / 2;
+  const cy = size / 2;
+  const circumference = 2 * Math.PI * r;
+
+  // Arc calculations
+  const trackArcLength = circumference * arcPercentage;
+  const dashOffset = trackArcLength * (1 - progress);
+
+  // Minimal dot handling (currentStep <= 0 means "not started")
+  const showMinimalDot = clampedCurrentStep <= 0;
+  const progressDashArray = `${trackArcLength} ${circumference}`;
+  const progressDashOffset = showMinimalDot ? trackArcLength - 2 : dashOffset;
+
+  return {
+    displayLabel,
+    progress,
+    r,
+    cx,
+    cy,
+    circumference,
+    trackArcLength,
+    trackDashArray: `${trackArcLength} ${circumference}`,
+    progressDashArray,
+    progressDashOffset,
+    showMinimalDot,
+  };
+};

package/src/lib/components/getStepperCalculations/index.ts

@@ -0,0 +1,5 @@
+export {
+  getStepperCalculations,
+  type StepperCalculationsInput,
+  type StepperCalculationsOutput,
+} from './getStepperCalculations';

package/src/lib/components/index.ts

@@ -0,0 +1,2 @@
+export * from './getStepperCalculations';
+export * from './amountDisplayHelpers';

package/src/lib/createSafeContext/createSafeContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, FC, ReactNode, use, useMemo } from 'react';
+import { createContext, FC, ReactNode, useContext, useMemo } from 'react';
 
 export function createSafeContext<ContextValue extends object>(
   rootComponentName: string,
@@ -16,7 +16,7 @@ export function createSafeContext<ContextValue extends object>(
       Object.values(context ?? {}),
     ) as ContextValue;
 
-    return <Context value={memoValue}>{children}</Context>;
+    return <Context.Provider value={memoValue}>{children}</Context.Provider>;
   };
 
   Provider.displayName = rootComponentName + 'Provider';
@@ -28,7 +28,7 @@ export function createSafeContext<ContextValue extends object>(
     consumerName: string;
     contextRequired: ContextRequired;
   }): ContextRequired extends true ? ContextValue : Partial<ContextValue> {
-    const context = use(Context);
+    const context = useContext(Context);
 
     if (context) {
       return context;

package/src/lib/getStepperCalculations/getStepperCalculations.test.ts

@@ -0,0 +1,139 @@
+import { describe, it, expect } from 'vitest';
+import { getStepperCalculations } from './getStepperCalculations';
+
+describe('getStepperCalculations', () => {
+  const defaultInput = {
+    currentStep: 2,
+    totalSteps: 4,
+    size: 48,
+  };
+
+  it('should compute display label from currentStep and totalSteps', () => {
+    const result = getStepperCalculations(defaultInput);
+    expect(result.displayLabel).toBe('2/4');
+  });
+
+  it('should use custom label when provided', () => {
+    const result = getStepperCalculations({
+      ...defaultInput,
+      label: 'Step 2 of 4',
+    });
+    expect(result.displayLabel).toBe('Step 2 of 4');
+  });
+
+  it('should clamp display label to totalSteps', () => {
+    const result = getStepperCalculations({
+      ...defaultInput,
+      currentStep: 10,
+    });
+    expect(result.displayLabel).toBe('4/4');
+  });
+
+  it('should compute progress as currentStep / totalSteps', () => {
+    const result = getStepperCalculations(defaultInput);
+    expect(result.progress).toBe(0.5);
+  });
+
+  it('should clamp progress between 0 and 1', () => {
+    const negativeResult = getStepperCalculations({
+      ...defaultInput,
+      currentStep: -1,
+    });
+    expect(negativeResult.progress).toBe(0);
+
+    const overflowResult = getStepperCalculations({
+      ...defaultInput,
+      currentStep: 10,
+    });
+    expect(overflowResult.progress).toBe(1);
+  });
+
+  it('should handle zero totalSteps gracefully', () => {
+    const result = getStepperCalculations({
+      ...defaultInput,
+      totalSteps: 0,
+    });
+    expect(result.progress).toBe(0);
+  });
+
+  it('should compute correct SVG geometry for default size', () => {
+    const result = getStepperCalculations(defaultInput);
+    expect(result.cx).toBe(24);
+    expect(result.cy).toBe(24);
+    expect(result.r).toBe(22); // (48 - 4) / 2
+  });
+
+  it('should respect custom strokeWidth', () => {
+    const result = getStepperCalculations({
+      ...defaultInput,
+      strokeWidth: 6,
+    });
+    expect(result.r).toBe(21); // (48 - 6) / 2
+  });
+
+  it('should compute trackArcLength as 75% of circumference by default', () => {
+    const result = getStepperCalculations(defaultInput);
+    const expectedCircumference = 2 * Math.PI * 22;
+    expect(result.circumference).toBeCloseTo(expectedCircumference);
+    expect(result.trackArcLength).toBeCloseTo(expectedCircumference * 0.75);
+  });
+
+  it('should respect custom arcPercentage', () => {
+    const result = getStepperCalculations({
+      ...defaultInput,
+      arcPercentage: 0.5,
+    });
+    const expectedCircumference = 2 * Math.PI * 22;
+    expect(result.trackArcLength).toBeCloseTo(expectedCircumference * 0.5);
+  });
+
+  it('should show minimal dot when currentStep is 0', () => {
+    const result = getStepperCalculations({
+      ...defaultInput,
+      currentStep: 0,
+    });
+    expect(result.showMinimalDot).toBe(true);
+    expect(result.progressDashOffset).toBeCloseTo(result.trackArcLength - 2);
+  });
+
+  it('should show minimal dot when currentStep is negative', () => {
+    const result = getStepperCalculations({
+      ...defaultInput,
+      currentStep: -1,
+    });
+    expect(result.showMinimalDot).toBe(true);
+    expect(result.progressDashOffset).toBeCloseTo(result.trackArcLength - 2);
+  });
+
+  it('should show normal progress arc when currentStep > 0', () => {
+    const result = getStepperCalculations(defaultInput);
+    expect(result.showMinimalDot).toBe(false);
+    expect(result.progressDashArray).toContain(String(result.trackArcLength));
+  });
+
+  it('should compute progressDashOffset as 0 when progress is 100%', () => {
+    const result = getStepperCalculations({
+      ...defaultInput,
+      currentStep: 4,
+      totalSteps: 4,
+    });
+    expect(result.progressDashOffset).toBeCloseTo(0);
+  });
+
+  it('should compute progressDashOffset equal to trackArcLength when progress is 0%', () => {
+    const result = getStepperCalculations({
+      ...defaultInput,
+      currentStep: 0,
+      totalSteps: 4,
+    });
+    // When showMinimalDot, offset = trackArcLength - 2
+    expect(result.progressDashOffset).toBeCloseTo(result.trackArcLength - 2);
+  });
+
+  it('should compute trackDashArray consistently', () => {
+    const result = getStepperCalculations(defaultInput);
+    expect(result.trackDashArray).toBe(
+      `${result.trackArcLength} ${result.circumference}`,
+    );
+  });
+});

package/src/lib/getStepperCalculations/getStepperCalculations.ts

@@ -0,0 +1,103 @@
+export type StepperCalculationsInput = {
+  /** Current step number (1-based). Use 0 or negative for minimal dot. */
+  currentStep: number;
+  /** Total number of steps. */
+  totalSteps: number;
+  /** Size of the circular stepper in pixels. */
+  size: number;
+  /** Optional custom label. Defaults to "{currentStep}/{totalSteps}". */
+  label?: string;
+  /** Stroke width in pixels. @default 4 */
+  strokeWidth?: number;
+  /** Percentage of full circle to show as arc (0–1). @default 0.75 (270°) */
+  arcPercentage?: number;
+};
+
+export type StepperCalculationsOutput = {
+  /** Label text displayed in the center. */
+  displayLabel: string;
+  /** Progress value between 0 and 1. */
+  progress: number;
+  /** Circle radius in pixels. */
+  r: number;
+  /** Center x coordinate. */
+  cx: number;
+  /** Center y coordinate. */
+  cy: number;
+  /** Full circle circumference. */
+  circumference: number;
+  /** Length of the visible arc (track). */
+  trackArcLength: number;
+  /** strokeDasharray for the gray track circle. */
+  trackDashArray: string;
+  /** strokeDasharray for the progress (purple) circle. */
+  progressDashArray: string;
+  /** strokeDashoffset for the progress (purple) circle. */
+  progressDashOffset: number;
+  /** Whether to show minimal dot instead of progress arc. */
+  showMinimalDot: boolean;
+};
+
+/**
+ * Computes all SVG-related values needed to render a circular stepper.
+ *
+ * This is a pure utility shared between React (web) and React Native
+ * implementations of the Stepper component.
+ *
+ * @example
+ * ```ts
+ * const calcs = getStepperCalculations({
+ *   currentStep: 2,
+ *   totalSteps: 4,
+ *   size: 48,
+ * });
+ *
+ * // calcs.displayLabel → '2/4'
+ * // calcs.progress → 0.5
+ * // calcs.trackDashArray → '<trackArcLength> <circumference>'
+ * // calcs.progressDashArray → '<trackArcLength> <circumference>'
+ * // calcs.progressDashOffset → offset for 50% fill
+ * ```
+ */
+export const getStepperCalculations = ({
+  currentStep,
+  totalSteps,
+  size,
+  label,
+  strokeWidth = 4,
+  arcPercentage = 0.75,
+}: StepperCalculationsInput): StepperCalculationsOutput => {
+  const displayLabel =
+    label ?? `${Math.min(currentStep, totalSteps)}/${totalSteps}`;
+  const progress =
+    totalSteps <= 0 ? 0 : Math.min(1, Math.max(0, currentStep / totalSteps));
+
+  // SVG circle geometry
+  const r = (size - strokeWidth) / 2;
+  const cx = size / 2;
+  const cy = size / 2;
+  const circumference = 2 * Math.PI * r;
+
+  // Arc calculations
+  const trackArcLength = circumference * arcPercentage;
+  const dashOffset = trackArcLength * (1 - progress);
+
+  // Minimal dot handling (currentStep <= 0 means "not started")
+  const showMinimalDot = currentStep <= 0;
+  const progressDashArray = `${trackArcLength} ${circumference}`;
+  const progressDashOffset = showMinimalDot ? trackArcLength - 2 : dashOffset;
+
+  return {
+    displayLabel,
+    progress,
+    r,
+    cx,
+    cy,
+    circumference,
+    trackArcLength,
+    trackDashArray: `${trackArcLength} ${circumference}`,
+    progressDashArray,
+    progressDashOffset,
+    showMinimalDot,
+  };
+};

package/src/lib/getStepperCalculations/index.ts

@@ -0,0 +1,5 @@
+export {
+  getStepperCalculations,
+  type StepperCalculationsInput,
+  type StepperCalculationsOutput,
+} from './getStepperCalculations';