jfs-components 0.0.66 → 0.0.68

package/CHANGELOG.md

@@ -4,6 +4,26 @@ 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
+
+- **`MediaCard` in `Carousel` (Yoga / Android):** `MediaCard.Header` no longer uses `flex: 1` shorthand (`flexBasis: 0`), which made the header size to zero on the first layout pass when the card sat in a height-unbounded parent (e.g. horizontal carousel content). Replaced with explicit `flexGrow: 1`, `flexShrink: 0`, `flexBasis: 'auto'` so the header has a content-based floor, matching the Yoga fix pattern used for `CardCTA` right-wrap.
+
+---
+
 ## [0.0.65] - 2026-04-21
 
 ### Added

package/lib/commonjs/components/CardCTA/CardCTA.js

@@ -78,11 +78,23 @@ function CardCTA({
     alignItems: 'flex-start',
     justifyContent: 'center'
   };
+
+  // NOTE: rightWrap must NOT shrink on native. On Android (Yoga), the default
+  // `flex: 2` shorthand expands to `{ flexGrow: 2, flexShrink: 1, flexBasis: 0 }`,
+  // which — combined with `minWidth: 0` — lets Yoga shrink this wrapper below
+  // its own padding+IconCapsule width when leftWrap's text is long. Once that
+  // happens the horizontal padding collapses, `alignItems: 'flex-end'` pins
+  // the IconCapsule against the inner edge, and the icon ends up visually
+  // touching the body text (the wrapper "appears not to exist"). Web hides
+  // this because browsers honor `min-width: auto` on flex items. Use
+  // explicit `flexGrow`/`flexShrink: 0`/`flexBasis: 'auto'` so the wrapper
+  // is sized to its content as a floor and only grows for the design's
+  // 3:2 ratio when extra space is available. leftWrap already absorbs tight
+  // space via `flexShrink: 1` + `minWidth: 0`.
   const rightWrapStyle = {
-    flex: 2,
-    flexShrink: 1,
-    flexBasis: 0,
-    minWidth: 0,
+    flexGrow: 2,
+    flexShrink: 0,
+    flexBasis: 'auto',
     paddingHorizontal: rightPaddingH,
     paddingVertical: rightPaddingV,
     alignItems: 'flex-end',

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

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function normalizeSource(imageSource) {
+  if (imageSource == null) return undefined;
+  if (typeof imageSource === 'string') return {
+    uri: imageSource
+  };
+  return imageSource;
+}
+
+/**
+ * `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).
+ */
+const DEFAULT_RATIO = 16 / 9;
+function Image({
+  imageSource,
+  ratio = DEFAULT_RATIO,
+  resizeMode = 'cover',
+  width,
+  height,
+  borderRadius,
+  style,
+  accessibilityLabel,
+  accessibilityElementsHidden,
+  importantForAccessibility
+}) {
+  const source = (0, _react.useMemo)(() => normalizeSource(imageSource), [imageSource]);
+  const layoutStyle = (0, _react.useMemo)(() => {
+    // 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]);
+  if (!source) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [layoutStyle, style]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+    source: source,
+    style: [layoutStyle, style],
+    resizeMode: resizeMode,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityElementsHidden: accessibilityElementsHidden,
+    importantForAccessibility: importantForAccessibility
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Image);

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

@@ -13,56 +13,63 @@ exports.default = void 0;
 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 _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * Context to share 'modes' with child components.
- */const MediaCardContext = /*#__PURE__*/(0, _react.createContext)({});
+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.
  */
 function MediaCard({
+  imageSource,
+  ratio,
   media,
   children,
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
-  // Container Tokens
   const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/radius', modes) || '24');
-  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/gap', modes) || '0');
-  // Dimensions from Figma: w=369, h=308. We can make it flexible or default to these?
-  // Usually components should be flexible, but stories will constrain them.
-  // Figma context shows fixed/hug behavior. Let's start with flex container.
 
+  // 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',
-    // Default dimensions from Figma if needed, but better to let parent control or use defaults in stories.
-    // However, to match "Maximize existing component usage", we follow patterns.
-    // We'll trust the parent layout or style prop for width/height.
-    minHeight: 308 // inferred from Figma height as a good default or minimum
+    position: 'relative'
   };
-  const mediaWithModes = /*#__PURE__*/(0, _react.isValidElement)(media) ? /*#__PURE__*/(0, _react.cloneElement)(media, {
-    modes: {
-      ...media.props.modes,
-      ...modes
-    }
-  }) : media;
+
+  // `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,
+    resizeMode: "cover",
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  }) : null);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaCardContext.Provider, {
     value: {
       modes
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [containerStyle, style],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [background, children != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: _reactNative.StyleSheet.absoluteFill,
-        children: mediaWithModes
-      }), children]
+        pointerEvents: "box-none",
+        children: children
+      }) : null]
     })
   });
 }
@@ -80,10 +87,24 @@ 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: [{
       padding: 16,
-      flex: 1
+      flexGrow: 1,
+      flexShrink: 0,
+      flexBasis: 'auto'
     }, style],
     children: children
   });
@@ -129,8 +150,6 @@ function Footer({
 }) {
   const context = (0, _react.useContext)(MediaCardContext);
   const modes = propModes || context.modes || {};
-
-  // Tokens
   const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/gap', modes) || '24');
   const paddingHorizontal = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/padding/horizontal', modes) || '16');
   const paddingVertical = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/footer/padding/vertical', modes) || '12');
@@ -215,8 +234,6 @@ function FooterSubtitle({
     children: children
   });
 }
-
-// Attach sub-components
 MediaCard.Header = Header;
 MediaCard.Title = Title;
 MediaCard.Footer = Footer;

package/lib/commonjs/components/index.js

@@ -201,6 +201,12 @@ Object.defineProperty(exports, "IconCapsule", {
     return _IconCapsule.default;
   }
 });
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function () {
+    return _Image.default;
+  }
+});
 Object.defineProperty(exports, "InputSearch", {
   enumerable: true,
   get: function () {
@@ -531,6 +537,7 @@ var _HoldingsCard = _interopRequireDefault(require("./HoldingsCard/HoldingsCard"
 var _HStack = _interopRequireDefault(require("./HStack/HStack"));
 var _IconButton = _interopRequireDefault(require("./IconButton/IconButton"));
 var _IconCapsule = _interopRequireDefault(require("./IconCapsule/IconCapsule"));
+var _Image = _interopRequireDefault(require("./Image/Image"));
 var _LazyList = _interopRequireDefault(require("./LazyList/LazyList"));
 var _LinearMeter = _interopRequireDefault(require("./LinearMeter/LinearMeter"));
 var _ListGroup = _interopRequireDefault(require("./ListGroup/ListGroup"));