jfs-components 0.0.69 → 0.0.70

package/lib/typescript/src/components/MediaCard/GlassFill.d.ts

@@ -0,0 +1,47 @@
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type GlassTint = 'dark' | 'light';
+export interface GlassFillProps {
+    /**
+     * Visual tint of the glass surface. Maps to `BlurView`'s `blurType`
+     * (`'dark'` | `'light'`). The library also drives the appropriate
+     * `reducedTransparencyFallbackColor` from this so iOS gracefully degrades
+     * when "Reduce Transparency" is enabled in system accessibility settings.
+     */
+    tint?: GlassTint;
+    /**
+     * Blur strength as a 0–100 "intensity" value (kept compatible with the
+     * previous `expo-blur` API so consumers don't need to relearn the scale).
+     * Internally mapped to `@react-native-community/blur`'s `blurAmount`,
+     * which is roughly 0–32 on iOS / Android.
+     */
+    intensity?: number;
+    /**
+     * Token-derived color tint laid OVER the live blur (Figma `blur/minimal/background`).
+     * Painted as a translucent overlay so the glass keeps the design system
+     * color signature even when the platform blur quality varies.
+     */
+    overlayColor?: string;
+    /** Container style overrides. Defaults to `StyleSheet.absoluteFill`. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * 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.
+ */
+declare function GlassFill({ tint, intensity, overlayColor, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
+export default GlassFill;
+//# sourceMappingURL=GlassFill.d.ts.map

package/lib/typescript/src/components/MediaCard/GlassFill.web.d.ts

@@ -0,0 +1,20 @@
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type GlassTint = 'dark' | 'light';
+export interface GlassFillProps {
+    tint?: GlassTint;
+    intensity?: number;
+    overlayColor?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * 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.
+ */
+declare function GlassFill({ tint, intensity, overlayColor, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
+export default GlassFill;
+//# sourceMappingURL=GlassFill.web.d.ts.map

package/lib/typescript/src/components/MediaCard/MediaCard.d.ts

@@ -83,20 +83,24 @@ export declare function Title({ children, style, modes: propModes }: {
  * 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 declare function Footer({ children, style, modes: propModes }: {
     children?: React.ReactNode;

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-04-22T12:14:37.458Z
+ * Generated: 2026-04-23T10:31:30.721Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -86,7 +86,6 @@
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
     "expo": "^54.0.33",
-    "expo-blur": "~15.0.8",
     "patch-package": "^8.0.1",
     "react-native-gesture-handler": "^2.29.1",
     "react-native-reanimated": "3.18.1",
@@ -96,6 +95,7 @@
     "react-native-worklets": "0.5.1"
   },
   "peerDependencies": {
+    "@react-native-community/blur": ">=4.4.0",
     "react": "*",
     "react-native": "*"
   },
@@ -106,6 +106,7 @@
     "@babel/preset-react": "^7.28.5",
     "@babel/runtime": "^7.28.4",
     "@babel/traverse": "^7.28.5",
+    "@react-native-community/blur": "^4.4.1",
     "@react-native-community/cli": "20.0.2",
     "@react-native-community/cli-platform-android": "20.0.2",
     "@react-native-community/cli-platform-ios": "20.0.2",

package/src/components/MediaCard/GlassFill.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { View, StyleSheet, Platform, type ViewStyle, type StyleProp } from 'react-native'
+import { BlurView } from '@react-native-community/blur'
+
+export type GlassTint = 'dark' | 'light'
+
+export interface GlassFillProps {
+    /**
+     * Visual tint of the glass surface. Maps to `BlurView`'s `blurType`
+     * (`'dark'` | `'light'`). The library also drives the appropriate
+     * `reducedTransparencyFallbackColor` from this so iOS gracefully degrades
+     * when "Reduce Transparency" is enabled in system accessibility settings.
+     */
+    tint?: GlassTint
+    /**
+     * Blur strength as a 0–100 "intensity" value (kept compatible with the
+     * previous `expo-blur` API so consumers don't need to relearn the scale).
+     * Internally mapped to `@react-native-community/blur`'s `blurAmount`,
+     * which is roughly 0–32 on iOS / Android.
+     */
+    intensity?: number
+    /**
+     * Token-derived color tint laid OVER the live blur (Figma `blur/minimal/background`).
+     * Painted as a translucent overlay so the glass keeps the design system
+     * color signature even when the platform blur quality varies.
+     */
+    overlayColor?: string
+    /** Container style overrides. Defaults to `StyleSheet.absoluteFill`. */
+    style?: StyleProp<ViewStyle>
+}
+
+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,
+}: GlassFillProps) {
+    const blurType: 'light' | 'dark' = 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 (
+        <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
+            <BlurView
+                style={StyleSheet.absoluteFill}
+                blurType={blurType}
+                blurAmount={blurAmount}
+                reducedTransparencyFallbackColor={fallbackColor}
+            />
+            {overlayColor != null ? (
+                <View style={[StyleSheet.absoluteFill, { backgroundColor: overlayColor }]} />
+            ) : null}
+            {Platform.OS === 'android' ? (
+                <View
+                    style={[
+                        StyleSheet.absoluteFill,
+                        {
+                            backgroundColor: 'rgba(255,255,255,0.03)',
+                            opacity: 0.6,
+                        },
+                    ]}
+                />
+            ) : null}
+        </View>
+    )
+}
+
+export default GlassFill

package/src/components/MediaCard/GlassFill.web.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native'
+
+export type GlassTint = 'dark' | 'light'
+
+export interface GlassFillProps {
+    tint?: GlassTint
+    intensity?: number
+    overlayColor?: string
+    style?: StyleProp<ViewStyle>
+}
+
+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,
+}: GlassFillProps) {
+    // 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 (
+        <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/src/components/MediaCard/MediaCard.tsx

@@ -1,8 +1,8 @@
 import React, { createContext, useContext } from 'react'
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType, Platform } from 'react-native'
-import { BlurView, type BlurTint } from 'expo-blur'
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Image from '../Image/Image'
+import GlassFill, { type GlassTint } from './GlassFill'
 import { EMPTY_MODES } from '../../utils/react-utils'
 
 const MediaCardContext = createContext<{ modes?: Record<string, any> }>({})
@@ -162,20 +162,24 @@ export function Title({ children, style, modes: propModes }: { children?: React.
  * 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, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
     const context = useContext(MediaCardContext)
@@ -186,10 +190,14 @@ export function Footer({ children, style, modes: propModes }: { children?: React
     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)))
@@ -197,7 +205,7 @@ export function Footer({ children, style, modes: propModes }: { children?: React
     // Pick the iOS/Android material tint from "Contrast Context" mode so the
     // glass adapts to dark/light backgrounds the same way the Figma tokens do.
     const contrast = (modes['Contrast Context'] || 'on dark') as string
-    const tint: BlurTint = contrast === 'on light' ? 'light' : 'dark'
+    const tint: GlassTint = contrast === 'on light' ? 'light' : 'dark'
 
     return (
         <View
@@ -216,34 +224,7 @@ export function Footer({ children, style, modes: propModes }: { children?: React
             ]}
             pointerEvents="box-none"
         >
-            {/* Native live blur. On Android pre-12 expo-blur falls back to a
-                tinted scrim automatically; on web it's a backdrop-filter. */}
-            <BlurView
-                style={StyleSheet.absoluteFill}
-                tint={tint}
-                intensity={intensity}
-                experimentalBlurMethod="dimezisBlurView"
-            />
-
-            {/* Token-driven tint laid on top of the live blur — keeps the
-                Figma color signature regardless of platform blur quality. */}
-            <View style={[StyleSheet.absoluteFill, { backgroundColor: glassBgColor }]} />
-
-            {/* Subtle noise/grain on Android only, to compensate for the
-                lower-fidelity blur — purely additive, no behavior change.
-                On iOS/web the native blur already has natural texture. */}
-            {Platform.OS === 'android' ? (
-                <View
-                    style={[
-                        StyleSheet.absoluteFill,
-                        {
-                            backgroundColor: 'rgba(255,255,255,0.03)',
-                            opacity: 0.6,
-                        },
-                    ]}
-                    pointerEvents="none"
-                />
-            ) : null}
+            <GlassFill tint={tint} intensity={intensity} overlayColor={glassBgColor} />
 
             <View
                 style={{

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-04-22T12:14:37.458Z
+ * Generated: 2026-04-23T10:31:30.721Z
  */
 
 // Icon name to SVG data mapping