@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/src/lib/Components/Select/Select.mdx

@@ -23,7 +23,7 @@ The Select component provides a dropdown interface for choosing from a list of o
 
 ## Anatomy
 
-> **Layout:** The Select component takes the full width of its container by default. You can control the width directly using `className` or by wrapping in a container.
+> **Layout:** The Select component takes the full width of its container by default. You can control the width directly using `lx` prop or by wrapping in a container.
 
 The Select component consists of several sub-components:
 
@@ -292,19 +292,23 @@ Use the `disabled` prop to prevent user interaction:
 
 ### With Custom Styling
 
-While the component comes with predefined styles, you can extend them using NativeWind classes:
+While the component comes with predefined styles, you can extend them using the `lx` prop:
 
 ```tsx
-<Select value={value} onValueChange={setValue}>
-  <SelectTrigger label='Choose an option' className='max-w-md'>
-    <SelectValue className='heading-0' />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value='option1'>
-      <SelectItemText>Option 1</SelectItemText>
-    </SelectItem>
-  </SelectContent>
-</Select>
+import { Box } from '@ledgerhq/lumen-ui-rnative';
+
+<Box lx={{ maxWidth: 's320' }}>
+  <Select value={value} onValueChange={setValue}>
+    <SelectTrigger label='Choose an option'>
+      <SelectValue />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value='option1'>
+        <SelectItemText>Option 1</SelectItemText>
+      </SelectItem>
+    </SelectContent>
+  </Select>
+</Box>
 ```
 
 ## Do's and Don'ts
@@ -425,14 +429,14 @@ const [value, setValue] = useState('');
 
 ### Layout and Styling
 
-The Select component takes the **full width** of its parent container by default. You can control the width using `className` (preferred) or wrapper containers:
+The Select component takes the **full width** of its parent container by default. You can control the width using `lx` prop or wrapper containers:
 
 ✅ **Do**
 
 ```tsx
-// Preferred: Direct width control
+// Preferred: Direct width control with lx
 <Select value={value} onValueChange={setValue}>
-  <SelectTrigger label='Option' className='max-w-md'>
+  <SelectTrigger label='Option' lx={{ maxWidth: 's320' }}>
     <SelectValue />
   </SelectTrigger>
   <SelectContent>
@@ -442,9 +446,9 @@ The Select component takes the **full width** of its parent container by default
   </SelectContent>
 </Select>
 
-// Use className for margins and positioning
+// Use lx for margins and positioning
 <Select value={value} onValueChange={setValue}>
-  <SelectTrigger label='Option' className='mt-4 mx-auto'>
+  <SelectTrigger label='Option' lx={{ marginTop: 's16', marginHorizontal: 'auto' }}>
     <SelectValue />
   </SelectTrigger>
   <SelectContent>
@@ -455,7 +459,7 @@ The Select component takes the **full width** of its parent container by default
 </Select>
 
 // Alternative: Container wrapper
-<View className='max-w-md'>
+<Box lx={{ maxWidth: 's320' }}>
   <Select value={value} onValueChange={setValue}>
     <SelectTrigger label='Option'>
       <SelectValue />
@@ -466,14 +470,14 @@ The Select component takes the **full width** of its parent container by default
       </SelectItem>
     </SelectContent>
   </Select>
-</View>
+</Box>
 ```
 
 ❌ **Don't**
 
 ```tsx
-// Don't use inline styles when className is available
-<SelectTrigger label='Option' style={{ maxWidth: 300 }}>
+// Don't use style prop for token-based values (use lx instead)
+<SelectTrigger label='Option' style={{ maxWidth: 320 }}>
   <SelectValue />
 </SelectTrigger>
 ```
@@ -495,9 +499,9 @@ The Select component takes the **full width** of its parent container by default
   </SelectContent>
 </Select>
 
-// Use labelClassName for label styling
+// Labels automatically float when a value is selected
 <Select value={value} onValueChange={setValue}>
-  <SelectTrigger label='Important' labelClassName='text-accent'>
+  <SelectTrigger label='Important'>
     <SelectValue />
   </SelectTrigger>
   <SelectContent>
@@ -523,8 +527,8 @@ The Select component takes the **full width** of its parent container by default
   </SelectContent>
 </Select>
 
-// Don't use className to style labels (use labelClassName instead)
-<SelectTrigger label='Option' className='text-accent'>
+// Don't use style prop to modify core appearance
+<SelectTrigger label='Option' style={{ backgroundColor: 'red' }}>
   <SelectValue />
 </SelectTrigger>
 ```

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
-import { View } from 'react-native';
+import { Box } from '../Utility';
 import { GlobalSelectBottomSheet } from './GlobalSelectBottomSheet';
 import {
   Select,
@@ -27,6 +27,9 @@ const meta: Meta<typeof Select> = {
     SelectSeparator,
   },
   title: 'Selection/Select',
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
@@ -38,8 +41,15 @@ export const Base: Story = {
 
     return (
       <>
-        <View className='flex min-h-400 items-center justify-center p-24'>
-          <View className='w-full max-w-320'>
+        <Box
+          style={{
+            flex: 1,
+            minHeight: 400,
+            padding: 24,
+            width: '100%',
+          }}
+        >
+          <Box style={{ width: '100%', maxWidth: 400 }}>
             <Select value={value} onValueChange={setValue}>
               <SelectTrigger label='Choose a fruit'>
                 <SelectValue />
@@ -62,8 +72,8 @@ export const Base: Story = {
                 </SelectItem>
               </SelectContent>
             </Select>
-          </View>
-        </View>
+          </Box>
+        </Box>
         <GlobalSelectBottomSheet />
       </>
     );
@@ -76,8 +86,15 @@ export const WithGroups: Story = {
 
     return (
       <>
-        <View className='flex min-h-400 items-center justify-center p-24'>
-          <View className='w-full max-w-320'>
+        <Box
+          style={{
+            flex: 1,
+            minHeight: 400,
+            padding: 24,
+            width: '100%',
+          }}
+        >
+          <Box style={{ width: '100%', maxWidth: 400 }}>
             <Select value={value} onValueChange={setValue}>
               <SelectTrigger label='Select cryptocurrency'>
                 <SelectValue />
@@ -107,8 +124,8 @@ export const WithGroups: Story = {
                 </SelectGroup>
               </SelectContent>
             </Select>
-          </View>
-        </View>
+          </Box>
+        </Box>
         <GlobalSelectBottomSheet />
       </>
     );
@@ -121,8 +138,15 @@ export const WithDisabledItems: Story = {
 
     return (
       <>
-        <View className='flex min-h-400 items-center justify-center p-24'>
-          <View className='w-full max-w-320'>
+        <Box
+          style={{
+            flex: 1,
+            minHeight: 400,
+            padding: 24,
+            width: '100%',
+          }}
+        >
+          <Box style={{ width: '100%', maxWidth: 400 }}>
             <Select value={value} onValueChange={setValue}>
               <SelectTrigger label='Select option'>
                 <SelectValue />
@@ -145,8 +169,8 @@ export const WithDisabledItems: Story = {
                 </SelectItem>
               </SelectContent>
             </Select>
-          </View>
-        </View>
+          </Box>
+        </Box>
         <GlobalSelectBottomSheet />
       </>
     );
@@ -159,8 +183,15 @@ export const DisabledSelect: Story = {
 
     return (
       <>
-        <View className='flex min-h-400 items-center justify-center p-24'>
-          <View className='w-full max-w-320'>
+        <Box
+          style={{
+            flex: 1,
+            minHeight: 400,
+            padding: 24,
+            width: '100%',
+          }}
+        >
+          <Box style={{ width: '100%', maxWidth: 400 }}>
             <Select value={value} onValueChange={setValue} disabled>
               <SelectTrigger label='Disabled select'>
                 <SelectValue />
@@ -177,8 +208,8 @@ export const DisabledSelect: Story = {
                 </SelectItem>
               </SelectContent>
             </Select>
-          </View>
-        </View>
+          </Box>
+        </Box>
         <GlobalSelectBottomSheet />
       </>
     );
@@ -191,8 +222,15 @@ export const WithChangeCallback: Story = {
 
     return (
       <>
-        <View className='flex min-h-400 items-center justify-center p-24'>
-          <View className='w-full max-w-320'>
+        <Box
+          style={{
+            flex: 1,
+            minHeight: 400,
+            padding: 24,
+            width: '100%',
+          }}
+        >
+          <Box style={{ width: '100%', maxWidth: 400 }}>
             <Select
               value={value}
               onValueChange={(newValue) => {
@@ -218,8 +256,8 @@ export const WithChangeCallback: Story = {
                 </SelectItem>
               </SelectContent>
             </Select>
-          </View>
-        </View>
+          </Box>
+        </Box>
         <GlobalSelectBottomSheet />
       </>
     );

package/src/lib/Components/Select/Select.test.tsx

@@ -1,6 +1,8 @@
 import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
 import React from 'react';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { GlobalSelectBottomSheet } from './GlobalSelectBottomSheet';
 import { GlobalSelectProvider } from './GlobalSelectContext';
 import {
@@ -13,10 +15,12 @@ import {
 } from './Select';
 
 const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <GlobalSelectProvider>
-    {children}
-    <GlobalSelectBottomSheet />
-  </GlobalSelectProvider>
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    <GlobalSelectProvider>
+      {children}
+      <GlobalSelectBottomSheet />
+    </GlobalSelectProvider>
+  </ThemeProvider>
 );
 
 describe('Select', () => {

package/src/lib/Components/Select/Select.tsx

@@ -1,14 +1,10 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
 import React, { useState, useEffect, useCallback, useId } from 'react';
-import { View, Text, Pressable } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import { StyleSheet, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { ChevronDown } from '../../Symbols';
 import { useControllableState, extractTextFromChildren } from '../../utils';
 import { SlotPressable } from '../Slot';
+import { Box, Pressable, Text } from '../Utility';
 import { useSelectActions } from './GlobalSelectContext';
 import { SelectContextProvider, useSelectSafeContext } from './SelectContext';
 import type {
@@ -23,10 +19,6 @@ import type {
   SelectContentItem,
 } from './types';
 
-const triggerStyles = cn(
-  'group relative h-48 bg-muted rounded-sm px-16 flex-row items-center justify-between',
-);
-
 /**
  * The root component that manages a select's state.
  *
@@ -122,13 +114,11 @@ export const Select: React.FC<SelectProps> = ({
 };
 Select.displayName = 'Select';
 
-const AnimatedLabel = Animated.createAnimatedComponent(Animated.Text);
-
 export const SelectTrigger: React.FC<SelectTriggerProps> = ({
   children,
-  className,
+  lx,
+  style,
   label,
-  labelClassName,
   asChild = false,
   disabled: triggerDisabled,
   ...props
@@ -174,79 +164,136 @@ export const SelectTrigger: React.FC<SelectTriggerProps> = ({
   ]);
 
   const hasValue = value !== undefined && value !== '';
-  const isFloatingLabel = hasValue;
-
-  const labelFontSize = useSharedValue(hasValue ? 10 : 14);
-  const labelTop = useSharedValue(hasValue ? 10 : 16);
-
-  const animatedLabelStyle = useAnimatedStyle(
-    () => ({
-      fontSize: labelFontSize.value,
-      top: labelTop.value,
-    }),
-    [],
-  );
-
-  useEffect(() => {
-    labelFontSize.value = withTiming(isFloatingLabel ? 10 : 14, {
-      duration: 200,
-    });
-    labelTop.value = withTiming(isFloatingLabel ? 10 : 16, {
-      duration: 200,
-    });
-  }, [isFloatingLabel, labelFontSize, labelTop]);
+  const styles = useTriggerStyles({
+    disabled: !!disabled,
+    hasValue,
+    hasLabel: !!finalLabel,
+  });
 
   const Comp = asChild ? SlotPressable : Pressable;
 
   return (
     <Comp
+      lx={lx}
+      style={[styles.trigger, style]}
       disabled={disabled}
       onPress={handlePress}
-      className={cn(triggerStyles, disabled && 'opacity-50', className)}
       {...props}
     >
       {finalLabel && (
-        <AnimatedLabel
-          className={cn(
-            'absolute left-16 text-muted w-full',
-            disabled && 'text-disabled',
-            labelClassName,
-          )}
-          style={animatedLabelStyle}
-          numberOfLines={1}
-        >
+        <Text style={styles.label} numberOfLines={1}>
           {finalLabel}
-        </AnimatedLabel>
+        </Text>
       )}
-      <View
-        className={cn(
-          'flex-1',
-          finalLabel && hasValue && 'pt-16 pb-2',
-          finalLabel && !hasValue && 'py-0',
-        )}
-      >
-        {children}
-      </View>
-      <ChevronDown
-        size={20}
-        className={cn('text-muted ml-8', disabled && 'text-disabled')}
-      />
+      <View style={styles.contentWrapper}>{children}</View>
+      <ChevronDown size={20} style={styles.chevron} />
     </Comp>
   );
 };
+
+const useTriggerStyles = ({
+  disabled,
+  hasValue,
+  hasLabel,
+}: {
+  disabled: boolean;
+  hasValue: boolean;
+  hasLabel: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      return {
+        trigger: StyleSheet.flatten([
+          {
+            position: 'relative',
+            width: t.sizes.full,
+            height: t.sizes.s48,
+            backgroundColor: t.colors.bg.muted,
+            borderRadius: t.borderRadius.sm,
+            paddingHorizontal: t.spacings.s16,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          },
+          disabled && {
+            opacity: 0.5,
+          },
+        ]),
+        label: StyleSheet.flatten([
+          t.typographies.body2,
+          {
+            position: 'absolute',
+            left: t.spacings.s16,
+            color: t.colors.text.muted,
+            width: '100%',
+          },
+          hasValue
+            ? {
+                top: t.spacings.s6,
+                ...t.typographies.body4,
+              }
+            : {
+                top: t.spacings.s14,
+                ...t.typographies.body2,
+              },
+          disabled && {
+            color: t.colors.text.disabled,
+          },
+        ]),
+        contentWrapper: StyleSheet.flatten([
+          {
+            flex: 1,
+          },
+          hasLabel &&
+            hasValue && {
+              paddingTop: t.spacings.s16,
+              paddingBottom: t.spacings.s2,
+            },
+          hasLabel &&
+            !hasValue && {
+              paddingVertical: 0,
+            },
+        ]),
+        chevron: StyleSheet.flatten([
+          {
+            flexShrink: 0,
+            color: t.colors.text.muted,
+            marginLeft: t.spacings.s8,
+          },
+          disabled && {
+            color: t.colors.text.disabled,
+          },
+        ]),
+      };
+    },
+    [disabled, hasValue, hasLabel],
+  );
+};
+
 SelectTrigger.displayName = 'SelectTrigger';
 
 /**
  * Displays the current selected value
  */
-export const SelectValue: React.FC<{
-  className?: string;
-}> = ({ className }) => {
+export const SelectValue: React.FC = () => {
   const { value, items } = useSelectSafeContext({
     consumerName: 'SelectValue',
     contextRequired: true,
   });
 
+  const styles = useStyleSheet(
+    (t) => ({
+      text: StyleSheet.flatten([
+        t.typographies.body2,
+        {
+          color: t.colors.text.base,
+          textAlign: 'left',
+        },
+      ]),
+    }),
+    [],
+  );
+
   const selectedItem = items.find(
     (item) => item.type === 'item' && item.value === value,
   );
@@ -256,10 +303,7 @@ export const SelectValue: React.FC<{
   }
 
   return (
-    <Text
-      className={cn('truncate text-left text-base body-2', className)}
-      numberOfLines={1}
-    >
+    <Text style={styles.text} numberOfLines={1} ellipsizeMode='tail'>
       {selectedItem.label}
     </Text>
   );
@@ -325,30 +369,52 @@ SelectContent.displayName = 'SelectContent';
 
 export const SelectGroup: React.FC<SelectGroupProps> = ({
   children,
-  className,
+  lx,
+  style,
   ...props
 }) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      group: {
+        width: t.sizes.full,
+        gap: t.spacings.s4,
+      },
+    }),
+    [],
+  );
+
   return (
-    <View className={cn('flex w-full gap-4', className)} {...props}>
+    <Box lx={lx} style={[styles.group, style]} {...props}>
       {children}
-    </View>
+    </Box>
   );
 };
 SelectGroup.displayName = 'SelectGroup';
 
 export const SelectLabel: React.FC<SelectLabelProps> = ({
   children,
-  className,
+  lx,
+  style,
   ...props
 }) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      label: StyleSheet.flatten([
+        t.typographies.body3SemiBold,
+        {
+          paddingHorizontal: t.spacings.s8,
+          paddingBottom: 0,
+          paddingTop: t.spacings.s8,
+          color: t.colors.text.muted,
+          marginBottom: t.spacings.s4,
+        },
+      ]),
+    }),
+    [],
+  );
+
   return (
-    <Text
-      className={cn(
-        'px-8 pb-0 pt-8 text-muted body-3-semi-bold mb-4',
-        className,
-      )}
-      {...props}
-    >
+    <Text lx={lx} style={[styles.label, style]} {...props}>
       {children}
     </Text>
   );
@@ -368,11 +434,24 @@ SelectItem.displayName = 'SelectItem';
 
 export const SelectItemText: React.FC<SelectItemTextProps> = ({
   children,
-  className,
+  lx,
+  style,
   ...props
 }) => {
+  const styles = useStyleSheet(
+    (t) => ({
+      text: StyleSheet.flatten([
+        t.typographies.body2,
+        {
+          color: t.colors.text.base,
+        },
+      ]),
+    }),
+    [],
+  );
+
   return (
-    <Text className={cn('text-base body-2', className)} {...props}>
+    <Text lx={lx} style={[styles.text, style]} {...props}>
       {children}
     </Text>
   );
@@ -380,14 +459,22 @@ export const SelectItemText: React.FC<SelectItemTextProps> = ({
 SelectItemText.displayName = 'SelectItemText';
 
 export const SelectSeparator: React.FC<SelectSeparatorProps> = ({
-  className,
+  lx,
+  style,
   ...props
 }) => {
-  return (
-    <View
-      className={cn('mx-8 my-4 h-1 bg-muted-subtle', className)}
-      {...props}
-    />
+  const styles = useStyleSheet(
+    (t) => ({
+      separator: {
+        marginHorizontal: t.spacings.s8,
+        marginVertical: t.spacings.s4,
+        height: t.sizes.s1,
+        backgroundColor: t.colors.border.mutedSubtle,
+      },
+    }),
+    [],
   );
+
+  return <Box lx={lx} style={[styles.separator, style]} {...props} />;
 };
 SelectSeparator.displayName = 'SelectSeparator';