@ledgerhq/lumen-ui-rnative 0.1.14 → 0.1.16

package/dist/typescript/src/lib/utils/useControllableState/useControllableState.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-type ChangeCb<T> = ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>;
+import { Dispatch, SetStateAction } from 'react';
+type ChangeCb<T> = ((next: T) => void) | Dispatch<SetStateAction<T>>;
 /**
  * Allow to use a controlled or uncontrolled state.
  * @see {@link https://github.com/tamagui/tamagui/blob/02f3e4c2fd76d5dc17815cf83842c05a3aade54c/code/core/use-controllable-state/src/useControllableState.ts}
@@ -10,6 +10,6 @@ export declare function useControllableState<T>({ prop, defaultProp, onChange, s
     onChange?: ChangeCb<T>;
     strategy?: 'prop-wins' | 'most-recent-wins';
     transition?: boolean;
-}): [T, React.Dispatch<React.SetStateAction<T>>];
+}): [T, Dispatch<SetStateAction<T>>];
 export {};
 //# sourceMappingURL=useControllableState.d.ts.map

package/dist/typescript/src/lib/utils/useControllableState/useControllableState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/utils/useControllableState/useControllableState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,QAAQ,CAAC,CAAC,IACX,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GACnB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAI5C;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,QAAsB,EACtB,UAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,WAAW,EAAE,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACvB,QAAQ,CAAC,EAAE,WAAW,GAAG,kBAAkB,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAsC/C"}
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/utils/useControllableState/useControllableState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAO9E,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAIrE;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EACtC,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,QAAsB,EACtB,UAAU,GACX,EAAE;IACD,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,WAAW,EAAE,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACvB,QAAQ,CAAC,EAAE,WAAW,GAAG,kBAAkB,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAsCnC"}

package/dist/typescript/src/utils/icon-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-template.d.ts","sourceRoot":"","sources":["../../../../src/utils/icon-template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,QAAA,MAAM,QAAQ,EAAE,QA4Cf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"icon-template.d.ts","sourceRoot":"","sources":["../../../../src/utils/icon-template.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,QAAA,MAAM,QAAQ,EAAE,QA4Cf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -52,7 +52,7 @@
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.1.7",
+    "@ledgerhq/lumen-design-core": "0.1.8",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^4.1.0",

package/src/i18n/i18n.ts

@@ -52,6 +52,7 @@ const initializeI18n = (): I18nInstance => {
       },
     })
     .catch((error: unknown) => {
+      // eslint-disable-next-line no-console
       console.error('Failed to initialize i18next:', error);
     });
 
@@ -81,6 +82,7 @@ export const loadLocale = async (locale: SupportedLocale): Promise<void> => {
 
     loadedLocales.add(locale);
   } catch (error) {
+    // eslint-disable-next-line no-console
     console.error(`Failed to load locale ${locale}`, error);
     throw error;
   }

package/src/index.ts

@@ -1,5 +1,4 @@
 export { type SupportedLocale, Languages } from './i18n';
 export * from './lib/Components';
-export * from './lib/Patterns';
 export * from './lib/Animations';
 export * from './lib/Haptics';

package/src/lib/Animations/Spin/Spin.tsx

@@ -35,6 +35,10 @@ export const Spin = memo(({ children, timing }: SpinProps) => {
     [sv],
   );
 
-  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
+  return (
+    <Animated.View style={[{ alignSelf: 'flex-start' }, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
 });
 Spin.displayName = 'Spin';

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

@@ -68,10 +68,14 @@ The error message will be automatically:
 
 ### Disabled State
 
-The input can be disabled using the `editable` prop set to `false`.
+The input can be fully disabled using the `disabled` prop, which prevents interaction and applies a muted visual style.
 
 <Canvas of={AddressInputStories.DisabledAddressInput} />
 
+### Read-Only State
+
+Alternatively, use `editable={false}` to prevent editing without applying the muted visual style. This is useful for displaying confirmed addresses that should still look like regular inputs.
+
 ## Controlled vs Uncontrolled
 
 The AddressInput component supports both controlled and uncontrolled usage.
@@ -333,7 +337,19 @@ Use the `keyboardType` prop to show the appropriate keyboard:
 
 ### Disabled State
 
-Use the `editable` prop to disable the input:
+Use the `disabled` prop to disable the input with a muted visual style:
+
+```tsx
+<AddressInput
+  placeholder='Enter address or ENS'
+  value='0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27'
+  disabled
+/>
+```
+
+### Read-Only State
+
+Use the `editable` prop to make the input non-editable without the muted visual style:
 
 ```tsx
 <AddressInput

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

@@ -16,28 +16,6 @@ const meta: Meta<typeof AddressInput> = {
       },
     },
   },
-  argTypes: {
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text when input is empty',
-    },
-    prefix: {
-      control: 'text',
-      description: 'Custom prefix text (default: "To:")',
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'Error message to display below input',
-    },
-    editable: {
-      control: 'boolean',
-      description: 'Whether the input is editable',
-    },
-    hideClearButton: {
-      control: 'boolean',
-      description: 'Hide the clear button',
-    },
-  },
 };
 
 export default meta;
@@ -154,7 +132,7 @@ export const DisabledAddressInput: Story = {
     placeholder: 'Enter address or ENS',
     value: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27',
     prefix: 'To:',
-    editable: false,
+    disabled: true,
     hideClearButton: false,
   },
 };

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

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { Text } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
@@ -10,11 +11,16 @@ export const AddressInput = ({
   prefix = 'To:',
   suffix,
   onQrCodeClick,
+  disabled: disabledProp,
   ref,
   ...props
 }: AddressInputProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'AddressInput',
+    mergeWith: { disabled: disabledProp },
+  });
   const { t } = useCommonTranslation();
-  const styles = useStyles();
+  const styles = useStyles({ disabled });
 
   const actualPrefix = (
     <Text accessible={false} style={styles.prefix}>
@@ -39,20 +45,22 @@ export const AddressInput = ({
       ref={ref}
       prefix={actualPrefix}
       suffix={actualSuffix}
+      disabled={disabledProp}
       {...props}
     />
   );
 };
 
-const useStyles = () => {
-  return useStyleSheet((t) => {
-    return {
+const useStyles = ({ disabled }: { disabled: boolean }) => {
+  return useStyleSheet(
+    (t) => ({
       prefix: {
         ...t.typographies.body1,
-        color: t.colors.text.base,
+        color: disabled ? t.colors.text.disabled : t.colors.text.base,
       },
-    };
-  }, []);
+    }),
+    [disabled],
+  );
 };
 
 AddressInput.displayName = 'AddressInput';

package/src/lib/Components/AmountDisplay/AmountDisplay.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen } from '@testing-library/react-native';
-import React from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { AmountDisplay } from './AmountDisplay';
 import { FormattedValue } from './types';

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

@@ -76,10 +76,14 @@ The input supports error handling through `isInvalid` prop which controls the er
 
 ### Disabled State
 
-The component supports disabled state through the `editable` prop set to `false` with appropriate visual feedback.
+The input can be fully disabled using the `disabled` prop, which prevents interaction and applies a muted visual style.
 
 <Canvas of={AmountInputStories.DisabledAmountInput} />
 
+### Read-Only State
+
+Alternatively, use `editable={false}` to prevent editing without applying the muted visual style. This is useful for displaying non-editable values that should still look like regular inputs.
+
 ## Animations
 
 The AmountInput features several sophisticated animations:

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

@@ -16,41 +16,6 @@ const meta: Meta<typeof AmountInput> = {
       },
     },
   },
-  argTypes: {
-    currencyText: {
-      control: 'text',
-      description: 'Currency text to display (e.g. USD, EUR, $)',
-    },
-    currencyPosition: {
-      control: 'radio',
-      options: ['left', 'right'],
-      description: 'Position of the currency text',
-    },
-    allowDecimals: {
-      control: 'boolean',
-      description: 'Whether to allow decimal values',
-    },
-    thousandsSeparator: {
-      control: 'boolean',
-      description: 'Whether to display thousands separator',
-    },
-    maxIntegerLength: {
-      control: 'number',
-      description: 'Maximum digits for integer part',
-    },
-    maxDecimalLength: {
-      control: 'number',
-      description: 'Maximum digits for decimal part',
-    },
-    isInvalid: {
-      control: 'boolean',
-      description: 'Whether the input is in error state',
-    },
-    editable: {
-      control: 'boolean',
-      description: 'Whether the input is editable',
-    },
-  },
 };
 
 export default meta;
@@ -190,7 +155,7 @@ export const DisabledAmountInput: Story = {
     allowDecimals: true,
     thousandsSeparator: true,
     isInvalid: false,
-    editable: false,
+    disabled: true,
   },
 };
 

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

@@ -27,7 +27,8 @@ export const AmountInput = ({
   style,
   currencyText,
   currencyPosition = 'left',
-  editable: editableProp = true,
+  editable,
+  disabled: disabledProp = false,
   maxIntegerLength = 9,
   maxDecimalLength = 9,
   allowDecimals = true,
@@ -43,7 +44,7 @@ export const AmountInput = ({
   const [isFocused, setIsFocused] = useState(false);
   const disabled = useDisabledContext({
     consumerName: 'AmountInput',
-    mergeWith: { disabled: !editableProp },
+    mergeWith: { disabled: disabledProp },
   });
 
   const translateX = useSharedValue(0);
@@ -146,7 +147,7 @@ export const AmountInput = ({
       <TextInput
         ref={inputRef}
         keyboardType='decimal-pad'
-        editable={!disabled}
+        editable={editable !== false && !disabled}
         value={inputValue}
         onChangeText={handleChangeText}
         onFocus={(e) => {

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

@@ -39,6 +39,13 @@ export type AmountInputProps = Omit<
    * @default true
    */
   allowDecimals?: boolean;
+  /**
+   * Whether the input is disabled.
+   * When true, the input is not editable and displays a muted visual style.
+   * This differs from `editable={false}` which only prevents interaction.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Additional style
    */

package/src/lib/Components/Avatar/Avatar.figma.tsx

@@ -0,0 +1,29 @@
+import figma from '@figma/code-connect';
+import { Avatar } from './Avatar';
+
+figma.connect(
+  Avatar,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11097-8',
+  {
+    imports: ["import { Avatar } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      size: figma.enum('size', {
+        sm: 'sm',
+        md: 'md',
+        lg: 'lg',
+      }),
+      showNotification: figma.boolean('show-notification', {
+        true: true,
+        false: false,
+      }),
+    },
+    example: (props) => (
+      <Avatar
+        src='https://example-image.com'
+        size={props.size}
+        alt="John Doe's Avatar"
+        showNotification={props.showNotification}
+      />
+    ),
+  },
+);

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

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import React from 'react';
 import { View, Text, Pressable, Linking } from 'react-native';
 
 import { Box } from '../Utility';

package/src/lib/Components/Avatar/Avatar.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, waitFor } from '@testing-library/react-native';
-import React from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Avatar } from './Avatar';
 

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import React from 'react';
+import { useState } from 'react';
 import { Button } from '../Button';
 import { Box, Text } from '../Utility';
 import { Banner } from './Banner';
@@ -437,7 +437,7 @@ export const ResponsiveLayout: Story = {
 
 export const InteractiveDismiss: Story = {
   render: (args) => {
-    const [visible, setVisible] = React.useState(true);
+    const [visible, setVisible] = useState(true);
 
     if (!visible) return <Text typography='body2'>Banner dismissed</Text>;
 
@@ -456,7 +456,7 @@ export const InteractiveDismiss: Story = {
 
 export const InteractiveActions: Story = {
   render: (args) => {
-    const [state, setState] = React.useState('idle');
+    const [state, setState] = useState('idle');
 
     const handleAccept = () => {
       setState('success');

package/src/lib/Components/Banner/Banner.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { fireEvent, render } from '@testing-library/react-native';
-import React from 'react';
 import { Button } from '../Button';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Banner } from './Banner';

package/src/lib/Components/BaseInput/BaseInput.tsx

@@ -1,4 +1,7 @@
-import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import {
+  DisabledProvider,
+  useDisabledContext,
+} from '@ledgerhq/lumen-utils-shared';
 import {
   useCallback,
   useEffect,
@@ -33,7 +36,8 @@ export const BaseInput = ({
   errorMessage,
   hideClearButton,
   onChangeText: onChangeTextProp,
-  editable: editableProp = true,
+  editable,
+  disabled: disabledProp = false,
   prefix,
   suffix,
   ref,
@@ -41,7 +45,7 @@ export const BaseInput = ({
 }: BaseInputProps) => {
   const disabled = useDisabledContext({
     consumerName: 'BaseInput',
-    mergeWith: { disabled: !editableProp },
+    mergeWith: { disabled: disabledProp },
   });
   const { t } = useCommonTranslation();
   const { theme } = useTheme();
@@ -97,68 +101,70 @@ export const BaseInput = ({
   });
 
   return (
-    <Box lx={lx} style={style}>
-      <Pressable
-        style={StyleSheet.flatten([styles.container, containerStyle])}
-        onPress={() => inputRef.current?.focus()}
-        disabled={disabled}
-      >
-        {prefix}
+    <DisabledProvider value={{ disabled }}>
+      <Box lx={lx} style={style}>
+        <Pressable
+          style={StyleSheet.flatten([styles.container, containerStyle])}
+          onPress={() => inputRef.current?.focus()}
+          disabled={disabled}
+        >
+          {prefix}
 
-        <TextInput
-          ref={inputRef}
-          value={value}
-          style={StyleSheet.flatten([styles.input, inputStyle])}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-          onChangeText={handleChangeText}
-          editable={!disabled}
-          autoCapitalize='none'
-          autoCorrect={false}
-          selectionColor={theme.colors.text.active}
-          placeholderTextColor={theme.colors.text.muted}
-          {...props}
-        />
+          <TextInput
+            ref={inputRef}
+            value={value}
+            style={StyleSheet.flatten([styles.input, inputStyle])}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            onChangeText={handleChangeText}
+            editable={editable !== false && !disabled}
+            autoCapitalize='none'
+            autoCorrect={false}
+            selectionColor={theme.colors.text.active}
+            placeholderTextColor={theme.colors.text.muted}
+            {...props}
+          />
 
-        {label && (
-          <Animated.Text
-            style={[
-              floatingLabelStyles.label,
-              floatingLabelStyles.animatedStyle,
-              labelStyle,
-            ]}
-            numberOfLines={1}
-          >
-            {label}
-          </Animated.Text>
-        )}
+          {label && (
+            <Animated.Text
+              style={[
+                floatingLabelStyles.label,
+                floatingLabelStyles.animatedStyle,
+                labelStyle,
+              ]}
+              numberOfLines={1}
+            >
+              {label}
+            </Animated.Text>
+          )}
 
-        {(suffix || (!hideClearButton && !disabled)) && (
-          <View style={styles.suffixContainer}>
-            {showClearButton ? (
-              <InteractiveIcon
-                iconType='stroked'
-                onPress={handleClear}
-                accessibilityLabel={t(
-                  'components.baseInput.clearInputAriaLabel',
-                )}
-              >
-                <DeleteCircleFill size={20} />
-              </InteractiveIcon>
-            ) : (
-              suffix
-            )}
+          {(suffix || (!hideClearButton && !disabled)) && (
+            <View style={styles.suffixContainer}>
+              {showClearButton ? (
+                <InteractiveIcon
+                  iconType='stroked'
+                  onPress={handleClear}
+                  accessibilityLabel={t(
+                    'components.baseInput.clearInputAriaLabel',
+                  )}
+                >
+                  <DeleteCircleFill size={20} />
+                </InteractiveIcon>
+              ) : (
+                suffix
+              )}
+            </View>
+          )}
+        </Pressable>
+
+        {errorMessage && (
+          <View style={styles.errorContainer}>
+            <DeleteCircleFill size={16} color='error' />
+            <Text style={styles.errorText}>{errorMessage}</Text>
           </View>
         )}
-      </Pressable>
-
-      {errorMessage && (
-        <View style={styles.errorContainer}>
-          <DeleteCircleFill size={16} color='error' />
-          <Text style={styles.errorText}>{errorMessage}</Text>
-        </View>
-      )}
-    </Box>
+      </Box>
+    </DisabledProvider>
   );
 };
 

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

@@ -11,6 +11,13 @@ export type BaseInputProps = {
    * The label text that floats above the input when focused or filled.
    */
   label?: string;
+  /**
+   * Whether the input is disabled.
+   * When true, the input is not editable and displays a muted visual style.
+   * This differs from `editable={false}` which only prevents interaction.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Additional styles to apply to the outer wrapper element.
    */

package/src/lib/Components/BottomSheet/BottomSheet.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, RenderOptions } from '@testing-library/react-native';
-import React from 'react';
 import { Text, View } from 'react-native';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 

package/src/lib/Components/BottomSheet/BottomSheet.tsx

@@ -3,7 +3,7 @@ import {
   SNAP_POINT_TYPE,
 } from '@gorhom/bottom-sheet';
 import { createSafeContext, useMergedRef } from '@ledgerhq/lumen-utils-shared';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { RuntimeConstants } from '../../utils';

package/src/lib/Components/BottomSheet/CustomBackdrop.tsx

@@ -1,5 +1,4 @@
 import { BottomSheetBackdrop as GorhomBottomSheetBackdrop } from '@gorhom/bottom-sheet';
-import React from 'react';
 import { useStyleSheet } from '../../../styles';
 import { BottomSheetProps } from './types';
 
@@ -35,7 +34,6 @@ export const CustomBackdrop = ({
       disappearsOnIndex={-1}
       pressBehavior={backdropPressBehavior}
       onPress={() => {
-        console.log('onPress');
         onPress?.();
       }}
     />

package/src/lib/Components/BottomSheet/CustomHandle.tsx

@@ -1,5 +1,5 @@
 import { BottomSheetVariables } from '@gorhom/bottom-sheet/lib/typescript/types';
-import React, { Ref } from 'react';
+import { Ref } from 'react';
 import { View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 

package/src/lib/Components/Button/BaseButton.test.tsx

@@ -1,7 +1,6 @@
 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 from 'react';
 import { ViewStyle } from 'react-native';
 
 import { Plus, Settings } from '../../Symbols';

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import React from 'react';
+import { useState } from 'react';
 import { Plus, Settings } from '../../Symbols';
 import { Box, Text } from '../Utility';
 import { Button } from './Button';
@@ -210,7 +210,7 @@ export const LabelTruncate: Story = {
 
 export const InteractiveLoadingStates: Story = {
   render: () => {
-    const [states, setStates] = React.useState<
+    const [states, setStates] = useState<
       Record<'text' | 'withIcon' | 'iconOnly', 'idle' | 'loading' | 'red'>
     >({
       text: 'idle',

package/src/lib/Components/Card/Card.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent, screen } from '@testing-library/react-native';
-import React from 'react';
 import { Text as RNText } from 'react-native';
 
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';