[Dls 680] refactor(BaseInput): Add status and helperText

.cursor/commands/open-pr.md

@@ -29,22 +29,19 @@ git diff main...HEAD --name-only -- .nx/version-plans/
 - Files under `libs/design-core/` → `'@ledgerhq/lumen-design-core'`
 - Files under `libs/utils-shared/` → `'@ledgerhq/lumen-utils-shared'`
 
-Pick the bump type based on the change:
-- `patch` — bug fixes, small tweaks
-- `minor` — new features, new components, new props
-- `major` — breaking changes
+Always use `patch` as the bump type — never `minor`, never `major` — regardless of the change (feature, fix, breaking change, etc.). See `.cursor/rules/shared/release-plan.mdc`.
 
-Write the file as `.nx/version-plans/version-plan-<timestamp>.md` with this format:
+Create **one file per affected package** — never group multiple packages in the same file. If N packages are affected, create N files named `.nx/version-plans/version-plan-<timestamp>-<pkg>.md`, each with a single-package frontmatter:
 
 ```markdown
 ---
-'@ledgerhq/lumen-ui-rnative': minor
+'@ledgerhq/lumen-ui-rnative': patch
 ---
 
 feat(Select): add render prop and SelectButtonTrigger
 ```
 
-The description line should match the PR title / commit message style. If multiple packages are affected, list them all in the frontmatter.
+The description line should match the PR title / commit message style.
 
 ## Step 2: Create a commit if needed
 

.cursor/rules/shared/release-plan.mdc

@@ -0,0 +1,63 @@
+---
+description: Nx version plans must always use `patch` bump type, regardless of change
+globs:
+alwaysApply: true
+---
+
+# Release plan bump type
+
+When generating an Nx version plan in `.nx/version-plans/`, the bump type
+in the frontmatter MUST always be `patch` — never `minor`, never `major` —
+regardless of the nature of the change (new feature, new component, new prop,
+breaking change, refactor, fix, etc.).
+
+```markdown
+---
+'@ledgerhq/lumen-ui-rnative': patch
+---
+
+feat(Select): add render prop and SelectButtonTrigger
+```
+
+- Do not infer `minor` from `feat(...)` commits.
+- Do not infer `major` from breaking changes.
+
+## One package per file
+
+Each release plan file MUST list a single package in its frontmatter — never
+group multiple packages in the same file. If a change affects N packages,
+create N separate `version-plan-<timestamp>-<pkg>.md` files, one per package.
+
+```markdown
+---
+'@ledgerhq/lumen-ui-react': patch
+---
+
+feat(Select): add render prop and SelectButtonTrigger
+```
+
+```markdown
+---
+'@ledgerhq/lumen-ui-rnative': patch
+---
+
+feat(Select): add render prop and SelectButtonTrigger
+```
+
+Do NOT do this:
+
+```markdown
+---
+'@ledgerhq/lumen-ui-react': patch
+'@ledgerhq/lumen-ui-rnative': patch
+---
+```
+
+This applies to all packages, including but not limited to:
+
+- `@ledgerhq/lumen-ui-react`
+- `@ledgerhq/lumen-ui-rnative`
+- `@ledgerhq/lumen-ui-react-visualization`
+- `@ledgerhq/lumen-ui-rnative-visualization`
+- `@ledgerhq/lumen-design-core`
+- `@ledgerhq/lumen-utils-shared`

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

@@ -0,0 +1,58 @@
+---
+'@ledgerhq/lumen-ui-react': patch
+---
+
+feat(Input): replace `errorMessage` with `helperText` and `status` across react inputs
+
+## Breaking change
+
+The input feedback API changed across React input components.
+
+- Removed: `errorMessage`
+- Added: `helperText`
+- Added: `status` with `error | success`
+
+This affects `TextInput`, `SearchInput`, `AddressInput`, `BaseInput`, and `SelectSearch`.
+
+## Migration guide
+
+### Error feedback
+
+```diff
+- <TextInput errorMessage="Please enter a valid email address" />
++ <TextInput
++   helperText="Please enter a valid email address"
++   status="error"
++ />
+```
+
+### Error feedback — `aria-invalid` is now auto-set
+
+`aria-invalid={true}` is automatically set on the input when `status="error"`. You no longer need to pass it explicitly.
+
+```diff
+- <SearchInput
+-   aria-invalid={!isValid}
+-   errorMessage="Search failed. Please try again."
+- />
++ <SearchInput
++   helperText="Search failed. Please try again."
++   status="error"
++ />
+```
+
+## New addition: 
+
+### Neutral helper copy
+
+```diff
+- <AddressInput errorMessage="Enter a valid address" />
++ <AddressInput helperText="Enter a valid address" />
+```
+
+### Success feedback
+
+```diff
+- <TextInput helperText="Address verified" />
++ <TextInput helperText="Address verified" status="success" />
+```

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

@@ -0,0 +1,53 @@
+---
+'@ledgerhq/lumen-ui-rnative': patch
+---
+
+feat(Input): replace `errorMessage` with `helperText` and `status` across native inputs
+
+## Breaking change
+
+The input feedback API changed across React Native input components.
+
+- Removed: `errorMessage`
+- Added: `helperText`
+- Added: `status` with `error | success`
+
+This affects `TextInput`, `SearchInput`, `AddressInput`, and `BaseInput`.
+
+## Migration guide
+
+### Error feedback
+
+```diff
+- <TextInput errorMessage="Username must be at least 3 characters" />
++ <TextInput
++   helperText="Username must be at least 3 characters"
++   status="error"
++ />
+```
+
+### Search validation feedback
+
+```diff
+- <SearchInput errorMessage="Search term is invalid" />
++ <SearchInput
++   helperText="Search term is invalid"
++   status="error"
++ />
+```
+
+## New addition: 
+
+### Neutral helper copy
+
+```diff
+- <AddressInput errorMessage="Enter address or ENS" />
++ <AddressInput helperText="Enter address or ENS" />
+```
+
+### Success feedback
+
+```diff
+- <TextInput helperText="Address verified" />
++ <TextInput helperText="Address verified" status="success" />
+```

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

@@ -31,6 +31,7 @@ export function TextInputs() {
           ])
         }
       />
+      <TextInput label='Email' placeholder='name@example.com' />
       <TextInput
         label='Password'
         secureTextEntry={!showPassword}
@@ -50,11 +51,24 @@ export function TextInputs() {
         label='Team'
         value={team}
         onChangeText={setTeam}
-        errorMessage={
+        helperText={
           !isTeamValid && team !== undefined
             ? 'Team must match "lumen"!'
             : undefined
         }
+        status={!isTeamValid && team !== undefined ? 'error' : undefined}
+      />
+
+      <TextInput
+        label='Team'
+        value={team}
+        status={isTeamValid && team !== undefined ? 'success' : undefined}
+        onChangeText={setTeam}
+        helperText={
+          isTeamValid && team !== undefined
+            ? 'Team matches "lumen"!'
+            : undefined
+        }
       />
       <TextInput
         label='A very long label that should really be truncated at different breakpoints'

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

@@ -18,7 +18,11 @@ figma.connect(
       disabled: figma.enum('state', {
         disabled: true,
       }),
-      errorMessage: figma.nestedProps('.status', {
+      status: figma.enum('state', {
+        error: 'error',
+        success: 'success',
+      }),
+      helperText: figma.nestedProps('.status', {
         label: figma.string('label'),
       }),
     },
@@ -28,7 +32,8 @@ figma.connect(
         value={props.value}
         placeholder={props.placeholder}
         onQrCodeClick={() => openQrScanner}
-        errorMessage={props.errorMessage.label}
+        helperText={props.helperText.label}
+        status={props.status}
       />
     ),
   },

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

@@ -27,7 +27,7 @@ AddressInput is designed specifically where users need to enter wallet addresses
 - **Customizable prefix label** - defaults to "To:" but can be overridden via prefix prop
 - **Conditional QR code scanner** - Appears only when onQrCodeClick handler is provided, using consistent InteractiveIcon styling
 - **Smart clear button** - Appears automatically when content is entered
-- **Error handling** - Supports error states and error messages
+- **Error handling** - Supports validation feedback via `helperText` and `status`
 
 <Canvas of={AddressInputStories.Default} />
 
@@ -178,8 +178,8 @@ React.useEffect(() => {
 <AddressInput
   value={address}
   onChange={(e) => setAddress(e.target.value)}
-  errorMessage={error}
-  aria-invalid={!!error}
+  helperText={error || undefined}
+  status={error ? 'error' : undefined}
 />;
 ```
 
@@ -256,8 +256,8 @@ const handleQrScan = () => {
     placeholder='Enter address or ENS'
     value={recipientAddress}
     onChange={(e) => setRecipientAddress(e.target.value)}
-    errorMessage={addressError}
-    aria-invalid={!!addressError}
+    helperText={addressError || undefined}
+    status={addressError ? 'error' : undefined}
     className='max-w-md'
   />
   {/* Other transaction fields */}
@@ -448,8 +448,8 @@ The component includes comprehensive test coverage for:
 
   <DoVsDontRow>
     <DoBlockItem
-      title='Use aria-invalid for errors'
-      description='Use aria-invalid to control the error state styling'
+      title='Use status for errors'
+      description='status drives visual styling and automatically sets aria-invalid on the input for accessibility'
     >
 
 {/* prettier-ignore */}
@@ -458,15 +458,15 @@ The component includes comprehensive test coverage for:
   placeholder='Enter address or ENS'
   value={address}
   onChange={handleChange}
-  aria-invalid={hasError}
-  errorMessage={hasError ? 'Invalid address' : undefined}
+  helperText={hasError ? 'Invalid address' : undefined}
+  status={hasError ? 'error' : undefined}
 />
 ```
 
     </DoBlockItem>
     <DontBlockItem
-      title="Don't omit aria-invalid"
-      description='Always provide aria-invalid when showing error messages for proper accessibility'
+      title="Don't rely on aria-invalid for styling"
+      description='aria-invalid is for screen readers only — it no longer drives the error ring on the container'
     >
 
 {/* prettier-ignore */}
@@ -475,7 +475,7 @@ The component includes comprehensive test coverage for:
   placeholder='Enter address or ENS'
   value={address}
   onChange={handleChange}
-  errorMessage={hasError ? 'Invalid address' : undefined}
+  aria-invalid={hasError}
 />
 ```
 

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

@@ -114,8 +114,8 @@ export const Error: Story = {
   args: {
     placeholder: 'Enter address or ENS',
     defaultValue: 'invalid-address-format',
-    errorMessage: 'Invalid address format',
-    'aria-invalid': true,
+    helperText: 'Invalid address format',
+    status: 'error',
     className: 'max-w-md',
     onQrCodeClick: () => console.log('QR code clicked!'),
   },
@@ -125,8 +125,8 @@ export const Error: Story = {
         code: `<AddressInput 
   placeholder="Enter address or ENS"
   defaultValue="invalid-address-format"
-  errorMessage="Invalid address format"
-  aria-invalid={true}
+  helperText="Invalid address format"
+  status="error"
   className="max-w-md"
 />`,
       },
@@ -178,8 +178,8 @@ export const Controlled: Story = {
             setError(''); // Clear error state
             console.log('Address cleared');
           }}
-          errorMessage={error}
-          aria-invalid={!!error}
+          helperText={error || undefined}
+          status={error ? 'error' : undefined}
           className='max-w-md'
         />
 

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

@@ -184,17 +184,17 @@ describe('AddressInput', () => {
     expect(handleClear).toHaveBeenCalled();
   });
 
-  it('displays error message when provided', () => {
+  it('displays helper text when provided with error status', () => {
     render(
       <AddressInput
         placeholder='Enter address or ENS'
-        errorMessage='Invalid address format'
-        aria-invalid={true}
+        helperText='Invalid address format'
+        status='error'
       />,
     );
 
-    const errorMessage = screen.getByText('Invalid address format');
-    expect(errorMessage).toBeInTheDocument();
+    const helperTextEl = screen.getByText('Invalid address format');
+    expect(helperTextEl).toBeInTheDocument();
 
     // The role="alert" is on the error container, not the text span
     const errorContainer = screen.getByRole('alert');