@ledgerhq/lumen-ui-react 0.1.47 → 0.1.49

package/dist/lib/Components/Menu/Menu.js

@@ -79,16 +79,16 @@ function me({ ...e }) {
 }
 const ue = ({
   ref: e,
-  render: o,
-  className: a,
+  render: a,
+  className: o,
   ...r
 }) => /* @__PURE__ */ t(
   k,
   {
     ref: e,
     "data-slot": "menu-trigger",
-    render: o,
-    className: n("data-popup-open:z-menu", a),
+    render: a,
+    className: n("data-popup-open:z-menu", o),
     ...r
   }
 );
@@ -100,46 +100,46 @@ function le({ ...e }) {
 }
 function O({
   onValueChange: e,
-  ...o
+  ...a
 }) {
   return /* @__PURE__ */ t(
     V,
     {
       "data-slot": "menu-radio-group",
-      onValueChange: (a) => e?.(String(a)),
-      ...o
+      onValueChange: (o) => e?.(String(o)),
+      ...a
     }
   );
 }
 const ce = ({
   ref: e,
-  className: o,
-  children: a,
+  className: a,
+  children: o,
   ...r
 }) => /* @__PURE__ */ p(
   D,
   {
     ref: e,
     "data-slot": "menu-sub-trigger",
-    className: n(L, o),
+    className: n(L, a),
     ...r,
     children: [
-      a,
+      o,
       /* @__PURE__ */ t(R, { size: 20, className: "ml-auto text-muted" })
     ]
   }
-), pe = ({ className: e, children: o }) => /* @__PURE__ */ t(M, { children: /* @__PURE__ */ t(x, { className: "z-menu", side: "right", sideOffset: 4, children: /* @__PURE__ */ t(
+), pe = ({ className: e, children: a }) => /* @__PURE__ */ t(M, { children: /* @__PURE__ */ t(x, { className: "z-menu", side: "right", sideOffset: 4, children: /* @__PURE__ */ t(
   N,
   {
     "data-slot": "menu-sub-content",
     className: n(v({ side: "right" }), e),
-    onClick: (a) => a.stopPropagation(),
-    children: o
+    onClick: (o) => o.stopPropagation(),
+    children: a
   }
 ) }) }), be = ({
   side: e = "bottom",
-  sideOffset: o = 4,
-  align: a = "start",
+  sideOffset: a = 4,
+  align: o = "start",
   alignOffset: r,
   sticky: i = !0,
   className: s,
@@ -149,8 +149,8 @@ const ce = ({
   {
     className: "z-menu",
     side: e,
-    sideOffset: o,
-    align: a,
+    sideOffset: a,
+    align: o,
     alignOffset: r,
     sticky: i,
     children: /* @__PURE__ */ t(
@@ -165,8 +165,8 @@ const ce = ({
   }
 ) }), fe = ({
   ref: e,
-  className: o,
-  appearance: a = "base",
+  className: a,
+  appearance: o = "base",
   disabled: r,
   onClick: i,
   label: s,
@@ -185,15 +185,15 @@ const ce = ({
       label: s,
       disabled: d,
       closeOnClick: m,
-      className: n(l({ appearance: a }), o),
+      className: n(l({ appearance: o }), a),
       onClick: i,
       ...u
     }
   ) });
 }, he = ({
   ref: e,
-  className: o,
-  children: a,
+  className: a,
+  children: o,
   checked: r,
   defaultChecked: i,
   onCheckedChange: s,
@@ -216,19 +216,19 @@ const ce = ({
       defaultChecked: i,
       disabled: c,
       closeOnClick: d ?? !1,
-      className: n(l(), o),
+      className: n(l(), a),
       onCheckedChange: s,
       ...I,
       children: [
-        a,
+        o,
         /* @__PURE__ */ t("span", { className: "ml-auto flex size-24 items-center justify-center", children: /* @__PURE__ */ t(G, { children: /* @__PURE__ */ t(g, { disabled: c, size: 24, className: "text-active" }) }) })
       ]
     }
   ) });
 }, q = ({
   ref: e,
-  className: o,
-  children: a,
+  className: a,
+  children: o,
   disabled: r,
   ...i
 }) => {
@@ -242,23 +242,23 @@ const ce = ({
       ref: e,
       "data-slot": "menu-radio-item",
       disabled: s,
-      className: n(l(), o),
+      className: n(l(), a),
       ...i,
       children: [
-        a,
+        o,
         /* @__PURE__ */ t("span", { className: "ml-auto flex size-24 items-center justify-center", children: /* @__PURE__ */ t(T, { children: /* @__PURE__ */ t(g, { disabled: s, size: 24, className: "text-active" }) }) })
       ]
     }
   ) });
-}, ge = ({ ref: e, className: o, ...a }) => /* @__PURE__ */ t(
+}, ge = ({ ref: e, className: a, ...o }) => /* @__PURE__ */ t(
   $,
   {
     ref: e,
     "data-slot": "menu-label",
-    className: n(W, o),
-    ...a
+    className: n(W, a),
+    ...o
   }
-), Me = ({ ref: e, className: o, ...a }) => /* @__PURE__ */ t(C, { ref: e, className: n("mx-8 my-4 w-auto", o), ...a });
+), Me = ({ ref: e, className: a, ...o }) => /* @__PURE__ */ t(C, { ref: e, className: n("mx-8 my-4 w-auto", a), ...o });
 function xe() {
   return { MenuRadioGroup: O, MenuRadioItem: q };
 }

package/dist/lib/Components/NavBar/CoinCapsule.js

@@ -1,17 +1,17 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { cn as c } from "../../../libs/utils-shared/dist/index.js";
 const o = ({
   ref: s,
   ticker: t,
   leadingContent: n,
-  className: r
-}) => /* @__PURE__ */ a(
+  className: a
+}) => /* @__PURE__ */ r(
   "div",
   {
     ref: s,
     className: c(
       "flex items-center gap-8 rounded-full bg-muted-transparent p-8 pr-12",
-      r
+      a
     ),
     "data-slot": "coin-capsule",
     children: [

package/dist/lib/Components/NavBar/NavBar.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { cn as s } from "../../../libs/utils-shared/dist/index.js";
+import { cn as o } from "../../../libs/utils-shared/dist/index.js";
 import { CoinCapsule as i } from "./CoinCapsule.js";
 import { useCommonTranslation as l } from "../../../i18n/useCommonTranslation.js";
 import { IconButton as c } from "../IconButton/IconButton.js";
@@ -23,7 +23,7 @@ const N = ({
   "aria-label": e,
   className: r
 }) => {
-  const { t: o } = l();
+  const { t: s } = l();
   return /* @__PURE__ */ n(
     c,
     {
@@ -32,8 +32,8 @@ const N = ({
       size: "sm",
       icon: m,
       onClick: t,
-      className: s("shrink-0", r),
-      "aria-label": e ?? o("components.navBar.goBackAriaLabel"),
+      className: o("shrink-0", r),
+      "aria-label": e ?? s("components.navBar.goBackAriaLabel"),
       "data-slot": "navbar-back-button"
     }
   );
@@ -46,7 +46,7 @@ const N = ({
   r,
   {
     ref: a,
-    className: s(
+    className: o(
       "min-w-0 truncate heading-4-semi-bold text-base",
       e
     ),
@@ -62,7 +62,7 @@ const N = ({
   "div",
   {
     ref: a,
-    className: s("min-w-0 flex-1 truncate body-1 text-muted", e),
+    className: o("min-w-0 flex-1 truncate body-1 text-muted", e),
     ...r,
     children: t
   }
@@ -75,7 +75,7 @@ const N = ({
   "div",
   {
     ref: a,
-    className: s("flex min-w-0 flex-1 items-center gap-16", e),
+    className: o("flex min-w-0 flex-1 items-center gap-16", e),
     "data-slot": "navbar-leading",
     ...r,
     children: t
@@ -89,7 +89,7 @@ const N = ({
   "div",
   {
     ref: a,
-    className: s("ml-auto flex shrink-0 items-center gap-4", e),
+    className: o("ml-auto flex shrink-0 items-center gap-4", e),
     "data-slot": "navbar-trailing",
     ...r,
     children: t
@@ -98,7 +98,7 @@ const N = ({
   "nav",
   {
     ref: a,
-    className: s("flex items-center gap-4", e),
+    className: o("flex items-center gap-4", e),
     "data-slot": "navbar",
     ...r,
     children: t

package/dist/lib/Components/Popover/Popover.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import { createSafeContext as l, cn as s } from "../../../libs/utils-shared/dist/index.js";
+import { createSafeContext as l, cn as p } from "../../../libs/utils-shared/dist/index.js";
 import { cva as v } from "class-variance-authority";
 import { createPopoverHandle as c } from "../../../node_modules/@base-ui/react/esm/popover/store/PopoverHandle.js";
 import { PopoverRoot as f } from "../../../node_modules/@base-ui/react/esm/popover/root/PopoverRoot.js";
@@ -39,11 +39,11 @@ const [b, y] = l("Popover"), C = v(
       width: "fit"
     }
   }
-), w = s(
+), w = p(
   "fixed inset-0 z-dialog-overlay bg-canvas-overlay-subtle",
   "data-open:animate-fade-in",
   "data-closed:animate-fade-out"
-), B = ({
+), q = ({
   open: o,
   defaultOpen: a,
   onOpenChange: r,
@@ -60,7 +60,7 @@ const [b, y] = l("Popover"), C = v(
     handle: n,
     children: i
   }
-) }), O = ({
+) }), B = ({
   handle: o,
   payload: a,
   render: r,
@@ -73,17 +73,17 @@ const [b, y] = l("Popover"), C = v(
     handle: o,
     payload: a,
     render: r,
-    className: s("data-popup-open:z-menu", e),
+    className: p("data-popup-open:z-menu", e),
     ...n
   }
-), U = ({
+), O = ({
   side: o = "bottom",
   sideOffset: a = 8,
   align: r = "start",
   width: e = "fit",
   initialFocus: n = !1,
   className: i,
-  children: p
+  children: s
 }) => {
   const { overlay: d } = y({
     consumerName: "PopoverContent",
@@ -110,17 +110,17 @@ const [b, y] = l("Popover"), C = v(
           {
             "data-slot": "popover-content",
             initialFocus: n,
-            className: s(C({ width: e, side: o }), i),
-            children: p
+            className: p(C({ width: e, side: o }), i),
+            children: s
           }
         )
       }
     )
   ] });
-}, V = c;
+}, A = c;
 export {
-  B as Popover,
-  U as PopoverContent,
-  O as PopoverTrigger,
-  V as createPopoverHandle
+  q as Popover,
+  O as PopoverContent,
+  B as PopoverTrigger,
+  A as createPopoverHandle
 };

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

@@ -1,4 +1,4 @@
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import { jsx as a, jsxs as x } from "react/jsx-runtime";
 import { cn as g, useDisabledContext as v } from "../../../libs/utils-shared/dist/index.js";
 import { cva as b } from "class-variance-authority";
 import { useRef as C } from "react";
@@ -60,10 +60,10 @@ function k({
   trailingContent: l,
   onClick: d,
   className: c,
-  ...a
+  ...r
 }) {
   const { selectedValue: u, onSelectedChange: o, disabled: e, tabLayout: m } = y(), n = u === s;
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ a(
     "button",
     {
       type: "button",
@@ -79,10 +79,10 @@ function k({
         m === "fixed" && "min-w-0 flex-1",
         c
       ),
-      ...a,
+      ...r,
       children: /* @__PURE__ */ x("span", { className: "inline-flex min-w-0 items-center justify-center gap-8", children: [
-        t && /* @__PURE__ */ r(t, { size: 16, className: "shrink-0" }),
-        /* @__PURE__ */ r("span", { className: "min-w-0 truncate", children: i }),
+        t && /* @__PURE__ */ a(t, { size: 16, className: "shrink-0" }),
+        /* @__PURE__ */ a("span", { className: "min-w-0 truncate", children: i }),
         l
       ] })
     }
@@ -95,7 +95,7 @@ function j({
   className: l,
   disabled: d,
   appearance: c = "background",
-  tabLayout: a = "fixed",
+  tabLayout: r = "fixed",
   ...u
 }) {
   const o = v({
@@ -109,14 +109,14 @@ function j({
     selectedIndex: m,
     children: t
   });
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ a(
     S,
     {
       value: {
         selectedValue: s,
         onSelectedChange: (h) => i(h),
         disabled: o,
-        tabLayout: a
+        tabLayout: r
       },
       children: /* @__PURE__ */ x(
         "div",
@@ -128,13 +128,13 @@ function j({
           className: g(
             p.root({
               appearance: c,
-              tabLayout: a
+              tabLayout: r
             }),
             l
           ),
           children: [
             t,
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ a(
               "div",
               {
                 "aria-hidden": !0,

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

@@ -1,5 +1,5 @@
-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 { 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 { 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.js
 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] = V("SideBar"), f = {
+const [O, y] = R("SideBar"), f = {
   root: C(
     [
       "flex h-full flex-col justify-between gap-16 overflow-y-auto rounded-xl bg-surface-transparent p-16",
@@ -53,10 +53,10 @@ const [O, y] = V("SideBar"), f = {
 }, D = ({
   ref: n,
   collapsed: t,
-  defaultCollapsed: s = !1,
+  defaultCollapsed: r = !1,
   onCollapsedChange: a,
   active: o,
-  defaultActive: r,
+  defaultActive: s,
   onActiveChange: i,
   children: d,
   className: l,
@@ -64,11 +64,11 @@ const [O, y] = V("SideBar"), f = {
 }) => {
   const { t: c } = A(), [b, g] = B({
     prop: t,
-    defaultProp: s,
+    defaultProp: r,
     onChange: a
   }), [v, u] = B({
     prop: o,
-    defaultProp: r ?? "",
+    defaultProp: s ?? "",
     onChange: i ? (h) => i(h) : void 0
   });
   return /* @__PURE__ */ e(
@@ -90,36 +90,36 @@ const [O, y] = V("SideBar"), f = {
 }, F = ({
   ref: n,
   children: t,
-  className: s,
+  className: r,
   ...a
 }) => /* @__PURE__ */ e(
   "div",
   {
     ref: n,
-    className: m(f.section(), s),
+    className: m(f.section(), r),
     ...a,
     children: t
   }
-), U = ({
+), W = ({
   ref: n,
   children: t,
-  className: s,
+  className: r,
   ...a
 }) => /* @__PURE__ */ e(
   "div",
   {
     ref: n,
-    className: m("mt-auto", f.section(), s),
+    className: m("mt-auto", f.section(), r),
     ...a,
     children: t
   }
-), W = ({
+), G = ({
   ref: n,
   value: t,
-  icon: s,
+  icon: r,
   activeIcon: a,
   label: o,
-  tooltipContent: r,
+  tooltipContent: s,
   disabled: i = !1,
   className: d,
   onClick: l,
@@ -131,15 +131,15 @@ const [O, y] = V("SideBar"), f = {
   }), { collapsed: b, active: g, onActiveChange: v } = y({
     consumerName: "SideBarItem",
     contextRequired: !0
-  }), u = g === t, h = u ? a : s, I = r ?? o, L = S(
-    (P) => {
-      c || (l?.(P), v?.(t));
+  }), u = g === t, h = u ? a : r, I = s ?? o, L = S(
+    (k) => {
+      c || (l?.(k), v?.(t));
     },
     [c, l, v, t]
-  ), j = /* @__PURE__ */ x(R, { children: [
+  ), V = /* @__PURE__ */ x(P, { children: [
     /* @__PURE__ */ e(h, { size: 20 }),
     o != null && /* @__PURE__ */ e("span", { className: "translate-x-8 truncate", children: o })
-  ] }), k = /* @__PURE__ */ e(
+  ] }), j = /* @__PURE__ */ e(
     "button",
     {
       ref: n,
@@ -152,24 +152,24 @@ const [O, y] = V("SideBar"), f = {
       ),
       "aria-current": u ? "page" : void 0,
       ...p,
-      children: j
+      children: V
     }
   );
   return /* @__PURE__ */ x(N, { open: b ? void 0 : !1, children: [
-    /* @__PURE__ */ e(T, { asChild: !0, children: k }),
+    /* @__PURE__ */ e(T, { asChild: !0, children: j }),
     /* @__PURE__ */ e(w, { side: "right", sideOffset: 8, children: I })
   ] });
-}, G = ({
+}, H = ({
   className: n,
   tooltipContent: t,
-  ...s
+  ...r
 }) => {
-  const { t: a } = A(), { collapsed: o, setCollapsed: r } = y({
+  const { t: a } = A(), { collapsed: o, setCollapsed: s } = y({
     consumerName: "SideBarCollapseToggle",
     contextRequired: !0
   }), i = S(() => {
-    r(!o);
-  }, [o, r]), d = o ? z : E, l = /* @__PURE__ */ e(
+    s(!o);
+  }, [o, s]), d = o ? z : E, l = /* @__PURE__ */ e(
     "button",
     {
       type: "button",
@@ -179,7 +179,7 @@ const [O, y] = V("SideBar"), f = {
         n
       ),
       "aria-label": a(o ? "components.sideBar.expandAriaLabel" : "components.sideBar.collapseAriaLabel"),
-      ...s,
+      ...r,
       children: /* @__PURE__ */ e(d, { size: 20 })
     }
   ), p = t ?? a("components.sideBar.collapseAriaLabel");
@@ -192,16 +192,16 @@ function $() {
   return {
     SideBar: D,
     SideBarLeading: F,
-    SideBarTrailing: U,
-    SideBarItem: W,
-    SideBarCollapseToggle: G
+    SideBarTrailing: W,
+    SideBarItem: G,
+    SideBarCollapseToggle: H
   };
 }
 export {
   D as SideBar,
-  G as SideBarCollapseToggle,
-  W as SideBarItem,
+  H as SideBarCollapseToggle,
+  G as SideBarItem,
   F as SideBarLeading,
-  U as SideBarTrailing,
+  W as SideBarTrailing,
   $ as createSideBar
 };

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

@@ -36,8 +36,8 @@ const N = g(
   }
 ), V = (r) => {
   const {
-    appearance: n,
-    className: a,
+    appearance: a,
+    className: n,
     disabled: i = !1,
     size: o = 48,
     ref: c,
@@ -86,10 +86,10 @@ const N = g(
       className: f(
         N({
           disabled: m,
-          appearance: n,
+          appearance: a,
           size: o
         }),
-        a
+        n
       ),
       ...l,
       children: u

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

@@ -14,8 +14,8 @@ const s = 48, i = 4, W = ({
     mergeWith: { disabled: h }
   }), {
     displayLabel: p,
-    r: n,
-    cx: l,
+    r: l,
+    cx: n,
     cy: c,
     trackDashArray: b,
     progressDashArray: x,
@@ -54,9 +54,9 @@ const s = 48, i = 4, W = ({
               /* @__PURE__ */ e(
                 "circle",
                 {
-                  cx: l,
+                  cx: n,
                   cy: c,
-                  r: n,
+                  r: l,
                   fill: "none",
                   stroke: "currentColor",
                   strokeLinecap: "round",
@@ -71,9 +71,9 @@ const s = 48, i = 4, W = ({
               /* @__PURE__ */ e(
                 "circle",
                 {
-                  cx: l,
+                  cx: n,
                   cy: c,
-                  r: n,
+                  r: l,
                   fill: "none",
                   stroke: "currentColor",
                   strokeLinecap: "round",

package/dist/lib/Components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import { TableBodyProps, TableCellProps, TableColGroupProps, TableColProps, TableHeaderCellProps, TableHeaderRowProps, TableHeaderProps, TableProps, TableRowProps, TableActionBarLeadingProps, TableActionBarProps, TableActionBarTrailingProps, TableCellContentProps, TableLoadingRowProps, TableRootProps, TableInfoIconProps, TableSortButtonProps, TableGroupHeaderRowProps } from './types';
+import { TableBodyProps, TableCellProps, TableColGroupProps, TableColProps, TableHeaderCellProps, TableHeaderRowProps, TableHeaderProps, TableProps, TableRowProps, TableActionBarLeadingProps, TableActionBarProps, TableActionBarTrailingProps, TableCellItemProps, TableCellContentProps, TableCellContentTitleProps, TableCellContentDescriptionProps, TableCellContentRowProps, TableLoadingRowProps, TableRootProps, TableInfoIconProps, TableSortButtonProps, TableGroupHeaderRowProps } from './types';
 /**
  * Root table container component. Wraps a scrollable HTML `<div>` around the `Table` element.
  *
@@ -63,9 +63,30 @@ export declare const TableGroupHeaderRow: ({ children, className, colSpan, ref,
  */
 export declare const TableCell: ({ children, className, hideBelow, align, ref, ...props }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
 /**
- * Cell content component. To be used inside a TableCell or inside tanstack column render.
+ * Cell item component. Root of the cell content composition.
+ * To be used inside a TableCell or inside a tanstack column render.
+ * Typically wraps a leading element (spot, icon or crypto-icon) followed by a
+ * TableCellContent.
  */
-export declare const TableCellContent: ({ className, align, leadingContent, title, description, ref, ...props }: TableCellContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableCellItem: ({ className, align, children, ref, ...props }: TableCellItemProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Cell content column. Stacks a TableCellContentTitle, TableCellContentDescription
+ * and/or TableCellContentRow.
+ */
+export declare const TableCellContent: ({ className, children, ref, ...props }: TableCellContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Cell content title.
+ */
+export declare const TableCellContentTitle: ({ className, children, ref, ...props }: TableCellContentTitleProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Cell content description.
+ */
+export declare const TableCellContentDescription: ({ className, children, ref, ...props }: TableCellContentDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Cell content row. Use for more complex composition, e.g. a description
+ * alongside a Tag.
+ */
+export declare const TableCellContentRow: ({ className, children, ref, ...props }: TableCellContentRowProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Table header cell component. Wraps the HTML `<th>` element.
  * Use TableSortButton for sortable columns; other children are trailing content.