@ledgerhq/lumen-ui-rnative 0.1.35 → 0.1.37

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,13 +127,13 @@ 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.
+ * leading content and a trailing chevron indicator.
  *
  * This component is intended to be used exclusively as the trigger inside a Select or
  * dropdown pattern. It should not be used as a standalone action button — use `Button`
@@ -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.stories.tsx

@@ -86,3 +86,21 @@ export const LoadingShowcase: Story = {
     </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';
@@ -36,9 +37,11 @@ export const fontSizeMap: Record<MediaImageSize, number> = {
 const useStyles = ({
   size,
   shape,
+  disabled,
 }: {
   size: MediaImageSize;
   shape: MediaImageShape;
+  disabled: boolean;
 }) => {
   return useStyleSheet(
     (t) => {
@@ -61,6 +64,7 @@ const useStyles = ({
           outlineWidth: 1,
           outlineOffset: -1,
           outlineStyle: 'solid',
+          ...(disabled && { opacity: 0.3 }),
         },
         image: {
           width: '100%',
@@ -72,7 +76,7 @@ const useStyles = ({
         },
       };
     },
-    [size, shape],
+    [size, shape, disabled],
   );
 };
 
@@ -99,6 +103,7 @@ export const MediaImage = ({
   shape = 'square',
   fallback,
   loading = false,
+  disabled: disabledProp = false,
   lx = {},
   style,
   ref,
@@ -106,7 +111,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 +128,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

@@ -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>
   );
@@ -20,6 +20,7 @@ const useStyles = () =>
         flexDirection: 'row',
         gap: t.spacings.s8,
         padding: t.spacings.s8,
+        paddingRight: t.spacings.s12,
         justifyContent: 'center',
         alignItems: 'center',
         borderRadius: t.borderRadius.full,

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.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>

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

@@ -15,6 +15,12 @@ const renderWithProvider = (component: React.ReactElement) => {
   );
 };
 
+const wrapWithProvider = (component: React.ReactElement) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {component}
+  </ThemeProvider>
+);
+
 describe('PageIndicator Component', () => {
   describe('Rendering', () => {
     it('should render with required props', () => {
@@ -161,6 +167,78 @@ describe('PageIndicator Component', () => {
     });
   });
 
+  describe('Re-rendering', () => {
+    // Regression: dot/strip styles must update when currentPage changes.
+    // One bug has produced the same broken-on-update symptom:
+    //   1. Wrapping in Animated.createAnimatedComponent(Box) — Box flattens
+    //      style arrays via StyleSheet.flatten, which snapshots reanimated
+    //      animated styles and stops updates.
+    // Initial render looked correct in both cases — only re-render exposed
+    // the issue, which is what the tests below exercise.
+    it('updates the rendered tree when currentPage changes', () => {
+      const { rerender } = renderWithProvider(
+        <PageIndicator
+          testID='page-indicator'
+          currentPage={1}
+          totalPages={5}
+        />,
+      );
+      const treeBefore = JSON.stringify(screen.toJSON());
+
+      rerender(
+        wrapWithProvider(
+          <PageIndicator
+            testID='page-indicator'
+            currentPage={3}
+            totalPages={5}
+          />,
+        ),
+      );
+      const treeAfter = JSON.stringify(screen.toJSON());
+
+      expect(treeAfter).not.toEqual(treeBefore);
+    });
+
+    it('updates the active dot style when currentPage changes', () => {
+      type Node = {
+        type: string;
+        props: { style?: unknown };
+        children: Node[] | null;
+      };
+      const getDotStyles = (): unknown[] => {
+        const root = screen.toJSON() as Node | null;
+        if (!root?.children) throw new Error('Expected container children');
+        const viewport = root.children[0];
+        if (!viewport?.children) throw new Error('Expected viewport children');
+        const strip = viewport.children[0];
+        if (!strip?.children) throw new Error('Expected strip children');
+        return strip.children.map((dot) => dot.props.style);
+      };
+
+      const { rerender } = renderWithProvider(
+        <PageIndicator
+          testID='page-indicator'
+          currentPage={1}
+          totalPages={5}
+        />,
+      );
+      const stylesBefore = JSON.stringify(getDotStyles());
+
+      rerender(
+        wrapWithProvider(
+          <PageIndicator
+            testID='page-indicator'
+            currentPage={3}
+            totalPages={5}
+          />,
+        ),
+      );
+      const stylesAfter = JSON.stringify(getDotStyles());
+
+      expect(stylesAfter).not.toEqual(stylesBefore);
+    });
+  });
+
   describe('Props', () => {
     it('should accept ref prop', () => {
       const ref = createRef<ComponentRef<typeof PageIndicator>>();