@ledgerhq/lumen-ui-rnative 0.0.71 → 0.0.73

package/.storybook/preview-head.html

@@ -17,6 +17,7 @@
 
   .sbdocs-a {
     color: rgb(126, 78, 165) !important;
+    text-decoration: underline !important;
     cursor: pointer;
   }
 

package/dist/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,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/BottomSheet/BottomSheet.stories.d.ts

@@ -19,6 +19,10 @@ declare const meta: {
                 format: boolean;
                 type: string;
             };
+            story: {
+                inline: boolean;
+                iframeHeight: number;
+            };
         };
     };
     argTypes: {

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAU5C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0E0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,IAAI,EAAE,KAmDlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiD3B,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAwC5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAwCzC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4C1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA2CxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoEzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkF7B,CAAC"}
+{"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAU5C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8E0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,IAAI,EAAE,KAmDlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiD3B,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAwC5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAwCzC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4C1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA2CxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoEzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkF7B,CAAC"}

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

@@ -16,6 +16,10 @@ const meta = {
                 format: true,
                 type: 'code',
             },
+            story: {
+                inline: false,
+                iframeHeight: 400,
+            },
         },
     },
     argTypes: {

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AAqC9C,eAAO,MAAM,IAAI;4DAQd,SAAS;;CAkBX,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AAsC9C,eAAO,MAAM,IAAI;4DAQd,SAAS;;CAkBX,CAAC"}

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

@@ -7,6 +7,7 @@ const iconSizeMap = {
     16: 's16',
     20: 's20',
     24: 's24',
+    32: 's32',
     40: 's40',
     48: 's48',
     56: 's56',

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

@@ -8,7 +8,7 @@ const meta = {
     title: 'Symbols/Interface Icons',
 };
 export default meta;
-const sizes = [12, 16, 20, 24, 40, 48, 56];
+const sizes = [12, 16, 20, 24, 32, 40, 48, 56];
 const iconNames = Object.keys(Icons);
 const IconCard = ({ name, size = 24, color }) => {
     const { theme } = useTheme();

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

@@ -2,7 +2,7 @@ import { Ref } from 'react';
 import { Svg, SvgProps } from 'react-native-svg';
 import { LumenTextStyle } from '../../../styles';
 import { TextProps } from '../Utility';
-export type IconSize = 12 | 16 | 20 | 24 | 40 | 48 | 56;
+export type IconSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56;
 export type IconProps = {
     /**
      * The size of the icon.

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;CAChB,GAAG,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,GACxB,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE7D,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;CAChB,GAAG,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,GACxB,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC"}

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

@@ -29,7 +29,7 @@ import { InteractiveIconProps } from './types';
  * </InteractiveIcon>
  */
 export declare const InteractiveIcon: {
-    ({ iconType, children, disabled, style, lx, ...props }: InteractiveIconProps): import("react/jsx-runtime").JSX.Element;
+    ({ iconType, children, disabled, hitSlop: hitSlopProp, hitSlopType, style, lx, ...props }: InteractiveIconProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=InteractiveIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InteractiveIcon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/InteractiveIcon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA0C/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,eAAe;4DAOzB,oBAAoB;;CAqBtB,CAAC"}
+{"version":3,"file":"InteractiveIcon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/InteractiveIcon.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAgB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA0C7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,eAAe;+FASzB,oBAAoB;;CA+BtB,CAAC"}

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { InjectStylesIntoChildren } from '../../utils/components/InjectStylesIntoChildren';
 import { Pressable } from '../Utility';
+import { HIT_SLOP_MAP } from './types';
 const useStyles = ({ iconType, pressed, disabled, }) => {
     return useStyleSheet((t) => {
         const backgroundStyle = {
@@ -57,8 +59,14 @@ const useStyles = ({ iconType, pressed, disabled, }) => {
  *   <Settings size={20} />
  * </InteractiveIcon>
  */
-export const InteractiveIcon = ({ iconType, children, disabled = false, style, lx, ...props }) => {
-    return (_jsx(Pressable, { lx: lx, style: [style, { alignItems: 'center', justifyContent: 'center' }], accessibilityRole: 'button', accessibilityState: { disabled: !!disabled }, disabled: disabled, ...props, children: ({ pressed }) => (_jsx(InteractiveIconContent, { iconType: iconType, pressed: pressed, disabled: !!disabled, children: children })) }));
+export const InteractiveIcon = ({ iconType, children, disabled = false, hitSlop: hitSlopProp, hitSlopType = 'comfortable', style, lx, ...props }) => {
+    const child = Children.only(children);
+    let iconSize = 20;
+    if (isValidElement(child) && 'size' in child.props) {
+        iconSize = child.props.size ?? 20;
+    }
+    const resolvedHitSlop = hitSlopProp ?? HIT_SLOP_MAP[hitSlopType]?.[iconSize];
+    return (_jsx(Pressable, { lx: lx, style: [style, { alignItems: 'center', justifyContent: 'center' }], accessibilityRole: 'button', accessibilityState: { disabled: !!disabled }, disabled: disabled, hitSlop: resolvedHitSlop, ...props, children: ({ pressed }) => (_jsx(InteractiveIconContent, { iconType: iconType, pressed: pressed, disabled: !!disabled, children: children })) }));
 };
 const InteractiveIconContent = ({ iconType, pressed, disabled, children, }) => {
     const styles = useStyles({ iconType, pressed, disabled });

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

@@ -1,10 +1,27 @@
 import { PropsWithChildren } from 'react';
+import { Insets } from 'react-native';
 import { StyledPressableProps } from '../../../styles';
+import { IconSize } from '../Icon';
+export declare const HIT_SLOP_MAP: Partial<Record<HitSlopType, Partial<Record<IconSize, Insets>>>>;
+/**
+ * Preset for the touchable area around the icon.
+ * - `comfortable`: Increases hit area across both axes in a 1:1 ratio.
+ * - `compact-horizontal`: Larger hit area on the horizontal axis.
+ * - `compact-vertical`: Larger hit area on the vertical axis.
+ */
+export type HitSlopType = 'comfortable' | 'compact-horizontal' | 'compact-vertical';
 export type InteractiveIconProps = {
     /**
      * The visual style of the icon button.
      * Choose 'filled' for icons with solid backgrounds or 'stroked' for outlined icons.
      */
     iconType: 'filled' | 'stroked';
+    /**
+     * Preset for the touchable area. Ignored if `hitSlop` is passed explicitly.
+     * Automatically applies insets based on the child's icon size.
+     *
+     * @default 'comfortable'
+     */
+    hitSlopType?: HitSlopType;
 } & PropsWithChildren & Omit<StyledPressableProps, 'children'>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,GAAG,iBAAiB,GACnB,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,OAAO,CAChC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAwBvD,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GACnB,aAAa,GACb,oBAAoB,GACpB,kBAAkB,CAAC;AAEvB,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,GAAG,iBAAiB,GACnB,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}

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

@@ -1 +1,24 @@
-export {};
+export const HIT_SLOP_MAP = {
+    comfortable: {
+        12: { top: 16, bottom: 16, left: 16, right: 16 },
+        16: { top: 14, bottom: 14, left: 14, right: 14 },
+        20: { top: 12, bottom: 12, left: 12, right: 12 },
+        24: { top: 10, bottom: 10, left: 10, right: 10 },
+        32: { top: 6, bottom: 6, left: 6, right: 6 },
+        40: { top: 2, bottom: 2, left: 2, right: 2 },
+    },
+    'compact-vertical': {
+        12: { top: 14, bottom: 14, left: 10, right: 10 },
+        16: { top: 12, bottom: 12, left: 8, right: 8 },
+        20: { top: 10, bottom: 10, left: 6, right: 6 },
+        24: { top: 8, bottom: 8, left: 4, right: 4 },
+        32: { top: 4, bottom: 4, left: 0, right: 0 },
+    },
+    'compact-horizontal': {
+        12: { top: 10, bottom: 10, left: 14, right: 14 },
+        16: { top: 8, bottom: 8, left: 12, right: 12 },
+        20: { top: 6, bottom: 6, left: 10, right: 10 },
+        24: { top: 4, bottom: 4, left: 8, right: 8 },
+        32: { top: 0, bottom: 0, left: 4, right: 4 },
+    },
+};

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';