jfs-components 0.1.56 → 0.1.57

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-07-27T20:32:46.426Z
+ * Generated: 2026-07-27T20:45:13.986Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/CardCTA/CardCTA.tsx

@@ -284,13 +284,12 @@ function CardCTA({
         borderColor,
         flexDirection: isRating || isSip ? 'column' : 'row',
         overflow: 'visible',
-        // Rating cards fill equal-height carousel slots and pin the footer down
-        // when free space exists; intrinsic height is unchanged when not stretched.
+        // Pin footer to the bottom when a parent (e.g. equal-height Carousel)
+        // assigns an explicit height. Do not flexGrow — that unbounded-grows
+        // inside horizontal ScrollViews and blows cards to infinite height.
         ...(isRating
             ? {
-                alignSelf: 'stretch',
                 justifyContent: 'space-between' as const,
-                flexGrow: 1,
             }
             : {}),
     }

package/src/components/Carousel/Carousel.tsx

@@ -12,6 +12,7 @@ import {
   ScrollView,
   Animated,
   Pressable,
+  StyleSheet,
   type ViewStyle,
   type StyleProp,
   type NativeSyntheticEvent,
@@ -210,6 +211,44 @@ export function Carousel({
     return containerWidth - containerPaddingH * 4
   }, [itemWidthProp, itemInset, containerWidth, containerPaddingH, isNumbered])
 
+  // Equal-height: measure each slide's intrinsic height, then lock every slot
+  // to the tallest. Do NOT use contentContainerStyle.alignItems:'stretch' or
+  // height:'100%' without a bounded cross-axis — in a horizontal ScrollView
+  // that resolves to an unbounded/infinite height.
+  const slideHeightsRef = useRef<Record<number, number>>({})
+  const [equalizedHeight, setEqualizedHeight] = useState<number | undefined>()
+  const equalizedHeightRef = useRef<number | undefined>(undefined)
+  equalizedHeightRef.current = equalizedHeight
+
+  useEffect(() => {
+    slideHeightsRef.current = {}
+    equalizedHeightRef.current = undefined
+    setEqualizedHeight(undefined)
+  }, [totalItems, effectiveItemWidth, equalHeight])
+
+  const handleSlideLayout = useCallback(
+    (index: number) => (event: LayoutChangeEvent) => {
+      if (!equalHeight) return
+      // Only measure while unconstrained. After lock, the slot height is forced
+      // and onLayout would just echo equalizedHeight.
+      if (equalizedHeightRef.current != null) return
+
+      const height = Math.ceil(event.nativeEvent.layout.height)
+      if (height <= 0) return
+
+      const previous = slideHeightsRef.current[index] ?? 0
+      if (height <= previous) return
+
+      slideHeightsRef.current[index] = height
+      const measured = items.map((_, i) => slideHeightsRef.current[i])
+      if (measured.some(value => value == null)) return
+
+      const next = Math.max(...(measured as number[]))
+      setEqualizedHeight(next)
+    },
+    [equalHeight, items],
+  )
+
   // Snap interval = item width + gap
   const snapInterval = effectiveItemWidth + gap
 
@@ -412,8 +451,9 @@ export function Carousel({
   const contentContainerStyle: ViewStyle = {
     paddingHorizontal: effectivePaddingH,
     gap,
-    // Stretch so every slide matches the tallest (default). Opt out with equalHeight={false}.
-    alignItems: equalHeight ? 'stretch' : 'flex-start',
+    // Always flex-start on the cross axis. Stretch + unbounded ScrollView
+    // height is what caused infinite-tall slides.
+    alignItems: 'flex-start',
   }
 
   return (
@@ -435,6 +475,9 @@ export function Carousel({
           onMomentumScrollEnd={finishProgrammaticScroll}
         >
           {items.map((child, index) => {
+            const hasEqualizedHeight =
+              equalHeight && equalizedHeight != null && equalizedHeight > 0
+
             // 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
@@ -445,7 +488,7 @@ export function Carousel({
               flexShrink: 0,
               flexBasis: effectiveItemWidth > 0 ? effectiveItemWidth : 'auto',
               overflow: 'hidden',
-              ...(equalHeight ? { alignSelf: 'stretch' } : {}),
+              ...(hasEqualizedHeight ? { height: equalizedHeight } : {}),
             }
 
             // The cloned style forces the child's outer node to also honor the
@@ -454,10 +497,10 @@ export function Carousel({
             const childOverrideStyle: ViewStyle = {
               width: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
               maxWidth: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
-              flexGrow: equalHeight ? 1 : 0,
+              flexGrow: 0,
               flexShrink: 0,
-              ...(equalHeight
-                ? { alignSelf: 'stretch', height: '100%' as const }
+              ...(hasEqualizedHeight
+                ? { height: '100%' as const, alignSelf: 'stretch' }
                 : {}),
             }
 
@@ -474,7 +517,17 @@ export function Carousel({
 
             return (
               <View key={index} style={slotStyle}>
-                {childWithModes}
+                {/*
+                  Measure intrinsic height on an unconstrained inner wrapper.
+                  After equalization the outer slot is height-locked and this
+                  inner fills it — further onLayouts are ignored.
+                */}
+                <View
+                  style={hasEqualizedHeight ? styles.equalizedFill : undefined}
+                  onLayout={handleSlideLayout(index)}
+                >
+                  {childWithModes}
+                </View>
               </View>
             )
           })}
@@ -667,6 +720,12 @@ function AnimatedDot({
   )
 }
 
+const styles = StyleSheet.create({
+  equalizedFill: {
+    flex: 1,
+  },
+})
+
 // ---------------------------------------------------------------------------
 // Attach sub-components
 // ---------------------------------------------------------------------------

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-07-27T20:32:46.426Z
+ * Generated: 2026-07-27T20:45:13.986Z
  */
 
 // Icon name to SVG data mapping