@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/src/styles/lx/resolveStyle.ts

@@ -0,0 +1,66 @@
+import { getObjectPath } from '@ledgerhq/lumen-utils-shared';
+import { type ViewStyle, type TextStyle, StyleSheet } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+import type {
+  LumenStyleSheetTheme,
+  LumenTextStyle,
+  LumenViewStyle,
+} from '../types';
+import { VIEW_PROP_CONFIG, TEXT_PROP_CONFIG } from './resolveConfig';
+
+/**
+ * Unified style resolver
+ * Config-driven: single loop resolves all props via provided config
+ */
+const resolveStyle = <T extends ViewStyle | TextStyle>(
+  theme: LumenStyleSheetTheme,
+  lx: LumenViewStyle | LumenTextStyle,
+  config: typeof VIEW_PROP_CONFIG | typeof TEXT_PROP_CONFIG,
+): T => {
+  const resolved: Record<string, unknown> = {};
+
+  for (const [prop, value] of Object.entries(lx)) {
+    const propConfig = config[prop as keyof typeof config];
+    if (!propConfig) continue;
+
+    // Passthrough (no path)
+    if (!propConfig.path) {
+      resolved[prop] = value;
+      continue;
+    }
+
+    // Token lookup
+    const resolvedValue = getObjectPath(theme, [
+      ...propConfig.path,
+      value as string,
+    ]);
+
+    resolved[prop] = resolvedValue;
+  }
+
+  return resolved as T;
+};
+
+/**
+ * Transform lx props to StyleSheet style object for View
+ */
+export const useResolveViewStyle = (
+  lx: LumenViewStyle,
+  bareStyle?: ViewStyle,
+): ViewStyle => {
+  const { theme } = useTheme();
+  const resolvedStyle = resolveStyle<ViewStyle>(theme, lx, VIEW_PROP_CONFIG);
+  return StyleSheet.flatten([bareStyle, resolvedStyle]);
+};
+
+/**
+ * Transform lx props to StyleSheet style object for Text
+ */
+export const useResolveTextStyle = (
+  lx: LumenTextStyle,
+  bareStyle?: TextStyle,
+): TextStyle => {
+  const { theme } = useTheme();
+  const resolvedStyle = resolveStyle<TextStyle>(theme, lx, TEXT_PROP_CONFIG);
+  return StyleSheet.flatten([bareStyle, resolvedStyle]);
+};

package/src/styles/{Provider → provider}/LumenStyleSheetProvider.test.tsx

@@ -2,8 +2,8 @@ import { describe, expect, it, jest } from '@jest/globals';
 import { render, userEvent } from '@testing-library/react-native';
 import React from 'react';
 import { Pressable, Text, View } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
 import { LumenStyleSheetProvider } from './LumenStyleSheetProvider';
-import { useTheme } from './useTheme';
 
 // Test themes
 const testThemes: any = {

package/src/styles/{Provider → provider}/LumenStyleSheetProvider.tsx

@@ -7,10 +7,9 @@ import {
 } from 'react-native';
 import { RuntimeConstants } from '../../lib/utils';
 import { useControllableState } from '../../lib/utils/use-controllable-state/use-controllable-state';
-
+import { createStylesheetTheme } from '../theme/createStylesheetTheme';
 import { type LumenStyleSheetTheme } from '../types';
-import { createStylesheetTheme } from './createStylesheetTheme';
-import { LumenStyleSheetProviderProps } from './LumenStyleSheetProvider.types';
+import { LumenStyleSheetProviderProps } from './types';
 
 const DARK_MODE = 'dark';
 const LIGHT_MODE = 'light';

package/src/styles/provider/index.ts

@@ -0,0 +1,5 @@
+export {
+  LumenStyleSheetProvider,
+  useLumenStyleSheetContext,
+  type LumenStyleSheetContextValue,
+} from './LumenStyleSheetProvider';

package/src/styles/{Provider → theme}/createStylesheetTheme.ts

@@ -15,12 +15,11 @@ export const getNegativeSpacings = <
   ) as Output;
 };
 
-/**
 /**
  * The theme object from design-core is not directly compatible with React Native's StyleSheet.
  *
  * We must transform and extend the theme so it can be easily used with
- * LumenStyleSheet utilities like `useCreate`, as well as components such as
+ * utilities like `useStyleSheet`, as well as components such as
  * `createStyledText` and `createStyledView`. This process augments the design system
  * theme with React Native–specific structure and shorthand.
  */

package/src/styles/theme/index.ts

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

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]:

package/src/styles/types/factories.types.ts

@@ -0,0 +1,55 @@
+import {
+  PressableProps,
+  PressableStateCallbackType,
+  TextProps as RNTextProps,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import { LumenTextStyle, LumenViewStyle } from './lx.types';
+import { LumenStyleSheetTheme } from './theme.types';
+
+type StyleFn = (state: PressableStateCallbackType) => ViewStyle;
+export type PressableStyleItem =
+  | ViewStyle
+  | StyleFn
+  | PressableStyleItem[]
+  | null
+  | undefined;
+
+export type ExtendRNPressableProps = Omit<PressableProps, 'style'> & {
+  style?: PressableStyleItem;
+};
+
+/**
+ * View API that extends lx style property
+ */
+export type StyledViewProps = {
+  /**
+   * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
+   */
+  lx?: LumenViewStyle;
+} & ViewProps;
+
+/**
+ * Text API that extends lx style property
+ */
+export type StyledTextProps = {
+  /**
+   * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
+   */
+  lx?: LumenTextStyle;
+  /**
+   * Typography preset
+   */
+  typography?: keyof LumenStyleSheetTheme['typographies'];
+} & RNTextProps;
+
+/**
+ * Pressable API that extends lx style property
+ */
+export type StyledPressableProps = {
+  /**
+   * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
+   */
+  lx?: LumenViewStyle;
+} & ExtendRNPressableProps;

package/src/styles/types/index.ts

@@ -1,3 +1,4 @@
 export * from './create.types';
 export * from './theme.types';
-export * from './styled.types';
+export * from './lx.types';
+export * from './factories.types';

package/src/styles/types/{styled.types.ts → lx.types.ts}

@@ -1,10 +1,5 @@
-import type {
-  ViewStyle,
-  FlexStyle,
-  TextStyle,
-  ViewProps,
-  TextProps,
-} from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
+
 import type { LumenStyleSheetTheme } from './theme.types';
 
 /**
@@ -18,9 +13,29 @@ type TextColorToken = keyof LumenStyleSheetTheme['colors']['text'];
 type BorderColorToken = keyof LumenStyleSheetTheme['colors']['border'];
 type BorderRadiusToken = keyof LumenStyleSheetTheme['borderRadius'];
 type ShadowToken = keyof LumenStyleSheetTheme['shadows'];
-type TypographyToken = keyof LumenStyleSheetTheme['typographies'];
 
-type SpacingProps = {
+/**
+ * Main public types - combine token props with RN props
+ */
+export type LumenViewStyle = {
+  /**
+   * Flex layout
+   */
+  flex?: ViewStyle['flex'];
+  flexDirection?: ViewStyle['flexDirection'];
+  flexWrap?: ViewStyle['flexWrap'];
+  justifyContent?: ViewStyle['justifyContent'];
+  alignItems?: ViewStyle['alignItems'];
+  alignSelf?: ViewStyle['alignSelf'];
+  alignContent?: ViewStyle['alignContent'];
+  flexGrow?: ViewStyle['flexGrow'];
+  flexShrink?: ViewStyle['flexShrink'];
+  flexBasis?: ViewStyle['flexBasis'];
+  position?: ViewStyle['position'];
+  zIndex?: ViewStyle['zIndex'];
+  overflow?: ViewStyle['overflow'];
+  display?: ViewStyle['display'];
+  aspectRatio?: ViewStyle['aspectRatio'];
   /**
    * Padding
    */
@@ -46,33 +61,37 @@ type SpacingProps = {
   marginHorizontal?: SpacingToken;
   marginVertical?: SpacingToken;
   /**
-   * Gaps
+   * Position
+   */
+  top?: SpacingToken;
+  bottom?: SpacingToken;
+  left?: SpacingToken;
+  right?: SpacingToken;
+  start?: SpacingToken;
+  end?: SpacingToken;
+  /**
+   * Gap
    */
   gap?: SpacingToken;
   rowGap?: SpacingToken;
   columnGap?: SpacingToken;
-};
-
-/**
- * Size props - use size tokens only
- */
-type SizeProps = {
+  /**
+   * Size
+   */
   width?: SizeToken;
   height?: SizeToken;
   minWidth?: SizeToken;
   minHeight?: SizeToken;
   maxWidth?: SizeToken;
   maxHeight?: SizeToken;
-};
-
-/**
- * Background color props - use background color tokens only
- */
-type BackgroundColorProps = {
+  /**
+   * Background color
+   */
   backgroundColor?: BackgroundColorToken;
-};
-
-type BorderProps = {
+  /**
+   * Shadow
+   */
+  boxShadow?: ShadowToken;
   /**
    * Border width
    */
@@ -93,7 +112,6 @@ type BorderProps = {
   borderRightColor?: BorderColorToken;
   borderStartColor?: BorderColorToken;
   borderEndColor?: BorderColorToken;
-
   /**
    * Border Radius
    */
@@ -102,91 +120,17 @@ type BorderProps = {
   borderTopRightRadius?: BorderRadiusToken;
   borderBottomLeftRadius?: BorderRadiusToken;
   borderBottomRightRadius?: BorderRadiusToken;
+  /**
+   * Other styles
+   */
+  opacity?: ViewStyle['opacity'];
+  borderStyle?: ViewStyle['borderStyle'];
+  transform?: ViewStyle['transform'];
 };
 
-/**
- * Shadow props - use shadow tokens
- */
-type ShadowProps = {
-  boxShadow?: ShadowToken;
-};
-
-/**
- * Flex layout props - passthrough from React Native
- */
-type FlexLayoutProps = Pick<
-  FlexStyle,
-  | 'flex'
-  | 'flexDirection'
-  | 'flexWrap'
-  | 'justifyContent'
-  | 'alignItems'
-  | 'alignSelf'
-  | 'alignContent'
-  | 'flexGrow'
-  | 'flexShrink'
-  | 'flexBasis'
-  | 'position'
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'start'
-  | 'end'
-  | 'zIndex'
-  | 'overflow'
-  | 'display'
-  | 'aspectRatio'
->;
-
-/**
- * Other view style props - passthrough from React Native
- */
-type OtherViewStyleProps = Pick<
-  ViewStyle,
-  'opacity' | 'borderStyle' | 'transform'
->;
-
-/**
- * Text color props - use text color tokens only
- */
-type TextColorProps = {
+export type LumenTextStyle = LumenViewStyle & {
   color?: TextColorToken;
+  textAlign?: TextStyle['textAlign'];
+  textTransform?: TextStyle['textTransform'];
+  textDecorationLine?: TextStyle['textDecorationLine'];
 };
-
-/**
- * Typography prop
- */
-type TypographyProps = {
-  typo?: TypographyToken;
-};
-
-/**
- * Text style props - passthrough from React Native
- */
-type OtherTextStyleProps = Pick<
-  TextStyle,
-  'textAlign' | 'textTransform' | 'textDecorationLine'
->;
-
-/**
- * Main public types - combine token props with RN props
- */
-export type LumenViewStyleProps = SpacingProps &
-  SizeProps &
-  BackgroundColorProps &
-  BorderProps &
-  ShadowProps &
-  FlexLayoutProps &
-  OtherViewStyleProps;
-
-export type LumenTextStyleProps = LumenViewStyleProps &
-  TextColorProps &
-  TypographyProps &
-  OtherTextStyleProps;
-
-/**
- * Derived style-only types (for internal resolver use)
- */
-export type LumenViewProps = LumenViewStyleProps & ViewProps;
-export type LumenTextProps = LumenTextStyleProps & TextProps;

package/src/styles/types/utility.types.ts

@@ -1,4 +1,5 @@
 type NegativeNumber<T extends number> = T & { __negative: true };
+
 export type AddEntriesNegative<T extends Record<string, number>> = T & {
   [K in keyof T as `-${string & K}`]: NegativeNumber<T[K]>;
 };

package/src/utils/icon-template.ts

@@ -12,7 +12,7 @@ const template: Template = (variables, { tpl }) => {
  * 
  * @component
  * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
- * @param {string} [className] - Additional CSS classes to apply to the icon (via NativeWind).
+ * @param {string} [color] - The color of the icon.
  * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
  * 
  * @example
@@ -22,8 +22,8 @@ const template: Template = (variables, { tpl }) => {
  * <${componentName} />
  * 
  * @example
- * // With custom size and className (NativeWind)
- * <${componentName} size={40} className="text-warning" />
+ * // With custom size and style
+ * <${componentName} size={40} color="warning" lx={{ marginTop: 's4' }} />
  * 
  * @example
  * // Used within a Button component

package/tsconfig.storybook.json

@@ -32,7 +32,6 @@
   ],
   "files": [
     "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
-    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
     "../../node_modules/@nx/react/typings/image.d.ts"
   ]
 }

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

@@ -1,133 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Getting Started/Style System" />
-
-# Style System
-
-The Ledger Design System provides `LumenStyleSheet` for creating theme-aware styles in React Native.
-
-## LumenStyleSheet.useCreate
-
-Use `LumenStyleSheet.useCreate` to create styles that automatically adapt to the current theme (light/dark mode).
-
-```tsx
-import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
-import { View, Text } from 'react-native';
-
-const MyComponent = () => {
-  const styles = LumenStyleSheet.useCreate((theme) => ({
-    container: {
-      backgroundColor: theme.colors.bg.base,
-      padding: theme.spacings.s16,
-      borderRadius: theme.borderRadius.md,
-    },
-    text: {
-      ...theme.typographies.body1,
-      color: theme.colors.text.base,
-    },
-  }));
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Hello World</Text>
-    </View>
-  );
-};
-```
-
-## Dynamic Styles
-
-Create dynamic style functions that adapt to props or state:
-
-```tsx
-import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
-import { View, Text } from 'react-native';
-
-const Button = ({ appearance, disabled }) => {
-  const styles = LumenStyleSheet.useCreate((theme) => {
-    const getBackgroundColor = () => {
-      if (disabled) return theme.colors.bg.muted;
-      if (appearance === 'accent') return theme.colors.bg.accent;
-      return theme.colors.bg.base;
-    };
-
-    return {
-      button: {
-        backgroundColor: getBackgroundColor(),
-        padding: theme.spacings.s16,
-        opacity: disabled ? 0.5 : 1,
-      },
-      text: {
-        ...theme.typographies.body2,
-        color: appearance === 'accent' 
-          ? theme.colors.text.onAccent 
-          : theme.colors.text.base,
-      },
-    };
-  });
-
-  return (
-    <View style={styles.button}>
-      <Text style={styles.text}>Press me</Text>
-    </View>
-  );
-};
-```
-
-## Theme Integration
-
-`LumenStyleSheet.useCreate` automatically receives the current theme from the [ThemeProvider](/docs/getting-started-theme--docs).
-When the theme mode changes (light/dark), your styles update automatically.
-
-
-## Theme Tokens Reference
-
-### Typographies
-
-Typography semantic tokens are available in the theme.
-It provides a preset of font size, weight, line height and letter spacing.
-
-```tsx
-const styles = LumenStyleSheet.useCreate((theme) => ({
-  title: { 
-    alignItems: 'center',
-    ...theme.typographies.heading1 
-    },
-  body: {
-    flex: 1,
-    ...theme.typographies.body1 
-  },
-}));
-```
-
-### Spacing
-
-Use for width, height, padding, margin, and gap.
-
-```tsx
-const styles = LumenStyleSheet.useCreate((theme) => ({
-  container: {
-    padding: theme.spacings.s16,
-    marginBottom: theme.spacings.s24,
-    gap: theme.spacings.s8,
-  },
-}));
-```
-
-### Colors & Shadows
-
-Apply semantic colors for backgrounds, text, borders, and elevation.
-
-```tsx
-const styles = LumenStyleSheet.useCreate((theme) => ({
-  card: {
-    backgroundColor: theme.colors.bg.surface,
-    borderColor: theme.colors.border.base,
-    ...theme.shadows.md,
-  },
-  label: {
-    color: theme.colors.text.muted,
-  },
-}));
-```
-

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

@@ -1,85 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Getting Started/Theme" />
-
-# Theme Provider
-
-The ThemeProvider manages your app's theme mode (light/dark) and provides theme tokens to all components.
-
-## Basic Setup
-
-Wrap your app with `ThemeProvider` and pass your theme objects:
-
-```tsx
-import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
-import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
-
-function App() {
-  return (
-    <ThemeProvider 
-      themes={ledgerLiveThemes}
-      colorScheme="dark"
-    >
-      <YourApp />
-    </ThemeProvider>
-  );
-}
-```
-
-## Color Scheme
-
-The `colorScheme` prop controls the theme color scheme.
-If not provided, the theme will follow the device settings.
-
-- `"dark"` - Forces dark mode
-- `"light"` - Forces light mode
-
-
-
-```tsx
-<ThemeProvider 
-  themes={ledgerLiveThemes}
-  colorScheme="dark"
->
-  <App />
-</ThemeProvider>
-```
-
-## Changing Theme Mode
-
-If the ThemeProvider is uncontrolled, you can use the `LumenStyleSheet.useTheme` hook to control theme mode at runtime:
-
-```tsx
-import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
-
-const ThemeToggle = () => {
-  const { colorScheme, toggleColorScheme, setColorScheme } = LumenStyleSheet.useTheme();
-  
-  return (
-    <Button onPress={toggleColorScheme}>
-      Current: {colorScheme}
-    </Button>
-  );
-};
-```
-
-When the colorScheme changes, `Appearance.setColorScheme` is automatically called to update the system theme.
-
-
-## Internationalization
-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.
-
-```tsx
-import { ThemeProvider, type SupportedLocale } from '@ledgerhq/lumen-ui-rnative';
-
-function AppProviders() {
-  const [locale, setLocale] = useState<SupportedLocale>('en');
-  return (
-    <ThemeProvider locale={locale}>
-      <App />
-      <Button onClick={() => setLocale('fr')}>Switch to French</Button>
-    </ThemeProvider>
-  );
-}
-```

package/.storybook/vite-plugins/commonjs-exports-shim.ts

@@ -1,26 +0,0 @@
-import type { Plugin } from 'vite';
-
-const UNDEFINED_EXPORTS_REGEXP = /Object\.defineProperty\(exports,/;
-
-/**
- * Temporary fix for NativeWind's `cssInterop` CommonJS exports in ESM context.
- *
- * NativeWind's `cssInterop` (from react-native-css-interop) contains bare CommonJS code
- * that references `exports` without it being defined in the ESM bundle, causing:
- * `ReferenceError: exports is not defined` at runtime.
- *
- * This plugin injects `const exports = {}` at the start of affected chunks.
- * Can be removed once react-native-css-interop ships proper ESM builds or when upgrading to v5.
- */
-export const commonjsExportsShim = (): Plugin => ({
-  name: 'commonjs-exports-shim',
-  renderChunk(code) {
-    if (UNDEFINED_EXPORTS_REGEXP.test(code)) {
-      return {
-        code: `const exports = {};\n${code}`,
-        map: null,
-      };
-    }
-    return undefined;
-  },
-});