@ledgerhq/lumen-ui-rnative 0.1.24 → 0.1.25

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;AA+FxC;;;;;;;;;;;;;;;;;;;;;;;;;;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":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiGxC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,GAAG,GAAI,qFAUjB,QAAQ,4CAuBV,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' | 'success' | 'error' | 'warning';
+    appearance?: 'base' | 'gray' | 'accent' | 'accent-subtle' | 'success' | 'error' | 'warning';
     /**
      * 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,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1E;;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,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"}

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

@@ -10,6 +10,7 @@ export * from './CardButton';
 export * from './ContentBanner';
 export * from './Checkbox';
 export * from './Divider';
+export * from './DotIcon';
 export * from './DotSymbol';
 export * from './Icon';
 export * from './IconButton';

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,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,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,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,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,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,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,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}

package/package.json

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

package/src/lib/Components/DotIcon/DotIcon.mdx

@@ -0,0 +1,56 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DotIconStories from './DotIcon.stories';
+
+<Meta title='Communication/DotIcon' of={DotIconStories} />
+
+# DotIcon
+
+## Introduction
+
+DotIcon positions a small icon indicator at a configurable corner of a child element such as MediaImage or Spot. The dot background uses a semantic color (`success`, `muted`, or `error`) to convey meaning at a glance.
+> View in [Figma](https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA/1.-Symbol-Library?node-id=6159-1866).
+
+## Anatomy
+
+<Canvas of={DotIconStories.Base} />
+
+- **Wrapper**: Relative container that preserves the child's layout
+- **Child**: The primary element (e.g. MediaImage, Spot)
+- **Dot**: Absolutely-positioned indicator with a semantic background and an icon inside
+
+## Properties
+
+### Overview
+
+<Canvas of={DotIconStories.Base} />
+<Controls of={DotIconStories.Base} />
+
+### Pin
+
+Four corner placements are available: `bottom-end` (default), `top-end`, `bottom-start`, and `top-start`.
+
+<Canvas of={DotIconStories.PinShowcase} />
+
+### Shapes
+
+<Canvas of={DotIconStories.ShapeShowcase} />
+
+- **circle** (default): Fully rounded dot
+- **square**: Rounded corners that scale with size
+
+### Appearances
+
+The `appearance` prop controls the semantic background color of the dot: `success`, `muted`, or `error`.
+
+<Canvas of={DotIconStories.AppearanceShowcase} />
+
+### Sizes
+
+The dot size is driven by the parent MediaImage or Spot size via the mapping helpers `mediaImageDotIconSizeMap` and `spotDotIconSizeMap`. Allowed sizes are `16`, `20`, and `24`. The icon size is handled internally by the component.
+
+<Canvas of={DotIconStories.SizeShowcase} />
+
+## Accessibility
+
+- The icon is purely decorative; the child element should carry its own accessibility label.
+- Pair semantic appearances with meaningful icons so the state can be understood without relying on color alone.

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

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { ArrowDown, ArrowUp, Close, Link, Star } from '../../Symbols';
+import { MediaImage } from '../MediaImage';
+import { Spinner } from '../Spinner';
+import { Box } from '../Utility';
+import { DotIcon, mediaImageDotIconSizeMap } from './DotIcon';
+
+const meta = {
+  component: DotIcon,
+  title: 'Communication/DotIcon',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+} satisfies Meta<typeof DotIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const parentSrc = 'https://crypto-icons.ledger.com/ADA.png';
+
+export const Base: Story = {
+  args: {
+    appearance: 'success',
+    icon: ArrowDown,
+    pin: 'bottom-end',
+    size: mediaImageDotIconSizeMap[48],
+    shape: 'circle',
+    children: (
+      <MediaImage src={parentSrc} alt='Cardano' size={48} shape='circle' />
+    ),
+  },
+};
+
+export const PinShowcase: Story = {
+  args: { appearance: 'success', icon: ArrowDown },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's32' }}>
+      <DotIcon appearance='success' icon={ArrowDown} pin='bottom-end'>
+        <MediaImage src={parentSrc} shape='circle' />
+      </DotIcon>
+      <DotIcon appearance='success' icon={ArrowDown} pin='top-end'>
+        <MediaImage src={parentSrc} shape='circle' />
+      </DotIcon>
+      <DotIcon appearance='success' icon={ArrowDown} pin='bottom-start'>
+        <MediaImage src={parentSrc} shape='circle' />
+      </DotIcon>
+      <DotIcon appearance='success' icon={ArrowDown} pin='top-start'>
+        <MediaImage src={parentSrc} shape='circle' />
+      </DotIcon>
+    </Box>
+  ),
+};
+
+export const ShapeShowcase: Story = {
+  args: { appearance: 'muted', icon: ArrowDown },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's48' }}>
+      <DotIcon
+        appearance='muted'
+        icon={ArrowDown}
+        shape='circle'
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='muted'
+        icon={ArrowDown}
+        shape='square'
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={48} shape='square' />
+      </DotIcon>
+    </Box>
+  ),
+};
+
+export const AppearanceShowcase: Story = {
+  args: { appearance: 'success', icon: ArrowDown },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's32' }}>
+      <DotIcon
+        appearance='success'
+        icon={ArrowDown}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='muted'
+        icon={ArrowUp}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='error'
+        icon={Close}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+    </Box>
+  ),
+};
+
+export const SizeShowcase: Story = {
+  args: { appearance: 'muted', icon: Link },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'flex-end', gap: 's24' }}>
+      <DotIcon
+        appearance='muted'
+        icon={Link}
+        size={mediaImageDotIconSizeMap[40]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={40} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='success'
+        icon={Star}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='success'
+        icon={ArrowDown}
+        size={mediaImageDotIconSizeMap[56]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={56} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='muted'
+        icon={Spinner}
+        size={mediaImageDotIconSizeMap[64]}
+        pin='bottom-end'
+      >
+        <MediaImage src={parentSrc} size={64} shape='circle' />
+      </DotIcon>
+    </Box>
+  ),
+};

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

@@ -0,0 +1,224 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render } from '@testing-library/react-native';
+import { createRef } from 'react';
+import type { View } from 'react-native';
+import { Text } from 'react-native';
+import { ArrowDown } from '../../Symbols';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { DotIcon } from './DotIcon';
+
+const { colors, sizes, borderRadius } = ledgerLiveThemes.dark;
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('DotIcon Component', () => {
+  describe('Rendering', () => {
+    it('should render children', () => {
+      const { getByText } = render(
+        <TestWrapper>
+          <DotIcon testID='dot-icon' appearance='success' icon={ArrowDown}>
+            <Text>Child</Text>
+          </DotIcon>
+        </TestWrapper>,
+      );
+
+      expect(getByText('Child')).toBeTruthy();
+    });
+
+    it('should render without children', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon testID='dot-icon' appearance='success' icon={ArrowDown} />
+        </TestWrapper>,
+      );
+
+      expect(getByTestId('dot-icon')).toBeTruthy();
+    });
+
+    it('should have correct displayName', () => {
+      expect(DotIcon.displayName).toBe('DotIcon');
+    });
+  });
+
+  describe('Appearances', () => {
+    it.each([
+      {
+        appearance: 'success' as const,
+        expectedColor: colors.bg.successStrong,
+      },
+      { appearance: 'muted' as const, expectedColor: colors.bg.mutedStrong },
+      { appearance: 'error' as const, expectedColor: colors.bg.errorStrong },
+    ])(
+      'should apply $appearance background color to the dot',
+      ({ appearance, expectedColor }) => {
+        const { getByTestId } = render(
+          <TestWrapper>
+            <DotIcon
+              testID='dot-icon'
+              appearance={appearance}
+              icon={ArrowDown}
+            />
+          </TestWrapper>,
+        );
+
+        const dotView = getByTestId('dot-icon-dot');
+        expect(dotView.props.style.backgroundColor).toBe(expectedColor);
+      },
+    );
+  });
+
+  describe('Sizes', () => {
+    it.each([
+      { size: 16 as const, expectedSize: sizes.s16 },
+      { size: 20 as const, expectedSize: sizes.s20 },
+      { size: 24 as const, expectedSize: sizes.s24 },
+    ])(
+      'should apply correct width and height for size $size',
+      ({ size, expectedSize }) => {
+        const { getByTestId } = render(
+          <TestWrapper>
+            <DotIcon
+              testID='dot-icon'
+              appearance='success'
+              icon={ArrowDown}
+              size={size}
+            />
+          </TestWrapper>,
+        );
+
+        const dotView = getByTestId('dot-icon-dot');
+        expect(dotView.props.style.width).toBe(expectedSize);
+        expect(dotView.props.style.height).toBe(expectedSize);
+      },
+    );
+  });
+
+  describe('Pins', () => {
+    it.each([
+      {
+        pin: 'bottom-end' as const,
+        verticalKey: 'bottom',
+        horizontalKey: 'right',
+      },
+      {
+        pin: 'bottom-start' as const,
+        verticalKey: 'bottom',
+        horizontalKey: 'left',
+      },
+      {
+        pin: 'top-end' as const,
+        verticalKey: 'top',
+        horizontalKey: 'right',
+      },
+      {
+        pin: 'top-start' as const,
+        verticalKey: 'top',
+        horizontalKey: 'left',
+      },
+    ])('should position dot at $pin', ({ pin, verticalKey, horizontalKey }) => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon
+            testID='dot-icon'
+            appearance='success'
+            icon={ArrowDown}
+            pin={pin}
+          />
+        </TestWrapper>,
+      );
+
+      const dotView = getByTestId('dot-icon-dot');
+      expect(dotView.props.style[verticalKey]).toBe(-3);
+      expect(dotView.props.style[horizontalKey]).toBe(-3);
+    });
+  });
+
+  describe('Shapes', () => {
+    it('should apply full border radius for circle shape', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon
+            testID='dot-icon'
+            appearance='success'
+            icon={ArrowDown}
+            shape='circle'
+          />
+        </TestWrapper>,
+      );
+
+      const dotView = getByTestId('dot-icon-dot');
+      expect(dotView.props.style.borderRadius).toBe(borderRadius.full);
+    });
+
+    it.each([
+      { size: 16 as const, expectedRadius: 5 },
+      { size: 20 as const, expectedRadius: 6 },
+      { size: 24 as const, expectedRadius: 8 },
+    ])(
+      'should apply correct border radius for square shape at size $size',
+      ({ size, expectedRadius }) => {
+        const { getByTestId } = render(
+          <TestWrapper>
+            <DotIcon
+              testID='dot-icon'
+              appearance='success'
+              icon={ArrowDown}
+              shape='square'
+              size={size}
+            />
+          </TestWrapper>,
+        );
+
+        const dotView = getByTestId('dot-icon-dot');
+        expect(dotView.props.style.borderRadius).toBe(expectedRadius);
+      },
+    );
+  });
+
+  describe('Ref forwarding', () => {
+    it('should forward ref to the root element', () => {
+      const ref = createRef<View>();
+
+      render(
+        <TestWrapper>
+          <DotIcon ref={ref} appearance='success' icon={ArrowDown} />
+        </TestWrapper>,
+      );
+
+      expect(ref.current).not.toBeNull();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom styles', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon
+            testID='dot-icon'
+            appearance='success'
+            icon={ArrowDown}
+            style={{ marginTop: 10 }}
+          />
+        </TestWrapper>,
+      );
+
+      const root = getByTestId('dot-icon');
+      expect(root.props.style.marginTop).toBe(10);
+    });
+
+    it('should pass additional props', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <DotIcon testID='custom-dot' appearance='success' icon={ArrowDown} />
+        </TestWrapper>,
+      );
+
+      expect(getByTestId('custom-dot')).toBeTruthy();
+    });
+  });
+});

package/src/lib/Components/DotIcon/DotIcon.tsx

@@ -0,0 +1,146 @@
+import { StyleSheet } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import type { IconSize } from '../Icon';
+import { Box } from '../Utility';
+import type {
+  DotIconAppearance,
+  DotIconPin,
+  DotIconProps,
+  DotIconSize,
+} from './types';
+
+const dotIconSizeMap: Record<DotIconSize, IconSize> = {
+  16: 12,
+  20: 12,
+  24: 16,
+};
+
+const dotSquareRadiusMap: Record<DotIconSize, number> = {
+  16: 5,
+  20: 6,
+  24: 8,
+};
+
+export const mediaImageDotIconSizeMap = {
+  40: 16,
+  48: 20,
+  56: 24,
+  64: 24,
+} as const satisfies Record<number, DotIconSize>;
+
+export const spotDotIconSizeMap = {
+  40: 16,
+  48: 20,
+  56: 24,
+  72: 24,
+} as const satisfies Record<number, DotIconSize>;
+
+const pinAxisMap: Record<DotIconPin, [vertical: string, horizontal: string]> = {
+  'top-start': ['top', 'left'],
+  'top-end': ['top', 'right'],
+  'bottom-start': ['bottom', 'left'],
+  'bottom-end': ['bottom', 'right'],
+};
+
+const DOT_OFFSET = -3;
+
+const getPinOffset = (pin: DotIconPin): Record<string, number> => {
+  const [v, h] = pinAxisMap[pin];
+  return { [v]: DOT_OFFSET, [h]: DOT_OFFSET };
+};
+
+const appearanceBgMap: Record<
+  DotIconAppearance,
+  'successStrong' | 'mutedStrong' | 'errorStrong'
+> = {
+  success: 'successStrong',
+  muted: 'mutedStrong',
+  error: 'errorStrong',
+};
+
+const useStyles = ({
+  size,
+  shape,
+  pin,
+  appearance,
+}: {
+  size: DotIconSize;
+  shape: 'square' | 'circle';
+  pin: DotIconPin;
+  appearance: DotIconAppearance;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const sizeValue = t.sizes[`s${size}` as keyof typeof t.sizes] as number;
+      const radius =
+        shape === 'circle' ? t.borderRadius.full : dotSquareRadiusMap[size];
+      const pinOffset = getPinOffset(pin);
+
+      return {
+        dot: {
+          position: 'absolute',
+          zIndex: 10,
+          width: sizeValue,
+          height: sizeValue,
+          borderRadius: radius,
+          borderWidth: 1,
+          backgroundColor: t.colors.bg[appearanceBgMap[appearance]],
+          borderColor: t.colors.border.baseInverted,
+          overflow: 'hidden',
+          alignItems: 'center',
+          justifyContent: 'center',
+          ...pinOffset,
+        },
+        icon: {
+          color: t.colors.text.onInteractive,
+        },
+      };
+    },
+    [size, shape, pin, appearance],
+  );
+};
+
+/**
+ * A wrapper component that positions a small icon indicator at a configurable
+ * corner of a child element like MediaImage or Spot. The dot background uses a
+ * semantic color (`success`, `muted`, or `error`).
+ *
+ * @example
+ * import { DotIcon } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <DotIcon appearance="success" icon={ArrowDown} pin="bottom-end">
+ *   <MediaImage src="https://example.com/usdc.png" alt="USDC" size={48} />
+ * </DotIcon>
+ */
+export const DotIcon = ({
+  children,
+  icon: Icon,
+  appearance,
+  pin = 'bottom-end',
+  size = 20,
+  shape = 'circle',
+  lx = {},
+  style,
+  ref,
+  ...rest
+}: DotIconProps) => {
+  const styles = useStyles({ size, shape, pin, appearance });
+
+  return (
+    <Box
+      ref={ref}
+      lx={lx}
+      style={StyleSheet.flatten([{ position: 'relative' }, style])}
+      {...rest}
+    >
+      <Box style={{ alignSelf: 'flex-start', position: 'relative' }}>
+        {children}
+        <Box testID='dot-icon-dot' style={styles.dot}>
+          <Icon size={dotIconSizeMap[size]} style={styles.icon} />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+DotIcon.displayName = 'DotIcon';

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

@@ -0,0 +1,6 @@
+export {
+  DotIcon,
+  mediaImageDotIconSizeMap,
+  spotDotIconSizeMap,
+} from './DotIcon';
+export * from './types';

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

@@ -0,0 +1,44 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import type { StyledViewProps } from '../../../styles';
+import type { IconSize } from '../Icon';
+
+export type DotIconSize = 16 | 20 | 24;
+
+export type DotIconPin =
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end';
+
+export type DotIconAppearance = 'success' | 'muted' | 'error';
+
+export type DotIconProps = {
+  /**
+   * Icon component to render inside the dot.
+   */
+  icon: ComponentType<{ size?: IconSize; style?: StyleProp<TextStyle> }>;
+  /**
+   * Semantic color of the dot background.
+   */
+  appearance: DotIconAppearance;
+  /**
+   * Corner placement of the dot indicator.
+   * @default 'bottom-end'
+   */
+  pin?: DotIconPin;
+  /**
+   * The size of the dot indicator in pixels.
+   * @default 20
+   */
+  size?: DotIconSize;
+  /**
+   * The shape of the dot indicator.
+   * @default 'circle'
+   */
+  shape?: 'square' | 'circle';
+  /**
+   * The wrapped component (e.g. MediaImage or Spot).
+   */
+  children?: ReactNode;
+} & Omit<StyledViewProps, 'children'>;