@ledgerhq/lumen-ui-rnative 0.1.31 → 0.1.32

package/dist/typescript/src/lib/Components/SegmentedControl/types.d.ts

@@ -53,6 +53,10 @@ export type SegmentedControlButtonProps = {
      * Optional icon shown to the left of the label (from Symbols).
      */
     icon?: IconComponent;
+    /**
+     * Optional content shown to the right of the label (e.g. DotCount badge).
+     */
+    trailingContent?: ReactNode;
     /**
      * Optional callback when the button is pressed (in addition to onSelectedChange on the parent).
      */

package/dist/typescript/src/lib/Components/SegmentedControl/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IAC5C;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAE/B,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IAC5C;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAE/B,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}

package/dist/typescript/src/lib/Components/TextInput/TextInput.d.ts

@@ -6,7 +6,7 @@ import { type TextInputProps } from './types';
  * - **Automatic clear button** appears when input has content
  * - **Floating label** with smooth animations
  * - **Suffix elements** for icons, buttons, or custom content
- * - **Error state styling** with errorMessage support
+ * - **Helper text** with optional `status` (`error` | `success`) for border and helper feedback styling
  * - **Container-based spacing** with padding and gap for clean layout
  * - **Flexible styling** via style props
  * - **React Native TextInput** with proper mobile behavior
@@ -26,12 +26,13 @@ import { type TextInputProps } from './types';
  * // Basic input with automatic clear button
  * <TextInput label="Title" value={title} onChangeText={setTitle} />
  *
- * // Input with error state
+ * // Input with error helper
  * <TextInput
  *   label="Email"
  *   value={email}
  *   onChangeText={setEmail}
- *   errorMessage="Please enter a valid email address"
+ *   helperText="Please enter a valid email address"
+ *   status="error"
  * />
  *
  * // Input with suffix element

package/dist/typescript/src/lib/Components/TextInput/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/TextInput/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CAE9C,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/TextInput/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CAE9C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

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

@@ -55,16 +55,10 @@ Use `hideClearButton` to prevent the clear button from appearing.
 
 ### Error State
 
-The input supports error handling through `errorMessage` which displays an error message below the input with error styling including a red border and text color.
+The input supports error handling through `helperText` and `status` (`'error'` \| `'success'`), which show copy below the input with matching border and text styling.
 
 <Canvas of={AddressInputStories.WithError} />
 
-The error message will be automatically:
-
-- Connected to the input
-- Displayed with a warning icon
-- Styled in the error color
-- Announced by screen readers
 
 ### Disabled State
 
@@ -244,7 +238,8 @@ function MyComponent() {
       placeholder='Enter address or ENS'
       value={address}
       onChangeText={setAddress}
-      errorMessage={error}
+      helperText={error || undefined}
+      status={error ? 'error' : undefined}
       onClear={() => {
         // Default clearing happens automatically
         // Add your custom logic here
@@ -289,14 +284,15 @@ function MyComponent() {
       placeholder='Enter address or ENS'
       value={address}
       onChangeText={handleChange}
-      errorMessage={error}
+      helperText={error || undefined}
+      status={error ? 'error' : undefined}
       onQrCodeClick={() => openQrScanner()}
     />
   );
 }
 ```
 
-> **Note:** Error messages are optional. Use `errorMessage` to display an error message below the input.
+> **Note:** Helper text is optional. Use `helperText` with `status="error"` to show validation feedback below the input.
 
 ### With Custom Styling
 
@@ -387,7 +383,8 @@ function MyComponent() {
       value={address}
       onChangeText={setAddress}
       onQrCodeClick={handleQrScan}
-      errorMessage={error}
+      helperText={error || undefined}
+      status={error ? 'error' : undefined}
     />
   );
 }
@@ -412,7 +409,8 @@ function TransactionForm() {
         placeholder='Enter address or ENS'
         value={recipientAddress}
         onChangeText={setRecipientAddress}
-        errorMessage={addressError}
+        helperText={addressError || undefined}
+        status={addressError ? 'error' : undefined}
         onQrCodeClick={() => openQrScanner()}
         style={{ maxWidth: 320 }}
       />

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

@@ -119,7 +119,8 @@ export const WithError: Story = {
   args: {
     placeholder: 'Enter address or ENS',
     value: 'invalid-address',
-    errorMessage: 'Invalid address format',
+    helperText: 'Invalid address format',
+    status: 'error',
     prefix: 'To:',
     editable: true,
     hideClearButton: false,

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

@@ -385,7 +385,7 @@ const [hasError, setHasError] = useState(false);
     </DoBlockItem>
     <DontBlockItem
       title="Don't use custom error props"
-      description='Use isInvalid prop, not error or errorMessage props'
+      description='Use the isInvalid prop for error styling. AmountInput does not accept ad-hoc validation props.'
     >
 
 {/* prettier-ignore */}
@@ -400,8 +400,8 @@ const [hasError, setHasError] = useState(false);
   value={value}
   onChangeText={setValue}
   currencyText='USD'
-  error={true}
-  errorMessage='Invalid amount'
+  status={hasError ? 'error' : undefined}
+  helperText={hasError ? 'Invalid amount' : undefined}
 />
 ```
 

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

@@ -1,5 +1,6 @@
 import {
   DisabledProvider,
+  resolveBaseInputPlaceholder,
   useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
 import {
@@ -21,6 +22,7 @@ import { useCommonTranslation } from '../../../i18n';
 import type { LumenStyleSheetTheme } from '../../../styles';
 import { useStyleSheet, useTheme } from '../../../styles';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
+import { CheckmarkCircleFill } from '../../Symbols/Icons/CheckmarkCircleFill';
 import { DeleteCircleFill } from '../../Symbols/Icons/DeleteCircleFill';
 import { RuntimeConstants } from '../../utils';
 import { InteractiveIcon } from '../InteractiveIcon';
@@ -34,7 +36,8 @@ export const BaseInput = ({
   inputStyle,
   labelStyle,
   label,
-  errorMessage,
+  helperText,
+  status,
   hideClearButton,
   onChangeText: onChangeTextProp,
   editable,
@@ -42,6 +45,7 @@ export const BaseInput = ({
   prefix,
   suffix,
   ref,
+  placeholder: placeholderProp,
   ...props
 }: BaseInputProps) => {
   const disabled = useDisabledContext({
@@ -65,6 +69,12 @@ export const BaseInput = ({
     ? !!props.value && props.value.length > 0
     : uncontrolledValue.length > 0;
 
+  const { inputPlaceholder, labelStaysFloatedWithPlaceholder } =
+    resolveBaseInputPlaceholder({
+      label,
+      placeholder: placeholderProp,
+    });
+
   const showClearButton = hasContent && !disabled && !hideClearButton;
 
   const handleChangeText = useCallback(
@@ -87,7 +97,7 @@ export const BaseInput = ({
   };
 
   const styles = useStyles({
-    hasError: !!errorMessage,
+    status,
     isFocused,
     isEditable: !disabled,
     hasLabel: !!label,
@@ -97,8 +107,9 @@ export const BaseInput = ({
     hasContent,
     isFocused,
     showClearButton,
-    hasError: !!errorMessage,
+    status,
     isEditable: !disabled,
+    labelStaysFloatedWithPlaceholder,
   });
 
   return (
@@ -114,6 +125,7 @@ export const BaseInput = ({
           <TextInput
             ref={inputRef}
             value={value}
+            placeholder={inputPlaceholder}
             style={StyleSheet.flatten([styles.input, inputStyle])}
             onFocus={() => setIsFocused(true)}
             onBlur={() => setIsFocused(false)}
@@ -158,10 +170,13 @@ export const BaseInput = ({
           )}
         </Pressable>
 
-        {errorMessage && (
-          <View style={styles.errorContainer}>
-            <DeleteCircleFill size={16} color='error' />
-            <Text style={styles.errorText}>{errorMessage}</Text>
+        {!!helperText && (
+          <View style={styles.helperContainer}>
+            {status === 'error' && <DeleteCircleFill size={16} color='error' />}
+            {status === 'success' && (
+              <CheckmarkCircleFill size={16} color='success' />
+            )}
+            <Text style={styles.helperText}>{helperText}</Text>
           </View>
         )}
       </Box>
@@ -170,18 +185,25 @@ export const BaseInput = ({
 };
 
 const useStyles = ({
-  hasError,
+  status,
   isFocused,
   isEditable,
   hasLabel,
 }: {
-  hasError: boolean;
+  status: 'error' | 'success' | undefined;
   isFocused: boolean;
   isEditable: boolean;
   hasLabel: boolean;
 }) => {
   return useStyleSheet(
     (t) => {
+      const hasStatusBorder = status === 'error' || status === 'success';
+      const statusBorderColors = {
+        error: t.colors.border.error,
+        success: t.colors.border.success,
+      } as const;
+      const statusBorderColor = status ? statusBorderColors[status] : undefined;
+
       return {
         container: StyleSheet.flatten([
           {
@@ -198,15 +220,16 @@ const useStyles = ({
             borderColor: 'transparent',
             overflow: 'hidden',
           },
-          hasError && {
-            borderWidth: 1,
-            borderColor: t.colors.border.error,
-          },
+          hasStatusBorder &&
+            statusBorderColor && {
+              borderWidth: isFocused ? t.borderWidth.s2 : t.borderWidth.s1,
+              borderColor: statusBorderColor,
+            },
           !isEditable && {
             backgroundColor: t.colors.bg.disabled,
           },
           isFocused &&
-            !hasError &&
+            !hasStatusBorder &&
             isEditable && { borderColor: t.colors.border.active },
         ]),
         input: StyleSheet.flatten([
@@ -217,31 +240,37 @@ const useStyles = ({
             color: t.colors.text.base,
             backgroundColor: t.colors.bg.muted,
             outline: 'none',
-            ...t.typographies.body2,
-            paddingTop: t.spacings.s12,
-            paddingBottom: t.spacings.s12,
+            ...t.typographies.body1,
+            paddingTop: t.spacings.s4,
+            paddingBottom: t.spacings.s2,
           },
           hasLabel && {
             paddingTop: t.spacings.s20,
             paddingBottom: t.spacings.s4,
             paddingHorizontal: 0,
+            ...t.typographies.body2,
           },
-          RuntimeConstants.isIOS && hasLabel && { lineHeight: 0 },
+          RuntimeConstants.isIOS && { lineHeight: 0 },
           RuntimeConstants.isAndroid && { includeFontPadding: false },
           !isEditable && {
             backgroundColor: t.colors.bg.disabled,
             color: t.colors.text.disabled,
           },
         ]),
-        errorContainer: {
+        helperContainer: {
           marginTop: t.spacings.s8,
           flexDirection: 'row',
           alignItems: 'center',
           gap: t.spacings.s2,
         },
-        errorText: {
-          color: t.colors.text.error,
+        helperText: {
           ...t.typographies.body3,
+          flex: 1,
+          color: {
+            error: t.colors.text.error,
+            success: t.colors.text.success,
+            default: t.colors.text.muted,
+          }[status ?? 'default'],
         },
         suffixContainer: {
           minWidth: t.sizes.s20,
@@ -250,7 +279,7 @@ const useStyles = ({
         },
       };
     },
-    [hasError, isFocused, isEditable, hasLabel],
+    [status, isFocused, isEditable, hasLabel],
   );
 };
 
@@ -296,14 +325,16 @@ const useFloatingLabelStyles = ({
   isFocused,
   hasContent,
   showClearButton,
-  hasError,
+  status,
   isEditable,
+  labelStaysFloatedWithPlaceholder,
 }: {
   isFocused: boolean;
   hasContent: boolean;
   showClearButton: boolean;
-  hasError: boolean;
+  status: 'error' | 'success' | undefined;
   isEditable: boolean;
+  labelStaysFloatedWithPlaceholder: boolean;
 }) => {
   const { theme } = useTheme();
 
@@ -320,20 +351,21 @@ const useFloatingLabelStyles = ({
           showClearButton && {
             width: '92%',
           },
+        status === 'error' && {
+          color: t.colors.text.error,
+        },
         !isEditable && {
           color: t.colors.text.disabled,
         },
-        hasError && {
-          color: t.colors.text.error,
-        },
       ]),
     }),
-    [hasContent, showClearButton, hasError, isEditable],
+    [hasContent, showClearButton, status, isEditable],
   );
 
   const { animatedStyle } = useAnimatedFloatingLabel({
     theme,
-    isFloatingLabel: isFocused || hasContent,
+    isFloatingLabel:
+      isFocused || hasContent || labelStaysFloatedWithPlaceholder,
   });
 
   return { label, animatedStyle };

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

@@ -6,6 +6,8 @@ import type {
 } from 'react-native';
 import type { BoxProps } from '../Utility';
 
+export type BaseInputStatus = 'error' | 'success';
+
 export type BaseInputProps = {
   /**
    * The label text that floats above the input when focused or filled.
@@ -35,9 +37,15 @@ export type BaseInputProps = {
    */
   labelStyle?: StyleProp<TextStyle>;
   /**
-   * An optional error message displayed below the input.
+   * Optional text shown below the input (hint, error, or success copy).
+   * Pair with `status` for error/success styling and icons; omit `status` for a neutral hint.
+   */
+  helperText?: string;
+  /**
+   * Visual state for border, helper text, helper icon, and the label in error state.
+   * Omit when `helperText` is a neutral hint.
    */
-  errorMessage?: string;
+  status?: BaseInputStatus;
   /**
    * Custom content to render after the input (right side in LTR).
    * @example suffix={<Icon />}

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

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
-import { Avatar } from '../Avatar/Avatar';
 import { MediaImage } from '../MediaImage/MediaImage';
 import {
   SegmentedControl,
@@ -89,7 +88,14 @@ export const WithChildren: Story = {
 
     return (
       <Box lx={{ gap: 's24' }}>
-        <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12' }}>
+        <Box
+          lx={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 's12',
+          }}
+        >
           <DotCount value={5} size='md'>
             <MediaImage
               src='https://crypto-icons.ledger.com/BTC.png'
@@ -98,12 +104,6 @@ export const WithChildren: Story = {
               shape='circle'
             />
           </DotCount>
-          <DotCount value={100} size='md'>
-            <Avatar
-              src='https://plus.unsplash.com/premium_photo-1689551670902-19b441a6afde?q=80&w=774&auto=format&fit=crop'
-              size='md'
-            />
-          </DotCount>
         </Box>
         <SegmentedControl
           selectedValue={fitState}
@@ -111,9 +111,11 @@ export const WithChildren: Story = {
           tabLayout='fit'
           accessibilityLabel='Fit layout'
         >
-          <SegmentedControlButton value='preview'>
+          <SegmentedControlButton
+            value='preview'
+            trailingContent={<DotCount value={3} size='md' />}
+          >
             Preview
-            <DotCount value={3} size='md' style={{ marginLeft: 6 }} />
           </SegmentedControlButton>
           <SegmentedControlButton value='raw'>Raw</SegmentedControlButton>
           <SegmentedControlButton value='blame'>Blame</SegmentedControlButton>

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

@@ -66,9 +66,7 @@ export const WithChildren: Story = {
       <DotIndicator appearance='red'>
         <Button size='sm'>Submit</Button>
       </DotIndicator>
-      <DotIndicator appearance='red'>
-        <Avatar size='md' />
-      </DotIndicator>
+      <Avatar size='md' showNotification />
       <DotIndicator appearance='red'>
         <IconButton accessibilityLabel='Settings' icon={Settings} />
       </DotIndicator>

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

@@ -1,6 +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 { act, render, waitFor } from '@testing-library/react-native';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { MediaImage } from './MediaImage';
 
@@ -89,7 +89,9 @@ describe('MediaImage Component', () => {
     );
 
     const img = getByTestId('media-image-img');
-    img.props.onError();
+    act(() => {
+      img.props.onError();
+    });
 
     rerender(
       <TestWrapper>
@@ -140,7 +142,9 @@ describe('MediaImage Component', () => {
     );
 
     const img = getByTestId('media-image-img');
-    img.props.onError();
+    act(() => {
+      img.props.onError();
+    });
 
     rerender(
       <TestWrapper>

package/src/lib/Components/SearchInput/SearchInput.mdx

@@ -67,17 +67,10 @@ Alternatively, use `editable={false}` to prevent editing without applying the mu
 
 ### 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.
+The search component supports error handling through `helperText` and `status` (`'error'` \| `'success'`), which show copy below the input with matching border and text styling.
 
 <Canvas of={SearchInputStories.WithError} />
 
-The error message will be automatically:
-
-- Connected to the input
-- Displayed with a warning icon
-- Styled in the error color
-- Announced by screen readers
-
 ## Controlled vs Uncontrolled
 
 The SearchInput component supports both controlled and uncontrolled usage.
@@ -232,13 +225,14 @@ function MyComponent() {
       placeholder='Search products'
       value={query}
       onChangeText={handleSearch}
-      errorMessage={error}
+      helperText={error || undefined}
+      status={error ? 'error' : undefined}
     />
   );
 }
 ```
 
-> **Note:** Error messages are optional. Use `errorMessage` to display an error message below the search input.
+> **Note:** Helper text is optional. Use `helperText` with `status="error"` to show validation feedback below the search input.
 
 ### With Custom Styling
 

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

@@ -75,7 +75,8 @@ export const WithError: Story = {
   ),
   args: {
     placeholder: 'Search products',
-    errorMessage: 'Search term is invalid',
+    helperText: 'Search term is invalid',
+    status: 'error',
     editable: true,
     hideClearButton: false,
   },

package/src/lib/Components/SegmentedControl/SegmentedControl.mdx

@@ -25,6 +25,7 @@ SegmentedControl is a tab bar–style component for switching between mutually e
 - **Segments**: Individual options the user can select.
 - **Selected state**: The active segment (sliding pill + semi-bold label).
 - **Optional icon**: Icon to the left of the label (from Symbols).
+- **Optional trailing content**: Any node (e.g. `DotCount`) rendered to the right of the label.
 - **Appearance**: Use `appearance="background"` (default) for a surface background, or `appearance="no-background"` for a transparent container.
 
 ## Properties
@@ -40,6 +41,12 @@ You can use segments with text only (Base), or add an icon to each button (WithI
 
 <Canvas of={SegmentedControlStories.WithIcons} />
 
+### With trailing content
+
+Use `trailingContent` to render content (e.g. `DotCount`) to the right of the label.
+
+<Canvas of={SegmentedControlStories.WithTrailingContent} />
+
 ## Responsive Layout
 
 SegmentedControl lays out segments in a horizontal row with equal width per segment. The sliding pill animates to the selected segment.
@@ -80,6 +87,33 @@ export default function Example() {
 }
 ```
 
+## With trailing content
+
+Pass any node via `trailingContent` to render it to the right of the label. Use it for badges like `DotCount` to surface counts per segment.
+
+```tsx
+import { SegmentedControl, SegmentedControlButton, DotCount } from '@ledgerhq/lumen-ui-rnative';
+
+function Example() {
+  const [state, setState] = React.useState('tokens');
+  return (
+    <SegmentedControl
+      selectedValue={state}
+      onSelectedChange={setState}
+      accessibilityLabel='Asset section'
+    >
+      <SegmentedControlButton value='tokens' trailingContent={<DotCount value={3} />}>
+        Tokens
+      </SegmentedControlButton>
+      <SegmentedControlButton value='nfts' trailingContent={<DotCount value={12} />}>
+        NFTs
+      </SegmentedControlButton>
+      <SegmentedControlButton value='activity'>Activity</SegmentedControlButton>
+    </SegmentedControl>
+  );
+}
+```
+
 ## With icons
 
 Pass an icon from symbols to each button for a left-positioned icon. Use icons on all segments or none for consistency.
@@ -113,9 +147,5 @@ function Example() {
 }
 ```
 
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <CommonRulesDoAndDont />
-</Box>
-
 </Tab>
 </CustomTabs>