@ledgerhq/lumen-ui-rnative 0.0.47 → 0.0.48

package/src/lib/Components/Divider/Divider.mdx

@@ -0,0 +1,151 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DividerStories from './Divider.stories';
+import { Divider } from './Divider';
+import {
+  CustomTabs,
+  Tab,
+} from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Layout/Divider' of={DividerStories} />
+
+# ➖ Divider
+
+<CustomTabs>
+  <Tab label="Overview ">
+
+## Introduction
+
+The Divider component provides a simple, semantic way to visually separate content sections in your interface. It creates a horizontal or vertical line that helps organize information and improve content hierarchy.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=285-5969&m=dev).
+
+> ⚠️ **Note on Web Preview:** The Storybook preview below may display visual inconsistencies as certain React Native APIs cannot be fully translated to web environments. For the complete native experience, please refer to the component on an actual iOS or Android device.
+
+## Anatomy
+
+<Canvas of={DividerStories.Base} />
+
+The Divider is a simple component consisting of a single line that uses design system tokens for consistent styling.
+
+## Properties
+
+### Overview
+
+<Canvas of={DividerStories.Base} />
+<Controls of={DividerStories.Base} />
+
+### Orientation
+
+Dividers support both horizontal and vertical orientations to accommodate different layout needs:
+
+- `horizontal` (default): Creates a horizontal line spanning the full width of its container
+- `vertical`: Creates a vertical line with a height determined by its container or custom styling via `lx` props
+
+<Canvas of={DividerStories.OrientationShowcase} />
+
+## Usage Examples
+
+### In Lists
+
+A common use case is separating list items or sections within a card:
+
+<Canvas of={DividerStories.InList} />
+
+## Responsive Layout
+
+Dividers automatically adapt to their container's dimensions. For horizontal dividers, they span the full width. For vertical dividers, set an explicit height using the `lx` prop.
+
+## Accessibility
+
+The Divider component uses `accessibilityRole='none'` as it's purely decorative and doesn't require accessibility announcements.
+
+</Tab>
+
+  <Tab label="Implementation">
+
+## Installation
+
+```bash
+npm install @ledgerhq/lumen-ui-rnative
+```
+
+> **Note**: `@ledgerhq/lumen-design-core` and other peer dependencies (`react-native`, etc.) are required. See our Setup Guide for complete installation.
+
+## Basic Usage
+
+```tsx
+import { Divider } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <Box>
+      <Text>Content above the divider</Text>
+      <Divider />
+      <Text>Content below the divider</Text>
+    </Box>
+  );
+}
+```
+
+### Vertical Divider
+
+For vertical separation between content:
+
+```tsx
+import { Divider, Box, Text } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+      <Text>Left content</Text>
+      <Divider orientation='vertical' lx={{ height: 's48' }} />
+      <Text>Right content</Text>
+    </Box>
+  );
+}
+```
+
+Note: For vertical dividers, you typically need to set an explicit height using the `lx` prop.
+
+### In List Components
+
+Dividers are perfect for separating items in lists, menus, or cards:
+
+```tsx
+import { Divider, Box, Text } from '@ledgerhq/lumen-ui-rnative';
+
+function MyList() {
+  return (
+    <Box
+      lx={{
+        borderRadius: 'lg',
+        borderWidth: 's1',
+        borderColor: 'muted',
+      }}
+    >
+      <Box lx={{ padding: 's16' }}>
+        <Text>Item 1</Text>
+      </Box>
+      <Divider />
+      <Box lx={{ padding: 's16' }}>
+        <Text>Item 2</Text>
+      </Box>
+      <Divider />
+      <Box lx={{ padding: 's16' }}>
+        <Text>Item 3</Text>
+      </Box>
+    </Box>
+  );
+}
+```
+
+<CommonRulesDoAndDont />
+
+## Performance Considerations
+
+The Divider component is extremely lightweight with minimal performance impact. It renders a simple `Box` component with border styling, making it suitable for use in FlatLists and ScrollViews with many items.
+
+</Tab>
+</CustomTabs>
+

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

@@ -0,0 +1,140 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Box } from '../Utility/Box';
+import { Text } from '../Utility/Text';
+import { Divider } from './Divider';
+
+const meta: Meta<typeof Divider> = {
+  component: Divider,
+  title: 'Layout/Divider',
+  parameters: {
+    actions: { disable: true },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Divider>;
+
+export const Base: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+  render: (args) => {
+    const isVertical = args.orientation === 'vertical';
+    return (
+      <Box
+        lx={
+          isVertical
+            ? { flexDirection: 'row', alignItems: 'center', gap: 's16' }
+            : { width: 'full', gap: 's16' }
+        }
+      >
+        <Text typography='body2' lx={{ color: 'base' }}>
+          {isVertical ? 'Left content' : 'Content above'}
+        </Text>
+        <Divider {...args} lx={isVertical ? { height: 's48' } : undefined} />
+        <Text typography='body2' lx={{ color: 'base' }}>
+          {isVertical ? 'Right content' : 'Content below'}
+        </Text>
+      </Box>
+    );
+  },
+};
+
+export const OrientationShowcase: Story = {
+  render: () => (
+    <Box lx={{ gap: 's32' }}>
+      <Box lx={{ gap: 's8' }}>
+        <Text typography='body3' lx={{ color: 'muted' }}>
+          Horizontal (default)
+        </Text>
+        <Box lx={{ width: 'full', gap: 's16' }}>
+          <Text typography='body2' lx={{ color: 'base' }}>
+            Content above
+          </Text>
+          <Divider orientation='horizontal' />
+          <Text typography='body2' lx={{ color: 'base' }}>
+            Content below
+          </Text>
+        </Box>
+      </Box>
+
+      <Box lx={{ gap: 's8' }}>
+        <Text typography='body3' lx={{ color: 'muted' }}>
+          Vertical
+        </Text>
+        <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+          <Text typography='body2' lx={{ color: 'base' }}>
+            Left content
+          </Text>
+          <Divider orientation='vertical' lx={{ height: 's48' }} />
+          <Text typography='body2' lx={{ color: 'base' }}>
+            Right content
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  ),
+};
+
+export const InList: Story = {
+  render: () => (
+    <Box
+      lx={{
+        width: 'full',
+        maxWidth: 's400',
+        backgroundColor: 'canvas',
+        borderRadius: 'lg',
+        borderWidth: 's1',
+        borderColor: 'muted',
+      }}
+    >
+      <Box
+        lx={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: 's16',
+        }}
+      >
+        <Text typography='body2' lx={{ color: 'base' }}>
+          Item 1
+        </Text>
+        <Text typography='body3' lx={{ color: 'muted' }}>
+          $100
+        </Text>
+      </Box>
+      <Divider />
+      <Box
+        lx={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: 's16',
+        }}
+      >
+        <Text typography='body2' lx={{ color: 'base' }}>
+          Item 2
+        </Text>
+        <Text typography='body3' lx={{ color: 'muted' }}>
+          $200
+        </Text>
+      </Box>
+      <Divider />
+      <Box
+        lx={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: 's16',
+        }}
+      >
+        <Text typography='body2' lx={{ color: 'base' }}>
+          Item 3
+        </Text>
+        <Text typography='body3' lx={{ color: 'muted' }}>
+          $300
+        </Text>
+      </Box>
+    </Box>
+  ),
+};

package/src/lib/Components/Divider/Divider.test.tsx

@@ -0,0 +1,92 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render } from '@testing-library/react-native';
+import React from 'react';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { Divider } from './Divider';
+
+const { colors } = ledgerLiveThemes.dark;
+
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('Divider Component', () => {
+  it('should render with horizontal orientation by default', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <Divider testID='divider' />
+      </TestWrapper>,
+    );
+    const divider = getByTestId('divider');
+    expect(divider).toBeTruthy();
+    const style = divider.props.style;
+    // Style might be an array or object after flattening
+    const flatStyle = Array.isArray(style)
+      ? Object.assign({}, ...style)
+      : style;
+    expect(flatStyle.borderTopWidth).toBe(1);
+    expect(flatStyle.borderTopColor).toBe(colors.border.mutedSubtle);
+  });
+
+  it('should render with vertical orientation', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <Divider testID='divider' orientation='vertical' />
+      </TestWrapper>,
+    );
+    const divider = getByTestId('divider');
+    const style = divider.props.style;
+    // Style might be an array or object after flattening
+    const flatStyle = Array.isArray(style)
+      ? Object.assign({}, ...style)
+      : style;
+    expect(flatStyle.borderLeftWidth).toBe(1);
+    expect(flatStyle.borderLeftColor).toBe(colors.border.mutedSubtle);
+  });
+
+  it('should apply custom lx props', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <Divider testID='divider' lx={{ marginVertical: 's16' }} />
+      </TestWrapper>,
+    );
+    const divider = getByTestId('divider');
+    const style = divider.props.style;
+    const flatStyle = Array.isArray(style)
+      ? Object.assign({}, ...style)
+      : style;
+    expect(flatStyle.marginVertical).toBe(16);
+  });
+
+  it('should pass through additional props', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <Divider testID='custom-divider' />
+      </TestWrapper>,
+    );
+    const divider = getByTestId('custom-divider');
+    expect(divider).toBeTruthy();
+  });
+
+  it('should handle style merging with lx props', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <Divider
+          testID='divider'
+          lx={{ marginTop: 's8' }}
+          style={{ opacity: 0.5 }}
+        />
+      </TestWrapper>,
+    );
+    const divider = getByTestId('divider');
+    const style = divider.props.style;
+    const flatStyle = Array.isArray(style)
+      ? Object.assign({}, ...style)
+      : style;
+    expect(flatStyle.marginTop).toBe(8);
+    expect(flatStyle.opacity).toBe(0.5);
+  });
+});

package/src/lib/Components/Divider/Divider.tsx

@@ -0,0 +1,52 @@
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { Box } from '../Utility';
+import { DividerProps } from './types';
+
+/**
+ * A simple divider component for separating content sections.
+ *
+ * The Divider renders a horizontal or vertical line to create visual separation
+ * between content areas. It uses design system tokens for consistent styling.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/layout-divider--docs Storybook}
+ *
+ * @example
+ * // Horizontal divider (default)
+ * <Divider />
+ *
+ * @example
+ * // Vertical divider
+ * <Divider orientation="vertical" />
+ *
+ * @example
+ * // With custom styling using lx props
+ * <Divider lx={{ marginVertical: 's16' }} />
+ */
+export const Divider = forwardRef<View, DividerProps>(
+  ({ lx = {}, orientation = 'horizontal', ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        accessibilityRole='none'
+        lx={{
+          ...(orientation === 'horizontal'
+            ? {
+                alignSelf: 'stretch',
+                borderTopWidth: 's1',
+                borderTopColor: 'mutedSubtle',
+              }
+            : {
+                alignSelf: 'stretch',
+                borderLeftWidth: 's1',
+                borderLeftColor: 'mutedSubtle',
+              }),
+          ...lx,
+        }}
+        {...props}
+      />
+    );
+  },
+);
+
+Divider.displayName = 'Divider';

package/src/lib/Components/Divider/index.ts

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps } from './types';

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

@@ -0,0 +1,9 @@
+import { BoxProps } from '../Utility';
+
+export type DividerProps = {
+  /**
+   * The orientation of the divider
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+} & Omit<BoxProps, 'children'>;

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

@@ -169,16 +169,21 @@ ListItemLeading.displayName = 'ListItemLeading';
  */
 export const ListItemContent = React.forwardRef<View, ListItemContentProps>(
   ({ children, lx = {}, style, ...viewProps }, ref) => {
+    const { isInTrailing } = useListItemTrailingContext({
+      consumerName: 'ListItemContent',
+      contextRequired: false,
+    });
+
     const styles = useStyleSheet(
       (t) => ({
         content: {
-          flex: 1,
+          flex: isInTrailing ? 0 : 1,
           minWidth: 0,
           flexDirection: 'column',
           gap: t.spacings.s4,
         },
       }),
-      [],
+      [isInTrailing],
     );
 
     return (
@@ -419,7 +424,9 @@ export const ListItemIcon = ({
       <Icon
         size={24}
         style={{
-          color: disabled ? theme.colors.text.disabled : (color ?? undefined),
+          color: disabled
+            ? theme.colors.text.disabled
+            : (color ?? theme.colors.text.base),
         }}
       />
     </Box>

package/src/lib/Components/Select/GlobalSelectBottomSheet.tsx

@@ -8,6 +8,7 @@ import {
   BottomSheetView,
   useBottomSheetRef,
 } from '../BottomSheet';
+import { Divider } from '../Divider';
 import { Box, Text } from '../Utility';
 import { useGlobalSelectSafeContext } from './GlobalSelectContext';
 
@@ -17,12 +18,6 @@ const useStyles = () => {
       bottomSheetView: {
         paddingHorizontal: t.spacings.s8,
       },
-      separator: {
-        marginVertical: t.spacings.s4,
-        marginHorizontal: t.spacings.s8,
-        height: 1,
-        backgroundColor: t.colors.bg.muted,
-      },
       groupLabel: {
         marginBottom: t.spacings.s4,
         paddingHorizontal: t.spacings.s8,
@@ -133,7 +128,10 @@ export const GlobalSelectBottomSheet: React.FC = () => {
               {currentSelect.items.map((item, index) => {
                 if (item.type === 'separator') {
                   return (
-                    <Box key={`separator-${index}`} style={styles.separator} />
+                    <Divider
+                      key={`separator-${index}`}
+                      lx={{ marginVertical: 's4', marginHorizontal: 's8' }}
+                    />
                   );
                 }
                 if (item.type === 'group-label') {

package/src/lib/Components/Select/Select.tsx

@@ -458,23 +458,9 @@ export const SelectItemText: React.FC<SelectItemTextProps> = ({
 };
 SelectItemText.displayName = 'SelectItemText';
 
-export const SelectSeparator: React.FC<SelectSeparatorProps> = ({
-  lx,
-  style,
-  ...props
-}) => {
-  const styles = useStyleSheet(
-    (t) => ({
-      separator: {
-        marginHorizontal: t.spacings.s8,
-        marginVertical: t.spacings.s4,
-        height: t.sizes.s1,
-        backgroundColor: t.colors.border.mutedSubtle,
-      },
-    }),
-    [],
-  );
-
-  return <Box lx={lx} style={[styles.separator, style]} {...props} />;
+export const SelectSeparator: React.FC<SelectSeparatorProps> = () => {
+  // This component doesn't render anything - it's used for structure
+  // The actual separators are rendered in GlobalSelectBottomSheet
+  return null;
 };
 SelectSeparator.displayName = 'SelectSeparator';

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

@@ -116,9 +116,7 @@ export type SelectItemTextProps = {
   children: ReactNode;
 } & StyledTextProps;
 
-export type SelectSeparatorProps = {
-  // No extra props needed
-} & BoxProps;
+export type SelectSeparatorProps = {} & BoxProps;
 
 export type SelectItemData = {
   type: 'item';

package/src/lib/Components/Tile/Tile.figma.tsx

@@ -1,31 +1,28 @@
 import figma from '@figma/code-connect';
 import { Settings } from '../../Symbols';
-import { Spot } from '../Spot';
-import { Tile } from './Tile';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import {
+  Tile,
+  TileSpot,
+  TileContent,
+  TileTitle,
+  TileDescription,
+} from './Tile';
 
 figma.connect(
   Tile,
   'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=5783-1328',
   {
-    imports: ["import { Tile } from '@ledgerhq/lumen-ui-react'"],
+    imports: [
+      "import { Tile, TileSpot, TileContent, TileTitle, TileDescription } from '@ledgerhq/lumen-ui-rnative'",
+    ],
     props: {
       title: figma.string('title'),
       description: figma.boolean('show-description', {
         true: figma.string('description'),
         false: undefined,
       }),
-      leadingContent: <Spot appearance='icon' icon={Settings} />,
-      trailingContent: figma.boolean('show-tag', {
-        true: figma.instance('tag'),
-        false: undefined,
-      }),
+      showTag: figma.boolean('show-tag'),
+      tag: figma.instance('tag'),
       disabled: figma.enum('state', {
         disabled: true,
       }),
@@ -38,15 +35,19 @@ figma.connect(
     ],
     example: (props) => (
       <Tile
-        title={props.title}
-        description={props.description}
-        leadingContent={props.leadingContent}
-        trailingContent={props.trailingContent}
         disabled={props.disabled}
-        onPress={() => {
-          console.log('Tile pressed');
-        }}
-      />
+        onPress={() => console.log('Tile pressed')}
+        onLongPress={() => console.log('Long press - secondary action')}
+      >
+        <TileSpot appearance='icon' icon={Settings} />
+        <TileContent>
+          <TileTitle>{props.title}</TileTitle>
+          {props.description && (
+            <TileDescription>{props.description}</TileDescription>
+          )}
+        </TileContent>
+        {props.showTag && props.tag}
+      </Tile>
     ),
   },
 );