@ledgerhq/lumen-ui-rnative 0.1.23 → 0.1.25

package/src/lib/Components/Banner/Banner.tsx

@@ -1,5 +1,5 @@
 import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
@@ -10,11 +10,11 @@ import {
   DeleteCircleFill,
   Close,
 } from '../../Symbols';
-import { IconProps } from '../Icon';
+import type { IconProps } from '../Icon';
 import { IconButton } from '../IconButton';
 import { Box } from '../Utility';
 import { Wrap } from '../Wrap';
-import { BannerProps } from './types';
+import type { BannerProps } from './types';
 
 type Appearance = NonNullable<BannerProps['appearance']>;
 

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { StyledViewProps } from '../../../styles';
+import type { ReactNode } from 'react';
+import type { StyledViewProps } from '../../../styles';
 
 export type BannerProps = {
   /**

package/src/lib/Components/BaseInput/BaseInput.tsx

@@ -18,7 +18,8 @@ import Animated, {
   cancelAnimation,
 } from 'react-native-reanimated';
 import { useCommonTranslation } from '../../../i18n';
-import { LumenStyleSheetTheme, useStyleSheet, useTheme } from '../../../styles';
+import type { LumenStyleSheetTheme } from '../../../styles';
+import { useStyleSheet, useTheme } from '../../../styles';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { DeleteCircleFill } from '../../Symbols/Icons/DeleteCircleFill';
 import { RuntimeConstants } from '../../utils';

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

@@ -1,10 +1,10 @@
-import {
+import type {
   TextStyle,
-  type StyleProp,
-  type TextInputProps,
-  type ViewStyle,
+  ViewStyle,
+  StyleProp,
+  TextInputProps,
 } from 'react-native';
-import { BoxProps } from '../Utility';
+import type { BoxProps } from '../Utility';
 
 export type BaseInputProps = {
   /**

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

@@ -1,6 +1,7 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
-import { render, RenderOptions } from '@testing-library/react-native';
+import type { RenderOptions } from '@testing-library/react-native';
+import { render } from '@testing-library/react-native';
 import { Text, View } from 'react-native';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { BottomSheet as BottomSheetComponent } from './BottomSheet';

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

@@ -1,7 +1,5 @@
-import {
-  BottomSheetModal as GorhomBottomSheetModal,
-  SNAP_POINT_TYPE,
-} from '@gorhom/bottom-sheet';
+import type { SNAP_POINT_TYPE } from '@gorhom/bottom-sheet';
+import { BottomSheetModal as GorhomBottomSheetModal } from '@gorhom/bottom-sheet';
 import { createSafeContext, useMergedRef } from '@ledgerhq/lumen-utils-shared';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { StyleSheet } from 'react-native';
@@ -9,7 +7,7 @@ import { useStyleSheet } from '../../../styles';
 import { RuntimeConstants } from '../../utils';
 import { CustomBackdrop } from './CustomBackdrop';
 import { CustomHandle } from './CustomHandle';
-import { BottomSheetProps } from './types';
+import type { BottomSheetProps } from './types';
 
 const OFFSET_TOP = 25;
 const FULL_HEIGHT = RuntimeConstants.insetDimensions.height;

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

@@ -7,7 +7,7 @@ import { ArrowLeft, Close } from '../../Symbols';
 import { IconButton } from '../IconButton';
 import { Box, Text } from '../Utility';
 import { useBottomSheetContext } from './BottomSheet';
-import { BottomSheetHeaderProps } from './types';
+import type { BottomSheetHeaderProps } from './types';
 
 type DensityValue = NonNullable<BottomSheetHeaderProps['density']>;
 

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

@@ -1,6 +1,6 @@
 import { BottomSheetBackdrop as GorhomBottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import { useStyleSheet } from '../../../styles';
-import { BottomSheetProps } from './types';
+import type { BottomSheetProps } from './types';
 
 type BackDropProps = React.ComponentProps<typeof GorhomBottomSheetBackdrop> & {
   backdropPressBehavior?: BottomSheetProps['backdropPressBehavior'];

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

@@ -1,5 +1,5 @@
-import { BottomSheetVariables } from '@gorhom/bottom-sheet/lib/typescript/types';
-import { Ref } from 'react';
+import type { BottomSheetVariables } from '@gorhom/bottom-sheet/lib/typescript/types';
+import type { Ref } from 'react';
 import { View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 

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

@@ -5,9 +5,9 @@ import {
   BottomSheetScrollView as GorhomBottomSheetScrollView,
   BottomSheetVirtualizedList as GorhomBottomSheetVirtualizedList,
 } from '@gorhom/bottom-sheet';
-import { ViewStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
 import { useStyleSheet } from '../../../styles';
-import {
+import type {
   BottomSheetViewProps,
   BottomSheetFlatListProps,
   BottomSheetSectionListProps,

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

@@ -1,4 +1,4 @@
-import {
+import type {
   BottomSheetModal as GorhomBottomSheetModal,
   BottomSheetView as GorhomBottomSheetView,
   BottomSheetFlatList as GorhomBottomSheetFlatList,
@@ -7,9 +7,9 @@ import {
   BottomSheetVirtualizedList as GorhomBottomSheetVirtualizedList,
 } from '@gorhom/bottom-sheet';
 
-import { Density } from '@ledgerhq/lumen-utils-shared';
-import { PropsWithChildren, ReactNode, Ref } from 'react';
-import { StyledViewProps } from '../../../styles';
+import type { Density } from '@ledgerhq/lumen-utils-shared';
+import type { PropsWithChildren, ReactNode, Ref } from 'react';
+import type { StyledViewProps } from '../../../styles';
 export type BottomSheetProps = PropsWithChildren & {
   /**
    * Ref to the bottom sheet component.

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

@@ -1,4 +1,4 @@
-import { BottomSheetModal as GorhomBottomSheetModal } from '@gorhom/bottom-sheet';
+import type { BottomSheetModal as GorhomBottomSheetModal } from '@gorhom/bottom-sheet';
 import { useRef } from 'react';
 
 export const useBottomSheetRef = () => {

package/src/lib/Components/Button/BaseButton.test.tsx

@@ -1,7 +1,7 @@
 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 { ViewStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
 
 import { Plus, Settings } from '../../Symbols';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';

package/src/lib/Components/Button/BaseButton.tsx

@@ -1,11 +1,11 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
-import { IconSize } from '../Icon';
+import type { IconSize } from '../Icon';
 import { Spinner } from '../Spinner';
 import { Pressable } from '../Utility';
-import { BaseButtonProps } from './types';
+import type { BaseButtonProps } from './types';
 
 type Appearance = NonNullable<BaseButtonProps['appearance']>;
 type Size = NonNullable<BaseButtonProps['size']>;

package/src/lib/Components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import { BaseButton } from './BaseButton';
-import { ButtonProps } from './types';
+import type { ButtonProps } from './types';
 
 /**
  * A customizable button component that supports various appearances, sizes, full-width mode, loading states, and optional icons.

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

@@ -1,7 +1,7 @@
-import { ComponentType, ReactNode } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { StyledPressableProps } from '../../../styles';
-import { IconSize } from '../Icon';
+import type { ComponentType, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyledPressableProps } from '../../../styles';
+import type { IconSize } from '../Icon';
 
 export type BaseButtonProps = {
   /**

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

@@ -16,7 +16,7 @@ import {
   CardFooter,
   CardFooterActions,
 } from './Card';
-import { CardProps } from './types';
+import type { CardProps } from './types';
 
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>

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

@@ -3,8 +3,10 @@ import {
   DisabledProvider,
   isTextChildren,
 } from '@ledgerhq/lumen-utils-shared';
-import { ReactNode, Ref, useCallback, useEffect, useMemo } from 'react';
-import { LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native';
+import type { ReactNode, Ref } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import type { LayoutChangeEvent, ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -15,7 +17,7 @@ import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { ChevronDown, ChevronUp } from '../../Symbols';
 import { Box, Text, Pressable } from '../Utility';
 
-import {
+import type {
   CardContentAlignContextValue,
   CardContentDescriptionProps,
   CardContentProps,

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { GestureResponderEvent } from 'react-native';
-import { StyledTextProps, StyledViewProps } from '../../../styles';
+import type { ReactNode } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+import type { StyledTextProps, StyledViewProps } from '../../../styles';
 
 export type CardType = 'interactive' | 'expandable' | 'info';
 

package/src/lib/Components/CardButton/CardButton.tsx

@@ -4,7 +4,7 @@ import { useStyleSheet } from '../../../styles';
 import { ChevronRight } from '../../Symbols';
 import { Pressable } from '../Utility';
 
-import { CardButtonProps } from './types';
+import type { CardButtonProps } from './types';
 
 type Appearance = NonNullable<CardButtonProps['appearance']>;
 

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

@@ -1,6 +1,6 @@
-import { StyleProp, ViewStyle } from 'react-native';
-import { StyledPressableProps } from '../../../styles';
-import { IconSize } from '../Icon';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyledPressableProps } from '../../../styles';
+import type { IconSize } from '../Icon';
 
 export type CardButtonProps = {
   /**

package/src/lib/Components/Checkbox/BaseCheckbox.tsx

@@ -1,19 +1,15 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
 import { useCallback } from 'react';
-import {
-  GestureResponderEvent,
-  Pressable,
-  View,
-  StyleSheet,
-} from 'react-native';
+import type { GestureResponderEvent } from 'react-native';
+import { Pressable, View, StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
-import {
+import type {
   ForceMountable,
   SlottablePressableProps,
   SlottableViewProps,
 } from '../../types';
 import { SlotPressable, SlotView } from '../Slot';
-import { CheckboxProps } from './types';
+import type { CheckboxProps } from './types';
 
 const ROOT_COMPONENT_NAME = 'BaseCheckbox';
 const TRIGGER_COMPONENT_NAME = 'BaseCheckboxTrigger';

package/src/lib/Components/Checkbox/Checkbox.tsx

@@ -6,7 +6,7 @@ import { Label } from '../Label';
 import { Box } from '../Utility';
 import { BaseCheckboxIndicator, BaseCheckboxRoot } from './BaseCheckbox';
 
-import { CheckboxProps } from './types';
+import type { CheckboxProps } from './types';
 
 /**
  * The checkbox follows the design system tokens and supports checked, unchecked,

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

@@ -1,4 +1,4 @@
-import { StyledViewProps } from '../../../styles';
+import type { StyledViewProps } from '../../../styles';
 
 export type CheckboxProps = {
   /**

package/src/lib/Components/ContentBanner/ContentBanner.tsx

@@ -5,7 +5,7 @@ import { useStyleSheet } from '../../../styles';
 import { Close } from '../../Symbols';
 import { InteractiveIcon } from '../InteractiveIcon';
 import { Box, Text } from '../Utility';
-import {
+import type {
   ContentBannerContentProps,
   ContentBannerDescriptionProps,
   ContentBannerProps,

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

@@ -1,4 +1,4 @@
-import { StyledTextProps, StyledViewProps } from '../../../styles';
+import type { StyledTextProps, StyledViewProps } from '../../../styles';
 
 /**
  * Props for the ContentBanner root component

package/src/lib/Components/Divider/Divider.tsx

@@ -1,5 +1,5 @@
 import { Box } from '../Utility';
-import { DividerProps } from './types';
+import type { DividerProps } from './types';
 
 /**
  * A simple divider component for separating content sections.

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

@@ -1,4 +1,4 @@
-import { BoxProps } from '../Utility';
+import type { BoxProps } from '../Utility';
 
 export type DividerProps = {
   /**

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>
+  ),
+};