jfs-components 0.0.42 → 0.0.44

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

package/src/components/StatusHero/StatusHero.tsx

@@ -0,0 +1,156 @@
+import React, { isValidElement, cloneElement, type ReactNode } from 'react'
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import IconCapsule from '../IconCapsule/IconCapsule'
+import MoneyValue from '../MoneyValue/MoneyValue'
+
+export type StatusHeroProps = {
+  /**
+   * Custom media slot content.
+   * Defaults to an IconCapsule above a MoneyValue.
+   * Modes are automatically injected if the slot is a valid React element.
+   */
+  renderMedia?: ReactNode
+  /** Title text displayed below the media slot */
+  title?: string
+  /** Whether to render the title */
+  showTitle?: boolean
+  /** Body/subtitle text displayed below the title */
+  subtitle?: string
+  /** Icon name used in the default media slot */
+  iconName?: string
+  /** Monetary value shown in the default MoneyValue inside the media slot */
+  value?: string
+  /** Currency symbol or ISO code for the default MoneyValue */
+  currency?: string
+  /** Mode configuration for design tokens */
+  modes?: Record<string, any>
+  style?: ViewStyle
+}
+
+/**
+ * StatusHero component that displays a hero section for payment/transaction status screens.
+ *
+ * Contains a media slot (defaults to IconCapsule + MoneyValue) and a content area
+ * with an optional title and a subtitle. All visual values are resolved from Figma
+ * design tokens via `getVariableByName`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StatusHero
+ *   iconName="ic_confirm"
+ *   value="50"
+ *   currency="INR"
+ *   title="You're set to make payments"
+ *   subtitle="₹50 will be auto-invested daily, stay consistent & stay golden."
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+export default function StatusHero({
+  renderMedia,
+  title = "You're set to make payments",
+  showTitle = true,
+  subtitle = '₹50 will be auto-invested daily,\nstay consistent & stay golden.',
+  iconName = 'ic_confirm',
+  value = '50',
+  currency = 'INR',
+  modes: propModes = {},
+  style,
+}: StatusHeroProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
+
+  // Container
+  const gap = Number(getVariableByName('statusHero/gap', modes)) || 12
+  const padding = Number(getVariableByName('statusHero/padding', modes)) || 8
+
+  // Media slot wrap (gap between icon and money value in default slot)
+  const slotWrapGap = Number(getVariableByName('statusHero/slotWrap/gap', modes)) || 46
+
+  // Content wrap
+  const contentWrapGap = Number(getVariableByName('statusHero/contentWrap/gap', modes)) || 12
+
+  // Title
+  const titleColor = getVariableByName('statusHero/title/foreground', modes) || '#0c0d10'
+  const titleFontSize = Number(getVariableByName('statusHero/title/fontSize', modes)) || 20
+  const titleFontFamily = getVariableByName('statusHero/title/fontFamily', modes) || 'System'
+  const titleLineHeight = Number(getVariableByName('statusHero/title/lineHeight', modes)) || 22
+  const titleFontWeight = getVariableByName('statusHero/title/fontWeight', modes) || '700'
+
+  // Body
+  const bodyColor = getVariableByName('statusHero/body/foreground', modes) || '#24262b'
+  const bodyFontSize = Number(getVariableByName('statusHero/body/fontSize', modes)) || 14
+  const bodyFontFamily = getVariableByName('statusHero/body/fontFamily', modes) || 'System'
+  const bodyLineHeight = Number(getVariableByName('statusHero/body/lineHeight', modes)) || 17
+  const bodyFontWeight = getVariableByName('statusHero/body/fontWeight', modes) || '500'
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap,
+    padding,
+  }
+
+  const defaultMediaWrapStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: slotWrapGap,
+  }
+
+  const contentWrapStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: contentWrapGap,
+  }
+
+  const titleStyle: TextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: String(titleFontWeight) as TextStyle['fontWeight'],
+    textAlign: 'center',
+  }
+
+  const bodyStyle: TextStyle = {
+    color: bodyColor,
+    fontSize: bodyFontSize,
+    fontFamily: bodyFontFamily,
+    lineHeight: bodyLineHeight,
+    fontWeight: String(bodyFontWeight) as TextStyle['fontWeight'],
+    textAlign: 'center',
+  }
+
+  // Inject modes into the provided slot if it's a valid React element
+  const mediaContent = isValidElement(renderMedia)
+    ? cloneElement(renderMedia as React.ReactElement<any>, { modes })
+    : renderMedia
+
+  const defaultMediaContent = (
+    <View style={defaultMediaWrapStyle}>
+      <IconCapsule
+        iconName={iconName}
+        modes={{ ...modes, 'Icon Capsule Size': 'L', Emphasis: 'High', AppearanceBrand: 'Primary' }}
+      />
+      <MoneyValue
+        value={value}
+        currency={currency}
+        modes={{ ...modes, Context3: 'Balance' }}
+      />
+    </View>
+  )
+
+  return (
+    <View style={[containerStyle, style]}>
+      {mediaContent ?? defaultMediaContent}
+      <View style={contentWrapStyle}>
+        {showTitle && title ? <Text style={titleStyle}>{title}</Text> : null}
+        {subtitle ? <Text style={bodyStyle}>{subtitle}</Text> : null}
+      </View>
+    </View>
+  )
+}

package/src/components/Tabs/TabItem.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import {
+  Pressable,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export interface TabItemProps {
+  /** Label text to display */
+  label?: string
+  /** Whether this tab item is currently active/selected */
+  active?: boolean
+  /** Callback when this tab item is pressed */
+  onPress?: () => void
+  /** Design token modes for theming */
+  modes?: Record<string, any>
+  /** Override container styles */
+  style?: StyleProp<ViewStyle>
+  /** Override label text styles */
+  labelStyle?: StyleProp<TextStyle>
+  /** Accessibility label for screen readers */
+  accessibilityLabel?: string
+}
+
+/**
+ * Individual tab item used inside the Tabs container.
+ *
+ * Supports idle and active states driven by design tokens.
+ * When active, a bottom indicator bar is shown beneath the label.
+ *
+ * @component
+ * @param {TabItemProps} props
+ */
+function TabItem({
+  label = 'Tab item',
+  active = false,
+  onPress,
+  modes = {},
+  style,
+  labelStyle,
+  accessibilityLabel,
+}: TabItemProps) {
+  const paddingVertical = (getVariableByName('tabItem/padding/vertical', modes) ?? 8) as number
+  const fontFamily = (getVariableByName('tabItem/label/fontFamily', modes) ?? 'JioType Var') as string
+  const fontSize = (getVariableByName('tabItem/label/size', modes) ?? 14) as number
+  const lineHeight = (getVariableByName('tabItem/label/lineHeight', modes) ?? 17) as number
+
+  const idleLabelColor = (getVariableByName('tabItem/idle/label/color', modes) ?? '#303338') as string
+  const activeLabelColor = (getVariableByName('tabItem/active/label/color', modes) ?? '#cea15a') as string
+
+  const labelColor = active ? activeLabelColor : idleLabelColor
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical,
+  }
+
+  const textStyle: TextStyle = {
+    color: labelColor,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight: '500',
+  }
+
+  const indicatorStyle: ViewStyle = {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 2,
+    backgroundColor: activeLabelColor,
+    borderRadius: 1,
+  }
+
+  return (
+    <Pressable
+      style={({ pressed }) => [containerStyle, pressed && { opacity: 0.7 }, style]}
+      onPress={onPress}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: active }}
+      accessibilityLabel={accessibilityLabel ?? label}
+    >
+      <Text style={[textStyle, labelStyle]}>{label}</Text>
+      {active && <View style={indicatorStyle} />}
+    </Pressable>
+  )
+}
+
+export default TabItem

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import {
+  ScrollView,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import TabItem from './TabItem'
+
+export interface TabsProps {
+  /**
+   * Tab item children. Each child should be a <TabItem> component.
+   * Modes are automatically forwarded to all TabItem children.
+   */
+  children: React.ReactNode
+  /** Design token modes for theming */
+  modes?: Record<string, any>
+  /**
+   * When true, the tabs row scrolls horizontally (useful for many items).
+   * @default false
+   */
+  scrollable?: boolean
+  /** Override container styles */
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Tabs container component that lays out TabItem children horizontally.
+ *
+ * The "Tab items" slot maps to React children — each child should be a
+ * `<TabItem>` element. The `modes` prop is automatically forwarded to
+ * every TabItem child so theming is consistent.
+ *
+ * @component
+ * @param {TabsProps} props
+ *
+ * @example
+ * ```tsx
+ * const [activeIndex, setActiveIndex] = useState(0);
+ *
+ * <Tabs modes={{ 'Color Mode': 'Light' }}>
+ *   <TabItem label="Tab 1" active={activeIndex === 0} onPress={() => setActiveIndex(0)} />
+ *   <TabItem label="Tab 2" active={activeIndex === 1} onPress={() => setActiveIndex(1)} />
+ *   <TabItem label="Tab 3" active={activeIndex === 2} onPress={() => setActiveIndex(2)} />
+ * </Tabs>
+ * ```
+ */
+function Tabs({
+  children,
+  modes = {},
+  scrollable = false,
+  style,
+}: TabsProps) {
+  const gap = (getVariableByName('tabs/gap', modes) ?? 16) as number
+  const paddingTop = (getVariableByName('tabs/padding/top', modes) ?? 0) as number
+  const paddingBottom = (getVariableByName('tabs/padding/bottom', modes) ?? 0) as number
+  const paddingLeft = (getVariableByName('tabs/padding/left', modes) ?? 0) as number
+  const paddingRight = (getVariableByName('tabs/padding/right', modes) ?? 0) as number
+
+  // Forward modes to all TabItem children
+  const enhancedChildren = React.Children.map(children, (child) => {
+    if (React.isValidElement(child) && child.type === TabItem) {
+      const childElement = child as React.ReactElement<any>;
+      return React.cloneElement(childElement, {
+        modes: { ...modes, ...(childElement.props.modes ?? {}) },
+      })
+    }
+    return child
+  })
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    gap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+  }
+
+  if (scrollable) {
+    return (
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        accessibilityRole="tablist"
+        contentContainerStyle={[containerStyle, style]}
+      >
+        {enhancedChildren}
+      </ScrollView>
+    )
+  }
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="tablist"
+    >
+      {enhancedChildren}
+    </View>
+  )
+}
+
+export { TabItem }
+export default Tabs

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useRef } from 'react'
+import { StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native'
+import Animated, { FadeIn, FadeOut, SlideInDown, SlideInUp } from 'react-native-reanimated'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { closeToast, type ToastPlacement } from './useToast'
+
+export interface ToastProps {
+  id: string
+  title: string
+  timeout?: number | undefined
+  onClose?: (() => void) | undefined
+  modes?: Record<string, any> | undefined
+  placement?: ToastPlacement | undefined
+  style?: StyleProp<ViewStyle> | undefined
+}
+
+const ANIMATION_DURATION = 250
+
+function Toast({
+  id,
+  title,
+  timeout = 4000,
+  onClose,
+  modes = {},
+  placement = 'bottom',
+  style,
+}: ToastProps) {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    if (timeout <= 0) return
+    timerRef.current = setTimeout(() => closeToast(id), timeout)
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [id, timeout])
+
+  const backgroundColor = getVariableByName('toast/background', modes) || '#303338'
+  const foreground = getVariableByName('toast/foreground', modes) || '#ffffff'
+  const fontSize = getVariableByName('toast/fontSize', modes) || 14
+  const fontFamily = getVariableByName('toast/fontFamily', modes) || undefined
+  const fontWeight = getVariableByName('toast/fontWeight', modes) || '500'
+  const lineHeight = getVariableByName('toast/lineHeight', modes) || 18
+  const radius = getVariableByName('toast/radius', modes) || 14
+  const paddingHorizontal = getVariableByName('toast/padding/horizontal', modes) || 16
+  const paddingVertical = getVariableByName('toast/padding/vertical', modes) || 14
+  const gap = getVariableByName('toast/gap', modes) || 8
+  const borderWidth = getVariableByName('toast/border/size', modes) || 1
+  const borderColor = getVariableByName('toast/border/color', modes) || 'rgba(255,255,255,0.1)'
+  const shadowBlurPrimary = getVariableByName('toast/shadow/primary/blur', modes) || 48
+  const shadowOffsetYPrimary = getVariableByName('toast/shadow/primary/offsetY', modes) || 16
+  const shadowColorPrimary = getVariableByName('toast/shadow/primary/color', modes) || 'rgba(13,13,15,0.16)'
+
+  const enterAnimation = placement === 'top'
+    ? SlideInUp.duration(ANIMATION_DURATION)
+    : SlideInDown.duration(ANIMATION_DURATION)
+
+  const containerStyle: ViewStyle = {
+    backgroundColor,
+    borderRadius: radius,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    borderWidth,
+    borderColor,
+    shadowColor: shadowColorPrimary,
+    shadowOffset: { width: 0, height: shadowOffsetYPrimary },
+    shadowOpacity: 1,
+    shadowRadius: shadowBlurPrimary / 2,
+    elevation: 8,
+  }
+
+  const textStyle = {
+    color: foreground,
+    fontSize,
+    fontFamily,
+    fontWeight: String(fontWeight) as any,
+    lineHeight,
+  }
+
+  return (
+    <Animated.View
+      entering={enterAnimation}
+      exiting={FadeOut.duration(ANIMATION_DURATION)}
+      style={[styles.toast, containerStyle, style]}
+      accessibilityRole="alert"
+      accessibilityLiveRegion="assertive"
+    >
+      <Text style={textStyle} numberOfLines={2}>
+        {title}
+      </Text>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  toast: {
+    alignSelf: 'center',
+    maxWidth: '90%',
+    minWidth: 200,
+    overflow: 'hidden',
+  },
+})
+
+export default Toast

package/src/components/Toast/ToastProvider.tsx

@@ -0,0 +1,75 @@
+import React, { useMemo } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useToast, type ToastPlacement } from './useToast'
+import Toast from './Toast'
+
+export interface ToastProviderProps {
+  children: React.ReactNode
+  maxVisibleToasts?: number
+  placement?: ToastPlacement
+  modes?: Record<string, any>
+}
+
+function ToastProvider({
+  children,
+  maxVisibleToasts = 3,
+  placement = 'bottom',
+  modes,
+}: ToastProviderProps) {
+  const { toasts } = useToast()
+  const insets = useSafeAreaInsets()
+
+  const visibleToasts = useMemo(
+    () => toasts.slice(-maxVisibleToasts),
+    [toasts, maxVisibleToasts],
+  )
+
+  const regionStyle = useMemo(
+    () => [
+      styles.region,
+      placement === 'top'
+        ? { top: insets.top + 8 }
+        : { bottom: insets.bottom + 8 },
+    ],
+    [placement, insets.top, insets.bottom],
+  )
+
+  return (
+    <View style={styles.container}>
+      {children}
+      {visibleToasts.length > 0 && (
+        <View style={regionStyle} pointerEvents="box-none">
+          {visibleToasts.map((entry) => (
+            <Toast
+              key={entry.id}
+              id={entry.id}
+              title={entry.title}
+              timeout={entry.timeout}
+              onClose={entry.onClose}
+              modes={entry.modes ?? modes}
+              placement={placement}
+            />
+          ))}
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  region: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    gap: 8,
+    zIndex: 9999,
+    pointerEvents: 'box-none',
+  },
+})
+
+export default ToastProvider