jfs-components 0.0.67 → 0.0.69

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

@@ -10,8 +10,12 @@ export type ImageProps = {
     imageSource?: ImageSourcePropType | string | undefined;
     /**
      * Width-to-height aspect ratio as a number, e.g. `16 / 9`, `1`, `4 / 3`.
-     * When set, the image lays out using `aspectRatio` so it scales naturally
-     * with whatever width it receives — no need to specify height.
+     * Defaults to `16 / 9` so the image always has a sensible rendered height
+     * even when the parent has no fixed height (e.g. inside `MediaCard`,
+     * which hugs whatever the image renders at).
+     *
+     * Pass `ratio={null as any}` is not supported — explicitly set a number,
+     * or override with `width` + `height` if you need a non-aspect layout.
      *
      * Equivalent CSS: `aspect-ratio: <ratio>`.
      */
@@ -35,25 +39,6 @@ export type ImageProps = {
     accessibilityElementsHidden?: boolean | undefined;
     importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants' | undefined;
 };
-/**
- * `Image` — the library's standard raster image primitive.
- *
- * Why this exists:
- *  - Gives consumers a single component for "show an image at a given aspect
- *    ratio inside a flex container" without having to remember the
- *    `width:'100%' / height:'100%' / resizeMode:'cover'` boilerplate.
- *  - Centralizes URL-vs-`{uri}` normalization that several components were
- *    re-implementing.
- *  - Uses the same `imageSource` prop name as the rest of the library
- *    (`Avatar`, `ProductLabel`, `CardProviderInfo`, ...) for a unified API.
- *
- * Layout rules:
- *  - If `ratio` is provided, the image lays out with `aspectRatio: ratio`
- *    and (unless `width` is given) fills the parent's width.
- *  - If neither `ratio` nor explicit dimensions are given, the image fills
- *    its parent (`width: '100%'`, `height: '100%'`) — same default as the
- *    most common usage in this library (background media, hero images).
- */
 declare function Image({ imageSource, ratio, resizeMode, width, height, borderRadius, style, accessibilityLabel, accessibilityElementsHidden, importantForAccessibility, }: ImageProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Image>;
 export default _default;

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

@@ -36,11 +36,20 @@ export interface MediaCardProps {
 /**
  * MediaCard component implementation from Figma node 1241:4140.
  *
- * Features a background media slot, a large title, and a glass-morphism footer.
- *
- * The background can be supplied either as `imageSource` (preferred — uses
- * the shared `<Image>` primitive under the hood) or as a custom `media` node
- * for non-image backgrounds.
+ * Layout contract (important — read this before editing):
+ *  - The **background** (image or custom `media`) is the only child in
+ *    normal flow. It dictates the card's height — typically via
+ *    `aspectRatio` on the inner `<Image>`. There is no `minHeight`.
+ *  - `Header` and `Footer` are **absolutely positioned overlays**:
+ *      - `Header` pinned to top-left/right with safe padding.
+ *      - `Footer` pinned to bottom-left/right with `zIndex: 2` so it sits
+ *        on top of the header (and on top of the image). This guarantees
+ *        the footer never moves no matter how many lines the title wraps
+ *        to — the title may overflow the header bounds, but the footer's
+ *        position is a function of the card box, not the title.
+ *  - `pointerEvents="box-none"` is applied so taps still land on the
+ *    interactive elements inside the overlays without the wrapper itself
+ *    capturing them.
  */
 export declare function MediaCard({ imageSource, ratio, media, children, modes, style, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MediaCard {
@@ -51,9 +60,11 @@ export declare namespace MediaCard {
     var FooterSubtitle: typeof import("./MediaCard").FooterSubtitle;
 }
 /**
- * Header/Title Wrapper
- * It seems the title is just floating at the top with padding.
- * Figma: "title wrap" p-[16px]
+ * Header overlay — pinned to the top of the card. Title content can wrap to
+ * any number of lines without affecting the footer's position; if it grows
+ * taller than the card, the card's `overflow: 'hidden'` clips it.
+ *
+ * Default `padding: 16` matches the Figma "title wrap" spec.
  */
 export declare function Header({ children, style }: {
     children?: React.ReactNode;
@@ -69,8 +80,23 @@ export declare function Title({ children, style, modes: propModes }: {
     modes?: Record<string, any>;
 }): import("react/jsx-runtime").JSX.Element;
 /**
- * Glass Footer Component
- * Tokens: cardMedia/footer/*, glass/minimal, blur/minimal
+ * 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.
+ *
+ * Tokens still drive the tint color, blur radius 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-22T11:47:15.563Z
+ * Generated: 2026-04-22T12:14:37.458Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.67",
+  "version": "0.0.69",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -86,6 +86,7 @@
     "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",

package/src/components/Image/Image.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react'
 import {
   Image as RNImage,
   View,
-  StyleSheet,
   type ImageSourcePropType,
   type ImageStyle,
   type StyleProp,
@@ -20,8 +19,12 @@ export type ImageProps = {
   imageSource?: ImageSourcePropType | string | undefined
   /**
    * Width-to-height aspect ratio as a number, e.g. `16 / 9`, `1`, `4 / 3`.
-   * When set, the image lays out using `aspectRatio` so it scales naturally
-   * with whatever width it receives — no need to specify height.
+   * Defaults to `16 / 9` so the image always has a sensible rendered height
+   * even when the parent has no fixed height (e.g. inside `MediaCard`,
+   * which hugs whatever the image renders at).
+   *
+   * Pass `ratio={null as any}` is not supported — explicitly set a number,
+   * or override with `width` + `height` if you need a non-aspect layout.
    *
    * Equivalent CSS: `aspect-ratio: <ratio>`.
    */
@@ -78,9 +81,11 @@ function normalizeSource(
  *    its parent (`width: '100%'`, `height: '100%'`) — same default as the
  *    most common usage in this library (background media, hero images).
  */
+const DEFAULT_RATIO = 16 / 9
+
 function Image({
   imageSource,
-  ratio,
+  ratio = DEFAULT_RATIO,
   resizeMode = 'cover',
   width,
   height,
@@ -93,14 +98,15 @@ function Image({
   const source = useMemo(() => normalizeSource(imageSource), [imageSource])
 
   const layoutStyle: ImageStyle = useMemo(() => {
-    const s: ImageStyle = {}
-    if (ratio != null) {
-      s.aspectRatio = ratio
-      s.width = width ?? '100%'
-      if (height != null) s.height = height
-    } else {
-      s.width = width ?? '100%'
-      s.height = height ?? '100%'
+    // If the caller has fully specified width AND height, they're doing a
+    // non-aspect layout (e.g. "fill the parent") — respect that and skip
+    // `aspectRatio` so it doesn't conflict.
+    const isExplicitBox = width != null && height != null
+    const s: ImageStyle = {
+      width: width ?? '100%',
+      ...(isExplicitBox
+        ? { height: height as number }
+        : { aspectRatio: ratio, ...(height != null ? { height } : {}) }),
     }
     if (borderRadius != null) s.borderRadius = borderRadius
     return s

package/src/components/MediaCard/MediaCard.tsx

@@ -1,5 +1,6 @@
 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 { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Image from '../Image/Image'
 import { EMPTY_MODES } from '../../utils/react-utils'
@@ -43,11 +44,20 @@ export interface MediaCardProps {
 /**
  * MediaCard component implementation from Figma node 1241:4140.
  *
- * Features a background media slot, a large title, and a glass-morphism footer.
- *
- * The background can be supplied either as `imageSource` (preferred — uses
- * the shared `<Image>` primitive under the hood) or as a custom `media` node
- * for non-image backgrounds.
+ * Layout contract (important — read this before editing):
+ *  - The **background** (image or custom `media`) is the only child in
+ *    normal flow. It dictates the card's height — typically via
+ *    `aspectRatio` on the inner `<Image>`. There is no `minHeight`.
+ *  - `Header` and `Footer` are **absolutely positioned overlays**:
+ *      - `Header` pinned to top-left/right with safe padding.
+ *      - `Footer` pinned to bottom-left/right with `zIndex: 2` so it sits
+ *        on top of the header (and on top of the image). This guarantees
+ *        the footer never moves no matter how many lines the title wraps
+ *        to — the title may overflow the header bounds, but the footer's
+ *        position is a function of the card box, not the title.
+ *  - `pointerEvents="box-none"` is applied so taps still land on the
+ *    interactive elements inside the overlays without the wrapper itself
+ *    capturing them.
  */
 export function MediaCard({
     imageSource,
@@ -58,19 +68,13 @@ export function MediaCard({
     style,
 }: MediaCardProps) {
     const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24')
-    const gap = parseFloat(getVariableByName('cardMedia/gap', modes) || '0')
 
     const containerStyle: ViewStyle = {
         borderRadius: radius,
-        gap,
         overflow: 'hidden',
         position: 'relative',
-        minHeight: 308,
     }
 
-    // `media` wins for back-compat / custom nodes; otherwise we delegate to
-    // the shared <Image> for image-source backgrounds. All raster-rendering
-    // concerns (URL-vs-{uri}, resizeMode, aspect-ratio) live in <Image>.
     const background = media ?? (
         imageSource != null ? (
             <Image
@@ -86,11 +90,12 @@ export function MediaCard({
     return (
         <MediaCardContext.Provider value={{ modes }}>
             <View style={[containerStyle, style]}>
-                {background ? (
-                    <View style={StyleSheet.absoluteFill}>{background}</View>
+                {background}
+                {children != null ? (
+                    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+                        {children}
+                    </View>
                 ) : null}
-
-                {children}
             </View>
         </MediaCardContext.Provider>
     )
@@ -101,25 +106,28 @@ export function MediaCard({
 // ----------------------------------------------------------------------------
 
 /**
- * Header/Title Wrapper
- * It seems the title is just floating at the top with padding.
- * Figma: "title wrap" p-[16px]
+ * Header overlay — pinned to the top of the card. Title content can wrap to
+ * any number of lines without affecting the footer's position; if it grows
+ * taller than the card, the card's `overflow: 'hidden'` clips it.
+ *
+ * Default `padding: 16` matches the Figma "title wrap" spec.
  */
 export function Header({ children, style }: { children?: React.ReactNode; style?: StyleProp<ViewStyle> }) {
-    // NOTE: the previous `flex: 1` shorthand expanded on Yoga (Android) to
-    // `{ flexGrow: 1, flexShrink: 1, flexBasis: 0 }`. With `flexBasis: 0` the
-    // Header has *no intrinsic floor*, so when MediaCard is placed inside a
-    // height-unbounded parent — e.g. a Carousel slot whose contentContainer
-    // is `alignItems: 'flex-start'` — Yoga's first measurement pass sizes
-    // the Header at 0 and the card's overall height becomes non-deterministic.
-    // On native this manifests as the card "over-stretching" vertically (the
-    // same Yoga foot-gun we fixed in `CardCTA` rightWrap). Web hides it
-    // because browsers honor `min-height: auto` on flex items. Use explicit
-    // `flexGrow / flexShrink: 0 / flexBasis: 'auto'` so the Header is sized
-    // to its content as a floor and only grows to consume the extra space
-    // contributed by `MediaCard`'s `minHeight: 308`.
     return (
-        <View style={[{ padding: 16, flexGrow: 1, flexShrink: 0, flexBasis: 'auto' }, style]}>
+        <View
+            style={[
+                {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    padding: 16,
+                    zIndex: 1,
+                },
+                style,
+            ]}
+            pointerEvents="box-none"
+        >
             {children}
         </View>
     )
@@ -151,8 +159,23 @@ export function Title({ children, style, modes: propModes }: { children?: React.
 }
 
 /**
- * Glass Footer Component
- * Tokens: cardMedia/footer/*, glass/minimal, blur/minimal
+ * 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.
+ *
+ * Tokens still drive the tint color, blur radius and inner spacing.
  */
 export function Footer({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
     const context = useContext(MediaCardContext)
@@ -162,28 +185,77 @@ export function Footer({ children, style, modes: propModes }: { children?: React
     const paddingHorizontal = parseFloat(getVariableByName('cardMedia/footer/padding/horizontal', modes) || '16')
     const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes) || '12')
 
-    // Glass Effect
-    // Figma:
-    // blur/minimal/background: "#1414174a"
-    // blur/minimal: 29
+    // 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).
     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)))
 
-    const containerStyle: ViewStyle = {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap,
-        paddingHorizontal,
-        paddingVertical,
-        backgroundColor: glassBgColor,
-        // Web-specific backdrop filter for glass effect
-        // @ts-ignore
-        ...(Platform.OS === 'web' ? { backdropFilter: `blur(${blurRadius}px)` } : {}),
-    }
+    // 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'
 
     return (
-        <View style={[containerStyle, style]}>
-            {children}
+        <View
+            style={[
+                {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    overflow: 'hidden',
+                    // zIndex 2 ensures Footer always paints above Header,
+                    // regardless of which is rendered first in the tree.
+                    zIndex: 2,
+                },
+                style,
+            ]}
+            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}
+
+            <View
+                style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap,
+                    paddingHorizontal,
+                    paddingVertical,
+                }}
+            >
+                {children}
+            </View>
         </View>
     )
 }

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-22T11:47:15.563Z
+ * Generated: 2026-04-22T12:14:37.458Z
  */
 
 // Icon name to SVG data mapping