jfs-components 0.0.65 → 0.0.67

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.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

@@ -61,23 +61,49 @@ function CardCTA({
     flexDirection: 'row',
     overflow: 'hidden'
   };
+
+  // NOTE: `minWidth: 0` + explicit `flexShrink: 1` are required on native.
+  // Without them, Yoga's default `min-width: auto` clamps leftWrap to its
+  // single-line intrinsic text width, which steals all space from rightWrap
+  // and pushes the IconCapsule outside the card. See: text-not-wrapping
+  // inside flex rows on RN.
   const leftWrapStyle = {
     flex: 3,
+    flexShrink: 1,
+    flexBasis: 0,
+    minWidth: 0,
     paddingHorizontal: leftPaddingH,
     paddingVertical: leftPaddingV,
     gap: leftGap,
     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,
+    flexGrow: 2,
+    flexShrink: 0,
+    flexBasis: 'auto',
     paddingHorizontal: rightPaddingH,
     paddingVertical: rightPaddingV,
     alignItems: 'flex-end',
     justifyContent: 'flex-start'
   };
   const textWrapStyle = {
-    gap: textGap
+    gap: textGap,
+    alignSelf: 'stretch',
+    minWidth: 0
   };
   const titleStyle = {
     color: titleColor,

package/lib/commonjs/components/Carousel/Carousel.js

@@ -189,8 +189,26 @@ function Carousel({
         onScrollBeginDrag: handleScrollBeginDrag,
         onScrollEndDrag: handleScrollEndDrag,
         children: items.map((child, index) => {
-          const itemStyle = {
-            width: effectiveItemWidth > 0 ? effectiveItemWidth : undefined
+          // Strict slot box: width must be honored; never grow or shrink with
+          // content, and clip anything that misbehaves (e.g. a child whose
+          // inner flex layout would otherwise leak into the next slot on
+          // native).
+          const slotStyle = {
+            width: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
+            flexGrow: 0,
+            flexShrink: 0,
+            flexBasis: effectiveItemWidth > 0 ? effectiveItemWidth : 'auto',
+            overflow: 'hidden'
+          };
+
+          // The cloned style forces the child's outer node to also honor the
+          // slot width strictly. Without this, a child with a weird intrinsic
+          // size can render wider than the slot and visually overflow.
+          const childOverrideStyle = {
+            width: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
+            maxWidth: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
+            flexGrow: 0,
+            flexShrink: 0
           };
 
           // Pass modes down to children
@@ -199,10 +217,10 @@ function Carousel({
               ...(child.props?.modes || {}),
               ...modes
             },
-            style: [itemStyle, child.props?.style]
+            style: [childOverrideStyle, child.props?.style]
           }) : child;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: itemStyle,
+            style: slotStyle,
             children: childWithModes
           }, index);
         })

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

@@ -0,0 +1,78 @@
+"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).
+ */
+function Image({
+  imageSource,
+  ratio,
+  resizeMode = 'cover',
+  width,
+  height,
+  borderRadius,
+  style,
+  accessibilityLabel,
+  accessibilityElementsHidden,
+  importantForAccessibility
+}) {
+  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 (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,59 @@ 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.
-
   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
+    minHeight: 308
   };
-  const mediaWithModes = /*#__PURE__*/(0, _react.isValidElement)(media) ? /*#__PURE__*/(0, _react.cloneElement)(media, {
-    modes: {
-      ...media.props.modes,
-      ...modes
-    }
-  }) : media;
+
+  // `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__*/(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 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: _reactNative.StyleSheet.absoluteFill,
-        children: mediaWithModes
-      }), children]
+        children: background
+      }) : null, children]
     })
   });
 }
@@ -80,10 +83,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 +146,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 +230,6 @@ function FooterSubtitle({
     children: children
   });
 }
-
-// Attach sub-components
 MediaCard.Header = Header;
 MediaCard.Title = Title;
 MediaCard.Footer = Footer;

package/lib/commonjs/components/Section/Section.js

@@ -90,7 +90,14 @@ const SLOT_GRID_MAX_COLUMNS = 4;
 const SLOT_GRID_STAGGER_CAP = 8;
 const SLOT_GRID_ENTER_STAGGER_MS = 35;
 const SLOT_GRID_EXIT_STAGGER_MS = 20;
+const SLOT_GRID_ENTER_DURATION_MS = 220;
 const SLOT_GRID_EXIT_DURATION_MS = 160;
+const SLOT_GRID_HEIGHT_DURATION_MS = 280;
+
+// Standard ease-out cubic curve. Calm, professional, no overshoot — matches
+// system-style transitions. Defined once at module scope so it isn't
+// re-allocated per render.
+const SLOT_GRID_EASING = _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic);
 const slotGridRowFlowStyle = {
   flexDirection: 'row',
   justifyContent: 'space-between'
@@ -136,6 +143,13 @@ const SlotGrid = /*#__PURE__*/_react.default.memo(function SlotGrid({
   const containerStyle = (0, _react.useMemo)(() => ({
     gap
   }), [gap]);
+  // Strict `width` (not `minWidth`) so every cell in every row is exactly the
+  // same size — `space-between` then distributes identical leftover into
+  // identical inter-cell gaps on every row, which keeps column N of row 1
+  // aligned with column N of rows 2/3/etc. Cells whose label is wider than
+  // `cellWidth` simply wrap their text onto more lines (taking more vertical
+  // space; the row's height grows naturally to fit the tallest cell, and the
+  // animated-height clip springs to the new total).
   const cellStyle = (0, _react.useMemo)(() => cellWidth !== null ? {
     width: cellWidth
   } : undefined, [cellWidth]);
@@ -169,8 +183,9 @@ const SlotGrid = /*#__PURE__*/_react.default.memo(function SlotGrid({
   //      and an explicit `height` driven by a shared value.
   //   3. The inner view reports its natural height via `onLayout`. The first
   //      measurement snaps the shared value (no first-mount animation). Every
-  //      subsequent change (e.g. expand/collapse adds or removes rows) springs
-  //      the shared value to the new natural height.
+  //      subsequent change (e.g. expand/collapse adds or removes rows) eases
+  //      the shared value to the new natural height with a calm ease-out
+  //      timing curve — no spring, no bounce, no overshoot.
   //
   // Visually: the container reveals/conceals content like a curtain, and the
   // cells never deform.
@@ -184,9 +199,9 @@ const SlotGrid = /*#__PURE__*/_react.default.memo(function SlotGrid({
       animatedHeight.value = h;
       return;
     }
-    animatedHeight.value = (0, _reactNativeReanimated.withSpring)(h, {
-      damping: 22,
-      stiffness: 180,
+    animatedHeight.value = (0, _reactNativeReanimated.withTiming)(h, {
+      duration: SLOT_GRID_HEIGHT_DURATION_MS,
+      easing: SLOT_GRID_EASING,
       reduceMotion: _reactNativeReanimated.ReduceMotion.System
     });
   }, [animatedHeight]);
@@ -210,8 +225,8 @@ const SlotGrid = /*#__PURE__*/_react.default.memo(function SlotGrid({
             const enterStaggerSteps = Math.min(extraOrdinal, SLOT_GRID_STAGGER_CAP);
             const reverseOrdinal = Math.max(0, extrasCount - 1 - extraOrdinal);
             const exitStaggerSteps = Math.min(reverseOrdinal, SLOT_GRID_STAGGER_CAP);
-            const entering = _reactNativeReanimated.FadeInUp.springify().damping(18).delay(enterStaggerSteps * SLOT_GRID_ENTER_STAGGER_MS).reduceMotion(_reactNativeReanimated.ReduceMotion.System);
-            const exiting = _reactNativeReanimated.FadeOutUp.duration(SLOT_GRID_EXIT_DURATION_MS).delay(exitStaggerSteps * SLOT_GRID_EXIT_STAGGER_MS).reduceMotion(_reactNativeReanimated.ReduceMotion.System);
+            const entering = _reactNativeReanimated.FadeInUp.duration(SLOT_GRID_ENTER_DURATION_MS).easing(SLOT_GRID_EASING).delay(enterStaggerSteps * SLOT_GRID_ENTER_STAGGER_MS).reduceMotion(_reactNativeReanimated.ReduceMotion.System);
+            const exiting = _reactNativeReanimated.FadeOutUp.duration(SLOT_GRID_EXIT_DURATION_MS).easing(SLOT_GRID_EASING).delay(exitStaggerSteps * SLOT_GRID_EXIT_STAGGER_MS).reduceMotion(_reactNativeReanimated.ReduceMotion.System);
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
               entering: entering,
               exiting: exiting,

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"));