jfs-components 0.0.60 → 0.0.62

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

@@ -8,7 +8,10 @@ import React from 'react';
  */
 export function cloneChildrenWithModes(children, modes, forcedModes) {
   const result = [];
-  React.Children.forEach(children, child => {
+
+  // toArray assigns stable keys to sibling lists and flattens top-level Fragments.
+  // Raw arrays from flattenChildren / concat have no keys; forEach alone does not add them.
+  React.Children.forEach(React.Children.toArray(children), child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       if (child !== null && child !== undefined) {
         result.push(child);
@@ -20,7 +23,7 @@ export function cloneChildrenWithModes(children, modes, forcedModes) {
     // so recurse into their children and process each one individually.
     if (child.type === React.Fragment) {
       const fragment = child;
-      result.push(...cloneChildrenWithModes(fragment.props.children, modes, forcedModes));
+      result.push(...cloneChildrenWithModes(React.Children.toArray(fragment.props.children ?? null), modes, forcedModes));
       return;
     }
     const childChildren = child.props?.children;
@@ -48,7 +51,10 @@ export function cloneChildrenWithModes(children, modes, forcedModes) {
       modes: mergedModes
     }, processedChildren));
   });
-  return result;
+
+  // Ensure the returned list always has keys for each entry (cloneElement can drop
+  // keys in some paths; Views that render this array require keyed siblings).
+  return React.Children.toArray(result);
 }
 
 /**

package/lib/typescript/src/design-tokens/JFSThemeProvider.d.ts

@@ -40,20 +40,5 @@ export declare const JFSThemeProvider: React.FC<JFSThemeProviderProps>;
  * }
  */
 export declare const useTokens: () => TokenContextType;
-/**
- * Returns the JFS font map. The TTF is encapsulated within the package at
- * src/assets/fonts/JioType Var.ttf (included via package.json "files").
- * Call this inside load functions to avoid top-level require errors if font missing.
- */
-export declare const getJFSFonts: () => {
-    readonly 'JioType Var': any;
-};
-/**
- * Hook for loading JFS fonts using expo-font. This improves Android font support by explicitly registering
- * the custom 'JioType Var' font (encapsulated in the package) via Font.loadAsync before components render.
- * Without it, Android defaults to Roboto. Call at app root (e.g. before JFSThemeProvider). Returns loaded state.
- * See getJFSFonts() for direct use with Font.loadAsync. Handles missing font gracefully for web/Storybook.
- */
-export declare function useJFSFonts(): boolean;
 export {};
 //# sourceMappingURL=JFSThemeProvider.d.ts.map

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

package/package.json

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

package/src/design-tokens/JFSThemeProvider.tsx

@@ -1,7 +1,6 @@
 
-import React, { createContext, useContext, ReactNode, useMemo, useState, useEffect } from 'react';
+import React, { createContext, useContext, ReactNode, useMemo } from 'react';
 import { getVariableByName } from './figma-variables-resolver';
-import * as Font from 'expo-font';
 
 /**
  * Shape of the TokenContext
@@ -77,38 +76,3 @@ export const useTokens = (): TokenContextType => {
     }
     return context;
 };
-
-/**
- * Returns the JFS font map. The TTF is encapsulated within the package at
- * src/assets/fonts/JioType Var.ttf (included via package.json "files").
- * Call this inside load functions to avoid top-level require errors if font missing.
- */
-export const getJFSFonts = () => ({
-  'JioType Var': require('../assets/fonts/JioType Var.ttf'),
-} as const);
-
-/**
- * Hook for loading JFS fonts using expo-font. This improves Android font support by explicitly registering
- * the custom 'JioType Var' font (encapsulated in the package) via Font.loadAsync before components render.
- * Without it, Android defaults to Roboto. Call at app root (e.g. before JFSThemeProvider). Returns loaded state.
- * See getJFSFonts() for direct use with Font.loadAsync. Handles missing font gracefully for web/Storybook.
- */
-export function useJFSFonts(): boolean {
-  const [fontsLoaded, setFontsLoaded] = useState(false);
-
-  useEffect(() => {
-    async function loadJFSFonts() {
-      try {
-        await Font.loadAsync(getJFSFonts());
-        setFontsLoaded(true);
-      } catch (error) {
-        console.warn('Failed to load JFS fonts (this is common in web/Storybook or if font file missing):', error);
-        setFontsLoaded(true);
-      }
-    }
-
-    loadJFSFonts();
-  }, []);
-
-  return fontsLoaded;
-}

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

package/src/utils/react-utils.ts

@@ -11,7 +11,9 @@ export function cloneChildrenWithModes(
 ): React.ReactNode[] {
     const result: React.ReactNode[] = [];
 
-    React.Children.forEach(children, (child) => {
+    // toArray assigns stable keys to sibling lists and flattens top-level Fragments.
+    // Raw arrays from flattenChildren / concat have no keys; forEach alone does not add them.
+    React.Children.forEach(React.Children.toArray(children), (child) => {
         if (!React.isValidElement(child)) {
             if (child !== null && child !== undefined) {
                 result.push(child);
@@ -23,7 +25,13 @@ export function cloneChildrenWithModes(
         // so recurse into their children and process each one individually.
         if (child.type === React.Fragment) {
             const fragment = child as React.ReactElement<{ children?: React.ReactNode }>;
-            result.push(...cloneChildrenWithModes(fragment.props.children, modes, forcedModes));
+            result.push(
+                ...cloneChildrenWithModes(
+                    React.Children.toArray(fragment.props.children ?? null),
+                    modes,
+                    forcedModes
+                )
+            );
             return;
         }
 
@@ -58,7 +66,9 @@ export function cloneChildrenWithModes(
         );
     });
 
-    return result;
+    // Ensure the returned list always has keys for each entry (cloneElement can drop
+    // keys in some paths; Views that render this array require keyed siblings).
+    return React.Children.toArray(result);
 }
 
 /**