jfs-components 0.0.67 → 0.0.69

package/lib/module/components/Image/Image.js

@@ -30,9 +30,10 @@ function normalizeSource(imageSource) {
  *    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,
@@ -44,15 +45,21 @@ function Image({
 }) {
   const source = useMemo(() => normalizeSource(imageSource), [imageSource]);
   const layoutStyle = useMemo(() => {
-    const s = {};
-    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 = {
+      width: width ?? '100%',
+      ...(isExplicitBox ? {
+        height: height
+      } : {
+        aspectRatio: ratio,
+        ...(height != null ? {
+          height
+        } : {})
+      })
+    };
     if (borderRadius != null) s.borderRadius = borderRadius;
     return s;
   }, [ratio, width, height, borderRadius]);

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

@@ -2,6 +2,7 @@
 
 import React, { createContext, useContext } from 'react';
 import { View, Text, StyleSheet, Platform } from 'react-native';
+import { BlurView } from 'expo-blur';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Image from '../Image/Image';
 import { EMPTY_MODES } from '../../utils/react-utils';
@@ -10,11 +11,20 @@ const MediaCardContext = /*#__PURE__*/createContext({});
 /**
  * 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,
@@ -25,18 +35,11 @@ export function MediaCard({
   style
 }) {
   const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24');
-  const gap = parseFloat(getVariableByName('cardMedia/gap', modes) || '0');
   const containerStyle = {
     borderRadius: radius,
-    gap,
     overflow: 'hidden',
-    position: 'relative',
-    minHeight: 308
+    position: 'relative'
   };
-
-  // `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 ? /*#__PURE__*/_jsx(Image, {
     imageSource: imageSource,
     ratio: ratio,
@@ -50,10 +53,11 @@ export function MediaCard({
     },
     children: /*#__PURE__*/_jsxs(View, {
       style: [containerStyle, style],
-      children: [background ? /*#__PURE__*/_jsx(View, {
+      children: [background, children != null ? /*#__PURE__*/_jsx(View, {
         style: StyleSheet.absoluteFill,
-        children: background
-      }) : null, children]
+        pointerEvents: "box-none",
+        children: children
+      }) : null]
     })
   });
 }
@@ -63,33 +67,26 @@ 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
 }) {
-  // 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 /*#__PURE__*/_jsx(View, {
     style: [{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
       padding: 16,
-      flexGrow: 1,
-      flexShrink: 0,
-      flexBasis: 'auto'
+      zIndex: 1
     }, style],
+    pointerEvents: "box-none",
     children: children
   });
 }
@@ -124,8 +121,23 @@ export function Title({
 }
 
 /**
- * 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,
@@ -138,28 +150,56 @@ export function Footer({
   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 containerStyle = {
-    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)`
-    } : {})
-  };
-  return /*#__PURE__*/_jsx(View, {
-    style: [containerStyle, style],
-    children: children
+  const intensity = Math.max(0, Math.min(100, Math.round(blurRadius * 1.7)));
+
+  // 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';
+  const tint = contrast === 'on light' ? 'light' : 'dark';
+  return /*#__PURE__*/_jsxs(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",
+    children: [/*#__PURE__*/_jsx(BlurView, {
+      style: StyleSheet.absoluteFill,
+      tint: tint,
+      intensity: intensity,
+      experimentalBlurMethod: "dimezisBlurView"
+    }), /*#__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',
+        gap,
+        paddingHorizontal,
+        paddingVertical
+      },
+      children: children
+    })]
   });
 }