@ledgerhq/lumen-ui-rnative 0.1.16 → 0.1.18

package/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx

@@ -1,9 +1,8 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
-import { Children, isValidElement, PropsWithChildren } from 'react';
+import { ComponentType } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 
-import { InjectStylesIntoChildren } from '../../utils/components/InjectStylesIntoChildren';
 import { IconProps, IconSize } from '../Icon';
 import { Pressable } from '../Utility';
 import { HIT_SLOP_MAP, InteractiveIconProps } from './types';
@@ -77,8 +76,7 @@ const useStyles = ({
  *
  * @component
  *
- * @warning Always provide an `aria-label` prop to ensure screen reader accessibility, as the component contains only an icon without visible text.
- * @warning The icon size should be controlled by the icon component itself, not through styles. Use the appropriate size prop on the icon component (e.g., `size={20}`).
+ * @warning Always provide an `accessibilityLabel` prop to ensure screen reader accessibility, as the component contains only an icon without visible text.
  * @warning The `style` prop should only be used for layout adjustments like margins or positioning. Do not use it to modify the component's core appearance (colors, padding, etc).
  *
  * @example
@@ -86,18 +84,15 @@ const useStyles = ({
  * import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
  *
  * // Filled interactive icon for destructive actions
- * <InteractiveIcon iconType="filled" accessibilityLabel="Delete item" onPress={handleDelete}>
- *   <DeleteCircleFill size={20} />
- * </InteractiveIcon>
+ * <InteractiveIcon iconType="filled" icon={DeleteCircleFill} size={20} accessibilityLabel="Delete item" onPress={handleDelete} />
  *
  * // Stroked interactive icon for secondary actions
- * <InteractiveIcon iconType="stroked" accessibilityLabel="Open settings" onPress={handleSettings}>
- *   <Settings size={20} />
- * </InteractiveIcon>
+ * <InteractiveIcon iconType="stroked" icon={Settings} size={20} accessibilityLabel="Open settings" onPress={handleSettings} />
  */
 export const InteractiveIcon = ({
   iconType,
-  children,
+  icon,
+  size = 24,
   disabled: disabledProp = false,
   hitSlop: hitSlopProp,
   hitSlopType = 'comfortable',
@@ -110,14 +105,8 @@ export const InteractiveIcon = ({
     consumerName: 'InteractiveIcon',
     mergeWith: { disabled: disabledProp },
   });
-  const child = Children.only(children);
 
-  let iconSize: IconSize = 20;
-  if (isValidElement<IconProps>(child) && 'size' in child.props) {
-    iconSize = child.props.size ?? 20;
-  }
-
-  const resolvedHitSlop = hitSlopProp ?? HIT_SLOP_MAP[hitSlopType]?.[iconSize];
+  const resolvedHitSlop = hitSlopProp ?? HIT_SLOP_MAP[hitSlopType]?.[size];
 
   return (
     <Pressable
@@ -135,9 +124,9 @@ export const InteractiveIcon = ({
           appearance={appearance}
           pressed={pressed}
           disabled={disabled}
-        >
-          {children}
-        </InteractiveIconContent>
+          icon={icon}
+          size={size}
+        />
       )}
     </Pressable>
   );
@@ -148,21 +137,21 @@ const InteractiveIconContent = ({
   appearance,
   pressed,
   disabled,
-  children,
-}: PropsWithChildren<{
+  icon: Icon,
+  size,
+}: {
   iconType: IconType;
   appearance: Appearance;
   pressed: boolean;
   disabled: boolean;
-}>) => {
+  icon: ComponentType<Omit<IconProps, 'children'>>;
+  size: IconSize;
+}) => {
   const styles = useStyles({ iconType, appearance, pressed, disabled });
 
   return (
     <View style={styles.container}>
-      <InjectStylesIntoChildren style={styles.icon}>
-        {children}
-      </InjectStylesIntoChildren>
+      <Icon size={size} style={styles.icon} />
     </View>
   );
 };
-InteractiveIcon.displayName = 'InteractiveIcon';

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

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { ComponentType } from 'react';
 import { Insets } from 'react-native';
 import { StyledPressableProps } from '../../../styles';
-import { IconSize } from '../Icon';
+import { IconProps, IconSize } from '../Icon';
 
 export const HIT_SLOP_MAP: Partial<
   Record<HitSlopType, Partial<Record<IconSize, Insets>>>
@@ -60,12 +60,20 @@ export type InteractiveIconProps = {
    * @default 'muted'
    */
   appearance?: 'base' | 'muted' | 'white';
+  /**
+   * The icon component to render.
+   */
+  icon: ComponentType<Omit<IconProps, 'children'>>;
+  /**
+   * The size of the icon in pixels.
+   * @default 24
+   */
+  size?: IconSize;
   /**
    * Preset for the touchable area. Ignored if `hitSlop` is passed explicitly.
-   * Automatically applies insets based on the child's icon size.
+   * Automatically applies insets based on the icon size.
    *
    * @default 'comfortable'
    */
   hitSlopType?: HitSlopType;
-} & PropsWithChildren &
-  Omit<StyledPressableProps, 'children' | 'disabled'>;
+} & Omit<StyledPressableProps, 'children' | 'disabled'>;

package/src/lib/Components/Label/Label.tsx

@@ -51,5 +51,3 @@ export const Label = ({
     </Text>
   );
 };
-
-Label.displayName = 'Label';

package/src/lib/Components/Link/Link.tsx

@@ -199,5 +199,3 @@ const LinkContent = ({
     </View>
   );
 };
-
-Link.displayName = 'Link';

package/src/lib/Components/ListItem/ListItem.tsx

@@ -113,8 +113,6 @@ export const ListItem = ({
   );
 };
 
-ListItem.displayName = 'ListItem';
-
 /**
  * Internal component to handle pressed state styling
  */
@@ -169,8 +167,6 @@ export const ListItemLeading = ({
   );
 };
 
-ListItemLeading.displayName = 'ListItemLeading';
-
 /**
  * Container for the text content (title and description) within the leading area.
  */
@@ -192,7 +188,7 @@ export const ListItemContent = ({
         flex: isInTrailing ? 0 : 1,
         minWidth: 0,
         gap: t.spacings.s4,
-        alignItems: isInTrailing ? 'flex-end' : 'flex-start',
+        alignItems: isInTrailing ? 'flex-end' : 'stretch',
       },
     }),
     [isInTrailing],
@@ -210,8 +206,6 @@ export const ListItemContent = ({
   );
 };
 
-ListItemContent.displayName = 'ListItemContent';
-
 /**
  * Horizontal row container within ListItemContent to place a title or description
  * alongside additional inline content (e.g. Tag) while preserving text truncation.
@@ -247,8 +241,6 @@ export const ListItemContentRow = ({
   );
 };
 
-ListItemContentRow.displayName = 'ListItemContentRow';
-
 /**
  * The main title of the list item.
  */
@@ -273,7 +265,9 @@ export const ListItemTitle = ({
       title: StyleSheet.flatten([
         t.typographies.body2SemiBold,
         {
+          flex: 1,
           minWidth: 0,
+          flexShrink: 1,
           textAlign: isInTrailing ? 'right' : 'left',
           color: disabled ? t.colors.text.disabled : t.colors.text.base,
         } as const,
@@ -296,8 +290,6 @@ export const ListItemTitle = ({
   );
 };
 
-ListItemTitle.displayName = 'ListItemTitle';
-
 /**
  * Optional description text below the title.
  * Automatically applies disabled styling when the parent ListItem is disabled.
@@ -323,7 +315,9 @@ export const ListItemDescription = ({
       description: StyleSheet.flatten([
         t.typographies.body3,
         {
+          flex: 1,
           minWidth: 0,
+          flexShrink: 1,
           textAlign: isInTrailing ? 'right' : 'left',
           color: disabled ? t.colors.text.disabled : t.colors.text.muted,
         } as const,
@@ -346,8 +340,6 @@ export const ListItemDescription = ({
   );
 };
 
-ListItemDescription.displayName = 'ListItemDescription';
-
 /**
  * Container for the trailing (right) content of the list item.
  * Used for icons, switches, values, tags, chevrons, etc.
@@ -382,5 +374,3 @@ export const ListItemTrailing = ({
     </ListItemTrailingProvider>
   );
 };
-
-ListItemTrailing.displayName = 'ListItemTrailing';

package/src/lib/Components/MediaBanner/MediaBanner.tsx

@@ -96,14 +96,14 @@ export function MediaBanner({
             testID='media-banner-close-button'
             iconType='stroked'
             appearance='white'
+            icon={Close}
+            size={16}
             onPress={onClose}
             accessibilityLabel={
               closeAccessibilityLabel ||
               translate('components.banner.closeAriaLabel')
             }
-          >
-            <Close size={16} />
-          </InteractiveIcon>
+          />
         </Box>
       )}
     </Pressable>

package/src/lib/Components/MediaCard/MediaCard.tsx

@@ -76,8 +76,6 @@ export const MediaCardTitle = ({
   );
 };
 
-MediaCardTitle.displayName = 'MediaCardTitle';
-
 const GradientOverlays = () => {
   const styles = useStyles();
 
@@ -176,15 +174,15 @@ export const MediaCard = ({
             <InteractiveIcon
               iconType='stroked'
               appearance='white'
+              icon={Close}
+              size={20}
               style={styles.closeButton}
               onPress={onClose}
               accessibilityLabel={
                 closeAccessibilityLabel || t('common.closeAriaLabel')
               }
               testID='media-card-close-button'
-            >
-              <Close size={20} />
-            </InteractiveIcon>
+            />
           )}
 
           {pressed && (
@@ -199,5 +197,3 @@ export const MediaCard = ({
     </Pressable>
   );
 };
-
-MediaCard.displayName = 'MediaCard';

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

@@ -113,5 +113,3 @@ export const MediaImage = ({
     </Box>
   );
 };
-
-MediaImage.displayName = 'MediaImage';

package/src/lib/Components/NavBar/CoinCapsule.tsx

@@ -13,8 +13,6 @@ export function CoinCapsule({ ticker, icon }: CoinCapsuleProps) {
   );
 }
 
-CoinCapsule.displayName = 'CoinCapsule';
-
 const useStyles = () =>
   useStyleSheet(
     (t) => ({

package/src/lib/Components/NavBar/NavBar.tsx

@@ -97,8 +97,6 @@ export function NavBarTitle({ children, style, ...props }: NavBarTitleProps) {
   );
 }
 
-NavBarTitle.displayName = 'NavBarTitle';
-
 export function NavBarDescription({
   children,
   style,
@@ -121,8 +119,6 @@ export function NavBarDescription({
   );
 }
 
-NavBarDescription.displayName = 'NavBarDescription';
-
 export function NavBarCoinCapsule({
   ticker,
   icon,
@@ -135,8 +131,6 @@ export function NavBarCoinCapsule({
   );
 }
 
-NavBarCoinCapsule.displayName = 'NavBarCoinCapsule';
-
 export function NavBarBackButton({
   accessibilityLabel,
   onPress,
@@ -230,8 +224,6 @@ export function NavBar({ appearance, children, ...props }: NavBarProps) {
   );
 }
 
-NavBar.displayName = 'NavBar';
-
 type StyleParams = {
   appearance: NavBarAppearance;
 };

package/src/lib/Components/PageIndicator/PageIndicator.tsx

@@ -216,8 +216,6 @@ export const PageIndicator = ({
   );
 };
 
-PageIndicator.displayName = 'PageIndicator';
-
 const useDotStyles = () =>
   useStyleSheet(
     (t) => ({

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

@@ -0,0 +1,40 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { SearchInput } from './SearchInput';
+
+const { colors } = ledgerLiveThemes.dark;
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+const getSearchIcon = () => screen.UNSAFE_getByProps({ fill: 'none' });
+
+describe('SearchInput', () => {
+  describe('Icon color', () => {
+    it('should render the search icon with muted color by default', () => {
+      renderWithProvider(<SearchInput />);
+
+      const icon = getSearchIcon();
+      expect(icon.props.color).toBe(colors.text.muted);
+    });
+
+    it('should render the search icon with disabled color when disabled', () => {
+      renderWithProvider(<SearchInput disabled />);
+
+      const icon = getSearchIcon();
+      expect(icon.props.style).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ color: colors.text.disabled }),
+        ]),
+      );
+    });
+  });
+});

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

@@ -22,7 +22,14 @@ export const SearchInput = ({
   return (
     <BaseInput
       ref={ref}
-      prefix={<SearchIcon size={20} accessible={false} disabled={disabled} />}
+      prefix={
+        <SearchIcon
+          size={20}
+          accessible={false}
+          disabled={disabled}
+          color='muted'
+        />
+      }
       style={style}
       containerStyle={[containerStyle, styles.container]}
       inputStyle={[inputStyle, styles.input]}
@@ -44,5 +51,3 @@ const useAppearanceStyles = (appearance: 'plain' | 'transparent') => {
     [appearance],
   );
 };
-
-SearchInput.displayName = 'SearchInput';

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

@@ -76,8 +76,6 @@ export function SegmentedControlButton({
   );
 }
 
-SegmentedControlButton.displayName = 'SegmentedControlButton';
-
 function useButtonStyles({
   selected,
   disabled,
@@ -184,8 +182,6 @@ export function SegmentedControl({
   );
 }
 
-SegmentedControl.displayName = 'SegmentedControl';
-
 function useRootStyles({
   disabled,
   appearance,

package/src/lib/Components/Select/Select.tsx

@@ -125,7 +125,6 @@ export const Select = ({
     </SelectContextProvider>
   );
 };
-Select.displayName = 'Select';
 
 export const SelectTrigger = ({
   children,
@@ -283,8 +282,6 @@ const useTriggerStyles = ({
   );
 };
 
-SelectTrigger.displayName = 'SelectTrigger';
-
 /**
  * Displays the current selected value
  */
@@ -321,7 +318,6 @@ export const SelectValue = () => {
     </Text>
   );
 };
-SelectValue.displayName = 'SelectValue';
 
 /**
  * Container for select items. This component collects all items
@@ -378,7 +374,6 @@ export const SelectContent = ({ children }: SelectContentProps) => {
 
   return null;
 };
-SelectContent.displayName = 'SelectContent';
 
 export const SelectGroup = ({
   children,
@@ -402,7 +397,6 @@ export const SelectGroup = ({
     </Box>
   );
 };
-SelectGroup.displayName = 'SelectGroup';
 
 export const SelectLabel = ({
   children,
@@ -432,7 +426,6 @@ export const SelectLabel = ({
     </Text>
   );
 };
-SelectLabel.displayName = 'SelectLabel';
 
 /**
  * Individual select item. Note: The actual rendering happens in GlobalSelectBottomSheet.
@@ -443,7 +436,6 @@ export const SelectItem = (_props: SelectItemProps) => {
   // The actual items are rendered in GlobalSelectBottomSheet
   return null;
 };
-SelectItem.displayName = 'SelectItem';
 
 export const SelectItemText = ({
   children,
@@ -469,11 +461,9 @@ export const SelectItemText = ({
     </Text>
   );
 };
-SelectItemText.displayName = 'SelectItemText';
 
 export const SelectSeparator = (_props: SelectSeparatorProps) => {
   // This component doesn't render anything - it's used for structure
   // The actual separators are rendered in GlobalSelectBottomSheet
   return null;
 };
-SelectSeparator.displayName = 'SelectSeparator';

package/src/lib/Components/Skeleton/Skeleton.tsx

@@ -15,7 +15,6 @@ const BaseSkeleton = ({ lx, ...props }: SkeletonProps) => {
     />
   );
 };
-BaseSkeleton.displayName = 'BaseSkeleton';
 
 const ListItemSkeleton = ({ lx, ...props }: SkeletonProps) => {
   return (
@@ -49,7 +48,6 @@ const ListItemSkeleton = ({ lx, ...props }: SkeletonProps) => {
     </Box>
   );
 };
-ListItemSkeleton.displayName = 'ListItemSkeleton';
 
 const TileSkeleton = ({ lx, ...props }: SkeletonProps) => {
   return (
@@ -92,7 +90,6 @@ const TileSkeleton = ({ lx, ...props }: SkeletonProps) => {
     </Box>
   );
 };
-TileSkeleton.displayName = 'TileSkeleton';
 
 const componentsMap = {
   'list-item': ListItemSkeleton,
@@ -132,6 +129,5 @@ const Skeleton = ({ lx, component, ...props }: SkeletonProps) => {
     </Pulse>
   );
 };
-Skeleton.displayName = 'Skeleton';
 
 export { Skeleton };

package/src/lib/Components/Slot/Slot.tsx

@@ -41,8 +41,6 @@ const SlotPressable = ({
   });
 };
 
-SlotPressable.displayName = 'SlotPressable';
-
 const SlotView = ({
   ref,
   ...props
@@ -64,8 +62,6 @@ const SlotView = ({
   });
 };
 
-SlotView.displayName = 'SlotView';
-
 const SlotText = ({
   ref,
   ...props
@@ -87,8 +83,6 @@ const SlotText = ({
   });
 };
 
-SlotText.displayName = 'SlotText';
-
 type SlotImageSlotProps = ImageProps & {
   children?: React.ReactNode;
 } & ComponentPropsWithRef<typeof Image>;
@@ -111,8 +105,6 @@ const SlotImage = ({ ref, ...props }: SlotImageSlotProps) => {
   });
 };
 
-SlotImage.displayName = 'SlotImage';
-
 function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {
   return (node: T) =>
     refs.forEach((ref) => {

package/src/lib/Components/Spinner/Spinner.tsx

@@ -53,5 +53,3 @@ export const Spinner = ({
     </Box>
   );
 };
-
-Spinner.displayName = 'Spinner';

package/src/lib/Components/Spot/Spot.tsx

@@ -76,6 +76,7 @@ const useStyles = ({
           backgroundColor: t.colors.bg.mutedTransparent,
           width: spotSize,
           height: spotSize,
+          flexShrink: 0,
         },
         icon: {
           color: contentColor,

package/src/lib/Components/Stepper/Stepper.tsx

@@ -185,5 +185,3 @@ export const Stepper = ({
     </Box>
   );
 };
-
-Stepper.displayName = 'Stepper';

package/src/lib/Components/Subheader/Subheader.tsx

@@ -133,12 +133,12 @@ export const SubheaderInfo = ({
   return (
     <InteractiveIcon
       iconType={iconType}
+      icon={Information}
+      size={16}
       accessibilityLabel='More information'
       style={style}
       {...props}
-    >
-      <Information size={16} />
-    </InteractiveIcon>
+    />
   );
 };
 

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

@@ -41,7 +41,7 @@ export type SubheaderCountProps = {
 
 export type SubheaderInfoProps = Omit<
   InteractiveIconProps,
-  'children' | 'iconType'
+  'icon' | 'size' | 'iconType'
 > & {
   /**
    * The visual style of the icon button.

package/src/lib/Components/Switch/BaseSwitch.tsx

@@ -88,7 +88,6 @@ const BaseSwitchRoot = ({
     </BaseSwitchProvider>
   );
 };
-BaseSwitchRoot.displayName = ROOT_COMPONENT_NAME;
 
 const THUMB_TRANSLATE: Record<Size, number> = {
   sm: 8,
@@ -247,6 +246,4 @@ const useStyles = ({
   );
 };
 
-BaseSwitchThumb.displayName = THUMB_COMPONENT_NAME;
-
 export { BaseSwitchRoot, BaseSwitchThumb };

package/src/lib/Components/Switch/Switch.tsx

@@ -62,5 +62,3 @@ export const Switch = ({
     </Pressable>
   );
 };
-
-Switch.displayName = 'Switch';

package/src/lib/Components/TabBar/TabBar.tsx

@@ -226,8 +226,6 @@ export function TabBarItem({
   );
 }
 
-TabBarItem.displayName = 'TabBarItem';
-
 /**
  * A horizontal tab bar with animated pill background and icon transitions.
  * Provides smooth animations for active state changes and press interactions.

package/src/lib/Components/Tag/Tag.tsx

@@ -161,5 +161,3 @@ export const Tag = ({
     </Box>
   );
 };
-
-Tag.displayName = 'Tag';

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

@@ -58,5 +58,3 @@ import { type TextInputProps } from './types';
 export const TextInput = (props: TextInputProps) => {
   return <BaseInput {...props} />;
 };
-
-TextInput.displayName = 'TextInput';