jfs-components 0.0.65 → 0.0.66

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

@@ -56,8 +56,17 @@ 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,
@@ -66,13 +75,18 @@ function CardCTA({
   };
   const rightWrapStyle = {
     flex: 2,
+    flexShrink: 1,
+    flexBasis: 0,
+    minWidth: 0,
     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/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,