@ledgerhq/lumen-ui-rnative 0.1.36 → 0.1.37

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">

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

@@ -8,7 +8,7 @@ import { Box } from '../Utility';
 
 <Meta title='Communication/Avatar' of={AvatarStories} />
 
-# 👤 Avatar
+# Avatar
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Banner/Banner.mdx

@@ -8,7 +8,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Components/Banner' of={BannerStories} />
 
-# 🃏 Banner
+# Banner
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/BottomSheet/BottomSheet.mdx

@@ -8,7 +8,7 @@ import { Box } from '../Utility';
 
 <Meta title="Components/BottomSheet" of={BottomSheetStories} />
 
-# 📋 BottomSheet
+# BottomSheet
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Button/Button.mdx

@@ -8,7 +8,7 @@ import { Box } from '../Utility';
 
 <Meta title='Action/Button' of={ButtonStories} />
 
-# 🔘 Button
+# Button
 
 <CustomTabs>
   <Tab label="Overview ">

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

@@ -196,9 +196,7 @@ export const StatesShowcase: Story = {
       <Card {...args} lx={{ width: 's320' }} disabled>
         <CardHeader>
           <CardLeading>
-            <Box lx={{ opacity: 0.3 }}>
-              <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
-            </Box>
+            <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
             <CardContent>
               <CardContentTitle>Disabled</CardContentTitle>
               <CardContentDescription>Non-interactive</CardContentDescription>

package/src/lib/Components/CardButton/CardButton.mdx

@@ -8,7 +8,7 @@ import { Box } from '../Utility';
 
 <Meta title='Action/CardButton' of={CardButtonStories} />
 
-# 🃏 CardButton
+# CardButton
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Checkbox/Checkbox.mdx

@@ -8,7 +8,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title="Components/Checkbox" of={CheckboxStories} />
 
-# ☑️ Checkbox
+# Checkbox
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Divider/Divider.mdx

@@ -9,7 +9,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Layout/Divider' of={DividerStories} />
 
-# ➖ Divider
+# Divider
 
 <CustomTabs>
   <Tab label="Overview ">

package/src/lib/Components/DotIcon/DotIcon.mdx

@@ -1,13 +1,18 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as DotIconStories from './DotIcon.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
 
 <Meta title='Communication/DotIcon' of={DotIconStories} />
 
 # DotIcon
 
+<CustomTabs>
+  <Tab label="Overview">
+
 ## Introduction
 
 DotIcon positions a small icon indicator at a configurable corner of a child element such as MediaImage or Spot. The dot background uses a semantic color (`success`, `muted`, or `error`) to convey meaning at a glance.
+
 > View in [Figma](https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA/1.-Symbol-Library?node-id=6159-1866).
 
 ## Anatomy
@@ -50,7 +55,94 @@ The dot size is driven by the parent MediaImage or Spot size via the mapping hel
 
 <Canvas of={DotIconStories.SizeShowcase} />
 
+### Disabled
+
+Only set `disabled` on `DotIcon`. The state is propagated to the child via context. Passing it to both stacks the opacity overlay.
+
+<Canvas of={DotIconStories.DisabledShowcase} />
+
 ## Accessibility
 
 - The icon is purely decorative; the child element should carry its own accessibility label.
 - Pair semantic appearances with meaningful icons so the state can be understood without relying on color alone.
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+```tsx
+import { DotIcon, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+import { ArrowDown } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <DotIcon appearance='success' icon={ArrowDown}>
+      <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+    </DotIcon>
+  );
+}
+```
+
+### Pin Placement
+
+Position the dot at any of the four corners of the child:
+
+```tsx
+<DotIcon appearance='success' icon={ArrowDown} pin='top-end'>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotIcon>
+```
+
+### Shapes
+
+Use `shape='square'` to match a square child element:
+
+```tsx
+<DotIcon appearance='muted' icon={ArrowDown} shape='square'>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} shape='square' />
+</DotIcon>
+```
+
+### Appearances
+
+Pick a semantic color via `appearance`:
+
+```tsx
+<DotIcon appearance='success' icon={ArrowDown}>...</DotIcon>
+<DotIcon appearance='muted' icon={ArrowUp}>...</DotIcon>
+<DotIcon appearance='error' icon={Close}>...</DotIcon>
+```
+
+### Sizing
+
+The dot size is driven by the parent's size via the mapping helpers:
+
+```tsx
+import { DotIcon, mediaImageDotIconSizeMap, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+
+<DotIcon
+  appearance='success'
+  icon={ArrowDown}
+  size={mediaImageDotIconSizeMap[48]}
+>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotIcon>;
+```
+
+### Disabled State
+
+Only set `disabled` on `DotIcon`. The state is propagated to the child via context. Passing it to both stacks the opacity overlay.
+
+```tsx
+<DotIcon appearance='success' icon={ArrowDown} disabled>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotIcon>
+```
+
+</Tab>
+</CustomTabs>

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

@@ -113,6 +113,41 @@ export const AppearanceShowcase: Story = {
   ),
 };
 
+export const DisabledShowcase: Story = {
+  args: { appearance: 'success', icon: ArrowDown },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's32' }}>
+      <DotIcon
+        appearance='success'
+        icon={ArrowDown}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+        disabled
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='muted'
+        icon={ArrowUp}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+        disabled
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='error'
+        icon={Close}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+        disabled
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+    </Box>
+  ),
+};
+
 export const SizeShowcase: Story = {
   args: { appearance: 'muted', icon: Link },
   render: () => (

package/src/lib/Components/DotIcon/DotIcon.tsx

@@ -1,4 +1,7 @@
-import { StyleSheet } from 'react-native';
+import {
+  DisabledProvider,
+  useDisabledContext,
+} from '@ledgerhq/lumen-utils-shared';
 import { useStyleSheet } from '../../../styles';
 import type { IconSize } from '../Icon';
 import { Box } from '../Utility';
@@ -63,11 +66,13 @@ const useStyles = ({
   shape,
   pin,
   appearance,
+  disabled,
 }: {
   size: DotIconSize;
   shape: 'square' | 'circle';
   pin: DotIconPin;
   appearance: DotIconAppearance;
+  disabled: boolean;
 }) => {
   return useStyleSheet(
     (t) => {
@@ -77,6 +82,10 @@ const useStyles = ({
       const pinOffset = getPinOffset(pin);
 
       return {
+        root: {
+          position: 'relative',
+          ...(disabled && { opacity: 0.3 }),
+        },
         dot: {
           position: 'absolute',
           zIndex: 10,
@@ -96,7 +105,7 @@ const useStyles = ({
         },
       };
     },
-    [size, shape, pin, appearance],
+    [size, shape, pin, appearance, disabled],
   );
 };
 
@@ -119,27 +128,35 @@ export const DotIcon = ({
   pin = 'bottom-end',
   size = 20,
   shape = 'circle',
+  disabled: disabledProp = false,
   lx = {},
   style,
   ref,
   ...rest
 }: DotIconProps) => {
-  const styles = useStyles({ size, shape, pin, appearance });
+  const disabled = useDisabledContext({
+    consumerName: 'DotIcon',
+    mergeWith: { disabled: disabledProp },
+  });
+  const styles = useStyles({ size, shape, pin, appearance, disabled });
 
   return (
-    <Box
-      ref={ref}
-      lx={lx}
-      style={StyleSheet.flatten([{ position: 'relative' }, style])}
-      {...rest}
-    >
-      <Box style={{ alignSelf: 'flex-start', position: 'relative' }}>
-        {children}
-        <Box testID='dot-icon-dot' style={styles.dot}>
-          <Icon size={dotIconSizeMap[size]} style={styles.icon} />
+    <DisabledProvider value={{ disabled: false }}>
+      <Box
+        ref={ref}
+        lx={lx}
+        style={[styles.root, style]}
+        accessibilityState={{ disabled }}
+        {...rest}
+      >
+        <Box style={{ alignSelf: 'flex-start', position: 'relative' }}>
+          {children}
+          <Box testID='dot-icon-dot' style={styles.dot}>
+            <Icon size={dotIconSizeMap[size]} style={styles.icon} />
+          </Box>
         </Box>
       </Box>
-    </Box>
+    </DisabledProvider>
   );
 };
 

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

@@ -37,6 +37,12 @@ export type DotIconProps = {
    * @default 'circle'
    */
   shape?: 'square' | 'circle';
+  /**
+   * Shows a disabled appearance.
+   * @optional
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * The wrapped component (e.g. MediaImage or Spot).
    */