jfs-components 0.0.55 → 0.0.57

package/lib/commonjs/components/Accordion/Accordion.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _webPlatformUtils = require("../../utils/web-platform-utils");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -16,39 +17,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 if (_reactNative.Platform.OS === 'android' && _reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
   _reactNative.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.default.Children.map(children, child => {
-    if (! /*#__PURE__*/_react.default.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.default.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
 /**
  * Accordion component that mirrors the Figma "Accordion" component.
  *
@@ -173,7 +141,7 @@ function Accordion({
   });
 
   // Process children to pass modes
-  const processedChildren = children ? cloneChildrenWithModes(_react.default.Children.toArray(children), modes) : null;
+  const processedChildren = children ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), modes) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     ...rest,

package/lib/commonjs/components/AppBar/AppBar.js

@@ -9,41 +9,9 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// 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, modes) {
-  return _react.default.Children.map(children, child => {
-    if (! /*#__PURE__*/_react.default.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.default.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  })?.filter(child => child !== null && child !== undefined) ?? [];
-}
 function AppBar({
   type = 'MainPage',
   leadingSlot,
@@ -133,8 +101,8 @@ function AppBar({
   }
 
   // --- Process Slots ---
-  const processedLeading = leadingSlot ? cloneChildrenWithModes([leadingSlot], modes)[0] : defaultLeading;
-  const processedMiddle = middleSlot ? cloneChildrenWithModes(_react.default.Children.toArray(middleSlot), modes) : null;
+  const processedLeading = leadingSlot ? (0, _reactUtils.cloneChildrenWithModes)([leadingSlot], modes)[0] : defaultLeading;
+  const processedMiddle = middleSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(middleSlot), modes) : null;
 
   // Actions Gap wrapper
   // The Figma has "Actions" slot with a gap.
@@ -145,7 +113,7 @@ function AppBar({
   };
   const processedActions = actionsSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: actionsStyle,
-    children: cloneChildrenWithModes(_react.default.Children.toArray(actionsSlot), modes)
+    children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(actionsSlot), modes)
   }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],

package/lib/commonjs/components/FilterBar/FilterBar.js

@@ -8,42 +8,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _TextInput = _interopRequireDefault(require("../TextInput/TextInput"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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.default.Children.map(children, child => {
-    if (! /*#__PURE__*/_react.default.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.default.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
 /**
  * FilterBar component that mirrors the Figma "filterBar" component.
  *
@@ -125,7 +93,7 @@ function FilterBar({
     });
   } else if (children) {
     // Clone custom children and inject onFocus/onBlur where possible.
-    const cloned = cloneChildrenWithModes(_react.default.Children.toArray(children), modes);
+    const cloned = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), modes);
     processedChildren = _react.default.Children.map(cloned, child => {
       if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
       const existingOnFocus = child.props?.onFocus;

package/lib/commonjs/components/LazyList/LazyList.js

@@ -7,41 +7,9 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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) {
-  return _react.default.Children.map(children, child => {
-    if (! /*#__PURE__*/_react.default.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.default.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      ...childProps,
-      modes: mergedModes
-    }, processedChildren);
-  });
-}
 /**
  * LazyList component that mirrors the Figma "LazyList" component.
  *
@@ -85,7 +53,7 @@ function LazyList({
   };
 
   // Clone listGroupsSlot children and pass modes to all children that accept it
-  const processedSlot = listGroupsSlot ? cloneChildrenWithModes(_react.default.Children.toArray(listGroupsSlot), modes) : null;
+  const processedSlot = listGroupsSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(listGroupsSlot), modes) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [containerStyle, style],
     accessibilityRole: "list",

package/lib/commonjs/components/MoneyValue/MoneyValue.js

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

package/lib/commonjs/components/NavArrow/NavArrow.js

@@ -6,28 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = NavArrow;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
-var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
- * 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
  */
 function NavArrow({
   direction = 'Back',
@@ -36,22 +32,20 @@ function NavArrow({
   accessibilityLabel,
   ...rest
 }) {
-  // Resolve design tokens
   const iconColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/color', modes) || '#24262b';
-
-  // Dimensions from tokens
   const widthToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes)) || 6;
   const heightToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/height', modes)) || 10;
   const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/radius', modes)) || 0;
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/background', modes) || 'transparent';
-
-  // Swap dimensions if direction is Down
+  const iconWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/width', modes)) || 4;
+  const iconHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/height', modes)) || 8;
+  const strokeWeight = Number((0, _figmaVariablesResolver.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',
@@ -59,34 +53,41 @@ 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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: containerStyle,
     accessibilityRole: "image",
-    accessibilityLabel: undefined,
+    accessibilityLabel: defaultAccessibilityLabel,
     ...rest,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      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__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+      width: svgWidth,
+      height: svgHeight,
+      viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Polyline, {
+        points: points,
+        stroke: iconColor,
+        strokeWidth: strokeWeight,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        fill: "none"
+      })
     })
   });
 }

package/lib/commonjs/components/Numpad/Numpad.js

@@ -7,8 +7,9 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
-var _IconDeletebackspace = require("../../icons/components/IconDeletebackspace");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function shuffleArray(arr) {
   const shuffled = [...arr];
@@ -92,10 +93,10 @@ function Numpad({
           onPress: () => handlePress(key),
           accessibilityRole: "button",
           accessibilityLabel: isBackspace ? 'Backspace' : key,
-          children: isBackspace ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconDeletebackspace.IconDeletebackspace, {
-            width: fontSize,
-            height: fontSize,
-            fill: foreground
+          children: isBackspace ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "ic_delete_backspace",
+            size: fontSize,
+            color: foreground
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [textStyle, keyTextStyle],
             children: key

package/lib/commonjs/components/Section/Section.js

@@ -66,7 +66,8 @@ function Section({
   } : {};
   // Resolve section container tokens
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('section/background/color', modes) || '#ffffff';
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes) || 12;
+  const sectionGap = (0, _figmaVariablesResolver.getVariableByName)('section/gap', modes) || 12;
+  const slotGap = (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes) || 12;
   const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('section/padding/horizontal', modes) || 12;
   const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('section/padding/vertical', modes) || 16;
   const radius = (0, _figmaVariablesResolver.getVariableByName)('section/radius', modes) || 12;
@@ -96,7 +97,7 @@ function Section({
     paddingHorizontal,
     paddingVertical,
     borderRadius: radius,
-    gap
+    gap: sectionGap
   };
   const headerStyle = {
     paddingHorizontal: headerPaddingHorizontal,
@@ -204,9 +205,9 @@ function Section({
     }), slot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flexDirection: slotDirection,
-        gap
+        gap: slotGap
       },
-      children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(slot), modes)
+      children: (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(slot), modes)
     })]
   });
 }
@@ -254,10 +255,8 @@ function SectionBento({
     borderRadius: radius,
     gap
   };
-
-  // Process slots to pass modes to children
-  const processedNavSlot = navSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(navSlot), modes) : null;
-  const processedUpiSlot = upiSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(upiSlot), modes) : null;
+  const processedNavSlot = navSlot ? (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(navSlot), modes) : null;
+  const processedUpiSlot = upiSlot ? (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(upiSlot), modes) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     ...(_reactNative.Platform.OS === 'web' ? {

package/lib/commonjs/components/TextInput/TextInput.js

@@ -8,43 +8,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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.default.Children.map(children, child => {
-    if (! /*#__PURE__*/_react.default.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.default.Children.toArray(childChildren), modes) : undefined;
-
-    // Clone element with modes and processed children
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      ...child.props,
-      modes: mergedModes
-    }, processedChildren);
-  });
-  return result || [];
-}
-
 /**
  * TextInput component that mirrors the Figma "textInput" component.
  *
@@ -76,8 +43,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /**
  * 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.
- */
-function makePlaceholderColor(color, opacity = 0.5) {
+ */function makePlaceholderColor(color, opacity = 0.5) {
   if (!color || typeof color !== 'string') {
     return color || '';
   }
@@ -220,8 +186,8 @@ function TextInput({
   });
 
   // Clone leading and trailing slots and pass modes to all children that accept it
-  const processedLeading = leadingElement ? cloneChildrenWithModes(_react.default.Children.toArray(leadingElement), modes) : null;
-  const processedTrailing = trailing ? cloneChildrenWithModes(_react.default.Children.toArray(trailing), modes) : null;
+  const processedLeading = leadingElement ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leadingElement), modes) : null;
+  const processedTrailing = trailing ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(trailing), modes) : null;
 
   // Handle focus events
   const handleFocus = e => {

package/lib/commonjs/components/TransactionBubble/TransactionBubble.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
+var _TransactionStatus = _interopRequireDefault(require("../TransactionStatus/TransactionStatus"));
+var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
+var _reactUtils = require("../../utils/react-utils");
+var _webPlatformUtils = require("../../utils/web-platform-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/padding', resolvedModes)) || 16;
+  const radius = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/radius', resolvedModes)) || 23;
+  const borderSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/border/size', resolvedModes)) || 1;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/background', resolvedModes) || '#ffffff';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/border/color', resolvedModes) || '#e5e5e5';
+  const bubbleGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/gap', resolvedModes)) || 8;
+  const moneyValueWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/wrap/gap', resolvedModes)) || 8;
+  const descriptionColor = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/color', resolvedModes) || '#24262b';
+  const descriptionFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/fontSize', resolvedModes)) || 14;
+  const descriptionLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/lineHeight', resolvedModes)) || 17;
+  const descriptionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('transactionBubble/description/fontFamily', resolvedModes) || 'JioType Var';
+  const statusWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/gap', resolvedModes)) || 4;
+  const statusWrapHeight = Number((0, _figmaVariablesResolver.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 ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), resolvedModes) : null;
+  const processedStatusSlot = statusSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(statusSlot), resolvedModes) : null;
+  const defaultAccessibilityLabel = accessibilityLabel || `${description} • ${status}`;
+  const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
+    restProps: rest,
+    onPress,
+    disabled: false,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps
+  });
+  const statusRow = processedStatusSlot || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: statusWrapGap,
+      height: statusWrapHeight
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TransactionStatus.default, {
+      status: status,
+      date: date,
+      modes: resolvedModes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavArrow.default, {
+      direction: "Forward",
+      modes: resolvedModes
+    })]
+  });
+  const mainContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      gap: bubbleGap
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        gap: moneyValueWrapGap
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: descriptionStyle,
+        numberOfLines: 1,
+        children: description
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoneyValue.default, {
+        value: value,
+        currency: currency,
+        modes: resolvedModes
+      })]
+    }), processedChildren, statusRow]
+  });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: onPress,
+      style: ({
+        pressed
+      }) => [containerStyle, style, pressed && {
+        opacity: 0.85
+      }],
+      accessibilityRole: "button",
+      accessibilityLabel: defaultAccessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      ...webProps,
+      ...rest,
+      children: mainContent
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    children: mainContent
+  });
+}
+var _default = exports.default = TransactionBubble;