jfs-components 0.0.67 → 0.0.68

package/lib/typescript/src/components/Image/Image.d.ts

@@ -10,8 +10,12 @@ export type ImageProps = {
     imageSource?: ImageSourcePropType | string | undefined;
     /**
      * Width-to-height aspect ratio as a number, e.g. `16 / 9`, `1`, `4 / 3`.
-     * When set, the image lays out using `aspectRatio` so it scales naturally
-     * with whatever width it receives — no need to specify height.
+     * Defaults to `16 / 9` so the image always has a sensible rendered height
+     * even when the parent has no fixed height (e.g. inside `MediaCard`,
+     * which hugs whatever the image renders at).
+     *
+     * Pass `ratio={null as any}` is not supported — explicitly set a number,
+     * or override with `width` + `height` if you need a non-aspect layout.
      *
      * Equivalent CSS: `aspect-ratio: <ratio>`.
      */
@@ -35,25 +39,6 @@ export type ImageProps = {
     accessibilityElementsHidden?: boolean | undefined;
     importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants' | undefined;
 };
-/**
- * `Image` — the library's standard raster image primitive.
- *
- * Why this exists:
- *  - Gives consumers a single component for "show an image at a given aspect
- *    ratio inside a flex container" without having to remember the
- *    `width:'100%' / height:'100%' / resizeMode:'cover'` boilerplate.
- *  - Centralizes URL-vs-`{uri}` normalization that several components were
- *    re-implementing.
- *  - Uses the same `imageSource` prop name as the rest of the library
- *    (`Avatar`, `ProductLabel`, `CardProviderInfo`, ...) for a unified API.
- *
- * Layout rules:
- *  - If `ratio` is provided, the image lays out with `aspectRatio: ratio`
- *    and (unless `width` is given) fills the parent's width.
- *  - If neither `ratio` nor explicit dimensions are given, the image fills
- *    its parent (`width: '100%'`, `height: '100%'`) — same default as the
- *    most common usage in this library (background media, hero images).
- */
 declare function Image({ imageSource, ratio, resizeMode, width, height, borderRadius, style, accessibilityLabel, accessibilityElementsHidden, importantForAccessibility, }: ImageProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Image>;
 export default _default;

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-22T11:47:15.563Z
+ * Generated: 2026-04-22T12:06:55.739Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/Image/Image.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react'
 import {
   Image as RNImage,
   View,
-  StyleSheet,
   type ImageSourcePropType,
   type ImageStyle,
   type StyleProp,
@@ -20,8 +19,12 @@ export type ImageProps = {
   imageSource?: ImageSourcePropType | string | undefined
   /**
    * Width-to-height aspect ratio as a number, e.g. `16 / 9`, `1`, `4 / 3`.
-   * When set, the image lays out using `aspectRatio` so it scales naturally
-   * with whatever width it receives — no need to specify height.
+   * Defaults to `16 / 9` so the image always has a sensible rendered height
+   * even when the parent has no fixed height (e.g. inside `MediaCard`,
+   * which hugs whatever the image renders at).
+   *
+   * Pass `ratio={null as any}` is not supported — explicitly set a number,
+   * or override with `width` + `height` if you need a non-aspect layout.
    *
    * Equivalent CSS: `aspect-ratio: <ratio>`.
    */
@@ -78,9 +81,11 @@ function normalizeSource(
  *    its parent (`width: '100%'`, `height: '100%'`) — same default as the
  *    most common usage in this library (background media, hero images).
  */
+const DEFAULT_RATIO = 16 / 9
+
 function Image({
   imageSource,
-  ratio,
+  ratio = DEFAULT_RATIO,
   resizeMode = 'cover',
   width,
   height,
@@ -93,14 +98,15 @@ function Image({
   const source = useMemo(() => normalizeSource(imageSource), [imageSource])
 
   const layoutStyle: ImageStyle = useMemo(() => {
-    const s: ImageStyle = {}
-    if (ratio != null) {
-      s.aspectRatio = ratio
-      s.width = width ?? '100%'
-      if (height != null) s.height = height
-    } else {
-      s.width = width ?? '100%'
-      s.height = height ?? '100%'
+    // If the caller has fully specified width AND height, they're doing a
+    // non-aspect layout (e.g. "fill the parent") — respect that and skip
+    // `aspectRatio` so it doesn't conflict.
+    const isExplicitBox = width != null && height != null
+    const s: ImageStyle = {
+      width: width ?? '100%',
+      ...(isExplicitBox
+        ? { height: height as number }
+        : { aspectRatio: ratio, ...(height != null ? { height } : {}) }),
     }
     if (borderRadius != null) s.borderRadius = borderRadius
     return s

package/src/components/MediaCard/MediaCard.tsx

@@ -58,19 +58,21 @@ export function MediaCard({
     style,
 }: MediaCardProps) {
     const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24')
-    const gap = parseFloat(getVariableByName('cardMedia/gap', modes) || '0')
 
+    // No magic minHeight, no aspectRatio on the container. The card simply
+    // hugs whatever the background renders at: the <Image> sits in normal
+    // flow with `aspectRatio: ratio`, so its rendered height becomes the
+    // card's height. Header and Footer are absolutely positioned overlays
+    // and don't contribute to layout.
     const containerStyle: ViewStyle = {
         borderRadius: radius,
-        gap,
         overflow: 'hidden',
         position: 'relative',
-        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>.
+    // `media` wins as an escape hatch (gradient/video/etc.). Otherwise we
+    // delegate to the shared <Image> for image-source backgrounds. The
+    // background renders in normal flow so its height drives the card.
     const background = media ?? (
         imageSource != null ? (
             <Image
@@ -86,11 +88,12 @@ export function MediaCard({
     return (
         <MediaCardContext.Provider value={{ modes }}>
             <View style={[containerStyle, style]}>
-                {background ? (
-                    <View style={StyleSheet.absoluteFill}>{background}</View>
+                {background}
+                {children != null ? (
+                    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+                        {children}
+                    </View>
                 ) : null}
-
-                {children}
             </View>
         </MediaCardContext.Provider>
     )

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-22T11:47:15.563Z
+ * Generated: 2026-04-22T12:06:55.739Z
  */
 
 // Icon name to SVG data mapping