@ledgerhq/lumen-ui-rnative 0.1.39 → 0.1.40

package/src/lib/Components/AmountDisplay/AmountDisplay.tsx

@@ -164,6 +164,12 @@ const useAnimatedDigitStrip = ({
   return { animatedStyle };
 };
 
+// Horizontal breathing room for the clip box so glyphs that are slightly wider
+// than the measured `targetWidth` are not cut on their left/right edges. RN has
+// no per-axis overflow, so we extend the clip box horizontally while keeping the
+// vertical clip tight to `lineHeight`
+const HORIZONTAL_CLIP_PADDING = 8;
+
 const DigitStrip = memo(
   ({ value, textStyle, animate, widths }: DigitStripProps) => {
     const targetWidth = widths[value];
@@ -179,23 +185,39 @@ const DigitStrip = memo(
 
     return (
       <Animated.View
-        style={{ height: lineHeight, overflow: 'hidden', width: width }}
+        style={{
+          height: lineHeight,
+          width: animate ? width : targetWidth,
+        }}
         accessibilityValue={{ text: String(value) }}
       >
-        <Animated.View style={[animatedStyle, { alignItems: 'center' }]}>
-          {DIGITS.map((d) => (
-            <Text
-              allowFontScaling={false}
-              key={d}
-              style={[
-                textStyle,
-                RuntimeConstants.isAndroid && { height: lineHeight },
-              ]}
-            >
-              {d}
-            </Text>
-          ))}
-        </Animated.View>
+        <View
+          pointerEvents='none'
+          style={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: -HORIZONTAL_CLIP_PADDING,
+            right: -HORIZONTAL_CLIP_PADDING,
+            overflow: 'hidden',
+            alignItems: 'center',
+          }}
+        >
+          <Animated.View style={[animatedStyle, { alignItems: 'center' }]}>
+            {DIGITS.map((d) => (
+              <Text
+                allowFontScaling={false}
+                key={d}
+                style={[
+                  textStyle,
+                  RuntimeConstants.isAndroid && { height: lineHeight },
+                ]}
+              >
+                {d}
+              </Text>
+            ))}
+          </Animated.View>
+        </View>
       </Animated.View>
     );
   },

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

@@ -0,0 +1,166 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { AmountInput } from './AmountInput';
+
+const hidden = { includeHiddenElements: true } as const;
+
+const renderWithProvider = (component: React.ReactElement) =>
+  render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+
+describe('AmountInput', () => {
+  describe('Rendering', () => {
+    it('renders with an empty value', () => {
+      renderWithProvider(
+        <AmountInput value='' onChangeText={jest.fn()} testID='input' />,
+      );
+      expect(screen.getByTestId('input')).toBeTruthy();
+    });
+
+    it('renders the currency text', () => {
+      renderWithProvider(
+        <AmountInput value='' onChangeText={jest.fn()} currencyText='USD' />,
+      );
+      expect(screen.getByText('USD', hidden)).toBeTruthy();
+    });
+
+    it('displays 0 when value is empty', () => {
+      renderWithProvider(<AmountInput value='' onChangeText={jest.fn()} />);
+      expect(screen.getByText('0', hidden)).toBeTruthy();
+    });
+  });
+
+  describe('Interactions', () => {
+    it('calls onChangeText with formatted text on change', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput
+          value=''
+          onChangeText={onChangeText}
+          testID='input'
+          thousandsSeparator={false}
+        />,
+      );
+      fireEvent.changeText(screen.getByTestId('input'), '123.45');
+      expect(onChangeText).toHaveBeenCalledWith('123.45');
+    });
+
+    it('formats with thousands separator on user input', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput value='' onChangeText={onChangeText} testID='input' />,
+      );
+      fireEvent.changeText(screen.getByTestId('input'), '1000');
+      expect(onChangeText).toHaveBeenCalledWith('1 000');
+    });
+
+    it('strips decimal input when allowDecimals is false', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput
+          value=''
+          onChangeText={onChangeText}
+          allowDecimals={false}
+          thousandsSeparator={false}
+          testID='input'
+        />,
+      );
+      fireEvent.changeText(screen.getByTestId('input'), '12.34');
+      expect(onChangeText).toHaveBeenCalledWith('1234');
+    });
+
+    it('truncates decimal part with maxDecimalLength on user input', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput
+          value=''
+          onChangeText={onChangeText}
+          maxDecimalLength={2}
+          thousandsSeparator={false}
+          testID='input'
+        />,
+      );
+      fireEvent.changeText(screen.getByTestId('input'), '1.2345');
+      expect(onChangeText).toHaveBeenCalledWith('1.23');
+    });
+  });
+
+  describe('programmatic value formatting', () => {
+    it('formats a raw unformatted string on initial render', () => {
+      renderWithProvider(
+        <AmountInput value='2433.123456789' onChangeText={jest.fn()} />,
+      );
+      expect(screen.getByText('2 433.123456789', hidden)).toBeTruthy();
+    });
+
+    it('formats a number value on initial render', () => {
+      renderWithProvider(
+        <AmountInput value={2433.123456789} onChangeText={jest.fn()} />,
+      );
+      expect(screen.getByText('2 433.123456789', hidden)).toBeTruthy();
+    });
+
+    it('adds thousands grouping for a large number value', () => {
+      renderWithProvider(
+        <AmountInput value={1000000} onChangeText={jest.fn()} />,
+      );
+      expect(screen.getByText('1 000 000', hidden)).toBeTruthy();
+    });
+
+    it('applies maxDecimalLength to a programmatically set value', () => {
+      renderWithProvider(
+        <AmountInput
+          value='2433.123456789'
+          maxDecimalLength={2}
+          onChangeText={jest.fn()}
+        />,
+      );
+      expect(screen.getByText('2 433.12', hidden)).toBeTruthy();
+    });
+
+    it('applies maxIntegerLength to a programmatically set value', () => {
+      renderWithProvider(
+        <AmountInput
+          value='1234567890'
+          maxIntegerLength={3}
+          allowDecimals={false}
+          thousandsSeparator={false}
+          onChangeText={jest.fn()}
+        />,
+      );
+      expect(screen.getByText('123', hidden)).toBeTruthy();
+    });
+
+    it('omits thousands separator when thousandsSeparator is false', () => {
+      renderWithProvider(
+        <AmountInput
+          value='2433.12'
+          thousandsSeparator={false}
+          onChangeText={jest.fn()}
+        />,
+      );
+      expect(screen.getByText('2433.12', hidden)).toBeTruthy();
+    });
+
+    it('formats consistently with what typing the same digits produces', () => {
+      const onChangeText = jest.fn();
+      renderWithProvider(
+        <AmountInput
+          value='2433.123456789'
+          onChangeText={onChangeText}
+          testID='input'
+        />,
+      );
+
+      expect(screen.getByText('2 433.123456789', hidden)).toBeTruthy();
+
+      fireEvent.changeText(screen.getByTestId('input'), '2433.123456789');
+      expect(onChangeText).toHaveBeenCalledWith('2 433.123456789');
+    });
+  });
+});

package/src/lib/Components/AmountInput/AmountInput.tsx

@@ -46,7 +46,12 @@ export const AmountInput = ({
   ...props
 }: AmountInputProps) => {
   const inputRef = useRef<TextInput>(null);
-  const inputValue = String(value);
+  const inputValue = textFormatter(String(value), {
+    allowDecimals,
+    thousandsSeparator,
+    maxIntegerLength,
+    maxDecimalLength,
+  });
   const [isFocused, setIsFocused] = useState(false);
   const disabled = useDisabledContext({
     consumerName: 'AmountInput',

package/src/lib/Components/Avatar/Avatar.figma.tsx

@@ -7,6 +7,10 @@ figma.connect(
   {
     imports: ["import { Avatar } from '@ledgerhq/lumen-ui-rnative'"],
     props: {
+      appearance: figma.enum('appearance', {
+        gray: 'gray',
+        transparent: 'transparent',
+      }),
       size: figma.enum('size', {
         sm: 'sm',
         md: 'md',
@@ -21,6 +25,7 @@ figma.connect(
     example: (props) => (
       <Avatar
         src='https://example-image.com'
+        appearance={props.appearance}
         size={props.size}
         alt="John Doe's Avatar"
         showNotification={props.showNotification}

package/src/lib/Components/Avatar/Avatar.mdx

@@ -40,6 +40,15 @@ Avatars come in four different sizes:
 
 <Canvas of={AvatarStories.SizeShowcase} />
 
+### Appearance
+
+The `appearance` prop controls the background color of the avatar container.
+
+- **`gray`**: Uses a muted gray background
+- **`transparent`**: Uses a semi-transparent muted background — default
+
+<Canvas of={AvatarStories.AppearanceShowcase} />
+
 ### States
 
 The Avatar component handles two primary states automatically:

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

@@ -90,6 +90,47 @@ export const SizeShowcase: Story = {
   ),
 };
 
+const AppearanceShowcaseRender = () => {
+  return (
+    <Box lx={{ gap: 's8' }}>
+      <Box lx={{ flexDirection: 'row', gap: 's16', padding: 's8' }}>
+        <Avatar
+          alt='gray fallback'
+          size='md'
+          appearance='gray'
+          showNotification={false}
+        />
+        <Avatar
+          alt='transparent fallback'
+          size='md'
+          appearance='transparent'
+          showNotification={false}
+        />
+      </Box>
+      <Box lx={{ flexDirection: 'row', gap: 's16', padding: 's8' }}>
+        <Avatar
+          src={exampleSrc}
+          alt='gray with image'
+          size='md'
+          appearance='gray'
+          showNotification={false}
+        />
+        <Avatar
+          src={exampleSrc}
+          alt='transparent with image'
+          size='md'
+          appearance='transparent'
+          showNotification={false}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export const AppearanceShowcase: Story = {
+  render: () => <AppearanceShowcaseRender />,
+};
+
 export const FallbackShowcase: Story = {
   args: {
     src: 'https://brokenLink.random',

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

@@ -4,7 +4,7 @@ import { render, waitFor } from '@testing-library/react-native';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Avatar } from './Avatar';
 
-const { sizes } = ledgerLiveThemes.dark;
+const { sizes, colors } = ledgerLiveThemes.dark;
 
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
@@ -33,6 +33,36 @@ describe('Avatar Component', () => {
     getByLabelText('user profile');
   });
 
+  it('should render with transparent appearance by default', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <Avatar testID='avatar-id' />
+      </TestWrapper>,
+    );
+
+    expect(getByTestId('avatar-id').props.style.backgroundColor).toBe(
+      colors.bg.mutedTransparent,
+    );
+  });
+
+  it.each<['transparent' | 'gray', string]>([
+    ['transparent', colors.bg.mutedTransparent],
+    ['gray', colors.bg.muted],
+  ])(
+    'should render with %s appearance when specified',
+    (appearance, expectedColor) => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <Avatar testID='avatar-id' appearance={appearance} />
+        </TestWrapper>,
+      );
+
+      expect(getByTestId('avatar-id').props.style.backgroundColor).toBe(
+        expectedColor,
+      );
+    },
+  );
+
   it('should render with different sizes', () => {
     const { getByTestId, rerender } = render(
       <TestWrapper>

package/src/lib/Components/Avatar/Avatar.tsx

@@ -7,6 +7,7 @@ import { DotIndicator } from '../DotIndicator';
 import { Box } from '../Utility';
 import type { AvatarProps } from './types';
 
+type Appearance = NonNullable<AvatarProps['appearance']>;
 type Size = NonNullable<AvatarProps['size']>;
 
 const fallbackSizes = {
@@ -23,9 +24,20 @@ const dotSizeMap: Partial<
   md: 'xl',
 };
 
-const useStyles = ({ size }: { size: Size }) => {
+const useStyles = ({
+  appearance,
+  size,
+}: {
+  appearance: Appearance;
+  size: Size;
+}) => {
   return useStyleSheet(
     (t) => {
+      const backgroundColors: Record<Appearance, string> = {
+        gray: t.colors.bg.muted,
+        transparent: t.colors.bg.mutedTransparent,
+      };
+
       const sizeMap = {
         sm: { size: t.sizes.s40, padding: t.spacings.s4 },
         md: { size: t.sizes.s48, padding: t.spacings.s4 },
@@ -39,7 +51,7 @@ const useStyles = ({ size }: { size: Size }) => {
           width: sizeMap[size].size,
           height: sizeMap[size].size,
           borderRadius: 9999,
-          backgroundColor: t.colors.bg.muted,
+          backgroundColor: backgroundColors[appearance],
           alignItems: 'center',
           justifyContent: 'center',
           padding: sizeMap[size].padding,
@@ -52,7 +64,7 @@ const useStyles = ({ size }: { size: Size }) => {
         },
       };
     },
-    [size],
+    [appearance, size],
   );
 };
 
@@ -77,6 +89,7 @@ export const Avatar = ({
   style,
   src,
   alt = 'avatar',
+  appearance = 'transparent',
   size = 'md',
   showNotification: showNotificationProp = false,
   testID,
@@ -86,7 +99,7 @@ export const Avatar = ({
   const { t } = useCommonTranslation();
   const [error, setError] = useState<boolean>(false);
   const shouldFallback = !src || error;
-  const styles = useStyles({ size });
+  const styles = useStyles({ appearance, size });
 
   const resolvedAlt = alt || t('components.avatar.defaultAlt');
 

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

@@ -11,6 +11,12 @@ export type AvatarProps = {
    * @optional
    */
   alt?: string;
+  /**
+   * The visual appearance of the avatar background: `gray` or `transparent`.
+   * @optional
+   * @default transparent
+   */
+  appearance?: 'gray' | 'transparent';
   /**
    * The size variant of the avatar.
    * @optional

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

@@ -1,9 +1,107 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import { useCallback } from 'react';
+import { View, type GestureResponderEvent, StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+import { useStyleSheet, useTheme } from '../../../styles';
+import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { useControllableState } from '../../utils';
 import { Pressable } from '../Utility';
-import { BaseSwitchThumb, BaseSwitchRoot } from './BaseSwitch';
 
-import type { SwitchProps } from './types';
+import type { SwitchProps, SwitchSize } from './types';
+
+const useSwitchStyles = ({
+  checked,
+  disabled,
+  size,
+}: {
+  checked: boolean;
+  disabled: boolean;
+  size: SwitchSize;
+}) => {
+  const { theme } = useTheme();
+
+  const styles = useStyleSheet(
+    (t) => {
+      const sizes: Record<SwitchSize, { width: number; height: number }> = {
+        sm: { width: t.sizes.s24, height: t.sizes.s16 },
+        md: { width: t.sizes.s40, height: t.sizes.s24 },
+      };
+
+      const thumbSizes: Record<SwitchSize, number> = {
+        sm: t.sizes.s12,
+        md: t.sizes.s20,
+      };
+
+      return {
+        root: StyleSheet.flatten([
+          {
+            borderRadius: t.borderRadius.full,
+            padding: t.spacings.s2,
+            overflow: 'hidden',
+            ...sizes[size],
+            minWidth: sizes[size].width,
+            maxWidth: sizes[size].width,
+            minHeight: sizes[size].height,
+            maxHeight: sizes[size].height,
+          },
+          !checked &&
+            !disabled && {
+              backgroundColor: t.colors.bg.mutedStrong,
+            },
+          checked &&
+            !disabled && {
+              backgroundColor: t.colors.bg.active,
+            },
+          disabled && {
+            backgroundColor: t.colors.bg.disabled,
+          },
+        ]),
+        thumbWrapper: {
+          position: 'absolute',
+          top: t.spacings.s2,
+          left: t.spacings.s2,
+        },
+        thumb: StyleSheet.flatten([
+          {
+            borderRadius: t.borderRadius.full,
+            backgroundColor: 'white',
+            width: thumbSizes[size],
+            height: thumbSizes[size],
+          },
+          disabled && {
+            backgroundColor: t.colors.bg.base,
+          },
+        ]),
+      };
+    },
+    [checked, disabled, size],
+  );
+
+  const thumbTranslations: Record<SwitchSize, number> = {
+    sm: theme.spacings.s8,
+    md: theme.spacings.s16,
+  };
+
+  return { ...styles, thumbTranslate: thumbTranslations[size] };
+};
+
+const useAnimatedThumb = (checked: boolean, translate: number) => {
+  const timing = useTimingConfig({ duration: 200, easing: 'easeInOut' });
+
+  // Reanimated best practice: derive the animation reactively by calling
+  // `withTiming` inside `useAnimatedStyle`. When `checked` (or `translate`)
+  // changes the worklet re-runs and animates from the current value to the
+  // new target -- no shared value or effect required.
+  return useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: withTiming(checked ? translate : 0, timing) }],
+    }),
+    [checked, translate, timing],
+  );
+};
 
 /**
  * The switch follows the design system tokens and supports checked, unchecked,
@@ -36,6 +134,7 @@ export const Switch = ({
   defaultChecked = false,
   disabled: disabledProp,
   size = 'md',
+  onPress: onPressProp,
   ref,
   ...props
 }: SwitchProps) => {
@@ -49,16 +148,38 @@ export const Switch = ({
     defaultProp: defaultChecked,
   });
 
+  const styles = useSwitchStyles({
+    checked: !!checked,
+    disabled: !!disabled,
+    size,
+  });
+  const animatedStyle = useAnimatedThumb(!!checked, styles.thumbTranslate);
+
+  const onPress = useCallback(
+    (ev: GestureResponderEvent) => {
+      if (disabled) return;
+      onCheckedChange(!checked);
+      onPressProp?.(ev);
+    },
+    [disabled, checked, onCheckedChange, onPressProp],
+  );
+
   return (
-    <Pressable ref={ref} lx={lx} style={style} {...props}>
-      <BaseSwitchRoot
-        disabled={disabled}
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        size={size}
-      >
-        <BaseSwitchThumb />
-      </BaseSwitchRoot>
+    <Pressable
+      ref={ref}
+      lx={lx}
+      role='switch'
+      aria-checked={checked}
+      aria-disabled={disabled}
+      accessibilityState={{ checked, disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      style={[styles.root, style]}
+      {...props}
+    >
+      <Animated.View style={[styles.thumbWrapper, animatedStyle]}>
+        <View style={styles.thumb} />
+      </Animated.View>
     </Pressable>
   );
 };

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

@@ -1,5 +1,7 @@
 import type { StyledPressableProps } from '../../../styles';
 
+export type SwitchSize = 'sm' | 'md';
+
 export type SwitchProps = {
   /**
    * The disabled state of the switch.
@@ -15,7 +17,7 @@ export type SwitchProps = {
    * The size of the switch.
    * @default 'md'
    */
-  size?: 'sm' | 'md';
+  size?: SwitchSize;
   /**
    * The callback function called when the checked state changes.
    */