jfs-components 0.0.65 → 0.0.67

package/src/components/MediaCard/MediaCard.tsx

@@ -1,81 +1,99 @@
-import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform, Image } from 'react-native';
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import Button, { type ButtonProps } from '../Button/Button';
-import Avatar, { type AvatarProps } from '../Avatar/Avatar';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import React, { createContext, useContext } from 'react'
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType, 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.
- */
-const MediaCardContext = createContext<{ modes?: Record<string, any> }>({});
+const MediaCardContext = createContext<{ modes?: Record<string, any> }>({})
 
 export interface MediaCardProps {
     /**
-     * The background media content (e.g. an Image).
-     * It will be positioned absolutely to cover the card.
+     * Image source for the background media. Same shape as the rest of the
+     * library (`Avatar`, `ProductLabel`, etc.) — accepts a URL string or any
+     * RN `ImageSourcePropType`. The card renders this through the shared
+     * `<Image>` component, so all image-rendering details (normalization,
+     * resize behaviour, `aspectRatio`) live there, not here.
+     */
+    imageSource?: ImageSourcePropType | string | undefined
+    /**
+     * Width-to-height aspect ratio for the background image when using
+     * `imageSource`, e.g. `16 / 9`. Forwarded to `<Image ratio>`.
      */
-    media?: React.ReactNode;
+    ratio?: number | undefined
+    /**
+     * Escape hatch: a fully custom background node (e.g. a gradient view, a
+     * video). Takes precedence over `imageSource`. Prefer `imageSource` for
+     * the common case of a single background image.
+     */
+    media?: React.ReactNode
     /**
      * Content to render inside the card (e.g. MediaCard.Title, MediaCard.Footer).
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode
     /**
      * Modes object for token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Record<string, any>
     /**
      * Style overrides for the card container.
      */
-    style?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>
 }
 
 /**
  * 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,
 }: MediaCardProps) {
-    // 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 radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24')
+    const gap = parseFloat(getVariableByName('cardMedia/gap', modes) || '0')
 
     const containerStyle: ViewStyle = {
         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
-    };
-
-    const mediaWithModes = isValidElement(media)
-        ? cloneElement(media as any, { modes: { ...(media.props as any).modes, ...modes } })
-        : media;
+        minHeight: 308,
+    }
+
+    // `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 ? (
+            <Image
+                imageSource={imageSource}
+                ratio={ratio}
+                resizeMode="cover"
+                accessibilityElementsHidden
+                importantForAccessibility="no"
+            />
+        ) : null
+    )
 
     return (
         <MediaCardContext.Provider value={{ modes }}>
             <View style={[containerStyle, style]}>
-                {/* Background Media Layer */}
-                <View style={StyleSheet.absoluteFill}>
-                    {mediaWithModes}
-                </View>
+                {background ? (
+                    <View style={StyleSheet.absoluteFill}>{background}</View>
+                ) : null}
 
-                {/* Content Layer */}
                 {children}
             </View>
         </MediaCardContext.Provider>
-    );
+    )
 }
 
 // ----------------------------------------------------------------------------
@@ -88,11 +106,23 @@ export function MediaCard({
  * Figma: "title wrap" p-[16px]
  */
 export function Header({ children, style }: { children?: React.ReactNode; style?: StyleProp<ViewStyle> }) {
+    // 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 (
-        <View style={[{ padding: 16, flex: 1 }, style]}>
+        <View style={[{ padding: 16, flexGrow: 1, flexShrink: 0, flexBasis: 'auto' }, style]}>
             {children}
         </View>
-    );
+    )
 }
 
 /**
@@ -100,14 +130,14 @@ export function Header({ children, style }: { children?: React.ReactNode; style?
  * Tokens: cardMedia/title/*
  */
 export function Title({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
-    const context = useContext(MediaCardContext);
-    const modes = propModes || context.modes || {};
+    const context = useContext(MediaCardContext)
+    const modes = propModes || context.modes || {}
 
-    const color = getVariableByName('cardMedia/title/color', modes) || '#ffffff';
-    const fontSize = parseFloat(getVariableByName('cardMedia/title/fontSize', modes) || '52');
-    const fontFamily = getVariableByName('cardMedia/title/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('cardMedia/title/lineHeight', modes) || '68');
-    const fontWeight = getVariableByName('cardMedia/title/fontWeight', modes) || '900';
+    const color = getVariableByName('cardMedia/title/color', modes) || '#ffffff'
+    const fontSize = parseFloat(getVariableByName('cardMedia/title/fontSize', modes) || '52')
+    const fontFamily = getVariableByName('cardMedia/title/fontFamily', modes) || 'JioType Var'
+    const lineHeight = parseFloat(getVariableByName('cardMedia/title/lineHeight', modes) || '68')
+    const fontWeight = getVariableByName('cardMedia/title/fontWeight', modes) || '900'
 
     const textStyle: TextStyle = {
         color,
@@ -115,9 +145,9 @@ export function Title({ children, style, modes: propModes }: { children?: React.
         fontFamily,
         lineHeight,
         fontWeight: fontWeight as TextStyle['fontWeight'],
-    };
+    }
 
-    return <Text style={[textStyle, style]}>{children}</Text>;
+    return <Text style={[textStyle, style]}>{children}</Text>
 }
 
 /**
@@ -125,20 +155,19 @@ export function Title({ children, style, modes: propModes }: { children?: React.
  * Tokens: cardMedia/footer/*, glass/minimal, blur/minimal
  */
 export function Footer({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
-    const context = useContext(MediaCardContext);
-    const modes = propModes || context.modes || {};
+    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');
+    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')
 
     // Glass Effect
     // Figma:
     // blur/minimal/background: "#1414174a"
     // blur/minimal: 29
-    const glassBgColor = getVariableByName('blur/minimal/background', modes) || '#1414174a';
-    const blurRadius = parseFloat(getVariableByName('blur/minimal', modes) || '29');
+    const glassBgColor = getVariableByName('blur/minimal/background', modes) || '#1414174a'
+    const blurRadius = parseFloat(getVariableByName('blur/minimal', modes) || '29')
 
     const containerStyle: ViewStyle = {
         flexDirection: 'row',
@@ -150,13 +179,13 @@ export function Footer({ children, style, modes: propModes }: { children?: React
         // Web-specific backdrop filter for glass effect
         // @ts-ignore
         ...(Platform.OS === 'web' ? { backdropFilter: `blur(${blurRadius}px)` } : {}),
-    };
+    }
 
     return (
         <View style={[containerStyle, style]}>
             {children}
         </View>
-    );
+    )
 }
 
 /**
@@ -164,20 +193,20 @@ export function Footer({ children, style, modes: propModes }: { children?: React
  * Tokens: cardMedia/footer/title/*
  */
 export function FooterTitle({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
-    const context = useContext(MediaCardContext);
-    const modes = propModes || context.modes || {};
+    const context = useContext(MediaCardContext)
+    const modes = propModes || context.modes || {}
 
-    const color = getVariableByName('cardMedia/footer/title/color', modes) || '#ffffff';
-    const fontSize = parseFloat(getVariableByName('cardMedia/footer/title/fontSize', modes) || '14');
-    const fontFamily = getVariableByName('cardMedia/footer/title/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('cardMedia/footer/title/lineHeight', modes) || '16');
-    const fontWeight = getVariableByName('cardMedia/footer/title/fontWeight', modes) || '800';
+    const color = getVariableByName('cardMedia/footer/title/color', modes) || '#ffffff'
+    const fontSize = parseFloat(getVariableByName('cardMedia/footer/title/fontSize', modes) || '14')
+    const fontFamily = getVariableByName('cardMedia/footer/title/fontFamily', modes) || 'JioType Var'
+    const lineHeight = parseFloat(getVariableByName('cardMedia/footer/title/lineHeight', modes) || '16')
+    const fontWeight = getVariableByName('cardMedia/footer/title/fontWeight', modes) || '800'
 
     return (
         <Text style={[{ color, fontSize, fontFamily, lineHeight, fontWeight: fontWeight as any }, style]}>
             {children}
         </Text>
-    );
+    )
 }
 
 /**
@@ -185,27 +214,26 @@ export function FooterTitle({ children, style, modes: propModes }: { children?:
  * Tokens: cardMedia/footer/subtitle/*
  */
 export function FooterSubtitle({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
-    const context = useContext(MediaCardContext);
-    const modes = propModes || context.modes || {};
+    const context = useContext(MediaCardContext)
+    const modes = propModes || context.modes || {}
 
-    const color = getVariableByName('cardMedia/footer/subtitle/color', modes) || '#f5f7f7a1';
-    const fontSize = parseFloat(getVariableByName('cardMedia/footer/subtitle/fontSize', modes) || '12');
-    const fontFamily = getVariableByName('cardMedia/footer/subtitle/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('cardMedia/footer/subtitle/lineHeight', modes) || '14');
-    const fontWeight = getVariableByName('cardMedia/footer/subtitle/fontWeight', modes) || '400';
+    const color = getVariableByName('cardMedia/footer/subtitle/color', modes) || '#f5f7f7a1'
+    const fontSize = parseFloat(getVariableByName('cardMedia/footer/subtitle/fontSize', modes) || '12')
+    const fontFamily = getVariableByName('cardMedia/footer/subtitle/fontFamily', modes) || 'JioType Var'
+    const lineHeight = parseFloat(getVariableByName('cardMedia/footer/subtitle/lineHeight', modes) || '14')
+    const fontWeight = getVariableByName('cardMedia/footer/subtitle/fontWeight', modes) || '400'
 
     return (
         <Text style={[{ color, fontSize, fontFamily, lineHeight, fontWeight: fontWeight as any }, style]}>
             {children}
         </Text>
-    );
+    )
 }
 
-// Attach sub-components
-MediaCard.Header = Header;
-MediaCard.Title = Title;
-MediaCard.Footer = Footer;
-MediaCard.FooterTitle = FooterTitle;
-MediaCard.FooterSubtitle = FooterSubtitle;
+MediaCard.Header = Header
+MediaCard.Title = Title
+MediaCard.Footer = Footer
+MediaCard.FooterTitle = FooterTitle
+MediaCard.FooterSubtitle = FooterSubtitle
 
-export default MediaCard;
+export default MediaCard

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/components/index.ts

@@ -24,11 +24,12 @@ export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
+export { default as Image, type ImageProps } from './Image/Image';
 export { default as LazyList } from './LazyList/LazyList';
 export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/LinearMeter';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as ListItem } from './ListItem/ListItem';
-export { default as MediaCard } from './MediaCard/MediaCard';
+export { default as MediaCard, type MediaCardProps } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
 export { default as NoteInput, type NoteInputProps } from './NoteInput/NoteInput';

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-22T11:47:15.563Z
  */
 
 // Icon name to SVG data mapping