@ledgerhq/lumen-ui-react 0.1.60 → 0.1.62

package/dist/lib/Components/core/SearchInput/SearchInput.js

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
 import { cn as t } from "../../../../libs/utils-shared/dist/index.js";
-import { cva as n } from "class-variance-authority";
+import { cva as e } from "class-variance-authority";
 import { BaseInput as c } from "../../internal/BaseInput/BaseInput.js";
 import { Search as d } from "../../symbols/icons/Search.js";
-const m = n("", {
+const m = e("", {
   variants: {
     appearance: {
       plain: "",
@@ -13,7 +13,7 @@ const m = n("", {
   defaultVariants: {
     appearance: "plain"
   }
-}), l = n("", {
+}), l = e("", {
   variants: {
     appearance: {
       plain: "",
@@ -24,7 +24,7 @@ const m = n("", {
     appearance: "plain"
   }
 }), x = ({
-  ref: e,
+  ref: n,
   appearance: a = "plain",
   className: s,
   inputClassName: p,
@@ -33,7 +33,7 @@ const m = n("", {
 }) => /* @__PURE__ */ r(
   c,
   {
-    ref: e,
+    ref: n,
     prefix: /* @__PURE__ */ r(
       d,
       {

package/dist/lib/Components/core/SegmentedControl/SegmentedControl.js

@@ -89,7 +89,7 @@ function x({
   icon: t,
   label: r,
   visible: n,
-  onClick: a
+  onClick: s
 }) {
   return /* @__PURE__ */ o(
     "button",
@@ -99,7 +99,7 @@ function x({
       "aria-hidden": !n,
       tabIndex: -1,
       disabled: !n,
-      onClick: a,
+      onClick: s,
       className: f.arrow({ visible: n, side: e }),
       children: /* @__PURE__ */ o(t, { size: 20 })
     }
@@ -110,12 +110,12 @@ function D({
   tabLayout: t,
   className: r,
   selectedIndex: n,
-  children: a,
+  children: s,
   ...d
 }) {
-  const l = v(null), { canScrollLeft: c, canScrollRight: s, scrollBy: u } = j(l);
+  const l = v(null), { canScrollLeft: c, canScrollRight: a, scrollBy: u } = j(l);
   z(l, n);
-  const i = c || s ? B(c, s) : void 0;
+  const i = c || a ? B(c, a) : void 0;
   return /* @__PURE__ */ b(
     "div",
     {
@@ -131,7 +131,7 @@ function D({
             ref: l,
             className: "scrollbar-none overflow-x-auto",
             style: i ? { maskImage: i, WebkitMaskImage: i } : void 0,
-            children: a
+            children: s
           }
         ),
         /* @__PURE__ */ o(
@@ -150,7 +150,7 @@ function D({
             side: "right",
             icon: L,
             label: "Scroll right",
-            visible: s,
+            visible: a,
             onClick: () => u("right")
           }
         )
@@ -182,15 +182,15 @@ function P({
   selectedIndex: r,
   children: n
 }) {
-  const a = v(null), { pill: d, isReady: l } = I({
-    ref: a,
+  const s = v(null), { pill: d, isReady: l } = I({
+    ref: s,
     selectedIndex: r,
     children: n
   });
   return /* @__PURE__ */ b(
     "div",
     {
-      ref: a,
+      ref: s,
       role: "radiogroup",
       "aria-disabled": t,
       className: f.root({ tabLayout: e }),
@@ -213,17 +213,17 @@ function $({
   children: t,
   icon: r,
   trailingContent: n,
-  onClick: a,
+  onClick: s,
   className: d,
   disabled: l,
   ...c
 }) {
   const {
-    selectedValue: s,
+    selectedValue: a,
     onSelectedChange: u,
     disabled: i,
     tabLayout: S
-  } = k(), g = s === e, p = w(() => !!(l || i), [l, i]);
+  } = k(), g = a === e, p = w(() => !!(l || i), [l, i]);
   return /* @__PURE__ */ o(
     "button",
     {
@@ -233,7 +233,7 @@ function $({
       "aria-disabled": p,
       disabled: p,
       onClick: (C) => {
-        p || (u(e), a?.(C));
+        p || (u(e), s?.(C));
       },
       className: h(
         f.item({ selected: g, disabled: p }),
@@ -254,14 +254,14 @@ function E({
   onSelectedChange: t,
   children: r,
   className: n,
-  disabled: a,
+  disabled: s,
   appearance: d = "background",
   tabLayout: l = "fixed",
   ...c
 }) {
-  const s = y({
+  const a = y({
     consumerName: "SegmentedControl",
-    mergeWith: { disabled: a }
+    mergeWith: { disabled: s }
   }), u = R(
     e,
     r
@@ -272,7 +272,7 @@ function E({
       value: {
         selectedValue: e,
         onSelectedChange: (i) => t(i),
-        disabled: s,
+        disabled: a,
         tabLayout: l
       },
       children: /* @__PURE__ */ o(
@@ -287,7 +287,7 @@ function E({
             P,
             {
               tabLayout: l,
-              disabled: s,
+              disabled: a,
               selectedIndex: u,
               children: r
             }

package/dist/lib/Components/core/Select/Select.js

@@ -36,8 +36,8 @@ function re({
   defaultSearchValue: m,
   onSearchValueChange: b,
   open: y,
-  defaultOpen: v,
-  onOpenChange: C,
+  defaultOpen: C,
+  onOpenChange: v,
   name: N,
   required: w,
   children: I
@@ -45,7 +45,7 @@ function re({
   const V = G({
     consumerName: "Select",
     mergeWith: { disabled: r }
-  }), [h, T] = W(
+  }), [h, L] = W(
     {
       prop: o,
       defaultProp: a ?? null,
@@ -54,7 +54,7 @@ function re({
       }
     }
   ), {
-    isGrouped: L,
+    isGrouped: T,
     groupedItems: R,
     filteredItemsForRoot: q,
     resolvedSearchValue: P,
@@ -79,18 +79,18 @@ function re({
       inputValue: P,
       onInputValueChange: D,
       value: h,
-      onValueChange: (d) => T(f(d)),
+      onValueChange: (d) => L(f(d)),
       isItemEqualToValue: (d, E) => f(d) === f(E),
       open: y,
-      defaultOpen: v,
-      onOpenChange: C,
+      defaultOpen: C,
+      onOpenChange: v,
       name: N,
       required: w,
       disabled: V,
       children: /* @__PURE__ */ t(
         M,
         {
-          value: { selectedValue: h, registerSearch: z, isGrouped: L, searchMounted: j },
+          value: { selectedValue: h, registerSearch: z, isGrouped: T, searchMounted: j },
           children: I
         }
       )

package/dist/lib/Components/core/SideBar/SideBar.js

@@ -1,5 +1,5 @@
-import { jsx as e, jsxs as x, Fragment as P } from "react/jsx-runtime";
-import { createSafeContext as R, cn as m, useDisabledContext as q } from "../../../../libs/utils-shared/dist/index.js";
+import { jsx as e, jsxs as x, Fragment as R } from "react/jsx-runtime";
+import { createSafeContext as V, cn as m, useDisabledContext as q } from "../../../../libs/utils-shared/dist/index.js";
 import { cva as C } from "class-variance-authority";
 import { useCallback as S } from "react";
 import { Tooltip as N, TooltipTrigger as T, TooltipContent as w } from "../Tooltip/Tooltip.js";
@@ -7,7 +7,7 @@ import { useCommonTranslation as A } from "../../../../i18n/useCommonTranslation
 import { useControllableState as B } from "../../../../utils/useControllableState/useControllableState.js";
 import { ExpandRight as z } from "../../symbols/icons/ExpandRight.js";
 import { ExpandLeft as E } from "../../symbols/icons/ExpandLeft.js";
-const [O, y] = R("SideBar"), f = {
+const [O, L] = V("SideBar"), f = {
   root: C(
     [
       "flex h-full flex-col justify-between gap-16 overflow-y-auto rounded-xl bg-surface-transparent p-16",
@@ -128,43 +128,43 @@ const [O, y] = R("SideBar"), f = {
   const c = q({
     consumerName: "SideBarItem",
     mergeWith: { disabled: i }
-  }), { collapsed: b, active: g, onActiveChange: v } = y({
+  }), { collapsed: b, active: g, onActiveChange: v } = L({
     consumerName: "SideBarItem",
     contextRequired: !0
-  }), u = g === t, h = u ? a : r, I = s ?? o, L = S(
-    (k) => {
-      c || (l?.(k), v?.(t));
+  }), u = g === t, h = u ? a : r, y = s ?? o, I = S(
+    (P) => {
+      c || (l?.(P), v?.(t));
     },
     [c, l, v, t]
-  ), V = /* @__PURE__ */ x(P, { children: [
+  ), j = /* @__PURE__ */ x(R, { children: [
     /* @__PURE__ */ e(h, { size: 20 }),
     o != null && /* @__PURE__ */ e("span", { className: "translate-x-8 truncate", children: o })
-  ] }), j = /* @__PURE__ */ e(
+  ] }), k = /* @__PURE__ */ e(
     "button",
     {
       ref: n,
       type: "button",
       disabled: c,
-      onClick: L,
+      onClick: I,
       className: m(
         f.item({ active: u, disabled: c }),
         d
       ),
       "aria-current": u ? "page" : void 0,
       ...p,
-      children: V
+      children: j
     }
   );
   return /* @__PURE__ */ x(N, { open: b ? void 0 : !1, children: [
-    /* @__PURE__ */ e(T, { asChild: !0, children: j }),
-    /* @__PURE__ */ e(w, { side: "right", sideOffset: 8, children: I })
+    /* @__PURE__ */ e(T, { asChild: !0, children: k }),
+    /* @__PURE__ */ e(w, { side: "right", sideOffset: 8, children: y })
   ] });
 }, H = ({
   className: n,
   tooltipContent: t,
   ...r
 }) => {
-  const { t: a } = A(), { collapsed: o, setCollapsed: s } = y({
+  const { t: a } = A(), { collapsed: o, setCollapsed: s } = L({
     consumerName: "SideBarCollapseToggle",
     contextRequired: !0
   }), i = S(() => {

package/dist/lib/Components/core/Spinner/Spinner.js

@@ -3,15 +3,15 @@ import { cn as s } from "../../../../libs/utils-shared/dist/index.js";
 import { useCommonTranslation as a } from "../../../../i18n/useCommonTranslation.js";
 const c = ({
   ref: r,
-  className: t,
+  className: e,
   size: n = 16,
-  ...e
+  ...t
 }) => {
   const { t: i } = a();
   return /* @__PURE__ */ o(
     "svg",
     {
-      className: s("shrink-0 animate-spin text-base", t),
+      className: s("shrink-0 animate-spin text-base", e),
       xmlns: "http://www.w3.org/2000/svg",
       width: n,
       height: n,
@@ -20,7 +20,7 @@ const c = ({
       "aria-label": i("components.spinner.loadingAriaLabel"),
       role: "img",
       ref: r,
-      ...e,
+      ...t,
       children: /* @__PURE__ */ o(
         "path",
         {

package/dist/lib/Components/core/Spot/Spot.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import { useDisabledContext as x, cn as w } from "../../../../libs/utils-shared/dist/index.js";
 import { cva as y } from "class-variance-authority";
-import { useMemo as P } from "react";
-import { Spinner as C } from "../Spinner/Spinner.js";
+import { useMemo as C } from "react";
+import { Spinner as P } from "../Spinner/Spinner.js";
 import { InformationFill as F } from "../../symbols/icons/InformationFill.js";
 import { WarningFill as k } from "../../symbols/icons/WarningFill.js";
 import { DeleteCircleFill as N } from "../../symbols/icons/DeleteCircleFill.js";
@@ -34,7 +34,7 @@ const I = y(
       }
     }
   }
-), G = (t) => {
+), E = (t) => {
   const s = t.size ?? 48, i = {
     32: 12,
     40: 16,
@@ -47,7 +47,7 @@ const I = y(
     48: "heading-5",
     56: "heading-4",
     72: "heading-2"
-  }, o = i[s] ?? 20, a = c[s] ?? "heading-5", { componentProps: m, content: l } = P(() => {
+  }, o = i[s] ?? 20, a = c[s] ?? "heading-5", { componentProps: m, content: p } = C(() => {
     if (t.appearance === "icon") {
       const { icon: n, ...r } = t;
       return {
@@ -75,12 +75,12 @@ const I = y(
         case "info":
           return /* @__PURE__ */ e(F, { size: o });
         case "loader":
-          return /* @__PURE__ */ e(C, { size: o });
+          return /* @__PURE__ */ e(P, { size: o });
       }
     })();
     return { componentProps: t, content: z };
   }, [t, o, a]), {
-    appearance: p,
+    appearance: l,
     className: d,
     disabled: u = !1,
     size: h = 48,
@@ -97,16 +97,16 @@ const I = y(
       className: w(
         I({
           disabled: g,
-          appearance: p,
+          appearance: l,
           size: h
         }),
         d
       ),
       ...f,
-      children: l
+      children: p
     }
   );
 };
 export {
-  G as Spot
+  E as Spot
 };

package/dist/lib/Components/core/Stepper/Stepper.d.ts

@@ -1,13 +1,14 @@
 import { StepperProps } from './types';
 /**
  * A circular stepper component showing progress as current step out of total steps.
- * Renders a track arc with a progress arc and a center label.
+ * Renders a segmented track with progress and a center label.
  *
  * @see Figma – Stepper](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11977-94&m=dev)
  *
  * @example
  * <Stepper currentStep={1} totalSteps={4} />
- * <Stepper currentStep={0} totalSteps={9} disabled /> // Shows minimal dot, disabled style
+ * <Stepper currentStep={0} totalSteps={8} disabled /> // Empty progress, disabled style
+ * <Stepper currentStep={2} totalSteps={4} size="lg" />
  */
-export declare const Stepper: ({ className, currentStep, totalSteps, disabled: disabledProp, label, ref, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Stepper: ({ className, appearance, size, currentStep, totalSteps, disabled: disabledProp, label, ref, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Stepper.d.ts.map

package/dist/lib/Components/core/Stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Stepper/Stepper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAK5C;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,GAAI,sFAQrB,YAAY,4CAyFd,CAAC"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Stepper/Stepper.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AA2B5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO,GAAI,wGAUrB,YAAY,4CAkId,CAAC"}

package/dist/lib/Components/core/Stepper/Stepper.js

@@ -1,107 +1,179 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useDisabledContext as v, cn as d, getStepperCalculations as D } from "../../../../libs/utils-shared/dist/index.js";
-const s = 48, i = 4, W = ({
-  className: m,
-  currentStep: t,
-  totalSteps: r,
-  disabled: h = !1,
-  label: o,
-  ref: u,
-  ...f
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { useDisabledContext as w, cn as o, getStepperCalculations as $ } from "../../../../libs/utils-shared/dist/index.js";
+import { cva as j } from "class-variance-authority";
+import { useId as z } from "react";
+const L = {
+  md: { px: 48, strokeWidth: 4, root: "size-48", label: "body-2" },
+  lg: { px: 72, strokeWidth: 6, root: "size-72", label: "heading-4" }
+}, I = j("transition-[stroke] duration-300 ease-in-out", {
+  variants: {
+    appearance: { accent: "", success: "" },
+    disabled: { true: "", false: "" }
+  },
+  compoundVariants: [
+    {
+      appearance: "accent",
+      disabled: !1,
+      class: "stroke-active"
+    },
+    {
+      appearance: "success",
+      disabled: !1,
+      class: "stroke-success"
+    },
+    { disabled: !0, class: "stroke-muted-subtle-hover" }
+  ]
+}), S = ({
+  className: f,
+  appearance: x = "accent",
+  size: b = "md",
+  currentStep: l,
+  totalSteps: a,
+  disabled: y = !1,
+  label: n,
+  ref: g,
+  ...v
 }) => {
-  const k = v({
+  const r = w({
     consumerName: "Stepper",
-    mergeWith: { disabled: h }
-  }), {
-    displayLabel: p,
-    r: l,
-    cx: n,
-    cy: c,
-    trackDashArray: b,
-    progressDashArray: x,
-    progressDashOffset: y
-  } = D({
-    currentStep: t,
-    totalSteps: r,
-    size: s,
-    label: o,
-    strokeWidth: i
+    mergeWith: { disabled: y }
+  }), u = z(), {
+    px: e,
+    strokeWidth: t,
+    root: N,
+    label: c
+  } = L[b], {
+    displayLabel: D,
+    r: d,
+    cx: m,
+    cy: h,
+    progressDashArray: p,
+    progressMaskDashArray: C,
+    progressDashOffset: W,
+    dashPatternOffset: k
+  } = $({
+    currentStep: l,
+    totalSteps: a,
+    size: e,
+    label: n,
+    strokeWidth: t
   });
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ i(
     "div",
     {
-      ref: u,
+      ref: g,
       role: "progressbar",
-      "aria-valuenow": t,
+      "aria-valuenow": l,
       "aria-valuemin": 1,
-      "aria-valuemax": r,
-      "aria-label": p,
-      className: d(
-        "relative flex size-48 shrink-0 items-center justify-center rounded-full",
-        m
+      "aria-valuemax": a,
+      "aria-label": D,
+      className: o(
+        "relative flex shrink-0 items-center justify-center rounded-full",
+        N,
+        f
       ),
-      ...f,
+      ...v,
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ i(
           "svg",
           {
-            width: s,
-            height: s,
-            viewBox: `0 0 ${s} ${s}`,
-            className: "rotate-135",
+            width: e,
+            height: e,
+            viewBox: `0 0 ${e} ${e}`,
+            className: "-rotate-90",
             "aria-hidden": !0,
             children: [
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ s(
                 "circle",
                 {
-                  cx: n,
-                  cy: c,
-                  r: l,
+                  cx: m,
+                  cy: h,
+                  r: d,
                   fill: "none",
                   stroke: "currentColor",
                   strokeLinecap: "round",
                   className: "stroke-muted-subtle",
                   style: {
-                    strokeWidth: `${i}px`,
-                    strokeDasharray: b,
-                    strokeDashoffset: 0
+                    strokeWidth: `${t}px`,
+                    strokeDasharray: p,
+                    strokeDashoffset: k
                   }
                 }
               ),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ s(
+                "mask",
+                {
+                  id: u,
+                  maskUnits: "userSpaceOnUse",
+                  x: 0,
+                  y: 0,
+                  width: e,
+                  height: e,
+                  children: /* @__PURE__ */ s(
+                    "circle",
+                    {
+                      cx: m,
+                      cy: h,
+                      r: d,
+                      fill: "none",
+                      stroke: "white",
+                      className: "transition-[stroke-dashoffset] duration-300 ease-in-out",
+                      style: {
+                        strokeWidth: `${t}px`,
+                        strokeDasharray: C,
+                        strokeDashoffset: W
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ s(
                 "circle",
                 {
-                  cx: n,
-                  cy: c,
-                  r: l,
+                  cx: m,
+                  cy: h,
+                  r: d,
                   fill: "none",
                   stroke: "currentColor",
                   strokeLinecap: "round",
-                  className: d(
-                    k ? "stroke-muted-subtle-hover" : "stroke-active",
-                    "transition-[stroke-dashoffset,stroke] duration-300 ease-in-out"
-                  ),
+                  mask: `url(#${u})`,
+                  className: I({ appearance: x, disabled: r }),
                   style: {
-                    strokeWidth: `${i}px`,
-                    strokeDasharray: x,
-                    strokeDashoffset: y
+                    strokeWidth: `${t}px`,
+                    strokeDasharray: p,
+                    strokeDashoffset: k
                   }
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ e("span", { className: "absolute inset-0 m-4 flex items-center justify-center text-base", children: o ? /* @__PURE__ */ e("span", { className: "body-2-semi-bold", children: o }) : /* @__PURE__ */ a("span", { children: [
-          /* @__PURE__ */ e("span", { className: "body-1-semi-bold", children: Math.min(Math.max(t, 0), r) }),
-          /* @__PURE__ */ a("span", { className: "body-2-semi-bold text-muted", children: [
-            "/",
-            r
-          ] })
+        /* @__PURE__ */ s("span", { className: "absolute inset-0 m-4 flex min-w-0 items-center justify-center text-base", children: n ? /* @__PURE__ */ s(
+          "span",
+          {
+            className: o(c, "truncate", r && "text-disabled"),
+            children: n
+          }
+        ) : /* @__PURE__ */ i("span", { className: "truncate", children: [
+          /* @__PURE__ */ s("span", { className: o(c, r && "text-disabled"), children: Math.min(Math.max(l, 0), a) }),
+          /* @__PURE__ */ i(
+            "span",
+            {
+              className: o(
+                c,
+                r ? "text-disabled" : "text-muted"
+              ),
+              children: [
+                "/",
+                a
+              ]
+            }
+          )
         ] }) })
       ]
     }
   );
 };
 export {
-  W as Stepper
+  S as Stepper
 };