pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/button/Button.js

@@ -1,48 +1,23 @@
 "use strict";
 
-/**
- * Button — the reference component. The single most-repeated shape in the audited apps (81 raw
- * TouchableOpacity in crm-mobile, 155 in ecommerce-mobile with three different style-key sets for the
- * SAME add-to-cart button, 195 web usages). Every other module copies the patterns here: how variants
- * resolve, how `tone` maps to role colours, how accessibility is wired, and the shape of the tests.
- */
-
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, Animated, 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 } from "react-native";
+import Animated from "react-native-reanimated";
+import { AccentGradientFill } from "../../core/gradient/index.js";
+import { useFocusRing, usePressState } from "../../core/motion/usePressState.js";
+import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/hooks.js";
+import { composeBoxShadow, highlight } from "../../theme/platform/highlight.native.js";
+import { tokenBoxShadow } from "../../theme/platform/floatingSurface.native.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
+import { useTheme, useThemeColors } from "../../theme/hooks.js";
 import { BUTTON_SIZES, buttonStructure, resolveButtonAccessibility, resolveButtonTone } from "./Button.variants.js";
-
-/** A button with a visible text label. `accessibilityLabel` defaults to `label`. */
-
-/**
- * An icon-only button. It has no visible text, so `accessibilityLabel` is REQUIRED at the type level
- * — the single worst a11y trap on web (its tooltip was the only label on icon-only buttons in 22
- * files, and tooltips do not exist on touch). `label?: never` makes the two shapes mutually exclusive.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
-// State-layer scrims. Direction is chosen by the label's brightness so the fill moves AWAY from the
-// label on press — its contrast can only rise. 8-digit hex carries the alpha (~15%) directly.
-const PRESS_SCRIM_DARK = "#00000026";
-const PRESS_SCRIM_LIGHT = "#ffffff26";
-// 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.
-const FOCUS_RING_WIDTH = 2;
+const FOCUS_RING_WIDTH = 3;
 const FOCUS_RING_GAP = 2;
-
-// The press scale has to sit on the same node `style` lands on, so the contract's "style last" holds.
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-
-/** 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 ButtonImpl(props) {
   const {
     variant = "solid",
@@ -68,45 +43,35 @@ function ButtonImpl(props) {
     accessibilityHint
   } = props;
   const theme = useTheme();
-  const motion = useMotion();
-  const pressed = useAnimatedValue(0);
-  const running = useRef(null);
-  // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
+  const colors = useThemeColors();
+  const haptics = useHaptics();
+  const blocked = disabled || loading;
+  const press = usePressState(blocked);
   const [focused, setFocused] = useState(false);
+  const {
+    focusRingStyle
+  } = useFocusRing(focused, blocked);
   const spec = BUTTON_SIZES[size];
   const toneColors = useMemo(() => resolveButtonTone(theme.colors, tone), [theme.colors, tone]);
   const iconOnly = label === undefined;
   const foreground = variant === "solid" ? toneColors.onFill : toneColors.text;
-  const overlayColor = variant === "solid" ? isLight(toneColors.onFill) ? PRESS_SCRIM_DARK : PRESS_SCRIM_LIGHT : toneColors.subtle;
+  const overlayColor = stateLayerScrim(theme.mode);
+  const handlePress = useCallback(() => {
+    haptics.selection();
+    onPress?.();
+  }, [haptics, onPress]);
   const a11y = useMemo(() => resolveButtonAccessibility({
     label,
     accessibilityLabel,
     disabled,
     loading,
     selected,
-    onPress
-  }), [label, accessibilityLabel, disabled, loading, selected, onPress]);
-  const setPressed = useCallback(isPressed => {
-    running.current?.stop();
-    const toValue = isPressed ? 1 : 0;
-    if (!motion.enabled) {
-      pressed.setValue(toValue);
-      return;
-    }
-    running.current = motion.timing(pressed, toValue, {
-      duration: "fast"
-    });
-    running.current.start();
-  }, [motion, pressed]);
-  useEffect(() => () => running.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]);
+    onPress: onPress === undefined ? undefined : handlePress
+  }), [label, accessibilityLabel, disabled, loading, selected, onPress, handlePress]);
   const handlePressOut = useCallback(event => {
-    setPressed(false);
+    press.handlers.onPressOut();
     onPressOut?.(event);
-  }, [setPressed, onPressOut]);
+  }, [press.handlers, onPressOut]);
   const handleFocus = useCallback(event => {
     setFocused(true);
     onFocus?.(event);
@@ -115,42 +80,55 @@ function ButtonImpl(props) {
     setFocused(false);
     onBlur?.(event);
   }, [onBlur]);
-
-  // One value, two consumers: the state-layer opacity and the root's press scale.
-  const scaleStyle = useMemo(() => ({
-    transform: [{
-      scale: pressed.interpolate({
-        inputRange: [0, 1],
-        outputRange: [1, motion.transform.pressScale]
-      })
-    }]
-  }), [pressed, motion.transform.pressScale]);
-  const overlayStyle = useMemo(() => [StyleSheet.absoluteFill, {
+  const radius = theme.radii.md;
+  const solidToken = elevationTokens.sm;
+  const solidElevation = theme.elevation.sm;
+  const highlightLayers = highlight("subtle", theme.mode);
+  const surfaceStyle = useMemo(() => {
+    const base = {
+      borderRadius: radius,
+      borderCurve: "continuous"
+    };
+    if (variant === "solid") {
+      base.boxShadow = composeBoxShadow(tokenBoxShadow(solidToken), highlightLayers);
+      base.elevation = solidElevation.elevation;
+      Object.assign(base, solidElevation);
+    }
+    return base;
+  }, [variant, radius, solidToken, solidElevation, highlightLayers]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android") return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: false
+    };
+  }, [theme.mode]);
+  const overlayStaticStyle = useMemo(() => ({
     backgroundColor: overlayColor,
-    opacity: pressed,
-    borderRadius: theme.radii.base,
-    pointerEvents: "none"
-  }], [overlayColor, pressed, theme.radii.base]);
-  const focusRingStyle = useMemo(() => ({
-    position: "absolute",
-    pointerEvents: "none",
+    borderRadius: radius
+  }), [overlayColor, radius]);
+  const focusRingStaticStyle = useMemo(() => ({
+    borderWidth: FOCUS_RING_WIDTH,
+    borderColor: colors.border.focus,
+    borderRadius: radius + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
     top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
     left: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
     right: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-    bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-    borderWidth: FOCUS_RING_WIDTH,
-    borderColor: theme.colors.border.focus,
-    borderRadius: theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH
-  }), [theme.colors.border.focus, theme.radii.base]);
+    bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH)
+  }), [colors.border.focus, radius]);
+  const focusOutlineStyle = useMemo(() => ({
+    outlineWidth: FOCUS_RING_WIDTH,
+    outlineOffset: FOCUS_RING_GAP,
+    outlineColor: colors.border.focus,
+    outlineStyle: "solid",
+    borderRadius: radius
+  }), [colors.border.focus, radius]);
   const glyph = useCallback(name => /*#__PURE__*/_jsx(Icon, {
     name: name,
     size: spec.iconSize,
     color: foreground,
     strokeWidth: ICON_STROKE
   }), [spec.iconSize, foreground]);
-
-  // The spinner is never the sole loading signal — `accessibilityState.busy` announces it, and the
-  // label (when present) stays visible. Hidden from AT so it isn't read as a separate element.
   const spinner = useMemo(() => /*#__PURE__*/_jsx(ActivityIndicator, {
     size: "small",
     color: foreground,
@@ -171,30 +149,40 @@ function ButtonImpl(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,
     hitSlop: spec.hitSlop,
+    android_ripple: androidRipple,
     style: [buttonStructure(theme, {
       variant,
       size
-    }), variant === "solid" && {
+    }), surfaceStyle, {
+      overflow: "hidden"
+    }, variant === "solid" && {
       backgroundColor: toneColors.fill
     }, variant === "outline" && {
       borderColor: toneColors.border
     }, iconOnly && {
       paddingHorizontal: 0,
       minWidth: spec.height
-    }, fullWidth && styles.fullWidth, scaleStyle, (disabled || loading) && styles.dimmed, style],
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      testID: "button-press-overlay",
-      style: overlayStyle
-    }), focused && /*#__PURE__*/_jsx(View, {
+    }, fullWidth && styles.fullWidth, press.animatedStyle, focused && focusOutlineStyle, (disabled || loading) && styles.dimmed, style],
+    children: [variant === "solid" && /*#__PURE__*/_jsx(AccentGradientFill, {
+      color: toneColors.fill
+    }), focused && /*#__PURE__*/_jsx(Animated.View, {
       testID: "button-focus-ring",
-      style: focusRingStyle
+      style: [styles.focusRingHost, focusRingStaticStyle, focusRingStyle, {
+        pointerEvents: 'none'
+      }]
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      testID: "button-press-overlay",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), leading, label !== undefined && /*#__PURE__*/_jsx(Text, {
       numberOfLines: 1,
       style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
@@ -209,16 +197,16 @@ const styles = StyleSheet.create({
   fullWidth: {
     alignSelf: "stretch"
   },
-  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct.
   dimmed: {
     opacity: 0.5
   },
   linkText: {
     textDecorationLine: "underline"
+  },
+  focusRingHost: {
+    position: "absolute",
+    pointerEvents: "none"
   }
 });
-
-// A consumer's screen re-renders far more often than Button's own props change — memo is near-free
-// insurance for a design-system primitive (see CLAUDE.md "Performance — no unnecessary re-renders").
 export const Button = /*#__PURE__*/memo(ButtonImpl);
 //# sourceMappingURL=Button.js.map

package/lib/module/modules/button/Button.variants.js

@@ -16,14 +16,10 @@
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
-/**
- * The one touch-target floor we hold every size to. 44dp is Apple's HIG minimum and WCAG 2.5.5
- * (AAA); it comfortably exceeds 2.5.8's 24×24 (AA). Sizes shorter than this keep their visual
- * height and reach 44 through `hitSlop` — the target grows, the control never does.
- */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
+import { CONTROL_HEIGHTS, CONTROL_LABEL_FONT_SIZE } from "../../theme/tokens/primitives/controlSizes.js";
+export { MIN_TOUCH_TARGET, slopFor };
 /**
  * Button-specific dimensions. Height, icon size and slop are the component's own design constants;
  * `fontSize` sits on the theme's `fontSizes` scale (14/16/18). Kept a plain constant — with no theme
@@ -31,22 +27,22 @@ const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2)
  */
 export const BUTTON_SIZES = {
   sm: {
-    height: 32,
-    fontSize: 14,
+    height: CONTROL_HEIGHTS.sm,
+    fontSize: CONTROL_LABEL_FONT_SIZE.sm,
     iconSize: 16,
-    hitSlop: slopFor(32)
+    hitSlop: slopFor(CONTROL_HEIGHTS.sm)
   },
   md: {
-    height: 40,
-    fontSize: 16,
+    height: CONTROL_HEIGHTS.md,
+    fontSize: CONTROL_LABEL_FONT_SIZE.md,
     iconSize: 18,
-    hitSlop: slopFor(40)
+    hitSlop: slopFor(CONTROL_HEIGHTS.md)
   },
   lg: {
-    height: 48,
-    fontSize: 18,
+    height: CONTROL_HEIGHTS.lg,
+    fontSize: CONTROL_LABEL_FONT_SIZE.lg,
     iconSize: 20,
-    hitSlop: slopFor(48)
+    hitSlop: slopFor(CONTROL_HEIGHTS.lg)
   }
 };
 /**
@@ -136,7 +132,8 @@ export const buttonStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     columnGap: theme.space[2],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {

package/lib/module/modules/button/ButtonProps.js

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

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

@@ -2,7 +2,7 @@
 
 `Button` is the most-repeated shape in the audited apps (81 raw `TouchableOpacity` in crm-mobile,
 **155** in ecommerce-mobile — with three different style-key sets for the *same* add-to-cart button —
-and 195 web usages). It is also the **reference module**: the other 16 components copy its structure.
+and 195 web usages). It is also the **reference module**: every other module copies its structure.
 
 ## Files
 
@@ -35,6 +35,7 @@ and 195 web usages). It is also the **reference module**: the other 16 component
 | `accessibilityHint` | `string` | — | On the control. A wrapping `Tooltip` MERGES its label into this rather than clobbering it. |
 | `selected` | `boolean` | — | Toggle state for a button that stays "on", e.g. a rich-text-editor toolbar control (Bold/Italic). ACCESSIBILITY ONLY — appearance stays with `variant`, which the caller already swaps for the active look. Omitted entirely, an ordinary button announces no pressed state at all. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | On the `Pressable`. The focus ring and press overlay carry fixed `button-focus-ring` / `button-press-overlay` testIDs, not seeded from this. |
 
 `ButtonProps` is a discriminated union: a labelled button OR an icon-only button (`label?: never` +
 required `accessibilityLabel`). It is impossible to ship an unlabelled icon button — web's single
@@ -76,7 +77,7 @@ hardcoded hexes across 171 colours into crm-mobile. `tone` maps to ROLE colours
 never be an off-palette value. `neutral` is monochrome high-emphasis (`fg.default` fill, `bg.canvas`
 label); `accent`/`danger` map to the accent and danger roles.
 
-## Patterns the other 16 must copy
+## Patterns every other module copies
 
 1. **Structure vs colour split.** Static/theme-numeric structure (height, padding, radius, border
    *width*) → `createThemedVariants` (registered once per theme). Colour → resolved from role tokens
@@ -88,15 +89,11 @@ label); `accent`/`danger` map to the accent and danger roles.
    once, no `{...rest}`, internals never receive consumer style.
 4. **Type-enforced a11y** — make the unlabelled-icon-button state unrepresentable.
 
-## Known gaps
+## Press, focus and elevation
 
-- Render tests need `@testing-library/react-native` + a react-native jest preset (dependency-pending).
-
-## Resolved (were orchestrator flags, now done)
-
-- Icon plumbing hoisted to `src/core/icon/` (deps `lucide-react-native` + `react-native-svg` added
-  as optional peers); `Button.tsx` and `index.ts` import from there.
-- `useReducedMotion` hoisted to `src/core/a11y/`.
+Press feedback uses `usePressState` (Reanimated scale + state-layer overlay, width-aware).
+Focus ring uses native `outline*` props animated via `useFocusRing`. Solid variant gets
+`elevation.sm` + inset highlight; Android `android_ripple` on a clipped pressable.
 
 ## Performance
 
@@ -107,3 +104,7 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
 - 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.
+
+BUTTON_SIZES reads CONTROL_HEIGHTS and CONTROL_LABEL_FONT_SIZE primitives.

package/lib/module/modules/button-group/ButtonGroup.js

@@ -1,27 +1,15 @@
 "use strict";
 
-/**
- * ButtonGroup — a segmented single-choice control. Visually connected segments sharing one outer
- * border and a divider line between adjacent segments, NOT a row of standalone `Button`s — that
- * connected/segmented treatment is a different structural shape than Button's own pill/rect
- * variants, so this is a standalone sibling (it never imports `../button`). The border/divider is
- * drawn PER SEGMENT, not once on the container: every edge that touches the selected segment omits
- * the stroke (see `resolveButtonGroupSegmentEdgeColors` — WCAG 1.4.11) and relies on the selected
- * fill's own contrast against the canvas instead.
- *
- * One component owns the whole group, same as `RadioGroup`: each segment carries its own
- * `accessibilityRole="radio"` + `accessibilityState.checked`, and the container carries
- * `accessibilityRole="radiogroup"` so assistive tech announces the grouping without collapsing the
- * individually-focusable segments into one.
- *
- * No animation anywhere, deliberately: selection is a conditional fill, and the segments share one
- * continuous border, so a per-segment press scale (Button's affordance) would visibly detach a
- * segment from the control it is part of. The `pressed` fill swap is the affordance instead. Nothing
- * animates, so — like `RadioGroup` — there is nothing here for reduce motion (WCAG 2.3.3) to gate.
- */
+// Segmented single-choice control: segments share one tonal container fill, not a bordered frame.
+// A hairline divider sits between adjacent unselected segments, omitted at the selected edge (WCAG
+// 1.4.11) — see `resolveButtonGroupSegmentEdgeColors`. Never imports `../button`; a different shape.
 
 import { memo, useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { BUTTON_GROUP_SIZES, buttonGroupSegmentStructure, buttonGroupStructure, resolveButtonGroupColors, resolveButtonGroupKeyIndex, resolveButtonGroupSegmentAccessibility, resolveButtonGroupSegmentEdgeColors, resolveButtonGroupSegmentHitSlop } from "./ButtonGroup.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -36,8 +24,8 @@ const KeyboardView = View;
  * container is `overflow: "hidden"` so it can clip the joined segment radii, which would erase an
  * outside ring entirely (`ButtonGroup.render.test.tsx` asserts both halves of this).
  */
-const FOCUS_RING_WIDTH = 2;
 const FOCUS_RING_INSET = 2;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 function ButtonGroupSegmentImpl({
   label,
   value,
@@ -56,6 +44,7 @@ function ButtonGroupSegmentImpl({
   testID
 }) {
   const theme = useTheme();
+  const press = usePressState(disabled || selected);
   const [focused, setFocused] = useState(false);
   const a11y = useMemo(() => resolveButtonGroupSegmentAccessibility({
     selected,
@@ -69,6 +58,13 @@ function ButtonGroupSegmentImpl({
     isFirst,
     isLast
   }), [size, isFirst, isLast]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android" || disabled || selected) return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: false
+    };
+  }, [theme.mode, disabled, selected]);
   const handlePress = useCallback(() => onValueChange(value), [onValueChange, value]);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
@@ -84,29 +80,28 @@ function ButtonGroupSegmentImpl({
     bottom: FOCUS_RING_INSET,
     borderWidth: FOCUS_RING_WIDTH,
     borderColor: theme.colors.border.focus,
-    borderRadius: Math.max(0, theme.radii.base - FOCUS_RING_INSET)
-  }), [theme.colors.border.focus, theme.radii.base]);
-  const segmentStyle = useCallback(({
-    pressed
-  }) => [buttonGroupSegmentStructure(theme, {
+    borderRadius: Math.max(0, theme.radii.md - FOCUS_RING_INSET)
+  }), [theme.colors.border.focus, theme.radii.md]);
+  const segmentStyle = useMemo(() => [buttonGroupSegmentStructure(theme, {
     size,
     first: isFirst ? "on" : "off",
     last: isLast ? "on" : "off"
   }), {
-    borderTopColor: edges.top,
-    borderBottomColor: edges.bottom,
-    borderLeftColor: edges.left,
     borderRightColor: edges.right
   }, selected ? {
     backgroundColor: colors.selectedFill
-  } : pressed && !disabled && {
-    backgroundColor: colors.pressedFill
-  }, disabled && styles.dimmed], [theme, size, isFirst, isLast, edges, selected, disabled, colors]);
+  } : null, {
+    overflow: "hidden"
+  }, press.animatedStyle, disabled && styles.dimmed], [theme, size, isFirst, isLast, edges, selected, disabled, colors, press.animatedStyle]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: Math.max(0, theme.radii.md - FOCUS_RING_INSET)
+  }), [theme.mode, theme.radii.md]);
   const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
     fontSize,
     color: selected ? colors.onSelectedFill : colors.label
   }], [theme, fontSize, selected, colors]);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     ref: setRef,
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
@@ -114,17 +109,22 @@ function ButtonGroupSegmentImpl({
     "aria-disabled": a11y["aria-disabled"],
     accessibilityLabel: label,
     disabled: a11y.disabled,
-    tabIndex: active && !disabled ? 0 : -1
-    // RN's Pressable stays `focusable` when disabled, so a TV remote could otherwise land on a
-    // segment that renders no ring (WCAG 2.4.7) — the same fix NumberInput's steppers use.
-    ,
+    tabIndex: active && !disabled ? 0 : -1,
     focusable: !disabled,
     onFocus: handleFocus,
     onBlur: handleBlur,
     onPress: disabled ? undefined : handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     hitSlop: hitSlop,
+    android_ripple: androidRipple,
     style: segmentStyle,
-    children: [focused && !disabled && /*#__PURE__*/_jsx(View, {
+    children: [!selected && /*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), focused && !disabled && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-focus-ring`,
       style: focusRingStyle
     }), /*#__PURE__*/_jsx(Text, {