@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.47

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

@@ -1,6 +1,6 @@
-import { cva } from 'class-variance-authority';
 import { useMemo } from 'react';
-import { View, Text } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import {
   BluetoothCircleFill,
   CheckmarkCircleFill,
@@ -8,40 +8,80 @@ import {
   InformationFill,
   WarningFill,
 } from '../../Symbols';
-import { IconSize } from '../Icon';
-import { Spinner } from '../Spinner';
-import { SpotProps, SpotSize } from './Spot.types';
+import { Spinner, SpinnerProps } from '../Spinner';
+import { Box } from '../Utility';
+import { SpotAppearance, SpotProps, SpotSize } from './types';
 
-const spotVariants = {
-  root: cva(
-    'flex items-center justify-center rounded-full bg-muted-transparent',
-    {
-      variants: {
-        size: {
-          48: 'spot-w-48 spot-h-48',
-          56: 'spot-w-56 spot-h-56',
-          72: 'spot-w-72 spot-h-72',
+const BLUETOOTH_COLOR = '#0082FC';
+
+const iconSizeMap = {
+  48: 20,
+  56: 24,
+  72: 40,
+} as const;
+
+const spotSizeMap: Record<SpotSize, number> = {
+  48: 48,
+  56: 56,
+  72: 72,
+} as const;
+
+const numberTypographyMap = {
+  48: 'heading4',
+  56: 'heading3',
+  72: 'heading1',
+} as const;
+
+const useStyles = ({
+  size,
+  appearance,
+  disabled,
+}: {
+  size: SpotSize;
+  appearance: SpotAppearance;
+  disabled: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const colorMap: Record<SpotAppearance, string> = {
+        icon: t.colors.text.base,
+        bluetooth: BLUETOOTH_COLOR,
+        check: t.colors.text.success,
+        error: t.colors.text.error,
+        warning: t.colors.text.warning,
+        info: t.colors.text.muted,
+        loader: t.colors.text.base,
+        number: t.colors.text.base,
+      };
+
+      const spotSize = spotSizeMap[size];
+      const typography = t.typographies[numberTypographyMap[size]];
+      const contentColor = disabled
+        ? t.colors.text.disabled
+        : colorMap[appearance];
+
+      return {
+        root: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: t.borderRadius.full,
+          backgroundColor: t.colors.bg.mutedTransparent,
+          width: spotSize,
+          height: spotSize,
         },
-      },
-    },
-  ),
-  inner: cva('', {
-    variants: {
-      appearance: {
-        icon: 'text-base',
-        bluetooth: 'text-[#0082FC]',
-        check: 'text-success',
-        error: 'text-error',
-        warning: 'text-warning',
-        info: 'text-muted',
-        loader: '',
-        number: 'text-base',
-      },
-      disabled: {
-        true: 'text-disabled',
-      },
+        icon: {
+          color: contentColor,
+        },
+        numberText: StyleSheet.flatten([
+          typography,
+          {
+            color: contentColor,
+          },
+        ]),
+      };
     },
-  }),
+    [size, appearance, disabled],
+  );
 };
 
 /**
@@ -54,7 +94,7 @@ const spotVariants = {
  *
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_media-graphics-spot--docs Storybook}
  *
- * @warning The `className` prop should only be used for layout adjustments like margins or positioning.
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the spot's core appearance (colors, size, etc). Use the `appearance` prop instead.
  *
  * @example
@@ -79,99 +119,62 @@ const spotVariants = {
  * <Spot appearance="bluetooth" disabled />
  */
 export const Spot = (props: SpotProps) => {
-  const { appearance, className, disabled, size = 48, ...rest } = props;
-
-  const sizeMap: Record<SpotSize, IconSize> = {
-    48: 20,
-    56: 24,
-    72: 40,
-  };
-
-  const numberTypographyMap: Record<SpotSize, string> = {
-    48: 'heading-4',
-    56: 'heading-3',
-    72: 'heading-1',
-  };
-
-  const calculatedIconSize = sizeMap[size] ?? 20;
-  const calculatedNumberTypography = numberTypographyMap[size] ?? 'heading-4';
+  const {
+    appearance,
+    disabled = false,
+    size = 48,
+    lx = {},
+    style,
+    ...rest
+  } = props;
+  const styles = useStyles({ size, appearance, disabled });
+  const calculatedIconSize = iconSizeMap[size];
 
   const content = useMemo(() => {
     switch (props.appearance) {
       case 'icon': {
         const { icon: Icon } = props;
-        return (
-          <Icon
-            size={calculatedIconSize}
-            className={spotVariants.inner({ appearance, disabled })}
-          />
-        );
+        return <Icon size={calculatedIconSize} style={styles.icon} />;
       }
       case 'number': {
-        return (
-          <Text
-            className={spotVariants.inner({
-              appearance,
-              disabled,
-              className: calculatedNumberTypography,
-            })}
-          >
-            {props.number}
-          </Text>
-        );
+        return <Text style={styles.numberText}>{props.number}</Text>;
       }
       case 'bluetooth':
         return (
-          <BluetoothCircleFill
-            className={spotVariants.inner({ appearance, disabled })}
-            size={calculatedIconSize}
-          />
+          <BluetoothCircleFill size={calculatedIconSize} style={styles.icon} />
         );
       case 'check':
         return (
-          <CheckmarkCircleFill
-            className={spotVariants.inner({ appearance, disabled })}
-            size={calculatedIconSize}
-          />
+          <CheckmarkCircleFill size={calculatedIconSize} style={styles.icon} />
         );
       case 'error':
         return (
-          <DeleteCircleFill
-            className={spotVariants.inner({ appearance, disabled })}
-            size={calculatedIconSize}
-          />
+          <DeleteCircleFill size={calculatedIconSize} style={styles.icon} />
         );
       case 'warning':
-        return (
-          <WarningFill
-            className={spotVariants.inner({ appearance, disabled })}
-            size={calculatedIconSize}
-          />
-        );
+        return <WarningFill size={calculatedIconSize} style={styles.icon} />;
       case 'info':
         return (
-          <InformationFill
-            className={spotVariants.inner({ appearance, disabled })}
-            size={calculatedIconSize}
-          />
+          <InformationFill size={calculatedIconSize} style={styles.icon} />
         );
       case 'loader':
         return (
           <Spinner
-            className={spotVariants.inner({ appearance, disabled })}
             size={calculatedIconSize}
+            color={styles.icon.color as SpinnerProps['color']}
           />
         );
     }
-  }, [props, calculatedIconSize, calculatedNumberTypography]);
+  }, [props, calculatedIconSize, styles.icon, styles.numberText]);
 
   return (
-    <View
+    <Box
       testID='spot-container'
-      className={spotVariants.root({ size, className })}
+      lx={lx}
+      style={StyleSheet.flatten([styles.root, style])}
       {...rest}
     >
       {content}
-    </View>
+    </Box>
   );
 };

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

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

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { StyledViewProps } from '../../../styles';
+import { IconProps } from '../Icon';
+
+export type SpotAppearance =
+  | 'icon'
+  | 'bluetooth'
+  | 'check'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'loader'
+  | 'number';
+
+type IconSpotProps = {
+  /**
+   * Displays a custom icon with neutral base styling.
+   */
+  appearance: 'icon';
+  /**
+   * A React component to be rendered as the icon. Required when appearance is 'icon'.
+   */
+  icon: React.ComponentType<IconProps>;
+};
+
+type NumberSpotProps = {
+  /**
+   * Displays a single digit (0-9) with number styling.
+   */
+  appearance: 'number';
+  /**
+   * A single digit from 0 to 9 to display. Required when appearance is 'number'.
+   */
+  number: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+};
+
+type StatusSpotProps = {
+  /**
+   * Self-contained predefined status indicators with semantic styling.
+   */
+  appearance: Exclude<SpotAppearance, 'icon' | 'number'>;
+};
+
+export type DiscriminatedSpotProps =
+  | IconSpotProps
+  | NumberSpotProps
+  | StatusSpotProps;
+
+export type SpotSize = 48 | 56 | 72;
+
+export type SpotProps = {
+  /**
+   * Whether the spot is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The size of the spot.
+   * @default 48
+   */
+  size?: SpotSize;
+} & DiscriminatedSpotProps &
+  StyledViewProps;

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

@@ -1,7 +1,12 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
-import React, { useCallback } from 'react';
-import { Pressable, View, type GestureResponderEvent } from 'react-native';
+import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  type GestureResponderEvent,
+} from 'react-native';
+import { useStyleSheet } from '../../../styles';
 
 import {
   PressableRef,
@@ -16,69 +21,6 @@ import { SwitchProps } from './types';
 const ROOT_COMPONENT_NAME = 'BaseSwitch';
 const THUMB_COMPONENT_NAME = 'BaseSwitchThumb';
 
-const baseSwitchVariants = {
-  root: cva(
-    [
-      'group flex justify-center rounded-full p-2 transition-colors duration-200 ease-in-out',
-      'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',
-    ],
-    {
-      variants: {
-        checked: { true: '', false: '' },
-        disabled: { true: '', false: '' },
-        size: {
-          sm: 'h-16 max-h-16 min-h-16 w-24 min-w-24 max-w-24',
-          md: 'h-24 max-h-24 min-h-24 w-40 min-w-40 max-w-40',
-        },
-      },
-      compoundVariants: [
-        {
-          checked: false,
-          disabled: false,
-          className: 'bg-muted-strong',
-        },
-        {
-          checked: true,
-          disabled: false,
-          className: 'bg-active',
-        },
-        {
-          checked: true,
-          disabled: true,
-          className: 'bg-disabled',
-        },
-        {
-          checked: false,
-          disabled: true,
-          className: 'bg-disabled',
-        },
-      ],
-    },
-  ),
-  thumb: cva(
-    'translate-x-0 rounded-full bg-white transition-transform duration-200 ease-in-out',
-    {
-      variants: {
-        size: { sm: 'size-12', md: 'size-20' },
-        checked: { true: '', false: '' },
-        disabled: { true: 'bg-base', false: '' },
-      },
-      compoundVariants: [
-        {
-          checked: true,
-          size: 'sm',
-          className: 'translate-x-8',
-        },
-        {
-          checked: true,
-          size: 'md',
-          className: 'translate-x-16',
-        },
-      ],
-    },
-  ),
-};
-
 type BaseSwitchRootProps = SlottablePressableProps & {
   checked: SwitchProps['checked'];
   onCheckedChange: SwitchProps['onCheckedChange'];
@@ -98,13 +40,18 @@ const BaseSwitchRoot = React.forwardRef<PressableRef, BaseSwitchRootProps>(
       size = 'md',
       onCheckedChange,
       disabled = false,
-      className,
       onPress: onPressProp,
       'aria-valuetext': ariaValueText,
       ...props
     },
     ref,
   ) => {
+    const styles = useStyles({
+      checked: !!checked,
+      disabled: !!disabled,
+      size,
+    });
+
     const onPress = useCallback(
       (ev: GestureResponderEvent) => {
         if (disabled) return;
@@ -126,22 +73,19 @@ const BaseSwitchRoot = React.forwardRef<PressableRef, BaseSwitchRootProps>(
         }}
       >
         <Component
-          className={baseSwitchVariants.root({
-            className,
-            checked,
-            disabled,
-            size,
-          })}
+          style={styles.root}
           ref={ref}
           aria-disabled={disabled}
           role='switch'
           aria-checked={checked}
-          aria-valuetext={ariaValueText ?? (checked ? 'on' : 'off')}
           onPress={onPress}
           accessibilityState={{
             checked,
             disabled,
           }}
+          accessibilityValue={
+            ariaValueText ? { text: ariaValueText } : undefined
+          }
           disabled={disabled}
           {...props}
         />
@@ -152,28 +96,151 @@ const BaseSwitchRoot = React.forwardRef<PressableRef, BaseSwitchRootProps>(
 BaseSwitchRoot.displayName = ROOT_COMPONENT_NAME;
 
 const BaseSwitchThumb = React.forwardRef<ViewRef, SlottableViewProps>(
-  ({ asChild, className, ...props }, ref) => {
+  ({ asChild, ...props }, ref) => {
     const { checked, disabled, size } = useBaseSwitchContext({
       consumerName: THUMB_COMPONENT_NAME,
       contextRequired: true,
     });
 
-    const Component = asChild ? SlotView : View;
+    const styles = useStyles({
+      checked: !!checked,
+      disabled: !!disabled,
+      size: size || 'md',
+    });
+
+    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()],
+          }),
+        },
+      ],
+    };
+
+    if (asChild) {
+      const Component = SlotView;
+      return (
+        <Component
+          ref={ref}
+          role='presentation'
+          style={styles.thumb}
+          {...props}
+        />
+      );
+    }
+
     return (
-      <Component
+      <Animated.View
         ref={ref}
         role='presentation'
-        className={baseSwitchVariants.thumb({
-          className,
-          checked,
-          disabled,
-          size,
-        })}
+        style={[styles.thumbBase, animatedStyle]}
         {...props}
       />
     );
   },
 );
+
+type Size = NonNullable<SwitchProps['size']>;
+
+const useStyles = ({
+  checked,
+  disabled,
+  size,
+}: {
+  checked: boolean;
+  disabled: boolean;
+  size: Size;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const sizes: Record<Size, { 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<Size, { size: number }> = {
+        sm: { size: t.sizes.s12 },
+        md: { size: t.sizes.s20 },
+      };
+
+      const thumbTranslations: Record<Size, number> = {
+        sm: t.spacings.s8,
+        md: t.spacings.s16,
+      };
+
+      return {
+        root: StyleSheet.flatten([
+          {
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            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,
+          },
+        ]),
+        thumbBase: StyleSheet.flatten([
+          {
+            borderRadius: t.borderRadius.full,
+            backgroundColor: 'white',
+            width: thumbSizes[size].size,
+            height: thumbSizes[size].size,
+          },
+          disabled && {
+            backgroundColor: t.colors.bg.base,
+          },
+        ]),
+        thumb: StyleSheet.flatten([
+          {
+            borderRadius: t.borderRadius.full,
+            backgroundColor: 'white',
+            width: thumbSizes[size].size,
+            height: thumbSizes[size].size,
+            transform: [{ translateX: checked ? thumbTranslations[size] : 0 }],
+          },
+          disabled && {
+            backgroundColor: t.colors.bg.base,
+          },
+        ]),
+      };
+    },
+    [checked, disabled, size],
+  );
+};
+
 BaseSwitchThumb.displayName = THUMB_COMPONENT_NAME;
 
 export { BaseSwitchRoot, BaseSwitchThumb };