@ledgerhq/lumen-ui-rnative 0.0.70 → 0.0.72

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pulse } from '../../Animations/Pulse';
+import { Box } from '../Utility';
+/** Internal base skeleton element */
+const BaseSkeleton = ({ lx, ...props }) => {
+    return (_jsx(Box, { lx: {
+            borderRadius: 'md',
+            backgroundColor: 'mutedTransparent',
+            ...lx,
+        }, ...props }));
+};
+BaseSkeleton.displayName = 'BaseSkeleton';
+const ListItemSkeleton = ({ lx, ...props }) => {
+    return (_jsxs(Box, { lx: {
+            flexDirection: 'row',
+            width: 'full',
+            alignItems: 'center',
+            gap: 's16',
+            paddingVertical: 's8',
+            ...lx,
+        }, ...props, children: [_jsx(BaseSkeleton, { lx: {
+                    width: 's48',
+                    height: 's48',
+                    borderRadius: 'full',
+                    flexShrink: 0,
+                } }), _jsxs(Box, { lx: { flex: 1, flexDirection: 'column', gap: 's10' }, children: [_jsx(BaseSkeleton, { lx: { height: 's12', width: 's176', borderRadius: 'full' } }), _jsx(BaseSkeleton, { lx: { height: 's12', width: 's112', borderRadius: 'full' } })] })] }));
+};
+ListItemSkeleton.displayName = 'ListItemSkeleton';
+const TileSkeleton = ({ lx, ...props }) => {
+    return (_jsxs(Box, { lx: {
+            flexDirection: 'column',
+            width: 's112',
+            alignItems: 'center',
+            gap: 's12',
+            borderRadius: 'md',
+            paddingHorizontal: 's8',
+            paddingVertical: 's16',
+            ...lx,
+        }, ...props, children: [_jsx(BaseSkeleton, { lx: {
+                    width: 's48',
+                    height: 's48',
+                    borderRadius: 'full',
+                    flexShrink: 0,
+                } }), _jsxs(Box, { lx: {
+                    width: 'full',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 's8',
+                }, children: [_jsx(BaseSkeleton, { lx: { height: 's12', width: 's48', borderRadius: 'full' } }), _jsx(BaseSkeleton, { lx: { height: 's12', width: 's64', borderRadius: 'full' } })] })] }));
+};
+TileSkeleton.displayName = 'TileSkeleton';
+const componentsMap = {
+    'list-item': ListItemSkeleton,
+    tile: TileSkeleton,
+};
+/**
+ * A skeleton component that displays a pulsing placeholder for loading content.
+ *
+ * @example
+ * <Skeleton lx={{ height: 's16', width: 's256' }} />
+ *
+ * @example
+ * // List item variant
+ * <Skeleton component='list-item' lx={{ width: 's320' }} />
+ *
+ * @example
+ * // Tile variant
+ * <Skeleton component='tile' />
+ */
+const Skeleton = ({ lx, component, ...props }) => {
+    /**
+     * Check if the component is a valid pre-built variant and return the corresponding component.
+     */
+    if (component && componentsMap[component]) {
+        const Component = componentsMap[component];
+        return (_jsx(Pulse, { animate: true, children: _jsx(Component, { ...props, lx: lx }) }));
+    }
+    return (_jsx(Pulse, { animate: true, children: _jsx(BaseSkeleton, { testID: 'skeleton', lx: lx, ...props }) }));
+};
+Skeleton.displayName = 'Skeleton';
+export { Skeleton };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAa/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,IAAI,EAAE,KAelB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAC"}

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../Utility/Box';
+import { Skeleton } from './Skeleton';
+const meta = {
+    title: 'Communication/Skeleton',
+    component: Skeleton,
+    parameters: {
+        actions: { disable: true },
+    },
+    argTypes: {
+        component: {
+            control: 'select',
+            options: [undefined, 'list-item', 'tile'],
+            description: 'Pre-built skeleton component variant',
+        },
+    },
+};
+export default meta;
+export const Base = {
+    args: {
+        lx: {
+            height: 's16',
+            width: 's256',
+        },
+    },
+    render: (args) => (_jsx(Box, { lx: { padding: 's16', backgroundColor: 'canvas', borderRadius: 'md' }, children: _jsx(Skeleton, { component: args.component, lx: args.component ? undefined : args.lx }) })),
+};
+export const WithListItem = {
+    render: () => (_jsx(Box, { lx: { padding: 's16', backgroundColor: 'canvas', borderRadius: 'md' }, children: _jsx(Skeleton, { component: 'list-item' }) })),
+};
+export const WithTile = {
+    render: () => (_jsx(Box, { lx: { padding: 's16', backgroundColor: 'canvas', borderRadius: 'md' }, children: _jsx(Skeleton, { component: 'tile' }) })),
+};
+export const SizeShowcase = {
+    render: () => (_jsxs(Box, { lx: {
+            padding: 's16',
+            backgroundColor: 'canvas',
+            borderRadius: 'md',
+            gap: 's4',
+        }, children: [_jsx(Skeleton, { lx: { height: 's40', width: 's56' } }), _jsx(Skeleton, { lx: { height: 's12', width: 's112' } }), _jsx(Skeleton, { lx: { height: 's128', width: 's256' } })] })),
+};
+export const ShapeShowcase = {
+    render: () => (_jsxs(Box, { lx: {
+            padding: 's16',
+            backgroundColor: 'canvas',
+            borderRadius: 'md',
+            gap: 's4',
+        }, children: [_jsx(Skeleton, { lx: { height: 's40', width: 's256', borderRadius: 'none' } }), _jsx(Skeleton, { lx: { height: 's40', width: 's256', borderRadius: 'lg' } }), _jsx(Skeleton, { lx: { width: 's48', height: 's48', borderRadius: 'full' } }), _jsx(Skeleton, { lx: { width: 's48', height: 's48', borderRadius: 'md' } })] })),
+};

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { StyledViewProps } from '../../../styles';
+export type SkeletonProps = {
+    /**
+     * Pre-built skeleton component variant
+     * - `list-item`: Horizontal layout with circle and two text lines
+     * - `tile`: Vertical centered layout with circle and two text lines in a rounded container
+     */
+    component?: 'list-item' | 'tile';
+} & Omit<StyledViewProps, 'children'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;CAClC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

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

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

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/Stepper/Stepper.d.ts

@@ -0,0 +1,16 @@
+import { StepperProps } from './types';
+/**
+ * A circular stepper component showing progress as current step out of total steps.
+ * Renders a track arc with a progress arc and a center label.
+ *
+ * @see [Figma – Stepper](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11977-94&m=dev)
+ *
+ * @example
+ * <Stepper currentStep={1} totalSteps={4} />
+ * <Stepper currentStep={0} totalSteps={9} disabled /> // Shows minimal dot, disabled style
+ */
+export declare const Stepper: {
+    ({ lx, currentStep, totalSteps, disabled, label, ref, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAOvC;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO;sEAQjB,YAAY;;CA2Hd,CAAC"}

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

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getStepperCalculations } from '@ledgerhq/lumen-utils-shared';
+import { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { useCommonTranslation } from '../../../i18n';
+import { useTheme } from '../../../styles';
+import { Box } from '../Utility/Box';
+import { Text } from '../Utility/Text';
+const SIZE = 48;
+const STROKE_WIDTH = 4;
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+/**
+ * A circular stepper component showing progress as current step out of total steps.
+ * Renders a track arc with a progress arc and a center label.
+ *
+ * @see [Figma – Stepper](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11977-94&m=dev)
+ *
+ * @example
+ * <Stepper currentStep={1} totalSteps={4} />
+ * <Stepper currentStep={0} totalSteps={9} disabled /> // Shows minimal dot, disabled style
+ */
+export const Stepper = ({ lx = {}, currentStep, totalSteps, disabled = false, label, ref, ...props }) => {
+    const { t } = useCommonTranslation();
+    const { theme } = useTheme();
+    const { displayLabel, r, cx, cy, trackDashArray, progressDashArray, progressDashOffset, } = getStepperCalculations({
+        currentStep,
+        totalSteps,
+        size: SIZE,
+        label,
+        strokeWidth: STROKE_WIDTH,
+    });
+    const animatedOffset = useRef(new Animated.Value(progressDashOffset)).current;
+    useEffect(() => {
+        const animation = Animated.timing(animatedOffset, {
+            toValue: progressDashOffset,
+            duration: 300,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: false,
+        });
+        animation.start();
+        return () => animation.stop();
+    }, [progressDashOffset, animatedOffset]);
+    return (_jsxs(Box, { ref: ref, accessibilityRole: 'progressbar', accessibilityValue: {
+            now: currentStep,
+            min: 1,
+            max: totalSteps,
+            text: displayLabel,
+        }, accessibilityLabel: label ??
+            t('components.stepper.progressAriaLabel', {
+                currentStep: Math.min(Math.max(currentStep, 0), totalSteps),
+                totalSteps,
+            }), lx: {
+            width: 's48',
+            height: 's48',
+            flexShrink: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 'full',
+            ...lx,
+        }, ...props, children: [_jsxs(Svg, { width: SIZE, height: SIZE, viewBox: `0 0 ${SIZE} ${SIZE}`, style: { transform: [{ rotate: '135deg' }] }, children: [_jsx(Circle, { cx: cx, cy: cy, r: r, fill: 'none', stroke: theme.colors.border.mutedSubtle, strokeLinecap: 'round', strokeWidth: STROKE_WIDTH, strokeDasharray: trackDashArray, strokeDashoffset: 0 }), _jsx(AnimatedCircle, { cx: cx, cy: cy, r: r, fill: 'none', stroke: disabled
+                            ? theme.colors.border.mutedSubtleHover
+                            : theme.colors.border.active, strokeLinecap: 'round', strokeWidth: STROKE_WIDTH, strokeDasharray: progressDashArray, strokeDashoffset: animatedOffset })] }), _jsx(Box, { lx: {
+                    position: 'absolute',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexDirection: 'row',
+                    top: 's0',
+                    left: 's0',
+                    right: 's0',
+                    bottom: 's0',
+                }, children: label ? (_jsx(Text, { typography: 'body2SemiBold', lx: { color: 'base' }, children: label })) : (_jsxs(_Fragment, { children: [_jsx(Text, { typography: 'body1SemiBold', lx: { color: 'base' }, children: Math.min(Math.max(currentStep, 0), totalSteps) }), _jsxs(Text, { typography: 'body2SemiBold', lx: { color: 'muted' }, children: ["/", totalSteps] })] })) })] }));
+};
+Stepper.displayName = 'Stepper';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Stepper/Stepper.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAW9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAC"}

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../Utility/Box';
+import { Text } from '../Utility/Text';
+import { Stepper } from './Stepper';
+const meta = {
+    title: 'Communication/Stepper',
+    component: Stepper,
+    parameters: {
+        actions: { disable: true },
+    },
+    argTypes: {
+        currentStep: { control: 'number' },
+        totalSteps: { control: 'number' },
+        disabled: { control: 'boolean' },
+    },
+};
+export default meta;
+export const Base = {
+    args: {
+        currentStep: 2,
+        totalSteps: 4,
+    },
+    render: (args) => _jsx(Stepper, { ...args }),
+};
+export const DisabledShowcase = {
+    render: () => (_jsxs(Box, { lx: { gap: 's32', alignItems: 'center' }, children: [_jsxs(Box, { lx: { alignItems: 'center', gap: 's8' }, children: [_jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "Default (2/4)" }), _jsx(Stepper, { currentStep: 2, totalSteps: 4 })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's8' }, children: [_jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "Disabled (2/4)" }), _jsx(Stepper, { currentStep: 2, totalSteps: 4, disabled: true })] }), _jsxs(Box, { lx: { alignItems: 'center', gap: 's8' }, children: [_jsx(Text, { typography: 'body3', lx: { color: 'muted' }, children: "Unstarted (0/9)" }), _jsx(Stepper, { currentStep: 0, totalSteps: 9 })] })] })),
+};
+export const WithCustomLabel = {
+    args: {
+        currentStep: 5,
+        totalSteps: 5,
+        label: '🎉',
+    },
+    render: (args) => _jsx(Stepper, { ...args }),
+};

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { StyledViewProps } from '../../../styles';
+export type StepperProps = {
+    /**
+     * Current step number (1-based). Use 0 or negative to show minimal dot (before starting).
+     */
+    currentStep: number;
+    /**
+     * Total number of steps.
+     */
+    totalSteps: number;
+    /**
+     * Whether the stepper is disabled. Changes the progress arc to a muted style.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional custom label. Defaults to "{currentStep}/{totalSteps}".
+     */
+    label?: string;
+} & Omit<StyledViewProps, 'children'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Stepper/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

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

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

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

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
-import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { Pressable, Text } from '../Utility';
@@ -55,10 +54,10 @@ const useStyles = ({ disabled, pressed, isFull, }) => {
  *   Settings
  * </TileButton>
  */
-export const TileButton = React.forwardRef(({ lx, style, icon: IconProp, children, disabled = false, isFull = false, numberOfLines = 2, ...props }, ref) => {
+export const TileButton = ({ lx, style, icon: IconProp, children, disabled = false, isFull = false, numberOfLines = 2, ...props }) => {
     const rootStyles = useRootStyles({ isFull });
-    return (_jsx(Pressable, { ref: ref, lx: lx, style: StyleSheet.flatten([style, rootStyles.root]), disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...props, children: ({ pressed }) => (_jsx(TileButtonContent, { disabled: disabled, pressed: pressed, isFull: isFull, IconProp: IconProp, numberOfLines: numberOfLines, children: children })) }));
-});
+    return (_jsx(Pressable, { lx: lx, style: StyleSheet.flatten([style, rootStyles.root]), disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...props, children: ({ pressed }) => (_jsx(TileButtonContent, { disabled: disabled, pressed: pressed, isFull: isFull, IconProp: IconProp, numberOfLines: numberOfLines, children: children })) }));
+};
 const TileButtonContent = ({ disabled, pressed, isFull, IconProp, numberOfLines, children, }) => {
     const styles = useStyles({ disabled, pressed, isFull });
     return (_jsxs(View, { style: styles.container, testID: 'tile-button-content', children: [_jsx(IconProp, { size: ICON_SIZE, style: styles.icon }), isTextChildren(children) ? (_jsx(Text, { style: styles.label, numberOfLines: numberOfLines, children: children })) : (children)] }));

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

@@ -17,7 +17,10 @@ export * from './NavBar';
 export * from './PageIndicator';
 export * from './SearchInput';
 export * from './Select';
+export * from './Skeleton';
+export * from './Spinner';
 export * from './Spot';
+export * from './Stepper';
 export * from './Subheader';
 export * from './Switch';
 export * from './TabBar';

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,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,QAAQ,CAAC;AACvB,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,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"}

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

@@ -17,7 +17,10 @@ export * from './NavBar';
 export * from './PageIndicator';
 export * from './SearchInput';
 export * from './Select';
+export * from './Skeleton';
+export * from './Spinner';
 export * from './Spot';
+export * from './Stepper';
 export * from './Subheader';
 export * from './Switch';
 export * from './TabBar';

package/dist/src/styles/types/factories.types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 import { PressableProps, PressableStateCallbackType, TextProps as RNTextProps, ViewProps, ViewStyle, Text as RNText, View as RNView, Pressable as RNPressable } from 'react-native';
 import { LumenTextStyle, LumenViewStyle } from './lx.types';
 import { LumenTypographyTokenName } from './theme.types';

package/dist/src/styles/types/factories.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factories.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/factories.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EACL,cAAc,EACd,0BAA0B,EAC1B,SAAS,IAAI,WAAW,EACxB,SAAS,EACT,SAAS,EACT,IAAI,IAAI,MAAM,EACd,IAAI,IAAI,MAAM,EACd,SAAS,IAAI,WAAW,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAEzD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC;AAChE,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,OAAO,GACP,kBAAkB,EAAE,GACpB,IAAI,GACJ,SAAS,CAAC;AAEd,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG,SAAS,GACX,qBAAqB,CAAC,OAAO,MAAM,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAC;CACvC,GAAG,WAAW,GACb,qBAAqB,CAAC,OAAO,MAAM,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG,sBAAsB,GACxB,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC"}
+{"version":3,"file":"factories.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/factories.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,cAAc,EACd,0BAA0B,EAC1B,SAAS,IAAI,WAAW,EACxB,SAAS,EACT,SAAS,EACT,IAAI,IAAI,MAAM,EACd,IAAI,IAAI,MAAM,EACd,SAAS,IAAI,WAAW,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAEzD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC;AAChE,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,OAAO,GACP,kBAAkB,EAAE,GACpB,IAAI,GACJ,SAAS,CAAC;AAEd,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG,SAAS,GACX,qBAAqB,CAAC,OAAO,MAAM,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAC;CACvC,GAAG,WAAW,GACb,qBAAqB,CAAC,OAAO,MAAM,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG,sBAAsB,GACxB,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -27,7 +27,7 @@
     "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.18",
+    "@ledgerhq/lumen-utils-shared": "0.0.19",
     "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.51",
-    "react": "19.0.0",
+    "@ledgerhq/lumen-design-core": "0.0.52",
+    "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/src/i18n/locales/de.json

@@ -22,6 +22,9 @@
     },
     "link": {
       "opensInNewTabAriaLabel": "(Öffnet in neuem Tab)"
+    },
+    "stepper": {
+      "progressAriaLabel": "Schritt {{currentStep}} von {{totalSteps}}"
     }
   }
 }

package/src/i18n/locales/en.json

@@ -22,6 +22,9 @@
     },
     "link": {
       "opensInNewTabAriaLabel": "(opens in a new tab)"
+    },
+    "stepper": {
+      "progressAriaLabel": "Step {{currentStep}} of {{totalSteps}}"
     }
   }
 }

package/src/i18n/locales/es.json

@@ -22,6 +22,9 @@
     },
     "link": {
       "opensInNewTabAriaLabel": "(se abre en una pestaña nueva)"
+    },
+    "stepper": {
+      "progressAriaLabel": "Paso {{currentStep}} de {{totalSteps}}"
     }
   }
 }

package/src/i18n/locales/fr.json

@@ -22,6 +22,9 @@
     },
     "link": {
       "opensInNewTabAriaLabel": "(s'ouvre dans un nouvel onglet)"
+    },
+    "stepper": {
+      "progressAriaLabel": "Étape {{currentStep}} sur {{totalSteps}}"
     }
   }
 }