jfs-components 0.0.65 → 0.0.67

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { type ImageSourcePropType, type ImageStyle, type StyleProp, type ViewStyle, type ImageResizeMode } from 'react-native';
+export type ImageProps = {
+    /**
+     * Image source. Accepts the same shapes as React Native's `<Image>` plus a
+     * raw URL string. Naming is intentionally aligned with `Avatar`,
+     * `ProductLabel`, `CardProviderInfo`, etc. so the library has a single,
+     * predictable image-source prop name.
+     */
+    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.
+     *
+     * Equivalent CSS: `aspect-ratio: <ratio>`.
+     */
+    ratio?: number | undefined;
+    /** How the image is fit inside its box. Defaults to `'cover'`. */
+    resizeMode?: ImageResizeMode | undefined;
+    /**
+     * Optional explicit width. If omitted and a `ratio` is set, the image
+     * defaults to `width: '100%'` so it fills its parent.
+     */
+    width?: ViewStyle['width'] | undefined;
+    /** Optional explicit height. Usually you only need `ratio` instead. */
+    height?: ViewStyle['height'] | undefined;
+    /** Border radius applied to the image (clips the underlying raster). */
+    borderRadius?: number | undefined;
+    /** Style merged onto the underlying RN `<Image>`. */
+    style?: StyleProp<ImageStyle> | undefined;
+    /** Accessibility label forwarded to RN `<Image>`. */
+    accessibilityLabel?: string | undefined;
+    /** Hide from the a11y tree (e.g. when image is purely decorative). */
+    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;
+//# sourceMappingURL=Image.d.ts.map

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

@@ -1,9 +1,23 @@
 import React from 'react';
-import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+import { type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
 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>`.
+     */
+    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;
     /**
@@ -23,8 +37,12 @@ export interface MediaCardProps {
  * 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 declare function MediaCard({ media, children, modes, style, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaCard({ imageSource, ratio, media, children, modes, style, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MediaCard {
     var Header: typeof import("./MediaCard").Header;
     var Title: typeof import("./MediaCard").Title;

package/lib/typescript/src/components/index.d.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/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-22T11:47:15.563Z
  */
 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.67",
   "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,
@@ -87,8 +95,22 @@ function CardCTA({
         justifyContent: 'center',
     }
 
+    // NOTE: rightWrap must NOT shrink on native. On Android (Yoga), the default
+    // `flex: 2` shorthand expands to `{ flexGrow: 2, flexShrink: 1, flexBasis: 0 }`,
+    // which — combined with `minWidth: 0` — lets Yoga shrink this wrapper below
+    // its own padding+IconCapsule width when leftWrap's text is long. Once that
+    // happens the horizontal padding collapses, `alignItems: 'flex-end'` pins
+    // the IconCapsule against the inner edge, and the icon ends up visually
+    // touching the body text (the wrapper "appears not to exist"). Web hides
+    // this because browsers honor `min-width: auto` on flex items. Use
+    // explicit `flexGrow`/`flexShrink: 0`/`flexBasis: 'auto'` so the wrapper
+    // is sized to its content as a floor and only grows for the design's
+    // 3:2 ratio when extra space is available. leftWrap already absorbs tight
+    // space via `flexShrink: 1` + `minWidth: 0`.
     const rightWrapStyle: ViewStyle = {
-        flex: 2,
+        flexGrow: 2,
+        flexShrink: 0,
+        flexBasis: 'auto',
         paddingHorizontal: rightPaddingH,
         paddingVertical: rightPaddingV,
         alignItems: 'flex-end',
@@ -97,6 +119,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/Image/Image.tsx

@@ -0,0 +1,125 @@
+import React, { useMemo } from 'react'
+import {
+  Image as RNImage,
+  View,
+  StyleSheet,
+  type ImageSourcePropType,
+  type ImageStyle,
+  type StyleProp,
+  type ViewStyle,
+  type ImageResizeMode,
+} from 'react-native'
+
+export type ImageProps = {
+  /**
+   * Image source. Accepts the same shapes as React Native's `<Image>` plus a
+   * raw URL string. Naming is intentionally aligned with `Avatar`,
+   * `ProductLabel`, `CardProviderInfo`, etc. so the library has a single,
+   * predictable image-source prop name.
+   */
+  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.
+   *
+   * Equivalent CSS: `aspect-ratio: <ratio>`.
+   */
+  ratio?: number | undefined
+  /** How the image is fit inside its box. Defaults to `'cover'`. */
+  resizeMode?: ImageResizeMode | undefined
+  /**
+   * Optional explicit width. If omitted and a `ratio` is set, the image
+   * defaults to `width: '100%'` so it fills its parent.
+   */
+  width?: ViewStyle['width'] | undefined
+  /** Optional explicit height. Usually you only need `ratio` instead. */
+  height?: ViewStyle['height'] | undefined
+  /** Border radius applied to the image (clips the underlying raster). */
+  borderRadius?: number | undefined
+  /** Style merged onto the underlying RN `<Image>`. */
+  style?: StyleProp<ImageStyle> | undefined
+  /** Accessibility label forwarded to RN `<Image>`. */
+  accessibilityLabel?: string | undefined
+  /** Hide from the a11y tree (e.g. when image is purely decorative). */
+  accessibilityElementsHidden?: boolean | undefined
+  importantForAccessibility?:
+    | 'auto'
+    | 'yes'
+    | 'no'
+    | 'no-hide-descendants'
+    | undefined
+}
+
+function normalizeSource(
+  imageSource: ImageProps['imageSource']
+): ImageSourcePropType | undefined {
+  if (imageSource == null) return undefined
+  if (typeof imageSource === 'string') return { uri: imageSource }
+  return imageSource
+}
+
+/**
+ * `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).
+ */
+function Image({
+  imageSource,
+  ratio,
+  resizeMode = 'cover',
+  width,
+  height,
+  borderRadius,
+  style,
+  accessibilityLabel,
+  accessibilityElementsHidden,
+  importantForAccessibility,
+}: ImageProps) {
+  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 (borderRadius != null) s.borderRadius = borderRadius
+    return s
+  }, [ratio, width, height, borderRadius])
+
+  if (!source) {
+    return <View style={[layoutStyle, style as StyleProp<ViewStyle>]} />
+  }
+
+  return (
+    <RNImage
+      source={source}
+      style={[layoutStyle, style]}
+      resizeMode={resizeMode}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityElementsHidden={accessibilityElementsHidden}
+      importantForAccessibility={importantForAccessibility}
+    />
+  )
+}
+
+export default React.memo(Image)