@ledgerhq/lumen-ui-rnative 0.0.80 → 0.1.0

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

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { TypographyTable } from './TypographyTable';
+
+<Meta title='Style System/Theme/Typographies' />
+
+# 🔤 Typographies
+
+Our typography system provides a set of predefined text styles that ensure visual consistency across the app. Each token maps directly to the `typography` prop of the `Text` component.
+
+## Usage
+
+Apply typographies through the `typography` prop on the `Text` component:
+
+```tsx
+import { Text } from '@ledgerhq/lumen-ui-rnative';
+
+<Text typography='heading3'>Page title</Text>
+<Text typography='body1SemiBold'>Emphasized content</Text>
+<Text typography='body2'>Regular paragraph text</Text>
+```
+
+## Heading
+
+Heading styles are used for titles and key content that needs visual hierarchy.
+
+<TypographyTable category="heading" />
+
+## Body
+
+Body styles are used for general content such as paragraphs, labels, and descriptions.
+
+<TypographyTable category="body" />
+
+

package/.storybook/docs/style-system/lx/Typographies/TypographyTable.tsx

@@ -0,0 +1,47 @@
+import { Text } from 'react-native';
+import { resolveTheme } from '../';
+
+type TypographyCategory = 'heading' | 'body';
+
+type TypographyTableProps = {
+  category: TypographyCategory;
+};
+
+export const TypographyTable = ({ category }: TypographyTableProps) => {
+  const typographies = resolveTheme().typographies.xs[category];
+
+  const cells = Object.entries(typographies);
+
+  return (
+    <table style={{ width: '100%' }}>
+      <thead>
+        <tr>
+          <th>Token</th>
+          <th>Sample</th>
+        </tr>
+      </thead>
+      <tbody>
+        {cells.map(([key, value]) => (
+          <tr key={key}>
+            <td>
+              <code>{key}</code>
+            </td>
+            <td>
+              <Text
+                style={{
+                  fontFamily: value.fontFamily,
+                  fontSize: value.fontSize,
+                  fontWeight: value.fontWeight,
+                  lineHeight: value.lineHeight,
+                  letterSpacing: value.letterSpacing,
+                }}
+              >
+                The quick brown fox jumps over the lazy dog
+              </Text>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

package/ai-rules/RULES.md

@@ -82,7 +82,9 @@ Below is a complete list of all available Lumen React Native components. Click a
 
 ## React Native Style System
 
-Lumen React Native uses a custom style system called `lx` that provides type-safe access to design tokens. Explore the style system documentation:
+Lumen React Native uses a custom style system called `lx` that provides type-safe access to design tokens. 
+
+Explore the complete theme reference:
 
 - [Colors](https://ldls.vercel.app/?path=/docs/style-system-theme-colors--docs) - Semantic color tokens for background, text, and borders
 - [Spacings](https://ldls.vercel.app/?path=/docs/style-system-theme-spacings--docs) - Spacing scale for padding, margin, and gaps
@@ -93,22 +95,12 @@ Lumen React Native uses a custom style system called `lx` that provides type-saf
 
 ### Style System Usage
 
-```tsx
-import { Box, Text } from '@ledgerhq/lumen-ui-rnative';
-
-// Using lx prop for type-safe styling
-<Box
-  lx={{
-    backgroundColor: 'base',
-    padding: 16,
-    borderRadius: 'md',
-    borderWidth: 1,
-    borderColor: 'muted',
-  }}
->
-  <Text lx={{ color: 'base', fontSize: 'body-2' }}>Styled with design tokens</Text>
-</Box>;
-```
+
+- [Style System](https://lumen-ldls.vercel.app/?path=/docs/react-native_style-system-style-system--docs) - high level guidelines
+- [useTheme](https://lumen-ldls.vercel.app/?path=/docs/react-native_style-system-usetheme--docs) - useTheme hook
+- [useStyleSheet](https://lumen-ldls.vercel.app/?path=/docs/react-native_style-system-usestylesheet--docs) - useStyleSheet
+- [lx property](https://lumen-ldls.vercel.app/?path=/docs/react-native_style-system-lx--docs) - lx property
+
 
 ---
 

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

package/dist/src/lib/Components/TabBar/TabBar.d.ts

@@ -7,7 +7,7 @@ export declare const TAB_BAR_HEIGHT = 60;
  * @example
  * <TabBarItem value="home" label="Home" icon={HomeFill} activeIcon={HomeActive} />
  */
-export declare function TabBarItem({ value, label, icon, activeIcon, }: TabBarItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabBarItem({ value, label, icon, activeIcon, style, ...props }: TabBarItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace TabBarItem {
     var displayName: string;
 }

package/dist/src/lib/Components/TabBar/TabBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/TabBar.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEvD,eAAO,MAAM,cAAc,KAAK,CAAC;AAGjC;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,GACX,EAAE,eAAe,2CA+FjB;yBApGe,UAAU;;;AAwG1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAsFb"}
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/TabBar.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEvD,eAAO,MAAM,cAAc,KAAK,CAAC;AAGjC;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,2CAgGjB;yBAvGe,UAAU;;;AA2G1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAsFb"}

package/dist/src/lib/Components/TabBar/TabBar.js

@@ -16,7 +16,7 @@ const PILL_INSET = 4;
  * @example
  * <TabBarItem value="home" label="Home" icon={HomeFill} activeIcon={HomeActive} />
  */
-export function TabBarItem({ value, label, icon, activeIcon, }) {
+export function TabBarItem({ value, label, icon, activeIcon, style, ...props }) {
     const styles = useStyles();
     const { active, onTabPress } = useTabBarContext();
     const isActive = active === value;
@@ -56,7 +56,7 @@ export function TabBarItem({ value, label, icon, activeIcon, }) {
     const inactiveIconStyle = useAnimatedStyle(() => ({
         opacity: 1 - activeProgress.value,
     }), [activeProgress]);
-    return (_jsxs(Pressable, { style: styles.item, onPress: onPress, onPressIn: onPressIn, onPressOut: onPressOut, accessibilityRole: 'tab', accessibilityLabel: label ?? value, accessibilityState: { selected: isActive }, children: [_jsx(Animated.View, { style: scaleStyle, children: _jsxs(Box, { style: styles.itemIconContainer, children: [_jsx(Animated.View, { style: [styles.itemIcon, inactiveIconStyle], children: _jsx(Icon, { size: 20 }) }), _jsx(Animated.View, { style: [styles.itemIcon, activeIconStyle], children: _jsx(ActiveIcon, { size: 20 }) })] }) }), label && (_jsx(Text, { style: [styles.itemText, isActive && styles.activeItemText], numberOfLines: 1, children: label }))] }));
+    return (_jsxs(Pressable, { style: StyleSheet.flatten([styles.item, style]), onPress: onPress, onPressIn: onPressIn, onPressOut: onPressOut, accessibilityRole: 'tab', accessibilityLabel: label ?? value, accessibilityState: { selected: isActive }, ...props, children: [_jsx(Animated.View, { style: scaleStyle, children: _jsxs(Box, { style: styles.itemIconContainer, children: [_jsx(Animated.View, { style: [styles.itemIcon, inactiveIconStyle], children: _jsx(Icon, { size: 20 }) }), _jsx(Animated.View, { style: [styles.itemIcon, activeIconStyle], children: _jsx(ActiveIcon, { size: 20 }) })] }) }), label && (_jsx(Text, { style: [styles.itemText, isActive && styles.activeItemText], numberOfLines: 1, children: label }))] }));
 }
 TabBarItem.displayName = 'TabBarItem';
 /**

package/dist/src/lib/Components/TabBar/types.d.ts

@@ -1,4 +1,5 @@
 import { ComponentType, ReactNode } from 'react';
+import { StyledViewProps } from '../../../styles';
 import { IconSize } from '../Icon';
 import { BoxProps } from '../Utility';
 type IconComponent = ComponentType<{
@@ -24,7 +25,7 @@ export type TabBarItemProps = {
      * If not provided, the inactive icon will be used.
      */
     activeIcon?: IconComponent;
-};
+} & Omit<StyledViewProps, 'children'>;
 export type TabBarProps = {
     /**
      * The value of the currently active tab.

package/dist/src/lib/Components/TabBar/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC"}

package/dist/src/styles/theme/createStylesheetTheme.d.ts

@@ -1,9 +1,4 @@
 import { LumenStyleSheetTheme, LumenTheme } from '../types';
-import { AddEntriesNegative } from '../types/utility.types';
-/**
- *
- */
-export declare const getNegativeSpacings: <Input extends LumenTheme["spacings"], Output = AddEntriesNegative<Input>>(spacings?: Input) => Output;
 /**
  * The theme object from design-core is not directly compatible with React Native's StyleSheet.
  *

package/dist/src/styles/theme/createStylesheetTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createStylesheetTheme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme/createStylesheetTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,KAAK,SAAS,UAAU,CAAC,UAAU,CAAC,EACpC,MAAM,yCAEI,KAAK,KACd,MAIF,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,UACzB,UAAU,KAChB,oBAYF,CAAC"}
+{"version":3,"file":"createStylesheetTheme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme/createStylesheetTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI5D;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,UACzB,UAAU,KAChB,oBASF,CAAC"}

package/dist/src/styles/theme/createStylesheetTheme.js

@@ -1,9 +1,5 @@
-/**
- *
- */
-export const getNegativeSpacings = (spacings = {}) => {
-    return Object.fromEntries(Object.entries(spacings).map(([key, value]) => [`-${key}`, value * -1]));
-};
+import { resolveFontWeights } from './resolvers/resolveFontWeights';
+import { resolveNegativeSpacing } from './resolvers/resolveNegativeSpacing';
 /**
  * The theme object from design-core is not directly compatible with React Native's StyleSheet.
  *
@@ -15,13 +11,10 @@ export const getNegativeSpacings = (spacings = {}) => {
 export const createStylesheetTheme = (theme) => {
     return {
         ...theme,
-        spacings: {
-            ...theme?.spacings,
-            ...getNegativeSpacings(theme?.spacings),
-        },
-        typographies: {
+        spacings: resolveNegativeSpacing(theme?.spacings),
+        typographies: resolveFontWeights({
             ...theme.typographies.xs.heading,
             ...theme.typographies.xs.body,
-        },
+        }),
     };
 };

package/dist/src/styles/theme/index.d.ts

@@ -1,2 +1,2 @@
-export { createStylesheetTheme, getNegativeSpacings, } from './createStylesheetTheme';
+export { createStylesheetTheme } from './createStylesheetTheme';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/styles/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/src/styles/theme/index.js

@@ -1 +1 @@
-export { createStylesheetTheme, getNegativeSpacings, } from './createStylesheetTheme';
+export { createStylesheetTheme } from './createStylesheetTheme';

package/dist/src/styles/theme/resolvers/resolveFontWeights.d.ts

@@ -0,0 +1,14 @@
+import { LumenTypographyTokens } from '../../types';
+export declare const FONT_WEIGHT_SUFFIX_MAP: {
+    '100': string;
+    '200': string;
+    '300': string;
+    '400': string;
+    '500': string;
+    '600': string;
+    '700': string;
+    '800': string;
+    '900': string;
+};
+export declare const resolveFontWeights: (typographies: LumenTypographyTokens) => LumenTypographyTokens;
+//# sourceMappingURL=resolveFontWeights.d.ts.map

package/dist/src/styles/theme/resolvers/resolveFontWeights.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveFontWeights.d.ts","sourceRoot":"","sources":["../../../../../src/styles/theme/resolvers/resolveFontWeights.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAEpD,eAAO,MAAM,sBAAsB;;;;;;;;;;CAUlC,CAAC;AAEF,eAAO,MAAM,kBAAkB,iBAAkB,qBAAqB,0BAwBrE,CAAC"}

package/dist/src/styles/theme/resolvers/resolveFontWeights.js

@@ -0,0 +1,30 @@
+import { RuntimeConstants } from '../../../lib/utils';
+export const FONT_WEIGHT_SUFFIX_MAP = {
+    '100': 'Thin',
+    '200': 'ExtraLight',
+    '300': 'Light',
+    '400': '',
+    '500': 'Medium',
+    '600': 'SemiBold',
+    '700': 'Bold',
+    '800': 'ExtraBold',
+    '900': 'Black',
+};
+export const resolveFontWeights = (typographies) => {
+    if (RuntimeConstants.isAndroid || RuntimeConstants.isBrowser) {
+        return typographies;
+    }
+    return Object.fromEntries(Object.entries(typographies).map(([key, value]) => {
+        const reactNativeFontWeight = FONT_WEIGHT_SUFFIX_MAP[value.fontWeight];
+        const concatenatedFontFamily = reactNativeFontWeight
+            ? [value.fontFamily, reactNativeFontWeight].join('-')
+            : value.fontFamily;
+        return [
+            key,
+            {
+                ...value,
+                fontFamily: concatenatedFontFamily,
+            },
+        ];
+    }));
+};

package/dist/src/styles/theme/resolvers/resolveNegativeSpacing.d.ts

@@ -0,0 +1,4 @@
+import { LumenTheme } from '../../types';
+import { AddEntriesNegative } from '../../types/utility.types';
+export declare const resolveNegativeSpacing: <Input extends LumenTheme["spacings"], Output = AddEntriesNegative<Input>>(spacings?: Input) => Output;
+//# sourceMappingURL=resolveNegativeSpacing.d.ts.map

package/dist/src/styles/theme/resolvers/resolveNegativeSpacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveNegativeSpacing.d.ts","sourceRoot":"","sources":["../../../../../src/styles/theme/resolvers/resolveNegativeSpacing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,sBAAsB,GACjC,KAAK,SAAS,UAAU,CAAC,UAAU,CAAC,EACpC,MAAM,yCAEI,KAAK,KACd,MAOF,CAAC"}

package/dist/src/styles/theme/resolvers/resolveNegativeSpacing.js

@@ -0,0 +1,6 @@
+export const resolveNegativeSpacing = (spacings = {}) => {
+    return {
+        ...spacings,
+        ...Object.fromEntries(Object.entries(spacings).map(([key, value]) => [`-${key}`, value * -1])),
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.80",
+  "version": "0.1.0",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

package/src/lib/Components/TabBar/TabBar.tsx

@@ -30,6 +30,8 @@ export function TabBarItem({
   label,
   icon,
   activeIcon,
+  style,
+  ...props
 }: TabBarItemProps) {
   const styles = useStyles();
   const { active, onTabPress } = useTabBarContext();
@@ -97,13 +99,14 @@ export function TabBarItem({
 
   return (
     <Pressable
-      style={styles.item}
+      style={StyleSheet.flatten([styles.item, style])}
       onPress={onPress}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       accessibilityRole='tab'
       accessibilityLabel={label ?? value}
       accessibilityState={{ selected: isActive }}
+      {...props}
     >
       <Animated.View style={scaleStyle}>
         <Box style={styles.itemIconContainer}>

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

@@ -1,4 +1,5 @@
 import { ComponentType, ReactNode } from 'react';
+import { StyledViewProps } from '../../../styles';
 import { IconSize } from '../Icon';
 import { BoxProps } from '../Utility';
 
@@ -26,7 +27,7 @@ export type TabBarItemProps = {
    * If not provided, the inactive icon will be used.
    */
   activeIcon?: IconComponent;
-};
+} & Omit<StyledViewProps, 'children'>;
 
 export type TabBarProps = {
   /**

package/src/styles/theme/createStylesheetTheme.test.ts

@@ -1,27 +1,9 @@
-import { describe, it, expect } from '@jest/globals';
+import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
-import {
-  getNegativeSpacings,
-  createStylesheetTheme,
-} from './createStylesheetTheme';
+import { RuntimeConstants } from '../../lib/utils';
+import { createStylesheetTheme } from './createStylesheetTheme';
 
 describe('createStylesheetTheme', () => {
-  describe('getNegativeSpacings', () => {
-    it('should create negative entries for each spacing', () => {
-      const spacings = {
-        s4: 4,
-        s8: 8,
-        s16: 16,
-      } as typeof ledgerLiveThemes.dark.spacings;
-
-      const result = getNegativeSpacings(spacings);
-
-      expect(result['-s4']).toBe(-4);
-      expect(result['-s8']).toBe(-8);
-      expect(result['-s16']).toBe(-16);
-    });
-  });
-
   describe('createStylesheetTheme', () => {
     it('should include both positive and negative spacings', () => {
       const theme = ledgerLiveThemes.dark;
@@ -33,6 +15,7 @@ describe('createStylesheetTheme', () => {
     });
 
     it('should flatten heading/body typography tokens', () => {
+      jest.spyOn(RuntimeConstants, 'isAndroid', 'get').mockReturnValue(true);
       const theme = ledgerLiveThemes.dark;
 
       const result = createStylesheetTheme(theme);

package/src/styles/theme/createStylesheetTheme.ts

@@ -1,19 +1,6 @@
 import { LumenStyleSheetTheme, LumenTheme } from '../types';
-import { AddEntriesNegative } from '../types/utility.types';
-
-/**
- *
- */
-export const getNegativeSpacings = <
-  Input extends LumenTheme['spacings'],
-  Output = AddEntriesNegative<Input>,
->(
-  spacings: Input = {} as Input,
-): Output => {
-  return Object.fromEntries(
-    Object.entries(spacings).map(([key, value]) => [`-${key}`, value * -1]),
-  ) as Output;
-};
+import { resolveFontWeights } from './resolvers/resolveFontWeights';
+import { resolveNegativeSpacing } from './resolvers/resolveNegativeSpacing';
 
 /**
  * The theme object from design-core is not directly compatible with React Native's StyleSheet.
@@ -28,13 +15,10 @@ export const createStylesheetTheme = (
 ): LumenStyleSheetTheme => {
   return {
     ...theme,
-    spacings: {
-      ...theme?.spacings,
-      ...getNegativeSpacings(theme?.spacings),
-    },
-    typographies: {
+    spacings: resolveNegativeSpacing(theme?.spacings),
+    typographies: resolveFontWeights({
       ...theme.typographies.xs.heading,
       ...theme.typographies.xs.body,
-    },
+    }),
   };
 };

package/src/styles/theme/index.ts

@@ -1,4 +1 @@
-export {
-  createStylesheetTheme,
-  getNegativeSpacings,
-} from './createStylesheetTheme';
+export { createStylesheetTheme } from './createStylesheetTheme';

package/src/styles/theme/resolvers/resolveFontWeights.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect, afterEach, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { RuntimeConstants } from '../../../lib/utils';
+import { createStylesheetTheme } from '../createStylesheetTheme';
+import { FONT_WEIGHT_SUFFIX_MAP } from './resolveFontWeights';
+
+describe('resolveTypographies', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should not modify fontFamily on android', () => {
+    jest.spyOn(RuntimeConstants, 'isAndroid', 'get').mockReturnValue(true);
+    const theme = ledgerLiveThemes.dark;
+
+    const result = createStylesheetTheme(theme);
+
+    const typographyTokens = theme.typographies.xs ?? theme.typographies.sm;
+    const firstKey = Object.keys(
+      typographyTokens.heading,
+    )[0] as keyof typeof typographyTokens.heading;
+    expect(result.typographies[firstKey].fontFamily).toBe(
+      typographyTokens.heading[firstKey].fontFamily,
+    );
+  });
+
+  it('should append weight suffix to fontFamily on non-android', () => {
+    jest.spyOn(RuntimeConstants, 'isAndroid', 'get').mockReturnValue(false);
+    const theme = ledgerLiveThemes.dark;
+
+    const result = createStylesheetTheme(theme);
+
+    Object.values(result.typographies).forEach((typography) => {
+      const { fontFamily, fontWeight } = typography as {
+        fontFamily: string;
+        fontWeight: string;
+      };
+
+      const expectedSuffix =
+        FONT_WEIGHT_SUFFIX_MAP[
+          fontWeight as keyof typeof FONT_WEIGHT_SUFFIX_MAP
+        ] ?? '';
+      expect(fontFamily).toContain(expectedSuffix);
+    });
+  });
+
+  it('should not modify other typography properties on non-android', () => {
+    jest.spyOn(RuntimeConstants, 'isAndroid', 'get').mockReturnValue(false);
+    const theme = ledgerLiveThemes.dark;
+
+    const result = createStylesheetTheme(theme);
+    const typographyTokens = theme.typographies.xs ?? theme.typographies.sm;
+    const allTokens = {
+      ...typographyTokens.heading,
+      ...typographyTokens.body,
+    };
+
+    Object.entries(result.typographies).forEach(([key, resolved]) => {
+      const original = allTokens[key as keyof typeof allTokens];
+      const { fontFamily: _f, ...resolvedRest } = resolved as Record<
+        string,
+        unknown
+      >;
+      const { fontFamily: _o, ...originalRest } = original as Record<
+        string,
+        unknown
+      >;
+      expect(resolvedRest).toEqual(originalRest);
+    });
+  });
+});

package/src/styles/theme/resolvers/resolveFontWeights.ts

@@ -0,0 +1,40 @@
+import { RuntimeConstants } from '../../../lib/utils';
+import { LumenTypographyTokens } from '../../types';
+
+export const FONT_WEIGHT_SUFFIX_MAP = {
+  '100': 'Thin',
+  '200': 'ExtraLight',
+  '300': 'Light',
+  '400': '',
+  '500': 'Medium',
+  '600': 'SemiBold',
+  '700': 'Bold',
+  '800': 'ExtraBold',
+  '900': 'Black',
+};
+
+export const resolveFontWeights = (typographies: LumenTypographyTokens) => {
+  if (RuntimeConstants.isAndroid || RuntimeConstants.isBrowser) {
+    return typographies;
+  }
+
+  return Object.fromEntries(
+    Object.entries(typographies).map(([key, value]) => {
+      const reactNativeFontWeight =
+        FONT_WEIGHT_SUFFIX_MAP[
+          value.fontWeight as keyof typeof FONT_WEIGHT_SUFFIX_MAP
+        ];
+      const concatenatedFontFamily = reactNativeFontWeight
+        ? [value.fontFamily, reactNativeFontWeight].join('-')
+        : value.fontFamily;
+
+      return [
+        key,
+        {
+          ...value,
+          fontFamily: concatenatedFontFamily,
+        },
+      ];
+    }),
+  ) as LumenTypographyTokens;
+};

package/src/styles/theme/resolvers/resolveNegativeSpacing.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { resolveNegativeSpacing } from './resolveNegativeSpacing';
+
+describe('resolveNegativeSpacing', () => {
+  it('should create negative entries for each spacing', () => {
+    const spacings = {
+      s4: 4,
+      s8: 8,
+      s16: 16,
+    } as typeof ledgerLiveThemes.dark.spacings;
+
+    const result = resolveNegativeSpacing(spacings);
+
+    /**
+     * Keep positive entries
+     */
+    expect(result['s4']).toBe(4);
+    expect(result['s8']).toBe(8);
+    expect(result['s16']).toBe(16);
+
+    /**
+     * Create negative entries
+     */
+    expect(result['-s4']).toBe(-4);
+    expect(result['-s8']).toBe(-8);
+    expect(result['-s16']).toBe(-16);
+  });
+});

package/src/styles/theme/resolvers/resolveNegativeSpacing.ts

@@ -0,0 +1,16 @@
+import { LumenTheme } from '../../types';
+import { AddEntriesNegative } from '../../types/utility.types';
+
+export const resolveNegativeSpacing = <
+  Input extends LumenTheme['spacings'],
+  Output = AddEntriesNegative<Input>,
+>(
+  spacings: Input = {} as Input,
+): Output => {
+  return {
+    ...spacings,
+    ...Object.fromEntries(
+      Object.entries(spacings).map(([key, value]) => [`-${key}`, value * -1]),
+    ),
+  } as Output;
+};

package/dist/src/lib/StyleSystem/index.d.ts

@@ -1,2 +0,0 @@
-export * from './lx';
-//# sourceMappingURL=index.d.ts.map

package/dist/src/lib/StyleSystem/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/StyleSystem/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAC"}

package/dist/src/lib/StyleSystem/index.js

@@ -1 +0,0 @@
-export * from './lx';

package/dist/src/lib/StyleSystem/lx/BorderRadius/BorderRadiusTable.d.ts

@@ -1,2 +0,0 @@
-export declare const BorderRadiusTable: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=BorderRadiusTable.d.ts.map

package/dist/src/lib/StyleSystem/lx/BorderRadius/BorderRadiusTable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BorderRadiusTable.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/StyleSystem/lx/BorderRadius/BorderRadiusTable.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,+CAgD7B,CAAC"}