feat(ui-rnative): add BaseInput

.nx/version-plans/version-plan-1762435410704.md

@@ -0,0 +1,6 @@
+---
+'@ledgerhq/ldls-ui-rnative': patch
+'@ledgerhq/ldls-ui-react': patch
+---
+
+feat(ui-rnative): add BaseInput

apps/app-sandbox-rnative/src/app/App.tsx

@@ -3,6 +3,7 @@ import { SafeAreaView, ScrollView, StatusBar, View } from 'react-native';
 import { Buttons } from './blocks/Buttons';
 import { Checkboxes } from './blocks/Checkboxes';
 import { IconButtons } from './blocks/IconButtons';
+import { Inputs } from './blocks/Inputs';
 import { Switches } from './blocks/Switches';
 import { ToggleThemeSwitch } from './blocks/ToggleThemeSwitch';
 import { SandboxBlock } from './SandboxBlock';
@@ -14,9 +15,12 @@ export const App = () => {
       <ThemeProvider defaultMode='dark' className='flex flex-1'>
         <ScrollView
           contentInsetAdjustmentBehavior='automatic'
-          className='bg-canvas-sheet h-screen px-16 '
+          className='h-screen bg-canvas-sheet px-16'
         >
           <View className='flex flex-col gap-32 py-40'>
+            <SandboxBlock title='Inputs'>
+              <Inputs />
+            </SandboxBlock>
             <SandboxBlock title='Checkboxes'>
               <Checkboxes />
             </SandboxBlock>

apps/app-sandbox-rnative/src/app/blocks/Inputs.tsx

@@ -0,0 +1,68 @@
+import { TextInput } from '@ledgerhq/ldls-ui-rnative';
+import { Eye, EyeCross } from '@ledgerhq/ldls-ui-rnative/symbols';
+import { useEffect, useState } from 'react';
+import { Alert, Pressable, View } from 'react-native';
+
+export function Inputs() {
+  const [team, setTeam] = useState<string>();
+  const [isTeamValid, setIsTeamValid] = useState(true);
+
+  useEffect(() => {
+    if (team) {
+      setIsTeamValid(team.toLowerCase() === 'ldls');
+    }
+  }, [team]);
+
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <View className='gap-8'>
+      <TextInput
+        label='Username'
+        className='min-w-full'
+        onClear={() =>
+          Alert.alert('Custom handler', 'You found an easter egg!', [
+            { text: 'Okay', style: 'default' },
+          ])
+        }
+      />
+      <TextInput
+        label='Password'
+        className='min-w-full'
+        secureTextEntry={!showPassword}
+        hideClearButton
+        suffix={
+          <Pressable onPress={() => setShowPassword(!showPassword)}>
+            {showPassword ? (
+              <EyeCross size={20} className='text-base' />
+            ) : (
+              <Eye size={20} className='text-base' />
+            )}
+          </Pressable>
+        }
+      />
+      <TextInput
+        label='Company'
+        className='min-w-full'
+        defaultValue='Ledger'
+        editable={false}
+      />
+      <TextInput
+        label='Team'
+        className='min-w-full'
+        value={team}
+        onChangeText={setTeam}
+        errorMessage={
+          !isTeamValid && team !== undefined
+            ? 'Team must match "ldls"!'
+            : undefined
+        }
+      />
+      <TextInput
+        label='A very long label that should really be truncated at different breakpoints'
+        className='min-w-full'
+        defaultValue='This is a default value!'
+      />
+    </View>
+  );
+}

libs/ui-react/src/lib/Components/AddressInput/AddressInput.mdx

@@ -11,7 +11,7 @@ import { CustomTabs, Tab } from '../../../../.storybook/CustomTabs';
 
 The AddressInput component provides a specialized input field for entering cryptocurrency addresses or ENS names. Built on top of BaseInput, it features a customizable prefix label (defaults to "To:") and context-aware suffix icons.
 
-> **Layout:** The AddressInput component takes the full width of its container by default. You can control the width directly using `containerClassName` or by wrapping in a container.
+> **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.
 
 ## Introduction
 
@@ -89,10 +89,10 @@ import { AddressInput } from '@ledgerhq/ldls-ui-react';
 
 // Basic usage
 <AddressInput
-  placeholder="Enter address or ENS"
+  placeholder='Enter address or ENS'
   value={address}
   onChange={(e) => setAddress(e.target.value)}
-/>
+/>;
 ```
 
 ## Key Features
@@ -156,7 +156,8 @@ const [error, setError] = React.useState('');
 
 React.useEffect(() => {
   if (address.length > 0) {
-    const isValidEthereumAddress = address.startsWith('0x') && address.length === 42;
+    const isValidEthereumAddress =
+      address.startsWith('0x') && address.length === 42;
     const isValidENS = address.endsWith('.eth');
 
     if (!isValidEthereumAddress && !isValidENS) {
@@ -172,7 +173,7 @@ React.useEffect(() => {
   onChange={(e) => setAddress(e.target.value)}
   errorMessage={error}
   aria-invalid={!!error}
-/>
+/>;
 ```
 
 ### Custom Clear Behavior
@@ -195,14 +196,14 @@ Handle clearing logic with additional state management:
 
 ### Layout & Styling
 
-The AddressInput component takes the **full width** of its parent container by default. You can control the width using `containerClassName` (preferred) or wrapper containers:
+The AddressInput component takes the **full width** of its parent container by default. You can control the width using `className` (preferred) or wrapper containers:
 
 ```tsx
 // ✅ Preferred: Direct width control
-<AddressInput placeholder="Enter address or ENS" containerClassName="max-w-md" />
+<AddressInput placeholder="Enter address or ENS" className="max-w-md" />
 
 // ✅ Responsive width control
-<AddressInput placeholder="Enter address or ENS" containerClassName="w-full md:max-w-md" />
+<AddressInput placeholder="Enter address or ENS" className="w-full md:max-w-md" />
 
 // Alternative: Container wrapper
 <div className="max-w-md">
@@ -231,11 +232,11 @@ const handleQrScan = () => {
 };
 
 <AddressInput
-  placeholder="Enter address or ENS"
+  placeholder='Enter address or ENS'
   value={address}
   onChange={(e) => setAddress(e.target.value)}
   onQrCodeClick={handleQrScan}
-/>
+/>;
 ```
 
 ## Common Patterns
@@ -245,12 +246,12 @@ const handleQrScan = () => {
 ```tsx
 <form>
   <AddressInput
-    placeholder="Enter address or ENS"
+    placeholder='Enter address or ENS'
     value={recipientAddress}
     onChange={(e) => setRecipientAddress(e.target.value)}
     errorMessage={addressError}
     aria-invalid={!!addressError}
-    containerClassName="max-w-md"
+    className='max-w-md'
   />
   {/* Other transaction fields */}
 </form>
@@ -260,16 +261,16 @@ const handleQrScan = () => {
 
 ```tsx
 <AddressInput
-  placeholder="Enter address or ENS"
+  placeholder='Enter address or ENS'
   value={selectedAddress}
   onChange={(e) => setSelectedAddress(e.target.value)}
   onQrCodeClick={() => openQrScanner()}
   suffix={
     selectedAddress ? (
       <InteractiveIcon
-        iconType="stroked"
+        iconType='stroked'
         onClick={openAddressBook}
-        aria-label="Open address book"
+        aria-label='Open address book'
       >
         <ContactsIcon size={20} />
       </InteractiveIcon>
@@ -299,11 +300,11 @@ The component includes comprehensive test coverage for:
 ✅ **Do**
 
 ```tsx
-// Use containerClassName for layout and width control (preferred)
-<AddressInput placeholder="Enter address or ENS" containerClassName="max-w-md" />
+// Use className for layout and width control (preferred)
+<AddressInput placeholder="Enter address or ENS" className="max-w-md" />
 
-// Use containerClassName for responsive design
-<AddressInput placeholder="Enter address or ENS" containerClassName="w-full md:max-w-lg" />
+// Use className for responsive design
+<AddressInput placeholder="Enter address or ENS" className="w-full md:max-w-lg" />
 
 // Use custom prefix for different contexts
 <AddressInput
@@ -322,7 +323,7 @@ const validateAddress = (address) => {
 ❌ **Don't**
 
 ```tsx
-// Don't use generic wrapper divs when containerClassName is available
+// Don't use generic wrapper divs when className is available
 <div className="max-w-md">
   <AddressInput placeholder="Enter address or ENS" />
 </div>

libs/ui-react/src/lib/Components/AddressInput/AddressInput.stories.tsx

@@ -57,12 +57,12 @@ export const Empty: Story = {
   args: {
     placeholder: 'Enter address or ENS',
     onQrCodeClick: () => console.log('QR code clicked!'),
-    containerClassName: 'max-w-md',
+    className: 'max-w-md',
   },
   parameters: {
     docs: {
       source: {
-        code: '<AddressInput placeholder="Enter address or ENS" onQrCodeClick={() => openQrScanner()} containerClassName="max-w-md" />',
+        code: '<AddressInput placeholder="Enter address or ENS" onQrCodeClick={() => openQrScanner()} className="max-w-md" />',
       },
     },
   },
@@ -75,13 +75,13 @@ export const WithContent: Story = {
   args: {
     placeholder: 'Enter address or ENS',
     defaultValue: '0x95f980s5ag77xe7csuz',
-    containerClassName: 'max-w-md',
+    className: 'max-w-md',
     onQrCodeClick: () => console.log('QR code clicked!'),
   },
   parameters: {
     docs: {
       source: {
-        code: '<AddressInput placeholder="Enter address or ENS" defaultValue="0x95f980s5ag77xe7csuz" containerClassName="max-w-md" />',
+        code: '<AddressInput placeholder="Enter address or ENS" defaultValue="0x95f980s5ag77xe7csuz" className="max-w-md" />',
       },
     },
   },
@@ -95,13 +95,13 @@ export const Disabled: Story = {
     placeholder: 'Enter address or ENS',
     disabled: true,
     defaultValue: '0x95f980s5ag77xe7csuz',
-    containerClassName: 'max-w-md',
+    className: 'max-w-md',
     onQrCodeClick: () => console.log('QR code clicked!'),
   },
   parameters: {
     docs: {
       source: {
-        code: '<AddressInput placeholder="Enter address or ENS" disabled defaultValue="0x95f980s5ag77xe7csuz" containerClassName="max-w-md" />',
+        code: '<AddressInput placeholder="Enter address or ENS" disabled defaultValue="0x95f980s5ag77xe7csuz" className="max-w-md" />',
       },
     },
   },
@@ -116,7 +116,7 @@ export const Error: Story = {
     defaultValue: 'invalid-address-format',
     errorMessage: 'Invalid address format',
     'aria-invalid': true,
-    containerClassName: 'max-w-md',
+    className: 'max-w-md',
     onQrCodeClick: () => console.log('QR code clicked!'),
   },
   parameters: {
@@ -127,7 +127,7 @@ export const Error: Story = {
   defaultValue="invalid-address-format"
   errorMessage="Invalid address format"
   aria-invalid={true}
-  containerClassName="max-w-md"
+  className="max-w-md"
 />`,
       },
     },
@@ -180,7 +180,7 @@ export const Controlled: Story = {
           }}
           errorMessage={error}
           aria-invalid={!!error}
-          containerClassName='max-w-md'
+          className='max-w-md'
         />
 
         <div className='text-muted body-3'>
@@ -190,11 +190,11 @@ export const Controlled: Story = {
         </div>
 
         {address && !error && (
-          <div className='border-muted bg-success rounded-md border p-16'>
-            <h4 className='text-success body-2-semi-bold mb-4'>
+          <div className='rounded-md border border-muted bg-success p-16'>
+            <h4 className='mb-4 text-success body-2-semi-bold'>
               Valid Address
             </h4>
-            <p className='text-success body-3 break-all'>{address}</p>
+            <p className='break-all text-success body-3'>{address}</p>
           </div>
         )}
       </div>
@@ -208,13 +208,13 @@ export const Controlled: Story = {
 export const WithoutQrCode: Story = {
   args: {
     placeholder: 'Enter address or ENS',
-    containerClassName: 'max-w-md',
+    className: 'max-w-md',
     onQrCodeClick: undefined,
   },
   parameters: {
     docs: {
       source: {
-        code: '<AddressInput  containerClassName="max-w-md" />',
+        code: '<AddressInput className="max-w-md" />',
       },
     },
   },

libs/ui-react/src/lib/Components/AddressInput/AddressInput.tsx

@@ -40,7 +40,7 @@ export type AddressInputProps = {
  * - **Conditional QR code scanner** appears only when onQrCodeClick handler is provided
  * - **ENS and address support** optimized for cryptocurrency address entry
  * - **Error state styling** with aria-invalid and errorMessage support
- * - **Flexible styling** via className, containerClassName props
+ * - **Flexible styling** via className, inputClassName, labelClassName props
  *
  * ## Clear Button Behavior
  * - Shows automatically when input has content and is not disabled
@@ -92,7 +92,7 @@ export const AddressInput = React.forwardRef<
   // Use custom prefix if provided, otherwise default "To:" prefix
   const effectivePrefix = (
     <span
-      className='body-1 group-has-[:disabled]:text-disabled text-nowrap text-base'
+      className='text-nowrap text-base body-1 group-has-[:disabled]:text-disabled'
       aria-hidden='true'
     >
       {prefix}