jfs-components 0.0.43 → 0.0.44

package/src/components/MoneyValue/MoneyValue.tsx

@@ -1,5 +1,13 @@
-import React from 'react'
-import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import React, { useMemo, useEffect, useRef } from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  Animated,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 
 // Map of common ISO 4217 currency codes to display symbols
@@ -37,50 +45,44 @@ const CURRENCY_SYMBOLS = {
   NPR: 'Rs',
 }
 
-type MoneyValueProps = {
-  value?: string | number;
-  currency?: string;
-  negative?: boolean;
-  modes?: Record<string, any>;
-  style?: StyleProp<ViewStyle>;
-  valueStyle?: StyleProp<TextStyle>;
-  currencyStyle?: StyleProp<TextStyle>;
-  negativeSignStyle?: StyleProp<TextStyle>;
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-} & React.ComponentProps<typeof View>;
+export type MoneyValueProps = {
+  /** Monetary value to display. */
+  value?: string | number
+  /** Currency symbol or ISO code (e.g. "INR"). */
+  currency?: string
+  /** Explicitly override negative display. If undefined, auto-detects from value. */
+  negative?: boolean
+  /** When true, masks the value for privacy (e.g. •••). */
+  hidden?: boolean
+  /** When true, a blinking vertical cursor is shown at the end of the value text. */
+  focused?: boolean
+  /** Modes configuration mapped to Figma tokens. */
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+  valueStyle?: StyleProp<TextStyle>
+  currencyStyle?: StyleProp<TextStyle>
+  negativeSignStyle?: StyleProp<TextStyle>
+  accessibilityLabel?: string
+  accessibilityHint?: string
+} & React.ComponentProps<typeof Pressable>
 
 /**
  * MoneyValue component that mirrors the Figma MoneyValue design.
  *
- * The styling is fully resolved from Figma design tokens using `getVariableByName`
- * and an optional `modes` configuration, consistent with other components in this library.
+ * The styling is fully resolved from Figma design tokens using `getVariableByName`.
+ * Supports separate typography scaling for currency and value.
  *
- * Currency can be provided either as a symbol (e.g. "₹") or as an ISO code
- * (e.g. "INR", "USD"). When an ISO code is provided, it will be mapped to the
- * appropriate symbol, with special care to support INR and other major currencies.
- *
- * Negative values are auto-detected from the value prop (e.g., -500 or "-500").
- * The `negative` prop can be used to explicitly override this behavior.
- *
- * @component
- * @param {Object} props
- * @param {string|number} [props.value="500"] - Monetary value to display. Negative values are auto-detected.
- * @param {string} [props.currency="₹"] - Currency symbol or ISO code (e.g. "INR").
- * @param {boolean} [props.negative] - Explicitly override negative display. If undefined, auto-detects from value.
- * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
- *                                   Example: {"MoneyValue / Theme": "Default"}
- * @param {Object} [props.style] - Optional container style overrides.
- * @param {Object} [props.valueStyle] - Optional value text style overrides.
- * @param {Object} [props.currencyStyle] - Optional currency text style overrides.
- * @param {Object} [props.negativeSignStyle] - Optional negative sign text style overrides.
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, generates from value and currency
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * To make this component editable without coupling it to a Numpad component,
+ * use the `onPress` prop and manage the data state in the parent layer. When
+ * the `focused` prop is provided to this component, it will display a natural
+ * blinking text cursor.
  */
 function MoneyValue({
   value = '500',
   currency = '₹',
   negative,
+  focused = false,
+  hidden = false,
   modes = {},
   style,
   valueStyle,
@@ -88,101 +90,154 @@ function MoneyValue({
   negativeSignStyle,
   accessibilityLabel,
   accessibilityHint,
+  onPress,
   ...rest
 }: MoneyValueProps) {
   // Auto-detect negative from value and compute display value
-  const { isNegative, displayValue } = React.useMemo(() => {
+  const { isNegative, displayValue } = useMemo(() => {
     const stringValue = String(value)
     const trimmed = stringValue.trim()
-    const valueIsNegative = trimmed.startsWith('-') || (typeof value === 'number' && value < 0)
-    
+    const valueIsNegative =
+      trimmed.startsWith('-') || (typeof value === 'number' && value < 0)
+
     // Strip leading minus sign for display (we show it separately)
     const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed
-    
+
     // Use explicit negative prop if provided, otherwise use auto-detected
     const showNegative = negative !== undefined ? negative : valueIsNegative
-    
+
     return {
-      isNegative: showNegative,
-      displayValue: absoluteValue,
+      isNegative: hidden ? false : showNegative,
+      displayValue: hidden ? '•••' : absoluteValue,
     }
-  }, [value, negative])
+  }, [value, negative, hidden])
 
   // Resolve typography and layout tokens from Figma
-  const textColor =
-    getVariableByName('moneyValue/text/color', modes) || '#0f0d0a'
-  const fontSize =
-    getVariableByName('moneyValue/supportText/fontSize', modes) || 14
-  const lineHeight =
-    getVariableByName('moneyValue/supportText/lineHeight', modes) || 18
-  const fontWeightValue =
-    getVariableByName('moneyValue/supportText/fontWeight', modes) || 500
+  const textColor = getVariableByName('moneyValue/text/color', modes) || '#0f0d0a'
+
+  const currencyFontSize = getVariableByName('moneyValue/currency/fontSize', modes) || 14
+  const currencyLineHeight = getVariableByName('moneyValue/currency/lineHeight', modes) || 18
+
+  const valueFontSize = getVariableByName('moneyValue/value/fontSize', modes) || 14
+  const valueLineHeight = getVariableByName('moneyValue/value/lineHeight', modes) || 18
+
+  const fontWeightValue = getVariableByName('moneyValue/fontWeight', modes) || 500
   const fontWeight =
     typeof fontWeightValue === 'number'
       ? fontWeightValue.toString()
       : fontWeightValue
-  const fontFamily =
-    getVariableByName('moneyValue/supportText/fontFamily', modes) ||
-    'System'
+  const fontFamily = getVariableByName('moneyValue/fontFamily', modes) || 'System'
   const gap = getVariableByName('moneyValue/gap', modes) || 4
 
   // Resolve currency to a symbol, supporting both symbols and ISO codes
-  const resolvedCurrency = React.useMemo(() => {
+  const resolvedCurrency = useMemo(() => {
     if (!currency) return ''
     const upper = currency.toUpperCase ? currency.toUpperCase() : currency
-    return (upper in CURRENCY_SYMBOLS ? CURRENCY_SYMBOLS[upper as keyof typeof CURRENCY_SYMBOLS] : currency)
+    return upper in CURRENCY_SYMBOLS
+      ? CURRENCY_SYMBOLS[upper as keyof typeof CURRENCY_SYMBOLS]
+      : currency
   }, [currency])
 
-  const baseTextStyle = {
+  const currencyTextStyle: TextStyle = {
+    color: textColor,
+    fontSize: currencyFontSize as number,
+    lineHeight: currencyLineHeight as number,
+    fontWeight: fontWeight as TextStyle['fontWeight'],
+    fontFamily: fontFamily as string,
+  }
+
+  const valueTextStyle: TextStyle = {
     color: textColor,
-    fontSize,
-    lineHeight,
-    fontWeight,
-    fontFamily,
+    fontSize: valueFontSize as number,
+    lineHeight: valueLineHeight as number,
+    fontWeight: fontWeight as TextStyle['fontWeight'],
+    fontFamily: fontFamily as string,
   }
 
   const containerStyle: ViewStyle = {
     flexDirection: 'row',
     alignItems: 'center',
-    gap,
+    gap: gap as number,
   }
 
-  // Generate default accessibility label from value and currency
-  const defaultAccessibilityLabel = accessibilityLabel || 
-    `${isNegative ? 'negative ' : ''}${resolvedCurrency} ${displayValue}`
+  // Blinking cursor animation
+  const cursorOpacity = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    if (focused) {
+      const animation = Animated.loop(
+        Animated.sequence([
+          Animated.timing(cursorOpacity, {
+            toValue: 1,
+            duration: 400,
+            useNativeDriver: true,
+          }),
+          Animated.timing(cursorOpacity, {
+            toValue: 0,
+            duration: 400,
+            useNativeDriver: true,
+          }),
+        ])
+      )
+      animation.start()
+      return () => {
+        animation.stop()
+        cursorOpacity.setValue(0)
+      }
+    } else {
+      cursorOpacity.setValue(0)
+    }
+  }, [focused, cursorOpacity])
 
   return (
-    <View 
+    <Pressable
       style={[containerStyle, style]}
       accessibilityRole="text"
       accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
+      onPress={onPress}
+      disabled={!onPress}
       {...rest}
     >
       {isNegative && (
-        <Text 
-          style={[baseTextStyle, negativeSignStyle]}
+        <Text
+          style={[currencyTextStyle, negativeSignStyle]}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         >
           -
         </Text>
       )}
-      <Text 
-        style={[baseTextStyle, currencyStyle]}
+      <Text
+        style={[currencyTextStyle, currencyStyle]}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       >
         {resolvedCurrency}
       </Text>
-      <Text 
-        style={[baseTextStyle, valueStyle]}
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no"
-      >
-        {displayValue}
-      </Text>
-    </View>
+
+      {/* Group value and cursor in their own view to bypass the parent's generic gap constraint */}
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <Text
+          style={[valueTextStyle, valueStyle]}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        >
+          {displayValue}
+        </Text>
+        {focused && (
+          <Animated.View
+            style={{
+              opacity: cursorOpacity,
+              width: 2,
+              height: (valueFontSize as number) * 1.1,
+              backgroundColor: textColor,
+              marginLeft: 2,
+            }}
+          />
+        )}
+      </View>
+    </Pressable>
   )
 }
 

package/src/components/NoteInput/NoteInput.tsx

@@ -0,0 +1,146 @@
+import React, { useState, useRef, useEffect } from 'react'
+import {
+    View,
+    TextInput as RNTextInput,
+    Text,
+    Animated,
+    Pressable,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+    type TextInputProps,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export type NoteInputProps = {
+    /** The value of the text input */
+    value?: string
+    /** The placeholder when empty ("Add note" by default) */
+    placeholder?: string
+    /** Callback when text changes */
+    onChangeText?: (text: string) => void
+    /** Design token modes (e.g., {'InputState': 'Idle', 'Color Mode': 'Light'}) */
+    modes?: Record<string, any>
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>
+    /** Custom text input style */
+    textStyle?: StyleProp<TextStyle>
+    /** State of the component */
+    state?: 'Editing' | 'Idle'
+} & Omit<TextInputProps, 'style' | 'value' | 'onChangeText' | 'placeholder'>
+
+/**
+ * NoteInput component representing an interactive "Add note" badge style field.
+ * Allows the user to click, clears the placeholder text, and shows a blinking cursor when focused.
+ */
+export default function NoteInput({
+    value = '',
+    placeholder = 'Add note',
+    onChangeText,
+    modes = {},
+    style,
+    textStyle,
+    state: explicitState,
+    onFocus,
+    onBlur,
+    ...rest
+}: NoteInputProps) {
+    const [internalFocused, setInternalFocused] = useState(false)
+    const inputRef = useRef<RNTextInput>(null)
+
+    // Resolve tokens from Figma Design
+    const foreground = getVariableByName('noteInput/foreground', modes) || '#0d0d0f'
+    const fontSize = getVariableByName('noteInput/fontSize', modes) || 14
+    const fontFamily = getVariableByName('noteInput/fontFamily', modes) || 'JioType Var'
+    const lineHeight = getVariableByName('noteInput/lineHeight', modes) || 16
+    const fontWeightRaw = getVariableByName('noteInput/fontWeight', modes) || 700
+    const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() as TextStyle['fontWeight'] : fontWeightRaw as TextStyle['fontWeight']
+
+    const gap = getVariableByName('noteInput/gap', modes) || 0 // 4 in some files, 0 in context
+    const paddingHorizontal = getVariableByName('noteInput/padding/horizontal', modes) || 17
+    const paddingVertical = getVariableByName('noteInput/padding/vertical', modes) || 9
+    const radius = getVariableByName('noteInput/radius', modes) || 999
+    const borderSize = getVariableByName('noteInput/border/size', modes) || 1
+    const background = getVariableByName('noteInput/background', modes) || '#ebebed'
+    const borderColor = getVariableByName('noteInput/border/color', modes) || 'rgba(255,255,255,0)'
+
+    const containerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: paddingHorizontal as number,
+        paddingVertical: paddingVertical as number,
+        borderRadius: radius as number,
+        backgroundColor: background,
+        borderWidth: borderSize as number,
+        borderColor: borderColor,
+        gap: gap as number,
+        // Add specific width when editing if requested by Figma design logic, though flex fits content generically
+        alignSelf: 'flex-start',
+    }
+
+    const baseTextStyle: TextStyle = {
+        color: foreground,
+        fontSize: fontSize as number,
+        fontFamily: fontFamily as string,
+        lineHeight: lineHeight as number,
+        fontWeight: fontWeight,
+        padding: 0,
+        margin: 0,
+        minHeight: lineHeight as number,
+    }
+
+    const handleFocus = (e: any) => {
+        setInternalFocused(true)
+        if (onFocus) onFocus(e)
+    }
+
+    const handleBlur = (e: any) => {
+        setInternalFocused(false)
+        if (onBlur) onBlur(e)
+    }
+
+    const handlePress = () => {
+        inputRef.current?.focus()
+    }
+
+    // Blinking cursor setup for custom UI representation if we were drawing it natively.
+    // We use RNTextInput's native cursor, but we can style it or ensure it's visible.
+
+    return (
+        <Pressable style={[containerStyle, style]} onPress={handlePress}>
+            <View style={{ position: 'relative', justifyContent: 'center' }}>
+                <Text
+                    style={[baseTextStyle, textStyle, { opacity: 0 }]}
+                    accessibilityElementsHidden
+                    importantForAccessibility="no"
+                >
+                    {internalFocused ? (value || ' ') : (value || placeholder)}
+                </Text>
+                <RNTextInput
+                    ref={inputRef}
+                    value={value}
+                    onChangeText={onChangeText}
+                    placeholder={internalFocused ? '' : placeholder}
+                    placeholderTextColor={foreground}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    selectionColor={foreground}
+                    style={[
+                        baseTextStyle,
+                        {
+                            position: 'absolute',
+                            left: 0,
+                            right: 0,
+                            top: 0,
+                            bottom: 0,
+                            outlineStyle: 'none' as any,
+                        },
+                        textStyle,
+                    ]}
+                    {...rest}
+                />
+            </View>
+        </Pressable>
+    )
+}

package/src/components/NoteInput/index.ts

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

package/src/components/Numpad/Numpad.tsx

@@ -0,0 +1,162 @@
+import React, { useMemo, useCallback } from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { IconDeletebackspace } from '../../icons/components/IconDeletebackspace'
+
+export type NumpadKeyValue =
+  | '0'
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '.'
+  | 'backspace'
+
+export interface NumpadProps {
+  /** Design token modes for theming (e.g., {"Color Mode": "Light"}) */
+  modes?: Record<string, any>
+  /** Callback fired when any key is pressed */
+  onKeyPress?: (key: NumpadKeyValue) => void
+  /** Whether to show the decimal point key (default: true) */
+  showDecimal?: boolean
+  /**
+   * When true, digit positions (0-9) are randomised on each mount for
+   * anti-keylogging / shoulder-surfing protection. The decimal and
+   * backspace keys keep their fixed positions.
+   */
+  shuffle?: boolean
+  /** Override container styles */
+  style?: StyleProp<ViewStyle>
+  /** Override individual key styles */
+  keyStyle?: StyleProp<ViewStyle>
+  /** Override text styles on digit / decimal keys */
+  keyTextStyle?: StyleProp<TextStyle>
+}
+
+function shuffleArray<T>(arr: T[]): T[] {
+  const shuffled = [...arr]
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[shuffled[i]!, shuffled[j]!] = [shuffled[j]!, shuffled[i]!]
+  }
+  return shuffled
+}
+
+/**
+ * Secure numpad component for the JFS finance system.
+ *
+ * Renders a 3×4 grid of digit keys (0-9), an optional decimal key, and a
+ * backspace key. Digit positions are shuffled by default to guard against
+ * keylogging and shoulder-surfing attacks on mobile devices.
+ *
+ * @component
+ * @param {NumpadProps} props
+ */
+function Numpad({
+  modes = {},
+  onKeyPress,
+  showDecimal = true,
+  shuffle = true,
+  style,
+  keyStyle,
+  keyTextStyle,
+}: NumpadProps) {
+  const foreground = getVariableByName('numpad/foreground', modes) ?? '#141414'
+  const lineHeight = getVariableByName('numpad/lineHeight', modes) ?? 32
+  const fontFamily = getVariableByName('numpad/fontFamily', modes) ?? 'JioType Var'
+  const fontSize = getVariableByName('numpad/fontSize', modes) ?? 32
+  const rowGap = getVariableByName('numpad/gridRowGap/vertical', modes) ?? 12
+  const columnGap = getVariableByName('numpad/gridColumnGap/horizontal', modes) ?? 12
+
+  const digits = useMemo(() => {
+    const base = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
+    return shuffle ? shuffleArray(base) : base
+  }, [shuffle])
+
+  const rows: (string | null)[][] = useMemo(
+    () => [
+      digits.slice(0, 3),
+      digits.slice(3, 6),
+      digits.slice(6, 9),
+      [showDecimal ? '.' : null, digits[9]!, 'backspace'],
+    ],
+    [digits, showDecimal],
+  )
+
+  const handlePress = useCallback(
+    (key: NumpadKeyValue) => {
+      onKeyPress?.(key)
+    },
+    [onKeyPress],
+  )
+
+  const textStyle: TextStyle = {
+    color: foreground as string,
+    fontFamily: fontFamily as string,
+    fontSize: fontSize as number,
+    lineHeight: lineHeight as number,
+    textAlign: 'center',
+  }
+
+  return (
+    <View
+      style={[{ gap: rowGap as number }, style]}
+      accessibilityRole="none"
+    >
+      {rows.map((row, rowIndex) => (
+        <View key={rowIndex} style={{ flexDirection: 'row', gap: columnGap as number }}>
+          {row.map((key, colIndex) => {
+            if (key === null) {
+              return <View key={`empty-${colIndex}`} style={{ flex: 1 }} />
+            }
+
+            const isBackspace = key === 'backspace'
+
+            return (
+              <Pressable
+                key={`${key}-${colIndex}`}
+                style={({ pressed }) => [
+                  {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    minHeight: 46,
+                  },
+                  pressed && { opacity: 0.4 },
+                  keyStyle,
+                ]}
+                onPress={() => handlePress(key as NumpadKeyValue)}
+                accessibilityRole="button"
+                accessibilityLabel={isBackspace ? 'Backspace' : key}
+              >
+                {isBackspace ? (
+                  <IconDeletebackspace
+                    width={fontSize as number}
+                    height={fontSize as number}
+                    fill={foreground as string}
+                  />
+                ) : (
+                  <Text style={[textStyle, keyTextStyle]}>{key}</Text>
+                )}
+              </Pressable>
+            )
+          })}
+        </View>
+      ))}
+    </View>
+  )
+}
+
+export default Numpad