@ledgerhq/lumen-ui-react 0.1.20 → 0.1.22

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

@@ -1,24 +1,30 @@
-import { jsx as e } from "react/jsx-runtime";
-import { createSafeContext as i } from "../../../libs/utils-shared/dist/index.js";
-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
+import { jsx as t } from "react/jsx-runtime";
+import { createSafeContext as h } from "../../../libs/utils-shared/dist/index.js";
+import { useMemo as i } from "react";
+import { COLOR_SCHEMES as u } from "./ThemeProvider.types.js";
+import { useResolvedColorScheme as d, useRootColorModeSideEffect as f } from "./useRootColorModeSideEffect.js";
+import { I18nProvider as l } from "../../../i18n/I18nProvider.js";
+const [v, C] = h("ThemeProvider"), R = ({
+  themes: o,
+  children: m,
+  colorScheme: s = u.system,
+  locale: c
 }) => {
-  n({ colorScheme: r });
-  const m = f(
+  const e = d(s);
+  f(e);
+  const r = o?.[e], n = i(
     () => ({
-      colorScheme: r,
-      locale: o
+      theme: r,
+      colorScheme: e
     }),
-    [r, o]
+    [r, e]
   );
-  return /* @__PURE__ */ e(p, { value: m, children: /* @__PURE__ */ e(d, { locale: o, children: t }) });
-};
+  return /* @__PURE__ */ t(v, { value: n, children: /* @__PURE__ */ t(l, { locale: c, children: m }) });
+}, E = () => C({
+  consumerName: "useTheme",
+  contextRequired: !0
+});
 export {
-  M as ThemeProvider
+  R as ThemeProvider,
+  E as useTheme
 };

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

@@ -1,3 +1,4 @@
+import { LedgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { PropsWithChildren } from 'react';
 import { SupportedLocale } from '../../../i18n';
 export declare const COLOR_SCHEMES: {
@@ -5,8 +6,13 @@ export declare const COLOR_SCHEMES: {
     readonly dark: "dark";
     readonly system: "system";
 };
-export type ColorSchemeName = (typeof COLOR_SCHEMES)[keyof typeof COLOR_SCHEMES];
+export type ColorSchemeName = keyof typeof COLOR_SCHEMES;
+export type LumenThemes = LedgerLiveThemes;
 export type ThemeProviderProps = PropsWithChildren & {
+    /**
+     * Themes containing design-tokens for the app.
+     */
+    themes?: LumenThemes;
     /**
      * The color scheme of the theme.
      * system will follow the user's OS preference via `prefers-color-scheme`.

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,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"}
+{"version":3,"file":"ThemeProvider.types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ThemeProvider/ThemeProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,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,GAAG,MAAM,OAAO,aAAa,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG,gBAAgB,CAAC;AAE3C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG;IACnD;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B;;;;OAIG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,CAAC"}

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

@@ -1,12 +1,17 @@
 import { ColorSchemeName } from './ThemeProvider.types';
 export declare const LIGHT_MODE = "light";
 export declare const DARK_MODE = "dark";
-export declare const SYSTEM_MODE = "system";
+/**
+ * Returns the resolved color scheme ('light' | 'dark'), handling 'system' by
+ * subscribing to `prefers-color-scheme` changes.
+ *
+ * When colorScheme is explicit ('light' | 'dark'), the media-query listener
+ * is skipped entirely to avoid unnecessary subscriptions and re-renders.
+ */
+export declare const useResolvedColorScheme: (colorScheme: ColorSchemeName) => "light" | "dark";
 /**
  * Updates the root element className when the theme mode changes.
- * This allows the design-system theme config to be applied
+ * This allows the design-system theme config to be applied.
  */
-export declare const useRootColorModeSideEffect: ({ colorScheme, }: {
-    colorScheme: ColorSchemeName;
-}) => void;
+export declare const useRootColorModeSideEffect: (resolvedColorScheme: "light" | "dark") => 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,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,GAAI,kBAExC;IACD,WAAW,EAAE,eAAe,CAAC;CAC9B,SA0BA,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;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,GACjC,aAAa,eAAe,KAC3B,OAAO,GAAG,MAQZ,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GACrC,qBAAqB,OAAO,GAAG,MAAM,KACpC,IAMF,CAAC"}

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

@@ -1,24 +1,25 @@
-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);
-      };
-    }
-    return e.classList.add(t), () => {
-    };
-  }, [t]);
+import { useSyncExternalStore as o, useLayoutEffect as s } from "react";
+import { COLOR_SCHEMES as r } from "./ThemeProvider.types.js";
+const n = "light", c = "dark", m = () => window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", i = (e) => {
+  const t = window.matchMedia("(prefers-color-scheme: dark)");
+  return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+}, d = () => () => {
+}, h = (e) => {
+  const t = e === r.system;
+  return o(
+    t ? i : d,
+    t ? m : () => e,
+    () => "light"
+  );
+}, E = (e) => {
+  s(() => {
+    const t = window.document.documentElement;
+    t.classList.remove(n, c), t.classList.add(e);
+  }, [e]);
 };
 export {
-  n as DARK_MODE,
-  r as LIGHT_MODE,
-  m as useRootColorModeSideEffect
+  c as DARK_MODE,
+  n as LIGHT_MODE,
+  h as useResolvedColorScheme,
+  E as useRootColorModeSideEffect
 };

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

@@ -18,6 +18,7 @@ export * from './InteractiveIcon';
 export * from './Link';
 export * from './ListItem';
 export * from './MediaBanner';
+export * from './MediaButton';
 export * from './MediaCard';
 export * from './MediaImage';
 export * from './Menu';
@@ -27,7 +28,6 @@ export * from './PageIndicator';
 export * from './SearchInput';
 export * from './SegmentedControl';
 export * from './Select';
-export * from './TriggerButton';
 export * from './SideBar';
 export * from './Skeleton';
 export * from './Spinner';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -55,9 +55,10 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "@tanstack/react-table": "^8.21.3",
+    "@ledgerhq/lumen-design-core": "0.1.10",
     "clsx": "^2.1.1",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "tailwind-merge": "^2.6.0"
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -55,6 +55,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "@tanstack/react-table": "^8.21.3",
+    "@ledgerhq/lumen-design-core": "0.1.10",
     "clsx": "^2.1.1",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",

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

@@ -1,30 +0,0 @@
-import { TriggerButtonProps } from './types';
-/**
- * Trigger button for select/dropdown components. Displays a label with an optional
- * leading icon and a trailing chevron indicator.
- *
- * This component is intended to be used exclusively as the trigger inside a Select or
- * dropdown pattern. It should not be used as a standalone action button — use `Button`
- * or `IconButton` instead.
- *
- * @see {@link https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6389-45680 Figma}
- *
- * @example
- * import { TriggerButton } from '@ledgerhq/lumen-ui-react';
- * import { Settings } from '@ledgerhq/lumen-ui-react/symbols';
- *
- * // With flat interface icon
- * <TriggerButton icon={<Settings size={20} />} iconType="flat">
- *   Network
- * </TriggerButton>
- *
- * // With rounded crypto icon
- * <TriggerButton icon={<CryptoIcon ledgerId="bitcoin" size="32px" />} iconType="rounded">
- *   Bitcoin
- * </TriggerButton>
- *
- * // Without icon
- * <TriggerButton>All accounts</TriggerButton>
- */
-export declare const TriggerButton: ({ ref, className, appearance, size, disabled: disabledProp, asChild, icon, iconType, children, ...props }: TriggerButtonProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TriggerButton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TriggerButton.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/TriggerButton/TriggerButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA4BlD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,aAAa,GAAI,2GAW3B,kBAAkB,4CAmCpB,CAAC"}

package/dist/lib/Components/TriggerButton/index.d.ts

@@ -1,3 +0,0 @@
-export { TriggerButton } from './TriggerButton';
-export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/TriggerButton/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/TriggerButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,cAAc,SAAS,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/TriggerButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,eAAe,CAAC;IACtD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,WAAW,GAAG,SAAS,CAAC,GAC7D,qBAAqB,CAAC,QAAQ,CAAC,CAAC"}