jfs-components 0.0.55 → 0.0.57

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

@@ -12,17 +12,25 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
 function cloneChildrenWithModes(children, modes, forcedModes) {
-  return _react.default.Children.map(children, child => {
+  const result = [];
+  _react.default.Children.forEach(children, child => {
     if (! /*#__PURE__*/_react.default.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.default.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;
@@ -34,16 +42,13 @@ function cloneChildrenWithModes(children, modes, forcedModes) {
       ...modes,
       ...existingModes
     } : modes;
-
-    // Recursively process children if they exist
-    const processedChildren = hasChildren ? cloneChildrenWithModes(_react.default.Children.toArray(childChildren), modes, forcedModes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
+    const processedChildren = hasChildren ? cloneChildrenWithModes(childChildren, modes, forcedModes) : undefined;
+    result.push(/*#__PURE__*/_react.default.cloneElement(child, {
       ...child.props,
       modes: mergedModes
-    }, processedChildren);
-  })?.filter(child => child !== null && child !== undefined) ?? [];
+    }, processedChildren));
+  });
+  return result;
 }
 
 /**

package/lib/module/components/Accordion/Accordion.js

@@ -5,45 +5,13 @@ import { View, Text, Pressable, LayoutAnimation, Platform, UIManager } from 'rea
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
 
 // Enable LayoutAnimation on Android
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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, modes) {
-  const result = React.Children.map(children, child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return child;
-    }
-
-    // Get existing children
-    const childChildren = child.props?.children;
-    const hasChildren = childChildren !== undefined && childChildren !== null;
-
-    // Merge modes: parent modes first, then child's explicit modes override them
-    const existingModes = child.props?.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 /*#__PURE__*/React.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
 /**
  * Accordion component that mirrors the Figma "Accordion" component.
  *

package/lib/module/components/AppBar/AppBar.js

@@ -5,41 +5,8 @@ import { View, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 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.
- */
+import { cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function cloneChildrenWithModes(children, modes) {
-  return React.Children.map(children, child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return child;
-    }
-
-    // Get existing children
-    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
-    const existingModes = child.props?.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 /*#__PURE__*/React.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  })?.filter(child => child !== null && child !== undefined) ?? [];
-}
 export default function AppBar({
   type = 'MainPage',
   leadingSlot,

package/lib/module/components/FilterBar/FilterBar.js

@@ -4,42 +4,8 @@ import React, { useState } from 'react';
 import { View } 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.
- */
+import { cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-function cloneChildrenWithModes(children, modes) {
-  const result = React.Children.map(children, child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return child;
-    }
-
-    // Get existing children
-    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
-    const existingModes = child.props?.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 /*#__PURE__*/React.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
 /**
  * FilterBar component that mirrors the Figma "filterBar" component.
  *

package/lib/module/components/LazyList/LazyList.js

@@ -3,42 +3,8 @@
 import React from 'react';
 import { View } 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.
- */
+import { cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-function cloneChildrenWithModes(children, modes) {
-  return React.Children.map(children, child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return child;
-    }
-
-    // Get existing children
-    const childProps = child.props;
-    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 /*#__PURE__*/React.cloneElement(child, {
-      ...childProps,
-      modes: mergedModes
-    }, processedChildren);
-  });
-}
 /**
  * LazyList component that mirrors the Figma "LazyList" component.
  *

package/lib/module/components/MoneyValue/MoneyValue.js

@@ -95,7 +95,7 @@ function MoneyValue({
   const fontWeightValue = getVariableByName('moneyValue/fontWeight', modes) || 500;
   const fontWeight = typeof fontWeightValue === 'number' ? 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/lib/module/components/NavArrow/NavArrow.js

@@ -2,27 +2,22 @@
 
 import React from 'react';
 import { View } from 'react-native';
+import Svg, { Polyline } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import Icon from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * 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',
@@ -31,22 +26,20 @@ export default function NavArrow({
   accessibilityLabel,
   ...rest
 }) {
-  // Resolve design tokens
   const iconColor = getVariableByName('navArrow/icon/color', modes) || '#24262b';
-
-  // Dimensions from tokens
   const widthToken = Number(getVariableByName('navArrow/width', modes)) || 6;
   const heightToken = Number(getVariableByName('navArrow/height', modes)) || 10;
   const borderRadius = Number(getVariableByName('navArrow/radius', modes)) || 0;
   const backgroundColor = getVariableByName('navArrow/background', modes) || '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 = {
-    width,
-    height,
+    width: containerWidth,
+    height: containerHeight,
     borderRadius,
     backgroundColor,
     alignItems: 'center',
@@ -54,34 +47,41 @@ export default function NavArrow({
     ...(style || {})
   };
   const defaultAccessibilityLabel = accessibilityLabel || (direction === 'Back' ? 'Go back' : direction === 'Forward' ? '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;
+  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 /*#__PURE__*/_jsx(View, {
     style: containerStyle,
     accessibilityRole: "image",
-    accessibilityLabel: undefined,
+    accessibilityLabel: defaultAccessibilityLabel,
     ...rest,
-    children: /*#__PURE__*/_jsx(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.
-      }
+    children: /*#__PURE__*/_jsx(Svg, {
+      width: svgWidth,
+      height: svgHeight,
+      viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+      children: /*#__PURE__*/_jsx(Polyline, {
+        points: points,
+        stroke: iconColor,
+        strokeWidth: strokeWeight,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        fill: "none"
+      })
     })
   });
 }

package/lib/module/components/Numpad/Numpad.js

@@ -3,7 +3,7 @@
 import React, { useMemo, useCallback } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { IconDeletebackspace } from '../../icons/components/IconDeletebackspace';
+import Icon from '../../icons/Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 function shuffleArray(arr) {
   const shuffled = [...arr];
@@ -87,10 +87,10 @@ function Numpad({
           onPress: () => handlePress(key),
           accessibilityRole: "button",
           accessibilityLabel: isBackspace ? 'Backspace' : key,
-          children: isBackspace ? /*#__PURE__*/_jsx(IconDeletebackspace, {
-            width: fontSize,
-            height: fontSize,
-            fill: foreground
+          children: isBackspace ? /*#__PURE__*/_jsx(Icon, {
+            name: "ic_delete_backspace",
+            size: fontSize,
+            color: foreground
           }) : /*#__PURE__*/_jsx(Text, {
             style: [textStyle, keyTextStyle],
             children: key

package/lib/module/components/Section/Section.js

@@ -5,7 +5,7 @@ import { View, Text, Pressable, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import NavArrow from '../NavArrow/NavArrow';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Section component that mirrors the Figma "Section" component.
@@ -60,7 +60,8 @@ function Section({
   } : {};
   // 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;
@@ -90,7 +91,7 @@ function Section({
     paddingHorizontal,
     paddingVertical,
     borderRadius: radius,
-    gap
+    gap: sectionGap
   };
   const headerStyle = {
     paddingHorizontal: headerPaddingHorizontal,
@@ -198,9 +199,9 @@ function Section({
     }), slot && /*#__PURE__*/_jsx(View, {
       style: {
         flexDirection: slotDirection,
-        gap
+        gap: slotGap
       },
-      children: cloneChildrenWithModes(React.Children.toArray(slot), modes)
+      children: cloneChildrenWithModes(flattenChildren(slot), modes)
     })]
   });
 }
@@ -248,10 +249,8 @@ function SectionBento({
     borderRadius: radius,
     gap
   };
-
-  // Process slots to pass modes to children
-  const processedNavSlot = navSlot ? cloneChildrenWithModes(React.Children.toArray(navSlot), modes) : null;
-  const processedUpiSlot = upiSlot ? cloneChildrenWithModes(React.Children.toArray(upiSlot), modes) : null;
+  const processedNavSlot = navSlot ? cloneChildrenWithModes(flattenChildren(navSlot), modes) : null;
+  const processedUpiSlot = upiSlot ? cloneChildrenWithModes(flattenChildren(upiSlot), modes) : null;
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     ...(Platform.OS === 'web' ? {

package/lib/module/components/TextInput/TextInput.js

@@ -4,42 +4,7 @@ import React, { useState } from 'react';
 import { Pressable, View, TextInput as RNTextInput } 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.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function cloneChildrenWithModes(children, modes) {
-  const result = React.Children.map(children, child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return child;
-    }
-
-    // Get existing children
-    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
-    const existingModes = child.props?.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 /*#__PURE__*/React.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
+import { cloneChildrenWithModes } from '../../utils/react-utils';
 
 /**
  * TextInput component that mirrors the Figma "textInput" component.
@@ -73,6 +38,7 @@ function cloneChildrenWithModes(children, modes) {
  * Helper function to convert a color to a more transparent version for placeholder text.
  * Takes a color string (hex, rgb, rgba) and returns it with reduced opacity.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function makePlaceholderColor(color, opacity = 0.5) {
   if (!color || typeof color !== 'string') {
     return color || '';

package/lib/module/components/TransactionBubble/TransactionBubble.js

@@ -0,0 +1,144 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, Pressable } 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 } from '../../utils/web-platform-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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`.
+ */
+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
+}) {
+  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 moneyValueWrapGap = 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 statusWrapHeight = Number(getVariableByName('transactionBubble/statusWrap/height', resolvedModes)) || 18;
+  const containerStyle = {
+    padding,
+    borderRadius: radius,
+    borderWidth: borderSize,
+    borderColor,
+    backgroundColor
+  };
+  const descriptionStyle = {
+    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 statusRow = processedStatusSlot || /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: statusWrapGap,
+      height: statusWrapHeight
+    },
+    children: [/*#__PURE__*/_jsx(TransactionStatus, {
+      status: status,
+      date: date,
+      modes: resolvedModes
+    }), /*#__PURE__*/_jsx(NavArrow, {
+      direction: "Forward",
+      modes: resolvedModes
+    })]
+  });
+  const mainContent = /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: bubbleGap
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        gap: moneyValueWrapGap
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: descriptionStyle,
+        numberOfLines: 1,
+        children: description
+      }), /*#__PURE__*/_jsx(MoneyValue, {
+        value: value,
+        currency: currency,
+        modes: resolvedModes
+      })]
+    }), processedChildren, statusRow]
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      style: ({
+        pressed
+      }) => [containerStyle, style, pressed && {
+        opacity: 0.85
+      }],
+      accessibilityRole: "button",
+      accessibilityLabel: defaultAccessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      ...webProps,
+      ...rest,
+      children: mainContent
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    children: mainContent
+  });
+}
+export default TransactionBubble;

package/lib/module/components/index.js

@@ -48,6 +48,7 @@ export { default as ThreadHero } from './ThreadHero/ThreadHero';
 export { Tooltip } from './Tooltip/Tooltip';
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
 export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
+export { default as TransactionBubble } from './TransactionBubble/TransactionBubble';
 export { default as UpiHandle } from './UpiHandle/UpiHandle';
 export { default as VStack } from './VStack/VStack';
 export { default as ChipGroup } from './ChipGroup/ChipGroup';