@ledgerhq/lumen-ui-rnative 0.1.23 → 0.1.25

package/src/lib/Components/Label/Label.tsx

@@ -1,7 +1,7 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useStyleSheet } from '../../../styles';
 import { Text } from '../Utility';
-import { LabelProps } from './types';
+import type { LabelProps } from './types';
 
 const useStyles = ({ disabled }: { disabled: boolean }) => {
   return useStyleSheet(

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

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

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

@@ -7,7 +7,7 @@ import { Linking } from 'react-native';
 import { Information } from '../../Symbols';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Link } from './Link';
-import { LinkProps } from './types';
+import type { LinkProps } from './types';
 
 // Mock Linking module - use spyOn after import to handle RN 0.79+ module structure
 const mockOpenURL = jest.fn(() => Promise.resolve());

package/src/lib/Components/Link/Link.tsx

@@ -1,9 +1,9 @@
 import { Linking, StyleSheet, Text, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { ExternalLink } from '../../Symbols';
-import { IconSize } from '../Icon';
+import type { IconSize } from '../Icon';
 import { Pressable } from '../Utility';
-import { LinkProps } from './types';
+import type { LinkProps } from './types';
 
 const iconSizeMap: Record<Size, IconSize> = {
   sm: 16,

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

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

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

@@ -13,7 +13,7 @@ import {
   ListItemDescription,
   ListItemTrailing,
 } from './ListItem';
-import { ListItemProps } from './types';
+import type { ListItemProps } from './types';
 
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>

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

@@ -4,16 +4,17 @@ import {
   DisabledProvider,
   useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
-import { ElementRef, ReactNode, Ref } from 'react';
-import { StyleSheet, View, ViewStyle } from 'react-native';
+import type { ElementRef, ReactNode, Ref } from 'react';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { Box, Pressable, Text } from '../Utility';
-import {
-  ListItemProps,
+import type {
   ListItemContentProps,
   ListItemContentRowProps,
   ListItemDescriptionProps,
   ListItemLeadingProps,
+  ListItemProps,
   ListItemTitleProps,
   ListItemTrailingProps,
 } from './types';

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

@@ -1,5 +1,5 @@
 import type { Density } from '@ledgerhq/lumen-utils-shared';
-import {
+import type {
   StyledPressableProps,
   StyledTextProps,
   StyledViewProps,

package/src/lib/Components/MediaBanner/MediaBanner.tsx

@@ -5,7 +5,7 @@ import { useStyleSheet, useTheme } from '../../../styles';
 import { Close } from '../../Symbols';
 import { InteractiveIcon } from '../InteractiveIcon';
 import { Box, LinearGradient, Pressable, Text } from '../Utility';
-import {
+import type {
   MediaBannerDescriptionProps,
   MediaBannerProps,
   MediaBannerTitleProps,

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { StyledPressableProps, StyledTextProps } from '../../../styles';
+import type { ReactNode } from 'react';
+import type { StyledPressableProps, StyledTextProps } from '../../../styles';
 
 /**
  * Props for the MediaBanner root component.

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

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

package/src/lib/Components/MediaButton/MediaButton.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { ChevronDown } from '../../Symbols';

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

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

package/src/lib/Components/MediaCard/MediaCard.tsx

@@ -5,7 +5,7 @@ import { useStyleSheet } from '../../../styles';
 import { Close } from '../../Symbols';
 import { InteractiveIcon } from '../InteractiveIcon';
 import { LinearGradient, Pressable, Text } from '../Utility';
-import { MediaCardProps, MediaCardTitleProps } from './types';
+import type { MediaCardProps, MediaCardTitleProps } from './types';
 
 const CARD_HEIGHT = 164;
 

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { StyledPressableProps, StyledTextProps } from '../../../styles';
+import type { StyledPressableProps, StyledTextProps } from '../../../styles';
 
 /**
  * Props for the MediaCard root component

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

@@ -41,6 +41,7 @@ export const SizeShowcase: Story = {
       <MediaImage src={exampleSrc} alt='Size 40' size={40} />
       <MediaImage src={exampleSrc} alt='Size 48' size={48} />
       <MediaImage src={exampleSrc} alt='Size 56' size={56} />
+      <MediaImage src={exampleSrc} alt='Size 64' size={64} />
     </Box>
   ),
 };

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

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
+import type { LumenStyleSheetTheme } from '../../../styles';
 import { Box } from '../Utility';
-import { MediaImageProps, MediaImageSize, MediaImageShape } from './types';
+import type { MediaImageProps, MediaImageSize, MediaImageShape } from './types';
 
-type BorderRadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'full';
+type BorderRadiusKey = keyof LumenStyleSheetTheme['borderRadius'];
 
 const borderRadiusMap: Record<MediaImageSize, BorderRadiusKey> = {
   12: 'xs',
@@ -15,6 +16,7 @@ const borderRadiusMap: Record<MediaImageSize, BorderRadiusKey> = {
   40: 'md',
   48: 'md',
   56: 'lg',
+  64: 'lg',
 };
 
 const useStyles = ({

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

@@ -1,6 +1,6 @@
-import { StyledViewProps } from '../../../styles';
+import type { StyledViewProps } from '../../../styles';
 
-export type MediaImageSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56;
+export type MediaImageSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64;
 
 export type MediaImageShape = 'square' | 'circle';
 

package/src/lib/Components/NavBar/CoinCapsule.tsx

@@ -1,6 +1,6 @@
 import { useStyleSheet } from '../../../styles';
 import { Box, Text } from '../Utility';
-import { CoinCapsuleProps } from './types';
+import type { CoinCapsuleProps } from './types';
 
 export function CoinCapsule({ ticker, icon }: CoinCapsuleProps) {
   const styles = useStyles();

package/src/lib/Components/NavBar/NavBar.tsx

@@ -1,5 +1,7 @@
-import { createSafeContext, Density } from '@ledgerhq/lumen-utils-shared';
-import { Children, isValidElement, ReactNode } from 'react';
+import type { Density } from '@ledgerhq/lumen-utils-shared';
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+import type { ReactNode } from 'react';
+import { Children, isValidElement } from 'react';
 import { StyleSheet } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
@@ -7,7 +9,7 @@ import { ArrowLeft } from '../../Symbols';
 import { IconButton } from '../IconButton';
 import { Box, Text } from '../Utility';
 import { CoinCapsule } from './CoinCapsule';
-import {
+import type {
   NavBarBackButtonProps,
   NavBarCoinCapsuleProps,
   NavBarContentProps,

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

@@ -1,7 +1,7 @@
-import { Density } from '@ledgerhq/lumen-utils-shared';
-import { ReactElement, ReactNode } from 'react';
-import { StyledViewProps } from '../../../styles';
-import { IconButtonProps } from '../IconButton';
+import type { Density } from '@ledgerhq/lumen-utils-shared';
+import type { ReactElement, ReactNode } from 'react';
+import type { StyledViewProps } from '../../../styles';
+import type { IconButtonProps } from '../IconButton';
 
 export type NavBarProps = {
   /**

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import {
+import type { ReactNode } from 'react';
+import type {
   StyledPressableProps,
   StyledTextProps,
   StyledViewProps,

package/src/lib/Components/PageIndicator/PageIndicator.tsx

@@ -10,7 +10,7 @@ import Animated, {
 import { useStyleSheet, useTheme } from '../../../styles';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { Box } from '../Utility';
-import { PageIndicatorProps } from './types';
+import type { PageIndicatorProps } from './types';
 
 const AnimatedBox = Animated.createAnimatedComponent(Box);
 const MAX_VISIBLE_DOTS = 4;

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

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

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
 import { View } from 'react-native';
 import { SearchInput } from './SearchInput';
-import { SearchInputProps } from './types';
+import type { SearchInputProps } from './types';
 
 const meta: Meta<typeof SearchInput> = {
   component: SearchInput,

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

@@ -1,5 +1,5 @@
-import { BaseInputProps } from '../BaseInput';
-import { BoxProps } from '../Utility';
+import type { BaseInputProps } from '../BaseInput';
+import type { BoxProps } from '../Utility';
 
 export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label'> &
   BoxProps & {

package/src/lib/Components/SegmentedControl/SegmentedControl.tsx

@@ -1,5 +1,5 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
-import { LayoutChangeEvent } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useStyleSheet } from '../../../styles';
 import type { LumenTextStyle, LumenTypographyTokenName } from '../../../styles';

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

@@ -1,7 +1,7 @@
-import { ComponentType, ReactNode } from 'react';
-import { LumenTextStyle, StyledPressableProps } from '../../../styles';
-import { IconSize } from '../Icon';
-import { BoxProps } from '../Utility';
+import type { ComponentType, ReactNode } from 'react';
+import type { LumenTextStyle, StyledPressableProps } from '../../../styles';
+import type { IconSize } from '../Icon';
+import type { BoxProps } from '../Utility';
 
 export type SegmentedControlProps = {
   /**

package/src/lib/Components/SegmentedControl/usePillLayout.ts

@@ -1,13 +1,13 @@
+import type { ReactNode } from 'react';
 import React, {
   Children,
   isValidElement,
-  ReactNode,
   useCallback,
   useEffect,
   useMemo,
   useRef,
 } from 'react';
-import { LayoutChangeEvent } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
 import {
   useAnimatedStyle,
   useSharedValue,

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

@@ -1,6 +1,7 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { useState, useRef, useMemo, ReactNode } from 'react';
-import { SelectData } from './types';
+import type { ReactNode } from 'react';
+import { useState, useRef, useMemo } from 'react';
+import type { SelectData } from './types';
 
 type GlobalSelectBottomSheetContextValue = {
   currentSelect: SelectData | null;

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

@@ -1,4 +1,5 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import type { ReactNode } from 'react';
 import {
   useState,
   useEffect,
@@ -6,7 +7,6 @@ import {
   useId,
   Children,
   isValidElement,
-  ReactNode,
 } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';

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

@@ -1,6 +1,6 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { ReactNode } from 'react';
-import { SelectContentItem } from './types';
+import type { ReactNode } from 'react';
+import type { SelectContentItem } from './types';
 
 export type SelectContextValue = {
   selectId: string;

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

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
-import { PressableProps } from 'react-native';
-import {
+import type { ReactNode } from 'react';
+import type { PressableProps } from 'react-native';
+import type {
   StyledViewProps,
   StyledPressableProps,
   StyledTextProps,
 } from '../../../styles';
-import { BoxProps } from '../Utility';
+import type { BoxProps } from '../Utility';
 
 export type SelectProps = {
   /**

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { Box } from '../Utility/Box';
 import { Skeleton } from './Skeleton';
 

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

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

package/src/lib/Components/Slot/Slot.tsx

@@ -1,11 +1,10 @@
-import {
+import type {
   ComponentRef,
-  isValidElement,
-  cloneElement,
   ComponentPropsWithoutRef,
   ComponentPropsWithRef,
 } from 'react';
-import {
+import { isValidElement, cloneElement } from 'react';
+import type {
   View,
   Pressable,
   Text,
@@ -15,10 +14,10 @@ import {
   TextProps,
   ImageProps,
   StyleProp,
-  StyleSheet,
   PressableStateCallbackType,
   ImageStyle as RNImageStyle,
 } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 const SlotPressable = ({
   ref,

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 import { Spinner } from './Spinner';

package/src/lib/Components/Spinner/Spinner.tsx

@@ -1,9 +1,11 @@
+import { StyleSheet } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
-import { LumenTextStyle, useResolveTextStyle, useTheme } from '../../../styles';
+import type { LumenTextStyle } from '../../../styles';
+import { useResolveTextStyle, useTheme } from '../../../styles';
 import { Spin } from '../../Animations/Spin';
 import { Box } from '../Utility';
-import { SpinnerProps } from './types';
+import type { SpinnerProps } from './types';
 
 /**
  * A basic spinner component for loading states.
@@ -23,17 +25,20 @@ export const Spinner = ({
   lx = {},
   size = 16,
   color,
+  style,
   ref,
   ...props
 }: SpinnerProps) => {
   const { t } = useCommonTranslation();
   const { theme } = useTheme();
   const resolvedColorStyle = useResolveTextStyle({ color } as LumenTextStyle);
+  const flatStyle = StyleSheet.flatten(style);
+  const styleColor = flatStyle?.color;
   const strokeColor =
-    resolvedColorStyle?.color ?? color ?? theme.colors.text.base;
+    resolvedColorStyle?.color ?? color ?? styleColor ?? theme.colors.text.base;
 
   return (
-    <Box ref={ref} lx={{ flexShrink: 0, ...lx }} {...props}>
+    <Box ref={ref} lx={{ flexShrink: 0, ...lx }} style={style} {...props}>
       <Spin>
         <Svg
           width={size}

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

@@ -1,6 +1,6 @@
-import { LumenTextStyle } from '../../../styles';
-import { IconSize } from '../Icon';
-import { TextProps } from '../Utility';
+import type { LumenTextStyle } from '../../../styles';
+import type { IconSize } from '../Icon';
+import type { TextProps } from '../Utility';
 
 export type SpinnerProps = {
   /**

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

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { Settings, Plus, Heart, Star } from '../../Symbols';
-import { IconProps } from '../Icon';
+import type { IconProps } from '../Icon';
 import { Box, Text } from '../Utility';
 import { Spot } from './Spot';
-import { SpotProps } from './types';
+import type { SpotProps } from './types';
 
 const meta: Meta<typeof Spot> = {
   component: Spot,

package/src/lib/Components/Spot/Spot.tsx

@@ -1,7 +1,8 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
-import { LumenTypographyTokens, useStyleSheet } from '../../../styles';
+import type { LumenTypographyTokens } from '../../../styles';
+import { useStyleSheet } from '../../../styles';
 import {
   BluetoothCircleFill,
   CheckmarkCircleFill,
@@ -9,10 +10,11 @@ import {
   InformationFill,
   WarningFill,
 } from '../../Symbols';
-import { IconSize } from '../Icon/types';
-import { Spinner, SpinnerProps } from '../Spinner';
+import type { IconSize } from '../Icon/types';
+import type { SpinnerProps } from '../Spinner';
+import { Spinner } from '../Spinner';
 import { Box } from '../Utility';
-import { SpotAppearance, SpotProps, SpotSize } from './types';
+import type { SpotAppearance, SpotProps, SpotSize } from './types';
 
 const BLUETOOTH_COLOR = '#0082FC';
 

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

@@ -1,6 +1,6 @@
-import { ComponentType } from 'react';
-import { StyledViewProps } from '../../../styles';
-import { IconProps } from '../Icon';
+import type { ComponentType } from 'react';
+import type { StyledViewProps } from '../../../styles';
+import type { IconProps } from '../Icon';
 
 export type SpotAppearance =
   | 'icon'

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 import { Stepper } from './Stepper';

package/src/lib/Components/Stepper/Stepper.tsx

@@ -15,7 +15,7 @@ import { useTheme } from '../../../styles';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
-import { StepperProps } from './types';
+import type { StepperProps } from './types';
 
 const SIZE = 48;
 const STROKE_WIDTH = 4;

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

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

package/src/lib/Components/Subheader/Subheader.tsx

@@ -3,7 +3,7 @@ import { useStyleSheet } from '../../../styles';
 import { ChevronRight, Information } from '../../Symbols';
 import { InteractiveIcon } from '../InteractiveIcon';
 import { Box, Pressable, Text } from '../Utility';
-import {
+import type {
   SubheaderCountProps,
   SubheaderDescriptionProps,
   SubheaderInfoProps,

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { StyledTextProps, StyledViewProps } from '../../../styles';
-import { InteractiveIconProps } from '../InteractiveIcon';
+import type { ReactNode } from 'react';
+import type { StyledTextProps, StyledViewProps } from '../../../styles';
+import type { InteractiveIconProps } from '../InteractiveIcon';
 
 export type SubheaderProps = {
   /**

package/src/lib/Components/Switch/BaseSwitch.tsx

@@ -14,10 +14,10 @@ import Animated, {
 import { useStyleSheet } from '../../../styles';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
 
-import { SlottablePressableProps, SlottableViewProps } from '../../types';
+import type { SlottablePressableProps, SlottableViewProps } from '../../types';
 import { SlotPressable, SlotView } from '../Slot';
 
-import { SwitchProps } from './types';
+import type { SwitchProps } from './types';
 
 const ROOT_COMPONENT_NAME = 'BaseSwitch';
 const THUMB_COMPONENT_NAME = 'BaseSwitchThumb';

package/src/lib/Components/Switch/Switch.tsx

@@ -3,7 +3,7 @@ import { useControllableState } from '../../utils';
 import { Pressable } from '../Utility';
 import { BaseSwitchThumb, BaseSwitchRoot } from './BaseSwitch';
 
-import { SwitchProps } from './types';
+import type { SwitchProps } from './types';
 
 /**
  * The switch follows the design system tokens and supports checked, unchecked,

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

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