@ledgerhq/lumen-ui-rnative 0.0.69 → 0.0.71

package/.storybook/mocks/blur.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { View, ViewProps } from 'react-native';
 
 /**
@@ -6,6 +5,6 @@ import { View, ViewProps } from 'react-native';
  * @react-native-community/blur doesn't work on web, so we use a simple View
  */
 export const BlurView = (props: ViewProps & { blurAmount?: number }) => {
-  const { blurAmount, ...restProps } = props;
+  const { blurAmount: _blurAmount, ...restProps } = props;
   return <View {...restProps} />;
 };

package/.storybook/preview.tsx

@@ -67,6 +67,10 @@ const preview: Preview = {
           'Containment',
           'Selection',
           'Input',
+          'Layout',
+          'Navigation',
+          'Utility',
+          'Animations',
         ],
       },
     },

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -27,7 +27,7 @@
     "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.17",
+    "@ledgerhq/lumen-utils-shared": "0.0.18",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
@@ -37,8 +37,8 @@
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.0.49",
-    "react": "19.0.0",
+    "@ledgerhq/lumen-design-core": "0.0.51",
+    "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^3.0.0",
     "react-native-safe-area-context": "^4.0.0 || ^5.0.0",

package/dist/src/index.d.ts

@@ -1,4 +1,5 @@
 export { type SupportedLocale, Languages } from './i18n';
 export * from './lib/Components';
 export * from './lib/Patterns';
+export * from './lib/Animations';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzD,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzD,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/dist/src/index.js

@@ -1,3 +1,4 @@
 export { Languages } from './i18n';
 export * from './lib/Components';
 export * from './lib/Patterns';
+export * from './lib/Animations';

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

@@ -0,0 +1,3 @@
+import { PulseProps } from './types';
+export declare const Pulse: import("react").MemoExoticComponent<({ children, duration, animate }: PulseProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=Pulse.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pulse.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Animations/Pulse/Pulse.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,KAAK,wEACyB,UAAU,6CA+CpD,CAAC"}

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, memo } from 'react';
+import { Animated, Easing } from 'react-native';
+import { RuntimeConstants } from '../../utils';
+export const Pulse = memo(({ children, duration = 2000, animate }) => {
+    const pulseAnim = useRef(new Animated.Value(1)).current;
+    const animationRef = useRef(null);
+    useEffect(() => {
+        if (animate) {
+            const animation = Animated.loop(Animated.sequence([
+                Animated.timing(pulseAnim, {
+                    toValue: 0,
+                    duration: duration / 2,
+                    easing: Easing.linear,
+                    useNativeDriver: RuntimeConstants.isNative,
+                }),
+                Animated.timing(pulseAnim, {
+                    toValue: 1,
+                    duration: duration / 2,
+                    easing: Easing.linear,
+                    useNativeDriver: RuntimeConstants.isNative,
+                }),
+            ]));
+            animationRef.current = animation;
+            animation.start();
+        }
+        else {
+            animationRef.current?.stop();
+            Animated.timing(pulseAnim, {
+                toValue: 1,
+                duration: 200,
+                easing: Easing.out(Easing.ease),
+                useNativeDriver: RuntimeConstants.isNative,
+            }).start();
+        }
+        return () => {
+            animationRef.current?.stop();
+        };
+    }, [pulseAnim, duration, animate]);
+    const pulse = pulseAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.35, 1],
+    });
+    return _jsx(Animated.View, { style: { opacity: pulse }, children: children });
+});
+Pulse.displayName = 'Pulse';

package/dist/src/lib/Animations/Pulse/Pulse.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Pulse } from './Pulse';
+declare const meta: Meta<typeof Pulse>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const DurationShowcase: Story;
+export declare const WithAmountDisplay: Story;
+//# sourceMappingURL=Pulse.stories.d.ts.map

package/dist/src/lib/Animations/Pulse/Pulse.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pulse.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Animations/Pulse/Pulse.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAKvE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAchC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAMC,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAmC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC"}

package/dist/src/lib/Animations/Pulse/Pulse.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { AmountDisplay } from '../../Components/AmountDisplay';
+import { Box, Text } from '../../Components/Utility';
+import { Pulse } from './Pulse';
+const usdFormatter = (value) => {
+    const [integerPart, decimalPart] = value.toFixed(2).split(/\.|,/);
+    return {
+        integerPart,
+        decimalPart,
+        currencyText: '$',
+        decimalSeparator: '.',
+        currencyPosition: 'start',
+    };
+};
+const meta = {
+    title: 'Animations/Pulse',
+    component: Pulse,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Base = {
+    args: {
+        duration: 2000,
+        animate: true,
+        children: (_jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } })),
+    },
+};
+export const DurationShowcase = {
+    render: () => (_jsxs(View, { style: { flexDirection: 'row', gap: 24, alignItems: 'center' }, children: [_jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Pulse, { duration: 1000, animate: true, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "1000ms" })] }), _jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Pulse, { duration: 2000, animate: true, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "2000ms" })] }), _jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Pulse, { duration: 3000, animate: true, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "3000ms" })] })] })),
+};
+export const WithAmountDisplay = {
+    render: () => {
+        return (_jsx(View, { style: { flexDirection: 'column', alignItems: 'center', gap: 16 }, children: _jsx(AmountDisplay, { formatter: usdFormatter, value: 1234.56, loading: true }) }));
+    },
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+export * from './Pulse';
+export * from './types';

package/dist/src/lib/Animations/Pulse/types.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { Duration } from '../types';
+export type PulseProps = {
+    /**
+     * The content to animate
+     */
+    children: ReactNode;
+    /**
+     * Duration of one complete pulse in milliseconds
+     * @default 2000
+     */
+    duration?: Duration;
+    /**
+     * Whether the pulse animation should play
+     */
+    animate?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Animations/Pulse/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Animations/Pulse/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}

package/dist/src/lib/Animations/Pulse/types.js

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

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

@@ -0,0 +1,3 @@
+import { SpinProps } from './types';
+export declare const Spin: import("react").MemoExoticComponent<({ children, duration }: SpinProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=Spin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spin.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Animations/Spin/Spin.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,IAAI,+DAAwC,SAAS,6CA2BhE,CAAC"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import { RuntimeConstants } from '../../utils';
+export const Spin = memo(({ children, duration = 1000 }) => {
+    const spinValue = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        const animation = Animated.loop(Animated.timing(spinValue, {
+            toValue: 1,
+            duration: duration,
+            easing: Easing.linear,
+            useNativeDriver: RuntimeConstants.isNative,
+        }));
+        animation.start();
+        return () => animation.stop();
+    }, [spinValue, duration]);
+    const spin = spinValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+    return (_jsx(Animated.View, { style: { transform: [{ rotate: spin }] }, children: children }));
+});
+Spin.displayName = 'Spin';

package/dist/src/lib/Animations/Spin/Spin.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Spin } from './Spin';
+declare const meta: Meta<typeof Spin>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const DurationShowcase: Story;
+export declare const WithSpinner: Story;
+//# sourceMappingURL=Spin.stories.d.ts.map

package/dist/src/lib/Animations/Spin/Spin.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spin.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Animations/Spin/Spin.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAMC,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAmC9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC"}

package/dist/src/lib/Animations/Spin/Spin.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { Spinner } from '../../Components/Spinner';
+import { Box, Text } from '../../Components/Utility';
+import { Spin } from './Spin';
+const meta = {
+    title: 'Animations/Spin',
+    component: Spin,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Base = {
+    args: {
+        duration: 1000,
+        children: (_jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } })),
+    },
+};
+export const DurationShowcase = {
+    render: () => (_jsxs(View, { style: { flexDirection: 'row', gap: 24, alignItems: 'center' }, children: [_jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Spin, { duration: 500, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "500ms" })] }), _jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Spin, { duration: 1000, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "1000ms" })] }), _jsxs(View, { style: { alignItems: 'center', gap: 8 }, children: [_jsx(Spin, { duration: 2000, children: _jsx(Box, { lx: { width: 's48', height: 's48', backgroundColor: 'accent' } }) }), _jsx(Text, { typography: 'body4', lx: { color: 'muted' }, children: "2000ms" })] })] })),
+};
+export const WithSpinner = {
+    render: () => {
+        return (_jsx(View, { style: { flexDirection: 'column', alignItems: 'center', gap: 16 }, children: _jsx(Spinner, { size: 40 }) }));
+    },
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+export * from './Spin';
+export * from './types';

package/dist/src/lib/Animations/Spin/types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { Duration } from '../types';
+export type SpinProps = {
+    /**
+     * The content to animate
+     */
+    children: ReactNode;
+    /**
+     * Duration of one complete rotation in milliseconds
+     * @default 1000
+     */
+    duration?: Duration;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Animations/Spin/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Animations/Spin/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,CAAC"}

package/dist/src/lib/Animations/Spin/types.js

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

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

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

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1,2 @@
+export type Duration = 75 | 100 | 150 | 200 | 300 | 500 | 700 | 1000 | 2000 | 3000;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Animations/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAChB,EAAE,GACF,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC"}

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

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

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import { View } from 'react-native';
+import { AmountDisplayProps } from './types';
 /**
  * AmountDisplay - Renders formatted monetary amounts with flexible currency positioning and decimal formatting.
  *
@@ -33,9 +32,8 @@ import { View } from 'react-native';
  * <AmountDisplay value={1234.56} formatter={usdFormatter} hidden={true} />
  * ```
  */
-export declare const AmountDisplay: React.ForwardRefExoticComponent<import("react-native").ViewProps & {
-    value: number;
-    formatter: (value: number) => import("./types").FormattedValue;
-    hidden?: boolean;
-} & React.RefAttributes<View>>;
+export declare const AmountDisplay: {
+    ({ value, formatter, hidden, loading, ...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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAoB,MAAM,cAAc,CAAC;AAuCtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,aAAa;;;;8BAiCzB,CAAC"}
+{"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"}

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text } from 'react-native';
 import { useStyleSheet } from '../../../styles';
+import { Pulse } from '../../Animations/Pulse';
+import { Box } from '../Utility';
 const useStyles = () => {
     return useStyleSheet((t) => ({
         container: {
@@ -65,10 +66,10 @@ const useStyles = () => {
  * <AmountDisplay value={1234.56} formatter={usdFormatter} hidden={true} />
  * ```
  */
-export const AmountDisplay = React.forwardRef(({ value, formatter, hidden = false, style, ...props }, ref) => {
+export const AmountDisplay = ({ value, formatter, hidden = false, loading = false, ...props }) => {
     const styles = useStyles();
     const parts = formatter(value);
-    return (_jsxs(View, { ref: ref, style: StyleSheet.flatten([styles.container, style]), ...props, 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 }))] }));
-});
+    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 }))] }) }) }));
+};
 AmountDisplay.displayName = 'AmountDisplay';

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

@@ -5,4 +5,5 @@ export default meta;
 type Story = StoryObj<typeof AmountDisplay>;
 export declare const Base: Story;
 export declare const WithHideButton: 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"}
+{"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"}

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

@@ -97,3 +97,8 @@ 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 Loading = {
+    render: (props) => {
+        return (_jsx(AmountDisplay, { formatter: props.formatter, value: 1234.56, loading: true }));
+    },
+};

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

@@ -1,4 +1,5 @@
 import { ViewProps } from 'react-native';
+import { StyledViewProps } from '../../../styles';
 export type FormattedValue = {
     /**
      * The whole number portion of the amount (e.g., "1234" from 1234.56)
@@ -43,5 +44,10 @@ export type AmountDisplayProps = ViewProps & {
      * @default false
      */
     hidden?: boolean;
-};
+    /**
+     * When true, applies a pulse animation to indicate the amount is being fetched or updated.
+     * @default false
+     */
+    loading?: 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;AAEzC,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;CAClB,CAAC"}
+{"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"}

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

@@ -51,7 +51,7 @@ const useStyles = ({ appearance, disabled, pressed, }) => {
                 gap: t.spacings.s4,
             },
             title: StyleSheet.flatten([
-                t.typographies.body1SemiBold,
+                t.typographies.body2SemiBold,
                 {
                     color: disabled ? t.colors.text.disabled : t.colors.text.base,
                     minWidth: 0,
@@ -59,9 +59,9 @@ const useStyles = ({ appearance, disabled, pressed, }) => {
                 },
             ]),
             description: StyleSheet.flatten([
-                t.typographies.body2,
+                t.typographies.body3,
                 {
-                    color: disabled ? t.colors.text.disabled : t.colors.text.base,
+                    color: disabled ? t.colors.text.disabled : t.colors.text.muted,
                     minWidth: 0,
                 },
             ]),

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAgCvC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO;yCAMjB,YAAY;;CA2Bd,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO;yCAMjB,YAAY;;CA2Bd,CAAC"}

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

@@ -1,30 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useEffect, useRef } from 'react';
-import { Animated, Easing } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
 import { useResolveTextStyle, useTheme } from '../../../styles';
-import { RuntimeConstants } from '../../utils';
+import { Spin } from '../../Animations/Spin';
 import { Box } from '../Utility';
-const SpinAnimation = memo(({ children }) => {
-    const spinValue = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        const animation = Animated.loop(Animated.timing(spinValue, {
-            toValue: 1,
-            duration: 1000,
-            easing: Easing.linear,
-            useNativeDriver: RuntimeConstants.isNative,
-        }));
-        animation.start();
-        return () => animation.stop();
-    }, [spinValue]);
-    const spin = spinValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '360deg'],
-    });
-    return (_jsx(Animated.View, { style: { transform: [{ rotate: spin }] }, children: children }));
-});
-SpinAnimation.displayName = 'SpinAnimation';
 /**
  * A basic spinner component for loading states.
  *
@@ -44,6 +23,6 @@ export const Spinner = ({ lx = {}, size = 16, color, ref, ...props }) => {
     const { theme } = useTheme();
     const resolvedColorStyle = useResolveTextStyle({ color });
     const strokeColor = resolvedColorStyle?.color ?? color ?? theme.colors.text.base;
-    return (_jsx(Box, { ref: ref, lx: { flexShrink: 0, ...lx }, ...props, children: _jsx(SpinAnimation, { children: _jsx(Svg, { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', accessibilityLabel: t('components.spinner.loadingAriaLabel'), children: _jsx(Path, { d: 'M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8', stroke: strokeColor, strokeWidth: '1.5', strokeLinecap: 'round' }) }) }) }));
+    return (_jsx(Box, { ref: ref, lx: { flexShrink: 0, ...lx }, ...props, children: _jsx(Spin, { children: _jsx(Svg, { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', accessibilityLabel: t('components.spinner.loadingAriaLabel'), children: _jsx(Path, { d: 'M8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8', stroke: strokeColor, strokeWidth: '1.5', strokeLinecap: 'round' }) }) }) }));
 };
 Spinner.displayName = 'Spinner';

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

@@ -1,4 +1,5 @@
 import { TabBarItemProps, TabBarProps } from './types';
+export declare const TAB_BAR_HEIGHT = 56;
 /**
  * Individual tab item component that displays an icon and label.
  * Must be used as a child of TabBar.

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;AAIvD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,GACX,EAAE,eAAe,2CA+FjB;yBApGe,UAAU;;;AAwG1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAiFb"}
+{"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,GACX,EAAE,eAAe,2CA+FjB;yBApGe,UAAU;;;AAwG1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAiFb"}

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

@@ -7,6 +7,7 @@ import { useStyleSheet, useTheme } from '../../../styles';
 import { Placeholder } from '../../Symbols';
 import { Box, Pressable } from '../Utility';
 import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
+export const TAB_BAR_HEIGHT = 56;
 const PILL_INSET = 4;
 /**
  * Individual tab item component that displays an icon and label.
@@ -130,7 +131,7 @@ export function TabBar({ active, onTabPress, children, ...props }) {
 }
 const useStyles = () => useStyleSheet((t) => ({
     container: {
-        height: t.sizes.s56,
+        height: TAB_BAR_HEIGHT,
         flexDirection: 'row',
         justifyContent: 'center',
         padding: t.spacings.s4,

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

@@ -1,3 +1,3 @@
-export { TabBar, TabBarItem } from './TabBar';
+export { TabBar, TabBarItem, TAB_BAR_HEIGHT } from './TabBar';
 export type { TabBarProps, TabBarItemProps } from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TabBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC9D,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}

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

@@ -1 +1 @@
-export { TabBar, TabBarItem } from './TabBar';
+export { TabBar, TabBarItem, TAB_BAR_HEIGHT } from './TabBar';

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

@@ -1,5 +1,3 @@
-import React from 'react';
-import { View } from 'react-native';
 import { TileButtonProps } from './types';
 /**
  * A compact button component displaying an icon above a label in a vertical layout.
@@ -15,5 +13,8 @@ import { TileButtonProps } from './types';
  *   Settings
  * </TileButton>
  */
-export declare const TileButton: React.ForwardRefExoticComponent<Omit<TileButtonProps, "ref"> & React.RefAttributes<View>>;
+export declare const TileButton: {
+    ({ lx, style, icon: IconProp, children, disabled, isFull, numberOfLines, ...props }: TileButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=TileButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TileButton.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TileButton/TileButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAwD1C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,2FA2CtB,CAAC"}
+{"version":3,"file":"TileButton.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/TileButton/TileButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAwD1C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU;yFASpB,eAAe;;CAyBjB,CAAC"}