@ledgerhq/lumen-ui-rnative 0.1.10 → 0.1.12

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

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import React, { useState, useEffect, useCallback, useId } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
@@ -57,8 +58,12 @@ export const Select = ({
   value: controlledValue,
   defaultValue,
   onValueChange,
-  disabled = false,
+  disabled: disabledProp = false,
 }: SelectProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'Select',
+    mergeWith: { disabled: disabledProp },
+  });
   const selectId = useId();
 
   const [internalOpen, setInternalOpen] = useControllableState({

package/src/lib/Components/Spot/Spot.tsx

@@ -129,18 +129,18 @@ const useStyles = ({
 export const Spot = (props: SpotProps) => {
   const {
     appearance,
-    disabled = false,
+    disabled: disabledProp = false,
     size = 48,
     lx = {},
     style,
     ...rest
   } = props;
-  const mergedDisabled = useDisabledContext({
+  const disabled = useDisabledContext({
     consumerName: 'Spot',
-    mergeWith: { disabled },
+    mergeWith: { disabled: disabledProp },
   });
 
-  const styles = useStyles({ size, appearance, disabled: mergedDisabled });
+  const styles = useStyles({ size, appearance, disabled });
   const calculatedIconSize = iconSizeMap[size];
 
   const content = useMemo(() => {

package/src/lib/Components/Stepper/Stepper.tsx

@@ -1,4 +1,7 @@
-import { getStepperCalculations } from '@ledgerhq/lumen-utils-shared';
+import {
+  getStepperCalculations,
+  useDisabledContext,
+} from '@ledgerhq/lumen-utils-shared';
 import { useEffect } from 'react';
 import Animated, {
   cancelAnimation,
@@ -59,11 +62,15 @@ export const Stepper = ({
   lx = {},
   currentStep,
   totalSteps,
-  disabled = false,
+  disabled: disabledProp = false,
   label,
   ref,
   ...props
 }: StepperProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'Stepper',
+    mergeWith: { disabled: disabledProp },
+  });
   const { t } = useCommonTranslation();
   const { theme } = useTheme();
 

package/src/lib/Components/Subheader/Subheader.mdx

@@ -9,7 +9,6 @@ import {
   SubheaderInfo,
   SubheaderShowMore,
   SubheaderDescription,
-  SubheaderAction,
 } from './Subheader';
 import {
   CustomTabs,
@@ -29,7 +28,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 ## Introduction
 
-Subheaders are section headers that provide context and organization to content blocks. They use a composite component pattern that provides full flexibility over layout and content through composable sub-components.
+Subheaders are section headers that provide context and organization to content blocks. They use a composite component pattern that provides full flexibility over layout and content through composable sub-components. The right-side action slot (`SubheaderAction`) has been removed to simplify the API.
 
 > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=your-node-id).
 
@@ -46,7 +45,6 @@ The Subheader uses a composite structure with the following components:
 - **SubheaderShowMore**: Static chevron right icon to indicate expandable content, positioned after the count (optional)
 - **SubheaderInfo**: Information icon that can be wrapped in tooltips or bottom sheets (optional)
 - **SubheaderDescription**: Additional descriptive text below the row (optional)
-- **SubheaderAction**: Container for action elements, positioned at the far right (optional)
 
 ## Properties
 
@@ -67,9 +65,9 @@ Use the info icon to provide contextual help:
 
 <Canvas of={SubheaderStories.WithInfoIcon} />
 
-### With Action
+### With action (layout)
 
-Use actions for quick access to related functionality:
+You can add an action by placing a Link in a flex row aligned with the title row.
 
 <Canvas of={SubheaderStories.WithAction} />
 
@@ -79,7 +77,6 @@ Use actions for quick access to related functionality:
 > - Title truncates with ellipsis when too long for the available space
 > - Count, hint, and action elements maintain their positions
 > - Uses flex layout for responsive arrangement
-> - Action elements are positioned at the far right using `marginLeft: 'auto'`
 
 ## Accessibility
 
@@ -208,27 +205,39 @@ function InfoExample() {
 }
 ```
 
-### With Action
+### With action (layout pattern)
 
-Include an action element in the row (automatically aligned to the right):
+Add an action by placing a Link in a flex row aligned with the title:
 
 ```tsx
 import {
   Subheader,
   SubheaderRow,
   SubheaderTitle,
-  SubheaderAction,
+  SubheaderDescription,
+  Link,
 } from '@ledgerhq/lumen-ui-rnative';
+import { View } from 'react-native';
 
-function ActionExample() {
+function WithActionExample() {
   return (
     <Subheader>
-      <SubheaderRow>
-        <SubheaderTitle>Section Title</SubheaderTitle>
-        <SubheaderAction onPress={() => console.log('Action clicked')}>
-          View More
-        </SubheaderAction>
-      </SubheaderRow>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 24 }}>
+        <SubheaderRow style={{ flex: 1, minWidth: 0 }}>
+          <SubheaderTitle>Recent Activity</SubheaderTitle>
+        </SubheaderRow>
+        <Link
+          onPress={() => {}}
+          appearance="accent"
+          size="sm"
+          underline={false}
+        >
+          View all
+        </Link>
+      </View>
+      <SubheaderDescription>
+        Place the action link in a flex layout beside the subheader
+      </SubheaderDescription>
     </Subheader>
   );
 }
@@ -303,7 +312,7 @@ function InteractiveExample() {
 
 ### Combining Multiple Options
 
-You can combine different components as needed. The `SubheaderRow` and `SubheaderTitle` are required, while all other components (`SubheaderCount`, `SubheaderInfo`, `SubheaderDescription`, `SubheaderAction`) are optional:
+You can combine different components as needed. The `SubheaderRow` and `SubheaderTitle` are required, while all other components (`SubheaderCount`, `SubheaderInfo`, `SubheaderDescription`) are optional:
 
 ```tsx
 import {
@@ -313,7 +322,6 @@ import {
   SubheaderCount,
   SubheaderInfo,
   SubheaderDescription,
-  SubheaderAction,
   Tooltip,
   TooltipTrigger,
   TooltipContent,
@@ -332,9 +340,6 @@ function FullExample() {
           </TooltipTrigger>
           <TooltipContent content={<Text>Additional info</Text>} />
         </Tooltip>
-        <SubheaderAction onPress={() => console.log('Action clicked')}>
-          Action
-        </SubheaderAction>
       </SubheaderRow>
       <SubheaderDescription>
         This is a detailed description of the section.
@@ -435,46 +440,6 @@ The following guidelines ensure consistent usage of the Subheader component and
 
   </DoVsDontRow>
 
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use Action in Row with onPress'
-      description='Action should have an onPress handler and be placed in Row for right alignment'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <SubheaderRow>
-    <SubheaderTitle>Title</SubheaderTitle>
-    <SubheaderAction onPress={handleAction}>
-      Action
-    </SubheaderAction>
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't place Action outside Row"
-      description='Action must be inside SubheaderRow for proper positioning'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <SubheaderRow>
-    <SubheaderTitle>Title</SubheaderTitle>
-  </SubheaderRow>
-  <SubheaderAction onPress={handleAction}>
-    Action
-  </SubheaderAction>
-</Subheader>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
   <DoVsDontRow>
     <DoBlockItem
       title='Use lx for layout adjustments only'

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native';
 import React from 'react';
 import { View, Text } from 'react-native';
+import { Link } from '../Link';
 import { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip';
 import {
   Subheader,
@@ -10,11 +11,10 @@ import {
   SubheaderInfo,
   SubheaderShowMore,
   SubheaderDescription,
-  SubheaderAction,
 } from './Subheader';
 
 const Container = ({ children }: { children: React.ReactNode }) => (
-  <View style={{ padding: 8, backgroundColor: '#ffffff', width: '100%' }}>
+  <View style={{ padding: 8, backgroundColor: '#ffffff', width: 400 }}>
     {children}
   </View>
 );
@@ -29,7 +29,6 @@ const meta: Meta<typeof Subheader> = {
     SubheaderCount,
     SubheaderInfo,
     SubheaderShowMore,
-    SubheaderAction,
   },
   decorators: [
     (Story) => (
@@ -96,15 +95,22 @@ export const WithInfoIcon: Story = {
 
 export const WithAction: Story = {
   render: () => (
-    <Subheader lx={{ maxWidth: 's480' }}>
-      <SubheaderRow>
-        <SubheaderTitle>Recent Activity</SubheaderTitle>
-        <SubheaderAction onPress={() => console.log('View all')}>
+    <Subheader>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 24 }}>
+        <SubheaderRow style={{ flex: 1, minWidth: 0 }}>
+          <SubheaderTitle>Recent Activity</SubheaderTitle>
+        </SubheaderRow>
+        <Link
+          onPress={() => console.log('View all')}
+          appearance='accent'
+          size='sm'
+          underline={false}
+        >
           View all
-        </SubheaderAction>
-      </SubheaderRow>
+        </Link>
+      </View>
       <SubheaderDescription>
-        Use actions for quick access to related functionality
+        Place the action link in a flex layout beside the subheader
       </SubheaderDescription>
     </Subheader>
   ),

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

@@ -11,7 +11,6 @@ import {
   SubheaderInfo,
   SubheaderShowMore,
   SubheaderDescription,
-  SubheaderAction,
 } from './Subheader';
 
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (
@@ -122,24 +121,6 @@ describe('Subheader', () => {
     expect(screen.getByText('This is a description')).toBeTruthy();
   });
 
-  it('renders the action in row', () => {
-    const handlePress = jest.fn();
-    render(
-      <TestWrapper>
-        <Subheader>
-          <SubheaderRow>
-            <SubheaderTitle>Title</SubheaderTitle>
-            <SubheaderAction onPress={handlePress}>Action</SubheaderAction>
-          </SubheaderRow>
-        </Subheader>
-      </TestWrapper>,
-    );
-    const button = screen.getByText('Action');
-    expect(button).toBeTruthy();
-    fireEvent.press(button);
-    expect(handlePress).toHaveBeenCalledTimes(1);
-  });
-
   it('renders interactive row with onPress', () => {
     const handlePress = jest.fn();
     render(
@@ -160,7 +141,6 @@ describe('Subheader', () => {
   });
 
   it('renders all components together', () => {
-    const handleAction = jest.fn();
     render(
       <TestWrapper>
         <Subheader>
@@ -168,7 +148,6 @@ describe('Subheader', () => {
             <SubheaderTitle>Title</SubheaderTitle>
             <SubheaderCount value={42} />
             <SubheaderInfo />
-            <SubheaderAction onPress={handleAction}>Action</SubheaderAction>
           </SubheaderRow>
           <SubheaderDescription>Description text</SubheaderDescription>
         </Subheader>
@@ -176,7 +155,6 @@ describe('Subheader', () => {
     );
     expect(screen.getByText('Title')).toBeTruthy();
     expect(screen.getByText('(42)')).toBeTruthy();
-    expect(screen.getByText('Action')).toBeTruthy();
     expect(screen.getByText('Description text')).toBeTruthy();
   });
 

package/src/lib/Components/Subheader/Subheader.tsx

@@ -4,7 +4,6 @@ import { ChevronRight, Information } from '../../Symbols';
 import { InteractiveIcon } from '../InteractiveIcon';
 import { Box, Pressable, Text } from '../Utility';
 import {
-  SubheaderActionProps,
   SubheaderCountProps,
   SubheaderDescriptionProps,
   SubheaderInfoProps,
@@ -201,46 +200,6 @@ export const SubheaderDescription = ({
   );
 };
 
-/**
- * Action component for the Subheader. Displays an interactive text button.
- * Automatically positions itself at the end of the row using marginLeft: 'auto'.
- */
-export const SubheaderAction = ({
-  children,
-  onPress,
-  lx,
-  style,
-  ...props
-}: SubheaderActionProps) => {
-  const styles = useStyleSheet(
-    (t) => ({
-      container: {
-        flexShrink: 0,
-        marginLeft: 'auto',
-        paddingLeft: t.spacings.s8,
-      },
-      text: StyleSheet.flatten([
-        t.typographies.body2,
-        {
-          color: t.colors.text.interactive,
-        },
-      ]),
-    }),
-    [],
-  );
-
-  return (
-    <Pressable
-      lx={lx}
-      onPress={onPress}
-      style={[styles.container, style]}
-      {...props}
-    >
-      <Text style={styles.text}>{children}</Text>
-    </Pressable>
-  );
-};
-
 /**
  * A subheader component for displaying section titles with optional count, hints, descriptions, and action elements.
  * Uses a composable API where you explicitly nest sub-components to define the layout.
@@ -269,7 +228,7 @@ export const SubheaderAction = ({
  * </Subheader>
  *
  * @example
- * // Interactive row with action
+ * // Interactive row
  * <Subheader>
  *   <SubheaderRow onPress={handleClick}>
  *     <SubheaderTitle>Accounts</SubheaderTitle>

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

@@ -6,6 +6,5 @@ export {
   SubheaderInfo,
   SubheaderShowMore,
   SubheaderDescription,
-  SubheaderAction,
 } from './Subheader';
 export * from './types';

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

@@ -1,9 +1,5 @@
 import { ReactNode } from 'react';
-import {
-  StyledPressableProps,
-  StyledTextProps,
-  StyledViewProps,
-} from '../../../styles';
+import { StyledTextProps, StyledViewProps } from '../../../styles';
 import { InteractiveIconProps } from '../InteractiveIcon';
 
 export type SubheaderProps = {
@@ -61,15 +57,4 @@ export type SubheaderDescriptionProps = {
   children: ReactNode;
 } & Omit<StyledTextProps, 'children'>;
 
-export type SubheaderActionProps = {
-  /**
-   * The action text to display.
-   */
-  children: ReactNode;
-  /**
-   * Press handler for the action.
-   */
-  onPress: () => void;
-} & Omit<StyledPressableProps, 'children' | 'onPress'>;
-
 export type SubheaderShowMoreProps = Omit<StyledViewProps, 'children'>;

package/src/lib/Components/Switch/Switch.tsx

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useControllableState } from '../../utils';
 import { Pressable } from '../Utility';
 import { BaseSwitchThumb, BaseSwitchRoot } from './BaseSwitch';
@@ -33,11 +34,15 @@ export const Switch = ({
   checked: checkedProp,
   onCheckedChange: onCheckedChangeProp,
   defaultChecked = false,
-  disabled,
+  disabled: disabledProp,
   size = 'md',
   ref,
   ...props
 }: SwitchProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'Switch',
+    mergeWith: { disabled: disabledProp },
+  });
   const [checked, onCheckedChange] = useControllableState({
     prop: checkedProp,
     onChange: onCheckedChangeProp,

package/src/lib/Components/TabBar/TabBar.tsx

@@ -268,7 +268,7 @@ export function TabBar({
       >
         {children}
         {Platform.OS === 'android' ? (
-          <View style={styles.androidBackground} />
+          <View style={styles.fallbackBackground} />
         ) : (
           <BlurView
             style={styles.blur}
@@ -279,6 +279,9 @@ export function TabBar({
                 ? 'rgba(0,0,0,0.15)'
                 : 'rgba(255,255,255,0.2)'
             }
+            reducedTransparencyFallbackColor={
+              styles.fallbackBackground.backgroundColor
+            }
           />
         )}
         <Animated.View style={[styles.pill, animatedPillStyle]} />
@@ -305,7 +308,7 @@ const useStyles = () =>
         height: TAB_BAR_HEIGHT + t.sizes.s16,
         zIndex: -1,
       },
-      androidBackground: {
+      fallbackBackground: {
         ...StyleSheet.absoluteFillObject,
         zIndex: -1,
         backgroundColor: t.colors.bg.muted,

package/src/lib/Components/Tag/Tag.tsx

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { StyleSheet, Text } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { IconSize } from '../Icon';
@@ -131,13 +132,17 @@ export const Tag = ({
   size = 'md',
   icon,
   label,
-  disabled = false,
+  disabled: disabledProp = false,
   lx = {},
   style,
   ref,
   ...props
 }: TagProps) => {
-  const styles = useStyles({ appearance, size, disabled });
+  const disabled = useDisabledContext({
+    consumerName: 'Tag',
+    mergeWith: { disabled: disabledProp },
+  });
+  const styles = useStyles({ appearance, size, disabled: !!disabled });
 
   const IconComponent = icon;
   const iconSize = iconSizeMap[size];

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

@@ -1,30 +1,28 @@
 import { describe, expect, it } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen } from '@testing-library/react-native';
-import { Text } from 'react-native';
+import { ChevronBigLeft, Wallet } from '../../Symbols';
+import { Button } from '../Button';
+import { Spot } from '../Spot';
+import { Tile } from '../Tile/Tile';
+import { Box, Text } from '../Utility';
 import { ThemeProvider } from './ThemeProvider';
 
-const themes: any = {
-  light: {
-    typographies: {
-      xs: {},
-    },
-  },
-  dark: {
-    typographies: {
-      xs: {},
-    },
-  },
-};
-
 describe('ThemeProvider', () => {
   it('renders children correctly', () => {
     render(
-      <ThemeProvider themes={themes}>
-        <Text testID='child'>Hello World</Text>
+      <ThemeProvider themes={ledgerLiveThemes}>
+        <Button testID='child'>Hello World</Button>
+        <Tile>Tile</Tile>
+        <Spot appearance='icon' icon={Wallet} />
+        <Box>
+          <Text>Text</Text>
+        </Box>
+        <ChevronBigLeft />
       </ThemeProvider>,
     );
 
-    expect(screen.getByTestId('child'));
-    expect(screen.getByText('Hello World'));
+    expect(screen.getByTestId('child')).toBeTruthy();
+    expect(screen.getByText('Hello World')).toBeTruthy();
   });
 });