jfs-components 0.0.86 → 0.0.99

package/lib/module/skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useId, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 import Animated, { interpolate, useAnimatedStyle } from 'react-native-reanimated';
 import Svg, { Defs, LinearGradient as SvgLinearGradient, Rect, Stop } from 'react-native-svg';
 import { getVariableByName } from '../design-tokens/figma-variables-resolver';
@@ -16,12 +16,20 @@ const SOLID_OVERLAY_COLOR = 'rgba(255, 255, 255, 1)';
 // `pointerEvents: 'none'` lives on the style (not the deprecated prop) so it
 // works on both native and React Native Web without warnings.
 const absoluteFillStyle = {
-  ...StyleSheet.absoluteFillObject,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   overflow: 'hidden',
   pointerEvents: 'none'
 };
 const solidOverlayStyle = {
-  ...StyleSheet.absoluteFillObject,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
   backgroundColor: SOLID_OVERLAY_COLOR
 };
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-type DrawerProps = {
+export type DrawerProps = {
     modes?: Record<string, any>;
     style?: import('react-native').StyleProp<import('react-native').ViewStyle>;
     title?: string;
@@ -11,7 +11,19 @@ type DrawerProps = {
     children?: React.ReactNode;
     collapsedHeight?: number;
     expandedRatio?: number;
+    /**
+     * Sets the drawer state when it first mounts (uncontrolled mode).
+     * Ignored once `state` is provided (controlled mode).
+     */
     initialState?: 'collapsed' | 'expanded';
+    /**
+     * Programmatically controls the drawer's collapsed/expanded state.
+     * When provided, the drawer becomes a controlled component: it will
+     * animate to match this value (reusing the same spring used by gestures)
+     * and gesture-driven changes are reported via `onStateChange` for the
+     * parent to apply back. Leave undefined for uncontrolled behaviour.
+     */
+    state?: 'collapsed' | 'expanded';
     contentStyle?: any;
     sheetStyle?: any;
     accessibilityLabel?: string;
@@ -31,9 +43,16 @@ type DrawerProps = {
     onStateChange?: (state: 'collapsed' | 'expanded') => void;
 };
 /**
- * Drawer component with nested scrolling support.
- * Uses react-native-gesture-handler and react-native-reanimated.
+ * Imperative handle exposed via `ref` for programmatic control of the drawer.
+ * Each method animates using the same spring as gesture-driven transitions.
  */
-declare function Drawer({ modes, style, title, header, children, collapsedHeight, expandedRatio, initialState, contentStyle, sheetStyle, accessibilityLabel, accessibilityHint, contentContainerStyle, showsVerticalScrollIndicator, bottomInset, onStateChange, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export type DrawerHandle = {
+    expand: () => void;
+    collapse: () => void;
+    toggle: () => void;
+    /** Current settled state of the drawer. */
+    getState: () => 'collapsed' | 'expanded';
+};
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<DrawerHandle>>;
 export default Drawer;
 //# sourceMappingURL=Drawer.d.ts.map

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

@@ -10,18 +10,21 @@ export type FullscreenModalProps = {
     /** Secondary line below the supporting paragraph (e.g. a price / timeline). */
     priceText?: string;
     /**
-     * Background media rendered full-bleed behind the hero text. Bring any
-     * renderer — most commonly an `Image`, but a `LottiePlayer`, `Video`, or
-     * `SvgXml` works too. It is laid out at the full modal width; size it with an
-     * aspect ratio (e.g. `<Image ratio={3 / 4} />`) so its height follows the
-     * width naturally. The media scrolls together with the rest of the content
-     * (no parallax). `modes` are cascaded into it.
+     * Full-bleed background media for the whole modal. It is pinned to the top
+     * and laid out at the full modal width; size it with an aspect ratio
+     * (e.g. `<Image ratio={1080 / 4140} />`) so its height follows the width
+     * naturally. It renders as a single continuous background BEHIND both the
+     * hero text and the body content — there is no separate body box stacked on
+     * top of it. Bring any renderer — most commonly an `Image`, but a
+     * `LottiePlayer`, `Video`, or `SvgXml` works too. It never intercepts
+     * touches and the foreground content scrolls over it (no parallax).
+     * `modes` are cascaded into it.
      */
     heroMedia?: React.ReactNode;
     /**
-     * Fallback height for the hero text region when no `heroMedia` is provided.
-     * When `heroMedia` is present, the hero height is driven entirely by the
-     * media's own aspect ratio and this value is ignored. Defaults to 420.
+     * Height reserved for the hero text region (eyebrow / headline / supporting
+     * / price), whose content is anchored to the bottom. Applies whether or not
+     * `heroMedia` is present. Defaults to 420.
      */
     heroHeight?: number;
     /** Whether to render the floating close button (top-right). Defaults to true. */
@@ -41,15 +44,17 @@ export type FullscreenModalProps = {
     onPrimaryAction?: () => void;
     /** Disclaimer text shown below the default primary action button. */
     disclaimer?: string;
-    /** Solid backdrop color for the scrollable body. Defaults to a near-black. */
-    backgroundColor?: string;
     /** Body content (typically `Section`s). `modes` are cascaded automatically. */
     children?: React.ReactNode;
-    /** Mode configuration. `context5` is always forced to `'Fullscreen Modal'`. */
+    /**
+     * Mode configuration. `Page type` defaults to `'JioPlus'` (overridable here),
+     * and `context5` is always forced to `'Fullscreen Modal'` (non-overridable).
+     * The resolved modes cascade to the body, hero media, and the `ActionFooter`.
+     */
     modes?: Record<string, any>;
     /** Style overrides for the outer container. */
     style?: StyleProp<ViewStyle>;
-    /** Style overrides for the scroll body wrapper (the dark content area). */
+    /** Style overrides for the transparent body wrapper. */
     contentContainerStyle?: StyleProp<ViewStyle>;
     testID?: string;
 };
@@ -64,12 +69,21 @@ export type FullscreenModalProps = {
  * That mode is cascaded into `children`, the footer, and the hero text via
  * `cloneChildrenWithModes` / the merged `modes` object.
  *
- * ### Hero
- * The `heroMedia` is rendered full modal width inside the scroll body and
- * takes its height from its own aspect ratio. The hero text (eyebrow /
- * headline / supporting / price) is overlaid on top, anchored to the bottom.
- * The whole hero scrolls together with the rest of the content — there is no
- * parallax effect.
+ * ### Background media
+ * The `heroMedia` is a single full-bleed background pinned to the top of the
+ * modal at the full width and its own natural aspect ratio. It lives at the
+ * ROOT — behind both the scrolling content and the (transparent) footer — so
+ * it fills the whole surface and is NEVER clipped to the content height. It
+ * also contributes ZERO scroll height: the scroll extent is driven purely by
+ * the in-flow foreground (hero text + `children`), so the number of body
+ * elements dictates how far the surface scrolls. It still scrolls in lockstep
+ * WITH the content (the background is translated by the scroll offset), so the
+ * content reads as sitting ON one continuous image that moves with it — there
+ * is no parallax and no separate solid body box.
+ *
+ * Pass a background sized to the full width at its natural ratio
+ * (e.g. `<Image imageSource={bg} ratio={1080 / 4140} />`). Use an asset at
+ * least as tall as the surface so it covers the full modal.
  *
  * @component
  * @example
@@ -79,7 +93,7 @@ export type FullscreenModalProps = {
  *   headline="Get more from your money."
  *   supportingText="JioFinance+ is your upgraded financial experience…"
  *   priceText="₹999/year · ₹0 until 2027"
- *   heroMedia={<Image imageSource={hero} ratio={3 / 4} />}
+ *   heroMedia={<Image imageSource={hero} ratio={1080 / 4140} />}
  *   primaryActionLabel="Upgrade for free"
  *   disclaimer="By upgrading, we'll check your eligibility with Experian."
  *   onPrimaryAction={() => upgrade()}
@@ -90,6 +104,6 @@ export type FullscreenModalProps = {
  * </FullscreenModal>
  * ```
  */
-declare function FullscreenModal({ eyebrow, headline, supportingText, priceText, heroMedia, heroHeight, showClose, onClose, closeAccessibilityLabel, footer, primaryActionLabel, onPrimaryAction, disclaimer, backgroundColor, children, modes: propModes, style, contentContainerStyle, testID, }: FullscreenModalProps): import("react/jsx-runtime").JSX.Element;
+declare function FullscreenModal({ eyebrow, headline, supportingText, priceText, heroMedia, heroHeight, showClose, onClose, closeAccessibilityLabel, footer, primaryActionLabel, onPrimaryAction, disclaimer, children, modes: propModes, style, contentContainerStyle, testID, }: FullscreenModalProps): import("react/jsx-runtime").JSX.Element;
 export default FullscreenModal;
 //# sourceMappingURL=FullscreenModal.d.ts.map

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { type AccessibilityProps, type StyleProp, type ViewStyle } from 'react-native';
+import type { UnifiedSource } from '../../utils/MediaSource';
+type IconProps = AccessibilityProps & {
+    /**
+     * Built-in icon name from the registry, in the `ic_something` format
+     * (e.g. `'ic_card'`, `'ic_scan_qr_code'`). When omitted and no `source` or
+     * `children` slot is supplied, defaults to `'ic_card'` to match the Figma
+     * design's default glyph.
+     */
+    iconName?: string;
+    /**
+     * Unified fallback source rendered when `iconName` is missing or not in the
+     * registry. Accepts a remote URI, an inline SVG XML string, a `require()`
+     * asset, an SVG React component, or an already-rendered element. The media
+     * is tinted with the mode-resolved icon color so it follows design tokens
+     * just like a built-in icon. See {@link UnifiedSource}.
+     */
+    source?: UnifiedSource;
+    /**
+     * Icon slot. Render any node here (another `Icon`, a custom SVG component,
+     * etc.) and it takes precedence over `iconName`/`source`. `modes` cascade
+     * into the slotted children automatically.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override the mode-resolved icon color. When omitted the value comes from
+     * the `icon/color` design token.
+     */
+    color?: string;
+    /**
+     * Override the mode-resolved icon size (in px). When omitted the value comes
+     * from the `icon/size` design token.
+     */
+    size?: number;
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Icon component — a design-token-driven wrapper around a single glyph.
+ *
+ * It mirrors the Figma "Icon" component: a padded, centered container whose
+ * color and size are resolved from the `icon/*` design tokens via `modes`.
+ * The glyph itself can be supplied three ways, in order of precedence:
+ *
+ *  1. `children` — a real slot for any node (custom SVG component, nested
+ *     `Icon`, etc.). `modes` cascade into the slot automatically.
+ *  2. `iconName` — a registry icon in the `ic_something` format.
+ *  3. `source` — a {@link UnifiedSource} fallback (remote URI, inline SVG XML,
+ *     `require()` asset, SVG component, or React element), tinted with the
+ *     mode-resolved icon color.
+ *
+ * `color` and `size` props let consumers override the token values per
+ * instance without touching `modes`.
+ *
+ * @example
+ * ```tsx
+ * // Built-in registry icon (default path).
+ * <Icon iconName="ic_card" modes={{ 'Color Mode': 'Light' }} />
+ *
+ * // Per-instance overrides.
+ * <Icon iconName="ic_ccv" color="#5c00b5" size={24} />
+ *
+ * // Fallback to an external source when the name isn't in the registry.
+ * <Icon source="https://cdn.example.com/glyph.svg" />
+ *
+ * // Slot: render any node as the icon.
+ * <Icon><BrandLogo /></Icon>
+ * ```
+ */
+declare function Icon({ iconName, source, children, color, size, modes: propModes, style: styleProp, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Icon>;
+export default _default;
+export type { IconProps };
+//# sourceMappingURL=Icon.d.ts.map

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

@@ -22,7 +22,7 @@ export { default as CardFinancialCondition, type CardFinancialConditionProps } f
 export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
-export { default as Drawer } from './Drawer/Drawer';
+export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer/Drawer';
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
 export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
 export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem } from './SuggestiveSearch/SuggestiveSearch';
@@ -43,6 +43,7 @@ export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProp
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
 export { default as HStack, type HStackProps } from './HStack/HStack';
+export { default as Icon, type IconProps } from './Icon/Icon';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as Image, type ImageProps } from './Image/Image';

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-06-03T15:59:02.370Z
+ * Generated: 2026-06-08T14:11:35.036Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/assets.d.ts

@@ -0,0 +1,24 @@
+declare module '*.png' {
+  const value: string
+  export default value
+}
+
+declare module '*.jpg' {
+  const value: string
+  export default value
+}
+
+declare module '*.jpeg' {
+  const value: string
+  export default value
+}
+
+declare module '*.gif' {
+  const value: string
+  export default value
+}
+
+declare module '*.webp' {
+  const value: string
+  export default value
+}

package/src/components/Drawer/Drawer.tsx

@@ -1,9 +1,8 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react'
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { Platform, StyleSheet, Text, useWindowDimensions, View, ViewStyle } from 'react-native'
 import {
   Gesture,
   GestureDetector,
-  GestureHandlerRootView,
   ScrollView,
 } from 'react-native-gesture-handler'
 import Animated, {
@@ -53,7 +52,7 @@ function rubberBand(value: number, min: number, max: number, friction: number =
   return value
 }
 
-type DrawerProps = {
+export type DrawerProps = {
 
   modes?: Record<string, any>
   style?: import('react-native').StyleProp<import('react-native').ViewStyle>
@@ -66,7 +65,19 @@ type DrawerProps = {
   children?: React.ReactNode
   collapsedHeight?: number
   expandedRatio?: number
+  /**
+   * Sets the drawer state when it first mounts (uncontrolled mode).
+   * Ignored once `state` is provided (controlled mode).
+   */
   initialState?: 'collapsed' | 'expanded'
+  /**
+   * Programmatically controls the drawer's collapsed/expanded state.
+   * When provided, the drawer becomes a controlled component: it will
+   * animate to match this value (reusing the same spring used by gestures)
+   * and gesture-driven changes are reported via `onStateChange` for the
+   * parent to apply back. Leave undefined for uncontrolled behaviour.
+   */
+  state?: 'collapsed' | 'expanded'
   contentStyle?: any
   sheetStyle?: any
   accessibilityLabel?: string
@@ -86,11 +97,23 @@ type DrawerProps = {
   onStateChange?: (state: 'collapsed' | 'expanded') => void
 }
 
+/**
+ * Imperative handle exposed via `ref` for programmatic control of the drawer.
+ * Each method animates using the same spring as gesture-driven transitions.
+ */
+export type DrawerHandle = {
+  expand: () => void
+  collapse: () => void
+  toggle: () => void
+  /** Current settled state of the drawer. */
+  getState: () => 'collapsed' | 'expanded'
+}
+
 /**
  * Drawer component with nested scrolling support.
  * Uses react-native-gesture-handler and react-native-reanimated.
  */
-function Drawer({
+function DrawerInner({
 
   modes = EMPTY_MODES,
   style,
@@ -100,6 +123,7 @@ function Drawer({
   collapsedHeight = 200,
   expandedRatio = 0.90,
   initialState = 'collapsed',
+  state,
   contentStyle,
   sheetStyle,
   accessibilityLabel,
@@ -108,7 +132,7 @@ function Drawer({
   showsVerticalScrollIndicator = false,
   bottomInset = 80,
   onStateChange,
-}: DrawerProps) {
+}: DrawerProps, ref: React.Ref<DrawerHandle>) {
   const { height: screenHeight } = useWindowDimensions()
 
   // Calculate snap points
@@ -168,15 +192,58 @@ function Drawer({
     translateY.value = withSpring(destination, SPRING_CONFIG)
   }, [translateY])
 
-  // Update JS state for accessibility/logic if needed
+  // Update the JS-side mode. Pure: only schedules the state update. Side
+  // effects (notifying the parent via onStateChange) MUST NOT live inside the
+  // setState updater — doing so calls the parent's setState during React's
+  // render phase, which throws "Cannot update a component while rendering a
+  // different component" and causes an infinite update loop. We report changes
+  // from a dedicated effect below instead.
   const updateMode = useCallback((newMode: 'collapsed' | 'expanded') => {
-    setMode((prev) => {
-      if (prev !== newMode) {
-        onStateChange?.(newMode)
-      }
-      return newMode
-    })
-  }, [onStateChange])
+    setMode(newMode)
+  }, [])
+
+  // Notify the parent exactly once per settled mode change, after commit.
+  const reportedModeRef = useRef(mode)
+  useEffect(() => {
+    if (reportedModeRef.current !== mode) {
+      reportedModeRef.current = mode
+      onStateChange?.(mode)
+    }
+  }, [mode, onStateChange])
+
+  // Programmatic transition (JS thread). Reuses the same spring as gestures:
+  // animates `translateY`, keeps the scroll-gate (`isFullyExpanded`) in sync,
+  // and updates `mode` (which notifies via the onStateChange effect above).
+  const applyMode = useCallback((newMode: 'collapsed' | 'expanded') => {
+    const target = newMode === 'expanded' ? minTranslateY : maxTranslateY
+    translateY.value = withSpring(target, SPRING_CONFIG)
+    isFullyExpanded.value = newMode === 'expanded'
+    setMode(newMode)
+  }, [minTranslateY, maxTranslateY, translateY, isFullyExpanded])
+
+  // Controlled mode: react ONLY to genuine changes of the `state` prop, tracked
+  // against its previous value. We must NOT reconcile `state` against the
+  // internal `mode` on every render: a gesture updates `mode` optimistically
+  // one render before the parent echoes it back through `onStateChange` into
+  // `state`, so a `state !== mode` check would "correct" the gesture and fight
+  // the echo, ping-ponging forever (Maximum update depth exceeded).
+  // `applyMode` is idempotent, so re-applying the already-current mode is a
+  // no-op when the parent simply mirrors our own change back.
+  const prevStateProp = useRef(state)
+  useEffect(() => {
+    if (state === undefined) return
+    if (state === prevStateProp.current) return
+    prevStateProp.current = state
+    applyMode(state)
+  }, [state, applyMode])
+
+  // Imperative API for parents holding a ref.
+  useImperativeHandle(ref, () => ({
+    expand: () => applyMode('expanded'),
+    collapse: () => applyMode('collapsed'),
+    toggle: () => applyMode(mode === 'expanded' ? 'collapsed' : 'expanded'),
+    getState: () => mode,
+  }), [applyMode, mode])
 
   // Gesture policy:
   //  • activeOffsetY: require a clear *vertical* drag (10px) before this
@@ -362,7 +429,16 @@ function Drawer({
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer'
 
   return (
-    <GestureHandlerRootView style={[styles.host, style]} pointerEvents="box-none">
+    // IMPORTANT: the host is a plain box-none View, NOT a GestureHandlerRootView.
+    // On Android, GestureHandlerRootView renders a *native* root view that
+    // intercepts every touch within its bounds (to feed the gesture system) and
+    // does NOT honor pointerEvents="box-none". Because this host fills the whole
+    // screen as an overlay, using GestureHandlerRootView here swallowed all
+    // touches to content rendered behind the drawer (buttons, page content).
+    // Per the standard react-native-gesture-handler architecture, a single
+    // GestureHandlerRootView must wrap the app root; this overlay only needs to
+    // let touches fall through where the sheet isn't.
+    <View style={[styles.host, style]} pointerEvents="box-none">
       <GestureDetector gesture={gesture}>
         <Animated.View
           style={[
@@ -457,7 +533,7 @@ function Drawer({
           </View>
         </Animated.View>
       </GestureDetector>
-    </GestureHandlerRootView>
+    </View>
   )
 }
 
@@ -492,4 +568,7 @@ const styles = StyleSheet.create({
   },
 })
 
+const Drawer = forwardRef<DrawerHandle, DrawerProps>(DrawerInner)
+Drawer.displayName = 'Drawer'
+
 export default Drawer