@ledgerhq/lumen-ui-rnative 0.1.20 → 0.1.21

package/src/lib/Components/NavBar/NavBar.mdx

@@ -76,7 +76,7 @@ import {
   NavBarTitle,
 } from '@ledgerhq/lumen-ui-rnative';
 
-<NavBar appearance='compact'>
+<NavBar density='compact'>
   <NavBarBackButton onPress={() => navigation.goBack()} />
   <NavBarContent>
     <NavBarTitle>Page Title</NavBarTitle>
@@ -95,7 +95,7 @@ import {
   NavBarDescription,
 } from '@ledgerhq/lumen-ui-rnative';
 
-<NavBar appearance='expanded'>
+<NavBar density='expanded'>
   <NavBarBackButton onPress={() => navigation.goBack()} />
   <NavBarContent>
     <NavBarTitle>Account Details</NavBarTitle>
@@ -110,7 +110,7 @@ import {
 import { MoreHorizontal } from '@ledgerhq/lumen-ui-rnative/symbols';
 import { IconButton } from '@ledgerhq/lumen-ui-rnative';
 
-<NavBar appearance='compact'>
+<NavBar density='compact'>
   <NavBarBackButton onPress={() => navigation.goBack()} />
   <NavBarContent>
     <NavBarTitle>Settings</NavBarTitle>
@@ -131,7 +131,7 @@ import { IconButton } from '@ledgerhq/lumen-ui-rnative';
 import Icon from '@ledgerhq/crypto-icons/native';
 import { NavBarCoinCapsule } from '@ledgerhq/lumen-ui-rnative';
 
-<NavBar appearance='compact'>
+<NavBar density='compact'>
   <NavBarBackButton onPress={() => navigation.goBack()} />
   <NavBarContent>
     <NavBarCoinCapsule
@@ -163,7 +163,7 @@ function App() {
     <Stack.Navigator
       screenOptions={{
         header: ({ navigation, route }) => (
-          <NavBar appearance='compact'>
+          <NavBar density='compact'>
             <NavBarBackButton onPress={() => navigation.goBack()} />
             <NavBarContent>
               <NavBarTitle>{route.name}</NavBarTitle>
@@ -201,7 +201,7 @@ export default function Layout() {
     <Stack
       screenOptions={{
         header: ({ route }) => (
-          <NavBar appearance='compact'>
+          <NavBar density='compact'>
             <NavBarBackButton onPress={() => router.back()} />
             <NavBarContent>
               <NavBarTitle>{route.name}</NavBarTitle>
@@ -236,7 +236,7 @@ export default function DetailsScreen() {
       <Stack.Screen
         options={{
           header: () => (
-            <NavBar appearance='expanded'>
+            <NavBar density='expanded'>
               <NavBarBackButton onPress={() => router.back()} />
               <NavBarContent>
                 <NavBarTitle>Details</NavBarTitle>

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

@@ -35,10 +35,10 @@ const meta: Meta<typeof NavBar> = {
     },
   },
   argTypes: {
-    appearance: {
+    density: {
       control: 'select',
       options: ['compact', 'expanded'],
-      description: 'Controls the appearance/layout of the NavBar',
+      description: 'Controls the density/layout of the NavBar',
     },
   },
 };
@@ -48,7 +48,7 @@ type Story = StoryObj<typeof NavBar>;
 
 export const Base: Story = {
   args: {
-    appearance: 'compact',
+    density: 'compact',
     lx: {
       width: 's480',
     },
@@ -74,7 +74,7 @@ export const Base: Story = {
 
 export const Expanded: Story = {
   args: {
-    appearance: 'expanded',
+    density: 'expanded',
     lx: {
       width: 's480',
     },
@@ -100,7 +100,7 @@ export const Expanded: Story = {
 
 export const WithCoinCapsule: Story = {
   args: {
-    appearance: 'compact',
+    density: 'compact',
     lx: {
       width: 's480',
     },
@@ -128,7 +128,7 @@ export const WithCoinCapsule: Story = {
 
 export const WithMultipleTrailingActions: Story = {
   args: {
-    appearance: 'compact',
+    density: 'compact',
     lx: {
       width: 's480',
     },

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

@@ -26,7 +26,7 @@ describe('NavBar', () => {
   describe('Rendering', () => {
     it('should render with title', () => {
       renderWithProvider(
-        <NavBar testID='navbar' appearance='compact'>
+        <NavBar testID='navbar' density='compact'>
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
           </NavBarContent>
@@ -39,7 +39,7 @@ describe('NavBar', () => {
 
     it('should render with title and description', () => {
       renderWithProvider(
-        <NavBar testID='navbar' appearance='expanded'>
+        <NavBar testID='navbar' density='expanded'>
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
             <NavBarDescription>Test Description</NavBarDescription>
@@ -54,7 +54,7 @@ describe('NavBar', () => {
     it('should render with back button', () => {
       const onPress = jest.fn();
       renderWithProvider(
-        <NavBar testID='navbar' appearance='compact'>
+        <NavBar testID='navbar' density='compact'>
           <NavBarBackButton onPress={onPress} />
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
@@ -67,7 +67,7 @@ describe('NavBar', () => {
 
     it('should render with coin capsule', () => {
       renderWithProvider(
-        <NavBar testID='navbar' appearance='compact'>
+        <NavBar testID='navbar' density='compact'>
           <NavBarContent>
             <NavBarCoinCapsule ticker='BTC' icon={<MockIcon />} />
           </NavBarContent>
@@ -80,7 +80,7 @@ describe('NavBar', () => {
     it('should render with all components', () => {
       const onPress = jest.fn();
       renderWithProvider(
-        <NavBar testID='navbar' appearance='expanded'>
+        <NavBar testID='navbar' density='expanded'>
           <NavBarBackButton onPress={onPress} />
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
@@ -95,12 +95,12 @@ describe('NavBar', () => {
     });
   });
 
-  describe('Appearances', () => {
+  describe('Density', () => {
     it.each(['compact', 'expanded'] as const)(
-      'should render with %s appearance',
-      (appearance) => {
+      'should render with %s density',
+      (density) => {
         renderWithProvider(
-          <NavBar testID='navbar' appearance={appearance}>
+          <NavBar testID='navbar' density={density}>
             <NavBarContent>
               <NavBarTitle>Test Title</NavBarTitle>
             </NavBarContent>
@@ -115,7 +115,7 @@ describe('NavBar', () => {
   describe('NavBarTitle', () => {
     it('should truncate to 1 line in compact mode', () => {
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarContent>
             <NavBarTitle testID='title'>Very long title text</NavBarTitle>
           </NavBarContent>
@@ -128,7 +128,7 @@ describe('NavBar', () => {
 
     it('should truncate to 2 lines in expanded mode', () => {
       renderWithProvider(
-        <NavBar appearance='expanded'>
+        <NavBar density='expanded'>
           <NavBarContent>
             <NavBarTitle testID='title'>Very long title text</NavBarTitle>
           </NavBarContent>
@@ -142,7 +142,7 @@ describe('NavBar', () => {
     it('should accept custom style prop', () => {
       const customStyle = { opacity: 0.5 };
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarContent>
             <NavBarTitle testID='title' style={customStyle}>
               Test
@@ -164,7 +164,7 @@ describe('NavBar', () => {
   describe('NavBarDescription', () => {
     it('should truncate to 1 line in compact mode', () => {
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarContent>
             <NavBarTitle>Title</NavBarTitle>
             <NavBarDescription testID='description'>
@@ -180,7 +180,7 @@ describe('NavBar', () => {
 
     it('should truncate to 3 lines in expanded mode', () => {
       renderWithProvider(
-        <NavBar appearance='expanded'>
+        <NavBar density='expanded'>
           <NavBarContent>
             <NavBarTitle>Title</NavBarTitle>
             <NavBarDescription testID='description'>
@@ -197,7 +197,7 @@ describe('NavBar', () => {
     it('should accept custom style prop', () => {
       const customStyle = { opacity: 0.7 };
       renderWithProvider(
-        <NavBar appearance='expanded'>
+        <NavBar density='expanded'>
           <NavBarContent>
             <NavBarTitle>Title</NavBarTitle>
             <NavBarDescription testID='description' style={customStyle}>
@@ -221,7 +221,7 @@ describe('NavBar', () => {
     it('should call onPress when pressed', () => {
       const handlePress = jest.fn();
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarBackButton onPress={handlePress} />
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
@@ -236,7 +236,7 @@ describe('NavBar', () => {
     it('should accept custom accessibilityLabel', () => {
       const handlePress = jest.fn();
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarBackButton
             onPress={handlePress}
             accessibilityLabel='Navigate back'
@@ -254,7 +254,7 @@ describe('NavBar', () => {
   describe('NavBarCoinCapsule', () => {
     it('should render ticker and icon', () => {
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarContent>
             <NavBarCoinCapsule ticker='ETH' icon={<MockIcon />} />
           </NavBarContent>
@@ -268,7 +268,7 @@ describe('NavBar', () => {
   describe('NavBarTrailing', () => {
     it('should render trailing content in compact mode', () => {
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarBackButton />
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
@@ -284,7 +284,7 @@ describe('NavBar', () => {
 
     it('should render trailing content in expanded mode', () => {
       renderWithProvider(
-        <NavBar appearance='expanded'>
+        <NavBar density='expanded'>
           <NavBarBackButton />
           <NavBarContent>
             <NavBarTitle>Test Title</NavBarTitle>
@@ -301,7 +301,7 @@ describe('NavBar', () => {
     it('should accept custom style prop', () => {
       const customStyle = { opacity: 0.8 };
       renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarContent>
             <NavBarTitle>Title</NavBarTitle>
           </NavBarContent>
@@ -324,7 +324,7 @@ describe('NavBar', () => {
   describe('NavBarContent', () => {
     it('should render content in both compact and expanded modes', () => {
       const { rerender } = renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarContent>
             <NavBarTitle>Title</NavBarTitle>
             <NavBarDescription>Description</NavBarDescription>
@@ -337,7 +337,7 @@ describe('NavBar', () => {
 
       rerender(
         <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
-          <NavBar appearance='expanded'>
+          <NavBar density='expanded'>
             <NavBarContent>
               <NavBarTitle>Title</NavBarTitle>
               <NavBarDescription>Description</NavBarDescription>
@@ -353,7 +353,7 @@ describe('NavBar', () => {
     it('should render back button in all modes', () => {
       const onPress = jest.fn();
       const { rerender } = renderWithProvider(
-        <NavBar appearance='compact'>
+        <NavBar density='compact'>
           <NavBarBackButton onPress={onPress} />
           <NavBarContent>
             <NavBarTitle>Title</NavBarTitle>
@@ -365,7 +365,7 @@ describe('NavBar', () => {
 
       rerender(
         <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
-          <NavBar appearance='expanded'>
+          <NavBar density='expanded'>
             <NavBarBackButton onPress={onPress} />
             <NavBarContent>
               <NavBarTitle>Title</NavBarTitle>

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

@@ -1,4 +1,4 @@
-import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+import { createSafeContext, Density } from '@ledgerhq/lumen-utils-shared';
 import { Children, isValidElement, ReactNode } from 'react';
 import { StyleSheet } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
@@ -8,7 +8,6 @@ import { IconButton } from '../IconButton';
 import { Box, Text } from '../Utility';
 import { CoinCapsule } from './CoinCapsule';
 import {
-  NavBarAppearance,
   NavBarBackButtonProps,
   NavBarCoinCapsuleProps,
   NavBarContentProps,
@@ -25,7 +24,7 @@ type Slots = {
 };
 
 const [NavBarProvider, useNavBarContext] = createSafeContext<{
-  appearance: NavBarAppearance;
+  density: Density;
 }>('NavBar');
 
 function extractSlots(children: ReactNode): Slots {
@@ -64,11 +63,11 @@ export function NavBarContent({
   style,
   ...props
 }: NavBarContentProps) {
-  const { appearance } = useNavBarContext({
+  const { density } = useNavBarContext({
     consumerName: 'NavBarContent',
     contextRequired: true,
   });
-  const styles = useStyles({ appearance });
+  const styles = useStyles({ density });
 
   return (
     <Box style={[styles.content, style]} {...props}>
@@ -80,15 +79,15 @@ export function NavBarContent({
 NavBarContent.displayName = 'NavBarContent';
 
 export function NavBarTitle({ children, style, ...props }: NavBarTitleProps) {
-  const { appearance } = useNavBarContext({
+  const { density } = useNavBarContext({
     consumerName: 'NavBarTitle',
     contextRequired: true,
   });
-  const styles = useStyles({ appearance });
+  const styles = useStyles({ density });
 
   return (
     <Text
-      numberOfLines={appearance === 'compact' ? 1 : 2}
+      numberOfLines={density === 'compact' ? 1 : 2}
       style={[styles.title, style]}
       {...props}
     >
@@ -102,15 +101,15 @@ export function NavBarDescription({
   style,
   ...props
 }: NavBarDescriptionProps) {
-  const { appearance } = useNavBarContext({
+  const { density } = useNavBarContext({
     consumerName: 'NavBarDescription',
     contextRequired: true,
   });
-  const styles = useStyles({ appearance });
+  const styles = useStyles({ density });
 
   return (
     <Text
-      numberOfLines={appearance === 'compact' ? 1 : 3}
+      numberOfLines={density === 'compact' ? 1 : 3}
       style={[styles.description, style]}
       {...props}
     >
@@ -193,14 +192,14 @@ NavBarTrailing.displayName = 'NavBarTrailing';
 /**
  * NavBar component for top navigation
  */
-export function NavBar({ appearance, children, ...props }: NavBarProps) {
-  const styles = useStyles({ appearance });
+export function NavBar({ density, children, ...props }: NavBarProps) {
+  const styles = useStyles({ density });
   const slots = extractSlots(children);
 
   return (
-    <NavBarProvider value={{ appearance }}>
+    <NavBarProvider value={{ density }}>
       <Box style={styles.container} {...props}>
-        {appearance === 'expanded' ? (
+        {density === 'expanded' ? (
           <>
             <Box style={styles.topRow}>
               <Box style={styles.backButtonContainer}>{slots.backButton}</Box>
@@ -225,10 +224,10 @@ export function NavBar({ appearance, children, ...props }: NavBarProps) {
 }
 
 type StyleParams = {
-  appearance: NavBarAppearance;
+  density: Density;
 };
 
-const useStyles = ({ appearance }: StyleParams) => {
+const useStyles = ({ density }: StyleParams) => {
   return useStyleSheet(
     (t) => {
       return {
@@ -244,7 +243,7 @@ const useStyles = ({ appearance }: StyleParams) => {
             paddingVertical: t.spacings.s8,
           },
           {
-            ...(appearance === 'expanded' && {
+            ...(density === 'expanded' && {
               alignItems: 'flex-start',
               flexDirection: 'column',
             }),
@@ -261,7 +260,7 @@ const useStyles = ({ appearance }: StyleParams) => {
             paddingVertical: t.spacings.s8,
           },
           {
-            ...(appearance === 'compact' && {
+            ...(density === 'compact' && {
               position: 'absolute',
               left: t.spacings.s4,
               zIndex: 1,
@@ -274,28 +273,31 @@ const useStyles = ({ appearance }: StyleParams) => {
             flexShrink: 0,
           },
           {
-            ...(appearance === 'compact' && {
+            ...(density === 'compact' && {
               position: 'absolute',
               right: t.spacings.s4,
               zIndex: 1,
             }),
           },
           {
-            ...(appearance === 'expanded' && {
+            ...(density === 'expanded' && {
               marginLeft: 'auto',
             }),
           },
         ]),
         contentContainer: StyleSheet.flatten([
           {
-            ...(appearance === 'compact' && {
+            flex: 1,
+          },
+          {
+            ...(density === 'compact' && {
               paddingHorizontal: t.spacings.s48,
               alignItems: 'center',
               justifyContent: 'center',
             }),
           },
           {
-            ...(appearance === 'expanded' && {
+            ...(density === 'expanded' && {
               paddingHorizontal: t.spacings.s12,
               paddingBottom: t.spacings.s12,
               width: '100%',
@@ -307,31 +309,31 @@ const useStyles = ({ appearance }: StyleParams) => {
             flexDirection: 'column',
           },
           {
-            ...(appearance === 'compact' && {
+            ...(density === 'compact' && {
               alignItems: 'center',
               justifyContent: 'center',
             }),
           },
           {
-            ...(appearance === 'expanded' && {
+            ...(density === 'expanded' && {
               gap: t.spacings.s8,
             }),
           },
         ]),
         title: {
-          ...(appearance === 'expanded'
+          ...(density === 'expanded'
             ? t.typographies.heading3SemiBold
             : t.typographies.heading4SemiBold),
           color: t.colors.text.base,
-          textAlign: appearance === 'expanded' ? 'left' : 'center',
+          textAlign: density === 'expanded' ? 'left' : 'center',
         },
         description: {
           ...t.typographies.body2,
           color: t.colors.text.muted,
-          textAlign: appearance === 'expanded' ? 'left' : 'center',
+          textAlign: density === 'expanded' ? 'left' : 'center',
         },
       };
     },
-    [appearance],
+    [density],
   );
 };

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

@@ -1,16 +1,15 @@
+import { Density } from '@ledgerhq/lumen-utils-shared';
 import { ReactElement, ReactNode } from 'react';
 import { StyledViewProps } from '../../../styles';
 import { IconButtonProps } from '../IconButton';
 
-export type NavBarAppearance = 'compact' | 'expanded';
-
 export type NavBarProps = {
   /**
-   * Controls the appearance/layout of the NavBar.
+   * Controls the density/layout of the NavBar.
    * - 'compact': Content displayed vertically, centered with standard spacing
    * - 'expanded': Content displayed vertically, left-aligned with increased spacing
    */
-  appearance: NavBarAppearance;
+  density: Density;
 } & StyledViewProps;
 
 export type NavBarBackButtonProps = {

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

@@ -121,7 +121,7 @@ export const GlobalSelectBottomSheet: React.FC = () => {
             {currentSelect.label && (
               <BottomSheetHeader
                 title={currentSelect.label}
-                appearance='compact'
+                density='compact'
               />
             )}
             <Box lx={{ gap: 's4' }}>

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

@@ -151,7 +151,11 @@ export const Spot = (props: SpotProps) => {
         return <Icon size={calculatedIconSize} style={styles.icon} />;
       }
       case 'number': {
-        return <Text style={styles.numberText}>{props.number}</Text>;
+        return (
+          <Text style={styles.numberText} allowFontScaling={false}>
+            {props.number}
+          </Text>
+        );
       }
       case 'bluetooth':
         return (

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

@@ -168,15 +168,27 @@ export const Stepper = ({
         }}
       >
         {label ? (
-          <Text typography='body2SemiBold' lx={{ color: 'base' }}>
+          <Text
+            typography='body2SemiBold'
+            lx={{ color: 'base' }}
+            maxFontSizeMultiplier={1.4}
+          >
             {label}
           </Text>
         ) : (
           <>
-            <Text typography='body1SemiBold' lx={{ color: 'base' }}>
+            <Text
+              typography='body1SemiBold'
+              lx={{ color: 'base' }}
+              maxFontSizeMultiplier={1.4}
+            >
               {Math.min(Math.max(currentStep, 0), totalSteps)}
             </Text>
-            <Text typography='body2SemiBold' lx={{ color: 'muted' }}>
+            <Text
+              typography='body2SemiBold'
+              lx={{ color: 'muted' }}
+              maxFontSizeMultiplier={1.4}
+            >
               /{totalSteps}
             </Text>
           </>

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

@@ -299,7 +299,7 @@ const useStyles = () =>
   useStyleSheet(
     (t) => ({
       container: {
-        height: TAB_BAR_HEIGHT,
+        minHeight: TAB_BAR_HEIGHT,
         flexDirection: 'row',
         justifyContent: 'center',
         padding: t.spacings.s4,
@@ -310,7 +310,7 @@ const useStyles = () =>
       },
       blur: {
         ...StyleSheet.absoluteFillObject,
-        height: TAB_BAR_HEIGHT + t.sizes.s16,
+        bottom: -t.sizes.s16,
         zIndex: -1,
       },
       fallbackBackground: {

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

@@ -39,15 +39,13 @@ const useStyles = ({
 
       const sizeStyles: Record<
         Size,
-        { height: number; paddingHorizontal: number; paddingVertical: number }
+        { paddingHorizontal: number; paddingVertical: number }
       > = {
         md: {
-          height: t.sizes.s24,
           paddingHorizontal: t.spacings.s8,
           paddingVertical: t.spacings.s4,
         },
         sm: {
-          height: t.sizes.s20,
           paddingHorizontal: t.spacings.s4,
           paddingVertical: t.spacings.s2,
         },

package/src/lib/Components/Tooltip/GlobalTooltipBottomSheet.tsx

@@ -63,7 +63,7 @@ export const GlobalTooltipBottomSheet: React.FC = () => {
         {(currentTooltip?.title || currentTooltip?.content) && (
           <BottomSheetHeader
             title={currentTooltip.title}
-            appearance='expanded'
+            density='expanded'
             description={currentTooltip.content}
           />
         )}