jfs-components 0.0.43 → 0.0.45

package/src/components/OTP/OTP.tsx

@@ -0,0 +1,275 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react'
+import {
+    View,
+    Text,
+    TextInput as RNTextInput,
+    Pressable,
+    Animated,
+    type ViewStyle,
+    type TextStyle,
+    type StyleProp,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import SupportText, { type SupportTextProps } from '../SupportText/SupportText'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
+
+export type OTPProps = {
+    /** Number of OTP digits. Defaults to 6. */
+    length?: number
+    /** Controlled value of the OTP input. */
+    value?: string
+    /** Default value for uncontrolled usage. */
+    defaultValue?: string
+    /** Called when the OTP value changes. Receives the current string of entered digits. */
+    onChange?: (value: string) => void
+    /** Alias for onChange — called when the OTP value changes. */
+    onValueChange?: (value: string) => void
+    /** Called when all digits have been entered. Receives the complete OTP string. */
+    onComplete?: (value: string) => void
+    /** Whether the OTP input is disabled. */
+    isDisabled?: boolean
+    /** Whether the OTP input is in an invalid/error state. */
+    isInvalid?: boolean
+    /** Regex pattern to filter allowed characters. Defaults to digits only. */
+    allowedPattern?: RegExp
+    /** Auto-focus the input on mount. */
+    autoFocus?: boolean
+    /** Design token modes for Figma token resolution. */
+    modes?: Record<string, any>
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>
+    /** Optional SupportText rendered below the slots. Pass a string for the label or a ReactNode for full control. */
+    supportText?: React.ReactNode
+    /** SupportText status when using the string shorthand. */
+    supportTextStatus?: SupportTextProps['status']
+}
+
+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,
+}: OTPProps) {
+    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<RNTextInput>(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: string) => {
+            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: string) => {
+            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) as string) || '#000000'
+    const digitFontSize = Number(getVariableByName('pinSlot/digit/fontSize', modes)) || 24
+    const digitFontFamily = (getVariableByName('pinSlot/digit/fontFamily', modes) as string) || 'JioType Var'
+    const digitLineHeight = Number(getVariableByName('pinSlot/digit/lineHeight', modes)) || 29
+    const digitFontWeight = (getVariableByName('pinSlot/digit/fontWeight', modes) as string) || '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: boolean): Record<string, any> => {
+        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: ViewStyle = {
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        gap: otpGap,
+        paddingHorizontal: otpPaddingH,
+        paddingVertical: otpPaddingV,
+    }
+
+    const slotWrapStyle: ViewStyle = {
+        flexDirection: 'row',
+        gap: 8,
+        alignItems: 'flex-start',
+        alignSelf: 'stretch',
+    }
+
+    const renderSlot = (index: number) => {
+        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) as string) || '#303338'
+
+        const slotStyle: ViewStyle = {
+            width: slotWidth,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            gap: slotGap,
+        }
+
+        const digitStyle: TextStyle = {
+            fontFamily: digitFontFamily,
+            fontWeight: digitFontWeight as TextStyle['fontWeight'],
+            fontSize: digitFontSize,
+            lineHeight: digitLineHeight,
+            color: digitColor,
+            textAlign: 'center',
+            minWidth: '100%' as any,
+        }
+
+        const underlineStyle: ViewStyle = {
+            width: slotWidth,
+            height: underlineHeight,
+            borderRadius: underlineRadius,
+            backgroundColor: underlineColor,
+        }
+
+        return (
+            <View key={index} style={slotStyle}>
+                <View style={{ minHeight: digitLineHeight, justifyContent: 'center', alignItems: 'center', width: '100%' }}>
+                    {isFilled ? (
+                        <Text style={digitStyle}>{char}</Text>
+                    ) : isActiveSlot && isFocused ? (
+                        <Animated.View
+                            style={{
+                                width: 2,
+                                height: digitFontSize,
+                                backgroundColor: digitColor,
+                                opacity: caretAnim,
+                            }}
+                        />
+                    ) : (
+                        <Text style={[digitStyle, { color: 'transparent' }]}>{'\u00A0'}</Text>
+                    )}
+                </View>
+                <View style={underlineStyle} />
+            </View>
+        )
+    }
+
+    const renderSupportText = () => {
+        if (!supportText) return null
+        if (typeof supportText === 'string') {
+            return (
+                <SupportText
+                    label={supportText}
+                    status={supportTextStatus ?? (isInvalid ? 'Error' : 'Neutral')}
+                    modes={modes}
+                />
+            )
+        }
+        return <>{cloneChildrenWithModes(React.Children.toArray(supportText), modes)}</>
+    }
+
+    return (
+        <Pressable
+            style={[containerStyle, isDisabled && { opacity: 0.4 }, style]}
+            onPress={handlePress}
+            disabled={isDisabled}
+            accessibilityRole="none"
+        >
+            <RNTextInput
+                ref={inputRef}
+                value={currentValue}
+                onChangeText={handleChangeText}
+                maxLength={length}
+                keyboardType="number-pad"
+                autoFocus={autoFocus}
+                editable={!isDisabled}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => setIsFocused(false)}
+                caretHidden
+                style={{
+                    position: 'absolute',
+                    width: 1,
+                    height: 1,
+                    opacity: 0,
+                }}
+                accessibilityLabel={`OTP input, ${length} digits`}
+                accessibilityHint="Enter your verification code"
+            />
+            <View style={slotWrapStyle}>
+                {Array.from({ length }, (_, i) => renderSlot(i))}
+            </View>
+            {renderSupportText()}
+        </Pressable>
+    )
+}
+
+export default OTP

package/src/components/PortfolioHero/PortfolioHero.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  type ViewStyle,
+  type TextStyle,
+  type ImageSourcePropType,
+} 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'
+
+export type PortfolioHeroProps = {
+  /** Product label text displayed next to the avatar. */
+  label?: string
+  /** Image source for the product avatar. */
+  imageSource?: ImageSourcePropType | string
+  /** Monetary value to display. */
+  value?: string
+  /** Currency symbol or ISO code. */
+  currency?: string
+  /** Modes configuration mapped to Figma tokens. */
+  modes?: Record<string, any>
+  /** Slot content rendered below the money value (e.g. Badge, subtitle). */
+  children?: React.ReactNode
+  /** Container style override. */
+  style?: ViewStyle
+}
+
+function PortfolioHero({
+  label = 'Gold',
+  imageSource,
+  value = '12,000.11',
+  currency = '₹',
+  modes = { Context3: 'Balance' },
+  children,
+  style,
+}: PortfolioHeroProps) {
+  const gap = getVariableByName('portfolioHero/gap', modes) ?? 16
+  const padding = getVariableByName('portfolioHero/padding', modes) ?? 8
+  const slotWrapGap = getVariableByName('portfolioHero/slotWrap/gap', modes) ?? 8
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: gap as number,
+    padding: padding as number,
+  }
+
+  const productLabelStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  }
+
+  const labelTextStyle: TextStyle = {
+    fontFamily: 'System',
+    fontWeight: '700',
+    fontSize: 16,
+    lineHeight: 16 * 1.3,
+    color: '#0d0d0f',
+    textAlign: 'center',
+  }
+
+  const slotWrapStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: slotWrapGap as number,
+  }
+
+  return (
+    <View style={[containerStyle, style]}>
+      <View style={productLabelStyle}>
+        <Avatar style="Image" {...(imageSource != null && { imageSource })} modes={modes} />
+        <Text style={labelTextStyle}>{label}</Text>
+      </View>
+
+      <MoneyValue value={value} currency={currency} modes={modes} />
+
+      {children && (
+        <View style={slotWrapStyle}>
+          {cloneChildrenWithModes(children, modes)}
+        </View>
+      )}
+    </View>
+  )
+}
+
+export default PortfolioHero

package/src/components/ProductLabel/ProductLabel.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { View, Text, type ViewStyle, type TextStyle, type ImageSourcePropType } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Avatar from '../Avatar/Avatar'
+
+export type ProductLabelProps = {
+  /** The product name label text. */
+  label?: string
+  /** Image source for the product avatar. */
+  imageSource?: ImageSourcePropType | string
+  /** Modes configuration for design token resolution. */
+  modes?: Record<string, any>
+  /** Container style override. */
+  style?: ViewStyle
+}
+
+function ProductLabel({
+  label = 'Gold',
+  imageSource,
+  modes = {},
+  style,
+}: ProductLabelProps) {
+  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: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: gap as number,
+  }
+
+  const labelTextStyle: TextStyle = {
+    color: textColor as string,
+    fontSize: textFontSize as number,
+    fontFamily: textFontFamily as string,
+    fontWeight: String(textFontWeight) as TextStyle['fontWeight'],
+    lineHeight: textLineHeight as number,
+    textAlign: 'center',
+  }
+
+  return (
+    <View style={[containerStyle, style]}>
+      <Avatar
+        style="Image"
+        imageSource={imageSource}
+        modes={modes}
+      />
+      <Text style={labelTextStyle}>{label}</Text>
+    </View>
+  )
+}
+
+export default ProductLabel

package/src/components/ProgressBadge/ProgressBadge.tsx

@@ -0,0 +1,172 @@
+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 Icon from '../../icons/Icon'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
+
+export type ProgressBadgeProps = {
+    /** The text displayed in the badge (e.g. "Live price...") */
+    taskName?: string
+    /** The icon name to display to the left of the text */
+    iconName?: string
+    /** The progress value between 0 and 100 */
+    value?: number
+    /** Modes object passed to `getVariableByName` for design token resolution */
+    modes?: Record<string, any>
+    /** Optional container style overrides */
+    style?: StyleProp<ViewStyle>
+    /** Optional text style overrides */
+    textStyle?: StyleProp<TextStyle>
+    /** Accessibility label for screen readers */
+    accessibilityLabel?: string
+} & React.ComponentProps<typeof View>
+
+/**
+ * ProgressBadge component that displays an icon, text, and an internal progress bar.
+ *
+ * All visual attributes resolve from Figma tokens via `getVariableByName` using the provided `modes`.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.taskName="Live price: [price] (00:43)"] - The text displayed.
+ * @param {string} [props.iconName="ic_live"] - Icon name from the registry.
+ * @param {number} [props.value=0] - The progress value between 0 and 100.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for design tokens.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {Object} [props.textStyle] - Optional text style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label.
+ */
+function ProgressBadge({
+    taskName = 'Live price: [price] (00:43)',
+    iconName = 'ic_live',
+    value = 0,
+    modes = {},
+    style,
+    textStyle: textStyleOverride,
+    accessibilityLabel,
+    ...rest
+}: ProgressBadgeProps) {
+    // Resolve layout tokens
+    const backgroundColor =
+        getVariableByName('progressBadge/background', modes) || '#ffffff'
+    const progressColor =
+        getVariableByName('progressBadge/progress/color', modes) || '#ebebed'
+    const gap = getVariableByName('progressBadge/gap', modes) ?? 12
+    const paddingHorizontal =
+        getVariableByName('progressBadge/padding/horizontal', modes) ?? 16
+    const paddingVertical =
+        getVariableByName('progressBadge/padding/vertical', modes) ?? 6
+    const borderRadius = getVariableByName('progressBadge/radius', modes) ?? 999
+    const descriptionGap =
+        getVariableByName('progressBadge/description/gap', modes) ?? 8
+
+    // Resolve typography tokens
+    const fontFamily =
+        getVariableByName('progressBadge/fontFamily', modes) || 'JioType_Var:Medium'
+    const fontWeightRaw = getVariableByName('progressBadge/fontWeight', modes) ?? 500
+    const fontWeight =
+        typeof fontWeightRaw === 'number'
+            ? fontWeightRaw.toString()
+            : fontWeightRaw
+    const fontSize = getVariableByName('progressBadge/fontSize', modes) ?? 14
+    const lineHeight = getVariableByName('progressBadge/lineHeight', modes) ?? 17
+    const textColor =
+        getVariableByName('progressBadge/foreground', modes) || '#000000'
+
+    // Resolve icon tokens
+    const iconColor =
+        getVariableByName('progressBadge/icon/color', modes) || '#f50030'
+    const iconSize = getVariableByName('progressBadge/icon/size', modes) ?? 18
+
+    const containerStyle: ViewStyle = {
+        backgroundColor,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap,
+        paddingHorizontal,
+        paddingVertical,
+        borderRadius,
+        overflow: 'hidden',
+        position: 'relative',
+        flexWrap: 'wrap',
+    }
+
+    const descriptionContainerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: descriptionGap,
+        flex: 1,
+        paddingVertical: 0,
+        minHeight: 1,
+        minWidth: 1,
+        position: 'relative',
+    }
+
+    const textStyle: TextStyle = {
+        fontFamily,
+        fontWeight,
+        fontSize,
+        lineHeight,
+        color: textColor,
+        textAlign: 'center',
+        overflow: 'hidden',
+        flexShrink: 0,
+    }
+
+    // Ensure value is between 0 and 100
+    const clampedValue = Math.max(0, Math.min(100, value))
+
+    const progressStyle: ViewStyle = {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: `${clampedValue}%`,
+        backgroundColor: progressColor,
+    }
+
+    const defaultAccessibilityLabel = accessibilityLabel || taskName
+
+    return (
+        <View
+            style={[containerStyle, style]}
+            accessibilityRole="text"
+            accessibilityLabel={defaultAccessibilityLabel}
+            {...rest}
+        >
+            {/* Background Progress Bar */}
+            <View style={progressStyle} pointerEvents="none" />
+
+            {/* Description Header */}
+            <View style={descriptionContainerStyle}>
+                {iconName ? (
+                    <Icon
+                        name={iconName}
+                        size={iconSize}
+                        color={iconColor}
+                        accessibilityElementsHidden={true}
+                        importantForAccessibility="no"
+                    />
+                ) : null}
+                <Text
+                    style={[textStyle, textStyleOverride]}
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
+                    accessibilityElementsHidden={true}
+                    importantForAccessibility="no"
+                >
+                    {taskName}
+                </Text>
+            </View>
+        </View>
+    )
+}
+
+export default ProgressBadge

package/src/components/ProgressBadge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ProgressBadge'
+export * from './ProgressBadge'

package/src/components/StatItem/StatItem.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { View, Text, type StyleProp, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export type StatItemProps = {
+  /** The small descriptive label above the value. */
+  label?: string
+  /** The large prominent value to display. */
+  value?: string
+  /** Design token modes for theming. */
+  modes?: Record<string, any>
+  /** Override container styles. */
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * StatItem displays a label/value pair with the value in a large, bold style.
+ * Useful for metrics, product stats, or KPI callouts.
+ *
+ * @component
+ * @param {StatItemProps} props
+ */
+function StatItem({
+  label = 'Purity verified by NABL',
+  value = '99.99%',
+  modes = {},
+  style,
+}: StatItemProps) {
+  const gap = getVariableByName('statItem/gap', modes) ?? 2
+
+  const labelForeground = getVariableByName('statItem/label/foreground', modes) ?? '#1a1c1f'
+  const labelFontFamily = getVariableByName('statItem/label/fontFamily', modes) ?? 'JioType Var'
+  const labelFontSize = getVariableByName('statItem/label/fontSize', modes) ?? 12
+  const labelFontWeight = getVariableByName('statItem/label/fontWeight', modes) ?? '500'
+  const labelLineHeight = getVariableByName('statItem/label/lineHeight', modes) ?? 16
+
+  const valueForeground = getVariableByName('statItem/value/foreground', modes) ?? '#0d0d0f'
+  const valueFontFamily = getVariableByName('statItem/value/fontFamily', modes) ?? 'JioType Var'
+  const valueFontSize = getVariableByName('statItem/value/fontSize', modes) ?? 26
+  const valueFontWeight = getVariableByName('statItem/value/fontWeight', modes) ?? '900'
+  const valueLineHeight = getVariableByName('statItem/value/lineHeight', modes) ?? 26
+
+  return (
+    <View style={[{ gap: gap as number }, style]}>
+      <Text
+        style={{
+          color: labelForeground as string,
+          fontFamily: labelFontFamily as string,
+          fontSize: labelFontSize as number,
+          fontWeight: String(labelFontWeight) as any,
+          lineHeight: labelLineHeight as number,
+        }}
+      >
+        {label}
+      </Text>
+      <Text
+        style={{
+          color: valueForeground as string,
+          fontFamily: valueFontFamily as string,
+          fontSize: valueFontSize as number,
+          fontWeight: String(valueFontWeight) as any,
+          lineHeight: valueLineHeight as number,
+        }}
+      >
+        {value}
+      </Text>
+    </View>
+  )
+}
+
+export default StatItem