jfs-components 0.0.58 → 0.0.60

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

@@ -37,7 +37,12 @@ export function cloneChildrenWithModes(children, modes, forcedModes) {
       ...modes,
       ...existingModes
     } : modes;
-    const processedChildren = hasChildren ? cloneChildrenWithModes(childChildren, modes, forcedModes) : undefined;
+    let processedChildren;
+    if (hasChildren) {
+      const childArray = React.Children.toArray(childChildren);
+      const processed = cloneChildrenWithModes(childArray, modes, forcedModes);
+      processedChildren = processed.length === 1 ? processed[0] : processed;
+    }
     result.push(/*#__PURE__*/React.cloneElement(child, {
       ...child.props,
       modes: mergedModes

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-14T19:47:53.357Z
+ * Generated: 2026-04-14T20:42:38.764Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/Button/Button.tsx

@@ -97,7 +97,7 @@ function Button({
   const lineHeight = getVariableByName('button/lineHeight', modes) || 19
   const fontSize = getVariableByName('button/fontSize', modes) || 16
   const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a'
-  const iconColor = getVariableByName('button/icon/color', modes) ?? textColor
+  const iconColor = textColor
   const iconSize = getVariableByName('button/icon/size', modes) ?? 18
 
   const [isHovered, setIsHovered] = useState(false)
@@ -107,13 +107,13 @@ function Button({
   const hoverBg = getVariableByName('button/background', hoverModes) || backgroundColor
   const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor
   const hoverTextColor = getVariableByName('button/foreground', hoverModes) || textColor
-  const hoverIconColor = getVariableByName('button/icon/color', hoverModes) ?? hoverTextColor
+  const hoverIconColor = hoverTextColor
 
   const pressedModes = { ...modes, "Button / State": "Pressed" }
   const pressedBg = getVariableByName('button/background', pressedModes) || backgroundColor
   const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor
   const pressedTextColor = getVariableByName('button/foreground', pressedModes) || textColor
-  const pressedIconColor = getVariableByName('button/icon/color', pressedModes) ?? pressedTextColor
+  const pressedIconColor = pressedTextColor
 
   const activeTextColor = isPressed && !disabled ? pressedTextColor : isHovered && !disabled ? hoverTextColor : textColor
   const activeIconColor = isPressed && !disabled ? pressedIconColor : isHovered && !disabled ? hoverIconColor : iconColor

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -48,7 +48,7 @@ function ButtonGroup({
     style,
 }: ButtonGroupProps) {
     // Resolve design tokens
-    const gap = getVariableByName('buttonGroup/padding/gap', modes) ?? 12
+    const gap = getVariableByName('buttonGroup/gap', modes) ?? 12
     const paddingHorizontal = getVariableByName('buttonGroup/padding/horizontal', modes) ?? 0
     const paddingVertical = getVariableByName('buttonGroup/padding/vertical', modes) ?? 0
 

package/src/components/Drawer/Drawer.tsx

@@ -276,7 +276,7 @@ function Drawer({
 
   // Design Tokens
   const backgroundColor = getVariableByName('drawer/background', modes) || '#f5f5f5'
-  const radius = getVariableByName('drawer/radius', modes) || 12
+  const radius = getVariableByName('drawer/radius/top', modes) || 12
 
   // Handle
   const handleColor = getVariableByName('drawer/handlebar/background', modes) || '#e0e0e3'

package/src/components/Section/Section.tsx

@@ -19,14 +19,22 @@ type SlotGridProps = {
 
 function SlotGrid({ items, gap, maxColumns = SLOT_GRID_MAX_COLUMNS }: SlotGridProps) {
   const [maxItemWidth, setMaxItemWidth] = useState<number | null>(null)
+  const [measureTimedOut, setMeasureTimedOut] = useState(false)
   const itemWidthsRef = useRef<Map<number, number>>(new Map())
   const totalItems = items.length
 
   useEffect(() => {
     itemWidthsRef.current.clear()
     setMaxItemWidth(null)
+    setMeasureTimedOut(false)
   }, [totalItems])
 
+  useEffect(() => {
+    if (maxItemWidth !== null) return
+    const timer = setTimeout(() => setMeasureTimedOut(true), 500)
+    return () => clearTimeout(timer)
+  }, [maxItemWidth, totalItems])
+
   const handleItemLayout = useCallback((index: number, width: number) => {
     itemWidthsRef.current.set(index, width)
     if (itemWidthsRef.current.size >= totalItems && totalItems > 0) {
@@ -43,7 +51,7 @@ function SlotGrid({ items, gap, maxColumns = SLOT_GRID_MAX_COLUMNS }: SlotGridPr
   }
 
   return (
-    <View style={{ gap, ...(isMeasured ? {} : { opacity: 0 }) }}>
+    <View style={{ gap, ...(isMeasured || measureTimedOut ? {} : { opacity: 0 }) }}>
       {rows.map((row, rowIndex) => {
         const spacersNeeded = row.length < columns ? columns - row.length : 0
         return (

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

package/src/utils/react-utils.ts

@@ -39,9 +39,12 @@ export function cloneChildrenWithModes(
                 ? { ...modes, ...existingModes }
                 : modes
 
-        const processedChildren: React.ReactNode | undefined = hasChildren
-            ? cloneChildrenWithModes(childChildren, modes, forcedModes)
-            : undefined
+        let processedChildren: React.ReactNode | React.ReactNode[] | undefined
+        if (hasChildren) {
+            const childArray = React.Children.toArray(childChildren)
+            const processed = cloneChildrenWithModes(childArray, modes, forcedModes)
+            processedChildren = processed.length === 1 ? processed[0] : processed
+        }
 
         result.push(
             React.cloneElement(