jfs-components 0.0.62 → 0.0.64

package/lib/module/components/UpiHandle/UpiHandle.js

@@ -1,158 +1,163 @@
 "use strict";
 
-import React, { useState } from 'react';
-import { Pressable, View, Text, Image } from 'react-native';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Pressable, View, Text, Image, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 
 // Default static asset from the component folder.
 // Consumers can override the image via the `avatarSource` prop if needed.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_AVATAR_IMAGE = require('./Image.png');
+const IS_WEB = Platform.OS === 'web';
+const IS_IOS = Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+const pressedOverlayStyle = {
+  transform: [{
+    scale: 0.98
+  }]
+};
+const focusOverlayStyle = {
+  borderWidth: 1,
+  borderColor: '#222'
+};
+function resolveUpiHandleTokens(modes) {
+  const backgroundColor = getVariableByName('upiHandle/background', modes) || '#f5f5f5';
+  const radius = getVariableByName('upiHandle/radius', modes) || 99999;
+  const paddingLeft = getVariableByName('upiHandle/padding/left', modes) || 4;
+  const paddingRight = getVariableByName('upiHandle/padding/right', modes) || 14;
+  const paddingVertical = getVariableByName('upiHandle/padding/vertical', modes) || 3;
+  const gap = getVariableByName('upiHandle/gap', modes) || 6;
+  const avatarSize = getVariableByName('upiHandle/image/size', modes) || 23;
+  const avatarRadius = getVariableByName('upiHandle/image/radius', modes) || 99999;
+  const labelColor = getVariableByName('upiHandle/label/color', modes) || '#0d0d0f';
+  const labelFontSize = getVariableByName('upiHandle/label/fontSize', modes) || 12;
+  const labelLineHeight = getVariableByName('upiHandle/label/lineHeight', modes) || 23;
+  const labelFontFamily = getVariableByName('upiHandle/label/fontFamily', modes) || 'System';
+  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes) || 500;
+  const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
+  const iconColor = getVariableByName('upiHandle/icon/color', modes) || '#0d0d0f';
+  const iconSize = getVariableByName('upiHandle/icon/size', modes) || 12;
+  return {
+    containerStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor,
+      paddingLeft,
+      paddingRight,
+      paddingVertical,
+      borderRadius: radius,
+      gap
+    },
+    avatarStyle: {
+      width: avatarSize,
+      height: avatarSize,
+      borderRadius: avatarRadius,
+      overflow: 'hidden'
+    },
+    labelStyle: {
+      color: labelColor,
+      fontSize: labelFontSize,
+      lineHeight: labelLineHeight,
+      fontFamily: labelFontFamily,
+      fontWeight: labelFontWeight
+    },
+    iconColor,
+    iconSize,
+    iconPlaceholderStyle: {
+      width: iconSize,
+      height: iconSize
+    }
+  };
+}
+
 /**
  * UpiHandle pill that mirrors the Figma "UPI Handle" component.
  *
- * Layout:
- *  - Circular image/avatar on the left
- *  - Label text in the center
- *  - Optional QR-code style icon on the right
- *
- * All visual styling is resolved from Figma variables via `getVariableByName`
- * using a `modes` configuration object, matching the rest of this library.
- *
  * @component
  * @param {Object} props
  * @param {string} [props.label="Label"] - UPI handle text to display.
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
- * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set (e.g. 'ic_qr_code', 'ic_scan_qr_code').
+ * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set.
  * @param {ImageSourcePropType} [props.avatarSource] - Optional custom image source for the avatar.
  * @param {Function} [props.onClick] - Click/tap handler. Works as an alias for `onPress`.
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ *
+ * Performance notes:
+ *  - Token reads collapsed into a single `useMemo([modes])`.
+ *  - Press visual goes through Pressable's `({ pressed })` style callback so
+ *    a scroll-cancelled touch never schedules a React render. iOS gets
+ *    `unstable_pressDelay={130}` for additional safety inside scrollables.
+ *  - Focus state is mirrored on web only (gated setter).
+ *  - Wrapped in `React.memo`.
  */
 function UpiHandle({
   label = 'Label',
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   showIcon = true,
   iconName = 'ic_scan_qr_code',
   avatarSource,
   onPress,
   onClick,
   disabled,
-  accessibilityLabel,
+  // accessibilityLabel is accepted on the type for API back-compat; the
+  // wrapper renders `accessibilityLabel={undefined}` because the inner Text
+  // already carries the label.
+  accessibilityLabel: _accessibilityLabel,
   accessibilityHint,
   ...rest
 }) {
   const {
     modes: globalModes
   } = useTokens();
-  const modes = {
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
     ...globalModes,
     ...propModes
-  };
-  // Token‑driven container styling
-  const backgroundColor = getVariableByName('upiHandle/background', modes) || '#f5f5f5';
-  const radius = getVariableByName('upiHandle/radius', modes) || 99999;
-  const paddingLeft = getVariableByName('upiHandle/padding/left', modes) || 4;
-  const paddingRight = getVariableByName('upiHandle/padding/right', modes) || 14;
-  const paddingVertical = getVariableByName('upiHandle/padding/vertical', modes) || 3;
-  const gap = getVariableByName('upiHandle/gap', modes) || 6;
-
-  // Avatar
-  const avatarSize = getVariableByName('upiHandle/image/size', modes) || 23;
-  const avatarRadius = getVariableByName('upiHandle/image/radius', modes) || 99999;
-
-  // Label typography
-  const labelColor = getVariableByName('upiHandle/label/color', modes) || '#0d0d0f';
-  const labelFontSize = getVariableByName('upiHandle/label/fontSize', modes) || 12;
-  const labelLineHeight = getVariableByName('upiHandle/label/lineHeight', modes) || 23;
-  const labelFontFamily = getVariableByName('upiHandle/label/fontFamily', modes) || 'System';
-  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes) || 500;
-  const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
+  }, [globalModes, propModes]);
+  const tokens = useMemo(() => resolveUpiHandleTokens(modes), [modes]);
 
-  // Icon sizing
-  const iconColor = getVariableByName('upiHandle/icon/color', modes) || '#0d0d0f';
-  const iconSize = getVariableByName('upiHandle/icon/size', modes) || 12;
-  const containerStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor,
-    paddingLeft,
-    paddingRight,
-    paddingVertical,
-    borderRadius: radius,
-    gap
-  };
-  const avatarBaseStyle = {
-    width: avatarSize,
-    height: avatarSize,
-    borderRadius: avatarRadius,
-    overflow: 'hidden'
-  };
-  const labelBaseStyle = {
-    color: labelColor,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontFamily: labelFontFamily,
-    fontWeight: labelFontWeight
-  };
-  const iconPlaceholderStyle = {
-    width: iconSize,
-    height: iconSize
-  };
-
-  // Use provided accessibilityLabel or fall back to label
-  const defaultAccessibilityLabel = accessibilityLabel || `UPI handle ${label}`;
-  const [isPressed, setIsPressed] = useState(false);
+  // Focus is a sustained visible state (web-only). Setter is gated so it
+  // never fires on native.
   const [isFocused, setIsFocused] = useState(false);
-  const pressedStyle = isPressed ? {
-    transform: [{
-      scale: 0.98
-    }]
-  } : null;
-  const focusStyle = isFocused ? {
-    borderWidth: 1,
-    borderColor: '#222'
-  } : null;
+  const userHandlersRef = useRef({});
+  userHandlersRef.current.onPressIn = rest?.onPressIn;
+  userHandlersRef.current.onPressOut = rest?.onPressOut;
+  userHandlersRef.current.onFocus = rest?.onFocus;
+  userHandlersRef.current.onBlur = rest?.onBlur;
+  const handlePressIn = useCallback(e => {
+    userHandlersRef.current.onPressIn?.(e);
+  }, []);
+  const handlePressOut = useCallback(e => {
+    userHandlersRef.current.onPressOut?.(e);
+  }, []);
+  const handleFocus = useCallback(e => {
+    if (IS_WEB) setIsFocused(true);
+    userHandlersRef.current.onFocus?.(e);
+  }, []);
+  const handleBlur = useCallback(e => {
+    if (IS_WEB) setIsFocused(false);
+    userHandlersRef.current.onBlur?.(e);
+  }, []);
   const handlePress = onPress || onClick;
-  const Wrapper = rest?.onPress || handlePress ? Pressable : View;
-  return /*#__PURE__*/_jsxs(Wrapper, {
-    style: [containerStyle, pressedStyle, focusStyle],
-    accessibilityRole: "text",
-    accessibilityLabel: undefined,
-    ...(accessibilityHint !== undefined ? {
-      accessibilityHint
-    } : {}),
-    onPress: handlePress,
-    disabled: rest?.disabled ?? disabled,
-    onPressIn: e => {
-      setIsPressed(true);
-      rest?.onPressIn?.(e);
-    },
-    onPressOut: e => {
-      setIsPressed(false);
-      rest?.onPressOut?.(e);
-    },
-    onFocus: e => {
-      setIsFocused(true);
-      rest?.onFocus?.(e);
-    },
-    onBlur: e => {
-      setIsFocused(false);
-      rest?.onBlur?.(e);
-    },
-    ...rest,
+  const isPressable = !!(rest?.onPress || handlePress);
+  const pressableStyle = useCallback(({
+    pressed
+  }) => [tokens.containerStyle, pressed ? pressedOverlayStyle : null, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
+  const staticContainerStyle = useMemo(() => [tokens.containerStyle, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
+  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Image, {
       source: avatarSource || DEFAULT_AVATAR_IMAGE,
-      style: avatarBaseStyle,
+      style: tokens.avatarStyle,
       resizeMode: "cover",
       accessibilityElementsHidden: true,
       importantForAccessibility: "no"
     }), /*#__PURE__*/_jsx(Text, {
-      style: labelBaseStyle,
+      style: tokens.labelStyle,
       numberOfLines: 1,
       ellipsizeMode: "tail",
       accessibilityElementsHidden: true,
@@ -160,12 +165,41 @@ function UpiHandle({
       children: label
     }), showIcon && /*#__PURE__*/_jsx(Icon, {
       name: iconName,
-      size: iconSize,
-      color: iconColor,
-      style: iconPlaceholderStyle,
+      size: tokens.iconSize,
+      color: tokens.iconColor,
+      style: tokens.iconPlaceholderStyle,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no"
     })]
   });
+  if (isPressable) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: pressableStyle,
+      accessibilityRole: "text",
+      accessibilityLabel: undefined,
+      ...(accessibilityHint !== undefined ? {
+        accessibilityHint
+      } : {}),
+      onPress: handlePress,
+      disabled: rest?.disabled ?? disabled,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      unstable_pressDelay: PRESS_DELAY,
+      ...rest,
+      children: innerContent
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: staticContainerStyle,
+    accessibilityRole: "text",
+    accessibilityLabel: undefined,
+    ...(accessibilityHint !== undefined ? {
+      accessibilityHint
+    } : {}),
+    ...rest,
+    children: innerContent
+  });
 }
-export default UpiHandle;
+export default /*#__PURE__*/React.memo(UpiHandle);

package/lib/module/components/VStack/VStack.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View } 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 { jsx as _jsx } from "react/jsx-runtime";
 /**
  * VStack component for vertical layout using design token spacing.
@@ -16,7 +16,7 @@ export const VStack = ({
   wrap,
   reverse = false,
   as,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   ...rest
 }) => {

package/lib/module/design-tokens/figma-variables-resolver.js

@@ -187,14 +187,32 @@ function resolveVariable(variableId, modesByCollectionName = {}) {
   return value;
 }
 
+// Per-object serialization cache. Most callers pass the same `modes` object
+// many times in a single render (e.g. one Button does ~21 token lookups with
+// the same `modes`); with a stable identity from the caller (see
+// `EMPTY_MODES` in `utils/react-utils.ts`) this collapses to a single
+// sort+join per modes object across the whole app.
+const serializedModesCache = new WeakMap();
+
 // Serialize modes object to create a stable cache key
 function serializeModes(modes) {
-  if (!modes || Object.keys(modes).length === 0) {
+  if (!modes || typeof modes !== 'object') {
+    return '';
+  }
+  const cached = serializedModesCache.get(modes);
+  if (cached !== undefined) {
+    return cached;
+  }
+  const keys = Object.keys(modes);
+  if (keys.length === 0) {
+    serializedModesCache.set(modes, '');
     return '';
   }
   // Sort keys for consistent serialization
-  const sortedKeys = Object.keys(modes).sort();
-  return sortedKeys.map(key => `${key}:${modes[key]}`).join('|');
+  keys.sort();
+  const result = keys.map(key => `${key}:${modes[key]}`).join('|');
+  serializedModesCache.set(modes, result);
+  return result;
 }
 
 // Get variable by name with dynamic mode resolution (optimized with O(1) lookup)