jfs-components 0.0.62 → 0.0.63

package/lib/commonjs/components/Carousel/Carousel.js

@@ -10,6 +10,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); }
 // ---------------------------------------------------------------------------
@@ -17,7 +18,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // ---------------------------------------------------------------------------
 
 const CarouselContext = /*#__PURE__*/(0, _react.createContext)({
-  modes: {},
+  modes: _reactUtils.EMPTY_MODES,
   activeIndex: 0,
   totalItems: 0,
   goTo: () => {},
@@ -35,7 +36,7 @@ const CarouselContext = /*#__PURE__*/(0, _react.createContext)({
 
 function Carousel({
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   autoPlay = false,
   autoPlayInterval = 4000,
   showPagination = true,

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSvg = _interopRequireWildcard(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 _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); }
 /**
@@ -63,7 +64,7 @@ function Checkbox({
   defaultChecked = false,
   onValueChange,
   disabled = false,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel
 }) {

package/lib/commonjs/components/ChipGroup/ChipGroup.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function ChipGroup({
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   testID
 }) {

package/lib/commonjs/components/ChipSelect/ChipSelect.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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,7 +19,7 @@ function ChipSelect({
   label = 'Date',
   active = false,
   icon = 'ic_calendar_week',
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   labelSlot,
   onPress

package/lib/commonjs/components/DebitCard/DebitCard.js

@@ -21,7 +21,7 @@ function DebitCard({
   cardArtSource = defaultCardArt,
   bankLogoSlot,
   providerLogoSlot,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const {

package/lib/commonjs/components/Disclaimer/Disclaimer.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 }; }
 /**
@@ -33,7 +34,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function Disclaimer({
   disclaimer = 'All financial services are provided by Jio Payments Bank Pvt. Ltd.',
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   textStyle,
   accessibilityLabel,

package/lib/commonjs/components/Divider/Divider.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 }; }
 /**
@@ -36,7 +37,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function Divider({
   direction = 'horizontal',
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel = undefined
 }) {

package/lib/commonjs/components/Drawer/Drawer.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 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); }
 const AnimatedScrollView = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeGestureHandler.ScrollView);
@@ -49,7 +50,7 @@ function rubberBand(value, min, max, friction = 0.55) {
  * Uses react-native-gesture-handler and react-native-reanimated.
  */
 function Drawer({
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   title,
   header,

package/lib/commonjs/components/EmptyState/EmptyState.js

@@ -10,6 +10,7 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
 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 _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); }
@@ -24,7 +25,7 @@ function EmptyState({
   showDescription = true,
   iconSlot,
   buttonSlot,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   testID
 }) {

package/lib/commonjs/components/FilterBar/FilterBar.js

@@ -37,7 +37,7 @@ function FilterBar({
   onChangeText,
   children,
   renderInput,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel,
   accessibilityHint,

package/lib/commonjs/components/Form/Form.js

@@ -9,6 +9,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 _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 FormContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -19,7 +20,7 @@ function Form({
   children,
   validationErrors: externalErrors,
   onSubmit,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel,
   testID

package/lib/commonjs/components/FormField/FormField.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 _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _TextInput = _interopRequireDefault(require("../TextInput/TextInput"));
 var _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
@@ -20,7 +21,7 @@ function useFormField(props) {
     isInvalid = false,
     supportText,
     errorMessage,
-    modes: propModes = {},
+    modes: propModes = _reactUtils.EMPTY_MODES,
     onFocus,
     onBlur
   } = props;
@@ -146,7 +147,7 @@ function FormField({
   isInvalid = false,
   supportText,
   errorMessage,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   onFocus,
   onBlur,

package/lib/commonjs/components/HStack/HStack.js

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

package/lib/commonjs/components/HoldingsCard/HoldingsCard.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _RadioButton = _interopRequireDefault(require("../RadioButton/RadioButton"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const GRID_COLUMNS = 3;
@@ -36,7 +37,7 @@ function HoldingsCard({
   selected = false,
   disabled = false,
   onPress,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   testID
 }) {

package/lib/commonjs/components/IconButton/IconButton.js

@@ -9,44 +9,78 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 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); }
+// ---------------------------------------------------------------------------
+// Module-scope constants
+// ---------------------------------------------------------------------------
+
+const IS_WEB = _reactNative.Platform.OS === 'web';
+const IS_IOS = _reactNative.Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+
+// Pressed visual is applied through Pressable's style callback so the host
+// view updates without scheduling a React render. Hover/focus stay mirrored
+// in React state because they're sustained visual states (web only).
+const pressedOverlayStyle = {
+  opacity: 0.7
+};
+const hoverOverlayStyle = {
+  opacity: 0.85
+};
+const focusOverlayStyle = {
+  borderWidth: 1,
+  borderColor: '#222'
+};
+function resolveIconButtonTokens(modes, disabled) {
+  const radiusRaw = (0, _figmaVariablesResolver.getVariableByName)('iconButton/radius', modes) ?? 9999;
+  const padding = (0, _figmaVariablesResolver.getVariableByName)('iconButton/padding', modes) ?? 12;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/background', modes) ?? '#cfa159';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/border/color', modes) ?? '#ffffff00';
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/border/size', modes) ?? 1;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/color', modes) ?? '#0f0d0a';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/size', modes) ?? 18;
+
+  // 9999 is the design-token sentinel for "perfect circle"
+  const buttonSize = padding * 2 + iconSize;
+  const borderRadius = radiusRaw === 9999 ? buttonSize / 2 : radiusRaw;
+  return {
+    baseContainerStyle: {
+      width: buttonSize,
+      height: buttonSize,
+      borderRadius,
+      borderWidth: borderSize,
+      borderColor,
+      backgroundColor,
+      overflow: 'hidden',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding,
+      opacity: disabled ? 0.5 : 1
+    },
+    iconColor,
+    iconSize
+  };
+}
+
 /**
  * IconButton component that displays an icon within a pressable button container.
- * 
- * This component displays an icon within a styled button container that can be pressed.
- * All styling values are resolved from Figma design tokens using the provided modes.
- * 
- * @component
- * @param {Object} props - Component props
- * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
- * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
- * @param {Function} [props.onPress] - Callback function called when the button is pressed
- * @param {boolean} [props.disabled=false] - Whether the button is disabled
- * @param {Object} [props.style] - Additional styles for the container
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
- * @param {Object} [props.accessibilityState] - Additional accessibility state information
- * 
- * @example
- * ```jsx
- * // Default icon button
- * <IconButton modes={{}} />
- * 
- * // Custom icon with size mode
- * <IconButton iconName="ic_rupee" modes={{"Button / Size": "M"}} />
- * 
- * // With appearance mode
- * <IconButton modes={{"Appearance": "high"}} onPress={() => console.log('pressed')} />
- * 
- * // With accessibility label
- * <IconButton iconName="ic_search" accessibilityLabel={undefined} accessibilityHint="Opens the search screen" />
- * ```
+ *
+ * Performance notes:
+ *  - Token reads collapsed into a single `useMemo([modes, disabled, isToggle, isActive])`.
+ *  - Press visual goes through Pressable's `({ pressed })` style callback so
+ *    a scroll-cancelled touch never schedules a React render. iOS gets
+ *    `unstable_pressDelay={130}`.
+ *  - Hover and focus state are mirrored on web only (gated setters).
+ *  - The previous version had a redundant `manualPressStyle` (a duplicate
+ *    pressed transform mirrored via React state) — removed.
+ *  - Wrapped in `React.memo`.
  */
 function IconButton({
-  iconName = "ic_card",
-  modes = {},
+  iconName = 'ic_card',
+  modes = _reactUtils.EMPTY_MODES,
   onPress,
   disabled = false,
   style,
@@ -60,63 +94,30 @@ function IconButton({
   isActive = false,
   ...rest
 }) {
+  // Merge explicit props with modes for token resolution. Memoize the merged
+  // object so its identity is stable when none of the inputs change — that
+  // keeps the resolver's WeakMap cache hot.
+  const componentModes = (0, _react.useMemo)(() => ({
+    ...modes,
+    isToggle,
+    isActive
+  }), [modes, isToggle, isActive]);
+  const tokens = (0, _react.useMemo)(() => resolveIconButtonTokens(componentModes, disabled), [componentModes, disabled]);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isHovered, setIsHovered] = (0, _react.useState)(false);
-  const [isPressed, setIsPressed] = (0, _react.useState)(false);
-
-  // Merge explicit props with modes for token resolution
-  // This allows the variable resolver to pick up isToggle and isActive specific tokens
-  const componentModes = {
-    ...modes,
-    'isToggle': isToggle,
-    'isActive': isActive
-  };
-
-  // Resolve design tokens using only the Figma-defined base tokens for Icon Button (node 72:14)
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('iconButton/radius', componentModes) ?? 9999;
-  const padding = (0, _figmaVariablesResolver.getVariableByName)('iconButton/padding', componentModes) ?? 12;
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/background', componentModes) ?? '#cfa159';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/border/color', componentModes) ?? '#ffffff00';
-  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/border/size', componentModes) ?? 1;
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/color', componentModes) ?? '#0f0d0a';
-  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/size', componentModes) ?? 18;
+  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;
 
   // Determine which icon to display
-  // If isToggle is yes, use active/inactive icons based on isActive state
-  // Otherwise use standard iconName
-  let finalIconName = iconName;
-  if (isToggle) {
-    if (isActive && activeIcon) {
-      finalIconName = activeIcon;
-    } else if (!isActive && inactiveIcon) {
-      finalIconName = inactiveIcon;
-    }
-  }
-
-  // Convert radius to React Native format (if 9999, use padding*2 for perfect circle)
-  // For a button, the size is determined by padding, so radius should be padding*2 for a circle
-  const buttonSize = padding * 2 + iconSize;
-  const borderRadius = radius === 9999 ? buttonSize / 2 : radius;
-
-  // Container base style
-  const baseContainerStyle = {
-    width: buttonSize,
-    height: buttonSize,
-    borderRadius: borderRadius,
-    borderWidth: borderSize,
-    borderColor: borderColor,
-    backgroundColor: backgroundColor,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: padding,
-    opacity: disabled ? 0.5 : 1
-  };
+  const finalIconName = isToggle ? isActive && activeIcon ? activeIcon : !isActive && inactiveIcon ? inactiveIcon : iconName : iconName;
 
   // Generate default accessibility label from icon name if not provided
   const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-
-  // Get web platform support props
   const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
     restProps: rest,
     onPress: disabled ? undefined : onPress,
@@ -124,6 +125,31 @@ function IconButton({
     accessibilityLabel: defaultAccessibilityLabel,
     webAccessibilityProps
   });
+  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 styleCallback = (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]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
     accessibilityRole: "button",
     accessibilityLabel: undefined,
@@ -134,58 +160,22 @@ function IconButton({
     },
     onPress: onPress,
     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);
-    },
-    onHoverIn: e => {
-      setIsHovered(true);
-      rest?.onHoverIn?.(e);
-    },
-    onHoverOut: e => {
-      setIsHovered(false);
-      rest?.onHoverOut?.(e);
-    },
-    style: ({
-      pressed
-    }) => {
-      const pressedStyle = pressed && !disabled ? {
-        opacity: 0.7
-      } : null;
-      const hoverStyle = isHovered && !disabled ? {
-        opacity: 0.85
-      } : null;
-      const focusStyle = isFocused && !disabled ? {
-        borderWidth: 1,
-        borderColor: '#222'
-      } : null;
-      const manualPressStyle = isPressed && !disabled ? {
-        transform: [{
-          scale: 0.98
-        }]
-      } : null;
-      return [baseContainerStyle, style, pressedStyle, hoverStyle, focusStyle, manualPressStyle];
-    },
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onHoverIn: handleHoverIn,
+    onHoverOut: handleHoverOut,
+    unstable_pressDelay: PRESS_DELAY,
+    style: styleCallback,
     ...webProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       name: finalIconName,
-      size: iconSize,
-      color: iconColor,
+      size: tokens.iconSize,
+      color: tokens.iconColor,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no"
     })
   });
 }
-var _default = exports.default = IconButton;
+var _default = exports.default = /*#__PURE__*/_react.default.memo(IconButton);