@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

package/src/styles/{create/useCreate.test.tsx → hooks/useStyleSheet.test.tsx}

@@ -2,9 +2,9 @@ import { describe, expect, it } from '@jest/globals';
 import { fireEvent, render, userEvent } from '@testing-library/react-native';
 import React, { useState } from 'react';
 import { ColorSchemeName, Pressable, Text, View } from 'react-native';
-import { LumenStyleSheetProvider } from '../Provider/LumenStyleSheetProvider';
-import { useTheme } from '../Provider/useTheme';
-import { useCreate } from './useCreate';
+import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
+import { useStyleSheet } from './useStyleSheet';
+import { useTheme } from './useTheme';
 
 // Wrapper that allows testing uncontrolled theme switching
 const TestProviderWrapper = ({
@@ -94,20 +94,23 @@ const testThemes: any = {
   },
 };
 
-describe('useCreate', () => {
+describe('useStyleSheet', () => {
   describe('Static styles', () => {
     it('creates static styles with theme tokens', () => {
       const TestComponent = (): React.JSX.Element => {
-        const styles = useCreate((theme: any) => ({
-          container: {
-            backgroundColor: theme.colors.bg.base,
-            padding: theme.spacings.s8,
-          },
-          text: {
-            color: theme.colors.text.base,
-            fontSize: 16,
-          },
-        }));
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            container: {
+              backgroundColor: theme.colors.bg.base,
+              padding: theme.spacings.s8,
+            },
+            text: {
+              color: theme.colors.text.base,
+              fontSize: 16,
+            },
+          }),
+          [],
+        );
 
         return (
           <View style={styles.container} testID='container'>
@@ -140,12 +143,15 @@ describe('useCreate', () => {
     it('updates styles when theme changes', async () => {
       const TestComponent = (): React.JSX.Element => {
         const { toggleColorScheme } = useTheme();
-        const styles = useCreate((theme: any) => ({
-          container: {
-            backgroundColor: theme.colors.bg.base,
-            borderColor: theme.colors.border.base,
-          },
-        }));
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            container: {
+              backgroundColor: theme.colors.bg.base,
+              borderColor: theme.colors.border.base,
+            },
+          }),
+          [],
+        );
 
         return (
           <View testID='wrapper'>
@@ -188,14 +194,17 @@ describe('useCreate', () => {
 
     it('handles nested theme properties', () => {
       const TestComponent = (): React.JSX.Element => {
-        const styles = useCreate((theme: any) => ({
-          card: {
-            backgroundColor: theme.colors.bg.surface,
-            padding: theme.spacings.s24,
-            borderWidth: 1,
-            borderColor: theme.colors.border.accent,
-          },
-        }));
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            card: {
+              backgroundColor: theme.colors.bg.surface,
+              padding: theme.spacings.s24,
+              borderWidth: 1,
+              borderColor: theme.colors.border.accent,
+            },
+          }),
+          [],
+        );
 
         return <View style={styles.card} testID='card' />;
       };
@@ -218,16 +227,19 @@ describe('useCreate', () => {
   describe('Dynamic functions', () => {
     it('creates dynamic styles with function parameters', () => {
       const TestComponent = (): React.JSX.Element => {
-        const styles = useCreate((theme: any) => ({
-          container: (width: number, highlighted: boolean) => ({
-            backgroundColor: highlighted
-              ? theme.colors.bg.accent
-              : theme.colors.bg.base,
-            width,
-            borderWidth: highlighted ? 2 : 1,
-            borderColor: theme.colors.border.accent,
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            container: (width: number, highlighted: boolean) => ({
+              backgroundColor: highlighted
+                ? theme.colors.bg.accent
+                : theme.colors.bg.base,
+              width,
+              borderWidth: highlighted ? 2 : 1,
+              borderColor: theme.colors.border.accent,
+            }),
           }),
-        }));
+          [],
+        );
 
         return (
           <View testID='wrapper'>
@@ -261,14 +273,17 @@ describe('useCreate', () => {
     it('updates dynamic styles when theme changes', () => {
       const TestComponent = (): React.JSX.Element => {
         const { setColorScheme } = useTheme();
-        const styles = useCreate((theme: any) => ({
-          container: (isActive: boolean) => ({
-            backgroundColor: isActive
-              ? theme.colors.bg.accent
-              : theme.colors.bg.base,
-            borderColor: theme.colors.border.base,
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            container: (isActive: boolean) => ({
+              backgroundColor: isActive
+                ? theme.colors.bg.accent
+                : theme.colors.bg.base,
+              borderColor: theme.colors.border.base,
+            }),
           }),
-        }));
+          [],
+        );
 
         return (
           <View testID='wrapper'>
@@ -313,15 +328,18 @@ describe('useCreate', () => {
 
     it('handles multiple parameters in dynamic functions', () => {
       const TestComponent = (): React.JSX.Element => {
-        const styles = useCreate((theme: any) => ({
-          box: (size: number, color: string, rounded: boolean) => ({
-            width: size,
-            height: size,
-            backgroundColor: color,
-            borderRadius: rounded ? size / 2 : 0,
-            padding: theme.spacings.s8,
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            box: (size: number, color: string, rounded: boolean) => ({
+              width: size,
+              height: size,
+              backgroundColor: color,
+              borderRadius: rounded ? size / 2 : 0,
+              padding: theme.spacings.s8,
+            }),
           }),
-        }));
+          [],
+        );
 
         return (
           <View testID='wrapper'>
@@ -358,17 +376,20 @@ describe('useCreate', () => {
   describe('Mixed static and dynamic styles', () => {
     it('supports both static and dynamic styles in the same stylesheet', () => {
       const TestComponent = (): React.JSX.Element => {
-        const styles = useCreate((theme: any) => ({
-          staticContainer: {
-            backgroundColor: theme.colors.bg.base,
-            padding: theme.spacings.s16,
-          },
-          dynamicText: (size: number, bold: boolean) => ({
-            color: theme.colors.text.base,
-            fontSize: size,
-            fontWeight: bold ? '700' : '400',
+        const styles = useStyleSheet(
+          (theme: any) => ({
+            staticContainer: {
+              backgroundColor: theme.colors.bg.base,
+              padding: theme.spacings.s16,
+            },
+            dynamicText: (size: number, bold: boolean) => ({
+              color: theme.colors.text.base,
+              fontSize: size,
+              fontWeight: bold ? '700' : '400',
+            }),
           }),
-        }));
+          [],
+        );
 
         return (
           <View style={styles.staticContainer} testID='container'>
@@ -413,14 +434,14 @@ describe('useCreate', () => {
 
       const TestComponent = (): React.JSX.Element => {
         const { setColorScheme, colorScheme } = useTheme();
-        const styles = useCreate((theme: any) => {
+        const styles = useStyleSheet((theme: any) => {
           styleCreationCount++;
           return {
             container: {
               backgroundColor: theme.colors.bg.base,
             },
           };
-        });
+        }, []);
 
         return (
           <View testID='wrapper'>

package/src/styles/hooks/useStyleSheet.ts

@@ -0,0 +1,25 @@
+import { DependencyList, useMemo, useRef } from 'react';
+import type {
+  LumenStyleSheet,
+  LumenStyleSheetExtended,
+  LumenStyleSheetTheme,
+} from '../types';
+import { useTheme } from './useTheme';
+
+export const useStyleSheet = <S extends LumenStyleSheet>(
+  styleCreator: LumenStyleSheetExtended<S>,
+  deps: DependencyList,
+): S => {
+  const { theme } = useTheme();
+  const styleCreatorRef = useRef(styleCreator);
+  styleCreatorRef.current = styleCreator;
+
+  return useMemo(() => {
+    const isFunction = typeof styleCreatorRef.current === 'function';
+    const styles = isFunction
+      ? (styleCreatorRef.current as (theme: LumenStyleSheetTheme) => S)(theme)
+      : styleCreatorRef.current;
+
+    return styles as S;
+  }, [theme, ...deps]);
+};

package/src/styles/{Provider → hooks}/useTheme.ts

@@ -1,7 +1,7 @@
 import {
   useLumenStyleSheetContext,
   type LumenStyleSheetContextValue,
-} from './LumenStyleSheetProvider';
+} from '../provider/LumenStyleSheetProvider';
 
 export const useTheme = (): LumenStyleSheetContextValue => {
   const context = useLumenStyleSheetContext({

package/src/styles/index.ts

@@ -1,5 +1,4 @@
-export { LumenStyleSheetProvider } from './Provider/LumenStyleSheetProvider';
-export { LumenStyleSheet } from './LumenStyleSheet';
+export { LumenStyleSheetProvider } from './provider/LumenStyleSheetProvider';
+export { useTheme, useStyleSheet } from './hooks';
 export * from './types';
-export * from './factories';
-export * from './utils';
+export * from './lx';

package/src/styles/{factories → lx}/areLxPropsEqual.ts

@@ -1,7 +1,7 @@
 import {
-  LumenViewStyleLX,
-  LumenTextStyleLX,
-  LumenPressableStyleLX,
+  StyledPressableProps,
+  StyledTextProps,
+  StyledViewProps,
 } from '../types';
 
 type UnknownRecord = Record<string, unknown>;
@@ -16,8 +16,8 @@ const shallowEqual = (a: UnknownRecord, b: UnknownRecord): boolean => {
 };
 
 export const areLxPropsEqual = (
-  prevProps: LumenViewStyleLX | LumenTextStyleLX | LumenPressableStyleLX,
-  nextProps: LumenViewStyleLX | LumenTextStyleLX | LumenPressableStyleLX,
+  prevProps: StyledViewProps | StyledTextProps | StyledPressableProps,
+  nextProps: StyledViewProps | StyledTextProps | StyledPressableProps,
 ): boolean => {
   const { lx: prevLx = {}, ...prevRest } = prevProps;
   const { lx: nextLx = {}, ...nextRest } = nextProps;

package/src/styles/{factories → lx}/createStyledPressable.test.tsx

@@ -7,7 +7,7 @@ import {
   PressableStateCallbackType,
   View,
 } from 'react-native';
-import { LumenStyleSheetProvider } from '../Provider/LumenStyleSheetProvider';
+import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
 import { createStyledPressable } from './createStyledPressable';
 
 const testThemes: any = {

package/src/styles/{factories → lx}/createStyledPressable.tsx

@@ -1,29 +1,18 @@
-import React, { forwardRef, memo } from 'react';
+import { ElementRef, forwardRef, memo } from 'react';
 import { StyleSheet } from 'react-native';
 import type {
   Pressable,
-  PressableProps,
   PressableStateCallbackType,
   ViewStyle,
 } from 'react-native';
-import { useTheme } from '../Provider/useTheme';
-import { resolveViewStyle } from '../resolveStyle/resolveStyle';
-import { LumenPressableStyleLX } from '../types';
+import { StyledPressableProps, PressableStyleItem } from '../types';
 import { areLxPropsEqual } from './areLxPropsEqual';
-
-type PressableRef = React.ElementRef<typeof Pressable>;
-type StyleFn = (state: PressableStateCallbackType) => ViewStyle;
-type StyleItem = ViewStyle | StyleFn | StyleItem[] | null | undefined;
-
-export type StyledPressableProps = LumenPressableStyleLX &
-  Omit<PressableProps, 'style'> & {
-    style?: StyleItem;
-  };
+import { useResolveViewStyle } from './resolveStyle';
 
 /**
  * Check if any style item (including nested arrays) is a function
  */
-const hasStyleFunction = (style: StyleItem): boolean => {
+const hasStyleFunction = (style: PressableStyleItem): boolean => {
   if (Array.isArray(style)) {
     return style.some((s) => hasStyleFunction(s));
   }
@@ -34,7 +23,7 @@ const hasStyleFunction = (style: StyleItem): boolean => {
  * Resolve all style functions in a style tree
  */
 const resolveStyleFunctions = (
-  style: StyleItem,
+  style: PressableStyleItem,
   state: PressableStateCallbackType,
 ): ViewStyle | (ViewStyle | null | undefined)[] | null | undefined => {
   if (Array.isArray(style)) {
@@ -62,22 +51,21 @@ const resolveStyleFunctions = (
  */
 export const createStyledPressable = (Component: typeof Pressable) => {
   const StyledComponent = memo(
-    forwardRef<PressableRef, StyledPressableProps>(
+    forwardRef<ElementRef<typeof Pressable>, StyledPressableProps>(
       ({ lx = {}, style, ...props }, ref) => {
-        const { theme } = useTheme();
-        const resolvedLxStyle = resolveViewStyle(theme, lx);
+        const resolvedStyle = useResolveViewStyle(lx);
 
         if (!hasStyleFunction(style)) {
           const finalStyle = StyleSheet.flatten([
-            resolvedLxStyle,
             style as ViewStyle,
+            resolvedStyle,
           ]);
           return <Component ref={ref} {...props} style={finalStyle} />;
         }
 
         const mergedStyle = (state: PressableStateCallbackType): ViewStyle => {
-          const resolvedStyle = resolveStyleFunctions(style, state);
-          return StyleSheet.flatten([resolvedLxStyle, resolvedStyle]);
+          const resolvedBareStyle = resolveStyleFunctions(style, state);
+          return StyleSheet.flatten([resolvedBareStyle, resolvedStyle]);
         };
 
         return <Component ref={ref} {...props} style={mergedStyle} />;

package/src/styles/{factories → lx}/createStyledText.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, jest } from '@jest/globals';
 import { render, screen } from '@testing-library/react-native';
 import React, { createRef } from 'react';
 import { Text, TextProps } from 'react-native';
-import { LumenStyleSheetProvider } from '../Provider/LumenStyleSheetProvider';
+import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
 import { createStyledText } from './createStyledText';
 
 const testThemes: any = {

package/src/styles/{factories → lx}/createStyledText.tsx

@@ -1,19 +1,10 @@
-import React, { forwardRef, memo } from 'react';
+import { ElementRef, forwardRef, memo } from 'react';
 import { StyleSheet } from 'react-native';
-import type { Text, TextProps, TextStyle } from 'react-native';
-import { useTheme } from '../Provider/useTheme';
-import { resolveTextStyle } from '../resolveStyle/resolveStyle';
-import type { LumenStyleSheetTheme, LumenTextStyleLX } from '../types';
+import type { Text, TextStyle } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+import { StyledTextProps } from '../types';
 import { areLxPropsEqual } from './areLxPropsEqual';
-
-type TextRef = React.ElementRef<typeof Text>;
-export type StyledTextProps = LumenTextStyleLX &
-  TextProps & {
-    /**
-     * Typography preset
-     */
-    typography?: keyof LumenStyleSheetTheme['typographies'];
-  };
+import { useResolveTextStyle } from './resolveStyle';
 
 /**
  * Factory function to create a styled Text component.
@@ -25,18 +16,16 @@ export type StyledTextProps = LumenTextStyleLX &
  */
 export const createStyledText = (Component: typeof Text) => {
   const StyledComponent = memo(
-    forwardRef<TextRef, StyledTextProps>(
+    forwardRef<ElementRef<typeof Text>, StyledTextProps>(
       ({ typography = 'body3', lx = {}, style, ...props }, ref) => {
         const { theme } = useTheme();
-        const resolvedStyle = resolveTextStyle(theme, lx);
-        const resolvedTypographyStyles = theme.typographies[
-          typography
-        ] as TextStyle;
+        const resolvedStyle = useResolveTextStyle(lx);
+        const typographyStyle = theme.typographies[typography] as TextStyle;
 
         const finalStyle = StyleSheet.flatten([
-          resolvedStyle,
-          resolvedTypographyStyles,
+          typographyStyle,
           style,
+          resolvedStyle,
         ]);
 
         return <Component ref={ref} {...props} style={finalStyle} />;

package/src/styles/{factories → lx}/createStyledView.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, jest } from '@jest/globals';
 import { render, screen } from '@testing-library/react-native';
 import React, { createRef } from 'react';
 import { View, ViewProps } from 'react-native';
-import { LumenStyleSheetProvider } from '../Provider/LumenStyleSheetProvider';
+import { LumenStyleSheetProvider } from '../provider/LumenStyleSheetProvider';
 import { createStyledView } from './createStyledView';
 
 const testThemes: any = {

package/src/styles/{factories → lx}/createStyledView.tsx

@@ -1,12 +1,10 @@
 import React, { forwardRef, memo } from 'react';
-import { StyleSheet, View, type ViewProps } from 'react-native';
-import { useTheme } from '../Provider/useTheme';
-import { resolveViewStyle } from '../resolveStyle/resolveStyle';
-import type { LumenViewStyleLX } from '../types';
+import { StyleSheet, View } from 'react-native';
+import type { StyledViewProps } from '../types';
 import { areLxPropsEqual } from './areLxPropsEqual';
+import { useResolveViewStyle } from './resolveStyle';
 
 type ViewRef = React.ElementRef<typeof View>;
-export type StyledViewProps = LumenViewStyleLX & ViewProps;
 
 /**
  * Factory function to create a styled View component.
@@ -20,9 +18,8 @@ export const createStyledView = (Component: typeof View) => {
   const StyledComponent = memo(
     forwardRef<ViewRef, StyledViewProps>(
       ({ lx = {}, style, ...props }, ref) => {
-        const { theme } = useTheme();
-        const resolvedStyle = resolveViewStyle(theme, lx);
-        const finalStyle = StyleSheet.flatten([resolvedStyle, style]);
+        const resolvedStyle = useResolveViewStyle(lx);
+        const finalStyle = StyleSheet.flatten([style, resolvedStyle]);
 
         return <Component ref={ref} {...props} style={finalStyle} />;
       },

package/src/styles/{factories → lx}/index.ts

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

package/src/styles/{resolveStyle → lx}/resolveConfig.ts

@@ -3,12 +3,10 @@ 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 (typography)
  * - No path = passthrough prop (value passed as-is)
  */
-export type PropConfig = {
+type PropConfig = {
   path?: string[];
-  spread?: boolean;
 };
 
 /**
@@ -111,7 +109,6 @@ export const VIEW_PROP_CONFIG: Record<keyof LumenViewStyle, PropConfig> = {
 export const TEXT_PROP_CONFIG: Record<keyof LumenTextStyle, PropConfig> = {
   ...VIEW_PROP_CONFIG,
   color: { path: ['colors', 'text'] },
-  typography: { path: ['typographies'], spread: true },
   textAlign: {},
   textTransform: {},
   textDecorationLine: {},