pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/fab/Fab.js

@@ -20,33 +20,20 @@
  * documents for its own duplicated `MIN_TOUCH_TARGET`.
  */
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, Animated, Platform, Pressable, StyleSheet, Text, View } from "react-native";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { ActivityIndicator, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { usePressState } from "../../core/motion/usePressState.js";
 import { Icon } from "../../core/icon/index.js";
+import { AccentGradientFill } from "../../core/gradient/index.js";
+import { elevation, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
-import { fabCircleStructure, fabExtendedStructure, FAB_SIZES, resolveFabAccessibility, resolveFabAnchorStyle, resolveFabBottomInset, resolveFabFocusRingStyle, resolveFabHorizontalInset, resolveFabTone } from "./Fab.variants.js";
-
-/** A Fab with a visible text label — the EXTENDED variant (a pill, icon + text). */
-
-/** An icon-only Fab. No visible text, so `accessibilityLabel` is REQUIRED at the type level — the
- *  same trap `Button`'s icon-only shape closes. `label?: never` keeps the two shapes exclusive. */
+import { fabCircleStructure, fabExtendedStructure, fabOverlayColor, FAB_SIZES, resolveFabAccessibility, resolveFabAnchorStyle, resolveFabBottomInset, resolveFabFocusRingStyle, resolveFabHorizontalInset, resolveFabTone } from "./Fab.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const ICON_STROKE = 2;
-// State-layer scrims — direction chosen by the label's brightness so the fill moves AWAY from the
-// label on press (its contrast can only rise), the identical technique `Button.tsx` uses.
-const PRESS_SCRIM_DARK = "#00000026";
-const PRESS_SCRIM_LIGHT = "#ffffff26";
-
-/** Cheap perceived-brightness split; `onFill` is only ever a near-white or near-black role value. */
-function isLight(hex) {
-  const n = parseInt(hex.slice(1, 7), 16);
-  const r = n >> 16 & 0xff;
-  const g = n >> 8 & 0xff;
-  const b = n & 0xff;
-  return r * 0.299 + g * 0.587 + b * 0.114 > 140;
-}
 function FabImpl(props) {
   const {
     icon,
@@ -71,10 +58,8 @@ function FabImpl(props) {
     "aria-describedby": ariaDescribedBy
   } = props;
   const theme = useTheme();
-  const motion = useMotion();
-  // One value drives both the state-layer scrim and the press scale, so they can never desync.
-  const press = useAnimatedValue(0);
-  const pressAnimation = useRef(null);
+  const blocked = disabled || loading;
+  const press = usePressState(blocked);
   // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
   const [focused, setFocused] = useState(false);
   const spec = FAB_SIZES[size];
@@ -86,7 +71,7 @@ function FabImpl(props) {
     loading,
     onPress
   });
-  const overlayColor = isLight(toneColors.onFill) ? PRESS_SCRIM_DARK : PRESS_SCRIM_LIGHT;
+  const overlayColor = fabOverlayColor(toneColors.onFill);
   const extended = label !== undefined;
   const bottomInset = resolveFabBottomInset(theme.space[4], Platform.OS, offset?.bottom ?? 0);
   const horizontalInset = resolveFabHorizontalInset(theme.space[4], offset?.horizontal ?? 0);
@@ -96,27 +81,10 @@ function FabImpl(props) {
     horizontalInset,
     zIndex: theme.zIndices.docked
   });
-  const setPressed = useCallback(pressed => {
-    pressAnimation.current?.stop();
-    const to = pressed ? 1 : 0;
-    if (!motion.enabled) {
-      press.setValue(to);
-      return;
-    }
-    pressAnimation.current = motion.timing(press, to, {
-      duration: "fast"
-    });
-    pressAnimation.current.start();
-  }, [motion, press]);
-  useEffect(() => () => pressAnimation.current?.stop(), []);
-
-  // Own state first, then the incoming handler — an outer handler that throws can never strand the
-  // press/focus ring in its active state.
-  const handlePressIn = useCallback(() => setPressed(true), [setPressed]);
   const handlePressOut = useCallback(event => {
-    setPressed(false);
+    press.handlers.onPressOut();
     onPressOut?.(event);
-  }, [setPressed, onPressOut]);
+  }, [press.handlers, onPressOut]);
   const handleFocus = useCallback(event => {
     setFocused(true);
     onFocus?.(event);
@@ -125,14 +93,22 @@ function FabImpl(props) {
     setFocused(false);
     onBlur?.(event);
   }, [onBlur]);
-  const pressScale = useMemo(() => press.interpolate({
-    inputRange: [0, 1],
-    outputRange: [1, motion.transform.pressScale]
-  }), [press, motion.transform.pressScale]);
   const focusRingStyle = useMemo(() => resolveFabFocusRingStyle(theme.colors.border.focus, theme.radii.full), [theme.colors.border.focus, theme.radii.full]);
+  const floatingDepth = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.md);
+    void theme.elevatedSurfaces;
+    return floatingSurfaceStyle(theme, "md");
+  }, [theme]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android" || blocked) return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: !extended
+    };
+  }, [blocked, theme.mode, extended]);
 
-  // The spinner is never the sole loading signal — `aria-busy` announces it. Hidden from AT so it
-  // isn't read as a separate element, the same contract Button's own spinner has.
+  // aria-busy already announces loading; the spinner itself is hidden from AT.
   const content = loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
     size: "small",
     color: toneColors.onFill,
@@ -144,8 +120,9 @@ function FabImpl(props) {
     strokeWidth: ICON_STROKE
   });
   return /*#__PURE__*/_jsx(View, {
-    style: [anchor, style],
-    pointerEvents: "box-none",
+    style: [anchor, style, {
+      pointerEvents: "box-none"
+    }],
     children: /*#__PURE__*/_jsxs(AnimatedPressable, {
       testID: testID,
       accessibilityRole: a11y.accessibilityRole,
@@ -157,36 +134,37 @@ function FabImpl(props) {
       disabled: a11y.disabled,
       onPress: a11y.onPress,
       onLongPress: onLongPress,
-      onPressIn: handlePressIn,
+      onPressIn: press.handlers.onPressIn,
       onPressOut: handlePressOut,
       onHoverIn: onHoverIn,
       onHoverOut: onHoverOut,
       onFocus: handleFocus,
       onBlur: handleBlur,
+      onLayout: press.onLayout,
+      android_ripple: androidRipple,
       style: [extended ? fabExtendedStructure(theme, {
         size
       }) : fabCircleStructure(theme, {
         size
       }), {
-        backgroundColor: toneColors.fill,
-        transform: [{
-          scale: pressScale
-        }]
-      }, (disabled || loading) && styles.dimmed, theme.elevation.lg],
-      children: [/*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none"
-        // Matches the control's own radius: the control isn't `overflow: hidden` (that would clip
-        // the focus ring below), so the state layer rounds itself instead of showing square corners.
-        ,
+        overflow: "hidden",
+        ...floatingDepth
+      }, press.animatedStyle, (disabled || loading) && styles.dimmed],
+      children: [/*#__PURE__*/_jsx(AccentGradientFill, {
+        color: toneColors.fill
+      }), /*#__PURE__*/_jsx(Animated.View, {
         style: [StyleSheet.absoluteFill, {
           backgroundColor: overlayColor,
-          opacity: press,
-          borderRadius: theme.radii.full
+          borderRadius: theme.radii.full,
+          borderCurve: "continuous"
+        }, press.overlayStyle, {
+          pointerEvents: "none"
         }]
       }), focused && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
         testID: testID ? `${testID}-focus-ring` : undefined,
-        style: focusRingStyle
+        style: [focusRingStyle, {
+          pointerEvents: "none"
+        }]
       }), content, extended && /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {

package/lib/module/modules/fab/Fab.variants.js

@@ -22,10 +22,16 @@
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
+import { withAlpha } from "../../core/gradient/index.js";
+import { MOTION_TRANSFORM } from "../../core/motion/index.js";
 import { createThemedVariants } from "../../core/style/index.js";
+import { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
+export { MIN_TOUCH_TARGET };
+
 /** Both sizes already clear this floor directly (48dp / 56dp) — no `hitSlop` needed, unlike Button's
  *  shorter sizes (WCAG 2.5.5 AAA / Apple HIG minimum). */
-export const MIN_TOUCH_TARGET = 44;
+
 export const FAB_SIZES = {
   md: {
     diameter: 48,
@@ -71,6 +77,20 @@ export function resolveFabTone(colors, tone) {
       };
   }
 }
+const FAB_PRESS_SCRIM_DARK = "#00000026";
+const FAB_PRESS_SCRIM_LIGHT = "#ffffff26";
+function isLightOnFill(hex) {
+  const n = parseInt(hex.slice(1, 7), 16);
+  const r = n >> 16 & 0xff;
+  const g = n >> 8 & 0xff;
+  const b = n & 0xff;
+  return r * 0.299 + g * 0.587 + b * 0.114 > 140;
+}
+
+/** Press scrim direction, chosen by brightness — shared by `Fab` and `FabGroup`'s trigger. */
+export function fabOverlayColor(onFill) {
+  return isLightOnFill(onFill) ? FAB_PRESS_SCRIM_DARK : FAB_PRESS_SCRIM_LIGHT;
+}
 /**
  * Same disabled/loading→busy, gated-onPress derivation as `resolveButtonAccessibility` (WCAG 1.4.1
  * busy announcement / 4.1.2 name-role-value), kept pure so it's testable without rendering RN.
@@ -213,8 +233,8 @@ export function resolveFabGroupActionWindow(index, count, staggered) {
 
 /** The focus ring sits a small gap OUTSIDE the control, on the canvas, because `border.focus` is the
  *  role token proven ≥ 3:1 against the canvas (WCAG 2.4.11) — drawn over a solid fill it could fail. */
-export const FAB_FOCUS_RING_WIDTH = 2;
-export const FAB_FOCUS_RING_GAP = 2;
+export const FAB_FOCUS_RING_WIDTH = FOCUS_RING_WIDTH;
+export const FAB_FOCUS_RING_GAP = FOCUS_RING_GAP;
 /** The offset ring `Fab` and `FabGroup`'s trigger both draw on focus — one definition, since the two
  *  are the same circular silhouette. Kept a pure function of the two role/scale values it needs, so
  *  the ring geometry is unit-testable without rendering React Native. */
@@ -234,7 +254,7 @@ export function resolveFabFocusRingStyle(borderColor, borderRadius) {
 
 /** The dismiss scrim behind an expanded FabGroup — a design constant, not a role token: decorative,
  *  same status `BACKDROP_SCRIM` (Menu/Select) and `DRAWER_BACKDROP` already have. */
-export const FAB_GROUP_SCRIM = "#00000080";
+export const FAB_GROUP_SCRIM = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 
 /** Structural circle — the icon-only shape. Colour (fill) is tone-driven, applied inline over this. */
 export const fabCircleStructure = createThemedVariants(theme => ({
@@ -338,7 +358,7 @@ export const fabGroupActionCircleStructure = createThemedVariants(theme => ({
  *  "selection/emphasis isn't conveyed by a background swap" reasoning `Select`'s row fill documents. */
 export const fabGroupActionLabelStructure = createThemedVariants(theme => ({
   base: {
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.full,
     paddingHorizontal: theme.space[3],
     paddingVertical: theme.space[2]
   }

package/lib/module/modules/fab/FabGroup.js

@@ -30,14 +30,19 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { useReducedMotion } from "../../core/a11y/index.js";
 import { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
+import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useAnimatedValue, useMotion, usePressMotion } from "../../core/motion/index.js";
+import { useMotion, useAnimatedValue } from "../../core/motion/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
-import { fabCircleStructure, FAB_ACTION_ICON_SIZE, fabGroupActionCircleStructure, fabGroupActionLabelStructure, fabGroupActionRowStructure, fabGroupActionsStackStructure, FAB_GROUP_SCRIM, FAB_SIZES, resolveFabAccessibility, resolveFabAnchorStyle, resolveFabBottomInset, resolveFabFocusRingStyle, resolveFabGroupActionDirection, resolveFabGroupActionWindow, resolveFabGroupStackAlign, resolveFabGroupTriggerAccessibilityLabel, resolveFabHorizontalInset, resolveFabTone } from "./Fab.variants.js";
+import { fabCircleStructure, fabOverlayColor, FAB_ACTION_ICON_SIZE, fabGroupActionCircleStructure, fabGroupActionLabelStructure, fabGroupActionRowStructure, fabGroupActionsStackStructure, FAB_GROUP_SCRIM, FAB_SIZES, resolveFabAccessibility, resolveFabAnchorStyle, resolveFabBottomInset, resolveFabFocusRingStyle, resolveFabGroupActionDirection, resolveFabGroupActionWindow, resolveFabGroupStackAlign, resolveFabGroupTriggerAccessibilityLabel, resolveFabHorizontalInset, resolveFabTone } from "./Fab.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
 const ICON_STROKE = 2;
 const ACTION_ICON_STROKE = 2;
 const DEFAULT_ICON = "plus";
@@ -66,63 +71,62 @@ function FabGroupActionRowImpl({
 }) {
   const theme = useTheme();
   const motion = useMotion();
-  const pressMotion = usePressMotion();
+  const press = usePressState();
   const colors = resolveFabTone(theme.colors, action.tone ?? fallbackTone);
   const handlePress = useCallback(() => onSelect(action), [onSelect, action]);
   const [start, end] = window;
-  const revealOpacity = useMemo(() => progress.interpolate({
-    inputRange: [start, end],
-    outputRange: [0, 1],
-    extrapolate: "clamp"
-  }), [progress, start, end]);
-  const translateY = useMemo(() => progress.interpolate({
-    inputRange: [start, end],
-    outputRange: [motion.transform.offsetY, 0],
-    extrapolate: "clamp"
-  }), [progress, start, end, motion.transform.offsetY]);
-  const pressOpacity = pressMotion.style.opacity;
-  const pressScale = pressMotion.style.transform[0].scale;
-  const opacity = useMemo(() => Animated.multiply(revealOpacity, pressOpacity), [revealOpacity, pressOpacity]);
-  const transform = useMemo(() => [{
-    translateY
-  }, {
-    scale: pressScale
-  }], [translateY, pressScale]);
-  return /*#__PURE__*/_jsxs(AnimatedPressable, {
-    testID: testID,
-    accessibilityRole: "button",
-    accessibilityLabel: action.label,
-    onPress: handlePress,
-    onPressIn: pressMotion.onPressIn,
-    onPressOut: pressMotion.onPressOut,
-    style: [fabGroupActionRowStructure(theme), {
-      flexDirection: direction,
-      opacity,
-      transform
-    }],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [fabGroupActionLabelStructure(theme), {
-        backgroundColor: theme.colors.bg.raised
-      }, theme.elevation.sm],
-      children: /*#__PURE__*/_jsx(Text, {
-        numberOfLines: 1,
-        style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-          fontSize: theme.fontSizes.sm,
-          color: theme.colors.fg.default
-        }],
-        children: action.label
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: [fabGroupActionCircleStructure(theme), {
-        backgroundColor: colors.fill
-      }, theme.elevation.md],
-      children: /*#__PURE__*/_jsx(Icon, {
-        name: action.icon,
-        size: FAB_ACTION_ICON_SIZE,
-        color: colors.onFill,
-        strokeWidth: ACTION_ICON_STROKE
-      })
-    })]
+  const offsetY = motion.transform.offsetY;
+  const revealStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(progress.value, [start, end], [0, 1], "clamp"),
+    transform: [{
+      translateY: interpolate(progress.value, [start, end], [offsetY, 0], "clamp")
+    }]
+  }));
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android") return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: false
+    };
+  }, [theme.mode]);
+  return /*#__PURE__*/_jsx(Reanimated.View, {
+    style: revealStyle,
+    children: /*#__PURE__*/_jsxs(AnimatedPressable, {
+      testID: testID,
+      accessibilityRole: "button",
+      accessibilityLabel: action.label,
+      onPress: handlePress,
+      onPressIn: press.handlers.onPressIn,
+      onPressOut: press.handlers.onPressOut,
+      onLayout: press.onLayout,
+      android_ripple: androidRipple,
+      style: [fabGroupActionRowStructure(theme), {
+        flexDirection: direction
+      }, press.animatedStyle],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [fabGroupActionLabelStructure(theme), {
+          backgroundColor: theme.colors.bg.raised
+        }, theme.elevation.sm],
+        children: /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+            fontSize: theme.fontSizes.sm,
+            color: theme.colors.fg.default
+          }],
+          children: action.label
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: [fabGroupActionCircleStructure(theme), {
+          backgroundColor: colors.fill
+        }, theme.elevation.md],
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: action.icon,
+          size: FAB_ACTION_ICON_SIZE,
+          color: colors.onFill,
+          strokeWidth: ACTION_ICON_STROKE
+        })
+      })]
+    })
   });
 }
 const FabGroupActionRow = /*#__PURE__*/memo(FabGroupActionRowImpl);
@@ -142,6 +146,8 @@ function FabGroupImpl({
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const [internalOpen, setInternalOpen] = useState(false);
   const isControlled = open !== undefined;
   const expanded = isControlled ? open : internalOpen;
@@ -167,7 +173,7 @@ function FabGroupImpl({
     if (expanded) {
       setMounted(true);
       if (!motion.enabled || duration === 0) {
-        progress.setValue(1);
+        progress.value = 1;
         return;
       }
       running.current = motion.timing(progress, 1, {
@@ -178,7 +184,7 @@ function FabGroupImpl({
     }
     if (!mountedRef.current) return;
     if (!motion.enabled || duration === 0) {
-      progress.setValue(0);
+      progress.value = 0;
       setMounted(false);
       return;
     }
@@ -197,9 +203,10 @@ function FabGroupImpl({
     if (unmountTimer.current !== null) clearTimeout(unmountTimer.current);
   }, []);
   const requestExpandedChange = useCallback(next => {
+    if (next && !expanded && !reducedMotion) haptics.impact("light");
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
-  }, [isControlled, onOpenChange]);
+  }, [isControlled, onOpenChange, expanded, reducedMotion, haptics]);
   const toggle = useCallback(() => {
     if (disabled) return;
     requestExpandedChange(!expanded);
@@ -233,14 +240,25 @@ function FabGroupImpl({
   });
   const actionDirection = resolveFabGroupActionDirection(position);
   const stackAlign = resolveFabGroupStackAlign(position);
-  const rotate = useMemo(() => progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "45deg"]
-  }), [progress]);
-  const triggerPress = usePressMotion(disabled);
+  const rotateStyle = useAnimatedStyle(() => ({
+    transform: [{
+      rotate: `${interpolate(progress.value, [0, 1], [0, 45])}deg`
+    }]
+  }));
+  const scrimStyle = useAnimatedStyle(() => ({
+    opacity: progress.value
+  }));
+  const triggerPress = usePressState(disabled);
+  const triggerOverlayColor = fabOverlayColor(triggerColors.onFill);
+  const triggerRipple = useMemo(() => {
+    if (Platform.OS !== "android" || disabled) return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: true
+    };
+  }, [disabled, theme.mode]);
 
-  // Keyboard / external-keyboard / assistive-tech focus, identical to `Fab`'s — the trigger is the
-  // same circular control, so the ring geometry is shared rather than re-derived.
+  // Same circular control as `Fab`, so the ring geometry is shared, not re-derived.
   const [focused, setFocused] = useState(false);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
@@ -257,17 +275,19 @@ function FabGroupImpl({
       tabIndex: -1,
       style: StyleSheet.absoluteFill,
       onPress: closeGroup,
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
         style: [StyleSheet.absoluteFill, {
-          backgroundColor: FAB_GROUP_SCRIM,
-          opacity: progress
+          backgroundColor: FAB_GROUP_SCRIM
+        }, scrimStyle, {
+          pointerEvents: 'none'
         }]
       })
     }), /*#__PURE__*/_jsxs(View, {
       ref: anchorRef,
       testID: testID ? `${testID}-anchor` : undefined,
-      style: [anchor, styles.anchorFlow, style]
+      style: [anchor, styles.anchorFlow, style, {
+        pointerEvents: "box-none"
+      }]
       // Modal exactly while the scrim is mounted, and on the anchor rather than the action stack
       // so the trigger — the close affordance — stays inside the modal view with the actions.
       // Both spellings: RN's View has no `aria-modal`, react-native-web has no
@@ -276,7 +296,6 @@ function FabGroupImpl({
       accessibilityViewIsModal: mounted,
       "aria-modal": mounted,
       onAccessibilityEscape: mounted ? closeGroup : undefined,
-      pointerEvents: "box-none",
       children: [/*#__PURE__*/_jsxs(AnimatedPressable, {
         testID: testID ? `${testID}-trigger` : undefined,
         accessibilityRole: a11y.accessibilityRole,
@@ -285,27 +304,32 @@ function FabGroupImpl({
         "aria-expanded": expanded,
         disabled: a11y.disabled,
         onPress: a11y.onPress,
-        onPressIn: triggerPress.onPressIn,
-        onPressOut: triggerPress.onPressOut,
+        onPressIn: triggerPress.handlers.onPressIn,
+        onPressOut: triggerPress.handlers.onPressOut,
         onFocus: handleFocus,
         onBlur: handleBlur,
+        onLayout: triggerPress.onLayout,
+        android_ripple: triggerRipple,
         style: [fabCircleStructure(theme, {
           size
         }), {
-          backgroundColor: triggerColors.fill,
-          opacity: triggerPress.style.opacity,
-          transform: triggerPress.style.transform
-        }, disabled && styles.dimmed, theme.elevation.lg],
-        children: [focused && /*#__PURE__*/_jsx(View, {
-          pointerEvents: "none",
+          backgroundColor: triggerColors.fill
+        }, triggerPress.animatedStyle, disabled && styles.dimmed, theme.elevation.lg],
+        children: [/*#__PURE__*/_jsx(Reanimated.View, {
+          style: [StyleSheet.absoluteFill, {
+            backgroundColor: triggerOverlayColor,
+            borderRadius: theme.radii.full,
+            borderCurve: "continuous"
+          }, triggerPress.overlayStyle, {
+            pointerEvents: "none"
+          }]
+        }), focused && /*#__PURE__*/_jsx(View, {
           testID: testID ? `${testID}-trigger-focus-ring` : undefined,
-          style: focusRingStyle
-        }), /*#__PURE__*/_jsx(Animated.View, {
-          style: {
-            transform: [{
-              rotate
-            }]
-          },
+          style: [focusRingStyle, {
+            pointerEvents: 'none'
+          }]
+        }), /*#__PURE__*/_jsx(Reanimated.View, {
+          style: rotateStyle,
           children: /*#__PURE__*/_jsx(Icon, {
             name: icon,
             size: spec.iconSize,

package/lib/module/modules/fab/FabGroupProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=FabGroupProps.js.map

package/lib/module/modules/fab/FabProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=FabProps.js.map

package/lib/module/modules/fab/MODULE.md

@@ -125,6 +125,10 @@ its trigger is not a tooltip target.
 
 ## Known gaps
 
+- **Fab's own focus ring can be clipped by its `overflow: "hidden"`** — the ring is drawn with
+  negative offsets outside the control's own bounds, and the Pressable clips to its own rect. FabGroup's
+  trigger avoids this: it carries no `overflow: "hidden"`, since its overlay self-clips via its own
+  `borderRadius`.
 - **No safe-area inset awareness** beyond the static iOS home-indicator approximation (see pattern
   #3) — same documented gap `Toast`/`Drawer`/`BottomNav` already carry.
 - **No focus ring on the mini action ROWS.** The trigger reached parity with `Fab` (identical
@@ -149,20 +153,22 @@ its trigger is not a tooltip target.
 
 ## Motion
 
-Nothing in this module owns a duration, easing or `Animated.timing` config — all of it comes from
+Nothing in this module owns a duration, easing or timing config — all of it comes from
 `useMotion()` / `usePressMotion()` in `core/motion`, so retuning `core/motion/config.ts` retunes the
 Fab too. Everything animates `opacity`/`transform` only, always on the native driver.
 
-- **Fab press** — one `Animated.Value` drives both the tone-aware state-layer scrim and the press
-  scale (`motion.transform.pressScale`), so the two can never desync.
-- **FabGroup expand/collapse** — one `progress` value; the trigger glyph rotates 0→45°, the scrim
-  fades, and each action row reveals over its own slice of that same value.
+- **Press feedback** — Fab, the FabGroup trigger, and each action row all use `usePressState`
+  (`core/motion/usePressState`), the same width-aware scale + state-layer overlay + spring settle
+  every other pressable in this library uses.
+- **FabGroup expand/collapse** — one classic `progress` value; the trigger glyph rotates 0→45°, the
+  scrim fades, and each action row reveals over its own slice of that same value.
 - **The action stagger is decorative** (`motion.decorative`, high tier only). It is expressed as a
   per-row interpolation *window* (`resolveFabGroupActionWindow`), not per-row animations: no extra
   timers or `Animated.Value`s, and it reverses correctly on close. On low/mid tier every row shares
   the full `[0, 1]` window and the rows reveal together.
-- **Action rows and the trigger** use `usePressMotion`; a row's reveal opacity and its press opacity
-  are combined with `Animated.multiply` rather than fighting over the same style key.
+- **Action rows nest two animations**: an outer `Reanimated.View` reveal (opacity + translateY, tied
+  to `progress`) wraps the inner `usePressState`-driven `AnimatedPressable` — the two fades compose
+  by nesting rather than being multiplied into one value.
 - In-flight animations are stopped on effect cleanup and on unmount.
 
 ## Performance
@@ -174,8 +180,8 @@ every parent render. The reversed row list is `useMemo`'d. The action stack and
 while `mounted` (never while the trigger alone is on screen), matching Menu/Select/Drawer's
 identical "sheet content built only while open" convention.
 
-## Modernization (v1.0.7)
+## Android
 
-- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
-- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
-- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.
+`android_ripple` on every pressable target: `borderless: true` on the two circular icon-only
+controls (Fab, the trigger), `false` elsewhere. FabGroup's dismiss scrim uses
+`MOTION_TRANSFORM.scrimOpacity`.