@ledgerhq/lumen-ui-rnative 0.0.43 → 0.0.45

package/src/styles/factories/createStyledView.test.tsx

@@ -42,10 +42,12 @@ describe('createStyledView', () => {
     renderWithProvider(
       <StyledView
         testID='view'
-        padding='s16'
-        width='s48'
-        backgroundColor='surface'
-        borderRadius='md'
+        lx={{
+          padding: 's16',
+          width: 's48',
+          backgroundColor: 'surface',
+          borderRadius: 'md',
+        }}
       />,
     );
 
@@ -59,20 +61,23 @@ describe('createStyledView', () => {
   });
 
   it('should resolve full size token to 100%', () => {
-    renderWithProvider(<StyledView testID='view' width='full' />);
+    renderWithProvider(<StyledView testID='view' lx={{ width: 'full' }} />);
     expect(screen.getByTestId('view').props.style.width).toBe('100%');
   });
 
   it('should merge style prop with resolved tokens', () => {
     renderWithProvider(
-      <StyledView testID='view' padding='s16' style={{ opacity: 0.5 }} />,
+      <StyledView
+        testID='view'
+        lx={{ padding: 's16' }}
+        style={{ opacity: 0.5 }}
+      />,
     );
 
-    const [stylesFromProps, otherStyles] =
-      screen.getByTestId('view').props.style;
+    const style = screen.getByTestId('view').props.style;
 
-    expect(stylesFromProps.padding).toBe(16);
-    expect(otherStyles.opacity).toBe(0.5);
+    expect(style.padding).toBe(16);
+    expect(style.opacity).toBe(0.5);
   });
 
   it('should forward ref', () => {
@@ -88,10 +93,10 @@ describe('createStyledView', () => {
         renderCount();
         return <View {...props} />;
       };
-      const StyledTracked = createStyledView(TrackedView);
+      const StyledTracked = createStyledView(TrackedView as any);
 
       const { rerender } = renderWithProvider(
-        <StyledTracked testID='view' padding='s16' />,
+        <StyledTracked testID='view' lx={{ padding: 's16' }} />,
       );
 
       expect(renderCount).toHaveBeenCalledTimes(1);
@@ -99,7 +104,7 @@ describe('createStyledView', () => {
       // Re-render with same props
       rerender(
         <LumenStyleSheetProvider themes={testThemes}>
-          <StyledTracked testID='view' padding='s16' />
+          <StyledTracked testID='view' lx={{ padding: 's16' }} />
         </LumenStyleSheetProvider>,
       );
 
@@ -113,10 +118,11 @@ describe('createStyledView', () => {
         renderCount();
         return <View {...props} />;
       };
-      const StyledTracked = createStyledView(TrackedView);
+
+      const StyledTracked = createStyledView(TrackedView as any);
 
       const { rerender } = renderWithProvider(
-        <StyledTracked testID='view' padding='s16' />,
+        <StyledTracked testID='view' lx={{ padding: 's16' }} />,
       );
 
       expect(renderCount).toHaveBeenCalledTimes(1);
@@ -124,7 +130,7 @@ describe('createStyledView', () => {
       // Re-render with different props
       rerender(
         <LumenStyleSheetProvider themes={testThemes}>
-          <StyledTracked testID='view' width='s48' />
+          <StyledTracked testID='view' lx={{ width: 's48' }} />
         </LumenStyleSheetProvider>,
       );
 

package/src/styles/factories/createStyledView.tsx

@@ -1,67 +1,33 @@
-import React, { forwardRef, memo, MemoExoticComponent } from 'react';
-import type { View, ViewProps, ViewStyle } from 'react-native';
+import React, { forwardRef, memo } from 'react';
+import { StyleSheet, View, type ViewProps } from 'react-native';
 import { useTheme } from '../Provider/useTheme';
-import {
-  resolveViewStyle,
-  extractLumenViewStyleProps,
-} from '../resolveStyle/resolveStyle';
-import type { LumenViewProps } from '../types';
+import { resolveViewStyle } from '../resolveStyle/resolveStyle';
+import type { LumenViewStyleLX } from '../types';
+import { areLxPropsEqual } from './areLxPropsEqual';
 
 type ViewRef = React.ElementRef<typeof View>;
-type ReturnComponentType = MemoExoticComponent<
-  React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<LumenViewProps> & React.RefAttributes<ViewRef>
-  >
->;
+export type StyledViewProps = LumenViewStyleLX & ViewProps;
+
 /**
  * Factory function to create a styled View component.
  *
- * Creates a component that accepts token-constrained style props directly,
- * resolving them to actual values at runtime using the current theme.
- *
- * @param Component - The base View-like component to wrap
- *
- * @example
  * ```tsx
- * import { View } from 'react-native';
- * import { createStyledView } from '@ledgerhq/lumen-ui-rnative/styles';
- *
- * // Create a basic Box
- * const Box = createStyledView(View);
- *
- * // Usage - token props are resolved to actual values
- * <Box width='s400' marginTop='s4' gap='s12' alignItems='center' />
- * <Box padding='s16' backgroundColor='surface' borderRadius='md'>
- *   Content
- * </Box>
- *
- * // style prop for escape hatch
- * <Box marginTop='s4' style={{ width: 127 }} />
+ * // Create a basic View
+ * const StyledView = createStyledView(View);
  * ```
  */
-export const createStyledView = (
-  Component: React.ComponentType<LumenViewProps>,
-): ReturnComponentType => {
+export const createStyledView = (Component: typeof View) => {
   const StyledComponent = memo(
-    forwardRef<ViewRef, LumenViewProps>((props, ref) => {
-      const { theme } = useTheme();
-
-      const { lumenStyle, rest } = extractLumenViewStyleProps(props);
-      const resolvedStyle = resolveViewStyle(theme, lumenStyle);
-
-      const { style: propsStyle, ...componentProps } = rest;
-      const style = propsStyle
-        ? ([resolvedStyle, propsStyle] as ViewStyle[])
-        : resolvedStyle;
+    forwardRef<ViewRef, StyledViewProps>(
+      ({ lx = {}, style, ...props }, ref) => {
+        const { theme } = useTheme();
+        const resolvedStyle = resolveViewStyle(theme, lx);
+        const finalStyle = StyleSheet.flatten([resolvedStyle, style]);
 
-      return (
-        <Component
-          {...({ ...componentProps, ref, style } as ViewProps & {
-            ref: React.Ref<View>;
-          })}
-        />
-      );
-    }),
+        return <Component ref={ref} {...props} style={finalStyle} />;
+      },
+    ),
+    areLxPropsEqual,
   );
 
   // Set display name for debugging

package/src/styles/factories/index.ts

@@ -0,0 +1,3 @@
+export * from './createStyledPressable';
+export * from './createStyledText';
+export * from './createStyledView';

package/src/styles/index.ts

@@ -1,6 +1,5 @@
 export { LumenStyleSheetProvider } from './Provider/LumenStyleSheetProvider';
 export { LumenStyleSheet } from './LumenStyleSheet';
 export * from './types';
-export * from './factories/createStyledText';
-export * from './factories/createStyledView';
-export * from './utils/styleVarianceAuthority';
+export * from './factories';
+export * from './utils';

package/src/styles/resolveStyle/resolveConfig.ts

@@ -1,9 +1,9 @@
-import { LumenTextStyleProps, LumenViewStyleProps } from '../types';
+import { LumenTextStyle, LumenViewStyle } from '../types';
 
 /**
  * Configuration for each style prop
  * - path: Theme path for token lookup (array of keys)
- * - spread: true for props that spread into multiple style properties (typo)
+ * - spread: true for props that spread into multiple style properties (typography)
  * - No path = passthrough prop (value passed as-is)
  */
 export type PropConfig = {
@@ -14,7 +14,7 @@ export type PropConfig = {
 /**
  * View style props configuration
  */
-export const VIEW_PROP_CONFIG: Record<keyof LumenViewStyleProps, PropConfig> = {
+export const VIEW_PROP_CONFIG: Record<keyof LumenViewStyle, PropConfig> = {
   // Spacing props
   padding: { path: ['spacings'] },
   paddingTop: { path: ['spacings'] },
@@ -37,6 +37,13 @@ export const VIEW_PROP_CONFIG: Record<keyof LumenViewStyleProps, PropConfig> = {
   gap: { path: ['spacings'] },
   rowGap: { path: ['spacings'] },
   columnGap: { path: ['spacings'] },
+  position: {},
+  top: { path: ['spacings'] },
+  bottom: { path: ['spacings'] },
+  left: { path: ['spacings'] },
+  right: { path: ['spacings'] },
+  start: { path: ['spacings'] },
+  end: { path: ['spacings'] },
 
   // Size props
   width: { path: ['sizes'] },
@@ -88,13 +95,7 @@ export const VIEW_PROP_CONFIG: Record<keyof LumenViewStyleProps, PropConfig> = {
   flexGrow: {},
   flexShrink: {},
   flexBasis: {},
-  position: {},
-  top: {},
-  bottom: {},
-  left: {},
-  right: {},
-  start: {},
-  end: {},
+
   zIndex: {},
   overflow: {},
   display: {},
@@ -105,12 +106,12 @@ export const VIEW_PROP_CONFIG: Record<keyof LumenViewStyleProps, PropConfig> = {
 } as const;
 
 /**
- * Text style props configuration (extends view props + color + typo)
+ * Text style props configuration (extends view props + color + typography)
  */
-export const TEXT_PROP_CONFIG: Record<keyof LumenTextStyleProps, PropConfig> = {
+export const TEXT_PROP_CONFIG: Record<keyof LumenTextStyle, PropConfig> = {
   ...VIEW_PROP_CONFIG,
   color: { path: ['colors', 'text'] },
-  typo: { path: ['typographies'], spread: true },
+  typography: { path: ['typographies'], spread: true },
   textAlign: {},
   textTransform: {},
   textDecorationLine: {},
@@ -121,11 +122,11 @@ export const TEXT_PROP_CONFIG: Record<keyof LumenTextStyleProps, PropConfig> = {
  */
 export const LUMEN_VIEW_STYLE_PROPS = new Set(
   Object.keys(VIEW_PROP_CONFIG),
-) as Set<keyof LumenViewStyleProps>;
+) as Set<keyof LumenViewStyle>;
 
 /**
  * Set for O(1) text prop lookup
  */
 export const LUMEN_TEXT_STYLE_PROPS = new Set(
   Object.keys(TEXT_PROP_CONFIG),
-) as Set<keyof LumenTextStyleProps>;
+) as Set<keyof LumenTextStyle>;

package/src/styles/resolveStyle/resolveStyle.test.ts

@@ -2,12 +2,7 @@ import { describe, expect, it } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import type { BoxShadowValue } from 'react-native';
 import { createStylesheetTheme } from '../Provider/createStylesheetTheme';
-import {
-  resolveViewStyle,
-  resolveTextStyle,
-  extractLumenViewStyleProps,
-  extractLumenTextStyleProps,
-} from './resolveStyle';
+import { resolveViewStyle, resolveTextStyle } from './resolveStyle';
 
 /**
  * Use actual theme from design-core for type-safe testing
@@ -306,17 +301,17 @@ describe('resolve-style', () => {
       it('should pass through position props unchanged', () => {
         const result = resolveViewStyle(mockTheme, {
           position: 'absolute',
-          top: 10,
-          bottom: 20,
-          left: 30,
-          right: 40,
+          top: 's10',
+          bottom: 's20',
+          left: 's32',
+          right: 's40',
           zIndex: 100,
         });
 
         expect(result.position).toBe('absolute');
         expect(result.top).toBe(10);
         expect(result.bottom).toBe(20);
-        expect(result.left).toBe(30);
+        expect(result.left).toBe(32);
         expect(result.right).toBe(40);
         expect(result.zIndex).toBe(100);
       });
@@ -324,8 +319,8 @@ describe('resolve-style', () => {
       it('should pass through RTL position props unchanged', () => {
         const result = resolveViewStyle(mockTheme, {
           position: 'absolute',
-          start: 10,
-          end: 20,
+          start: 's10',
+          end: 's20',
         });
 
         expect(result.position).toBe('absolute');
@@ -440,8 +435,8 @@ describe('resolve-style', () => {
       expect(result.color).toBe(mockTheme.colors.text.muted);
     });
 
-    it('should resolve typography typo', () => {
-      const result = resolveTextStyle(mockTheme, { typo: 'body1' });
+    it('should resolve typography typography', () => {
+      const result = resolveTextStyle(mockTheme, { typography: 'body1' });
 
       expect(result.fontSize).toBe(mockTheme.typographies.body1.fontSize);
       expect(result.fontWeight).toBe(mockTheme.typographies.body1.fontWeight);
@@ -456,7 +451,7 @@ describe('resolve-style', () => {
         color: 'active',
         marginTop: 's8',
         padding: 's4',
-        typo: 'heading1',
+        typography: 'heading1',
       });
 
       expect(result.color).toBe(mockTheme.colors.text.active);
@@ -471,7 +466,7 @@ describe('resolve-style', () => {
       );
     });
 
-    it('should handle text without typo', () => {
+    it('should handle text without typography', () => {
       const result = resolveTextStyle(mockTheme, {
         color: 'base',
         padding: 's8',
@@ -509,7 +504,7 @@ describe('resolve-style', () => {
     it('should combine all text style props', () => {
       const result = resolveTextStyle(mockTheme, {
         color: 'active',
-        typo: 'body1',
+        typography: 'body1',
         textAlign: 'center',
         textTransform: 'uppercase',
         textDecorationLine: 'underline',
@@ -522,127 +517,4 @@ describe('resolve-style', () => {
       expect(result.textDecorationLine).toBe('underline');
     });
   });
-
-  describe('extractLumenViewStyleProps', () => {
-    it('should extract spacing props from mixed props', () => {
-      const props = {
-        padding: 's16',
-        marginTop: 's8',
-        customProp: 'test-value',
-        callback: () => 'result',
-      } as const;
-
-      const { lumenStyle, rest } = extractLumenViewStyleProps(props);
-
-      expect(lumenStyle.padding).toBe('s16');
-      expect(lumenStyle.marginTop).toBe('s8');
-      expect(rest).toEqual({
-        customProp: 'test-value',
-        callback: expect.any(Function),
-      });
-    });
-
-    it('should extract all style props', () => {
-      const props = {
-        padding: 's16',
-        width: 's192',
-        backgroundColor: 'surface',
-        borderColor: 'muted',
-        borderRadius: 'md',
-        boxShadow: 'sm',
-        flex: 1,
-        flexDirection: 'row',
-        customProp: 'test',
-      } as const;
-
-      const { lumenStyle, rest } = extractLumenViewStyleProps(props);
-
-      expect(lumenStyle).toEqual({
-        padding: 's16',
-        width: 's192',
-        backgroundColor: 'surface',
-        borderColor: 'muted',
-        borderRadius: 'md',
-        boxShadow: 'sm',
-        flex: 1,
-        flexDirection: 'row',
-      });
-      expect(rest).toEqual({ customProp: 'test' });
-    });
-
-    it('should handle empty props', () => {
-      const { lumenStyle, rest } = extractLumenViewStyleProps({});
-
-      expect(lumenStyle).toEqual({});
-      expect(rest).toEqual({});
-    });
-
-    it('should handle props with no style props', () => {
-      const props = {
-        customProp: 'test',
-        anotherProp: true,
-        padding: undefined,
-      };
-
-      const { lumenStyle, rest } = extractLumenViewStyleProps(props);
-
-      expect(lumenStyle).toEqual({ padding: undefined });
-      expect(rest).toEqual({
-        customProp: 'test',
-        anotherProp: true,
-      });
-    });
-  });
-
-  describe('extractLumenTextStyleProps', () => {
-    it('should extract color prop in addition to view style props', () => {
-      const props = {
-        color: 'muted',
-        padding: 's8',
-        customProp: 'test-text',
-      } as const;
-
-      const { lumenStyle, rest } = extractLumenTextStyleProps(props);
-
-      expect(lumenStyle.color).toBe('muted');
-      expect(lumenStyle.padding).toBe('s8');
-      expect(rest).toEqual({ customProp: 'test-text' });
-    });
-
-    it('should extract typo prop', () => {
-      const props = {
-        typo: 'body1',
-        color: 'muted',
-        customProp: 'test',
-      } as const;
-
-      const { lumenStyle, rest } = extractLumenTextStyleProps(props);
-
-      expect(lumenStyle.typo).toBe('body1');
-      expect(lumenStyle.color).toBe('muted');
-      expect(rest).toEqual({ customProp: 'test' });
-    });
-
-    it('should extract all text style props', () => {
-      const props = {
-        typo: 'heading1',
-        color: 'active',
-        padding: 's16',
-        marginTop: 's8',
-        backgroundColor: 'surface',
-        customProp: 2,
-      } as const;
-
-      const { lumenStyle, rest } = extractLumenTextStyleProps(props);
-
-      expect(lumenStyle).toEqual({
-        typo: 'heading1',
-        color: 'active',
-        padding: 's16',
-        marginTop: 's8',
-        backgroundColor: 'surface',
-      });
-      expect(rest).toEqual({ customProp: 2 });
-    });
-  });
 });

package/src/styles/resolveStyle/resolveStyle.ts

@@ -1,16 +1,11 @@
 import { getObjectPath } from '@ledgerhq/lumen-utils-shared';
-import type { ViewStyle, TextStyle, ViewProps, TextProps } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
 import type {
   LumenStyleSheetTheme,
-  LumenTextStyleProps,
-  LumenViewStyleProps,
+  LumenTextStyle,
+  LumenViewStyle,
 } from '../types';
-import {
-  VIEW_PROP_CONFIG,
-  TEXT_PROP_CONFIG,
-  LUMEN_VIEW_STYLE_PROPS,
-  LUMEN_TEXT_STYLE_PROPS,
-} from './resolveConfig';
+import { VIEW_PROP_CONFIG, TEXT_PROP_CONFIG } from './resolveConfig';
 
 /**
  * Unified style resolver
@@ -18,7 +13,7 @@ import {
  */
 const resolveStyle = <T extends ViewStyle | TextStyle>(
   theme: LumenStyleSheetTheme,
-  lumenStyle: LumenViewStyleProps | LumenTextStyleProps,
+  lumenStyle: LumenViewStyle | LumenTextStyle,
   config: typeof VIEW_PROP_CONFIG | typeof TEXT_PROP_CONFIG,
 ): T => {
   const resolved: Record<string, unknown> = {};
@@ -39,7 +34,7 @@ const resolveStyle = <T extends ViewStyle | TextStyle>(
       value as string,
     ]);
 
-    // Spread props (like typo) merge into resolved styles
+    // Spread props (like typography) merge into resolved styles
     if (propConfig.spread && resolvedValue) {
       Object.assign(resolved, resolvedValue);
     } else {
@@ -51,62 +46,17 @@ const resolveStyle = <T extends ViewStyle | TextStyle>(
 };
 
 /**
- * Resolve LumenViewStyleProps to React Native ViewStyle
+ * Transform lx props to StyleSheet style object for View
  */
 export const resolveViewStyle = (
   theme: LumenStyleSheetTheme,
-  lumenStyle: LumenViewStyleProps,
+  lumenStyle: LumenViewStyle,
 ): ViewStyle => resolveStyle<ViewStyle>(theme, lumenStyle, VIEW_PROP_CONFIG);
 
 /**
- * Resolve LumenTextStyleProps to React Native TextStyle
+ * Transform lx props to StyleSheet style object for Text
  */
 export const resolveTextStyle = (
   theme: LumenStyleSheetTheme,
-  lumenStyle: LumenTextStyleProps,
+  lumenStyle: LumenTextStyle,
 ): TextStyle => resolveStyle<TextStyle>(theme, lumenStyle, TEXT_PROP_CONFIG);
-
-/**
- * Unified style props extractor
- * Loops only through input props with O(1) Set lookup
- */
-const extractStyleProps = <
-  StyleProps,
-  RestProps,
-  ReturnType = {
-    lumenStyle: StyleProps;
-    rest: RestProps;
-  },
->(
-  props: Record<string, unknown>,
-  stylePropsSet: Set<string>,
-): ReturnType => {
-  const lumenStyle: Record<string, unknown> = {};
-  const rest: Record<string, unknown> = {};
-
-  for (const key of Object.keys(props)) {
-    if (stylePropsSet.has(key)) {
-      lumenStyle[key] = props[key];
-    } else {
-      rest[key] = props[key];
-    }
-  }
-
-  return { lumenStyle, rest } as ReturnType;
-};
-
-/**
- * Extract styled view props from component props
- */
-export const extractLumenViewStyleProps = (
-  props: LumenViewStyleProps,
-): { lumenStyle: LumenViewStyleProps; rest: ViewProps } =>
-  extractStyleProps(props as Record<string, unknown>, LUMEN_VIEW_STYLE_PROPS);
-
-/**
- * Extract styled text props from component props
- */
-export const extractLumenTextStyleProps = (
-  props: LumenTextStyleProps,
-): { lumenStyle: LumenTextStyleProps; rest: TextProps } =>
-  extractStyleProps(props as Record<string, unknown>, LUMEN_TEXT_STYLE_PROPS);

package/src/styles/types/create.types.ts

@@ -8,7 +8,7 @@ type FlatLumensValues = {
   [propName in AllAvailableKeys]?: AllAvailableStyles[propName];
 };
 
-type LumensValues = FlatLumensValues;
+type LumensValues = FlatLumensValues | FlatLumensValues[];
 
 export type LumenStyleSheet = {
   [styleName: string]: