jfs-components 0.0.36 → 0.0.38

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { View, Platform, type ViewStyle } from 'react-native';
-import MaskedView from '@react-native-masked-view/masked-view';
-import Svg, { Path } from 'react-native-svg';
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { flattenChildren } from '../../utils/react-utils';
+import React from 'react'
+import { View, Platform, type ViewStyle } from 'react-native'
+import MaskedView from '@react-native-masked-view/masked-view'
+import Svg, { Path } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { flattenChildren } from '../../utils/react-utils'
 
 type AvatarGroupProps = {
     modes?: Record<string, any>;
@@ -12,44 +12,44 @@ type AvatarGroupProps = {
 } & React.ComponentProps<typeof View>;
 
 function AvatarGroup({ modes = {}, children, style, ...rest }: AvatarGroupProps) {
-    const gap = getVariableByName('avatarGroup/gap', modes) || 0;
+    const gap = getVariableByName('avatarGroup/gap', modes) || 0
 
 
-    const avatarSize = getVariableByName('avatar/size', modes) || 29;
-    const avatarRadius = getVariableByName('avatar/radius', modes) || 9999;
-    const borderSize = getVariableByName('avatar/border/size', modes) || 1;
-    const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+    const avatarSize = getVariableByName('avatar/size', modes) || 29
+    const avatarRadius = getVariableByName('avatar/radius', modes) || 9999
+    const borderSize = getVariableByName('avatar/border/size', modes) || 1
+    const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)'
 
-    const paddingLeft = getVariableByName('avatarGroup/padding/left', modes) || 0;
-    const paddingRight = getVariableByName('avatarGroup/padding/right', modes) || 0;
-    const paddingTop = getVariableByName('avatarGroup/padding/top', modes) || 0;
-    const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes) || 0;
+    const paddingLeft = getVariableByName('avatarGroup/padding/left', modes) || 0
+    const paddingRight = getVariableByName('avatarGroup/padding/right', modes) || 0
+    const paddingTop = getVariableByName('avatarGroup/padding/top', modes) || 0
+    const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes) || 0
 
-    const validChildren = flattenChildren(children);
-    const totalChildren = validChildren.length;
+    const validChildren = flattenChildren(children)
+    const totalChildren = validChildren.length
 
     // shared geometry logic
-    const r = avatarSize / 2;
-    const gapInt = parseInt(gap.toString(), 10);
-    const avatarSizeInt = parseInt(avatarSize.toString(), 10);
-    const borderSizeInt = parseInt(borderSize.toString(), 10);
-    const avatarRadiusInt = parseInt(avatarRadius.toString(), 10);
+    const r = avatarSize / 2
+    const gapInt = parseInt(gap.toString(), 10)
+    const avatarSizeInt = parseInt(avatarSize.toString(), 10)
+    const borderSizeInt = parseInt(borderSize.toString(), 10)
+    const avatarRadiusInt = parseInt(avatarRadius.toString(), 10)
 
-    const nextAvatarX = avatarSizeInt + gapInt;
+    const nextAvatarX = avatarSizeInt + gapInt
     // If radius is 9999 (full circle), use actual radius r.
     // Effective radius for the hole includes the border of the next avatar.
-    const effectiveRadius = (avatarRadiusInt >= 9999 ? r : avatarRadiusInt);
-    const holeRadius = effectiveRadius + borderSizeInt;
-    const holeCenter = { x: nextAvatarX + r, y: r };
+    const effectiveRadius = (avatarRadiusInt >= 9999 ? r : avatarRadiusInt)
+    const holeRadius = effectiveRadius + borderSizeInt
+    const holeCenter = { x: nextAvatarX + r, y: r }
 
     // Native Mask Path
-    const rectPath = `M 0 0 h ${avatarSizeInt} v ${avatarSizeInt} h -${avatarSizeInt} z`;
-    const circlePath = `M ${holeCenter.x},${holeCenter.y} m -${holeRadius},0 a ${holeRadius},${holeRadius} 0 1,0 ${holeRadius * 2},0 a ${holeRadius},${holeRadius} 0 1,0 -${holeRadius * 2},0`;
-    const maskPath = `${rectPath} ${circlePath}`;
+    const rectPath = `M 0 0 h ${avatarSizeInt} v ${avatarSizeInt} h -${avatarSizeInt} z`
+    const circlePath = `M ${holeCenter.x},${holeCenter.y} m -${holeRadius},0 a ${holeRadius},${holeRadius} 0 1,0 ${holeRadius * 2},0 a ${holeRadius},${holeRadius} 0 1,0 -${holeRadius * 2},0`
+    const maskPath = `${rectPath} ${circlePath}`
 
     // Web Mask Gradient
     // radial-gradient(circle at CX CY, transparent R, black R+1)
-    const webMaskImage = `radial-gradient(circle at ${holeCenter.x}px ${holeCenter.y}px, transparent ${holeRadius}px, black ${holeRadius + 0.5}px)`;
+    const webMaskImage = `radial-gradient(circle at ${holeCenter.x}px ${holeCenter.y}px, transparent ${holeRadius}px, black ${holeRadius + 0.5}px)`
 
     const containerStyle: ViewStyle = {
         flexDirection: 'row',
@@ -58,25 +58,25 @@ function AvatarGroup({ modes = {}, children, style, ...rest }: AvatarGroupProps)
         paddingRight: parseInt(paddingRight.toString(), 10),
         paddingTop: parseInt(paddingTop.toString(), 10),
         paddingBottom: parseInt(paddingBottom.toString(), 10),
-    };
+    }
 
     return (
         <View style={[containerStyle, style]} {...rest}>
             {validChildren.map((child, index) => {
-                const isLast = index === totalChildren - 1;
-                const element = child as React.ReactElement<any>;
-                const elementProps = element.props || {};
+                const isLast = index === totalChildren - 1
+                const element = child as React.ReactElement<any>
+                const elementProps = element.props || {}
 
                 const clonedChild = React.cloneElement(element, {
                     modes: { ...modes, ...(elementProps.modes || {}) },
-                });
+                })
 
                 if (isLast) {
                     return (
                         <View key={index} style={{ zIndex: index }}>
                             {clonedChild}
                         </View>
-                    );
+                    )
                 }
 
                 // Wrapper style for avatar dimension
@@ -90,14 +90,14 @@ function AvatarGroup({ modes = {}, children, style, ...rest }: AvatarGroupProps)
                         maskImage: webMaskImage,
                         WebkitMaskImage: webMaskImage,
                     } : {})
-                };
+                }
 
                 if (Platform.OS === 'web') {
                     return (
                         <View key={index} style={wrapperStyle}>
                             {clonedChild}
                         </View>
-                    );
+                    )
                 }
 
                 // Native MaskedView
@@ -118,10 +118,10 @@ function AvatarGroup({ modes = {}, children, style, ...rest }: AvatarGroupProps)
                             {clonedChild}
                         </MaskedView>
                     </View>
-                );
+                )
             })}
         </View>
-    );
+    )
 }
 
-export default AvatarGroup;
+export default AvatarGroup

package/src/components/BottomNav/BottomNav.mdx

@@ -16,10 +16,6 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
-
-### Colors Router
-- **Modes:** POC | Old
-- **Default:** POC
 ## Usage
 
 ```tsx

package/src/components/BottomNav/BottomNav.tsx

@@ -32,8 +32,8 @@ type BottomNavProps = {
  * Usage:
  * ```tsx
  * <BottomNav value={currentTab} onChange={setCurrentTab}>
- *   <BottomNav.Item value="home" iconName="ic_home" label="Home" />
- *   <BottomNav.Item value="profile" iconName="ic_profile" label="Profile" />
+ *   <BottomNav.Item value="home" icon={<Icon name="ic_home" />} label="Home" />
+ *   <BottomNav.Item value="profile" icon={<Icon name="ic_profile" />} label="Profile" />
  * </BottomNav>
  * ```
  */
@@ -86,19 +86,19 @@ function BottomNav({
     >
       {React.Children.map(children, (child) => {
         if (!React.isValidElement(child)) {
-          return null;
+          return null
         }
 
         // Cast to ReactElement to access props safely in TS
-        const childElement = child as React.ReactElement<any>;
+        const childElement = child as React.ReactElement<any>
 
         // We assume the child is a BottomNav.Item (or compatible)
         // We extract 'value' from the child's props to check selection
-        const childValue = childElement.props.value;
-        const selected = childValue === value;
+        const childValue = childElement.props.value
+        const selected = childValue === value
 
         // Define the mode for the Item's state
-        const stateMode = selected ? 'Active' : 'Idle';
+        const stateMode = selected ? 'Active' : 'Idle'
 
         return React.cloneElement(childElement, {
           // Pass down modes, injecting the State mode for this item
@@ -111,9 +111,9 @@ function BottomNav({
           // Intercept onPress to handle generic selection logic
           onPress: (event?: any) => {
             if (onChange && childValue !== undefined) {
-              onChange(childValue);
+              onChange(childValue)
             }
-            childElement.props.onPress?.(event);
+            childElement.props.onPress?.(event)
           },
 
           // Accessibility state
@@ -124,7 +124,7 @@ function BottomNav({
 
           // Flex to fill
           style: [{ flex: 1 }, childElement.props.style]
-        });
+        })
       })}
     </View>
   )
@@ -140,12 +140,12 @@ const Item = (props: BottomNavItemProps) => {
   // We strip 'value' before passing to BottomNavItem just in case, 
   // though passing extra props to BottomNavItem (which spreads ...rest to View/Pressable) 
   // is usually fine, but clean is better.
-  const { value, ...rest } = props;
-  return <BottomNavItem {...rest} />;
-};
+  const { value, ...rest } = props
+  return <BottomNavItem {...rest} />
+}
 
 // Attach Item to BottomNav
-const BottomNavWithItem = Object.assign(BottomNav, { Item });
+const BottomNavWithItem = Object.assign(BottomNav, { Item })
 
 export default BottomNavWithItem
 

package/src/components/BottomNavItem/BottomNavItem.mdx

@@ -20,10 +20,6 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
-
-### Colors Router
-- **Modes:** POC | Old
-- **Default:** POC
 ## Usage
 
 <Canvas>

package/src/components/BottomNavItem/BottomNavItem.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, isValidElement, cloneElement } from 'react'
 import {
   Pressable,
   Text,
@@ -10,10 +10,13 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 
 type BottomNavItemProps = SafePressableProps & {
+  icon?: React.ReactNode;
+  /**
+   * Deprecated: Use icon prop instead
+   */
   iconName?: string;
   label?: string;
   modes?: Record<string, any>;
@@ -40,11 +43,13 @@ type BottomNavItemProps = SafePressableProps & {
  *
  * @component
  * @param {Object} props
- * @param {string} [props.iconName="ic_home"] - Icon name from the registry.
+ * @param {React.ReactNode} [props.icon] - Icon element to display.
+ * @param {string} [props.iconName] - DEPRECATED: Icon name from the registry.
  * ...
  */
 function BottomNavItem({
-  iconName = 'ic_home',
+  icon,
+  iconName,
   label = 'Home',
   modes: propModes = {},
   onPress,
@@ -114,13 +119,17 @@ function BottomNavItem({
 
   const renderContent = () => (
     <>
-      <Icon
-        name={iconName}
-        size={resolvedIconSize}
-        color={resolvedIconColor}
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no"
-      />
+      {(icon || iconName) && (
+        isValidElement(icon) ? cloneElement(icon as React.ReactElement<any>, {
+          size: resolvedIconSize,
+          width: resolvedIconSize,
+          height: resolvedIconSize,
+          color: resolvedIconColor,
+          fill: resolvedIconColor,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no"
+        }) : null
+      )}
       <Text
         style={[textStyle, labelStyle]}
         accessibilityElementsHidden={true}

package/src/components/Button/Button.mdx

@@ -21,7 +21,7 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** High | Medium | Low
 - **Default:** High
 
-### Appearance.Brand
+### AppearanceBrand
 - **Modes:** Primary | Secondary | Neutral
 - **Default:** Primary
 
@@ -29,11 +29,7 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** Light | Dark
 - **Default:** Light
 
-### Colors Router
-- **Modes:** POC | Old
-- **Default:** POC
-
-### Appearance.System
+### AppearanceSystem
 - **Modes:** positive | warning | negative
 - **Default:** positive
 

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -59,7 +59,7 @@ 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) => {
@@ -67,9 +67,9 @@ function ButtonGroup({
             // 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 }
 
             return React.cloneElement(element, { modes: mergedModes })
         }

package/src/components/Card/Card.tsx

@@ -1,13 +1,13 @@
-import React, { createContext, useContext, isValidElement, cloneElement, useMemo } from 'react';
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import React, { createContext, useContext, isValidElement, cloneElement, useMemo } from 'react'
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 
 /**
  * Context to share 'modes' with child components like Card.Title and Card.SupportText.
  * This ensures that nested components can resolve their tokens correctly without 
  * needing explicit mode prop passing for every child.
  */
-const CardContext = createContext<{ modes?: Record<string, any> }>({});
+const CardContext = createContext<{ modes?: Record<string, any> }>({})
 
 export interface CardProps {
     /**
@@ -55,23 +55,23 @@ export function Card({
     style,
 }: CardProps) {
     // Resolve Card Container Tokens
-    const backgroundColor = getVariableByName('card/background/color', modes) || '#ffffff';
-    const borderColor = getVariableByName('card/border/color', modes) || '#ebebed';
-    const borderWidth = parseFloat(getVariableByName('card/strokeWidth', modes) || '0.5'); // Ensure number
-    const radius = parseFloat(getVariableByName('card/radius', modes) || '8');
-    const gap = parseFloat(getVariableByName('card/gap', modes) || '4');
-    const paddingHorizontal = parseFloat(getVariableByName('card/padding-horizontal', modes) || '0');
-    const paddingVertical = parseFloat(getVariableByName('card/padding-vertical', modes) || '0');
+    const backgroundColor = getVariableByName('card/background/color', modes) || '#ffffff'
+    const borderColor = getVariableByName('card/border/color', modes) || '#ebebed'
+    const borderWidth = parseFloat(getVariableByName('card/strokeWidth', modes) || '0.5') // Ensure number
+    const radius = parseFloat(getVariableByName('card/radius', modes) || '8')
+    const gap = parseFloat(getVariableByName('card/gap', modes) || '4')
+    const paddingHorizontal = parseFloat(getVariableByName('card/padding-horizontal', modes) || '0')
+    const paddingVertical = parseFloat(getVariableByName('card/padding-vertical', modes) || '0')
 
     // Resolve Content Wrapper Tokens
-    const contentGap = parseFloat(getVariableByName('card/content/gap', modes) || '4');
-    const contentPaddingHorizontal = parseFloat(getVariableByName('card/content/padding/horizontal', modes) || '12');
-    const contentPaddingVertical = parseFloat(getVariableByName('card/content/padding/vertical', modes) || '16');
+    const contentGap = parseFloat(getVariableByName('card/content/gap', modes) || '4')
+    const contentPaddingHorizontal = parseFloat(getVariableByName('card/content/padding/horizontal', modes) || '12')
+    const contentPaddingVertical = parseFloat(getVariableByName('card/content/padding/vertical', modes) || '16')
 
     // Clone media to pass modes if it's a valid element, facilitating nested style resolution
     const mediaWithModes = isValidElement(media)
         ? cloneElement(media as any, { modes: { ...(media.props as any).modes, ...modes } })
-        : media;
+        : media
 
     const containerStyle: ViewStyle = {
         backgroundColor,
@@ -82,7 +82,7 @@ export function Card({
         paddingHorizontal,
         paddingVertical,
         overflow: 'hidden', // Ensure border radius clips content
-    };
+    }
 
     const mediaWrapperStyle: ViewStyle = {
         width: '100%',
@@ -91,14 +91,14 @@ export function Card({
         // Figma has 'bg-[#3a46f7]' on the Ratio definition, but that's a placeholder.
         // We assume the media content handles its own fill, or we can add a placeholder bg if needed.
         // For now, we leave it transparent or rely on media.
-    };
+    }
 
     const contentWrapperStyle: ViewStyle = {
         width: '100%',
         gap: contentGap,
         paddingHorizontal: contentPaddingHorizontal,
         paddingVertical: contentPaddingVertical,
-    };
+    }
 
     return (
         <CardContext.Provider value={{ modes }}>
@@ -113,7 +113,7 @@ export function Card({
                 </View>
             </View>
         </CardContext.Provider>
-    );
+    )
 }
 
 // ----------------------------------------------------------------------------
@@ -131,18 +131,18 @@ export interface CardTextProps {
  * Uses tokens: card/title/*
  */
 function Title({ children, style, modes: propModes }: CardTextProps) {
-    const context = useContext(CardContext);
-    const modes = propModes || context.modes || {};
+    const context = useContext(CardContext)
+    const modes = propModes || context.modes || {}
 
-    const color = getVariableByName('card/title/color', modes) || '#081007';
-    const fontSize = parseFloat(getVariableByName('card/title/fontSize', modes) || '16');
-    const fontFamily = getVariableByName('card/title/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('card/title/lineHeight', modes) || '18');
+    const color = getVariableByName('card/title/color', modes) || '#081007'
+    const fontSize = parseFloat(getVariableByName('card/title/fontSize', modes) || '16')
+    const fontFamily = getVariableByName('card/title/fontFamily', modes) || 'JioType Var'
+    const lineHeight = parseFloat(getVariableByName('card/title/lineHeight', modes) || '18')
 
     // Handling the potential typo in Figma variables "fonwWeight" vs "fontWeight"
     // We check both keys to be safe.
-    const rawFontWeight = getVariableByName('card/title/fontWeight', modes) || getVariableByName('card/title/fonwWeight', modes) || '900';
-    const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
+    const rawFontWeight = getVariableByName('card/title/fontWeight', modes) || getVariableByName('card/title/fonwWeight', modes) || '900'
+    const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight
 
     const textStyle: TextStyle = {
         color,
@@ -150,9 +150,9 @@ function Title({ children, style, modes: propModes }: CardTextProps) {
         fontFamily,
         lineHeight,
         fontWeight: fontWeight as TextStyle['fontWeight'],
-    };
+    }
 
-    return <Text style={[textStyle, style]}>{children}</Text>;
+    return <Text style={[textStyle, style]}>{children}</Text>
 }
 
 /**
@@ -160,15 +160,15 @@ function Title({ children, style, modes: propModes }: CardTextProps) {
  * Uses tokens: card/supportive-text/*
  */
 function SupportText({ children, style, modes: propModes }: CardTextProps) {
-    const context = useContext(CardContext);
-    const modes = propModes || context.modes || {};
+    const context = useContext(CardContext)
+    const modes = propModes || context.modes || {}
 
-    const color = getVariableByName('card/supportive-text/color', modes) || '#191b1e';
-    const fontSize = parseFloat(getVariableByName('card/supportive-text/fontSize', modes) || '12');
-    const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('card/supportive-text/lineHeight', modes) || '16');
-    const rawFontWeight = getVariableByName('card/supportive-text/fontWeight', modes) || '400';
-    const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
+    const color = getVariableByName('card/supportive-text/color', modes) || '#191b1e'
+    const fontSize = parseFloat(getVariableByName('card/supportive-text/fontSize', modes) || '12')
+    const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes) || 'JioType Var'
+    const lineHeight = parseFloat(getVariableByName('card/supportive-text/lineHeight', modes) || '16')
+    const rawFontWeight = getVariableByName('card/supportive-text/fontWeight', modes) || '400'
+    const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight
 
     const textStyle: TextStyle = {
         color,
@@ -176,13 +176,13 @@ function SupportText({ children, style, modes: propModes }: CardTextProps) {
         fontFamily,
         lineHeight,
         fontWeight: fontWeight as TextStyle['fontWeight'],
-    };
+    }
 
-    return <Text style={[textStyle, style]}>{children}</Text>;
+    return <Text style={[textStyle, style]}>{children}</Text>
 }
 
 // Attach sub-components to Card
-Card.Title = Title;
-Card.SupportText = SupportText;
+Card.Title = Title
+Card.SupportText = SupportText
 
-export default Card;
+export default Card

package/src/components/CardFeedback/CardFeedback.mdx

@@ -13,7 +13,7 @@ CardFeedback component from Figma node 1280:4481. Used for status updates, warni
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
-### Appearance.System
+### AppearanceSystem
 - **Modes:** positive | warning | negative
 - **Default:** positive
 
@@ -21,11 +21,7 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** Light | Dark
 - **Default:** Light
 
-### Colors Router
-- **Modes:** POC | Old
-- **Default:** POC
-
-### Appearance.Brand
+### AppearanceBrand
 - **Modes:** Primary | Secondary | Neutral
 - **Default:** Primary
 ## Usage