@ledgerhq/lumen-ui-rnative 0.1.8 → 0.1.9

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

@@ -0,0 +1,2 @@
+export * from './Card';
+export * from './types';

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

@@ -0,0 +1,121 @@
+import { ReactNode } from 'react';
+import { GestureResponderEvent } from 'react-native';
+import { StyledTextProps, StyledViewProps } from '../../../styles';
+
+export type CardType = 'interactive' | 'expandable' | 'info';
+
+export type CardContextValue = {
+  cardPressable: boolean;
+  headerPressable: boolean;
+  footerExpanded: boolean;
+  onHeaderPress?: (event: GestureResponderEvent) => void;
+};
+
+export type CardContentAlignContextValue = {
+  align?: 'left' | 'right';
+};
+
+export type CardDisabledContextValue = {
+  disabled: boolean;
+};
+
+export type CardProps = {
+  /**
+   * The interaction mode of the card.
+   * - `'interactive'` (default): whole card is pressable with pressed states.
+   * - `'expandable'`: only the header is pressable, toggles footer visibility.
+   * - `'info'`: data-display only, no built-in press handling.
+   * @default 'interactive'
+   */
+  type?: CardType;
+  /**
+   * Whether the card footer is expanded (visible).
+   * Only relevant when `type="expandable"`.
+   * When `false`, CardFooter is hidden.
+   */
+  expanded?: boolean;
+  /**
+   * Whether the card shows a selection outline.
+   * @default false
+   */
+  outlined?: boolean;
+  /**
+   * Whether the card is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Callback function when the card is pressed.
+   * For `type="interactive"`, the whole card responds.
+   * For `type="expandable"`, the header responds.
+   */
+  onPress?: (event: GestureResponderEvent) => void;
+  /**
+   * The card content (CardHeader, CardFooter, etc.).
+   */
+  children: ReactNode;
+} & Omit<StyledViewProps, 'onPress' | 'disabled' | 'children'>;
+
+export type CardHeaderProps = {
+  /**
+   * The header content (CardLeading, CardTrailing).
+   */
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type CardLeadingProps = {
+  /**
+   * The leading content (icon + CardContent).
+   */
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type CardContentProps = {
+  /**
+   * The content (CardContentTitle, CardContentDescription).
+   */
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type CardContentTitleProps = {
+  /**
+   * The title text or custom inline content.
+   */
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+
+export type CardContentDescriptionProps = {
+  /**
+   * The description text or custom inline content.
+   */
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+
+export type CardContentRowProps = {
+  /**
+   * The row content (CardContentTitle or CardContentDescription
+   * alongside additional elements like Tag).
+   */
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type CardTrailingProps = {
+  /**
+   * The trailing content (Button, Tag, CardContent, etc.).
+   */
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type CardFooterProps = {
+  /**
+   * The footer content (DescriptionList, Button, etc.).
+   */
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type CardFooterActionsProps = {
+  /**
+   * The action buttons to display in a horizontal row.
+   */
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;

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

@@ -21,6 +21,7 @@ type IconStoryProps = {
   size: IconSize;
   name: IconName;
   color?: string;
+  disabled?: boolean;
 };
 
 type IconCardProps = {
@@ -109,6 +110,9 @@ export const Icon: StoryObj<IconStoryProps> = {
       control: 'color',
       description: 'The color of the icon',
     },
+    disabled: {
+      control: 'boolean',
+    },
   },
   render: (args) => {
     const { theme } = useTheme();

package/src/lib/Components/Icon/createIcon.ts

@@ -1,6 +1,7 @@
-import { toPascalCase } from '@ledgerhq/lumen-utils-shared';
+import { toPascalCase, useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import React from 'react';
 import { SvgProps } from 'react-native-svg';
+import { useTheme } from '../../../styles';
 import { Icon } from './Icon';
 import { IconProps } from './types';
 
@@ -14,12 +15,23 @@ const createIcon = (
   iconName: string,
   iconJsx: React.ReactElement<SvgProps>,
 ) => {
-  const Component = (props: Omit<IconProps, 'children'>) =>
-    React.createElement(Icon, {
+  const Component = ({ disabled, ...props }: Omit<IconProps, 'children'>) => {
+    const { theme } = useTheme();
+    const mergedDisabled = useDisabledContext({
+      consumerName: iconName,
+      mergeWith: { disabled },
+    });
+
+    return React.createElement(Icon, {
       viewBox: iconJsx.props.viewBox,
       ...props,
+      style: [
+        mergedDisabled ? { color: theme.colors.text.disabled } : {},
+        props.style,
+      ],
       children: iconJsx.props.children,
     });
+  };
 
   Component.displayName = toPascalCase(iconName);
 

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

@@ -18,6 +18,10 @@ export type IconProps = {
    * The children of the icon.
    */
   children?: React.ReactNode;
+  /**
+   * Whether the icon is disabled.
+   */
+  disabled?: boolean;
   /**
    * The ref to the Svg component.
    */

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

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import Animated, {
+  cancelAnimation,
   interpolate,
   interpolateColor,
   useAnimatedStyle,
@@ -7,34 +8,40 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useStyleSheet, useTheme } from '../../../styles';
+import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { Box } from '../Utility';
 import { PageIndicatorProps } from './types';
 
 const AnimatedBox = Animated.createAnimatedComponent(Box);
 const MAX_VISIBLE_DOTS = 4;
 
-type PageIndicatorDotProps = {
+const useDotAnimation = ({
+  isActive,
+  isShrunk,
+}: {
   isActive: boolean;
   isShrunk: boolean;
-};
-
-const useDotAnimation = (
-  isActive: boolean,
-  isShrunk: boolean,
-  theme: ReturnType<typeof useTheme>['theme'],
-) => {
+}) => {
+  const { theme } = useTheme();
   const colorProgress = useSharedValue(isActive ? 1 : 0);
   const shrinkProgress = useSharedValue(isShrunk ? 1 : 0);
 
+  const timingConfig = useTimingConfig({
+    duration: 200,
+    easing: 'easeInOut',
+  });
+
   useEffect(() => {
-    colorProgress.value = withTiming(isActive ? 1 : 0, { duration: 200 });
-  }, [isActive, colorProgress]);
+    colorProgress.value = withTiming(isActive ? 1 : 0, timingConfig);
+    return () => cancelAnimation(colorProgress);
+  }, [isActive, colorProgress, timingConfig]);
 
   useEffect(() => {
-    shrinkProgress.value = withTiming(isShrunk ? 1 : 0, { duration: 200 });
-  }, [isShrunk, shrinkProgress]);
+    shrinkProgress.value = withTiming(isShrunk ? 1 : 0, timingConfig);
+    return () => cancelAnimation(shrinkProgress);
+  }, [isShrunk, shrinkProgress, timingConfig]);
 
-  return useAnimatedStyle(() => {
+  const animatedStyle = useAnimatedStyle(() => {
     const backgroundColor = interpolateColor(
       colorProgress.value,
       [0, 1],
@@ -51,42 +58,21 @@ const useDotAnimation = (
       width: size,
     };
   }, [colorProgress, shrinkProgress, theme]);
-};
-
-const useDotStyles = () =>
-  useStyleSheet(
-    (t) => ({
-      dot: {
-        height: t.sizes.s6,
-        width: t.sizes.s6,
-        borderRadius: t.borderRadius.full,
-        backgroundColor: t.colors.bg.mutedHover,
-      },
-    }),
-    [],
-  );
 
-const PageIndicatorDot = ({ isActive, isShrunk }: PageIndicatorDotProps) => {
-  const styles = useDotStyles();
-  const { theme } = useTheme();
-  const animatedStyle = useDotAnimation(isActive, isShrunk, theme);
-
-  return <AnimatedBox style={[styles.dot, animatedStyle]} />;
+  return { animatedStyle };
 };
 
-type UsePageIndicatorParams = {
-  currentPage: number;
-  totalPages: number;
-  dotSize: number;
-  gap: number;
-};
-
-const usePageIndicator = ({
+const useStripAnimation = ({
   currentPage,
   totalPages,
   dotSize,
   gap,
-}: UsePageIndicatorParams) => {
+}: {
+  currentPage: number;
+  totalPages: number;
+  dotSize: number;
+  gap: number;
+}) => {
   const translateX = useSharedValue(0);
   const prevPage = useRef(currentPage);
 
@@ -109,9 +95,15 @@ const usePageIndicator = ({
 
   const dotWidth = dotSize + gap;
 
+  const timingConfig = useTimingConfig({
+    duration: 200,
+    easing: 'easeInOut',
+  });
+
   useEffect(() => {
-    translateX.value = withTiming(-offset * dotWidth, { duration: 200 });
-  }, [currentPage, totalPages, offset, dotWidth, translateX]);
+    translateX.value = withTiming(-offset * dotWidth, timingConfig);
+    return () => cancelAnimation(translateX);
+  }, [currentPage, totalPages, offset, dotWidth, translateX, timingConfig]);
 
   const stripAnimatedStyle = useAnimatedStyle(
     () => ({
@@ -155,26 +147,18 @@ const usePageIndicator = ({
   };
 };
 
-const usePageIndicatorStyles = () =>
-  useStyleSheet(
-    (t) => ({
-      container: {
-        alignItems: 'center',
-        justifyContent: 'center',
-      },
-      viewport: {
-        overflow: 'hidden',
-        flexDirection: 'row',
-        alignItems: 'center',
-      },
-      strip: {
-        flexDirection: 'row',
-        gap: t.spacings.s4,
-        alignItems: 'center',
-      },
-    }),
-    [],
-  );
+const PageIndicatorDot = ({
+  isActive,
+  isShrunk,
+}: {
+  isActive: boolean;
+  isShrunk: boolean;
+}) => {
+  const styles = useDotStyles();
+  const { animatedStyle } = useDotAnimation({ isActive, isShrunk });
+
+  return <AnimatedBox style={[styles.dot, animatedStyle]} />;
+};
 
 /**
  * A page indicator component that shows the current position within a set of pages (e.g. carousel or onboarding).
@@ -197,7 +181,7 @@ export const PageIndicator = ({
     Math.min(currentPage - 1, totalPages - 1),
   );
   const { viewportWidth, stripAnimatedStyle, isActive, isShrunk } =
-    usePageIndicator({
+    useStripAnimation({
       currentPage: currentPageIndex,
       totalPages,
       dotSize: theme.sizes.s6,
@@ -233,3 +217,37 @@ export const PageIndicator = ({
 };
 
 PageIndicator.displayName = 'PageIndicator';
+
+const useDotStyles = () =>
+  useStyleSheet(
+    (t) => ({
+      dot: {
+        height: t.sizes.s6,
+        width: t.sizes.s6,
+        borderRadius: t.borderRadius.full,
+        backgroundColor: t.colors.bg.mutedHover,
+      },
+    }),
+    [],
+  );
+
+const usePageIndicatorStyles = () =>
+  useStyleSheet(
+    (t) => ({
+      container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      viewport: {
+        overflow: 'hidden',
+        flexDirection: 'row',
+        alignItems: 'center',
+      },
+      strip: {
+        flexDirection: 'row',
+        gap: t.spacings.s4,
+        alignItems: 'center',
+      },
+    }),
+    [],
+  );

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

@@ -5,7 +5,7 @@ import {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { durations, easingCurves } from '../../Animations/constants';
+import { useTimingConfig } from '../../Animations/useTimingConfig';
 
 export function useSegmentedControlSelectedIndex(
   selectedValue: string,
@@ -37,6 +37,11 @@ export function usePillLayout({
   const pillHeight = useSharedValue(0);
   const hasLayoutRef = useRef(false);
 
+  const timingConfig = useTimingConfig({
+    duration: 300,
+    easing: 'easeInOut',
+  });
+
   const onLayout = (e: LayoutChangeEvent): void => {
     const { width, height } = e.nativeEvent.layout;
     const count = React.Children.count(children);
@@ -56,12 +61,12 @@ export function usePillLayout({
   useEffect(() => {
     if (!hasLayoutRef.current) return;
     if (selectedIndex >= 0 && pillWidth.value > 0) {
-      pillTranslateX.value = withTiming(selectedIndex * pillWidth.value, {
-        duration: durations['250'],
-        easing: easingCurves.bezier.default,
-      });
+      pillTranslateX.value = withTiming(
+        selectedIndex * pillWidth.value,
+        timingConfig,
+      );
     }
-  }, [selectedIndex, pillWidth, pillTranslateX]);
+  }, [selectedIndex, pillWidth, pillTranslateX, timingConfig]);
 
   const animatedPillStyle = useAnimatedStyle(
     () => ({

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

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 import { LumenTypographyTokens, useStyleSheet } from '../../../styles';
@@ -46,7 +47,7 @@ const useStyles = ({
 }: {
   size: SpotSize;
   appearance: SpotAppearance;
-  disabled: boolean;
+  disabled?: boolean;
 }) => {
   return useStyleSheet(
     (t) => {
@@ -134,7 +135,12 @@ export const Spot = (props: SpotProps) => {
     style,
     ...rest
   } = props;
-  const styles = useStyles({ size, appearance, disabled });
+  const mergedDisabled = useDisabledContext({
+    consumerName: 'Spot',
+    mergeWith: { disabled },
+  });
+
+  const styles = useStyles({ size, appearance, disabled: mergedDisabled });
   const calculatedIconSize = iconSizeMap[size];
 
   const content = useMemo(() => {

package/src/lib/Components/Stepper/Stepper.mdx

@@ -13,15 +13,13 @@ import { Text } from '../Utility/Text';
 <CustomTabs>
   <Tab label="Overview">
 
-The Stepper component provides visual feedback for multi-step processes and workflows. It displays progress as a circular indicator showing the current step out of total steps, helping users understand where they are in a sequence.
-
-## Figma Library
+## Introduction
 
-All stepper designs are created and managed in our components library. This ensures consistency across all platforms and use cases.
+The Stepper component provides visual feedback for multi-step processes and workflows. It displays progress as a circular indicator showing the current step out of total steps, helping users understand where they are in a sequence.
 
-- 🔗 **[Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11977-94&m=dev)**
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11977-94&m=dev).
 
-## Interactive Example
+> ⚠️ **Note on Web Preview:** The Storybook preview below may display visual inconsistencies as certain React Native APIs (such as Reanimated animations) cannot be fully translated to web environments. While the component's functionality should accurately represent the native implementation, it may not render as intended. For the complete native experience, please refer to the component on an actual iOS or Android device.
 
 <Canvas of={StepperStories.Base} />
 <Controls of={StepperStories.Base} />

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

@@ -1,9 +1,15 @@
 import { getStepperCalculations } from '@ledgerhq/lumen-utils-shared';
-import { useEffect, useRef } from 'react';
-import { Animated, Easing } from 'react-native';
+import { useEffect } from 'react';
+import Animated, {
+  cancelAnimation,
+  useAnimatedProps,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import Svg, { Circle } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
 import { useTheme } from '../../../styles';
+import { useTimingConfig } from '../../Animations/useTimingConfig';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 import { StepperProps } from './types';
@@ -13,6 +19,32 @@ const STROKE_WIDTH = 4;
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
+const useAnimatedProgress = ({
+  progressDashOffset,
+}: {
+  progressDashOffset: number;
+}) => {
+  const animatedOffset = useSharedValue(progressDashOffset);
+  const timingConfig = useTimingConfig({
+    duration: 300,
+    easing: 'easeInOut',
+  });
+
+  useEffect(() => {
+    animatedOffset.value = withTiming(progressDashOffset, timingConfig);
+    return () => cancelAnimation(animatedOffset);
+  }, [progressDashOffset, animatedOffset, timingConfig]);
+
+  const animatedProgress = useAnimatedProps(
+    () => ({
+      strokeDashoffset: animatedOffset.value,
+    }),
+    [animatedOffset],
+  );
+
+  return animatedProgress;
+};
+
 /**
  * A circular stepper component showing progress as current step out of total steps.
  * Renders a track arc with a progress arc and a center label.
@@ -51,18 +83,9 @@ export const Stepper = ({
     strokeWidth: STROKE_WIDTH,
   });
 
-  const animatedOffset = useRef(new Animated.Value(progressDashOffset)).current;
-
-  useEffect(() => {
-    const animation = Animated.timing(animatedOffset, {
-      toValue: progressDashOffset,
-      duration: 300,
-      easing: Easing.inOut(Easing.ease),
-      useNativeDriver: false,
-    });
-    animation.start();
-    return () => animation.stop();
-  }, [progressDashOffset, animatedOffset]);
+  const animatedProgress = useAnimatedProgress({
+    progressDashOffset,
+  });
 
   return (
     <Box
@@ -122,7 +145,7 @@ export const Stepper = ({
           strokeLinecap='round'
           strokeWidth={STROKE_WIDTH}
           strokeDasharray={progressDashArray}
-          strokeDashoffset={animatedOffset}
+          animatedProps={animatedProgress}
         />
       </Svg>
       <Box

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

@@ -1,12 +1,18 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import {
-  Animated,
   Pressable,
   StyleSheet,
   type GestureResponderEvent,
 } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { useStyleSheet } from '../../../styles';
+import { useTimingConfig } from '../../Animations/useTimingConfig';
 
 import { SlottablePressableProps, SlottableViewProps } from '../../types';
 import { SlotPressable, SlotView } from '../Slot';
@@ -84,8 +90,45 @@ const BaseSwitchRoot = ({
 };
 BaseSwitchRoot.displayName = ROOT_COMPONENT_NAME;
 
+const THUMB_TRANSLATE: Record<Size, number> = {
+  sm: 8,
+  md: 16,
+};
+
+const useAnimatedThumb = ({
+  checked,
+  size,
+}: {
+  checked: boolean | undefined;
+  size: Size;
+}) => {
+  const timingConfig = useTimingConfig({ duration: 200, easing: 'easeInOut' });
+  const translateX = useSharedValue(checked ? THUMB_TRANSLATE[size] : 0);
+
+  useEffect(() => {
+    translateX.value = withTiming(
+      checked ? THUMB_TRANSLATE[size] : 0,
+      timingConfig,
+    );
+    return () => cancelAnimation(translateX);
+  }, [checked, size, translateX, timingConfig]);
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: translateX.value }],
+    }),
+    [translateX],
+  );
+
+  return { animatedStyle };
+};
+
 const BaseSwitchThumb = ({ asChild, ref, ...props }: SlottableViewProps) => {
-  const { checked, disabled, size } = useBaseSwitchContext({
+  const {
+    checked,
+    disabled,
+    size = 'md',
+  } = useBaseSwitchContext({
     consumerName: THUMB_COMPONENT_NAME,
     contextRequired: true,
   });
@@ -93,34 +136,10 @@ const BaseSwitchThumb = ({ asChild, ref, ...props }: SlottableViewProps) => {
   const styles = useStyles({
     checked: !!checked,
     disabled: !!disabled,
-    size: size || 'md',
+    size,
   });
 
-  const translateX = useRef(new Animated.Value(checked ? 1 : 0)).current;
-
-  useEffect(() => {
-    Animated.timing(translateX, {
-      toValue: checked ? 1 : 0,
-      duration: 200,
-      useNativeDriver: true,
-    }).start();
-  }, [checked, translateX]);
-
-  const getTranslateDistance = (): number => {
-    const sizeName = size || 'md';
-    return sizeName === 'sm' ? 8 : 16;
-  };
-
-  const animatedStyle = {
-    transform: [
-      {
-        translateX: translateX.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, getTranslateDistance()],
-        }),
-      },
-    ],
-  };
+  const { animatedStyle } = useAnimatedThumb({ checked, size });
 
   if (asChild) {
     const Component = SlotView;