@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.47

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

@@ -1,6 +1,6 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
 import React, { useCallback, useEffect } from 'react';
-import { View, Text, Pressable } from 'react-native';
+import { Pressable } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { Check } from '../../Symbols';
 import {
   BottomSheet,
@@ -8,8 +8,54 @@ import {
   BottomSheetView,
   useBottomSheetRef,
 } from '../BottomSheet';
+import { Box, Text } from '../Utility';
 import { useGlobalSelectSafeContext } from './GlobalSelectContext';
 
+const useStyles = () => {
+  return useStyleSheet(
+    (t) => ({
+      bottomSheetView: {
+        paddingHorizontal: t.spacings.s8,
+      },
+      separator: {
+        marginVertical: t.spacings.s4,
+        marginHorizontal: t.spacings.s8,
+        height: 1,
+        backgroundColor: t.colors.bg.muted,
+      },
+      groupLabel: {
+        marginBottom: t.spacings.s4,
+        paddingHorizontal: t.spacings.s8,
+        paddingTop: t.spacings.s8,
+        color: t.colors.text.muted,
+        ...t.typographies.body3SemiBold,
+      },
+      item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: t.borderRadius.sm,
+        padding: t.spacings.s8,
+        backgroundColor: t.colors.bg.baseTransparent,
+      },
+      itemPressed: {
+        backgroundColor: t.colors.bg.baseTransparentPressed,
+      },
+      itemDisabled: {
+        opacity: 0.5,
+      },
+      itemLabel: {
+        flex: 1,
+        color: t.colors.text.base,
+        ...t.typographies.body2,
+      },
+      itemLabelDisabled: {
+        color: t.colors.text.disabled,
+      },
+    }),
+    [],
+  );
+};
+
 /**
  * BottomSheet component that displays select options.
  * This should be placed at the root level inside GestureHandlerRootView.
@@ -30,6 +76,7 @@ import { useGlobalSelectSafeContext } from './GlobalSelectContext';
  */
 export const GlobalSelectBottomSheet: React.FC = () => {
   const bottomSheetRef = useBottomSheetRef();
+  const styles = useStyles();
   /**
    * This is the only component that subscribes to currentSelect
    * All other components use refs to avoid re-renders
@@ -73,7 +120,7 @@ export const GlobalSelectBottomSheet: React.FC = () => {
       enableDynamicSizing
       enablePanDownToClose
     >
-      <BottomSheetView className='!px-8'>
+      <BottomSheetView style={styles.bottomSheetView}>
         {currentSelect && (
           <>
             {currentSelect.label && (
@@ -82,24 +129,16 @@ export const GlobalSelectBottomSheet: React.FC = () => {
                 appearance='compact'
               />
             )}
-            <View className='gap-4'>
+            <Box lx={{ gap: 's4' }}>
               {currentSelect.items.map((item, index) => {
                 if (item.type === 'separator') {
                   return (
-                    <View
-                      key={`separator-${index}`}
-                      className={cn('my-4 mx-8 h-1 bg-muted')}
-                    />
+                    <Box key={`separator-${index}`} style={styles.separator} />
                   );
                 }
                 if (item.type === 'group-label') {
                   return (
-                    <Text
-                      key={`label-${index}`}
-                      className={cn(
-                        'mb-4 px-8 pt-8 pb-0 text-muted body-3-semi-bold',
-                      )}
-                    >
+                    <Text key={`label-${index}`} style={styles.groupLabel}>
                       {item.label}
                     </Text>
                   );
@@ -112,31 +151,29 @@ export const GlobalSelectBottomSheet: React.FC = () => {
                     onPress={() => handleSelectItem(item.value)}
                   >
                     {({ pressed }) => (
-                      <View
-                        className={cn(
-                          'flex-row items-center rounded-sm p-8 bg-base-transparent',
-                          pressed && 'bg-base-transparent-pressed',
-                          item.disabled && 'opacity-50',
-                        )}
+                      <Box
+                        style={[
+                          styles.item,
+                          pressed && styles.itemPressed,
+                          item.disabled && styles.itemDisabled,
+                        ]}
                       >
                         <Text
-                          className={cn(
-                            'flex-1 text-base body-2',
-                            item.disabled && 'text-disabled',
-                          )}
+                          style={[
+                            styles.itemLabel,
+                            item.disabled && styles.itemLabelDisabled,
+                          ]}
                           numberOfLines={1}
                         >
                           {item.label}
                         </Text>
-                        {isSelected && (
-                          <Check size={24} className='text-active' />
-                        )}
-                      </View>
+                        {isSelected && <Check size={24} color='active' />}
+                      </Box>
                     )}
                   </Pressable>
                 );
               })}
-            </View>
+            </Box>
           </>
         )}
       </BottomSheetView>

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 />
       </>
     );