jfs-components 0.0.65 → 0.0.66

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-04-21T13:27:57.213Z
+ * Generated: 2026-04-21T15:09:13.866Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/CardCTA/CardCTA.tsx

@@ -78,8 +78,16 @@ function CardCTA({
         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: ViewStyle = {
         flex: 3,
+        flexShrink: 1,
+        flexBasis: 0,
+        minWidth: 0,
         paddingHorizontal: leftPaddingH,
         paddingVertical: leftPaddingV,
         gap: leftGap,
@@ -89,6 +97,9 @@ function CardCTA({
 
     const rightWrapStyle: ViewStyle = {
         flex: 2,
+        flexShrink: 1,
+        flexBasis: 0,
+        minWidth: 0,
         paddingHorizontal: rightPaddingH,
         paddingVertical: rightPaddingV,
         alignItems: 'flex-end',
@@ -97,6 +108,8 @@ function CardCTA({
 
     const textWrapStyle: ViewStyle = {
         gap: textGap,
+        alignSelf: 'stretch',
+        minWidth: 0,
     }
 
     const titleStyle: TextStyle = {

package/src/components/Carousel/Carousel.tsx

@@ -279,8 +279,26 @@ export function Carousel({
 
         >
           {items.map((child, index) => {
-            const itemStyle: ViewStyle = {
+            // 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: ViewStyle = {
               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: ViewStyle = {
+              width: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
+              maxWidth: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
+              flexGrow: 0,
+              flexShrink: 0,
             }
 
             // Pass modes down to children
@@ -290,12 +308,12 @@ export function Carousel({
                   ...((child.props as any)?.modes || {}),
                   ...modes,
                 },
-                style: [itemStyle, (child.props as any)?.style],
+                style: [childOverrideStyle, (child.props as any)?.style],
               })
               : child
 
             return (
-              <View key={index} style={itemStyle}>
+              <View key={index} style={slotStyle}>
                 {childWithModes}
               </View>
             )

package/src/components/Section/Section.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useMemo, useRef, useCallback } from 'react'
 import { View, Text, Pressable, Platform, type StyleProp, type ViewStyle, type PressableStateCallbackType } from 'react-native'
 import Animated, {
+  Easing,
   FadeInUp,
   FadeOutUp,
   ReduceMotion,
   useAnimatedStyle,
   useSharedValue,
-  withSpring,
+  withTiming,
 } from 'react-native-reanimated'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import NavArrow from '../NavArrow/NavArrow'
@@ -82,7 +83,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)
 
 type SlotGridProps = {
   items: React.ReactNode[];
@@ -97,10 +105,10 @@ type SlotGridProps = {
   animateExtrasFromIndex?: number;
   /**
    * If true, the rows container animates its height via an explicit
-   * `useSharedValue` + `withSpring` driven by `onLayout` measurements of the
-   * inner content (with `overflow: 'hidden'` to clip mid-animation). Cells
-   * inside always render at their natural size — they are *never* resized
-   * during the transition. Default false.
+   * `useSharedValue` + `withTiming` (ease-out cubic, no overshoot) driven by
+   * `onLayout` measurements of the inner content, with `overflow: 'hidden'`
+   * to clip mid-animation. Cells inside always render at their natural size
+   * — they are *never* resized during the transition. Default false.
    */
   animateContainerLayout?: boolean;
 }
@@ -157,6 +165,13 @@ const SlotGrid = React.memo(function SlotGrid({
   }
 
   const containerStyle = useMemo<ViewStyle>(() => ({ 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<ViewStyle | undefined>(
     () => (cellWidth !== null ? { width: cellWidth } : undefined),
     [cellWidth]
@@ -197,8 +212,9 @@ const SlotGrid = 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.
@@ -213,9 +229,9 @@ const SlotGrid = 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,
       })
     },
@@ -261,11 +277,12 @@ const SlotGrid = React.memo(function SlotGrid({
                   reverseOrdinal,
                   SLOT_GRID_STAGGER_CAP
                 )
-                const entering = FadeInUp.springify()
-                  .damping(18)
+                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 (

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-04-21T13:27:57.213Z
+ * Generated: 2026-04-21T15:09:13.866Z
  */
 
 // Icon name to SVG data mapping