jfs-components 0.0.51 → 0.0.53

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-13T09:35:42.837Z
+ * Generated: 2026-04-13T10:56:51.920Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/ListItem/ListItem.tsx

@@ -88,22 +88,24 @@ function ListItem({
   webAccessibilityProps,
   ...rest
 }: ListItemProps) {
+  const resolvedModes = { ...modes, "Context": "ListItem" }
+
   // Resolve container spacing tokens
-  const gap = getVariableByName('listItem/gap', modes) ?? 8
-  const paddingTop = getVariableByName('listItem/padding/top', modes) ?? 0
-  const paddingBottom = getVariableByName('listItem/padding/bottom', modes) ?? 0
-  const paddingLeft = getVariableByName('listItem/padding/left', modes) ?? 0
-  const paddingRight = getVariableByName('listItem/padding/right', modes) ?? 0
-  const textWrapGap = getVariableByName('listItem/text wrap', modes) ?? 0
+  const gap = getVariableByName('listItem/gap', resolvedModes) ?? 8
+  const paddingTop = getVariableByName('listItem/padding/top', resolvedModes) ?? 0
+  const paddingBottom = getVariableByName('listItem/padding/bottom', resolvedModes) ?? 0
+  const paddingLeft = getVariableByName('listItem/padding/left', resolvedModes) ?? 0
+  const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0
+  const textWrapGap = getVariableByName('listItem/text wrap', resolvedModes) ?? 0
 
   // Title typography (horizontal layout)
-  const titleColor = getVariableByName('listItem/title/color', modes) || '#0f0d0a'
-  const titleFontSize = getVariableByName('listItem/title/fontSize', modes) || 14
-  const titleLineHeight = getVariableByName('listItem/title/lineHeight', modes) || 16
+  const titleColor = getVariableByName('listItem/title/color', resolvedModes) || '#0f0d0a'
+  const titleFontSize = getVariableByName('listItem/title/fontSize', resolvedModes) || 14
+  const titleLineHeight = getVariableByName('listItem/title/lineHeight', resolvedModes) || 16
   const titleFontFamily =
-    getVariableByName('listItem/title/fontFamily', modes) || 'System'
+    getVariableByName('listItem/title/fontFamily', resolvedModes) || 'System'
   const titleFontWeightRaw =
-    getVariableByName('listItem/title/fontWeight', modes) || 700
+    getVariableByName('listItem/title/fontWeight', resolvedModes) || 700
   const titleFontWeight =
     typeof titleFontWeightRaw === 'number'
       ? titleFontWeightRaw.toString()
@@ -111,15 +113,15 @@ function ListItem({
 
   // Support text typography (used in both layouts)
   const supportColor =
-    getVariableByName('listItem/supportText/color', modes) || '#1f1a14'
+    getVariableByName('listItem/supportText/color', resolvedModes) || '#1f1a14'
   const supportFontSize =
-    getVariableByName('listItem/supportText/fontSize', modes) || 12
+    getVariableByName('listItem/supportText/fontSize', resolvedModes) || 12
   const supportLineHeight =
-    getVariableByName('listItem/supportText/lineHeight', modes) || 14
+    getVariableByName('listItem/supportText/lineHeight', resolvedModes) || 14
   const supportFontFamily =
-    getVariableByName('listItem/supportText/fontFamily', modes) || 'System'
+    getVariableByName('listItem/supportText/fontFamily', resolvedModes) || 'System'
   const supportFontWeightRaw =
-    getVariableByName('listItem/supportText/fontWeight', modes) || 500
+    getVariableByName('listItem/supportText/fontWeight', resolvedModes) || 500
   const supportFontWeight =
     typeof supportFontWeightRaw === 'number'
       ? supportFontWeightRaw.toString()
@@ -204,7 +206,7 @@ function ListItem({
 
   // Process leading slot to pass modes to children
   const processedLeading = leading
-    ? cloneChildrenWithModes(React.Children.toArray(leading), modes)
+    ? cloneChildrenWithModes(React.Children.toArray(leading), resolvedModes)
     : []
   // Extract single element if array has one element, otherwise use array
   const leadingElement =
@@ -212,14 +214,14 @@ function ListItem({
       ? processedLeading.length === 1
         ? processedLeading[0]
         : processedLeading
-      : <IconCapsule modes={modes} accessibilityLabel={undefined} />
+      : <IconCapsule modes={resolvedModes} accessibilityLabel={undefined} />
 
   const renderSupportContent = () => {
     if (supportSlot) {
       // Process supportSlot to pass modes to children
       const processedSupportSlot = cloneChildrenWithModes(
         React.Children.toArray(supportSlot),
-        modes
+        resolvedModes
       )
       // Extract single element if array has one element, otherwise use array
       return processedSupportSlot.length === 1
@@ -251,7 +253,7 @@ function ListItem({
     // Process endSlot to pass modes to children
     // Force Context: 'ListItem' - this value can never be overridden by external modes
     const processedEndSlot = endSlot
-      ? cloneChildrenWithModes(React.Children.toArray(endSlot), modes, { "Context": 'ListItem' })
+      ? cloneChildrenWithModes(React.Children.toArray(endSlot), resolvedModes, { "Context": 'ListItem' })
       : []
     // Extract single element if array has one element, otherwise use array
     const trailingContent =
@@ -284,7 +286,7 @@ function ListItem({
         {trailingContent ? (
           <View style={trailingWrapperStyle}>{trailingContent}</View>
         ) : null}
-        {navArrow && <NavArrow direction="Forward" modes={modes} />}
+        {navArrow && <NavArrow direction="Forward" modes={resolvedModes} />}
       </View>
     )
 

package/src/components/Section/Section.tsx

@@ -69,7 +69,7 @@ function Section({
   const headerPressedStyle: ViewStyle = isHeaderPressed ? { opacity: 0.85 } : {}
   // Resolve section container tokens
   const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff'
-  const gap = getVariableByName('section/gap', modes) || 12
+  const gap = getVariableByName('slot/gap', modes) || 12
   const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12
   const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16
   const radius = getVariableByName('section/radius', modes) || 12