jfs-components 0.0.44 → 0.0.45

package/lib/module/components/AmountInput/AmountInput.js

@@ -0,0 +1,77 @@
+"use strict";
+
+import React from 'react';
+import { View } 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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AmountInput component that combines MoneyValue and NoteInput from Figma design.
+ *
+ * @component
+ */
+export default function AmountInput({
+  moneyValueSlot,
+  noteInputSlot,
+  modes: propModes = {},
+  style
+}) {
+  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 = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    ...style
+  };
+
+  // Handle MoneyValue Slot
+  const renderMoneyValueSlot = () => {
+    if (/*#__PURE__*/React.isValidElement(moneyValueSlot)) {
+      return /*#__PURE__*/React.cloneElement(moneyValueSlot, {
+        modes
+      });
+    }
+    // Default fallback if no slot prop is provided
+    if (!moneyValueSlot) {
+      return /*#__PURE__*/_jsx(MoneyValue, {
+        modes: modes
+      });
+    }
+    return moneyValueSlot;
+  };
+
+  // Handle NoteInput Slot
+  const renderNoteInputSlot = () => {
+    if (/*#__PURE__*/React.isValidElement(noteInputSlot)) {
+      return /*#__PURE__*/React.cloneElement(noteInputSlot, {
+        modes
+      });
+    }
+    // Default fallback if no slot prop is provided
+    if (!noteInputSlot) {
+      return /*#__PURE__*/_jsx(NoteInput, {
+        modes: modes
+      });
+    }
+    return noteInputSlot;
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: containerStyle,
+    children: [renderMoneyValueSlot(), renderNoteInputSlot()]
+  });
+}

package/lib/module/components/AmountInput/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { default } from './AmountInput';

package/lib/module/components/Button/Button.js

@@ -59,8 +59,28 @@ function Button({
   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 = {
-    color: textColor,
+    color: activeTextColor,
     fontFamily,
     fontWeight,
     fontSize,
@@ -114,22 +134,13 @@ function Button({
     accessibilityLabel: defaultAccessibilityLabel,
     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
+    backgroundColor: hoverBg,
+    borderColor: hoverBorderColor
+  };
+  const pressedStyle = {
+    backgroundColor: pressedBg,
+    borderColor: pressedBorderColor
   };
   if (__DEV__) {
     if (children && labelStyle) {
@@ -154,21 +165,13 @@ function Button({
       onPress
     } : {}),
     onPressIn: e => {
-      ;
+      setIsPressed(true);
       rest?.onPressIn?.(e);
     },
     onPressOut: e => {
-      ;
+      setIsPressed(false);
       rest?.onPressOut?.(e);
     },
-    onFocus: e => {
-      setIsFocused(true);
-      rest?.onFocus?.(e);
-    },
-    onBlur: e => {
-      setIsFocused(false);
-      rest?.onBlur?.(e);
-    },
     onHoverIn: e => {
       setIsHovered(true);
       rest?.onHoverIn?.(e);
@@ -179,7 +182,7 @@ function Button({
     },
     style: ({
       pressed
-    }) => [containerBaseStyle, pressed && !disabled ? pressedStyle : null, isHovered && !disabled ? hoverStyle : null, isFocused && !disabled ? focusStyle : null, style],
+    }) => [containerBaseStyle, isHovered && !disabled ? hoverStyle : null, (pressed || isPressed) && !disabled ? pressedStyle : null, style],
     ...webProps,
     children: [leading ? /*#__PURE__*/_jsx(View, {
       style: leadingAccessoryStyle,
@@ -189,7 +192,7 @@ function Button({
       children: /*#__PURE__*/_jsx(Icon, {
         name: icon,
         size: iconSize,
-        color: iconColor,
+        color: activeIconColor,
         accessibilityElementsHidden: true,
         importantForAccessibility: "no"
       })

package/lib/module/components/CardProviderInfo/CardProviderInfo.js

@@ -0,0 +1,71 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import ProductLabel from '../ProductLabel/ProductLabel';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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
+}) {
+  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 = {
+    backgroundColor: background,
+    borderColor: border,
+    borderWidth: borderWidthVal,
+    borderStyle: 'solid',
+    padding: padding,
+    gap: gap,
+    borderRadius: radius
+  };
+  const gridGapNum = gridGap;
+  const clonedChildren = children ? cloneChildrenWithModes(children, modes) : [];
+  const childArray = React.Children.toArray(clonedChildren);
+  const rows = [];
+  for (let i = 0; i < childArray.length; i += 2) {
+    rows.push(childArray.slice(i, i + 2));
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsx(ProductLabel, {
+      label: label,
+      imageSource: imageSource,
+      modes: modes
+    }), childArray.length > 0 && /*#__PURE__*/_jsx(View, {
+      style: {
+        rowGap: gridGapNum
+      },
+      children: rows.map((row, i) => /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row',
+          columnGap: gridGapNum
+        },
+        children: row.map((child, j) => /*#__PURE__*/_jsx(View, {
+          style: {
+            flex: 1
+          },
+          children: child
+        }, j))
+      }, i))
+    })]
+  });
+}
+export default CardProviderInfo;

package/lib/module/components/EmptyState/EmptyState.js

@@ -15,6 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyState({
   title = "No payments to show",
   description = "Start by paying bills, recharge or your friends",
+  showDescription = true,
   iconSlot,
   buttonSlot,
   modes: propModes = {},
@@ -110,7 +111,7 @@ function EmptyState({
       children: [iconContent, /*#__PURE__*/_jsx(Text, {
         style: titleStyle,
         children: title
-      }), description ? /*#__PURE__*/_jsx(Text, {
+      }), showDescription && description ? /*#__PURE__*/_jsx(Text, {
         style: bodyStyle,
         children: description
       }) : null]

package/lib/module/components/OTP/OTP.js

@@ -0,0 +1,236 @@
+"use strict";
+
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { View, Text, TextInput as RNTextInput, Pressable, Animated } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import SupportText from '../SupportText/SupportText';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DIGITS_ONLY = /^\d*$/;
+function OTP({
+  length = 6,
+  value: controlledValue,
+  defaultValue = '',
+  onChange,
+  onValueChange,
+  onComplete,
+  isDisabled = false,
+  isInvalid = false,
+  allowedPattern = DIGITS_ONLY,
+  autoFocus = false,
+  modes: propModes = {},
+  style,
+  supportText,
+  supportTextStatus
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const isControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const inputRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const caretAnim = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    if (!isFocused) return;
+    const blink = Animated.loop(Animated.sequence([Animated.timing(caretAnim, {
+      toValue: 0,
+      duration: 400,
+      useNativeDriver: true
+    }), Animated.timing(caretAnim, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: true
+    })]));
+    blink.start();
+    return () => blink.stop();
+  }, [isFocused, caretAnim]);
+  const prevCompleteRef = useRef(false);
+  const setValue = useCallback(next => {
+    const clamped = next.slice(0, length);
+    if (!isControlled) setInternalValue(clamped);
+    onChange?.(clamped);
+    onValueChange?.(clamped);
+    if (clamped.length === length && !prevCompleteRef.current) {
+      prevCompleteRef.current = true;
+      onComplete?.(clamped);
+    }
+    if (clamped.length < length) {
+      prevCompleteRef.current = false;
+    }
+  }, [length, isControlled, onChange, onValueChange, onComplete]);
+  const handleChangeText = useCallback(text => {
+    if (isDisabled) return;
+    if (!allowedPattern.test(text)) return;
+    setValue(text);
+  }, [isDisabled, allowedPattern, setValue]);
+  const handlePress = useCallback(() => {
+    if (isDisabled) return;
+    inputRef.current?.focus();
+  }, [isDisabled]);
+
+  // --- Token resolution (state-independent tokens resolved once) ---
+  const otpGap = Number(getVariableByName('otp/gap', modes)) || 36;
+  const otpPaddingH = Number(getVariableByName('otp/padding/horizontal', modes)) || 8;
+  const otpPaddingV = Number(getVariableByName('otp/padding/vertical', modes)) || 8;
+  const slotWidth = Number(getVariableByName('pinSlot/width', modes)) || 48;
+  const slotGap = Number(getVariableByName('pinSlot/gap', modes)) || 8;
+  // digit/color has no state variants in Figma — resolved once from the Output collection
+  const digitColor = getVariableByName('pinSlot/digit/color', modes) || '#000000';
+  const digitFontSize = Number(getVariableByName('pinSlot/digit/fontSize', modes)) || 24;
+  const digitFontFamily = getVariableByName('pinSlot/digit/fontFamily', modes) || 'JioType Var';
+  const digitLineHeight = Number(getVariableByName('pinSlot/digit/lineHeight', modes)) || 29;
+  const digitFontWeight = getVariableByName('pinSlot/digit/fontWeight', modes) || '500';
+  const underlineHeight = Number(getVariableByName('pinSlot/underline/height', modes)) || 2;
+  const underlineRadius = Number(getVariableByName('pinSlot/underline/radius', modes)) || 1;
+
+  // --- State-driven slot modes ---
+  // Collection name in Figma is "Input/PINSlot  States" (double space before States).
+  // Only PinSlot/underline/color (capital P/S) lives in this collection with Idle/Active/Error modes.
+  // isInvalid takes priority over active focus; the component maps semantic state → token mode
+  // internally so consumers never need to know the collection key name.
+  const getSlotModes = isActiveSlot => {
+    if (isInvalid) return {
+      ...modes,
+      'Input/PINSlot  States': 'Error'
+    };
+    if (isActiveSlot && isFocused) return {
+      ...modes,
+      'Input/PINSlot  States': 'Active'
+    };
+    return {
+      ...modes,
+      'Input/PINSlot  States': 'Idle'
+    };
+  };
+
+  // --- Styles ---
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    gap: otpGap,
+    paddingHorizontal: otpPaddingH,
+    paddingVertical: otpPaddingV
+  };
+  const slotWrapStyle = {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'flex-start',
+    alignSelf: 'stretch'
+  };
+  const renderSlot = index => {
+    const char = currentValue[index];
+    const isActiveSlot = index === currentValue.length && currentValue.length < length;
+    const isFilled = char !== undefined;
+
+    // Underline color is the only state-sensitive token (lives in "Input/PINSlot  States" collection).
+    // Note: token name is "PinSlot/underline/color" (capital P/S) — different from the static
+    // "pinSlot/underline/color" in the Output collection.
+    const slotModes = getSlotModes(isActiveSlot);
+    const underlineColor = getVariableByName('PinSlot/underline/color', slotModes) || '#303338';
+    const slotStyle = {
+      width: slotWidth,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: slotGap
+    };
+    const digitStyle = {
+      fontFamily: digitFontFamily,
+      fontWeight: digitFontWeight,
+      fontSize: digitFontSize,
+      lineHeight: digitLineHeight,
+      color: digitColor,
+      textAlign: 'center',
+      minWidth: '100%'
+    };
+    const underlineStyle = {
+      width: slotWidth,
+      height: underlineHeight,
+      borderRadius: underlineRadius,
+      backgroundColor: underlineColor
+    };
+    return /*#__PURE__*/_jsxs(View, {
+      style: slotStyle,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          minHeight: digitLineHeight,
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%'
+        },
+        children: isFilled ? /*#__PURE__*/_jsx(Text, {
+          style: digitStyle,
+          children: char
+        }) : isActiveSlot && isFocused ? /*#__PURE__*/_jsx(Animated.View, {
+          style: {
+            width: 2,
+            height: digitFontSize,
+            backgroundColor: digitColor,
+            opacity: caretAnim
+          }
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: [digitStyle, {
+            color: 'transparent'
+          }],
+          children: '\u00A0'
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: underlineStyle
+      })]
+    }, index);
+  };
+  const renderSupportText = () => {
+    if (!supportText) return null;
+    if (typeof supportText === 'string') {
+      return /*#__PURE__*/_jsx(SupportText, {
+        label: supportText,
+        status: supportTextStatus ?? (isInvalid ? 'Error' : 'Neutral'),
+        modes: modes
+      });
+    }
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: cloneChildrenWithModes(React.Children.toArray(supportText), modes)
+    });
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    style: [containerStyle, isDisabled && {
+      opacity: 0.4
+    }, style],
+    onPress: handlePress,
+    disabled: isDisabled,
+    accessibilityRole: "none",
+    children: [/*#__PURE__*/_jsx(RNTextInput, {
+      ref: inputRef,
+      value: currentValue,
+      onChangeText: handleChangeText,
+      maxLength: length,
+      keyboardType: "number-pad",
+      autoFocus: autoFocus,
+      editable: !isDisabled,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      caretHidden: true,
+      style: {
+        position: 'absolute',
+        width: 1,
+        height: 1,
+        opacity: 0
+      },
+      accessibilityLabel: `OTP input, ${length} digits`,
+      accessibilityHint: "Enter your verification code"
+    }), /*#__PURE__*/_jsx(View, {
+      style: slotWrapStyle,
+      children: Array.from({
+        length
+      }, (_, i) => renderSlot(i))
+    }), renderSupportText()]
+  });
+}
+export default OTP;

package/lib/module/components/PortfolioHero/PortfolioHero.js

@@ -0,0 +1,73 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
+import Avatar from '../Avatar/Avatar';
+import MoneyValue from '../MoneyValue/MoneyValue';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function PortfolioHero({
+  label = 'Gold',
+  imageSource,
+  value = '12,000.11',
+  currency = '₹',
+  modes = {
+    Context3: 'Balance'
+  },
+  children,
+  style
+}) {
+  const gap = getVariableByName('portfolioHero/gap', modes) ?? 16;
+  const padding = getVariableByName('portfolioHero/padding', modes) ?? 8;
+  const slotWrapGap = getVariableByName('portfolioHero/slotWrap/gap', modes) ?? 8;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: gap,
+    padding: padding
+  };
+  const productLabelStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  };
+  const labelTextStyle = {
+    fontFamily: 'System',
+    fontWeight: '700',
+    fontSize: 16,
+    lineHeight: 16 * 1.3,
+    color: '#0d0d0f',
+    textAlign: 'center'
+  };
+  const slotWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: slotWrapGap
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: productLabelStyle,
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        style: "Image",
+        ...(imageSource != null && {
+          imageSource
+        }),
+        modes: modes
+      }), /*#__PURE__*/_jsx(Text, {
+        style: labelTextStyle,
+        children: label
+      })]
+    }), /*#__PURE__*/_jsx(MoneyValue, {
+      value: value,
+      currency: currency,
+      modes: modes
+    }), children && /*#__PURE__*/_jsx(View, {
+      style: slotWrapStyle,
+      children: cloneChildrenWithModes(children, modes)
+    })]
+  });
+}
+export default PortfolioHero;

package/lib/module/components/ProductLabel/ProductLabel.js

@@ -0,0 +1,45 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Avatar from '../Avatar/Avatar';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ProductLabel({
+  label = 'Gold',
+  imageSource,
+  modes = {},
+  style
+}) {
+  const gap = getVariableByName('productLabel/gap', modes) ?? 8;
+  const textColor = getVariableByName('productLabel/text/color', modes) ?? '#000000';
+  const textFontSize = getVariableByName('productLabel/text/fontSize', modes) ?? 16;
+  const textFontFamily = getVariableByName('productLabel/text/fontFamily', modes) ?? 'JioType Var';
+  const textFontWeight = getVariableByName('productLabel/text/fontWeight', modes) ?? 700;
+  const textLineHeight = getVariableByName('productLabel/text/lineHeight', modes) ?? 21;
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: gap
+  };
+  const labelTextStyle = {
+    color: textColor,
+    fontSize: textFontSize,
+    fontFamily: textFontFamily,
+    fontWeight: String(textFontWeight),
+    lineHeight: textLineHeight,
+    textAlign: 'center'
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      style: "Image",
+      imageSource: imageSource,
+      modes: modes
+    }), /*#__PURE__*/_jsx(Text, {
+      style: labelTextStyle,
+      children: label
+    })]
+  });
+}
+export default ProductLabel;