@oxyhq/bloom 0.6.8 → 0.6.9

package/lib/typescript/module/accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmF,MAAM,OAAO,CAAC;AAMxG,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EAEtB,MAAM,SAAS,CAAC;AA+OjB,eAAO,MAAM,SAAS,4CAA2B,CAAC;AAGlD,eAAO,MAAM,aAAa,gDAA+B,CAAC;AAG1D,eAAO,MAAM,gBAAgB,mDAAkC,CAAC;AAGhE,eAAO,MAAM,gBAAgB,mDAAkC,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmF,MAAM,OAAO,CAAC;AAOxG,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EAEtB,MAAM,SAAS,CAAC;AAsPjB,eAAO,MAAM,SAAS,4CAA2B,CAAC;AAGlD,eAAO,MAAM,aAAa,gDAA+B,CAAC;AAG1D,eAAO,MAAM,gBAAgB,mDAAkC,CAAC;AAGhE,eAAO,MAAM,gBAAgB,mDAAkC,CAAC"}

package/lib/typescript/module/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAe7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA0MtE,eAAO,MAAM,MAAM,yCAAwB,CAAC;AAG5C,eAAO,MAAM,aAAa,oCAAgB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,6CAEpE,CAAC;AAGH,eAAO,MAAM,eAAe,oCAAgB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,6CAEtE,CAAC;AAGH,eAAO,MAAM,UAAU,oCAAgB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,6CAEjE,CAAC;AAGH,eAAO,MAAM,WAAW,oCAAgB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,6CAElE,CAAC;AAGH,eAAO,MAAM,aAAa,oCAAgB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,6CAEpE,CAAC;AAGH,eAAO,MAAM,UAAU,oCAAgB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,6CAEjE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAgB7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAmOtE,eAAO,MAAM,MAAM,yCAAwB,CAAC;AAG5C,eAAO,MAAM,aAAa,oCAAgB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,6CAEpE,CAAC;AAGH,eAAO,MAAM,eAAe,oCAAgB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,6CAEtE,CAAC;AAGH,eAAO,MAAM,UAAU,oCAAgB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,6CAEjE,CAAC;AAGH,eAAO,MAAM,WAAW,oCAAgB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,6CAElE,CAAC;AAGH,eAAO,MAAM,aAAa,oCAAgB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,6CAEpE,CAAC;AAGH,eAAO,MAAM,UAAU,oCAAgB,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,6CAEjE,CAAC"}

package/lib/typescript/module/card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAK7C,OAAO,KAAK,EACV,SAAS,EACT,eAAe,EACf,aAAa,EACb,eAAe,EACf,cAAc,EACd,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAwKjB,eAAO,MAAM,IAAI,uCAA0B,CAAC;AAG5C,eAAO,MAAM,UAAU,6CAA4B,CAAC;AAGpD,eAAO,MAAM,QAAQ,2CAA0B,CAAC;AAGhD,eAAO,MAAM,UAAU,6CAA4B,CAAC;AAGpD,eAAO,MAAM,SAAS,4CAA2B,CAAC;AAGlD,eAAO,MAAM,eAAe,kDAAiC,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAM7C,OAAO,KAAK,EACV,SAAS,EACT,eAAe,EACf,aAAa,EACb,eAAe,EACf,cAAc,EACd,oBAAoB,EACrB,MAAM,SAAS,CAAC;AA+KjB,eAAO,MAAM,IAAI,uCAA0B,CAAC;AAG5C,eAAO,MAAM,UAAU,6CAA4B,CAAC;AAGpD,eAAO,MAAM,QAAQ,2CAA0B,CAAC;AAGhD,eAAO,MAAM,UAAU,6CAA4B,CAAC;AAGpD,eAAO,MAAM,SAAS,4CAA2B,CAAC;AAGlD,eAAO,MAAM,eAAe,kDAAiC,CAAC"}

package/lib/typescript/module/segmented-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,IAAI,EACJ,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAkBtB;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACrC,KAAK,EACL,IAAc,EACd,IAAc,EACd,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,2CAoEA;AAMD,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACvC,2CA2FA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,GAAG,IAAI,CACnE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,OAAO,GAAG,UAAU,CACrB,2CAyBA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,IAAI,EACJ,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAmBtB;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACrC,KAAK,EACL,IAAc,EACd,IAAc,EACd,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,2CAoEA;AAMD,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACvC,2CAkGA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,GAAG,IAAI,CACnE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,OAAO,GAAG,UAAU,CACrB,2CAyBA"}

package/lib/typescript/module/settings-list/SettingsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsList.d.ts","sourceRoot":"","sources":["../../../../src/settings-list/SettingsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAoBjB,eAAO,MAAM,gBAAgB,mDAoG3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,oDA6C5B,CAAC;AAIH,eAAO,MAAM,mBAAmB,sDAY/B,CAAC"}
+{"version":3,"file":"SettingsList.d.ts","sourceRoot":"","sources":["../../../../src/settings-list/SettingsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAKpC,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAoBjB,eAAO,MAAM,gBAAgB,mDA0G3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,oDA6C5B,CAAC;AAIH,eAAO,MAAM,mBAAmB,sDAY/B,CAAC"}

package/lib/typescript/module/toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAKL,KAAK,qBAAqB,EAC3B,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAWzC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,EAAE,EACF,IAAI,GACL,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;CACjB,2CAOA;AAED,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAiBhE;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,kDAgBxD;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAiB/D;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CAqCA"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAKL,KAAK,qBAAqB,EAC3B,MAAM,cAAc,CAAC;AAMtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAWzC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,EAAE,EACF,IAAI,GACL,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;CACjB,2CAOA;AAED,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAiBhE;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,kDAgBxD;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAiB/D;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CA0CA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/accordion/Accordion.tsx

@@ -2,6 +2,7 @@ import React, { createContext, memo, useCallback, useContext, useEffect, useMemo
 import { View, Text, Pressable, Animated, type ViewStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { useInteractionState } from '../hooks/useInteractionState';
 import { animation, borderRadius, space } from '../styles/tokens';
 import { SUPPORTS_NATIVE_DRIVER } from '../styles/native-driver';
 import type {
@@ -132,6 +133,11 @@ const AccordionTriggerComponent: React.FC<AccordionTriggerProps> = ({
   const { toggle } = useContext(AccordionContext);
   const { value, isExpanded, disabled } = useContext(AccordionItemContext);
   const rotateAnim = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+  // Drive press-opacity via state, not Pressable's function-form `style`,
+  // which NativeWind v4's css-interop swallows (dropping the trigger's base
+  // layout: flexDirection, padding, gap).
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } =
+    useInteractionState();
 
   useEffect(() => {
     Animated.spring(rotateAnim, {
@@ -154,7 +160,7 @@ const AccordionTriggerComponent: React.FC<AccordionTriggerProps> = ({
 
   return (
     <Pressable
-      style={({ pressed }) => [
+      style={[
         {
           flexDirection: 'row',
           alignItems: 'center',
@@ -166,6 +172,8 @@ const AccordionTriggerComponent: React.FC<AccordionTriggerProps> = ({
         style,
       ]}
       onPress={handlePress}
+      onPressIn={disabled ? undefined : onPressIn}
+      onPressOut={disabled ? undefined : onPressOut}
       disabled={disabled}
       accessibilityRole="button"
       accessibilityState={{ expanded: isExpanded, disabled }}

package/src/button/Button.tsx

@@ -13,6 +13,7 @@ import {
 
 import { useTheme } from '../theme/use-theme';
 import { usePressAnimation } from '../hooks/usePressAnimation';
+import { useInteractionState } from '../hooks/useInteractionState';
 import type { ButtonProps } from './types';
 
 export type { ButtonProps, ButtonVariant, ButtonSize } from './types';
@@ -65,9 +66,34 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   const theme = useTheme();
   const hasScaleFeedback = SCALE_VARIANTS.has(variant);
   const isInteractionBlocked = disabled || loading;
-  const { scaleAnim, onPressIn, onPressOut } = usePressAnimation(
-    hasScaleFeedback && !isInteractionBlocked ? PRESS_SCALE : undefined,
-  );
+  const { scaleAnim, onPressIn: onScalePressIn, onPressOut: onScalePressOut } =
+    usePressAnimation(
+      hasScaleFeedback && !isInteractionBlocked ? PRESS_SCALE : undefined,
+    );
+  // Non-scale variants (icon/ghost/text) convey press feedback via an opacity
+  // dip. We drive it through component state + onPressIn/onPressOut rather than
+  // Pressable's function-form `style` because NativeWind v4's css-interop
+  // rewrites the `style` prop of every JSX element and swallows the function
+  // form, which would drop ALL base styles (background, radius, padding,
+  // minHeight). A static style array is merged correctly by css-interop.
+  const { state: pressed, onIn: onPressedIn, onOut: onPressedOut } =
+    useInteractionState();
+
+  const handlePressIn = useMemo(() => {
+    if (isInteractionBlocked) return undefined;
+    return () => {
+      onScalePressIn();
+      onPressedIn();
+    };
+  }, [isInteractionBlocked, onScalePressIn, onPressedIn]);
+
+  const handlePressOut = useMemo(() => {
+    if (isInteractionBlocked) return undefined;
+    return () => {
+      onScalePressOut();
+      onPressedOut();
+    };
+  }, [isInteractionBlocked, onScalePressOut, onPressedOut]);
 
   const baseStyles = useMemo((): ViewStyle => {
     const sizeConfig = SIZE_CONFIG[size];
@@ -163,15 +189,15 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     <Animated.View style={hasScaleFeedback ? { transform: [{ scale: scaleAnim }] } : undefined}>
       <Pressable
         {...(resolvedClassName ? { className: resolvedClassName } as Record<string, string> : {})}
-        style={({ pressed }) => [
+        style={[
           baseStyles,
           disabled && !loading && { opacity: 0.5 },
           pressed && !hasScaleFeedback && !isInteractionBlocked && { opacity: resolvedActiveOpacity },
           style,
         ]}
         onPress={isInteractionBlocked ? undefined : onPress}
-        onPressIn={isInteractionBlocked ? undefined : onPressIn}
-        onPressOut={isInteractionBlocked ? undefined : onPressOut}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
         disabled={isInteractionBlocked}
         hitSlop={hitSlop ?? defaultHitSlop}
         accessibilityLabel={accessibilityLabel}

package/src/card/Card.tsx

@@ -2,6 +2,7 @@ import React, { memo, useMemo } from 'react';
 import { View, Text, Pressable, Platform, type ViewStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { useInteractionState } from '../hooks/useInteractionState';
 import { borderRadius, space } from '../styles/tokens';
 import type {
   CardProps,
@@ -22,6 +23,11 @@ const CardRootComponent: React.FC<CardProps> = ({
   testID,
 }) => {
   const theme = useTheme();
+  // Drive the press-opacity via state instead of Pressable's function-form
+  // `style`, which NativeWind v4's css-interop swallows (dropping the base
+  // container style: background, radius, border, shadow).
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } =
+    useInteractionState();
 
   const containerStyle = useMemo((): ViewStyle => {
     const base: ViewStyle = {
@@ -58,13 +64,15 @@ const CardRootComponent: React.FC<CardProps> = ({
   if (onPress) {
     return (
       <Pressable
-        style={({ pressed }) => [
+        style={[
           containerStyle,
-          pressed && { opacity: 0.85 },
+          pressed && !disabled && { opacity: 0.85 },
           disabled && { opacity: 0.5 },
           style,
         ]}
         onPress={onPress}
+        onPressIn={disabled ? undefined : onPressIn}
+        onPressOut={disabled ? undefined : onPressOut}
         disabled={disabled}
         accessibilityLabel={accessibilityLabel}
         accessibilityRole="button"

package/src/segmented-control/index.tsx

@@ -20,6 +20,7 @@ import {
 import Animated, { Easing, LinearTransition } from 'react-native-reanimated';
 
 import { useTheme } from '../theme/use-theme';
+import { useInteractionState } from '../hooks/useInteractionState';
 import { atoms as a, platform } from '../styles';
 
 const InternalContext = createContext<{
@@ -167,6 +168,11 @@ export function Item({
   const [position, setPosition] = useState<{ x: number; width: number } | null>(
     null,
   );
+  // Drive press-opacity via state, not Pressable's function-form `style`:
+  // NativeWind v4's css-interop swallows the function form, which would drop
+  // the segment's base layout styles (flex_1, padding, minHeight, radius).
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } =
+    useInteractionState();
 
   const ctx = useContext(InternalContext);
   if (!ctx) {
@@ -230,13 +236,15 @@ export function Item({
       }}>
       <Pressable
         onPress={onPress}
+        onPressIn={disabled ? undefined : onPressIn}
+        onPressOut={disabled ? undefined : onPressOut}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityState={{ selected: active, disabled: !!disabled }}
         role={itemRole}
         disabled={disabled}
         testID={testID}
-        style={({ pressed }) => [
+        style={[
           a.flex_1,
           a.flex_row,
           a.align_center,

package/src/settings-list/SettingsList.tsx

@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import { View, Text, Pressable, StyleSheet } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { useInteractionState } from '../hooks/useInteractionState';
 import type {
   SettingsListItemProps,
   SettingsListGroupProps,
@@ -45,6 +46,10 @@ export const SettingsListItem = memo<SettingsListItemProps>(function SettingsLis
   const hasChevron = showChevron ?? Boolean(onPress);
   const titleColor = destructive ? theme.colors.error : theme.colors.text;
   const pressedOpacity = disabled ? 1 : 0.6;
+  // Drive press-opacity via state, not Pressable's function-form `style`,
+  // which NativeWind v4's css-interop swallows.
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } =
+    useInteractionState();
 
   const role = accessibilityRole ?? (onPress ? 'button' : 'none');
   const label = accessibilityLabel ?? title;
@@ -100,13 +105,15 @@ export const SettingsListItem = memo<SettingsListItemProps>(function SettingsLis
     return (
       <Pressable
         onPress={onPress}
+        onPressIn={disabled ? undefined : onPressIn}
+        onPressOut={disabled ? undefined : onPressOut}
         disabled={disabled}
          android_ripple={{ color: theme.colors.border }}
          accessibilityRole={role}
          accessibilityLabel={label}
          accessibilityHint={accessibilityHint}
         accessibilityState={disabled ? { disabled: true } : undefined}
-        style={({ pressed }) => [
+        style={[
           disabled && styles.disabled,
           pressed && { opacity: pressedOpacity },
         ]}

package/src/toast/Toast.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { useInteractionState } from '../hooks/useInteractionState';
 import type { ThemeColors } from '../theme/types';
 import { dismiss } from './sonner';
 import type { ToastType } from './types';
@@ -106,6 +107,11 @@ export function Action({
   const { colors } = useTheme();
   const { type, id } = useContext(ToastConfigContext);
   const actionColors = useActionColors({ type, colors });
+  // Drive the pressed visual via state, not Pressable's function-form `style`
+  // / function-children, which NativeWind v4's css-interop swallows (dropping
+  // the base button style: padding, radius, alignSelf).
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } =
+    useInteractionState();
 
   const handlePress = (e: GestureResponderEvent) => {
     dismiss(id);
@@ -116,7 +122,9 @@ export function Action({
     <Pressable
       {...rest}
       onPress={handlePress}
-      style={({ pressed }) => [
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      style={[
         styles.actionButton,
         {
           backgroundColor: pressed
@@ -124,19 +132,17 @@ export function Action({
             : actionColors.base.backgroundColor,
         },
       ]}>
-      {({ pressed }) => (
-        <RNText
-          style={[
-            styles.actionText,
-            {
-              color: pressed
-                ? actionColors.interacted.textColor
-                : actionColors.base.textColor,
-            },
-          ]}>
-          {children}
-        </RNText>
-      )}
+      <RNText
+        style={[
+          styles.actionText,
+          {
+            color: pressed
+              ? actionColors.interacted.textColor
+              : actionColors.base.textColor,
+          },
+        ]}>
+        {children}
+      </RNText>
     </Pressable>
   );
 }