@ledgerhq/lumen-ui-rnative 0.1.15 → 0.1.16

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

@@ -19,24 +19,6 @@ const meta: Meta<typeof SearchInput> = {
       },
     },
   },
-  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;
@@ -105,7 +87,7 @@ export const DisabledSearchInput: Story = {
   ),
   args: {
     placeholder: 'Search products',
-    editable: false,
+    disabled: true,
     hideClearButton: false,
   },
 };

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

@@ -1,3 +1,4 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
 import { useStyleSheet } from '../../../styles';
 import { Search as SearchIcon } from '../../Symbols';
 import { BaseInput } from '../BaseInput';
@@ -8,18 +9,24 @@ export const SearchInput = ({
   style,
   containerStyle,
   inputStyle,
+  disabled: disabledProp,
   ref,
   ...props
 }: SearchInputProps) => {
+  const disabled = useDisabledContext({
+    consumerName: 'SearchInput',
+    mergeWith: { disabled: disabledProp },
+  });
   const styles = useAppearanceStyles(appearance);
 
   return (
     <BaseInput
       ref={ref}
-      prefix={<SearchIcon size={20} color='muted' accessible={false} />}
+      prefix={<SearchIcon size={20} accessible={false} disabled={disabled} />}
       style={style}
       containerStyle={[containerStyle, styles.container]}
       inputStyle={[inputStyle, styles.input]}
+      disabled={disabledProp}
       {...props}
     />
   );

package/src/lib/Components/TextInput/TextInput.mdx

@@ -67,10 +67,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={TextInputStories.DisabledTextInput} />
 
+### 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.
+
 ### Keyboard Types
 
 The component supports various React Native TextInput keyboard types:
@@ -270,7 +274,15 @@ 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
+<TextInput label='Username' value='johndoe' disabled />
+```
+
+### Read-Only State
+
+Use the `editable` prop to make the input non-editable without the muted visual style:
 
 ```tsx
 <TextInput label='Username' value='johndoe' editable={false} />

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

@@ -16,33 +16,6 @@ const meta: Meta<typeof TextInput> = {
       },
     },
   },
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Floating label text',
-    },
-    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',
-    },
-    keyboardType: {
-      control: 'select',
-      options: ['default', 'email-address', 'numeric', 'phone-pad', 'url'],
-      description: 'Keyboard type for input',
-    },
-  },
 };
 
 export default meta;
@@ -108,7 +81,7 @@ export const DisabledTextInput: Story = {
   render: (args) => <TextInputStory {...args} initialValue='johndoe' />,
   args: {
     label: 'Username',
-    editable: false,
+    disabled: true,
     hideClearButton: false,
     keyboardType: 'default',
   },

package/src/lib/Components/index.ts

@@ -18,6 +18,7 @@ export * from './Link';
 export * from './ListItem';
 export * from './MediaBanner';
 export * from './MediaCard';
+export * from './MediaImage';
 export * from './NavBar';
 export * from './PageIndicator';
 export * from './SearchInput';