@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

package/.storybook/components/CustomTabs.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { Box, Pressable, Text } from '../../src/lib/Components/Utility';
 import { Folder } from '../../src/lib/Symbols/Icons/Folder';
-import { cn } from '../../src/lib/utils';
 
 type TabProps = {
   label: string;
@@ -21,62 +21,65 @@ export const CustomTabs: React.FC<CustomTabsProps> = ({ children }) => {
   );
 
   if (tabs.length === 0) {
-    return <div className='text-muted'>No tabs found</div>;
+    return (
+      <Text typography='body3' lx={{ color: 'muted' }}>
+        No tabs found
+      </Text>
+    );
   }
 
   return (
-    <div>
+    <Box style={{ maxWidth: '100%' }}>
       {/* Tab buttons */}
-      <div className='mb-24 flex gap-24'>
-        {tabs.map((tab, idx) => (
-          <button
-            key={idx}
-            className={cn(
-              'group relative flex flex-col items-center gap-8 rounded-lg p-12 transition-all duration-200 focus:outline-none',
-              active === idx
-                ? 'text-active-subtle'
-                : 'text-muted hover:text-active',
-            )}
-            onClick={() => setActive(idx)}
-          >
-            {/* Folder Icon */}
-            <div
-              className={cn(
-                'rounded-lg p-8 transition-all duration-200',
-                active === idx
-                  ? 'bg-accent text-base'
-                  : 'group-hover:opacity-80',
-              )}
+      <Box lx={{ flexDirection: 'row', gap: 's24', marginBottom: 's24' }}>
+        {tabs.map((tab, idx) => {
+          const isActive = active === idx;
+          return (
+            <Pressable
+              key={idx}
+              lx={{
+                alignItems: 'center',
+                gap: 's8',
+                borderRadius: 'lg',
+                padding: 's12',
+              }}
+              style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
+              onPress={() => setActive(idx)}
             >
-              <Folder size={24} />
-            </div>
+              {/* Folder Icon */}
+              <Box
+                lx={{
+                  borderRadius: 'lg',
+                  padding: 's8',
+                  ...(isActive && { backgroundColor: 'accent' }),
+                }}
+              >
+                <Folder size={24} />
+              </Box>
 
-            {/* Label */}
-            <span
-              className={cn(
-                'transition-colors duration-200 body-3',
-                active === idx
-                  ? 'text-black'
-                  : 'group-hover:text-active group-hover:opacity-80',
-              )}
-            >
-              {tab.props.label}
-            </span>
-          </button>
-        ))}
-      </div>
+              {/* Label */}
+              <Text
+                typography='body3'
+                lx={{ color: isActive ? 'base' : 'muted' }}
+              >
+                {tab.props.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </Box>
 
       {/* Tab content */}
-      <div className='p-24'>
+      <Box lx={{ padding: 's24' }}>
         {tabs.map((tab, idx) => {
           if (idx !== active) return null;
-          return <div key={idx}>{tab.props.children}</div>;
+          return <Box key={idx}>{tab.props.children}</Box>;
         })}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 
 export const Tab: React.FC<TabProps> = ({ children }) => {
-  return <div>{children}</div>;
+  return <Box>{children}</Box>;
 };

package/.storybook/{docs → components/DoVsDont}/CommonRulesDoAndDont.mdx

@@ -1,28 +1,28 @@
-import { DoVsDontRow } from '../components/DoVsDont/DoVsDontRow';
-import { DoBlockItem } from '../components/DoVsDont/DoBlock';
-import { DontBlockItem } from '../components/DoVsDont/DontBlock';
+import { DoVsDontRow } from './DoVsDontRow';
+import { DoBlockItem } from './DoBlock';
+import { DontBlockItem } from './DontBlock';
 
 ## Common Do's and Don'ts
 
 <DoVsDontRow>
   {/* prettier-ignore */}
   <DoBlockItem
-    title='Use className for layout positioning'
-    description='Only use className for layout-related utilities (positioning, margins, display properties).'
+    title='Use lx for layout positioning'
+    description='Only use lx for layout-related utilities (positioning, margins, display properties).'
   >
     ```tsx
-    <Component className='mt-4 absolute top-0 md:hidden'>
+    <Component lx={{ marginTop: 's4', position: 'absolute', top: 0, display: 'none', md: 'hidden' }}>
         Submit
     </Component>
     ```
   </DoBlockItem>
   {/* prettier-ignore */}
   <DontBlockItem
-    title='ClassName is not allowed for core styling'
-    description='Core styling, internal spacing, and typography cannot be modified using className'
+    title='lx is not allowed for core styling'
+    description='Core styling, internal spacing, and typography cannot be modified using lx'
   >
     ```tsx
-    <Component className='bg-accent'>
+    <Component lx={{ backgroundColor: 'accent' }}>
       Submit
     </Component>
     ```

package/.storybook/components/DoVsDont/DoBlock.tsx

@@ -1,43 +1,40 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
 import React from 'react';
+import { Box, Text } from '../../../src/lib/Components/Utility';
 
 type DoBlockItemProps = {
   title?: string;
   description?: string;
   children: React.ReactNode;
-  className?: string;
 };
 
 export const DoBlockItem: React.FC<DoBlockItemProps> = ({
   title,
   description,
   children,
-  className,
 }) => {
   return (
-    <div
-      className={cn('flex flex-col gap-12', className)}
-      {...{ 'data-type': 'do-item' }}
-    >
+    <Box lx={{ gap: 's12' }} {...{ 'data-type': 'do-item' }}>
       {/* Header */}
       {(title || description) && (
-        <div className='!-mb-16 flex flex-col gap-4'>
+        <Box lx={{ gap: 's4' }}>
           {title && (
-            <div className='flex items-center gap-8'>
-              <span className='text-[#10B981]'>✓</span>
-              <h4 className='!m-0 text-base body-2-semi-bold'>{title}</h4>
-            </div>
+            <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
+              <Text style={{ color: '#10B981' }}>✓</Text>
+              <Text typography='body2SemiBold' lx={{ color: 'base' }}>
+                {title}
+              </Text>
+            </Box>
           )}
           {description && (
-            <p className='!m-0 text-muted body-3'>{description}</p>
+            <Text typography='body3' lx={{ color: 'muted' }}>
+              {description}
+            </Text>
           )}
-        </div>
+        </Box>
       )}
 
       {/* Code Block */}
-      <div className='[&_pre]:!m-0 [&_pre]:!rounded-xs [&_pre]:!border-2 [&_pre]:!border-[#10B981] [&_pre]:!bg-[#F0FDF4]'>
-        {children}
-      </div>
-    </div>
+      <Box>{children}</Box>
+    </Box>
   );
 };

package/.storybook/components/DoVsDont/DoVsDontRow.tsx

@@ -1,20 +1,16 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
 import React from 'react';
+import { Box } from '../../../src/lib/Components/Utility';
 
 type DoVsDontRowProps = {
   children: React.ReactNode;
-  className?: string;
 };
 
-export const DoVsDontRow: React.FC<DoVsDontRowProps> = ({
-  children,
-  className,
-}) => {
+export const DoVsDontRow: React.FC<DoVsDontRowProps> = ({ children }) => {
   return (
-    <div className={cn('flex flex-col gap-16', className)}>
-      <div className='!-mb-16 grid grid-cols-1 gap-16 md:grid-cols-2'>
+    <Box lx={{ gap: 's16' }}>
+      <Box lx={{ flexDirection: 'row', gap: 's16', flexWrap: 'wrap' }}>
         {children}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };

package/.storybook/components/DoVsDont/DontBlock.tsx

@@ -1,43 +1,40 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
 import React from 'react';
+import { Box, Text } from '../../../src/lib/Components/Utility';
 
 type DontBlockItemProps = {
   title?: string;
   description?: string;
   children: React.ReactNode;
-  className?: string;
 };
 
 export const DontBlockItem: React.FC<DontBlockItemProps> = ({
   title,
   description,
   children,
-  className,
 }) => {
   return (
-    <div
-      className={cn('flex flex-col gap-12', className)}
-      {...{ 'data-type': 'dont-item' }}
-    >
+    <Box lx={{ gap: 's12' }} {...{ 'data-type': 'dont-item' }}>
       {/* Header */}
       {(title || description) && (
-        <div className='!-mb-16 flex flex-col gap-4'>
+        <Box lx={{ gap: 's4' }}>
           {title && (
-            <div className='flex items-center gap-8'>
-              <span className='text-[#EF4444]'>✕</span>
-              <h4 className='!m-0 text-base body-2-semi-bold'>{title}</h4>
-            </div>
+            <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
+              <Text style={{ color: '#EF4444' }}>✕</Text>
+              <Text typography='body2SemiBold' lx={{ color: 'base' }}>
+                {title}
+              </Text>
+            </Box>
           )}
           {description && (
-            <p className='!m-0 text-muted body-3'>{description}</p>
+            <Text typography='body3' lx={{ color: 'muted' }}>
+              {description}
+            </Text>
           )}
-        </div>
+        </Box>
       )}
 
       {/* Code Block */}
-      <div className='[&_pre]:!m-0 [&_pre]:!rounded-xs [&_pre]:!border-2 [&_pre]:!border-[#EF4444] [&_pre]:!bg-[#FEF2F2]'>
-        {children}
-      </div>
-    </div>
+      <Box>{children}</Box>
+    </Box>
   );
 };

package/.storybook/docs/Changelog.mdx

@@ -6,7 +6,6 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 Stay up to date with the latest changes and releases for the Ledger Design Language System libraries.
 
-## Library Releases
 
 ### @ledgerhq/lumen-ui-rnative
 

package/.storybook/docs/getting-started/setup.mdx

@@ -10,42 +10,106 @@ Install the packages and their peer dependencies:
 npm install @ledgerhq/lumen-ui-rnative @ledgerhq/lumen-design-core
 
 # Install peer dependencies
-npm install react-native@^0.75.0 react@^18.3.1 nativewind@^4.1.0 tailwindcss@^3.4.0 class-variance-authority
+npm install react-native@^0.77.0 react@^18.3.1
 ```
 
-#### **About NativeWind**
 
-The `nativewind` dependency is used for styling React Native components with Tailwind CSS utilities.  
-It provides the `className` prop support and ensures consistent styling across platforms.
 
-### NativeWind Configuration
+## Setup ThemeProvider
 
-Setup ledger custom tailwind preset in your `tailwind.config.ts`:
+The `ThemeProvider` will manage themes, colorScheme, locale, rtl and other global state...
 
-```typescript
-import type { Config } from 'tailwindcss';
-import { ledgerLivePreset } from '@ledgerhq/lumen-design-core';
+```tsx
+import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 
-const config = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}", // Your project's files
-    "./node_modules/@ledgerhq/lumen-ui-rnative/dist/**/*.{js,ts,jsx,tsx}" // Ledger UI Kit components
-  ],
-  presets: [ledgerLivePreset], // the installed tailwind preset
-} satisfies Config;
+function App() {
+  return (
+    <ThemeProvider 
+      themes={ledgerLiveThemes}
+      colorScheme="dark"
+      locale="en"
+    >
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+## Themes
+
+Use the themes prop to pass theme objects to the ThemeProvider.
+
+Three themes are currently available:
+- enterprise
+- ledger-live
+- websites
+
+Once provided, the active theme can be accessed using Lumen style-system utilities.
 
-export default config;
+```tsx
+import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
+import { ledgerLiveThemes, enterpriseThemes, websitesThemes } from '@ledgerhq/lumen-design-core';
+
+function App() {
+  return (
+    <ThemeProvider themes={ledgerLiveThemes}>
+      <App />
+    </ThemeProvider>
 ```
 
-### Metro Configuration
+## Color Scheme
+
+The `colorScheme` prop controls the theme color scheme.
+If not provided, the theme will follow the device settings.
+
+- `"dark"` - Forces dark color scheme
+- `"light"` - Forces light color scheme
+
+
+```tsx
+<ThemeProvider 
+  themes={ledgerLiveThemes}
+  colorScheme="dark"
+>
+  <App />
+</ThemeProvider>
+```
+
+If the ThemeProvider is uncontrolled, you can use the [`useTheme`](/?path=/docs/style-system-usetheme--docs) hook to control theme mode at runtime:
+
+```tsx
+import { useTheme } from '@ledgerhq/lumen-ui-rnative/styles';
+
+const ThemeToggle = () => {
+  const { colorScheme, toggleColorScheme, setColorScheme } = useTheme();
+  
+  return (
+    <Button onPress={toggleColorScheme}>
+      Current: {colorScheme}
+    </Button>
+  );
+};
+```
+
+When the colorScheme changes, `Appearance.setColorScheme` is automatically called to update the system theme.
+
 
-Add NativeWind to your `metro.config.js`:
+## Internationalization
 
-```javascript
-const { getDefaultConfig } = require('expo/metro-config');
-const { withNativeWind } = require('nativewind/metro');
+The ThemeProvider also manages the app’s locale using React Context.  
+You can just pass the locale to the `ThemeProvider` and the translations will be loaded automatically.
 
-const config = getDefaultConfig(__dirname);
+```tsx
+import { ThemeProvider, type SupportedLocale } from '@ledgerhq/lumen-ui-rnative';
 
-module.exports = withNativeWind(config, { input: './global.css' });
+function AppProviders() {
+  const [locale, setLocale] = useState<SupportedLocale>('en');
+  return (
+    <ThemeProvider locale={locale}>
+      <App />
+      <Button onClick={() => setLocale('fr')}>Switch to French</Button>
+    </ThemeProvider>
+  );
+}
 ```

package/.storybook/docs/style-system/lx.mdx

@@ -6,7 +6,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 The `lx` prop is a type-safe styling API that provides autocomplete for design tokens directly on components.
 
-## Overview
+### Overview
 
 Instead of writing raw style values, `lx` constrains you to design system tokens, ensuring consistency across your app.
 
@@ -25,11 +25,11 @@ import { Box, Text } from '@ledgerhq/lumen-ui-rnative';
 
 ---
 
-## View Style Tokens
+### View Style Tokens
 
 These tokens are available on `Box` and `Pressable` (and the `lx` prop of `Text` for layout).
 
-### Spacing
+#### Spacing
 
 Used for `padding`, `margin`, `gap`, and positioning (`top`, `left`, etc.):
 
@@ -42,7 +42,7 @@ Used for `padding`, `margin`, `gap`, and positioning (`top`, `left`, etc.):
 }} />
 ```
 
-### Sizes
+#### Sizes
 
 Used for `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`:
 
@@ -50,7 +50,7 @@ Used for `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`:
 <Box lx={{ width: 's48', height: 's48', maxWidth: 's320' }} />
 ```
 
-### Background Colors
+#### Background Colors
 
 ```tsx
 <Box lx={{ backgroundColor: 'accent' }} />
@@ -58,7 +58,7 @@ Used for `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`:
 <Box lx={{ backgroundColor: 'muted' }} />
 ```
 
-### Border
+#### Border
 
 ```tsx
 <Box lx={{ 
@@ -68,7 +68,7 @@ Used for `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`:
 }} />
 ```
 
-### Flex Layout
+#### Flex Layout
 
 Standard React Native flex properties are passed through:
 
@@ -83,11 +83,11 @@ Standard React Native flex properties are passed through:
 
 ---
 
-## Text Style Tokens
+### Text Style Tokens
 
 These tokens are **only available on the `Text` component**, in addition to view tokens.
 
-### Text Color
+#### Text Color
 
 ```tsx
 <Text lx={{ color: 'base' }} />
@@ -96,7 +96,7 @@ These tokens are **only available on the `Text` component**, in addition to view
 <Text lx={{ color: 'onAccent' }} />
 ```
 
-### Typography
+#### Typography
 
 Preset font size, weight, line height, and letter spacing:
 
@@ -106,7 +106,7 @@ Preset font size, weight, line height, and letter spacing:
 <Text typography='body2SemiBold' />
 ```
 
-### Text Decoration
+#### Text Decoration
 
 ```tsx
 <Text lx={{ textDecorationLine: 'underline' }} />
@@ -116,7 +116,7 @@ Preset font size, weight, line height, and letter spacing:
 
 ---
 
-## Escape Hatch
+### Escape Hatch
 
 For values not covered by tokens, use the `style` prop:
 
@@ -127,7 +127,7 @@ For values not covered by tokens, use the `style` prop:
 />
 ```
 
-## Pressable and Pressed State
+### Pressable and Pressed State
 
 For `Pressable`, the `lx` prop only accepts static objects. Use the `style` prop for pressed-state styling:
 

package/.storybook/docs/style-system/styleSystem.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Style System/Style System" />
+
+# Style System
+
+Three approaches for styling, from constrained to fully customizable:
+
+- [**lx prop**](/?path=/docs/style-system-lx--docs) — Design tokens only → Layout composition, quick styling
+- [**useStyleSheet**](/?path=/docs/style-system-usestylesheet--docs) — Full customizability, built-in memoization → Complex styles, custom components
+- [**useTheme**](/?path=/docs/style-system-usetheme--docs) — Full customizability → Theme/color scheme control
+
+---
+
+### lx Prop (Recommended)
+
+The `lx` prop is available on **all Design System components**.  
+It enables type-safe, design-token-only styling for rapid, consistent layout styling.
+
+```tsx
+import { Box, Text } from '@ledgerhq/lumen-ui-rnative';
+
+<Box lx={{ gap: 's16', backgroundColor: 'accent', borderRadius: 'md' }}>
+  <Text typography='body1' lx={{ color: 'onAccent' }}>Hello</Text>
+  <Button lx={{ marginTop: 's16' }}>Click me</Button>
+</Box>
+```
+
+### useStyleSheet
+
+Wrapper on top of useTheme to create theme-aware stylesheets with **built-in memoization**. Allow full customizability.
+
+```tsx
+import { useStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
+
+const styles = useStyleSheet((theme) => ({
+  container: {
+    backgroundColor: theme.colors.bg.base,
+    padding: theme.spacings.s16,
+  },
+}), []);
+```
+
+### useTheme
+
+Direct design-tokens access from the theme object.
+
+```tsx
+import { useTheme } from '@ledgerhq/lumen-ui-rnative/styles';
+
+const { theme } = useTheme();
+```
+
+---