jfs-components 0.0.62 → 0.0.63

package/src/components/NavArrow/NavArrow.tsx

@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { View, type ViewStyle } from 'react-native'
 import Svg, { Polyline } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 type NavArrowDirection = 'Back' | 'Forward' | 'Down'
 
@@ -16,27 +17,18 @@ type NavArrowProps = {
   accessibilityLabel?: string
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel'>
 
-/**
- * NavArrow component that displays a chevron arrow for navigation.
- *
- * Renders a stroked SVG chevron whose dimensions and thickness are
- * fully driven by design tokens:
- * - navArrow/icon/color - chevron stroke color
- * - navArrow/icon/width - chevron arm width (horizontal spread)
- * - navArrow/icon/height - chevron arm height (vertical spread)
- * - navArrow/icon/strokeWeight - stroke thickness
- * - navArrow/width - container width
- * - navArrow/height - container height
- * - navArrow/radius - border radius
- * - navArrow/background - background color
- */
-export default function NavArrow({
-  direction = 'Back',
-  modes = {},
-  style,
-  accessibilityLabel,
-  ...rest
-}: NavArrowProps) {
+interface NavArrowTokens {
+  iconColor: string
+  iconWidth: number
+  iconHeight: number
+  strokeWeight: number
+  widthToken: number
+  heightToken: number
+  borderRadius: number
+  backgroundColor: string
+}
+
+function resolveNavArrowTokens(modes: Record<string, any>): NavArrowTokens {
   const iconColor =
     (getVariableByName('navArrow/icon/color', modes) as string) || '#24262b'
 
@@ -52,19 +44,79 @@ export default function NavArrow({
   const strokeWeight =
     Number(getVariableByName('navArrow/icon/strokeWeight', modes)) || 2
 
-  const isDown = direction === 'Down'
-  const containerWidth = isDown ? heightToken : widthToken
-  const containerHeight = isDown ? widthToken : heightToken
-
-  const containerStyle: ViewStyle = {
-    width: containerWidth,
-    height: containerHeight,
+  return {
+    iconColor,
+    iconWidth,
+    iconHeight,
+    strokeWeight,
+    widthToken,
+    heightToken,
     borderRadius,
     backgroundColor,
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...(style || {}),
   }
+}
+
+/**
+ * NavArrow component that displays a chevron arrow for navigation.
+ *
+ * Renders a stroked SVG chevron whose dimensions and thickness are
+ * fully driven by design tokens.
+ *
+ * Performance notes:
+ *  - Token reads collapsed into a single `useMemo([modes])` so a parent
+ *    re-render (e.g. from a Section header press) doesn't re-do ~9 token
+ *    lookups per chevron.
+ *  - Container + SVG layout values are derived in a second `useMemo` keyed
+ *    on (tokens, direction, style).
+ *  - Wrapped in `React.memo`.
+ */
+function NavArrow({
+  direction = 'Back',
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  ...rest
+}: NavArrowProps) {
+  const tokens = useMemo(() => resolveNavArrowTokens(modes), [modes])
+
+  const computed = useMemo(() => {
+    const isDown = direction === 'Down'
+    const containerWidth = isDown ? tokens.heightToken : tokens.widthToken
+    const containerHeight = isDown ? tokens.widthToken : tokens.heightToken
+
+    const containerStyle: ViewStyle = {
+      width: containerWidth,
+      height: containerHeight,
+      borderRadius: tokens.borderRadius,
+      backgroundColor: tokens.backgroundColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...(style || {}),
+    }
+
+    const chevronW = isDown ? tokens.iconHeight : tokens.iconWidth
+    const chevronH = isDown ? tokens.iconWidth : tokens.iconHeight
+
+    const pad = tokens.strokeWeight / 2
+    const svgWidth = chevronW + pad * 2
+    const svgHeight = chevronH + pad * 2
+
+    let points: string
+    switch (direction) {
+      case 'Forward':
+        points = `${pad},${pad} ${chevronW + pad},${chevronH / 2 + pad} ${pad},${chevronH + pad}`
+        break
+      case 'Down':
+        points = `${pad},${pad} ${chevronW / 2 + pad},${chevronH + pad} ${chevronW + pad},${pad}`
+        break
+      case 'Back':
+      default:
+        points = `${chevronW + pad},${pad} ${pad},${chevronH / 2 + pad} ${chevronW + pad},${chevronH + pad}`
+        break
+    }
+
+    return { containerStyle, svgWidth, svgHeight, points }
+  }, [tokens, direction, style])
 
   const defaultAccessibilityLabel =
     accessibilityLabel ||
@@ -74,39 +126,18 @@ export default function NavArrow({
         ? 'Go forward'
         : 'Go down')
 
-  const chevronW = isDown ? iconHeight : iconWidth
-  const chevronH = isDown ? iconWidth : iconHeight
-
-  const pad = strokeWeight / 2
-  const svgWidth = chevronW + pad * 2
-  const svgHeight = chevronH + pad * 2
-
-  let points: string
-  switch (direction) {
-    case 'Forward':
-      points = `${pad},${pad} ${chevronW + pad},${chevronH / 2 + pad} ${pad},${chevronH + pad}`
-      break
-    case 'Down':
-      points = `${pad},${pad} ${chevronW / 2 + pad},${chevronH + pad} ${chevronW + pad},${pad}`
-      break
-    case 'Back':
-    default:
-      points = `${chevronW + pad},${pad} ${pad},${chevronH / 2 + pad} ${chevronW + pad},${chevronH + pad}`
-      break
-  }
-
   return (
     <View
-      style={containerStyle}
+      style={computed.containerStyle}
       accessibilityRole="image"
       accessibilityLabel={defaultAccessibilityLabel}
       {...rest}
     >
-      <Svg width={svgWidth} height={svgHeight} viewBox={`0 0 ${svgWidth} ${svgHeight}`}>
+      <Svg width={computed.svgWidth} height={computed.svgHeight} viewBox={`0 0 ${computed.svgWidth} ${computed.svgHeight}`}>
         <Polyline
-          points={points}
-          stroke={iconColor}
-          strokeWidth={strokeWeight}
+          points={computed.points}
+          stroke={tokens.iconColor}
+          strokeWidth={tokens.strokeWeight}
           strokeLinecap="round"
           strokeLinejoin="round"
           fill="none"
@@ -115,3 +146,5 @@ export default function NavArrow({
     </View>
   )
 }
+
+export default React.memo(NavArrow)

package/src/components/NoteInput/NoteInput.tsx

@@ -11,6 +11,7 @@ import {
     type TextInputProps,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type NoteInputProps = {
     /** The value of the text input */
@@ -37,7 +38,7 @@ export default function NoteInput({
     value = '',
     placeholder = 'Add note',
     onChangeText,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
     textStyle,
     state: explicitState,

package/src/components/Nudge/Nudge.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, type ViewStyle, type TextStyle, type StyleProp } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 import Button from '../Button/Button'
 
 export type NudgeProps = {
@@ -41,7 +41,7 @@ function Nudge({
   buttonSlot,
   startSlot,
   children,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
 }: NudgeProps) {
   const { modes: globalModes } = useTokens()

package/src/components/Numpad/Numpad.tsx

@@ -8,6 +8,7 @@ import {
   type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 
 export type NumpadKeyValue =
@@ -65,7 +66,7 @@ function shuffleArray<T>(arr: T[]): T[] {
  * @param {NumpadProps} props
  */
 function Numpad({
-  modes = {},
+  modes = EMPTY_MODES,
   onKeyPress,
   showDecimal = true,
   shuffle = true,

package/src/components/OTP/OTP.tsx

@@ -12,7 +12,7 @@ import {
 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'
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 
 export type OTPProps = {
     /** Number of OTP digits. Defaults to 6. */
@@ -58,7 +58,7 @@ function OTP({
     isInvalid = false,
     allowedPattern = DIGITS_ONLY,
     autoFocus = false,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     style,
     supportText,
     supportTextStatus,

package/src/components/PaymentFeedback/PaymentFeedback.tsx

@@ -3,6 +3,7 @@ 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 { EMPTY_MODES } from '../../utils/react-utils'
 
 export type PaymentFeedbackProps = {
   /** Large heading text, typically a monetary value (e.g. "₹50,000") */
@@ -32,7 +33,7 @@ export default function PaymentFeedback({
   showDetails = true,
   iconName = 'ic_confirm',
   renderMedia,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
 }: PaymentFeedbackProps) {
   const { modes: globalModes } = useTokens()

package/src/components/Popup/Popup.tsx

@@ -12,6 +12,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import VStack from '../VStack/VStack'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type PopupRef = {
     open: () => void
@@ -50,7 +51,7 @@ const Popup = forwardRef<PopupRef, PopupProps>(function Popup(
         onOpenChange,
         trigger,
         children,
-        modes: propModes = {},
+        modes: propModes = EMPTY_MODES,
         closeOnBackdropPress = true,
         backdropColor = '#000000',
         backdropOpacity: maxBackdropOpacity = 0.5,

package/src/components/ProductLabel/ProductLabel.tsx

@@ -2,6 +2,7 @@ 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'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type ProductLabelProps = {
   /** The product name label text. */
@@ -17,7 +18,7 @@ export type ProductLabelProps = {
 function ProductLabel({
   label = 'Gold',
   imageSource,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
 }: ProductLabelProps) {
   const gap = getVariableByName('productLabel/gap', modes) ?? 8

package/src/components/ProgressBadge/ProgressBadge.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
-import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 
 export type ProgressBadgeProps = {
     /** The text displayed in the badge (e.g. "Live price...") */
@@ -46,7 +46,7 @@ function ProgressBadge({
     taskName = 'Live price: [price] (00:43)',
     iconName = 'ic_live',
     value = 0,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
     textStyle: textStyleOverride,
     accessibilityLabel,

package/src/components/RadioButton/RadioButton.tsx

@@ -9,6 +9,7 @@ import {
     StyleProp,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 // ---------------------------------------------------------------------------
 // Props
@@ -49,7 +50,7 @@ export function RadioButton({
     selected = false,
     disabled = false,
     onPress,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
     testID,
 }: RadioButtonProps) {

package/src/components/RechargeCard/RechargeCard.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, type ViewStyle } from 'react-native';
 import ButtonGroup from '../ButtonGroup/ButtonGroup';
 import AvatarGroup from '../AvatarGroup/AvatarGroup';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import MoneyValue from '../MoneyValue/MoneyValue';
 import Button from '../Button/Button';
 
@@ -62,7 +63,7 @@ export default function RechargeCard({
     disclaimer = "Data only pack (No Voice & No SMS)\nVoice: NA | SMS: NA...",
     subscriptionContent,
     actions,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
 }: RechargeCardProps) {
     // Container Tokens

package/src/components/Screen/Screen.tsx

@@ -7,7 +7,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
  * Helper function to recursively clone children and pass modes prop to components that accept it.
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
-import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 
 export interface ScreenProps {
     /**
@@ -30,7 +30,7 @@ export interface ScreenProps {
  */
 export const Screen = ({
     children,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     style
 }: ScreenProps) => {
     const { modes: globalModes } = useTokens()