jfs-components 0.0.62 → 0.0.63

package/lib/module/components/BottomNavItem/BottomNavItem.js

@@ -1,27 +1,72 @@
 "use strict";
 
-import React, { useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Platform, Pressable, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import Icon from '../../icons/Icon';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
+const IS_IOS = 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 = getVariableByName('bottomNavItem/gap', modes) ?? 6;
+  const fontFamily = getVariableByName('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium';
+  const fontWeightRaw = getVariableByName('bottomNavItem/fontWeight', modes) ?? 500;
+  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
+  const fontSize = getVariableByName('bottomNavItem/fontSize', modes) ?? 11;
+  const lineHeight = getVariableByName('bottomNavItem/lineHeight', modes) ?? 14;
+  const labelColor = getVariableByName('bottomNavItem/label/color', modes) || '#0d0d0f';
+  const resolvedIconColor = iconColorOverride || getVariableByName('bottomNavItem/icon/color', modes) || '#ad8545';
+  const resolvedIconSize = iconSizeOverride ?? 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 = EMPTY_MODES,
   onPress,
   disabled = false,
   style,
@@ -37,54 +82,21 @@ function BottomNavItem({
   const {
     modes: globalModes
   } = useTokens();
-  const modes = {
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
     ...globalModes,
     ...propModes
-  };
+  }, [globalModes, propModes]);
+  const tokens = useMemo(() => resolveBottomNavItemTokens(modes, disabled, iconColorOverride, iconSizeOverride), [modes, disabled, iconColorOverride, iconSizeOverride]);
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
-  const pressedStyle = {
-    opacity: 0.7
-  };
-  const focusStyle = {
-    borderBottomWidth: 2,
-    borderBottomColor: '#222'
-  };
-  const hoverStyle = {
-    opacity: 0.85
-  };
-  // Resolve spacing and typography
-  const gap = getVariableByName('bottomNavItem/gap', modes) ?? 6;
-  const fontFamily = getVariableByName('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium';
-  const fontWeightRaw = getVariableByName('bottomNavItem/fontWeight', modes) ?? 500;
-  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
-  const fontSize = getVariableByName('bottomNavItem/fontSize', modes) ?? 11;
-  const lineHeight = getVariableByName('bottomNavItem/lineHeight', modes) ?? 14;
-
-  // Resolve Label Color
-  const labelColor = getVariableByName('bottomNavItem/label/color', modes) || '#0d0d0f';
-
-  // Resolve icon appearance
-  const resolvedIconColor = iconColorOverride || getVariableByName('bottomNavItem/icon/color', modes) || '#ad8545';
-  const resolvedIconSize = iconSizeOverride ?? 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 = 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 = usePressableWebSupport({
     restProps: rest,
     onPress: disabled ? undefined : onPress,
@@ -92,23 +104,50 @@ function BottomNavItem({
     accessibilityLabel: defaultAccessibilityLabel,
     webAccessibilityProps
   });
-  const renderContent = () => /*#__PURE__*/_jsxs(_Fragment, {
+  const composedTextStyle = useMemo(() => labelStyle ? [tokens.textStyle, labelStyle] : tokens.textStyle, [tokens.textStyle, labelStyle]);
+  const renderContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Icon, {
       name: iconName,
-      size: resolvedIconSize,
-      color: resolvedIconColor,
+      size: tokens.iconSize,
+      color: tokens.iconColor,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no"
     }), /*#__PURE__*/_jsx(Text, {
-      style: [textStyle, labelStyle],
+      style: composedTextStyle,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: label
     })]
   });
+  const staticContainerStyle = useMemo(() => style ? [tokens.baseContainerStyle, style] : tokens.baseContainerStyle, [tokens.baseContainerStyle, style]);
+  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 handleHoverIn = useCallback(e => {
+    if (IS_WEB) setIsHovered(true);
+    userHandlersRef.current.onHoverIn?.(e);
+  }, []);
+  const handleHoverOut = useCallback(e => {
+    if (IS_WEB) setIsHovered(false);
+    userHandlersRef.current.onHoverOut?.(e);
+  }, []);
+  const pressableStyle = 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__*/_jsx(View, {
-      style: [baseContainerStyle, style],
+      style: staticContainerStyle,
       accessibilityRole: "tab",
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint,
@@ -117,7 +156,7 @@ function BottomNavItem({
         ...accessibilityState
       },
       ...rest,
-      children: renderContent()
+      children: renderContent
     });
   }
   return /*#__PURE__*/_jsx(Pressable, {
@@ -131,35 +170,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
   });
 }
-export default BottomNavItem;
+export default /*#__PURE__*/React.memo(BottomNavItem);

package/lib/module/components/Button/Button.js

@@ -1,11 +1,121 @@
 "use strict";
 
-import React, { useMemo, useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Platform, Pressable, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ---------------------------------------------------------------------------
+// Module-scope constants — never re-allocated per render.
+// ---------------------------------------------------------------------------
+
+const IS_WEB = Platform.OS === 'web';
+const IS_IOS = 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 = getVariableByName('button/background', modes) || '#cfa159';
+  const borderColor = getVariableByName('button/border/color', modes) || 'rgba(255,255,255,0)';
+  const borderWidth = getVariableByName('button/border/size', modes);
+  const radius = getVariableByName('button/radius', modes) || 9999;
+  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes) || 20;
+  const paddingVertical = getVariableByName('button/padding/vertical', modes) || 12;
+  const gap = getVariableByName('button/gap', modes) || 8;
+  const fontFamily = getVariableByName('button/fontFamily', modes) || 'System';
+  const fontWeightValue = getVariableByName('button/fontWeight', modes) || 700;
+  const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
+  const lineHeight = getVariableByName('button/lineHeight', modes) || 19;
+  const fontSize = getVariableByName('button/fontSize', modes) || 16;
+  const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a';
+  const iconSize = 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 = getVariableByName('button/background', pressedModes) || backgroundColor;
+  const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor;
+  const pressedTextColor = 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 = getVariableByName('button/background', hoverModes) || backgroundColor;
+    const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor;
+    hoverTextColor = 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.
  *
@@ -24,15 +134,31 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @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 = EMPTY_MODES,
   onPress,
   disabled = false,
   style,
@@ -43,85 +169,50 @@ function Button({
   webAccessibilityProps,
   ...rest
 }) {
-  // Resolve design tokens with the provided modes
-  const backgroundColor = getVariableByName('button/background', modes) || '#cfa159';
-  const borderColor = getVariableByName('button/border/color', modes) || 'rgba(255,255,255,0)';
-  const borderWidth = getVariableByName('button/border/size', modes);
-  const radius = getVariableByName('button/radius', modes) || 9999;
-  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes) || 20;
-  const paddingVertical = getVariableByName('button/padding/vertical', modes) || 12;
-  const gap = getVariableByName('button/gap', modes) || 8;
-  const fontFamily = getVariableByName('button/fontFamily', modes) || 'System';
-  const fontWeightValue = getVariableByName('button/fontWeight', modes) || 700;
-  const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
-  const lineHeight = getVariableByName('button/lineHeight', modes) || 19;
-  const fontSize = getVariableByName('button/fontSize', modes) || 16;
-  const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a';
-  const iconColor = textColor;
-  const iconSize = 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] = useState(false);
-  const [isPressed, setIsPressed] = useState(false);
-  const hoverModes = {
-    ...modes,
-    "Button / State": "Hover"
-  };
-  const hoverBg = getVariableByName('button/background', hoverModes) || backgroundColor;
-  const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor;
-  const hoverTextColor = getVariableByName('button/foreground', hoverModes) || textColor;
-  const hoverIconColor = hoverTextColor;
-  const pressedModes = {
-    ...modes,
-    "Button / State": "Pressed"
-  };
-  const pressedBg = getVariableByName('button/background', pressedModes) || backgroundColor;
-  const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor;
-  const pressedTextColor = 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 = useRef({});
+  userHandlersRef.current.onPressIn = rest?.onPressIn;
+  userHandlersRef.current.onPressOut = rest?.onPressOut;
+  userHandlersRef.current.onHoverIn = rest?.onHoverIn;
+  userHandlersRef.current.onHoverOut = rest?.onHoverOut;
+  const tokens = 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 = 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__*/_jsx(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 = useMemo(() => ({
-    marginRight: accessoryOffset
-  }), [accessoryOffset]);
+    marginRight: tokens.accessoryOffset
+  }), [tokens.accessoryOffset]);
   const trailingAccessoryStyle = 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);
@@ -134,14 +225,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 = useCallback(e => {
+    userHandlersRef.current.onPressIn?.(e);
+  }, []);
+  const handlePressOut = useCallback(e => {
+    userHandlersRef.current.onPressOut?.(e);
+  }, []);
+  const handleHoverIn = useCallback(e => {
+    if (IS_WEB) setIsHovered(true);
+    userHandlersRef.current.onHoverIn?.(e);
+  }, []);
+  const handleHoverOut = 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 = 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.');
@@ -164,25 +273,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__*/_jsx(View, {
       style: leadingAccessoryStyle,
@@ -191,7 +287,7 @@ function Button({
       style: trailingAccessoryStyle,
       children: /*#__PURE__*/_jsx(Icon, {
         name: icon,
-        size: iconSize,
+        size: tokens.iconSize,
         color: activeIconColor,
         accessibilityElementsHidden: true,
         importantForAccessibility: "no"
@@ -202,4 +298,5 @@ function Button({
     }) : null]
   });
 }
+const Button = /*#__PURE__*/React.memo(ButtonImpl);
 export default Button;

package/lib/module/components/ButtonGroup/ButtonGroup.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
 import IconButton from '../IconButton/IconButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -25,7 +25,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 function ButtonGroup({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   // Resolve design tokens

package/lib/module/components/Card/Card.js

@@ -3,6 +3,7 @@
 import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 
 /**
  * Context to share 'modes' with child components like Card.Title and Card.SupportText.
@@ -27,7 +28,7 @@ const CardContext = /*#__PURE__*/createContext({});
 export function Card({
   media,
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   mediaAspectRatio = 154 / 116,
   style
 }) {

package/lib/module/components/CardCTA/CardCTA.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text } 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 IconCapsule from '../IconCapsule/IconCapsule';
 import Button from '../Button/Button';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -14,7 +14,7 @@ function CardCTA({
   iconName = 'ic_upi_number',
   buttonLabel = 'Button',
   onPressButton,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   iconSlot,
   buttonSlot,
   style