@ledgerhq/lumen-ui-react 0.1.4 → 0.1.6

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

@@ -1,13 +1,13 @@
-import { jsx as a, jsxs as x, Fragment as A } from "react/jsx-runtime";
-import { createSafeContext as j, cn as p } from "../../../libs/utils-shared/dist/index.js";
+import { jsx as a, jsxs as C, Fragment as L } from "react/jsx-runtime";
+import { createSafeContext as k, cn as c } from "../../../libs/utils-shared/dist/index.js";
 import { cva as v } from "class-variance-authority";
 import { t as h } from "../../../node_modules/i18next/dist/esm/i18next.js";
-import { useCallback as S } from "react";
-import { Tooltip as P, TooltipTrigger as R, TooltipContent as V } from "../Tooltip/Tooltip.js";
-import { useControllableState as B } from "../../../utils/useControllableState/useControllableState.js";
-import { ExpandRight as q } from "../../Symbols/Icons/ExpandRight.js";
-import { ExpandLeft as z } from "../../Symbols/Icons/ExpandLeft.js";
-const [E, C] = j("SideBar"), m = {
+import { useCallback as B } from "react";
+import { Tooltip as j, TooltipTrigger as P, TooltipContent as R } from "../Tooltip/Tooltip.js";
+import { useControllableState as x } from "../../../utils/useControllableState/useControllableState.js";
+import { ExpandRight as V } from "../../Symbols/Icons/ExpandRight.js";
+import { ExpandLeft as q } from "../../Symbols/Icons/ExpandLeft.js";
+const [z, S] = k("SideBar"), d = {
   root: v(
     [
       "flex h-full flex-col justify-between gap-16 overflow-y-auto rounded-xl bg-muted-transparent p-16",
@@ -50,36 +50,36 @@ const [E, C] = j("SideBar"), m = {
       }
     }
   )
-}, k = ({
-  ref: r,
+}, E = ({
+  ref: n,
   collapsed: t,
   defaultCollapsed: e = !1,
   onCollapsedChange: o,
-  active: n,
-  defaultActive: c,
+  active: r,
+  defaultActive: i,
   onActiveChange: s,
   children: f,
-  className: i,
+  className: p,
   ...b
 }) => {
-  const [u, g] = B({
+  const [m, g] = x({
     prop: t,
     defaultProp: e,
     onChange: o
-  }), [l, d] = B({
-    prop: n,
-    defaultProp: c ?? "",
+  }), [u, l] = x({
+    prop: r,
+    defaultProp: i ?? "",
     onChange: s
   });
   return /* @__PURE__ */ a(
-    E,
+    z,
     {
-      value: { collapsed: u, setCollapsed: g, active: l, onActiveChange: d },
+      value: { collapsed: m, setCollapsed: g, active: u, onActiveChange: l },
       children: /* @__PURE__ */ a(
         "nav",
         {
-          ref: r,
-          className: p(m.root({ collapsed: u }), i),
+          ref: n,
+          className: c(d.root({ collapsed: m }), p),
           "aria-label": h("components.sideBar.navigationAriaLabel"),
           ...b,
           children: f
@@ -88,110 +88,110 @@ const [E, C] = j("SideBar"), m = {
     }
   );
 };
-k.displayName = "SideBar";
+E.displayName = "SideBar";
 const F = ({
-  ref: r,
+  ref: n,
   children: t,
   className: e,
   ...o
 }) => /* @__PURE__ */ a(
   "div",
   {
-    ref: r,
-    className: p(m.section(), e),
+    ref: n,
+    className: c(d.section(), e),
     ...o,
     children: t
   }
 );
 F.displayName = "SideBarLeading";
 const J = ({
-  ref: r,
+  ref: n,
   children: t,
   className: e,
   ...o
 }) => /* @__PURE__ */ a(
   "div",
   {
-    ref: r,
-    className: p("mt-auto", m.section(), e),
+    ref: n,
+    className: c("mt-auto", d.section(), e),
     ...o,
     children: t
   }
 );
 J.displayName = "SideBarTrailing";
 const K = ({
-  ref: r,
+  ref: n,
   value: t,
   icon: e,
   activeIcon: o,
-  label: n,
-  tooltipContent: c,
+  label: r,
+  tooltipContent: i,
   disabled: s = !1,
   className: f,
-  onClick: i,
+  onClick: p,
   ...b
 }) => {
-  const { collapsed: u, active: g, onActiveChange: l } = C({
+  const { collapsed: m, active: g, onActiveChange: u } = S({
     consumerName: "SideBarItem",
     contextRequired: !0
-  }), d = g === t, N = d ? o : e, y = c ?? n, T = S(
-    (L) => {
-      s || (i == null || i(L), l == null || l(t));
+  }), l = g === t, N = l ? o : e, y = i ?? r, T = B(
+    (I) => {
+      s || (p?.(I), u?.(t));
     },
-    [s, i, l, t]
-  ), w = /* @__PURE__ */ x(A, { children: [
+    [s, p, u, t]
+  ), w = /* @__PURE__ */ C(L, { children: [
     /* @__PURE__ */ a(N, { size: 20, className: "shrink-0" }),
-    n != null && /* @__PURE__ */ a("span", { className: "translate-x-8 truncate", children: n })
-  ] }), I = /* @__PURE__ */ a(
+    r != null && /* @__PURE__ */ a("span", { className: "translate-x-8 truncate", children: r })
+  ] }), A = /* @__PURE__ */ a(
     "button",
     {
-      ref: r,
+      ref: n,
       type: "button",
       disabled: s,
       onClick: T,
-      className: p(
-        m.item({ active: d, disabled: s }),
+      className: c(
+        d.item({ active: l, disabled: s }),
         f
       ),
-      "aria-current": d ? "page" : void 0,
+      "aria-current": l ? "page" : void 0,
       ...b,
       children: w
     }
   );
-  return /* @__PURE__ */ x(P, { open: u ? void 0 : !1, children: [
-    /* @__PURE__ */ a(R, { asChild: !0, children: I }),
-    /* @__PURE__ */ a(V, { side: "right", sideOffset: 8, children: y })
+  return /* @__PURE__ */ C(j, { open: m ? void 0 : !1, children: [
+    /* @__PURE__ */ a(P, { asChild: !0, children: A }),
+    /* @__PURE__ */ a(R, { side: "right", sideOffset: 8, children: y })
   ] });
 };
 K.displayName = "SideBarItem";
 const O = ({
-  className: r,
+  className: n,
   ...t
 }) => {
-  const { collapsed: e, setCollapsed: o } = C({
+  const { collapsed: e, setCollapsed: o } = S({
     consumerName: "SideBarCollapseToggle",
     contextRequired: !0
-  }), n = S(() => {
+  }), r = B(() => {
     o(!e);
-  }, [e, o]), c = e ? q : z;
+  }, [e, o]), i = e ? V : q;
   return /* @__PURE__ */ a(
     "button",
     {
       type: "button",
-      onClick: n,
-      className: p(
-        m.item({ active: !1, disabled: !1 }),
-        r
+      onClick: r,
+      className: c(
+        d.item({ active: !1, disabled: !1 }),
+        n
       ),
       "aria-label": e ? h("components.sideBar.expandAriaLabel") : h("components.sideBar.collapseAriaLabel"),
       ...t,
-      children: /* @__PURE__ */ a(c, { size: 20, className: "shrink-0" })
+      children: /* @__PURE__ */ a(i, { size: 20, className: "shrink-0" })
     }
   );
 };
 O.displayName = "SideBarCollapseToggle";
 export {
-  k as SideBar,
+  E as SideBar,
   O as SideBarCollapseToggle,
   K as SideBarItem,
   F as SideBarLeading,

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/ThemeProvider/ThemeProvider.d.ts

@@ -1,11 +1,4 @@
 import { FC } from 'react';
-import { ThemeMode, ThemeProviderProps } from './ThemeProvider.types';
-declare const ThemeProvider: FC<ThemeProviderProps>;
-declare const useTheme: () => {
-    toggleMode: () => void;
-    mode: ThemeMode;
-    setMode: (mode: ThemeMode) => void;
-    locale: ThemeProviderProps["locale"];
-};
-export { ThemeProvider, useTheme };
+import { ThemeProviderProps } from './ThemeProvider.types';
+export declare const ThemeProvider: FC<ThemeProviderProps>;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/lib/Components/ThemeProvider/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAiBtE,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuBzC,CAAC;AAEF,QAAA,MAAM,QAAQ;;UAjCN,SAAS;aACN,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI;YAC1B,kBAAkB,CAAC,QAAQ,CAAC;CAyCrC,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAiB,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAU1E,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAoBhD,CAAC"}

package/dist/lib/Components/ThemeProvider/ThemeProvider.js

@@ -1,35 +1,24 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { createSafeContext as i } from "../../../libs/utils-shared/dist/index.js";
-import { useState as u, useMemo as c } from "react";
-import { SYSTEM_MODE as M, useRootColorModeSideEffect as f, LIGHT_MODE as T, DARK_MODE as m } from "./useRootColorModeSideEffect.js";
-import { I18nProvider as h } from "../../../i18n/I18nProvider.js";
-const [x, p] = i("ThemeProvider"), D = ({
-  children: e,
-  defaultMode: s = M,
+import { useMemo as f } from "react";
+import { COLOR_SCHEMES as s } from "./ThemeProvider.types.js";
+import { useRootColorModeSideEffect as n } from "./useRootColorModeSideEffect.js";
+import { I18nProvider as d } from "../../../i18n/I18nProvider.js";
+const [p] = i("ThemeProvider"), M = ({
+  children: t,
+  colorScheme: r = s.system,
   locale: o
 }) => {
-  const [t, n] = u(s);
-  f({ mode: t });
-  const d = c(
+  n({ colorScheme: r });
+  const m = f(
     () => ({
-      mode: t,
-      setMode: n,
+      colorScheme: r,
       locale: o
     }),
-    [t, o]
+    [r, o]
   );
-  return /* @__PURE__ */ r(x, { value: d, children: /* @__PURE__ */ r(h, { locale: o, children: e }) });
-}, P = () => {
-  const e = p({
-    consumerName: "useTheme",
-    contextRequired: !0
-  });
-  return {
-    ...e,
-    toggleMode: () => e.setMode(e.mode === m ? T : m)
-  };
+  return /* @__PURE__ */ e(p, { value: m, children: /* @__PURE__ */ e(d, { locale: o, children: t }) });
 };
 export {
-  D as ThemeProvider,
-  P as useTheme
+  M as ThemeProvider
 };