@ledgerhq/lumen-ui-react 0.1.4 → 0.1.6

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

@@ -1,12 +1,18 @@
 import { PropsWithChildren } from 'react';
 import { SupportedLocale } from '../../../i18n';
-export type ThemeMode = 'dark' | 'light' | 'system';
+export declare const COLOR_SCHEMES: {
+    readonly light: "light";
+    readonly dark: "dark";
+    readonly system: "system";
+};
+export type ColorSchemeName = (typeof COLOR_SCHEMES)[keyof typeof COLOR_SCHEMES];
 export type ThemeProviderProps = PropsWithChildren & {
     /**
-     * The default mode of the theme.
+     * The color scheme of the theme.
+     * system will follow the user's OS preference via `prefers-color-scheme`.
      * @default 'system'
      */
-    defaultMode?: ThemeMode;
+    colorScheme?: ColorSchemeName;
     /**
      * The locale to use for translations.
      * When changed, translations will be lazy-loaded automatically.

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/ThemeProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpD,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,CAAC"}
+{"version":3,"file":"ThemeProvider.types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/ThemeProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,aAAa;;;;CAIhB,CAAC;AAEX,MAAM,MAAM,eAAe,GACzB,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACnD;;;;OAIG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B;;;;OAIG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,CAAC"}

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

@@ -0,0 +1,8 @@
+const t = {
+  light: "light",
+  dark: "dark",
+  system: "system"
+};
+export {
+  t as COLOR_SCHEMES
+};

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

@@ -1,4 +1,4 @@
-import { ThemeMode } from './ThemeProvider.types';
+import { ColorSchemeName } from './ThemeProvider.types';
 export declare const LIGHT_MODE = "light";
 export declare const DARK_MODE = "dark";
 export declare const SYSTEM_MODE = "system";
@@ -6,7 +6,7 @@ export declare const SYSTEM_MODE = "system";
  * Updates the root element className when the theme mode changes.
  * This allows the design-system theme config to be applied
  */
-export declare const useRootColorModeSideEffect: ({ mode }: {
-    mode: ThemeMode;
+export declare const useRootColorModeSideEffect: ({ colorScheme, }: {
+    colorScheme: ColorSchemeName;
 }) => void;
 //# sourceMappingURL=useRootColorModeSideEffect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useRootColorModeSideEffect.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/useRootColorModeSideEffect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,eAAO,MAAM,UAAU,UAAU,CAAC;AAClC,eAAO,MAAM,SAAS,SAAS,CAAC;AAChC,eAAO,MAAM,WAAW,WAAW,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,0BAA0B,aAAc;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,SAiBvE,CAAC"}
+{"version":3,"file":"useRootColorModeSideEffect.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/useRootColorModeSideEffect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEvE,eAAO,MAAM,UAAU,UAAU,CAAC;AAClC,eAAO,MAAM,SAAS,SAAS,CAAC;AAChC,eAAO,MAAM,WAAW,WAAW,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,0BAA0B,qBAEpC;IACD,WAAW,EAAE,eAAe,CAAC;CAC9B,SA0BA,CAAC"}

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

@@ -1,18 +1,24 @@
-import { useEffect as r } from "react";
-const e = "light", o = "dark", n = "system", a = ({ mode: s }) => {
-  r(() => {
-    const t = window.document.documentElement;
-    if (t.classList.remove(e, o), s === n) {
-      const c = window.matchMedia("(prefers-color-scheme: dark)").matches ? o : e;
-      t.classList.add(c);
-      return;
+import { useLayoutEffect as a } from "react";
+import { COLOR_SCHEMES as c } from "./ThemeProvider.types.js";
+const r = "light", n = "dark", m = ({
+  colorScheme: t
+}) => {
+  a(() => {
+    const e = window.document.documentElement;
+    if (e.classList.remove(r, n), t === c.system) {
+      const s = window.matchMedia("(prefers-color-scheme: dark)"), o = () => {
+        e.classList.remove(r, n), e.classList.add(s.matches ? n : r);
+      };
+      return o(), s.addEventListener("change", o), () => {
+        s.removeEventListener("change", o);
+      };
     }
-    t.classList.add(s);
-  }, [s]);
+    return e.classList.add(t), () => {
+    };
+  }, [t]);
 };
 export {
-  o as DARK_MODE,
-  e as LIGHT_MODE,
-  n as SYSTEM_MODE,
-  a as useRootColorModeSideEffect
+  n as DARK_MODE,
+  r as LIGHT_MODE,
+  m as useRootColorModeSideEffect
 };

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

package/dist/node_modules/react-i18next/dist/es/context.js

@@ -1,20 +1,17 @@
-var c = Object.defineProperty;
-var o = (a, e, s) => e in a ? c(a, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : a[e] = s;
-var t = (a, e, s) => o(a, typeof e != "symbol" ? e + "" : e, s);
-import { createContext as p } from "react";
-const d = p();
-class N {
+import { createContext as a } from "react";
+const o = a();
+class p {
   constructor() {
-    t(this, "getUsedNamespaces", () => Object.keys(this.usedNamespaces));
     this.usedNamespaces = {};
   }
-  addUsedNamespaces(e) {
-    e.forEach((s) => {
-      this.usedNamespaces[s] || (this.usedNamespaces[s] = !0);
+  addUsedNamespaces(s) {
+    s.forEach((e) => {
+      this.usedNamespaces[e] || (this.usedNamespaces[e] = !0);
     });
   }
+  getUsedNamespaces = () => Object.keys(this.usedNamespaces);
 }
 export {
-  d as I18nContext,
-  N as ReportNamespaces
+  o as I18nContext,
+  p as ReportNamespaces
 };

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [

package/dist/utils/useControllableState/useControllableState.js

@@ -1,25 +1,24 @@
-import { useState as d, useRef as i, useCallback as V, startTransition as b, useEffect as m } from "react";
-function y({
+import { useState as S, useRef as l, useCallback as d, startTransition as C, useEffect as R } from "react";
+function b({
   prop: t,
-  defaultProp: f,
-  onChange: r
+  defaultProp: i,
+  onChange: c
 }) {
-  const [v, a] = d(t ?? f), n = t !== void 0, l = n ? t : v, e = i(r);
-  e.current = r;
-  const s = i(l), S = V(
-    (u) => {
-      var o;
-      const c = typeof u == "function" ? u(s.current) : u;
-      n || b(() => {
-        a(c);
-      }), (o = e.current) == null || o.call(e, c), s.current = c;
+  const [f, r] = S(t ?? i), e = t !== void 0, a = e ? t : f, o = l(c);
+  o.current = c;
+  const n = l(a), v = d(
+    (s) => {
+      const u = typeof s == "function" ? s(n.current) : s;
+      e || C(() => {
+        r(u);
+      }), o.current?.(u), n.current = u;
     },
-    [n]
+    [e]
   );
-  return m(() => {
-    t !== void 0 && (a(t), s.current = t);
-  }, [t]), [l, S];
+  return R(() => {
+    t !== void 0 && (r(t), n.current = t);
+  }, [t]), [a, v];
 }
 export {
-  y as useControllableState
+  b as useControllableState
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [