@ledgerhq/lumen-ui-rnative 0.1.30 → 0.1.32

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>

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
-import { Coins, Nft, TransferHorizontal, Settings } from '../../Symbols';
+import { Coins, Nft, TransferHorizontal } from '../../Symbols';
+import { DotCount } from '../DotCount';
 import { Box } from '../Utility';
 import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
 
@@ -74,11 +75,8 @@ export const WithIcons: Story = {
         <SegmentedControlButton value='nfts' icon={Nft}>
           NFTs
         </SegmentedControlButton>
-        <SegmentedControlButton value='activity' icon={TransferHorizontal}>
-          Activity
-        </SegmentedControlButton>
-        <SegmentedControlButton value='settings' icon={Settings}>
-          Settings
+        <SegmentedControlButton value='trade' icon={TransferHorizontal}>
+          Trade
         </SegmentedControlButton>
       </SegmentedControl>
     );
@@ -142,3 +140,33 @@ export const Disabled: Story = {
     </SegmentedControl>
   ),
 };
+
+export const WithTrailingContent: Story = {
+  args: {} as React.ComponentProps<typeof SegmentedControl>,
+  render: (args) => {
+    const [state, setState] = useState('tokens');
+
+    return (
+      <SegmentedControl
+        {...args}
+        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='trade'>Trade</SegmentedControlButton>
+      </SegmentedControl>
+    );
+  },
+};

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

@@ -1,6 +1,7 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
+import { DotCount } from '../DotCount';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
 
@@ -53,4 +54,30 @@ describe('SegmentedControl', () => {
 
     expect(onSelectedChange).toHaveBeenCalledWith('receive');
   });
+
+  it('renders trailingContent inside segment buttons', () => {
+    const { getByLabelText } = render(
+      <TestWrapper>
+        <SegmentedControl
+          selectedValue='tokens'
+          onSelectedChange={() => {
+            /* empty */
+          }}
+          accessibilityLabel='Asset section'
+        >
+          <SegmentedControlButton
+            value='tokens'
+            trailingContent={
+              <DotCount value={3} accessibilityLabel='3 tokens' />
+            }
+          >
+            Tokens
+          </SegmentedControlButton>
+          <SegmentedControlButton value='nfts'>NFTs</SegmentedControlButton>
+        </SegmentedControl>
+      </TestWrapper>,
+    );
+
+    expect(getByLabelText('3 tokens')).toBeTruthy();
+  });
 });

package/src/lib/Components/SegmentedControl/SegmentedControl.tsx

@@ -21,6 +21,7 @@ export function SegmentedControlButton({
   value,
   children,
   icon: Icon,
+  trailingContent,
   onPress,
   ...props
 }: SegmentedControlButtonProps) {
@@ -71,6 +72,7 @@ export function SegmentedControlButton({
         >
           {children}
         </Text>
+        {trailingContent}
       </Box>
     </Pressable>
   );

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

@@ -56,6 +56,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/src/lib/Components/TextInput/TextInput.mdx

@@ -34,6 +34,10 @@ The label text automatically floats above the input when content is entered, pro
 
 <Canvas of={TextInputStories.WithContent} />
 
+### Label and placeholder
+
+<Canvas of={TextInputStories.WithLabelAndPlaceholder} />
+
 ### Clear Button
 
 A clear button (×) appears **automatically** when input has content.
@@ -54,17 +58,10 @@ Use `onClear` to extend the default clear behavior with custom logic.
 
 ### 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={TextInputStories.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
 
 The input can be fully disabled using the `disabled` prop, which prevents interaction and applies a muted visual style.
@@ -221,13 +218,14 @@ function MyComponent() {
       label='Username'
       value={value}
       onChangeText={handleChange}
-      errorMessage={error}
+      helperText={error || undefined}
+      status={error ? 'error' : undefined}
     />
   );
 }
 ```
 
-> **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