@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.45

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

@@ -1,15 +1,25 @@
 import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen, fireEvent } from '@testing-library/react-native';
 
 import { Settings, Plus } from '../../Symbols';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { InteractiveIcon } from './InteractiveIcon';
 
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
 describe('InteractiveIcon Component', () => {
   it('should render correctly with children icon', () => {
-    render(
+    renderWithProvider(
       <InteractiveIcon
         iconType='filled'
-        aria-label='Settings'
+        accessibilityLabel='Settings'
         testID='icon-button'
       >
         <Settings size={20} />
@@ -20,10 +30,10 @@ describe('InteractiveIcon Component', () => {
   });
 
   it('should render with filled iconType variant', () => {
-    render(
+    renderWithProvider(
       <InteractiveIcon
         iconType='filled'
-        aria-label='Add item'
+        accessibilityLabel='Add item'
         testID='filled-icon'
       >
         <Plus size={20} />
@@ -35,10 +45,10 @@ describe('InteractiveIcon Component', () => {
   });
 
   it('should render with stroked iconType variant', () => {
-    render(
+    renderWithProvider(
       <InteractiveIcon
         iconType='stroked'
-        aria-label='Settings'
+        accessibilityLabel='Settings'
         testID='stroked-icon'
       >
         <Settings size={20} />
@@ -50,10 +60,10 @@ describe('InteractiveIcon Component', () => {
   });
 
   it('should have correct accessibility label', () => {
-    render(
+    renderWithProvider(
       <InteractiveIcon
         iconType='filled'
-        aria-label='Open menu'
+        accessibilityLabel='Open menu'
         testID='menu-icon'
       >
         <Settings size={20} />
@@ -64,10 +74,10 @@ describe('InteractiveIcon Component', () => {
   });
 
   it('should be disabled when the disabled prop is true', () => {
-    render(
+    renderWithProvider(
       <InteractiveIcon
         iconType='filled'
-        aria-label='Disabled button'
+        accessibilityLabel='Disabled button'
         disabled
         testID='disabled-icon'
       >
@@ -80,10 +90,10 @@ describe('InteractiveIcon Component', () => {
 
   it('should call the onPress handler when pressed', () => {
     const handlePress = jest.fn();
-    render(
+    renderWithProvider(
       <InteractiveIcon
         iconType='filled'
-        aria-label='Pressable'
+        accessibilityLabel='Pressable'
         onPress={handlePress}
         testID='pressable-icon'
       >
@@ -99,10 +109,10 @@ describe('InteractiveIcon Component', () => {
 
   it('should not call the onPress handler when disabled', () => {
     const handlePress = jest.fn();
-    render(
+    renderWithProvider(
       <InteractiveIcon
         iconType='filled'
-        aria-label='Disabled'
+        accessibilityLabel='Disabled'
         onPress={handlePress}
         disabled
         testID='disabled-pressable'
@@ -119,10 +129,10 @@ describe('InteractiveIcon Component', () => {
 
   it('should call the onLongPress handler when long pressed', () => {
     const handleLongPress = jest.fn();
-    render(
+    renderWithProvider(
       <InteractiveIcon
         iconType='stroked'
-        aria-label='Long pressable'
+        accessibilityLabel='Long pressable'
         onLongPress={handleLongPress}
         testID='long-pressable-icon'
       >
@@ -138,10 +148,10 @@ describe('InteractiveIcon Component', () => {
 
   it('should apply custom style', () => {
     const customStyle = { marginTop: 8 };
-    render(
+    renderWithProvider(
       <InteractiveIcon
         iconType='filled'
-        aria-label='Custom'
+        accessibilityLabel='Custom'
         style={customStyle}
         testID='custom-icon'
       >
@@ -149,6 +159,7 @@ describe('InteractiveIcon Component', () => {
       </InteractiveIcon>,
     );
     const buttonElement = screen.getByTestId('custom-icon');
-    expect(buttonElement.props.style).toEqual(customStyle);
+    // Style is merged as an array [resolvedStyle, customStyle]
+    expect(buttonElement.props.style).toMatchObject(customStyle);
   });
 });

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

@@ -1,36 +1,50 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
-import { FC } from 'react';
-import { Pressable, View } from 'react-native';
-import { InjectStylesIntoChildren } from '../../utils';
+import { FC, PropsWithChildren } from 'react';
+import { View } from 'react-native';
+import { LumenStyleSheet, mergeStyles } from '../../../styles';
+
+import { InjectStylesIntoChildren } from '../../utils/components/InjectStylesIntoChildren';
+import { Pressable } from '../Utility';
 import { InteractiveIconProps } from './types';
 
-const buttonVariants = cva(
-  'inline-flex size-fit items-center justify-center rounded-full',
-  {
-    variants: {
-      iconType: {
-        filled: '',
-        stroked: 'bg-base-transparent',
-      },
-      pressed: {
-        true: '',
-        false: '',
-      },
-      disabled: {
-        true: 'bg-disabled',
-        false: '',
-      },
+type IconType = InteractiveIconProps['iconType'];
+
+const useStyles = ({
+  iconType,
+  pressed,
+  disabled,
+}: {
+  iconType: IconType;
+  pressed: boolean;
+  disabled: boolean;
+}) => {
+  return LumenStyleSheet.useCreate(
+    (t) => {
+      const backgroundStyle = {
+        filled: { backgroundColor: t.colors.bg.base },
+        stroked: { backgroundColor: t.colors.bg.baseTransparent },
+      };
+
+      return {
+        container: mergeStyles(
+          {
+            borderRadius: t.borderRadius.full,
+          },
+          backgroundStyle[iconType],
+          iconType === 'stroked' &&
+            pressed && { backgroundColor: t.colors.bg.baseTransparentPressed },
+        ),
+        icon: {
+          color: disabled
+            ? t.colors.text.disabled
+            : pressed
+              ? t.colors.text.mutedPressed
+              : t.colors.text.muted,
+        },
+      };
     },
-    compoundVariants: [
-      {
-        iconType: 'stroked',
-        pressed: true,
-        className: 'bg-base-transparent-pressed',
-      },
-    ],
-  },
-);
+    [iconType, pressed, disabled],
+  );
+};
 
 /**
  * A specialized interactive component designed specifically for displaying pressable icons.
@@ -52,12 +66,12 @@ const buttonVariants = cva(
  * import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
  * // Filled interactive icon for destructive actions
- * <InteractiveIcon iconType="filled" aria-label="Delete item" onPress={handleDelete}>
+ * <InteractiveIcon iconType="filled" accessibilityLabel="Delete item" onPress={handleDelete}>
  *   <DeleteCircleFill size={20} />
  * </InteractiveIcon>
  *
  * // Stroked interactive icon for secondary actions
- * <InteractiveIcon iconType="stroked" aria-label="Open settings" onPress={handleSettings}>
+ * <InteractiveIcon iconType="stroked" accessibilityLabel="Open settings" onPress={handleSettings}>
  *   <Settings size={20} />
  * </InteractiveIcon>
  */
@@ -65,28 +79,47 @@ export const InteractiveIcon: FC<InteractiveIconProps> = ({
   iconType,
   children,
   disabled = false,
+  style,
+  lx,
   ...props
 }) => {
   return (
     <Pressable
+      lx={lx}
+      style={[style, { alignItems: 'center', justifyContent: 'center' }]}
       accessibilityRole='button'
       accessibilityState={{ disabled: !!disabled }}
       disabled={disabled}
       {...props}
     >
-      {({ pressed }) => {
-        const iconStyles = cn(
-          pressed ? 'text-muted-pressed' : 'text-muted',
-          disabled && 'text-disabled',
-        );
-        return (
-          <View className={cn(buttonVariants({ iconType, pressed, disabled }))}>
-            <InjectStylesIntoChildren styles={iconStyles}>
-              {children}
-            </InjectStylesIntoChildren>
-          </View>
-        );
-      }}
+      {({ pressed }) => (
+        <InteractiveIconContent
+          iconType={iconType}
+          pressed={pressed}
+          disabled={!!disabled}
+        >
+          {children}
+        </InteractiveIconContent>
+      )}
     </Pressable>
   );
 };
+
+const InteractiveIconContent: FC<
+  PropsWithChildren<{
+    iconType: IconType;
+    pressed: boolean;
+    disabled: boolean;
+  }>
+> = ({ iconType, pressed, disabled, children }) => {
+  const styles = useStyles({ iconType, pressed, disabled });
+
+  return (
+    <View style={styles.container}>
+      <InjectStylesIntoChildren style={styles.icon}>
+        {children}
+      </InjectStylesIntoChildren>
+    </View>
+  );
+};
+InteractiveIcon.displayName = 'InteractiveIcon';

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { PressableProps } from 'react-native';
+import { PropsWithChildren } from 'react';
+import { StyledPressableProps } from '../../../styles';
 
 export type InteractiveIconProps = {
   /**
@@ -7,8 +7,5 @@ export type InteractiveIconProps = {
    * Choose 'filled' for icons with solid backgrounds or 'stroked' for outlined icons.
    */
   iconType: 'filled' | 'stroked';
-  /**
-   * The icon component to display inside the button. Should be a single icon element from the design system.
-   */
-  children: ReactNode;
-} & PressableProps;
+} & PropsWithChildren &
+  Omit<StyledPressableProps, 'children'>;

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

@@ -52,21 +52,11 @@ The `underline` prop controls text decoration independently from appearance (def
 
 Links come in two size options:
 
-- **sm**: Small size with **body-2-semi-bold** typography
-- **md** (default): Medium size with **body-1-semi-bold** typography
+- **sm**: Small size
+- **md** (default): Medium size
 
 <Canvas of={LinkStories.SizesShowcase} />
 
-> **⚠️ Important**: Icon sizes are automatically managed by the Link component based on the selected size. Never override the icon size using className or style props, as this will break the visual consistency of the design system. The Link component ensures proper scaling and alignment of icons across all sizes.
->
-> ```tsx
-> // ✅ Correct: Let Link handle icon sizing
-> <Link size="sm" icon={ArrowRight} href="https://example.com">Continue</Link>
->
-> // ❌ Wrong: Don't override icon size [it's not gonna work even if you try]
-> <Link size="sm" icon={ArrowRight} className="w-6 h-6" href="https://example.com">Continue</Link>
-> ```
-
 ### States
 
 Links respond to press interactions with visual feedback:
@@ -108,12 +98,12 @@ function MyComponent() {
 
 ### 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 for layout purposes:
 
 ```tsx
 <Link
   href='https://example.com'
-  className='mt-4' // Custom margin top
+  lx={{ marginTop: 's4' }}
 >
   Custom Link
 </Link>
@@ -270,7 +260,7 @@ import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
   <DoVsDontRow>
     <DoBlockItem
       title='Use underline prop to control text decoration'
-      description='Use the underline prop instead of className for text decoration'
+      description='Use the underline prop instead of lx for text decoration'
     >
 
 {/* prettier-ignore */}
@@ -282,13 +272,13 @@ import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
 
     </DoBlockItem>
     <DontBlockItem
-      title="Don't use className for underline"
-      description='Avoid using className to control underline decoration'
+      title="Don't use lx to fake underline"
+      description='Avoid using lx with borderBottom to mimic underline styling'
     >
 
 {/* prettier-ignore */}
 ```tsx
-<Link className='underline' href='https://example.com'>
+<Link style={{ textDecorationLine: 'underline' }} href='https://example.com'>
   Link without underline
 </Link>
 ```

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { View, Text } from 'react-native';
 import { Settings, Information, ArrowRight } from '../../Symbols';
+import { Box, Text } from '../Utility';
 import { Link } from './Link';
 
 const meta: Meta<typeof Link> = {
@@ -160,7 +160,7 @@ export const AppearanceShowcase: Story = {
     ];
 
     return (
-      <View className='flex-row gap-32 p-8'>
+      <Box lx={{ flexDirection: 'row', gap: 's32', padding: 's8' }}>
         {appearances.map(({ name, appearance }) => (
           <Link
             key={appearance}
@@ -173,14 +173,14 @@ export const AppearanceShowcase: Story = {
             {name}
           </Link>
         ))}
-      </View>
+      </Box>
     );
   },
 };
 
 export const UnderlineShowcase: Story = {
   render: () => (
-    <View className='flex-col gap-16 p-8'>
+    <Box lx={{ flexDirection: 'column', gap: 's16', padding: 's8' }}>
       <Link appearance='accent' size='md' href='https://ledger.com'>
         With underline
       </Link>
@@ -192,14 +192,21 @@ export const UnderlineShowcase: Story = {
       >
         Without underline
       </Link>
-    </View>
+    </Box>
   ),
 };
 
 export const SizesShowcase: Story = {
   render: () => (
-    <View className='flex-col gap-16'>
-      <View className='flex-row items-center gap-32 p-8'>
+    <Box lx={{ flexDirection: 'column', gap: 's16' }}>
+      <Box
+        lx={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 's32',
+          padding: 's8',
+        }}
+      >
         <Link
           appearance='base'
           size='sm'
@@ -218,8 +225,15 @@ export const SizesShowcase: Story = {
         >
           Medium
         </Link>
-      </View>
-      <View className='flex-row items-center gap-32 p-8'>
+      </Box>
+      <Box
+        lx={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 's32',
+          padding: 's8',
+        }}
+      >
         <Link
           appearance='accent'
           size='sm'
@@ -238,27 +252,44 @@ export const SizesShowcase: Story = {
         >
           Medium Accent
         </Link>
-      </View>
-    </View>
+      </Box>
+    </Box>
   ),
 };
 
 export const StatesShowcase: Story = {
   render: () => (
-    <View className='flex-row items-center gap-16 p-8'>
+    <Box
+      lx={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 's16',
+        padding: 's8',
+      }}
+    >
       <Link appearance='base' href='https://ledger.com'>
         Default
       </Link>
       <Link appearance='accent' href='https://ledger.com' icon={ArrowRight}>
         With Icon
       </Link>
-    </View>
+    </Box>
   ),
 };
 
 export const ResponsiveLayout: Story = {
   render: () => (
-    <View className='w-256 flex-col gap-8 rounded-sm bg-muted p-8'>
+    <Box
+      lx={{
+        width: 's256',
+        flexDirection: 'column',
+        gap: 's8',
+        borderRadius: 'sm',
+        borderColor: 'mutedSubtle',
+        borderWidth: 's1',
+        padding: 's8',
+      }}
+    >
       <Link underline href='https://ledger.com'>
         Short Link
       </Link>
@@ -274,7 +305,7 @@ export const ResponsiveLayout: Story = {
       >
         Base with long text that is cut off
       </Link>
-    </View>
+    </Box>
   ),
 };
 
@@ -286,7 +317,7 @@ export const WithCustomNavigation: Story = {
     };
 
     return (
-      <View className='flex-col gap-16 p-8'>
+      <Box lx={{ flexDirection: 'column', gap: 's16', padding: 's8' }}>
         <Link appearance='base' size='md' onPress={handlePress}>
           Navigate to Dashboard
         </Link>
@@ -298,7 +329,7 @@ export const WithCustomNavigation: Story = {
         >
           Continue to Next Screen
         </Link>
-      </View>
+      </Box>
     );
   },
   parameters: {
@@ -339,8 +370,8 @@ function MyComponent() {
 
 export const InTextUsage: Story = {
   render: () => (
-    <View className='flex-col gap-32 p-8'>
-      <Text className='text-base body-2'>
+    <Box lx={{ flexDirection: 'column', gap: 's32', padding: 's8' }}>
+      <Text typography='body2' lx={{ color: 'base' }}>
         By continuing, you agree to our{' '}
         <Link appearance='base' size='sm' href='https://ledger.com/terms'>
           Terms & Conditions
@@ -352,14 +383,14 @@ export const InTextUsage: Story = {
         .
       </Text>
 
-      <Text className='text-interactive body-1-semi-bold'>
+      <Text typography='body1SemiBold' lx={{ color: 'interactive' }}>
         Need help?{' '}
         <Link appearance='accent' size='md' href='https://ledger.com/support'>
           Contact Support
         </Link>
       </Text>
 
-      <Text className='text-base body-1-semi-bold'>
+      <Text typography='body1SemiBold' lx={{ color: 'base' }}>
         Already have an account?{' '}
         <Link
           appearance='accent'
@@ -370,14 +401,14 @@ export const InTextUsage: Story = {
           Sign in
         </Link>
       </Text>
-    </View>
+    </Box>
   ),
   parameters: {
     docs: {
       source: {
         code: `
 // Links within text content
-<Text className='text-base body-2'>
+<Text typography='body2' lx={{ color: 'base' }}>
   By continuing, you agree to our{' '}
   <Link appearance='base' size='sm' href='https://ledger.com/terms'>
     Terms & Conditions
@@ -389,7 +420,7 @@ export const InTextUsage: Story = {
 </Text>
 
 // Heading with inline link
-<Text className='text-interactive body-1-semi-bold'>
+<Text typography='body1SemiBold' lx={{ color: 'interactive' }}>
   Need help?{' '}
   <Link appearance='accent' size='md' href='https://ledger.com/support'>
     Contact Support
@@ -397,7 +428,7 @@ export const InTextUsage: Story = {
 </Text>
 
 // Bold text with ununderlined link
-<Text className='text-base body-1-semi-bold'>
+<Text typography='body1SemiBold' lx={{ color: 'base' }}>
   Already have an account?{' '}
   <Link
     appearance='accent'