@idealyst/blur 1.2.57 → 1.2.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/blur",
-  "version": "1.2.57",
+  "version": "1.2.58",
   "description": "Cross-platform blur component for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -35,7 +35,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.2.57",
+    "@idealyst/components": "^1.2.58",
     "@react-native-community/blur": ">=4.0.0",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0"
@@ -52,7 +52,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/components": "^1.2.57",
+    "@idealyst/components": "^1.2.58",
     "@react-native-community/blur": "^4.4.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/BlurView.web.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { BlurViewWebProps, BlurType } from './types';
+import { flattenStyle } from './flattenStyle';
 
 /**
  * Get the background color based on blur type
@@ -43,7 +44,7 @@ export const BlurView: React.FC<BlurViewWebProps> = ({
     backdropFilter: `blur(${blurAmount}px)`,
     WebkitBackdropFilter: `blur(${blurAmount}px)`,
     backgroundColor: getBackgroundColor(blurType),
-    ...(style as React.CSSProperties),
+    ...flattenStyle(style),
   };
 
   return (

package/src/flattenStyle.ts

@@ -0,0 +1,21 @@
+import type { StyleProp } from 'react-native';
+
+/**
+ * Flattens a style prop (which can be a single style, an array of styles,
+ * or nested arrays) into a single style object.
+ */
+export function flattenStyle<T extends object>(
+  style: StyleProp<T> | React.CSSProperties | undefined
+): React.CSSProperties {
+  if (!style) {
+    return {};
+  }
+
+  if (Array.isArray(style)) {
+    return style.reduce<React.CSSProperties>((acc, s) => {
+      return { ...acc, ...flattenStyle(s as StyleProp<T>) };
+    }, {});
+  }
+
+  return style as React.CSSProperties;
+}