@ledgerhq/lumen-ui-rnative 0.0.71 → 0.0.73

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/Utility/Gradient/LinearGradient/LinearGradient.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearGradient.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,IAAI,EAAE,KAUlB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwB1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA4B/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAyC7B,CAAC"}
+{"version":3,"file":"LinearGradient.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,IAAI,EAAE,KAUlB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwB1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA0B/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAyC7B,CAAC"}

package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.js

@@ -78,8 +78,6 @@ export const WithMultipleStops = {
         },
     },
     render: (args) => {
-        const { theme } = useTheme();
-        console.log({ theme });
         return (_jsxs(Box, { lx: { gap: 's12' }, children: [_jsx(LinearGradient, { ...args }), _jsxs(Box, { lx: { flexDirection: 'row', justifyContent: 'space-between' }, children: [_jsx(Text, { children: "accent" }), _jsx(Text, { children: "warning" }), _jsx(Text, { children: "errorStrong" })] })] }));
     },
 };

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.73",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -27,7 +27,7 @@
     "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.19",
+    "@ledgerhq/lumen-utils-shared": "0.0.20",
     "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.52",
+    "@ledgerhq/lumen-design-core": "0.0.53",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^3.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}}"
     }
   }
 }

package/src/i18n/locales/ja.json

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

package/src/i18n/locales/ko.json

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

package/src/i18n/locales/pt.json

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

package/src/i18n/locales/ru.json

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

package/src/i18n/locales/th.json

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

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

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

package/src/lib/Components/BottomSheet/BottomSheet.stories.tsx

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

package/src/lib/Components/Icon/Icon.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta = {
 
 export default meta;
 
-const sizes: IconSize[] = [12, 16, 20, 24, 40, 48, 56];
+const sizes: IconSize[] = [12, 16, 20, 24, 32, 40, 48, 56];
 
 type IconName = keyof typeof Icons;
 const iconNames = Object.keys(Icons) as IconName[];

package/src/lib/Components/Icon/Icon.test.tsx

@@ -33,7 +33,7 @@ describe('Icon', () => {
     expect(svg.props.strokeWidth).toBe(iconTokens.borderWidth.s24);
   });
 
-  it.each([12, 16, 20, 24, 40, 48, 56] as IconSize[])(
+  it.each([12, 16, 20, 24, 32, 40, 48, 56] as IconSize[])(
     'should apply correct dimensions for size %i',
     (size) => {
       renderWithProvider(

package/src/lib/Components/Icon/Icon.tsx

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

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

@@ -3,7 +3,7 @@ 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 = {
   /**

package/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx

@@ -1,10 +1,11 @@
-import { PropsWithChildren } from 'react';
+import { Children, isValidElement, PropsWithChildren } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 
 import { InjectStylesIntoChildren } from '../../utils/components/InjectStylesIntoChildren';
+import { IconProps, IconSize } from '../Icon';
 import { Pressable } from '../Utility';
-import { InteractiveIconProps } from './types';
+import { HIT_SLOP_MAP, InteractiveIconProps } from './types';
 
 type IconType = InteractiveIconProps['iconType'];
 
@@ -79,10 +80,21 @@ export const InteractiveIcon = ({
   iconType,
   children,
   disabled = false,
+  hitSlop: hitSlopProp,
+  hitSlopType = 'comfortable',
   style,
   lx,
   ...props
 }: InteractiveIconProps) => {
+  const child = Children.only(children);
+
+  let iconSize: IconSize = 20;
+  if (isValidElement<IconProps>(child) && 'size' in child.props) {
+    iconSize = child.props.size ?? 20;
+  }
+
+  const resolvedHitSlop = hitSlopProp ?? HIT_SLOP_MAP[hitSlopType]?.[iconSize];
+
   return (
     <Pressable
       lx={lx}
@@ -90,6 +102,7 @@ export const InteractiveIcon = ({
       accessibilityRole='button'
       accessibilityState={{ disabled: !!disabled }}
       disabled={disabled}
+      hitSlop={resolvedHitSlop}
       {...props}
     >
       {({ pressed }) => (

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

@@ -1,5 +1,45 @@
 import { PropsWithChildren } from 'react';
+import { Insets } from 'react-native';
 import { StyledPressableProps } from '../../../styles';
+import { IconSize } from '../Icon';
+
+export const HIT_SLOP_MAP: Partial<
+  Record<HitSlopType, Partial<Record<IconSize, Insets>>>
+> = {
+  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 },
+  },
+};
+
+/**
+ * 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 = {
   /**
@@ -7,5 +47,12 @@ export type InteractiveIconProps = {
    * 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'>;

package/src/lib/Components/Skeleton/Skeleton.mdx

@@ -0,0 +1,200 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SkeletonStories from './Skeleton.stories';
+import { Skeleton } from './Skeleton';
+import {
+  CustomTabs,
+  Tab,
+  DoVsDontRow,
+  DoBlockItem,
+  DontBlockItem,
+} from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Communication/Skeleton' of={SkeletonStories} />
+
+# Skeleton
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+Skeleton components provide visual placeholders for content that is loading. They use a pulsing animation to indicate that content is being fetched or processed, improving perceived performance and user experience.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10196-8001&m=dev).
+
+## Anatomy
+
+<Canvas of={SkeletonStories.Base} />
+
+- **Shape**: Defines the visual placeholder shape (rectangle, circle, etc.)
+- **Animation**: Built-in pulse animation to indicate loading state
+
+## Properties
+
+### Overview
+
+<Canvas of={SkeletonStories.Base} />
+<Controls of={SkeletonStories.Base} />
+
+### Component Variants
+
+The `component` prop provides pre-built skeleton patterns for common UI elements.
+
+#### **List Item**
+
+<Canvas of={SkeletonStories.WithListItem} />
+
+#### **Tile**
+
+<Canvas of={SkeletonStories.WithTile} />
+
+> **Note**: List item and Tile width are fixed
+
+### Sizes
+
+Skeletons can be sized using the `lx` prop with design system size tokens.
+
+<Canvas of={SkeletonStories.SizeShowcase} />
+
+### Shapes
+
+Skeletons can take various shapes depending on the content they're representing.
+
+<Canvas of={SkeletonStories.ShapeShowcase} />
+
+## Best Practices
+
+- **Use Component Variants**: Prefer using the `component` prop for common patterns like list items and tiles
+- **Match Content Shape**: Make skeleton shapes match the actual content they represent
+- **Consistent Spacing**: Use consistent spacing between skeleton elements
+- **Appropriate Sizing**: Size skeletons to match the expected content dimensions
+- **Loading States**: Show skeletons only during actual loading states
+
+</Tab>
+<Tab label="Implementation">
+
+```bash
+npm install @ledgerhq/lumen-ui-rnative
+```
+
+> **Note**: `@ledgerhq/lumen-design-core` and other peer dependencies (`react`, `react-native`, etc.) are required. See our [Setup Guide →](?path=/docs/getting-started-setup--docs) for complete installation.
+
+## Basic Usage
+
+```tsx
+import { Skeleton } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return <Skeleton lx={{ height: 's16', width: 's256' }} />;
+}
+```
+
+### Component Variants
+
+Use the `component` prop for pre-built skeleton patterns:
+
+```tsx
+import { Skeleton } from '@ledgerhq/lumen-ui-rnative';
+
+// List item skeleton - horizontal layout with avatar and text lines
+<Skeleton component='list-item' />
+
+// Tile skeleton - vertical centered layout
+<Skeleton component='tile' />
+```
+
+### Custom Styling
+
+While the component comes with predefined styles, you can extend them using the `lx` prop:
+
+```tsx
+<Skeleton lx={{ height: 's40', width: 's256', borderRadius: 'lg' }} />
+```
+
+### Manual Composition
+
+For custom layouts, compose multiple skeleton elements:
+
+```tsx
+import { Box, Skeleton } from '@ledgerhq/lumen-ui-rnative';
+
+<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+  <Skeleton lx={{ width: 's48', height: 's48', borderRadius: 'full' }} />
+  <Box lx={{ flex: 1, flexDirection: 'column', gap: 's8' }}>
+    <Skeleton lx={{ height: 's16', width: 's160' }} />
+    <Skeleton lx={{ height: 's16', width: 's128' }} />
+  </Box>
+</Box>
+```
+
+## Do's and Don'ts
+
+<div className='flex flex-col gap-24'>
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use component prop for common patterns'
+      description='Use pre-built variants for consistent loading states'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Skeleton component='list-item' />
+<Skeleton component='tile' />
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't manually recreate common patterns"
+      description='Avoid recreating patterns that already exist as component variants'
+    >
+
+{/* prettier-ignore */}
+```tsx
+import { Box, Skeleton } from '@ledgerhq/lumen-ui-rnative';
+
+<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+  <Skeleton lx={{ width: 's48', height: 's48', borderRadius: 'full' }} />
+  <Box lx={{ flex: 1, flexDirection: 'column', gap: 's8' }}>
+    <Skeleton lx={{ height: 's12', width: 's176' }} />
+    <Skeleton lx={{ height: 's12', width: 's112' }} />
+  </Box>
+</Box>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use lx prop for sizing'
+      description='Use design system size tokens for consistent sizing'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Skeleton lx={{ height: 's16', width: 's256' }} />
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't use arbitrary style values"
+      description='Avoid using the style prop or arbitrary values'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Skeleton style={{ height: 16, width: 200 }} />
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+</div>
+
+<CommonRulesDoAndDont />
+
+</Tab>
+</CustomTabs>