@ledgerhq/lumen-ui-rnative 0.1.19 → 0.1.21

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/Select/Select.stories.tsx

@@ -16,6 +16,7 @@ import {
 
 const meta: Meta<typeof Select> = {
   component: Select,
+  tags: ['deprecated'],
   subcomponents: {
     SelectTrigger,
     SelectValue,

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}
           />
         )}

package/src/lib/Components/index.ts

@@ -11,6 +11,7 @@ export * from './CardButton';
 export * from './ContentBanner';
 export * from './Checkbox';
 export * from './Divider';
+export * from './DotSymbol';
 export * from './Icon';
 export * from './IconButton';
 export * from './InteractiveIcon';