@ledgerhq/lumen-ui-rnative 0.1.13 → 0.1.15

package/src/lib/Components/ListItem/ListItem.tsx

@@ -1,24 +1,20 @@
 import {
   createSafeContext,
   DisabledProvider,
-  isTextChildren,
   useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
-import React, { Ref } from 'react';
+import { ElementRef, ReactNode, Ref } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { useStyleSheet, useTheme } from '../../../styles';
-import { Spot } from '../Spot';
+import { useStyleSheet } from '../../../styles';
 import { Box, Pressable, Text } from '../Utility';
 import {
   ListItemContentProps,
+  ListItemContentRowProps,
   ListItemDescriptionProps,
-  ListItemIconProps,
   ListItemLeadingProps,
   ListItemProps,
-  ListItemSpotProps,
   ListItemTitleProps,
   ListItemTrailingProps,
-  ListItemTruncateProps,
 } from './types';
 
 const [ListItemTrailingProvider, useListItemTrailingContext] =
@@ -64,17 +60,17 @@ const useRootStyles = ({ pressed }: { pressed: boolean }) => {
  * import {
  *   ListItem,
  *   ListItemLeading,
- *   ListItemSpot,
  *   ListItemContent,
  *   ListItemTitle,
  *   ListItemDescription,
  *   ListItemTrailing,
+ *   Spot,
  * } from '@ledgerhq/lumen-ui-rnative';
  * import { Wallet, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
  * <ListItem onPress={() => console.log('Clicked!')}>
  *   <ListItemLeading>
- *     <ListItemSpot appearance="icon" icon={Wallet} />
+ *     <Spot size={48} appearance="icon" icon={Wallet} />
  *     <ListItemContent>
  *       <ListItemTitle>Balance</ListItemTitle>
  *       <ListItemDescription>Optional description</ListItemDescription>
@@ -127,7 +123,7 @@ const ListItemInner = ({
   children,
 }: {
   pressed: boolean;
-  children: React.ReactNode;
+  children: ReactNode;
 }) => {
   const styles = useRootStyles({ pressed });
   return (
@@ -139,7 +135,7 @@ const ListItemInner = ({
 
 /**
  * Container for the leading (left) part of the list item.
- * Contains the visual element (ListItemSpot, Avatar, Icon) and the content (title + description).
+ * Contains the visual element (Spot, Avatar, Icon) and the content (title + description).
  */
 export const ListItemLeading = ({
   children,
@@ -195,8 +191,8 @@ export const ListItemContent = ({
       content: {
         flex: isInTrailing ? 0 : 1,
         minWidth: 0,
-        flexDirection: 'column',
         gap: t.spacings.s4,
+        alignItems: isInTrailing ? 'flex-end' : 'flex-start',
       },
     }),
     [isInTrailing],
@@ -217,16 +213,52 @@ export const ListItemContent = ({
 ListItemContent.displayName = 'ListItemContent';
 
 /**
- * The main title of the list item. Can contain text directly or
- * ListItemTruncate + Tag for more complex layouts.
+ * Horizontal row container within ListItemContent to place a title or description
+ * alongside additional inline content (e.g. Tag) while preserving text truncation.
  */
-export const ListItemTitle = ({
+export const ListItemContentRow = ({
   children,
   lx = {},
   style,
   ref,
   ...viewProps
-}: ListItemTitleProps & { ref?: Ref<View> }) => {
+}: ListItemContentRowProps & { ref?: Ref<View> }) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minWidth: 0,
+        gap: t.spacings.s8,
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.row, style])}
+      {...viewProps}
+    >
+      {children}
+    </Box>
+  );
+};
+
+ListItemContentRow.displayName = 'ListItemContentRow';
+
+/**
+ * The main title of the list item.
+ */
+export const ListItemTitle = ({
+  children,
+  lx = {},
+  style,
+  ref,
+  ...textProps
+}: ListItemTitleProps & { ref?: Ref<ElementRef<typeof Text>> }) => {
   const disabled = useDisabledContext({
     consumerName: 'ListItemTitle',
     contextRequired: true,
@@ -237,65 +269,37 @@ export const ListItemTitle = ({
   });
 
   const styles = useStyleSheet(
-    (t) => {
-      const { boxStyle } = StyleSheet.create({
-        boxStyle: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: t.spacings.s4,
-          width: '100%',
+    (t) => ({
+      title: StyleSheet.flatten([
+        t.typographies.body2SemiBold,
+        {
+          minWidth: 0,
           textAlign: isInTrailing ? 'right' : 'left',
-          justifyContent: isInTrailing ? 'flex-end' : 'flex-start',
+          color: disabled ? t.colors.text.disabled : t.colors.text.base,
         } as const,
-      });
-
-      return {
-        asBox: boxStyle,
-        asText: StyleSheet.flatten([
-          t.typographies.body2SemiBold,
-          {
-            ...boxStyle,
-            color: disabled ? t.colors.text.disabled : t.colors.text.base,
-          },
-        ]),
-      };
-    },
-    [disabled],
+      ]),
+    }),
+    [disabled, isInTrailing],
   );
 
-  // If children is a string, render it directly as Text with truncation
-  if (isTextChildren(children)) {
-    return (
-      <Text
-        ref={ref as Ref<React.ElementRef<typeof Text>>}
-        lx={lx}
-        style={StyleSheet.flatten([styles.asText, style])}
-        numberOfLines={1}
-        ellipsizeMode='tail'
-      >
-        {children}
-      </Text>
-    );
-  }
-
-  // Otherwise, render as a row container for ListItemTruncate + Tag
   return (
-    <Box
+    <Text
       ref={ref}
       lx={lx}
-      style={StyleSheet.flatten([styles.asBox, style])}
-      {...viewProps}
+      style={StyleSheet.flatten([styles.title, style])}
+      numberOfLines={1}
+      ellipsizeMode='tail'
+      {...textProps}
     >
       {children}
-    </Box>
+    </Text>
   );
 };
 
 ListItemTitle.displayName = 'ListItemTitle';
 
 /**
- * Optional description below the title. Can contain text directly or
- * ListItemTruncate + Tag for more complex layouts.
+ * Optional description text below the title.
  * Automatically applies disabled styling when the parent ListItem is disabled.
  */
 export const ListItemDescription = ({
@@ -303,8 +307,8 @@ export const ListItemDescription = ({
   lx = {},
   style,
   ref,
-  ...viewProps
-}: ListItemDescriptionProps & { ref?: Ref<View> }) => {
+  ...textProps
+}: ListItemDescriptionProps & { ref?: Ref<ElementRef<typeof Text>> }) => {
   const disabled = useDisabledContext({
     consumerName: 'ListItemDescription',
     contextRequired: true,
@@ -315,57 +319,30 @@ export const ListItemDescription = ({
   });
 
   const styles = useStyleSheet(
-    (t) => {
-      const { boxStyle } = StyleSheet.create({
-        boxStyle: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: t.spacings.s4,
-          width: '100%',
+    (t) => ({
+      description: StyleSheet.flatten([
+        t.typographies.body3,
+        {
+          minWidth: 0,
           textAlign: isInTrailing ? 'right' : 'left',
-          justifyContent: isInTrailing ? 'flex-end' : 'flex-start',
+          color: disabled ? t.colors.text.disabled : t.colors.text.muted,
         } as const,
-      });
-
-      return {
-        asBox: boxStyle,
-        asText: StyleSheet.flatten([
-          t.typographies.body3,
-          {
-            ...boxStyle,
-            color: disabled ? t.colors.text.disabled : t.colors.text.muted,
-          },
-        ]),
-      };
-    },
+      ]),
+    }),
     [disabled, isInTrailing],
   );
 
-  // If children is a string, render it directly as Text with truncation
-  if (isTextChildren(children)) {
-    return (
-      <Text
-        ref={ref as Ref<React.ElementRef<typeof Text>>}
-        lx={lx}
-        style={StyleSheet.flatten([styles.asText, style])}
-        numberOfLines={1}
-        ellipsizeMode='tail'
-      >
-        {children}
-      </Text>
-    );
-  }
-
-  // Otherwise, render as a row container for ListItemTruncate + Tag
   return (
-    <Box
+    <Text
       ref={ref}
       lx={lx}
-      style={StyleSheet.flatten([styles.asBox, style])}
-      {...viewProps}
+      style={StyleSheet.flatten([styles.description, style])}
+      numberOfLines={1}
+      ellipsizeMode='tail'
+      {...textProps}
     >
       {children}
-    </Box>
+    </Text>
   );
 };
 
@@ -386,7 +363,6 @@ export const ListItemTrailing = ({
     () => ({
       trailing: {
         flexShrink: 0,
-        flexDirection: 'row',
         alignItems: 'center',
       },
     }),
@@ -408,109 +384,3 @@ export const ListItemTrailing = ({
 };
 
 ListItemTrailing.displayName = 'ListItemTrailing';
-
-/**
- * Spot adapter for ListItem. Automatically inherits disabled state from parent ListItem.
- * Fixed at size 48 for consistent list item appearance.
- */
-export const ListItemSpot = (props: ListItemSpotProps) => {
-  const disabled = useDisabledContext({
-    consumerName: 'ListItemSpot',
-    contextRequired: true,
-  });
-
-  return <Spot {...props} size={48} disabled={disabled} />;
-};
-
-ListItemSpot.displayName = 'ListItemSpot';
-
-/**
- * Icon adapter for ListItem. Automatically inherits disabled state from parent ListItem.
- * Fixed at size 24 for consistent list item appearance.
- */
-export const ListItemIcon = ({
-  icon: Icon,
-  color,
-  lx = {},
-  style,
-  ...viewProps
-}: ListItemIconProps) => {
-  const { theme } = useTheme();
-  const disabled = useDisabledContext({
-    consumerName: 'ListItemIcon',
-    contextRequired: true,
-  });
-
-  return (
-    <Box
-      lx={lx}
-      style={StyleSheet.flatten([{ flexShrink: 0 }, style])}
-      {...viewProps}
-    >
-      <Icon
-        size={24}
-        style={{
-          color: disabled
-            ? theme.colors.text.disabled
-            : (color ?? theme.colors.text.base),
-        }}
-      />
-    </Box>
-  );
-};
-
-ListItemIcon.displayName = 'ListItemIcon';
-
-/**
- * Text wrapper that truncates when space is limited.
- * Use inside ListItemTitle or ListItemDescription when combining text with a Tag.
- * Set variant='title' for title styling or variant='description' (default) for description styling.
- */
-export const ListItemTruncate = ({
-  children,
-  variant = 'description',
-  lx = {},
-  style,
-  ref,
-  ...textProps
-}: ListItemTruncateProps & { ref?: Ref<React.ElementRef<typeof Text>> }) => {
-  const disabled = useDisabledContext({
-    consumerName: 'ListItemTruncate',
-    contextRequired: true,
-  });
-
-  const styles = useStyleSheet(
-    (t) => ({
-      truncate: StyleSheet.flatten([
-        variant === 'title'
-          ? t.typographies.body2SemiBold
-          : t.typographies.body3,
-        {
-          color: disabled
-            ? t.colors.text.disabled
-            : variant === 'title'
-              ? t.colors.text.base
-              : t.colors.text.muted,
-          minWidth: 0,
-          flexShrink: 1,
-        },
-      ]),
-    }),
-    [disabled, variant],
-  );
-
-  return (
-    <Text
-      ref={ref}
-      lx={lx}
-      style={StyleSheet.flatten([styles.truncate, style])}
-      numberOfLines={1}
-      ellipsizeMode='tail'
-      {...textProps}
-    >
-      {children}
-    </Text>
-  );
-};
-
-ListItemTruncate.displayName = 'ListItemTruncate';

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

@@ -1,11 +1,8 @@
-import React from 'react';
 import {
-  LumenTextStyle,
   StyledPressableProps,
   StyledTextProps,
   StyledViewProps,
 } from '../../../styles';
-import { DiscriminatedSpotProps } from '../Spot';
 
 /**
  * Context value for passing state to sub-components
@@ -52,6 +49,16 @@ export type ListItemContentProps = {
   children: React.ReactNode;
 } & Omit<StyledViewProps, 'children'>;
 
+/**
+ * Props for the ListItemContentRow component
+ */
+export type ListItemContentRowProps = {
+  /**
+   * The row content (ListItemTitle or ListItemDescription alongside inline elements like Tag)
+   */
+  children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
 /**
  * Props for the ListItemTitle component
  */
@@ -81,41 +88,3 @@ export type ListItemTrailingProps = {
    */
   children: React.ReactNode;
 } & Omit<StyledViewProps, 'children'>;
-
-/**
- * Props for the ListItemTruncate component
- * Used to truncate text that should when ListItemDescription or ListItemTitle contain custom content
- */
-export type ListItemTruncateProps = {
-  /**
-   * The text content to truncate
-   */
-  children: string;
-  /**
-   * The variant determines typography and color styling.
-   * Use 'title' inside ListItemTitle and 'description' inside ListItemDescription.
-   * @default 'description'
-   */
-  variant?: 'title' | 'description';
-} & Omit<StyledTextProps, 'children'>;
-
-/**
- * Props for the ListItemSpot component
- * Spot adapter that inherits disabled state from parent ListItem
- */
-export type ListItemSpotProps = DiscriminatedSpotProps &
-  Omit<StyledViewProps, 'children'>;
-
-/**
- * Props for the ListItemIcon component
- */
-export type ListItemIconProps = {
-  /**
-   * The icon component to render
-   */
-  icon: React.ComponentType<any>;
-  /**
-   * Optional color override. If not provided, uses theme color with disabled state handling.
-   */
-  color?: LumenTextStyle['color'];
-} & Omit<StyledViewProps, 'children'>;

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

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen, fireEvent } from '@testing-library/react-native';
-import React from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import {
   NavBar,

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

@@ -1,5 +1,5 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import React, { ReactNode } from 'react';
+import { Children, isValidElement, ReactNode } from 'react';
 import { StyleSheet } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
@@ -35,8 +35,8 @@ function extractSlots(children: ReactNode): Slots {
     trailing: null,
   };
 
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) {
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
       return;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -1,8 +1,8 @@
 import { describe, expect, it } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen } from '@testing-library/react-native';
-import React from 'react';
 
+import { createRef } from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { PageIndicator } from './PageIndicator';
 
@@ -162,7 +162,7 @@ describe('PageIndicator Component', () => {
 
   describe('Props', () => {
     it('should accept ref prop', () => {
-      const ref = React.createRef<React.ElementRef<typeof PageIndicator>>();
+      const ref = createRef<React.ElementRef<typeof PageIndicator>>();
       renderWithProvider(
         <PageIndicator
           ref={ref}

package/src/lib/Components/SegmentedControl/SegmentedControl.mdx

@@ -61,7 +61,6 @@ Use the library as part of `@ledgerhq/lumen-ui-rnative`. See the [Setup Guide
 Control selected value in state at the top level and pass it to SegmentedControl. Buttons use value to identify themselves; selected state is derived from context.
 
 ```tsx
-import React from 'react';
 import { SegmentedControl, SegmentedControlButton } from '@ledgerhq/lumen-ui-rnative';
 
 export default function Example() {

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Coins, Nft, TransferHorizontal, Settings } from '../../Symbols';
 import { Box } from '../Utility';
 import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
@@ -14,29 +14,22 @@ const meta = {
     layout: 'centered',
     backgrounds: { default: 'light' },
   },
-  argTypes: {
-    onSelectedChange: {
-      action: 'change',
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    appearance: {
-      options: ['background', 'no-background'],
-      control: 'radio',
-    },
-    accessibilityLabel: {
-      control: 'text',
-    },
-    selectedValue: {
-      control: 'text',
-    },
-    children: {
-      control: false,
-    },
-  },
+  decorators: [
+    (Story) => (
+      <Box
+        lx={{
+          width: 's320',
+          flexDirection: 'row',
+          justifyContent: 'center',
+        }}
+      >
+        <Story />
+      </Box>
+    ),
+  ],
   args: {
     appearance: 'background',
+    tabLayout: 'fixed',
   },
 } satisfies Meta<typeof SegmentedControl>;
 
@@ -49,20 +42,16 @@ export const Base: Story = {
     const [state, setState] = useState('send');
 
     return (
-      <Box lx={{ width: 's256' }}>
-        <SegmentedControl
-          {...args}
-          selectedValue={state}
-          onSelectedChange={setState}
-          accessibilityLabel='Transaction type'
-        >
-          <SegmentedControlButton value='send'>Send</SegmentedControlButton>
-          <SegmentedControlButton value='receive'>
-            Receive
-          </SegmentedControlButton>
-          <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
-        </SegmentedControl>
-      </Box>
+      <SegmentedControl
+        {...args}
+        selectedValue={state}
+        onSelectedChange={setState}
+        accessibilityLabel='Transaction type'
+      >
+        <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+        <SegmentedControlButton value='receive'>Receive</SegmentedControlButton>
+        <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
+      </SegmentedControl>
     );
   },
 };
@@ -96,23 +85,60 @@ export const WithIcons: Story = {
   },
 };
 
+export const TabLayoutShowcase: Story = {
+  args: {} as React.ComponentProps<typeof SegmentedControl>,
+  render: (args) => {
+    const [fitState, setFitState] = useState('send');
+    const [fixedState, setFixedState] = useState('send');
+
+    return (
+      <Box lx={{ gap: 's24' }} style={{ width: '100%' }}>
+        <SegmentedControl
+          {...args}
+          tabLayout='fit'
+          selectedValue={fitState}
+          onSelectedChange={setFitState}
+          accessibilityLabel='Fit layout'
+        >
+          <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+          <SegmentedControlButton value='receive'>
+            Receive
+          </SegmentedControlButton>
+          <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
+        </SegmentedControl>
+        <SegmentedControl
+          {...args}
+          tabLayout='fixed'
+          selectedValue={fixedState}
+          onSelectedChange={setFixedState}
+          accessibilityLabel='Fixed layout'
+        >
+          <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+          <SegmentedControlButton value='receive'>
+            Receive
+          </SegmentedControlButton>
+          <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
+        </SegmentedControl>
+      </Box>
+    );
+  },
+};
+
 export const Disabled: Story = {
   args: {} as React.ComponentProps<typeof SegmentedControl>,
   render: (args) => (
-    <Box lx={{ width: 's256' }}>
-      <SegmentedControl
-        {...args}
-        selectedValue='receive'
-        onSelectedChange={() => {
-          /* empty */
-        }}
-        accessibilityLabel='Transaction type (disabled)'
-        disabled
-      >
-        <SegmentedControlButton value='send'>Send</SegmentedControlButton>
-        <SegmentedControlButton value='receive'>Receive</SegmentedControlButton>
-        <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
-      </SegmentedControl>
-    </Box>
+    <SegmentedControl
+      {...args}
+      selectedValue='receive'
+      onSelectedChange={() => {
+        /* empty */
+      }}
+      accessibilityLabel='Transaction type (disabled)'
+      disabled
+    >
+      <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+      <SegmentedControlButton value='receive'>Receive</SegmentedControlButton>
+      <SegmentedControlButton value='buy'>Buy</SegmentedControlButton>
+    </SegmentedControl>
   ),
 };