@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.47

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
     "ui",
     "components",
     "design-system",
-    "mobile",
-    "nativewind"
+    "mobile"
   ],
   "type": "module",
   "main": "./src/index.ts",
@@ -28,15 +27,18 @@
     "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.12",
+    "@ledgerhq/lumen-utils-shared": "0.0.13",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
   "peerDependencies": {
+    "@gorhom/bottom-sheet": "^5.0.0",
+    "@ledgerhq/lumen-design-core": "0.0.37",
     "react": "~18.3.1",
     "react-native": "~0.77.3",
-    "react-native-svg": "^15.0.0",
-    "nativewind": "~4.1.23"
+    "react-native-reanimated": "^3.0.0",
+    "react-native-safe-area-context": "^4.0.0 || ^5.0.0",
+    "react-native-svg": "^15.0.0"
   },
   "nx": {
     "tags": [

package/src/lib/Components/AddressInput/AddressInput.mdx

@@ -3,7 +3,7 @@ import * as AddressInputStories from './AddressInput.stories';
 import { AddressInput } from './AddressInput';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Input/AddressInput' of={AddressInputStories} />
 
@@ -25,7 +25,7 @@ The AddressInput component provides a specialized input field for entering crypt
 
 ## Anatomy
 
-> **Layout:** The AddressInput component takes the full width of its container by default. You can control the width directly using `className` or by wrapping in a container.
+> **Layout:** The AddressInput component takes the full width of its container by default. You can control the width by using the `style` prop or by wrapping in a container.
 
 ### Customizable Prefix
 
@@ -296,14 +296,14 @@ function MyComponent() {
 
 ### With Custom Styling
 
-While the component comes with predefined styles, you can extend them using NativeWind classes:
+While the component comes with predefined styles, you can extend them using the `style` prop:
 
 ```tsx
 <AddressInput
   placeholder='Enter address or ENS'
   value={address}
   onChangeText={setAddress}
-  className='max-w-md' // Control width
+  style={{ maxWidth: 320 }} // Control width
   onQrCodeClick={() => openQrScanner()}
 />
 ```
@@ -398,7 +398,7 @@ function TransactionForm() {
         onChangeText={setRecipientAddress}
         errorMessage={addressError}
         onQrCodeClick={() => openQrScanner()}
-        className='max-w-md'
+        style={{ maxWidth: 320 }}
       />
       {/* Other transaction fields */}
     </View>
@@ -441,7 +441,7 @@ function AddressForm() {
 
 ## Do's and Don'ts
 
-<div className='flex flex-col gap-24'>
+<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use controlled input pattern'

package/src/lib/Components/AddressInput/AddressInput.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
 import { View } from 'react-native';
-import { AddressInput, type AddressInputProps } from './AddressInput';
+import { AddressInput } from './AddressInput';
+import { AddressInputProps } from './types';
 
 const meta: Meta<typeof AddressInput> = {
   component: AddressInput,
@@ -46,8 +47,16 @@ const AddressInputStory = (args: AddressInputProps) => {
   const [address, setAddress] = useState(args.value?.toString() ?? '');
 
   return (
-    <View className='flex min-h-400 items-center justify-center p-24'>
-      <View className='w-full max-w-320'>
+    <View
+      style={{
+        flex: 1,
+        minHeight: 96,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+      }}
+    >
+      <View style={{ width: '100%', maxWidth: 400 }}>
         <AddressInput
           {...args}
           value={address}
@@ -96,8 +105,16 @@ const AddressInputWithoutQrStory = (args: AddressInputProps) => {
   const [address, setAddress] = useState(args.value?.toString() ?? '');
 
   return (
-    <View className='flex min-h-400 items-center justify-center p-24'>
-      <View className='w-full max-w-320'>
+    <View
+      style={{
+        flex: 1,
+        minHeight: 96,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+      }}
+    >
+      <View style={{ width: '100%', maxWidth: 400 }}>
         <AddressInput
           {...args}
           value={address}

package/src/lib/Components/AddressInput/AddressInput.tsx

@@ -1,44 +1,21 @@
 import React from 'react';
 import { Text, TextInput } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet } from '../../../styles';
 import { QrCode } from '../../Symbols';
-import { BaseInput, type BaseInputProps } from '../BaseInput';
+import { BaseInput } from '../BaseInput';
 import { InteractiveIcon } from '../InteractiveIcon';
-
-export type AddressInputProps = Omit<BaseInputProps, 'prefix' | 'label'> & {
-  /**
-   * Custom suffix element to show instead of the QR code icon.
-   * Default suffix is a QR code scanner when empty (if onQrCodeClick provided), clear button when content.
-   * — both can be overridden with a custom suffix.
-   *
-   * @default QrCodeIcon
-   */
-  suffix?: React.ReactNode;
-  /**
-   * Custom prefix text to show instead of the "To:" prefix.
-   * @default "To:"
-   */
-  prefix?: string;
-  /**
-   * Callback fired when the QR code scanner icon is clicked.
-   * When provided, the QR code scanner icon will be displayed when input is empty.
-   * When not provided, no QR code scanner icon will be shown.
-   */
-  onQrCodeClick?: () => void;
-};
+import { type AddressInputProps } from './types';
 
 export const AddressInput = React.forwardRef<
   React.ElementRef<typeof TextInput>,
   AddressInputProps
 >(({ prefix = 'To:', suffix, onQrCodeClick, ...props }, ref) => {
   const { t } = useCommonTranslation();
+  const styles = useStyles();
+
   const actualPrefix = (
-    <Text
-      className='text-nowrap text-base group-has-[:disabled]:text-disabled'
-      accessible={false}
-      // TODO: use theme object here
-      style={{ fontSize: 16, fontWeight: '500' }}
-    >
+    <Text accessible={false} style={styles.prefix}>
       {prefix}
     </Text>
   );
@@ -60,11 +37,20 @@ export const AddressInput = React.forwardRef<
       ref={ref}
       prefix={actualPrefix}
       suffix={actualSuffix}
-      // TODO: use theme object here
-      style={{ fontSize: 16, fontWeight: '500' }}
       {...props}
     />
   );
 });
 
+const useStyles = () => {
+  return useStyleSheet((t) => {
+    return {
+      prefix: {
+        ...t.typographies.body1,
+        color: t.colors.text.base,
+      },
+    };
+  }, []);
+};
+
 AddressInput.displayName = 'AddressInput';

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

@@ -1 +1,2 @@
 export * from './AddressInput';
+export * from './types';

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

@@ -0,0 +1,24 @@
+import { BaseInputProps } from '../BaseInput';
+import { BoxProps } from '../Utility';
+
+export type AddressInputProps = Omit<BaseInputProps, 'prefix' | 'label'> & {
+  /**
+   * Custom suffix element to show instead of the QR code icon.
+   * Default suffix is a QR code scanner when empty (if onQrCodeClick provided), clear button when content.
+   * — both can be overridden with a custom suffix.
+   *
+   * @default QrCodeIcon
+   */
+  suffix?: React.ReactNode;
+  /**
+   * Custom prefix text to show instead of the "To:" prefix.
+   * @default "To:"
+   */
+  prefix?: string;
+  /**
+   * Callback fired when the QR code scanner icon is clicked.
+   * When provided, the QR code scanner icon will be displayed when input is empty.
+   * When not provided, no QR code scanner icon will be shown.
+   */
+  onQrCodeClick?: () => void;
+} & BoxProps;

package/src/lib/Components/AmountInput/AmountInput.mdx

@@ -3,7 +3,7 @@ import * as AmountInputStories from './AmountInput.stories';
 import { AmountInput } from './AmountInput';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/docs/CommonRulesDoAndDont.mdx';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Input/AmountInput' of={AmountInputStories} />
 
@@ -27,7 +27,7 @@ AmountInput is a specialized input component designed for handling numeric value
 
 ## Anatomy
 
-> **Layout:** The AmountInput component takes the full width of its container by default. You can control the width using `className` or by wrapping in a container.
+> **Layout:** The AmountInput component takes the full width of its container by default. You can control the width by using the `style` prop or by wrapping in a container.
 
 ### Currency Text Position
 
@@ -263,7 +263,7 @@ Use the `editable` prop to disable the input:
 
 ## Do's and Don'ts
 
-<div className='flex flex-col gap-24'>
+<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use integer-only for whole number scenarios'

package/src/lib/Components/AmountInput/AmountInput.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
 import { View } from 'react-native';
-import { AmountInput, type AmountInputProps } from './AmountInput';
+import { AmountInput } from './AmountInput';
+import { type AmountInputProps } from './types';
 
 const meta: Meta<typeof AmountInput> = {
   component: AmountInput,
@@ -59,8 +60,16 @@ const AmountInputStory = (args: AmountInputProps) => {
   const [value, setValue] = useState(args.value?.toString() ?? '');
 
   return (
-    <View className='flex min-h-400 items-center justify-center p-24'>
-      <View className='w-full max-w-320'>
+    <View
+      style={{
+        flex: 1,
+        minHeight: 96,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+      }}
+    >
+      <View style={{ width: '100%', maxWidth: 320 }}>
         <AmountInput {...args} value={value} onChangeText={setValue} />
       </View>
     </View>

package/src/lib/Components/AmountInput/AmountInput.tsx

@@ -1,73 +1,17 @@
-import { cn, getFontSize, textFormatter } from '@ledgerhq/lumen-utils-shared';
+import { getFontSize, textFormatter } from '@ledgerhq/lumen-utils-shared';
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Pressable, TextInput, View, type TextInputProps } from 'react-native';
+import { Pressable, StyleSheet, TextInput } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
   useSharedValue,
+  withRepeat,
   withSequence,
   withTiming,
-  withRepeat,
 } from 'react-native-reanimated';
-
-export type AmountInputProps = Omit<
-  TextInputProps,
-  'value' | 'onChangeText'
-> & {
-  /**
-   * The controlled value of the input
-   * @required
-   */
-  value: string | number;
-  /**
-   * Change handler
-   * @required
-   */
-  onChangeText: (text: string) => void;
-  /**
-   * The currency text (e.g. USD, EUR)
-   */
-  currencyText?: string;
-  /**
-   * Position of the currency text.
-   * @default 'left'
-   */
-  currencyPosition?: 'left' | 'right';
-  /**
-   * Maximum length for integer part (before decimal)
-   * @default 9
-   */
-  maxIntegerLength?: number;
-  /**
-   * Maximum length for decimal part (after decimal)
-   * @default 9
-   */
-  maxDecimalLength?: number;
-  /**
-   * Allow decimal values
-   * @default true
-   */
-  allowDecimals?: boolean;
-  /**
-   * Additional class names
-   */
-  className?: string;
-  /**
-   * Whether to use thousands separator (e.g. 1 000 for 1000)
-   * @default true
-   */
-  thousandsSeparator?: boolean;
-  /**
-   * Mark input as invalid (e.g. for error display)
-   * @default false
-   */
-  isInvalid?: boolean;
-};
-
-const inputStyles = cn(
-  'heading-0 h-56 bg-transparent text-base outline-none items-start',
-);
-const currencyStyles = cn('heading-0 text-base');
+import { useStyleSheet } from '../../../styles';
+import { Box } from '../Utility';
+import { type AmountInputProps } from './types';
 
 /**
  * AmountInput component for handling numeric input with currency display.
@@ -77,7 +21,8 @@ const currencyStyles = cn('heading-0 text-base');
 export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
   (
     {
-      className,
+      lx = {},
+      style,
       currencyText,
       currencyPosition = 'left',
       editable = true,
@@ -102,6 +47,12 @@ export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
 
     useImperativeHandle(ref, () => inputRef.current as TextInput, []);
 
+    const styles = useStyles({
+      hasValue: !!inputValue,
+      isEditable: editable,
+      isInvalid,
+    });
+
     const animatedInputStyle = useAnimatedStyle(
       () => ({
         transform: [{ translateX: translateX.value }],
@@ -146,7 +97,6 @@ export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
 
     useEffect(() => {
       if (isFocused && editable) {
-        // custom caret animation
         caretOpacity.value = withRepeat(
           withSequence(
             withTiming(1, { duration: 150, easing: Easing.ease }),
@@ -174,15 +124,7 @@ export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
     };
 
     const CurrencyText = currencyText ? (
-      <Animated.Text
-        className={cn(
-          currencyStyles,
-          !inputValue && 'text-muted-subtle',
-          !editable && 'text-disabled',
-          isInvalid && 'text-error',
-        )}
-        style={animatedCurrencyStyle}
-      >
+      <Animated.Text style={[styles.currency, animatedCurrencyStyle]}>
         {currencyText}
       </Animated.Text>
     ) : null;
@@ -194,7 +136,7 @@ export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
     };
 
     return (
-      <View className='relative'>
+      <Box lx={lx} style={styles.container}>
         {/** hidden text input because of flickering issue */}
         <TextInput
           ref={inputRef}
@@ -210,49 +152,99 @@ export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
             setIsFocused(false);
             props.onBlur?.(e);
           }}
-          className='absolute size-full opacity-0'
+          style={styles.hiddenInput}
           {...props}
         />
         <Pressable
           onPress={handlePress}
-          className='flex-row items-center justify-center'
+          style={styles.pressable}
           accessibilityLabel={props.accessibilityLabel || 'Amount input'}
         >
           {currencyPosition === 'left' && CurrencyText}
 
           {/** display text that mirrors the hidden input's value */}
           <Animated.Text
-            className={cn(
-              inputStyles,
-              isInvalid && 'text-error',
-              !editable && 'text-disabled',
-              !inputValue && 'text-muted-subtle',
-              className,
-            )}
-            style={animatedInputStyle}
+            style={[styles.displayText, animatedInputStyle, style]}
           >
             {inputValue || '0'}
           </Animated.Text>
 
           {/** custom caret */}
-          <Animated.View
-            className='mx-2'
-            // TODO: use theme object here
-            style={[
-              animatedCaretStyle,
-              {
-                width: 3,
-                borderRadius: 1.5,
-                backgroundColor: '#007AFF',
-              },
-            ]}
-          />
+          <Animated.View style={[styles.caret, animatedCaretStyle]} />
 
           {currencyPosition === 'right' && CurrencyText}
         </Pressable>
-      </View>
+      </Box>
     );
   },
 );
 
+const useStyles = ({
+  hasValue,
+  isEditable,
+  isInvalid,
+}: {
+  hasValue: boolean;
+  isEditable: boolean;
+  isInvalid: boolean;
+}) => {
+  return useStyleSheet(
+    (t) => ({
+      container: {
+        position: 'relative',
+      },
+      hiddenInput: {
+        position: 'absolute',
+        width: t.sizes.full,
+        height: t.sizes.full,
+        opacity: 0,
+      },
+      pressable: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      displayText: StyleSheet.flatten([
+        {
+          height: t.sizes.s56,
+          backgroundColor: 'transparent',
+          color: t.colors.text.base,
+          alignItems: 'flex-start',
+          ...t.typographies.heading0SemiBold,
+        },
+        !hasValue && {
+          color: t.colors.text.mutedSubtle,
+        },
+        !isEditable && {
+          color: t.colors.text.disabled,
+        },
+        isInvalid && {
+          color: t.colors.text.error,
+        },
+      ]),
+      currency: StyleSheet.flatten([
+        {
+          color: t.colors.text.base,
+          ...t.typographies.heading0SemiBold,
+        },
+        !hasValue && {
+          color: t.colors.text.mutedSubtle,
+        },
+        !isEditable && {
+          color: t.colors.text.disabled,
+        },
+        isInvalid && {
+          color: t.colors.text.error,
+        },
+      ]),
+      caret: {
+        marginHorizontal: t.spacings.s2,
+        width: t.sizes.s2,
+        backgroundColor: t.colors.text.active,
+      },
+    }),
+    [hasValue, isEditable, isInvalid],
+  );
+};
+
 AmountInput.displayName = 'AmountInput';

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

@@ -1 +1,2 @@
 export * from './AmountInput';
+export * from './types';

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

@@ -0,0 +1,56 @@
+import { TextInputProps, ViewStyle } from 'react-native';
+import { BoxProps } from '../Utility';
+
+export type AmountInputProps = Omit<
+  TextInputProps,
+  'value' | 'onChangeText'
+> & {
+  /**
+   * The controlled value of the input
+   * @required
+   */
+  value: string | number;
+  /**
+   * Change handler
+   * @required
+   */
+  onChangeText: (text: string) => void;
+  /**
+   * The currency text (e.g. USD, EUR)
+   */
+  currencyText?: string;
+  /**
+   * Position of the currency text.
+   * @default 'left'
+   */
+  currencyPosition?: 'left' | 'right';
+  /**
+   * Maximum length for integer part (before decimal)
+   * @default 9
+   */
+  maxIntegerLength?: number;
+  /**
+   * Maximum length for decimal part (after decimal)
+   * @default 9
+   */
+  maxDecimalLength?: number;
+  /**
+   * Allow decimal values
+   * @default true
+   */
+  allowDecimals?: boolean;
+  /**
+   * Additional style
+   */
+  style?: ViewStyle;
+  /**
+   * Whether to use thousands separator (e.g. 1 000 for 1000)
+   * @default true
+   */
+  thousandsSeparator?: boolean;
+  /**
+   * Mark input as invalid (e.g. for error display)
+   * @default false
+   */
+  isInvalid?: boolean;
+} & BoxProps;