@ledgerhq/lumen-utils-shared 0.0.19 → 0.0.20

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,160 +1,183 @@
-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 v, use 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("") : "";
 }
-const z = 48, N = 17, R = 2;
+const N = 48, R = 17, w = 2;
 function G(t) {
   const n = t.replace(/\D/g, "").length;
   return Math.max(
-    N,
-    z - n * R
+    R,
+    N - n * w
   );
 }
-function D(t, n = !0) {
+function C(t, n = !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 i = t.includes("."), [l, o] = t.split("."), u = l.replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+  return i && n ? o ? `${u}.${o}` : `${u}.` : u;
 }
 function H(t, n = {}) {
   const {
-    allowDecimals: l = !0,
-    thousandsSeparator: o = !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;
+    allowDecimals: i = !0,
+    thousandsSeparator: l = !0,
+    maxIntegerLength: o = 9,
+    maxDecimalLength: u = 9
+  } = n, r = t.replace(",", ".").replace(/[^\d.]/g, "");
+  let e = r;
+  if (e = e.replace(/^0+(?=\d)/, ""), !i)
+    return e = e.replace(/\D/g, ""), o > 0 && e.length > o && (e = e.slice(0, o)), l ? C(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;
+  const a = e.indexOf(".");
+  if (a !== -1) {
+    let c = e.slice(0, a), f = e.slice(a + 1).replace(/\./g, "");
+    o > 0 && c.length > o && (c = c.slice(0, o)), f = f.slice(0, u), c === "" && (c = "0");
+    const p = r.endsWith(".") || e.endsWith(".");
+    e = f.length > 0 ? `${c}.${f}` : p ? `${c}.` : c;
   } else
-    r > 0 && e.length > r && (e = e.slice(0, r));
-  return o ? D(e) : e;
+    o > 0 && e.length > o && (e = e.slice(0, o));
+  return l ? C(e) : e;
 }
 function J(t, n) {
-  const l = k(n), o = ({ children: c, value: i }) => {
-    const e = A(
-      () => i,
-      Object.values(i ?? {})
+  const i = W(n), l = ({ children: u, value: r }) => {
+    const e = v(
+      () => r,
+      Object.values(r ?? {})
     );
-    return /* @__PURE__ */ W(l, { value: e, children: c });
+    return /* @__PURE__ */ k(i, { value: e, children: u });
   };
-  o.displayName = t + "Provider";
-  function r({
-    consumerName: c,
-    contextRequired: i
+  l.displayName = t + "Provider";
+  function o({
+    consumerName: u,
+    contextRequired: r
   }) {
-    const e = F(l);
+    const e = F(i);
     if (e)
       return e;
-    if (i)
+    if (r)
       throw new Error(
-        `${c} must be used within ${t}`
+        `${u} must be used within ${t}`
       );
     return n || {};
   }
-  return [o, r];
+  return [l, o];
 }
 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) {
+function S(t, n) {
   if (typeof t == "function")
     return t(n);
   typeof t == "object" && t !== null && "current" in t && (t.current = n);
 }
-function w(...t) {
+function z(...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);
+  return (i) => {
+    if (i === null) {
+      t.forEach((l) => {
+        const o = n.get(l);
+        typeof o == "function" && o(), S(l, null);
       }), n.clear();
       return;
     }
-    t.forEach((o) => {
-      const r = M(o, l);
-      typeof r == "function" && n.set(o, r);
+    t.forEach((l) => {
+      const o = S(l, i);
+      typeof o == "function" && n.set(l, o);
     });
   };
 }
 function Y(...t) {
-  return A(() => w(...t), t);
+  return v(() => z(...t), t);
 }
 const tt = (t, n) => {
-  let l = t;
-  for (const o of n) {
-    if (l == null)
+  let i = t;
+  for (const l of n) {
+    if (i == null)
       return;
-    l = l[o];
+    i = i[l];
   }
-  return l;
+  return i;
+}, nt = ({
+  currentStep: t,
+  totalSteps: n,
+  size: i,
+  label: l,
+  strokeWidth: o = 4,
+  arcPercentage: u = 0.75
+}) => {
+  const r = Math.min(Math.max(t, 0), n), e = l ?? `${r}/${n}`, a = n <= 0 ? 0 : r / n, c = (i - o) / 2, f = i / 2, p = i / 2, m = 2 * Math.PI * c, d = m * u, y = d * (1 - a), h = r <= 0, $ = `${d} ${m}`, D = h ? d - 2 : y;
+  return {
+    displayLabel: e,
+    progress: a,
+    r: c,
+    cx: f,
+    cy: p,
+    circumference: m,
+    trackArcLength: d,
+    trackDashArray: `${d} ${m}`,
+    progressDashArray: $,
+    progressDashOffset: D,
+    showMinimalDot: h
+  };
 };
-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, n, i = {}) {
+  const { leading: l = !1, trailing: o = !0, maxWait: u } = i;
+  let r = null, e = null, a = null, c = 0, f = null, p = null, m;
+  const d = u !== void 0, y = d ? Math.max(u, n) : 0, h = (s) => {
+    c = s;
+    const g = f, T = p;
+    return f = null, p = null, m = t.apply(T, g), m;
+  }, $ = (s) => {
+    const g = a ? s - a : 0;
+    return n - g;
+  }, D = (s) => {
+    const g = a ? s - a : n, T = s - c;
+    return a === null || g >= n || g < 0 || d && T >= y;
+  }, A = (s) => (r = null, o && f ? h(s) : (f = null, p = null, m)), x = () => {
+    const s = Date.now();
+    if (D(s)) {
+      A(s);
       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) {
-      if (i === null)
-        return b(m);
-      if (x)
-        return clearTimeout(i), i = setTimeout(p, n), T(m);
+    r = setTimeout(x, $(s));
+  }, E = () => {
+    const s = Date.now();
+    e = null, f && (h(s), r !== null && (clearTimeout(r), r = setTimeout(x, n)));
+  }, P = (s) => (c = s, r = setTimeout(x, n), d && (e = setTimeout(E, y)), l ? h(s) : m), b = () => {
+    r !== null && clearTimeout(r), e !== null && clearTimeout(e), c = 0, f = null, p = null, a = null, r = null, e = null;
+  }, L = () => r === null && e === null ? m : A(Date.now()), O = () => r !== null || e !== null, M = function(...s) {
+    const g = Date.now(), T = D(g);
+    if (f = s, p = this, a = g, T) {
+      if (r === null)
+        return P(g);
+      if (d)
+        return clearTimeout(r), r = setTimeout(x, n), h(g);
     }
-    return i === null && (i = setTimeout(p, n)), d;
+    return r === null && (r = setTimeout(x, n)), m;
   };
-  return y.cancel = $, y.flush = L, y.pending = O, y;
+  return M.cancel = b, M.flush = L, M.pending = O, M;
 }
-function et(t, n, l = {}) {
-  const { leading: o = !0, trailing: r = !0 } = l;
+function et(t, n, i = {}) {
+  const { leading: l = !0, trailing: o = !0 } = i;
   return V(t, n, {
-    leading: o,
-    trailing: r,
+    leading: l,
+    trailing: o,
     maxWait: n
   });
 }
 export {
-  M as assignRef,
+  S as assignRef,
   K as cn,
   J as createSafeContext,
   V as debounce,
-  D as formatThousands,
+  C as formatThousands,
   G as getFontSize,
   tt as getObjectPath,
+  nt as getStepperCalculations,
   Q as isTextChildren,
-  w as mergeRefs,
+  z as mergeRefs,
   H as textFormatter,
   et as throttle,
   q as toPascalCase,

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,2 @@
+export * from './getStepperCalculations';
+//# 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"}

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.0.20",
   "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/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 @@
+export * from './getStepperCalculations';

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';