jfs-components 0.0.69 → 0.0.70

package/lib/module/components/MediaCard/GlassFill.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
+import { BlurView } from '@react-native-community/blur';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_FALLBACK_DARK = '#1414174a';
+const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
+
+/**
+ * Glass / frosted surface for native (iOS + Android).
+ *
+ * Why this lives in its own platform-split file:
+ *   - `@react-native-community/blur` is a native-only module. Importing it on
+ *     web throws because the JS shim references native components that aren't
+ *     registered there. By using Metro's platform-extension resolution
+ *     (`GlassFill.tsx` for native, `GlassFill.web.tsx` for web), we keep the
+ *     web bundle free of any native-only imports.
+ *   - Centralizes the `intensity` (0–100) -> `blurAmount` (0–32) mapping so
+ *     callers can keep the Figma token semantics they already know.
+ *
+ * On iOS this is a real `UIVisualEffectView` (true OS-level live blur).
+ * On Android this uses the community blur view (RealtimeBlurView). On devices
+ * where realtime blur is unavailable, `reducedTransparencyFallbackColor` (and
+ * the explicit `overlayColor`) ensure the surface still renders as a
+ * translucent tinted scrim instead of disappearing.
+ */
+function GlassFill({
+  tint = 'dark',
+  intensity = 50,
+  overlayColor,
+  style
+}) {
+  const blurType = tint === 'light' ? 'light' : 'dark';
+  const blurAmount = Math.max(0, Math.min(32, Math.round(intensity * 0.32)));
+  const fallbackColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [StyleSheet.absoluteFill, style],
+    pointerEvents: "none",
+    children: [/*#__PURE__*/_jsx(BlurView, {
+      style: StyleSheet.absoluteFill,
+      blurType: blurType,
+      blurAmount: blurAmount,
+      reducedTransparencyFallbackColor: fallbackColor
+    }), overlayColor != null ? /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: overlayColor
+      }]
+    }) : null, Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: 'rgba(255,255,255,0.03)',
+        opacity: 0.6
+      }]
+    }) : null]
+  });
+}
+export default GlassFill;

package/lib/module/components/MediaCard/GlassFill.web.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_FALLBACK_DARK = '#1414174a';
+const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
+
+/**
+ * Web counterpart of `GlassFill`.
+ *
+ * `@react-native-community/blur` does not ship a web implementation, so for
+ * the web bundle we render a translucent `View` with `backdrop-filter: blur()`
+ * — which is exactly how 0.0.67 and earlier shipped the glass effect on web.
+ * Native bundles pick up `GlassFill.tsx` instead via Metro's platform
+ * resolver; the web bundle picks up this file.
+ */
+function GlassFill({
+  tint = 'dark',
+  intensity = 50,
+  overlayColor,
+  style
+}) {
+  // Approximate mapping: intensity 0-100 -> ~0-30px CSS blur. Keeps parity
+  // with the native blur strength so the component looks roughly the same
+  // across platforms.
+  const blurPx = Math.max(0, Math.min(30, Math.round(intensity * 0.3)));
+  const tintColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
+  return /*#__PURE__*/_jsx(View, {
+    style: [StyleSheet.absoluteFill, {
+      backgroundColor: tintColor
+    },
+    // backdrop-filter is a web-only CSS property; ignored by RN
+    // on native (we never bundle this file there anyway).
+    // @ts-ignore web-only style
+    {
+      backdropFilter: `blur(${blurPx}px)`,
+      WebkitBackdropFilter: `blur(${blurPx}px)`
+    }, style],
+    pointerEvents: "none"
+  });
+}
+export default GlassFill;

package/lib/module/components/MediaCard/MediaCard.js

@@ -1,10 +1,10 @@
 "use strict";
 
 import React, { createContext, useContext } from 'react';
-import { View, Text, StyleSheet, Platform } from 'react-native';
-import { BlurView } from 'expo-blur';
+import { View, Text, StyleSheet } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Image from '../Image/Image';
+import GlassFill from './GlassFill';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MediaCardContext = /*#__PURE__*/createContext({});
@@ -124,20 +124,24 @@ export function Title({
  * Glass Footer — pinned to the bottom of the card, **always** on top of the
  * Header (`zIndex: 2`).
  *
- * Glass implementation (April 2026 best practice for RN/Expo):
- *  - **iOS:** `expo-blur`'s `BlurView` renders a native `UIVisualEffectView`,
- *    so this is a real OS-level live blur of whatever's underneath. We pick
- *    `tint` from the Figma "Contrast Context" mode (`'dark'` / `'light'`)
- *    and a moderate intensity that matches the Figma `blur/minimal` token.
- *  - **Android:** the same `BlurView` with `experimentalBlurMethod="dimezisBlurView"`
- *    enables the hardware-accelerated `RenderEffect` blur on Android 12+.
- *    On older Android, expo-blur cleanly degrades to a tinted scrim — we
- *    layer a subtle noise/grain overlay on top so the surface still reads
- *    as "frosted glass" instead of a flat color.
- *  - **Web:** `BlurView` on web is implemented as `backdrop-filter: blur()`,
- *    which already worked in the previous version. Same component, same API.
+ * Glass implementation:
+ *  - **iOS / Android:** `<GlassFill>` (this folder) wraps
+ *    `@react-native-community/blur`'s `BlurView`. iOS gets a real
+ *    `UIVisualEffectView` (live OS blur); Android gets the community
+ *    `RealtimeBlurView` with a token-driven tinted scrim fallback for
+ *    devices where realtime blur is unavailable.
+ *  - **Web:** the platform-extension file `GlassFill.web.tsx` renders a
+ *    translucent View with `backdrop-filter: blur()` — Metro picks the
+ *    correct file automatically, so the web bundle never imports the
+ *    native-only blur module.
  *
- * Tokens still drive the tint color, blur radius and inner spacing.
+ * Why we don't use `expo-blur`: it requires Expo Modules autolinking on the
+ * consumer side (`use_expo_modules!` / `ExpoModulesPackage`), which silently
+ * breaks bare React Native apps that just install this library and run
+ * `pod install`. `@react-native-community/blur` is a regular RN native
+ * module — autolinking handles it with no additional setup.
+ *
+ * Tokens still drive the tint color, blur intensity and inner spacing.
  */
 export function Footer({
   children,
@@ -151,10 +155,14 @@ export function Footer({
   const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes) || '12');
 
   // Figma tokens:
-  //   blur/minimal/background -> tint laid over the native blur
-  //   blur/minimal            -> blur radius (px). expo-blur takes a 0-100
-  //                              "intensity" instead of px; we map roughly:
-  //                              intensity ≈ clamp(radius * 1.7, 0, 100).
+  //   blur/minimal/background -> tint laid over the live blur, also used
+  //                              as the iOS reduced-transparency fallback.
+  //   blur/minimal            -> blur radius (px). The community BlurView
+  //                              uses `blurAmount` (~0-32). `GlassFill`
+  //                              accepts a 0-100 "intensity" (kept compat
+  //                              with the previous expo-blur scale) and
+  //                              maps it internally — here we convert the
+  //                              token's radius to that intensity scale.
   const glassBgColor = getVariableByName('blur/minimal/background', modes) || '#1414174a';
   const blurRadius = parseFloat(getVariableByName('blur/minimal', modes) || '29');
   const intensity = Math.max(0, Math.min(100, Math.round(blurRadius * 1.7)));
@@ -175,22 +183,11 @@ export function Footer({
       zIndex: 2
     }, style],
     pointerEvents: "box-none",
-    children: [/*#__PURE__*/_jsx(BlurView, {
-      style: StyleSheet.absoluteFill,
+    children: [/*#__PURE__*/_jsx(GlassFill, {
       tint: tint,
       intensity: intensity,
-      experimentalBlurMethod: "dimezisBlurView"
+      overlayColor: glassBgColor
     }), /*#__PURE__*/_jsx(View, {
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: glassBgColor
-      }]
-    }), Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: 'rgba(255,255,255,0.03)',
-        opacity: 0.6
-      }],
-      pointerEvents: "none"
-    }) : null, /*#__PURE__*/_jsx(View, {
       style: {
         flexDirection: 'row',
         alignItems: 'center',