@ledgerhq/lumen-ui-react 0.0.58 → 0.0.59

package/ai-rules/RULES.md

@@ -211,7 +211,18 @@ import { ChevronRight, Settings } from '@ledgerhq/lumen-ui-react/symbols';
 const InteractiveList = () => (
   <div className='flex flex-col gap-2'>
     {items.map((item) => (
-      <ListItem key={item.id} title={item.title} description={item.subtitle} leadingContent={<Spot appearance='icon' icon={Settings} />} trailingContent={<ChevronRight size={24} />} onClick={() => console.log('Clicked:', item.id)} />
+      <ListItem>
+        <ListItemLeading>
+          <ListItemSpot appearance='icon' icon={Settings} />
+          <ListItemContent>
+            <ListItemTitle>Simple composition</ListItemTitle>
+            <ListItemDescription>With description</ListItemDescription>
+          </ListItemContent>
+        </ListItemLeading>
+        <ListItemTrailing>
+          <ChevronRight />
+        </ListItemTrailing>
+      </ListItem>
     ))}
   </div>
 );

package/dist/index.js

@@ -1,82 +1,90 @@
-import { AddressInput as r } from "./lib/Components/AddressInput/AddressInput.js";
+import { AddressInput as o } from "./lib/Components/AddressInput/AddressInput.js";
 import { AmountInput as n } from "./lib/Components/AmountInput/AmountInput.js";
-import { Banner as m } from "./lib/Components/Banner/Banner.js";
-import { BaseInput as x } from "./lib/Components/BaseInput/BaseInput.js";
+import { Banner as p } from "./lib/Components/Banner/Banner.js";
+import { BaseInput as u } from "./lib/Components/BaseInput/BaseInput.js";
 import { Button as a } from "./lib/Components/Button/Button.js";
 import { BaseButton as l } from "./lib/Components/Button/BaseButton.js";
 import { CardButton as g } from "./lib/Components/CardButton/CardButton.js";
-import { Checkbox as T } from "./lib/Components/Checkbox/Checkbox.js";
-import { Dialog as M, DialogBody as d, DialogContent as b, DialogFooter as B, DialogTrigger as C } from "./lib/Components/Dialog/Dialog.js";
-import { DialogHeader as s } from "./lib/Components/Dialog/DialogHeader/DialogHeader.js";
-import { IconButton as k } from "./lib/Components/IconButton/IconButton.js";
+import { Checkbox as c } from "./lib/Components/Checkbox/Checkbox.js";
+import { Dialog as s, DialogBody as M, DialogContent as L, DialogFooter as d, DialogTrigger as C } from "./lib/Components/Dialog/Dialog.js";
+import { DialogHeader as B } from "./lib/Components/Dialog/DialogHeader/DialogHeader.js";
+import { IconButton as D } from "./lib/Components/IconButton/IconButton.js";
 import { InteractiveIcon as v } from "./lib/Components/InteractiveIcon/InteractiveIcon.js";
 import { Link as P } from "./lib/Components/Link/Link.js";
-import { ListItem as R } from "./lib/Components/ListItem/ListItem.js";
-import { Menu as y, MenuCheckboxItem as F, MenuContent as H, MenuGroup as j, MenuItem as q, MenuLabel as z, MenuPortal as E, MenuRadioGroup as J, MenuRadioItem as K, MenuSeparator as N, MenuSub as O, MenuSubContent as Q, MenuSubTrigger as U, MenuTrigger as V } from "./lib/Components/Menu/Menu.js";
-import { SearchInput as X } from "./lib/Components/SearchInput/SearchInput.js";
-import { Select as Z, SelectContent as _, SelectGroup as $, SelectItem as ee, SelectItemText as oe, SelectLabel as re, SelectSeparator as te, SelectTrigger as ne } from "./lib/Components/Select/Select.js";
-import { Skeleton as me } from "./lib/Components/Skeleton/Skeleton.js";
-import { Spot as xe } from "./lib/Components/Spot/Spot.js";
-import { Subheader as ae } from "./lib/Components/Subheader/Subheader.js";
-import { Switch as le } from "./lib/Components/Switch/Switch.js";
-import { Tag as ge } from "./lib/Components/Tag/Tag.js";
-import { TextInput as Te } from "./lib/Components/TextInput/TextInput.js";
-import { Tile as Me } from "./lib/Components/Tile/Tile.js";
-import { Tooltip as be, TooltipContent as Be, TooltipProvider as Ce, TooltipTrigger as he } from "./lib/Components/Tooltip/Tooltip.js";
-import { ThemeProvider as De, useTheme as ke } from "./lib/Components/ThemeProvider/ThemeProvider.js";
+import { ListItem as R, ListItemContent as w, ListItemDescription as y, ListItemIcon as F, ListItemLeading as H, ListItemSpot as j, ListItemTitle as q, ListItemTrailing as z, ListItemTruncate as E } from "./lib/Components/ListItem/ListItem.js";
+import { Menu as K, MenuCheckboxItem as N, MenuContent as O, MenuGroup as Q, MenuItem as U, MenuLabel as V, MenuPortal as W, MenuRadioGroup as X, MenuRadioItem as Y, MenuSeparator as Z, MenuSub as _, MenuSubContent as $, MenuSubTrigger as ee, MenuTrigger as te } from "./lib/Components/Menu/Menu.js";
+import { SearchInput as re } from "./lib/Components/SearchInput/SearchInput.js";
+import { Select as me, SelectContent as pe, SelectGroup as ie, SelectItem as ue, SelectItemText as xe, SelectLabel as ae, SelectSeparator as fe, SelectTrigger as le } from "./lib/Components/Select/Select.js";
+import { Skeleton as ge } from "./lib/Components/Skeleton/Skeleton.js";
+import { Spot as ce } from "./lib/Components/Spot/Spot.js";
+import { Subheader as se } from "./lib/Components/Subheader/Subheader.js";
+import { Switch as Le } from "./lib/Components/Switch/Switch.js";
+import { Tag as Ce } from "./lib/Components/Tag/Tag.js";
+import { TextInput as Be } from "./lib/Components/TextInput/TextInput.js";
+import { Tile as De } from "./lib/Components/Tile/Tile.js";
+import { Tooltip as ve, TooltipContent as Ge, TooltipProvider as Pe, TooltipTrigger as Ae } from "./lib/Components/Tooltip/Tooltip.js";
+import { ThemeProvider as we, useTheme as ye } from "./lib/Components/ThemeProvider/ThemeProvider.js";
 export {
-  r as AddressInput,
+  o as AddressInput,
   n as AmountInput,
-  m as Banner,
+  p as Banner,
   l as BaseButton,
-  x as BaseInput,
+  u as BaseInput,
   a as Button,
   g as CardButton,
-  T as Checkbox,
-  M as Dialog,
-  d as DialogBody,
-  b as DialogContent,
-  B as DialogFooter,
-  s as DialogHeader,
+  c as Checkbox,
+  s as Dialog,
+  M as DialogBody,
+  L as DialogContent,
+  d as DialogFooter,
+  B as DialogHeader,
   C as DialogTrigger,
-  k as IconButton,
+  D as IconButton,
   v as InteractiveIcon,
   P as Link,
   R as ListItem,
-  y as Menu,
-  F as MenuCheckboxItem,
-  H as MenuContent,
-  j as MenuGroup,
-  q as MenuItem,
-  z as MenuLabel,
-  E as MenuPortal,
-  J as MenuRadioGroup,
-  K as MenuRadioItem,
-  N as MenuSeparator,
-  O as MenuSub,
-  Q as MenuSubContent,
-  U as MenuSubTrigger,
-  V as MenuTrigger,
-  X as SearchInput,
-  Z as Select,
-  _ as SelectContent,
-  $ as SelectGroup,
-  ee as SelectItem,
-  oe as SelectItemText,
-  re as SelectLabel,
-  te as SelectSeparator,
-  ne as SelectTrigger,
-  me as Skeleton,
-  xe as Spot,
-  ae as Subheader,
-  le as Switch,
-  ge as Tag,
-  Te as TextInput,
-  De as ThemeProvider,
-  Me as Tile,
-  be as Tooltip,
-  Be as TooltipContent,
-  Ce as TooltipProvider,
-  he as TooltipTrigger,
-  ke as useTheme
+  w as ListItemContent,
+  y as ListItemDescription,
+  F as ListItemIcon,
+  H as ListItemLeading,
+  j as ListItemSpot,
+  q as ListItemTitle,
+  z as ListItemTrailing,
+  E as ListItemTruncate,
+  K as Menu,
+  N as MenuCheckboxItem,
+  O as MenuContent,
+  Q as MenuGroup,
+  U as MenuItem,
+  V as MenuLabel,
+  W as MenuPortal,
+  X as MenuRadioGroup,
+  Y as MenuRadioItem,
+  Z as MenuSeparator,
+  _ as MenuSub,
+  $ as MenuSubContent,
+  ee as MenuSubTrigger,
+  te as MenuTrigger,
+  re as SearchInput,
+  me as Select,
+  pe as SelectContent,
+  ie as SelectGroup,
+  ue as SelectItem,
+  xe as SelectItemText,
+  ae as SelectLabel,
+  fe as SelectSeparator,
+  le as SelectTrigger,
+  ge as Skeleton,
+  ce as Spot,
+  se as Subheader,
+  Le as Switch,
+  Ce as Tag,
+  Be as TextInput,
+  we as ThemeProvider,
+  De as Tile,
+  ve as Tooltip,
+  Ge as TooltipContent,
+  Pe as TooltipProvider,
+  Ae as TooltipTrigger,
+  ye as useTheme
 };

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

@@ -3,7 +3,7 @@ import { cn as n } from "../../../libs/utils-shared/dist/index.js";
 import * as r from "@radix-ui/react-dialog";
 import { cva as c } from "class-variance-authority";
 import * as i from "react";
-const d = i.createContext({
+const s = i.createContext({
   height: "hug"
 }), f = c(
   [
@@ -24,7 +24,7 @@ const d = i.createContext({
   }
 );
 function y({ height: a = "hug", ...t }) {
-  return /* @__PURE__ */ o(d.Provider, { value: { height: a }, children: /* @__PURE__ */ o(r.Root, { "data-slot": "dialog", ...t }) });
+  return /* @__PURE__ */ o(s.Provider, { value: { height: a }, children: /* @__PURE__ */ o(r.Root, { "data-slot": "dialog", ...t }) });
 }
 function D({ ...a }) {
   return /* @__PURE__ */ o(r.Trigger, { "data-slot": "dialog-trigger", ...a });
@@ -34,7 +34,7 @@ function m({
 }) {
   return /* @__PURE__ */ o(r.Portal, { "data-slot": "dialog-portal", ...a });
 }
-const s = i.forwardRef(
+const d = i.forwardRef(
   ({ className: a, ...t }, e) => /* @__PURE__ */ o(
     r.Overlay,
     {
@@ -48,15 +48,15 @@ const s = i.forwardRef(
     }
   )
 );
-s.displayName = "DialogOverlay";
-function w({
+d.displayName = "DialogOverlay";
+function b({
   className: a,
   children: t,
   ...e
 }) {
-  const { height: l } = i.useContext(d);
+  const { height: l } = i.useContext(s);
   return /* @__PURE__ */ g(m, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ o(s, {}),
+    /* @__PURE__ */ o(d, {}),
     /* @__PURE__ */ o(
       r.Content,
       {
@@ -75,7 +75,7 @@ const u = i.forwardRef(
       ref: l,
       "data-slot": "dialog-body",
       className: n(
-        "-mb-24 flex min-h-0 grow flex-col overflow-y-auto px-24 pb-24",
+        "-mb-24 flex min-h-0 grow basis-0 flex-col overflow-y-auto px-24 pb-24",
         a
       ),
       ...e,
@@ -100,7 +100,7 @@ h.displayName = "DialogFooter";
 export {
   y as Dialog,
   u as DialogBody,
-  w as DialogContent,
+  b as DialogContent,
   h as DialogFooter,
   D as DialogTrigger
 };

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

@@ -1,48 +1,88 @@
 import { default as React } from 'react';
+import { ListItemSpotProps, ListItemTruncateProps } from './types';
 /**
- * A flexible list item component that displays a required title and optional description (with possible tag), leading and trailing content.
- * It functions as a clickable button with hover and active states.
+ * A flexible list item component that provides a composable structure for displaying
+ * interactive list items with leading content, title, description, and trailing content.
  *
  * @see {@link https://ldls.vercel.app/?path=/docs/containment-listitem--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/containment-listitem--docs#dos-and-donts Guidelines}
  *
- * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
- * Do not use it to modify the list item's core appearance (colors, padding, etc).
- *
  * @example
- * // Basic item
- * import { ListItem } from '@ledgerhq/lumen-ui-react';
- *
- * <ListItem
- *   title="Basic Item"
- *   description="Optional description"
- *   onClick={() => console.log('Clicked!')}
- * />
- *
- * // Icon trailing content with leading Spot
- * import { ListItem, Spot } from '@ledgerhq/lumen-ui-react';
- * import { Wallet, Settings } from '@ledgerhq/lumen-ui-react/symbols';
- *
- * <ListItem
- *   title="Balance"
- *   leadingContent={<Spot appearance="icon" icon={Wallet} />}
- *   trailingContent={<Settings />}
- * />
- *
- * // Chevron trailing content
- * import { ListItem } from '@ledgerhq/lumen-ui-react';
- * import { ChevronRight } from '@ledgerhq/lumen-ui-react/symbols';
  *
- * <ListItem
- *   title="Settings"
- *   trailingContent={<ChevronRight size={24} />}
- * />
+ * <ListItem onClick={() => console.log('Clicked!')}>
+ *   <ListItemLeading>
+ *     <ListItemSpot appearance="icon" icon={Wallet} />
+ *     <ListItemContent>
+ *       <ListItemTitle>Balance</ListItemTitle>
+ *       <ListItemDescription>Optional description</ListItemDescription>
+ *     </ListItemContent>
+ *   </ListItemLeading>
+ *   <ListItemTrailing>
+ *     <ChevronRight size={24} />
+ *   </ListItemTrailing>
+ * </ListItem>
  */
 export declare const ListItem: React.ForwardRefExoticComponent<{
-    title: string;
-    description?: string;
-    leadingContent?: React.ReactNode;
-    descriptionTag?: React.ReactElement<typeof import('..').Tag>;
-    trailingContent?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onClick?: React.ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Container for the leading (left) part of the list item.
+ * Contains the visual element (ListItemSpot, Avatar, Icon) and the content (title + description).
+ */
+export declare const ListItemLeading: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Container for the text content (title and description) within the leading area.
+ */
+export declare const ListItemContent: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The main title of the list item.
+ */
+export declare const ListItemTitle: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Optional description text below the title. Can include inline elements like Tag.
+ * Automatically applies disabled styling when the parent ListItem is disabled.
+ */
+export declare const ListItemDescription: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Container for the trailing (right) content of the list item.
+ * Used for icons, switches, values, tags, chevrons, etc.
+ */
+export declare const ListItemTrailing: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Spot adapter for ListItem. Automatically inherits disabled state from parent ListItem.
+ */
+export declare const ListItemSpot: {
+    (props: ListItemSpotProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Icon adapter for ListItem. Automatically applies disabled styling from parent ListItem.
+ * Fixed at size 24 for consistent list item appearance.
+ */
+export declare const ListItemIcon: React.ForwardRefExoticComponent<{
+    icon: React.ComponentType<any>;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ListItemTruncate: {
+    ({ children, className, }: ListItemTruncateProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=ListItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ListItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,QAAQ;;;;;;6GAmDpB,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ListItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAOL,iBAAiB,EAGjB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAUjB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ;;;;;6GAuBpB,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,eAAe;;;+EAY1B,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,eAAe;;;+EAY1B,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,aAAa;;;+EAqBxB,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;+EA0B9B,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;+EAuB3B,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,YAAY;YAAW,iBAAiB;;CAOpD,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,YAAY;;;+EAiBxB,CAAC;AAIF,eAAO,MAAM,gBAAgB;+BAG1B,qBAAqB;;CAEvB,CAAC"}

package/dist/lib/Components/ListItem/ListItem.js

@@ -1,56 +1,149 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { cn as r } from "../../../libs/utils-shared/dist/index.js";
-import b from "react";
-const f = b.forwardRef(
-  (s, l) => {
-    const {
-      title: n,
-      description: a,
-      leadingContent: d,
-      descriptionTag: i,
-      trailingContent: c,
-      className: o,
-      ...m
-    } = s;
-    return /* @__PURE__ */ e(
+import { jsx as i } from "react/jsx-runtime";
+import { createSafeContext as d, cn as a } from "../../../libs/utils-shared/dist/index.js";
+import n from "react";
+import { Spot as u } from "../Spot/Spot.js";
+const [f, m] = d("ListItem", {}), [I, l] = d("ListItemTrailing", {
+  isInTrailing: !1
+}), p = n.forwardRef(
+  (e, t) => {
+    const { children: s, className: r, disabled: o, ...c } = e;
+    return /* @__PURE__ */ i(f, { value: { disabled: o }, children: /* @__PURE__ */ i(
       "button",
       {
-        ref: l,
+        ref: t,
         type: "button",
-        className: r(
-          "flex h-64 w-full cursor-pointer items-center gap-16 rounded-md bg-base-transparent px-8 py-12 text-base transition-colors",
-          "hover:bg-base-transparent-hover focus-visible:outline-2 focus-visible:outline-focus active:bg-base-transparent-pressed",
-          "disabled:cursor-default disabled:bg-base-transparent disabled:text-disabled",
-          o
+        disabled: o,
+        className: a(
+          "bg-base-transparent flex h-64 w-full cursor-pointer items-center gap-16 rounded-md px-8 py-12 text-base transition-colors",
+          "hover:bg-base-transparent-hover focus-visible:outline-focus active:bg-base-transparent-pressed focus-visible:outline-2",
+          "disabled:bg-base-transparent disabled:text-disabled disabled:cursor-default",
+          r
         ),
-        ...m,
-        children: [
-          /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 items-center gap-12", children: [
-            d,
-            /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 flex-col gap-4 text-left", children: [
-              /* @__PURE__ */ t("div", { className: "truncate body-2-semi-bold", children: n }),
-              a && /* @__PURE__ */ e("div", { className: "flex items-center gap-4", children: [
-                /* @__PURE__ */ t(
-                  "div",
-                  {
-                    className: r(
-                      "truncate text-muted body-3",
-                      s.disabled && "text-disabled"
-                    ),
-                    children: a
-                  }
-                ),
-                i && /* @__PURE__ */ t("div", { className: "flex h-16 shrink-0 items-center", children: i })
-              ] })
-            ] })
-          ] }),
-          c
-        ]
+        ...c,
+        children: s
+      }
+    ) });
+  }
+);
+p.displayName = "ListItem";
+const L = n.forwardRef(({ children: e, className: t }, s) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: s,
+    className: a("flex min-w-0 flex-1 items-center gap-12", t),
+    children: e
+  }
+));
+L.displayName = "ListItemLeading";
+const b = n.forwardRef(({ children: e, className: t }, s) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: s,
+    className: a("flex min-w-0 flex-1 flex-col gap-4", t),
+    children: e
+  }
+));
+b.displayName = "ListItemContent";
+const x = n.forwardRef(({ children: e, className: t }, s) => {
+  const { isInTrailing: r } = l({
+    consumerName: "ListItemTitle",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: s,
+      className: a(
+        "body-2-semi-bold w-full truncate",
+        r ? "justify-end text-end" : "justify-start text-start",
+        t
+      ),
+      children: e
+    }
+  );
+});
+x.displayName = "ListItemTitle";
+const N = n.forwardRef(({ children: e, className: t }, s) => {
+  const { disabled: r } = m({
+    consumerName: "ListItemDescription",
+    contextRequired: !0
+  }), { isInTrailing: o } = l({
+    consumerName: "ListItemDescription",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: s,
+      className: a(
+        "text-muted body-3 w-full items-center truncate",
+        o ? "justify-end text-end" : "justify-start text-start",
+        r && "text-disabled",
+        t
+      ),
+      children: e
+    }
+  );
+});
+N.displayName = "ListItemDescription";
+const g = n.forwardRef(({ children: e, className: t }, s) => {
+  const { disabled: r } = m({
+    consumerName: "ListItemTrailing",
+    contextRequired: !0
+  });
+  return /* @__PURE__ */ i(I, { value: { isInTrailing: !0 }, children: /* @__PURE__ */ i(
+    "div",
+    {
+      ref: s,
+      className: a(
+        "flex shrink-0 items-center",
+        r && "text-disabled",
+        t
+      ),
+      children: e
+    }
+  ) });
+});
+g.displayName = "ListItemTrailing";
+const y = (e) => {
+  const { disabled: t } = m({
+    consumerName: "ListItemSpot",
+    contextRequired: !0
+  });
+  return /* @__PURE__ */ i(u, { ...e, size: 48, disabled: t });
+};
+y.displayName = "ListItemSpot";
+const v = n.forwardRef(
+  ({ icon: e, className: t, ...s }, r) => {
+    const { disabled: o } = m({
+      consumerName: "ListItemIcon",
+      contextRequired: !0
+    });
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ref: r,
+        className: a("shrink-0", o && "text-disabled", t),
+        ...s,
+        children: /* @__PURE__ */ i(e, { size: 24 })
       }
     );
   }
 );
-f.displayName = "ListItem";
+v.displayName = "ListItemIcon";
+const T = ({
+  children: e,
+  className: t
+}) => /* @__PURE__ */ i("div", { className: a("min-w-0 truncate", t), children: e });
+T.displayName = "ListItemTruncate";
 export {
-  f as ListItem
+  p as ListItem,
+  b as ListItemContent,
+  N as ListItemDescription,
+  v as ListItemIcon,
+  L as ListItemLeading,
+  y as ListItemSpot,
+  x as ListItemTitle,
+  g as ListItemTrailing,
+  T as ListItemTruncate
 };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ListItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

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

@@ -1,27 +1,126 @@
-import { Tag } from '../Tag';
+import { HTMLAttributes } from 'react';
+import { DiscriminatedSpotProps } from '../Spot';
+/**
+ * Context value for passing state to sub-components
+ */
+export type ListItemContextValue = {
+    disabled?: boolean;
+};
+/**
+ * Props for the ListItem root component
+ */
 export type ListItemProps = {
     /**
-     * The main title of the list item.
+     * The content of the list item (ListItemLeading, ListItemTrailing)
      */
-    title: string;
+    children: React.ReactNode;
     /**
-     * Optional descriptive text below the title.
+     * custom classname
      */
-    description?: string;
+    className?: string;
     /**
-     * Optional content to display on the left, usually a Spot component.
-     * @example leadingContent={<Spot appearance="icon" icon={Settings} />}
+     * Whether the list item is disabled.
      */
-    leadingContent?: React.ReactNode;
+    disabled?: boolean;
     /**
-     * Optional Tag component displayed next to the description.
-     * @example descriptionTag={<Tag label="New" appearance="accent" size="sm" />}
+     * Callback function when the list item is pressed.
      */
-    descriptionTag?: React.ReactElement<typeof Tag>;
+    onClick?: React.ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
+/**
+ * Props for the ListItemLeading component
+ */
+export type ListItemLeadingProps = {
     /**
-     * Custom content to render on the right side of the list item.
-     * @example trailingContent={<Icon />}
+     * The content of the leading area (visual element + ListItemContent)
      */
-    trailingContent?: React.ReactNode;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
+    children: React.ReactNode;
+    /**
+     * custom classname
+     */
+    className?: string;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Props for the ListItemContent component
+ */
+export type ListItemContentProps = {
+    /**
+     * The content (ListItemTitle, ListItemDescription)
+     */
+    children: React.ReactNode;
+    /**
+     * custom classname
+     */
+    className?: string;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Props for the ListItemTitle component
+ */
+export type ListItemTitleProps = {
+    /**
+     * The title text or custom content
+     */
+    children: React.ReactNode;
+    /**
+     * custom classname
+     */
+    className?: string;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Props for the ListItemDescription component
+ */
+export type ListItemDescriptionProps = {
+    /**
+     * The description text or custom content
+     */
+    children: React.ReactNode;
+    /**
+     * custom classname
+     */
+    className?: string;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Props for the ListItemTrailing component
+ */
+export type ListItemTrailingProps = {
+    /**
+     * The trailing content (icons, switches, values, etc.)
+     */
+    children: React.ReactNode;
+    /**
+     * custom classname
+     */
+    className?: string;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Props for ListItemSpot when appearance is 'icon'
+ */
+export type ListItemSpotProps = DiscriminatedSpotProps & HTMLAttributes<HTMLDivElement>;
+/**
+ * Props for the ListItemTruncate component
+ * Used to truncate text that should when ListItemDescription or ListItemTitle contain custom content
+ */
+export type ListItemTruncateProps = {
+    /**
+     * The content to truncate
+     */
+    children: React.ReactNode;
+    /**
+     * custom classname
+     */
+    className?: string;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Props for the ListItemIcon component
+ */
+export type ListItemIconProps = {
+    /**
+     * The icon component to render
+     */
+    icon: React.ComponentType<any>;
+    /**
+     * custom classname
+     */
+    className?: string;
+} & HTMLAttributes<HTMLDivElement>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ListItem/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ListItem/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,SAAS,CAAC,CAAC;CACpE,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,sBAAsB,GACpD,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC"}

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

@@ -1,29 +1,32 @@
 import { HTMLAttributes } from 'react';
 import { IconSize } from '../Icon/types';
 export type SpotAppearance = 'icon' | 'bluetooth' | 'check' | 'error' | 'warning' | 'info' | 'loader' | 'number';
-/**
- * A discriminated union that enforces type-safe props based on the `appearance`.
- */
-type DiscriminatedSpotProps = {
+type SpotIconProps = {
     /**
      * Custom icon appearance with neutral base styling.
      * @example <Spot appearance="icon" icon={SettingsIcon} />
      */
     appearance: 'icon';
-    /** Icon component to render. Required when appearance is 'icon'. */
+    /**
+     * Icon component to render. Required when appearance is 'icon'.
+     */
     icon: React.ComponentType<{
         size?: IconSize;
         className?: string;
     }>;
-} | {
+};
+type SpotNumberProps = {
     /**
      * Number appearance for displaying a single digit (0-9).
      * @example <Spot appearance="number" number={5} />
      */
     appearance: 'number';
-    /** Digit (0-9) to display. Required when appearance is 'number'. */
+    /**
+     * Digit (0-9) to display. Required when appearance is 'number'.
+     */
     number: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
-} | {
+};
+type SpotStatusProps = {
     /**
      * Predefined status indicators with semantic styling.
      * Options: 'bluetooth' | 'check' | 'error' | 'warning' | 'info' | 'loader'
@@ -31,8 +34,12 @@ type DiscriminatedSpotProps = {
      */
     appearance: Exclude<SpotAppearance, 'icon' | 'number'>;
 };
+/**
+ * A discriminated union that enforces type-safe props based on the `appearance`.
+ */
+export type DiscriminatedSpotProps = SpotIconProps | SpotNumberProps | SpotStatusProps;
 export type SpotSize = 32 | 48 | 56 | 72;
-export type SpotProps = DiscriminatedSpotProps & HTMLAttributes<HTMLDivElement> & {
+export type SpotProps = DiscriminatedSpotProps & {
     /**
      * Whether the spot is disabled.
      * @default false
@@ -43,6 +50,6 @@ export type SpotProps = DiscriminatedSpotProps & HTMLAttributes<HTMLDivElement>
      * @default 48
      */
     size?: SpotSize;
-};
+} & HTMLAttributes<HTMLDivElement>;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Spot/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb;;GAEG;AACH,KAAK,sBAAsB,GACvB;IACE;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpE,GACD;IACE;;;OAGG;IACH,UAAU,EAAE,QAAQ,CAAC;IACrB,oEAAoE;IACpE,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/C,GACD;IACE;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxD,CAAC;AAEN,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,sBAAsB,GAC5C,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Spot/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,KAAK,aAAa,GAAG;IACnB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpE,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;;OAGG;IACH,UAAU,EAAE,QAAQ,CAAC;IACrB;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/C,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxD,CAAC;AACF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC9B,aAAa,GACb,eAAe,GACf,eAAe,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,sBAAsB,GAAG;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC"}

package/dist/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -41,7 +41,7 @@
     ]
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.12",
+    "@ledgerhq/lumen-utils-shared": "0.0.13",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },