pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/modules/pagination/Pagination.js

@@ -17,13 +17,72 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { ActivityIndicator, Animated, Pressable, ScrollView, Text, View } from "react-native";
+import { ActivityIndicator, Animated, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import Reanimated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
 import { useAnnounce } from "../../core/a11y/index.js";
 import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
 import { useTheme } from "../../theme/hooks.js";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/index.js";
+import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { DEFAULT_LOAD_MORE_LABEL, PAGINATION_SIZES, clampPage, buildPageRange, formatPageLabel, normalizePageCount, paginationLoadMoreStructure, paginationRowStructure, paginationScrollContentStructure, paginationStripRootStructure, resolvePaginationColors, resolvePaginationHitSlop } from "./Pagination.variants.js";
 import { PaginationEllipsis, PaginationPageControl, PaginationStepControl } from "./PaginationControls.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
+function LoadMoreButton({
+  inert,
+  loading,
+  loadMoreLabel,
+  onLoadMore,
+  theme,
+  colors,
+  hitSlop,
+  size,
+  spec,
+  testID
+}) {
+  const press = usePressState(inert);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    testID: testID ? `${testID}-load-more` : undefined,
+    accessibilityRole: "button",
+    accessibilityLabel: loadMoreLabel,
+    "aria-disabled": inert,
+    "aria-busy": loading,
+    disabled: inert,
+    onPress: inert ? undefined : onLoadMore,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
+    hitSlop: hitSlop,
+    style: [paginationLoadMoreStructure(theme, {
+      size
+    }), {
+      borderColor: colors.border,
+      overflow: "hidden"
+    }, press.animatedStyle],
+    children: [/*#__PURE__*/_jsx(Reanimated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), loading && /*#__PURE__*/_jsx(ActivityIndicator, {
+      size: "small",
+      color: colors.inactiveLabel,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants"
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+        fontSize: spec.fontSize,
+        color: inert ? colors.inactiveLabel : colors.label
+      }],
+      children: loadMoreLabel
+    })]
+  });
+}
 function PaginationImpl({
   page,
   pageCount,
@@ -95,7 +154,10 @@ function PaginationImpl({
     opacity: summaryOpacity
   }], [theme, spec.fontSize, blocked, colors, summaryOpacity]);
   const rowStyle = useMemo(() => [paginationRowStructure(theme), style], [theme, style]);
-  const stripStyle = useMemo(() => [paginationStripRootStructure(), style], [style]);
+  const stripStyle = useMemo(() => [paginationStripRootStructure(), {
+    backgroundColor: floatingBackground(theme, "sm"),
+    ...floatingSurfaceStyle(theme, "sm")
+  }, style], [theme, style]);
   if (variant === "loadMore") {
     if (!hasMore && !loading) return null;
     const inert = blocked || onLoadMore === undefined;
@@ -103,41 +165,17 @@ function PaginationImpl({
       testID: testID,
       accessibilityRole: "none",
       style: rowStyle,
-      children: /*#__PURE__*/_jsxs(Pressable, {
-        testID: testID ? `${testID}-load-more` : undefined,
-        accessibilityRole: "button",
-        accessibilityLabel: loadMoreLabel,
-        "aria-disabled": inert,
-        "aria-busy": loading,
-        disabled: inert,
-        onPress: inert ? undefined : onLoadMore,
+      children: /*#__PURE__*/_jsx(LoadMoreButton, {
+        inert: inert,
+        loading: loading,
+        loadMoreLabel: loadMoreLabel,
+        onLoadMore: onLoadMore,
+        theme: theme,
+        colors: colors,
         hitSlop: hitSlop,
-        style: ({
-          pressed
-        }) => [paginationLoadMoreStructure(theme, {
-          size
-        }), {
-          borderColor: colors.border
-        }, pressed && {
-          backgroundColor: colors.pressedFill
-        }],
-        children: [loading &&
-        /*#__PURE__*/
-        // Never the sole loading signal — `aria-busy` announces it and the label
-        // stays visible. Hidden from AT so it isn't read as a separate element (Button's spinner).
-        _jsx(ActivityIndicator, {
-          size: "small",
-          color: colors.inactiveLabel,
-          accessibilityElementsHidden: true,
-          importantForAccessibility: "no-hide-descendants"
-        }), /*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
-          style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-            fontSize: spec.fontSize,
-            color: inert ? colors.inactiveLabel : colors.label
-          }],
-          children: loadMoreLabel
-        })]
+        size: size,
+        spec: spec,
+        testID: testID
       })
     });
   }
@@ -158,7 +196,8 @@ function PaginationImpl({
       }), renderStep("next", "chevron-right"), showFirstLast && renderStep("last", "chevrons-right")]
     });
   }
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
+    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
     testID: testID,
     accessibilityRole: "none",
     style: stripStyle,

package/lib/module/modules/pagination/Pagination.variants.js

@@ -241,7 +241,8 @@ export const paginationControlStructure = createThemedVariants(theme => ({
     justifyContent: "center",
     minWidth: PAGINATION_CONTROL_MIN_WIDTH,
     paddingHorizontal: theme.space[1],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {
@@ -287,7 +288,8 @@ export const paginationLoadMoreStructure = createThemedVariants(theme => ({
     columnGap: theme.space[2],
     minWidth: PAGINATION_CONTROL_MIN_WIDTH,
     paddingHorizontal: theme.space[4],
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     borderWidth: theme.borderWidths.thin
   },
   variants: {

package/lib/module/modules/pagination/PaginationControls.js

@@ -1,23 +1,22 @@
 "use strict";
 
 /**
- * PRIVATE sub-components (not exported from `index.ts`). One control per node, each `React.memo`'d
- * and fed primitives only, so a page change re-renders the two controls whose state actually
- * changed instead of the whole strip — and so no `onPress`/`style` closure is rebuilt per control
- * per render.
+ * PRIVATE sub-components for Pagination controls.
  */
 
 import { memo, useCallback, useMemo, useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { paginationControlStructure, paginationEllipsisStructure, resolvePaginationPage, resolvePaginationStep } from "./Pagination.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const ELLIPSIS_GLYPH = "…";
 const FOCUS_RING_WIDTH = 2;
 const FOCUS_RING_INSET = 2;
-
-// Inset, not Button's outside offsets: the strip's ScrollView is one control tall and clips.
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const focusRingStyleFor = theme => ({
   position: "absolute",
   pointerEvents: "none",
@@ -27,8 +26,20 @@ const focusRingStyleFor = theme => ({
   bottom: FOCUS_RING_INSET,
   borderWidth: FOCUS_RING_WIDTH,
   borderColor: theme.colors.border.focus,
-  borderRadius: Math.max(0, theme.radii.base - FOCUS_RING_INSET)
+  borderRadius: Math.max(0, theme.radii.md - FOCUS_RING_INSET)
 });
+function usePaginationPress(theme, disabled) {
+  const press = usePressState(disabled);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  return {
+    press,
+    overlayStaticStyle
+  };
+}
 export const PaginationStepControl = /*#__PURE__*/memo(function PaginationStepControl({
   kind,
   icon,
@@ -52,38 +63,43 @@ export const PaginationStepControl = /*#__PURE__*/memo(function PaginationStepCo
     loading
   });
   const target = a11y.targetPage;
+  const inert = a11y.disabled;
+  const {
+    press,
+    overlayStaticStyle
+  } = usePaginationPress(theme, inert);
   const handlePress = useCallback(() => {
     if (target !== undefined) onPageChange(target);
   }, [target, onPageChange]);
-  const pressedFill = colors.pressedFill;
-  const inert = a11y.disabled;
-  const controlStyle = useCallback(({
-    pressed
-  }) => [paginationControlStructure(theme, {
-    size
-  }), pressed && !inert ? {
-    backgroundColor: pressedFill
-  } : null], [theme, size, inert, pressedFill]);
   const [focused, setFocused] = useState(false);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
   const focusRingStyle = useMemo(() => focusRingStyleFor(theme), [theme]);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  const controlStyle = useMemo(() => [paginationControlStructure(theme, {
+    size
+  }), {
+    overflow: "hidden"
+  }, press.animatedStyle], [theme, size, press.animatedStyle]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
     "aria-disabled": a11y["aria-disabled"],
     "aria-busy": a11y["aria-busy"],
-    disabled: inert
-    // RN's Pressable stays `focusable` when disabled, so a TV remote could land on a boundary arrow.
-    ,
+    disabled: inert,
     focusable: !inert,
     onPress: target === undefined ? undefined : handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     onFocus: handleFocus,
     onBlur: handleBlur,
     hitSlop: hitSlop,
     style: controlStyle,
-    children: [focused && !inert && /*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), focused && !inert && /*#__PURE__*/_jsx(View, {
       testID: testID ? `${testID}-focus-ring` : undefined,
       style: focusRingStyle
     }), /*#__PURE__*/_jsx(Icon, {
@@ -118,22 +134,20 @@ export const PaginationPageControl = /*#__PURE__*/memo(function PaginationPageCo
   });
   const target = a11y.targetPage;
   const current = a11y.current;
+  const {
+    press,
+    overlayStaticStyle
+  } = usePaginationPress(theme, a11y.disabled);
   const handlePress = useCallback(() => {
     if (target !== undefined) onPageChange(target);
   }, [target, onPageChange]);
-  const {
-    currentFill,
-    pressedFill
-  } = colors;
-  const controlStyle = useCallback(({
-    pressed
-  }) => [paginationControlStructure(theme, {
+  const controlStyle = useMemo(() => [paginationControlStructure(theme, {
     size
   }), current ? {
-    backgroundColor: currentFill
-  } : null, !current && pressed ? {
-    backgroundColor: pressedFill
-  } : null], [theme, size, current, currentFill, pressedFill]);
+    backgroundColor: colors.currentFill
+  } : null, {
+    overflow: "hidden"
+  }, press.animatedStyle], [theme, size, current, colors.currentFill, press.animatedStyle]);
   const labelStyle = useMemo(() => [theme.fontStyleForWeight(current ? theme.fontWeights.semibold : theme.fontWeights.regular), {
     fontSize,
     color: current ? colors.onCurrentFill : blocked ? colors.inactiveLabel : colors.label
@@ -142,7 +156,7 @@ export const PaginationPageControl = /*#__PURE__*/memo(function PaginationPageCo
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
   const focusRingStyle = useMemo(() => focusRingStyleFor(theme), [theme]);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
@@ -153,11 +167,17 @@ export const PaginationPageControl = /*#__PURE__*/memo(function PaginationPageCo
     disabled: a11y.disabled,
     focusable: !a11y.disabled,
     onPress: target === undefined ? undefined : handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     onFocus: handleFocus,
     onBlur: handleBlur,
     hitSlop: hitSlop,
     style: controlStyle,
-    children: [focused && !a11y.disabled && /*#__PURE__*/_jsx(View, {
+    children: [!current && /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), focused && !a11y.disabled && /*#__PURE__*/_jsx(View, {
       testID: testID ? `${testID}-focus-ring` : undefined,
       style: focusRingStyle
     }), /*#__PURE__*/_jsx(Text, {

package/lib/module/modules/pin-input/MODULE.md

@@ -79,7 +79,9 @@ Tapping ANY box focuses the same single underlying field — splitting the touch
 would just be N different ways to trigger the identical action, with no independent affordance
 each box could offer on its own. So the whole row is ONE `Pressable` (wrapping both the boxes and
 the hidden field), and `hitSlop` (via the same `slopFor` formula Button/Input use) is computed
-once against the row/box height, not per box. `PinInput.test.ts` asserts
+once against the row/box height, not per box. The row also carries `android_ripple`
+(`rippleColor(theme.mode)`, `borderless: false`) when not disabled, gated on
+`Platform.OS === "android"`. `PinInput.test.ts` asserts
 `boxSize + 2·hitSlop ≥ 44` arithmetically for every size; `PinInput.render.test.tsx` additionally
 asserts the REAL rendered `hitSlop` prop and box dimensions (not just the constants) reach 44dp,
 same pattern as `Input`/`ButtonGroup`/`Reorder`'s render-level touch-target checks.
@@ -147,3 +149,5 @@ 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.

package/lib/module/modules/pin-input/PinInput.js

@@ -13,9 +13,10 @@
  * per box would just be N ways to trigger the identical action.
  */
 
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { clampPinInputValue, isPinInputComplete, PIN_INPUT_SIZES, pinInputBoxStructure, pinInputRowStructure, resolvePinInputAccessibility, resolvePinInputActiveIndex, resolvePinInputBoxColors } from "./PinInput.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FOCUS_RING_WIDTH = 2;
@@ -51,6 +52,10 @@ export const PinInput = /*#__PURE__*/memo(function PinInput(props) {
     errorText
   });
   const activeIndex = resolvePinInputActiveIndex(value, length);
+  const androidRipple = useMemo(() => Platform.OS === "android" && !disabled ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [disabled, theme.mode]);
 
   // Always reads the LATEST `onComplete` without making it an effect dependency — a caller passing
   // a fresh inline arrow every render must not re-fire the completion effect on every render, only
@@ -76,6 +81,7 @@ export const PinInput = /*#__PURE__*/memo(function PinInput(props) {
       disabled: disabled,
       onPress: disabled ? undefined : focusInput,
       hitSlop: spec.hitSlop,
+      android_ripple: androidRipple,
       style: [pinInputRowStructure(theme, {
         size
       }), disabled && styles.dimmed],
@@ -105,7 +111,8 @@ export const PinInput = /*#__PURE__*/memo(function PinInput(props) {
               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
+              borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+              borderCurve: "continuous"
             }
           }), char !== undefined && (secureTextEntry ? /*#__PURE__*/_jsx(View, {
             testID: testID ? `${testID}-dot-${index}` : undefined,

package/lib/module/modules/pin-input/PinInput.variants.js

@@ -166,7 +166,8 @@ export const pinInputBoxStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {

package/lib/module/modules/radio-group/MODULE.md

@@ -65,8 +65,8 @@ closed union of appearances. The ring is always `border.interactive`; the select
   in the group clips), on the focused row only, never while disabled. Rows also carry
   `focusable={!disabled}` — RN's `Pressable` stays focusable when disabled, which on a TV remote
   would otherwise land on a row that renders no ring (same fix NumberInput's steppers use).
-- **2.3.3** — n/a: nothing here animates. The dot appears/disappears by conditional render (not a
-  fade or a slide), so there is no transition for `useReducedMotion` to gate.
+- **2.3.3** — n/a for selection dot (conditional render). Row presses use `usePressState` (scale +
+  state-layer overlay), which snaps under reduce motion.
 - Disabled rows are exempt from the contrast minimum (WCAG 1.4.3), so the uniform `opacity: 0.5`
   dim is correct, same as Button.
 

package/lib/module/modules/radio-group/RadioGroup.js

@@ -10,8 +10,12 @@
  * so there is nothing for `useReducedMotion` (WCAG 2.3.3) to gate — unlike Button's press fade.
  */
 
-import { memo, useRef, useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import { memo, useRef, useState, useMemo, useCallback } from "react";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { RADIO_GROUP_SIZES, radioDotStructure, radioGroupStructure, radioRingStructure, radioRowStructure, resolveRadioGroupColors, resolveRadioGroupKeyIndex, resolveRadioRowAccessibility } from "./RadioGroup.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -25,6 +29,94 @@ const KeyboardView = View;
 // the surface that role token is proven ≥ 3:1 against (WCAG 2.4.11).
 const FOCUS_RING_WIDTH = 2;
 const FOCUS_RING_GAP = 2;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+function RadioRow({
+  option,
+  index,
+  selected,
+  disabled,
+  active,
+  size,
+  colors,
+  spec,
+  theme,
+  focusRingStyle,
+  focusedIndex,
+  setFocusedIndex,
+  selectValue,
+  rowRefs,
+  testID
+}) {
+  const press = usePressState(disabled);
+  const a11y = resolveRadioRowAccessibility({
+    selected,
+    disabled
+  });
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.rowHost,
+    children: [focusedIndex === index && !disabled && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      testID: testID ? `${testID}-${option.value}-focus-ring` : undefined,
+      style: [styles.focusRing, focusRingStyle]
+    }), /*#__PURE__*/_jsxs(AnimatedPressable, {
+      ref: node => {
+        rowRefs.current[index] = node;
+      },
+      testID: testID ? `${testID}-${option.value}` : undefined,
+      accessibilityRole: a11y.accessibilityRole,
+      "aria-checked": a11y["aria-checked"],
+      "aria-disabled": a11y["aria-disabled"],
+      accessibilityLabel: option.label,
+      disabled: a11y.disabled,
+      tabIndex: !disabled && active ? 0 : -1,
+      focusable: !disabled,
+      onFocus: () => setFocusedIndex(() => index),
+      onBlur: () => setFocusedIndex(current => current === index ? null : current),
+      onPress: disabled ? undefined : () => selectValue(option.value),
+      onPressIn: press.handlers.onPressIn,
+      onPressOut: press.handlers.onPressOut,
+      onLayout: press.onLayout,
+      hitSlop: spec.hitSlop,
+      android_ripple: Platform.OS === "android" && !disabled ? {
+        color: rippleColor(theme.mode),
+        borderless: false
+      } : undefined,
+      style: [radioRowStructure(theme, {
+        size
+      }), {
+        overflow: "hidden"
+      }, press.animatedStyle, disabled && styles.dimmed],
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [radioRingStructure(theme, {
+          size
+        }), {
+          borderColor: colors.ring
+        }],
+        children: selected && /*#__PURE__*/_jsx(View, {
+          style: [radioDotStructure({
+            size
+          }), {
+            backgroundColor: colors.dot
+          }]
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+          fontSize: spec.fontSize,
+          color: colors.label
+        }],
+        children: option.label
+      })]
+    }, option.value)]
+  });
+}
 export const RadioGroup = /*#__PURE__*/memo(function RadioGroup({
   options,
   value,
@@ -36,6 +128,7 @@ export const RadioGroup = /*#__PURE__*/memo(function RadioGroup({
   testID
 }) {
   const theme = useTheme();
+  const haptics = useHaptics();
   const spec = RADIO_GROUP_SIZES[size];
   const colors = resolveRadioGroupColors(theme.colors);
 
@@ -46,6 +139,10 @@ export const RadioGroup = /*#__PURE__*/memo(function RadioGroup({
   const activeIndex = selectedIndex >= 0 ? selectedIndex : 0;
   const rowRefs = useRef([]);
   const [focusedIndex, setFocusedIndex] = useState(null);
+  const selectValue = useCallback(nextValue => {
+    haptics.selection();
+    onValueChange(nextValue);
+  }, [haptics, onValueChange]);
   const handleKeyDown = event => {
     if (disabled) return;
     const next = resolveRadioGroupKeyIndex({
@@ -57,13 +154,14 @@ export const RadioGroup = /*#__PURE__*/memo(function RadioGroup({
     if (next === undefined || option === undefined) return;
     // Arrow/Home/End would otherwise scroll the page out from under the group.
     event.preventDefault?.();
-    onValueChange(option.value);
+    selectValue(option.value);
     // The tab stop moves with the selection, so DOM focus has to follow it or the ring is stranded.
     rowRefs.current[next]?.focus();
   };
   const focusRingStyle = {
     borderColor: theme.colors.border.focus,
-    borderRadius: theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+    borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+    borderCurve: "continuous"
   };
   return /*#__PURE__*/_jsx(KeyboardView, {
     testID: testID,
@@ -74,71 +172,32 @@ export const RadioGroup = /*#__PURE__*/memo(function RadioGroup({
     style: [radioGroupStructure(theme, {
       size
     }), style],
-    children: options.map((option, index) => {
-      const selected = option.value === value;
-      const a11y = resolveRadioRowAccessibility({
-        selected,
-        disabled
-      });
-      return /*#__PURE__*/_jsxs(Pressable, {
-        ref: node => {
-          rowRefs.current[index] = node;
-        },
-        testID: testID ? `${testID}-${option.value}` : undefined,
-        accessibilityRole: a11y.accessibilityRole,
-        "aria-checked": a11y["aria-checked"],
-        "aria-disabled": a11y["aria-disabled"],
-        accessibilityLabel: option.label,
-        disabled: a11y.disabled,
-        tabIndex: !disabled && index === activeIndex ? 0 : -1
-        // RN's Pressable stays `focusable` when disabled, so a TV remote could otherwise land on
-        // a row that renders no ring (WCAG 2.4.7) — the same fix NumberInput's steppers use.
-        ,
-        focusable: !disabled,
-        onFocus: () => setFocusedIndex(index),
-        onBlur: () => setFocusedIndex(current => current === index ? null : current),
-        onPress: disabled ? undefined : () => onValueChange(option.value),
-        hitSlop: spec.hitSlop,
-        style: ({
-          pressed
-        }) => [radioRowStructure(theme, {
-          size
-        }), pressed && !disabled && {
-          backgroundColor: colors.pressedRow
-        }, disabled && styles.dimmed],
-        children: [focusedIndex === index && !disabled && /*#__PURE__*/_jsx(View, {
-          pointerEvents: "none",
-          testID: testID ? `${testID}-${option.value}-focus-ring` : undefined,
-          style: [styles.focusRing, focusRingStyle]
-        }), /*#__PURE__*/_jsx(View, {
-          style: [radioRingStructure(theme, {
-            size
-          }), {
-            borderColor: colors.ring
-          }],
-          children: selected && /*#__PURE__*/_jsx(View, {
-            style: [radioDotStructure({
-              size
-            }), {
-              backgroundColor: colors.dot
-            }]
-          })
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-            fontSize: spec.fontSize,
-            color: colors.label
-          }],
-          children: option.label
-        })]
-      }, option.value);
-    })
+    children: options.map((option, index) => /*#__PURE__*/_jsx(RadioRow, {
+      option: option,
+      index: index,
+      selected: option.value === value,
+      disabled: disabled,
+      active: index === activeIndex,
+      size: size,
+      colors: colors,
+      spec: spec,
+      theme: theme,
+      focusRingStyle: focusRingStyle,
+      focusedIndex: focusedIndex,
+      setFocusedIndex: setFocusedIndex,
+      selectValue: selectValue,
+      rowRefs: rowRefs,
+      testID: testID
+    }, option.value))
   });
 });
 const styles = StyleSheet.create({
-  // A disabled row is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct.
   dimmed: {
     opacity: 0.5
   },
+  rowHost: {
+    position: "relative"
+  },
   focusRing: {
     position: "absolute",
     top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),

package/lib/module/modules/radio-group/RadioGroup.variants.js

@@ -129,7 +129,8 @@ export const radioRowStructure = createThemedVariants(theme => ({
   base: {
     flexDirection: "row",
     alignItems: "center",
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {

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

@@ -136,3 +136,5 @@ Replaced the original `PanResponder` + per-row `Animated.Value` implementation
 one animated node per row, no virtualization, unusable past a few hundred rows — with the single
 shared gesture + `VirtualList` described above. `react-native-gesture-handler` and
 `react-native-reanimated` are non-optional peers. **No public prop API change.**
+
+Drag completion uses `scheduleOnRN` from `react-native-worklets` (not deprecated `runOnJS`).