@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

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

@@ -1,5 +1,11 @@
 import { ReactNode } from 'react';
-import { PressableProps, ViewProps, TextProps } from 'react-native';
+import { PressableProps } from 'react-native';
+import {
+  StyledViewProps,
+  StyledPressableProps,
+  StyledTextProps,
+} from '../../../styles';
+import { BoxProps } from '../Utility';
 
 export type SelectProps = {
   /**
@@ -46,28 +52,18 @@ export type SelectTriggerProps = {
    * The children to render inside the trigger
    */
   children?: ReactNode;
-  /**
-   * Extra class names to apply to the trigger element
-   * @example className='border-error'
-   */
-  className?: string;
   /**
    * The label text that floats above the input when focused or filled
    * @example label='Select an option'
    */
   label?: string;
-  /**
-   * Additional class names to apply to the label element
-   * @example labelClassName='text-error'
-   */
-  labelClassName?: string;
   /**
    * Change the default rendered element for the one passed as a child,
    * merging their props and behavior.
    * @default false
    */
   asChild?: boolean;
-} & Omit<PressableProps, 'children' | 'onPress'>;
+} & Omit<StyledPressableProps, 'children'>;
 
 export type SelectContentProps = {
   /**
@@ -81,7 +77,7 @@ export type SelectGroupProps = {
    * The children of the select group (SelectLabel, SelectItem)
    */
   children: ReactNode;
-} & ViewProps;
+} & StyledViewProps;
 
 export type SelectLabelProps = {
   /**
@@ -89,11 +85,7 @@ export type SelectLabelProps = {
    * @required
    */
   children: ReactNode;
-  /**
-   * Extra class names to apply to the label element
-   */
-  className?: string;
-} & TextProps;
+} & StyledTextProps;
 
 export type SelectItemProps = {
   /**
@@ -114,10 +106,6 @@ export type SelectItemProps = {
    * The disabled state of the select item
    */
   disabled?: boolean;
-  /**
-   * Extra class names to apply to the item element
-   */
-  className?: string;
 } & Omit<PressableProps, 'children' | 'onPress' | 'disabled'>;
 
 export type SelectItemTextProps = {
@@ -126,18 +114,11 @@ export type SelectItemTextProps = {
    * @required
    */
   children: ReactNode;
-  /**
-   * Extra class names to apply to the item text element
-   */
-  className?: string;
-} & TextProps;
+} & StyledTextProps;
 
 export type SelectSeparatorProps = {
-  /**
-   * Extra class names to apply to the separator element
-   */
-  className?: string;
-} & ViewProps;
+  // No extra props needed
+} & BoxProps;
 
 export type SelectItemData = {
   type: 'item';

package/src/lib/Components/Slot/Slot.tsx

@@ -150,10 +150,6 @@ function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
     // if it's `style`, we merge them
     else if (propName === 'style') {
       overrideProps[propName] = combineStyles(slotPropValue, childPropValue);
-    } else if (propName === 'className') {
-      overrideProps[propName] = [slotPropValue, childPropValue]
-        .filter(Boolean)
-        .join(' ');
     }
   }
 

package/src/lib/Components/Spinner/Spinner.mdx

@@ -2,7 +2,9 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import * as SpinnerStories from './Spinner.stories';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+import { Box } from '../Utility/Box';
+import { Text } from '../Utility/Text';
 
 <Meta title='Communication/Spinner/Docs' of={SpinnerStories} />
 
@@ -24,11 +26,11 @@ All spinner designs are created and managed in our components library. This ensu
 <Canvas of={SpinnerStories.Base} />
 <Controls of={SpinnerStories.Base} />
 
-## 🎨 Appearances
+## 🎨 Colors
 
-The Spinner component is designed to inherit text color from its parent, making it especially versatile when used inside a button, it will automatically match the button's label color for seamless integration. By default, it adopts the primary text color (`text-base`), but you can easily emphasize it using accent colors (such as `text-interactive`).
+The Spinner component supports color customization via the `lx` prop. By default, it adopts the primary text color (`base`), but you can easily customize it using design system color tokens like `muted` or `interactive`.
 
-Additionally, you can customize the spinner's appearance by applying your own styles with the `className` prop, allowing for further flexibility to match any specific design requirement.
+<Canvas of={SpinnerStories.Colors} />
 
 ---
 
@@ -59,34 +61,8 @@ Our spinners are designed to be scalable and available in 7 standard sizes to fi
 
 ## Installation
 
-Install the packages and their peer dependencies:
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
 
-```bash
-# Install the UI Kit
-npm install @ledgerhq/lumen-ui-rnative @ledgerhq/lumen-design-core
-
-# Install peer dependencies
-npm install react@~18.3.1 react-native@~0.77.3 react-native-svg@^15.0.0 nativewind@^4.1.23
-```
-
-### NativeWind Configuration
-
-To use Spinner components with our custom NativeWind preset, you need to configure your `tailwind.config.ts`:
-
-```typescript
-import type { Config } from 'tailwindcss';
-import { ledgerLivePreset } from '@ledgerhq/lumen-design-core';
-
-const config = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}', // Your project's files
-    './node_modules/@ledgerhq/lumen-ui-rnative/src/**/*.{js,ts,jsx,tsx}', // Ledger UI Kit components
-  ],
-  presets: [ledgerLivePreset], // the installed tailwind preset
-} satisfies Config;
-
-export default config;
-```
 
 ### Basic Usage
 
@@ -110,23 +86,41 @@ Spinners support predefined size variants that ensure consistent visual hierarch
 
 ```tsx
 import React from 'react';
-import { View } from 'react-native';
-import { Spinner } from '@ledgerhq/lumen-ui-rnative';
+import { Box, Spinner } from '@ledgerhq/lumen-ui-rnative';
 
 function MyComponent() {
   return (
-    <View className='flex flex-row items-center gap-4'>
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's4' }}>
       <Spinner size={12} />
       <Spinner size={16} />
       <Spinner size={20} />
-    </View>
+    </Box>
+  );
+}
+```
+
+### Color Variants
+
+Use the `color` property with design token values to set spinner color.
+
+```tsx
+import React from 'react';
+import { Spinner } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <>
+      <Spinner color='base' />
+      <Spinner color='muted' />
+      <Spinner color='interactive' />
+    </>
   );
 }
 ```
 
 ## Do's and Don'ts
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Match spinner size to context'
@@ -145,13 +139,13 @@ function MyComponent() {
     </DoBlockItem>
     <DontBlockItem
       title="Don't override spinner size"
-      description='Avoid using className or additional props to override spinner dimensions'
+      description='Avoid using style or additional props to override spinner dimensions'
     >
 
 {/* prettier-ignore */}
 ```tsx
 // Small inline loading
-<Spinner size={12} className='w-6 h-6' />
+<Spinner size={12} style={{ width: 6, height: 6 }} />
 
 // Prominent loading state
 <Spinner size={40} width={32} height={32} />
@@ -169,10 +163,10 @@ function MyComponent() {
 
 {/* prettier-ignore */}
 ```tsx
-<View className='flex flex-row items-center gap-2'>
+<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
   <Spinner size={16} />
   <Text>Syncing wallet...</Text>
-</View>
+</Box>
 ```
 
     </DoBlockItem>
@@ -183,9 +177,9 @@ function MyComponent() {
 
 {/* prettier-ignore */}
 ```tsx
-<View className='flex flex-row items-center gap-2'>
+<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
   <Spinner size={16} />
-</View>
+</Box>
 ```
 
     </DontBlockItem>
@@ -221,7 +215,7 @@ function MyComponent() {
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -1,4 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Box } from '../Utility/Box';
+import { Text } from '../Utility/Text';
 import { Spinner } from './Spinner';
 
 const meta: Meta<typeof Spinner> = {
@@ -22,11 +24,7 @@ export const Base: Story = {
   args: {
     size: 40,
   },
-  render: ({ size }) => (
-    <div className='flex items-center justify-center'>
-      <Spinner size={size} />
-    </div>
-  ),
+  render: (args) => <Spinner {...args} />,
 };
 
 export const Sizes: Story = {
@@ -36,35 +34,93 @@ export const Sizes: Story = {
     },
   },
   render: () => (
-    <div className='flex items-center justify-center gap-32'>
-      <div className='flex flex-col items-center gap-4'>
+    <Box
+      lx={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 's32',
+      }}
+    >
+      <Box lx={{ alignItems: 'center', gap: 's4' }}>
         <Spinner size={12} />
-        <span className='text-muted body-4'>12</span>
-      </div>
-      <div className='flex flex-col items-center gap-4'>
+        <Text typography='body4' lx={{ color: 'muted' }}>
+          12
+        </Text>
+      </Box>
+      <Box lx={{ alignItems: 'center', gap: 's4' }}>
         <Spinner size={16} />
-        <span className='text-muted body-4'>16</span>
-      </div>
-      <div className='flex flex-col items-center gap-4'>
+        <Text typography='body4' lx={{ color: 'muted' }}>
+          16
+        </Text>
+      </Box>
+      <Box lx={{ alignItems: 'center', gap: 's4' }}>
         <Spinner size={20} />
-        <span className='text-muted body-4'>20</span>
-      </div>
-      <div className='flex flex-col items-center gap-4'>
+        <Text typography='body4' lx={{ color: 'muted' }}>
+          20
+        </Text>
+      </Box>
+      <Box lx={{ alignItems: 'center', gap: 's4' }}>
         <Spinner size={24} />
-        <span className='text-muted body-4'>24</span>
-      </div>
-      <div className='flex flex-col items-center gap-4'>
+        <Text typography='body4' lx={{ color: 'muted' }}>
+          24
+        </Text>
+      </Box>
+      <Box lx={{ alignItems: 'center', gap: 's4' }}>
         <Spinner size={40} />
-        <span className='text-muted body-4'>40</span>
-      </div>
-      <div className='flex flex-col items-center gap-4'>
+        <Text typography='body4' lx={{ color: 'muted' }}>
+          40
+        </Text>
+      </Box>
+      <Box lx={{ alignItems: 'center', gap: 's4' }}>
         <Spinner size={48} />
-        <span className='text-muted body-4'>48</span>
-      </div>
-      <div className='flex flex-col items-center gap-4'>
+        <Text typography='body4' lx={{ color: 'muted' }}>
+          48
+        </Text>
+      </Box>
+      <Box lx={{ alignItems: 'center', gap: 's4' }}>
         <Spinner size={56} />
-        <span className='text-muted body-4'>56</span>
-      </div>
-    </div>
+        <Text typography='body4' lx={{ color: 'muted' }}>
+          56
+        </Text>
+      </Box>
+    </Box>
+  ),
+};
+
+export const Colors: Story = {
+  argTypes: {
+    size: {
+      control: false,
+    },
+  },
+  render: () => (
+    <Box
+      lx={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 's32',
+      }}
+    >
+      <Box lx={{ alignItems: 'center', gap: 's4' }}>
+        <Spinner size={40} color='base' />
+        <Text typography='body4' lx={{ color: 'muted' }}>
+          base
+        </Text>
+      </Box>
+      <Box lx={{ alignItems: 'center', gap: 's4' }}>
+        <Spinner size={40} color='muted' />
+        <Text typography='body4' lx={{ color: 'muted' }}>
+          muted
+        </Text>
+      </Box>
+      <Box lx={{ alignItems: 'center', gap: 's4' }}>
+        <Spinner size={40} color='interactive' />
+        <Text typography='body4' lx={{ color: 'muted' }}>
+          interactive
+        </Text>
+      </Box>
+    </Box>
   ),
 };

package/src/lib/Components/Spinner/Spinner.tsx

@@ -1,47 +1,84 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { forwardRef } from 'react';
-import { View } from 'react-native';
-import Svg, { Path, type SvgProps } from 'react-native-svg';
+import { forwardRef, memo, useEffect, useRef } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
-import { IconSize } from '../../Components/Icon/Icon.types';
+import { useResolveTextStyle, useTheme } from '../../../styles';
+import { RuntimeConstants } from '../../utils';
+import { Box } from '../Utility';
+import { SpinnerProps } from './types';
 
-export type SpinnerProps = SvgProps & {
-  /**
-   * The size of the spinner icon in pixels.
-   * @default 16
-   */
-  size?: IconSize;
-};
+const SpinAnimation = memo(({ children }: { children: React.ReactNode }) => {
+  const spinValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: RuntimeConstants.isNative,
+      }),
+    );
+    animation.start();
+
+    return () => animation.stop();
+  }, [spinValue]);
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <Animated.View style={{ transform: [{ rotate: spin }] }}>
+      {children}
+    </Animated.View>
+  );
+});
+SpinAnimation.displayName = 'SpinAnimation';
 
 /**
  * A basic spinner component for loading states.
  *
  * @example
  * <Spinner />
+ *
+ * @example
+ * // With custom color using lx prop
+ * <Spinner lx={{ color: 'interactive' }} />
+ *
+ * @example
+ * // With lx props for layout and color
+ * <Spinner lx={{ marginTop: 's8', color: 'muted' }} />
  */
-export const Spinner = forwardRef<Svg, SpinnerProps>(
-  ({ className, size = 16, ...props }, ref) => {
+export const Spinner = forwardRef<View, SpinnerProps>(
+  ({ lx = {}, size = 16, color, ...props }, ref) => {
     const { t } = useCommonTranslation();
+    const { theme } = useTheme();
+    const resolvedColorStyle = useResolveTextStyle({ color });
+    const strokeColor = resolvedColorStyle?.color ?? theme.colors.text.base;
+
     return (
-      <View className='shrink-0 animate-spin'>
-        <Svg
-          className={cn('text-base', className)}
-          width={size}
-          height={size}
-          viewBox='0 0 16 16'
-          fill='none'
-          accessibilityLabel={t('components.spinner.loadingAriaLabel')}
-          ref={ref}
-          {...props}
-        >
-          <Path
-            d='M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8'
-            stroke='currentColor'
-            strokeWidth='1.5'
-            strokeLinecap='round'
-          />
-        </Svg>
-      </View>
+      <Box ref={ref} lx={{ flexShrink: 0, ...lx }} {...props}>
+        <SpinAnimation>
+          <Svg
+            width={size}
+            height={size}
+            viewBox='0 0 16 16'
+            fill='none'
+            accessibilityLabel={t('components.spinner.loadingAriaLabel')}
+          >
+            <Path
+              d='M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8'
+              stroke={strokeColor}
+              strokeWidth='1.5'
+              strokeLinecap='round'
+            />
+          </Svg>
+        </SpinAnimation>
+      </Box>
     );
   },
 );
+
+Spinner.displayName = 'Spinner';

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

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

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

@@ -0,0 +1,16 @@
+import { LumenTextStyle } from '../../../styles';
+import { IconSize } from '../Icon';
+import { TextProps } from '../Utility';
+
+export type SpinnerProps = {
+  /**
+   * The size of the spinner icon in pixels.
+   * @default 16
+   */
+  size?: IconSize;
+  /**
+   * The color of the spinner icon.
+   * @default 'base'
+   */
+  color?: LumenTextStyle['color'];
+} & Omit<TextProps, 'children'>;

package/src/lib/Components/Spot/Spot.mdx

@@ -1,9 +1,10 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as SpotStories from './Spot.stories';
 import { Spot } from './Spot';
+import { Box } from '../Utility';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Components/Spot' of={SpotStories} />
 
@@ -93,12 +94,12 @@ function MyComponent() {
 }
 ```
 
-### Custom Styling
+### Layout Adjustments with lx
 
-While the component comes with predefined styles, you can extend them using Tailwind classes:
+Use the `lx` prop for layout adjustments like margins or positioning:
 
 ```tsx
-<Spot appearance='icon' icon={Settings} className='mt-4 ml-2' />
+<Spot appearance='icon' icon={Settings} lx={{ marginTop: 's16', marginLeft: 's8' }} />
 ```
 
 ### With Icons
@@ -106,17 +107,16 @@ While the component comes with predefined styles, you can extend them using Tail
 The Spot component supports custom icons through the discriminated union type system:
 
 ```tsx
-import { Spot } from '@ledgerhq/lumen-ui-rnative';
+import { Spot, Box } from '@ledgerhq/lumen-ui-rnative';
 import { Settings, Heart, Star } from '@ledgerhq/lumen-ui-rnative/symbols';
-import { View } from 'react-native';
 
 function MyComponent() {
   return (
-    <View className='flex gap-4'>
+    <Box lx={{ flexDirection: 'row', gap: 's16' }}>
       <Spot appearance='icon' icon={Settings} />
       <Spot appearance='icon' icon={Heart} />
       <Spot appearance='icon' icon={Star} />
-    </View>
+    </Box>
   );
 }
 ```
@@ -126,16 +126,15 @@ function MyComponent() {
 The Spot component can display numeric values from 0-9:
 
 ```tsx
-import { Spot } from '@ledgerhq/lumen-ui-rnative';
-import { View } from 'react-native';
+import { Spot, Box } from '@ledgerhq/lumen-ui-rnative';
 
 function MyComponent() {
   return (
-    <View className='flex gap-4'>
+    <Box lx={{ flexDirection: 'row', gap: 's16' }}>
       <Spot appearance='number' number={1} />
       <Spot appearance='number' number={2} />
       <Spot appearance='number' number={3} />
-    </View>
+    </Box>
   );
 }
 ```
@@ -145,12 +144,11 @@ function MyComponent() {
 Spot is designed for status indication with predefined appearances:
 
 ```tsx
-import { Spot } from '@ledgerhq/lumen-ui-rnative';
-import { View } from 'react-native';
+import { Spot, Box } from '@ledgerhq/lumen-ui-rnative';
 
 function StatusIndicators() {
   return (
-    <View className='flex gap-4'>
+    <Box lx={{ flexDirection: 'row', gap: 's16' }}>
       {/* Success state */}
       <Spot appearance='check' />
 
@@ -168,14 +166,14 @@ function StatusIndicators() {
 
       {/* Connectivity */}
       <Spot appearance='bluetooth' />
-    </View>
+    </Box>
   );
 }
 ```
 
 ## Do's and Don'ts
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use required props for discriminated types'
@@ -257,7 +255,6 @@ import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 {/* prettier-ignore */}
 ```tsx
 <Spot appearance='check' onPress={handlePress} />
-<Spot appearance='error' className='cursor-pointer' />
 ```
 
     </DontBlockItem>
@@ -265,7 +262,7 @@ import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 </Tab>
 </CustomTabs>