@ledgerhq/lumen-ui-rnative 0.1.33 → 0.1.34

package/dist/typescript/src/lib/Components/MediaTag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaTag/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC"}

package/dist/typescript/src/lib/Components/MediaTag/types.d.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;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/typescript/src/lib/Components/MediaTag/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaTag/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAG;IACnD;;;OAGG;IACH,cAAc,EAAE,SAAS,CAAC;CAC3B,CAAC"}

package/dist/typescript/src/lib/Components/Tag/Tag.d.ts

@@ -26,5 +26,5 @@ import type { TagProps } from './types';
  * // Small tag
  * <Tag label="Small" size="sm" />
  */
-export declare const Tag: ({ appearance, size, icon, label, disabled: disabledProp, lx, style, ref, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: ({ icon, size, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tag.d.ts.map

package/dist/typescript/src/lib/Components/Tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Tag/Tag.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiGxC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,GAAG,GAAI,qFAUjB,QAAQ,4CAuBV,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Tag/Tag.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AASxC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,GAAG,GAAI,0BAAiC,QAAQ,4CAiB5D,CAAC"}

package/dist/typescript/src/lib/Components/Tag/types.d.ts

@@ -5,7 +5,7 @@ export type TagProps = {
     /**
      * The appearance of the tag.
      */
-    appearance?: 'base' | 'gray' | 'accent' | 'accent-subtle' | 'success' | 'error' | 'warning';
+    appearance?: 'base' | 'gray' | 'accent' | 'accent-subtle' | 'success' | 'error' | 'warning' | 'white';
     /**
      * The icon of the tag.
      */

package/dist/typescript/src/lib/Components/Tag/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Tag/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,QAAQ,GAAG;IACrB;;OAEG;IACH,UAAU,CAAC,EACP,MAAM,GACN,MAAM,GACN,QAAQ,GACR,eAAe,GACf,SAAS,GACT,OAAO,GACP,SAAS,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,eAAe,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Tag/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,QAAQ,GAAG;IACrB;;OAEG;IACH,UAAU,CAAC,EACP,MAAM,GACN,MAAM,GACN,QAAQ,GACR,eAAe,GACf,SAAS,GACT,OAAO,GACP,SAAS,GACT,OAAO,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,eAAe,CAAC"}

package/dist/typescript/src/lib/Components/index.d.ts

@@ -23,6 +23,7 @@ export * from './MediaBanner';
 export * from './MediaButton';
 export * from './MediaCard';
 export * from './MediaImage';
+export * from './MediaTag';
 export * from './NavBar';
 export * from './OptionList';
 export * from './PageIndicator';

package/dist/typescript/src/lib/Components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

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

@@ -0,0 +1,137 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import type { ViewStyle } from 'react-native';
+import { Text } from 'react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { BaseTag } from './BaseTag';
+import type { BaseTagProps } from './types';
+
+const { colors } = ledgerLiveThemes.dark;
+
+const renderWithProvider = (component: React.ReactElement) =>
+  render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+
+const baseProps = {
+  consumerName: 'BaseTagTest',
+  variant: 'tag',
+  label: 'Label',
+  testID: 'base-tag',
+} satisfies BaseTagProps;
+
+describe('BaseTag Component', () => {
+  describe('Rendering', () => {
+    it('should render label text', () => {
+      renderWithProvider(<BaseTag {...baseProps} label='Bitcoin' />);
+      expect(screen.getByText('Bitcoin')).toBeTruthy();
+    });
+
+    it('should render testID on root element', () => {
+      renderWithProvider(<BaseTag {...baseProps} />);
+      expect(screen.getByTestId('base-tag')).toBeTruthy();
+    });
+
+    it('should not render any icon when renderIcon is not provided', () => {
+      renderWithProvider(<BaseTag {...baseProps} />);
+      expect(screen.queryByTestId('test-icon')).toBeNull();
+    });
+
+    it('should call renderIcon with the computed icon style', () => {
+      const renderIcon = jest.fn(() => (
+        <Text testID='test-icon'>icon</Text>
+      )) as BaseTagProps['renderIcon'];
+      renderWithProvider(<BaseTag {...baseProps} renderIcon={renderIcon} />);
+      expect(screen.getByTestId('test-icon')).toBeTruthy();
+      expect(renderIcon).toHaveBeenCalledWith(
+        expect.objectContaining({ color: expect.any(String) }),
+      );
+    });
+  });
+
+  describe('Appearances', () => {
+    const cases: [NonNullable<BaseTagProps['appearance']>, string][] = [
+      ['base', colors.bg.mutedTransparent],
+      ['gray', colors.bg.mutedTransparent],
+      ['accent', colors.bg.accent],
+      ['accent-subtle', colors.bg.activeSubtle],
+      ['success', colors.bg.success],
+      ['error', colors.bg.error],
+      ['warning', colors.bg.warning],
+      ['white', colors.bg.white],
+    ];
+
+    it.each(cases)(
+      'should render with %s background color',
+      (appearance, expected) => {
+        renderWithProvider(<BaseTag {...baseProps} appearance={appearance} />);
+        expect(screen.getByTestId('base-tag').props.style.backgroundColor).toBe(
+          expected,
+        );
+      },
+    );
+  });
+
+  describe('Sizes', () => {
+    it.each(['sm', 'md'] as const)('should render with %s size', (size) => {
+      renderWithProvider(<BaseTag {...baseProps} size={size} />);
+      expect(screen.getByTestId('base-tag')).toBeTruthy();
+    });
+
+    it('should use smaller padding for sm than md (tag variant)', () => {
+      const { rerender } = renderWithProvider(
+        <BaseTag {...baseProps} size='md' />,
+      );
+      const mdPadding =
+        screen.getByTestId('base-tag').props.style.paddingHorizontal;
+
+      rerender(
+        <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+          <BaseTag {...baseProps} size='sm' />
+        </ThemeProvider>,
+      );
+      const smPadding =
+        screen.getByTestId('base-tag').props.style.paddingHorizontal;
+
+      expect(smPadding).toBeLessThan(mdPadding);
+    });
+  });
+
+  describe('Variants', () => {
+    it('should use paddingHorizontal for tag variant', () => {
+      renderWithProvider(<BaseTag {...baseProps} variant='tag' />);
+      const style = screen.getByTestId('base-tag').props.style;
+      expect(style.paddingHorizontal).toBeDefined();
+      expect(style.paddingLeft).toBeUndefined();
+      expect(style.paddingRight).toBeUndefined();
+    });
+
+    it('should use asymmetric paddingLeft / paddingRight for media variant', () => {
+      renderWithProvider(<BaseTag {...baseProps} variant='media' />);
+      const style = screen.getByTestId('base-tag').props.style;
+      expect(style.paddingLeft).toBeDefined();
+      expect(style.paddingRight).toBeDefined();
+      expect(style.paddingHorizontal).toBeUndefined();
+    });
+  });
+
+  describe('Disabled', () => {
+    it('should apply disabled background when disabled', () => {
+      renderWithProvider(<BaseTag {...baseProps} disabled />);
+      expect(screen.getByTestId('base-tag').props.style.backgroundColor).toBe(
+        colors.bg.disabled,
+      );
+    });
+  });
+
+  describe('Styling', () => {
+    it('should merge custom style with computed root style', () => {
+      const custom: ViewStyle = { marginTop: 16 };
+      renderWithProvider(<BaseTag {...baseProps} style={custom} />);
+      expect(screen.getByTestId('base-tag').props.style.marginTop).toBe(16);
+    });
+  });
+});

package/src/lib/Components/BaseTag/BaseTag.tsx

@@ -0,0 +1,152 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import { StyleSheet, Text } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import type { TagProps } from '../Tag/types';
+import { Box } from '../Utility';
+import type { BaseTagProps, BaseTagVariant } from './types';
+
+type Appearance = NonNullable<TagProps['appearance']>;
+type Size = NonNullable<TagProps['size']>;
+
+const useBaseTagStyles = ({
+  appearance,
+  size,
+  disabled,
+  variant,
+}: {
+  appearance: Appearance;
+  size: Size;
+  disabled: boolean;
+  variant: BaseTagVariant;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const bgColors: Record<Appearance, string> = {
+        base: t.colors.bg.mutedTransparent,
+        gray: t.colors.bg.mutedTransparent,
+        accent: t.colors.bg.accent,
+        'accent-subtle': t.colors.bg.activeSubtle,
+        success: t.colors.bg.success,
+        error: t.colors.bg.error,
+        warning: t.colors.bg.warning,
+        white: t.colors.bg.white,
+      };
+
+      const textColors: Record<Appearance, string> = {
+        base: t.colors.text.base,
+        gray: t.colors.text.muted,
+        accent: t.colors.text.onAccent,
+        'accent-subtle': t.colors.text.active,
+        success: t.colors.text.success,
+        error: t.colors.text.error,
+        warning: t.colors.text.warning,
+        white: t.colors.text.black,
+      };
+
+      const tagPadding = {
+        md: {
+          paddingHorizontal: t.spacings.s8,
+          paddingVertical: t.spacings.s4,
+        },
+        sm: {
+          paddingHorizontal: t.spacings.s4,
+          paddingVertical: t.spacings.s2,
+        },
+      } satisfies Record<Size, object>;
+
+      const mediaPadding = {
+        md: {
+          paddingLeft: t.spacings.s4,
+          paddingRight: t.spacings.s8,
+          paddingVertical: t.spacings.s4,
+        },
+        sm: {
+          paddingLeft: t.spacings.s4,
+          paddingRight: t.spacings.s4,
+          paddingVertical: t.spacings.s2,
+        },
+      } satisfies Record<Size, object>;
+
+      const padding =
+        variant === 'media' ? mediaPadding[size] : tagPadding[size];
+
+      const textTypography =
+        size === 'md' ? t.typographies.body3 : t.typographies.body4;
+
+      return {
+        root: StyleSheet.flatten([
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: t.spacings.s4,
+            borderRadius: t.borderRadius.xs,
+            backgroundColor: bgColors[appearance],
+            ...padding,
+          },
+          disabled && {
+            backgroundColor: t.colors.bg.disabled,
+          },
+        ]),
+        text: StyleSheet.flatten([
+          textTypography,
+          {
+            color: textColors[appearance],
+          },
+          disabled && {
+            color: t.colors.text.disabled,
+          },
+        ]),
+        icon: StyleSheet.flatten([
+          {
+            flexShrink: 0,
+            color: textColors[appearance],
+          },
+          disabled && {
+            color: t.colors.text.disabled,
+          },
+        ]),
+      };
+    },
+    [appearance, size, disabled, variant],
+  );
+};
+
+export const BaseTag = ({
+  appearance = 'accent',
+  size = 'md',
+  variant,
+  consumerName,
+  label,
+  renderIcon,
+  disabled: disabledProp = false,
+  lx = {},
+  style,
+  ref,
+  ...props
+}: BaseTagProps) => {
+  const disabled = useDisabledContext({
+    consumerName,
+    mergeWith: { disabled: disabledProp },
+  });
+  const styles = useBaseTagStyles({
+    appearance,
+    size,
+    disabled: !!disabled,
+    variant,
+  });
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([styles.root, style])}
+      {...props}
+    >
+      {renderIcon?.(styles.icon)}
+      <Text style={styles.text} numberOfLines={1}>
+        {label}
+      </Text>
+    </Box>
+  );
+};

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

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

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import type { TagProps } from '../Tag/types';
+
+export type BaseTagVariant = 'tag' | 'media';
+
+export type BaseTagProps = Omit<TagProps, 'icon'> & {
+  variant: BaseTagVariant;
+  consumerName: string;
+  renderIcon?: (style: StyleProp<TextStyle>) => ReactNode;
+};

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';
@@ -119,7 +120,10 @@ export const MediaImage = ({
       {loading && <Skeleton style={StyleSheet.absoluteFillObject} />}
       {!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>
+  ),
+};