jfs-components 0.0.62 → 0.0.64

package/lib/commonjs/components/UpiHandle/UpiHandle.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -15,149 +16,153 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // Default static asset from the component folder.
 // Consumers can override the image via the `avatarSource` prop if needed.
 const DEFAULT_AVATAR_IMAGE = require('./Image.png');
+const IS_WEB = _reactNative.Platform.OS === 'web';
+const IS_IOS = _reactNative.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 = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/background', modes) || '#f5f5f5';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/radius', modes) || 99999;
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/padding/left', modes) || 4;
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/padding/right', modes) || 14;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/padding/vertical', modes) || 3;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/gap', modes) || 6;
+  const avatarSize = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/image/size', modes) || 23;
+  const avatarRadius = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/image/radius', modes) || 99999;
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/color', modes) || '#0d0d0f';
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/fontSize', modes) || 12;
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/lineHeight', modes) || 23;
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/fontFamily', modes) || 'System';
+  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/fontWeight', modes) || 500;
+  const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/icon/color', modes) || '#0d0d0f';
+  const iconSize = (0, _figmaVariablesResolver.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 = _reactUtils.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
   } = (0, _JFSThemeProvider.useTokens)();
-  const modes = {
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
     ...globalModes,
     ...propModes
-  };
-  // Token‑driven container styling
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/background', modes) || '#f5f5f5';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/radius', modes) || 99999;
-  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/padding/left', modes) || 4;
-  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/padding/right', modes) || 14;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/padding/vertical', modes) || 3;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/gap', modes) || 6;
-
-  // Avatar
-  const avatarSize = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/image/size', modes) || 23;
-  const avatarRadius = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/image/radius', modes) || 99999;
-
-  // Label typography
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/color', modes) || '#0d0d0f';
-  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/fontSize', modes) || 12;
-  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/lineHeight', modes) || 23;
-  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/fontFamily', modes) || 'System';
-  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/label/fontWeight', modes) || 500;
-  const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveUpiHandleTokens(modes), [modes]);
 
-  // Icon sizing
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('upiHandle/icon/color', modes) || '#0d0d0f';
-  const iconSize = (0, _figmaVariablesResolver.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] = (0, _react.useState)(false);
+  // Focus is a sustained visible state (web-only). Setter is gated so it
+  // never fires on native.
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const pressedStyle = isPressed ? {
-    transform: [{
-      scale: 0.98
-    }]
-  } : null;
-  const focusStyle = isFocused ? {
-    borderWidth: 1,
-    borderColor: '#222'
-  } : null;
+  const userHandlersRef = (0, _react.useRef)({});
+  userHandlersRef.current.onPressIn = rest?.onPressIn;
+  userHandlersRef.current.onPressOut = rest?.onPressOut;
+  userHandlersRef.current.onFocus = rest?.onFocus;
+  userHandlersRef.current.onBlur = rest?.onBlur;
+  const handlePressIn = (0, _react.useCallback)(e => {
+    userHandlersRef.current.onPressIn?.(e);
+  }, []);
+  const handlePressOut = (0, _react.useCallback)(e => {
+    userHandlersRef.current.onPressOut?.(e);
+  }, []);
+  const handleFocus = (0, _react.useCallback)(e => {
+    if (IS_WEB) setIsFocused(true);
+    userHandlersRef.current.onFocus?.(e);
+  }, []);
+  const handleBlur = (0, _react.useCallback)(e => {
+    if (IS_WEB) setIsFocused(false);
+    userHandlersRef.current.onBlur?.(e);
+  }, []);
   const handlePress = onPress || onClick;
-  const Wrapper = rest?.onPress || handlePress ? _reactNative.Pressable : _reactNative.View;
-  return /*#__PURE__*/(0, _jsxRuntime.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 = (0, _react.useCallback)(({
+    pressed
+  }) => [tokens.containerStyle, pressed ? pressedOverlayStyle : null, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
+  const staticContainerStyle = (0, _react.useMemo)(() => [tokens.containerStyle, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
+  const innerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
       source: avatarSource || DEFAULT_AVATAR_IMAGE,
-      style: avatarBaseStyle,
+      style: tokens.avatarStyle,
       resizeMode: "cover",
       accessibilityElementsHidden: true,
       importantForAccessibility: "no"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: labelBaseStyle,
+      style: tokens.labelStyle,
       numberOfLines: 1,
       ellipsizeMode: "tail",
       accessibilityElementsHidden: true,
@@ -165,12 +170,41 @@ function UpiHandle({
       children: label
     }), showIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: staticContainerStyle,
+    accessibilityRole: "text",
+    accessibilityLabel: undefined,
+    ...(accessibilityHint !== undefined ? {
+      accessibilityHint
+    } : {}),
+    ...rest,
+    children: innerContent
+  });
 }
-var _default = exports.default = UpiHandle;
+var _default = exports.default = /*#__PURE__*/_react.default.memo(UpiHandle);

package/lib/commonjs/components/VStack/VStack.js

@@ -21,7 +21,7 @@ const VStack = ({
   wrap,
   reverse = false,
   as,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   ...rest
 }) => {

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

@@ -198,14 +198,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)