@ledgerhq/lumen-ui-rnative 0.1.2 → 0.1.3

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -27,7 +27,7 @@
     "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.1.0",
+    "@ledgerhq/lumen-utils-shared": "0.1.1",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.1.0",
+    "@ledgerhq/lumen-design-core": "0.1.1",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^3.0.0",

package/dist/src/i18n/locales/de.json

@@ -3,6 +3,9 @@
         "addressInput": {
             "qrCodeAriaLabel": "QR-Code scannen"
         },
+        "amountDisplay": {
+            "amountHiddenAriaLabel": "Betrag ausgeblendet"
+        },
         "avatar": {
             "defaultAlt": "Benutzer-Avatar",
             "notificationAriaLabel": "Hat Benachrichtigung"

package/dist/src/i18n/locales/en.json

@@ -3,6 +3,9 @@
         "addressInput": {
             "qrCodeAriaLabel": "Scan QR code"
         },
+        "amountDisplay": {
+            "amountHiddenAriaLabel": "Amount hidden"
+        },
         "avatar": {
             "defaultAlt": "User avatar",
             "notificationAriaLabel": "Has notification"

package/dist/src/i18n/locales/es.json

@@ -3,6 +3,9 @@
         "addressInput": {
             "qrCodeAriaLabel": "Escanear código QR"
         },
+        "amountDisplay": {
+            "amountHiddenAriaLabel": "Importe oculto"
+        },
         "avatar": {
             "defaultAlt": "Avatar de usuario",
             "notificationAriaLabel": "Tiene notificación"

package/dist/src/i18n/locales/fr.json

@@ -3,6 +3,9 @@
         "addressInput": {
             "qrCodeAriaLabel": "Scanner le code QR"
         },
+        "amountDisplay": {
+            "amountHiddenAriaLabel": "Montant masqué"
+        },
         "avatar": {
             "defaultAlt": "Avatar de l'utilisateur",
             "notificationAriaLabel": "A une notification"

package/dist/src/i18n/locales/ja.json

@@ -3,6 +3,9 @@
         "addressInput": {
             "qrCodeAriaLabel": "QRコードをスキャン"
         },
+        "amountDisplay": {
+            "amountHiddenAriaLabel": "金額非表示"
+        },
         "avatar": {
             "defaultAlt": "ユーザーアバター",
             "notificationAriaLabel": "通知あり"

package/dist/src/i18n/locales/ko.json

@@ -3,6 +3,9 @@
         "addressInput": {
             "qrCodeAriaLabel": "QR 코드 스캔"
         },
+        "amountDisplay": {
+            "amountHiddenAriaLabel": "금액 숨김"
+        },
         "avatar": {
             "defaultAlt": "사용자 아바타",
             "notificationAriaLabel": "알림 있음"

package/dist/src/i18n/locales/pt.json

@@ -3,6 +3,9 @@
         "addressInput": {
             "qrCodeAriaLabel": "Escanear QR Code"
         },
+        "amountDisplay": {
+            "amountHiddenAriaLabel": "Valor oculto"
+        },
         "avatar": {
             "defaultAlt": "Avatar do usuário",
             "notificationAriaLabel": "Tem notificação"

package/dist/src/i18n/locales/ru.json

@@ -3,6 +3,9 @@
         "addressInput": {
             "qrCodeAriaLabel": "Сканировать QR-код"
         },
+        "amountDisplay": {
+            "amountHiddenAriaLabel": "Сумма скрыта"
+        },
         "avatar": {
             "defaultAlt": "Аватар пользователя",
             "notificationAriaLabel": "Есть уведомление"

package/dist/src/i18n/locales/th.json

@@ -3,6 +3,9 @@
         "addressInput": {
             "qrCodeAriaLabel": "สแกน QR Code"
         },
+        "amountDisplay": {
+            "amountHiddenAriaLabel": "ยอดเงินถูกซ่อน"
+        },
         "avatar": {
             "defaultAlt": "อวาตาร์ผู้ใช้",
             "notificationAriaLabel": "มีการแจ้งเตือน"

package/dist/src/i18n/locales/tr.json

@@ -3,6 +3,9 @@
         "addressInput": {
             "qrCodeAriaLabel": "Karekodu okut"
         },
+        "amountDisplay": {
+            "amountHiddenAriaLabel": "Tutar gizlendi"
+        },
         "avatar": {
             "defaultAlt": "Kullanıcı avatarı",
             "notificationAriaLabel": "Bildirim var"

package/dist/src/i18n/locales/zh.json

@@ -3,6 +3,9 @@
         "addressInput": {
             "qrCodeAriaLabel": "扫描二维码"
         },
+        "amountDisplay": {
+            "amountHiddenAriaLabel": "金额已隐藏"
+        },
         "avatar": {
             "defaultAlt": "用户头像",
             "notificationAriaLabel": "有通知"

package/dist/src/lib/Animations/constants.d.ts

@@ -0,0 +1,28 @@
+export declare const durations: {
+    readonly '0': 0;
+    readonly '75': 75;
+    readonly '100': 100;
+    readonly '120': 120;
+    readonly '150': 150;
+    readonly '200': 200;
+    readonly '250': 250;
+    readonly '300': 300;
+    readonly '500': 500;
+    readonly '700': 700;
+    readonly '1000': 1000;
+    readonly '2000': 2000;
+    readonly '3000': 3000;
+};
+export type DurationKey = keyof typeof durations;
+export declare const easingCurves: {
+    readonly bezier: {
+        readonly default: import("react-native-reanimated").EasingFunctionFactory;
+        readonly emphasize: import("react-native-reanimated").EasingFunctionFactory;
+        readonly out: import("react-native-reanimated").EasingFunctionFactory;
+        readonly in: import("react-native-reanimated").EasingFunctionFactory;
+    };
+    readonly quad: (t: number) => number;
+    readonly ease: (t: number) => number;
+    readonly linear: (t: number) => number;
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/src/lib/Animations/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/lib/Animations/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAcZ,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,SAAS,CAAC;AAEjD,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC"}

package/dist/src/lib/Animations/constants.js

@@ -0,0 +1,27 @@
+import { Easing } from 'react-native-reanimated';
+export const durations = {
+    '0': 0,
+    '75': 75,
+    '100': 100,
+    '120': 120,
+    '150': 150,
+    '200': 200,
+    '250': 250,
+    '300': 300,
+    '500': 500,
+    '700': 700,
+    '1000': 1000,
+    '2000': 2000,
+    '3000': 3000,
+};
+export const easingCurves = {
+    bezier: {
+        default: Easing.bezier(0.4, 0, 0.2, 1),
+        emphasize: Easing.bezier(0.05, 0.7, 0.1, 1),
+        out: Easing.bezier(0, 0, 0.2, 1),
+        in: Easing.bezier(0.4, 0, 1, 1),
+    },
+    quad: Easing.quad,
+    ease: Easing.ease,
+    linear: Easing.linear,
+};

package/dist/src/lib/Animations/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Spin';
 export * from './Pulse';
 export * from './types';
+export * from './constants';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/lib/Animations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Animations/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Animations/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/dist/src/lib/Animations/index.js

@@ -1,3 +1,4 @@
 export * from './Spin';
 export * from './Pulse';
 export * from './types';
+export * from './constants';

package/dist/src/lib/Components/AmountDisplay/AmountDisplay.d.ts

@@ -33,7 +33,7 @@ import { AmountDisplayProps } from './types';
  * ```
  */
 export declare const AmountDisplay: {
-    ({ value, formatter, hidden, loading, ...props }: AmountDisplayProps): import("react/jsx-runtime").JSX.Element;
+    ({ value, formatter, hidden, loading, animate, ...props }: AmountDisplayProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=AmountDisplay.d.ts.map

package/dist/src/lib/Components/AmountDisplay/AmountDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmountDisplay.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountDisplay/AmountDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAoC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,aAAa;sDAMvB,kBAAkB;;CA+BpB,CAAC"}
+{"version":3,"file":"AmountDisplay.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountDisplay/AmountDisplay.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,kBAAkB,EAInB,MAAM,SAAS,CAAC;AA6IjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,aAAa;+DAOvB,kBAAkB;;CA8DpB,CAAC"}

package/dist/src/lib/Components/AmountDisplay/AmountDisplay.js

@@ -1,13 +1,53 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View, Text } from 'react-native';
+import { useSplitText, buildAriaLabel } from '@ledgerhq/lumen-utils-shared';
+import { memo, useEffect } from 'react';
+import { Text, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
 import { Pulse } from '../../Animations/Pulse';
 import { Box } from '../Utility';
+import { DIGITS, } from './types';
+const INTEGER_DIGIT_WIDTHS = {
+    0: 24.5,
+    1: 15,
+    2: 23,
+    3: 24,
+    4: 25,
+    5: 23,
+    6: 24.5,
+    7: 21.5,
+    8: 24,
+    9: 24,
+};
+const DECIMAL_DIGIT_WIDTHS = {
+    0: 17,
+    1: 10.5,
+    2: 16,
+    3: 16.5,
+    4: 17.2,
+    5: 15.7,
+    6: 17,
+    7: 14.7,
+    8: 16.5,
+    9: 16.5,
+};
+const TIMING_CONFIG = {
+    duration: 600,
+    easing: Easing.inOut(Easing.ease),
+};
 const useStyles = () => {
     return useStyleSheet((t) => ({
         container: {
             flexDirection: 'row',
-            alignItems: 'baseline',
+            alignItems: 'flex-end',
+        },
+        integerPartContainer: {
+            flexDirection: 'row',
+        },
+        decimalPartContainer: {
+            flexDirection: 'row',
+            paddingBottom: t.spacings.s2,
         },
         integerText: {
             ...t.typographies.heading1SemiBold,
@@ -33,6 +73,35 @@ const useStyles = () => {
         },
     }), []);
 };
+const DigitStrip = memo(({ value, textStyle, animate, type }) => {
+    const targetWidth = (type === 'integer' ? INTEGER_DIGIT_WIDTHS : DECIMAL_DIGIT_WIDTHS)[value];
+    const lineHeight = textStyle.lineHeight;
+    const translateY = useSharedValue(-value * lineHeight);
+    const width = useSharedValue(targetWidth);
+    useEffect(() => {
+        if (animate) {
+            translateY.value = withTiming(-value * lineHeight, TIMING_CONFIG);
+            width.value = withTiming(targetWidth, TIMING_CONFIG);
+        }
+        else {
+            translateY.value = -value * lineHeight;
+            width.value = targetWidth;
+        }
+    }, [value, lineHeight, translateY, animate, width, targetWidth]);
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value }],
+    }), [translateY]);
+    return (_jsx(Animated.View, { style: { height: lineHeight, overflow: 'hidden', width: width }, accessibilityValue: { text: String(value) }, children: _jsx(Animated.View, { style: [animatedStyle, { alignItems: 'center' }], children: DIGITS.map((d) => (_jsx(Text, { style: textStyle, children: d }, d))) }) }));
+});
+const DigitStripList = memo(({ items, textStyle, animate, type }) => {
+    return items.map((item, index) => {
+        const key = items.length - index;
+        if (item.type === 'separator') {
+            return (_jsx(Text, { style: textStyle, children: item.value }, key));
+        }
+        return (_jsx(DigitStrip, { value: Number(item.value), animate: animate, textStyle: textStyle, type: type }, key));
+    });
+});
 /**
  * AmountDisplay - Renders formatted monetary amounts with flexible currency positioning and decimal formatting.
  *
@@ -66,10 +135,12 @@ const useStyles = () => {
  * <AmountDisplay value={1234.56} formatter={usdFormatter} hidden={true} />
  * ```
  */
-export const AmountDisplay = ({ value, formatter, hidden = false, loading = false, ...props }) => {
+export const AmountDisplay = ({ value, formatter, hidden = false, loading = false, animate = true, ...props }) => {
     const styles = useStyles();
+    const { t } = useCommonTranslation();
     const parts = formatter(value);
-    return (_jsx(Box, { ...props, children: _jsx(Pulse, { animate: loading, children: _jsxs(View, { style: styles.container, children: [(parts.currencyPosition === undefined ||
-                        parts.currencyPosition === 'start') && (_jsx(Text, { style: [styles.currencyStartText, styles.spacingStart], children: parts.currencyText })), _jsx(Text, { style: styles.integerText, children: hidden ? '••••' : parts.integerPart }), parts.decimalPart && !hidden && (_jsx(Text, { style: styles.decimalText, children: (parts.decimalSeparator || '.') + parts.decimalPart })), parts.currencyPosition === 'end' && (_jsx(Text, { style: [styles.currencyEndText, styles.spacingEnd], children: parts.currencyText }))] }) }) }));
+    const splitDigits = useSplitText(parts);
+    const ariaLabel = buildAriaLabel(parts, hidden, t('components.amountDisplay.amountHiddenAriaLabel'));
+    return (_jsx(Box, { accessibilityLabel: ariaLabel, accessibilityState: { busy: loading }, ...props, children: _jsx(Pulse, { animate: loading, children: _jsxs(View, { style: styles.container, accessibilityElementsHidden: true, importantForAccessibility: 'no-hide-descendants', children: [_jsxs(View, { style: styles.integerPartContainer, children: [parts.currencyPosition === 'start' && (_jsx(Text, { style: [styles.currencyStartText, styles.spacingStart], children: parts.currencyText })), hidden ? (_jsx(Text, { style: styles.integerText, children: "\u2022\u2022\u2022\u2022" })) : (_jsx(DigitStripList, { items: splitDigits.integerPart, textStyle: styles.integerText, animate: animate, type: 'integer' }))] }), _jsxs(View, { style: styles.decimalPartContainer, children: [!hidden && parts.decimalPart && (_jsx(Text, { style: styles.decimalText, children: parts.decimalSeparator })), parts.decimalPart && !hidden && (_jsx(DigitStripList, { items: splitDigits.decimalPart, textStyle: styles.decimalText, animate: animate, type: 'decimal' })), parts.currencyPosition === 'end' && (_jsx(Text, { style: [styles.currencyEndText, styles.spacingEnd], children: parts.currencyText }))] })] }) }) }));
 };
 AmountDisplay.displayName = 'AmountDisplay';

package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.d.ts

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof AmountDisplay>;
 export declare const Base: Story;
 export declare const WithHideButton: Story;
+export declare const AnimationShowcase: Story;
 export declare const Loading: Story;
 //# sourceMappingURL=AmountDisplay.stories.d.ts.map

package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmountDisplay.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountDisplay/AmountDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAKvE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAuChD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CA4CpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C,eAAO,MAAM,IAAI,EAAE,KAWlB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqB5B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}
+{"version":3,"file":"AmountDisplay.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountDisplay/AmountDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAKvE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAuChD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAiDpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C,eAAO,MAAM,IAAI,EAAE,KAWlB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqB5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}

package/dist/src/lib/Components/AmountDisplay/AmountDisplay.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { Eye, EyeCross } from '../../Symbols';
 import { IconButton } from '../IconButton';
@@ -40,6 +40,7 @@ const meta = {
     args: {
         formatter: eurFormatter,
         hidden: false,
+        animate: true,
     },
     argTypes: {
         formatter: {
@@ -63,7 +64,11 @@ const meta = {
             control: {
                 type: 'boolean',
             },
-            description: 'When true, displays bullet points instead of the amount',
+        },
+        animate: {
+            control: {
+                type: 'boolean',
+            },
         },
     },
     parameters: {
@@ -97,6 +102,24 @@ export const WithHideButton = {
         return (_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx(AmountDisplay, { formatter: props.formatter, value: 1234.56, hidden: hidden }), _jsx(IconButton, { appearance: 'transparent', size: 'sm', icon: hidden ? EyeCross : Eye, accessibilityLabel: hidden ? 'Show amount' : 'Hide amount', onPress: () => setHidden((v) => !v) })] }));
     },
 };
+export const AnimationShowcase = {
+    args: {
+        value: 1234.56,
+    },
+    render: (props) => {
+        const [currentValue, setCurrentValue] = useState(props.value);
+        useEffect(() => {
+            const interval = setInterval(() => {
+                setCurrentValue((prev) => {
+                    const delta = prev * (Math.random() * 0.02 - 0.01);
+                    return Math.round((prev + delta) * 100) / 100;
+                });
+            }, 2000);
+            return () => clearInterval(interval);
+        }, []);
+        return _jsx(AmountDisplay, { ...props, value: currentValue });
+    },
+};
 export const Loading = {
     render: (props) => {
         return (_jsx(AmountDisplay, { formatter: props.formatter, value: 1234.56, loading: true }));

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

@@ -1,30 +1,20 @@
-import { ViewProps } from 'react-native';
+import type { FormattedValue, SplitChar } from '@ledgerhq/lumen-utils-shared';
+import { ViewProps, TextStyle } from 'react-native';
 import { StyledViewProps } from '../../../styles';
-export type FormattedValue = {
-    /**
-     * The whole number portion of the amount (e.g., "1234" from 1234.56)
-     */
-    integerPart: string;
-    /**
-     * The fractional portion of the amount without the separator (e.g., "56" from 1234.56)
-     * @optional
-     */
-    decimalPart?: string;
-    /**
-     * The currency text or symbol (e.g., "$", "USD", "€", "BTC")
-     */
-    currencyText: string;
-    /**
-     * The character which separates integer and fractional parts.
-     */
-    decimalSeparator: '.' | ',';
-    /**
-     * Position of the currency text relative to the amount.
-     * @optional
-     * @default 'start'
-     */
-    currencyPosition?: 'start' | 'end';
+export type { FormattedValue };
+export declare const DIGITS: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+type IntegerDigit = (typeof DIGITS)[number];
+export type DigitStripProps = {
+    value: IntegerDigit;
+    animate: boolean;
+    textStyle: TextStyle & {
+        lineHeight: number;
+    };
+    type: 'integer' | 'decimal';
 };
+export type DigitStripListProps = {
+    items: SplitChar[];
+} & Omit<DigitStripProps, 'value'>;
 /**
  * Props for the AmountDisplay component.
  */
@@ -49,5 +39,10 @@ export type AmountDisplayProps = ViewProps & {
      * @default false
      */
     loading?: boolean;
+    /**
+     * Whether the odometer animation should play on value change or not
+     * @default true
+     */
+    animate?: boolean;
 } & Omit<StyledViewProps, 'children'>;
 //# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/AmountDisplay/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountDisplay/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,gBAAgB,EAAE,GAAG,GAAG,GAAG,CAAC;IAC5B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACpC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG;IAC3C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,CAAC;IAC7C;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AmountDisplay/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,eAAO,MAAM,MAAM,yCAA0C,CAAC;AAE9D,KAAK,YAAY,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,GAAG;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAEnC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG;IAC3C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,CAAC;IAC7C;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

package/dist/src/lib/Components/AmountDisplay/types.js

@@ -1 +1 @@
-export {};
+export const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

package/dist/src/lib/Components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,10 @@
+import type { SegmentedControlButtonProps, SegmentedControlProps } from './types';
+export declare function SegmentedControlButton({ value, children, icon: Icon, onPress, ...props }: SegmentedControlButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SegmentedControlButton {
+    var displayName: string;
+}
+export declare function SegmentedControl({ selectedValue, onSelectedChange, accessibilityLabel, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SegmentedControl {
+    var displayName: string;
+}
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/src/lib/Components/SegmentedControl/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAIjB,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EACP,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAkC7B;yBAxCe,sBAAsB;;;AA4EtC,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAwEvB;yBA9Ee,gBAAgB"}

package/dist/src/lib/Components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef } from 'react';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useStyleSheet } from '../../../styles';
+import { durations, easingCurves } from '../../Animations/constants';
+import { Box, Pressable, Text } from '../Utility';
+import { SegmentedControlContextProvider, useSegmentedControlContext, } from './SegmentedControlContext';
+const ICON_SIZE = 16;
+export function SegmentedControlButton({ value, children, icon: Icon, onPress, ...props }) {
+    const styles = useButtonStyles();
+    const { selectedValue, onSelectedChange } = useSegmentedControlContext();
+    const selected = selectedValue === value;
+    function handlePress() {
+        onSelectedChange(value);
+        onPress?.();
+    }
+    return (_jsx(Pressable, { onPress: handlePress, accessibilityState: { selected }, style: styles.button, ...props, children: _jsxs(Box, { style: styles.content, children: [Icon && (_jsx(Box, { style: styles.iconWrap, children: _jsx(Icon, { size: ICON_SIZE }) })), _jsx(Text, { typography: selected ? 'body2SemiBold' : 'body2', lx: { color: 'base' }, style: styles.label, children: children })] }) }));
+}
+SegmentedControlButton.displayName = 'SegmentedControlButton';
+function useButtonStyles() {
+    return useStyleSheet((t) => ({
+        button: {
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingHorizontal: t.spacings.s16,
+            paddingVertical: t.spacings.s8,
+            borderRadius: t.borderRadius.full,
+            zIndex: 1,
+        },
+        content: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: t.spacings.s8,
+        },
+        label: {
+            textAlign: 'center',
+            includeFontPadding: false,
+        },
+        iconWrap: {
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+    }), []);
+}
+export function SegmentedControl({ selectedValue, onSelectedChange, accessibilityLabel, children, ...props }) {
+    const styles = useRootStyles();
+    const pillTranslateX = useSharedValue(0);
+    const pillWidth = useSharedValue(0);
+    const pillHeight = useSharedValue(0);
+    const hasLayoutRef = useRef(false);
+    const getSelectedIndex = useCallback(() => {
+        return React.Children.toArray(children).findIndex((child) => {
+            if (React.isValidElement(child) && child.props != null) {
+                return child.props.value === selectedValue;
+            }
+            return false;
+        });
+    }, [selectedValue, children]);
+    function onLayout(e) {
+        const { width, height } = e.nativeEvent.layout;
+        const count = React.Children.count(children);
+        const slotWidth = count > 0 ? width / count : 0;
+        pillWidth.value = slotWidth;
+        pillHeight.value = height;
+        if (!hasLayoutRef.current) {
+            hasLayoutRef.current = true;
+            const index = getSelectedIndex();
+            if (index >= 0) {
+                pillTranslateX.value = index * slotWidth;
+            }
+        }
+    }
+    useEffect(() => {
+        if (!hasLayoutRef.current)
+            return;
+        const index = getSelectedIndex();
+        if (index >= 0 && pillWidth.value > 0) {
+            pillTranslateX.value = withTiming(index * pillWidth.value, {
+                duration: durations['250'],
+                easing: easingCurves.bezier.default,
+            });
+        }
+    }, [pillWidth, pillTranslateX, getSelectedIndex]);
+    const animatedPillStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: pillTranslateX.value }],
+        width: pillWidth.value,
+        height: pillHeight.value,
+    }), [pillTranslateX, pillWidth, pillHeight]);
+    return (_jsx(SegmentedControlContextProvider, { value: { selectedValue, onSelectedChange }, children: _jsxs(Box, { accessibilityRole: 'radiogroup', accessibilityLabel: accessibilityLabel, onLayout: onLayout, style: styles.container, ...props, children: [children, _jsx(Animated.View, { style: [styles.pill, animatedPillStyle], pointerEvents: 'none' })] }) }));
+}
+SegmentedControl.displayName = 'SegmentedControl';
+function useRootStyles() {
+    return useStyleSheet((t) => ({
+        container: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            position: 'relative',
+            width: '100%',
+            borderRadius: t.borderRadius.full,
+            backgroundColor: t.colors.bg.baseTransparent,
+        },
+        pill: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            borderRadius: t.borderRadius.sm,
+            backgroundColor: t.colors.bg.muted,
+            zIndex: 0,
+        },
+    }), []);
+}