jfs-components 0.0.43 → 0.0.45

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-02-19T12:53:50.558Z
+ * Generated: 2026-03-16T08:36:20.904Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/AmountInput/AmountInput.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { View, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import MoneyValue from '../MoneyValue/MoneyValue'
+import NoteInput from '../NoteInput/NoteInput'
+
+export type AmountInputProps = {
+    /**
+     * Slot for the MoneyValue component.
+     */
+    moneyValueSlot?: React.ReactNode
+    /**
+     * Slot for the NoteInput component.
+     */
+    noteInputSlot?: React.ReactNode
+    /** Modes for design token resolution */
+    modes?: Record<string, any>
+    /** Optional container style */
+    style?: ViewStyle
+}
+
+/**
+ * AmountInput component that combines MoneyValue and NoteInput from Figma design.
+ *
+ * @component
+ */
+export default function AmountInput({
+    moneyValueSlot,
+    noteInputSlot,
+    modes: propModes = {},
+    style,
+}: AmountInputProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = { ...globalModes, ...propModes }
+
+    // Resolve tokens
+    const gap = Number(getVariableByName('amountInput/gap', modes)) || 16
+    const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes)) || 0
+    const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes)) || 0
+
+    const containerStyle: ViewStyle = {
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap,
+        paddingHorizontal,
+        paddingVertical,
+        ...style,
+    }
+
+    // Handle MoneyValue Slot
+    const renderMoneyValueSlot = () => {
+        if (React.isValidElement(moneyValueSlot)) {
+            return React.cloneElement(moneyValueSlot as React.ReactElement<any>, { modes })
+        }
+        // Default fallback if no slot prop is provided
+        if (!moneyValueSlot) {
+            return <MoneyValue modes={modes} />
+        }
+        return moneyValueSlot
+    }
+
+    // Handle NoteInput Slot
+    const renderNoteInputSlot = () => {
+        if (React.isValidElement(noteInputSlot)) {
+            return React.cloneElement(noteInputSlot as React.ReactElement<any>, { modes })
+        }
+        // Default fallback if no slot prop is provided
+        if (!noteInputSlot) {
+            return <NoteInput modes={modes} />
+        }
+        return noteInputSlot
+    }
+
+    return (
+        <View style={containerStyle}>
+            {renderMoneyValueSlot()}
+            {renderNoteInputSlot()}
+        </View>
+    )
+}

package/src/components/AmountInput/index.ts

@@ -0,0 +1,2 @@
+export { default } from './AmountInput'
+export type { AmountInputProps } from './AmountInput'

package/src/components/Button/Button.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react'
 import { Pressable, Text, View, type AccessibilityState, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+import Icon from '../../icons/Icon'
 
 export type ButtonProps = SafePressableProps & {
   label?: string;
@@ -25,6 +26,11 @@ export type ButtonProps = SafePressableProps & {
   renderContent?: (styles: StyleProp<TextStyle>) => React.ReactNode;
   leading?: React.ReactNode;
   trailing?: React.ReactNode;
+  /**
+   * Name of the icon to display on the right side of the button.
+   * Takes precedence over `trailing` if both are provided.
+   */
+  icon?: string;
   modes?: Record<string, any>;
   onPress?: () => void;
   disabled?: boolean;
@@ -64,6 +70,7 @@ function Button({
   renderContent,
   leading,
   trailing,
+  icon,
   modes = {},
   onPress,
   disabled = false,
@@ -90,9 +97,29 @@ 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 iconSize = getVariableByName('button/icon/size', modes) ?? 18
+
+  const [isHovered, setIsHovered] = useState(false)
+  const [isPressed, setIsPressed] = useState(false)
+
+  const hoverModes = { ...modes, "Button / State": "Hover" }
+  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 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 activeTextColor = isPressed && !disabled ? pressedTextColor : isHovered && !disabled ? hoverTextColor : textColor
+  const activeIconColor = isPressed && !disabled ? pressedIconColor : isHovered && !disabled ? hoverIconColor : iconColor
 
   const baseLabelTextStyle: TextStyle = {
-    color: textColor,
+    color: activeTextColor,
     fontFamily,
     fontWeight,
     fontSize,
@@ -159,12 +186,8 @@ function Button({
     webAccessibilityProps,
   })
 
-  // Interaction states (placeholders for visuals; tweak later)
-  const [isFocused, setIsFocused] = useState(false)
-  const [isHovered, setIsHovered] = useState(false)
-  const pressedStyle = { transform: [{ scale: 0.995 }], backgroundColor: '#b88940' }
-  const focusStyle = { borderWidth: 1, borderColor: '#222' }
-  const hoverStyle = { opacity: 0.95 }
+  const hoverStyle = { backgroundColor: hoverBg, borderColor: hoverBorderColor }
+  const pressedStyle = { backgroundColor: pressedBg, borderColor: pressedBorderColor }
 
   if (__DEV__) {
     if (children && labelStyle) {
@@ -194,18 +217,12 @@ function Button({
       disabled={disabled}
       {...(onPress !== undefined ? { onPress } : {})}
       onPressIn={(e: any) => {
-        ; (rest as any)?.onPressIn?.(e)
+        setIsPressed(true)
+        ;(rest as any)?.onPressIn?.(e)
       }}
       onPressOut={(e: any) => {
-        ; (rest as any)?.onPressOut?.(e)
-      }}
-      onFocus={(e: any) => {
-        setIsFocused(true)
-          ; (rest as any)?.onFocus?.(e)
-      }}
-      onBlur={(e: any) => {
-        setIsFocused(false)
-          ; (rest as any)?.onBlur?.(e)
+        setIsPressed(false)
+        ;(rest as any)?.onPressOut?.(e)
       }}
       onHoverIn={(e: any) => {
         setIsHovered(true)
@@ -217,9 +234,8 @@ function Button({
       }}
       style={({ pressed }) => [
         containerBaseStyle,
-        pressed && !disabled ? pressedStyle : null,
         isHovered && !disabled ? hoverStyle : null,
-        isFocused && !disabled ? focusStyle : null,
+        (pressed || isPressed) && !disabled ? pressedStyle : null,
         style,
       ] as StyleProp<ViewStyle>}
       {...webProps}
@@ -230,7 +246,11 @@ function Button({
         </View>
       ) : null}
       {content}
-      {trailing ? (
+      {icon ? (
+        <View style={trailingAccessoryStyle}>
+          <Icon name={icon} size={iconSize as number} color={activeIconColor as string} accessibilityElementsHidden={true} importantForAccessibility="no" />
+        </View>
+      ) : trailing ? (
         <View style={trailingAccessoryStyle}>
           {trailing}
         </View>

package/src/components/CardProviderInfo/CardProviderInfo.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { View, type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import ProductLabel from '../ProductLabel/ProductLabel'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
+
+export type CardProviderInfoProps = {
+  /** Product name shown in the ProductLabel header. */
+  label?: string
+  /** Image source for the product avatar. */
+  imageSource?: ImageSourcePropType | string
+  /** Slot content — typically StatItem components arranged in a 2-column grid. */
+  children?: React.ReactNode
+  /** Design token modes for theming. */
+  modes?: Record<string, any>
+  /** Override container styles. */
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * CardProviderInfo displays a product header (ProductLabel) followed by a
+ * 2-column grid of children (typically StatItem instances).
+ *
+ * @component
+ * @param {CardProviderInfoProps} props
+ */
+function CardProviderInfo({
+  label = 'Gold',
+  imageSource,
+  children,
+  modes = {},
+  style,
+}: CardProviderInfoProps) {
+  const background = getVariableByName('card/providerInfo/background', modes) ?? '#fef4e5'
+  const border = getVariableByName('card/providerInfo/border', modes) ?? '#fef4e5'
+  const borderWidthVal = getVariableByName('card/providerInfo/borderWidth', modes) ?? 1
+  const padding = getVariableByName('card/providerInfo/padding', modes) ?? 20
+  const gap = getVariableByName('card/providerInfo/gap', modes) ?? 20
+  const radius = getVariableByName('card/providerInfo/radius', modes) ?? 16
+  const gridGap = getVariableByName('card/providerInfo/grid/gap', modes) ?? 8
+
+  const containerStyle: ViewStyle = {
+    backgroundColor: background as string,
+    borderColor: border as string,
+    borderWidth: borderWidthVal as number,
+    borderStyle: 'solid',
+    padding: padding as number,
+    gap: gap as number,
+    borderRadius: radius as number,
+  }
+
+  const gridGapNum = gridGap as number
+  const clonedChildren = children ? cloneChildrenWithModes(children, modes) : []
+  const childArray = React.Children.toArray(clonedChildren)
+
+  const rows: React.ReactNode[][] = []
+  for (let i = 0; i < childArray.length; i += 2) {
+    rows.push(childArray.slice(i, i + 2))
+  }
+
+  return (
+    <View style={[containerStyle, style]}>
+      <ProductLabel label={label} imageSource={imageSource} modes={modes} />
+      {childArray.length > 0 && (
+        <View style={{ rowGap: gridGapNum }}>
+          {rows.map((row, i) => (
+            <View key={i} style={{ flexDirection: 'row', columnGap: gridGapNum }}>
+              {row.map((child, j) => (
+                <View key={j} style={{ flex: 1 }}>
+                  {child}
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  )
+}
+
+export default CardProviderInfo

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,238 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  Pressable,
+  Platform,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+/**
+ * Tracks whether the last user interaction was a keyboard event (Tab).
+ * Capture-phase document listeners fire before any element-level handlers,
+ * so the flag is always up-to-date when onFocus runs.
+ */
+function useFocusVisible() {
+  const [isFocusVisible, setIsFocusVisible] = useState(false)
+  const hadKeyboardEventRef = useRef(false)
+
+  useEffect(() => {
+    if (Platform.OS !== 'web' || typeof document === 'undefined') return
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Tab') hadKeyboardEventRef.current = true
+    }
+    const onPointerDown = () => {
+      hadKeyboardEventRef.current = false
+    }
+
+    document.addEventListener('keydown', onKeyDown, true)
+    document.addEventListener('mousedown', onPointerDown, true)
+    document.addEventListener('touchstart', onPointerDown, true)
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, true)
+      document.removeEventListener('mousedown', onPointerDown, true)
+      document.removeEventListener('touchstart', onPointerDown, true)
+    }
+  }, [])
+
+  const onFocus = useCallback(() => {
+    if (hadKeyboardEventRef.current) setIsFocusVisible(true)
+  }, [])
+
+  const onBlur = useCallback(() => {
+    setIsFocusVisible(false)
+  }, [])
+
+  return { isFocusVisible, focusHandlers: { onFocus, onBlur } }
+}
+
+export interface CheckboxProps {
+  /** Whether the checkbox is checked (controlled) */
+  checked?: boolean
+  /** Initial checked state (uncontrolled) */
+  defaultChecked?: boolean
+  /** Callback when the checked state changes */
+  onValueChange?: (checked: boolean) => void
+  /** Whether the checkbox is disabled */
+  disabled?: boolean
+  /** Design token modes for theming */
+  modes?: Record<string, any>
+  /** Override container styles */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label for screen readers */
+  accessibilityLabel?: string
+}
+
+/**
+ * Checkbox component that maps directly to the Figma design using design tokens.
+ *
+ * Supports 8 visual states: Idle, Hover, Focus, Selected, Selected Hover,
+ * Focus Selected, Disabled, and Disabled Active. All styling is driven by
+ * design tokens with optional mode overrides.
+ *
+ * @component
+ * @param {CheckboxProps} props
+ */
+function Checkbox({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onValueChange,
+  disabled = false,
+  modes = {},
+  style,
+  accessibilityLabel,
+}: CheckboxProps) {
+  const isControlled = controlledChecked !== undefined
+  const [internalChecked, setInternalChecked] = useState(defaultChecked)
+  const isChecked = isControlled ? controlledChecked : internalChecked
+
+  const [isHovered, setIsHovered] = useState(false)
+  const { isFocusVisible, focusHandlers } = useFocusVisible()
+
+  const size = getVariableByName('checkbox/size', modes) ?? 18
+  const radius = getVariableByName('checkbox/radius', modes) ?? 4
+  const strokeWidth = getVariableByName('strokeWidth', modes) ?? 1
+
+  const idleStroke = getVariableByName('checkbox/idle/stroke/color', modes) ?? '#666666'
+  const hoverFill = getVariableByName('checkbox/hover/fill/color', modes) ?? 'rgba(0,0,0,0.1)'
+  const hoverStroke = getVariableByName('checkbox/hover/stroke/color', modes) ?? '#666666'
+  const hoverRing = getVariableByName('checkbox/hoverRing', modes) ?? 4
+  const hoverShadow = getVariableByName('hover/boxShadow', modes) ?? 'rgba(0,0,0,0.1)'
+  const selectedFill = getVariableByName('checkbox/selected/fill/color', modes) ?? '#cea15a'
+  const selectedStroke = getVariableByName('checkbox/selected/stroke/color', modes) ?? '#0d0d0d'
+  const selectedMarkColor = getVariableByName('checkbox/selected/mark/color', modes) ?? '#0f0d0a'
+  const focusFill = getVariableByName('checkbox/focus/fill/color', modes) ?? '#ffffff'
+  const focusStroke = getVariableByName('checkbox/focus/stroke/color', modes) ?? '#666666'
+  const focusShadowColor = getVariableByName('checkbox/focus/shadow/color', modes) ?? '#12fc2e'
+  const focusSpread = getVariableByName('checkbox/focus/spread/effect', modes) ?? 2
+  const disabledStroke = getVariableByName('checkbox/disabled/stroke/color', modes) ?? '#999999'
+  const disabledActiveBg = getVariableByName('checkbox/disabledActive/background/color', modes) ?? '#f6d19a'
+  const disabledActiveBorder = getVariableByName('checkbox/disabledActive/border/color', modes) ?? '#f6d19a'
+  const disabledActiveMark = getVariableByName('checkbox/disabledActive/mark/color', modes) ?? '#474d54'
+  const selectedHoverShadow = getVariableByName('selected/hover/boxShadow', modes) ?? 'rgba(0,0,0,0.1)'
+  const hoverShadowSize = getVariableByName('hover/boxShadow/size', modes) ?? 4
+
+  const handlePress = useCallback(() => {
+    if (disabled) return
+    const next = !isChecked
+    if (!isControlled) {
+      setInternalChecked(next)
+    }
+    onValueChange?.(next)
+  }, [disabled, isChecked, isControlled, onValueChange])
+
+  const resolveStyle = (): ViewStyle => {
+    const base: ViewStyle = {
+      width: size as number,
+      height: size as number,
+      borderRadius: radius as number,
+      borderWidth: strokeWidth as number,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+    }
+
+    if (disabled && isChecked) {
+      return {
+        ...base,
+        backgroundColor: disabledActiveBg as string,
+        borderColor: disabledActiveBorder as string,
+      }
+    }
+
+    if (disabled) {
+      return {
+        ...base,
+        borderColor: disabledStroke as string,
+      }
+    }
+
+    if (isChecked && isFocusVisible) {
+      return {
+        ...base,
+        backgroundColor: selectedFill as string,
+        borderColor: selectedStroke as string,
+        ...boxShadow(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`),
+      }
+    }
+
+    if (isChecked && isHovered) {
+      return {
+        ...base,
+        backgroundColor: selectedFill as string,
+        borderColor: selectedStroke as string,
+        ...boxShadow(`0px 0px 0px ${hoverShadowSize}px ${selectedHoverShadow}`),
+      }
+    }
+
+    if (isChecked) {
+      return {
+        ...base,
+        backgroundColor: selectedFill as string,
+        borderColor: selectedStroke as string,
+      }
+    }
+
+    if (isFocusVisible) {
+      return {
+        ...base,
+        backgroundColor: focusFill as string,
+        borderColor: focusStroke as string,
+        ...boxShadow(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`),
+      }
+    }
+
+    if (isHovered) {
+      return {
+        ...base,
+        backgroundColor: hoverFill as string,
+        borderColor: hoverStroke as string,
+        ...boxShadow(`0px 0px 0px ${hoverRing}px ${hoverShadow}`),
+      }
+    }
+
+    return {
+      ...base,
+      borderColor: idleStroke as string,
+    }
+  }
+
+  const markColor = disabled && isChecked
+    ? (disabledActiveMark as string)
+    : (selectedMarkColor as string)
+
+  return (
+    <Pressable
+      style={[resolveStyle(), style]}
+      onPress={handlePress}
+      disabled={disabled}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      {...focusHandlers}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: isChecked, disabled }}
+      accessibilityLabel={accessibilityLabel}
+    >
+      {isChecked && (
+        <Svg width={12} height={9} viewBox="0 0 12 9" fill="none">
+          <Path
+            d="M4.00091 8.66939C3.91321 8.6699 3.82628 8.65309 3.74509 8.61991C3.6639 8.58673 3.59006 8.53785 3.52779 8.47606L0.195972 5.14273C0.0704931 5.01719 -1.86978e-09 4.84693 0 4.66939C1.86978e-09 4.49186 0.0704931 4.3216 0.195972 4.19606C0.321451 4.07053 0.491636 4 0.66909 4C0.846544 4 1.01673 4.07053 1.14221 4.19606L4.00091 7.06273L10.8578 0.196061C10.9833 0.0705253 11.1535 0 11.3309 0C11.5084 0 11.6785 0.0705253 11.804 0.196061C11.9295 0.321597 12 0.49186 12 0.669394C12 0.846929 11.9295 1.01719 11.804 1.14273L4.47403 8.47606C4.41176 8.53785 4.33792 8.58673 4.25673 8.61991C4.17554 8.65309 4.08861 8.6699 4.00091 8.66939Z"
+            fill={markColor}
+          />
+        </Svg>
+      )}
+    </Pressable>
+  )
+}
+
+function boxShadow(value: string): ViewStyle {
+  if (Platform.OS === 'web') {
+    return { boxShadow: value } as ViewStyle
+  }
+  return {}
+}
+
+export default Checkbox

package/src/components/EmptyState/EmptyState.tsx

@@ -16,6 +16,11 @@ export type EmptyStateProps = {
      * @default "Start by paying bills, recharge or your friends"
      */
     description?: string;
+    /**
+     * Whether to show the description text
+     * @default true
+     */
+    showDescription?: boolean;
     /**
      * Custom slot for the icon area. Defaults to IconCapsule.
      * If providing a custom component, ensure it accepts `modes` if needed.
@@ -42,6 +47,7 @@ export type EmptyStateProps = {
 function EmptyState({
     title = "No payments to show",
     description = "Start by paying bills, recharge or your friends",
+    showDescription = true,
     iconSlot,
     buttonSlot,
     modes: propModes = {},
@@ -140,7 +146,7 @@ function EmptyState({
 
                 {/* Texts */}
                 <Text style={titleStyle}>{title}</Text>
-                {description ? <Text style={bodyStyle}>{description}</Text> : null}
+                {showDescription && description ? <Text style={bodyStyle}>{description}</Text> : null}
             </View>
 
             {/* Button Slot */}