@ledgerhq/lumen-ui-rnative 0.1.47 → 0.1.49

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

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { Tag } from '../Tag';
+import { MediaCard, MediaCardTitle } from './MediaCard';
+
+figma.connect(
+  MediaCard,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=15160-2853',
+  {
+    imports: [
+      "import { MediaCard, MediaCardTitle } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Tag } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    props: {
+      title: figma.string('title'),
+      tag: figma.boolean('show-tag', {
+        true: <Tag label='Label' appearance='base' />,
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <MediaCard imageUrl='/image.jpg' onPress={() => {}} onClose={() => {}}>
+        {props.tag}
+        <MediaCardTitle>{props.title}</MediaCardTitle>
+      </MediaCard>
+    ),
+  },
+);

package/src/lib/Components/MediaCard/MediaCard.mdx

@@ -1,7 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as MediaCardStories from './MediaCard.stories';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/MediaCard' of={MediaCardStories} />
 
@@ -105,7 +104,6 @@ Use the `lx` prop for layout adjustments like margins or positioning:
 </MediaCard>
 ```
 
-<CommonRulesDoAndDont />
 
 </Tab>
 </CustomTabs>

package/src/lib/Components/MediaImage/MediaImage.mdx

@@ -2,7 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as MediaImageStories from './MediaImage.stories';
 import { MediaImage } from './MediaImage';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 
 <Meta title='Core/MediaImage' of={MediaImageStories} />

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

@@ -0,0 +1,116 @@
+import figma from '@figma/code-connect';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
+import { MediaTag } from './MediaTag';
+
+figma.connect(
+  MediaTag,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=16793-36383',
+  {
+    imports: [
+      "import { MediaTag } from '@ledgerhq/lumen-ui-rnative'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    variant: { 'leading-icon': 'coin' },
+    props: {
+      label: figma.string('label'),
+      appearance: figma.enum('appearance', {
+        base: 'base',
+        gray: 'gray',
+        accent: 'accent',
+        'accent-subtle': 'accent-subtle',
+        success: 'success',
+        error: 'error',
+        warning: 'warning',
+        white: 'white',
+      }),
+      size: figma.enum('size', {
+        md: 'md',
+        sm: 'sm',
+      }),
+      tagSize: figma.enum('size', {
+        md: 16,
+        sm: 12,
+      }),
+      disabled: figma.enum('appearance', {
+        disabled: true,
+      }),
+      coin: figma.nestedProps('coin', {
+        asset: figma.enum('asset', {
+          btc: 'btc',
+          eth: 'eth',
+        }),
+      }),
+    },
+    example: (props) => (
+      <MediaTag
+        disabled={props.disabled}
+        label={props.label}
+        appearance={props.appearance}
+        size={props.size}
+        leadingContent={
+          <CryptoIcon
+            ticker={props.coin.asset}
+            ledgerId={props.coin.asset}
+            size={props.tagSize}
+          />
+        }
+      />
+    ),
+  },
+);
+
+figma.connect(
+  MediaTag,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=16793-36383',
+  {
+    imports: [
+      "import { MediaTag } from '@ledgerhq/lumen-ui-rnative'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    variant: { 'leading-icon': 'network' },
+    props: {
+      label: figma.string('label'),
+      appearance: figma.enum('appearance', {
+        base: 'base',
+        gray: 'gray',
+        accent: 'accent',
+        'accent-subtle': 'accent-subtle',
+        success: 'success',
+        error: 'error',
+        warning: 'warning',
+        white: 'white',
+      }),
+      size: figma.enum('size', {
+        md: 'md',
+        sm: 'sm',
+      }),
+      tagSize: figma.enum('size', {
+        md: 16,
+        sm: 12,
+      }),
+      disabled: figma.enum('appearance', {
+        disabled: true,
+      }),
+      network: figma.nestedProps('network', {
+        ticker: figma.enum('network', {
+          eth: 'eth',
+        }),
+      }),
+    },
+    example: (props) => (
+      <MediaTag
+        disabled={props.disabled}
+        label={props.label}
+        appearance={props.appearance}
+        size={props.size}
+        leadingContent={
+          <CryptoIcon
+            ticker={props.network.ticker}
+            ledgerId={props.network.ticker}
+            size={props.tagSize}
+          />
+        }
+      />
+    ),
+  },
+);

package/src/lib/Components/MediaTag/MediaTag.mdx

@@ -1,8 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as MediaTagStories from './MediaTag.stories';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility/Box';
 
 <Meta title='Core/MediaTag' of={MediaTagStories} />

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

@@ -0,0 +1,84 @@
+import figma from '@figma/code-connect';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
+import {
+  IconButton,
+  NavBarCoinCapsule,
+  NavBarTrailing,
+  TileDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+import { Settings } from '../../Symbols';
+import { NavBar, NavBarBackButton, NavBarContent, NavBarTitle } from './NavBar';
+
+figma.connect(
+  NavBar,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=1426-4697',
+  {
+    imports: [
+      "import { NavBar, NavBarBackButton, NavBarContent, NavBarTitle } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    props: {
+      density: figma.enum('density', {
+        compact: 'compact',
+        expanded: 'expanded',
+      }),
+      backButton: figma.boolean('show-back', {
+        true: <NavBarBackButton onPress={() => {}} />,
+        false: undefined,
+      }),
+      title: figma.boolean('show-title', {
+        true: <NavBarTitle>Title</NavBarTitle>,
+        false: undefined,
+      }),
+      description: figma.boolean('show-description', {
+        true: figma.boolean('show-network', {
+          true: (
+            <TileDescription>
+              Description{' '}
+              <CryptoIcon ledgerId='ethereum' ticker='ETH' size={20} />
+            </TileDescription>
+          ),
+          false: <TileDescription>Description</TileDescription>,
+        }),
+        false: undefined,
+      }),
+      coinCapsule: figma.enum('content', {
+        asset: (
+          <NavBarCoinCapsule
+            ticker='Bitcoin'
+            leadingContent={
+              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />
+            }
+          />
+        ),
+      }),
+      trailing: figma.boolean('show-trailing-icon', {
+        true: (
+          <NavBarTrailing>
+            <IconButton icon={Settings} accessibilityLabel='Settings' />
+          </NavBarTrailing>
+        ),
+        false: undefined,
+      }),
+      secondaryTrailing: figma.boolean('show-second-trailing-icon', {
+        true: (
+          <NavBarTrailing>
+            <IconButton icon={Settings} accessibilityLabel='Settings' />
+          </NavBarTrailing>
+        ),
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <NavBar density={props.density}>
+        {props.backButton}
+        <NavBarContent>
+          {props.title}
+          {props.description}
+        </NavBarContent>
+        {props.coinCapsule}
+        {props.trailing}
+        {props.secondaryTrailing}
+      </NavBar>
+    ),
+  },
+);

package/src/lib/Components/NavBar/NavBar.mdx

@@ -3,7 +3,6 @@ import { Box } from '../Utility';
 import * as NavBarStories from './NavBar.stories';
 import { NavBar, NavBarBackButton, NavBarContent } from './NavBar';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/NavBar' of={NavBarStories} />
 
@@ -253,7 +252,6 @@ export default function DetailsScreen() {
 }
 ```
 
-<CommonRulesDoAndDont />
 
 </Tab>
 </CustomTabs>

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

@@ -3,9 +3,6 @@ import * as OptionListStories from './OptionList.stories';
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
 
 <Meta title='Core/OptionList' of={OptionListStories} />
@@ -97,6 +94,8 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 
 ## Basic usage
 
+> **Recommended:** prefer the [type-safe variant](#type-safe-variant) below. It ties `value`, `items[].value`, `OptionListItem.value`, and the `renderItem(item).meta` shape to one literal union plus an optional `TMeta`, dropping the `as Meta` casts in `renderItem`.
+
 ```tsx
 import {
   OptionList,
@@ -130,6 +129,49 @@ function MyList() {
 }
 ```
 
+## Type-safe variant
+
+`OptionList` and its subcomponents communicate via context, so TypeScript cannot connect `value` / `items[].value` / `OptionListItem.value` on its own. A typo compiles. `createOptionList<T, TMeta>()` ties them together via one literal union (`T`) and an optional meta shape (`TMeta`) that flows into `renderItem(item)`, removing the `as` cast on `item.meta`.
+
+```tsx
+import { createOptionList } from '@ledgerhq/lumen-ui-rnative';
+import type { OptionListItemData } from '@ledgerhq/lumen-ui-rnative';
+
+type Network = 'eth' | 'sol' | 'btc';
+type NetworkMeta = { ticker: string; ledgerId: string };
+
+const NetworkList = createOptionList<Network, NetworkMeta>();
+
+const NETWORKS: OptionListItemData<Network, NetworkMeta>[] = [
+  { value: 'eth', label: 'Ethereum', meta: { ticker: 'ETH', ledgerId: 'ethereum' } },
+  { value: 'sol', label: 'Solana', meta: { ticker: 'SOL', ledgerId: 'solana' } },
+  { value: 'btc', label: 'Bitcoin', meta: { ticker: 'BTC', ledgerId: 'bitcoin' } },
+];
+
+function Example() {
+  const [value, setValue] = React.useState<Network | null>('eth');
+
+  return (
+    <NetworkList.OptionList items={NETWORKS} value={value} onValueChange={setValue}>
+      <NetworkList.OptionListContent
+        renderItem={({ value, label, meta }) =>
+          meta ? (
+            <NetworkList.OptionListItem value={value}>
+              <NetworkList.OptionListItemContent>
+                <NetworkList.OptionListItemText>{label}</NetworkList.OptionListItemText>
+                <NetworkList.OptionListItemDescription>
+                  {meta.ticker}
+                </NetworkList.OptionListItemDescription>
+              </NetworkList.OptionListItemContent>
+            </NetworkList.OptionListItem>
+          ) : null
+        }
+      />
+    </NetworkList.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.
@@ -231,93 +273,6 @@ const items = [
 />
 ```
 
-## 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>

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

@@ -14,6 +14,7 @@ import { Spot } from '../Spot';
 import { Tag } from '../Tag/Tag';
 import { Box, Text } from '../Utility';
 import {
+  createOptionList,
   OptionList,
   OptionListContent,
   OptionListEmptyState,
@@ -1008,3 +1009,65 @@ export const WithDefaultValue: Story = {
     </Box>
   ),
 };
+
+type TypedNetwork = 'eth' | 'sol' | 'btc';
+type TypedNetworkMeta = { ticker: string; ledgerId: string };
+const NetworkList = createOptionList<TypedNetwork, TypedNetworkMeta>();
+
+const TYPED_NETWORKS: OptionListItemData<TypedNetwork, TypedNetworkMeta>[] = [
+  {
+    value: 'eth',
+    label: 'Ethereum',
+    meta: { ticker: 'ETH', ledgerId: 'ethereum' },
+  },
+  {
+    value: 'sol',
+    label: 'Solana',
+    meta: { ticker: 'SOL', ledgerId: 'solana' },
+  },
+  {
+    value: 'btc',
+    label: 'Bitcoin',
+    meta: { ticker: 'BTC', ledgerId: 'bitcoin' },
+  },
+];
+
+export const TypesafeFactory: Story = {
+  render: () => {
+    const [value, setValue] = useState<TypedNetwork | null>('eth');
+
+    return (
+      <Box lx={{ width: 's320' }}>
+        <NetworkList.OptionList
+          items={TYPED_NETWORKS}
+          value={value}
+          onValueChange={setValue}
+        >
+          <NetworkList.OptionListContent
+            renderItem={({ value, label, meta }) =>
+              meta ? (
+                <NetworkList.OptionListItem value={value}>
+                  <NetworkList.OptionListItemLeading>
+                    <CryptoIcon
+                      ledgerId={meta.ledgerId}
+                      ticker={meta.ticker}
+                      size={32}
+                    />
+                  </NetworkList.OptionListItemLeading>
+                  <NetworkList.OptionListItemContent>
+                    <NetworkList.OptionListItemText>
+                      {label}
+                    </NetworkList.OptionListItemText>
+                    <NetworkList.OptionListItemDescription>
+                      {meta.ticker}
+                    </NetworkList.OptionListItemDescription>
+                  </NetworkList.OptionListItemContent>
+                </NetworkList.OptionListItem>
+              ) : null
+            }
+          />
+        </NetworkList.OptionList>
+      </Box>
+    );
+  },
+};

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

@@ -15,6 +15,7 @@ import {
   OptionListEmptyState,
   OptionListSearch,
   OptionListTrigger,
+  createOptionList,
 } from './OptionList';
 import type { OptionListItemData } from './types';
 
@@ -552,4 +553,43 @@ describe('OptionList', () => {
       expect(queryByText('Selected value')).toBeTruthy();
     });
   });
+
+  describe('createOptionList', () => {
+    it('returns typed components that render and select', () => {
+      type Value = 'a' | 'b' | 'c';
+      const typedItems: OptionListItemData<Value>[] = [
+        { value: 'a', label: 'Alpha' },
+        { value: 'b', label: 'Beta' },
+        { value: 'c', label: 'Gamma' },
+      ];
+      const {
+        OptionList: TypedList,
+        OptionListContent: TypedContent,
+        OptionListItem: TypedItem,
+        OptionListItemContent: TypedItemContent,
+        OptionListItemText: TypedItemText,
+      } = createOptionList<Value>();
+      const onValueChange = jest.fn();
+
+      const { getByText } = render(
+        <TestWrapper>
+          <TypedList items={typedItems} onValueChange={onValueChange}>
+            <TypedContent
+              renderItem={(item) => (
+                <TypedItem value={item.value}>
+                  <TypedItemContent>
+                    <TypedItemText>{item.label}</TypedItemText>
+                  </TypedItemContent>
+                </TypedItem>
+              )}
+            />
+          </TypedList>
+        </TestWrapper>,
+      );
+
+      fireEvent.press(getByText('Beta'));
+
+      expect(onValueChange).toHaveBeenCalledWith('b');
+    });
+  });
 });