jfs-components 0.0.68 → 0.0.70

package/CHANGELOG.md

@@ -4,6 +4,43 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.0.70] - 2026-04-23
+
+### Fixed
+
+- **`MediaCard.Footer` blur on bare React Native:** `0.0.69` shipped the glass footer using `expo-blur`, which silently required consumers to integrate Expo Modules autolinking (`use_expo_modules!` in `Podfile`, `ExpoModulesPackage` on Android). Bare React Native apps that just installed the library and ran `pod install` hit two failures: a runtime "`Cannot read property 'BlurView' of undefined`" red box on Android and an iOS Xcode build failure after `pod install`. **Replaced `expo-blur` with [`@react-native-community/blur`](https://github.com/Kureev/react-native-blur)** — a regular React Native native module handled by standard autolinking. No Expo runtime required.
+
+### Changed
+
+- **`MediaCard.Footer` glass implementation:** Native blur now lives in a small platform-split helper, `MediaCard/GlassFill.tsx` (iOS + Android via the community blur module) and `MediaCard/GlassFill.web.tsx` (`backdrop-filter` via inline style). Metro picks the correct file per platform, so the web bundle never imports the native-only blur module. The Footer's API and design-token contract (`blur/minimal/background`, `blur/minimal`, `Contrast Context` mode) are unchanged.
+
+### Removed
+
+- **`expo-blur`** is no longer a runtime dependency.
+
+### Dependencies
+
+- **`@react-native-community/blur`** (`>=4.4.0`) added as a **peer dependency**. Consumers must install it once: `npm install @react-native-community/blur && cd ios && pod install`. On Expo, use `npx expo install @react-native-community/blur` and prebuild.
+
+---
+
+## [0.0.69] - 2026-04-22
+
+### Changed
+
+- **`MediaCard.Header` / `MediaCard.Footer`:** Both are now **absolutely positioned overlays**. The footer is pinned to the bottom of the card with `zIndex: 2`, so a title that wraps to any number of lines (or overflows the card entirely) **never pushes the footer**. The footer is also painted above the header. Header/footer wrappers use `pointerEvents="box-none"` so taps still land on interactive children inside.
+- **`MediaCard.Footer` glass effect:** Replaced the previous solid-color "glass" with a real native blur via `expo-blur`'s `BlurView`. iOS uses `UIVisualEffectView` (true OS-level live blur). Android opts into `experimentalBlurMethod="dimezisBlurView"` for hardware-accelerated `RenderEffect` blur on Android 12+, with an automatic tinted-scrim fallback below that — plus a subtle additive overlay on Android only to add texture and avoid a flat look. Web continues to use `backdrop-filter` (now via the same `BlurView` API). Tint adapts to the `Contrast Context` mode.
+
+### Added
+
+- **`MediaCard.LongTitleDoesNotPushFooter` story:** Stress test demonstrating that a wrapping multi-line title leaves the footer pinned to the bottom.
+
+### Dependencies
+
+- **`expo-blur`** added as a runtime dependency (compatible with Expo SDK 54). Required by the new `MediaCard.Footer` glass implementation. Consumers using the prebuilt iOS/Android binaries from Expo SDK 54 already have the native module available; bare React Native consumers need to run a dev client / pod install after upgrading.
+
+---
+
 ## [0.0.68] - 2026-04-22
 
 ### Added

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

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _blur = require("@react-native-community/blur");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [_reactNative.StyleSheet.absoluteFill, style],
+    pointerEvents: "none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blur.BlurView, {
+      style: _reactNative.StyleSheet.absoluteFill,
+      blurType: blurType,
+      blurAmount: blurAmount,
+      reducedTransparencyFallbackColor: fallbackColor
+    }), overlayColor != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        backgroundColor: overlayColor
+      }]
+    }) : null, _reactNative.Platform.OS === 'android' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        backgroundColor: 'rgba(255,255,255,0.03)',
+        opacity: 0.6
+      }]
+    }) : null]
+  });
+}
+var _default = exports.default = GlassFill;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [_reactNative.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"
+  });
+}
+var _default = exports.default = GlassFill;

package/lib/commonjs/components/MediaCard/MediaCard.js

@@ -14,6 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Image = _interopRequireDefault(require("../Image/Image"));
+var _GlassFill = _interopRequireDefault(require("./GlassFill"));
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -22,11 +23,20 @@ const MediaCardContext = /*#__PURE__*/(0, _react.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.
  */
 function MediaCard({
   imageSource,
@@ -37,21 +47,11 @@ function MediaCard({
   style
 }) {
   const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/radius', modes) || '24');
-
-  // No magic minHeight, no aspectRatio on the container. The card simply
-  // hugs whatever the background renders at: the <Image> sits in normal
-  // flow with `aspectRatio: ratio`, so its rendered height becomes the
-  // card's height. Header and Footer are absolutely positioned overlays
-  // and don't contribute to layout.
   const containerStyle = {
     borderRadius: radius,
     overflow: 'hidden',
     position: 'relative'
   };
-
-  // `media` wins as an escape hatch (gradient/video/etc.). Otherwise we
-  // delegate to the shared <Image> for image-source backgrounds. The
-  // background renders in normal flow so its height drives the card.
   const background = media ?? (imageSource != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
     imageSource: imageSource,
     ratio: ratio,
@@ -79,33 +79,26 @@ 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.
  */
 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__*/(0, _jsxRuntime.jsx)(_reactNative.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
   });
 }
@@ -140,8 +133,27 @@ 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:
+ *  - **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.
+ *
+ * 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.
  */
 function Footer({
   children,
@@ -154,28 +166,49 @@ function Footer({
   const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/padding/horizontal', modes) || '16');
   const paddingVertical = parseFloat((0, _figmaVariablesResolver.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 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 = (0, _figmaVariablesResolver.getVariableByName)('blur/minimal/background', modes) || '#1414174a';
   const blurRadius = parseFloat((0, _figmaVariablesResolver.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
-    ...(_reactNative.Platform.OS === 'web' ? {
-      backdropFilter: `blur(${blurRadius}px)`
-    } : {})
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
+      tint: tint,
+      intensity: intensity,
+      overlayColor: glassBgColor
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap,
+        paddingHorizontal,
+        paddingVertical
+      },
+      children: children
+    })]
   });
 }