jfs-components 0.0.55 → 0.0.56

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:48:16.865Z
+ * 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;
 }
 
 /**