@ledgerhq/lumen-ui-rnative 0.0.46 → 0.0.48

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import {
+  LumenTextStyle,
+  StyledPressableProps,
+  StyledTextProps,
+  StyledViewProps,
+} from '../../../styles';
+import { DiscriminatedSpotProps } from '../Spot';
+
+/**
+ * Context value for passing state to sub-components
+ */
+export type ListItemContextValue = {
+  disabled?: boolean;
+};
+
+/**
+ * Props for the ListItem root component
+ */
+export type ListItemProps = {
+  /**
+   * The content of the list item (ListItemLeading, ListItemTrailing)
+   */
+  children: React.ReactNode;
+  /**
+   * Whether the list item is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Callback function when the list item is pressed.
+   */
+  onPress?: StyledPressableProps['onPress'];
+} & Omit<StyledPressableProps, 'disabled' | 'children'>;
+
+/**
+ * Props for the ListItemLeading component
+ */
+export type ListItemLeadingProps = {
+  /**
+   * The content of the leading area (visual element + ListItemContent)
+   */
+  children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+/**
+ * Props for the ListItemContent component
+ */
+export type ListItemContentProps = {
+  /**
+   * The content (ListItemTitle, ListItemDescription)
+   */
+  children: React.ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+/**
+ * Props for the ListItemTitle component
+ */
+export type ListItemTitleProps = {
+  /**
+   * The title text or custom content
+   */
+  children: React.ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+
+/**
+ * Props for the ListItemDescription component
+ */
+export type ListItemDescriptionProps = {
+  /**
+   * The description text or custom content
+   */
+  children: React.ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+
+/**
+ * Props for the ListItemTrailing component
+ */
+export type ListItemTrailingProps = {
+  /**
+   * The trailing content (icons, switches, values, etc.)
+   */
+  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/Select/GlobalSelectBottomSheet.tsx

@@ -8,6 +8,7 @@ import {
   BottomSheetView,
   useBottomSheetRef,
 } from '../BottomSheet';
+import { Divider } from '../Divider';
 import { Box, Text } from '../Utility';
 import { useGlobalSelectSafeContext } from './GlobalSelectContext';
 
@@ -17,12 +18,6 @@ const useStyles = () => {
       bottomSheetView: {
         paddingHorizontal: t.spacings.s8,
       },
-      separator: {
-        marginVertical: t.spacings.s4,
-        marginHorizontal: t.spacings.s8,
-        height: 1,
-        backgroundColor: t.colors.bg.muted,
-      },
       groupLabel: {
         marginBottom: t.spacings.s4,
         paddingHorizontal: t.spacings.s8,
@@ -133,7 +128,10 @@ export const GlobalSelectBottomSheet: React.FC = () => {
               {currentSelect.items.map((item, index) => {
                 if (item.type === 'separator') {
                   return (
-                    <Box key={`separator-${index}`} style={styles.separator} />
+                    <Divider
+                      key={`separator-${index}`}
+                      lx={{ marginVertical: 's4', marginHorizontal: 's8' }}
+                    />
                   );
                 }
                 if (item.type === 'group-label') {

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

@@ -458,23 +458,9 @@ export const SelectItemText: React.FC<SelectItemTextProps> = ({
 };
 SelectItemText.displayName = 'SelectItemText';
 
-export const SelectSeparator: React.FC<SelectSeparatorProps> = ({
-  lx,
-  style,
-  ...props
-}) => {
-  const styles = useStyleSheet(
-    (t) => ({
-      separator: {
-        marginHorizontal: t.spacings.s8,
-        marginVertical: t.spacings.s4,
-        height: t.sizes.s1,
-        backgroundColor: t.colors.border.mutedSubtle,
-      },
-    }),
-    [],
-  );
-
-  return <Box lx={lx} style={[styles.separator, style]} {...props} />;
+export const SelectSeparator: React.FC<SelectSeparatorProps> = () => {
+  // This component doesn't render anything - it's used for structure
+  // The actual separators are rendered in GlobalSelectBottomSheet
+  return null;
 };
 SelectSeparator.displayName = 'SelectSeparator';

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

@@ -116,9 +116,7 @@ export type SelectItemTextProps = {
   children: ReactNode;
 } & StyledTextProps;
 
-export type SelectSeparatorProps = {
-  // No extra props needed
-} & BoxProps;
+export type SelectSeparatorProps = {} & BoxProps;
 
 export type SelectItemData = {
   type: 'item';

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

@@ -41,7 +41,11 @@ type StatusSpotProps = {
   appearance: Exclude<SpotAppearance, 'icon' | 'number'>;
 };
 
-type DiscriminatedSpotProps = IconSpotProps | NumberSpotProps | StatusSpotProps;
+export type DiscriminatedSpotProps =
+  | IconSpotProps
+  | NumberSpotProps
+  | StatusSpotProps;
+
 export type SpotSize = 48 | 56 | 72;
 
 export type SpotProps = {

package/src/lib/Components/Switch/Switch.mdx

@@ -1,6 +1,7 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as SwitchStories from './Switch.stories';
 import { Switch } from './Switch';
+import { Box } from '../Utility';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';

package/src/lib/Components/Tile/Tile.figma.tsx

@@ -1,31 +1,28 @@
 import figma from '@figma/code-connect';
 import { Settings } from '../../Symbols';
-import { Spot } from '../Spot';
-import { Tile } from './Tile';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import {
+  Tile,
+  TileSpot,
+  TileContent,
+  TileTitle,
+  TileDescription,
+} from './Tile';
 
 figma.connect(
   Tile,
   'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=5783-1328',
   {
-    imports: ["import { Tile } from '@ledgerhq/lumen-ui-react'"],
+    imports: [
+      "import { Tile, TileSpot, TileContent, TileTitle, TileDescription } from '@ledgerhq/lumen-ui-rnative'",
+    ],
     props: {
       title: figma.string('title'),
       description: figma.boolean('show-description', {
         true: figma.string('description'),
         false: undefined,
       }),
-      leadingContent: <Spot appearance='icon' icon={Settings} />,
-      trailingContent: figma.boolean('show-tag', {
-        true: figma.instance('tag'),
-        false: undefined,
-      }),
+      showTag: figma.boolean('show-tag'),
+      tag: figma.instance('tag'),
       disabled: figma.enum('state', {
         disabled: true,
       }),
@@ -38,15 +35,19 @@ figma.connect(
     ],
     example: (props) => (
       <Tile
-        title={props.title}
-        description={props.description}
-        leadingContent={props.leadingContent}
-        trailingContent={props.trailingContent}
         disabled={props.disabled}
-        onPress={() => {
-          console.log('Tile pressed');
-        }}
-      />
+        onPress={() => console.log('Tile pressed')}
+        onLongPress={() => console.log('Long press - secondary action')}
+      >
+        <TileSpot appearance='icon' icon={Settings} />
+        <TileContent>
+          <TileTitle>{props.title}</TileTitle>
+          {props.description && (
+            <TileDescription>{props.description}</TileDescription>
+          )}
+        </TileContent>
+        {props.showTag && props.tag}
+      </Tile>
     ),
   },
 );

package/src/lib/Components/Tile/Tile.mdx

@@ -1,7 +1,13 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TileStories from './Tile.stories';
 import { Tile } from './Tile';
-import { CustomTabs, Tab } from '../../../../.storybook/components';
+import {
+  CustomTabs,
+  Tab,
+  DoVsDontRow,
+  DoBlockItem,
+  DontBlockItem,
+} from '../../../../.storybook/components';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
@@ -14,42 +20,47 @@ import { Box } from '../Utility';
 
 ## Introduction
 
-Tile components are compact, card-like interactive elements designed for horizontal lists, carousels, or grids. They feature a vertical layout with a required spot icon and title, as well as an optional description, tag, and a secondary action button visible on hover.
+Tile components are compact, card-like interactive elements designed for horizontal lists, carousels, or grids. They use a flexible composite pattern that allows you to compose tiles with spots, text content, tags, and custom elements in a vertical layout.
 
 > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=5783-1328).
 
 ## Anatomy
 
-<Canvas of={TileStories.Base} />
-
-- **Leading Content**: Visual icon or element at the top
-- **Title**: The main label of the item (required)
-- **Description (optional)**: Provides additional context
-- **Trailing Content (optional)**: Trailing custom content at the bottom of the tile
-- **Secondary Action (optional)**: Action button in the top right corner, visible on hover
+- **TileSpot**: Visual icon or element at the top
+- **TileContent**: Container for title and description
+  - **TileTitle**: The main label of the item (required)
+  - **TileDescription (optional)**: Provides additional context
+- **Custom Content (optional)**: Any ReactNode like Tag, View, etc.
 
 ## Properties
 
-### Overview
-
 <Canvas of={TileStories.Base} />
 <Controls of={TileStories.Base} />
 
-### Spot Variants
+### Appearance & States
+
+Two appearance variants are available with multiple interactive states:
 
-Tile components support various spot icons to categorize or visualize the content, including coin icons.
+**Appearances:**
+- **no-background** (default): Transparent background with pressed states
+- **card**: Surface background color with pressed states
 
-<Canvas of={TileStories.LeadingContentVariantsShowcase} />
+**States:**
+- **Default**: Base state with no interaction
+- **Pressed**: Darker background when pressed
+- **Disabled**: Non-interactive state with disabled styles
 
-### Trailing Content Variants
+<Canvas of={TileStories.AppearanceShowcase} />
 
-Optional trailing content can be added at the bottom of the tile.
+### Variants
 
-<Canvas of={TileStories.WithTrailingContent} />
+Tile components support various configurations including different spot icons, with/without description, and with/without trailing content (tags).
 
-### Secondary Action
+<Canvas of={TileStories.VariantsShowcase} />
 
-The secondary action is optional and can be omitted.
+### Secondary Action (Long Press)
+
+Use `onLongPress` for secondary actions on mobile devices. Try long pressing the tile below to see it in action.
 
 <Canvas of={TileStories.WithSecondaryAction} />
 
@@ -75,42 +86,124 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 ## Basic Usage
 
 ```tsx
-import { Tile, Spot, Box } from '@ledgerhq/lumen-ui-rnative';
+import {
+  Tile,
+  TileSpot,
+  TileContent,
+  TileTitle,
+  TileDescription,
+} from '@ledgerhq/lumen-ui-rnative';
 import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 function MyComponent() {
   return (
     <Tile
       lx={{ width: 's128' }}
-      title='Settings'
-      description='BTC'
-      leadingContent={<Spot appearance='icon' icon={Settings} />}
-      trailingContent={<Tag label='Active' appearance='success' size='sm' />}
       onPress={() => console.log('Primary action')}
       onLongPress={() => console.log('Secondary action')}
-    />
+    >
+      <TileSpot appearance='icon' icon={Settings} />
+      <TileContent>
+        <TileTitle>Settings</TileTitle>
+        <TileDescription>Manage preferences</TileDescription>
+      </TileContent>
+    </Tile>
   );
 }
 ```
 
+## Advanced Patterns
+
+### With Custom Content (Tags, etc.)
+
+```tsx
+import {
+  Tile,
+  TileSpot,
+  TileContent,
+  TileTitle,
+  TileDescription,
+  Tag,
+} from '@ledgerhq/lumen-ui-rnative';
+import { Bitcoin } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+<Tile appearance='card'>
+  <TileSpot appearance='icon' icon={Bitcoin} />
+  <TileContent>
+    <TileTitle>Bitcoin</TileTitle>
+    <TileDescription>BTC</TileDescription>
+  </TileContent>
+  <Tag label='Active' appearance='success' />
+</Tile>;
+```
+
+### Disabled State
+
+```tsx
+<Tile disabled>
+  <TileSpot appearance='icon' icon={Settings} />
+  <TileContent>
+    <TileTitle>Settings</TileTitle>
+    <TileDescription>Unavailable</TileDescription>
+  </TileContent>
+</Tile>
+```
+
 ### With Coin Icon
 
 ```tsx
-import { Tile, Spot } from '@ledgerhq/lumen-ui-rnative';
+import {
+  Tile,
+  TileSpot,
+  TileContent,
+  TileTitle,
+  TileDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+
+<Tile onPress={() => console.log('Clicked!')}>
+  <TileSpot appearance='coin' icon='btc' />
+  <TileContent>
+    <TileTitle>Bitcoin</TileTitle>
+    <TileDescription>BTC</TileDescription>
+  </TileContent>
+</Tile>;
+```
 
-function MyComponent() {
-  return (
+### Horizontal List
+
+```tsx
+import { ScrollView } from 'react-native';
+
+<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>
+  ))}
+</ScrollView>;
+```
+
+### With Secondary Action (Long Press)
+
+```tsx
     <Tile
-      title='Bitcoin'
-      description='BTC'
-      leadingContent={<Spot appearance='coin' icon='btc' />}
-      onPress={() => console.log('Clicked!')}
-    />
-  );
-}
+  onPress={() => console.log('Primary action')}
+  onLongPress={() => console.log('Secondary action - show menu')}
+>
+  <TileSpot appearance='icon' icon={Settings} />
+  <TileContent>
+    <TileTitle>Settings</TileTitle>
+    <TileDescription>Long press for options</TileDescription>
+  </TileContent>
+</Tile>
 ```
 
 ## Do's and Don'ts
+
 <Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <CommonRulesDoAndDont />
 </Box>