@ledgerhq/lumen-ui-react 0.1.50 → 0.1.51

package/README.md

@@ -33,13 +33,23 @@ import type { Config } from 'tailwindcss';
 import { ledgerLivePreset } from '@ledgerhq/lumen-design-core';
 
 const config = {
-  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@ledgerhq/lumen-ui-react/dist/lib/**/*.{js,ts,jsx,tsx}'],
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
   presets: [ledgerLivePreset],
 } satisfies Config;
 
 export default config;
 ```
 
+Then import Lumen's stylesheet next to Tailwind in your main CSS file. It
+registers our compiled components as a Tailwind source, so you never have to
+reference our build layout yourself:
+
+```css
+@import 'tailwindcss';
+@import '@ledgerhq/lumen-ui-react/tailwind.css';
+@config '../tailwind.config.ts';
+```
+
 ### 2. Start Using Components
 
 ```tsx

package/ai-rules/RULES.md

@@ -22,7 +22,13 @@ Lumen typography classes set `font-family: Inter` via design tokens. The consume
 
 ### Tailwind Configuration (REQUIRED)
 
-- Tailwind config MUST include Lumen in content array: `'./node_modules/@ledgerhq/lumen-ui-react/dist/lib/**/*.{js,ts,jsx,tsx}'`
+- Check the installed Tailwind major version first — the two paths differ:
+- **Tailwind v4 (recommended):** the main stylesheet MUST import Lumen's
+  stylesheet so Tailwind scans the compiled components:
+  `@import '@ledgerhq/lumen-ui-react/tailwind.css';` (add
+  `@import '@ledgerhq/lumen-ui-react-visualization/tailwind.css';` when using
+  charts). Do NOT also add `./node_modules/@ledgerhq/lumen-ui-react/dist/**` to
+  the `content` array — that path is internal and may change in any release.
 - Always use a preset from `@ledgerhq/lumen-design-core`: ledgerLivePreset, enterprisePreset or websitesPreset
 - Import presets: `import { ledgerLivePreset } from '@ledgerhq/lumen-design-core'`
 

package/dist/lib/Components/Avatar/resolveAvatarColor.js

@@ -1,18 +1,18 @@
 import { resolveAvatarColorKey as o } from "../../../libs/utils-shared/dist/index.js";
-import { cssVar as a } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
-const e = {
-  orange: a("var(--background-avatar-orange)"),
-  green: a("var(--background-avatar-green)"),
-  blue: a("var(--background-avatar-blue)"),
-  purple: a("var(--background-avatar-purple)"),
-  red: a("var(--background-avatar-red)"),
-  yellow: a("var(--background-avatar-yellow)"),
-  turquoise: a("var(--background-avatar-turquoise)"),
-  pink: a("var(--background-avatar-pink)")
+import { cssVar as r } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
+const a = {
+  orange: r("var(--background-decorative-orange)"),
+  green: r("var(--background-decorative-green)"),
+  blue: r("var(--background-decorative-blue)"),
+  purple: r("var(--background-decorative-purple)"),
+  red: r("var(--background-decorative-red)"),
+  yellow: r("var(--background-decorative-yellow)"),
+  turquoise: r("var(--background-decorative-turquoise)"),
+  pink: r("var(--background-decorative-pink)")
 };
-function n(r) {
-  return e[o(r)];
+function t(e) {
+  return a[o(e)];
 }
 export {
-  n as resolveAvatarColor
+  t as resolveAvatarColor
 };

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -17,6 +17,7 @@
   "types": "./dist/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
+    "./tailwind.css": "./tailwind.css",
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
@@ -32,6 +33,7 @@
   "files": [
     "dist",
     "ai-rules",
+    "tailwind.css",
     "!**/*.tsbuildinfo"
   ],
   "nx": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -17,6 +17,7 @@
   "types": "./dist/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
+    "./tailwind.css": "./tailwind.css",
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
@@ -32,6 +33,7 @@
   "files": [
     "dist",
     "ai-rules",
+    "tailwind.css",
     "!**/*.tsbuildinfo"
   ],
   "nx": {
@@ -54,7 +56,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.23",
+    "@ledgerhq/lumen-design-core": "0.1.24",
     "clsx": "^2.1.1",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",

package/tailwind.css

@@ -0,0 +1,16 @@
+/*
+ * Registers Lumen's compiled components as a Tailwind source.
+ *
+ * Tailwind only emits a utility it has actually seen in a scanned file, and it
+ * skips gitignored paths (node_modules) during automatic detection. Consumers
+ * therefore used to copy a `./node_modules/@ledgerhq/lumen-ui-react/dist/lib/**`
+ * glob into their own config, which turned our build layout into a de-facto
+ * public API: renaming a folder here silently dropped utilities from their CSS,
+ * with no build error.
+ *
+ * `@source` paths resolve relative to the stylesheet that declares them, so the
+ * glob lives next to the layout it describes. Consumers only ever hold the
+ * stable `@ledgerhq/lumen-ui-react/tailwind.css` specifier — restructuring
+ * `dist` becomes a one-line change here instead of a breaking change for them.
+ */
+@source "./dist/lib";