@ledgerhq/lumen-ui-rnative 0.0.71 → 0.0.72

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "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,7 +37,7 @@
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.0.51",
+    "@ledgerhq/lumen-design-core": "0.0.52",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^3.0.0",

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

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

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

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

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

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

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

@@ -22,6 +22,9 @@
         },
         "link": {
             "opensInNewTabAriaLabel": "（新しいタブで開く）"
+        },
+        "stepper": {
+            "progressAriaLabel": "ステップ {{currentStep}}/{{totalSteps}}"
         }
     }
 }

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

@@ -22,6 +22,9 @@
         },
         "link": {
             "opensInNewTabAriaLabel": "(새 탭에서 열기)"
+        },
+        "stepper": {
+            "progressAriaLabel": "{{totalSteps}}단계 중 {{currentStep}}단계"
         }
     }
 }

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

@@ -22,6 +22,9 @@
         },
         "link": {
             "opensInNewTabAriaLabel": "(abre em uma nova aba)"
+        },
+        "stepper": {
+            "progressAriaLabel": "Passo {{currentStep}} de {{totalSteps}}"
         }
     }
 }

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

@@ -22,6 +22,9 @@
         },
         "link": {
             "opensInNewTabAriaLabel": "(открывается в новой вкладке)"
+        },
+        "stepper": {
+            "progressAriaLabel": "Шаг {{currentStep}} из {{totalSteps}}"
         }
     }
 }

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

@@ -22,6 +22,9 @@
         },
         "link": {
             "opensInNewTabAriaLabel": "(เปิดในแท็บใหม่)"
+        },
+        "stepper": {
+            "progressAriaLabel": "ขั้นตอนที่ {{currentStep}} จาก {{totalSteps}}"
         }
     }
 }

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

@@ -22,6 +22,9 @@
         },
         "link": {
             "opensInNewTabAriaLabel": "(yeni sekmede açılır)"
+        },
+        "stepper": {
+            "progressAriaLabel": "{{totalSteps}} adımdan {{currentStep}}. adım"
         }
     }
 }

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

@@ -22,6 +22,9 @@
         },
         "link": {
             "opensInNewTabAriaLabel": "（在新选项卡中打开）"
+        },
+        "stepper": {
+            "progressAriaLabel": "第 {{currentStep}} 步，共 {{totalSteps}} 步"
         }
     }
 }

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

@@ -0,0 +1,21 @@
+import type { SkeletonProps } from './types';
+/**
+ * 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' />
+ */
+declare const Skeleton: {
+    ({ lx, component, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Skeleton };
+//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAmG7C;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,QAAQ;kCAAiC,aAAa;;CAkB3D,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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/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/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/package.json

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

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

package/src/i18n/locales/ja.json

@@ -22,6 +22,9 @@
     },
     "link": {
       "opensInNewTabAriaLabel": "（新しいタブで開く）"
+    },
+    "stepper": {
+      "progressAriaLabel": "ステップ {{currentStep}}/{{totalSteps}}"
     }
   }
 }