jfs-components 0.0.62 → 0.0.63

package/lib/commonjs/components/BottomNavItem/BottomNavItem.js

@@ -10,24 +10,69 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _webPlatformUtils = require("../../utils/web-platform-utils");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 IS_WEB = _reactNative.Platform.OS === 'web';
+const IS_IOS = _reactNative.Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+const pressedOverlayStyle = {
+  opacity: 0.7
+};
+const hoverOverlayStyle = {
+  opacity: 0.85
+};
+const focusOverlayStyle = {
+  borderBottomWidth: 2,
+  borderBottomColor: '#222'
+};
+function resolveBottomNavItemTokens(modes, disabled, iconColorOverride, iconSizeOverride) {
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/gap', modes) ?? 6;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium';
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontWeight', modes) ?? 500;
+  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontSize', modes) ?? 11;
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/lineHeight', modes) ?? 14;
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/label/color', modes) || '#0d0d0f';
+  const resolvedIconColor = iconColorOverride || (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/icon/color', modes) || '#ad8545';
+  const resolvedIconSize = iconSizeOverride ?? (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/icon/size', modes) ?? 24;
+  return {
+    baseContainerStyle: {
+      alignItems: 'center',
+      opacity: disabled ? 0.5 : 1
+    },
+    textStyle: {
+      color: labelColor,
+      fontFamily,
+      fontWeight: fontWeight,
+      fontSize,
+      lineHeight,
+      textAlign: 'center',
+      marginTop: gap
+    },
+    iconColor: resolvedIconColor,
+    iconSize: resolvedIconSize
+  };
+}
+
 /**
  * Bottom navigation item with icon and label stacked vertically.
  *
- * All visual attributes resolve from Figma tokens via `getVariableByName`,
- * with the `modes` object passed straight through.
- *
- * @component
- * @param {Object} props
- * @param {string} [props.iconName="ic_home"] - Icon name from the registry.
- * ...
+ * Performance notes:
+ *  - Token reads collapsed into a single `useMemo([modes, disabled, iconColor, iconSize])`.
+ *  - Press visual via Pressable's `({ pressed })` style callback.
+ *  - Hover and focus state are mirrored on web only (gated setters).
+ *  - The previous version had no-op `onPressIn`/`onPressOut` handlers that
+ *    forwarded to user callbacks but did nothing else — they were still
+ *    creating fresh closures every render and forcing Pressable to re-bind.
+ *    Now stable via a ref-backed wrapper.
+ *  - Wrapped in `React.memo`.
  */
 function BottomNavItem({
   iconName = 'ic_home',
   label = 'Home',
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   onPress,
   disabled = false,
   style,
@@ -43,54 +88,21 @@ function BottomNavItem({
   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
-  };
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveBottomNavItemTokens(modes, disabled, iconColorOverride, iconSizeOverride), [modes, disabled, iconColorOverride, iconSizeOverride]);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isHovered, setIsHovered] = (0, _react.useState)(false);
-  const pressedStyle = {
-    opacity: 0.7
-  };
-  const focusStyle = {
-    borderBottomWidth: 2,
-    borderBottomColor: '#222'
-  };
-  const hoverStyle = {
-    opacity: 0.85
-  };
-  // Resolve spacing and typography
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/gap', modes) ?? 6;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium';
-  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontWeight', modes) ?? 500;
-  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontSize', modes) ?? 11;
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/lineHeight', modes) ?? 14;
-
-  // Resolve Label Color
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/label/color', modes) || '#0d0d0f';
-
-  // Resolve icon appearance
-  const resolvedIconColor = iconColorOverride || (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/icon/color', modes) || '#ad8545';
-  const resolvedIconSize = iconSizeOverride ?? (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/icon/size', modes) ?? 24;
-  const baseContainerStyle = {
-    alignItems: 'center',
-    opacity: disabled ? 0.5 : 1
-  };
-  const textStyle = {
-    color: labelColor,
-    fontFamily,
-    fontWeight,
-    fontSize,
-    lineHeight,
-    textAlign: 'center',
-    marginTop: gap
-  };
-
-  // Use provided accessibilityLabel or fall back to label
+  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;
+  userHandlersRef.current.onHoverIn = rest?.onHoverIn;
+  userHandlersRef.current.onHoverOut = rest?.onHoverOut;
   const defaultAccessibilityLabel = accessibilityLabel || label;
-
-  // Get web platform support props (only used when onPress is defined)
   const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
     restProps: rest,
     onPress: disabled ? undefined : onPress,
@@ -98,23 +110,50 @@ function BottomNavItem({
     accessibilityLabel: defaultAccessibilityLabel,
     webAccessibilityProps
   });
-  const renderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  const composedTextStyle = (0, _react.useMemo)(() => labelStyle ? [tokens.textStyle, labelStyle] : tokens.textStyle, [tokens.textStyle, labelStyle]);
+  const renderContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       name: iconName,
-      size: resolvedIconSize,
-      color: resolvedIconColor,
+      size: tokens.iconSize,
+      color: tokens.iconColor,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [textStyle, labelStyle],
+      style: composedTextStyle,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: label
     })]
   });
+  const staticContainerStyle = (0, _react.useMemo)(() => style ? [tokens.baseContainerStyle, style] : tokens.baseContainerStyle, [tokens.baseContainerStyle, style]);
+  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 handleHoverIn = (0, _react.useCallback)(e => {
+    if (IS_WEB) setIsHovered(true);
+    userHandlersRef.current.onHoverIn?.(e);
+  }, []);
+  const handleHoverOut = (0, _react.useCallback)(e => {
+    if (IS_WEB) setIsHovered(false);
+    userHandlersRef.current.onHoverOut?.(e);
+  }, []);
+  const pressableStyle = (0, _react.useCallback)(({
+    pressed
+  }) => [tokens.baseContainerStyle, style, pressed && !disabled ? pressedOverlayStyle : null, isHovered && !disabled ? hoverOverlayStyle : null, isFocused && !disabled ? focusOverlayStyle : null], [tokens.baseContainerStyle, style, isHovered, isFocused, disabled]);
   if (!onPress) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [baseContainerStyle, style],
+      style: staticContainerStyle,
       accessibilityRole: "tab",
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint,
@@ -123,7 +162,7 @@ function BottomNavItem({
         ...accessibilityState
       },
       ...rest,
-      children: renderContent()
+      children: renderContent
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
@@ -137,35 +176,16 @@ function BottomNavItem({
     },
     onPress: onPress,
     disabled: disabled,
-    onPressIn: e => {
-      ;
-      rest?.onPressIn?.(e);
-    },
-    onPressOut: e => {
-      ;
-      rest?.onPressOut?.(e);
-    },
-    onFocus: e => {
-      setIsFocused(true);
-      rest?.onFocus?.(e);
-    },
-    onBlur: e => {
-      setIsFocused(false);
-      rest?.onBlur?.(e);
-    },
-    onHoverIn: e => {
-      setIsHovered(true);
-      rest?.onHoverIn?.(e);
-    },
-    onHoverOut: e => {
-      setIsHovered(false);
-      rest?.onHoverOut?.(e);
-    },
-    style: ({
-      pressed
-    }) => [baseContainerStyle, style, pressed && !disabled ? pressedStyle : null, isHovered && !disabled ? hoverStyle : null, isFocused && !disabled ? focusStyle : null],
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onHoverIn: handleHoverIn,
+    onHoverOut: handleHoverOut,
+    unstable_pressDelay: PRESS_DELAY,
+    style: pressableStyle,
     ...webProps,
-    children: renderContent()
+    children: renderContent
   });
 }
-var _default = exports.default = BottomNavItem;
+var _default = exports.default = /*#__PURE__*/_react.default.memo(BottomNavItem);

package/lib/commonjs/components/Button/Button.js

@@ -8,10 +8,120 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _webPlatformUtils = require("../../utils/web-platform-utils");
+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 }; }
 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); }
+// ---------------------------------------------------------------------------
+// Module-scope constants — never re-allocated per render.
+// ---------------------------------------------------------------------------
+
+const IS_WEB = _reactNative.Platform.OS === 'web';
+const IS_IOS = _reactNative.Platform.OS === 'ios';
+
+// iOS Pressable inside a ScrollView fires onPressIn on touchstart by default,
+// which causes a visible "press" flash that snaps back when ScrollView claims
+// the gesture. Delaying press by ~130ms lets the scroll responder cancel the
+// gesture before the pressed visual is ever applied.
+//
+// Android uses the responder system + the touchable cancellation pipeline and
+// does not need an extra delay; setting it to 0 keeps tap latency identical
+// to today's behavior on Android.
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+const containerLayoutStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center'
+};
+
+// ---------------------------------------------------------------------------
+// Token resolution
+// ---------------------------------------------------------------------------
+//
+// Memoizing all token reads in a single useMemo keyed on (modes, disabled)
+// turns the previous ~21 cache lookups + arithmetic per render into a single
+// resolve per (modes, disabled) tuple. With `EMPTY_MODES` as the default,
+// the most common path (no modes prop) is resolved once for the whole app.
+// ---------------------------------------------------------------------------
+
+function resolveButtonTokens(modes, disabled) {
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('button/background', modes) || '#cfa159';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', modes) || 'rgba(255,255,255,0)';
+  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('button/border/size', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('button/radius', modes) || 9999;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', modes) || 20;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('button/padding/vertical', modes) || 12;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('button/gap', modes) || 8;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('button/fontFamily', modes) || 'System';
+  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('button/fontWeight', modes) || 700;
+  const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('button/lineHeight', modes) || 19;
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('button/fontSize', modes) || 16;
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', modes) || '#0f0d0a';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('button/icon/size', modes) ?? 18;
+
+  // Pressed tokens are always resolved so the Pressable `style` callback can
+  // apply the pressed visual without scheduling a React render.
+  const pressedModes = {
+    ...modes,
+    'Button / State': 'Pressed'
+  };
+  const pressedBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', pressedModes) || backgroundColor;
+  const pressedBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', pressedModes) || borderColor;
+  const pressedTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', pressedModes) || textColor;
+
+  // Hover tokens are only meaningful on web. Skipping them on native saves
+  // ~3 token lookups + an object spread per render on every Button.
+  let hoverContainer = null;
+  let hoverTextColor = null;
+  if (IS_WEB) {
+    const hoverModes = {
+      ...modes,
+      'Button / State': 'Hover'
+    };
+    const hoverBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', hoverModes) || backgroundColor;
+    const hoverBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', hoverModes) || borderColor;
+    hoverTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', hoverModes) || textColor;
+    hoverContainer = {
+      backgroundColor: hoverBg,
+      borderColor: hoverBorderColor
+    };
+  }
+  return {
+    container: {
+      ...containerLayoutStyle,
+      paddingHorizontal: paddingHorizontal,
+      paddingVertical: paddingVertical,
+      borderRadius: radius,
+      borderWidth: borderWidth ?? 1,
+      borderColor: borderColor,
+      backgroundColor: backgroundColor,
+      gap: gap,
+      opacity: disabled ? 0.5 : 1
+    },
+    baseLabel: {
+      color: textColor,
+      fontFamily: fontFamily,
+      fontWeight: fontWeight,
+      fontSize: fontSize,
+      lineHeight: lineHeight
+    },
+    hoverContainer,
+    pressedContainer: {
+      backgroundColor: pressedBg,
+      borderColor: pressedBorderColor
+    },
+    hoverTextColor,
+    pressedTextColor,
+    baseIconColor: textColor,
+    hoverIconColor: hoverTextColor,
+    pressedIconColor: pressedTextColor,
+    iconSize,
+    accessoryOffset: gap / 2
+  };
+}
+
 /**
  * Button component that maps directly to the Figma design using design tokens.
  *
@@ -30,15 +140,31 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label or children text
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ *
+ * Performance notes:
+ *  - The pressed visual (background/border swap) is applied through the
+ *    Pressable `style` callback, NOT a mirrored React state. This avoids the
+ *    flicker that scrolling parents previously caused: when a ScrollView
+ *    cancels a touch the host view simply reverts its style without React
+ *    rendering. On iOS we additionally use `unstable_pressDelay` so the
+ *    pressed visual is never even applied during a scroll-cancelled touch.
+ *  - Hover state is only mirrored into React state on web (where hover events
+ *    fire). On native the setter call is gated out so the component never
+ *    re-renders due to hover.
+ *  - All design-token reads are folded into a single `useMemo` keyed on
+ *    `(modes, disabled)`.
+ *  - The component is wrapped in `React.memo`. Callers that want to take
+ *    advantage of this should pass stable `modes` (the default `EMPTY_MODES`
+ *    is already stable) and stable callback props.
  */
-function Button({
+function ButtonImpl({
   label = 'Button',
   children,
   renderContent,
   leading,
   trailing,
   icon,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   onPress,
   disabled = false,
   style,
@@ -49,85 +175,50 @@ function Button({
   webAccessibilityProps,
   ...rest
 }) {
-  // Resolve design tokens with the provided modes
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('button/background', modes) || '#cfa159';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', modes) || 'rgba(255,255,255,0)';
-  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('button/border/size', modes);
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('button/radius', modes) || 9999;
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', modes) || 20;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('button/padding/vertical', modes) || 12;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('button/gap', modes) || 8;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('button/fontFamily', modes) || 'System';
-  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('button/fontWeight', modes) || 700;
-  const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('button/lineHeight', modes) || 19;
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('button/fontSize', modes) || 16;
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', modes) || '#0f0d0a';
-  const iconColor = textColor;
-  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('button/icon/size', modes) ?? 18;
+  // Hover state is web-only in practice; the setter is gated so native taps
+  // never schedule a re-render through this hook.
   const [isHovered, setIsHovered] = (0, _react.useState)(false);
-  const [isPressed, setIsPressed] = (0, _react.useState)(false);
-  const hoverModes = {
-    ...modes,
-    "Button / State": "Hover"
-  };
-  const hoverBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', hoverModes) || backgroundColor;
-  const hoverBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', hoverModes) || borderColor;
-  const hoverTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', hoverModes) || textColor;
-  const hoverIconColor = hoverTextColor;
-  const pressedModes = {
-    ...modes,
-    "Button / State": "Pressed"
-  };
-  const pressedBg = (0, _figmaVariablesResolver.getVariableByName)('button/background', pressedModes) || backgroundColor;
-  const pressedBorderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', pressedModes) || borderColor;
-  const pressedTextColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', pressedModes) || textColor;
-  const pressedIconColor = pressedTextColor;
-  const activeTextColor = isPressed && !disabled ? pressedTextColor : isHovered && !disabled ? hoverTextColor : textColor;
-  const activeIconColor = isPressed && !disabled ? pressedIconColor : isHovered && !disabled ? hoverIconColor : iconColor;
-  const baseLabelTextStyle = {
-    color: activeTextColor,
-    fontFamily,
-    fontWeight,
-    fontSize,
-    lineHeight
-  };
-  const mergedLabelTextStyle = [baseLabelTextStyle, labelStyle];
+
+  // Mirror user-supplied handlers in a ref so our wrapper handlers can stay
+  // referentially stable (otherwise Pressable would re-bind every render).
+  const userHandlersRef = (0, _react.useRef)({});
+  userHandlersRef.current.onPressIn = rest?.onPressIn;
+  userHandlersRef.current.onPressOut = rest?.onPressOut;
+  userHandlersRef.current.onHoverIn = rest?.onHoverIn;
+  userHandlersRef.current.onHoverOut = rest?.onHoverOut;
+  const tokens = (0, _react.useMemo)(() => resolveButtonTokens(modes, disabled), [modes, disabled]);
+
+  // Active label color: base by default; hover override (web-only) when hovered.
+  // Press color is intentionally NOT applied to the label on native — applying
+  // it would require a React render per touch and re-introduce the flicker.
+  const activeLabelStyle = (0, _react.useMemo)(() => {
+    const hoverOverride = isHovered && !disabled && tokens.hoverTextColor ? {
+      color: tokens.hoverTextColor
+    } : null;
+    return [tokens.baseLabel, hoverOverride, labelStyle];
+  }, [tokens.baseLabel, tokens.hoverTextColor, isHovered, disabled, labelStyle]);
+  const activeIconColor = isHovered && !disabled && tokens.hoverIconColor ? tokens.hoverIconColor : tokens.baseIconColor;
   let content;
   if (renderContent) {
     // Preferred extension point: caller fully controls the inner node but we
     // still provide the token-derived text styles.
-    content = renderContent(mergedLabelTextStyle);
+    content = renderContent(activeLabelStyle);
   } else if (children !== undefined && children !== null) {
     // Full-content override: label and labelStyle are intentionally ignored.
     content = children;
   } else {
     content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: mergedLabelTextStyle,
+      style: activeLabelStyle,
       numberOfLines: 1,
       children: label
     });
   }
-  const containerBaseStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal,
-    paddingVertical,
-    borderRadius: radius,
-    borderWidth: borderWidth ?? 1,
-    borderColor,
-    backgroundColor,
-    gap,
-    opacity: disabled ? 0.5 : 1
-  };
-  const accessoryOffset = gap / 2;
   const leadingAccessoryStyle = (0, _react.useMemo)(() => ({
-    marginRight: accessoryOffset
-  }), [accessoryOffset]);
+    marginRight: tokens.accessoryOffset
+  }), [tokens.accessoryOffset]);
   const trailingAccessoryStyle = (0, _react.useMemo)(() => ({
-    marginLeft: accessoryOffset
-  }), [accessoryOffset]);
+    marginLeft: tokens.accessoryOffset
+  }), [tokens.accessoryOffset]);
 
   // Use provided accessibilityLabel, or fall back to label text
   const defaultAccessibilityLabel = accessibilityLabel || (typeof label === 'string' ? label : undefined);
@@ -140,14 +231,32 @@ function Button({
     accessibilityLabel: defaultAccessibilityLabel,
     webAccessibilityProps
   });
-  const hoverStyle = {
-    backgroundColor: hoverBg,
-    borderColor: hoverBorderColor
-  };
-  const pressedStyle = {
-    backgroundColor: pressedBg,
-    borderColor: pressedBorderColor
-  };
+
+  // Stable handler identities. The user's handlers are read through a ref so
+  // these wrappers do not need to be re-created when the user passes inline
+  // closures, which would defeat React.memo on Pressable.
+  const handlePressIn = (0, _react.useCallback)(e => {
+    userHandlersRef.current.onPressIn?.(e);
+  }, []);
+  const handlePressOut = (0, _react.useCallback)(e => {
+    userHandlersRef.current.onPressOut?.(e);
+  }, []);
+  const handleHoverIn = (0, _react.useCallback)(e => {
+    if (IS_WEB) setIsHovered(true);
+    userHandlersRef.current.onHoverIn?.(e);
+  }, []);
+  const handleHoverOut = (0, _react.useCallback)(e => {
+    if (IS_WEB) setIsHovered(false);
+    userHandlersRef.current.onHoverOut?.(e);
+  }, []);
+
+  // The Pressable style callback receives `pressed` from RN's gesture
+  // pipeline and applies the pressed visual to the host view directly,
+  // without going through React. This is the key to flicker-free behavior:
+  // a scroll-cancelled touch reverts the style on the native side only.
+  const styleCallback = (0, _react.useCallback)(({
+    pressed
+  }) => [tokens.container, isHovered && !disabled ? tokens.hoverContainer : null, pressed && !disabled ? tokens.pressedContainer : null, style], [tokens.container, tokens.hoverContainer, tokens.pressedContainer, isHovered, disabled, style]);
   if (__DEV__) {
     if (children && labelStyle) {
       console.warn('[Button] `children` was provided; `labelStyle` will be ignored. ' + 'Use `renderContent` if you need custom content that still reuses the label styles.');
@@ -170,25 +279,12 @@ function Button({
     ...(onPress !== undefined ? {
       onPress
     } : {}),
-    onPressIn: e => {
-      setIsPressed(true);
-      rest?.onPressIn?.(e);
-    },
-    onPressOut: e => {
-      setIsPressed(false);
-      rest?.onPressOut?.(e);
-    },
-    onHoverIn: e => {
-      setIsHovered(true);
-      rest?.onHoverIn?.(e);
-    },
-    onHoverOut: e => {
-      setIsHovered(false);
-      rest?.onHoverOut?.(e);
-    },
-    style: ({
-      pressed
-    }) => [containerBaseStyle, isHovered && !disabled ? hoverStyle : null, (pressed || isPressed) && !disabled ? pressedStyle : null, style],
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    onHoverIn: handleHoverIn,
+    onHoverOut: handleHoverOut,
+    unstable_pressDelay: PRESS_DELAY,
+    style: styleCallback,
     ...webProps,
     children: [leading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: leadingAccessoryStyle,
@@ -197,7 +293,7 @@ function Button({
       style: trailingAccessoryStyle,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: icon,
-        size: iconSize,
+        size: tokens.iconSize,
         color: activeIconColor,
         accessibilityElementsHidden: true,
         importantForAccessibility: "no"
@@ -208,4 +304,5 @@ function Button({
     }) : null]
   });
 }
+const Button = /*#__PURE__*/_react.default.memo(ButtonImpl);
 var _default = exports.default = Button;

package/lib/commonjs/components/ButtonGroup/ButtonGroup.js

@@ -30,7 +30,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function ButtonGroup({
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   // Resolve design tokens

package/lib/commonjs/components/Card/Card.js

@@ -8,6 +8,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); }
 /**
@@ -31,7 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function Card({
   media,
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   mediaAspectRatio = 154 / 116,
   style
 }) {

package/lib/commonjs/components/CardCTA/CardCTA.js

@@ -19,7 +19,7 @@ function CardCTA({
   iconName = 'ic_upi_number',
   buttonLabel = 'Button',
   onPressButton,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   iconSlot,
   buttonSlot,
   style

package/lib/commonjs/components/CardProviderInfo/CardProviderInfo.js

@@ -22,7 +22,7 @@ function CardProviderInfo({
   label = 'Gold',
   imageSource,
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const background = (0, _figmaVariablesResolver.getVariableByName)('card/providerInfo/background', modes) ?? '#fef4e5';