jfs-components 0.0.65 → 0.0.67

package/lib/module/components/CardCTA/CardCTA.js

@@ -56,23 +56,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/module/components/Carousel/Carousel.js

@@ -181,8 +181,26 @@ export 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
@@ -191,10 +209,10 @@ export function Carousel({
               ...(child.props?.modes || {}),
               ...modes
             },
-            style: [itemStyle, child.props?.style]
+            style: [childOverrideStyle, child.props?.style]
           }) : child;
           return /*#__PURE__*/_jsx(View, {
-            style: itemStyle,
+            style: slotStyle,
             children: childWithModes
           }, index);
         })

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

@@ -0,0 +1,73 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Image as RNImage, View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+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 = 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 (borderRadius != null) s.borderRadius = borderRadius;
+    return s;
+  }, [ratio, width, height, borderRadius]);
+  if (!source) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [layoutStyle, style]
+    });
+  }
+  return /*#__PURE__*/_jsx(RNImage, {
+    source: source,
+    style: [layoutStyle, style],
+    resizeMode: resizeMode,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityElementsHidden: accessibilityElementsHidden,
+    importantForAccessibility: importantForAccessibility
+  });
+}
+export default /*#__PURE__*/React.memo(Image);

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

@@ -1,59 +1,59 @@
 "use strict";
 
-import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
+import React, { createContext, useContext } from 'react';
 import { View, Text, StyleSheet, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Image from '../Image/Image';
 import { EMPTY_MODES } from '../../utils/react-utils';
-
-/**
- * Context to share 'modes' with child components.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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.
  */
 export function MediaCard({
+  imageSource,
+  ratio,
   media,
   children,
   modes = EMPTY_MODES,
   style
 }) {
-  // Container Tokens
   const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24');
   const gap = parseFloat(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__*/isValidElement(media) ? /*#__PURE__*/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__*/_jsx(Image, {
+    imageSource: imageSource,
+    ratio: ratio,
+    resizeMode: "cover",
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  }) : null);
   return /*#__PURE__*/_jsx(MediaCardContext.Provider, {
     value: {
       modes
     },
     children: /*#__PURE__*/_jsxs(View, {
       style: [containerStyle, style],
-      children: [/*#__PURE__*/_jsx(View, {
+      children: [background ? /*#__PURE__*/_jsx(View, {
         style: StyleSheet.absoluteFill,
-        children: mediaWithModes
-      }), children]
+        children: background
+      }) : null, children]
     })
   });
 }
@@ -71,10 +71,24 @@ 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: [{
       padding: 16,
-      flex: 1
+      flexGrow: 1,
+      flexShrink: 0,
+      flexBasis: 'auto'
     }, style],
     children: children
   });
@@ -120,8 +134,6 @@ export function Footer({
 }) {
   const context = useContext(MediaCardContext);
   const modes = propModes || context.modes || {};
-
-  // Tokens
   const gap = parseFloat(getVariableByName('cardMedia/footer/gap', modes) || '24');
   const paddingHorizontal = parseFloat(getVariableByName('cardMedia/footer/padding/horizontal', modes) || '16');
   const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes) || '12');
@@ -206,8 +218,6 @@ export function FooterSubtitle({
     children: children
   });
 }
-
-// Attach sub-components
 MediaCard.Header = Header;
 MediaCard.Title = Title;
 MediaCard.Footer = Footer;

package/lib/module/components/Section/Section.js

@@ -2,7 +2,7 @@
 
 import React, { useState, useMemo, useRef, useCallback } from 'react';
 import { View, Text, Pressable, Platform } from 'react-native';
-import Animated, { FadeInUp, FadeOutUp, ReduceMotion, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import Animated, { Easing, FadeInUp, FadeOutUp, ReduceMotion, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import NavArrow from '../NavArrow/NavArrow';
 import IconCapsule from '../IconCapsule/IconCapsule';
@@ -85,7 +85,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 = Easing.out(Easing.cubic);
 const slotGridRowFlowStyle = {
   flexDirection: 'row',
   justifyContent: 'space-between'
@@ -131,6 +138,13 @@ const SlotGrid = /*#__PURE__*/React.memo(function SlotGrid({
   const containerStyle = 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 = useMemo(() => cellWidth !== null ? {
     width: cellWidth
   } : undefined, [cellWidth]);
@@ -164,8 +178,9 @@ const SlotGrid = /*#__PURE__*/React.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.
@@ -179,9 +194,9 @@ const SlotGrid = /*#__PURE__*/React.memo(function SlotGrid({
       animatedHeight.value = h;
       return;
     }
-    animatedHeight.value = withSpring(h, {
-      damping: 22,
-      stiffness: 180,
+    animatedHeight.value = withTiming(h, {
+      duration: SLOT_GRID_HEIGHT_DURATION_MS,
+      easing: SLOT_GRID_EASING,
       reduceMotion: ReduceMotion.System
     });
   }, [animatedHeight]);
@@ -205,8 +220,8 @@ const SlotGrid = /*#__PURE__*/React.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 = FadeInUp.springify().damping(18).delay(enterStaggerSteps * SLOT_GRID_ENTER_STAGGER_MS).reduceMotion(ReduceMotion.System);
-            const exiting = FadeOutUp.duration(SLOT_GRID_EXIT_DURATION_MS).delay(exitStaggerSteps * SLOT_GRID_EXIT_STAGGER_MS).reduceMotion(ReduceMotion.System);
+            const entering = FadeInUp.duration(SLOT_GRID_ENTER_DURATION_MS).easing(SLOT_GRID_EASING).delay(enterStaggerSteps * SLOT_GRID_ENTER_STAGGER_MS).reduceMotion(ReduceMotion.System);
+            const exiting = FadeOutUp.duration(SLOT_GRID_EXIT_DURATION_MS).easing(SLOT_GRID_EASING).delay(exitStaggerSteps * SLOT_GRID_EXIT_STAGGER_MS).reduceMotion(ReduceMotion.System);
             return /*#__PURE__*/_jsx(Animated.View, {
               entering: entering,
               exiting: exiting,

package/lib/module/components/index.js

@@ -25,6 +25,7 @@ export { default as HoldingsCard } from './HoldingsCard/HoldingsCard';
 export { default as HStack } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
+export { default as Image } from './Image/Image';
 export { default as LazyList } from './LazyList/LazyList';
 export { default as LinearMeter } from './LinearMeter/LinearMeter';
 export { default as ListGroup } from './ListGroup/ListGroup';