@ledgerhq/lumen-ui-rnative 0.1.33 → 0.1.35

package/src/lib/Components/BottomSheet/CustomHandle.tsx

@@ -1,5 +1,5 @@
 import type { BottomSheetVariables } from '@gorhom/bottom-sheet/lib/typescript/types';
-import type { Ref } from 'react';
+import type { ComponentRef, Ref } from 'react';
 import { View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 
@@ -12,13 +12,13 @@ const useStyles = () => {
         alignItems: 'center',
         justifyContent: 'center',
         alignSelf: 'center',
-        backgroundColor: t.colors.bg.canvasSheet,
+        backgroundColor: 'transparent',
       },
       handle: {
         height: t.spacings.s4,
         width: t.sizes.s36,
         borderRadius: t.borderRadius.full,
-        backgroundColor: t.colors.bg.mutedPressed,
+        backgroundColor: t.colors.bg.mutedTransparentPressed,
       },
     }),
     [],
@@ -28,12 +28,33 @@ const useStyles = () => {
 export const CustomHandle = ({
   ref,
   ...props
-}: BottomSheetVariables & { ref?: Ref<React.ElementRef<typeof View>> }) => {
+}: BottomSheetVariables & { ref?: Ref<ComponentRef<typeof View>> }) => {
   const styles = useStyles();
 
   return (
-    <View {...props} ref={ref} style={styles.container}>
+    <View
+      {...props}
+      ref={ref}
+      style={styles.container}
+      testID='bottom-sheet-handle'
+    >
       <View style={styles.handle} />
     </View>
   );
 };
+
+export const HiddenHandle = ({
+  ref,
+  ...props
+}: BottomSheetVariables & { ref?: Ref<ComponentRef<typeof View>> }) => {
+  const styles = useStyles();
+
+  return (
+    <View
+      {...props}
+      ref={ref}
+      style={styles.container}
+      testID='bottom-sheet-handle-hidden'
+    />
+  );
+};

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

@@ -5,16 +5,23 @@ import type {
   BottomSheetSectionList as GorhomBottomSheetSectionList,
   BottomSheetScrollView as GorhomBottomSheetScrollView,
   BottomSheetVirtualizedList as GorhomBottomSheetVirtualizedList,
+  BottomSheetBackgroundProps,
 } from '@gorhom/bottom-sheet';
-
 import type { Density } from '@ledgerhq/lumen-utils-shared';
-import type { PropsWithChildren, ReactNode, Ref } from 'react';
+import type {
+  ComponentRef,
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  Ref,
+} from 'react';
+
 import type { StyledViewProps } from '../../../styles';
 export type BottomSheetProps = PropsWithChildren & {
   /**
    * Ref to the bottom sheet component.
    */
-  ref?: Ref<React.ElementRef<typeof GorhomBottomSheetModal>>;
+  ref?: Ref<ComponentRef<typeof GorhomBottomSheetModal>>;
   /**
    * Used to locate this view in end-to-end tests.
    */
@@ -131,8 +138,22 @@ export type BottomSheetProps = PropsWithChildren & {
    * @default true
    */
   enableBlurKeyboardOnGesture?: boolean;
+  /**
+   * Custom background component rendered behind the sheet content and handle.
+   * Use to render gradients or other effects that should span the full sheet area,
+   * including the handle strip. When provided, the default sheet background is removed.
+   * @default undefined
+   */
+  backgroundComponent?: FC<BottomSheetBackgroundProps> | null;
+  /**
+   * If true, the drag handle (grabber) at the top of the sheet is hidden.
+   * @default false
+   */
+  hideHandle?: boolean;
 };
 
+export type { BottomSheetBackgroundProps };
+
 export type BottomSheetHeaderProps = {
   /**
    * The density of the header.

package/src/lib/Components/Card/Card.tsx

@@ -3,7 +3,7 @@ import {
   DisabledProvider,
   isTextChildren,
 } from '@ledgerhq/lumen-utils-shared';
-import type { ReactNode, Ref } from 'react';
+import type { ComponentRef, ReactNode, Ref } from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
 import type { LayoutChangeEvent, ViewStyle } from 'react-native';
 import { StyleSheet, View } from 'react-native';
@@ -486,7 +486,7 @@ export const CardContentTitle = ({
   if (isTextChildren(children)) {
     return (
       <Text
-        ref={ref as Ref<React.ElementRef<typeof Text>>}
+        ref={ref as Ref<ComponentRef<typeof Text>>}
         lx={lx}
         style={StyleSheet.flatten([styles.asText, style])}
         numberOfLines={1}
@@ -553,7 +553,7 @@ export const CardContentDescription = ({
   if (isTextChildren(children)) {
     return (
       <Text
-        ref={ref as Ref<React.ElementRef<typeof Text>>}
+        ref={ref as Ref<ComponentRef<typeof Text>>}
         lx={lx}
         style={StyleSheet.flatten([styles.asText, style])}
         numberOfLines={1}

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

@@ -4,7 +4,7 @@ import {
   DisabledProvider,
   useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
-import type { ElementRef, ReactNode, Ref } from 'react';
+import type { ComponentRef, ReactNode, Ref } from 'react';
 import type { ViewStyle } from 'react-native';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
@@ -286,7 +286,7 @@ export const ListItemTitle = ({
   style,
   ref,
   ...props
-}: ListItemTitleProps & { ref?: Ref<ElementRef<typeof Text>> }) => {
+}: ListItemTitleProps & { ref?: Ref<ComponentRef<typeof Text>> }) => {
   const disabled = useDisabledContext({
     consumerName: 'ListItemTitle',
     contextRequired: true,
@@ -336,7 +336,7 @@ export const ListItemDescription = ({
   style,
   ref,
   ...props
-}: ListItemDescriptionProps & { ref?: Ref<ElementRef<typeof Text>> }) => {
+}: ListItemDescriptionProps & { ref?: Ref<ComponentRef<typeof Text>> }) => {
   const disabled = useDisabledContext({
     consumerName: 'ListItemDescription',
     contextRequired: true,

package/src/lib/Components/MediaImage/MediaImage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import type { LumenStyleSheetTheme } from '../../../styles';
+import { RuntimeConstants } from '../../utils';
 import { Skeleton } from '../Skeleton';
 import { Box, Text } from '../Utility';
 import type { MediaImageProps, MediaImageSize, MediaImageShape } from './types';
@@ -65,6 +66,10 @@ const useStyles = ({
           width: '100%',
           height: '100%',
         },
+        skeleton: {
+          width: '100%',
+          height: '100%',
+        },
       };
     },
     [size, shape],
@@ -116,10 +121,13 @@ export const MediaImage = ({
       accessibilityLabel={alt}
       {...props}
     >
-      {loading && <Skeleton style={StyleSheet.absoluteFillObject} />}
+      {loading && <Skeleton style={styles.skeleton} />}
       {!loading && shouldFallback && fallback && (
         <Text
-          style={{ fontSize: fontSizeMap[size] }}
+          style={{
+            fontSize: fontSizeMap[size],
+            ...(RuntimeConstants.isIOS && { lineHeight: 0 }),
+          }}
           lx={{ color: 'base' }}
           accessible={false}
         >

package/src/lib/Components/MediaTag/MediaTag.mdx

@@ -0,0 +1,161 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as MediaTagStories from './MediaTag.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility/Box';
+
+<Meta title='Components/MediaTag' of={MediaTagStories} />
+
+# MediaTag
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+MediaTag is a compact label used to categorize, classify, or highlight information alongside a required media element such as an image or crypto icon. Like [Tag](/docs/communication-tag--docs), it supports multiple appearances and sizes, but is designed for cases where the icon is richer than a Symbol.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=16793-36383&m=dev).
+
+## Anatomy
+
+<Canvas of={MediaTagStories.Base} />
+
+- **Label:** The text content of the tag.
+- **Leading content:** A required media element (image, crypto icon, etc.) displayed before the label. Passed via the `leadingContent` prop.
+
+## Properties
+
+<Canvas of={MediaTagStories.Base} />
+<Controls of={MediaTagStories.Base} />
+
+### Appearance
+
+<Canvas of={MediaTagStories.AppearanceShowcase} />
+
+---
+
+### Size
+
+MediaTags come in two different sizes:
+
+- **md** (default) — the `leadingContent` media should be rendered at **16px**.
+- **sm** — the `leadingContent` media should be rendered at **12px**.
+
+The MediaTag does not resize its `leadingContent`; consumers are responsible for passing a media element sized to match the tag's `size`.
+
+<Canvas of={MediaTagStories.SizeShowcase} />
+
+### Truncation
+
+When a MediaTag's label exceeds the available space, the text is automatically truncated with an ellipsis.
+
+<Canvas of={MediaTagStories.TruncateShowcase} />
+
+### Accessibility
+
+To be implemented:
+
+- **Color contrast**
+- **Text zoom**
+- **Touch targets**
+- **Screen reader support**
+- **Semantic labeling**
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+Match the media element size to the MediaTag `size`: **16px** for `md`, **12px** for `sm`.
+
+```tsx
+import { MediaTag, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <>
+      {/* md → image size 16 */}
+      <MediaTag
+        size="md"
+        appearance="accent"
+        label="Ethereum"
+        leadingContent={
+          <MediaImage
+            src="https://crypto-icons.ledger.com/ETH.png"
+            alt="Ethereum"
+            size={16}
+            shape="square"
+          />
+        }
+      />
+
+      {/* sm → image size 12 */}
+      <MediaTag
+        size="sm"
+        appearance="accent"
+        label="Ethereum"
+        leadingContent={
+          <MediaImage
+            src="https://crypto-icons.ledger.com/ETH.png"
+            alt="Ethereum"
+            size={12}
+            shape="square"
+          />
+        }
+      />
+    </>
+  );
+}
+```
+
+### Custom Styling
+
+While the component comes with predefined styles, you can extend them using the `lx` prop for layout adjustments:
+
+```tsx
+<MediaTag
+  size="md"
+  appearance="accent"
+  label="Custom MediaTag"
+  leadingContent={myIcon}
+  lx={{ marginTop: 's4' }}
+/>
+```
+
+### With Crypto Icons
+
+The MediaTag accepts any `ReactNode` as its `leadingContent`, including crypto icons. Use **16px** for `md` and **12px** for `sm`:
+
+```tsx
+import { MediaTag } from '@ledgerhq/lumen-ui-rnative';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
+
+function MyComponent() {
+  return (
+    <>
+      {/* md → leadingContent size 16 */}
+      <MediaTag
+        size="md"
+        label="Bitcoin"
+        leadingContent={<CryptoIcon ledgerId="bitcoin" ticker="BTC" size={16} />}
+      />
+
+      {/* sm → leadingContent size 12 */}
+      <MediaTag
+        size="sm"
+        label="Bitcoin"
+        leadingContent={<CryptoIcon ledgerId="bitcoin" ticker="BTC" size={12} />}
+      />
+    </>
+  );
+}
+```
+
+</Tab>
+</CustomTabs>

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

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { MediaImage } from '../MediaImage';
+import { Box } from '../Utility/Box';
+import { MediaTag } from './MediaTag';
+
+const ETH_ICON = (
+  <MediaImage
+    src='https://crypto-icons.ledger.com/ETH.png'
+    alt='Ethereum'
+    size={16}
+    shape='square'
+  />
+);
+
+const meta: Meta<typeof MediaTag> = {
+  component: MediaTag,
+  title: 'Communication/MediaTag',
+  argTypes: {
+    appearance: {
+      control: 'select',
+      options: [
+        'base',
+        'gray',
+        'accent',
+        'accent-subtle',
+        'success',
+        'error',
+        'warning',
+        'white',
+      ],
+    },
+    size: {
+      control: 'radio',
+      options: ['sm', 'md'],
+    },
+    label: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MediaTag>;
+
+export const Base: Story = {
+  args: {
+    label: 'Ethereum',
+    appearance: 'accent',
+    size: 'md',
+  },
+  render: (args) => <MediaTag {...args} leadingContent={ETH_ICON} />,
+};
+
+export const AppearanceShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 's4' }}>
+      <MediaTag appearance='base' label='Base' leadingContent={ETH_ICON} />
+      <MediaTag appearance='gray' label='Gray' leadingContent={ETH_ICON} />
+      <MediaTag appearance='accent' label='Accent' leadingContent={ETH_ICON} />
+      <MediaTag
+        appearance='accent-subtle'
+        label='Accent subtle'
+        leadingContent={ETH_ICON}
+      />
+      <MediaTag
+        appearance='success'
+        label='Success'
+        leadingContent={ETH_ICON}
+      />
+      <MediaTag appearance='error' label='Error' leadingContent={ETH_ICON} />
+      <MediaTag
+        appearance='warning'
+        label='Warning'
+        leadingContent={ETH_ICON}
+      />
+      <MediaTag appearance='white' label='White' leadingContent={ETH_ICON} />
+      <MediaTag label='Disabled' leadingContent={ETH_ICON} disabled />
+    </Box>
+  ),
+};
+
+export const SizeShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's4' }}>
+      <MediaTag size='md' label='Medium' leadingContent={ETH_ICON} />
+      <MediaTag
+        size='sm'
+        label='Small'
+        leadingContent={
+          <MediaImage
+            src='https://crypto-icons.ledger.com/ETH.png'
+            alt='Ethereum'
+            size={12}
+            shape='square'
+          />
+        }
+      />
+    </Box>
+  ),
+};
+
+export const TruncateShowcase: Story = {
+  render: () => (
+    <Box lx={{ width: 's176' }}>
+      <MediaTag
+        label='Very long text that truncates'
+        leadingContent={ETH_ICON}
+      />
+    </Box>
+  ),
+};

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

@@ -0,0 +1,27 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { MediaTag } from './MediaTag';
+
+const renderWithProvider = (component: React.ReactElement) =>
+  render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+
+describe('MediaTag Component', () => {
+  it('should render label and the provided ReactNode icon as-is', () => {
+    renderWithProvider(
+      <MediaTag
+        label='Bitcoin'
+        leadingContent={<Text testID='media-icon'>bitcoin-icon</Text>}
+      />,
+    );
+    expect(screen.getByText('Bitcoin')).toBeTruthy();
+    expect(screen.getByTestId('media-icon')).toBeTruthy();
+    expect(screen.getByText('bitcoin-icon')).toBeTruthy();
+  });
+});

package/src/lib/Components/MediaTag/MediaTag.tsx

@@ -0,0 +1,36 @@
+import { BaseTag } from '../BaseTag';
+import type { MediaTagProps } from './types';
+
+/**
+ * A compact label used to categorize, classify, or highlight information with a required media element (image, crypto icon, etc.).
+ *
+ * The appearance determines the color scheme used.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-mediatag-overview--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-mediatag-implementation--docs#dos-and-donts Guidelines}
+ *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the tag's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
+ * @example
+ * import { MediaTag, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // MediaTag with image
+ * <MediaTag
+ *   label='Ethereum'
+ *   leadingContent={<MediaImage src='https://crypto-icons.ledger.com/ETH.png' alt='Ethereum' size={16} shape='square' />}
+ * />
+ *
+ * // Small MediaTag
+ * <MediaTag label='Bitcoin' size='sm' leadingContent={myIcon} />
+ */
+export const MediaTag = ({ leadingContent, ...props }: MediaTagProps) => {
+  return (
+    <BaseTag
+      {...props}
+      variant='media'
+      consumerName='MediaTag'
+      renderIcon={() => leadingContent}
+    />
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './MediaTag';

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { TagProps } from '../Tag';
+
+export type MediaTagProps = Omit<TagProps, 'icon'> & {
+  /**
+   * The media element rendered before the label (e.g. an image or a crypto icon).
+   * Should be sized to match the tag's `size`: 16px for `md`, 12px for `sm`.
+   */
+  leadingContent: ReactNode;
+};

package/src/lib/Components/OptionList/OptionList.mdx

@@ -36,6 +36,7 @@ It handles **selection state**, **automatic grouping** (via a `group` field on i
 - **OptionListItemContentRow**: Horizontal row for placing elements side-by-side (e.g. title + tag)
 - **OptionListItemText**: Styled title text
 - **OptionListItemDescription**: Styled description text
+- **OptionListSearch**: Search input that filters items by label (default) or via a custom `filter` function
 
 ## Properties
 
@@ -63,6 +64,24 @@ Combining grouping with rich item content:
 
 <Canvas of={OptionListStories.GroupedWithContentRow} />
 
+### Search
+
+Drop `OptionListSearch` inside the list to enable case-insensitive filtering on item labels. Pair with `OptionListEmptyState` to handle no-match scenarios. Pass a custom `filter` to match against meta (or anything else), or `filter={null}` to disable filtering. Use `filteredItems` + `onSearchValueChange` for async/server-side search.
+
+<Canvas of={OptionListStories.WithSearch} />
+
+Search works within grouped items too. Empty groups are hidden automatically:
+
+<Canvas of={OptionListStories.WithSearchAndGroups} />
+
+Pass a custom `filter` to match against fields beyond the label. Here, the query also matches each item's ticker via `meta`:
+
+<Canvas of={OptionListStories.WithCustomSearchFilter} />
+
+Drive the search input from the outside with `searchValue` + `onSearchValueChange`. This is useful for syncing search state with other UI or kicking off async fetches:
+
+<Canvas of={OptionListStories.WithControlledSearch} />
+
 ### Trigger showcase
 
 OptionList can be opened from any trigger. `MediaButton` supports multiple appearances (`gray`, `transparent`, `no-background`), optional icons (`flat` / `rounded`), and disabled state: