jfs-components 0.0.65 → 0.0.66

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

@@ -61,8 +61,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,
@@ -71,13 +80,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/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/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,