@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

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

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import React from 'react';
-import { View, Text } from 'react-native';
 import { Settings, Plus, Heart, Star } from '../../Symbols';
-import { IconSize } from '../Icon';
+import { IconProps } from '../Icon';
+import { Box, Text } from '../Utility';
 import { Spot } from './Spot';
-import { SpotProps } from './Spot.types';
+import { SpotProps } from './types';
 
 const meta: Meta<typeof Spot> = {
   component: Spot,
@@ -89,7 +89,7 @@ export const AppearanceShowcase: Story = {
     const appearances: Array<{
       name: string;
       appearance: SpotProps['appearance'];
-      icon?: React.ComponentType<{ size?: IconSize; className?: string }>;
+      icon?: React.ComponentType<IconProps>;
       number?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
     }> = [
       { name: 'Icon', appearance: 'icon', icon: Settings },
@@ -103,21 +103,35 @@ export const AppearanceShowcase: Story = {
     ];
 
     return (
-      <View className='flex flex-row flex-wrap gap-16 p-8 text-base'>
+      <Box
+        lx={{
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: 's16',
+          padding: 's8',
+        }}
+      >
         {appearances.map(({ name, appearance, icon, number }) => (
-          <View
+          <Box
             key={appearance}
-            className='flex w-64 flex-col items-center gap-4'
+            lx={{
+              width: 's64',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 's4',
+            }}
           >
             <Spot
               appearance={appearance as any}
               icon={icon}
               number={number as any}
             />
-            <Text className='text-center text-muted'>{name}</Text>
-          </View>
+            <Text typography='body3' lx={{ color: 'muted' }}>
+              {name}
+            </Text>
+          </Box>
         ))}
-      </View>
+      </Box>
     );
   },
 };
@@ -132,11 +146,11 @@ export const IconVariants: Story = {
     ];
 
     return (
-      <View className='flex flex-row gap-8 p-8'>
+      <Box lx={{ flexDirection: 'row', gap: 's8', padding: 's8' }}>
         {icons.map(({ name, component: Icon }) => (
           <Spot key={name} appearance='icon' icon={Icon} />
         ))}
-      </View>
+      </Box>
     );
   },
 };
@@ -146,59 +160,39 @@ export const NumberVariants: Story = {
     const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;
 
     return (
-      <View className='flex flex-row flex-wrap gap-8 p-8'>
+      <Box
+        lx={{
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: 's8',
+          padding: 's8',
+        }}
+      >
         {numbers.map((num) => (
           <Spot key={num} appearance='number' number={num} />
         ))}
-      </View>
+      </Box>
     );
   },
 };
 
 export const SizesShowcase: Story = {
   render: () => {
-    const appearances: Array<{
-      name: string;
-      appearance: SpotProps['appearance'];
-      icon?: React.ComponentType<{ size?: IconSize; className?: string }>;
-      number?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
-    }> = [
-      { name: 'Icon', appearance: 'icon', icon: Settings },
-      { name: 'Bluetooth', appearance: 'bluetooth' },
-      { name: 'Check', appearance: 'check' },
-      { name: 'Error', appearance: 'error' },
-      { name: 'Warning', appearance: 'warning' },
-      { name: 'Info', appearance: 'info' },
-      { name: 'Loader', appearance: 'loader' },
-      { name: 'Number', appearance: 'number', number: 5 },
-    ];
-
     const sizes = [48, 56, 72] as const;
 
     return (
-      <View className='flex flex-col gap-16 p-8 text-base'>
+      <Box lx={{ flexDirection: 'column', gap: 's32', padding: 's16' }}>
         {sizes.map((size) => (
-          <View key={size} className='flex flex-col gap-4'>
-            <Text>Size {size}px</Text>
-            <View className='flex flex-row flex-wrap gap-16'>
-              {appearances.map(({ name, appearance, icon, number }) => (
-                <View
-                  key={`${appearance}-${size}`}
-                  className='flex flex-col items-center gap-4'
-                >
-                  <Spot
-                    appearance={appearance as any}
-                    icon={icon}
-                    number={number as any}
-                    size={size}
-                  />
-                  <Text className='text-center text-muted'>{name}</Text>
-                </View>
-              ))}
-            </View>
-          </View>
+          <Box key={size} lx={{ flexDirection: 'column', gap: 's16' }}>
+            <Text typography='heading4SemiBold'>{size}px</Text>
+            <Box lx={{ flexDirection: 'row', gap: 's12' }}>
+              <Spot appearance='icon' icon={Settings} size={size} />
+              <Spot appearance='info' size={size} />
+              <Spot appearance='number' number={5} size={size} />
+            </Box>
+          </Box>
         ))}
-      </View>
+      </Box>
     );
   },
 };
@@ -206,30 +200,58 @@ export const SizesShowcase: Story = {
 export const StatesShowcase: Story = {
   render: () => {
     return (
-      <View className='flex flex-col gap-16 text-base'>
-        <View className='flex flex-col gap-8'>
-          <Text>Default</Text>
-          <View className='flex flex-row flex-wrap gap-16'>
-            <View className='flex w-64 flex-col items-center gap-4'>
+      <Box lx={{ flexDirection: 'column', gap: 's16' }}>
+        <Box lx={{ flexDirection: 'column', gap: 's8' }}>
+          <Text typography='body2'>Default</Text>
+          <Box lx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 's16' }}>
+            <Box
+              lx={{
+                width: 's64',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 's4',
+              }}
+            >
               <Spot appearance='icon' icon={Settings} />
-            </View>
-            <View className='flex w-64 flex-col items-center gap-4'>
+            </Box>
+            <Box
+              lx={{
+                width: 's64',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 's4',
+              }}
+            >
               <Spot appearance='bluetooth' />
-            </View>
-          </View>
-        </View>
-        <View className='flex flex-col gap-8'>
-          <Text>Disabled</Text>
-          <View className='flex flex-row flex-wrap gap-16'>
-            <View className='flex w-64 flex-col items-center gap-4'>
+            </Box>
+          </Box>
+        </Box>
+        <Box lx={{ flexDirection: 'column', gap: 's8' }}>
+          <Text typography='body2'>Disabled</Text>
+          <Box lx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 's16' }}>
+            <Box
+              lx={{
+                width: 's64',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 's4',
+              }}
+            >
               <Spot appearance='icon' icon={Settings} disabled />
-            </View>
-            <View className='flex w-64 flex-col items-center gap-4'>
+            </Box>
+            <Box
+              lx={{
+                width: 's64',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 's4',
+              }}
+            >
               <Spot appearance='bluetooth' disabled />
-            </View>
-          </View>
-        </View>
-      </View>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
     );
   },
 };

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,59 @@
+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'>;
+};
+
+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;