@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

package/src/lib/Components/Tag/Tag.tsx

@@ -1,90 +1,162 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { cva } from 'class-variance-authority';
 import React from 'react';
-import { View, Text } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { ViewRef } from '../../types';
 import { IconSize } from '../Icon';
-import { TagProps } from './Tag.types';
+import { Box } from '../Utility';
+import { TagProps } from './types';
 
-const tagVariants = {
-  root: cva(
-    'inline-flex w-fit flex-row items-center justify-center gap-4 rounded-xs',
-    {
-      variants: {
-        appearance: {
-          base: 'bg-muted-transparent',
-          gray: 'bg-muted-transparent',
-          accent: 'bg-accent',
-          success: 'bg-success',
-          error: 'bg-error',
-          warning: 'bg-warning',
-        },
-        size: {
-          lg: 'h-24 px-8 py-4 body-3',
-          sm: 'h-20 px-4 py-2 body-4',
+type Appearance = NonNullable<TagProps['appearance']>;
+type Size = NonNullable<TagProps['size']>;
+
+const useStyles = ({
+  appearance,
+  size,
+  disabled,
+}: {
+  appearance: Appearance;
+  size: Size;
+  disabled: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => {
+      const bgColors: Record<Appearance, string> = {
+        base: t.colors.bg.mutedTransparent,
+        gray: t.colors.bg.mutedTransparent,
+        accent: t.colors.bg.accent,
+        success: t.colors.bg.success,
+        error: t.colors.bg.error,
+        warning: t.colors.bg.warning,
+      };
+
+      const textColors: Record<Appearance, string> = {
+        base: t.colors.text.base,
+        gray: t.colors.text.muted,
+        accent: t.colors.text.onAccent,
+        success: t.colors.text.success,
+        error: t.colors.text.error,
+        warning: t.colors.text.warning,
+      };
+
+      const sizeStyles: Record<
+        Size,
+        { height: number; paddingHorizontal: number; paddingVertical: number }
+      > = {
+        md: {
+          height: t.sizes.s24,
+          paddingHorizontal: t.spacings.s8,
+          paddingVertical: t.spacings.s4,
         },
-        disabled: {
-          true: 'bg-disabled',
-          false: '',
+        sm: {
+          height: t.sizes.s20,
+          paddingHorizontal: t.spacings.s4,
+          paddingVertical: t.spacings.s2,
         },
-      },
-      defaultVariants: {
-        appearance: 'accent',
-        size: 'lg',
-        disabled: false,
-      },
-    },
-  ),
-  inner: cva('', {
-    variants: {
-      appearance: {
-        base: 'text-base',
-        gray: 'text-muted',
-        accent: 'text-on-accent',
-        success: 'text-success',
-        error: 'text-error',
-        warning: 'text-warning',
-      },
-      disabled: {
-        true: 'text-disabled',
-        false: '',
-      },
+      };
+
+      const textTypography =
+        size === 'md' ? t.typographies.body3 : t.typographies.body4;
+
+      return {
+        root: StyleSheet.flatten([
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: t.spacings.s4,
+            borderRadius: t.borderRadius.xs,
+            backgroundColor: bgColors[appearance],
+            ...sizeStyles[size],
+          },
+          disabled && {
+            backgroundColor: t.colors.bg.disabled,
+          },
+        ]),
+        text: StyleSheet.flatten([
+          textTypography,
+          {
+            color: textColors[appearance],
+          },
+          disabled && {
+            color: t.colors.text.disabled,
+          },
+        ]),
+        icon: StyleSheet.flatten([
+          {
+            flexShrink: 0,
+            color: textColors[appearance],
+          },
+          disabled && {
+            color: t.colors.text.disabled,
+          },
+        ]),
+      };
     },
-  }),
+    [appearance, size, disabled],
+  );
+};
+
+const iconSizeMap: Record<Size, IconSize> = {
+  md: 16,
+  sm: 12,
 };
 
-export const Tag = React.forwardRef<View, TagProps>(
-  ({ className, appearance, size, icon, label, disabled, ...props }, ref) => {
-    const iconSizeMap: { [key: string]: IconSize } = {
-      lg: 16,
-      sm: 12,
-    };
+/**
+ * A compact label used to categorize, classify, or highlight information with optional icon support.
+ *
+ * The appearance determines the color scheme used.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-overview--docs Storybook}
+ * @see {@link https://ldls.vercel.app/?path=/docs/communication-tag-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 tag's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
+ * @example
+ * import { Tag } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic tag
+ * <Tag label="Label" appearance="accent" />
+ *
+ * // Tag with icon
+ * <Tag
+ *   label="Success"
+ *   appearance="success"
+ *   icon={Check}
+ * />
+ *
+ * // Small tag
+ * <Tag label="Small" size="sm" />
+ */
+export const Tag = React.forwardRef<ViewRef, TagProps>(
+  (
+    {
+      appearance = 'accent',
+      size = 'md',
+      icon,
+      label,
+      disabled = false,
+      lx = {},
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const styles = useStyles({ appearance, size, disabled });
 
-    const calculatedIconSize = size ? iconSizeMap[size] : 16;
     const IconComponent = icon;
+    const iconSize = iconSizeMap[size];
 
     return (
-      <View
-        className={cn(
-          className,
-          tagVariants.root({ appearance, size, disabled }),
-        )}
+      <Box
         ref={ref}
+        lx={lx}
+        style={StyleSheet.flatten([styles.root, style])}
         {...props}
       >
-        {IconComponent && (
-          <IconComponent
-            size={calculatedIconSize}
-            className={tagVariants.inner({
-              appearance,
-              disabled,
-              className: 'shrink-0',
-            })}
-          />
-        )}
-        <Text className={tagVariants.inner({ appearance, disabled })}>
-          {label}
-        </Text>
-      </View>
+        {IconComponent && <IconComponent size={iconSize} style={styles.icon} />}
+        <Text style={styles.text}>{label}</Text>
+      </Box>
     );
   },
 );

package/src/lib/Components/Tag/index.ts

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

package/src/lib/Components/Tag/{Tag.types.ts → types.ts}

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
-import { ViewProps } from 'react-native';
-import { IconSize } from '../Icon';
+import { StyledViewProps } from '../../../styles';
+import { IconProps } from '../Icon';
 
 export type TagProps = {
   /**
@@ -10,19 +10,20 @@ export type TagProps = {
   /**
    * The icon of the tag.
    */
-  icon?: ComponentType<{ size?: IconSize; className?: string }>;
+  icon?: ComponentType<IconProps>;
   /**
    * The label of the tag.
    */
   label: string;
   /**
    * The size of the tag.
+   * @default 'md'
    */
-  size?: 'sm' | 'lg';
+  size?: 'sm' | 'md';
   /**
    * When `true`, prevents the user from interacting with the tag.
    *
    * @default false
    */
   disabled?: boolean;
-} & ViewProps;
+} & StyledViewProps;

package/src/lib/Components/TextInput/TextInput.mdx

@@ -3,7 +3,7 @@ import * as TextInputStories from './TextInput.stories';
 import { TextInput } from './TextInput';
 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='Input/TextInput' of={TextInputStories} />
 
@@ -26,7 +26,7 @@ It also provides the ability to add custom elements on the right side of the inp
 
 ## Anatomy
 
-> **Layout:** The Input component takes the full width of its container by default. You can control the width directly using `className` or by wrapping in a container.
+> **Layout:** The Input component takes the full width of its container by default. You can control the width by using the `style` prop or by wrapping in a container.
 
 ### Floating Label
 
@@ -227,14 +227,14 @@ function MyComponent() {
 
 ### With 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 `style` prop:
 
 ```tsx
 <TextInput
   label='Email'
   value={email}
   onChangeText={setEmail}
-  className='max-w-md' // Control width
+  style={{ maxWidth: 320 }} // Control width
 />
 ```
 
@@ -278,7 +278,7 @@ Use the `editable` prop to disable the input:
 
 ## Do's and Don'ts
 
-<div className='flex flex-col gap-24'>
+<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use controlled input pattern'

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
 import { View } from 'react-native';
-import { TextInput, type TextInputProps } from './TextInput';
+import { TextInput } from './TextInput';
+import { type TextInputProps } from './types';
 
 const meta: Meta<typeof TextInput> = {
   component: TextInput,
@@ -51,8 +52,16 @@ 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'>
+    <View
+      style={{
+        flex: 1,
+        minHeight: 96,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+      }}
+    >
+      <View style={{ width: '100%', maxWidth: 400 }}>
         <TextInput
           {...args}
           value={value}

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

@@ -1,11 +1,7 @@
 import React from 'react';
 import { TextInput as RNTextInput } from 'react-native';
-import { BaseInput, type BaseInputProps } from '../BaseInput';
-
-export type TextInputProps = Omit<
-  BaseInputProps,
-  'prefix' | 'labelClassName' | 'inputClassName'
->;
+import { BaseInput } from '../BaseInput';
+import { type TextInputProps } from './types';
 
 /**
  * A customizable input component with floating label, automatic clear button, error states, and focus/blur effects.
@@ -16,7 +12,7 @@ export type TextInputProps = Omit<
  * - **Suffix elements** for icons, buttons, or custom content
  * - **Error state styling** with errorMessage support
  * - **Container-based spacing** with padding and gap for clean layout
- * - **Flexible styling** via className
+ * - **Flexible styling** via style props
  * - **React Native TextInput** with proper mobile behavior
  *
  * ## Clear Button Behavior
@@ -47,7 +43,7 @@ export type TextInputProps = Omit<
  *   label="Search"
  *   value={query}
  *   onChangeText={setQuery}
- *   suffix={<SearchIcon size={20} className="text-muted" />}
+ *   suffix={<SearchIcon size={20} />}
  *   hideClearButton={true} // Keep suffix visible
  * />
  *

package/src/lib/Components/TextInput/index.ts

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

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

@@ -0,0 +1,4 @@
+import { BaseInputProps } from '../BaseInput';
+import { BoxProps } from '../Utility';
+
+export type TextInputProps = Omit<BaseInputProps, 'prefix'> & BoxProps;

package/src/lib/Components/Tile/Tile.mdx

@@ -2,8 +2,8 @@ import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TileStories from './Tile.stories';
 import { Tile } from './Tile';
 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='Containment/Tile' of={TileStories} />
 
@@ -59,7 +59,7 @@ Horizontal lists are used to display a list of tiles in a horizontal scrollable
 
 <Canvas of={TileStories.HorizontalList} />
 
-### ResponsiveLayout
+### Responsive Layout
 
 By default the tile fills the width of its container. The title and description will be truncated to one line.
 
@@ -75,12 +75,13 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 ## Basic Usage
 
 ```tsx
-import { Tile, Spot } from '@ledgerhq/lumen-ui-rnative';
+import { Tile, Spot, Box } from '@ledgerhq/lumen-ui-rnative';
 import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 function MyComponent() {
   return (
     <Tile
+      lx={{ width: 's128' }}
       title='Settings'
       description='BTC'
       leadingContent={<Spot appearance='icon' icon={Settings} />}
@@ -110,51 +111,9 @@ function MyComponent() {
 ```
 
 ## Do's and Don'ts
-
-<div className='flex flex-col gap-24'>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use container elements to control width'
-      description='Wrap Tile in container elements to control its width'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<View className='w-128'>
-  <Tile
-    title='Settings'
-    leadingContent={<Spot appearance='icon' icon={Settings} />}
-  />
-</View>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use className for width control"
-      description='Avoid using className to set width directly on Tile'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<View className='w-128'>
-  <Tile
-    title='Settings'
-    leadingContent={<Spot appearance='icon' icon={Settings} />}
-    className='w-96'
-  />
-</View>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
   <CommonRulesDoAndDont />
-</div>
+</Box>
 
 </Tab>
 </CustomTabs>

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>
   ),
 };