jfs-components 0.0.62 → 0.0.63

package/lib/commonjs/components/Stepper/Stepper.js

@@ -21,11 +21,12 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Step = require("./Step");
 var _StepLabel = require("./StepLabel");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Stepper({
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   // Stepper container styles

package/lib/commonjs/components/SupportText/SupportText.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _SupportTextIcon = _interopRequireDefault(require("./SupportTextIcon"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -19,7 +20,7 @@ function SupportText({
   status = 'Neutral',
   iconSlot,
   textSlot,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const {

package/lib/commonjs/components/SupportText/SupportTextIcon.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const STATUS_ICON_MAP = {
@@ -19,7 +20,7 @@ const STATUS_ICON_MAP = {
 };
 function SupportTextIcon({
   status = 'Neutral',
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const iconName = STATUS_ICON_MAP[status] || 'ic_info';

package/lib/commonjs/components/SwappableAmount/SwappableAmount.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Button = _interopRequireDefault(require("../Button/Button"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function SwappableAmount({
@@ -17,7 +18,7 @@ function SwappableAmount({
   amountLabel = '₹5100',
   onSchedulePress,
   onAmountPress,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const gap = (0, _figmaVariablesResolver.getVariableByName)('swappableAmount/gap', modes) ?? 24;

package/lib/commonjs/components/Tabs/TabItem.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -22,7 +23,7 @@ function TabItem({
   label = 'Tab item',
   active = false,
   onPress,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   labelStyle,
   accessibilityLabel

package/lib/commonjs/components/Tabs/Tabs.js

@@ -14,6 +14,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _TabItem = _interopRequireDefault(require("./TabItem"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -39,7 +40,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function Tabs({
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   scrollable = false,
   style
 }) {

package/lib/commonjs/components/Text/Text.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TEXT_ALIGN_MAP = {
@@ -16,7 +17,7 @@ const TEXT_ALIGN_MAP = {
 function Text({
   text = 'Korem ipsum ',
   textAlign = 'Left',
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   numberOfLines
 }) {

package/lib/commonjs/components/TextInput/TextInput.js

@@ -106,7 +106,7 @@ function TextInput({
   leadingIconName = 'ic_search',
   leading,
   trailing,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   inputStyle,
   onFocus,
@@ -260,7 +260,7 @@ function TextInputSearch({
   value = '',
   onChangeText,
   leading,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   inputStyle,
   accessibilityLabel,

package/lib/commonjs/components/ThreadHero/ThreadHero.js

@@ -7,6 +7,7 @@ exports.default = ThreadHero;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -17,7 +18,7 @@ function ThreadHero({
   subtitle = 'Banking name: SHIVASHANKAR RAJAN',
   caption,
   renderAvatar,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   // Container Gaps

package/lib/commonjs/components/Title/Title.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(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 _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TEXT_ALIGN_MAP = {
@@ -18,7 +19,7 @@ function Title({
   title = 'Title',
   subtitle,
   textAlign = 'Left',
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   textStyle,
   subtitleStyle,

package/lib/commonjs/components/Toast/Toast.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _useToast = require("./useToast");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ANIMATION_DURATION = 250;
@@ -17,7 +18,7 @@ function Toast({
   title,
   timeout = 4000,
   onClose,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   placement = 'bottom',
   style
 }) {

package/lib/commonjs/components/Toggle/Toggle.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -23,7 +24,7 @@ function Toggle({
   defaultValue = false,
   onValueChange,
   disabled = false,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel
 }) {

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -11,6 +11,7 @@ var _reactNative = require("react-native");
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // --- Types ---
@@ -30,7 +31,7 @@ function useTooltipContext() {
 
 function Tooltip({
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   open,
   onOpenChange,
   defaultOpen = false,

package/lib/commonjs/components/TransactionBubble/TransactionBubble.js

@@ -39,7 +39,7 @@ function TransactionBubble({
   date = '20 Mar 2025',
   statusSlot,
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   onPress,
   style,
   accessibilityLabel,

package/lib/commonjs/components/TransactionDetails/TransactionDetails.js

@@ -29,7 +29,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function Item({
   label = 'Label',
   value = 'Value',
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   labelStyle,
   valueStyle,
@@ -121,7 +121,7 @@ function Item({
  */
 function TransactionDetails({
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel,
   ...rest

package/lib/commonjs/components/TransactionStatus/TransactionStatus.js

@@ -8,12 +8,13 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSvg = require("react-native-svg");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // --- Internal Icon Component ---
 
 const StatusIcon = ({
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   width = 15,
   height = 15,
   color
@@ -40,7 +41,7 @@ const StatusIcon = ({
 function TransactionStatus({
   status = 'Expired',
   date = '20 Mar 2025',
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const gap = Number((0, _figmaVariablesResolver.getVariableByName)('transactionBubble/statusWrap/gap', modes)) || 4;

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)