jfs-components 0.0.67 → 0.0.68

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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.68] - 2026-04-22
+
+### Added
+
+- **`Image`:** New shared raster primitive (`imageSource`, optional `ratio`, defaults to `16 / 9` so layout has a stable height without a magic `minHeight`). Supports explicit `width` + `height` to opt out of `aspectRatio` and fill a parent. Exported from the package barrel.
+
+### Changed
+
+- **`MediaCard`:** Background uses the shared `Image` via `imageSource` and `ratio`; card height follows the image in normal flow (no fixed `minHeight`). Title/footer content is an `absoluteFill` overlay with `pointerEvents="box-none"`. Optional `media` escape hatch unchanged (custom node sizes itself).
+
+---
+
 ## [0.0.67] - 2026-04-22
 
 ### Fixed

package/lib/commonjs/components/Image/Image.js

@@ -35,9 +35,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,
@@ -49,15 +50,21 @@ function Image({
 }) {
   const source = (0, _react.useMemo)(() => normalizeSource(imageSource), [imageSource]);
   const layoutStyle = (0, _react.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/commonjs/components/MediaCard/MediaCard.js

@@ -37,18 +37,21 @@ function MediaCard({
   style
 }) {
   const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/radius', modes) || '24');
-  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/gap', modes) || '0');
+
+  // 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,
-    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>.
+  // `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,
@@ -62,10 +65,11 @@ function MediaCard({
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [containerStyle, style],
-      children: [background ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [background, children != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: _reactNative.StyleSheet.absoluteFill,
-        children: background
-      }) : null, children]
+        pointerEvents: "box-none",
+        children: children
+      }) : null]
     })
   });
 }