pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/empty-state/EmptyState.js

@@ -17,13 +17,15 @@
  */
 
 import { memo, useMemo } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { View } from "react-native";
+import Reanimated, { FadeInDown, FadeOut, ReduceMotion } from "react-native-reanimated";
 import { useAnnounce } from "../../core/a11y/index.js";
-import { HEADING_LEVEL, HeadingText } from "../../core/heading/index.js";
 import { Icon } from "../../core/icon/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/index.js";
 import { Button } from "../button/index.js";
-import { EMPTY_STATE_ICON_SIZE, emptyStateStructure, resolveEmptyStateAnnouncement, resolveEmptyStateColors } from "./EmptyState.variants.js";
+import { Text, Heading } from "../text/index.js";
+import { EMPTY_STATE_ICON_SIZE, emptyStateFillStructure, emptyStateStructure, resolveEmptyStateAnnouncement, resolveEmptyStateColors } from "./EmptyState.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // A lighter stroke than the default 2 — at 48dp a 2px stroke reads heavier than the muted,
 // secondary role this glyph plays next to the title.
@@ -33,6 +35,7 @@ export const EmptyState = /*#__PURE__*/memo(function EmptyState({
   title,
   description,
   action,
+  fill = false,
   style,
   testID
 }) {
@@ -42,24 +45,16 @@ export const EmptyState = /*#__PURE__*/memo(function EmptyState({
   // No `accessibilityLiveRegion` alongside this — it is Android-only and would announce twice there
   // (the contract `core/a11y/MODULE.md` states, same as `Input`/`FormField`).
   useAnnounce(resolveEmptyStateAnnouncement(title, description));
-  const rootStyle = useMemo(() => [emptyStateStructure(theme), style], [theme, style]);
-  const titleStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.bold), styles.text, {
-    fontSize: theme.fontSizes.lg,
-    color: colors.title
-  }], [theme, colors]);
-  const descriptionStyle = useMemo(() => [styles.text, {
-    fontSize: theme.fontSizes.sm,
-    color: colors.description
-  }], [theme, colors]);
-  return /*#__PURE__*/_jsxs(View, {
+  const rootStyle = useMemo(() => [emptyStateStructure(theme), fill && emptyStateFillStructure(theme), fill && {
+    backgroundColor: floatingBackground(theme, "sm"),
+    ...floatingSurfaceStyle(theme, "sm")
+  }, style], [theme, fill, style]);
+  return /*#__PURE__*/_jsxs(Reanimated.View, {
     testID: testID,
+    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+    exiting: FadeOut.reduceMotion(ReduceMotion.System),
     style: rootStyle,
-    children: [icon !== undefined &&
-    /*#__PURE__*/
-    // Decorative — redundant with the visible title below, so it is hidden from assistive
-    // tech rather than announced as a second, unexplained element (same contract `Avatar` and
-    // `Skeleton` give their own decorative default).
-    _jsx(View, {
+    children: [icon !== undefined && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-icon`,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
@@ -69,13 +64,12 @@ export const EmptyState = /*#__PURE__*/memo(function EmptyState({
         color: colors.icon,
         strokeWidth: ICON_STROKE
       })
-    }), /*#__PURE__*/_jsx(HeadingText, {
-      accessibilityRole: "header",
-      "aria-level": HEADING_LEVEL.section,
-      style: titleStyle,
+    }), /*#__PURE__*/_jsx(Heading, {
+      variant: "h3",
       children: title
     }), description !== undefined && /*#__PURE__*/_jsx(Text, {
-      style: descriptionStyle,
+      variant: "body-sm",
+      color: "muted",
       children: description
     }), action !== undefined && /*#__PURE__*/_jsx(Button, {
       label: action.label,
@@ -85,9 +79,4 @@ export const EmptyState = /*#__PURE__*/memo(function EmptyState({
     })]
   });
 });
-const styles = StyleSheet.create({
-  text: {
-    textAlign: "center"
-  }
-});
 //# sourceMappingURL=EmptyState.js.map

package/lib/module/modules/empty-state/EmptyState.variants.js

@@ -60,4 +60,11 @@ export const emptyStateStructure = createThemedVariants(theme => ({
     rowGap: theme.space[3]
   }
 }));
+export const emptyStateFillStructure = createThemedVariants(_theme => ({
+  base: {
+    flex: 1,
+    alignSelf: "stretch",
+    width: "100%"
+  }
+}));
 //# sourceMappingURL=EmptyState.variants.js.map

package/lib/module/modules/empty-state/MODULE.md

@@ -23,6 +23,7 @@ identity, same reasoning `Divider`/`Avatar` give for theirs.
 | `title` | `string` | — | Required. Rendered bold, `fg.default`, centred. |
 | `description` | `string` | — | Optional. Rendered `fg.muted`, centred, below the title. |
 | `action` | `{ label: string; onPress: () => void }` | — | Optional. Rendered via this library's own `Button` (`tone="accent" variant="solid"`) — a justified composition, same reasoning `AlertDialog` documents for its own footer buttons. |
+| `fill` | `boolean` | `false` | `flex: 1` + centred — fills a list/screen slot without a wrapper. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 | `testID` | `string` | — | Forwarded to the outermost `View`; the icon wrapper (when rendered) gets `${testID}-icon`. |
 

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

@@ -20,12 +20,17 @@
  * 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";
+import { fabCircleStructure, fabExtendedStructure, fabOverlayColor, 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). */
 
@@ -34,19 +39,6 @@ import { fabCircleStructure, fabExtendedStructure, FAB_SIZES, resolveFabAccessib
 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 +63,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 +76,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 +86,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 +98,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,
@@ -157,32 +138,31 @@ 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, {
+        pointerEvents: "none",
         style: [StyleSheet.absoluteFill, {
           backgroundColor: overlayColor,
-          opacity: press,
-          borderRadius: theme.radii.full
-        }]
+          borderRadius: theme.radii.full,
+          borderCurve: "continuous"
+        }, press.overlayStyle]
       }), focused && /*#__PURE__*/_jsx(View, {
         pointerEvents: "none",
         testID: testID ? `${testID}-focus-ring` : undefined,

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

@@ -71,6 +71,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.
@@ -338,7 +352,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

@@ -31,13 +31,16 @@
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
 import { Icon } from "../../core/icon/index.js";
-import { useAnimatedValue, useMotion, usePressMotion } from "../../core/motion/index.js";
+import { useAnimatedValue, useMotion } 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,7 +69,7 @@ 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;
@@ -80,49 +83,59 @@ function FabGroupActionRowImpl({
     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 revealStyle = useMemo(() => ({
+    opacity: revealOpacity,
+    transform: [{
+      translateY
+    }]
+  }), [revealOpacity, translateY]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android") return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: false
+    };
+  }, [theme.mode]);
+
+  // Reveal (classic Animated) nests press feedback (Reanimated `usePressState`) — fades compose.
+  return /*#__PURE__*/_jsx(Animated.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);
@@ -237,10 +250,17 @@ function FabGroupImpl({
     inputRange: [0, 1],
     outputRange: ["0deg", "45deg"]
   }), [progress]);
-  const triggerPress = usePressMotion(disabled);
+  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), []);
@@ -285,18 +305,25 @@ 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, {
+          backgroundColor: triggerColors.fill
+        }, triggerPress.animatedStyle, disabled && styles.dimmed, theme.elevation.lg],
+        children: [/*#__PURE__*/_jsx(Reanimated.View, {
+          pointerEvents: "none",
+          style: [StyleSheet.absoluteFill, {
+            backgroundColor: triggerOverlayColor,
+            borderRadius: theme.radii.full,
+            borderCurve: "continuous"
+          }, triggerPress.overlayStyle]
+        }), focused && /*#__PURE__*/_jsx(View, {
           pointerEvents: "none",
           testID: testID ? `${testID}-trigger-focus-ring` : undefined,
           style: focusRingStyle

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

@@ -125,6 +125,11 @@ 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. Found
+  in the Round 5 Android-parity pass, not fixed here (unrelated to that pass's scope). 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
@@ -153,16 +158,18 @@ Nothing in this module owns a duration, easing or `Animated.timing` config — a
 `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 (Round 5 press-feedback unification).
+- **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 animation systems**: an outer classic-`Animated.View` reveal (opacity +
+  translateY, tied to `progress`) wraps the inner `usePressState`-driven `AnimatedPressable` — the
+  two fades compose by nesting instead of `Animated.multiply`.
 - In-flight animations are stopped on effect cleanup and on unmount.
 
 ## Performance
@@ -179,3 +186,9 @@ identical "sheet content built only while open" convention.
 - 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.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.
+- **Round 5 (Android parity + press unification)** — Fab, the trigger, and action rows switched from
+  hand-rolled classic-`Animated` press timing to the shared `usePressState`; `android_ripple` added
+  everywhere it was missing (`borderless: true` on the two circular icon-only targets, `false`
+  elsewhere); the trigger gained a press-state overlay matching Fab's own.