@ledgerhq/lumen-ui-rnative 0.1.36 → 0.1.38

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

@@ -44,30 +44,40 @@ export const Base: Story = {
 export const SizeShowcase: Story = {
   render: () => (
     <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
-      <MediaButton size='sm' icon={<Star size={20} />} iconType='flat'>
+      <MediaButton
+        size='sm'
+        leadingContent={<Star size={20} />}
+        leadingContentShape='flat'
+      >
         Small
       </MediaButton>
-      <MediaButton size='md' icon={<Star size={20} />} iconType='flat'>
+      <MediaButton
+        size='md'
+        leadingContent={<Star size={20} />}
+        leadingContentShape='flat'
+      >
         Medium
       </MediaButton>
     </Box>
   ),
 };
 
-export const IconTypeShowcase: Story = {
+export const LeadingContentShapeShowcase: Story = {
   render: () => (
     <Box lx={{ flexDirection: 'column', gap: 's16' }}>
       <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
         <MediaButton
-          icon={<Settings size={20} />}
-          iconType='flat'
+          leadingContent={<Settings size={20} />}
+          leadingContentShape='flat'
           appearance='gray'
         >
           Flat icon (md)
         </MediaButton>
         <MediaButton
-          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size={32} />}
-          iconType='rounded'
+          leadingContent={
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={32} />
+          }
+          leadingContentShape='rounded'
           appearance='gray'
         >
           Rounded icon (md)
@@ -76,16 +86,18 @@ export const IconTypeShowcase: Story = {
       </Box>
       <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
         <MediaButton
-          icon={<Settings size={20} />}
-          iconType='flat'
+          leadingContent={<Settings size={20} />}
+          leadingContentShape='flat'
           appearance='gray'
           size='sm'
         >
           Flat icon (sm)
         </MediaButton>
         <MediaButton
-          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />}
-          iconType='rounded'
+          leadingContent={
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />
+          }
+          leadingContentShape='rounded'
           appearance='gray'
           size='sm'
         >
@@ -112,15 +124,17 @@ export const AppearanceShowcase: Story = {
             <MediaButton appearance={appearance}>{appearance}</MediaButton>
             <MediaButton
               appearance={appearance}
-              icon={<Settings size={20} />}
-              iconType='flat'
+              leadingContent={<Settings size={20} />}
+              leadingContentShape='flat'
             >
               {appearance}
             </MediaButton>
             <MediaButton
               appearance={appearance}
-              icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size={32} />}
-              iconType='rounded'
+              leadingContent={
+                <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={32} />
+              }
+              leadingContentShape='rounded'
             >
               {appearance}
             </MediaButton>

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

@@ -64,8 +64,8 @@ describe('MediaButton', () => {
       renderWithProvider(
         <MediaButton
           testID='trigger'
-          icon={<Settings size={20} testID='icon' />}
-          iconType='flat'
+          leadingContent={<Settings size={20} testID='icon' />}
+          leadingContentShape='flat'
         >
           Network
         </MediaButton>,
@@ -78,8 +78,8 @@ describe('MediaButton', () => {
       renderWithProvider(
         <MediaButton
           testID='trigger'
-          icon={<View testID='crypto-icon' />}
-          iconType='rounded'
+          leadingContent={<View testID='crypto-icon' />}
+          leadingContentShape='rounded'
         >
           Bitcoin
         </MediaButton>,

package/src/lib/Components/MediaButton/MediaButton.tsx

@@ -7,20 +7,20 @@ import type { MediaButtonProps } from './types';
 
 type Appearance = NonNullable<MediaButtonProps['appearance']>;
 type Size = NonNullable<MediaButtonProps['size']>;
-type IconType = 'flat' | 'rounded' | 'none';
+type LeadingContentShape = 'flat' | 'rounded' | 'none';
 
 const useStyles = ({
   appearance,
   size,
   disabled,
   pressed,
-  iconType,
+  leadingContentShape,
 }: {
   appearance: Appearance;
   size: Size;
   disabled: boolean;
   pressed: boolean;
-  iconType: IconType;
+  leadingContentShape: LeadingContentShape;
 }) => {
   return useStyleSheet(
     (t) => {
@@ -45,7 +45,10 @@ const useStyles = ({
         paddingRight: number;
       };
 
-      const paddingMap: Record<Size, Record<IconType, PaddingStyle>> = {
+      const paddingMap: Record<
+        Size,
+        Record<LeadingContentShape, PaddingStyle>
+      > = {
         md: {
           flat: {
             paddingTop: t.spacings.s12,
@@ -97,7 +100,7 @@ const useStyles = ({
             backgroundColor: bgColors[appearance],
             gap: t.spacings.s8,
           },
-          paddingMap[size][iconType],
+          paddingMap[size][leadingContentShape],
           pressed && { backgroundColor: pressedBgColors[appearance] },
           disabled && { backgroundColor: t.colors.bg.disabled },
           appearance === 'no-background' &&
@@ -115,7 +118,7 @@ const useStyles = ({
           alignItems: 'center',
           gap: t.spacings.s2,
         },
-        icon: {
+        leadingContent: {
           flexShrink: 0,
         },
         chevron: {
@@ -124,15 +127,15 @@ const useStyles = ({
         },
       };
     },
-    [appearance, size, disabled, pressed, iconType],
+    [appearance, size, disabled, pressed, leadingContentShape],
   );
 };
 
 /**
- * Media button for select/dropdown components. Displays a label with an optional
- * leading icon and a trailing chevron indicator.
+ * Media button for option list/dropdown components. Displays a label with an optional
+ * leading content and a trailing chevron indicator.
  *
- * This component is intended to be used exclusively as the trigger inside a Select or
+ * This component is intended to be used exclusively as the trigger inside an OptionList or
  * dropdown pattern. It should not be used as a standalone action button — use `Button`
  * or `IconButton` instead.
  *
@@ -142,7 +145,7 @@ const useStyles = ({
  * import { MediaButton } from '@ledgerhq/lumen-ui-rnative';
  * import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
- * <MediaButton icon={<Settings size={20} />} iconType="flat">
+ * <MediaButton leadingContent={<Settings size={20} />} leadingContentShape="flat">
  *   Network
  * </MediaButton>
  *
@@ -154,14 +157,16 @@ export const MediaButton = ({
   appearance = 'gray',
   size = 'md',
   disabled = false,
-  icon,
-  iconType = 'flat',
+  leadingContent,
+  leadingContentShape = 'flat',
   hideChevron = false,
   children: label,
   ref,
   ...props
 }: MediaButtonProps) => {
-  const effectiveIconType: IconType = icon ? iconType : 'none';
+  const effectiveLeadingContentShape: LeadingContentShape = leadingContent
+    ? leadingContentShape
+    : 'none';
 
   return (
     <Pressable
@@ -179,8 +184,8 @@ export const MediaButton = ({
           size={size}
           disabled={disabled}
           pressed={pressed}
-          iconType={effectiveIconType}
-          icon={icon}
+          leadingContent={leadingContent}
+          leadingContentShape={effectiveLeadingContentShape}
           hideChevron={hideChevron}
         >
           {label}
@@ -195,8 +200,8 @@ type MediaButtonContentProps = PropsWithChildren<{
   size: Size;
   disabled: boolean;
   pressed: boolean;
-  iconType: IconType;
-  icon?: MediaButtonProps['icon'];
+  leadingContent?: MediaButtonProps['leadingContent'];
+  leadingContentShape: LeadingContentShape;
   hideChevron: boolean;
 }>;
 
@@ -205,16 +210,24 @@ const MediaButtonContent = ({
   size,
   disabled,
   pressed,
-  iconType,
-  icon,
+  leadingContent,
+  leadingContentShape,
   hideChevron,
   children,
 }: MediaButtonContentProps) => {
-  const styles = useStyles({ appearance, size, disabled, pressed, iconType });
+  const styles = useStyles({
+    appearance,
+    size,
+    disabled,
+    pressed,
+    leadingContentShape,
+  });
 
   return (
     <View style={styles.container} testID='button-trigger-content'>
-      {icon && <View style={styles.icon}>{icon}</View>}
+      {leadingContent && (
+        <View style={styles.leadingContent}>{leadingContent}</View>
+      )}
       <View style={styles.labelWrapper}>
         <Text style={styles.label} numberOfLines={1} ellipsizeMode='tail'>
           {children}

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

@@ -13,19 +13,19 @@ export type MediaButtonProps = {
    */
   size?: 'sm' | 'md';
   /**
-   * An optional pre-rendered icon element to display as leading content.
-   * Consumer is responsible for sizing the icon.
+   * An optional leading content, usually a pre-rendered icon.
+   * Consumer is responsible for sizing the icon (typically 20px).
    */
-  icon?: ReactNode;
+  leadingContent?: ReactNode;
   /**
-   * Determines the padding scheme when an icon is present.
+   * Determines the padding scheme when `leadingContent` is present.
    * - `'flat'`: Standard padding for line/interface icons.
    * - `'rounded'`: Tighter left padding for circular icons with their own background (e.g., crypto icons).
    *
-   * Only relevant when `icon` is provided.
+   * Only relevant when `leadingContent` is provided.
    * @default 'flat'
    */
-  iconType?: 'flat' | 'rounded';
+  leadingContentShape?: 'flat' | 'rounded';
   /**
    * When true, hides the trailing chevron indicator.
    * @default false

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

@@ -37,7 +37,7 @@ MediaImage displays an image with consistent sizing and shape. When the image fa
 
 ### Sizes
 
-Nine sizes are available (12, 16, 20, 24, 32, 40, 48, 56, 64). Border radius scales with size.
+Ten sizes are available (12, 16, 20, 24, 32, 40, 48, 56, 64, 72). Border radius scales with size.
 
 <Canvas of={MediaImageStories.SizeShowcase} />
 

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

@@ -42,6 +42,7 @@ export const SizeShowcase: Story = {
       <MediaImage src={exampleSrc} alt='Size 48' size={48} />
       <MediaImage src={exampleSrc} alt='Size 56' size={56} />
       <MediaImage src={exampleSrc} alt='Size 64' size={64} />
+      <MediaImage src={exampleSrc} alt='Size 72' size={72} />
     </Box>
   ),
 };
@@ -67,6 +68,7 @@ export const FallbackShowcase: Story = {
       <MediaImage fallback='Bitcoin' alt='Bitcoin' size={48} />
       <MediaImage fallback='Bitcoin' alt='Bitcoin' size={56} />
       <MediaImage fallback='Bitcoin' alt='Bitcoin' size={64} />
+      <MediaImage fallback='Bitcoin' alt='Bitcoin' size={72} />
     </Box>
   ),
 };
@@ -83,6 +85,25 @@ export const LoadingShowcase: Story = {
       <MediaImage loading alt='Loading' size={48} />
       <MediaImage loading alt='Loading' size={56} />
       <MediaImage loading alt='Loading' size={64} />
+      <MediaImage loading alt='Loading' size={72} />
+    </Box>
+  ),
+};
+
+export const DisabledShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'flex-end', gap: 's16' }}>
+      <MediaImage src={exampleSrc} alt='Cardano' size={32} disabled />
+      <MediaImage src={exampleSrc} alt='Cardano' size={48} disabled />
+      <MediaImage
+        src={exampleSrc}
+        alt='Cardano'
+        size={48}
+        shape='circle'
+        disabled
+      />
+      <MediaImage fallback='Bitcoin' alt='Bitcoin' size={48} disabled />
+      <MediaImage alt='Empty' size={48} disabled />
     </Box>
   ),
 };

package/src/lib/Components/MediaImage/MediaImage.tsx

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useEffect, useState } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
@@ -19,6 +20,7 @@ const borderRadiusMap: Record<MediaImageSize, BorderRadiusKey> = {
   48: 'md',
   56: 'lg',
   64: 'lg',
+  72: 'lg',
 };
 
 export const fontSizeMap: Record<MediaImageSize, number> = {
@@ -31,14 +33,17 @@ export const fontSizeMap: Record<MediaImageSize, number> = {
   48: 24,
   56: 24,
   64: 24,
+  72: 32,
 };
 
 const useStyles = ({
   size,
   shape,
+  disabled,
 }: {
   size: MediaImageSize;
   shape: MediaImageShape;
+  disabled: boolean;
 }) => {
   return useStyleSheet(
     (t) => {
@@ -61,6 +66,7 @@ const useStyles = ({
           outlineWidth: 1,
           outlineOffset: -1,
           outlineStyle: 'solid',
+          ...(disabled && { opacity: 0.3 }),
         },
         image: {
           width: '100%',
@@ -72,7 +78,7 @@ const useStyles = ({
         },
       };
     },
-    [size, shape],
+    [size, shape, disabled],
   );
 };
 
@@ -99,6 +105,7 @@ export const MediaImage = ({
   shape = 'square',
   fallback,
   loading = false,
+  disabled: disabledProp = false,
   lx = {},
   style,
   ref,
@@ -106,7 +113,11 @@ export const MediaImage = ({
 }: MediaImageProps) => {
   const [error, setError] = useState(false);
   const shouldFallback = !src || error;
-  const styles = useStyles({ size, shape });
+  const disabled = useDisabledContext({
+    consumerName: 'MediaImage',
+    mergeWith: { disabled: disabledProp },
+  });
+  const styles = useStyles({ size, shape, disabled });
 
   useEffect(() => {
     setError(false);
@@ -119,6 +130,7 @@ export const MediaImage = ({
       style={StyleSheet.flatten([styles.root, style])}
       accessibilityRole='image'
       accessibilityLabel={alt}
+      accessibilityState={{ disabled }}
       {...props}
     >
       {loading && <Skeleton style={styles.skeleton} />}

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

@@ -1,6 +1,6 @@
 import type { StyledViewProps } from '../../../styles';
 
-export type MediaImageSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64;
+export type MediaImageSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
 
 export type MediaImageShape = 'square' | 'circle';
 
@@ -36,4 +36,10 @@ export type MediaImageProps = {
    * @default false
    */
   loading?: boolean;
+  /**
+   * Shows a disabled appearance.
+   * @optional
+   * @default false
+   */
+  disabled?: boolean;
 } & Omit<StyledViewProps, 'children'>;

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

@@ -2,12 +2,12 @@ import { useStyleSheet } from '../../../styles';
 import { Box, Text } from '../Utility';
 import type { CoinCapsuleProps } from './types';
 
-export function CoinCapsule({ ticker, icon }: CoinCapsuleProps) {
+export function CoinCapsule({ ticker, leadingContent }: CoinCapsuleProps) {
   const styles = useStyles();
 
   return (
     <Box style={styles.container}>
-      {icon}
+      {leadingContent}
       <Text style={styles.text}>{ticker}</Text>
     </Box>
   );

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

@@ -7,7 +7,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Navigation/NavBar' of={NavBarStories} />
 
-# 🧭 NavBar
+# NavBar
 
 <CustomTabs>
   <Tab label="Overview">
@@ -135,7 +135,7 @@ import { NavBarCoinCapsule } from '@ledgerhq/lumen-ui-rnative';
   <NavBarContent>
     <NavBarCoinCapsule
       ticker='BTC'
-      icon={<Icon ledgerId='bitcoin' ticker='BTC' size={24} />}
+      leadingContent={<Icon ledgerId='bitcoin' ticker='BTC' size={24} />}
     />
     <NavBarTitle>Bitcoin</NavBarTitle>
   </NavBarContent>

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

@@ -111,7 +111,9 @@ export const WithCoinCapsule: Story = {
       <NavBarContent>
         <NavBarCoinCapsule
           ticker='BTC'
-          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />}
+          leadingContent={
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />
+          }
         />
       </NavBarContent>
       <NavBarTrailing>

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

@@ -69,7 +69,7 @@ describe('NavBar', () => {
       renderWithProvider(
         <NavBar testID='navbar' density='compact'>
           <NavBarContent>
-            <NavBarCoinCapsule ticker='BTC' icon={<MockIcon />} />
+            <NavBarCoinCapsule ticker='BTC' leadingContent={<MockIcon />} />
           </NavBarContent>
         </NavBar>,
       );
@@ -252,11 +252,11 @@ describe('NavBar', () => {
   });
 
   describe('NavBarCoinCapsule', () => {
-    it('should render ticker and icon', () => {
+    it('should render ticker and leading content', () => {
       renderWithProvider(
         <NavBar density='compact'>
           <NavBarContent>
-            <NavBarCoinCapsule ticker='ETH' icon={<MockIcon />} />
+            <NavBarCoinCapsule ticker='ETH' leadingContent={<MockIcon />} />
           </NavBarContent>
         </NavBar>,
       );

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

@@ -122,12 +122,12 @@ export function NavBarDescription({
 
 export function NavBarCoinCapsule({
   ticker,
-  icon,
+  leadingContent,
   ...props
 }: NavBarCoinCapsuleProps) {
   return (
     <Box {...props}>
-      <CoinCapsule ticker={ticker} icon={icon} />
+      <CoinCapsule ticker={ticker} leadingContent={leadingContent} />
     </Box>
   );
 }

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

@@ -1,5 +1,5 @@
 import type { Density } from '@ledgerhq/lumen-utils-shared';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { StyledViewProps } from '../../../styles';
 import type { IconButtonProps } from '../IconButton';
 
@@ -57,9 +57,9 @@ export type CoinCapsuleProps = {
    */
   ticker: string;
   /**
-   * The icon element to display (typically a crypto coin icon).
+   * The leading content, typically a crypto coin icon.
    */
-  icon: ReactElement;
+  leadingContent: ReactNode;
 } & Omit<StyledViewProps, 'children'>;
 
 /**

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

@@ -17,7 +17,7 @@ import {
 
 ## 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.
+OptionList is a data-driven, composable selection list designed to be embedded inside a `BottomSheet`, a new screen, or any container.
 
 It handles **selection state**, **automatic grouping** (via a `group` field on items), and exposes a `renderItem` callback for full control over item rendering.
 

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

@@ -865,8 +865,8 @@ export const TriggerShowcase: Story = {
         <MediaButton
           appearance='gray'
           onPress={() => iconRef.current?.present()}
-          icon={<Settings size={20} />}
-          iconType='flat'
+          leadingContent={<Settings size={20} />}
+          leadingContentShape='flat'
         >
           {selectedIcon?.label ?? 'Settings'}
         </MediaButton>
@@ -874,7 +874,7 @@ export const TriggerShowcase: Story = {
         <MediaButton
           appearance='gray'
           onPress={() => cryptoRef.current?.present()}
-          icon={
+          leadingContent={
             selectedCrypto?.meta ? (
               <CryptoIcon
                 ledgerId={selectedCrypto.meta.ledgerId as string}
@@ -883,7 +883,7 @@ export const TriggerShowcase: Story = {
               />
             ) : undefined
           }
-          iconType='rounded'
+          leadingContentShape='rounded'
         >
           {selectedCrypto?.label ?? 'Network'}
         </MediaButton>