jfs-components 0.0.95 → 0.1.0

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

@@ -29,6 +29,12 @@ export type FullscreenModalProps = {
     heroHeight?: number;
     /** Whether to render the floating close button (top-right). Defaults to true. */
     showClose?: boolean;
+    /**
+     * Additional vertical offset (in px) applied to the floating close button's
+     * top position, on top of the base inset (`12 + safe-area top`). Positive
+     * values push it further down. Defaults to 0.
+     */
+    closeOffsetY?: number;
     /** Press handler for the close button. */
     onClose?: () => void;
     /** Accessibility label for the close button. */
@@ -104,6 +110,6 @@ export type FullscreenModalProps = {
  * </FullscreenModal>
  * ```
  */
-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;
+declare function FullscreenModal({ eyebrow, headline, supportingText, priceText, heroMedia, heroHeight, showClose, closeOffsetY, 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/TestimonialsCard/TestimonialsCard.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+import { type AvatarProps } from '../Avatar/Avatar';
+export type TestimonialsCardProps = {
+    /**
+     * The testimonial heading, typically the author's name.
+     */
+    title?: string;
+    /**
+     * The testimonial body copy.
+     */
+    body?: string;
+    /**
+     * Mode configuration passed to the token resolver. Also forwarded to the
+     * Avatar child for consistent theming.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Optional style overrides for the card container.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Props forwarded to the Avatar component (e.g. a custom `imageSource`).
+     */
+    avatarProps?: Partial<AvatarProps>;
+    /**
+     * Accessibility label for the card region. Falls back to a label generated
+     * from the title and body.
+     */
+    accessibilityLabel?: string;
+};
+/**
+ * TestimonialsCard renders a compact, fixed-width card with a circular avatar,
+ * a bold title, and a body paragraph. It is typically used inside a horizontal
+ * carousel of customer testimonials.
+ *
+ * All styling values are resolved from Figma design tokens using the provided
+ * `modes`.
+ *
+ * @example
+ * ```tsx
+ * <TestimonialsCard
+ *   title="Aarav S."
+ *   body="I was dreading renewing my car insurance, but JioFinance made it a breeze."
+ * />
+ * ```
+ */
+declare function TestimonialsCard({ title, body, modes, style, avatarProps, accessibilityLabel, }: TestimonialsCardProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TestimonialsCard>;
+export default _default;
+//# sourceMappingURL=TestimonialsCard.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';
@@ -130,6 +130,7 @@ export { default as StatItem, type StatItemProps, type StatItemLabelPosition } f
 export { default as StatGroup, type StatGroupProps, type StatGroupItem } from './StatGroup/StatGroup';
 export { default as StrengthIndicator, type StrengthIndicatorProps, type StrengthIndicatorConfidence, type StrengthIndicatorConfidenceValue } from './StrengthIndicator/StrengthIndicator';
 export { default as SummaryTile, type SummaryTileProps } from './SummaryTile/SummaryTile';
+export { default as TestimonialsCard, type TestimonialsCardProps } from './TestimonialsCard/TestimonialsCard';
 export { default as Text, type TextProps } from './Text/Text';
 export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './SegmentedControl/SegmentedControl';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';

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-04T14:40:09.533Z
+ * Generated: 2026-06-09T13:55:40.250Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

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

package/src/components/Dropdown/Dropdown.tsx

@@ -290,15 +290,33 @@ export function Dropdown({
     const shadowBlur =
         parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16
 
-    const containerStyle: ViewStyle = {
+    // Shadow lives on the OUTER view, which must NOT set `overflow: 'hidden'`.
+    // On native, clipping a view also clips its shadow (iOS clips the layer
+    // shadow; Android clips the elevation shadow), so the soft popup shadow
+    // that renders fine on web (CSS box-shadow paints outside the box) would
+    // get cut off. The rounded-corner clipping is moved to a separate inner
+    // view below.
+    //
+    // The `boxShadow` style prop (RN 0.76+ / react-native-web) is used as the
+    // single source of truth so the designed color/offset/blur are honored on
+    // iOS, Android AND web. We intentionally do NOT also set the legacy
+    // `shadow*` / `elevation` props: on the new architecture (and web) those
+    // are translated into a box-shadow internally, so combining them with an
+    // explicit `boxShadow` would stack two shadows. Android's legacy
+    // `elevation` is also undesirable here because it ignores the shadow color
+    // and only paints a generic gray shadow.
+    const shadowStyle: ViewStyle & { boxShadow?: string } = {
         backgroundColor: background,
+        borderRadius: radius,
+        boxShadow: `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`,
+    }
+
+    // Inner view carries the rounded corners + clipping so list/scroll content
+    // stays inside the radius without affecting the outer view's shadow.
+    const clipStyle: ViewStyle = {
         borderRadius: radius,
         overflow: 'hidden',
-        shadowColor,
-        shadowOffset: { width: shadowOffsetX, height: shadowOffsetY },
-        shadowOpacity: 1,
-        shadowRadius: shadowBlur / 2,
-        elevation: 4,
+        backgroundColor: background,
     }
 
     const content = (
@@ -309,21 +327,23 @@ export function Dropdown({
 
     return (
         <View
-            style={[containerStyle, style]}
+            style={[shadowStyle, style]}
             accessibilityRole="menu"
             accessibilityLabel={accessibilityLabel || 'Dropdown menu'}
         >
-            {maxHeight != null ? (
-                <ScrollView
-                    style={{ maxHeight }}
-                    showsVerticalScrollIndicator={true}
-                    keyboardShouldPersistTaps="handled"
-                >
-                    {content}
-                </ScrollView>
-            ) : (
-                content
-            )}
+            <View style={clipStyle}>
+                {maxHeight != null ? (
+                    <ScrollView
+                        style={{ maxHeight }}
+                        showsVerticalScrollIndicator={true}
+                        keyboardShouldPersistTaps="handled"
+                    >
+                        {content}
+                    </ScrollView>
+                ) : (
+                    content
+                )}
+            </View>
         </View>
     )
 }

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -7,6 +7,7 @@ import {
   type ViewStyle,
   type TextStyle,
 } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
@@ -70,6 +71,12 @@ export type FullscreenModalProps = {
   heroHeight?: number
   /** Whether to render the floating close button (top-right). Defaults to true. */
   showClose?: boolean
+  /**
+   * Additional vertical offset (in px) applied to the floating close button's
+   * top position, on top of the base inset (`12 + safe-area top`). Positive
+   * values push it further down. Defaults to 0.
+   */
+  closeOffsetY?: number
   /** Press handler for the close button. */
   onClose?: () => void
   /** Accessibility label for the close button. */
@@ -229,6 +236,7 @@ function FullscreenModal({
   heroMedia,
   heroHeight = 420,
   showClose = true,
+  closeOffsetY = 0,
   onClose,
   closeAccessibilityLabel = 'Close',
   footer,
@@ -260,6 +268,23 @@ function FullscreenModal({
 
   const rootGap = Number(getVariableByName('fullScreenModal/gap', modes)) || 16
 
+  // Safe-area insets so the floating chrome clears the system bars: the close
+  // button drops below the status bar / notch, and the sticky footer keeps its
+  // designed bottom padding ON TOP of the bottom inset (home indicator /
+  // Android gesture or nav bar). On web — and anywhere without a
+  // SafeAreaProvider — every inset is 0, so the layout is unchanged.
+  const insets = useSafeAreaInsets()
+  const closeButtonInsetStyle = useMemo<ViewStyle>(
+    () => ({ top: 12 + insets.top + closeOffsetY }),
+    [insets.top, closeOffsetY]
+  )
+  // Extend (not replace) the footer's token bottom padding by the bottom inset
+  // so the action button never sits under the system navigation area.
+  const footerInsetStyle = useMemo<ViewStyle>(() => {
+    const base = Number(getVariableByName('actionFooter/padding/bottom', modes)) || 41
+    return { paddingBottom: base + insets.bottom }
+  }, [modes, insets.bottom])
+
   // Drives the background's parallax-free sync with the scroll. The hero media
   // lives at the ROOT (so it is never clipped to the content height and sits
   // behind the transparent footer), but we translate it up by the exact scroll
@@ -388,7 +413,9 @@ function FullscreenModal({
       </Animated.ScrollView>
 
       {footerContent ? (
-        <ActionFooter modes={modes}>{footerContent}</ActionFooter>
+        <ActionFooter modes={modes} style={footerInsetStyle}>
+          {footerContent}
+        </ActionFooter>
       ) : null}
 
       {showClose ? (
@@ -396,7 +423,7 @@ function FullscreenModal({
           iconName="ic_close"
           modes={modes}
           accessibilityLabel={closeAccessibilityLabel}
-          style={closeButtonStyle}
+          style={[closeButtonStyle, closeButtonInsetStyle]}
           {...(onClose ? { onPress: onClose } : {})}
         />
       ) : null}

package/src/components/Spinner/Spinner.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { StyleSheet, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
 import Animated, {
   Easing,
   cancelAnimation,
@@ -171,7 +171,7 @@ const useSegmentRotation = (
     }
   }, [gravity, index, spreadMinRad, spreadMaxRad, spreadOutFrac])
 
-const fullSize: ViewStyle = { ...StyleSheet.absoluteFillObject }
+const fullSize: ViewStyle = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }
 
 function Spinner({
   size = DEFAULT_SIZE,