@ledgerhq/lumen-ui-react 0.0.62 → 0.0.63

package/ai-rules/README.md

@@ -75,7 +75,7 @@ import { ArrowRight } from '@ledgerhq/lumen-ui-react';
 
 // ✅ With rules
 import { ArrowRight } from '@ledgerhq/lumen-ui-react/symbols';
-<div className='text-muted heading-2'>Text</div>;
+<div className='text-muted heading-3'>Text</div>;
 ```
 
 ## Auto-Sync Benefits

package/ai-rules/RULES.md

@@ -40,7 +40,7 @@
 - Do not use Tailwind Typography utilities (e.g., `font-bold`, `text-sm`, etc.)
 - Use Lumen custom typography utilities:
   - `responsive-display-1` to `responsive-display-4`
-  - `heading-0`, `heading-0-semi-bold` through `heading-4`, `heading-4-semi-bold`
+  - `heading-0`, `heading-0-semi-bold` through `heading-5`, `heading-5-semi-bold`
   - `body-1`, `body-1-semi-bold` through `body-4`, `body-4-semi-bold`
 
 ### Colors and Background
@@ -154,7 +154,7 @@ import { ArrowRight } from '@ledgerhq/lumen-ui-react/symbols';
 
 const Card = () => (
   <div className='bg-base border border-base rounded-lg p-16'>
-    <h2 className='heading-3'>Card Title</h2>
+    <h2 className='heading-4'>Card Title</h2>
     <p className='body-2 text-muted mt-8'>This is a description using proper spacing and typography tokens.</p>
     <Button icon={ArrowRight} className='mt-16'>
       Learn More
@@ -319,4 +319,4 @@ Use ONLY the unique part after the last hyphen of the CSS variable name.
 - Figma shows: a comment with the style name, like `/* body/3 */`
 - Transform: replace `/` with `-`
 - Result: `body-3` (transform `body/3` → `body-3`)
-- Example: `/* heading/2-semi-bold */` → `heading-2-semi-bold`
+- Example: `/* heading/2-semi-bold */` → `heading-3-semi-bold`

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

@@ -73,7 +73,7 @@ export declare function DialogTrigger({ ...props }: DialogTriggerProps): import(
  * // With custom styling for layout
  * <DialogContent className="max-w-md">
  *   <div className="space-y-4">
- *     <h4 className="heading-4-semi-bold">Dialog Title</h4>
+ *     <h4 className="heading-5-semi-bold">Dialog Title</h4>
  *     <p>Detailed content here.</p>
  *   </div>
  * </DialogContent>

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAEL,kBAAkB,EAIlB,WAAW,EACX,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAwBjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,MAAM,CAAC,EAAE,MAAc,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAM/D;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAE7D;AAuDD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAepB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;+EAiBtB,CAAC;AAGF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY;;;+EAaxB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAEL,kBAAkB,EAIlB,WAAW,EACX,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAwBjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,MAAM,CAAC,EAAE,MAAc,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAM/D;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAE7D;AAuDD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAkBpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;+EAsBtB,CAAC;AAGF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY;;;+EAaxB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/lib/Components/Dialog/Dialog.js

@@ -1,14 +1,12 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import { cn as n } from "../../../libs/utils-shared/dist/index.js";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { createSafeContext as u, cn as l } from "../../../libs/utils-shared/dist/index.js";
 import * as r from "@radix-ui/react-dialog";
-import { cva as m } from "class-variance-authority";
-import * as i from "react";
-const d = i.createContext({
-  height: "hug"
-}), u = m(
+import { cva as h } from "class-variance-authority";
+import * as n from "react";
+const [x, s] = u("Dialog"), p = h(
   [
-    "w-400 bg-canvas-sheet flex max-w-[calc(100%-2rem)] flex-col overflow-hidden rounded-2xl pb-24",
-    "z-dialog-content fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]",
+    "flex w-400 max-w-[calc(100%-2rem)] flex-col overflow-hidden rounded-2xl bg-canvas-sheet pb-24",
+    "fixed left-[50%] top-[50%] z-dialog-content translate-x-[-50%] translate-y-[-50%]",
     "data-[state=closed]:animate-content-hide data-[state=open]:animate-content-show"
   ],
   {
@@ -23,85 +21,95 @@ const d = i.createContext({
     }
   }
 );
-function w({ height: a = "hug", ...t }) {
-  return /* @__PURE__ */ o(d.Provider, { value: { height: a }, children: /* @__PURE__ */ o(r.Root, { "data-slot": "dialog", ...t }) });
+function C({ height: a = "hug", ...t }) {
+  return /* @__PURE__ */ o(x, { value: { height: a }, children: /* @__PURE__ */ o(r.Root, { "data-slot": "dialog", ...t }) });
 }
-function b({ ...a }) {
+function R({ ...a }) {
   return /* @__PURE__ */ o(r.Trigger, { "data-slot": "dialog-trigger", ...a });
 }
-function h({
+function v({
   ...a
 }) {
   return /* @__PURE__ */ o(r.Portal, { "data-slot": "dialog-portal", ...a });
 }
-const s = i.forwardRef(
+const d = n.forwardRef(
   ({ className: a, ...t }, e) => /* @__PURE__ */ o(
     r.Overlay,
     {
       ref: e,
       "data-slot": "dialog-overlay",
-      className: n(
+      className: l(
         a,
-        "z-dialog-overlay bg-canvas-overlay data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in fixed inset-0 backdrop-blur-sm"
+        "fixed inset-0 z-dialog-overlay bg-canvas-overlay backdrop-blur-sm data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in"
       ),
       ...t
     }
   )
 );
-s.displayName = "DialogOverlay";
-function N({
+d.displayName = "DialogOverlay";
+function O({
   className: a,
   children: t,
   ...e
 }) {
-  const { height: l } = i.useContext(d);
-  return /* @__PURE__ */ f(h, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ o(s, {}),
+  const { height: i } = s({
+    consumerName: "DialogContent",
+    contextRequired: !0
+  });
+  return /* @__PURE__ */ m(v, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ o(d, {}),
     /* @__PURE__ */ o(
       r.Content,
       {
         "data-slot": "dialog-content",
-        className: n(u({ height: l }), a),
+        className: l(p({ height: i }), a),
         ...e,
         children: t
       }
     )
   ] });
 }
-const p = i.forwardRef(
-  ({ className: a, children: t, scrollbarWidth: e = "none", style: l, ...g }, c) => /* @__PURE__ */ o(
-    "div",
-    {
-      ref: c,
-      "data-slot": "dialog-body",
-      style: { scrollbarWidth: e, ...l },
-      className: n(
-        "-mb-24 flex min-h-0 grow flex-col overflow-y-auto px-24 pb-24",
-        a
-      ),
-      ...g,
-      children: t
-    }
-  )
+const y = n.forwardRef(
+  ({ className: a, children: t, scrollbarWidth: e = "none", style: i, ...g }, c) => {
+    const { height: f } = s({
+      consumerName: "DialogBody",
+      contextRequired: !0
+    });
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: c,
+        "data-slot": "dialog-body",
+        style: { scrollbarWidth: e, ...i },
+        className: l(
+          "-mb-24 flex min-h-0 grow flex-col overflow-y-auto px-24 pb-24",
+          f === "hug" ? "basis-auto" : "basis-0",
+          a
+        ),
+        ...g,
+        children: t
+      }
+    );
+  }
 );
-p.displayName = "DialogBody";
-const x = i.forwardRef(
-  ({ className: a, children: t, ...e }, l) => /* @__PURE__ */ o(
+y.displayName = "DialogBody";
+const D = n.forwardRef(
+  ({ className: a, children: t, ...e }, i) => /* @__PURE__ */ o(
     "div",
     {
-      ref: l,
+      ref: i,
       "data-slot": "dialog-footer",
-      className: n("flex shrink-0 justify-end gap-8 px-24 pt-24", a),
+      className: l("flex shrink-0 justify-end gap-8 px-24 pt-24", a),
       ...e,
       children: t
     }
   )
 );
-x.displayName = "DialogFooter";
+D.displayName = "DialogFooter";
 export {
-  w as Dialog,
-  p as DialogBody,
-  N as DialogContent,
-  x as DialogFooter,
-  b as DialogTrigger
+  C as Dialog,
+  y as DialogBody,
+  O as DialogContent,
+  D as DialogFooter,
+  R as DialogTrigger
 };

package/dist/lib/Components/Dialog/DialogHeader/DialogHeader.js

@@ -79,7 +79,7 @@ const y = b("flex px-24 text-base", {
                 "pl-40": !i
               }),
               children: [
-                o && /* @__PURE__ */ e("div", { className: "truncate text-center heading-4-semi-bold", children: o }),
+                o && /* @__PURE__ */ e("div", { className: "heading-5-semi-bold truncate text-center", children: o }),
                 l && /* @__PURE__ */ e("div", { className: "truncate text-center text-muted body-2", children: l })
               ]
             }
@@ -92,7 +92,7 @@ const y = b("flex px-24 text-base", {
             /* @__PURE__ */ e("div", { className: "ml-auto", children: /* @__PURE__ */ e(d, { onClose: n }) })
           ] }),
           (o || l) && /* @__PURE__ */ t("div", { className: "flex flex-col gap-4", children: [
-            o && /* @__PURE__ */ e("div", { className: "heading-2-semi-bold", children: o }),
+            o && /* @__PURE__ */ e("div", { className: "heading-3-semi-bold", children: o }),
             l && /* @__PURE__ */ e("div", { className: "text-muted body-2", children: l })
           ] })
         ] })

package/dist/lib/Components/Spot/Spot.js

@@ -20,7 +20,7 @@ const F = h(
         warning: "text-warning",
         info: "text-muted",
         loader: "",
-        number: "text-base heading-4"
+        number: "heading-5 text-base"
       },
       disabled: {
         true: "text-disabled"
@@ -41,10 +41,10 @@ const F = h(
     72: 40
   }, m = {
     32: "body-2-semi-bold",
-    48: "heading-4",
-    56: "heading-3",
-    72: "heading-1"
-  }, t = l[o] ?? 20, n = m[o] ?? "heading-4", p = f(() => {
+    48: "heading-5",
+    56: "heading-4",
+    72: "heading-2"
+  }, t = l[o] ?? 20, n = m[o] ?? "heading-5", p = f(() => {
     switch (r.appearance) {
       case "icon": {
         const { icon: u } = r;

package/dist/lib/Components/Subheader/Subheader.js

@@ -24,7 +24,7 @@ const a = ({ children: e }) => /* @__PURE__ */ i("div", { className: "flex shrin
       ...d,
       children: [
         /* @__PURE__ */ s("div", { className: "flex min-w-0 items-center gap-2", children: [
-          /* @__PURE__ */ i("h2", { className: "min-w-0 truncate heading-4-semi-bold", children: m }),
+          /* @__PURE__ */ i("h2", { className: "heading-5-semi-bold min-w-0 truncate", children: m }),
           u
         ] }),
         S

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

@@ -1 +1 @@
-{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,gBAAgB,EAEhB,oBAAoB,EACpB,SAAS,EACT,wBAAwB,EACxB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AAgEjB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,IAAI;sIAWd,SAAS;;CAqFX,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa;;CAM5C,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,WAAW;wCAIrB,gBAAgB;;CAYlB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,SAAS;wCAInB,cAAc;;CAiBhB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,eAAe;wCAIzB,oBAAoB;;CAiBtB,CAAC;AAGF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,mBAAmB;sEAM7B,wBAAwB;;CAmC1B,CAAC"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Tile/Tile.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,gBAAgB,EAEhB,oBAAoB,EACpB,SAAS,EACT,wBAAwB,EACxB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AAgEjB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,IAAI;sIAWd,SAAS;;CAqFX,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa;;CAM5C,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,WAAW;wCAIrB,gBAAgB;;CASlB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,SAAS;wCAInB,cAAc;;CAiBhB,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,eAAe;wCAIzB,oBAAoB;;CAiBtB,CAAC;AAGF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,mBAAmB;sEAM7B,wBAAwB;;CAmC1B,CAAC"}

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

@@ -73,7 +73,7 @@ const [V, u] = C("Tile"), v = {
   onMouseLeave: r,
   ...x
 }) => {
-  const [g, f] = I(!1), { slotElement: y, remainingChildren: N } = q(
+  const [y, f] = I(!1), { slotElement: N, remainingChildren: g } = q(
     m,
     T
   ), h = n(
@@ -100,7 +100,7 @@ const [V, u] = C("Tile"), v = {
       ...x,
       className: v.root({
         appearance: s,
-        isActive: g,
+        isActive: y,
         disabled: t,
         className: e
       }),
@@ -122,10 +122,10 @@ const [V, u] = C("Tile"), v = {
             disabled: t,
             "data-disabled": t || void 0,
             className: v.button(),
-            children: N
+            children: g
           }
         ),
-        y
+        N
       ]
     }
   ) });
@@ -146,10 +146,7 @@ const P = ({
 }) => /* @__PURE__ */ l(
   "div",
   {
-    className: d(
-      "flex w-full flex-col items-center gap-4 text-center",
-      i
-    ),
+    className: d("flex w-full flex-col items-center text-center", i),
     ...s,
     children: e
   }
@@ -224,7 +221,7 @@ const T = ({
     {
       "data-slot": "tile-secondary-action",
       className: d(
-        "absolute right-12 top-16 opacity-0 transition-opacity duration-200 focus-within:opacity-100 group-hover:opacity-100",
+        "absolute right-4 top-8 opacity-0 transition-opacity duration-200 focus-within:opacity-100 group-hover:opacity-100",
         s
       ),
       "data-secondary-button-container": !0,

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

@@ -93,7 +93,7 @@ export declare const TooltipTrigger: ({ ...props }: TooltipTriggerProps) => impo
  * // With custom styling for layout
  * <TooltipContent sideOffset={12} className="max-w-xs">
  *   <div className="space-y-2">
- *     <h4 className="heading-1">Tip Title</h4>
+ *     <h4 className="heading-2">Tip Title</h4>
  *     <p>Detailed explanation of the feature.</p>
  *   </div>
  * </TooltipContent>

package/dist/package.json

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

package/package.json

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