@oxyhq/bloom 0.28.0 → 0.29.0

package/lib/commonjs/pressable-scale/PressableScale.js

@@ -19,19 +19,26 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 const IS_WEB_TOUCH_DEVICE = _reactNative.Platform.OS === 'web' && typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(pointer: coarse)').matches;
 const SCALE_SUPPORTED = _reactNative.Platform.OS !== 'web' || IS_WEB_TOUCH_DEVICE;
+
+/**
+ * A single animated `Pressable`, built once at module scope so the animated
+ * node identity is stable across renders.
+ */
+const AnimatedPressable = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.Pressable);
 /**
- * A drop-in {@link Pressable} whose content springs to a smaller scale on
- * press-in and back on release. The outer pressable stays full size (so the
- * touch target never shrinks) while an inner wrapper scales.
+ * A drop-in {@link Pressable} that springs to a smaller scale on press-in and
+ * back on release. The scale is applied to the pressable node itself, so a
+ * consumer's `className` / layout styles (e.g. `flex-row items-center`) land on
+ * the same node that animates.
  *
+ * The touch target scales with the content — acceptable at the default ~0.98
+ * (the earlier two-node touch-target-preservation was dropped for simplicity).
  * Honours the OS "reduce motion" setting and disables the effect on non-touch
  * web pointers.
  */
 const PressableScale = exports.PressableScale = /*#__PURE__*/(0, _react.forwardRef)(function PressableScale({
   targetScale = 0.98,
   style,
-  contentContainerStyle,
-  children,
   onPressIn,
   onPressOut,
   ...rest
@@ -44,7 +51,7 @@ const PressableScale = exports.PressableScale = /*#__PURE__*/(0, _react.forwardR
       scale: scale.value
     }]
   }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedPressable, {
     ref: ref,
     accessibilityRole: "button",
     onPressIn: e => {
@@ -63,12 +70,8 @@ const PressableScale = exports.PressableScale = /*#__PURE__*/(0, _react.forwardR
         duration: DURATION
       });
     },
-    style: style,
-    ...rest,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-      style: [animate ? animatedStyle : null, contentContainerStyle],
-      children: children
-    })
+    style: [animate ? animatedStyle : null, style],
+    ...rest
   });
 });
 PressableScale.displayName = 'PressableScale';

package/lib/commonjs/pressable-scale/PressableScale.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DURATION","IS_WEB_TOUCH_DEVICE","Platform","OS","window","matchMedia","matches","SCALE_SUPPORTED","PressableScale","exports","forwardRef","targetScale","style","contentContainerStyle","children","onPressIn","onPressOut","rest","ref","reducedMotion","useReducedMotion","animate","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","jsx","Pressable","accessibilityRole","cancelAnimation","withTiming","duration","View","displayName"],"sourceRoot":"../../../src","sources":["pressable-scale/PressableScale.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DURATION","IS_WEB_TOUCH_DEVICE","Platform","OS","window","matchMedia","matches","SCALE_SUPPORTED","AnimatedPressable","Animated","createAnimatedComponent","Pressable","PressableScale","exports","forwardRef","targetScale","style","onPressIn","onPressOut","rest","ref","reducedMotion","useReducedMotion","animate","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","jsx","accessibilityRole","cancelAnimation","withTiming","duration","displayName"],"sourceRoot":"../../../src","sources":["pressable-scale/PressableScale.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/subtle-hover/SubtleHover.js

@@ -10,49 +10,54 @@ var _index = require("../theme/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
- * True on touch-capable web browsers (coarse pointer). A hover wash only makes
- * sense with a hovering pointer, so it is suppressed on touch web to match
- * native (which has no hover at all).
+ * True on touch-capable web browsers (coarse pointer). The CSS `group-hover`
+ * wash only makes sense with a hovering pointer, so it is suppressed on touch
+ * web to match native (which has no hover at all).
  */const IS_WEB_TOUCH_DEVICE = _reactNative.Platform.OS === 'web' && typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(pointer: coarse)').matches;
-
-/**
- * Web-only style that (a) cross-fades the overlay opacity and (b) promotes it to
- * its own GPU layer so Safari doesn't nudge the layout by a subpixel when the
- * overlay composites on hover. Cast because RN's `ViewStyle` has no `willChange`
- * / `transition*` keys; react-native-web forwards them to the DOM node.
- */
-const WEB_TRANSITION = {
-  transitionProperty: 'opacity',
-  transitionDuration: '0.1s',
-  transitionTimingFunction: 'ease',
-  willChange: 'opacity'
-};
 /**
- * An absolutely-positioned, non-interactive contrast wash that fades in while
- * its parent is hovered. Ported from Bluesky's `SubtleHover`. Pairs naturally
- * with {@link useInteractionState} — pass its `state` as `hover`.
+ * An absolutely-positioned, non-interactive contrast wash. Two modes:
  *
- * Renders nothing on touch-web (no hovering pointer) and on native unless
- * `native` is set. Color comes from the theme's `contrast50` token so the wash
- * tracks the active preset and light/dark mode.
+ * - **CSS `group-hover`** (`active` omitted): the wash fades in on hover purely
+ *   through NativeWind classes — no React state. The parent must carry
+ *   `className="group"`. Web-only (native and touch-web have no hover).
+ * - **JS `active`**: the wash opacity follows the boolean, so several elements
+ *   can light up together (e.g. every post of a thread). Web always; native
+ *   only when `native` is set.
+ *
+ * The wash color comes from the theme's `contrast50` token so it tracks the
+ * active preset and light/dark mode. The web cross-fade is a NativeWind
+ * `transition-opacity` class — no manual `willChange` / web-style casts.
  */
 function SubtleHover({
-  hover,
-  opacity,
+  active,
   style,
   native = false
 }) {
   const theme = (0, _index.useTheme)();
   const isWeb = _reactNative.Platform.OS === 'web';
-  if (isWeb ? IS_WEB_TOUCH_DEVICE : !native) {
-    return null;
+
+  // Full literal class strings (never concatenated fragments) so NativeWind's
+  // compiler statically extracts every variant.
+  if (active === undefined) {
+    // CSS group-hover: a web pointer affordance. Native has no hover, and
+    // neither does touch web — render nothing there.
+    if (!isWeb || IS_WEB_TOUCH_DEVICE) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      className: 'opacity-0 group-hover:opacity-50 dark:group-hover:opacity-40 transition-opacity duration-150',
+      style: [styles.overlay, {
+        backgroundColor: theme.colors.contrast50
+      }, style]
+    });
   }
-  const targetOpacity = opacity ?? (theme.isDark ? 0.4 : 0.5);
+
+  // JS-driven coordinated mode: web always; native only when opted in.
+  if (!isWeb && !native) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    className: 'transition-opacity duration-150',
     style: [styles.overlay, {
       backgroundColor: theme.colors.contrast50,
-      opacity: hover ? targetOpacity : 0
-    }, isWeb ? WEB_TRANSITION : null, style]
+      opacity: active ? theme.isDark ? 0.4 : 0.5 : 0
+    }, style]
   });
 }
 SubtleHover.displayName = 'SubtleHover';

package/lib/commonjs/subtle-hover/SubtleHover.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_index","_jsxRuntime","e","__esModule","default","IS_WEB_TOUCH_DEVICE","Platform","OS","window","matchMedia","matches","WEB_TRANSITION","transitionProperty","transitionDuration","transitionTimingFunction","willChange","SubtleHover","hover","opacity","style","native","theme","useTheme","isWeb","targetOpacity","isDark","jsx","View","styles","overlay","backgroundColor","colors","contrast50","displayName","StyleSheet","create","position","top","left","right","bottom","pointerEvents"],"sourceRoot":"../../../src","sources":["subtle-hover/SubtleHover.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AAAoC,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEpC;AACA;AACA;AACA;AACA,GACA,MAAMG,mBAAmB,GACvBC,qBAAQ,CAACC,EAAE,KAAK,KAAK,IACrB,OAAOC,MAAM,KAAK,WAAW,IAC7B,OAAOA,MAAM,CAACC,UAAU,KAAK,UAAU,IACvCD,MAAM,CAACC,UAAU,CAAC,mBAAmB,CAAC,CAACC,OAAO;;AAEhD;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,cAAc,GAAG;EACrBC,kBAAkB,EAAE,SAAS;EAC7BC,kBAAkB,EAAE,MAAM;EAC1BC,wBAAwB,EAAE,MAAM;EAChCC,UAAU,EAAE;AACd,CAAc;AAoBd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CAAC;EAAEC,KAAK;EAAEC,OAAO;EAAEC,KAAK;EAAEC,MAAM,GAAG;AAAwB,CAAC,EAAE;EACvF,MAAMC,KAAK,GAAG,IAAAC,eAAQ,EAAC,CAAC;EAExB,MAAMC,KAAK,GAAGjB,qBAAQ,CAACC,EAAE,KAAK,KAAK;EACnC,IAAIgB,KAAK,GAAGlB,mBAAmB,GAAG,CAACe,MAAM,EAAE;IACzC,OAAO,IAAI;EACb;EAEA,MAAMI,aAAa,GAAGN,OAAO,KAAKG,KAAK,CAACI,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC;EAE3D,oBACE,IAAAxB,WAAA,CAAAyB,GAAA,EAAC3B,YAAA,CAAA4B,IAAI;IACHR,KAAK,EAAE,CACLS,MAAM,CAACC,OAAO,EACd;MAAEC,eAAe,EAAET,KAAK,CAACU,MAAM,CAACC,UAAU;MAAEd,OAAO,EAAED,KAAK,GAAGO,aAAa,GAAG;IAAE,CAAC,EAChFD,KAAK,GAAGZ,cAAc,GAAG,IAAI,EAC7BQ,KAAK;EACL,CACH,CAAC;AAEN;AAEAH,WAAW,CAACiB,WAAW,GAAG,aAAa;AAEvC,MAAML,MAAM,GAAGM,uBAAU,CAACC,MAAM,CAAC;EAC/BN,OAAO,EAAE;IACPO,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_index","_jsxRuntime","e","__esModule","default","IS_WEB_TOUCH_DEVICE","Platform","OS","window","matchMedia","matches","SubtleHover","active","style","native","theme","useTheme","isWeb","undefined","jsx","View","className","styles","overlay","backgroundColor","colors","contrast50","opacity","isDark","displayName","StyleSheet","create","position","top","left","right","bottom","pointerEvents"],"sourceRoot":"../../../src","sources":["subtle-hover/SubtleHover.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AAAoC,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEpC;AACA;AACA;AACA;AACA,GACA,MAAMG,mBAAmB,GACvBC,qBAAQ,CAACC,EAAE,KAAK,KAAK,IACrB,OAAOC,MAAM,KAAK,WAAW,IAC7B,OAAOA,MAAM,CAACC,UAAU,KAAK,UAAU,IACvCD,MAAM,CAACC,UAAU,CAAC,mBAAmB,CAAC,CAACC,OAAO;AAoBhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CAAC;EAAEC,MAAM;EAAEC,KAAK;EAAEC,MAAM,GAAG;AAAwB,CAAC,EAAE;EAC/E,MAAMC,KAAK,GAAG,IAAAC,eAAQ,EAAC,CAAC;EACxB,MAAMC,KAAK,GAAGX,qBAAQ,CAACC,EAAE,KAAK,KAAK;;EAEnC;EACA;EACA,IAAIK,MAAM,KAAKM,SAAS,EAAE;IACxB;IACA;IACA,IAAI,CAACD,KAAK,IAAIZ,mBAAmB,EAAE,OAAO,IAAI;IAC9C,oBACE,IAAAJ,WAAA,CAAAkB,GAAA,EAACpB,YAAA,CAAAqB,IAAI;MAEDC,SAAS,EACP,8FAA8F;MAElGR,KAAK,EAAE,CAACS,MAAM,CAACC,OAAO,EAAE;QAAEC,eAAe,EAAET,KAAK,CAACU,MAAM,CAACC;MAAW,CAAC,EAAEb,KAAK;IAAE,CAC9E,CAAC;EAEN;;EAEA;EACA,IAAI,CAACI,KAAK,IAAI,CAACH,MAAM,EAAE,OAAO,IAAI;EAClC,oBACE,IAAAb,WAAA,CAAAkB,GAAA,EAACpB,YAAA,CAAAqB,IAAI;IACIC,SAAS,EAAE,iCAAiC;IACnDR,KAAK,EAAE,CACLS,MAAM,CAACC,OAAO,EACd;MACEC,eAAe,EAAET,KAAK,CAACU,MAAM,CAACC,UAAU;MACxCC,OAAO,EAAEf,MAAM,GAAIG,KAAK,CAACa,MAAM,GAAG,GAAG,GAAG,GAAG,GAAI;IACjD,CAAC,EACDf,KAAK;EACL,CACH,CAAC;AAEN;AAEAF,WAAW,CAACkB,WAAW,GAAG,aAAa;AAEvC,MAAMP,MAAM,GAAGQ,uBAAU,CAACC,MAAM,CAAC;EAC/BR,OAAO,EAAE;IACPS,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/pressable-scale/PressableScale.js

@@ -16,19 +16,26 @@ const DURATION = 100;
  */
 const IS_WEB_TOUCH_DEVICE = Platform.OS === 'web' && typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(pointer: coarse)').matches;
 const SCALE_SUPPORTED = Platform.OS !== 'web' || IS_WEB_TOUCH_DEVICE;
+
+/**
+ * A single animated `Pressable`, built once at module scope so the animated
+ * node identity is stable across renders.
+ */
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 /**
- * A drop-in {@link Pressable} whose content springs to a smaller scale on
- * press-in and back on release. The outer pressable stays full size (so the
- * touch target never shrinks) while an inner wrapper scales.
+ * A drop-in {@link Pressable} that springs to a smaller scale on press-in and
+ * back on release. The scale is applied to the pressable node itself, so a
+ * consumer's `className` / layout styles (e.g. `flex-row items-center`) land on
+ * the same node that animates.
  *
+ * The touch target scales with the content — acceptable at the default ~0.98
+ * (the earlier two-node touch-target-preservation was dropped for simplicity).
  * Honours the OS "reduce motion" setting and disables the effect on non-touch
  * web pointers.
  */
 export const PressableScale = /*#__PURE__*/forwardRef(function PressableScale({
   targetScale = 0.98,
   style,
-  contentContainerStyle,
-  children,
   onPressIn,
   onPressOut,
   ...rest
@@ -41,7 +48,7 @@ export const PressableScale = /*#__PURE__*/forwardRef(function PressableScale({
       scale: scale.value
     }]
   }));
-  return /*#__PURE__*/_jsx(Pressable, {
+  return /*#__PURE__*/_jsx(AnimatedPressable, {
     ref: ref,
     accessibilityRole: "button",
     onPressIn: e => {
@@ -60,12 +67,8 @@ export const PressableScale = /*#__PURE__*/forwardRef(function PressableScale({
         duration: DURATION
       });
     },
-    style: style,
-    ...rest,
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [animate ? animatedStyle : null, contentContainerStyle],
-      children: children
-    })
+    style: [animate ? animatedStyle : null, style],
+    ...rest
   });
 });
 PressableScale.displayName = 'PressableScale';

package/lib/module/pressable-scale/PressableScale.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","forwardRef","Platform","Pressable","Animated","cancelAnimation","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","jsx","_jsx","DURATION","IS_WEB_TOUCH_DEVICE","OS","window","matchMedia","matches","SCALE_SUPPORTED","PressableScale","targetScale","style","contentContainerStyle","children","onPressIn","onPressOut","rest","ref","reducedMotion","animate","scale","animatedStyle","transform","value","accessibilityRole","e","duration","View","displayName"],"sourceRoot":"../../../src","sources":["pressable-scale/PressableScale.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SACEC,QAAQ,EACRC,SAAS,QAKJ,cAAc;AACrB,OAAOC,QAAQ,IACbC,eAAe,EACfC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,QACL,yBAAyB;;AAEhC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,MAAMC,QAAQ,GAAG,GAAG;;AAEpB;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mBAAmB,GACvBX,QAAQ,CAACY,EAAE,KAAK,KAAK,IACrB,OAAOC,MAAM,KAAK,WAAW,IAC7B,OAAOA,MAAM,CAACC,UAAU,KAAK,UAAU,IACvCD,MAAM,CAACC,UAAU,CAAC,mBAAmB,CAAC,CAACC,OAAO;AAEhD,MAAMC,eAAe,GAAGhB,QAAQ,CAACY,EAAE,KAAK,KAAK,IAAID,mBAAmB;AAapE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,cAAc,gBAAGlB,UAAU,CACtC,SAASkB,cAAcA,CACrB;EACEC,WAAW,GAAG,IAAI;EAClBC,KAAK;EACLC,qBAAqB;EACrBC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACV,GAAGC;AACL,CAAC,EACDC,GAAG,EACH;EACA,MAAMC,aAAa,GAAGrB,gBAAgB,CAAC,CAAC;EACxC,MAAMsB,OAAO,GAAGX,eAAe,IAAI,CAACU,aAAa;EAEjD,MAAME,KAAK,GAAGtB,cAAc,CAAC,CAAC,CAAC;EAE/B,MAAMuB,aAAa,GAAGzB,gBAAgB,CAAC,OAAO;IAC5C0B,SAAS,EAAE,CAAC;MAAEF,KAAK,EAAEA,KAAK,CAACG;IAAM,CAAC;EACpC,CAAC,CAAC,CAAC;EAEH,oBACEtB,IAAA,CAACR,SAAS;IACRwB,GAAG,EAAEA,GAAI;IACTO,iBAAiB,EAAC,QAAQ;IAC1BV,SAAS,EAAGW,CAAC,IAAK;MAChBX,SAAS,GAAGW,CAAC,CAAC;MACd,IAAI,CAACN,OAAO,EAAE;MACdxB,eAAe,CAACyB,KAAK,CAAC;MACtBA,KAAK,CAACG,KAAK,GAAGxB,UAAU,CAACW,WAAW,EAAE;QAAEgB,QAAQ,EAAExB;MAAS,CAAC,CAAC;IAC/D,CAAE;IACFa,UAAU,EAAGU,CAAC,IAAK;MACjBV,UAAU,GAAGU,CAAC,CAAC;MACf,IAAI,CAACN,OAAO,EAAE;MACdxB,eAAe,CAACyB,KAAK,CAAC;MACtBA,KAAK,CAACG,KAAK,GAAGxB,UAAU,CAAC,CAAC,EAAE;QAAE2B,QAAQ,EAAExB;MAAS,CAAC,CAAC;IACrD,CAAE;IACFS,KAAK,EAAEA,KAAM;IAAA,GACTK,IAAI;IAAAH,QAAA,eAERZ,IAAA,CAACP,QAAQ,CAACiC,IAAI;MAAChB,KAAK,EAAE,CAACQ,OAAO,GAAGE,aAAa,GAAG,IAAI,EAAET,qBAAqB,CAAE;MAAAC,QAAA,EAC3EA;IAAQ,CACI;EAAC,CACP,CAAC;AAEhB,CACF,CAAC;AAEDJ,cAAc,CAACmB,WAAW,GAAG,gBAAgB","ignoreList":[]}
+{"version":3,"names":["React","forwardRef","Platform","Pressable","Animated","cancelAnimation","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","jsx","_jsx","DURATION","IS_WEB_TOUCH_DEVICE","OS","window","matchMedia","matches","SCALE_SUPPORTED","AnimatedPressable","createAnimatedComponent","PressableScale","targetScale","style","onPressIn","onPressOut","rest","ref","reducedMotion","animate","scale","animatedStyle","transform","value","accessibilityRole","e","duration","displayName"],"sourceRoot":"../../../src","sources":["pressable-scale/PressableScale.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SACEC,QAAQ,EACRC,SAAS,QAKJ,cAAc;AACrB,OAAOC,QAAQ,IACbC,eAAe,EACfC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,QACL,yBAAyB;;AAEhC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,MAAMC,QAAQ,GAAG,GAAG;;AAEpB;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mBAAmB,GACvBX,QAAQ,CAACY,EAAE,KAAK,KAAK,IACrB,OAAOC,MAAM,KAAK,WAAW,IAC7B,OAAOA,MAAM,CAACC,UAAU,KAAK,UAAU,IACvCD,MAAM,CAACC,UAAU,CAAC,mBAAmB,CAAC,CAACC,OAAO;AAEhD,MAAMC,eAAe,GAAGhB,QAAQ,CAACY,EAAE,KAAK,KAAK,IAAID,mBAAmB;;AAEpE;AACA;AACA;AACA;AACA,MAAMM,iBAAiB,GAAGf,QAAQ,CAACgB,uBAAuB,CAACjB,SAAS,CAAC;AASrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMkB,cAAc,gBAAGpB,UAAU,CACtC,SAASoB,cAAcA,CAAC;EAAEC,WAAW,GAAG,IAAI;EAAEC,KAAK;EAAEC,SAAS;EAAEC,UAAU;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,EAAE;EAC1F,MAAMC,aAAa,GAAGrB,gBAAgB,CAAC,CAAC;EACxC,MAAMsB,OAAO,GAAGX,eAAe,IAAI,CAACU,aAAa;EAEjD,MAAME,KAAK,GAAGtB,cAAc,CAAC,CAAC,CAAC;EAE/B,MAAMuB,aAAa,GAAGzB,gBAAgB,CAAC,OAAO;IAC5C0B,SAAS,EAAE,CAAC;MAAEF,KAAK,EAAEA,KAAK,CAACG;IAAM,CAAC;EACpC,CAAC,CAAC,CAAC;EAEH,oBACEtB,IAAA,CAACQ,iBAAiB;IAChBQ,GAAG,EAAEA,GAAI;IACTO,iBAAiB,EAAC,QAAQ;IAC1BV,SAAS,EAAGW,CAAC,IAAK;MAChBX,SAAS,GAAGW,CAAC,CAAC;MACd,IAAI,CAACN,OAAO,EAAE;MACdxB,eAAe,CAACyB,KAAK,CAAC;MACtBA,KAAK,CAACG,KAAK,GAAGxB,UAAU,CAACa,WAAW,EAAE;QAAEc,QAAQ,EAAExB;MAAS,CAAC,CAAC;IAC/D,CAAE;IACFa,UAAU,EAAGU,CAAC,IAAK;MACjBV,UAAU,GAAGU,CAAC,CAAC;MACf,IAAI,CAACN,OAAO,EAAE;MACdxB,eAAe,CAACyB,KAAK,CAAC;MACtBA,KAAK,CAACG,KAAK,GAAGxB,UAAU,CAAC,CAAC,EAAE;QAAE2B,QAAQ,EAAExB;MAAS,CAAC,CAAC;IACrD,CAAE;IACFW,KAAK,EAAE,CAACM,OAAO,GAAGE,aAAa,GAAG,IAAI,EAAER,KAAK,CAAE;IAAA,GAC3CG;EAAI,CACT,CAAC;AAEN,CACF,CAAC;AAEDL,cAAc,CAACgB,WAAW,GAAG,gBAAgB","ignoreList":[]}

package/lib/module/subtle-hover/SubtleHover.js

@@ -5,51 +5,56 @@ import { Platform, StyleSheet, View } from 'react-native';
 import { useTheme } from "../theme/index.js";
 
 /**
- * True on touch-capable web browsers (coarse pointer). A hover wash only makes
- * sense with a hovering pointer, so it is suppressed on touch web to match
- * native (which has no hover at all).
+ * True on touch-capable web browsers (coarse pointer). The CSS `group-hover`
+ * wash only makes sense with a hovering pointer, so it is suppressed on touch
+ * web to match native (which has no hover at all).
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const IS_WEB_TOUCH_DEVICE = Platform.OS === 'web' && typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(pointer: coarse)').matches;
-
-/**
- * Web-only style that (a) cross-fades the overlay opacity and (b) promotes it to
- * its own GPU layer so Safari doesn't nudge the layout by a subpixel when the
- * overlay composites on hover. Cast because RN's `ViewStyle` has no `willChange`
- * / `transition*` keys; react-native-web forwards them to the DOM node.
- */
-const WEB_TRANSITION = {
-  transitionProperty: 'opacity',
-  transitionDuration: '0.1s',
-  transitionTimingFunction: 'ease',
-  willChange: 'opacity'
-};
 /**
- * An absolutely-positioned, non-interactive contrast wash that fades in while
- * its parent is hovered. Ported from Bluesky's `SubtleHover`. Pairs naturally
- * with {@link useInteractionState} — pass its `state` as `hover`.
+ * An absolutely-positioned, non-interactive contrast wash. Two modes:
  *
- * Renders nothing on touch-web (no hovering pointer) and on native unless
- * `native` is set. Color comes from the theme's `contrast50` token so the wash
- * tracks the active preset and light/dark mode.
+ * - **CSS `group-hover`** (`active` omitted): the wash fades in on hover purely
+ *   through NativeWind classes — no React state. The parent must carry
+ *   `className="group"`. Web-only (native and touch-web have no hover).
+ * - **JS `active`**: the wash opacity follows the boolean, so several elements
+ *   can light up together (e.g. every post of a thread). Web always; native
+ *   only when `native` is set.
+ *
+ * The wash color comes from the theme's `contrast50` token so it tracks the
+ * active preset and light/dark mode. The web cross-fade is a NativeWind
+ * `transition-opacity` class — no manual `willChange` / web-style casts.
  */
 export function SubtleHover({
-  hover,
-  opacity,
+  active,
   style,
   native = false
 }) {
   const theme = useTheme();
   const isWeb = Platform.OS === 'web';
-  if (isWeb ? IS_WEB_TOUCH_DEVICE : !native) {
-    return null;
+
+  // Full literal class strings (never concatenated fragments) so NativeWind's
+  // compiler statically extracts every variant.
+  if (active === undefined) {
+    // CSS group-hover: a web pointer affordance. Native has no hover, and
+    // neither does touch web — render nothing there.
+    if (!isWeb || IS_WEB_TOUCH_DEVICE) return null;
+    return /*#__PURE__*/_jsx(View, {
+      className: 'opacity-0 group-hover:opacity-50 dark:group-hover:opacity-40 transition-opacity duration-150',
+      style: [styles.overlay, {
+        backgroundColor: theme.colors.contrast50
+      }, style]
+    });
   }
-  const targetOpacity = opacity ?? (theme.isDark ? 0.4 : 0.5);
+
+  // JS-driven coordinated mode: web always; native only when opted in.
+  if (!isWeb && !native) return null;
   return /*#__PURE__*/_jsx(View, {
+    className: 'transition-opacity duration-150',
     style: [styles.overlay, {
       backgroundColor: theme.colors.contrast50,
-      opacity: hover ? targetOpacity : 0
-    }, isWeb ? WEB_TRANSITION : null, style]
+      opacity: active ? theme.isDark ? 0.4 : 0.5 : 0
+    }, style]
   });
 }
 SubtleHover.displayName = 'SubtleHover';

package/lib/module/subtle-hover/SubtleHover.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","StyleSheet","View","useTheme","jsx","_jsx","IS_WEB_TOUCH_DEVICE","OS","window","matchMedia","matches","WEB_TRANSITION","transitionProperty","transitionDuration","transitionTimingFunction","willChange","SubtleHover","hover","opacity","style","native","theme","isWeb","targetOpacity","isDark","styles","overlay","backgroundColor","colors","contrast50","displayName","create","position","top","left","right","bottom","pointerEvents"],"sourceRoot":"../../../src","sources":["subtle-hover/SubtleHover.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAwC,cAAc;AAEzF,SAASC,QAAQ,QAAQ,mBAAU;;AAEnC;AACA;AACA;AACA;AACA;AAJA,SAAAC,GAAA,IAAAC,IAAA;AAKA,MAAMC,mBAAmB,GACvBN,QAAQ,CAACO,EAAE,KAAK,KAAK,IACrB,OAAOC,MAAM,KAAK,WAAW,IAC7B,OAAOA,MAAM,CAACC,UAAU,KAAK,UAAU,IACvCD,MAAM,CAACC,UAAU,CAAC,mBAAmB,CAAC,CAACC,OAAO;;AAEhD;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,cAAc,GAAG;EACrBC,kBAAkB,EAAE,SAAS;EAC7BC,kBAAkB,EAAE,MAAM;EAC1BC,wBAAwB,EAAE,MAAM;EAChCC,UAAU,EAAE;AACd,CAAc;AAoBd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAAC;EAAEC,KAAK;EAAEC,OAAO;EAAEC,KAAK;EAAEC,MAAM,GAAG;AAAwB,CAAC,EAAE;EACvF,MAAMC,KAAK,GAAGlB,QAAQ,CAAC,CAAC;EAExB,MAAMmB,KAAK,GAAGtB,QAAQ,CAACO,EAAE,KAAK,KAAK;EACnC,IAAIe,KAAK,GAAGhB,mBAAmB,GAAG,CAACc,MAAM,EAAE;IACzC,OAAO,IAAI;EACb;EAEA,MAAMG,aAAa,GAAGL,OAAO,KAAKG,KAAK,CAACG,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC;EAE3D,oBACEnB,IAAA,CAACH,IAAI;IACHiB,KAAK,EAAE,CACLM,MAAM,CAACC,OAAO,EACd;MAAEC,eAAe,EAAEN,KAAK,CAACO,MAAM,CAACC,UAAU;MAAEX,OAAO,EAAED,KAAK,GAAGM,aAAa,GAAG;IAAE,CAAC,EAChFD,KAAK,GAAGX,cAAc,GAAG,IAAI,EAC7BQ,KAAK;EACL,CACH,CAAC;AAEN;AAEAH,WAAW,CAACc,WAAW,GAAG,aAAa;AAEvC,MAAML,MAAM,GAAGxB,UAAU,CAAC8B,MAAM,CAAC;EAC/BL,OAAO,EAAE;IACPM,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Platform","StyleSheet","View","useTheme","jsx","_jsx","IS_WEB_TOUCH_DEVICE","OS","window","matchMedia","matches","SubtleHover","active","style","native","theme","isWeb","undefined","className","styles","overlay","backgroundColor","colors","contrast50","opacity","isDark","displayName","create","position","top","left","right","bottom","pointerEvents"],"sourceRoot":"../../../src","sources":["subtle-hover/SubtleHover.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAwC,cAAc;AAEzF,SAASC,QAAQ,QAAQ,mBAAU;;AAEnC;AACA;AACA;AACA;AACA;AAJA,SAAAC,GAAA,IAAAC,IAAA;AAKA,MAAMC,mBAAmB,GACvBN,QAAQ,CAACO,EAAE,KAAK,KAAK,IACrB,OAAOC,MAAM,KAAK,WAAW,IAC7B,OAAOA,MAAM,CAACC,UAAU,KAAK,UAAU,IACvCD,MAAM,CAACC,UAAU,CAAC,mBAAmB,CAAC,CAACC,OAAO;AAoBhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAAC;EAAEC,MAAM;EAAEC,KAAK;EAAEC,MAAM,GAAG;AAAwB,CAAC,EAAE;EAC/E,MAAMC,KAAK,GAAGZ,QAAQ,CAAC,CAAC;EACxB,MAAMa,KAAK,GAAGhB,QAAQ,CAACO,EAAE,KAAK,KAAK;;EAEnC;EACA;EACA,IAAIK,MAAM,KAAKK,SAAS,EAAE;IACxB;IACA;IACA,IAAI,CAACD,KAAK,IAAIV,mBAAmB,EAAE,OAAO,IAAI;IAC9C,oBACED,IAAA,CAACH,IAAI;MAEDgB,SAAS,EACP,8FAA8F;MAElGL,KAAK,EAAE,CAACM,MAAM,CAACC,OAAO,EAAE;QAAEC,eAAe,EAAEN,KAAK,CAACO,MAAM,CAACC;MAAW,CAAC,EAAEV,KAAK;IAAE,CAC9E,CAAC;EAEN;;EAEA;EACA,IAAI,CAACG,KAAK,IAAI,CAACF,MAAM,EAAE,OAAO,IAAI;EAClC,oBACET,IAAA,CAACH,IAAI;IACIgB,SAAS,EAAE,iCAAiC;IACnDL,KAAK,EAAE,CACLM,MAAM,CAACC,OAAO,EACd;MACEC,eAAe,EAAEN,KAAK,CAACO,MAAM,CAACC,UAAU;MACxCC,OAAO,EAAEZ,MAAM,GAAIG,KAAK,CAACU,MAAM,GAAG,GAAG,GAAG,GAAG,GAAI;IACjD,CAAC,EACDZ,KAAK;EACL,CACH,CAAC;AAEN;AAEAF,WAAW,CAACe,WAAW,GAAG,aAAa;AAEvC,MAAMP,MAAM,GAAGlB,UAAU,CAAC0B,MAAM,CAAC;EAC/BP,OAAO,EAAE;IACPQ,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/commonjs/pressable-scale/PressableScale.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import { type PressableProps, type StyleProp, type View, type ViewStyle } from 'react-native';
-export interface PressableScaleProps extends Omit<PressableProps, 'children' | 'style'> {
+export interface PressableScaleProps extends Omit<PressableProps, 'style'> {
     /** Scale applied while pressed. Defaults to `0.98`. */
     targetScale?: number;
-    /** Style for the outer, full-size touch target (stays put while pressing). */
+    /** Style applied to the pressable itself — the node that scales. */
     style?: StyleProp<ViewStyle>;
-    /** Style for the inner content wrapper that actually scales. */
-    contentContainerStyle?: StyleProp<ViewStyle>;
-    children?: React.ReactNode;
 }
 /**
- * A drop-in {@link Pressable} whose content springs to a smaller scale on
- * press-in and back on release. The outer pressable stays full size (so the
- * touch target never shrinks) while an inner wrapper scales.
+ * A drop-in {@link Pressable} that springs to a smaller scale on press-in and
+ * back on release. The scale is applied to the pressable node itself, so a
+ * consumer's `className` / layout styles (e.g. `flex-row items-center`) land on
+ * the same node that animates.
  *
+ * The touch target scales with the content — acceptable at the default ~0.98
+ * (the earlier two-node touch-target-preservation was dropped for simplicity).
  * Honours the OS "reduce motion" setting and disables the effect on non-touch
  * web pointers.
  */

package/lib/typescript/commonjs/pressable-scale/PressableScale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PressableScale.d.ts","sourceRoot":"","sources":["../../../../src/pressable-scale/PressableScale.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AA0BtB,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC;IAClD,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,gEAAgE;IAChE,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,kFA+C1B,CAAC"}
+{"version":3,"file":"PressableScale.d.ts","sourceRoot":"","sources":["../../../../src/pressable-scale/PressableScale.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAgCtB,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IACxE,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,kFAgC1B,CAAC"}

package/lib/typescript/commonjs/subtle-hover/SubtleHover.d.ts

@@ -1,31 +1,36 @@
 import { type StyleProp, type ViewStyle } from 'react-native';
 export interface SubtleHoverProps {
-    /** Whether the parent is currently hovered. Drives the overlay opacity. */
-    hover: boolean;
     /**
-     * Overlay opacity when hovered. Defaults to a mode-tuned value (0.4 dark /
-     * 0.5 light) that reads as a gentle contrast wash.
+     * JS-driven visibility for a coordinated highlight — e.g. every post of one
+     * thread lighting up together. When omitted, the wash instead follows CSS
+     * `group-hover` on web with ZERO React state: the parent element must carry
+     * `className="group"`.
      */
-    opacity?: number;
+    active?: boolean;
     /** Extra style merged last — e.g. `borderRadius` to match the parent. */
     style?: StyleProp<ViewStyle>;
     /**
-     * Opt in to rendering on native. Off by default: hover is a pointer
-     * affordance, so this is a web-only overlay unless a native surface wants the
-     * same wash driven by another interaction (e.g. press).
+     * Render on native too (default `false`). Hover is a web pointer affordance,
+     * so the CSS `group-hover` mode is web-only; native only shows the wash in the
+     * JS `active` mode, and only when this is set.
      */
     native?: boolean;
 }
 /**
- * An absolutely-positioned, non-interactive contrast wash that fades in while
- * its parent is hovered. Ported from Bluesky's `SubtleHover`. Pairs naturally
- * with {@link useInteractionState} — pass its `state` as `hover`.
+ * An absolutely-positioned, non-interactive contrast wash. Two modes:
  *
- * Renders nothing on touch-web (no hovering pointer) and on native unless
- * `native` is set. Color comes from the theme's `contrast50` token so the wash
- * tracks the active preset and light/dark mode.
+ * - **CSS `group-hover`** (`active` omitted): the wash fades in on hover purely
+ *   through NativeWind classes — no React state. The parent must carry
+ *   `className="group"`. Web-only (native and touch-web have no hover).
+ * - **JS `active`**: the wash opacity follows the boolean, so several elements
+ *   can light up together (e.g. every post of a thread). Web always; native
+ *   only when `native` is set.
+ *
+ * The wash color comes from the theme's `contrast50` token so it tracks the
+ * active preset and light/dark mode. The web cross-fade is a NativeWind
+ * `transition-opacity` class — no manual `willChange` / web-style casts.
  */
-export declare function SubtleHover({ hover, opacity, style, native }: SubtleHoverProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SubtleHover({ active, style, native }: SubtleHoverProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace SubtleHover {
     var displayName: string;
 }

package/lib/typescript/commonjs/subtle-hover/SubtleHover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubtleHover.d.ts","sourceRoot":"","sources":["../../../../src/subtle-hover/SubtleHover.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AA4B1F,MAAM,WAAW,gBAAgB;IAC/B,2EAA2E;IAC3E,KAAK,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAc,EAAE,EAAE,gBAAgB,kDAoBtF;yBApBe,WAAW"}
+{"version":3,"file":"SubtleHover.d.ts","sourceRoot":"","sources":["../../../../src/subtle-hover/SubtleHover.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAe1F,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAc,EAAE,EAAE,gBAAgB,kDAoC9E;yBApCe,WAAW"}

package/lib/typescript/module/pressable-scale/PressableScale.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import { type PressableProps, type StyleProp, type View, type ViewStyle } from 'react-native';
-export interface PressableScaleProps extends Omit<PressableProps, 'children' | 'style'> {
+export interface PressableScaleProps extends Omit<PressableProps, 'style'> {
     /** Scale applied while pressed. Defaults to `0.98`. */
     targetScale?: number;
-    /** Style for the outer, full-size touch target (stays put while pressing). */
+    /** Style applied to the pressable itself — the node that scales. */
     style?: StyleProp<ViewStyle>;
-    /** Style for the inner content wrapper that actually scales. */
-    contentContainerStyle?: StyleProp<ViewStyle>;
-    children?: React.ReactNode;
 }
 /**
- * A drop-in {@link Pressable} whose content springs to a smaller scale on
- * press-in and back on release. The outer pressable stays full size (so the
- * touch target never shrinks) while an inner wrapper scales.
+ * A drop-in {@link Pressable} that springs to a smaller scale on press-in and
+ * back on release. The scale is applied to the pressable node itself, so a
+ * consumer's `className` / layout styles (e.g. `flex-row items-center`) land on
+ * the same node that animates.
  *
+ * The touch target scales with the content — acceptable at the default ~0.98
+ * (the earlier two-node touch-target-preservation was dropped for simplicity).
  * Honours the OS "reduce motion" setting and disables the effect on non-touch
  * web pointers.
  */

package/lib/typescript/module/pressable-scale/PressableScale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PressableScale.d.ts","sourceRoot":"","sources":["../../../../src/pressable-scale/PressableScale.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AA0BtB,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC;IAClD,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,gEAAgE;IAChE,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,kFA+C1B,CAAC"}
+{"version":3,"file":"PressableScale.d.ts","sourceRoot":"","sources":["../../../../src/pressable-scale/PressableScale.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAgCtB,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IACxE,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,kFAgC1B,CAAC"}

package/lib/typescript/module/subtle-hover/SubtleHover.d.ts

@@ -1,31 +1,36 @@
 import { type StyleProp, type ViewStyle } from 'react-native';
 export interface SubtleHoverProps {
-    /** Whether the parent is currently hovered. Drives the overlay opacity. */
-    hover: boolean;
     /**
-     * Overlay opacity when hovered. Defaults to a mode-tuned value (0.4 dark /
-     * 0.5 light) that reads as a gentle contrast wash.
+     * JS-driven visibility for a coordinated highlight — e.g. every post of one
+     * thread lighting up together. When omitted, the wash instead follows CSS
+     * `group-hover` on web with ZERO React state: the parent element must carry
+     * `className="group"`.
      */
-    opacity?: number;
+    active?: boolean;
     /** Extra style merged last — e.g. `borderRadius` to match the parent. */
     style?: StyleProp<ViewStyle>;
     /**
-     * Opt in to rendering on native. Off by default: hover is a pointer
-     * affordance, so this is a web-only overlay unless a native surface wants the
-     * same wash driven by another interaction (e.g. press).
+     * Render on native too (default `false`). Hover is a web pointer affordance,
+     * so the CSS `group-hover` mode is web-only; native only shows the wash in the
+     * JS `active` mode, and only when this is set.
      */
     native?: boolean;
 }
 /**
- * An absolutely-positioned, non-interactive contrast wash that fades in while
- * its parent is hovered. Ported from Bluesky's `SubtleHover`. Pairs naturally
- * with {@link useInteractionState} — pass its `state` as `hover`.
+ * An absolutely-positioned, non-interactive contrast wash. Two modes:
  *
- * Renders nothing on touch-web (no hovering pointer) and on native unless
- * `native` is set. Color comes from the theme's `contrast50` token so the wash
- * tracks the active preset and light/dark mode.
+ * - **CSS `group-hover`** (`active` omitted): the wash fades in on hover purely
+ *   through NativeWind classes — no React state. The parent must carry
+ *   `className="group"`. Web-only (native and touch-web have no hover).
+ * - **JS `active`**: the wash opacity follows the boolean, so several elements
+ *   can light up together (e.g. every post of a thread). Web always; native
+ *   only when `native` is set.
+ *
+ * The wash color comes from the theme's `contrast50` token so it tracks the
+ * active preset and light/dark mode. The web cross-fade is a NativeWind
+ * `transition-opacity` class — no manual `willChange` / web-style casts.
  */
-export declare function SubtleHover({ hover, opacity, style, native }: SubtleHoverProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SubtleHover({ active, style, native }: SubtleHoverProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace SubtleHover {
     var displayName: string;
 }

package/lib/typescript/module/subtle-hover/SubtleHover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubtleHover.d.ts","sourceRoot":"","sources":["../../../../src/subtle-hover/SubtleHover.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AA4B1F,MAAM,WAAW,gBAAgB;IAC/B,2EAA2E;IAC3E,KAAK,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAc,EAAE,EAAE,gBAAgB,kDAoBtF;yBApBe,WAAW"}
+{"version":3,"file":"SubtleHover.d.ts","sourceRoot":"","sources":["../../../../src/subtle-hover/SubtleHover.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAe1F,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAc,EAAE,EAAE,gBAAgB,kDAoC9E;yBApCe,WAAW"}

package/package.json

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

package/src/__tests__/PressableScale.test.tsx

@@ -26,4 +26,13 @@ describe('PressableScale', () => {
     );
     expect(getByText('Scaled')).toBeTruthy();
   });
+
+  it('applies style to the pressable node that scales', () => {
+    const { getByText } = render(
+      <PressableScale style={{ flexDirection: 'row' }} accessibilityLabel="Row">
+        <Text>Row content</Text>
+      </PressableScale>,
+    );
+    expect(getByText('Row content')).toBeTruthy();
+  });
 });

package/src/__tests__/SubtleHover.test.tsx

@@ -5,7 +5,8 @@ import { BloomThemeProvider } from '../theme/BloomThemeProvider';
 import { SubtleHover } from '../subtle-hover';
 
 // Default test Platform.OS is 'ios' (see __mocks__/react-native.ts), so the
-// web-only overlay is suppressed unless `native` is opted in.
+// web-only hover wash is suppressed unless the JS `active` mode opts in via
+// `native`.
 function renderWithTheme(ui: React.ReactElement) {
   return render(
     <BloomThemeProvider mode="light" colorPreset="teal">
@@ -14,29 +15,36 @@ function renderWithTheme(ui: React.ReactElement) {
   );
 }
 
+// The provider wraps the subject in ONE flex View, so `toJSON` is a single node;
+// narrowing away the array/null branches lets `children` read the wash cleanly.
+function renderWrapper(ui: React.ReactElement) {
+  const tree = renderWithTheme(ui).toJSON();
+  if (tree === null || Array.isArray(tree)) {
+    throw new Error('expected a single wrapper node');
+  }
+  return tree;
+}
+
 describe('SubtleHover', () => {
   it('carries a displayName', () => {
     expect(SubtleHover.displayName).toBe('SubtleHover');
   });
 
-  // `renderWithTheme` wraps the subject in the provider's flex View, so the
-  // overlay's presence is read from that wrapper's `children` rather than the
-  // root being null.
-  it('renders nothing on native by default', () => {
-    const tree = renderWithTheme(<SubtleHover hover />).toJSON();
-    expect(tree).not.toBeNull();
-    expect(tree?.children).toBeNull();
+  it('renders nothing on native in the CSS group-hover mode', () => {
+    expect(renderWrapper(<SubtleHover />).children).toBeNull();
+  });
+
+  it('renders nothing on native in the JS active mode by default', () => {
+    expect(renderWrapper(<SubtleHover active />).children).toBeNull();
   });
 
-  it('renders the overlay on native when opted in', () => {
-    const tree = renderWithTheme(<SubtleHover hover native />).toJSON();
-    expect(tree?.children).not.toBeNull();
+  it('renders the wash on native in the JS active mode when opted in', () => {
+    expect(renderWrapper(<SubtleHover active native />).children).not.toBeNull();
   });
 
-  it('accepts an opacity override and a style', () => {
-    const tree = renderWithTheme(
-      <SubtleHover hover native opacity={0.9} style={{ borderRadius: 12 }} />,
-    ).toJSON();
-    expect(tree?.children).not.toBeNull();
+  it('accepts a style override in the native active mode', () => {
+    expect(
+      renderWrapper(<SubtleHover active native style={{ borderRadius: 12 }} />).children,
+    ).not.toBeNull();
   });
 });

package/src/pressable-scale/PressableScale.stories.tsx

@@ -21,7 +21,7 @@ export const Basic: Story = {
     <PressableScale
       {...args}
       accessibilityLabel="Press me"
-      contentContainerStyle={{
+      style={{
         paddingVertical: 12,
         paddingHorizontal: 20,
         borderRadius: 12,
@@ -39,7 +39,7 @@ export const StrongScale: Story = {
     <PressableScale
       {...args}
       accessibilityLabel="Press me harder"
-      contentContainerStyle={{
+      style={{
         paddingVertical: 12,
         paddingHorizontal: 20,
         borderRadius: 12,
@@ -51,6 +51,27 @@ export const StrongScale: Story = {
   ),
 };
 
+/**
+ * NativeWind layout classes apply to the SAME node that scales — the whole row
+ * (avatar + label) springs as one. In a NativeWind consumer you pass `className`
+ * directly; the spread-cast here just satisfies Bloom's own typecheck (which has
+ * no NativeWind ambient types).
+ */
+export const InlineRow: Story = {
+  render: (args) => (
+    <PressableScale
+      {...args}
+      accessibilityLabel="Open profile"
+      {...({
+        className: 'flex-row items-center gap-3 px-4 py-3 rounded-xl bg-muted',
+      } as Record<string, string>)}
+    >
+      <View style={{ width: 32, height: 32, borderRadius: 16, backgroundColor: '#4f46e5' }} />
+      <Text style={{ fontWeight: '600' }}>Row that scales as one node</Text>
+    </PressableScale>
+  ),
+};
+
 export const Card: Story = {
   render: (args) => (
     <PressableScale {...args} accessibilityLabel="Open card">

package/src/pressable-scale/PressableScale.tsx

@@ -32,38 +32,32 @@ const IS_WEB_TOUCH_DEVICE =
 
 const SCALE_SUPPORTED = Platform.OS !== 'web' || IS_WEB_TOUCH_DEVICE;
 
-export interface PressableScaleProps
-  extends Omit<PressableProps, 'children' | 'style'> {
+/**
+ * A single animated `Pressable`, built once at module scope so the animated
+ * node identity is stable across renders.
+ */
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface PressableScaleProps extends Omit<PressableProps, 'style'> {
   /** Scale applied while pressed. Defaults to `0.98`. */
   targetScale?: number;
-  /** Style for the outer, full-size touch target (stays put while pressing). */
+  /** Style applied to the pressable itself — the node that scales. */
   style?: StyleProp<ViewStyle>;
-  /** Style for the inner content wrapper that actually scales. */
-  contentContainerStyle?: StyleProp<ViewStyle>;
-  children?: React.ReactNode;
 }
 
 /**
- * A drop-in {@link Pressable} whose content springs to a smaller scale on
- * press-in and back on release. The outer pressable stays full size (so the
- * touch target never shrinks) while an inner wrapper scales.
+ * A drop-in {@link Pressable} that springs to a smaller scale on press-in and
+ * back on release. The scale is applied to the pressable node itself, so a
+ * consumer's `className` / layout styles (e.g. `flex-row items-center`) land on
+ * the same node that animates.
  *
+ * The touch target scales with the content — acceptable at the default ~0.98
+ * (the earlier two-node touch-target-preservation was dropped for simplicity).
  * Honours the OS "reduce motion" setting and disables the effect on non-touch
  * web pointers.
  */
 export const PressableScale = forwardRef<View, PressableScaleProps>(
-  function PressableScale(
-    {
-      targetScale = 0.98,
-      style,
-      contentContainerStyle,
-      children,
-      onPressIn,
-      onPressOut,
-      ...rest
-    },
-    ref,
-  ) {
+  function PressableScale({ targetScale = 0.98, style, onPressIn, onPressOut, ...rest }, ref) {
     const reducedMotion = useReducedMotion();
     const animate = SCALE_SUPPORTED && !reducedMotion;
 
@@ -74,7 +68,7 @@ export const PressableScale = forwardRef<View, PressableScaleProps>(
     }));
 
     return (
-      <Pressable
+      <AnimatedPressable
         ref={ref}
         accessibilityRole="button"
         onPressIn={(e) => {
@@ -89,13 +83,9 @@ export const PressableScale = forwardRef<View, PressableScaleProps>(
           cancelAnimation(scale);
           scale.value = withTiming(1, { duration: DURATION });
         }}
-        style={style}
+        style={[animate ? animatedStyle : null, style]}
         {...rest}
-      >
-        <Animated.View style={[animate ? animatedStyle : null, contentContainerStyle]}>
-          {children}
-        </Animated.View>
-      </Pressable>
+      />
     );
   },
 );

package/src/subtle-hover/SubtleHover.stories.tsx

@@ -14,15 +14,15 @@ export default meta;
 
 type Story = StoryObj<typeof SubtleHover>;
 
-/** A row that washes its background as the pointer enters (web). */
-function HoverRow({ label, native }: { label: string; native?: boolean }) {
-  const { state: hovered, onIn, onOut } = useInteractionState();
-
+/**
+ * Pure-CSS `group-hover`: the parent carries `className="group"` and the wash
+ * fades in on hover with ZERO React state (web only).
+ */
+function HoverRow({ label }: { label: string }) {
   return (
     <Pressable
+      {...({ className: 'group' } as Record<string, string>)}
       accessibilityLabel={label}
-      onHoverIn={onIn}
-      onHoverOut={onOut}
       style={{
         width: 280,
         paddingVertical: 14,
@@ -31,34 +31,14 @@ function HoverRow({ label, native }: { label: string; native?: boolean }) {
         overflow: 'hidden',
       }}
     >
-      <SubtleHover hover={hovered} native={native} style={{ borderRadius: 12 }} />
+      <SubtleHover style={{ borderRadius: 12 }} />
       <Text style={{ fontWeight: '600' }}>{label}</Text>
     </Pressable>
   );
 }
 
-export const ListRow: Story = {
-  render: () => <HoverRow label="Hover me (web)" />,
-};
-
-export const StrongerWash: Story = {
-  render: () => {
-    function Row() {
-      const { state: hovered, onIn, onOut } = useInteractionState();
-      return (
-        <Pressable
-          accessibilityLabel="Stronger wash"
-          onHoverIn={onIn}
-          onHoverOut={onOut}
-          style={{ width: 280, padding: 16, borderRadius: 12, overflow: 'hidden' }}
-        >
-          <SubtleHover hover={hovered} opacity={0.85} style={{ borderRadius: 12 }} />
-          <Text style={{ fontWeight: '600' }}>Higher opacity override</Text>
-        </Pressable>
-      );
-    }
-    return <Row />;
-  },
+export const GroupHover: Story = {
+  render: () => <HoverRow label="Hover me (web, group-hover)" />,
 };
 
 export const Stack: Story = {
@@ -70,3 +50,36 @@ export const Stack: Story = {
     </View>
   ),
 };
+
+/**
+ * JS `active` mode: hovering anywhere in the thread lights EVERY row together
+ * (a coordinated highlight a per-element `group-hover` can't express). `native`
+ * is opted in so the same wash shows on native surfaces too.
+ */
+export const CoordinatedThread: Story = {
+  render: () => {
+    function Thread() {
+      const { state: hovered, onIn, onOut } = useInteractionState();
+      return (
+        <Pressable onHoverIn={onIn} onHoverOut={onOut} style={{ gap: 4 }}>
+          {['First reply', 'Second reply', 'Third reply'].map((label) => (
+            <View
+              key={label}
+              style={{
+                width: 280,
+                paddingVertical: 14,
+                paddingHorizontal: 16,
+                borderRadius: 12,
+                overflow: 'hidden',
+              }}
+            >
+              <SubtleHover active={hovered} native style={{ borderRadius: 12 }} />
+              <Text style={{ fontWeight: '600' }}>{label}</Text>
+            </View>
+          ))}
+        </Pressable>
+      );
+    }
+    return <Thread />;
+  },
+};

package/src/subtle-hover/SubtleHover.tsx

@@ -4,9 +4,9 @@ import { Platform, StyleSheet, View, type StyleProp, type ViewStyle } from 'reac
 import { useTheme } from '../theme';
 
 /**
- * True on touch-capable web browsers (coarse pointer). A hover wash only makes
- * sense with a hovering pointer, so it is suppressed on touch web to match
- * native (which has no hover at all).
+ * True on touch-capable web browsers (coarse pointer). The CSS `group-hover`
+ * wash only makes sense with a hovering pointer, so it is suppressed on touch
+ * web to match native (which has no hover at all).
  */
 const IS_WEB_TOUCH_DEVICE =
   Platform.OS === 'web' &&
@@ -14,62 +14,70 @@ const IS_WEB_TOUCH_DEVICE =
   typeof window.matchMedia === 'function' &&
   window.matchMedia('(pointer: coarse)').matches;
 
-/**
- * Web-only style that (a) cross-fades the overlay opacity and (b) promotes it to
- * its own GPU layer so Safari doesn't nudge the layout by a subpixel when the
- * overlay composites on hover. Cast because RN's `ViewStyle` has no `willChange`
- * / `transition*` keys; react-native-web forwards them to the DOM node.
- */
-const WEB_TRANSITION = {
-  transitionProperty: 'opacity',
-  transitionDuration: '0.1s',
-  transitionTimingFunction: 'ease',
-  willChange: 'opacity',
-} as ViewStyle;
-
 export interface SubtleHoverProps {
-  /** Whether the parent is currently hovered. Drives the overlay opacity. */
-  hover: boolean;
   /**
-   * Overlay opacity when hovered. Defaults to a mode-tuned value (0.4 dark /
-   * 0.5 light) that reads as a gentle contrast wash.
+   * JS-driven visibility for a coordinated highlight — e.g. every post of one
+   * thread lighting up together. When omitted, the wash instead follows CSS
+   * `group-hover` on web with ZERO React state: the parent element must carry
+   * `className="group"`.
    */
-  opacity?: number;
+  active?: boolean;
   /** Extra style merged last — e.g. `borderRadius` to match the parent. */
   style?: StyleProp<ViewStyle>;
   /**
-   * Opt in to rendering on native. Off by default: hover is a pointer
-   * affordance, so this is a web-only overlay unless a native surface wants the
-   * same wash driven by another interaction (e.g. press).
+   * Render on native too (default `false`). Hover is a web pointer affordance,
+   * so the CSS `group-hover` mode is web-only; native only shows the wash in the
+   * JS `active` mode, and only when this is set.
    */
   native?: boolean;
 }
 
 /**
- * An absolutely-positioned, non-interactive contrast wash that fades in while
- * its parent is hovered. Ported from Bluesky's `SubtleHover`. Pairs naturally
- * with {@link useInteractionState} — pass its `state` as `hover`.
+ * An absolutely-positioned, non-interactive contrast wash. Two modes:
+ *
+ * - **CSS `group-hover`** (`active` omitted): the wash fades in on hover purely
+ *   through NativeWind classes — no React state. The parent must carry
+ *   `className="group"`. Web-only (native and touch-web have no hover).
+ * - **JS `active`**: the wash opacity follows the boolean, so several elements
+ *   can light up together (e.g. every post of a thread). Web always; native
+ *   only when `native` is set.
  *
- * Renders nothing on touch-web (no hovering pointer) and on native unless
- * `native` is set. Color comes from the theme's `contrast50` token so the wash
- * tracks the active preset and light/dark mode.
+ * The wash color comes from the theme's `contrast50` token so it tracks the
+ * active preset and light/dark mode. The web cross-fade is a NativeWind
+ * `transition-opacity` class — no manual `willChange` / web-style casts.
  */
-export function SubtleHover({ hover, opacity, style, native = false }: SubtleHoverProps) {
+export function SubtleHover({ active, style, native = false }: SubtleHoverProps) {
   const theme = useTheme();
-
   const isWeb = Platform.OS === 'web';
-  if (isWeb ? IS_WEB_TOUCH_DEVICE : !native) {
-    return null;
-  }
 
-  const targetOpacity = opacity ?? (theme.isDark ? 0.4 : 0.5);
+  // Full literal class strings (never concatenated fragments) so NativeWind's
+  // compiler statically extracts every variant.
+  if (active === undefined) {
+    // CSS group-hover: a web pointer affordance. Native has no hover, and
+    // neither does touch web — render nothing there.
+    if (!isWeb || IS_WEB_TOUCH_DEVICE) return null;
+    return (
+      <View
+        {...({
+          className:
+            'opacity-0 group-hover:opacity-50 dark:group-hover:opacity-40 transition-opacity duration-150',
+        } as Record<string, string>)}
+        style={[styles.overlay, { backgroundColor: theme.colors.contrast50 }, style]}
+      />
+    );
+  }
 
+  // JS-driven coordinated mode: web always; native only when opted in.
+  if (!isWeb && !native) return null;
   return (
     <View
+      {...({ className: 'transition-opacity duration-150' } as Record<string, string>)}
       style={[
         styles.overlay,
-        { backgroundColor: theme.colors.contrast50, opacity: hover ? targetOpacity : 0 },
-        isWeb ? WEB_TRANSITION : null,
+        {
+          backgroundColor: theme.colors.contrast50,
+          opacity: active ? (theme.isDark ? 0.4 : 0.5) : 0,
+        },
         style,
       ]}
     />