@ledgerhq/lumen-ui-rnative 0.0.43 → 0.0.45

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { Banner } from '../Banner';
-import { TextInput } from './TextInput';
+import { useState } from 'react';
+import { View } from 'react-native';
+import { TextInput, type TextInputProps } from './TextInput';
 
 const meta: Meta<typeof TextInput> = {
   component: TextInput,
@@ -14,25 +15,140 @@ const meta: Meta<typeof TextInput> = {
       },
     },
   },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Floating label text',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when input is empty',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message to display below input',
+    },
+    editable: {
+      control: 'boolean',
+      description: 'Whether the input is editable',
+    },
+    hideClearButton: {
+      control: 'boolean',
+      description: 'Hide the clear button',
+    },
+    keyboardType: {
+      control: 'select',
+      options: ['default', 'email-address', 'numeric', 'phone-pad', 'url'],
+      description: 'Keyboard type for input',
+    },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof TextInput>;
 
-export const WebPreviewWarning: Story = {
-  render: () => (
-    <Banner
-      appearance='warning'
-      title='Unsupported previews on web'
-      description='For this component, previewing stories is currently only supported on mobile. Reanimated causes compatibility issues with the web preview, so for now, please test on-device. We plan to add screenshots or embed Expo Snack in the future.'
+const TextInputStory = (args: TextInputProps & { initialValue?: string }) => {
+  const [value, setValue] = useState(args.initialValue ?? '');
+
+  return (
+    <View className='flex min-h-400 items-center justify-center p-24'>
+      <View className='w-full max-w-320'>
+        <TextInput
+          {...args}
+          value={value}
+          onChangeText={setValue}
+          onClear={args.onClear}
+        />
+      </View>
+    </View>
+  );
+};
+
+export const Base: Story = {
+  render: (args) => <TextInputStory {...args} />,
+  args: {
+    label: 'Username',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const WithContent: Story = {
+  render: (args) => <TextInputStory {...args} initialValue='johndoe' />,
+  args: {
+    label: 'Username',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <TextInputStory {...args} initialValue='ab' />,
+  args: {
+    label: 'Username',
+    errorMessage: 'Username must be at least 3 characters',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const DisabledTextInput: Story = {
+  render: (args) => <TextInputStory {...args} initialValue='johndoe' />,
+  args: {
+    label: 'Username',
+    editable: false,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const WithHiddenClearButton: Story = {
+  render: (args) => (
+    <TextInputStory {...args} initialValue='Content with hidden clear' />
+  ),
+  args: {
+    label: 'Label',
+    editable: true,
+    hideClearButton: true,
+    keyboardType: 'default',
+  },
+};
+
+export const WithClearCallback: Story = {
+  render: (args) => (
+    <TextInputStory
+      {...args}
+      initialValue='Click clear to see callback'
+      onClear={() => alert('Input cleared!')}
     />
   ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '⚠️ This component requires testing on a physical device or emulator due to Reanimated compatibility issues with web previews.',
-      },
-    },
+  args: {
+    label: 'Label',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const EmailKeyboard: Story = {
+  render: (args) => <TextInputStory {...args} />,
+  args: {
+    label: 'Email',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'email-address',
+  },
+};
+
+export const PhoneKeyboard: Story = {
+  render: (args) => <TextInputStory {...args} />,
+  args: {
+    label: 'Phone Number',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'phone-pad',
   },
 };

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

@@ -1,19 +1,30 @@
 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 { Text } from 'react-native';
 
 import { Settings } from '../../Symbols';
 import { Spot } from '../Spot';
 import { Tag } from '../Tag';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Tile } from './Tile';
 
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
 describe('Tile Component', () => {
   const mockSpot = <Spot appearance='icon' icon={Settings} />;
   const mockTitle = 'Test Item';
 
   it('should render correctly with required props', () => {
     const { getByText, getByTestId } = render(
-      <Tile leadingContent={mockSpot} title={mockTitle} testID='tile' />,
+      <TestWrapper>
+        <Tile leadingContent={mockSpot} title={mockTitle} testID='tile' />
+      </TestWrapper>,
     );
 
     expect(getByTestId('tile')).toBeTruthy();
@@ -23,12 +34,14 @@ describe('Tile Component', () => {
   it('should render description when provided', () => {
     const description = 'Test description';
     const { getByText } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        description={description}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          description={description}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     expect(getByText(mockTitle)).toBeTruthy();
@@ -37,7 +50,9 @@ describe('Tile Component', () => {
 
   it('should render without description when not provided', () => {
     const { getByText, queryByText } = render(
-      <Tile leadingContent={mockSpot} title={mockTitle} testID='tile' />,
+      <TestWrapper>
+        <Tile leadingContent={mockSpot} title={mockTitle} testID='tile' />
+      </TestWrapper>,
     );
 
     expect(getByText(mockTitle)).toBeTruthy();
@@ -49,12 +64,14 @@ describe('Tile Component', () => {
     const tagText = 'Test Tag';
     const mockTag = <Tag label={tagText} />;
     const { getByText } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        trailingContent={mockTag}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          trailingContent={mockTag}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     expect(getByText(mockTitle)).toBeTruthy();
@@ -65,12 +82,14 @@ describe('Tile Component', () => {
     const trailingText = 'Custom Trailing';
     const mockTrailing = <Text testID='custom-trailing'>{trailingText}</Text>;
     const { getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        trailingContent={mockTrailing}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          trailingContent={mockTrailing}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     expect(getByTestId('custom-trailing')).toBeTruthy();
@@ -79,12 +98,14 @@ describe('Tile Component', () => {
   it('should call onPress handler when pressed', () => {
     const handlePress = jest.fn();
     const { getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        onPress={handlePress}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          onPress={handlePress}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     fireEvent.press(getByTestId('tile'));
@@ -94,7 +115,9 @@ describe('Tile Component', () => {
 
   it('should not call onPress when not provided', () => {
     const { getByTestId } = render(
-      <Tile leadingContent={mockSpot} title={mockTitle} testID='tile' />,
+      <TestWrapper>
+        <Tile leadingContent={mockSpot} title={mockTitle} testID='tile' />
+      </TestWrapper>,
     );
 
     // Should not throw error when pressing without onPress handler
@@ -106,12 +129,14 @@ describe('Tile Component', () => {
   it('should call onLongPress handler when long pressed', () => {
     const handleLongPress = jest.fn();
     const { getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        onLongPress={handleLongPress}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          onLongPress={handleLongPress}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     fireEvent(getByTestId('tile'), 'onLongPress');
@@ -123,13 +148,15 @@ describe('Tile Component', () => {
     const handlePress = jest.fn();
     const handleLongPress = jest.fn();
     const { getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        onPress={handlePress}
-        onLongPress={handleLongPress}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          onPress={handlePress}
+          onLongPress={handleLongPress}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     fireEvent.press(getByTestId('tile'));
@@ -144,7 +171,9 @@ describe('Tile Component', () => {
   it('should forward testID prop to Pressable', () => {
     const testId = 'custom-tile-id';
     const { getByTestId } = render(
-      <Tile leadingContent={mockSpot} title={mockTitle} testID={testId} />,
+      <TestWrapper>
+        <Tile leadingContent={mockSpot} title={mockTitle} testID={testId} />
+      </TestWrapper>,
     );
 
     expect(getByTestId(testId)).toBeTruthy();
@@ -152,12 +181,14 @@ describe('Tile Component', () => {
 
   it('should forward additional Pressable props', () => {
     const { getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        testID='tile'
-        disabled={true}
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          testID='tile'
+          disabled={true}
+        />
+      </TestWrapper>,
     );
 
     const pressable = getByTestId('tile');
@@ -167,12 +198,14 @@ describe('Tile Component', () => {
   it('should support custom accessibility label', () => {
     const customLabel = 'Custom accessibility label';
     const { getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        testID='tile'
-        accessibilityLabel={customLabel}
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          testID='tile'
+          accessibilityLabel={customLabel}
+        />
+      </TestWrapper>,
     );
 
     const pressable = getByTestId('tile');
@@ -184,7 +217,9 @@ describe('Tile Component', () => {
       <Text testID='custom-leading'>Custom Leading Content</Text>
     );
     const { getByTestId } = render(
-      <Tile leadingContent={customLeading} title={mockTitle} testID='tile' />,
+      <TestWrapper>
+        <Tile leadingContent={customLeading} title={mockTitle} testID='tile' />
+      </TestWrapper>,
     );
 
     expect(getByTestId('custom-leading')).toBeTruthy();
@@ -196,15 +231,17 @@ describe('Tile Component', () => {
     const mockTag = <Tag label={tagText} />;
 
     const { getByText, getByTestId } = render(
-      <Tile
-        leadingContent={mockSpot}
-        title={mockTitle}
-        description={description}
-        trailingContent={mockTag}
-        onPress={jest.fn()}
-        onLongPress={jest.fn()}
-        testID='tile'
-      />,
+      <TestWrapper>
+        <Tile
+          leadingContent={mockSpot}
+          title={mockTitle}
+          description={description}
+          trailingContent={mockTag}
+          onPress={jest.fn()}
+          onLongPress={jest.fn()}
+          testID='tile'
+        />
+      </TestWrapper>,
     );
 
     expect(getByTestId('tile')).toBeTruthy();

package/src/lib/Components/Tile/Tile.tsx

@@ -6,19 +6,65 @@ import { TileProps } from './types';
 
 const tileVariants = {
   root: cva(
-    [
-      'relative flex w-full items-center gap-8 p-8',
-      'rounded-sm bg-base-transparent text-base transition-colors',
-    ],
+    ['relative flex w-full items-center gap-8 p-8', 'rounded-sm text-base'],
     {
       variants: {
+        appearance: {
+          'no-background': 'bg-base-transparent',
+          card: 'bg-surface',
+        },
         pressed: {
-          true: 'bg-base-transparent-pressed',
-          false: 'bg-base-transparent',
+          true: '',
+          false: '',
+        },
+        disabled: {
+          true: '',
+          false: '',
+        },
+      },
+      compoundVariants: [
+        {
+          appearance: 'no-background',
+          pressed: true,
+          disabled: false,
+          className: 'bg-base-transparent-pressed',
+        },
+        {
+          appearance: 'card',
+          pressed: true,
+          disabled: false,
+          className: 'bg-surface-pressed',
         },
+      ],
+      defaultVariants: {
+        appearance: 'no-background',
+        pressed: false,
+        disabled: false,
       },
     },
   ),
+  title: cva('w-full truncate text-center body-3-semi-bold', {
+    variants: {
+      disabled: {
+        true: 'text-disabled',
+        false: 'text-base',
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+    },
+  }),
+  description: cva('w-full overflow-hidden truncate text-center body-3', {
+    variants: {
+      disabled: {
+        true: 'text-disabled',
+        false: 'text-muted',
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+    },
+  }),
 };
 
 /**
@@ -49,6 +95,8 @@ export const Tile: FC<TileProps> = forwardRef<PressableRef, TileProps>(
       description,
       leadingContent,
       trailingContent,
+      appearance = 'no-background',
+      disabled = false,
       onPress,
       onLongPress,
       ...props
@@ -60,26 +108,29 @@ export const Tile: FC<TileProps> = forwardRef<PressableRef, TileProps>(
         ref={ref}
         onPress={onPress}
         onLongPress={onLongPress}
+        disabled={disabled}
         {...props}
       >
         {({ pressed }) => (
-          <View className={tileVariants.root({ pressed })}>
-            <View className='flex w-full items-center gap-8'>
-              <View className='flex items-center justify-center'>
+          <View
+            className={tileVariants.root({ appearance, pressed, disabled })}
+          >
+            <View className='w-full items-center gap-8'>
+              <View className='items-center justify-center'>
                 {leadingContent}
               </View>
-              <View className='flex w-full items-center gap-4'>
-                <View className='flex w-full items-center'>
+              <View className='w-full items-center gap-4'>
+                <View className='w-full items-center'>
                   <Text
                     numberOfLines={1}
-                    className='w-full truncate text-center text-base body-3-semi-bold'
+                    className={tileVariants.title({ disabled })}
                   >
                     {title}
                   </Text>
                   {description && (
                     <Text
                       numberOfLines={1}
-                      className='w-full overflow-hidden truncate text-center text-muted body-3'
+                      className={tileVariants.description({ disabled })}
                     >
                       {description}
                     </Text>

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

@@ -20,6 +20,19 @@ export type TileProps = {
    * Accepts ReactNode such as <Tag label="New" appearance="base" />
    */
   trailingContent?: ReactNode;
+  /**
+   * The visual style of the tile.
+   * - `no-background`: Transparent background with pressed state
+   * - `card`: Surface background with pressed state
+   * @default 'no-background'
+   */
+  appearance?: 'no-background' | 'card';
+  /**
+   * Whether the tile is disabled.
+   * When disabled, the tile will not respond to press events and will appear dimmed.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Callback function when the tile is pressed.
    */
@@ -29,4 +42,4 @@ export type TileProps = {
    * Can be used to perform secondary actions.
    */
   onLongPress?: PressableProps['onLongPress'];
-} & Omit<PressableProps, 'onPress' | 'onLongPress'>;
+} & Omit<PressableProps, 'onPress' | 'onLongPress' | 'disabled'>;

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

@@ -53,7 +53,7 @@ export const WithCustomContent: Story = {
                   Ut enim ad minim veniam, quis nostrud exercitation ullamco
                   laboris nisi ut aliquip ex ea commodo consequat.
                 </Text>
-                <Button size='xs' appearance='accent'>
+                <Button size='sm' appearance='accent'>
                   Custom tooltip action
                 </Button>
               </View>
@@ -92,7 +92,7 @@ export const WithMultipleTooltips: Story = {
 
         <Tooltip>
           <TooltipTrigger asChild>
-            <InteractiveIcon iconType='filled' aria-label='Info'>
+            <InteractiveIcon iconType='filled' accessibilityLabel='Info'>
               <Information />
             </InteractiveIcon>
           </TooltipTrigger>

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

@@ -1,16 +1,20 @@
 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 { Text, View } from 'react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { GlobalTooltipBottomSheet } from './GlobalTooltipBottomSheet';
 import { GlobalTooltipProvider } from './GlobalTooltipContext';
 import { Tooltip, TooltipTrigger, TooltipContent } from './Tooltip';
 
 const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <GlobalTooltipProvider>
-    {children}
-    <GlobalTooltipBottomSheet />
-  </GlobalTooltipProvider>
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    <GlobalTooltipProvider>
+      {children}
+      <GlobalTooltipBottomSheet />
+    </GlobalTooltipProvider>
+  </ThemeProvider>
 );
 
 describe('Tooltip', () => {

package/src/lib/Components/{Box → Utility/Box}/Box.mdx

@@ -1,11 +1,16 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as BoxStories from './Box.stories';
+import { CustomTabs, Tab } from '../../../../../.storybook/components';
 
 <Meta title='Utility/Box' of={BoxStories} />
 
 # Box
 
-Box is a utility primitive that wraps React Native's `View` component with token-constrained style props from the design system theme.
+<CustomTabs>
+  <Tab label="Overview ">
+Box is a utility primitive that wraps React Native's `View` component with token-constrained style props from the design system theme.  
+
+Box exposes the `lx` property to consume tokens from the `ledgerLiveTheme`, see [lx documentation](/?path=/docs/style-system-lx--docs).
 
 ## Interactive Example
 
@@ -20,10 +25,12 @@ import { Box, Text } from '@ledgerhq/lumen-ui-rnative';
 function Card() {
   return (
     <Box
-      padding='s16'
-      backgroundColor='accent'
-      borderRadius='md'
-      gap='s8'
+      lx={{
+        padding: 's16',
+        backgroundColor: 'accent',
+        borderRadius: 'md',
+        gap: 's8',
+      }}
     >
       <Text>Card content</Text>
     </Box>
@@ -31,18 +38,13 @@ function Card() {
 }
 ```
 
-## Theme Tokens
-
-Box consumes tokens from the `ledgerLiveTheme` for spacing, sizes, colors, and border radius.
-
 ## Escape Hatch
 
 For values not covered by tokens, use raw numbers or the `style` prop:
 
 ```tsx
-// Raw number for one-off values
-<Box width={127} marginTop='s4' />
-
 // Style prop for complete override
-<Box marginTop='s4' style={{ width: 127 }} />
+<Box lx={{ marginTop: 's4' }} style={{ width: 127 }} />
 ```
+</Tab>
+</CustomTabs>