@ledgerhq/lumen-ui-rnative 0.0.73 → 0.0.75

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/dist/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/dist/src/lib/Components/BaseInput/BaseInput.js

@@ -82,6 +82,7 @@ const useStyles = ({ hasError, isFocused, isEditable, hasLabel, }) => {
                     overflow: 'hidden',
                 },
                 hasError && {
+                    borderWidth: 1,
                     borderColor: t.colors.border.error,
                 },
                 !isEditable && {
@@ -99,8 +100,7 @@ const useStyles = ({ hasError, isFocused, isEditable, hasLabel, }) => {
                     width: t.sizes.full,
                     color: t.colors.text.base,
                     backgroundColor: t.colors.bg.muted,
-                    outlineWidth: 0,
-                    outlineColor: 'transparent',
+                    outline: 'none',
                 },
                 hasLabel && {
                     paddingTop: t.spacings.s16,

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

@@ -6,11 +6,11 @@ import { Pressable } from '../Utility';
 const useStyles = ({ appearance, disabled, pressed, }) => {
     return useStyleSheet((t) => {
         const bgColors = {
-            base: t.colors.bg.muted,
+            base: t.colors.bg.surface,
             outline: 'transparent',
         };
         const pressedBgColors = {
-            base: t.colors.bg.mutedPressed,
+            base: t.colors.bg.surfacePressed,
             outline: t.colors.bg.baseTransparentPressed,
         };
         return {

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/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.73",
+  "version": "0.0.75",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -43,7 +43,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/BaseInput/BaseInput.tsx

@@ -192,6 +192,7 @@ const useStyles = ({
             overflow: 'hidden',
           },
           hasError && {
+            borderWidth: 1,
             borderColor: t.colors.border.error,
           },
           !isEditable && {
@@ -209,8 +210,7 @@ const useStyles = ({
             width: t.sizes.full,
             color: t.colors.text.base,
             backgroundColor: t.colors.bg.muted,
-            outlineWidth: 0,
-            outlineColor: 'transparent',
+            outline: 'none',
           },
           hasLabel && {
             paddingTop: t.spacings.s16,

package/src/lib/Components/CardButton/CardButton.tsx

@@ -19,12 +19,12 @@ const useStyles = ({
   return useStyleSheet(
     (t) => {
       const bgColors: Record<Appearance, string> = {
-        base: t.colors.bg.muted,
+        base: t.colors.bg.surface,
         outline: 'transparent',
       };
 
       const pressedBgColors: Record<Appearance, string> = {
-        base: t.colors.bg.mutedPressed,
+        base: t.colors.bg.surfacePressed,
         outline: t.colors.bg.baseTransparentPressed,
       };
 

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: {