@ledgerhq/lumen-ui-rnative 0.1.9 → 0.1.11

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/Tile/Tile.mdx

@@ -26,11 +26,11 @@ Tile components are compact, card-like interactive elements designed for horizon
 
 ## Anatomy
 
-- **TileSpot**: Visual icon or element at the top
-- **TileContent**: Container for title, description, and trailing content
+- **Tile**: Root container; direct children are laid out vertically (e.g. Spot, TileContent)
+- **TileContent**: Container for title, description and trailing content
   - **TileTitle**: The main label of the item (required)
   - **TileDescription (optional)**: Provides additional context
-  - **TileTrailingContent (optional)**: Container for trailing content like Tags, Text, etc.
+  - **TileTrailingContent (optional)**: Container for Tags, labels, or other supplementary content
 
 ## Properties
 
@@ -94,10 +94,10 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 ```tsx
 import {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,
+  Spot,
 } from '@ledgerhq/lumen-ui-rnative';
 import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 
@@ -108,7 +108,7 @@ function MyComponent() {
       onPress={() => console.log('Primary action')}
       onLongPress={() => console.log('Secondary action')}
     >
-      <TileSpot appearance='icon' icon={Settings} />
+      <Spot appearance='icon' icon={Settings} />
       <TileContent>
         <TileTitle>Settings</TileTitle>
         <TileDescription>Manage preferences</TileDescription>
@@ -122,20 +122,22 @@ function MyComponent() {
 
 ### With Trailing Content (Tags, etc.)
 
+Use TileTrailingContent inside TileContent to wrap Tags or other supplementary content.
+
 ```tsx
 import {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,
   TileTrailingContent,
   Tag,
+  Spot,
 } from '@ledgerhq/lumen-ui-rnative';
 import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 <Tile appearance='card'>
-  <TileSpot appearance='icon' icon={Bitcoin} />
+  <Spot appearance='icon' icon={Bitcoin} />
   <TileContent>
     <TileTitle>Bitcoin</TileTitle>
     <TileDescription>BTC</TileDescription>
@@ -150,7 +152,7 @@ import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 ```tsx
 <Tile disabled>
-  <TileSpot appearance='icon' icon={Settings} />
+  <Spot appearance='icon' icon={Settings} />
   <TileContent>
     <TileTitle>Settings</TileTitle>
     <TileDescription>Unavailable</TileDescription>
@@ -163,13 +165,14 @@ import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 Use the `centered` prop to vertically center the tile content. This is useful when a tile has less content than its neighbors in a grid, like a "Show more" tile that needs to align with richer tiles.
 
 ```tsx
-import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+import { ChevronRight, CryptoBitcoinCoin } from '@ledgerhq/lumen-ui-rnative/symbols';
+import { Spot, Tile, TileContent, TileTitle, TileDescription, TileTrailingContent, Tag } from '@ledgerhq/lumen-ui-rnative';
 import { View } from 'react-native';
 
 // In a grid where other tiles have more content
 <View style={{ flexDirection: 'row', gap: 8 }}>
   <Tile appearance='card'>
-    <TileSpot appearance='coin' icon='btc' />
+    <Spot appearance='icon' icon={CryptoBitcoinCoin} />
     <TileContent>
       <TileTitle>Title</TileTitle>
       <TileDescription>Description</TileDescription>
@@ -181,7 +184,7 @@ import { View } from 'react-native';
 
   {/* Show more tile with centered content */}
   <Tile appearance='card' centered>
-    <TileSpot appearance='icon' icon={ChevronRight} />
+    <Spot appearance='icon' icon={ChevronRight} />
     <TileContent>
       <TileTitle>Show more</TileTitle>
     </TileContent>
@@ -194,14 +197,15 @@ import { View } from 'react-native';
 ```tsx
 import {
   Tile,
-  TileSpot,
   TileContent,
   TileTitle,
   TileDescription,
+  Spot,
 } from '@ledgerhq/lumen-ui-rnative';
+import { CryptoBitcoinCoin } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 <Tile onPress={() => console.log('Clicked!')}>
-  <TileSpot appearance='coin' icon='btc' />
+  <Spot appearance='icon' icon={CryptoBitcoinCoin} />
   <TileContent>
     <TileTitle>Bitcoin</TileTitle>
     <TileDescription>BTC</TileDescription>
@@ -213,17 +217,21 @@ import {
 
 ```tsx
 import { ScrollView } from 'react-native';
+import { Tile, TileContent, TileTitle, TileDescription, Spot } from '@ledgerhq/lumen-ui-rnative';
 
 <ScrollView horizontal>
-  {items.map((item) => (
-    <Tile key={item.id} lx={{ width: 's128', flexShrink: 0 }}>
-      <TileSpot appearance='icon' icon={item.icon} />
-      <TileContent>
-        <TileTitle>{item.title}</TileTitle>
-        <TileDescription>{item.description}</TileDescription>
-      </TileContent>
-    </Tile>
-  ))}
+  {items.map((item) => {
+    const Icon = item.icon;
+    return (
+      <Tile key={item.id} lx={{ width: 's128', flexShrink: 0 }}>
+        <Spot appearance='icon' icon={Icon} />
+        <TileContent>
+          <TileTitle>{item.title}</TileTitle>
+          <TileDescription>{item.description}</TileDescription>
+        </TileContent>
+      </Tile>
+    );
+  })}
 </ScrollView>;
 ```
 
@@ -234,7 +242,7 @@ import { ScrollView } from 'react-native';
   onPress={() => console.log('Primary action')}
   onLongPress={() => console.log('Secondary action - show menu')}
 >
-  <TileSpot appearance='icon' icon={Settings} />
+  <Spot appearance='icon' icon={Settings} />
   <TileContent>
     <TileTitle>Settings</TileTitle>
     <TileDescription>Long press for options</TileDescription>
@@ -251,13 +259,13 @@ import { ScrollView } from 'react-native';
 <DoVsDontRow>
   <DoBlockItem
     title='Use TileTrailingContent for additional elements'
-    description='Wrap Tags, labels, or supplementary content inside TileTrailingContent within TileContent for proper 4px spacing.'
+    description='Wrap Tags, labels, or supplementary content inside TileTrailingContent within TileContent for proper spacing.'
   >
 
 ```tsx
 {/* prettier-ignore */}
 <Tile>
-  <TileSpot appearance="icon" icon={Settings} />
+  <Spot appearance="icon" icon={Settings} />
   <TileContent>
     <TileTitle>Title</TileTitle>
     <TileDescription>Description</TileDescription>
@@ -277,7 +285,7 @@ import { ScrollView } from 'react-native';
 ```tsx
 {/* prettier-ignore */}
 <Tile>
-  <TileSpot appearance="icon" icon={Settings} />
+  <Spot appearance="icon" icon={Settings} />
   <TileContent>
     <TileTitle>Title</TileTitle>
     <TileDescription>Description</TileDescription>