@ledgerhq/lumen-ui-rnative 0.1.36 → 0.1.38

package/src/lib/Animations/Spin/Spin.mdx

@@ -9,7 +9,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Animations/Spin' of={SpinStories} />
 
-# 🔄 Spin
+# Spin
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/AddressInput/AddressInput.mdx

@@ -7,7 +7,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Input/AddressInput' of={AddressInputStories} />
 
-# ⌨️ AddressInput
+# AddressInput
 
 <CustomTabs>
   <Tab label="Overview" path='Input/AddressInput'>

package/src/lib/Components/AmountDisplay/AmountDisplay.mdx

@@ -12,7 +12,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Communication/AmountDisplay' of={AmountDisplayStories} />
 
-# 🔢 AmountDisplay
+# AmountDisplay
 
 <CustomTabs>
   <Tab label="Overview">
@@ -39,6 +39,12 @@ The AmountDisplay component renders formatted monetary amounts with flexible cur
 <Canvas of={AmountDisplayStories.Base} />
 <Controls of={AmountDisplayStories.Base} />
 
+### Size
+
+The `size` prop controls the typographic scale of the amount display. Use `md` (default) for primary amounts and `sm` for secondary or contextual amounts.
+
+<Canvas of={AmountDisplayStories.Sizes} />
+
 ### Privacy
 
 The `hidden` prop allows you to toggle amount visibility for privacy-sensitive applications. When set to `true`, the component displays bullet points (••••) instead of the actual amount, while keeping the currency symbol visible. The example below demonstrates toggling amount visibility with a button.

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

@@ -79,6 +79,12 @@ const meta: Meta<typeof AmountDisplay> = {
         type: 'boolean',
       },
     },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'md'],
+    },
   },
   parameters: {
     layout: 'centered',
@@ -109,6 +115,18 @@ export const Base: Story = {
   },
 };
 
+export const Sizes: Story = {
+  args: {
+    value: 1234.56,
+  },
+  render: (props) => (
+    <View style={{ alignItems: 'center', gap: 24 }}>
+      <AmountDisplay {...props} size='md' />
+      <AmountDisplay {...props} size='sm' />
+    </View>
+  ),
+};
+
 export const WithHideButton: Story = {
   render: (props) => {
     const [hidden, setHidden] = useState(false);

package/src/lib/Components/AmountDisplay/AmountDisplay.tsx

@@ -8,6 +8,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useCommonTranslation } from '../../../i18n';
+import type { LumenTypographyTokenName } from '../../../styles';
 import { useStyleSheet } from '../../../styles';
 import { Pulse } from '../../Animations/Pulse';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
@@ -15,38 +16,66 @@ import { RuntimeConstants } from '../../utils';
 import { Box } from '../Utility';
 import type {
   AmountDisplayProps,
+  AmountDisplaySize,
   DigitStripListProps,
   DigitStripProps,
+  DigitWidths,
 } from './types';
 import { DIGITS } from './types';
 
-const INTEGER_DIGIT_WIDTHS = {
-  0: 25,
-  1: 15.5,
-  2: 23.5,
-  3: 24.5,
-  4: 25.5,
-  5: 23.5,
-  6: 25,
-  7: 22,
-  8: 24.5,
-  9: 24.5,
+const TYPOGRAPHY_WIDTHS = {
+  heading1SemiBold: {
+    0: 25,
+    1: 15.5,
+    2: 23.5,
+    3: 24.5,
+    4: 25.5,
+    5: 23.5,
+    6: 25,
+    7: 22,
+    8: 24.5,
+    9: 24.5,
+  },
+  heading2SemiBold: {
+    0: 17.5,
+    1: 11,
+    2: 16.5,
+    3: 17,
+    4: 18,
+    5: 16,
+    6: 17.5,
+    7: 15,
+    8: 17,
+    9: 17,
+  },
+  heading4SemiBold: {
+    0: 13,
+    1: 8.5,
+    2: 12.5,
+    3: 12.5,
+    4: 13,
+    5: 12,
+    6: 12.5,
+    7: 11.5,
+    8: 12.5,
+    9: 12.5,
+  },
+} as const satisfies Partial<Record<LumenTypographyTokenName, DigitWidths>>;
+
+type MeasuredTypography = keyof typeof TYPOGRAPHY_WIDTHS;
+
+type SizeTypographyConfig = {
+  integer: MeasuredTypography;
+  decimal: MeasuredTypography;
 };
 
-const DECIMAL_DIGIT_WIDTHS = {
-  0: 17.5,
-  1: 11,
-  2: 16.5,
-  3: 17,
-  4: 18,
-  5: 16,
-  6: 17.5,
-  7: 15,
-  8: 17,
-  9: 17,
+const SIZE_TYPOGRAPHY: Record<AmountDisplaySize, SizeTypographyConfig> = {
+  md: { integer: 'heading1SemiBold', decimal: 'heading2SemiBold' },
+  sm: { integer: 'heading2SemiBold', decimal: 'heading4SemiBold' },
 };
 
-const useStyles = () => {
+const useStyles = (size: AmountDisplaySize) => {
+  const typography = SIZE_TYPOGRAPHY[size];
   return useStyleSheet(
     (t) => ({
       container: {
@@ -61,19 +90,19 @@ const useStyles = () => {
         paddingBottom: t.spacings.s2,
       },
       integerText: {
-        ...t.typographies.heading1SemiBold,
+        ...t.typographies[typography.integer],
         color: t.colors.text.base,
       },
       decimalText: {
-        ...t.typographies.heading2SemiBold,
+        ...t.typographies[typography.decimal],
         color: t.colors.text.muted,
       },
       currencyStartText: {
-        ...t.typographies.heading1SemiBold,
+        ...t.typographies[typography.integer],
         color: t.colors.text.base,
       },
       currencyEndText: {
-        ...t.typographies.heading2SemiBold,
+        ...t.typographies[typography.decimal],
         color: t.colors.text.muted,
       },
       spacingStart: {
@@ -83,7 +112,7 @@ const useStyles = () => {
         marginLeft: t.spacings.s4,
       },
     }),
-    [],
+    [typography],
   );
 };
 
@@ -136,10 +165,8 @@ const useAnimatedDigitStrip = ({
 };
 
 const DigitStrip = memo(
-  ({ value, textStyle, animate, type }: DigitStripProps) => {
-    const targetWidth = (
-      type === 'integer' ? INTEGER_DIGIT_WIDTHS : DECIMAL_DIGIT_WIDTHS
-    )[value];
+  ({ value, textStyle, animate, widths }: DigitStripProps) => {
+    const targetWidth = widths[value];
     const lineHeight = textStyle.lineHeight;
     const width = useSharedValue<number>(targetWidth);
     const { animatedStyle } = useAnimatedDigitStrip({
@@ -176,7 +203,7 @@ const DigitStrip = memo(
 DigitStrip.displayName = 'DigitStrip';
 
 const DigitStripList = memo(
-  ({ items, textStyle, animate, type }: DigitStripListProps) => {
+  ({ items, textStyle, animate, widths }: DigitStripListProps) => {
     return items.map((item, index) => {
       const key = items.length - index;
       if (item.type === 'separator') {
@@ -192,7 +219,7 @@ const DigitStripList = memo(
           value={Number(item.value) as DigitStripProps['value']}
           animate={animate}
           textStyle={textStyle}
-          type={type}
+          widths={widths}
         />
       );
     });
@@ -233,15 +260,16 @@ DigitStripList.displayName = 'DigitStripList';
  * <AmountDisplay value={1234.56} formatter={usdFormatter} hidden={true} />
  * ```
  */
-export const AmountDisplay = ({
+export function AmountDisplay({
   value,
   formatter,
   hidden = false,
   loading = false,
   animate = true,
+  size = 'md',
   ...props
-}: AmountDisplayProps) => {
-  const styles = useStyles();
+}: AmountDisplayProps) {
+  const styles = useStyles(size);
   const { t } = useCommonTranslation();
   const parts = formatter(value);
   const splitDigits = useSplitText(parts);
@@ -250,6 +278,9 @@ export const AmountDisplay = ({
     hidden,
     t('components.amountDisplay.amountHiddenAriaLabel'),
   );
+  const typography = SIZE_TYPOGRAPHY[size];
+  const integerWidths = TYPOGRAPHY_WIDTHS[typography.integer];
+  const decimalWidths = TYPOGRAPHY_WIDTHS[typography.decimal];
 
   return (
     <Box
@@ -281,7 +312,7 @@ export const AmountDisplay = ({
                 items={splitDigits.integerPart}
                 textStyle={styles.integerText}
                 animate={animate}
-                type='integer'
+                widths={integerWidths}
               />
             )}
           </View>
@@ -296,7 +327,7 @@ export const AmountDisplay = ({
                 items={splitDigits.decimalPart}
                 textStyle={styles.decimalText}
                 animate={animate}
-                type='decimal'
+                widths={decimalWidths}
               />
             )}
             {parts.currencyPosition === 'end' && (
@@ -312,4 +343,4 @@ export const AmountDisplay = ({
       </Pulse>
     </Box>
   );
-};
+}

package/src/lib/Components/AmountDisplay/index.ts

@@ -1,2 +1,6 @@
 export { AmountDisplay } from './AmountDisplay';
-export type { AmountDisplayProps, FormattedValue } from './types';
+export type {
+  AmountDisplayProps,
+  AmountDisplaySize,
+  FormattedValue,
+} from './types';

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

@@ -6,13 +6,17 @@ export type { FormattedValue };
 
 export const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;
 
-type IntegerDigit = (typeof DIGITS)[number];
+type Digit = (typeof DIGITS)[number];
+
+export type AmountDisplaySize = 'sm' | 'md';
+
+export type DigitWidths = Record<Digit, number>;
 
 export type DigitStripProps = {
-  value: IntegerDigit;
+  value: Digit;
   animate: boolean;
   textStyle: TextStyle & { lineHeight: number };
-  type: 'integer' | 'decimal';
+  widths: DigitWidths;
 };
 
 export type DigitStripListProps = {
@@ -48,4 +52,9 @@ export type AmountDisplayProps = ViewProps & {
    * @default true
    */
   animate?: boolean;
+  /**
+   * The size variant of the amount display.
+   * @default 'md'
+   */
+  size?: AmountDisplaySize;
 } & Omit<StyledViewProps, 'children'>;

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

@@ -7,7 +7,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Input/AmountInput' of={AmountInputStories} />
 
-# 💰 AmountInput
+# AmountInput
 
 <CustomTabs>
   <Tab label="Overview">
@@ -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: {