jfs-components 0.0.42 → 0.0.44

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

@@ -4,6 +4,7 @@ import React, { useMemo, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import Icon from '../../icons/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Button component that maps directly to the Figma design using design tokens.
@@ -30,6 +31,7 @@ function Button({
   renderContent,
   leading,
   trailing,
+  icon,
   modes = {},
   onPress,
   disabled = false,
@@ -55,6 +57,8 @@ 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 baseLabelTextStyle = {
     color: textColor,
     fontFamily,
@@ -180,7 +184,16 @@ function Button({
     children: [leading ? /*#__PURE__*/_jsx(View, {
       style: leadingAccessoryStyle,
       children: leading
-    }) : null, content, trailing ? /*#__PURE__*/_jsx(View, {
+    }) : null, content, icon ? /*#__PURE__*/_jsx(View, {
+      style: trailingAccessoryStyle,
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: icon,
+        size: iconSize,
+        color: iconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
+    }) : trailing ? /*#__PURE__*/_jsx(View, {
       style: trailingAccessoryStyle,
       children: trailing
     }) : null]

package/lib/module/components/Checkbox/Checkbox.js

@@ -0,0 +1,205 @@
+"use strict";
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Pressable, Platform } 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.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function useFocusVisible() {
+  const [isFocusVisible, setIsFocusVisible] = useState(false);
+  const hadKeyboardEventRef = useRef(false);
+  useEffect(() => {
+    if (Platform.OS !== 'web' || typeof document === 'undefined') return;
+    const onKeyDown = e => {
+      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
+    }
+  };
+}
+/**
+ * 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
+}) {
+  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 = () => {
+    const base = {
+      width: size,
+      height: size,
+      borderRadius: radius,
+      borderWidth: strokeWidth,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden'
+    };
+    if (disabled && isChecked) {
+      return {
+        ...base,
+        backgroundColor: disabledActiveBg,
+        borderColor: disabledActiveBorder
+      };
+    }
+    if (disabled) {
+      return {
+        ...base,
+        borderColor: disabledStroke
+      };
+    }
+    if (isChecked && isFocusVisible) {
+      return {
+        ...base,
+        backgroundColor: selectedFill,
+        borderColor: selectedStroke,
+        ...boxShadow(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`)
+      };
+    }
+    if (isChecked && isHovered) {
+      return {
+        ...base,
+        backgroundColor: selectedFill,
+        borderColor: selectedStroke,
+        ...boxShadow(`0px 0px 0px ${hoverShadowSize}px ${selectedHoverShadow}`)
+      };
+    }
+    if (isChecked) {
+      return {
+        ...base,
+        backgroundColor: selectedFill,
+        borderColor: selectedStroke
+      };
+    }
+    if (isFocusVisible) {
+      return {
+        ...base,
+        backgroundColor: focusFill,
+        borderColor: focusStroke,
+        ...boxShadow(`0px 0px 0px ${focusSpread}px ${focusShadowColor}`)
+      };
+    }
+    if (isHovered) {
+      return {
+        ...base,
+        backgroundColor: hoverFill,
+        borderColor: hoverStroke,
+        ...boxShadow(`0px 0px 0px ${hoverRing}px ${hoverShadow}`)
+      };
+    }
+    return {
+      ...base,
+      borderColor: idleStroke
+    };
+  };
+  const markColor = disabled && isChecked ? disabledActiveMark : selectedMarkColor;
+  return /*#__PURE__*/_jsx(Pressable, {
+    style: [resolveStyle(), style],
+    onPress: handlePress,
+    disabled: disabled,
+    onHoverIn: () => setIsHovered(true),
+    onHoverOut: () => setIsHovered(false),
+    ...focusHandlers,
+    accessibilityRole: "checkbox",
+    accessibilityState: {
+      checked: isChecked,
+      disabled
+    },
+    accessibilityLabel: accessibilityLabel,
+    children: isChecked && /*#__PURE__*/_jsx(Svg, {
+      width: 12,
+      height: 9,
+      viewBox: "0 0 12 9",
+      fill: "none",
+      children: /*#__PURE__*/_jsx(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
+      })
+    })
+  });
+}
+function boxShadow(value) {
+  if (Platform.OS === 'web') {
+    return {
+      boxShadow: value
+    };
+  }
+  return {};
+}
+export default Checkbox;

package/lib/module/components/MoneyValue/MoneyValue.js

@@ -1,7 +1,7 @@
 "use strict";
 
-import React from 'react';
-import { View, Text } from 'react-native';
+import React, { useMemo, useEffect, useRef } from 'react';
+import { View, Text, Pressable, Animated } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 
 // Map of common ISO 4217 currency codes to display symbols
@@ -42,34 +42,20 @@ const CURRENCY_SYMBOLS = {
 /**
  * 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,
@@ -77,13 +63,14 @@ function MoneyValue({
   negativeSignStyle,
   accessibilityLabel,
   accessibilityHint,
+  onPress,
   ...rest
 }) {
   // Auto-detect negative from value and compute display value
   const {
     isNegative,
     displayValue
-  } = React.useMemo(() => {
+  } = useMemo(() => {
     const stringValue = String(value);
     const trimmed = stringValue.trim();
     const valueIsNegative = trimmed.startsWith('-') || typeof value === 'number' && value < 0;
@@ -94,62 +81,107 @@ function MoneyValue({
     // 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 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] : currency;
   }, [currency]);
-  const baseTextStyle = {
+  const currencyTextStyle = {
+    color: textColor,
+    fontSize: currencyFontSize,
+    lineHeight: currencyLineHeight,
+    fontWeight: fontWeight,
+    fontFamily: fontFamily
+  };
+  const valueTextStyle = {
     color: textColor,
-    fontSize,
-    lineHeight,
-    fontWeight,
-    fontFamily
+    fontSize: valueFontSize,
+    lineHeight: valueLineHeight,
+    fontWeight: fontWeight,
+    fontFamily: fontFamily
   };
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',
-    gap
+    gap: gap
   };
 
-  // Generate default accessibility label from value and currency
-  const defaultAccessibilityLabel = accessibilityLabel || `${isNegative ? 'negative ' : ''}${resolvedCurrency} ${displayValue}`;
-  return /*#__PURE__*/_jsxs(View, {
+  // 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 /*#__PURE__*/_jsxs(Pressable, {
     style: [containerStyle, style],
     accessibilityRole: "text",
     accessibilityLabel: undefined,
     accessibilityHint: accessibilityHint,
+    onPress: onPress,
+    disabled: !onPress,
     ...rest,
     children: [isNegative && /*#__PURE__*/_jsx(Text, {
-      style: [baseTextStyle, negativeSignStyle],
+      style: [currencyTextStyle, negativeSignStyle],
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: "-"
     }), /*#__PURE__*/_jsx(Text, {
-      style: [baseTextStyle, currencyStyle],
+      style: [currencyTextStyle, currencyStyle],
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: resolvedCurrency
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [baseTextStyle, valueStyle],
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no",
-      children: displayValue
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [valueTextStyle, valueStyle],
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: displayValue
+      }), focused && /*#__PURE__*/_jsx(Animated.View, {
+        style: {
+          opacity: cursorOpacity,
+          width: 2,
+          height: valueFontSize * 1.1,
+          backgroundColor: textColor,
+          marginLeft: 2
+        }
+      })]
     })]
   });
 }

package/lib/module/components/NoteInput/NoteInput.js

@@ -0,0 +1,115 @@
+"use strict";
+
+import React, { useState, useRef } from 'react';
+import { View, TextInput as RNTextInput, Text, Pressable } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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
+}) {
+  const [internalFocused, setInternalFocused] = useState(false);
+  const inputRef = useRef(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() : fontWeightRaw;
+  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 = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: paddingHorizontal,
+    paddingVertical: paddingVertical,
+    borderRadius: radius,
+    backgroundColor: background,
+    borderWidth: borderSize,
+    borderColor: borderColor,
+    gap: gap,
+    // Add specific width when editing if requested by Figma design logic, though flex fits content generically
+    alignSelf: 'flex-start'
+  };
+  const baseTextStyle = {
+    color: foreground,
+    fontSize: fontSize,
+    fontFamily: fontFamily,
+    lineHeight: lineHeight,
+    fontWeight: fontWeight,
+    padding: 0,
+    margin: 0,
+    minHeight: lineHeight
+  };
+  const handleFocus = e => {
+    setInternalFocused(true);
+    if (onFocus) onFocus(e);
+  };
+  const handleBlur = e => {
+    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 /*#__PURE__*/_jsx(Pressable, {
+    style: [containerStyle, style],
+    onPress: handlePress,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        position: 'relative',
+        justifyContent: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [baseTextStyle, textStyle, {
+          opacity: 0
+        }],
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: internalFocused ? value || ' ' : value || placeholder
+      }), /*#__PURE__*/_jsx(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'
+        }, textStyle],
+        ...rest
+      })]
+    })
+  });
+}

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

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

package/lib/module/components/Numpad/Numpad.js

@@ -0,0 +1,103 @@
+"use strict";
+
+import React, { useMemo, useCallback } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { IconDeletebackspace } from '../../icons/components/IconDeletebackspace';
+import { jsx as _jsx } from "react/jsx-runtime";
+function shuffleArray(arr) {
+  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
+}) {
+  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 = useMemo(() => [digits.slice(0, 3), digits.slice(3, 6), digits.slice(6, 9), [showDecimal ? '.' : null, digits[9], 'backspace']], [digits, showDecimal]);
+  const handlePress = useCallback(key => {
+    onKeyPress?.(key);
+  }, [onKeyPress]);
+  const textStyle = {
+    color: foreground,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    textAlign: 'center'
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      gap: rowGap
+    }, style],
+    accessibilityRole: "none",
+    children: rows.map((row, rowIndex) => /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        gap: columnGap
+      },
+      children: row.map((key, colIndex) => {
+        if (key === null) {
+          return /*#__PURE__*/_jsx(View, {
+            style: {
+              flex: 1
+            }
+          }, `empty-${colIndex}`);
+        }
+        const isBackspace = key === 'backspace';
+        return /*#__PURE__*/_jsx(Pressable, {
+          style: ({
+            pressed
+          }) => [{
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            minHeight: 46
+          }, pressed && {
+            opacity: 0.4
+          }, keyStyle],
+          onPress: () => handlePress(key),
+          accessibilityRole: "button",
+          accessibilityLabel: isBackspace ? 'Backspace' : key,
+          children: isBackspace ? /*#__PURE__*/_jsx(IconDeletebackspace, {
+            width: fontSize,
+            height: fontSize,
+            fill: foreground
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: [textStyle, keyTextStyle],
+            children: key
+          })
+        }, `${key}-${colIndex}`);
+      })
+    }, rowIndex))
+  });
+}
+export default Numpad;