@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/src/lib/Components/{Search/Search.mdx → SearchInput/SearchInput.mdx}

@@ -1,28 +1,31 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
-import * as SearchStories from './Search.stories';
-import { Search } from './Search';
+import * as SearchInputStories from './SearchInput.stories';
+import { SearchInput } from './SearchInput';
 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/Search' of={SearchStories} />
+<Meta title='Input/SearchInput' of={SearchInputStories} />
 
-# 🔍 Search
+# 🔍 SearchInput
 
 <CustomTabs>
   <Tab label="Overview">
 
 ## Introduction
 
-The Search component is a specialized input field designed specifically for search functionality on mobile platforms. It features a built-in search icon, placeholder text, and automatic clear button for enhanced user experience. Unlike regular inputs, it uses placeholder text instead of floating labels for better search UX patterns.
+The SearchInput component is a specialized input field designed specifically for search functionality on mobile platforms. It features a built-in search icon, placeholder text, and automatic clear button for enhanced user experience. Unlike regular inputs, it uses placeholder text instead of floating labels for better search UX patterns.
 
 > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=2248-3468&m=dev).
 
-<Canvas of={SearchStories.WebPreviewWarning} />
+> ⚠️ **Note on Web Preview:** The Storybook preview below may display visual inconsistencies as certain React Native APIs (such as Reanimated animations) cannot be fully translated to web environments. While the component's functionality should accurately represent the native implementation, it may not render as intended. For the complete native experience, please refer to the component on an actual iOS or Android device.
+
+<Canvas of={SearchInputStories.Base} />
+<Controls of={SearchInputStories.Base} />
 
 ## Anatomy
 
-> **Layout:** The Search 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 SearchInput 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.
 
 ### Search Icon
 
@@ -36,24 +39,34 @@ Uses placeholder text instead of floating labels for better search UX. Styled wi
 
 A clear button (×) appears **automatically** when input has content.
 
+<Canvas of={SearchInputStories.WithContent} />
+
 > **Note:** The clear button only clears the input content/value. It does not clear error states - you must handle error state clearing separately in your component logic.
 
 #### **Hiding the Clear Button**
 
 Use `hideClearButton` to prevent the clear button from appearing.
 
+<Canvas of={SearchInputStories.WithHiddenClearButton} />
+
 #### **Extending the Clear Behavior**
 
 Use `onClear` to extend the default clear behavior with custom logic.
 
+<Canvas of={SearchInputStories.WithClearCallback} />
+
 ### Disabled State
 
 The search input can be disabled using the `editable` prop set to `false`.
 
+<Canvas of={SearchInputStories.DisabledSearchInput} />
+
 ### Error State
 
 The search component supports error handling through `errorMessage` which displays an error message below the input with error styling including a red border and text color.
 
+<Canvas of={SearchInputStories.WithError} />
+
 The error message will be automatically:
 
 - Connected to the input
@@ -63,7 +76,7 @@ The error message will be automatically:
 
 ## Controlled vs Uncontrolled
 
-The Search component supports both controlled and uncontrolled usage.
+The SearchInput component supports both controlled and uncontrolled usage.
 
 ### Uncontrolled (with defaultValue)
 
@@ -86,7 +99,7 @@ Set these using the `keyboardType` prop.
 
 ## Accessibility
 
-The Search component follows accessibility best practices:
+The SearchInput component follows accessibility best practices:
 
 - Supports screen reader navigation
 - Placeholder text is properly announced
@@ -119,14 +132,14 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 ### Basic Usage
 
 ```tsx
-import { Search } from '@ledgerhq/lumen-ui-rnative';
+import { SearchInput } from '@ledgerhq/lumen-ui-rnative';
 import { useState } from 'react';
 
 function MyComponent() {
   const [query, setQuery] = useState('');
 
   return (
-    <Search
+    <SearchInput
       placeholder='Search products'
       value={query}
       onChangeText={setQuery}
@@ -142,14 +155,14 @@ function MyComponent() {
 Use `hideClearButton` to prevent the clear button from appearing:
 
 ```tsx
-import { Search } from '@ledgerhq/lumen-ui-rnative';
+import { SearchInput } from '@ledgerhq/lumen-ui-rnative';
 import { useState } from 'react';
 
 function MyComponent() {
   const [query, setQuery] = useState('');
 
   return (
-    <Search
+    <SearchInput
       placeholder='Search'
       value={query}
       onChangeText={setQuery}
@@ -164,7 +177,7 @@ function MyComponent() {
 Provide `onClear` to extend the default clear behavior with additional logic:
 
 ```tsx
-import { Search } from '@ledgerhq/lumen-ui-rnative';
+import { SearchInput } from '@ledgerhq/lumen-ui-rnative';
 import { useState } from 'react';
 
 function MyComponent() {
@@ -172,7 +185,7 @@ function MyComponent() {
   const [error, setError] = useState('');
 
   return (
-    <Search
+    <SearchInput
       placeholder='Search users'
       value={query}
       onChangeText={setQuery}
@@ -190,10 +203,10 @@ function MyComponent() {
 
 ### With Error State
 
-The Search component supports error states and messages:
+The SearchInput component supports error states and messages:
 
 ```tsx
-import { Search } from '@ledgerhq/lumen-ui-rnative';
+import { SearchInput } from '@ledgerhq/lumen-ui-rnative';
 import { useState } from 'react';
 
 function MyComponent() {
@@ -211,7 +224,7 @@ function MyComponent() {
   };
 
   return (
-    <Search
+    <SearchInput
       placeholder='Search products'
       value={query}
       onChangeText={handleSearch}
@@ -225,14 +238,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
-<Search
+<SearchInput
   placeholder='Search'
   value={query}
   onChangeText={setQuery}
-  className='max-w-md' // Control width
+  style={{ maxWidth: 320 }} // Control width
 />
 ```
 
@@ -242,7 +255,7 @@ Use the `keyboardType` prop to show the appropriate keyboard:
 
 ```tsx
 // Email search keyboard
-<Search
+<SearchInput
   placeholder='Search by email'
   value={query}
   onChangeText={setQuery}
@@ -250,7 +263,7 @@ Use the `keyboardType` prop to show the appropriate keyboard:
 />
 
 // URL search keyboard
-<Search
+<SearchInput
   placeholder='Search by URL'
   value={query}
   onChangeText={setQuery}
@@ -263,7 +276,7 @@ Use the `keyboardType` prop to show the appropriate keyboard:
 Use the `editable` prop to disable the search input:
 
 ```tsx
-<Search placeholder='Search' value='Current search' editable={false} />
+<SearchInput placeholder='Search' value='Current search' editable={false} />
 ```
 
 ### Debounced Search Example
@@ -271,7 +284,7 @@ Use the `editable` prop to disable the search input:
 For better performance, especially when dealing with API calls or expensive filtering operations, implement debounced search:
 
 ```tsx
-import { Search } from '@ledgerhq/lumen-ui-rnative';
+import { SearchInput } from '@ledgerhq/lumen-ui-rnative';
 import { useState, useCallback } from 'react';
 import { debounce } from 'lodash'; // or your preferred debounce utility
 
@@ -298,7 +311,7 @@ function MyComponent() {
   };
 
   return (
-    <Search
+    <SearchInput
       placeholder='Search products'
       value={query}
       onChangeText={handleChange}
@@ -309,18 +322,18 @@ function MyComponent() {
 
 ## Do's and Don'ts
 
-The following guidelines ensure consistent usage of the Search component and maintain design system principles.
+The following guidelines ensure consistent usage of the SearchInput component and maintain design system principles.
 
-<div className='flex flex-col gap-24'>
+<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
   <DoVsDontRow>
     <DoBlockItem
       title='Use placeholder text'
-      description='Search uses placeholder text instead of labels for optimal search UX'
+      description='SearchInput uses placeholder text instead of labels for optimal search UX'
     >
 
 {/* prettier-ignore */}
 ```tsx
-<Search
+<SearchInput
   placeholder='Search by name or email'
   value={query}
   onChangeText={setQuery}
@@ -330,12 +343,12 @@ The following guidelines ensure consistent usage of the Search component and mai
     </DoBlockItem>
     <DontBlockItem
       title="Don't use label prop"
-      description='Search component does not support labels as they are not suitable for search UX patterns'
+      description='SearchInput component does not support labels as they are not suitable for search UX patterns'
     >
 
 {/* prettier-ignore */}
 ```tsx
-<Search
+<SearchInput
   label='Search' // Not supported, will cause error
   placeholder='Search by name or email'
   value={query}
@@ -354,7 +367,7 @@ The following guidelines ensure consistent usage of the Search component and mai
 
 {/* prettier-ignore */}
 ```tsx
-<Search
+<SearchInput
   placeholder='Search products'
   value={query}
   onChangeText={handleChange}
@@ -364,12 +377,12 @@ The following guidelines ensure consistent usage of the Search component and mai
     </DoBlockItem>
     <DontBlockItem
       title="Don't override the search icon"
-      description='The prefix prop is not available on Search component'
+      description='The prefix prop is not available on SearchInput component'
     >
 
 {/* prettier-ignore */}
 ```tsx
-<Search
+<SearchInput
   prefix={<CustomIcon />} // Not supported, will cause error
   placeholder='Search products'
 />
@@ -387,7 +400,7 @@ The following guidelines ensure consistent usage of the Search component and mai
 
 {/* prettier-ignore */}
 ```tsx
-<Search
+<SearchInput
   placeholder='Search'
   value={query}
   onChangeText={setQuery}
@@ -406,7 +419,7 @@ The following guidelines ensure consistent usage of the Search component and mai
 
 {/* prettier-ignore */}
 ```tsx
-<Search
+<SearchInput
   placeholder='Search'
   value={query}
   onChangeText={setQuery}
@@ -431,7 +444,7 @@ const debouncedSearch = useCallback(
   []
 );
 
-<Search
+<SearchInput
   placeholder='Search'
   value={query}
   onChangeText={(text) => {
@@ -454,7 +467,7 @@ const debouncedSearch = useCallback(
   []
 );
 
-<Search
+<SearchInput
   placeholder='Search'
   value={query}
   onChangeText={(text) => {
@@ -476,7 +489,7 @@ const debouncedSearch = useCallback(
 
 {/* prettier-ignore */}
 ```tsx
-<Search
+<SearchInput
   placeholder='Search by name or email'
   value={query}
   onChangeText={setQuery}
@@ -491,7 +504,7 @@ const debouncedSearch = useCallback(
 
 {/* prettier-ignore */}
 ```tsx
-<Search
+<SearchInput
   placeholder='Type here'
   value={query}
   onChangeText={setQuery}
@@ -531,14 +544,14 @@ const debouncedSearch = useCallback(
 
 ## Usage Guidelines
 
-Use Search for:
+Use SearchInput for:
 
 - Search functionality and data querying
 - Filtering lists or datasets
 - Quick find operations
 - Search bars in navigation
 
-Use TextInput (instead of Search) for:
+Use TextInput (instead of SearchInput) for:
 
 - Form data collection
 - User profile information
@@ -547,3 +560,4 @@ Use TextInput (instead of Search) for:
 
 </Tab>
 </CustomTabs>
+

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

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { useState } from 'react';
+import { View } from 'react-native';
+import { SearchInput } from './SearchInput';
+import { SearchInputProps } from './types';
+
+const meta: Meta<typeof SearchInput> = {
+  component: SearchInput,
+  title: 'Input/SearchInput',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code',
+      },
+    },
+  },
+  argTypes: {
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when input is empty',
+    },
+    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;
+type Story = StoryObj<typeof SearchInput>;
+
+const SearchInputStory = (
+  args: SearchInputProps & { initialValue?: string },
+) => {
+  const [query, setQuery] = useState(args.initialValue ?? '');
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        minHeight: 96,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+      }}
+    >
+      <View style={{ width: '100%', maxWidth: 400 }}>
+        <SearchInput
+          {...args}
+          value={query}
+          onChangeText={setQuery}
+          onClear={args.onClear}
+        />
+      </View>
+    </View>
+  );
+};
+
+export const Base: Story = {
+  render: (args) => <SearchInputStory {...args} />,
+  args: {
+    placeholder: 'Search products',
+    editable: true,
+    hideClearButton: false,
+  },
+};
+
+export const WithContent: Story = {
+  render: (args) => <SearchInputStory {...args} initialValue='Search text' />,
+  args: {
+    placeholder: 'Search products',
+    editable: true,
+    hideClearButton: false,
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => (
+    <SearchInputStory {...args} initialValue='Invalid search' />
+  ),
+  args: {
+    placeholder: 'Search products',
+    errorMessage: 'Search term is invalid',
+    editable: true,
+    hideClearButton: false,
+  },
+};
+
+export const DisabledSearchInput: Story = {
+  render: (args) => (
+    <SearchInputStory {...args} initialValue='Disabled search' />
+  ),
+  args: {
+    placeholder: 'Search products',
+    editable: false,
+    hideClearButton: false,
+  },
+};
+
+export const WithHiddenClearButton: Story = {
+  render: (args) => <SearchInputStory {...args} initialValue='Search text' />,
+  args: {
+    placeholder: 'Search products',
+    editable: true,
+    hideClearButton: true,
+  },
+};
+
+export const WithClearCallback: Story = {
+  render: (args) => (
+    <SearchInputStory
+      {...args}
+      initialValue='Click clear to see callback'
+      onClear={() => alert('Search cleared!')}
+    />
+  ),
+  args: {
+    placeholder: 'Search products',
+    editable: true,
+    hideClearButton: false,
+  },
+};

package/src/lib/Components/SearchInput/SearchInput.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+import { Search as SearchIcon } from '../../Symbols';
+import { BaseInput } from '../BaseInput';
+import { type SearchInputProps } from './types';
+
+export const SearchInput = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  SearchInputProps
+>((props, ref) => {
+  return (
+    <BaseInput
+      ref={ref}
+      prefix={<SearchIcon size={20} color='muted' accessible={false} />}
+      {...props}
+    />
+  );
+});
+
+SearchInput.displayName = 'SearchInput';

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

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

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

@@ -0,0 +1,5 @@
+import { BaseInputProps } from '../BaseInput';
+import { BoxProps } from '../Utility';
+
+export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label'> &
+  BoxProps;

package/src/lib/Components/Select/GlobalSelectBottomSheet.tsx

@@ -1,6 +1,6 @@
-import { cn } from '@ledgerhq/lumen-utils-shared';
 import React, { useCallback, useEffect } from 'react';
-import { View, Text, Pressable } from 'react-native';
+import { Pressable } from 'react-native';
+import { useStyleSheet } from '../../../styles';
 import { Check } from '../../Symbols';
 import {
   BottomSheet,
@@ -8,8 +8,54 @@ import {
   BottomSheetView,
   useBottomSheetRef,
 } from '../BottomSheet';
+import { Box, Text } from '../Utility';
 import { useGlobalSelectSafeContext } from './GlobalSelectContext';
 
+const useStyles = () => {
+  return useStyleSheet(
+    (t) => ({
+      bottomSheetView: {
+        paddingHorizontal: t.spacings.s8,
+      },
+      separator: {
+        marginVertical: t.spacings.s4,
+        marginHorizontal: t.spacings.s8,
+        height: 1,
+        backgroundColor: t.colors.bg.muted,
+      },
+      groupLabel: {
+        marginBottom: t.spacings.s4,
+        paddingHorizontal: t.spacings.s8,
+        paddingTop: t.spacings.s8,
+        color: t.colors.text.muted,
+        ...t.typographies.body3SemiBold,
+      },
+      item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: t.borderRadius.sm,
+        padding: t.spacings.s8,
+        backgroundColor: t.colors.bg.baseTransparent,
+      },
+      itemPressed: {
+        backgroundColor: t.colors.bg.baseTransparentPressed,
+      },
+      itemDisabled: {
+        opacity: 0.5,
+      },
+      itemLabel: {
+        flex: 1,
+        color: t.colors.text.base,
+        ...t.typographies.body2,
+      },
+      itemLabelDisabled: {
+        color: t.colors.text.disabled,
+      },
+    }),
+    [],
+  );
+};
+
 /**
  * BottomSheet component that displays select options.
  * This should be placed at the root level inside GestureHandlerRootView.
@@ -30,6 +76,7 @@ import { useGlobalSelectSafeContext } from './GlobalSelectContext';
  */
 export const GlobalSelectBottomSheet: React.FC = () => {
   const bottomSheetRef = useBottomSheetRef();
+  const styles = useStyles();
   /**
    * This is the only component that subscribes to currentSelect
    * All other components use refs to avoid re-renders
@@ -73,7 +120,7 @@ export const GlobalSelectBottomSheet: React.FC = () => {
       enableDynamicSizing
       enablePanDownToClose
     >
-      <BottomSheetView className='!px-8'>
+      <BottomSheetView style={styles.bottomSheetView}>
         {currentSelect && (
           <>
             {currentSelect.label && (
@@ -82,24 +129,16 @@ export const GlobalSelectBottomSheet: React.FC = () => {
                 appearance='compact'
               />
             )}
-            <View className='gap-4'>
+            <Box lx={{ gap: 's4' }}>
               {currentSelect.items.map((item, index) => {
                 if (item.type === 'separator') {
                   return (
-                    <View
-                      key={`separator-${index}`}
-                      className={cn('my-4 mx-8 h-1 bg-muted')}
-                    />
+                    <Box key={`separator-${index}`} style={styles.separator} />
                   );
                 }
                 if (item.type === 'group-label') {
                   return (
-                    <Text
-                      key={`label-${index}`}
-                      className={cn(
-                        'mb-4 px-8 pt-8 pb-0 text-muted body-3-semi-bold',
-                      )}
-                    >
+                    <Text key={`label-${index}`} style={styles.groupLabel}>
                       {item.label}
                     </Text>
                   );
@@ -112,31 +151,29 @@ export const GlobalSelectBottomSheet: React.FC = () => {
                     onPress={() => handleSelectItem(item.value)}
                   >
                     {({ pressed }) => (
-                      <View
-                        className={cn(
-                          'flex-row items-center rounded-sm p-8 bg-base-transparent',
-                          pressed && 'bg-base-transparent-pressed',
-                          item.disabled && 'opacity-50',
-                        )}
+                      <Box
+                        style={[
+                          styles.item,
+                          pressed && styles.itemPressed,
+                          item.disabled && styles.itemDisabled,
+                        ]}
                       >
                         <Text
-                          className={cn(
-                            'flex-1 text-base body-2',
-                            item.disabled && 'text-disabled',
-                          )}
+                          style={[
+                            styles.itemLabel,
+                            item.disabled && styles.itemLabelDisabled,
+                          ]}
                           numberOfLines={1}
                         >
                           {item.label}
                         </Text>
-                        {isSelected && (
-                          <Check size={24} className='text-active' />
-                        )}
-                      </View>
+                        {isSelected && <Check size={24} color='active' />}
+                      </Box>
                     )}
                   </Pressable>
                 );
               })}
-            </View>
+            </Box>
           </>
         )}
       </BottomSheetView>