@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.47

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

@@ -1,9 +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 { 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 {
@@ -18,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.
  *
@@ -119,9 +116,9 @@ Select.displayName = 'Select';
 
 export const SelectTrigger: React.FC<SelectTriggerProps> = ({
   children,
-  className,
+  lx,
+  style,
   label,
-  labelClassName,
   asChild = false,
   disabled: triggerDisabled,
   ...props
@@ -167,59 +164,136 @@ export const SelectTrigger: React.FC<SelectTriggerProps> = ({
   ]);
 
   const hasValue = value !== undefined && value !== '';
-  const isFloatingLabel = hasValue;
+  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 && (
-        <Text
-          className={cn(
-            'absolute left-16 text-muted w-full transition-all duration-200',
-            isFloatingLabel ? 'top-6 body-4' : 'top-14 body-2',
-            disabled && 'text-disabled',
-            labelClassName,
-          )}
-          numberOfLines={1}
-        >
+        <Text style={styles.label} numberOfLines={1}>
           {finalLabel}
         </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,
   );
@@ -229,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>
   );
@@ -298,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>
   );
@@ -341,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>
   );
@@ -353,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';

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>