jfs-components 0.0.56 → 0.0.58

package/lib/typescript/src/components/ActionFooter/ActionFooter.d.ts

@@ -38,18 +38,12 @@ export type ActionFooterProps = {
  *
  * @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>
  * ```
  */

package/lib/typescript/src/components/ButtonGroup/ButtonGroup.d.ts

@@ -21,13 +21,15 @@ export type ButtonGroupProps = {
  * 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>
  * ```
  */

package/lib/typescript/src/components/TransactionBubble/TransactionBubble.d.ts

@@ -20,16 +20,19 @@ export type TransactionBubbleProps = {
 /**
  * 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`.
  */
 declare function TransactionBubble({ description, value, currency, status, date, statusSlot, children, modes, onPress, style, accessibilityLabel, accessibilityHint, webAccessibilityProps, ...rest }: TransactionBubbleProps): import("react/jsx-runtime").JSX.Element;
 export default TransactionBubble;

package/lib/typescript/src/icons/registry.d.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-14T12:07:25.514Z
+ * Generated: 2026-04-14T19:47:53.357Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/ActionFooter/ActionFooter.tsx

@@ -6,7 +6,8 @@ import {
   Platform,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
+import IconButton from '../IconButton/IconButton'
 
 export type ActionFooterProps = {
   /**
@@ -47,18 +48,12 @@ export type ActionFooterProps = {
  * 
  * @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>
  * ```
  */
@@ -113,8 +108,19 @@ function ActionFooter({
     ? { boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)' } as any
     : {}
 
-  // Pass modes prop to all slot children
-  const childrenWithModes = cloneChildrenWithModes(children, modes)
+  const flatChildren = flattenChildren(children)
+  const processedChildren = cloneChildrenWithModes(flatChildren, modes)
+
+  const enhancedChildren = (processedChildren as React.ReactNode[]).map((child, index) => {
+    if (!React.isValidElement(child)) return child
+    const element = child as React.ReactElement<any>
+    const isIconButton = element.type === IconButton
+    const stretchStyle = isIconButton ? undefined : { flex: 1 }
+    return React.cloneElement(element, {
+      key: element.key ?? index,
+      style: [stretchStyle, element.props.style],
+    })
+  })
 
   return (
     <View
@@ -123,7 +129,7 @@ function ActionFooter({
       accessibilityLabel={undefined}
     >
       <View style={slotStyle}>
-        {childrenWithModes}
+        {enhancedChildren}
       </View>
     </View>
   )

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -6,6 +6,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { flattenChildren } from '../../utils/react-utils'
+import IconButton from '../IconButton/IconButton'
 
 export type ButtonGroupProps = {
     /**
@@ -29,13 +30,15 @@ export type ButtonGroupProps = {
  * 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>
  * ```
  */
@@ -59,19 +62,22 @@ function ButtonGroup({
     }
 
     // Flatten children to handle Fragments properly
-    const flatChildren = flattenChildren(children);
+    const flatChildren = flattenChildren(children)
 
-    // Clone children to pass `modes` prop
     const childrenWithModes = React.Children.map(flatChildren, (child) => {
         if (React.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 as React.ReactElement<any>;
-            const childModes = element.props.modes || {};
-            const mergedModes = { ...modes, ...childModes };
+            const element = child as React.ReactElement<any>
+            const childModes = element.props.modes || {}
+            const mergedModes = { ...modes, ...childModes }
+            const isIconButton = element.type === IconButton
+            const stretchStyle = isIconButton
+                ? undefined
+                : { flex: 1 }
 
-            return React.cloneElement(element, { modes: mergedModes })
+            return React.cloneElement(element, {
+                modes: mergedModes,
+                style: [stretchStyle, element.props.style],
+            })
         }
         return child
     })

package/src/components/ListGroup/ListGroup.tsx

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

package/src/components/Section/Section.tsx

@@ -1,10 +1,87 @@
-import React, { useState } from 'react'
+import React, { useState, useRef, useCallback, useEffect } from 'react'
 import { View, Text, Pressable, Platform, type StyleProp, type ViewStyle, type PressableStateCallbackType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import NavArrow from '../NavArrow/NavArrow'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
 
+// ---------------------------------------------------------------------------
+// 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
+
+type SlotGridProps = {
+  items: React.ReactNode[];
+  gap: number;
+  maxColumns?: number;
+}
+
+function SlotGrid({ items, gap, maxColumns = SLOT_GRID_MAX_COLUMNS }: SlotGridProps) {
+  const [maxItemWidth, setMaxItemWidth] = useState<number | null>(null)
+  const itemWidthsRef = useRef<Map<number, number>>(new Map())
+  const totalItems = items.length
+
+  useEffect(() => {
+    itemWidthsRef.current.clear()
+    setMaxItemWidth(null)
+  }, [totalItems])
+
+  const handleItemLayout = useCallback((index: number, width: number) => {
+    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: React.ReactNode[][] = []
+  for (let i = 0; i < items.length; i += columns) {
+    rows.push(items.slice(i, i + columns))
+  }
+
+  return (
+    <View style={{ gap, ...(isMeasured ? {} : { opacity: 0 }) }}>
+      {rows.map((row, rowIndex) => {
+        const spacersNeeded = row.length < columns ? columns - row.length : 0
+        return (
+          <View
+            key={rowIndex}
+            style={{
+              flexDirection: 'row' as const,
+              justifyContent: 'space-between' as const,
+            }}
+          >
+            {row.map((child, colIndex) => {
+              const itemIndex = rowIndex * columns + colIndex
+              return (
+                <View
+                  key={itemIndex}
+                  onLayout={
+                    !isMeasured
+                      ? (e) => handleItemLayout(itemIndex, e.nativeEvent.layout.width)
+                      : undefined
+                  }
+                  style={isMeasured ? { width: maxItemWidth } : undefined}
+                >
+                  {child}
+                </View>
+              )
+            })}
+            {isMeasured &&
+              spacersNeeded > 0 &&
+              Array.from({ length: spacersNeeded }, (_, i) => (
+                <View key={`spacer-${i}`} style={{ width: maxItemWidth }} />
+              ))}
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
 type SectionProps = {
   title?: string;
   supportText?: string;
@@ -233,8 +310,14 @@ function Section({
           {headerContent}
         </View>
       )}
-      {slot && (
-        <View style={{ flexDirection: slotDirection, gap: slotGap }}>
+      {slot && slotDirection === 'row' && (
+        <SlotGrid
+          items={cloneChildrenWithModes(flattenChildren(slot), modes)}
+          gap={sectionGap}
+        />
+      )}
+      {slot && slotDirection === 'column' && (
+        <View style={{ flexDirection: 'column' as const, gap: slotGap }}>
           {cloneChildrenWithModes(flattenChildren(slot), modes)}
         </View>
       )}
@@ -301,8 +384,6 @@ function SectionBento({
     gap,
   }
 
-
-
   const processedNavSlot = navSlot
     ? cloneChildrenWithModes(flattenChildren(navSlot), modes)
     : null
@@ -320,9 +401,10 @@ function SectionBento({
       {...rest}
     >
       {processedNavSlot && (
-        <View style={{ flexDirection: 'row' as const, gap }}>
-          {processedNavSlot}
-        </View>
+        <SlotGrid
+          items={processedNavSlot as React.ReactNode[]}
+          gap={gap}
+        />
       )}
       {processedUpiSlot && (
         <View style={{ flexDirection: 'row' as const, gap: 8 }}>

package/src/components/Tabs/Tabs.tsx

@@ -58,12 +58,12 @@ function Tabs({
   const paddingLeft = (getVariableByName('tabs/padding/left', modes) ?? 0) as number
   const paddingRight = (getVariableByName('tabs/padding/right', modes) ?? 0) as number
 
-  // Forward modes to all TabItem children
   const enhancedChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child) && child.type === TabItem) {
-      const childElement = child as React.ReactElement<any>;
+      const childElement = child as React.ReactElement<any>
       return React.cloneElement(childElement, {
         modes: { ...modes, ...(childElement.props.modes ?? {}) },
+        ...(scrollable ? {} : { style: [{ flex: 1 }, childElement.props.style] }),
       })
     }
     return child

package/src/components/TransactionBubble/TransactionBubble.tsx

@@ -27,16 +27,19 @@ export type TransactionBubbleProps = {
 /**
  * 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',
@@ -65,7 +68,7 @@ function TransactionBubble({
   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 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
@@ -73,6 +76,7 @@ function TransactionBubble({
   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: ViewStyle = {
     padding,
@@ -107,20 +111,21 @@ function TransactionBubble({
     webAccessibilityProps,
   })
 
-  const rightColumn = processedStatusSlot || (
-    <View style={{ alignItems: 'flex-end', justifyContent: 'flex-end', gap: statusWrapGap }}>
+  const statusRow = processedStatusSlot || (
+    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: statusWrapGap, height: statusWrapHeight }}>
       <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 }}>
+    <View style={{ gap: bubbleGap }}>
+      <View style={{ gap: moneyValueWrapGap }}>
         <Text style={descriptionStyle} numberOfLines={1}>{description}</Text>
         <MoneyValue value={value} currency={currency} modes={resolvedModes} />
       </View>
-      {rightColumn}
+      {processedChildren}
+      {statusRow}
     </View>
   )
 
@@ -136,7 +141,6 @@ function TransactionBubble({
         {...rest}
       >
         {mainContent}
-        {processedChildren}
       </Pressable>
     )
   }
@@ -144,7 +148,6 @@ function TransactionBubble({
   return (
     <View style={[containerStyle, style]} accessibilityLabel={defaultAccessibilityLabel} accessibilityHint={accessibilityHint}>
       {mainContent}
-      {processedChildren}
     </View>
   )
 }

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-14T12:07:25.514Z
+ * Generated: 2026-04-14T19:47:53.357Z
  */
 
 // Icon name to SVG data mapping