@ledgerhq/lumen-ui-rnative 0.1.37 → 0.1.39

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

@@ -1,9 +1,9 @@
 import type { MediaButtonProps } from './types';
 /**
- * Media button for select/dropdown components. Displays a label with an optional
+ * Media button for option list/dropdown components. Displays a label with an optional
  * leading content and a trailing chevron indicator.
  *
- * This component is intended to be used exclusively as the trigger inside a Select or
+ * This component is intended to be used exclusively as the trigger inside an OptionList or
  * dropdown pattern. It should not be used as a standalone action button — use `Button`
  * or `IconButton` instead.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"MediaImage.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaImage/MediaImage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAmB,MAAM,SAAS,CAAC;AAgBhF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAUtD,CAAC;AAgDF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,GAAI,gGAYxB,eAAe,4CA+CjB,CAAC"}
+{"version":3,"file":"MediaImage.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaImage/MediaImage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAmB,MAAM,SAAS,CAAC;AAiBhF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAWtD,CAAC;AAgDF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,GAAI,gGAYxB,eAAe,4CA+CjB,CAAC"}

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

@@ -1,5 +1,5 @@
 import type { StyledViewProps } from '../../../styles';
-export type MediaImageSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64;
+export type MediaImageSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
 export type MediaImageShape = 'square' | 'circle';
 export type MediaImageProps = {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaImage/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/MediaImage/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE7E,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAIlD,QAAA,MAAM,aAAa,GAAI,4CAKpB,kBAAkB,4CAYpB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAIlD,QAAA,MAAM,aAAa,GAAI,4CAKpB,kBAAkB,4CAUpB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -30,7 +30,6 @@ export * from './OptionList';
 export * from './PageIndicator';
 export * from './SearchInput';
 export * from './SegmentedControl';
-export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Spot';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -42,7 +42,7 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.1.4",
+    "@ledgerhq/lumen-utils-shared": "0.1.5",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
@@ -52,7 +52,7 @@
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.1.15",
+    "@ledgerhq/lumen-design-core": "0.1.16",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^4.1.0",

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

@@ -29,6 +29,18 @@ AmountInput is a specialized input component designed for handling numeric value
 
 > **Layout:** The AmountInput component takes the full width of its container by default. You can control the width by using the `style` prop or by wrapping in a container.
 
+### Size
+
+Use the `size` prop to control typography scale.
+
+<Canvas of={AmountInputStories.Size} />
+
+### Alignment
+
+Use the `align` prop to position the amount within its container. Defaults to `center`. Use `start` or `end` for left- or right-aligned layouts.
+
+<Canvas of={AmountInputStories.Alignment} />
+
 ### Currency Text Position
 
 The currency text can be positioned on either the **left** (default) or **right** side of the input:

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

@@ -2,7 +2,18 @@ import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
 import { View } from 'react-native';
 import { AmountInput } from './AmountInput';
-import { type AmountInputProps } from './types';
+import {
+  type AmountInputAlign,
+  type AmountInputProps,
+  type AmountInputSize,
+} from './types';
+
+const ALIGNMENTS: AmountInputAlign[] = ['start', 'center', 'end'];
+
+const SIZES: { size: AmountInputSize; value: string }[] = [
+  { size: 'md', value: '1234.56' },
+  { size: 'sm', value: '55 555' },
+];
 
 const meta: Meta<typeof AmountInput> = {
   component: AmountInput,
@@ -16,6 +27,15 @@ const meta: Meta<typeof AmountInput> = {
       },
     },
   },
+  argTypes: {
+    isInvalid: {
+      control: 'boolean',
+      description: 'Marks the input as invalid for error styling.',
+    },
+  },
+  args: {
+    isInvalid: false,
+  },
 };
 
 export default meta;
@@ -68,6 +88,53 @@ export const WithValue: Story = {
   },
 };
 
+export const Size: Story = {
+  render: () => (
+    <View
+      style={{
+        width: '100%',
+        maxWidth: 320,
+        alignItems: 'center',
+        gap: 24,
+        padding: 24,
+      }}
+    >
+      {SIZES.map(({ size, value }) => (
+        <AmountInput
+          key={size}
+          size={size}
+          value={value}
+          currencyText='$'
+          onChangeText={() => {}}
+        />
+      ))}
+    </View>
+  ),
+};
+
+export const Alignment: Story = {
+  render: () => (
+    <View
+      style={{
+        width: '100%',
+        maxWidth: 320,
+        gap: 24,
+        padding: 24,
+      }}
+    >
+      {ALIGNMENTS.map((align) => (
+        <AmountInput
+          key={align}
+          align={align}
+          value='1234.56'
+          currencyText='$'
+          onChangeText={() => {}}
+        />
+      ))}
+    </View>
+  ),
+};
+
 export const CurrencyPositionLeft: Story = {
   render: (args) => <AmountInputStory {...args} />,
   args: {

package/src/lib/Components/AmountInput/AmountInput.tsx

@@ -4,7 +4,7 @@ import {
   useDisabledContext,
 } from '@ledgerhq/lumen-utils-shared';
 import { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Pressable, StyleSheet, TextInput } from 'react-native';
+import { Pressable, StyleSheet, TextInput, View } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -13,9 +13,13 @@ import Animated, {
   withSequence,
   withTiming,
 } from 'react-native-reanimated';
-import { useStyleSheet } from '../../../styles';
+import { useStyleSheet, useTheme } from '../../../styles';
 import { Box } from '../Utility';
-import { type AmountInputProps } from './types';
+import {
+  type AmountInputAlign,
+  type AmountInputProps,
+  type AmountInputSize,
+} from './types';
 
 /**
  * AmountInput component for handling numeric input with currency display.
@@ -25,6 +29,8 @@ import { type AmountInputProps } from './types';
 export const AmountInput = ({
   lx = {},
   style,
+  size = 'md',
+  align = 'center',
   currencyText,
   currencyPosition = 'left',
   editable,
@@ -48,16 +54,20 @@ export const AmountInput = ({
   });
 
   const translateX = useSharedValue(0);
-  const animatedFontSize = useSharedValue(getFontSize(inputValue));
+  const animatedFontSize = useSharedValue(getFontSize(inputValue, size));
   const caretOpacity = useSharedValue(0);
 
   useImperativeHandle(ref, () => inputRef.current as TextInput, []);
 
+  const { theme } = useTheme();
   const styles = useStyles({
+    size,
+    align,
     hasValue: !!inputValue,
     isEditable: !disabled,
     isInvalid,
   });
+  const caretFixedHeight = size === 'sm' ? theme.sizes.s28 : 0;
 
   const animatedInputStyle = useAnimatedStyle(
     () => ({
@@ -79,13 +89,13 @@ export const AmountInput = ({
   const animatedCaretStyle = useAnimatedStyle(
     () => ({
       opacity: caretOpacity.value,
-      height: animatedFontSize.value,
+      height: size === 'sm' ? caretFixedHeight : animatedFontSize.value,
     }),
-    [caretOpacity, animatedFontSize],
+    [caretOpacity, animatedFontSize, size, caretFixedHeight],
   );
 
   useEffect(() => {
-    const newSize = getFontSize(inputValue);
+    const newSize = getFontSize(inputValue, size);
 
     translateX.value = withSequence(
       withTiming(4, { duration: 0 }),
@@ -99,7 +109,7 @@ export const AmountInput = ({
       duration: 250,
       easing: Easing.bezier(0.4, 0, 0.2, 1),
     });
-  }, [inputValue, animatedFontSize, translateX]);
+  }, [inputValue, size, animatedFontSize, translateX]);
 
   useEffect(() => {
     if (isFocused && !disabled) {
@@ -164,94 +174,127 @@ export const AmountInput = ({
         style={styles.hiddenInput}
         {...props}
       />
-      <Pressable
-        onPress={handlePress}
-        style={styles.pressable}
-        accessibilityLabel={props.accessibilityLabel || 'Amount input'}
-      >
-        {currencyPosition === 'left' && CurrencyText}
-
-        {/** display text that mirrors the hidden input's value */}
-        <Animated.Text
-          style={[styles.displayText, animatedInputStyle, style]}
-          allowFontScaling={false}
+      <View style={styles.alignRow}>
+        <Pressable
+          onPress={handlePress}
+          style={styles.pressable}
+          accessibilityLabel={props.accessibilityLabel || 'Amount input'}
         >
-          {inputValue || '0'}
-        </Animated.Text>
+          {currencyPosition === 'left' && CurrencyText}
+
+          {/** display text that mirrors the hidden input's value */}
+          <Animated.Text
+            style={[styles.displayText, animatedInputStyle, style]}
+            allowFontScaling={false}
+          >
+            {inputValue || '0'}
+          </Animated.Text>
 
-        {/** custom caret */}
-        <Animated.View style={[styles.caret, animatedCaretStyle]} />
+          {/** custom caret */}
+          <Animated.View style={[styles.caret, animatedCaretStyle]} />
 
-        {currencyPosition === 'right' && CurrencyText}
-      </Pressable>
+          {currencyPosition === 'right' && CurrencyText}
+        </Pressable>
+      </View>
     </Box>
   );
 };
 
+const SIZE_TYPOGRAPHY = {
+  md: 'heading0SemiBold',
+  sm: 'heading2SemiBold',
+} as const satisfies Record<
+  AmountInputSize,
+  'heading0SemiBold' | 'heading2SemiBold'
+>;
+
+const ALIGN_ROW_JUSTIFY = {
+  center: 'center',
+  start: 'flex-start',
+  end: 'flex-end',
+} as const satisfies Record<
+  AmountInputAlign,
+  'center' | 'flex-start' | 'flex-end'
+>;
+
 const useStyles = ({
+  size,
+  align,
   hasValue,
   isEditable,
   isInvalid,
 }: {
+  size: AmountInputSize;
+  align: AmountInputAlign;
   hasValue: boolean;
   isEditable: boolean;
   isInvalid: boolean;
 }) => {
   return useStyleSheet(
-    (t) => ({
-      container: {
-        position: 'relative',
-      },
-      hiddenInput: {
-        position: 'absolute',
-        width: t.sizes.full,
-        height: t.sizes.full,
-        opacity: 0,
-      },
-      pressable: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-      },
-      displayText: StyleSheet.flatten([
-        {
-          height: t.sizes.s56,
-          backgroundColor: 'transparent',
-          color: t.colors.text.base,
-          alignItems: 'flex-start',
-          ...t.typographies.heading0SemiBold,
-        },
-        !hasValue && {
-          color: t.colors.text.mutedSubtle,
-        },
-        !isEditable && {
-          color: t.colors.text.disabled,
-        },
-        isInvalid && {
-          color: t.colors.text.error,
+    (t) => {
+      const typography = t.typographies[SIZE_TYPOGRAPHY[size]];
+      const displayHeight = size === 'md' ? t.sizes.s56 : t.sizes.s36;
+
+      return {
+        container: {
+          position: 'relative',
+          width: t.sizes.full,
         },
-      ]),
-      currency: StyleSheet.flatten([
-        {
-          color: t.colors.text.base,
-          ...t.typographies.heading0SemiBold,
+        hiddenInput: {
+          position: 'absolute',
+          width: t.sizes.full,
+          height: t.sizes.full,
+          opacity: 0,
         },
-        !hasValue && {
-          color: t.colors.text.mutedSubtle,
+        alignRow: {
+          width: t.sizes.full,
+          flexDirection: 'row',
+          justifyContent: ALIGN_ROW_JUSTIFY[align],
         },
-        !isEditable && {
-          color: t.colors.text.disabled,
+        pressable: {
+          flexDirection: 'row',
+          alignItems: 'center',
         },
-        isInvalid && {
-          color: t.colors.text.error,
+        displayText: StyleSheet.flatten([
+          {
+            height: displayHeight,
+            backgroundColor: 'transparent',
+            color: t.colors.text.base,
+            alignItems: 'flex-start',
+            ...typography,
+          },
+          !hasValue && {
+            color: t.colors.text.mutedSubtle,
+          },
+          !isEditable && {
+            color: t.colors.text.disabled,
+          },
+          isInvalid && {
+            color: t.colors.text.error,
+          },
+        ]),
+        currency: StyleSheet.flatten([
+          {
+            color: t.colors.text.base,
+            ...typography,
+          },
+          !hasValue && {
+            color: t.colors.text.mutedSubtle,
+          },
+          !isEditable && {
+            color: t.colors.text.disabled,
+          },
+          isInvalid && {
+            color: t.colors.text.error,
+          },
+        ]),
+        caret: {
+          marginHorizontal: t.spacings.s2,
+          width: t.sizes.s2,
+          backgroundColor: t.colors.text.active,
         },
-      ]),
-      caret: {
-        marginHorizontal: t.spacings.s2,
-        width: t.sizes.s2,
-        backgroundColor: t.colors.text.active,
-      },
-    }),
-    [hasValue, isEditable, isInvalid],
+      };
+    },
+    [size, align, hasValue, isEditable, isInvalid],
   );
 };

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

@@ -1,6 +1,10 @@
 import type { TextInputProps, ViewStyle } from 'react-native';
 import type { BoxProps } from '../Utility';
 
+export type AmountInputSize = 'md' | 'sm';
+
+export type AmountInputAlign = 'center' | 'start' | 'end';
+
 export type AmountInputProps = Omit<
   TextInputProps,
   'value' | 'onChangeText'
@@ -15,6 +19,16 @@ export type AmountInputProps = Omit<
    * @required
    */
   onChangeText: (text: string) => void;
+  /**
+   * Visual size of the amount input.
+   * @default 'md'
+   */
+  size?: AmountInputSize;
+  /**
+   * Horizontal alignment of the amount and currency.
+   * @default 'center'
+   */
+  align?: AmountInputAlign;
   /**
    * The currency text (e.g. USD, EUR)
    */

package/src/lib/Components/Avatar/Avatar.mdx

@@ -55,6 +55,8 @@ An optional notification indicator can be displayed to show status or alerts:
 
 - **showNotification**: Boolean prop to toggle the notification dot (default: false)
 
+> The notification dot is only rendered on the `sm` and `md` sizes. It is suppressed on `lg` and `xl` even when `showNotification` is `true`.
+
 <Canvas of={AvatarStories.NotificationShowcase} />
 
 ### As Interactive Trigger

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

@@ -195,26 +195,24 @@ describe('Avatar Component', () => {
 
     dot = toJSON().children[0];
     expect(dot.props.style.height).toBe(sizes.s12);
-
-    rerender(
-      <TestWrapper>
-        <Avatar testID='avatar-id' size='lg' showNotification />
-      </TestWrapper>,
-    );
-
-    dot = toJSON().children[0];
-    expect(dot.props.style.height).toBe(sizes.s14);
-
-    rerender(
-      <TestWrapper>
-        <Avatar testID='avatar-id' size='xl' showNotification />
-      </TestWrapper>,
-    );
-
-    dot = toJSON().children[0];
-    expect(dot.props.style.height).toBe(sizes.s16);
   });
 
+  it.each(['lg', 'xl'] as const)(
+    'should not render the notification indicator on size=%s even when showNotification is true',
+    (size) => {
+      const { toJSON } = render(
+        <TestWrapper>
+          <Avatar testID='avatar-id' size={size} showNotification />
+        </TestWrapper>,
+      );
+
+      const tree = toJSON();
+      expect(tree.props.testID).toBe('avatar-id');
+      expect(tree.props.accessibilityRole).toBe('image');
+      expect(tree.props.accessibilityLabel).toBe('avatar');
+    },
+  );
+
   it('should apply custom styles', () => {
     const customStyle = { borderWidth: 2 };
     const { getByTestId } = render(

package/src/lib/Components/Avatar/Avatar.tsx

@@ -16,14 +16,11 @@ const fallbackSizes = {
   xl: 40,
 } as const;
 
-const dotSizeMap: Record<
-  Size,
-  NonNullable<React.ComponentProps<typeof DotIndicator>['size']>
+const dotSizeMap: Partial<
+  Record<Size, NonNullable<React.ComponentProps<typeof DotIndicator>['size']>>
 > = {
-  sm: 'xs',
-  md: 'sm',
-  lg: 'md',
-  xl: 'lg',
+  sm: 'lg',
+  md: 'xl',
 };
 
 const useStyles = ({ size }: { size: Size }) => {
@@ -81,7 +78,7 @@ export const Avatar = ({
   src,
   alt = 'avatar',
   size = 'md',
-  showNotification = false,
+  showNotification: showNotificationProp = false,
   testID,
   ref,
   ...props
@@ -93,6 +90,10 @@ export const Avatar = ({
 
   const resolvedAlt = alt || t('components.avatar.defaultAlt');
 
+  // dot indicator is not visible on larger sizes, regardless of the `showNotification` prop
+  const showNotification =
+    showNotificationProp && (size === 'sm' || size === 'md');
+
   const accessibilityLabel = showNotification
     ? `${resolvedAlt}, ${t('components.avatar.notificationAriaLabel')}`
     : resolvedAlt;

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

@@ -105,6 +105,7 @@ export const Base: Story = {
     hideCloseButton: false,
     onBack: undefined,
     onClose: undefined,
+    onHeaderClosePressed: undefined,
     enableHandlePanningGesture: true,
     enablePanDownToClose: true,
     enableBlurKeyboardOnGesture: true,

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

@@ -1,10 +1,11 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import type { RenderOptions } from '@testing-library/react-native';
-import { render } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 import { Text, View } from 'react-native';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { BottomSheet as BottomSheetComponent } from './BottomSheet';
+import { BottomSheetHeader } from './BottomSheetHeader';
 // Mock react-native-gesture-handler which is used by @gorhom/bottom-sheet
 jest.mock('react-native-gesture-handler', () => ({}));
 
@@ -339,6 +340,36 @@ describe('BottomSheet', () => {
       expect(onDismiss).not.toHaveBeenCalled();
     });
 
+    it('calls onHeaderClosePressed when the header close button is pressed', () => {
+      const { BottomSheet } = require('./BottomSheet');
+      const onHeaderClosePressed = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <BottomSheet
+          onHeaderClosePressed={onHeaderClosePressed}
+          testID='bottom-sheet'
+        >
+          <BottomSheetHeader title='Title' />
+        </BottomSheet>,
+      );
+
+      fireEvent.press(getByTestId('bottom-sheet-header-close-button'));
+
+      expect(onHeaderClosePressed).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not require onHeaderClosePressed to close from the header', () => {
+      const { BottomSheet } = require('./BottomSheet');
+      const { getByTestId } = renderWithTheme(
+        <BottomSheet testID='bottom-sheet'>
+          <BottomSheetHeader title='Title' />
+        </BottomSheet>,
+      );
+
+      expect(() =>
+        fireEvent.press(getByTestId('bottom-sheet-header-close-button')),
+      ).not.toThrow();
+    });
+
     it('accepts multiple callbacks simultaneously', () => {
       const { BottomSheet } = require('./BottomSheet');
       const onOpen = jest.fn();