@ledgerhq/lumen-ui-rnative 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -9,23 +9,38 @@
     "design-system",
     "mobile"
   ],
+  "sideEffects": false,
   "type": "module",
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
+  "react-native": "./src/index.ts",
+  "main": "./dist/module/index.js",
+  "module": "./dist/module/index.js",
+  "types": "./dist/typescript/src/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "default": "./src/index.ts"
+      "react-native": "./src/index.ts",
+      "types": "./dist/typescript/src/index.d.ts",
+      "import": "./dist/module/index.js",
+      "default": "./dist/module/index.js"
     },
     "./symbols": {
-      "types": "./src/lib/Symbols/index.ts",
-      "import": "./src/lib/Symbols/index.ts",
-      "default": "./src/lib/Symbols/index.ts"
+      "react-native": "./src/lib/Symbols/index.ts",
+      "types": "./dist/typescript/src/lib/Symbols/index.d.ts",
+      "import": "./dist/module/lib/Symbols/index.js",
+      "default": "./dist/module/lib/Symbols/index.js"
     },
-    "./styles": "./src/styles/index.ts"
+    "./styles": {
+      "react-native": "./src/styles/index.ts",
+      "types": "./dist/typescript/src/styles/index.d.ts",
+      "import": "./dist/module/styles/index.js",
+      "default": "./dist/module/styles/index.js"
+    }
   },
+  "files": [
+    "dist",
+    "src",
+    "!**/*.tsbuildinfo"
+  ],
   "dependencies": {
     "@ledgerhq/lumen-utils-shared": "0.1.1",
     "i18next": "^23.7.0",
@@ -37,18 +52,39 @@
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.1.3",
+    "@ledgerhq/lumen-design-core": "0.1.4",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^3.0.0",
     "react-native-safe-area-context": "^4.0.0 || ^5.0.0",
     "react-native-svg": "^15.0.0",
-    "@sbaiahmed1/react-native-blur": "^4.5.5"
+    "@sbaiahmed1/react-native-blur": "^4.5.5",
+    "expo": ">=53.0.0",
+    "expo-haptics": "~14.1.4"
   },
   "nx": {
     "tags": [
       "scope:react-native",
       "type:ui"
     ]
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "dist",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true,
+          "configFile": "./babel.config.bob.cjs"
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.lib.json"
+        }
+      ]
+    ]
   }
 }

package/src/index.ts

@@ -2,3 +2,4 @@ export { type SupportedLocale, Languages } from './i18n';
 export * from './lib/Components';
 export * from './lib/Patterns';
 export * from './lib/Animations';
+export * from './lib/Haptics';

package/src/lib/Animations/Pulse/Pulse.stories.tsx

@@ -30,7 +30,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Base: Story = {
   args: {
-    duration: 2000,
+    timing: { duration: 1000, easing: 'linear' },
     animate: true,
     children: (
       <Box lx={{ width: 's48', height: 's48', backgroundColor: 'accent' }} />
@@ -39,36 +39,37 @@ export const Base: Story = {
 };
 
 export const DurationShowcase: Story = {
-  render: () => (
+  args: {
+    timing: { duration: 1000, easing: 'linear' },
+    animate: true,
+    children: (
+      <Box lx={{ width: 's48', height: 's48', backgroundColor: 'accent' }} />
+    ),
+  },
+  render: (args) => (
     <View style={{ flexDirection: 'row', gap: 24, alignItems: 'center' }}>
       <View style={{ alignItems: 'center', gap: 8 }}>
-        <Pulse duration={1000} animate={true}>
-          <Box
-            lx={{ width: 's48', height: 's48', backgroundColor: 'accent' }}
-          />
+        <Pulse timing={{ ...args.timing, duration: 700 }} animate={true}>
+          {args.children}
         </Pulse>
         <Text typography='body4' lx={{ color: 'muted' }}>
-          1000ms
+          700ms
         </Text>
       </View>
       <View style={{ alignItems: 'center', gap: 8 }}>
-        <Pulse duration={2000} animate={true}>
-          <Box
-            lx={{ width: 's48', height: 's48', backgroundColor: 'accent' }}
-          />
+        <Pulse timing={{ ...args.timing, duration: 1000 }} animate={true}>
+          {args.children}
         </Pulse>
         <Text typography='body4' lx={{ color: 'muted' }}>
-          2000ms
+          1000ms
         </Text>
       </View>
       <View style={{ alignItems: 'center', gap: 8 }}>
-        <Pulse duration={3000} animate={true}>
-          <Box
-            lx={{ width: 's48', height: 's48', backgroundColor: 'accent' }}
-          />
+        <Pulse timing={{ ...args.timing, duration: 2000 }} animate={true}>
+          {args.children}
         </Pulse>
         <Text typography='body4' lx={{ color: 'muted' }}>
-          3000ms
+          2000ms
         </Text>
       </View>
     </View>

package/src/lib/Animations/Pulse/Pulse.tsx

@@ -1,55 +1,54 @@
-import { useRef, useEffect, memo } from 'react';
-import { Animated, Easing } from 'react-native';
-import { RuntimeConstants } from '../../utils';
+import { useEffect, memo } from 'react';
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import { TimingTokens } from '../types';
+import { useTimingConfig } from '../useTimingConfig';
 import { PulseProps } from './types';
 
-export const Pulse = memo(
-  ({ children, duration = 2000, animate }: PulseProps) => {
-    const pulseAnim = useRef(new Animated.Value(1)).current;
-    const animationRef = useRef<Animated.CompositeAnimation | null>(null);
+const MIN_OPACITY = 0.35;
 
-    useEffect(() => {
-      if (animate) {
-        const animation = Animated.loop(
-          Animated.sequence([
-            Animated.timing(pulseAnim, {
-              toValue: 0,
-              duration: duration / 2,
-              easing: Easing.linear,
-              useNativeDriver: RuntimeConstants.isNative,
-            }),
-            Animated.timing(pulseAnim, {
-              toValue: 1,
-              duration: duration / 2,
-              easing: Easing.linear,
-              useNativeDriver: RuntimeConstants.isNative,
-            }),
-          ]),
-        );
+const TIMING_DEFAULTS: TimingTokens = {
+  duration: 1000,
+  easing: 'linear',
+};
+export const Pulse = memo(({ children, timing, animate }: PulseProps) => {
+  const sv = useSharedValue<number>(1);
 
-        animationRef.current = animation;
-        animation.start();
-      } else {
-        animationRef.current?.stop();
-        Animated.timing(pulseAnim, {
-          toValue: 1,
-          duration: 200,
-          easing: Easing.out(Easing.ease),
-          useNativeDriver: RuntimeConstants.isNative,
-        }).start();
-      }
+  const timingConfig = useTimingConfig({
+    duration: timing?.duration ?? TIMING_DEFAULTS.duration,
+    easing: timing?.easing ?? TIMING_DEFAULTS.easing,
+  });
 
-      return () => {
-        animationRef.current?.stop();
-      };
-    }, [pulseAnim, duration, animate]);
+  useEffect(() => {
+    if (animate) {
+      sv.value = withRepeat(
+        withSequence(
+          withTiming(MIN_OPACITY, timingConfig),
+          withTiming(1, timingConfig),
+        ),
+        -1,
+      );
+    } else {
+      cancelAnimation(sv);
+      sv.value = withTiming(1, timingConfig);
+    }
 
-    const pulse = pulseAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0.35, 1],
-    });
+    return () => cancelAnimation(sv);
+  }, [sv, animate, timingConfig]);
 
-    return <Animated.View style={{ opacity: pulse }}>{children}</Animated.View>;
-  },
-);
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: sv.value,
+    }),
+    [sv],
+  );
+
+  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
+});
 Pulse.displayName = 'Pulse';

package/src/lib/Animations/Pulse/types.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Duration } from '../types';
+import { TimingTokens } from '../types';
 
 export type PulseProps = {
   /**
@@ -7,10 +7,10 @@ export type PulseProps = {
    */
   children: ReactNode;
   /**
-   * Duration of one complete pulse in milliseconds
-   * @default 2000
+   * Motion token overrides for this animation.
+   * Wrapper defaults are used when values are omitted.
    */
-  duration?: Duration;
+  timing?: Partial<TimingTokens>;
   /**
    * Whether the pulse animation should play
    */

package/src/lib/Animations/Spin/Spin.stories.tsx

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Base: Story = {
   args: {
-    duration: 1000,
+    timing: { duration: 1000, easing: 'linear' },
     children: (
       <Box lx={{ width: 's48', height: 's48', backgroundColor: 'accent' }} />
     ),
@@ -25,34 +25,28 @@ export const Base: Story = {
 };
 
 export const DurationShowcase: Story = {
-  render: () => (
+  args: {
+    timing: { duration: 1000, easing: 'linear' },
+    children: (
+      <Box lx={{ width: 's48', height: 's48', backgroundColor: 'accent' }} />
+    ),
+  },
+  render: (args) => (
     <View style={{ flexDirection: 'row', gap: 24, alignItems: 'center' }}>
       <View style={{ alignItems: 'center', gap: 8 }}>
-        <Spin duration={500}>
-          <Box
-            lx={{ width: 's48', height: 's48', backgroundColor: 'accent' }}
-          />
-        </Spin>
+        <Spin timing={{ ...args.timing, duration: 500 }}>{args.children}</Spin>
         <Text typography='body4' lx={{ color: 'muted' }}>
           500ms
         </Text>
       </View>
       <View style={{ alignItems: 'center', gap: 8 }}>
-        <Spin duration={1000}>
-          <Box
-            lx={{ width: 's48', height: 's48', backgroundColor: 'accent' }}
-          />
-        </Spin>
+        <Spin timing={{ ...args.timing, duration: 1000 }}>{args.children}</Spin>
         <Text typography='body4' lx={{ color: 'muted' }}>
           1000ms
         </Text>
       </View>
       <View style={{ alignItems: 'center', gap: 8 }}>
-        <Spin duration={2000}>
-          <Box
-            lx={{ width: 's48', height: 's48', backgroundColor: 'accent' }}
-          />
-        </Spin>
+        <Spin timing={{ ...args.timing, duration: 2000 }}>{args.children}</Spin>
         <Text typography='body4' lx={{ color: 'muted' }}>
           2000ms
         </Text>

package/src/lib/Animations/Spin/Spin.tsx

@@ -1,34 +1,40 @@
-import { memo, useEffect, useRef } from 'react';
-import { Animated, Easing } from 'react-native';
-import { RuntimeConstants } from '../../utils';
+import { memo, useEffect } from 'react';
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { TimingTokens } from '../types';
+import { useTimingConfig } from '../useTimingConfig';
 import { SpinProps } from './types';
 
-export const Spin = memo(({ children, duration = 1000 }: SpinProps) => {
-  const spinValue = useRef(new Animated.Value(0)).current;
+const TIMING_DEFAULTS: TimingTokens = {
+  duration: 1000,
+  easing: 'linear',
+};
+export const Spin = memo(({ children, timing }: SpinProps) => {
+  const sv = useSharedValue<number>(0);
+
+  const timingConfig = useTimingConfig({
+    duration: timing?.duration ?? TIMING_DEFAULTS.duration,
+    easing: timing?.easing ?? TIMING_DEFAULTS.easing,
+  });
 
   useEffect(() => {
-    const animation = Animated.loop(
-      Animated.timing(spinValue, {
-        toValue: 1,
-        duration: duration,
-        easing: Easing.linear,
-        useNativeDriver: RuntimeConstants.isNative,
-      }),
-    );
-    animation.start();
+    sv.value = withRepeat(withTiming(1, timingConfig), -1);
 
-    return () => animation.stop();
-  }, [spinValue, duration]);
+    return () => cancelAnimation(sv);
+  }, [sv, timingConfig]);
 
-  const spin = spinValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <Animated.View style={{ transform: [{ rotate: spin }] }}>
-      {children}
-    </Animated.View>
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ rotate: `${sv.value * 360}deg` }],
+    }),
+    [sv],
   );
+
+  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
 });
 Spin.displayName = 'Spin';

package/src/lib/Animations/Spin/types.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Duration } from '../types';
+import { TimingTokens } from '../types';
 
 export type SpinProps = {
   /**
@@ -7,8 +7,8 @@ export type SpinProps = {
    */
   children: ReactNode;
   /**
-   * Duration of one complete rotation in milliseconds
-   * @default 1000
+   * Motion token overrides for this animation.
+   * Wrapper defaults are used when values are omitted.
    */
-  duration?: Duration;
+  timing?: Partial<TimingTokens>;
 };

package/src/lib/Animations/index.ts

@@ -1,4 +1,3 @@
 export * from './Spin';
 export * from './Pulse';
 export * from './types';
-export * from './constants';

package/src/lib/Animations/types.ts

@@ -1,11 +1,12 @@
-export type Duration =
-  | 75
-  | 100
-  | 150
-  | 200
-  | 300
-  | 500
-  | 700
-  | 1000
-  | 2000
-  | 3000;
+import { WithTimingConfig } from 'react-native-reanimated';
+import { LumenStyleSheetTheme } from '../../styles/types';
+
+export type DurationToken = keyof LumenStyleSheetTheme['motion']['durations'];
+export type EasingToken = keyof LumenStyleSheetTheme['motion']['easings'];
+
+export type TimingTokens = {
+  duration: DurationToken;
+  easing: EasingToken;
+};
+
+export type TimingConfig = WithTimingConfig;

package/src/lib/Animations/useTimingConfig.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { Easing } from 'react-native-reanimated';
+import { useTheme } from '../../styles';
+import { TimingConfig, TimingTokens } from './types';
+
+export const useTimingConfig = ({
+  duration,
+  easing,
+}: TimingTokens): TimingConfig => {
+  const { theme } = useTheme();
+
+  return useMemo(
+    () => ({
+      duration: theme.motion.durations[duration],
+      easing: Easing.bezier(...theme.motion.easings[easing]),
+    }),
+    [duration, easing, theme],
+  );
+};

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

@@ -2,7 +2,7 @@ import { useSplitText, buildAriaLabel } from '@ledgerhq/lumen-utils-shared';
 import { memo, useEffect } from 'react';
 import { Text, View } from 'react-native';
 import Animated, {
-  Easing,
+  SharedValue,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -10,6 +10,7 @@ import Animated, {
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
 import { Pulse } from '../../Animations/Pulse';
+import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { RuntimeConstants } from '../../utils';
 import { Box } from '../Utility';
 import {
@@ -45,11 +46,6 @@ const DECIMAL_DIGIT_WIDTHS = {
   9: 16.5,
 };
 
-const TIMING_CONFIG = {
-  duration: 600,
-  easing: Easing.inOut(Easing.ease),
-};
-
 const useStyles = () => {
   return useStyleSheet(
     (t) => ({
@@ -91,31 +87,68 @@ const useStyles = () => {
   );
 };
 
+const useAnimatedDigitStrip = ({
+  value,
+  lineHeight,
+  targetWidth,
+  width,
+  animate,
+}: {
+  value: number;
+  lineHeight: number;
+  targetWidth: number;
+  width: SharedValue<number>;
+  animate: boolean;
+}) => {
+  const translateY = useSharedValue(-value * lineHeight);
+
+  const timingConfig = useTimingConfig({
+    duration: 700,
+    easing: 'easeInOut',
+  });
+
+  useEffect(() => {
+    if (animate) {
+      translateY.value = withTiming(-value * lineHeight, timingConfig);
+      width.value = withTiming(targetWidth, timingConfig);
+    } else {
+      translateY.value = -value * lineHeight;
+      width.value = targetWidth;
+    }
+  }, [
+    value,
+    lineHeight,
+    translateY,
+    animate,
+    width,
+    targetWidth,
+    timingConfig,
+  ]);
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateY: translateY.value }],
+    }),
+    [translateY],
+  );
+
+  return { animatedStyle };
+};
+
 const DigitStrip = memo(
   ({ value, textStyle, animate, type }: DigitStripProps) => {
     const targetWidth = (
       type === 'integer' ? INTEGER_DIGIT_WIDTHS : DECIMAL_DIGIT_WIDTHS
     )[value];
     const lineHeight = textStyle.lineHeight;
-    const translateY = useSharedValue(-value * lineHeight);
     const width = useSharedValue<number>(targetWidth);
-
-    useEffect(() => {
-      if (animate) {
-        translateY.value = withTiming(-value * lineHeight, TIMING_CONFIG);
-        width.value = withTiming(targetWidth, TIMING_CONFIG);
-      } else {
-        translateY.value = -value * lineHeight;
-        width.value = targetWidth;
-      }
-    }, [value, lineHeight, translateY, animate, width, targetWidth]);
-
-    const animatedStyle = useAnimatedStyle(
-      () => ({
-        transform: [{ translateY: translateY.value }],
-      }),
-      [translateY],
-    );
+    const { animatedStyle } = useAnimatedDigitStrip({
+      value,
+      lineHeight,
+      targetWidth,
+      width,
+      animate,
+    });
 
     return (
       <Animated.View

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

@@ -15,7 +15,7 @@ import { Box } from '../Utility';
 
 ## Introduction
 
-The Avatar component displays a circular user profile image with automatic fallback to a User icon when the image is unavailable or fails to load. It supports an optional notification indicator and two size variants. This React Native implementation ensures consistent behavior across mobile platforms while maintaining design system coherence.
+The Avatar component displays a circular user profile image with automatic fallback to a User icon when the image is unavailable or fails to load. It supports an optional notification indicator and three size variants. This React Native implementation ensures consistent behavior across mobile platforms while maintaining design system coherence.
 
 > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10546-614&p=f&m=dev).
 
@@ -36,10 +36,7 @@ The Avatar component displays a circular user profile image with automatic fallb
 
 ### Size
 
-Avatars come in two different sizes:
-
-- **sm** (40px)
-- **md** (48px, default)
+Avatars come in three different sizes:
 
 <Canvas of={AvatarStories.SizeShowcase} />
 
@@ -129,7 +126,7 @@ function MyComponent() {
 
 ### Different Sizes
 
-Choose between small and medium sizes based on your layout needs:
+Choose the appropriate size based on your layout needs:
 
 ```tsx
 import { Avatar, Box } from '@ledgerhq/lumen-ui-rnative';
@@ -139,6 +136,7 @@ function MyComponent() {
     <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
       <Avatar src="https://example.com/photo.jpg" size="sm" />
       <Avatar src="https://example.com/photo.jpg" size="md" />
+      <Avatar src="https://example.com/photo.jpg" size="lg" />
     </Box>
   );
 }

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

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import React from 'react';
 import { View, Text, Pressable, Linking } from 'react-native';
 
 import { Box } from '../Utility';
@@ -68,6 +69,15 @@ export const SizeShowcase: Story = {
         />
         <Text style={{ marginTop: 4 }}>md</Text>
       </View>
+      <View style={{ alignItems: 'center', justifyContent: 'flex-end' }}>
+        <Avatar
+          src={exampleSrc}
+          alt='avatar'
+          size='lg'
+          showNotification={false}
+        />
+        <Text style={{ marginTop: 4 }}>lg</Text>
+      </View>
     </Box>
   ),
 };