jfs-components 0.0.54 → 0.0.56

package/lib/module/utils/react-utils.js

@@ -7,17 +7,25 @@ import React from 'react';
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
 export function cloneChildrenWithModes(children, modes, forcedModes) {
-  return React.Children.map(children, child => {
+  const result = [];
+  React.Children.forEach(children, child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
-      return child;
+      if (child !== null && child !== undefined) {
+        result.push(child);
+      }
+      return;
     }
 
-    // Get existing children
+    // Unwrap Fragments: Fragments can't accept arbitrary props like `modes`,
+    // so recurse into their children and process each one individually.
+    if (child.type === React.Fragment) {
+      const fragment = child;
+      result.push(...cloneChildrenWithModes(fragment.props.children, modes, forcedModes));
+      return;
+    }
     const childChildren = child.props?.children;
     const hasChildren = childChildren !== undefined && childChildren !== null;
 
-    // Clone the child with modes prop if it doesn't already have one
-    // or merge with existing modes if it does
     // Merge order: parent modes first, then child's explicit modes override them,
     // then forcedModes (if provided) are applied last and can never be overridden
     const existingModes = child.props?.modes;
@@ -29,16 +37,13 @@ export function cloneChildrenWithModes(children, modes, forcedModes) {
       ...modes,
       ...existingModes
     } : modes;
-
-    // Recursively process children if they exist
-    const processedChildren = hasChildren ? cloneChildrenWithModes(React.Children.toArray(childChildren), modes, forcedModes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/React.cloneElement(child, {
+    const processedChildren = hasChildren ? cloneChildrenWithModes(childChildren, modes, forcedModes) : undefined;
+    result.push(/*#__PURE__*/React.cloneElement(child, {
       ...child.props,
       modes: mergedModes
-    }, processedChildren);
-  })?.filter(child => child !== null && child !== undefined) ?? [];
+    }, processedChildren));
+  });
+  return result;
 }
 
 /**

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

@@ -3,32 +3,37 @@ import { View, type StyleProp, type ViewStyle } from 'react-native';
 type ListGroupProps = {
     label?: string;
     listGroupSlot?: React.ReactNode;
+    children?: React.ReactNode;
     modes?: Record<string, any>;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;
-} & React.ComponentProps<typeof View>;
+} & Omit<React.ComponentProps<typeof View>, 'children'>;
 /**
  * ListGroup component that mirrors the Figma "List Group" component.
  *
  * This component supports:
  *  - **label** text at the top
- *  - **listGroupSlot** for custom content (typically ListItem components)
+ *  - **listGroupSlot** or **children** for content (typically ListItem components)
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "List group" → `listGroupSlot`
+ * Content can be provided in two interchangeable ways:
+ *  - Via the `listGroupSlot` prop (Figma Slot "List group")
+ *  - Via `children`
+ *
+ * Both produce identical results. If both are provided, they are merged
+ * (listGroupSlot items render first, then children).
  *
  * @component
  * @param {Object} props
  * @param {string} [props.label=''] - Label text displayed at the top of the list group
- * @param {React.ReactNode} [props.listGroupSlot] - Optional custom slot for list items (Figma Slot "List group")
+ * @param {React.ReactNode} [props.listGroupSlot] - Slot for list items (Figma Slot "List group")
+ * @param {React.ReactNode} [props.children] - Children for list items (equivalent to listGroupSlot)
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
  * @param {Object} [props.style] - Optional container style overrides
  * @param {string} [props.accessibilityLabel] - Accessibility label for the list group. If not provided, uses label
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
-declare function ListGroup({ label, listGroupSlot, modes, style, accessibilityLabel, accessibilityHint, ...rest }: ListGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ListGroup({ label, listGroupSlot, children, modes, style, accessibilityLabel, accessibilityHint, ...rest }: ListGroupProps): import("react/jsx-runtime").JSX.Element;
 export default ListGroup;
 //# sourceMappingURL=ListGroup.d.ts.map

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

@@ -12,23 +12,18 @@ type NavArrowProps = {
     accessibilityLabel?: string;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel'>;
 /**
- * NavArrow component that displays a small chevron arrow for navigation.
+ * NavArrow component that displays a chevron arrow for navigation.
  *
- * This component uses design tokens for all visual properties:
+ * Renders a stroked SVG chevron whose dimensions and thickness are
+ * fully driven by design tokens:
  * - navArrow/icon/color - chevron stroke color
- * - navArrow/icon/width - icon width
- * - navArrow/icon/height - icon height
- * - navArrow/icon/strokeWeight - stroke width
+ * - navArrow/icon/width - chevron arm width (horizontal spread)
+ * - navArrow/icon/height - chevron arm height (vertical spread)
+ * - navArrow/icon/strokeWeight - stroke thickness
  * - navArrow/width - container width
  * - navArrow/height - container height
  * - navArrow/radius - border radius
  * - navArrow/background - background color
- *
- * @component
- * @param {Object} props
- * @param {'Back'|'Forward'|'Down'} [props.direction='Back'] - Arrow direction
- * @param {Object} [props.modes={}] - Modes for design token resolution
- * @param {Object} [props.style] - Additional container styles
  */
 export default function NavArrow({ direction, modes, style, accessibilityLabel, ...rest }: NavArrowProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { type ViewStyle, type PressableProps } from 'react-native';
+import { type WebAccessibilityProps } from '../../utils/web-platform-utils';
+export type TransactionBubbleProps = {
+    description?: string;
+    value?: string | number;
+    currency?: string;
+    status?: string;
+    date?: string;
+    /** Slot for the status area. When provided, replaces the default TransactionStatus + NavArrow. */
+    statusSlot?: React.ReactNode;
+    children?: React.ReactNode;
+    modes?: Record<string, any>;
+    onPress?: () => void;
+    style?: ViewStyle;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    webAccessibilityProps?: WebAccessibilityProps;
+} & Omit<PressableProps, 'style' | 'children' | 'onPress'>;
+/**
+ * TransactionBubble — Figma node 1517:1155.
+ *
+ * Layout (single horizontal row inside a rounded bordered pill):
+ *
+ *   ┌──────────────────────────────────────────────┐
+ *   │  Description                  Status · Date  │
+ *   │  ₹56                                    ›    │
+ *   └──────────────────────────────────────────────┘
+ *
+ * Left column: description text + MoneyValue, stacked vertically with `transactionBubble/gap`.
+ * Right column: TransactionStatus + NavArrow, stacked vertically with `transactionBubble/statusWrap/gap`,
+ *               right-aligned.
+ */
+declare function TransactionBubble({ description, value, currency, status, date, statusSlot, children, modes, onPress, style, accessibilityLabel, accessibilityHint, webAccessibilityProps, ...rest }: TransactionBubbleProps): import("react/jsx-runtime").JSX.Element;
+export default TransactionBubble;
+//# sourceMappingURL=TransactionBubble.d.ts.map

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

@@ -47,6 +47,7 @@ export { default as ThreadHero, type ThreadHeroProps } from './ThreadHero/Thread
 export { Tooltip } from './Tooltip/Tooltip';
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
 export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
+export { default as TransactionBubble, type TransactionBubbleProps } from './TransactionBubble/TransactionBubble';
 export { default as UpiHandle } from './UpiHandle/UpiHandle';
 export { default as VStack, type VStackProps } from './VStack/VStack';
 export { default as ChipGroup, type ChipGroupProps } from './ChipGroup/ChipGroup';

package/lib/typescript/src/design-tokens/JFSThemeProvider.d.ts

@@ -40,5 +40,20 @@ export declare const JFSThemeProvider: React.FC<JFSThemeProviderProps>;
  * }
  */
 export declare const useTokens: () => TokenContextType;
+/**
+ * Returns the JFS font map. The TTF is encapsulated within the package at
+ * src/assets/fonts/JioType Var.ttf (included via package.json "files").
+ * Call this inside load functions to avoid top-level require errors if font missing.
+ */
+export declare const getJFSFonts: () => {
+    readonly 'JioType Var': any;
+};
+/**
+ * Hook for loading JFS fonts using expo-font. This improves Android font support by explicitly registering
+ * the custom 'JioType Var' font (encapsulated in the package) via Font.loadAsync before components render.
+ * Without it, Android defaults to Roboto. Call at app root (e.g. before JFSThemeProvider). Returns loaded state.
+ * See getJFSFonts() for direct use with Font.loadAsync. Handles missing font gracefully for web/Storybook.
+ */
+export declare function useJFSFonts(): boolean;
 export {};
 //# sourceMappingURL=JFSThemeProvider.d.ts.map

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-13T20:33:05.821Z
+ * Generated: 2026-04-14T12:07:25.514Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/Accordion/Accordion.tsx

@@ -14,56 +14,13 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
 
 // Enable LayoutAnimation on Android
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true)
 }
 
-/**
- * Helper function to recursively clone children and pass modes prop to components that accept it.
- * This ensures that all child components in slots receive the modes prop from the parent.
- */
-function cloneChildrenWithModes(
-  children: React.ReactNode,
-  modes: Record<string, any>
-): React.ReactNode[] {
-  const result = React.Children.map(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return child
-    }
-
-    // Get existing children
-    const childChildren = (child.props as any)?.children
-    const hasChildren = childChildren !== undefined && childChildren !== null
-
-    // Merge modes: parent modes first, then child's explicit modes override them
-    const existingModes = (child.props as any)?.modes
-    const mergedModes = existingModes
-      ? { ...modes, ...existingModes }
-      : modes
-
-    // Recursively process children if they exist
-    const processedChildren: React.ReactNode | undefined = hasChildren
-      ? cloneChildrenWithModes(
-          React.Children.toArray(childChildren),
-          modes
-        )
-      : undefined
-
-    // Clone element with modes and processed children
-    return React.cloneElement(
-      child,
-      {
-        ...(child.props as any),
-        modes: mergedModes,
-      },
-      processedChildren
-    )
-  })
-  return result || []
-}
-
 export type AccordionProps = {
   /** The accordion header title */
   title?: string;

package/src/components/AppBar/AppBar.tsx

@@ -3,51 +3,8 @@ import { View, type StyleProp, type ViewStyle, Pressable } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 
-import Avatar from '../Avatar/Avatar'
 import NavArrow from '../NavArrow/NavArrow'
-// We might need to import Image or Svg if we had the assets locally, but for now we'll use placeholders or standard icons for defaults.
-// The user prompt mentioned "Use getVariableByName... strict camelCase".
-
-/**
- * Helper function to recursively clone children and pass modes prop to components that accept it.
- */
-function cloneChildrenWithModes(
-  children: React.ReactNode,
-  modes: Record<string, any>
-): React.ReactNode[] {
-  return React.Children.map(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return child
-    }
-
-    // Get existing children
-    const childChildren = (child.props as any)?.children
-    const hasChildren = childChildren !== undefined && childChildren !== null
-
-    // Clone the child with modes prop if it doesn't already have one
-    // or merge with existing modes if it does
-    const existingModes = (child.props as any)?.modes
-    const mergedModes = existingModes ? { ...modes, ...existingModes } : modes
-
-    // Recursively process children if they exist
-    const processedChildren: React.ReactNode | undefined = hasChildren
-      ? cloneChildrenWithModes(
-        React.Children.toArray(childChildren),
-        modes
-      )
-      : undefined
-
-    // Clone element with modes and processed children
-    return React.cloneElement(
-      child,
-      {
-        ...(child.props as any),
-        modes: mergedModes,
-      },
-      processedChildren
-    )
-  })?.filter((child) => child !== null && child !== undefined) as React.ReactNode[] ?? []
-}
+import { cloneChildrenWithModes } from '../../utils/react-utils'
 
 type AppBarType = 'MainPage' | 'SubPage'
 

package/src/components/Drawer/Drawer.tsx

@@ -232,17 +232,25 @@ function Drawer({
         ? (translateY.value - minTranslateY) / totalRange
         : 0
 
-      // Fast fling → always follow the fling direction
-      if (event.velocityY < -500) {
+      // How far the drawer sheet itself moved from its position at gesture
+      // start.  When the scroll view consumed the gesture (content was not
+      // at the top), the drawer stays put and displacement ≈ 0 — even
+      // though the finger moved fast.  We must NOT use velocity to snap in
+      // that case; otherwise a fast content-scroll collapses the drawer.
+      const drawerDisplacement = Math.abs(translateY.value - context.value.y)
+      const drawerMovedEnough = drawerDisplacement > 10
+
+      if (drawerMovedEnough && event.velocityY < -500) {
         scrollTo(minTranslateY)
         isFullyExpanded.value = true
         runOnJS(updateMode)('expanded')
-      } else if (event.velocityY > 500) {
+      } else if (drawerMovedEnough && event.velocityY > 500) {
         scrollTo(maxTranslateY)
         isFullyExpanded.value = false
         runOnJS(updateMode)('collapsed')
       } else {
-        // Slow / medium gesture → use asymmetric snap thresholds.
+        // Slow / medium gesture, or the drawer barely moved → position
+        // based snap with asymmetric thresholds.
         // Down stroke: must cross 75% to collapse (hard to dismiss).
         // Up stroke: must reach top 35% to expand (35% from top).
         const isDraggingDown = event.velocityY >= 0

package/src/components/FilterBar/FilterBar.tsx

@@ -2,50 +2,7 @@ import React, { useState } from 'react'
 import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import TextInput from '../TextInput/TextInput'
-
-/**
- * Helper function to recursively clone children and pass modes prop to components that accept it.
- * This ensures that all child components in slots receive the modes prop from the parent.
- */
-function cloneChildrenWithModes(
-  children: React.ReactNode,
-  modes: Record<string, any>
-): React.ReactNode[] {
-  const result = React.Children.map(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return child
-    }
-
-    // Get existing children
-    const childChildren = (child.props as any)?.children
-    const hasChildren = childChildren !== undefined && childChildren !== null
-
-    // Clone the child with modes prop if it doesn't already have one
-    // or merge with existing modes if it does
-    // Merge order: parent modes first, then child's explicit modes override them
-    const existingModes = (child.props as any)?.modes
-    const mergedModes = existingModes ? { ...modes, ...existingModes } : modes
-
-    // Recursively process children if they exist
-    const processedChildren: React.ReactNode | undefined = hasChildren
-      ? cloneChildrenWithModes(
-          React.Children.toArray(childChildren),
-          modes
-        )
-      : undefined
-
-    // Clone element with modes and processed children
-    return React.cloneElement(
-      child,
-      {
-        ...(child.props as any),
-        modes: mergedModes,
-      },
-      processedChildren
-    )
-  })
-  return result || []
-}
+import { cloneChildrenWithModes } from '../../utils/react-utils'
 
 type RenderInputArgs = {
   placeholder: string;

package/src/components/LazyList/LazyList.tsx

@@ -1,47 +1,7 @@
 import React from 'react'
 import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-
-/**
- * Helper function to recursively clone children and pass modes prop to components that accept it.
- * This ensures that all child components in slots receive the modes prop from the parent.
- */
-function cloneChildrenWithModes(children: React.ReactNode, modes: Record<string, any>): React.ReactNode {
-  return React.Children.map(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return child
-    }
-
-    // Get existing children
-    const childProps = child.props as { children?: React.ReactNode; modes?: Record<string, any>; [key: string]: any }
-    const childChildren = childProps?.children
-    const hasChildren = childChildren !== undefined && childChildren !== null
-
-    // Clone the child with modes prop if it doesn't already have one
-    // or merge with existing modes if it does
-    // Merge order: parent modes first, then child's explicit modes override them
-    const existingModes = childProps?.modes
-    const mergedModes = existingModes ? { ...modes, ...existingModes } : modes
-
-    // Recursively process children if they exist
-    const processedChildren = hasChildren
-      ? cloneChildrenWithModes(
-          React.Children.toArray(childChildren),
-          modes
-        )
-      : undefined
-
-    // Clone element with modes and processed children
-    return React.cloneElement(
-      child,
-      {
-        ...childProps,
-        modes: mergedModes,
-      } as any,
-      processedChildren
-    )
-  })
-}
+import { cloneChildrenWithModes } from '../../utils/react-utils'
 
 type LazyListProps = {
   listGroupsSlot?: React.ReactNode;

package/src/components/ListGroup/ListGroup.tsx

@@ -11,28 +11,33 @@ import { cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils
 type ListGroupProps = {
   label?: string;
   listGroupSlot?: React.ReactNode;
+  children?: React.ReactNode;
   modes?: Record<string, any>;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;
-} & React.ComponentProps<typeof View>;
+} & Omit<React.ComponentProps<typeof View>, 'children'>;
 
 /**
  * ListGroup component that mirrors the Figma "List Group" component.
  *
  * This component supports:
  *  - **label** text at the top
- *  - **listGroupSlot** for custom content (typically ListItem components)
+ *  - **listGroupSlot** or **children** for content (typically ListItem components)
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "List group" → `listGroupSlot`
+ * Content can be provided in two interchangeable ways:
+ *  - Via the `listGroupSlot` prop (Figma Slot "List group")
+ *  - Via `children`
+ *
+ * Both produce identical results. If both are provided, they are merged
+ * (listGroupSlot items render first, then children).
  *
  * @component
  * @param {Object} props
  * @param {string} [props.label=''] - Label text displayed at the top of the list group
- * @param {React.ReactNode} [props.listGroupSlot] - Optional custom slot for list items (Figma Slot "List group")
+ * @param {React.ReactNode} [props.listGroupSlot] - Slot for list items (Figma Slot "List group")
+ * @param {React.ReactNode} [props.children] - Children for list items (equivalent to listGroupSlot)
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
  * @param {Object} [props.style] - Optional container style overrides
  * @param {string} [props.accessibilityLabel] - Accessibility label for the list group. If not provided, uses label
@@ -41,6 +46,7 @@ type ListGroupProps = {
 function ListGroup({
   label = '',
   listGroupSlot,
+  children,
   modes = {},
   style,
   accessibilityLabel,
@@ -79,11 +85,15 @@ function ListGroup({
     fontWeight: labelFontWeight,
   }
 
-  // Clone listGroupSlot children and pass modes to all children that accept it
-  // We flatten children first so that if a Fragment is passed, the items inside
-  // become direct children of the container, allowing `gap` to apply correctly between them.
-  const processedSlot = listGroupSlot
-    ? cloneChildrenWithModes(flattenChildren(listGroupSlot), modes)
+  // Merge listGroupSlot and children into a single list, then flatten and
+  // propagate modes.  Both props are interchangeable; when both are provided
+  // the slot items render first, followed by children.
+  const rawItems = [
+    ...(listGroupSlot ? flattenChildren(listGroupSlot) : []),
+    ...(children ? flattenChildren(children) : []),
+  ]
+  const processedSlot = rawItems.length > 0
+    ? cloneChildrenWithModes(rawItems, modes)
     : null
 
   // Use provided accessibilityLabel or fall back to label

package/src/components/MoneyValue/MoneyValue.tsx

@@ -127,7 +127,7 @@ function MoneyValue({
       ? fontWeightValue.toString()
       : fontWeightValue
   const fontFamily = getVariableByName('moneyValue/fontFamily', modes) || 'System'
-  const gap = getVariableByName('moneyValue/gap', modes) || 4
+  const gap = getVariableByName('moneyValue/gap', modes) ?? 4
 
   // Resolve currency to a symbol, supporting both symbols and ISO codes
   const resolvedCurrency = useMemo(() => {