jfs-components 0.0.54 → 0.0.56

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 (

package/src/components/TextInput/TextInput.tsx

@@ -2,50 +2,7 @@ import React, { useState } from 'react'
 import { Pressable, View, TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
-
-/**
- * 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'
 
 /**
  * TextInput component that mirrors the Figma "textInput" component.

package/src/components/TransactionBubble/TransactionBubble.tsx

@@ -0,0 +1,152 @@
+import React from 'react'
+import { View, Text, Pressable, type ViewStyle, type TextStyle, type PressableProps } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import MoneyValue from '../MoneyValue/MoneyValue'
+import TransactionStatus from '../TransactionStatus/TransactionStatus'
+import NavArrow from '../NavArrow/NavArrow'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { usePressableWebSupport, 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.
+ */
+function TransactionBubble({
+  description = 'Payment to Uber India',
+  value = '56',
+  currency = '₹',
+  status = 'Expired',
+  date = '20 Mar 2025',
+  statusSlot,
+  children,
+  modes = {},
+  onPress,
+  style,
+  accessibilityLabel,
+  accessibilityHint,
+  webAccessibilityProps,
+  ...rest
+}: TransactionBubbleProps) {
+  const resolvedModes = {
+    ...modes,
+    'Context3': 'Transaction Bubble',
+  }
+
+  const padding = Number(getVariableByName('transactionBubble/padding', resolvedModes)) || 16
+  const radius = Number(getVariableByName('transactionBubble/radius', resolvedModes)) || 23
+  const borderSize = Number(getVariableByName('transactionBubble/border/size', resolvedModes)) || 1
+  const backgroundColor = getVariableByName('transactionBubble/background', resolvedModes) || '#ffffff'
+  const borderColor = getVariableByName('transactionBubble/border/color', resolvedModes) || '#e5e5e5'
+  const bubbleGap = Number(getVariableByName('transactionBubble/gap', resolvedModes)) || 8
+  const wrapGap = Number(getVariableByName('transactionBubble/wrap/gap', resolvedModes)) || 8
+
+  const descriptionColor = getVariableByName('transactionBubble/description/color', resolvedModes) || '#24262b'
+  const descriptionFontSize = Number(getVariableByName('transactionBubble/description/fontSize', resolvedModes)) || 14
+  const descriptionLineHeight = Number(getVariableByName('transactionBubble/description/lineHeight', resolvedModes)) || 17
+  const descriptionFontFamily = getVariableByName('transactionBubble/description/fontFamily', resolvedModes) || 'JioType Var'
+
+  const statusWrapGap = Number(getVariableByName('transactionBubble/statusWrap/gap', resolvedModes)) || 4
+
+  const containerStyle: ViewStyle = {
+    padding,
+    borderRadius: radius,
+    borderWidth: borderSize,
+    borderColor,
+    backgroundColor,
+  }
+
+  const descriptionStyle: TextStyle = {
+    color: descriptionColor,
+    fontSize: descriptionFontSize,
+    lineHeight: descriptionLineHeight,
+    fontFamily: descriptionFontFamily,
+  }
+
+  const processedChildren = children
+    ? cloneChildrenWithModes(React.Children.toArray(children), resolvedModes)
+    : null
+
+  const processedStatusSlot = statusSlot
+    ? cloneChildrenWithModes(React.Children.toArray(statusSlot), resolvedModes)
+    : null
+
+  const defaultAccessibilityLabel = accessibilityLabel || `${description} • ${status}`
+
+  const webProps = usePressableWebSupport({
+    restProps: rest,
+    onPress,
+    disabled: false,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps,
+  })
+
+  const rightColumn = processedStatusSlot || (
+    <View style={{ alignItems: 'flex-end', justifyContent: 'flex-end', gap: statusWrapGap }}>
+      <TransactionStatus status={status} date={date} modes={resolvedModes} />
+      <NavArrow direction="Forward" modes={resolvedModes} />
+    </View>
+  )
+
+  const mainContent = (
+    <View style={{ flexDirection: 'row', gap: wrapGap }}>
+      <View style={{ flex: 1, gap: bubbleGap }}>
+        <Text style={descriptionStyle} numberOfLines={1}>{description}</Text>
+        <MoneyValue value={value} currency={currency} modes={resolvedModes} />
+      </View>
+      {rightColumn}
+    </View>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => [containerStyle, style, pressed && { opacity: 0.85 }]}
+        accessibilityRole="button"
+        accessibilityLabel={defaultAccessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        {...webProps}
+        {...rest}
+      >
+        {mainContent}
+        {processedChildren}
+      </Pressable>
+    )
+  }
+
+  return (
+    <View style={[containerStyle, style]} accessibilityLabel={defaultAccessibilityLabel} accessibilityHint={accessibilityHint}>
+      {mainContent}
+      {processedChildren}
+    </View>
+  )
+}
+
+export default TransactionBubble

package/src/components/index.ts

@@ -48,6 +48,7 @@ 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/src/design-tokens/JFSThemeProvider.tsx

@@ -1,6 +1,7 @@
 
-import React, { createContext, useContext, ReactNode, useMemo } from 'react';
+import React, { createContext, useContext, ReactNode, useMemo, useState, useEffect } from 'react';
 import { getVariableByName } from './figma-variables-resolver';
+import * as Font from 'expo-font';
 
 /**
  * Shape of the TokenContext
@@ -42,7 +43,6 @@ export const JFSThemeProvider: React.FC<JFSThemeProviderProps> = ({
     children
 }) => {
     const value = useMemo(() => {
-        // We bind the current modes to getVariableByName so consumers don't have to pass it
         const getVariable = (name: string) => getVariableByName(name, modes);
 
         return {
@@ -77,3 +77,38 @@ export const useTokens = (): TokenContextType => {
     }
     return context;
 };
+
+/**
+ * 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 const getJFSFonts = () => ({
+  'JioType Var': require('../assets/fonts/JioType Var.ttf'),
+} as const);
+
+/**
+ * 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 function useJFSFonts(): boolean {
+  const [fontsLoaded, setFontsLoaded] = useState(false);
+
+  useEffect(() => {
+    async function loadJFSFonts() {
+      try {
+        await Font.loadAsync(getJFSFonts());
+        setFontsLoaded(true);
+      } catch (error) {
+        console.warn('Failed to load JFS fonts (this is common in web/Storybook or if font file missing):', error);
+        setFontsLoaded(true);
+      }
+    }
+
+    loadJFSFonts();
+  }, []);
+
+  return fontsLoaded;
+}

package/src/icons/registry.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
  */
 
 // Icon name to SVG data mapping

package/src/utils/react-utils.ts

@@ -9,17 +9,27 @@ export function cloneChildrenWithModes(
     modes: Record<string, any>,
     forcedModes?: Record<string, any>
 ): React.ReactNode[] {
-    return React.Children.map(children, (child) => {
+    const result: React.ReactNode[] = [];
+
+    React.Children.forEach(children, (child) => {
         if (!React.isValidElement(child)) {
-            return child
+            if (child !== null && child !== undefined) {
+                result.push(child);
+            }
+            return;
+        }
+
+        // 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 as React.ReactElement<{ children?: React.ReactNode }>;
+            result.push(...cloneChildrenWithModes(fragment.props.children, modes, forcedModes));
+            return;
         }
 
-        // 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,
         // then forcedModes (if provided) are applied last and can never be overridden
         const existingModes = (child.props as any)?.modes
@@ -29,25 +39,23 @@ export function cloneChildrenWithModes(
                 ? { ...modes, ...existingModes }
                 : modes
 
-        // Recursively process children if they exist
         const processedChildren: React.ReactNode | undefined = hasChildren
-            ? cloneChildrenWithModes(
-                React.Children.toArray(childChildren),
-                modes,
-                forcedModes
-            )
+            ? cloneChildrenWithModes(childChildren, modes, forcedModes)
             : 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[] ?? []
+        result.push(
+            React.cloneElement(
+                child,
+                {
+                    ...(child.props as any),
+                    modes: mergedModes,
+                },
+                processedChildren
+            )
+        );
+    });
+
+    return result;
 }
 
 /**