@ledgerhq/lumen-ui-rnative 0.1.2 → 0.1.4

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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/TabBar.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEvD,eAAO,MAAM,cAAc,KAAK,CAAC;AAGjC;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,2CAgGjB;yBAvGe,UAAU;;;AA2G1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAsFb"}
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/TabBar.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEvD,eAAO,MAAM,cAAc,KAAK,CAAC;AAGjC;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,2CAgGjB;yBAvGe,UAAU;;;AA2G1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CA0Fb"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BlurView } from '@sbaiahmed1/react-native-blur';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { Platform, StyleSheet, Text, View, } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withSequence, withTiming, } from 'react-native-reanimated';
 import { useStyleSheet, useTheme } from '../../../styles';
 import { Placeholder } from '../../Symbols';
@@ -127,9 +127,9 @@ export function TabBar({ active, onTabPress, children, ...props }) {
         width: itemWidth.value,
         height: itemHeight.value - PILL_INSET * 2,
     }), [pillProgress, itemWidth, itemHeight]);
-    return (_jsx(TabBarContextProvider, { value: { active, onTabPress: handleTabPress }, children: _jsxs(Box, { style: styles.container, onLayout: onLayout, accessibilityRole: 'tablist', ...props, children: [children, _jsx(BlurView, { style: styles.blur, blurAmount: theme.blur.lg, blurType: colorScheme === 'dark' ? 'dark' : 'light', overlayColor: colorScheme === 'dark'
+    return (_jsx(TabBarContextProvider, { value: { active, onTabPress: handleTabPress }, children: _jsxs(Box, { style: styles.container, onLayout: onLayout, accessibilityRole: 'tablist', ...props, children: [children, Platform.OS === 'android' ? (_jsx(View, { style: styles.androidBackground })) : (_jsx(BlurView, { style: styles.blur, blurAmount: theme.blur.lg, blurType: colorScheme === 'dark' ? 'dark' : 'light', overlayColor: colorScheme === 'dark'
                         ? 'rgba(0,0,0,0.15)'
-                        : 'rgba(255,255,255,0.2)' }), _jsx(Animated.View, { style: [styles.pill, animatedPillStyle] })] }) }));
+                        : 'rgba(255,255,255,0.2)' })), _jsx(Animated.View, { style: [styles.pill, animatedPillStyle] })] }) }));
 }
 const useStyles = () => useStyleSheet((t) => ({
     container: {
@@ -144,9 +144,14 @@ const useStyles = () => useStyleSheet((t) => ({
     },
     blur: {
         ...StyleSheet.absoluteFillObject,
-        bottom: -2,
+        height: TAB_BAR_HEIGHT + t.sizes.s16,
         zIndex: -1,
     },
+    androidBackground: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: -1,
+        backgroundColor: t.colors.bg.muted,
+    },
     item: {
         flex: 1,
         paddingVertical: t.spacings.s4,
@@ -172,6 +177,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

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 (