@ledgerhq/lumen-ui-rnative 0.0.72 → 0.0.74

package/.storybook/main.ts

@@ -28,7 +28,7 @@ const config: StorybookConfig = {
       ...config.resolve.alias,
       'react-native': 'react-native-web',
       'react-native-svg': 'react-native-svg-web',
-      '@react-native-community/blur': fileURLToPath(
+      '@sbaiahmed1/react-native-blur': fileURLToPath(
         new URL('./mocks/blur.tsx', import.meta.url),
       ),
     };

package/.storybook/mocks/blur.tsx

@@ -2,9 +2,20 @@ import { View, ViewProps } from 'react-native';
 
 /**
  * Mock BlurView for web/storybook
- * @react-native-community/blur doesn't work on web, so we use a simple View
+ * @sbaiahmed1/react-native-blur doesn't work on web, so we use a simple View
  */
-export const BlurView = (props: ViewProps & { blurAmount?: number }) => {
-  const { blurAmount: _blurAmount, ...restProps } = props;
+export const BlurView = (
+  props: ViewProps & {
+    blurAmount?: number;
+    blurType?: string;
+    overlayColor?: string;
+  },
+) => {
+  const {
+    blurAmount: _blurAmount,
+    blurType: _blurType,
+    overlayColor: _overlayColor,
+    ...restProps
+  } = props;
   return <View {...restProps} />;
 };

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.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,13 +37,13 @@
   "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",
     "react-native-safe-area-context": "^4.0.0 || ^5.0.0",
     "react-native-svg": "^15.0.0",
-    "@react-native-community/blur": "^4.4.1"
+    "@sbaiahmed1/react-native-blur": "^4.5.5"
   },
   "nx": {
     "tags": [

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/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;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"}
+{"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,2CAsFb"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BlurView } from '@react-native-community/blur';
+import { BlurView } from '@sbaiahmed1/react-native-blur';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { StyleSheet, Text } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withSequence, withTiming, } from 'react-native-reanimated';
@@ -127,7 +127,9 @@ export function TabBar({ active, onTabPress, children, ...props }) {
         width: itemWidth.value,
         height: itemHeight.value - PILL_INSET * 2,
     }), [pillProgress, itemWidth, itemHeight]);
-    return (_jsx(TabBarContextProvider, { value: { active, onTabPress: handleTabPress }, children: _jsxs(Box, { style: styles.container, onLayout: onLayout, accessibilityRole: 'tablist', ...props, children: [children, _jsx(BlurView, { style: styles.blur, blurAmount: theme.blur.md, blurType: colorScheme === 'dark' ? 'dark' : 'light' }), _jsx(Animated.View, { style: [styles.pill, animatedPillStyle] })] }) }));
+    return (_jsx(TabBarContextProvider, { value: { active, onTabPress: handleTabPress }, children: _jsxs(Box, { style: styles.container, onLayout: onLayout, accessibilityRole: 'tablist', ...props, children: [children, _jsx(BlurView, { style: styles.blur, blurAmount: theme.blur.lg, blurType: colorScheme === 'dark' ? 'dark' : 'light', overlayColor: colorScheme === 'dark'
+                        ? 'rgba(0,0,0,0.15)'
+                        : 'rgba(255,255,255,0.2)' }), _jsx(Animated.View, { style: [styles.pill, animatedPillStyle] })] }) }));
 }
 const useStyles = () => useStyleSheet((t) => ({
     container: {
@@ -142,6 +144,7 @@ const useStyles = () => useStyleSheet((t) => ({
     },
     blur: {
         ...StyleSheet.absoluteFillObject,
+        bottom: -2,
         zIndex: -1,
     },
     item: {

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/jest.config.ts

@@ -6,6 +6,7 @@ const transformIncludePatterns = [
   'react-native-reanimated',
   '(jest-)?react-native',
   '@react-native(-community)?',
+  '@sbaiahmed1/react-native-blur',
 ];
 
 export default {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "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,13 +37,13 @@
   "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",
     "react-native-safe-area-context": "^4.0.0 || ^5.0.0",
     "react-native-svg": "^15.0.0",
-    "@react-native-community/blur": "^4.4.1"
+    "@sbaiahmed1/react-native-blur": "^4.5.5"
   },
   "nx": {
     "tags": [

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/TabBar/TabBar.mdx

@@ -17,7 +17,7 @@ import { Box } from '../Utility';
 
 TabBar is an animated navigation component that allows users to switch between different pages, views and sections. It features smooth transitions, blur effects, and customizable icons for each tab. Designed specifically for React Native applications, it seamlessly integrates with React Navigation and Expo Router.
 
-> **Note:** This component uses `react-native-reanimated` for animations and `@react-native-community/blur` for visual effects. These native libraries have limited support in web-based Storybook environments and may not render with full fidelity. For the complete experience with all animations and blur effects, please test the component in the native sandbox app on iOS or Android.
+> **Note:** This component uses `react-native-reanimated` for animations and `@sbaiahmed1/react-native-blur` for visual effects. These native libraries have limited support in web-based Storybook environments and may not render with full fidelity. For the complete experience with all animations and blur effects, please test the component in the native sandbox app on iOS or Android.
 
 > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10804-1045&m=dev).
 

package/src/lib/Components/TabBar/TabBar.tsx

@@ -1,4 +1,4 @@
-import { BlurView } from '@react-native-community/blur';
+import { BlurView } from '@sbaiahmed1/react-native-blur';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { LayoutChangeEvent, StyleSheet, Text } from 'react-native';
 import Animated, {
@@ -227,8 +227,13 @@ export function TabBar({
         {children}
         <BlurView
           style={styles.blur}
-          blurAmount={theme.blur.md}
+          blurAmount={theme.blur.lg}
           blurType={colorScheme === 'dark' ? 'dark' : 'light'}
+          overlayColor={
+            colorScheme === 'dark'
+              ? 'rgba(0,0,0,0.15)'
+              : 'rgba(255,255,255,0.2)'
+          }
         />
         <Animated.View style={[styles.pill, animatedPillStyle]} />
       </Box>
@@ -251,6 +256,7 @@ const useStyles = () =>
       },
       blur: {
         ...StyleSheet.absoluteFillObject,
+        bottom: -2,
         zIndex: -1,
       },
       item: {

package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx

@@ -114,8 +114,6 @@ export const WithMultipleStops: Story = {
     },
   },
   render: (args) => {
-    const { theme } = useTheme();
-    console.log({ theme });
     return (
       <Box lx={{ gap: 's12' }}>
         <LinearGradient {...args} />