@ledgerhq/lumen-ui-rnative 0.1.1 → 0.1.3

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

@@ -0,0 +1,58 @@
+import type { StoryObj } from '@storybook/react-native-web-vite';
+import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
+declare const meta: {
+    title: string;
+    component: typeof SegmentedControl;
+    subcomponents: {
+        SegmentedControlButton: typeof SegmentedControlButton;
+    };
+    parameters: {
+        layout: string;
+        backgrounds: {
+            default: string;
+        };
+    };
+    argTypes: {
+        onSelectedChange: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        accessibilityLabel: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        selectedValue: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            control: false;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const WithIcons: Story;
+//# sourceMappingURL=SegmentedControl.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/SegmentedControl.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE9E,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyC+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAqBlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA0BvB,CAAC"}

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Coins, Nft, TransferHorizontal, Settings } from '../../Symbols';
+import { Box } from '../Utility';
+import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
+const meta = {
+    title: 'Navigation/SegmentedControl',
+    component: SegmentedControl,
+    subcomponents: {
+        SegmentedControlButton,
+    },
+    parameters: {
+        layout: 'centered',
+        backgrounds: { default: 'light' },
+    },
+    argTypes: {
+        onSelectedChange: {
+            action: 'change',
+            description: 'Callback when the selected value changes',
+            table: {
+                type: { summary: '(value: string) => void' },
+            },
+        },
+        accessibilityLabel: {
+            control: 'text',
+            description: 'Accessible label for the control',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        selectedValue: {
+            control: 'text',
+            description: 'The value of the currently selected segment (drives the sliding pill)',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        children: {
+            control: false,
+            description: 'SegmentedControlButton elements',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
+    },
+};
+export default meta;
+export const Base = {
+    args: {},
+    render: () => {
+        const [state, setState] = useState('send');
+        return (_jsx(Box, { lx: { width: 's256' }, children: _jsxs(SegmentedControl, { selectedValue: state, onSelectedChange: setState, accessibilityLabel: 'Transaction type', children: [_jsx(SegmentedControlButton, { value: 'send', children: "Send" }), _jsx(SegmentedControlButton, { value: 'receive', children: "Receive" }), _jsx(SegmentedControlButton, { value: 'buy', children: "Buy" })] }) }));
+    },
+};
+export const WithIcons = {
+    args: {},
+    render: () => {
+        const [state, setState] = useState('tokens');
+        return (_jsxs(SegmentedControl, { selectedValue: state, onSelectedChange: setState, accessibilityLabel: 'Asset section', children: [_jsx(SegmentedControlButton, { value: 'tokens', icon: Coins, children: "Tokens" }), _jsx(SegmentedControlButton, { value: 'nfts', icon: Nft, children: "NFTs" }), _jsx(SegmentedControlButton, { value: 'activity', icon: TransferHorizontal, children: "Activity" }), _jsx(SegmentedControlButton, { value: 'settings', icon: Settings, children: "Settings" })] }));
+    },
+};

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

@@ -0,0 +1,11 @@
+export type SegmentedControlContextValue = {
+    selectedValue: string;
+    onSelectedChange: (value: string) => void;
+};
+declare const SegmentedControlContextProvider: import("react").FC<{
+    children: import("react").ReactNode;
+    value: SegmentedControlContextValue;
+}>;
+export declare const useSegmentedControlContext: () => SegmentedControlContextValue;
+export { SegmentedControlContextProvider };
+//# sourceMappingURL=SegmentedControlContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/SegmentedControlContext.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,QAAA,MAAO,+BAA+B;;;EAC+B,CAAC;AAEtE,eAAO,MAAM,0BAA0B,oCAInC,CAAC;AAEL,OAAO,EAAE,+BAA+B,EAAE,CAAC"}

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

@@ -0,0 +1,7 @@
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+const [SegmentedControlContextProvider, _useSegmentedControlSafeContext] = createSafeContext('SegmentedControl');
+export const useSegmentedControlContext = () => _useSegmentedControlSafeContext({
+    consumerName: 'SegmentedControlButton',
+    contextRequired: true,
+});
+export { SegmentedControlContextProvider };

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

@@ -0,0 +1,3 @@
+export * from './SegmentedControl';
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,mBAAmB,SAAS,CAAC"}

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

@@ -0,0 +1 @@
+export * from './SegmentedControl';

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

@@ -0,0 +1,45 @@
+import { ComponentType, ReactNode } from 'react';
+import { StyledPressableProps } from '../../../styles';
+import { IconSize } from '../Icon';
+import { BoxProps } from '../Utility';
+export type SegmentedControlProps = {
+    /**
+     * The value of the currently selected segment (drives the sliding pill).
+     */
+    selectedValue: string;
+    /**
+     * Callback when the selected segment value changes.
+     */
+    onSelectedChange: (value: string) => void;
+    /**
+     * Accessible label for the control (e.g. "File view").
+     */
+    accessibilityLabel?: string;
+    /**
+     * Segment buttons (SegmentedControlButton). Can be wrapped (e.g. in Tooltip).
+     */
+    children: ReactNode;
+} & Omit<BoxProps, 'children'>;
+type IconComponent = ComponentType<{
+    size?: IconSize;
+}>;
+export type SegmentedControlButtonProps = {
+    /**
+     * Value for this segment (must be unique among siblings).
+     */
+    value: string;
+    /**
+     * Button label (e.g. "Preview", "Raw").
+     */
+    children: ReactNode;
+    /**
+     * Optional icon shown to the left of the label (from Symbols).
+     */
+    icon?: IconComponent;
+    /**
+     * Optional callback when the button is pressed (in addition to onSelectedChange on the parent).
+     */
+    onPress?: () => void;
+} & Omit<StyledPressableProps, 'children'>;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAE/B,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1 @@
+export {};

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

@@ -172,6 +172,7 @@ const useStyles = () => useStyleSheet((t) => ({
     },
     pill: {
         position: 'absolute',
+        pointerEvents: 'none',
         top: PILL_INSET,
         left: PILL_INSET,
         borderRadius: t.borderRadius.full,

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

@@ -4,7 +4,6 @@ import { IconSize } from '../Icon';
 import { BoxProps } from '../Utility';
 type IconComponent = ComponentType<{
     size?: IconSize;
-    className?: string;
 }>;
 export type TabBarItemProps = {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC"}

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

@@ -17,6 +17,7 @@ export * from './ListItem';
 export * from './NavBar';
 export * from './PageIndicator';
 export * from './SearchInput';
+export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';

package/dist/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,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,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,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,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,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,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,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}

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

@@ -17,6 +17,7 @@ export * from './ListItem';
 export * from './NavBar';
 export * from './PageIndicator';
 export * from './SearchInput';
+export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';

package/dist/src/styles/theme/resolvers/resolveFontWeights.js

@@ -11,7 +11,7 @@ export const FONT_WEIGHT_SUFFIX_MAP = {
     '900': 'Black',
 };
 export const resolveFontWeights = (typographies) => {
-    if (RuntimeConstants.isAndroid || RuntimeConstants.isBrowser) {
+    if (RuntimeConstants.isIOS || RuntimeConstants.isBrowser) {
         return typographies;
     }
     return Object.fromEntries(Object.entries(typographies).map(([key, value]) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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/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/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/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/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/src/i18n/locales/ja.json

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

package/src/i18n/locales/ko.json

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

package/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/src/i18n/locales/ru.json

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

package/src/i18n/locales/th.json

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

package/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/src/i18n/locales/zh.json

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

package/src/lib/Animations/constants.ts

@@ -0,0 +1,31 @@
+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,
+} as const;
+
+export type DurationKey = keyof typeof durations;
+
+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,
+} as const;

package/src/lib/Animations/index.ts

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

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

@@ -45,9 +45,15 @@ The `hidden` prop allows you to toggle amount visibility for privacy-sensitive a
 
 <Canvas of={AmountDisplayStories.WithHideButton} />
 
+### Animation
+
+The `animate` prop controls whether the odometer-style animation plays when the value changes. When set to `true` (the default), digits smoothly transition between values. Set to `false` to display values instantly without animation.
+
+<Canvas of={AmountDisplayStories.AnimationShowcase} />
+
 ### Loading State
 
-The `loading` prop displays a pulse animation around the amount to indicate that data is being fetched or updated. When set to `true`, the component applies a subtle pulsing effect while maintaining the displayed value. This is useful for showing users that the amount is being refreshed in the background.
+The `loading` prop displays a pulse animation to indicate that the amount is being fetched or updated. When set to `true`, the component applies a subtle pulsing effect while maintaining the displayed value.
 
 <Canvas of={AmountDisplayStories.Loading} />
 

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { Eye, EyeCross } from '../../Symbols';
 import { IconButton } from '../IconButton';
@@ -48,6 +48,7 @@ const meta: Meta<typeof AmountDisplay> = {
   args: {
     formatter: eurFormatter,
     hidden: false,
+    animate: true,
   },
   argTypes: {
     formatter: {
@@ -72,7 +73,11 @@ const meta: Meta<typeof AmountDisplay> = {
       control: {
         type: 'boolean',
       },
-      description: 'When true, displays bullet points instead of the amount',
+    },
+    animate: {
+      control: {
+        type: 'boolean',
+      },
     },
   },
   parameters: {
@@ -127,6 +132,28 @@ export const WithHideButton: Story = {
   },
 };
 
+export const AnimationShowcase: Story = {
+  args: {
+    value: 1234.56,
+  },
+  render: (props) => {
+    const [currentValue, setCurrentValue] = useState<number>(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 <AmountDisplay {...props} value={currentValue} />;
+  },
+};
+
 export const Loading: Story = {
   render: (props) => {
     return (