jfs-components 0.0.55 → 0.0.57

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/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,39 @@
+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 (vertical stack inside a rounded bordered pill):
+ *
+ *   ┌──────────────────────────────────────────────┐
+ *   │  Description                                 │
+ *   │  ₹56                                        │
+ *   │  [slot / children content]                   │
+ *   │  ⚠ Expired · 20 Mar 2025               ›    │
+ *   └──────────────────────────────────────────────┘
+ *
+ * moneyValueWrap: description + MoneyValue, vertical with `transactionBubble/wrap/gap`.
+ * slotWrap: children (optional), rendered between moneyValueWrap and statusWrap.
+ * statusWrap: TransactionStatus + NavArrow, horizontal row with `transactionBubble/statusWrap/gap`.
+ * Container gap between sections: `transactionBubble/gap`.
+ */
+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:48:16.865Z
+ * Generated: 2026-04-14T14:14:19.990Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "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/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/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(() => {

package/src/components/NavArrow/NavArrow.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View, type ViewStyle } from 'react-native'
+import Svg, { Polyline } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import Icon from '../../icons/Icon'
 
 type NavArrowDirection = 'Back' | 'Forward' | 'Down'
 
@@ -17,23 +17,18 @@ type NavArrowProps = {
 } & 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 = 'Back',
@@ -42,11 +37,9 @@ export default function NavArrow({
   accessibilityLabel,
   ...rest
 }: NavArrowProps) {
-  // Resolve design tokens
   const iconColor =
     (getVariableByName('navArrow/icon/color', modes) as string) || '#24262b'
 
-  // Dimensions from tokens
   const widthToken = Number(getVariableByName('navArrow/width', modes)) || 6
   const heightToken = Number(getVariableByName('navArrow/height', modes)) || 10
   const borderRadius =
@@ -54,14 +47,18 @@ export default function NavArrow({
   const backgroundColor =
     (getVariableByName('navArrow/background', modes) as string) || 'transparent'
 
-  // Swap dimensions if direction is Down
+  const iconWidth = Number(getVariableByName('navArrow/icon/width', modes)) || 4
+  const iconHeight = Number(getVariableByName('navArrow/icon/height', modes)) || 8
+  const strokeWeight =
+    Number(getVariableByName('navArrow/icon/strokeWeight', modes)) || 2
+
   const isDown = direction === 'Down'
-  const width = isDown ? heightToken : widthToken
-  const height = isDown ? widthToken : heightToken
+  const containerWidth = isDown ? heightToken : widthToken
+  const containerHeight = isDown ? widthToken : heightToken
 
   const containerStyle: ViewStyle = {
-    width,
-    height,
+    width: containerWidth,
+    height: containerHeight,
     borderRadius,
     backgroundColor,
     alignItems: 'center',
@@ -77,38 +74,44 @@ export default function NavArrow({
         ? 'Go forward'
         : 'Go down')
 
-  // Map direction to icon name
-  let iconName = 'ic_chevron_left' // Default for Back
-  if (direction === 'Forward') {
-    iconName = 'ic_chevron_right'
-  } else if (direction === 'Down') {
-    iconName = 'ic_chevron_down'
+  const chevronW = isDown ? iconHeight : iconWidth
+  const chevronH = isDown ? iconWidth : iconHeight
+
+  const pad = strokeWeight / 2
+  const svgWidth = chevronW + pad * 2
+  const svgHeight = chevronH + pad * 2
+
+  let points: string
+  switch (direction) {
+    case 'Forward':
+      points = `${pad},${pad} ${chevronW + pad},${chevronH / 2 + pad} ${pad},${chevronH + pad}`
+      break
+    case 'Down':
+      points = `${pad},${pad} ${chevronW / 2 + pad},${chevronH + pad} ${chevronW + pad},${pad}`
+      break
+    case 'Back':
+    default:
+      points = `${chevronW + pad},${pad} ${pad},${chevronH / 2 + pad} ${chevronW + pad},${chevronH + pad}`
+      break
   }
 
   return (
     <View
       style={containerStyle}
       accessibilityRole="image"
-      accessibilityLabel={undefined}
+      accessibilityLabel={defaultAccessibilityLabel}
       {...rest}
     >
-      <Icon
-        name={iconName}
-        size={24} // Internal icon size is fixed/clipped by container in design but Icon requires a size
-        color={iconColor}
-        style={{
-          // Center the larger icon within the small container if needed,
-          // though flex center on container handles this.
-          // If the container is 6x10 and icon is 24, we might want to ensure it doesn't affect layout
-          // but Flexbox 'center' centers the content.
-          // However, if the icon component has its own frame, it might overflow.
-          // React Native View has overflow: 'hidden' by default if borderRadius is set? No.
-          // We might want overflow: 'hidden' if strictly following design clip.
-          // Figma design had "overflow-clip" class.
-        }}
-      />
+      <Svg width={svgWidth} height={svgHeight} viewBox={`0 0 ${svgWidth} ${svgHeight}`}>
+        <Polyline
+          points={points}
+          stroke={iconColor}
+          strokeWidth={strokeWeight}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+      </Svg>
     </View>
   )
 }
-
-

package/src/components/Numpad/Numpad.tsx

@@ -8,7 +8,7 @@ import {
   type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { IconDeletebackspace } from '../../icons/components/IconDeletebackspace'
+import Icon from '../../icons/Icon'
 
 export type NumpadKeyValue =
   | '0'
@@ -142,10 +142,10 @@ function Numpad({
                 accessibilityLabel={isBackspace ? 'Backspace' : key}
               >
                 {isBackspace ? (
-                  <IconDeletebackspace
-                    width={fontSize as number}
-                    height={fontSize as number}
-                    fill={foreground as string}
+                  <Icon
+                    name="ic_delete_backspace"
+                    size={fontSize as number}
+                    color={foreground as string}
                   />
                 ) : (
                   <Text style={[textStyle, keyTextStyle]}>{key}</Text>

package/src/components/Section/Section.tsx

@@ -3,7 +3,7 @@ import { View, Text, Pressable, Platform, type StyleProp, type ViewStyle, type P
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import NavArrow from '../NavArrow/NavArrow'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
 
 type SectionProps = {
   title?: string;
@@ -69,7 +69,8 @@ function Section({
   const headerPressedStyle: ViewStyle = isHeaderPressed ? { opacity: 0.85 } : {}
   // Resolve section container tokens
   const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff'
-  const gap = getVariableByName('slot/gap', modes) || 12
+  const sectionGap = getVariableByName('section/gap', modes) || 12
+  const slotGap = getVariableByName('slot/gap', modes) || 12
   const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12
   const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16
   const radius = getVariableByName('section/radius', modes) || 12
@@ -106,7 +107,7 @@ function Section({
     paddingHorizontal,
     paddingVertical,
     borderRadius: radius,
-    gap,
+    gap: sectionGap,
   }
 
   const headerStyle = {
@@ -233,8 +234,8 @@ function Section({
         </View>
       )}
       {slot && (
-        <View style={{ flexDirection: slotDirection, gap }}>
-          {cloneChildrenWithModes(React.Children.toArray(slot), modes)}
+        <View style={{ flexDirection: slotDirection, gap: slotGap }}>
+          {cloneChildrenWithModes(flattenChildren(slot), modes)}
         </View>
       )}
     </View>
@@ -302,13 +303,12 @@ function SectionBento({
 
 
 
-  // Process slots to pass modes to children
   const processedNavSlot = navSlot
-    ? cloneChildrenWithModes(React.Children.toArray(navSlot), modes)
+    ? cloneChildrenWithModes(flattenChildren(navSlot), modes)
     : null
 
   const processedUpiSlot = upiSlot
-    ? cloneChildrenWithModes(React.Children.toArray(upiSlot), modes)
+    ? cloneChildrenWithModes(flattenChildren(upiSlot), modes)
     : null
 
   return (