@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

package/src/lib/Components/Checkbox/Checkbox.tsx

@@ -1,26 +1,13 @@
-import { cva } from 'class-variance-authority';
 import React from 'react';
-
-import { View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { Check } from '../../Symbols';
 import { useControllableState } from '../../utils';
 import { Label } from '../Label';
+import { Box } from '../Utility';
 import { BaseCheckboxIndicator, BaseCheckboxRoot } from './BaseCheckbox';
 
 import { CheckboxProps } from './types';
 
-const checkboxVariants = {
-  root: cva(['flex flex-row items-center gap-8']),
-  icon: cva('shrink-0', {
-    variants: {
-      disabled: {
-        true: 'text-disabled',
-        false: 'text-black',
-      },
-    },
-  }),
-};
-
 /**
  * The checkbox follows the design system tokens and supports checked, unchecked,
  * disabled, and focus states with proper hover and active interactions.
@@ -28,11 +15,11 @@ const checkboxVariants = {
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-checkbox--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-checkbox--docs#dos-and-donts Guidelines}
  *
- * @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 checkbox's core appearance.
  *
  * @example
- * import { Checkbox } from '@ledgerhq/lumen-ui-react';
+ * import { Checkbox } from '@ledgerhq/lumen-ui-rnative';
  *
  * // Basic controlled checkbox
  * const [checked, setChecked] = useState(false);
@@ -46,12 +33,13 @@ const checkboxVariants = {
  * <Checkbox defaultChecked={true} onCheckedChange={handleChange} />
  */
 export const Checkbox = React.forwardRef<
-  React.ElementRef<typeof BaseCheckboxRoot>,
+  React.ElementRef<typeof Box>,
   CheckboxProps
 >(
   (
     {
-      className,
+      lx,
+      style,
       checked: checkedProp,
       onCheckedChange: onCheckedChangeProp,
       defaultChecked = false,
@@ -67,17 +55,17 @@ export const Checkbox = React.forwardRef<
       defaultProp: defaultChecked,
     });
 
+    const styles = useStyles({ disabled });
+
     return (
-      <View className={checkboxVariants.root({ className })}>
+      <Box ref={ref} lx={lx} style={[styles.root, style]} {...props}>
         <BaseCheckboxRoot
-          ref={ref}
           disabled={disabled}
           checked={checked}
           onCheckedChange={onCheckedChange}
-          {...props}
         >
           <BaseCheckboxIndicator>
-            <Check size={16} className={checkboxVariants.icon({ disabled })} />
+            <Check size={16} style={styles.icon} />
           </BaseCheckboxIndicator>
         </BaseCheckboxRoot>
         {label && (
@@ -85,9 +73,28 @@ export const Checkbox = React.forwardRef<
             {label}
           </Label>
         )}
-      </View>
+      </Box>
     );
   },
 );
 
+const useStyles = ({ disabled }: { disabled: boolean }) => {
+  return useStyleSheet(
+    (t) => {
+      return {
+        root: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: t.spacings.s8,
+        },
+        icon: {
+          flexShrink: 0,
+          color: disabled ? t.colors.text.disabled : t.colors.text.black,
+        },
+      };
+    },
+    [disabled],
+  );
+};
+
 Checkbox.displayName = 'Checkbox';

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

@@ -1,4 +1,4 @@
-import { SlottablePressableProps } from '../../types';
+import { StyledViewProps } from '../../../styles';
 
 export type CheckboxProps = {
   /**
@@ -21,4 +21,4 @@ export type CheckboxProps = {
    * The label of the checkbox.
    */
   label?: React.ReactNode;
-} & SlottablePressableProps;
+} & StyledViewProps;

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

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
-import { View } from 'react-native';
-import { LumenStyleSheet } from '../../../styles';
+import { useTheme } from '../../../styles';
 import * as Icons from '../../Symbols';
-import { Search } from '../Search/Search';
+import { SearchInput } from '../SearchInput/SearchInput';
 import { Box, Text, Pressable } from '../Utility';
 import type { IconSize } from './types';
 
@@ -31,7 +30,7 @@ type IconCardProps = {
 };
 
 const IconCard = ({ name, size = 24, color }: IconCardProps) => {
-  const { theme } = LumenStyleSheet.useTheme();
+  const { theme } = useTheme();
   const [copied, setCopied] = useState(false);
   const IconComponent = Icons[name as keyof typeof Icons];
   const iconColor = color ?? theme.colors.text.base;
@@ -57,7 +56,7 @@ const IconCard = ({ name, size = 24, color }: IconCardProps) => {
         gap: 's8',
         borderRadius: 'sm',
         padding: 's16',
-        width: 's144',
+        width: 's96',
       }}
       style={({ pressed }) => ({
         backgroundColor: pressed ? theme.colors.bg.mutedPressed : 'transparent',
@@ -68,23 +67,23 @@ const IconCard = ({ name, size = 24, color }: IconCardProps) => {
         {name}
       </Text>
       {copied && (
-        <View
-          style={{
+        <Box
+          lx={{
             position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
+            top: 's0',
+            left: 's0',
+            right: 's0',
+            bottom: 's0',
             alignItems: 'center',
             justifyContent: 'center',
-            borderRadius: theme.borderRadius.sm,
-            backgroundColor: theme.colors.bg.muted,
+            borderRadius: 'sm',
+            backgroundColor: 'muted',
           }}
         >
           <Text typography='body4' lx={{ color: 'onAccent' }}>
             Copied!
           </Text>
-        </View>
+        </Box>
       )}
     </Pressable>
   );
@@ -112,7 +111,7 @@ export const Icon: StoryObj<IconStoryProps> = {
     },
   },
   render: (args) => {
-    const { theme } = LumenStyleSheet.useTheme();
+    const { theme } = useTheme();
     const IconComponent = Icons[args.name];
     const iconColor = args.color ?? theme.colors.text.base;
 
@@ -138,7 +137,7 @@ export const Icon: StoryObj<IconStoryProps> = {
 
 export const IconSizes: StoryObj = {
   render: () => {
-    const { theme } = LumenStyleSheet.useTheme();
+    const { theme } = useTheme();
 
     return (
       <Box lx={{ flexDirection: 'column', gap: 's16' }}>
@@ -151,9 +150,9 @@ export const IconSizes: StoryObj = {
               lx={{
                 flexDirection: 'row',
                 flexWrap: 'wrap',
-                gap: 's16',
+                gap: 's8',
                 borderRadius: 'sm',
-                padding: 's16',
+                padding: 's8',
               }}
               style={{
                 borderWidth: 1,
@@ -185,7 +184,7 @@ export const Gallery: StoryObj = {
     layout: 'fullscreen',
   },
   render: () => {
-    const { theme } = LumenStyleSheet.useTheme();
+    const { theme } = useTheme();
     const [searchTerm, setSearchTerm] = useState('');
 
     // Filter icons based on search term
@@ -205,7 +204,7 @@ export const Gallery: StoryObj = {
         {/* Search bar */}
         <Box lx={{ marginBottom: 's32' }}>
           <Box lx={{ marginBottom: 's8', maxWidth: 's320' }}>
-            <Search
+            <SearchInput
               placeholder='Search icons...'
               value={searchTerm}
               onChangeText={setSearchTerm}

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

@@ -54,12 +54,12 @@ describe('Icon', () => {
 
   it('should apply color from style prop', () => {
     renderWithProvider(
-      <Icon viewBox='0 0 24 24' testID='icon' style={{ color: '#ff0000' }}>
+      <Icon viewBox='0 0 24 24' testID='icon' color='error'>
         <Path d='M12 2L2 7l10 5 10-5-10-5z' />
       </Icon>,
     );
 
-    expect(screen.getByTestId('icon').props.color).toBe('#ff0000');
+    expect(screen.getByTestId('icon').props.color).toBe('#fca6a7');
   });
 
   it('should forward ref and spread additional props', () => {

package/src/lib/Components/Icon/Icon.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useMemo } from 'react';
-import { StyleSheet } from 'react-native';
 import { Svg } from 'react-native-svg';
-import { LumenStyleSheet } from '../../../styles';
+import { useResolveTextStyle, useTheme } from '../../../styles';
+import { TextProps } from '../Utility';
 import { IconProps, IconSize } from './types';
 
 const iconSizeMap = {
@@ -14,31 +14,41 @@ const iconSizeMap = {
   56: 's56',
 } as const;
 
-const useStyles = (size: IconSize) => {
-  const { theme } = LumenStyleSheet.useTheme();
-  return useMemo(
-    () => ({
-      width: theme.icon.width[iconSizeMap[size]],
-      height: theme.icon.height[iconSizeMap[size]],
-      strokeWidth: theme.icon.borderWidth[iconSizeMap[size]],
-    }),
-    [size, theme],
-  );
+const useStyles = (
+  lx: TextProps['lx'],
+  size: IconSize,
+  color: IconProps['color'],
+) => {
+  const { theme } = useTheme();
+  const resolvedStyle = useResolveTextStyle(lx || {});
+  const resolvedColor = useResolveTextStyle({ color });
+
+  return useMemo(() => {
+    return {
+      container: {
+        ...resolvedStyle,
+        width: theme.icon.width[iconSizeMap[size]],
+        height: theme.icon.height[iconSizeMap[size]],
+        strokeWidth: theme.icon.borderWidth[iconSizeMap[size]],
+      },
+      color:
+        resolvedColor.color || resolvedStyle.color || theme.colors.text.base,
+    };
+  }, [size, theme, resolvedStyle, resolvedColor.color]);
 };
 
 export const Icon = forwardRef<Svg, IconProps>(
-  ({ size = 24, style, children, viewBox, ...props }, ref) => {
-    const styles = useStyles(size);
-    const flatStyle = StyleSheet.flatten(style);
+  ({ size = 24, color, lx = {}, children, viewBox, ...props }, ref) => {
+    const styles = useStyles(lx, size, color);
 
     return (
       <Svg
         ref={ref}
-        width={styles.width}
-        height={styles.height}
-        strokeWidth={styles.strokeWidth}
+        width={styles.container.width}
+        height={styles.container.height}
+        strokeWidth={styles.container.strokeWidth}
         viewBox={viewBox}
-        color={flatStyle?.color ?? 'currentColor'}
+        color={styles.color}
         fill='none'
         pointerEvents='none'
         {...props}

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

@@ -1,5 +1,6 @@
-import { StyleProp, ViewStyle } from 'react-native';
 import { SvgProps } from 'react-native-svg';
+import { LumenTextStyle } from '../../../styles';
+import { TextProps } from '../Utility';
 
 export type IconSize = 12 | 16 | 20 | 24 | 40 | 48 | 56;
 
@@ -9,11 +10,12 @@ export type IconProps = {
    */
   size?: IconSize;
   /**
-   * Style object to apply to the icon (supports color via color property).
+   * The color of the icon.
    */
-  style?: StyleProp<ViewStyle & { color?: string }>;
+  color?: LumenTextStyle['color'];
   /**
    * The children of the icon.
    */
-  children: React.ReactNode;
-} & Omit<SvgProps, 'style'>;
+  children?: React.ReactNode;
+} & TextProps &
+  Omit<SvgProps, 'style'>;

package/src/lib/Components/IconButton/IconButton.mdx

@@ -3,7 +3,7 @@ import * as IconButtonStories from './IconButton.stories';
 import { IconButton } from './IconButton';
 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';
 import { Box } from '../Utility';
 
 <Meta title='Action/IconButton' of={IconButtonStories} />

package/src/lib/Components/InteractiveIcon/InteractiveIcon.mdx

@@ -1,9 +1,10 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as InteractiveIconStories from './InteractiveIcon.stories';
+import { Box } from '../Utility';
 import { InteractiveIcon } from './InteractiveIcon';
 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/InteractiveIcon' of={InteractiveIconStories} />
 
@@ -54,7 +55,7 @@ Common sizes include:
 - **24px**: Prominent actions in toolbars
 - **40px**: Large touch targets for mobile interfaces
 
-> **⚠️ Important**: Icon sizes are controlled by the icon component itself, not through CSS classes. Always use the `size` prop on your icon component (e.g., `<Settings size={20} />`) to ensure proper scaling and visual consistency.
+> **⚠️ Important**: Icon sizes are controlled by the icon component itself, not through InteractiveIcon.
 
 ### Icon States
 
@@ -177,6 +178,11 @@ function SizeExamples() {
       <InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
         <Settings size={40} />
       </InteractiveIcon>
+      
+      {/* Large touch target for mobile */}
+      <InteractiveIcon iconType='stroked' accessibilityLabel='Settings'>
+        <Settings size={64} />
+      </InteractiveIcon>
     </Box>
   );
 }
@@ -186,7 +192,7 @@ function SizeExamples() {
 
 The following guidelines are based on our design system principles and accessibility best practices for icon-only interactive elements.
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use appropriate icon types for variants'
@@ -302,7 +308,7 @@ import { MoreVertical } from '@ledgerhq/lumen-ui-rnative/symbols';
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-native';
-import { LUMEN_VIEW_STYLE_PROPS } from '../../../styles/resolveStyle/resolveConfig';
 import {
   Settings,
   PenEdit,
@@ -20,9 +19,6 @@ const meta: Meta<typeof InteractiveIcon> = {
         type: 'code',
       },
     },
-    controls: {
-      exclude: Array.from(LUMEN_VIEW_STYLE_PROPS),
-    },
   },
   argTypes: {
     children: {

package/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx

@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
-import { View } from 'react-native';
-import { LumenStyleSheet, mergeStyles } from '../../../styles';
+import { StyleSheet, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 
 import { InjectStylesIntoChildren } from '../../utils/components/InjectStylesIntoChildren';
 import { Pressable } from '../Utility';
@@ -17,7 +17,7 @@ const useStyles = ({
   pressed: boolean;
   disabled: boolean;
 }) => {
-  return LumenStyleSheet.useCreate(
+  return useStyleSheet(
     (t) => {
       const backgroundStyle = {
         filled: { backgroundColor: t.colors.bg.base },
@@ -25,14 +25,14 @@ const useStyles = ({
       };
 
       return {
-        container: mergeStyles(
+        container: StyleSheet.flatten([
           {
             borderRadius: t.borderRadius.full,
           },
           backgroundStyle[iconType],
           iconType === 'stroked' &&
             pressed && { backgroundColor: t.colors.bg.baseTransparentPressed },
-        ),
+        ]),
         icon: {
           color: disabled
             ? t.colors.text.disabled

package/src/lib/Components/Label/Label.tsx

@@ -1,17 +1,19 @@
-import { cva } from 'class-variance-authority';
 import React, { forwardRef } from 'react';
-import { Text } from 'react-native';
-import { cn } from '../../utils';
+import { useStyleSheet } from '../../../styles';
+import { Text } from '../Utility';
 import { LabelProps } from './types';
 
-const labelVariants = cva(['body-2'], {
-  variants: {
-    disabled: {
-      true: 'text-disabled',
-      false: 'text-base',
-    },
-  },
-});
+const useStyles = ({ disabled }: { disabled: boolean }) => {
+  return useStyleSheet(
+    (t) => ({
+      label: {
+        color: disabled ? t.colors.text.disabled : t.colors.text.base,
+        ...t.typographies.body2,
+      },
+    }),
+    [disabled],
+  );
+};
 
 /**
  * A label that should be used to describe a form field.
@@ -21,16 +23,27 @@ const labelVariants = cva(['body-2'], {
  */
 export const Label = forwardRef<React.ElementRef<typeof Text>, LabelProps>(
   (
-    { className, disabled = false, children, onPress, onLongPress, ...props },
+    {
+      style,
+      lx = {},
+      disabled = false,
+      children,
+      onPress,
+      onLongPress,
+      ...props
+    },
     ref,
   ) => {
+    const styles = useStyles({ disabled });
+
     return (
       <Text
+        lx={lx}
         ref={ref}
+        style={[styles.label, style]}
         disabled={disabled}
         onPress={disabled ? undefined : onPress}
         onLongPress={disabled ? undefined : onLongPress}
-        className={cn(labelVariants({ disabled }), className)}
         {...props}
       >
         {children}

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

@@ -1,8 +1,8 @@
-import { TextProps } from 'react-native';
+import { TextProps } from '../Utility';
 
 export type LabelProps = {
   /**
    * The disabled state of the label.
    */
   disabled?: boolean;
-} & TextProps;
+} & Omit<TextProps, 'typography'>;

package/src/lib/Components/Link/Link.mdx

@@ -3,7 +3,7 @@ import * as LinkStories from './Link.stories';
 import { Link } from './Link';
 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/Link' of={LinkStories} />
 
@@ -192,7 +192,7 @@ The Link component is built on React Native's `Pressable` and accepts all its pr
 
 The following guidelines are based on our design system principles. These decisions were made to ensure consistency, maintainability, and proper implementation of our design system principles.
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Keep underline for base appearance'
@@ -254,37 +254,6 @@ import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
 ```
 
     </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use underline prop to control text decoration'
-      description='Use the underline prop instead of lx for text decoration'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Link underline={false} href='https://example.com'>
-  Link without underline
-</Link>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use lx to fake underline"
-      description='Avoid using lx with borderBottom to mimic underline styling'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Link style={{ textDecorationLine: 'underline' }} href='https://example.com'>
-  Link without underline
-</Link>
-```
-
-    </DontBlockItem>
-
   </DoVsDontRow>
 
   <DoVsDontRow>
@@ -318,7 +287,7 @@ import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 ## Platform Considerations
 

package/src/lib/Components/Link/Link.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Linking, Text, View } from 'react-native';
-import { LumenStyleSheet, mergeStyles } from '../../../styles';
+import { Linking, StyleSheet, Text, View } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { ExternalLink } from '../../Symbols';
 import { IconSize } from '../Icon';
 import { Pressable } from '../Utility';
@@ -22,7 +22,7 @@ type StyleParams = {
 };
 
 const useStyles = ({ appearance, size, underline, pressed }: StyleParams) => {
-  return LumenStyleSheet.useCreate(
+  return useStyleSheet(
     (t) => {
       const textColors: Record<Appearance, string> = {
         base: t.colors.text.base,
@@ -49,12 +49,15 @@ const useStyles = ({ appearance, size, underline, pressed }: StyleParams) => {
         textWrapper: {
           flexShrink: 1,
         },
-        text: mergeStyles(typography, {
-          color: pressed
-            ? pressedTextColors[appearance]
-            : textColors[appearance],
-          textDecorationLine: underline ? 'underline' : 'none',
-        }),
+        text: StyleSheet.flatten([
+          typography,
+          {
+            color: pressed
+              ? pressedTextColors[appearance]
+              : textColors[appearance],
+            textDecorationLine: underline ? 'underline' : 'none',
+          },
+        ]),
         icon: {
           flexShrink: 0,
           color: pressed