@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.47

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

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { View } from 'react-native';
 import {
   Settings,
   Plus,
@@ -11,6 +10,7 @@ import {
 } from '../../Symbols';
 import { Spot } from '../Spot/Spot';
 import { Tag } from '../Tag/Tag';
+import { Box } from '../Utility';
 import { Tile } from './Tile';
 
 const meta: Meta<typeof Tile> = {
@@ -55,7 +55,7 @@ export const Base: Story = {
     title: 'Item with Spot and Description',
     description: 'Additional information',
     leadingContent: <Spot appearance='icon' icon={Settings} />,
-    className: 'max-w-256',
+    lx: { maxWidth: 's256' },
   },
   parameters: {
     docs: {
@@ -67,7 +67,7 @@ export const Base: Story = {
   leadingContent={<Spot appearance="icon" icon={Settings} />}
   onLongPress={() => console.log('Secondary action')}
   onPress={() => console.log('Primary action')}
-  className="max-w-256"
+  lx={{ maxWidth: 's256' }}
 />
 `,
       },
@@ -81,7 +81,7 @@ export const WithTrailingContent: Story = {
     description: 'Additional information',
     leadingContent: <Spot appearance='icon' icon={Settings} />,
     trailingContent: <Tag label='New' appearance='base' />,
-    className: 'max-w-256',
+    lx: { maxWidth: 's256' },
   },
   parameters: {
     docs: {
@@ -93,7 +93,7 @@ export const WithTrailingContent: Story = {
   leadingContent={<Spot appearance="icon" icon={Settings} />}
   trailingContent={<Tag label="New" appearance="base" />}
   onLongPress={() => console.log('Long press - secondary action')}
-  className="max-w-256"
+  lx={{ maxWidth: 's256' }}
 />
 `,
       },
@@ -107,7 +107,7 @@ export const WithSecondaryAction: Story = {
     description: 'LongPress to trigger secondary action',
     leadingContent: <Spot appearance='icon' icon={Settings} />,
     onLongPress: () => alert('Long press - secondary action'),
-    className: 'max-w-256',
+    lx: { maxWidth: 's256' },
   },
   parameters: {
     docs: {
@@ -118,7 +118,7 @@ export const WithSecondaryAction: Story = {
   description="Additional information"
   onLongPress={() => // do stuff}
   leadingContent={<Spot appearance="icon" icon={Settings} />}
-  className="max-w-256"
+  lx={{ maxWidth: 's256' }}
 />
 `,
       },
@@ -128,46 +128,53 @@ export const WithSecondaryAction: Story = {
 
 export const LeadingContentVariantsShowcase: Story = {
   render: () => (
-    <View className='flex flex-row'>
+    <Box lx={{ flexDirection: 'row' }}>
       <Tile
         title='User'
         description='With description'
         leadingContent={<Spot appearance='icon' icon={User} />}
-        className='max-w-128'
+        lx={{ maxWidth: 's128' }}
       />
       <Tile
         title='Wallet'
         description='With description'
         leadingContent={<Spot appearance='icon' icon={Wallet} />}
-        className='max-w-128'
+        lx={{ maxWidth: 's128' }}
       />
       <Tile
         title='Cart'
         description='With description'
         leadingContent={<Spot appearance='icon' icon={Cart} />}
-        className='max-w-128'
+        lx={{ maxWidth: 's128' }}
       />
       <Tile
         title='Apps'
         description='With description'
         leadingContent={<Spot appearance='icon' icon={Apps} />}
-        className='max-w-128'
+        lx={{ maxWidth: 's128' }}
       />
       <Tile
         title='Chart'
         description='With description'
         leadingContent={<Spot appearance='icon' icon={Chart1} />}
-        className='max-w-128'
+        lx={{ maxWidth: 's128' }}
       />
-    </View>
+    </Box>
   ),
 };
 
 export const HorizontalList: Story = {
   render: () => (
-    <View className='flex flex-col gap-16'>
-      <View className='flex w-480 flex-row bg-base'>
-        {Array.from({ length: 5 }).map((_, i) => (
+    <Box lx={{ flexDirection: 'column', gap: 's16' }}>
+      <Box
+        lx={{
+          position: 'relative',
+          flexDirection: 'row',
+          width: 's480',
+          backgroundColor: 'base',
+        }}
+      >
+        {Array.from({ length: 12 }).map((_, i) => (
           <Tile
             key={`list-1-${i}`}
             title={`Item ${i + 1}`}
@@ -175,40 +182,47 @@ export const HorizontalList: Story = {
             leadingContent={<Spot appearance='icon' icon={Apps} />}
           />
         ))}
-      </View>
-      <View className='flex w-480 flex-row overflow-x-auto bg-base'>
-        {Array.from({ length: 5 }).map((_, i) => (
+      </Box>
+      <Box
+        lx={{
+          flexDirection: 'row',
+          width: 's480',
+          position: 'relative',
+          backgroundColor: 'base',
+        }}
+      >
+        {Array.from({ length: 8 }).map((_, i) => (
           <Tile
             key={`list-2-${i}`}
             title='Long Title that should truncate appropriately'
             description='Long description that should truncate appropriately'
             leadingContent={<Spot appearance='icon' icon={Apps} />}
-            className='w-208 shrink-0'
+            lx={{ width: 's176', flexShrink: 0 }}
           />
         ))}
-      </View>
-    </View>
+      </Box>
+    </Box>
   ),
 };
 
 export const ResponsiveLayout: Story = {
   render: () => (
-    <View className='flex w-full flex-col gap-16'>
-      <View>
+    <Box lx={{ width: 'full', flexDirection: 'column', gap: 's16' }}>
+      <Box>
         <Tile
           title='Item fill width'
           description='Description fill width'
           leadingContent={<Spot appearance='icon' icon={Apps} />}
         />
-      </View>
-      <View className='flex items-center justify-center'>
+      </Box>
+      <Box lx={{ alignItems: 'center', justifyContent: 'center' }}>
         <Tile
-          className='w-224'
+          lx={{ width: 's224' }}
           title='Long Item with fixed width'
           description='lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.'
           leadingContent={<Spot appearance='icon' icon={Plus} />}
         />
-      </View>
-    </View>
+      </Box>
+    </Box>
   ),
 };

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

@@ -1,70 +1,130 @@
-import { cva } from 'class-variance-authority';
-import { FC, forwardRef } from 'react';
-import { View, Pressable, Text } from 'react-native';
-import { PressableRef } from '../../types';
+import React, { FC, forwardRef } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { Pressable } from '../Utility';
 import { TileProps } from './types';
 
-const tileVariants = {
-  root: cva(
-    ['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: '',
-          false: '',
+type Appearance = NonNullable<TileProps['appearance']>;
+
+const useStyles = ({
+  appearance,
+  disabled,
+  pressed,
+}: {
+  appearance: Appearance;
+  disabled: boolean;
+  pressed: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const bgColors: Record<Appearance, string> = {
+        'no-background': t.colors.bg.baseTransparent,
+        card: t.colors.bg.surface,
+      };
+
+      const pressedBgColors: Record<Appearance, string> = {
+        'no-background': t.colors.bg.baseTransparentPressed,
+        card: t.colors.bg.surfacePressed,
+      };
+
+      return {
+        container: StyleSheet.flatten([
+          {
+            position: 'relative',
+            flexDirection: 'column',
+            width: '100%',
+            alignItems: 'center',
+            gap: t.spacings.s8,
+            padding: t.spacings.s8,
+            borderRadius: t.borderRadius.sm,
+            backgroundColor: bgColors[appearance],
+          },
+          pressed &&
+            !disabled && {
+              backgroundColor: pressedBgColors[appearance],
+            },
+        ]),
+        contentWrapper: {
+          width: t.sizes.full,
+          alignItems: 'center',
+          gap: t.spacings.s8,
         },
-        disabled: {
-          true: '',
-          false: '',
+        leadingWrapper: {
+          alignItems: 'center',
+          justifyContent: 'center',
         },
-      },
-      compoundVariants: [
-        {
-          appearance: 'no-background',
-          pressed: true,
-          disabled: false,
-          className: 'bg-base-transparent-pressed',
+        textWrapper: {
+          width: t.sizes.full,
+          alignItems: 'center',
+          gap: t.spacings.s4,
         },
-        {
-          appearance: 'card',
-          pressed: true,
-          disabled: false,
-          className: 'bg-surface-pressed',
+        titleWrapper: {
+          width: t.sizes.full,
+          alignItems: 'center',
         },
-      ],
-      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,
+        title: StyleSheet.flatten([
+          t.typographies.body3SemiBold,
+          {
+            width: t.sizes.full,
+            textAlign: 'center',
+            color: disabled ? t.colors.text.disabled : t.colors.text.base,
+          },
+        ]),
+        description: StyleSheet.flatten([
+          t.typographies.body3,
+          {
+            width: t.sizes.full,
+            textAlign: 'center',
+            color: disabled ? t.colors.text.disabled : t.colors.text.muted,
+          },
+        ]),
+      };
     },
-  }),
+    [appearance, disabled, pressed],
+  );
+};
+
+type TileContentProps = {
+  appearance: Appearance;
+  disabled: boolean;
+  pressed: boolean;
+  leadingContent: TileProps['leadingContent'];
+  title: string;
+  description?: string;
+  trailingContent?: TileProps['trailingContent'];
+};
+
+const TileContent: FC<TileContentProps> = ({
+  appearance,
+  disabled,
+  pressed,
+  leadingContent,
+  title,
+  description,
+  trailingContent,
+}) => {
+  const styles = useStyles({ appearance, disabled, pressed });
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.contentWrapper}>
+        <View style={styles.leadingWrapper}>{leadingContent}</View>
+        <View style={styles.textWrapper}>
+          <View style={styles.titleWrapper}>
+            <Text numberOfLines={1} style={styles.title}>
+              {title}
+            </Text>
+            {description && (
+              <Text numberOfLines={1} style={styles.description}>
+                {description}
+              </Text>
+            )}
+          </View>
+          {trailingContent}
+        </View>
+      </View>
+    </View>
+  );
 };
 
 /**
@@ -75,6 +135,9 @@ const tileVariants = {
  * @see {@link https://ldls.vercel.app/?path=/docs/components-Tile-overview--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/components-Tile-implementation--docs#dos-and-donts Guidelines}
  *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the tile's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
  * @example
  * // Basic tile item
  * import { Tile, Spot } from '@ledgerhq/lumen-ui-rnative';
@@ -88,17 +151,17 @@ const tileVariants = {
  *   onLongPress={() => console.log('Long pressed!')}
  * />
  */
-export const Tile: FC<TileProps> = forwardRef<PressableRef, TileProps>(
+export const Tile = forwardRef<React.ElementRef<typeof Pressable>, TileProps>(
   (
     {
+      lx = {},
+      style,
       title,
       description,
       leadingContent,
       trailingContent,
       appearance = 'no-background',
       disabled = false,
-      onPress,
-      onLongPress,
       ...props
     },
     ref,
@@ -106,42 +169,27 @@ export const Tile: FC<TileProps> = forwardRef<PressableRef, TileProps>(
     return (
       <Pressable
         ref={ref}
-        onPress={onPress}
-        onLongPress={onLongPress}
+        lx={lx}
+        style={style}
         disabled={disabled}
+        accessibilityRole='button'
+        accessibilityState={{ disabled }}
         {...props}
       >
         {({ pressed }) => (
-          <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='w-full items-center gap-4'>
-                <View className='w-full items-center'>
-                  <Text
-                    numberOfLines={1}
-                    className={tileVariants.title({ disabled })}
-                  >
-                    {title}
-                  </Text>
-                  {description && (
-                    <Text
-                      numberOfLines={1}
-                      className={tileVariants.description({ disabled })}
-                    >
-                      {description}
-                    </Text>
-                  )}
-                </View>
-                {trailingContent}
-              </View>
-            </View>
-          </View>
+          <TileContent
+            appearance={appearance}
+            disabled={disabled}
+            pressed={pressed}
+            leadingContent={leadingContent}
+            title={title}
+            description={description}
+            trailingContent={trailingContent}
+          />
         )}
       </Pressable>
     );
   },
 );
+
+Tile.displayName = 'Tile';

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { PressableProps } from 'react-native';
+import { StyledPressableProps } from '../../../styles';
 
 export type TileProps = {
   /**
@@ -36,10 +36,10 @@ export type TileProps = {
   /**
    * Callback function when the tile is pressed.
    */
-  onPress?: PressableProps['onPress'];
+  onPress?: StyledPressableProps['onPress'];
   /**
    * Callback function when the tile is long pressed.
    * Can be used to perform secondary actions.
    */
-  onLongPress?: PressableProps['onLongPress'];
-} & Omit<PressableProps, 'onPress' | 'onLongPress' | 'disabled'>;
+  onLongPress?: StyledPressableProps['onLongPress'];
+} & Omit<StyledPressableProps, 'onPress' | 'onLongPress' | 'disabled'>;

package/src/lib/Components/Tooltip/Tooltip.mdx

@@ -1,8 +1,9 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 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 * as TooltipStories from './Tooltip.stories';
+import { Box } from '../Utility/Box';
 
 <Meta title='Communication/Tooltip' of={TooltipStories} />
 
@@ -91,6 +92,7 @@ import {
   Tooltip,
   TooltipTrigger,
   TooltipContent,
+  Text,
 } from '@ledgerhq/lumen-ui-rnative';
 import { Button } from '@ledgerhq/lumen-ui-rnative';
 
@@ -102,7 +104,11 @@ function MyComponent() {
       </TooltipTrigger>
       <TooltipContent
         title='Help Information'
-        content={<Text>This is helpful information about the feature.</Text>}
+        content={
+          <Text typography='body2'>
+            This is helpful information about the feature.
+          </Text>
+        }
       />
     </Tooltip>
   );
@@ -121,14 +127,14 @@ function MyComponent() {
   <TooltipContent
     title='Feature Details'
     content={
-      <View className='flex gap-12'>
-        <Text className='text-muted'>
+      <Box lx={{ gap: 's12' }}>
+        <Text typography='body2' lx={{ color: 'muted' }}>
           Detailed explanation with rich formatting.
         </Text>
         <Button size='xs' appearance='accent'>
           Learn More
         </Button>
-      </View>
+      </Box>
     }
   />
 </Tooltip>
@@ -150,7 +156,10 @@ function CallbackFunctionTooltip() {
       <TooltipTrigger asChild>
         <Button>Toggle Tooltip</Button>
       </TooltipTrigger>
-      <TooltipContent title='Controlled' content={<Text>Content</Text>} />
+      <TooltipContent
+        title='Controlled'
+        content={<Text typography='body2'>Content</Text>}
+      />
     </Tooltip>
   );
 }
@@ -158,7 +167,7 @@ function CallbackFunctionTooltip() {
 
 ## Do's and Don'ts
 
-<div className='flex flex-col gap-24'>
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use asChild to merge props with existing components'
@@ -211,7 +220,7 @@ function CallbackFunctionTooltip() {
 ```tsx
 <TooltipContent
   title='Short Title'
-  content={<Text>Brief, helpful explanation.</Text>}
+  content={<Text typography='body2'>Brief, helpful explanation.</Text>}
 />
 ```
 
@@ -225,7 +234,7 @@ function CallbackFunctionTooltip() {
 ```tsx
 <TooltipContent
   title='Very Long Detailed Title That Goes On Forever'
-  content={<Text>This is a very long explanation that contains too much information...</Text>}
+  content={<Text typography='body2'>This is a very long explanation that contains too much information...</Text>}
 />
 ```
 
@@ -282,21 +291,27 @@ function App() {
 
 {/* prettier-ignore */}
 ```tsx
-<View>
+<Box>
   <Tooltip>
     <TooltipTrigger asChild>
       <Button>Help 1</Button>
     </TooltipTrigger>
-    <TooltipContent title='First' content={<Text>Info</Text>} />
+    <TooltipContent
+      title='First'
+      content={<Text typography='body2'>Info</Text>}
+    />
   </Tooltip>
 
   <Tooltip>
     <TooltipTrigger asChild>
       <Button>Help 2</Button>
     </TooltipTrigger>
-    <TooltipContent title='Second' content={<Text>Info</Text>} />
+    <TooltipContent
+      title='Second'
+      content={<Text typography='body2'>Info</Text>}
+    />
   </Tooltip>
-</View>
+</Box>
 ```
 
     </DoBlockItem>
@@ -307,12 +322,15 @@ function App() {
 
 {/* prettier-ignore */}
 ```tsx
-<View>
+<Box>
   <Tooltip>
     <TooltipTrigger asChild>
       <Button>Help 1</Button>
     </TooltipTrigger>
-    <TooltipContent title='First' content={<Text>Info</Text>} />
+    <TooltipContent
+      title='First'
+      content={<Text typography='body2'>Info</Text>}
+    />
   </Tooltip>
 
   <Tooltip>
@@ -320,7 +338,7 @@ function App() {
       <Tooltip>...</Tooltip>
     </TooltipTrigger>
   </Tooltip>
-</View>
+</Box>
 ```
 
     </DontBlockItem>
@@ -328,7 +346,7 @@ function App() {
   </DoVsDontRow>
 
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 ### Performance