@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

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
 

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

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { Text, View } from 'react-native';
 import { Information } from '../../Symbols';
 import { Button } from '../Button';
 import { InteractiveIcon } from '../InteractiveIcon';
+import { Box } from '../Utility/Box';
+import { Text } from '../Utility/Text';
 import { GlobalTooltipBottomSheet } from './GlobalTooltipBottomSheet';
 import { Tooltip, TooltipTrigger, TooltipContent } from './Tooltip';
 
@@ -19,17 +20,24 @@ type Story = StoryObj<typeof Tooltip>;
 export const Base: Story = {
   render: () => (
     <>
-      <View className='flex min-h-400 items-center justify-center p-24'>
+      <Box
+        lx={{
+          minHeight: 's400',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 's24',
+        }}
+      >
         <Tooltip>
           <TooltipTrigger asChild>
             <Button>Press me</Button>
           </TooltipTrigger>
           <TooltipContent
             title='My tooltip title'
-            content={<Text>This is a helpful tooltip</Text>}
+            content={<Text typography='body2'>This is a helpful tooltip</Text>}
           />
         </Tooltip>
-      </View>
+      </Box>
       <GlobalTooltipBottomSheet />
     </>
   ),
@@ -38,7 +46,14 @@ export const Base: Story = {
 export const WithCustomContent: Story = {
   render: () => (
     <>
-      <View className='flex min-h-400 items-center justify-center p-24'>
+      <Box
+        lx={{
+          minHeight: 's400',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 's24',
+        }}
+      >
         <Tooltip>
           <TooltipTrigger asChild>
             <Button>Press me</Button>
@@ -46,8 +61,8 @@ export const WithCustomContent: Story = {
           <TooltipContent
             title='My tooltip title'
             content={
-              <View className='flex items-start gap-12'>
-                <Text className='text-muted'>
+              <Box lx={{ alignItems: 'flex-start', gap: 's12' }}>
+                <Text typography='body2' lx={{ color: 'muted' }}>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                   do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                   Ut enim ad minim veniam, quis nostrud exercitation ullamco
@@ -56,11 +71,11 @@ export const WithCustomContent: Story = {
                 <Button size='sm' appearance='accent'>
                   Custom tooltip action
                 </Button>
-              </View>
+              </Box>
             }
           />
         </Tooltip>
-      </View>
+      </Box>
       <GlobalTooltipBottomSheet />
     </>
   ),
@@ -69,14 +84,23 @@ export const WithCustomContent: Story = {
 export const WithMultipleTooltips: Story = {
   render: () => (
     <>
-      <View className='flex min-h-400 flex-row items-center justify-center gap-16 p-24'>
+      <Box
+        lx={{
+          minHeight: 's400',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 's16',
+          padding: 's24',
+        }}
+      >
         <Tooltip>
           <TooltipTrigger asChild>
             <Button>Tooltip 1</Button>
           </TooltipTrigger>
           <TooltipContent
             title='First'
-            content={<Text>First tooltip content</Text>}
+            content={<Text typography='body2'>First tooltip content</Text>}
           />
         </Tooltip>
 
@@ -86,7 +110,7 @@ export const WithMultipleTooltips: Story = {
           </TooltipTrigger>
           <TooltipContent
             title='Second'
-            content={<Text>Second tooltip content</Text>}
+            content={<Text typography='body2'>Second tooltip content</Text>}
           />
         </Tooltip>
 
@@ -98,10 +122,10 @@ export const WithMultipleTooltips: Story = {
           </TooltipTrigger>
           <TooltipContent
             title='Third'
-            content={<Text>Third tooltip content</Text>}
+            content={<Text typography='body2'>Third tooltip content</Text>}
           />
         </Tooltip>
-      </View>
+      </Box>
       <GlobalTooltipBottomSheet />
     </>
   ),
@@ -111,7 +135,14 @@ export const WithChangeCallback: Story = {
   render: () => {
     return (
       <>
-        <View className='flex min-h-400 items-center justify-center p-24'>
+        <Box
+          lx={{
+            minHeight: 's400',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 's24',
+          }}
+        >
           <Tooltip
             onOpenChange={(newOpen) => alert(`Opened changes to: ${newOpen}`)}
           >
@@ -120,10 +151,12 @@ export const WithChangeCallback: Story = {
             </TooltipTrigger>
             <TooltipContent
               title='My tooltip title'
-              content={<Text>This is a helpful tooltip</Text>}
+              content={
+                <Text typography='body2'>This is a helpful tooltip</Text>
+              }
             />
           </Tooltip>
-        </View>
+        </Box>
         <GlobalTooltipBottomSheet />
       </>
     );

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

@@ -70,9 +70,18 @@ export const Tooltip: React.FC<TooltipProps> = ({ children, onOpenChange }) => {
 };
 Tooltip.displayName = 'Tooltip';
 
+/**
+ * The trigger element that opens the tooltip when pressed.
+ *
+ * @example
+ * <TooltipTrigger asChild>
+ *   <Button>Help</Button>
+ * </TooltipTrigger>
+ */
 export const TooltipTrigger: React.FC<TooltipTriggerProps> = ({
   children,
   asChild = false,
+  style,
   ...props
 }) => {
   const { tooltipId, setOpen, contentData } = useTooltipSafeContext({
@@ -100,7 +109,7 @@ export const TooltipTrigger: React.FC<TooltipTriggerProps> = ({
   const Comp = asChild ? SlotPressable : Pressable;
 
   return (
-    <Comp {...props} onPress={handlePress}>
+    <Comp {...props} style={style} onPress={handlePress}>
       {children}
     </Comp>
   );

package/src/lib/Components/Utility/Box/Box.tsx

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-import { createStyledView, type StyledViewProps } from '../../../../styles';
+import { createStyledView } from '../../../../styles';
 
 /**
  * Box - A layout primitive component with token-constrained style props.
@@ -36,5 +36,3 @@ import { createStyledView, type StyledViewProps } from '../../../../styles';
  * ```
  */
 export const Box = createStyledView(View);
-
-export type BoxProps = StyledViewProps;

package/src/lib/Components/Utility/Box/index.ts

@@ -1 +1,2 @@
 export * from './Box';
+export * from './types';

package/src/lib/Components/Utility/Box/types.ts

@@ -0,0 +1,3 @@
+import { StyledViewProps } from '../../../../styles';
+
+export type BoxProps = StyledViewProps;

package/src/lib/Components/Utility/Pressable/types.ts

@@ -1,3 +1,3 @@
-import { StyledPressableProps } from '../../../../styles';
+import { StyledViewProps } from '../../../../styles';
 
-export type PressableProps = StyledPressableProps;
+export type PressableProps = StyledViewProps;

package/src/lib/Components/Utility/Text/Text.tsx

@@ -1,5 +1,5 @@
 import { Text as RNText } from 'react-native';
-import { createStyledText, type StyledTextProps } from '../../../../styles';
+import { createStyledText } from '../../../../styles';
 
 /**
  * Text - A typography component with typography support and token-constrained style props.
@@ -35,5 +35,3 @@ import { createStyledText, type StyledTextProps } from '../../../../styles';
  * ```
  */
 export const Text = createStyledText(RNText);
-
-export type TextProps = StyledTextProps;