jfs-components 0.0.37 → 0.0.38

package/src/components/SupportText/SupportText.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import SupportTextIcon, { type SupportTextStatus } from './SupportTextIcon';
+import React from 'react'
+import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import SupportTextIcon, { type SupportTextStatus } from './SupportTextIcon'
 
 export type SupportTextProps = {
     /**
@@ -42,29 +42,29 @@ function SupportText({
     modes: propModes = {},
     style,
 }: SupportTextProps) {
-    const { modes: globalModes } = useTokens();
+    const { modes: globalModes } = useTokens()
 
     // Merge modes. We might want to inject the status mode here if we knew the collection name.
     // For now, we rely on the parent passing the correct mode or the status prop driving logic outside tokens if needed (but tokens are preferred).
     // Strategy: We pass 'modes' as is. If the user wants "Success" styling (green), they should likely pass modes={{ 'SupportText': 'Success' }} AND status="Success".
     // However, for convenience, we could eventually map status to modes if we determine the key.
-    const modes = { ...globalModes, ...propModes };
+    const modes = { ...globalModes, ...propModes }
 
     // --- Token Resolution ---
-    const gap = parseInt(getVariableByName('supportText/gap', modes), 10) || 4;
+    const gap = parseInt(getVariableByName('supportText/gap', modes), 10) || 4
 
-    const textColor = getVariableByName('supportText/foreground', modes) || '#0c0d10';
-    const fontFamily = getVariableByName('supportText/fontFamily', modes) || 'JioType Var';
-    const fontSize = parseInt(getVariableByName('supportText/fontSize', modes), 10) || 12;
-    const lineHeight = parseInt(getVariableByName('supportText/lineHeight', modes), 10) || 16;
-    const fontWeight = getVariableByName('supportText/fontWeight', modes) || '500';
+    const textColor = getVariableByName('supportText/foreground', modes) || '#0c0d10'
+    const fontFamily = getVariableByName('supportText/fontFamily', modes) || 'JioType Var'
+    const fontSize = parseInt(getVariableByName('supportText/fontSize', modes), 10) || 12
+    const lineHeight = parseInt(getVariableByName('supportText/lineHeight', modes), 10) || 16
+    const fontWeight = getVariableByName('supportText/fontWeight', modes) || '500'
 
     // --- Styles ---
     const containerStyle: ViewStyle = {
         flexDirection: 'row',
         alignItems: 'center',
         gap: gap,
-    };
+    }
 
     const textStyle: TextStyle = {
         color: textColor,
@@ -73,16 +73,16 @@ function SupportText({
         lineHeight,
         fontWeight: fontWeight as any,
         flexShrink: 1, // Ensure text wraps if needed
-    };
+    }
 
     const renderSlot = (slot: React.ReactNode) => {
         if (React.isValidElement(slot)) {
             return React.cloneElement(slot as React.ReactElement<any>, {
                 modes: { ...modes, ...(slot as any).props.modes },
-            });
+            })
         }
-        return slot;
-    };
+        return slot
+    }
 
     return (
         <View style={[containerStyle, style]}>
@@ -98,7 +98,7 @@ function SupportText({
                 <Text style={textStyle}>{label}</Text>
             )}
         </View>
-    );
+    )
 }
 
-export default SupportText;
+export default SupportText

package/src/components/SupportText/SupportTextIcon.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { View, type ViewStyle } from 'react-native';
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import Icon from '../../icons/Icon';
+import React from 'react'
+import { View, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Icon from '../../icons/Icon'
 
 export type SupportTextStatus = 'Neutral' | 'Warning' | 'Error' | 'Success';
 
@@ -16,30 +16,30 @@ const STATUS_ICON_MAP: Record<SupportTextStatus, string> = {
     Warning: 'ic_warning', // Using ic_warning for Warning
     Error: 'ic_warning',   // Using ic_warning for Error
     Success: 'ic_status_successful',
-};
+}
 
 function SupportTextIcon({
     status = 'Neutral',
     modes = {},
     style,
 }: SupportTextIconProps) {
-    const iconName = STATUS_ICON_MAP[status] || 'ic_info';
+    const iconName = STATUS_ICON_MAP[status] || 'ic_info'
 
     // Resolve icon size
-    const size = parseInt(getVariableByName('supportText/icon/size', modes), 10) || 16;
+    const size = parseInt(getVariableByName('supportText/icon/size', modes), 10) || 16
 
     // Resolve icon color
     // Assuming supportText/foreground applies to icon as well, or there might be specific icon color tokens.
     // Using supportText/foreground as default based on common patterns if no specific icon token.
     // If specific tokens exist like 'supportText/icon/color', they should be used.
     // Detailed variables only showed supportText/foreground.
-    const color = getVariableByName('supportText/foreground', modes) || '#0c0d10';
+    const color = getVariableByName('supportText/foreground', modes) || '#0c0d10'
 
     return (
         <View style={style}>
             <Icon name={iconName} size={size} color={color} />
         </View>
-    );
+    )
 }
 
-export default SupportTextIcon;
+export default SupportTextIcon

package/src/components/SupportText/index.ts

@@ -1,2 +1,2 @@
-export { default as SupportText } from './SupportText';
-export { default as SupportTextIcon } from './SupportTextIcon';
+export { default as SupportText } from './SupportText'
+export { default as SupportTextIcon } from './SupportTextIcon'

package/src/components/UpiHandle/UpiHandle.tsx

@@ -1,8 +1,7 @@
-import React, { useState } from 'react'
 import { Pressable, View, Text, Image, type ViewStyle, type TextStyle, type ImageStyle, type ImageSourcePropType } from 'react-native'
+import React, { useState, isValidElement, cloneElement } from 'react'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import Icon from '../../icons/Icon'
 
 // Default static asset from the component folder.
 // Consumers can override the image via the `avatarSource` prop if needed.
@@ -12,6 +11,13 @@ type UpiHandleProps = {
   label?: string;
   modes?: Record<string, any>;
   showIcon?: boolean;
+  /**
+   * Icon element to display.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Deprecated: Use icon prop instead
+   */
   iconName?: string;
   avatarSource?: ImageSourcePropType;
   accessibilityLabel?: string;
@@ -36,7 +42,8 @@ type UpiHandleProps = {
  * @param {string} [props.label="Label"] - UPI handle text to display.
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
- * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set (e.g. 'ic_qr_code', 'ic_scan_qr_code').
+ * @param {React.ReactNode} [props.icon] - Icon element to display.
+ * @param {string} [props.iconName] - DEPRECATED: Icon name from the actions set.
  * @param {ImageSourcePropType} [props.avatarSource] - Optional custom image source for the avatar.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
@@ -45,7 +52,8 @@ function UpiHandle({
   label = 'Label',
   modes: propModes = {},
   showIcon = true,
-  iconName = 'ic_scan_qr_code',
+  icon,
+  iconName,
   avatarSource,
   onPress,
   disabled,
@@ -178,15 +186,17 @@ function UpiHandle({
       >
         {label}
       </Text>
-      {showIcon && (
-        <Icon
-          name={iconName}
-          size={iconSize}
-          color={iconColor}
-          style={iconPlaceholderStyle}
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no"
-        />
+      {showIcon && (icon || iconName) && (
+        isValidElement(icon) ? cloneElement(icon as React.ReactElement<any>, {
+          size: iconSize,
+          width: iconSize,
+          height: iconSize,
+          color: iconColor,
+          fill: iconColor,
+          style: iconPlaceholderStyle,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no"
+        }) : null
       )}
     </Wrapper>
   )

package/src/components/index.ts

@@ -1,51 +1,51 @@
-export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
-export { default as AppBar } from './AppBar/AppBar';
-export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
-export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
-export { default as Badge } from './Badge/Badge';
-export { default as BottomNav } from './BottomNav/BottomNav';
-export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
-export { default as Button, type ButtonProps } from './Button/Button';
-export { default as Card } from './Card/Card';
-export { default as CardFeedback } from './CardFeedback/CardFeedback';
-export { default as Disclaimer } from './Disclaimer/Disclaimer';
-export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
-export { default as Drawer } from './Drawer/Drawer';
-export { default as CtaCard } from './CtaCard/CtaCard';
-export { default as FilterBar } from './FilterBar/FilterBar';
-export { default as HStack, type HStackProps } from './HStack/HStack';
-export { default as IconButton } from './IconButton/IconButton';
-export { default as IconCapsule } from './IconCapsule/IconCapsule';
-export { default as LazyList } from './LazyList/LazyList';
-export { default as ListGroup } from './ListGroup/ListGroup';
-export { default as ListItem } from './ListItem/ListItem';
-export { default as MediaCard } from './MediaCard/MediaCard';
-export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
-export { default as MoneyValue } from './MoneyValue/MoneyValue';
-export { default as NavArrow } from './NavArrow/NavArrow';
-export { default as PageTitle } from './PageTitle/PageTitle';
-export { default as Screen, type ScreenProps } from './Screen/Screen';
-export { default as Section } from './Section/Section';
-export { default as Stepper } from './Stepper/Stepper';
-export { Step } from './Stepper/Step';
-export { StepLabel } from './Stepper/StepLabel';
-export { default as TextInput } from './TextInput/TextInput';
-export { default as ThreadHero, type ThreadHeroProps } from './ThreadHero/ThreadHero';
-export { Tooltip } from './Tooltip/Tooltip';
+export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter'
+export { default as AppBar } from './AppBar/AppBar'
+export { default as Avatar, type AvatarProps } from './Avatar/Avatar'
+export { default as AvatarGroup } from './AvatarGroup/AvatarGroup'
+export { default as Badge } from './Badge/Badge'
+export { default as BottomNav } from './BottomNav/BottomNav'
+export { default as BottomNavItem } from './BottomNavItem/BottomNavItem'
+export { default as Button, type ButtonProps } from './Button/Button'
+export { default as Card } from './Card/Card'
+export { default as CardFeedback } from './CardFeedback/CardFeedback'
+export { default as Disclaimer } from './Disclaimer/Disclaimer'
+export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider'
+export { default as Drawer } from './Drawer/Drawer'
+export { default as CtaCard } from './CtaCard/CtaCard'
+export { default as FilterBar } from './FilterBar/FilterBar'
+export { default as HStack, type HStackProps } from './HStack/HStack'
+export { default as IconButton } from './IconButton/IconButton'
+export { default as IconCapsule } from './IconCapsule/IconCapsule'
+export { default as LazyList } from './LazyList/LazyList'
+export { default as ListGroup } from './ListGroup/ListGroup'
+export { default as ListItem } from './ListItem/ListItem'
+export { default as MediaCard } from './MediaCard/MediaCard'
+export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile'
+export { default as MoneyValue } from './MoneyValue/MoneyValue'
+export { default as NavArrow } from './NavArrow/NavArrow'
+export { default as PageTitle } from './PageTitle/PageTitle'
+export { default as Screen, type ScreenProps } from './Screen/Screen'
+export { default as Section } from './Section/Section'
+export { default as Stepper } from './Stepper/Stepper'
+export { Step } from './Stepper/Step'
+export { StepLabel } from './Stepper/StepLabel'
+export { default as TextInput } from './TextInput/TextInput'
+export { default as ThreadHero, type ThreadHeroProps } from './ThreadHero/ThreadHero'
+export { Tooltip } from './Tooltip/Tooltip'
 
-export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
-export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
-export { default as UpiHandle } from './UpiHandle/UpiHandle';
-export { default as VStack, type VStackProps } from './VStack/VStack';
-export { default as ChipGroup, type ChipGroupProps } from './ChipGroup/ChipGroup';
-export { default as EmptyState, type EmptyStateProps } from './EmptyState/EmptyState';
-export { default as Accordion, type AccordionProps } from './Accordion/Accordion';
-export { default as ActionTile, type ActionTileProps } from './ActionTile/ActionTile';
-export { default as Balance, type BalanceProps } from './Balance/Balance';
-export { default as ButtonGroup, type ButtonGroupProps } from './ButtonGroup/ButtonGroup';
-export { default as ChipSelect, type ChipSelectProps } from './ChipSelect/ChipSelect';
-export { default as InputSearch, type InputSearchProps } from './InputSearch/InputSearch';
-export { default as SupportText, type SupportTextProps } from './SupportText/SupportText';
-export { default as SupportTextIcon, type SupportTextIconProps } from './SupportText/SupportTextIcon';
-export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton';
+export { default as TransactionDetails } from './TransactionDetails/TransactionDetails'
+export { default as TransactionStatus } from './TransactionStatus/TransactionStatus'
+export { default as UpiHandle } from './UpiHandle/UpiHandle'
+export { default as VStack, type VStackProps } from './VStack/VStack'
+export { default as ChipGroup, type ChipGroupProps } from './ChipGroup/ChipGroup'
+export { default as EmptyState, type EmptyStateProps } from './EmptyState/EmptyState'
+export { default as Accordion, type AccordionProps } from './Accordion/Accordion'
+export { default as ActionTile, type ActionTileProps } from './ActionTile/ActionTile'
+export { default as Balance, type BalanceProps } from './Balance/Balance'
+export { default as ButtonGroup, type ButtonGroupProps } from './ButtonGroup/ButtonGroup'
+export { default as ChipSelect, type ChipSelectProps } from './ChipSelect/ChipSelect'
+export { default as InputSearch, type InputSearchProps } from './InputSearch/InputSearch'
+export { default as SupportText, type SupportTextProps } from './SupportText/SupportText'
+export { default as SupportTextIcon, type SupportTextIconProps } from './SupportText/SupportTextIcon'
+export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton'
 

package/src/design-tokens/JFSThemeProvider.tsx

@@ -1,6 +1,6 @@
 
-import React, { createContext, useContext, ReactNode, useMemo } from 'react';
-import { getVariableByName } from './figma-variables-resolver';
+import React, { createContext, useContext, ReactNode, useMemo } from 'react'
+import { getVariableByName } from './figma-variables-resolver'
 
 /**
  * Shape of the TokenContext
@@ -17,7 +17,7 @@ interface TokenContextType {
     getVariable: (name: string) => any;
 }
 
-const TokenContext = createContext<TokenContextType | undefined>(undefined);
+const TokenContext = createContext<TokenContextType | undefined>(undefined)
 
 interface JFSThemeProviderProps {
     /**
@@ -43,20 +43,20 @@ export const JFSThemeProvider: React.FC<JFSThemeProviderProps> = ({
 }) => {
     const value = useMemo(() => {
         // We bind the current modes to getVariableByName so consumers don't have to pass it
-        const getVariable = (name: string) => getVariableByName(name, modes);
+        const getVariable = (name: string) => getVariableByName(name, modes)
 
         return {
             modes,
             getVariable,
-        };
-    }, [modes]);
+        }
+    }, [modes])
 
     return (
         <TokenContext.Provider value={value}>
             {children}
         </TokenContext.Provider>
-    );
-};
+    )
+}
 
 /**
  * Hook to access the current design token context.
@@ -67,13 +67,13 @@ export const JFSThemeProvider: React.FC<JFSThemeProviderProps> = ({
  * }
  */
 export const useTokens = (): TokenContextType => {
-    const context = useContext(TokenContext);
+    const context = useContext(TokenContext)
     if (!context) {
         // If used outside provider, fall back to default behavior (empty modes)
         return {
             modes: {},
             getVariable: (name: string) => getVariableByName(name, {}),
-        };
+        }
     }
-    return context;
-};
+    return context
+}