@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

package/src/lib/Components/ListItem/ListItem.mdx

@@ -1,9 +1,9 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import { Box } from '../Utility';
 import * as ListItemStories from './ListItem.stories';
 import { ListItem } from './ListItem';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Components/ListItem' of={ListItemStories} />
 
@@ -144,18 +144,17 @@ function MyComponent() {
 The ListItem supports arbitrary trailing content variants. Below are some examples:
 
 ```tsx
-import { ListItem, Tag } from '@ledgerhq/lumen-ui-rnative';
+import { ListItem, Spot, Tag, Box, Text } from '@ledgerhq/lumen-ui-rnative';
 import {
   Settings,
   PenEdit,
   ChevronRight,
   User,
 } from '@ledgerhq/lumen-ui-rnative/symbols';
-import { View, Text } from 'react-native';
 
 function ListVariants() {
   return (
-    <View className='flex flex-col gap-2 max-w-md'>
+    <Box lx={{ flexDirection: 'column', gap: 's0', maxWidth: 's320' }}>
       {/* Chevron - For navigation items */}
       <ListItem
         title='Chevron Variant'
@@ -171,10 +170,12 @@ function ListVariants() {
         description='Current available funds'
         leadingContent={<Spot appearance='icon' icon={User} />}
         trailingContent={
-          <View className='text-right'>
-            <Text className='body-2-semi-bold'>42.00</Text>
-            <Text className='text-muted body-3'>USD</Text>
-          </View>
+          <Box lx={{ alignItems: 'flex-end' }}>
+            <Text typography='body2SemiBold'>42.00</Text>
+            <Text typography='body3' lx={{ color: 'muted' }}>
+              USD
+            </Text>
+          </Box>
         }
         onPress={() => console.log('View balance')}
       />
@@ -204,7 +205,7 @@ function ListVariants() {
         leadingContent={<Spot appearance='icon' icon={User} />}
         onPress={() => console.log('Simple action')}
       />
-    </View>
+    </Box>
   );
 }
 ```
@@ -215,7 +216,7 @@ Add a tag to the description for additional status information:
 
 ```tsx
 import { ListItem, Tag } from '@ledgerhq/lumen-ui-rnative';
-import { Bolt } from '@ledgerhq/lumen-ui-rnative/symbols';
+import { Bolt, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 function MyComponent() {
   return (
@@ -242,10 +243,13 @@ Disable the ListItem to prevent interaction:
 
 ### Responsive Layout
 
-ListItem handles truncation responsively. Use container styles to control behavior:
+ListItem handles truncation responsively. Use `Box` to control the container:
 
 ```tsx
-<View className='w-240 bg-base p-4'>
+import { ListItem, Spot, Box } from '@ledgerhq/lumen-ui-rnative';
+import { User, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<Box lx={{ width: 's256', backgroundColor: 'base', padding: 's4' }}>
   <ListItem
     title='Very Long Title That Will Truncate'
     description='Very long description that will also truncate appropriately'
@@ -253,61 +257,27 @@ ListItem handles truncation responsively. Use container styles to control behavi
     trailingContent={<ChevronRight size={24} />}
     onPress={() => console.log('Pressed!')}
   />
-</View>
+</Box>
 ```
 
 ### Custom Styling
 
-Use `className` for layout purposes only, such as maximum width:
+Use `lx` prop for layout purposes only, such as maximum width:
 
 ```tsx
 <ListItem
   title='Constrained Width'
   description='This item has a maximum width applied'
-  className='max-w-md'
+  lx={{ maxWidth: 's320' }}
   onPress={() => console.log('Pressed!')}
 />
 ```
 
 ## Do's and Don'ts
 
-The following guidelines ensure consistent usage of the ListItem component and maintain design system principles.
-
-<div className='flex flex-col gap-24'>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use in ScrollView with proper grouping'
-      description='ListItems work best when grouped in ScrollView containers for list contexts'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<ScrollView className='max-w-320'>
-  <ListItem title='Item 1' onPress={() => {}} />
-  <ListItem title='Item 2' onPress={() => {}} />
-</ScrollView>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use for non-list contexts"
-      description='Avoid using ListItem as standalone elements with custom borders or margins'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<ScrollView className='max-w-320'>
-  <ListItem title='Standalone' className='m-4 border' onPress={() => {}} />
-  <ListItem title='Another' className='m-4 border' onPress={() => {}} />
-</ScrollView>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 </Tab>
 </CustomTabs>

package/src/lib/Components/ListItem/ListItem.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { View, Text } from 'react-native';
 import {
   Settings,
   Plus,
@@ -11,21 +10,24 @@ import {
   Bolt,
   ChevronRight,
 } from '../../Symbols';
-import { cn } from '../../utils';
 import { Spot } from '../Spot/Spot';
 import { Tag } from '../Tag/Tag';
+import { Box, Text } from '../Utility';
 import { ListItem } from './ListItem';
 
 const Balance = ({ disabled }: { disabled?: boolean }) => {
   return (
-    <View className='items-end'>
-      <Text className={cn('body-2-semi-bold', disabled && 'text-disabled')}>
+    <Box lx={{ alignItems: 'flex-end' }}>
+      <Text
+        typography='body2SemiBold'
+        lx={{ color: disabled ? 'disabled' : 'base' }}
+      >
         42.00
       </Text>
-      <Text className={cn('text-muted body-3', disabled && 'text-disabled')}>
+      <Text typography='body3' lx={{ color: disabled ? 'disabled' : 'muted' }}>
         USD
       </Text>
-    </View>
+    </Box>
   );
 };
 
@@ -95,7 +97,7 @@ export const Base: Story = {
     title: 'Item with Icon and Description',
     leadingContent: <Spot appearance='icon' icon={Settings} />,
     description: 'Additional information',
-    className: 'max-w-320',
+    lx: { maxWidth: 's320' },
   },
   parameters: {
     docs: {
@@ -122,16 +124,16 @@ export const WithDescriptionTag: Story = {
     ),
   },
   render: (args) => (
-    <View className='max-w-320'>
+    <Box lx={{ maxWidth: 's320' }}>
       <ListItem {...args} />
-    </View>
+    </Box>
   ),
 };
 
 export const TrailingContentVariantsShowcase: Story = {
   render: () => {
     return (
-      <View className='flex max-w-256 flex-col'>
+      <Box lx={{ flexDirection: 'column', maxWidth: 's256' }}>
         <ListItem
           title='Caret Variant'
           description='With description'
@@ -161,7 +163,7 @@ export const TrailingContentVariantsShowcase: Story = {
           description='With description'
           leadingContent={<Spot appearance='icon' icon={Chart1} />}
         />
-      </View>
+      </Box>
     );
   },
 };
@@ -169,13 +171,13 @@ export const TrailingContentVariantsShowcase: Story = {
 export const StateShowcase: Story = {
   render: () => {
     return (
-      <View className='flex flex-row gap-32'>
-        <View className='flex max-w-256 flex-col'>
+      <Box lx={{ flexDirection: 'row', gap: 's32' }}>
+        <Box lx={{ flexDirection: 'column', maxWidth: 's256' }}>
           <ListItem
             title='Caret Variant'
             description='With description'
             leadingContent={<Spot appearance='icon' icon={User} />}
-            trailingContent={<ChevronRight size={24} className='text-muted' />}
+            trailingContent={<ChevronRight size={24} lx={{ color: 'muted' }} />}
           />
           <ListItem
             title='Value Variant'
@@ -200,43 +202,30 @@ export const StateShowcase: Story = {
             description='With description'
             leadingContent={<Spot appearance='icon' icon={Chart1} />}
           />
-        </View>
-        <View className='flex max-w-256 flex-col'>
+        </Box>
+        <Box lx={{ flexDirection: 'column', maxWidth: 's256' }}>
           <ListItem
             title='Caret Variant'
             description='With description'
             leadingContent={<Spot appearance='icon' icon={User} disabled />}
             disabled
             trailingContent={
-              <ChevronRight size={24} className='text-disabled' />
+              <ChevronRight size={24} lx={{ color: 'disabled' }} />
             }
           />
-          <ListItem
-            title='Value Variant'
-            description='With description'
-            leadingContent={<Spot appearance='icon' icon={Cart} disabled />}
-            disabled
-            trailingContent={<Balance disabled />}
-          />
           <ListItem
             title='Tag Variant'
             description='With description'
             leadingContent={<Spot appearance='icon' icon={Apps} disabled />}
             disabled
-            trailingContent={
-              <Tag
-                label='New'
-                appearance='accent'
-                className='!bg-muted-transparent !text-disabled'
-              />
-            }
+            trailingContent={<Tag label='New' appearance='accent' disabled />}
           />
           <ListItem
             title='Icon Variant'
             description='With description'
             leadingContent={<Spot appearance='icon' icon={Settings} disabled />}
             disabled
-            trailingContent={<PenEdit size={24} className='text-disabled' />}
+            trailingContent={<PenEdit size={24} lx={{ color: 'disabled' }} />}
           />
           <ListItem
             title='None Variant'
@@ -244,39 +233,50 @@ export const StateShowcase: Story = {
             leadingContent={<Spot appearance='icon' icon={Chart1} disabled />}
             disabled
           />
-        </View>
-      </View>
+        </Box>
+      </Box>
     );
   },
 };
 
 export const ResponsiveLayout: Story = {
-  render: () => (
-    <View className='w-320 bg-muted-pressed p-16'>
-      <Text className='mb-16 text-muted body-4-semi-bold'>
-        Container: 320px wide
-      </Text>
-      <View className='flex flex-col gap-0'>
-        <ListItem
-          title='Short Title'
-          description='Short description'
-          leadingContent={<Spot appearance='icon' icon={Plus} />}
-          trailingContent={<ChevronRight size={24} className='text-muted' />}
-        />
-        <ListItem
-          title='Long Title that should truncate appropriately'
-          description='Long description that should truncate appropriately'
-          leadingContent={<Spot appearance='icon' icon={Plus} />}
-          trailingContent={<ChevronRight size={24} className='text-muted' />}
-        />
-        <ListItem
-          title='Long Title that should truncate appropriately'
-          description='Long description that should truncate appropriately'
-          descriptionTag={<Tag label='New' appearance='accent' size='sm' />}
-          leadingContent={<Spot appearance='icon' icon={Plus} />}
-          trailingContent={<ChevronRight size={24} className='text-muted' />}
-        />
-      </View>
-    </View>
-  ),
+  render: () => {
+    return (
+      <Box
+        lx={{
+          width: 's320',
+          backgroundColor: 'mutedPressed',
+          padding: 's16',
+        }}
+      >
+        <Text
+          typography='body4SemiBold'
+          lx={{ marginBottom: 's16', color: 'muted' }}
+        >
+          Container: 320px wide
+        </Text>
+        <Box lx={{ flexDirection: 'column', gap: 's0' }}>
+          <ListItem
+            title='Short Title'
+            description='Short description'
+            leadingContent={<Spot appearance='icon' icon={Plus} />}
+            trailingContent={<ChevronRight size={24} lx={{ color: 'muted' }} />}
+          />
+          <ListItem
+            title='Long Title that should truncate appropriately'
+            description='Long description that should truncate appropriately'
+            leadingContent={<Spot appearance='icon' icon={Plus} />}
+            trailingContent={<ChevronRight size={24} lx={{ color: 'muted' }} />}
+          />
+          <ListItem
+            title='Long Title that should truncate appropriately'
+            description='Long description that should truncate appropriately'
+            descriptionTag={<Tag label='New' appearance='accent' size='sm' />}
+            leadingContent={<Spot appearance='icon' icon={Plus} />}
+            trailingContent={<ChevronRight size={24} lx={{ color: 'muted' }} />}
+          />
+        </Box>
+      </Box>
+    );
+  },
 };

package/src/lib/Components/ListItem/ListItem.tsx

@@ -1,39 +1,88 @@
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { Pressable, View, Text } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { Pressable } from '../Utility';
+
 import { ListItemProps } from './ListItem.types';
 
-const listItemVariants = {
-  root: cva(
-    [
-      'flex h-64 w-full flex-row items-center gap-16 rounded-md bg-base-transparent px-8 py-12 transition-colors',
-    ],
-    {
-      variants: {
-        disabled: {
-          true: 'cursor-default bg-base-transparent active:bg-base-transparent',
-          false:
-            'cursor-pointer bg-base-transparent active:bg-base-transparent-pressed',
+const useStyles = ({
+  disabled,
+  pressed,
+}: {
+  disabled: boolean;
+  pressed: boolean;
+}) => {
+  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,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: t.spacings.s12,
         },
-      },
-    },
-  ),
-  title: cva('body-2-semi-bold', {
-    variants: {
-      disabled: {
-        true: 'text-disabled',
-        false: 'text-base',
-      },
-    },
-  }),
-  description: cva('min-w-0 shrink body-3', {
-    variants: {
-      disabled: {
-        true: 'text-disabled',
-        false: 'text-muted',
-      },
+        textWrapper: {
+          flex: 1,
+          minWidth: 0,
+          flexDirection: 'column',
+          gap: t.spacings.s4,
+        },
+        title: StyleSheet.flatten([
+          t.typographies.body2SemiBold,
+          {
+            color: disabled ? t.colors.text.disabled : t.colors.text.base,
+          },
+        ]),
+        descriptionRow: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: t.spacings.s4,
+        },
+        descriptionTextWrapper: {
+          minWidth: 0,
+          flexShrink: 1,
+        },
+        description: StyleSheet.flatten([
+          t.typographies.body3,
+          {
+            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],
+  );
 };
 
 /**
@@ -43,7 +92,7 @@ const listItemVariants = {
  * @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 `className` prop should only be used for layout adjustments like margins or positioning.
+ * @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
@@ -78,51 +127,90 @@ const listItemVariants = {
 export const ListItem = React.forwardRef<
   React.ElementRef<typeof Pressable>,
   ListItemProps
->((props, ref) => {
-  const {
-    title,
-    description,
-    leadingContent,
-    descriptionTag,
-    trailingContent,
-    style,
-    disabled = false,
-    className,
-    ...touchableProps
-  } = props;
+>(
+  (
+    {
+      title,
+      description,
+      leadingContent,
+      descriptionTag,
+      trailingContent,
+      lx = {},
+      style,
+      disabled = false,
+      ...touchableProps
+    },
+    ref,
+  ) => {
+    return (
+      <Pressable
+        ref={ref}
+        lx={lx}
+        style={style}
+        disabled={disabled}
+        accessibilityRole='button'
+        accessibilityState={{ disabled }}
+        {...touchableProps}
+      >
+        {({ pressed }) => (
+          <ListItemContent
+            disabled={disabled}
+            pressed={pressed}
+            title={title}
+            description={description}
+            leadingContent={leadingContent}
+            descriptionTag={descriptionTag}
+            trailingContent={trailingContent}
+          />
+        )}
+      </Pressable>
+    );
+  },
+);
+
+type ListItemContentProps = {
+  disabled: boolean;
+  pressed: boolean;
+  title: string;
+  description?: string;
+  leadingContent?: React.ReactNode;
+  descriptionTag?: React.ReactNode;
+  trailingContent?: React.ReactNode;
+};
+
+const ListItemContent: React.FC<ListItemContentProps> = ({
+  disabled,
+  pressed,
+  title,
+  description,
+  leadingContent,
+  descriptionTag,
+  trailingContent,
+}) => {
+  const styles = useStyles({ disabled, pressed });
 
   return (
-    <Pressable
-      ref={ref}
-      disabled={disabled}
-      className={listItemVariants.root({ disabled, className })}
-      style={style}
-      {...touchableProps}
-    >
-      <View className='flex min-w-0 flex-1 flex-row items-center gap-12'>
+    <View style={styles.container} testID='list-item-content'>
+      <View style={styles.contentWrapper}>
         {leadingContent}
-        <View className='flex min-w-0 flex-1 flex-col gap-4'>
-          <Text
-            numberOfLines={1}
-            ellipsizeMode='tail'
-            className={listItemVariants.title({ disabled })}
-          >
+        <View style={styles.textWrapper}>
+          <Text style={styles.title} numberOfLines={1} ellipsizeMode='tail'>
             {title}
           </Text>
 
           {description && (
-            <View className='flex flex-row items-center gap-4'>
-              <View className='min-w-0 shrink'>
+            <View style={styles.descriptionRow}>
+              <View style={styles.descriptionTextWrapper}>
                 <Text
                   numberOfLines={1}
                   ellipsizeMode='tail'
-                  className={listItemVariants.description({ disabled })}
+                  style={styles.description}
                 >
                   {description}
                 </Text>
               </View>
               {descriptionTag && (
-                <View className='flex h-16 shrink-0 flex-row items-center'>
+                <View style={styles.descriptionTagWrapper}>
                   {descriptionTag}
                 </View>
               )}
@@ -130,9 +218,11 @@ export const ListItem = React.forwardRef<
           )}
         </View>
       </View>
-      {trailingContent && <View className='shrink-0'>{trailingContent}</View>}
-    </Pressable>
+      {trailingContent && (
+        <View style={styles.trailingWrapper}>{trailingContent}</View>
+      )}
+    </View>
   );
-});
+};
 
 ListItem.displayName = 'ListItem';

package/src/lib/Components/ListItem/ListItem.types.ts

@@ -1,4 +1,4 @@
-import { PressableProps } from 'react-native';
+import { StyledPressableProps } from '../../../styles';
 
 export type ListItemProps = {
   /**
@@ -24,4 +24,8 @@ export type ListItemProps = {
    * @example trailingContent={<Icon />}
    */
   trailingContent?: React.ReactNode;
-} & Omit<PressableProps, 'children'>;
+  /**
+   * Whether the list item is disabled.
+   */
+  disabled?: boolean;
+} & Omit<StyledPressableProps, 'disabled'>;