jfs-components 0.0.56 → 0.0.58

package/lib/commonjs/components/ActionFooter/ActionFooter.js

@@ -8,6 +8,7 @@ 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 _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -28,18 +29,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * 
  * @example
  * ```tsx
- * // Basic usage - modes are automatically passed to all children
+ * // Basic usage - modes are automatically passed to all children.
+ * // Non-IconButton children (e.g., Button) are auto-stretched to fill.
  * <ActionFooter modes={modes}>
  *   <IconButton iconName="ic_split" />
- *   <Button label="Request" style={{ flex: 1 }} />
- *   <Button label="Pay" style={{ flex: 1 }} />
- * </ActionFooter>
- * 
- * // Children can override with their own modes (merged with parent)
- * <ActionFooter modes={modes}>
- *   <IconButton iconName="ic_split" />
- *   <Button label="Request" modes={{ Appearance: 'secondary' }} style={{ flex: 1 }} />
- *   <Button label="Pay" modes={{ Appearance: 'primary' }} style={{ flex: 1 }} />
+ *   <Button label="Request" />
+ *   <Button label="Pay" />
  * </ActionFooter>
  * ```
  */
@@ -95,16 +90,27 @@ function ActionFooter({
   const webShadow = _reactNative.Platform.OS === 'web' ? {
     boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)'
   } : {};
-
-  // Pass modes prop to all slot children
-  const childrenWithModes = (0, _reactUtils.cloneChildrenWithModes)(children, modes);
+  const flatChildren = (0, _reactUtils.flattenChildren)(children);
+  const processedChildren = (0, _reactUtils.cloneChildrenWithModes)(flatChildren, modes);
+  const enhancedChildren = processedChildren.map((child, index) => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
+    const element = child;
+    const isIconButton = element.type === _IconButton.default;
+    const stretchStyle = isIconButton ? undefined : {
+      flex: 1
+    };
+    return /*#__PURE__*/_react.default.cloneElement(element, {
+      key: element.key ?? index,
+      style: [stretchStyle, element.props.style]
+    });
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [containerStyle, webShadow, style],
     accessibilityRole: "toolbar",
     accessibilityLabel: undefined,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: slotStyle,
-      children: childrenWithModes
+      children: enhancedChildren
     })
   });
 }

package/lib/commonjs/components/ButtonGroup/ButtonGroup.js

@@ -8,6 +8,7 @@ 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 _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -15,13 +16,15 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * and handles their layout and styling/theming via design tokens.
  *
  * It passes the provided `modes` to all its immediate React Element children.
+ * Non-IconButton children (e.g., Button) are automatically stretched to fill
+ * available space. IconButton children keep their natural width.
  *
  * @component
  * @example
  * ```jsx
  * <ButtonGroup modes={{"Appearance": "light"}}>
  *   <IconButton iconName="ic_qr_code" />
- *   <IconButton iconName="ic_photo" />
+ *   <Button label="Pay" />
  * </ButtonGroup>
  * ```
  */
@@ -46,21 +49,21 @@ function ButtonGroup({
 
   // Flatten children to handle Fragments properly
   const flatChildren = (0, _reactUtils.flattenChildren)(children);
-
-  // Clone children to pass `modes` prop
   const childrenWithModes = _react.default.Children.map(flatChildren, child => {
     if (/*#__PURE__*/_react.default.isValidElement(child)) {
-      // We safely try to pass `modes` to the child.
-      // We merge the group modes with any modes defined on the child explicitly.
-      // Child modes take precedence.
       const element = child;
       const childModes = element.props.modes || {};
       const mergedModes = {
         ...modes,
         ...childModes
       };
+      const isIconButton = element.type === _IconButton.default;
+      const stretchStyle = isIconButton ? undefined : {
+        flex: 1
+      };
       return /*#__PURE__*/_react.default.cloneElement(element, {
-        modes: mergedModes
+        modes: mergedModes,
+        style: [stretchStyle, element.props.style]
       });
     }
     return child;

package/lib/commonjs/components/ListGroup/ListGroup.js

@@ -69,7 +69,7 @@ function ListGroup({
     borderWidth,
     borderStyle: 'solid',
     flexDirection: 'column',
-    alignItems: 'flex-start',
+    alignItems: 'stretch',
     width: '100%'
   };
   const labelStyle = {

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

@@ -13,6 +13,69 @@ 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); }
+// ---------------------------------------------------------------------------
+// Shared grid layout: measures widest child, enforces uniform width,
+// chunks into fixed rows of up to maxColumns, space-between per row.
+// ---------------------------------------------------------------------------
+const SLOT_GRID_MAX_COLUMNS = 4;
+function SlotGrid({
+  items,
+  gap,
+  maxColumns = SLOT_GRID_MAX_COLUMNS
+}) {
+  const [maxItemWidth, setMaxItemWidth] = (0, _react.useState)(null);
+  const itemWidthsRef = (0, _react.useRef)(new Map());
+  const totalItems = items.length;
+  (0, _react.useEffect)(() => {
+    itemWidthsRef.current.clear();
+    setMaxItemWidth(null);
+  }, [totalItems]);
+  const handleItemLayout = (0, _react.useCallback)((index, width) => {
+    itemWidthsRef.current.set(index, width);
+    if (itemWidthsRef.current.size >= totalItems && totalItems > 0) {
+      setMaxItemWidth(Math.max(...itemWidthsRef.current.values()));
+    }
+  }, [totalItems]);
+  const isMeasured = maxItemWidth !== null;
+  const columns = Math.min(maxColumns, totalItems || 1);
+  const rows = [];
+  for (let i = 0; i < items.length; i += columns) {
+    rows.push(items.slice(i, i + columns));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      gap,
+      ...(isMeasured ? {} : {
+        opacity: 0
+      })
+    },
+    children: rows.map((row, rowIndex) => {
+      const spacersNeeded = row.length < columns ? columns - row.length : 0;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          justifyContent: 'space-between'
+        },
+        children: [row.map((child, colIndex) => {
+          const itemIndex = rowIndex * columns + colIndex;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            onLayout: !isMeasured ? e => handleItemLayout(itemIndex, e.nativeEvent.layout.width) : undefined,
+            style: isMeasured ? {
+              width: maxItemWidth
+            } : undefined,
+            children: child
+          }, itemIndex);
+        }), isMeasured && spacersNeeded > 0 && Array.from({
+          length: spacersNeeded
+        }, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            width: maxItemWidth
+          }
+        }, `spacer-${i}`))]
+      }, rowIndex);
+    })
+  });
+}
 /**
  * Section component that mirrors the Figma "Section" component.
  *
@@ -202,9 +265,12 @@ function Section({
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: headerStyle,
       children: headerContent
-    }), slot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }), slot && slotDirection === 'row' && /*#__PURE__*/(0, _jsxRuntime.jsx)(SlotGrid, {
+      items: (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(slot), modes),
+      gap: sectionGap
+    }), slot && slotDirection === 'column' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        flexDirection: slotDirection,
+        flexDirection: 'column',
         gap: slotGap
       },
       children: (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(slot), modes)
@@ -265,12 +331,9 @@ function SectionBento({
     accessibilityLabel: undefined,
     accessibilityHint: accessibilityHint,
     ...rest,
-    children: [processedNavSlot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        flexDirection: 'row',
-        gap
-      },
-      children: processedNavSlot
+    children: [processedNavSlot && /*#__PURE__*/(0, _jsxRuntime.jsx)(SlotGrid, {
+      items: processedNavSlot,
+      gap: gap
     }), processedUpiSlot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flexDirection: 'row',

package/lib/commonjs/components/Tabs/Tabs.js

@@ -48,8 +48,6 @@ function Tabs({
   const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('tabs/padding/bottom', modes) ?? 0;
   const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('tabs/padding/left', modes) ?? 0;
   const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('tabs/padding/right', modes) ?? 0;
-
-  // Forward modes to all TabItem children
   const enhancedChildren = _react.default.Children.map(children, child => {
     if (/*#__PURE__*/_react.default.isValidElement(child) && child.type === _TabItem.default) {
       const childElement = child;
@@ -57,7 +55,12 @@ function Tabs({
         modes: {
           ...modes,
           ...(childElement.props.modes ?? {})
-        }
+        },
+        ...(scrollable ? {} : {
+          style: [{
+            flex: 1
+          }, childElement.props.style]
+        })
       });
     }
     return child;

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

@@ -17,16 +17,19 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 /**
  * TransactionBubble — Figma node 1517:1155.
  *
- * Layout (single horizontal row inside a rounded bordered pill):
+ * Layout (vertical stack inside a rounded bordered pill):
  *
  *   ┌──────────────────────────────────────────────┐
- *   │  Description                  Status · Date  │
- *   │  ₹56                                    ›    │
+ *   │  Description                                 │
+ *   │  ₹56                                        │
+ *   │  [slot / children content]                   │
+ *   │  ⚠ Expired · 20 Mar 2025               ›    │
  *   └──────────────────────────────────────────────┘
  *
- * Left column: description text + MoneyValue, stacked vertically with `transactionBubble/gap`.
- * Right column: TransactionStatus + NavArrow, stacked vertically with `transactionBubble/statusWrap/gap`,
- *               right-aligned.
+ * 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',
@@ -54,12 +57,13 @@ function TransactionBubble({
   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 wrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/wrap/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,
@@ -83,11 +87,13 @@ function TransactionBubble({
     accessibilityLabel: defaultAccessibilityLabel,
     webAccessibilityProps
   });
-  const rightColumn = processedStatusSlot || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  const statusRow = processedStatusSlot || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: {
-      alignItems: 'flex-end',
-      justifyContent: 'flex-end',
-      gap: statusWrapGap
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: statusWrapGap,
+      height: statusWrapHeight
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TransactionStatus.default, {
       status: status,
@@ -100,13 +106,11 @@ function TransactionBubble({
   });
   const mainContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: {
-      flexDirection: 'row',
-      gap: wrapGap
+      gap: bubbleGap
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: {
-        flex: 1,
-        gap: bubbleGap
+        gap: moneyValueWrapGap
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: descriptionStyle,
@@ -117,10 +121,10 @@ function TransactionBubble({
         currency: currency,
         modes: resolvedModes
       })]
-    }), rightColumn]
+    }), processedChildren, statusRow]
   });
   if (onPress) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
       onPress: onPress,
       style: ({
         pressed
@@ -132,14 +136,14 @@ function TransactionBubble({
       accessibilityHint: accessibilityHint,
       ...webProps,
       ...rest,
-      children: [mainContent, processedChildren]
+      children: mainContent
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [containerStyle, style],
     accessibilityLabel: defaultAccessibilityLabel,
     accessibilityHint: accessibilityHint,
-    children: [mainContent, processedChildren]
+    children: mainContent
   });
 }
 var _default = exports.default = TransactionBubble;