@ledgerhq/lumen-ui-rnative 0.1.21 → 0.1.23

package/src/lib/Components/{TriggerButton/TriggerButton.test.tsx → MediaButton/MediaButton.test.tsx}

@@ -6,7 +6,7 @@ import { View, ViewStyle } from 'react-native';
 
 import { Settings } from '../../Symbols';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
-import { TriggerButton } from './TriggerButton';
+import { MediaButton } from './MediaButton';
 
 const renderWithProvider = (component: React.ReactElement) => {
   return render(
@@ -16,11 +16,11 @@ const renderWithProvider = (component: React.ReactElement) => {
   );
 };
 
-describe('TriggerButton', () => {
+describe('MediaButton', () => {
   describe('Rendering', () => {
     it('should render with label text and correct accessibility role', () => {
       renderWithProvider(
-        <TriggerButton testID='trigger'>All accounts</TriggerButton>,
+        <MediaButton testID='trigger'>All accounts</MediaButton>,
       );
       const trigger = screen.getByTestId('trigger');
       expect(trigger).toBeTruthy();
@@ -29,7 +29,7 @@ describe('TriggerButton', () => {
     });
 
     it('should always render a chevron icon', () => {
-      renderWithProvider(<TriggerButton testID='trigger'>Label</TriggerButton>);
+      renderWithProvider(<MediaButton testID='trigger'>Label</MediaButton>);
       expect(screen.getByTestId('button-trigger-chevron')).toBeTruthy();
     });
 
@@ -37,9 +37,9 @@ describe('TriggerButton', () => {
       'should render without errors for appearance "%s"',
       (appearance) => {
         renderWithProvider(
-          <TriggerButton testID='trigger' appearance={appearance}>
+          <MediaButton testID='trigger' appearance={appearance}>
             Label
-          </TriggerButton>,
+          </MediaButton>,
         );
         expect(screen.getByTestId('trigger')).toBeTruthy();
       },
@@ -49,9 +49,9 @@ describe('TriggerButton', () => {
       'should render without errors for size "%s"',
       (size) => {
         renderWithProvider(
-          <TriggerButton testID='trigger' size={size}>
+          <MediaButton testID='trigger' size={size}>
             Label
-          </TriggerButton>,
+          </MediaButton>,
         );
         expect(screen.getByTestId('trigger')).toBeTruthy();
       },
@@ -61,13 +61,13 @@ describe('TriggerButton', () => {
   describe('Icons', () => {
     it('should render with a flat interface icon', () => {
       renderWithProvider(
-        <TriggerButton
+        <MediaButton
           testID='trigger'
           icon={<Settings size={20} testID='icon' />}
           iconType='flat'
         >
           Network
-        </TriggerButton>,
+        </MediaButton>,
       );
       expect(screen.getByTestId('icon')).toBeTruthy();
       expect(screen.getByText('Network')).toBeTruthy();
@@ -75,13 +75,13 @@ describe('TriggerButton', () => {
 
     it('should render with a rounded icon', () => {
       renderWithProvider(
-        <TriggerButton
+        <MediaButton
           testID='trigger'
           icon={<View testID='crypto-icon' />}
           iconType='rounded'
         >
           Bitcoin
-        </TriggerButton>,
+        </MediaButton>,
       );
       expect(screen.getByTestId('crypto-icon')).toBeTruthy();
       expect(screen.getByText('Bitcoin')).toBeTruthy();
@@ -91,9 +91,9 @@ describe('TriggerButton', () => {
   describe('States', () => {
     it('should be disabled when disabled prop is true', () => {
       renderWithProvider(
-        <TriggerButton testID='trigger' disabled>
+        <MediaButton testID='trigger' disabled>
           Label
-        </TriggerButton>,
+        </MediaButton>,
       );
       const trigger = screen.getByTestId('trigger');
       expect(trigger.props.accessibilityState.disabled).toBe(true);
@@ -104,9 +104,9 @@ describe('TriggerButton', () => {
     it('should call onPress when pressed', () => {
       const handlePress = jest.fn();
       renderWithProvider(
-        <TriggerButton testID='trigger' onPress={handlePress}>
+        <MediaButton testID='trigger' onPress={handlePress}>
           Press me
-        </TriggerButton>,
+        </MediaButton>,
       );
 
       fireEvent.press(screen.getByTestId('trigger'));
@@ -116,9 +116,9 @@ describe('TriggerButton', () => {
     it('should not call onPress when disabled', () => {
       const handlePress = jest.fn();
       renderWithProvider(
-        <TriggerButton testID='trigger' onPress={handlePress} disabled>
+        <MediaButton testID='trigger' onPress={handlePress} disabled>
           Disabled
-        </TriggerButton>,
+        </MediaButton>,
       );
 
       fireEvent.press(screen.getByTestId('trigger'));
@@ -130,9 +130,9 @@ describe('TriggerButton', () => {
     it('should forward ref', () => {
       const ref = createRef<View>();
       renderWithProvider(
-        <TriggerButton ref={ref} testID='trigger'>
+        <MediaButton ref={ref} testID='trigger'>
           Label
-        </TriggerButton>,
+        </MediaButton>,
       );
       expect(ref.current).toBeTruthy();
     });
@@ -142,13 +142,13 @@ describe('TriggerButton', () => {
     it('should apply custom style and lx props', () => {
       const customStyle: ViewStyle = { marginTop: 16 };
       renderWithProvider(
-        <TriggerButton
+        <MediaButton
           testID='trigger'
           style={customStyle}
           lx={{ padding: 's8' }}
         >
           Styled
-        </TriggerButton>,
+        </MediaButton>,
       );
       const trigger = screen.getByTestId('trigger');
       expect(trigger.props.style).toBeDefined();

package/src/lib/Components/{TriggerButton/TriggerButton.tsx → MediaButton/MediaButton.tsx}

@@ -3,10 +3,10 @@ import { StyleSheet, Text, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { ChevronDown } from '../../Symbols';
 import { Pressable } from '../Utility';
-import type { TriggerButtonProps } from './types';
+import type { MediaButtonProps } from './types';
 
-type Appearance = NonNullable<TriggerButtonProps['appearance']>;
-type Size = NonNullable<TriggerButtonProps['size']>;
+type Appearance = NonNullable<MediaButtonProps['appearance']>;
+type Size = NonNullable<MediaButtonProps['size']>;
 type IconType = 'flat' | 'rounded' | 'none';
 
 const useStyles = ({
@@ -129,7 +129,7 @@ const useStyles = ({
 };
 
 /**
- * Trigger button for select/dropdown components. Displays a label with an optional
+ * Media button for select/dropdown components. Displays a label with an optional
  * leading icon and a trailing chevron indicator.
  *
  * This component is intended to be used exclusively as the trigger inside a Select or
@@ -139,16 +139,16 @@ const useStyles = ({
  * @see {@link https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6389-45680 Figma}
  *
  * @example
- * import { TriggerButton } from '@ledgerhq/lumen-ui-rnative';
+ * import { MediaButton } from '@ledgerhq/lumen-ui-rnative';
  * import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
- * <TriggerButton icon={<Settings size={20} />} iconType="flat">
+ * <MediaButton icon={<Settings size={20} />} iconType="flat">
  *   Network
- * </TriggerButton>
+ * </MediaButton>
  *
- * <TriggerButton>All accounts</TriggerButton>
+ * <MediaButton>All accounts</MediaButton>
  */
-export const TriggerButton = ({
+export const MediaButton = ({
   lx,
   style,
   appearance = 'gray',
@@ -156,10 +156,11 @@ export const TriggerButton = ({
   disabled = false,
   icon,
   iconType = 'flat',
+  hideChevron = false,
   children: label,
   ref,
   ...props
-}: TriggerButtonProps) => {
+}: MediaButtonProps) => {
   const effectiveIconType: IconType = icon ? iconType : 'none';
 
   return (
@@ -173,39 +174,42 @@ export const TriggerButton = ({
       {...props}
     >
       {({ pressed }) => (
-        <TriggerButtonContent
+        <MediaButtonContent
           appearance={appearance}
           size={size}
           disabled={disabled}
           pressed={pressed}
           iconType={effectiveIconType}
           icon={icon}
+          hideChevron={hideChevron}
         >
           {label}
-        </TriggerButtonContent>
+        </MediaButtonContent>
       )}
     </Pressable>
   );
 };
 
-type TriggerButtonContentProps = PropsWithChildren<{
+type MediaButtonContentProps = PropsWithChildren<{
   appearance: Appearance;
   size: Size;
   disabled: boolean;
   pressed: boolean;
   iconType: IconType;
-  icon?: TriggerButtonProps['icon'];
+  icon?: MediaButtonProps['icon'];
+  hideChevron: boolean;
 }>;
 
-const TriggerButtonContent = ({
+const MediaButtonContent = ({
   appearance,
   size,
   disabled,
   pressed,
   iconType,
   icon,
+  hideChevron,
   children,
-}: TriggerButtonContentProps) => {
+}: MediaButtonContentProps) => {
   const styles = useStyles({ appearance, size, disabled, pressed, iconType });
 
   return (
@@ -215,11 +219,13 @@ const TriggerButtonContent = ({
         <Text style={styles.label} numberOfLines={1} ellipsizeMode='tail'>
           {children}
         </Text>
-        <ChevronDown
-          size={20}
-          style={styles.chevron}
-          testID='button-trigger-chevron'
-        />
+        {!hideChevron && (
+          <ChevronDown
+            size={20}
+            style={styles.chevron}
+            testID='button-trigger-chevron'
+          />
+        )}
       </View>
     </View>
   );

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

@@ -0,0 +1,2 @@
+export { MediaButton } from './MediaButton';
+export * from './types';

package/src/lib/Components/{TriggerButton → MediaButton}/types.ts

@@ -1,14 +1,14 @@
 import { ReactNode } from 'react';
 import { StyledPressableProps } from '../../../styles';
 
-export type TriggerButtonProps = {
+export type MediaButtonProps = {
   /**
-   * The visual style of the trigger button.
+   * The visual style of the media button.
    * @default 'gray'
    */
   appearance?: 'gray' | 'transparent' | 'no-background';
   /**
-   * The size variant of the trigger button.
+   * The size variant of the media button.
    * @default 'md'
    */
   size?: 'sm' | 'md';
@@ -27,12 +27,17 @@ export type TriggerButtonProps = {
    */
   iconType?: 'flat' | 'rounded';
   /**
-   * Whether the trigger button is disabled.
+   * When true, hides the trailing chevron indicator.
+   * @default false
+   */
+  hideChevron?: boolean;
+  /**
+   * Whether the media button is disabled.
    * @default false
    */
   disabled?: boolean;
   /**
-   * The label content of the trigger button.
+   * The label content of the media button.
    */
   children: ReactNode;
 } & Omit<StyledPressableProps, 'children'>;

package/src/lib/Components/NavBar/NavBar.tsx

@@ -286,9 +286,6 @@ const useStyles = ({ density }: StyleParams) => {
           },
         ]),
         contentContainer: StyleSheet.flatten([
-          {
-            flex: 1,
-          },
           {
             ...(density === 'compact' && {
               paddingHorizontal: t.spacings.s48,

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

@@ -0,0 +1,37 @@
+import figma from '@figma/code-connect';
+import {
+  OptionList,
+  OptionListContent,
+  OptionListEmptyState,
+  OptionListItem,
+  OptionListItemContent,
+  OptionListItemDescription,
+  OptionListItemText,
+} from './OptionList';
+
+figma.connect(
+  OptionList,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=15941-6709',
+  {
+    imports: [
+      "import { OptionList, OptionListContent, OptionListItem, OptionListItemContent, OptionListItemText, OptionListItemDescription, OptionListEmptyState } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    example: () => (
+      <OptionList items={[]} value={''} onValueChange={() => {}}>
+        <OptionListContent
+          renderItem={(item) => (
+            <OptionListItem value={item.value}>
+              <OptionListItemContent>
+                <OptionListItemText>{item.label}</OptionListItemText>
+                <OptionListItemDescription>
+                  {item.description}
+                </OptionListItemDescription>
+              </OptionListItemContent>
+            </OptionListItem>
+          )}
+        />
+        <OptionListEmptyState title='No options available' />
+      </OptionList>
+    ),
+  },
+);

package/src/lib/Components/OptionList/OptionList.mdx

@@ -0,0 +1,304 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import * as OptionListStories from './OptionList.stories';
+import {
+  CustomTabs,
+  Tab,
+  DoVsDontRow,
+  DoBlockItem,
+  DontBlockItem,
+} from '../../../../.storybook/components';
+
+<Meta title='Selection/OptionList' of={OptionListStories} />
+
+# OptionList
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+OptionList is a data-driven, composable selection list designed to be embedded inside a `BottomSheet`, a new screen, or any container. Unlike `Select`, it does not manage its own trigger or modal — consumers compose it within their own layout.
+
+It handles **selection state**, **automatic grouping** (via a `group` field on items), and exposes a `renderItem` callback for full control over item rendering.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=15941-6709&m=dev).
+
+## Anatomy
+
+<Canvas of={OptionListStories.Base} />
+
+- **OptionList**: Root component managing selection state and item processing
+- **OptionListTrigger**: Input-style trigger with floating label and chevron — displays the selected value and opens a BottomSheet on press
+- **OptionListContent**: Iterates items, renders group labels and separators automatically, calls `renderItem`
+- **OptionListItem**: Pressable item with selection check mark
+- **OptionListItemLeading**: Slot for leading visuals (icons, avatars)
+- **OptionListItemContent**: Flex column for title + description
+- **OptionListItemContentRow**: Horizontal row for placing elements side-by-side (e.g. title + tag)
+- **OptionListItemText**: Styled title text
+- **OptionListItemDescription**: Styled description text
+
+## Properties
+
+### Grouped items
+
+Items with a `group` field are automatically grouped with labels and separators:
+
+<Canvas of={OptionListStories.WithGroups} />
+
+### Complex item layout
+
+Use `OptionListItemContentRow` to place a `Tag` next to the title:
+
+<Canvas of={OptionListStories.WithContentRow} />
+
+### Disabled items
+
+Individual items can be disabled:
+
+<Canvas of={OptionListStories.WithDisabledItems} />
+
+### Groups + complex layout
+
+Combining grouping with rich item content:
+
+<Canvas of={OptionListStories.GroupedWithContentRow} />
+
+### Trigger showcase
+
+OptionList can be opened from any trigger. `MediaButton` supports multiple appearances (`gray`, `transparent`, `no-background`), optional icons (`flat` / `rounded`), and disabled state:
+
+<Canvas of={OptionListStories.TriggerShowcase} />
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic usage
+
+```tsx
+import {
+  OptionList,
+  OptionListContent,
+  OptionListItem,
+  OptionListItemContent,
+  OptionListItemText,
+} from '@ledgerhq/lumen-ui-rnative';
+
+const items = [
+  { value: 'a', label: 'Option A' },
+  { value: 'b', label: 'Option B' },
+];
+
+function MyList() {
+  const [value, setValue] = useState<string | null>(null);
+
+  return (
+    <OptionList items={items} value={value} onValueChange={setValue}>
+      <OptionListContent
+        renderItem={(item) => (
+          <OptionListItem value={item.value}>
+            <OptionListItemContent>
+              <OptionListItemText>{item.label}</OptionListItemText>
+            </OptionListItemContent>
+          </OptionListItem>
+        )}
+      />
+    </OptionList>
+  );
+}
+```
+
+## Inside a BottomSheet
+
+Use `OptionListTrigger` as the input-style trigger — it provides a floating label that animates up when a value is selected, and a chevron indicator. Pass children only when a value is selected so the label stays centered when empty.
+
+```tsx
+import {
+  OptionList, OptionListContent, OptionListItem,
+  OptionListItemContent, OptionListItemText, OptionListTrigger,
+  BottomSheet, BottomSheetHeader, BottomSheetView,
+  useBottomSheetRef, Text,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function CurrencyPicker() {
+  const [value, setValue] = useState<string | null>(null);
+  const ref = useBottomSheetRef();
+  const selected = items.find((i) => i.value === value);
+
+  return (
+    <>
+      <OptionListTrigger
+        label='Currency'
+        onPress={() => ref.current?.present()}
+      >
+        {selected && <Text lx={{ color: 'base' }}>{selected.label}</Text>}
+      </OptionListTrigger>
+      <BottomSheet
+        ref={ref}
+        enableDynamicSizing
+        snapPoints={null}
+        onClose={() => ref.current?.dismiss()}
+      >
+        <BottomSheetView>
+          <BottomSheetHeader title='Pick a currency' />
+          <OptionList
+            items={items}
+            value={value}
+            onValueChange={(v) => { setValue(v); ref.current?.dismiss(); }}
+          >
+            <OptionListContent
+              renderItem={(item) => (
+                <OptionListItem value={item.value}>
+                  <OptionListItemContent>
+                    <OptionListItemText>{item.label}</OptionListItemText>
+                  </OptionListItemContent>
+                </OptionListItem>
+              )}
+            />
+          </OptionList>
+        </BottomSheetView>
+      </BottomSheet>
+    </>
+  );
+}
+```
+
+## Grouping
+
+Add a `group` field to items — labels and separators are rendered automatically:
+
+```tsx
+const items = [
+  { value: 'btc', label: 'Bitcoin', group: 'Crypto' },
+  { value: 'eth', label: 'Ethereum', group: 'Crypto' },
+  { value: 'usd', label: 'US Dollar', group: 'Fiat' },
+];
+```
+
+## Controlled vs uncontrolled
+
+Use `value` + `onValueChange` (controlled) when OptionList is inside a BottomSheet — the sheet unmounts children on dismiss, so internal state is lost. Use `defaultValue` (uncontrolled) only when the component stays mounted (e.g. inline in a screen).
+
+## Custom item layout with meta
+
+Use `meta` for arbitrary data, and sub-components for layout:
+
+```tsx
+const items = [
+  { value: 'eth', label: 'Ethereum', meta: { ticker: 'ETH', tag: 'ERC-20' } },
+];
+
+<OptionListContent
+  renderItem={(item) => {
+    const meta = item.meta as { ticker: string; tag: string };
+    return (
+      <OptionListItem value={item.value}>
+        <OptionListItemLeading>
+          <Spot appearance='icon' icon={Wallet} />
+        </OptionListItemLeading>
+        <OptionListItemContent>
+          <OptionListItemContentRow>
+            <OptionListItemText>{item.label}</OptionListItemText>
+            <Tag label={meta.tag} appearance='gray' size='sm' />
+          </OptionListItemContentRow>
+          <OptionListItemDescription>{meta.ticker}</OptionListItemDescription>
+        </OptionListItemContent>
+      </OptionListItem>
+    );
+  }}
+/>
+```
+
+## Do's and Don'ts
+
+<div className='flex flex-col gap-24'>
+
+<DoVsDontRow>
+<DoBlockItem
+title='Pass items as a flat array'
+description='Use the group field for grouping — the component handles labels and separators automatically.'
+>
+
+{/* prettier-ignore */}
+```tsx
+<OptionList
+  items={[
+    { value: 'a', label: 'A', group: 'Group 1' },
+    { value: 'b', label: 'B', group: 'Group 2' },
+  ]}
+  value={value}
+  onValueChange={setValue}
+>
+  <OptionListContent renderItem={...} />
+</OptionList>
+```
+
+</DoBlockItem>
+<DontBlockItem
+title="Don't manually render group labels or separators"
+description='OptionListContent handles group rendering internally based on item data.'
+>
+
+{/* prettier-ignore */}
+```tsx
+<OptionList
+  items={items}
+  value={value}
+  onValueChange={setValue}
+>
+  <Text>Group 1</Text>
+  <OptionListContent renderItem={...} />
+  <Divider />
+  <Text>Group 2</Text>
+  <OptionListContent renderItem={...} />
+</OptionList>
+```
+
+</DontBlockItem>
+</DoVsDontRow>
+
+<DoVsDontRow>
+<DoBlockItem
+title='Compose OptionList inside your own container'
+description='OptionList is display-only — wrap it in a BottomSheet, screen, or any layout.'
+>
+
+{/* prettier-ignore */}
+```tsx
+<BottomSheet ref={ref}>
+  <BottomSheetView>
+    <OptionList items={items} value={value} onValueChange={setValue}>
+      <OptionListContent renderItem={...} />
+    </OptionList>
+  </BottomSheetView>
+</BottomSheet>
+```
+
+</DoBlockItem>
+<DontBlockItem
+title="Don't expect OptionList to manage the BottomSheet"
+description='Use OptionListTrigger to open the sheet yourself — OptionList only handles selection state, not the container.'
+>
+
+{/* prettier-ignore */}
+```tsx
+<OptionList
+  items={items}
+  value={value}
+  onValueChange={setValue}
+  trigger={<Button>Open</Button>}
+>
+  <OptionListContent renderItem={...} />
+</OptionList>
+```
+
+</DontBlockItem>
+</DoVsDontRow>
+
+</div>
+
+</Tab>
+</CustomTabs>