@ledgerhq/lumen-ui-rnative 0.0.46 → 0.0.47

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -32,8 +32,12 @@
     "react-i18next": "^14.0.0"
   },
   "peerDependencies": {
+    "@gorhom/bottom-sheet": "^5.0.0",
+    "@ledgerhq/lumen-design-core": "*",
     "react": "~18.3.1",
     "react-native": "~0.77.3",
+    "react-native-reanimated": "^3.0.0",
+    "react-native-safe-area-context": "^4.0.0 || ^5.0.0",
     "react-native-svg": "^15.0.0"
   },
   "nx": {

package/dist/src/lib/Components/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAmC9C,eAAO,MAAM,IAAI;;;;;;uBAHsB,8DAGxB;+HAoBd,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiC9C,eAAO,MAAM,IAAI;;;;;;uBACM,8DAAoC;+HAmB1D,CAAC"}

package/dist/src/lib/Components/Icon/Icon.js

@@ -13,8 +13,7 @@ const iconSizeMap = {
 };
 const useStyles = (lx, size, color) => {
     const { theme } = useTheme();
-    const resolvedStyle = useResolveTextStyle(lx || {});
-    const resolvedColor = useResolveTextStyle({ color });
+    const resolvedStyle = useResolveTextStyle({ ...(lx || {}), color });
     return useMemo(() => {
         return {
             container: {
@@ -23,9 +22,9 @@ const useStyles = (lx, size, color) => {
                 height: theme.icon.height[iconSizeMap[size]],
                 strokeWidth: theme.icon.borderWidth[iconSizeMap[size]],
             },
-            color: resolvedColor.color || resolvedStyle.color || theme.colors.text.base,
+            color: resolvedStyle.color || theme.colors.text.base,
         };
-    }, [size, theme, resolvedStyle, resolvedColor.color]);
+    }, [size, theme, resolvedStyle]);
 };
 export const Icon = forwardRef(({ size = 24, color, lx = {}, children, viewBox, ...props }, ref) => {
     const styles = useStyles(lx, size, color);

package/dist/src/lib/Components/Icon/createIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/createIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGjD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;GAKG;AACH,QAAA,MAAM,UAAU,GACd,UAAU,MAAM,EAChB,SAAS,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,4FAetC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/createIcon.ts"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;GAKG;AACH,QAAA,MAAM,UAAU,GACd,UAAU,MAAM,EAChB,SAAS,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,4FAetC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/src/lib/Components/Icon/createIcon.js

@@ -1,5 +1,5 @@
+import { toPascalCase } from '@ledgerhq/lumen-utils-shared';
 import React, { forwardRef } from 'react';
-import { toPascalCase } from '../../utils';
 import { Icon } from './Icon';
 /**
  * Create an Icon component for React Native

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
+import { ListItemIconProps, ListItemSpotProps } 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/react-native_containment-listitem--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs#dos-and-donts Guidelines}
@@ -11,40 +12,93 @@ import { View } from 'react-native';
  * Do not use it to modify the list item's core appearance (colors, padding, etc).
  *
  * @example
- * // Basic item
- * import { ListItem } from '@ledgerhq/lumen-ui-rnative';
+ * import {
+ *   ListItem,
+ *   ListItemLeading,
+ *   ListItemSpot,
+ *   ListItemContent,
+ *   ListItemTitle,
+ *   ListItemDescription,
+ *   ListItemTrailing,
+ * } from '@ledgerhq/lumen-ui-rnative';
+ * import { Wallet, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
- * <ListItem
- *   title="Basic Item"
- *   description="Optional description"
- *   onPress={() => console.log('Clicked!')}
- * />
- *
- * // Icon trailing content with leading Spot
- * import { ListItem, Spot } from '@ledgerhq/lumen-ui-rnative';
- * import { Wallet, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
- *
- * <ListItem
- *   title="Balance"
- *   leadingContent={<Spot appearance="icon" icon={Wallet} />}
- *   trailingContent={<Settings />}
- * />
- *
- * // Chevron trailing content
- * import { ListItem } from '@ledgerhq/lumen-ui-rnative';
- * import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
- *
- * <ListItem
- *   title="Settings"
- *   trailingContent={<ChevronRight size={24} />}
- * />
+ * <ListItem onPress={() => 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.ReactNode;
-    trailingContent?: React.ReactNode;
+    children: React.ReactNode;
     disabled?: boolean;
-} & Omit<import("../../../styles").StyledPressableProps, "disabled"> & React.RefAttributes<View>>;
+    onPress?: import("../../../styles").StyledPressableProps["onPress"];
+} & Omit<import("../../../styles").StyledPressableProps, "children" | "disabled"> & React.RefAttributes<View>>;
+/**
+ * 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;
+} & Omit<import("../../../styles").StyledViewProps, "children"> & React.RefAttributes<View>>;
+/**
+ * Container for the text content (title and description) within the leading area.
+ */
+export declare const ListItemContent: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & Omit<import("../../../styles").StyledViewProps, "children"> & React.RefAttributes<View>>;
+/**
+ * The main title of the list item. Can contain text directly or
+ * ListItemTruncate + Tag for more complex layouts.
+ */
+export declare const ListItemTitle: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & Omit<import("../../../styles").StyledTextProps, "children"> & React.RefAttributes<View>>;
+/**
+ * Optional description below the title. Can contain text directly or
+ * ListItemTruncate + Tag for more complex layouts.
+ * Automatically applies disabled styling when the parent ListItem is disabled.
+ */
+export declare const ListItemDescription: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & Omit<import("../../../styles").StyledTextProps, "children"> & React.RefAttributes<View>>;
+/**
+ * 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;
+} & Omit<import("../../../styles").StyledViewProps, "children"> & React.RefAttributes<View>>;
+/**
+ * Spot adapter for ListItem. Automatically inherits disabled state from parent ListItem.
+ * Fixed at size 48 for consistent list item appearance.
+ */
+export declare const ListItemSpot: {
+    (props: ListItemSpotProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Icon adapter for ListItem. Automatically inherits disabled state from parent ListItem.
+ * Fixed at size 24 for consistent list item appearance.
+ */
+export declare const ListItemIcon: {
+    ({ icon: Icon, color, lx, style, ...viewProps }: ListItemIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Text wrapper that truncates when space is limited.
+ * Use inside ListItemTitle or ListItemDescription when combining text with a Tag.
+ * Set variant='title' for title styling or variant='description' (default) for description styling.
+ */
+export declare const ListItemTruncate: React.ForwardRefExoticComponent<{
+    children: string;
+    variant?: "title" | "description";
+} & Omit<import("../../../styles").StyledTextProps, "children"> & React.RefAttributes<import("react-native").Text>>;
 //# sourceMappingURL=ListItem.d.ts.map

package/dist/src/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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAC;AAsFtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,QAAQ;;;;;;;iGA0CpB,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,EAIL,iBAAiB,EAGjB,iBAAiB,EAIlB,MAAM,SAAS,CAAC;AAkCjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,QAAQ;;;;8GAqBnB,CAAC;AAsBH;;;GAGG;AACH,eAAO,MAAM,eAAe;;4FA0B3B,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,eAAe;;4FAyB3B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,aAAa;;4FAiEzB,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;4FAkE9B,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;4FA0B5B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,YAAY;YAAW,iBAAiB;;CAOpD,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,YAAY;qDAMtB,iBAAiB;;CAqBnB,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;mHA8C5B,CAAC"}

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

@@ -1,122 +1,267 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createSafeContext, isTextChildren, } from '@ledgerhq/lumen-utils-shared';
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { useStyleSheet } from '../../../styles';
-import { Pressable } from '../Utility';
-const useStyles = ({ disabled, pressed, }) => {
-    return useStyleSheet((t) => {
-        return {
-            container: StyleSheet.flatten([
-                {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    height: t.sizes.s64,
-                    width: t.sizes.full,
-                    gap: t.spacings.s16,
-                    borderRadius: t.borderRadius.md,
-                    backgroundColor: 'transparent',
-                    paddingHorizontal: t.spacings.s8,
-                    paddingVertical: t.spacings.s12,
-                },
-                pressed && {
-                    backgroundColor: t.colors.bg.baseTransparentPressed,
-                },
-                disabled && {
-                    backgroundColor: 'transparent',
-                },
-            ]),
-            contentWrapper: {
-                flex: 1,
-                minWidth: 0,
+import { StyleSheet, View } from 'react-native';
+import { useStyleSheet, useTheme } from '../../../styles';
+import { Spot } from '../Spot';
+import { Box, Pressable, Text } from '../Utility';
+const [ListItemProvider, useListItemContext] = createSafeContext('ListItem', {});
+const [ListItemTrailingProvider, useListItemTrailingContext] = createSafeContext('ListItemTrailing', {
+    isInTrailing: false,
+});
+const useRootStyles = ({ pressed }) => {
+    return useStyleSheet((t) => ({
+        container: StyleSheet.flatten([
+            {
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: t.spacings.s12,
+                height: t.sizes.s64,
+                width: t.sizes.full,
+                gap: t.spacings.s16,
+                borderRadius: t.borderRadius.md,
+                backgroundColor: 'transparent',
+                paddingHorizontal: t.spacings.s8,
+                paddingVertical: t.spacings.s12,
             },
-            textWrapper: {
-                flex: 1,
-                minWidth: 0,
-                flexDirection: 'column',
+            pressed && {
+                backgroundColor: t.colors.bg.baseTransparentPressed,
+            },
+        ]),
+    }), [pressed]);
+};
+/**
+ * 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/react-native_containment-listitem--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `lx` 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
+ * import {
+ *   ListItem,
+ *   ListItemLeading,
+ *   ListItemSpot,
+ *   ListItemContent,
+ *   ListItemTitle,
+ *   ListItemDescription,
+ *   ListItemTrailing,
+ * } from '@ledgerhq/lumen-ui-rnative';
+ * import { Wallet, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <ListItem onPress={() => 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 const ListItem = React.forwardRef(({ children, lx = {}, style, disabled = false, ...pressableProps }, ref) => {
+    return (_jsx(ListItemProvider, { value: { disabled }, children: _jsx(Pressable, { ref: ref, lx: lx, style: style, disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...pressableProps, children: ({ pressed }) => (_jsx(ListItemInner, { pressed: pressed, children: children })) }) }));
+});
+ListItem.displayName = 'ListItem';
+/**
+ * Internal component to handle pressed state styling
+ */
+const ListItemInner = ({ pressed, children, }) => {
+    const styles = useRootStyles({ pressed });
+    return (_jsx(View, { style: styles.container, testID: 'list-item-content', children: children }));
+};
+/**
+ * Container for the leading (left) part of the list item.
+ * Contains the visual element (ListItemSpot, Avatar, Icon) and the content (title + description).
+ */
+export const ListItemLeading = React.forwardRef(({ children, lx = {}, style, ...viewProps }, ref) => {
+    const styles = useStyleSheet((t) => ({
+        leading: {
+            flex: 1,
+            minWidth: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: t.spacings.s12,
+        },
+    }), []);
+    return (_jsx(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.leading, style]), ...viewProps, children: children }));
+});
+ListItemLeading.displayName = 'ListItemLeading';
+/**
+ * Container for the text content (title and description) within the leading area.
+ */
+export const ListItemContent = React.forwardRef(({ children, lx = {}, style, ...viewProps }, ref) => {
+    const styles = useStyleSheet((t) => ({
+        content: {
+            flex: 1,
+            minWidth: 0,
+            flexDirection: 'column',
+            gap: t.spacings.s4,
+        },
+    }), []);
+    return (_jsx(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.content, style]), ...viewProps, children: children }));
+});
+ListItemContent.displayName = 'ListItemContent';
+/**
+ * The main title of the list item. Can contain text directly or
+ * ListItemTruncate + Tag for more complex layouts.
+ */
+export const ListItemTitle = React.forwardRef(({ children, lx = {}, style, ...viewProps }, ref) => {
+    const { disabled } = useListItemContext({
+        consumerName: 'ListItemTitle',
+        contextRequired: true,
+    });
+    const { isInTrailing } = useListItemTrailingContext({
+        consumerName: 'ListItemTitle',
+        contextRequired: false,
+    });
+    const styles = useStyleSheet((t) => {
+        const { boxStyle } = StyleSheet.create({
+            boxStyle: {
+                flexDirection: 'row',
+                alignItems: 'center',
                 gap: t.spacings.s4,
+                width: '100%',
+                textAlign: isInTrailing ? 'right' : 'left',
+                justifyContent: isInTrailing ? 'flex-end' : 'flex-start',
             },
-            title: StyleSheet.flatten([
+        });
+        return {
+            asBox: boxStyle,
+            asText: StyleSheet.flatten([
                 t.typographies.body2SemiBold,
                 {
+                    ...boxStyle,
                     color: disabled ? t.colors.text.disabled : t.colors.text.base,
                 },
             ]),
-            descriptionRow: {
+        };
+    }, [disabled]);
+    // If children is a string, render it directly as Text with truncation
+    if (isTextChildren(children)) {
+        return (_jsx(Text, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.asText, style]), numberOfLines: 1, ellipsizeMode: 'tail', children: children }));
+    }
+    // Otherwise, render as a row container for ListItemTruncate + Tag
+    return (_jsx(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.asBox, style]), ...viewProps, children: children }));
+});
+ListItemTitle.displayName = 'ListItemTitle';
+/**
+ * Optional description below the title. Can contain text directly or
+ * ListItemTruncate + Tag for more complex layouts.
+ * Automatically applies disabled styling when the parent ListItem is disabled.
+ */
+export const ListItemDescription = React.forwardRef(({ children, lx = {}, style, ...viewProps }, ref) => {
+    const { disabled } = useListItemContext({
+        consumerName: 'ListItemDescription',
+        contextRequired: true,
+    });
+    const { isInTrailing } = useListItemTrailingContext({
+        consumerName: 'ListItemDescription',
+        contextRequired: false,
+    });
+    const styles = useStyleSheet((t) => {
+        const { boxStyle } = StyleSheet.create({
+            boxStyle: {
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: t.spacings.s4,
+                width: '100%',
+                textAlign: isInTrailing ? 'right' : 'left',
+                justifyContent: isInTrailing ? 'flex-end' : 'flex-start',
             },
-            descriptionTextWrapper: {
-                minWidth: 0,
-                flexShrink: 1,
-            },
-            description: StyleSheet.flatten([
+        });
+        return {
+            asBox: boxStyle,
+            asText: StyleSheet.flatten([
                 t.typographies.body3,
                 {
+                    ...boxStyle,
                     color: disabled ? t.colors.text.disabled : t.colors.text.muted,
-                    minWidth: 0,
-                    flexShrink: 1,
                 },
             ]),
-            descriptionTagWrapper: {
-                height: t.sizes.s16,
-                flexShrink: 0,
-                flexDirection: 'row',
-                alignItems: 'center',
-            },
-            trailingWrapper: {
-                flexShrink: 0,
-            },
         };
-    }, [disabled, pressed]);
-};
+    }, [disabled, isInTrailing]);
+    // If children is a string, render it directly as Text with truncation
+    if (isTextChildren(children)) {
+        return (_jsx(Text, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.asText, style]), numberOfLines: 1, ellipsizeMode: 'tail', children: children }));
+    }
+    // Otherwise, render as a row container for ListItemTruncate + Tag
+    return (_jsx(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.asBox, style]), ...viewProps, children: children }));
+});
+ListItemDescription.displayName = 'ListItemDescription';
 /**
- * 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.
- *
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-listitem--docs#dos-and-donts Guidelines}
- *
- * @warning The `lx` 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-rnative';
- *
- * <ListItem
- *   title="Basic Item"
- *   description="Optional description"
- *   onPress={() => console.log('Clicked!')}
- * />
- *
- * // Icon trailing content with leading Spot
- * import { ListItem, Spot } from '@ledgerhq/lumen-ui-rnative';
- * import { Wallet, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
- *
- * <ListItem
- *   title="Balance"
- *   leadingContent={<Spot appearance="icon" icon={Wallet} />}
- *   trailingContent={<Settings />}
- * />
- *
- * // Chevron trailing content
- * import { ListItem } from '@ledgerhq/lumen-ui-rnative';
- * import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
- *
- * <ListItem
- *   title="Settings"
- *   trailingContent={<ChevronRight size={24} />}
- * />
+ * Container for the trailing (right) content of the list item.
+ * Used for icons, switches, values, tags, chevrons, etc.
  */
-export const ListItem = React.forwardRef(({ title, description, leadingContent, descriptionTag, trailingContent, lx = {}, style, disabled = false, ...touchableProps }, ref) => {
-    return (_jsx(Pressable, { ref: ref, lx: lx, style: style, disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...touchableProps, children: ({ pressed }) => (_jsx(ListItemContent, { disabled: disabled, pressed: pressed, title: title, description: description, leadingContent: leadingContent, descriptionTag: descriptionTag, trailingContent: trailingContent })) }));
+export const ListItemTrailing = React.forwardRef(({ children, lx = {}, style, ...viewProps }, ref) => {
+    const styles = useStyleSheet(() => ({
+        trailing: {
+            flexShrink: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+    }), []);
+    return (_jsx(ListItemTrailingProvider, { value: { isInTrailing: true }, children: _jsx(Box, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.trailing, style]), ...viewProps, children: children }) }));
 });
-const ListItemContent = ({ disabled, pressed, title, description, leadingContent, descriptionTag, trailingContent, }) => {
-    const styles = useStyles({ disabled, pressed });
-    return (_jsxs(View, { style: styles.container, testID: 'list-item-content', children: [_jsxs(View, { style: styles.contentWrapper, children: [leadingContent, _jsxs(View, { style: styles.textWrapper, children: [_jsx(Text, { style: styles.title, numberOfLines: 1, ellipsizeMode: 'tail', children: title }), description && (_jsxs(View, { style: styles.descriptionRow, children: [_jsx(View, { style: styles.descriptionTextWrapper, children: _jsx(Text, { numberOfLines: 1, ellipsizeMode: 'tail', style: styles.description, children: description }) }), descriptionTag && (_jsx(View, { style: styles.descriptionTagWrapper, children: descriptionTag }))] }))] })] }), trailingContent && (_jsx(View, { style: styles.trailingWrapper, children: trailingContent }))] }));
+ListItemTrailing.displayName = 'ListItemTrailing';
+/**
+ * Spot adapter for ListItem. Automatically inherits disabled state from parent ListItem.
+ * Fixed at size 48 for consistent list item appearance.
+ */
+export const ListItemSpot = (props) => {
+    const { disabled } = useListItemContext({
+        consumerName: 'ListItemSpot',
+        contextRequired: true,
+    });
+    return _jsx(Spot, { ...props, size: 48, disabled: disabled });
 };
-ListItem.displayName = 'ListItem';
+ListItemSpot.displayName = 'ListItemSpot';
+/**
+ * Icon adapter for ListItem. Automatically inherits disabled state from parent ListItem.
+ * Fixed at size 24 for consistent list item appearance.
+ */
+export const ListItemIcon = ({ icon: Icon, color, lx = {}, style, ...viewProps }) => {
+    const { theme } = useTheme();
+    const { disabled } = useListItemContext({
+        consumerName: 'ListItemIcon',
+        contextRequired: true,
+    });
+    return (_jsx(Box, { lx: lx, style: StyleSheet.flatten([{ flexShrink: 0 }, style]), ...viewProps, children: _jsx(Icon, { size: 24, style: {
+                color: disabled ? theme.colors.text.disabled : (color ?? undefined),
+            } }) }));
+};
+ListItemIcon.displayName = 'ListItemIcon';
+/**
+ * Text wrapper that truncates when space is limited.
+ * Use inside ListItemTitle or ListItemDescription when combining text with a Tag.
+ * Set variant='title' for title styling or variant='description' (default) for description styling.
+ */
+export const ListItemTruncate = React.forwardRef(({ children, variant = 'description', lx = {}, style, ...textProps }, ref) => {
+    const { disabled } = useListItemContext({
+        consumerName: 'ListItemTruncate',
+        contextRequired: true,
+    });
+    const styles = useStyleSheet((t) => ({
+        truncate: StyleSheet.flatten([
+            variant === 'title'
+                ? t.typographies.body2SemiBold
+                : t.typographies.body3,
+            {
+                color: disabled
+                    ? t.colors.text.disabled
+                    : variant === 'title'
+                        ? t.colors.text.base
+                        : t.colors.text.muted,
+                minWidth: 0,
+                flexShrink: 1,
+            },
+        ]),
+    }), [disabled, variant]);
+    return (_jsx(Text, { ref: ref, lx: lx, style: StyleSheet.flatten([styles.truncate, style]), numberOfLines: 1, ellipsizeMode: 'tail', ...textProps, children: children }));
+});
+ListItemTruncate.displayName = 'ListItemTruncate';

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

@@ -4,8 +4,7 @@ declare const meta: Meta<typeof ListItem>;
 export default meta;
 type Story = StoryObj<typeof ListItem>;
 export declare const Base: Story;
-export declare const WithDescriptionTag: Story;
-export declare const TrailingContentVariantsShowcase: Story;
-export declare const StateShowcase: Story;
+export declare const VariantsShowcase: Story;
+export declare const DisabledState: Story;
 export declare const ResponsiveLayout: Story;
 //# sourceMappingURL=ListItem.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/ListItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAevE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAkBtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAwD/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,IAAI,EAAE,KAoBlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAchC,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAoC7C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAwC9B,CAAC"}
+{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/ListItem/ListItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAMvE,OAAO,EACL,QAAQ,EAST,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAkC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,IAAI,EAAE,KAgClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAqK9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA+E3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAuE9B,CAAC"}