@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.45

package/src/lib/Components/Utility/Pressable/Pressable.mdx

@@ -0,0 +1,103 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as PressableStories from './Pressable.stories';
+import { CustomTabs, Tab } from '../../../../../.storybook/components';
+
+<Meta title='Utility/Pressable' of={PressableStories} />
+
+# Pressable
+
+<CustomTabs>
+  <Tab label="Overview ">
+Pressable is a utility primitive that wraps React Native's `Pressable` component with token-constrained style props from the design system theme.
+
+Pressable exposes the `lx` property to consume tokens from the `ledgerLiveTheme`, see [lx documentation](/?path=/docs/style-system-lx--docs).
+
+## Interactive Example
+
+<Canvas of={PressableStories.Base} />
+<Controls of={PressableStories.Base} />
+
+## Usage
+
+```tsx
+import { Pressable, Text } from '@ledgerhq/lumen-ui-rnative';
+
+function InteractiveCard() {
+  return (
+    <Pressable
+      lx={{
+        padding: 's16',
+        backgroundColor: 'accent',
+        borderRadius: 'md',
+        gap: 's8',
+      }}
+      onPress={() => console.log('Pressed!')}
+    >
+      <Text>Press me</Text>
+    </Pressable>
+  );
+}
+```
+
+## Pressed State Styling
+
+The `lx` prop only accepts static token objects. For pressed-state styling, use the `style` prop with a function:
+
+```tsx
+import { Pressable, Text } from '@ledgerhq/lumen-ui-rnative';
+
+function ButtonWithFeedback() {
+  return (
+    <Pressable
+      lx={{
+        padding: 's16',
+        backgroundColor: 'accent',
+        borderRadius: 'md',
+      }}
+      style={({ pressed }) => ({
+        opacity: pressed ? 0.8 : 1,
+        transform: [{ scale: pressed ? 0.98 : 1 }],
+      })}
+      onPress={() => console.log('Pressed!')}
+    >
+      <Text>Press me</Text>
+    </Pressable>
+  );
+}
+```
+
+## Composing Styles
+
+The `style` prop supports arrays of objects and functions, making it easy to compose styles:
+
+```tsx
+import { Pressable, Text } from '@ledgerhq/lumen-ui-rnative';
+
+function ComposedButton({ style }) {
+  return (
+    <Pressable
+      lx={{ padding: 's16', borderRadius: 'md' }}
+      style={[
+        style, // Consumer's style (can be object, function, or array)
+        { flex: 1 },
+        ({ pressed }) => ({ opacity: pressed ? 0.8 : 1 }),
+      ]}
+    >
+      <Text>Composed</Text>
+    </Pressable>
+  );
+}
+```
+
+## Escape Hatch
+
+For values not covered by tokens, use raw numbers or the `style` prop:
+
+```tsx
+// Style prop for complete override
+<Pressable lx={{ marginTop: 's4' }} style={{ width: 127 }} />
+```
+
+</Tab>
+</CustomTabs>
+

package/src/lib/Components/Utility/Pressable/Pressable.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Pressable } from './Pressable';
+
+const meta: Meta<typeof Pressable> = {
+  component: Pressable,
+  title: 'Utility/Pressable',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Pressable>;
+
+export const Base: Story = {
+  args: {
+    lx: {
+      height: 's48',
+      width: 's48',
+      backgroundColor: 'accent',
+      borderRadius: 'md',
+      alignSelf: 'center',
+    },
+    style: ({ pressed }) => ({ opacity: pressed ? 0.5 : 1 }),
+  },
+  render: (args) => <Pressable {...args} />,
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Pressable
+  style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
+  lx={{
+    height: 's48',
+    width: 's48',
+    backgroundColor: 'accent',
+    borderRadius: 'md',
+    alignSelf: 'center',
+  }}
+/>
+`,
+      },
+    },
+  },
+};

package/src/lib/Components/Utility/Pressable/Pressable.test.tsx

@@ -0,0 +1,221 @@
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import React, { createRef } from 'react';
+import { Text, View, ViewStyle } from 'react-native';
+
+import { ThemeProvider } from '../../ThemeProvider/ThemeProvider';
+import { Pressable } from './Pressable';
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('Pressable Utility Component', () => {
+  describe('Rendering', () => {
+    it('should render correctly', () => {
+      renderWithProvider(<Pressable testID='pressable' />);
+      expect(screen.getByTestId('pressable')).toBeTruthy();
+    });
+
+    it('should render children', () => {
+      renderWithProvider(
+        <Pressable testID='pressable'>
+          <Text>Child Content</Text>
+        </Pressable>,
+      );
+      expect(screen.getByText('Child Content')).toBeTruthy();
+    });
+
+    it('should have correct display name', () => {
+      expect(Pressable.displayName).toBe('StyledPressable(Pressable)');
+    });
+  });
+
+  describe('Token Props (lx)', () => {
+    it('should resolve padding token', () => {
+      renderWithProvider(
+        <Pressable testID='pressable' lx={{ padding: 's16' }} />,
+      );
+      const pressable = screen.getByTestId('pressable');
+      expect(pressable.props.style.padding).toBe(16);
+    });
+
+    it('should resolve backgroundColor token', () => {
+      renderWithProvider(
+        <Pressable testID='pressable' lx={{ backgroundColor: 'surface' }} />,
+      );
+      const pressable = screen.getByTestId('pressable');
+      expect(pressable.props.style.backgroundColor).toBeDefined();
+    });
+
+    it('should resolve multiple token props', () => {
+      renderWithProvider(
+        <Pressable
+          testID='pressable'
+          lx={{
+            padding: 's16',
+            marginTop: 's8',
+            borderRadius: 'md',
+          }}
+        />,
+      );
+      const pressable = screen.getByTestId('pressable');
+      expect(pressable.props.style.padding).toBe(16);
+      expect(pressable.props.style.marginTop).toBe(8);
+      expect(pressable.props.style.borderRadius).toBeDefined();
+    });
+  });
+
+  describe('Style Props', () => {
+    it('should merge static style prop with resolved tokens', () => {
+      const customStyle: ViewStyle = { opacity: 0.5 };
+      renderWithProvider(
+        <Pressable
+          testID='pressable'
+          lx={{ padding: 's16' }}
+          style={customStyle}
+        />,
+      );
+      const pressable = screen.getByTestId('pressable');
+      expect(pressable.props.style.padding).toBe(16);
+      expect(pressable.props.style).toMatchObject({ opacity: 0.5 });
+    });
+
+    it('should merge style prop with lx tokens', () => {
+      renderWithProvider(
+        <Pressable
+          testID='pressable'
+          lx={{ backgroundColor: 'surface' }}
+          style={{ opacity: 0.8 }}
+        />,
+      );
+      const pressable = screen.getByTestId('pressable');
+      expect(pressable.props.style.backgroundColor).toBeDefined();
+      expect(pressable.props.style).toMatchObject({ opacity: 0.8 });
+    });
+
+    it('should support function-based style prop', () => {
+      renderWithProvider(
+        <Pressable
+          testID='pressable'
+          lx={{ backgroundColor: 'surface' }}
+          style={({ pressed }) => ({
+            opacity: pressed ? 0.7 : 1,
+          })}
+        />,
+      );
+      const pressable = screen.getByTestId('pressable');
+      expect(pressable.props.style.backgroundColor).toBeDefined();
+      expect(pressable.props.style.opacity).toBe(1);
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should call onPress when pressed', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <Pressable testID='pressable' onPress={handlePress} />,
+      );
+
+      fireEvent.press(screen.getByTestId('pressable'));
+      expect(handlePress).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onPressIn when press starts', () => {
+      const handlePressIn = jest.fn();
+      renderWithProvider(
+        <Pressable testID='pressable' onPressIn={handlePressIn} />,
+      );
+
+      fireEvent(screen.getByTestId('pressable'), 'onPressIn');
+      expect(handlePressIn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onPressOut when press ends', () => {
+      const handlePressOut = jest.fn();
+      renderWithProvider(
+        <Pressable testID='pressable' onPressOut={handlePressOut} />,
+      );
+
+      fireEvent(screen.getByTestId('pressable'), 'onPressOut');
+      expect(handlePressOut).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onLongPress when long pressed', () => {
+      const handleLongPress = jest.fn();
+      renderWithProvider(
+        <Pressable testID='pressable' onLongPress={handleLongPress} />,
+      );
+
+      fireEvent(screen.getByTestId('pressable'), 'onLongPress');
+      expect(handleLongPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onPress when disabled', () => {
+      const handlePress = jest.fn();
+      renderWithProvider(
+        <Pressable testID='pressable' onPress={handlePress} disabled />,
+      );
+
+      fireEvent.press(screen.getByTestId('pressable'));
+      expect(handlePress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Ref Forwarding', () => {
+    it('should forward ref', () => {
+      const ref = createRef<View>();
+      renderWithProvider(<Pressable ref={ref} testID='pressable' />);
+      expect(ref.current).toBeTruthy();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should pass accessibility props', () => {
+      renderWithProvider(
+        <Pressable
+          testID='pressable'
+          accessibilityLabel='Interactive button'
+          accessibilityRole='button'
+        />,
+      );
+      const pressable = screen.getByTestId('pressable');
+      expect(pressable.props.accessibilityLabel).toBe('Interactive button');
+      expect(pressable.props.accessibilityRole).toBe('button');
+    });
+
+    it('should pass accessibility state', () => {
+      renderWithProvider(
+        <Pressable
+          testID='pressable'
+          accessibilityState={{ disabled: true, selected: true }}
+        />,
+      );
+      const pressable = screen.getByTestId('pressable');
+      expect(pressable.props.accessibilityState).toEqual({
+        disabled: true,
+        selected: true,
+      });
+    });
+  });
+
+  describe('Children Render Function', () => {
+    it('should support children as render function', () => {
+      renderWithProvider(
+        <Pressable testID='pressable'>
+          {({ pressed }) => (
+            <Text testID='child-text'>
+              {pressed ? 'Pressed!' : 'Not pressed'}
+            </Text>
+          )}
+        </Pressable>,
+      );
+      expect(screen.getByText('Not pressed')).toBeTruthy();
+    });
+  });
+});

package/src/lib/Components/Utility/Pressable/Pressable.tsx

@@ -0,0 +1,34 @@
+import { Pressable as RNPressable } from 'react-native';
+import { createStyledPressable } from '../../../../styles';
+
+/**
+ * Pressable - An interactive layout primitive with token-constrained style props.
+ *
+ * Pressable is a wrapper around React Native's Pressable that accepts design
+ * token-based style props directly, providing type-safe styling with autocomplete
+ * for spacing, sizes, colors, etc. Use the `style` prop for pressed-state styling.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/utility-pressable--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { Pressable } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with token props
+ * <Pressable
+ *   lx={{ width: 's400', marginTop: 's4', gap: 's12', alignItems: 'center' }}
+ *   onPress={handlePress}
+ * >
+ *   <Text>Content</Text>
+ * </Pressable>
+ *
+ * // With function-based style for pressed state
+ * <Pressable
+ *   lx={{ padding: 's16', backgroundColor: 'surface' }}
+ *   style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
+ * >
+ *   <Text>Press me</Text>
+ * </Pressable>
+ * ```
+ */
+export const Pressable = createStyledPressable(RNPressable);

package/src/lib/Components/Utility/Pressable/index.ts

@@ -0,0 +1,2 @@
+export * from './Pressable';
+export type { PressableProps } from './types';

package/src/lib/Components/Utility/Pressable/types.ts

@@ -0,0 +1,3 @@
+import { StyledPressableProps } from '../../../../styles';
+
+export type PressableProps = StyledPressableProps;

package/src/lib/Components/{Text → Utility/Text}/Text.mdx

@@ -1,11 +1,17 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TextStories from './Text.stories';
+import { CustomTabs, Tab } from '../../../../../.storybook/components';
 
 <Meta title='Utility/Text' of={TextStories} />
 
 # Text
 
-Text is a typography component that wraps React Native's `Text` with a `typo` prop for typography presets and token-constrained style props from the design system theme.
+<CustomTabs>
+  <Tab label="Overview ">
+
+Text is a typography component that wraps React Native's `Text` with a `typography` prop for typography presets and token-constrained style props from the design system theme.  
+
+Text expose the `lx` property to consume tokens from the `ledgerLiveTheme`, see [LX documentation](/?path=/docs/style-system-lx--docs).
 
 ## Interactive Example
 
@@ -14,7 +20,7 @@ Text is a typography component that wraps React Native's `Text` with a `typo` pr
 
 ## Available Typographies
 
-The `typo` property should be used to apply a typography preset that includes font size, font weight, line height, and letter spacing.
+The `typography` property should be used to apply a typography preset that includes font size, font weight, line height, and letter spacing.
 
 ### Body
 Used for content text like paragraphs.
@@ -46,16 +52,16 @@ Used for large hero text like page titles.
 ```tsx
 import { Text } from '@ledgerhq/lumen-ui-rnative';
 
-// Basic usage with typography typo
-<Text typo='body1'>Hello World</Text>
+// Basic usage with typography typography
+<Text typography='body1'>Hello World</Text>
 
 // With custom color
-<Text typo='heading2SemiBold' color='muted'>
+<Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
   Subtitle
 </Text>
 
 // With spacing
-<Text typo='body2' marginTop='s8' color='base'>
+<Text typography='body2' lx={{ marginTop: 's8', color: 'base' }}>
   Description text
 </Text>
 ```
@@ -65,6 +71,8 @@ import { Text } from '@ledgerhq/lumen-ui-rnative';
 For values not covered by tokens, use the `style` prop:
 
 ```tsx
-<Text typo='body1' style={{ letterSpacing: 2 }} />
+<Text typography='body1' style={{ letterSpacing: 2 }} />
 ```
 
+</Tab>
+</CustomTabs>

package/src/lib/Components/{Text → Utility/Text}/Text.stories.tsx

@@ -20,15 +20,15 @@ type Story = StoryObj<typeof Text>;
 
 export const Base: Story = {
   args: {
-    typo: 'body1',
-    color: 'base',
+    typography: 'body1',
+    lx: { color: 'base' },
     children: 'Hello World',
   },
   parameters: {
     docs: {
       source: {
         code: `
-<Text typo='body1' color='base'>
+<Text typography='body1' lx={{ color: 'base' }}>
   Hello World
 </Text>
 `,

package/src/lib/Components/Utility/Text/Text.tsx

@@ -0,0 +1,39 @@
+import { Text as RNText } from 'react-native';
+import { createStyledText, type StyledTextProps } from '../../../../styles';
+
+/**
+ * Text - A typography component with typography support and token-constrained style props.
+ *
+ * Text is a wrapper around React Native's Text that accepts a `typography` prop for
+ * typography presets, plus design token-based style props for colors, spacing, etc.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/typography-text--docs Storybook}
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * // Basic usage with typography typography
+ * <Text typography='body1'>Hello World</Text>
+ *
+ * // With custom color
+ * <Text typography='heading2SemiBold' lx={{ color: 'muted' }}>
+ *   Subtitle
+ * </Text>
+ *
+ * // With spacing
+ * <Text typography='body2' lx={{ marginTop: 's8', color: 'base' }}>
+ *   Description text
+ * </Text>
+ *
+ * // Style prop for complete override
+ * <Text
+ *  typography='body1'
+ *  lx={{ marginTop: 's8' }}
+ *  style={{ letterSpacing: 127 }}
+ * />
+ * ```
+ */
+export const Text = createStyledText(RNText);
+
+export type TextProps = StyledTextProps;

package/src/lib/Components/Utility/index.ts

@@ -0,0 +1,3 @@
+export * from './Pressable';
+export * from './Box';
+export * from './Text';

package/src/lib/Components/index.ts

@@ -1,9 +1,7 @@
-export * from './_ToRemove/ToRemove';
 export * from './AddressInput';
 export * from './AmountInput';
 export * from './Banner';
 export * from './BottomSheet';
-export * from './Box';
 export * from './Button';
 export * from './CardButton';
 export * from './Checkbox';
@@ -16,7 +14,7 @@ export * from './Select';
 export * from './Spot';
 export * from './Switch';
 export * from './Tag';
-export * from './Text';
+export * from './Utility';
 export * from './TextInput';
 export * from './ThemeProvider';
 export * from './Tile';

package/src/lib/utils/components/InjectStylesIntoChildren.tsx

@@ -1,16 +1,25 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
-import { cloneElement, isValidElement, memo, PropsWithChildren } from 'react';
+import {
+  cloneElement,
+  isValidElement,
+  memo,
+  PropsWithChildren,
+  ReactElement,
+} from 'react';
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
 
-function _InjectStylesIntoChildren({
-  styles,
-  children,
-}: PropsWithChildren<{ styles: string }>) {
-  if (!isValidElement(children)) {
-    return children;
-  }
-  return cloneElement(children, {
-    className: cn((children.props as { className?: string }).className, styles),
-  } as Partial<{ className: string }>);
-}
+type StyleValue = ViewStyle | TextStyle | ImageStyle;
 
-export const InjectStylesIntoChildren = memo(_InjectStylesIntoChildren);
+type StylableProps = { style?: StyleProp<StyleValue> };
+
+export const InjectStylesIntoChildren = memo(
+  ({ style, children }: PropsWithChildren<{ style: StyleValue }>) => {
+    if (!isValidElement(children)) {
+      return children;
+    }
+    const childProps = children.props as StylableProps;
+    return cloneElement(children as ReactElement<StylableProps>, {
+      style: childProps.style ? [childProps.style, style] : style,
+    });
+  },
+);
+InjectStylesIntoChildren.displayName = 'InjectStylesIntoChildren';

package/src/styles/Provider/createStylesheetTheme.ts

@@ -15,7 +15,6 @@ export const getNegativeSpacings = <
   ) as Output;
 };
 
-/**
 /**
  * The theme object from design-core is not directly compatible with React Native's StyleSheet.
  *

package/src/styles/create/useCreate.ts

@@ -1,14 +1,18 @@
-import { useMemo } from 'react';
+import { DependencyList, useMemo, useRef } from 'react';
 import { useTheme } from '../Provider/useTheme';
 import type { LumenStyleSheet, LumenStyleSheetExtended } from '../types';
 import { create } from './create';
 
 export const useCreate = <S extends LumenStyleSheet>(
   styleCreator: LumenStyleSheetExtended<S>,
+  deps: DependencyList = [],
 ): S => {
   const { theme } = useTheme();
+  const styleCreatorRef = useRef(styleCreator);
+  styleCreatorRef.current = styleCreator;
 
-  return useMemo(() => {
-    return create(theme, styleCreator);
-  }, [theme, styleCreator]);
+  return useMemo(
+    () => create(theme, styleCreatorRef.current),
+    [theme, ...deps],
+  );
 };

package/src/styles/factories/areLxPropsEqual.ts

@@ -0,0 +1,32 @@
+import {
+  LumenViewStyleLX,
+  LumenTextStyleLX,
+  LumenPressableStyleLX,
+} from '../types';
+
+type UnknownRecord = Record<string, unknown>;
+
+/**
+ * Shallow equal for all props
+ */
+const shallowEqual = (a: UnknownRecord, b: UnknownRecord): boolean => {
+  const keysA = Object.keys(a);
+  if (keysA.length !== Object.keys(b).length) return false;
+  return keysA.every((k) => a[k] === b[k]);
+};
+
+export const areLxPropsEqual = (
+  prevProps: LumenViewStyleLX | LumenTextStyleLX | LumenPressableStyleLX,
+  nextProps: LumenViewStyleLX | LumenTextStyleLX | LumenPressableStyleLX,
+): boolean => {
+  const { lx: prevLx = {}, ...prevRest } = prevProps;
+  const { lx: nextLx = {}, ...nextRest } = nextProps;
+
+  return (
+    shallowEqual(prevLx, nextLx) &&
+    shallowEqual(
+      prevRest as Record<string, unknown>,
+      nextRest as Record<string, unknown>,
+    )
+  );
+};