@ledgerhq/lumen-ui-react 0.1.4 → 0.1.5

package/dist/lib/Components/Table/Table.js

@@ -1,15 +1,15 @@
 import { jsx as n, jsxs as m } from "react/jsx-runtime";
 import { createSafeContext as N, cn as c } from "../../../libs/utils-shared/dist/index.js";
-import { cva as o } from "class-variance-authority";
+import { cva as s } from "class-variance-authority";
 import { useThrottledScrollBottom as T } from "./utils/useThrottledScrollBottom.js";
 import { Spot as g } from "../Spot/Spot.js";
 import { Information as w } from "../../Symbols/Icons/Information.js";
-import { useCommonTranslation as R } from "../../../i18n/useCommonTranslation.js";
-import { ChevronUpDown as B } from "../../Symbols/Icons/ChevronUpDown.js";
-import { ChevronDescending as C } from "../../Symbols/Icons/ChevronDescending.js";
+import { useCommonTranslation as C } from "../../../i18n/useCommonTranslation.js";
+import { ChevronUpDown as R } from "../../Symbols/Icons/ChevronUpDown.js";
+import { ChevronDescending as B } from "../../Symbols/Icons/ChevronDescending.js";
 import { ChevronAscending as j } from "../../Symbols/Icons/ChevronAscending.js";
 import { InteractiveIcon as H } from "../InteractiveIcon/InteractiveIcon.js";
-const [A, u] = N("Table"), I = o(
+const [A, u] = N("Table"), I = s(
   "relative scrollbar-none w-full max-w-full border-collapse overflow-x-auto rounded-lg",
   {
     variants: {
@@ -25,7 +25,7 @@ const [A, u] = N("Table"), I = o(
   className: a,
   onScrollBottom: l,
   loading: r,
-  ref: s,
+  ref: o,
   ...i
 }) => {
   const d = T({
@@ -36,7 +36,7 @@ const [A, u] = N("Table"), I = o(
     "div",
     {
       ...i,
-      ref: s,
+      ref: o,
       className: I({ appearance: e, className: a }),
       onScroll: d,
       children: t
@@ -44,7 +44,7 @@ const [A, u] = N("Table"), I = o(
   ) });
 };
 L.displayName = "TableRoot";
-const V = ({ children: t, className: e, ref: a, ...l }) => /* @__PURE__ */ n(
+const S = ({ children: t, className: e, ref: a, ...l }) => /* @__PURE__ */ n(
   "table",
   {
     ...l,
@@ -53,28 +53,28 @@ const V = ({ children: t, className: e, ref: a, ...l }) => /* @__PURE__ */ n(
     children: t
   }
 );
-V.displayName = "Table";
-const S = ({
+S.displayName = "Table";
+const V = ({
   children: t,
   className: e,
   ref: a,
   ...l
 }) => /* @__PURE__ */ n("thead", { ref: a, className: e, ...l, children: t });
-S.displayName = "TableHeader";
-const q = ({
+V.displayName = "TableHeader";
+const k = ({
   children: t,
   className: e,
   ref: a,
   ...l
 }) => /* @__PURE__ */ n("tbody", { ref: a, className: e, ...l, children: t });
-q.displayName = "TableBody";
-const z = ({
+k.displayName = "TableBody";
+const q = ({
   children: t,
   className: e,
   clickable: a = !1,
   onClick: l,
   ref: r,
-  ...s
+  ...o
 }) => /* @__PURE__ */ n(
   "tr",
   {
@@ -85,19 +85,19 @@ const z = ({
       a && "cursor-pointer outline-none select-none hover:bg-base-transparent-hover active:bg-base-transparent-pressed",
       e
     ),
-    ...s,
+    ...o,
     children: t
   }
 );
-z.displayName = "TableRow";
-const G = o("sticky top-0", {
+q.displayName = "TableRow";
+const z = s("sticky top-0", {
   variants: {
     appearance: {
       "no-background": "bg-canvas",
       plain: "bg-surface"
     }
   }
-}), M = ({
+}), G = ({
   children: t,
   className: e,
   ref: a,
@@ -111,21 +111,21 @@ const G = o("sticky top-0", {
     "tr",
     {
       ref: a,
-      className: G({ appearance: r, className: e }),
+      className: z({ appearance: r, className: e }),
       ...l,
       children: t
     }
   );
 };
-M.displayName = "TableHeaderRow";
-const k = ({
+G.displayName = "TableHeaderRow";
+const M = ({
   children: t,
   className: e,
   colSpan: a = 1,
   ref: l,
   ...r
 }) => {
-  const { appearance: s } = u({
+  const { appearance: o } = u({
     consumerName: "TableGroupHeaderRow",
     contextRequired: !0
   });
@@ -134,15 +134,15 @@ const k = ({
     {
       className: c(
         "flex h-32 w-full items-center bg-muted px-12 body-3 text-base",
-        s === "no-background" && "rounded-sm"
+        o === "no-background" && "rounded-sm"
       ),
       children: t
     }
   ) }) });
 };
-k.displayName = "TableGroupHeaderRow";
+M.displayName = "TableGroupHeaderRow";
 const p = {
-  root: o(
+  root: s(
     "h-64 truncate p-12 body-3 text-base first:rounded-l-md last:rounded-r-md",
     {
       variants: {
@@ -156,7 +156,7 @@ const p = {
       }
     }
   ),
-  inner: o("flex flex-1 justify-end", {
+  inner: s("flex flex-1 justify-end", {
     variants: {
       align: {
         start: "text-start justify-start",
@@ -170,18 +170,18 @@ const p = {
   hideBelow: a,
   align: l = "start",
   ref: r,
-  ...s
+  ...o
 }) => /* @__PURE__ */ n(
   "td",
   {
     ref: r,
     className: p.root({ hideBelow: a, className: e }),
-    ...s,
+    ...o,
     children: /* @__PURE__ */ n("div", { className: p.inner({ align: l }), children: t })
   }
 );
 J.displayName = "TableCell";
-const K = o("flex items-center gap-12 truncate", {
+const K = s("flex items-center gap-12 truncate", {
   variants: {
     align: {
       start: "text-start",
@@ -194,12 +194,12 @@ const K = o("flex items-center gap-12 truncate", {
   leadingContent: a,
   title: l,
   description: r,
-  ref: s,
+  ref: o,
   ...i
 }) => /* @__PURE__ */ m(
   "div",
   {
-    ref: s,
+    ref: o,
     className: K({ align: e, className: t }),
     ...i,
     children: [
@@ -213,7 +213,7 @@ const K = o("flex items-center gap-12 truncate", {
 );
 P.displayName = "TableCellContent";
 const f = {
-  root: o("group h-40 truncate p-12 body-3 text-base", {
+  root: s("group h-40 truncate p-12 body-3 text-base", {
     variants: {
       hideBelow: {
         xs: "hidden xs:table-cell",
@@ -224,7 +224,7 @@ const f = {
       }
     }
   }),
-  content: o("flex min-w-0 items-center gap-4 truncate", {
+  content: s("flex min-w-0 items-center gap-4 truncate", {
     variants: {
       align: {
         start: "text-start justify-start",
@@ -232,7 +232,7 @@ const f = {
       }
     }
   }),
-  trailingContent: o(
+  trailingContent: s(
     "flex items-center justify-center opacity-0 group-hover:opacity-100"
   )
 }, U = ({
@@ -241,7 +241,7 @@ const f = {
   scope: a = "col",
   hideBelow: l,
   align: r = "start",
-  trailingContent: s,
+  trailingContent: o,
   ref: i,
   ...d
 }) => /* @__PURE__ */ n(
@@ -253,7 +253,7 @@ const f = {
     ...d,
     children: /* @__PURE__ */ n("div", { className: "min-w-0", children: /* @__PURE__ */ m("div", { className: f.content({ align: r }), children: [
       /* @__PURE__ */ n("span", { className: c("truncate", r === "end" && "order-1"), children: t }),
-      /* @__PURE__ */ n("div", { className: "flex items-center justify-center opacity-0 group-hover:opacity-100", children: s })
+      /* @__PURE__ */ n("div", { className: "flex items-center justify-center opacity-0 group-hover:opacity-100", children: o })
     ] }) })
   }
 );
@@ -343,10 +343,10 @@ const W = ({
 W.displayName = "TableInfoIcon";
 const X = {
   asc: j,
-  desc: C,
-  idle: B
+  desc: B,
+  idle: R
 }, v = {
-  root: o(
+  root: s(
     [
       "flex min-w-0 cursor-pointer items-center gap-4",
       "rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
@@ -360,7 +360,7 @@ const X = {
       }
     }
   ),
-  icon: o("", {
+  icon: s("", {
     variants: {
       active: {
         true: "opacity-100",
@@ -374,11 +374,11 @@ const X = {
   align: a = "start",
   onToggleSort: l,
   className: r,
-  onClick: s,
+  onClick: o,
   ref: i,
   ...d
 }) => {
-  const { t: b } = R(), x = X[e || "idle"], h = {
+  const { t: b } = C(), x = X[e || "idle"], h = {
     asc: b("table.ascAriaLabel"),
     desc: b("table.descAriaLabel")
   };
@@ -391,7 +391,7 @@ const X = {
       className: v.root({ align: a, className: r }),
       "aria-label": e ? h[e] : void 0,
       onClick: (y) => {
-        s == null || s(y), l == null || l(e === "asc" ? "desc" : "asc");
+        o?.(y), l?.(e === "asc" ? "desc" : "asc");
       },
       children: [
         /* @__PURE__ */ n("span", { className: "min-w-0 truncate", children: t }),
@@ -410,20 +410,20 @@ const X = {
 };
 Y.displayName = "TableSortButton";
 export {
-  V as Table,
+  S as Table,
   E as TableActionBar,
   F as TableActionBarLeading,
   O as TableActionBarTrailing,
-  q as TableBody,
+  k as TableBody,
   J as TableCell,
   P as TableCellContent,
-  k as TableGroupHeaderRow,
-  S as TableHeader,
+  M as TableGroupHeaderRow,
+  V as TableHeader,
   U as TableHeaderCell,
-  M as TableHeaderRow,
+  G as TableHeaderRow,
   W as TableInfoIcon,
   Q as TableLoadingRow,
   L as TableRoot,
-  z as TableRow,
+  q as TableRow,
   Y as TableSortButton
 };

package/dist/lib/Components/Table/utils/useThrottledScrollBottom.js

@@ -1,37 +1,36 @@
 import { throttle as h } from "../../../../libs/utils-shared/dist/index.js";
-import { useMemo as L, useRef as u, useEffect as _ } from "react";
+import { useMemo as L, useRef as s, useEffect as _ } from "react";
 import { TABLE_SCROLL_BOTTOM_THRESHOLD_IN_ROW as R, TABLE_CELL_HEIGHT as a } from "../constants.js";
 const m = 150, E = ({
   element: t,
-  threshold: c = 10
+  threshold: r = 10
 }) => {
-  const { scrollTop: n, scrollHeight: o, clientHeight: e } = t;
-  return n + e >= o - c;
+  const { scrollTop: c, scrollHeight: n, clientHeight: e } = t;
+  return c + e >= n - r;
 }, p = ({
   onScrollBottom: t,
-  loading: c = !1,
-  thresholdInRow: n = R
+  loading: r = !1,
+  thresholdInRow: c = R
 }) => {
-  const o = L(
-    () => n * a,
-    [n]
-  ), e = u(t), l = u(c);
-  e.current = t, l.current = c;
-  const f = u(null), i = L(() => {
+  const n = L(
+    () => c * a,
+    [c]
+  ), e = s(t), u = s(r);
+  e.current = t, u.current = r;
+  const l = s(null), f = L(() => {
     if (!t)
       return;
-    const r = h((s) => {
-      l.current || !e.current || E({ element: s, threshold: o }) && e.current();
+    const i = h((o) => {
+      u.current || !e.current || E({ element: o, threshold: n }) && e.current();
     }, m);
-    return f.current = r, (s) => {
-      const T = s.currentTarget;
-      T && r(T);
+    return l.current = i, (o) => {
+      const T = o.currentTarget;
+      T && i(T);
     };
-  }, [t, o]);
+  }, [t, n]);
   return _(() => () => {
-    var r;
-    (r = f.current) == null || r.cancel();
-  }, [i]), i;
+    l.current?.cancel();
+  }, [f]), f;
 };
 export {
   E as isScrolledToBottom,

package/dist/lib/Components/Tile/Tile.js

@@ -1,10 +1,10 @@
-import { jsx as r, jsxs as b } from "react/jsx-runtime";
-import { createSafeContext as T, cn as s } from "../../../libs/utils-shared/dist/index.js";
+import { jsx as i, jsxs as b } from "react/jsx-runtime";
+import { createSafeContext as T, cn as l } from "../../../libs/utils-shared/dist/index.js";
 import { cva as f } from "class-variance-authority";
 import { useCallback as x } from "react";
 import { Spot as v } from "../Spot/Spot.js";
 import { InteractiveIcon as y } from "../InteractiveIcon/InteractiveIcon.js";
-const [N, l] = T("Tile"), m = {
+const [N, s] = T("Tile"), m = {
   root: f([
     "group relative flex flex-col items-center rounded-md text-base transition-colors focus-visible:outline-2 focus-visible:outline-focus"
   ]),
@@ -39,14 +39,14 @@ const [N, l] = T("Tile"), m = {
   ref: t,
   className: e,
   onClick: a,
-  secondaryAction: i,
+  secondaryAction: o,
   appearance: c = "no-background",
-  disabled: o = !1,
+  disabled: r = !1,
   centered: d = !1,
   children: u,
   style: p,
   ...n
-}) => /* @__PURE__ */ r(N, { value: { disabled: o }, children: /* @__PURE__ */ b(
+}) => /* @__PURE__ */ i(N, { value: { disabled: r }, children: /* @__PURE__ */ b(
   "div",
   {
     ref: t,
@@ -55,61 +55,61 @@ const [N, l] = T("Tile"), m = {
       className: e
     }),
     children: [
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ i(
         "button",
         {
           ...n,
           onClick: a,
-          disabled: o,
+          disabled: r,
           className: m.inner({
             appearance: c,
-            disabled: o,
+            disabled: r,
             centered: d
           }),
           children: u
         }
       ),
-      i
+      o
     ]
   }
 ) });
 g.displayName = "Tile";
 const h = ({ size: t = 48, ...e }) => {
-  const { disabled: a } = l({
+  const { disabled: a } = s({
     consumerName: "TileSpot",
     contextRequired: !0
   });
-  return /* @__PURE__ */ r(v, { ...e, size: t, disabled: a });
+  return /* @__PURE__ */ i(v, { ...e, size: t, disabled: a });
 };
 h.displayName = "TileSpot";
-const S = ({
+const C = ({
   children: t,
   className: e,
   ...a
-}) => /* @__PURE__ */ r(
+}) => /* @__PURE__ */ i(
   "div",
   {
-    className: s("flex w-full flex-col items-center text-center", e),
+    className: l("flex w-full flex-col items-center text-center", e),
     ...a,
     children: t
   }
 );
-S.displayName = "TileContent";
-const w = ({
+C.displayName = "TileContent";
+const S = ({
   children: t,
   className: e,
   ...a
 }) => {
-  const { disabled: i } = l({
+  const { disabled: o } = s({
     consumerName: "TileTitle",
     contextRequired: !0
   });
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: s(
+      className: l(
         "w-full truncate body-2-semi-bold",
-        i && "text-disabled",
+        o && "text-disabled",
         e
       ),
       ...a,
@@ -117,22 +117,22 @@ const w = ({
     }
   );
 };
-w.displayName = "TileTitle";
-const q = ({
+S.displayName = "TileTitle";
+const k = ({
   children: t,
   className: e,
   ...a
 }) => {
-  const { disabled: i } = l({
+  const { disabled: o } = s({
     consumerName: "TileDescription",
     contextRequired: !0
   });
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: s(
+      className: l(
         "w-full truncate body-3",
-        i ? "text-disabled" : "text-muted",
+        o ? "text-disabled" : "text-muted",
         e
       ),
       ...a,
@@ -140,63 +140,63 @@ const q = ({
     }
   );
 };
-q.displayName = "TileDescription";
-const C = ({
+k.displayName = "TileDescription";
+const w = ({
   children: t,
   className: e,
   ...a
-}) => /* @__PURE__ */ r(
+}) => /* @__PURE__ */ i(
   "div",
   {
-    className: s("mt-4 flex w-full flex-col items-center gap-8", e),
+    className: l("mt-4 flex w-full flex-col items-center gap-8", e),
     ...a,
     children: t
   }
 );
-C.displayName = "TileTrailingContent";
-const D = ({
+w.displayName = "TileTrailingContent";
+const q = ({
   ref: t,
   onClick: e,
   icon: a,
-  className: i,
+  className: o,
   "aria-label": c,
-  ...o
+  ...r
 }) => {
-  const { disabled: d } = l({
+  const { disabled: d } = s({
     consumerName: "TileSecondaryAction",
     contextRequired: !0
   }), u = x(
     (n) => {
-      n.stopPropagation(), n.preventDefault(), e == null || e(n);
+      n.stopPropagation(), n.preventDefault(), e?.(n);
     },
     [e]
   );
   if (d) return null;
   const p = a;
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ i(
     y,
     {
-      className: s(
+      className: l(
         "absolute top-8 right-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100",
-        i
+        o
       ),
       "data-secondary-button-container": !0,
       iconType: "stroked",
       onClick: u,
       "aria-label": c,
       ref: t,
-      ...o,
-      children: /* @__PURE__ */ r(p, { size: 24 })
+      ...r,
+      children: /* @__PURE__ */ i(p, { size: 24 })
     }
   );
 };
-D.displayName = "TileSecondaryAction";
+q.displayName = "TileSecondaryAction";
 export {
   g as Tile,
-  S as TileContent,
-  q as TileDescription,
-  D as TileSecondaryAction,
+  C as TileContent,
+  k as TileDescription,
+  q as TileSecondaryAction,
   h as TileSpot,
-  w as TileTitle,
-  C as TileTrailingContent
+  S as TileTitle,
+  w as TileTrailingContent
 };

package/dist/lib/Components/TileButton/TileButton.js

@@ -1,9 +1,9 @@
-import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { jsxs as b, jsx as s } from "react/jsx-runtime";
 import { cn as p } from "../../../libs/utils-shared/dist/index.js";
 import { Slot as v, Slottable as x } from "@radix-ui/react-slot";
-import { cva as r } from "class-variance-authority";
+import { cva as i } from "class-variance-authority";
 import { useCallback as g } from "react";
-const N = r(
+const N = i(
   [
     "flex flex-col items-center gap-8 rounded-md p-12",
     "bg-muted body-2-semi-bold text-base transition-colors",
@@ -24,7 +24,7 @@ const N = r(
       isFull: !1
     }
   }
-), V = r("shrink-0", {
+), V = i("shrink-0", {
   variants: {
     disabled: {
       true: "text-disabled",
@@ -34,17 +34,17 @@ const N = r(
   defaultVariants: {
     disabled: !1
   }
-}), y = ({
-  ref: i,
+}), k = ({
+  ref: r,
   icon: n,
-  children: l,
-  onClick: t,
+  children: a,
+  onClick: l,
   disabled: e = !1,
   isFull: u = !1,
-  className: f,
-  asChild: s = !1,
-  "aria-label": m,
-  ...c
+  className: c,
+  asChild: t = !1,
+  "aria-label": f,
+  ...m
 }) => {
   const d = g(
     (o) => {
@@ -52,29 +52,29 @@ const N = r(
         o.preventDefault();
         return;
       }
-      t == null || t(o);
+      l?.(o);
     },
-    [e, t]
+    [e, l]
   );
   return /* @__PURE__ */ b(
-    s ? v : "button",
+    t ? v : "button",
     {
-      ref: i,
-      type: s ? void 0 : "button",
-      className: p(N({ disabled: e, isFull: u }), f),
+      ref: r,
+      type: t ? void 0 : "button",
+      className: p(N({ disabled: e, isFull: u }), c),
       onClick: d,
       disabled: e,
       "data-disabled": e || void 0,
-      "aria-label": m,
-      ...c,
+      "aria-label": f,
+      ...m,
       children: [
-        /* @__PURE__ */ a(n, { size: 20, className: V({ disabled: e }) }),
-        s ? /* @__PURE__ */ a(x, { children: l }) : /* @__PURE__ */ a("span", { className: "line-clamp-2 text-center", children: l })
+        /* @__PURE__ */ s(n, { size: 20, className: V({ disabled: e }) }),
+        t ? /* @__PURE__ */ s(x, { children: a }) : /* @__PURE__ */ s("span", { className: "line-clamp-2 text-center", children: a })
       ]
     }
   );
 };
-y.displayName = "TileButton";
+k.displayName = "TileButton";
 export {
-  y as TileButton
+  k as TileButton
 };