pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/plan-badge/MODULE.md

@@ -0,0 +1,4 @@
+# plan-badge/ — a billing tier badge
+
+Composes `Badge` — `tone="neutral"` for `free`, `accent` otherwise. Labels are fixed
+(Free / Pro / Enterprise); `tier` (`free` | `pro` | `enterprise`) is the only content prop.

package/lib/module/modules/plan-badge/PlanBadge.js

@@ -0,0 +1,25 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { Badge } from "../badge/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const LABELS = {
+  free: "Free",
+  pro: "Pro",
+  enterprise: "Enterprise"
+};
+export const PlanBadge = /*#__PURE__*/memo(function PlanBadge({
+  tier,
+  style,
+  testID
+}) {
+  const label = useMemo(() => LABELS[tier], [tier]);
+  const tone = tier === "free" ? "neutral" : "accent";
+  return /*#__PURE__*/_jsx(Badge, {
+    label: label,
+    tone: tone,
+    style: style,
+    testID: testID
+  });
+});
+//# sourceMappingURL=PlanBadge.js.map

package/lib/module/modules/plan-badge/PlanBadgeProps.js

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

package/lib/module/modules/plan-badge/index.js

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

package/lib/module/modules/plan-pill/MODULE.md

@@ -0,0 +1,4 @@
+# plan-pill/ — a soft chip showing the active billing plan
+
+Composes `Chip` (`variant="subtle"`, `selected` for any paid tier). Labels are fixed
+(Free plan / Pro plan / Enterprise); takes the same `PlanBadgeTier` as `PlanBadge`.

package/lib/module/modules/plan-pill/PlanPill.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import { memo } from "react";
+import { Chip } from "../chip/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const LABELS = {
+  free: "Free plan",
+  pro: "Pro plan",
+  enterprise: "Enterprise"
+};
+export const PlanPill = /*#__PURE__*/memo(function PlanPill({
+  tier,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(Chip, {
+    label: LABELS[tier],
+    variant: "subtle",
+    selected: tier !== "free",
+    style: style,
+    testID: testID
+  });
+});
+//# sourceMappingURL=PlanPill.js.map

package/lib/module/modules/plan-pill/PlanPillProps.js

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

package/lib/module/modules/plan-pill/index.js

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

package/lib/module/modules/progress-bar/MODULE.md

@@ -8,7 +8,7 @@ loop. It takes no children and no interaction — it is a status display, not a
 
 | File | Role |
 |------|------|
-| `ProgressBar.tsx` | The component. Resolves colour/a11y, measures the track via `onLayout`, drives the `Animated` sweep loop, `style` last. |
+| `ProgressBar.tsx` | The component. Resolves colour/a11y, measures the track via `onLayout`, drives the determinate `scaleX` tween and the indeterminate sweep loop (`core/motion`, Reanimated), `style` last. |
 | `ProgressBar.variants.ts` | Pure resolvers (`resolveProgressBarValue`, `resolveProgressBarFill`, `resolveProgressBarAccessibility`, `PROGRESS_BAR_SIZES`) + the themed structural resolvers `progressBarTrackStructure` / `progressBarFillStructure`. No React, no Animated. |
 | `index.ts` | Public surface: `ProgressBar`, `ProgressBarProps`, `ProgressBarSize`, `ProgressBarTone`. No `icon` prop, so no `IconName` re-export. |
 | `__tests__/ProgressBar.test.ts` | Pure: WCAG 1.4.11 contrast (all brands × modes × tones) + the value-clamp and accessibility contracts. |
@@ -18,7 +18,7 @@ loop. It takes no children and no interaction — it is a status display, not a
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `value` | `number` | — | 0–100, clamped. Omit entirely for an indeterminate sweep. |
+| `value` | `number` | — | 0–100, clamped. Omit entirely for an indeterminate sweep. Changes tween (`decelerate`); the first value snaps. |
 | `tone` | `accent \| success \| warning \| danger` | `accent` | Closed union — resolves to `colors.accent.text` / the matching `colors.status.*.text` (not `.solid` — see rationale below). |
 | `size` | `sm \| md` | `md` | Track height — 4dp / 8dp. |
 | `accessibilityLabel` | `string` | — | Optional — a progress bar is often paired with its own adjacent text label, so unlike `Spinner`/`Switch` this is not type-required. |
@@ -41,10 +41,11 @@ loop. It takes no children and no interaction — it is a status display, not a
 - **1.4.11 (non-text contrast)** — every tone's fill is measured ≥ 3:1 against the `bg.sunken`
   track, for all 8 brands × both modes (`ProgressBar.test.ts`) — the fill is a non-text UI boundary
   conveying information (WCAG 1.4.11), not decoration.
-- **2.3.3 (reduced motion)** — `useReducedMotion()` gates the sweep loop entirely: when true, the
-  `Animated.View` is never mounted and the track instead renders a static fill at a fixed 50%
-  fraction — never a frame frozen mid-sweep (same "skip, don't freeze" contract as `Skeleton`'s
-  shimmer and `Spinner`'s spin).
+- **2.3.3 (reduced motion)** — `useMotion().enabled` gates both animations. With motion off the
+  indeterminate sweep node is never mounted and a static fill at `REDUCED_MOTION_FILL_FRACTION`
+  (50%) renders in its place — never a frame frozen mid-sweep (same "skip, don't freeze" contract as
+  `Skeleton`'s shimmer and `Spinner`'s spin) — and a determinate `value` jumps straight to its
+  target instead of tweening.
 - **Touch target (2.5.x)** — N/A. `ProgressBar` is never interactive; there is no `hitSlop`.
 
 ## Why `tone` is a union, not a `color`
@@ -89,9 +90,11 @@ render without restarting the loop.
    segment's own matching radius → `progressBarFillStructure` (same factory, no `size` variant —
    its height always fills the track, applied inline). Colour (track's single `bg.sunken`, and the
    tone-driven fill) is resolved and applied inline, same split as `buttonStructure`.
-2. **Looping `Animated` value, reduced-motion gated** — the same shape as `Skeleton`'s shimmer:
-   `useAnimatedValue(0)` (from `core/motion`), an `Animated.loop` started/stopped in a `useEffect`
-   keyed on the condition that should suppress it, never a paused-mid-animation static value.
+2. **Looping shared value, reduced-motion gated** — the same shape as `Skeleton`'s shimmer:
+   `useAnimatedValue(0)` + `motion.loop` (both `core/motion`), started/stopped in a `useEffect`
+   keyed on the condition that should suppress it, never a paused-mid-animation static value. The
+   determinate fill is `transform: scaleX` with `transformOrigin: "left"` over a full-width bar —
+   never an animated `width`, which cannot run on the UI thread.
 3. **Pure, testable resolvers** in `ProgressBar.variants.ts` (no React, no Animated) so the WCAG +
    value-clamp + accessibility contracts are unit-tested against real palettes — never eyeballed.
 4. **Closed unions only** (`tone`/`size`), `style: LayoutStyle` last and once, no `{...rest}`.
@@ -104,8 +107,3 @@ None — no icon, no new theme token, no new core helper needed for this compone
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Only renders `View`/`Animated.View` (host elements) — no library child components, nothing to memoize.
 
-## Modernization (v1.0.7)
-
-- 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.

package/lib/module/modules/progress-bar/ProgressBar.js

@@ -12,8 +12,9 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, View } from "react-native";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { View } from "react-native";
+import Reanimated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { useMotion, useAnimatedValue } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { progressBarFillStructure, progressBarTrackStructure, REDUCED_MOTION_FILL_FRACTION, resolveProgressBarAccessibility, resolveProgressBarFill, resolveProgressBarValue, SWEEP_FRACTION } from "./ProgressBar.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -38,16 +39,13 @@ export const ProgressBar = /*#__PURE__*/memo(function ProgressBar({
   const progress = useAnimatedValue((clampedValue ?? 0) / 100);
   const progressAnimation = useRef(null);
   const firstValue = useRef(true);
-
-  // Tweens the fill toward each new value. The first value is snapped, not tweened — a bar that
-  // mounts at 60% should read as 60%, never as an unrequested fill-up animation.
   useEffect(() => {
     if (clampedValue === undefined) return undefined;
     const target = clampedValue / 100;
     progressAnimation.current?.stop();
     if (!motion.enabled || firstValue.current) {
       firstValue.current = false;
-      progress.setValue(target);
+      progress.value = target;
       return undefined;
     }
     progressAnimation.current = motion.timing(progress, target, {
@@ -57,14 +55,11 @@ export const ProgressBar = /*#__PURE__*/memo(function ProgressBar({
     return () => progressAnimation.current?.stop();
   }, [clampedValue, motion, progress]);
   const sweepAnimation = useRef(null);
-
-  // The sweep is the only affordance an indeterminate bar has, so it is gated on `motion.enabled`
-  // alone — never on the decorative tier, which would leave a mid-tier device with a dead track.
   useEffect(() => {
     if (determinate || !motion.enabled) return undefined;
-    sweepAnimation.current = Animated.loop(motion.timing(sweep, 1, {
+    sweepAnimation.current = motion.loop(sweep, 1, {
       duration: "deliberate"
-    }));
+    });
     sweepAnimation.current.start();
     return () => {
       sweepAnimation.current?.stop();
@@ -78,44 +73,40 @@ export const ProgressBar = /*#__PURE__*/memo(function ProgressBar({
   const handleLayout = useCallback(event => {
     setTrackWidth(event.nativeEvent.layout.width);
   }, []);
-
-  // The sweep's translateX range is derived from the track's own measured width (there is no
-  // reliable percentage-based `transform`), so it recomputes with layout — the loop itself never
-  // restarts, only the distance it travels.
   const sweepWidth = trackWidth * SWEEP_FRACTION;
-  const translateX = useMemo(() => sweep.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-sweepWidth, trackWidth]
-  }), [sweep, sweepWidth, trackWidth]);
+  const determinateFillStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scaleX: progress.value
+    }]
+  }));
+  const sweepStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: interpolate(sweep.value, [0, 1], [-sweepWidth, trackWidth])
+    }]
+  }));
   const trackStyle = useMemo(() => [progressBarTrackStructure(theme, {
     size
   }), {
     backgroundColor: theme.colors.bg.sunken
   }, style], [theme, size, style]);
-  const determinateFillStyle = useMemo(() => [progressBarFillStructure(theme), {
+  const determinateFillStatic = useMemo(() => [progressBarFillStructure(theme), {
     height: "100%",
     width: "100%",
     backgroundColor: fillColor,
-    transformOrigin: "left",
-    transform: [{
-      scaleX: progress
-    }]
-  }], [theme, fillColor, progress]);
+    transformOrigin: "left"
+  }], [theme, fillColor]);
   const staticFillStyle = useMemo(() => [progressBarFillStructure(theme), {
     height: "100%",
     width: `${REDUCED_MOTION_FILL_FRACTION * 100}%`,
     backgroundColor: fillColor
   }], [theme, fillColor]);
-  const sweepStyle = useMemo(() => [progressBarFillStructure(theme), {
+  const sweepStatic = useMemo(() => [progressBarFillStructure(theme), {
     position: "absolute",
     top: 0,
     bottom: 0,
     width: sweepWidth,
-    backgroundColor: fillColor,
-    transform: [{
-      translateX
-    }]
-  }], [theme, sweepWidth, fillColor, translateX]);
+    backgroundColor: fillColor
+  }], [theme, sweepWidth, fillColor]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     onLayout: handleLayout,
@@ -127,16 +118,17 @@ export const ProgressBar = /*#__PURE__*/memo(function ProgressBar({
     "aria-valuenow": a11y["aria-valuenow"],
     "aria-busy": a11y["aria-busy"],
     style: trackStyle,
-    children: [determinate && /*#__PURE__*/_jsx(Animated.View, {
+    children: [determinate && /*#__PURE__*/_jsx(Reanimated.View, {
       testID: testID === undefined ? undefined : `${testID}-fill`,
-      style: determinateFillStyle
+      style: [determinateFillStatic, determinateFillStyle]
     }), !determinate && !motion.enabled && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-fill`,
       style: staticFillStyle
-    }), !determinate && motion.enabled && /*#__PURE__*/_jsx(Animated.View, {
+    }), !determinate && motion.enabled && /*#__PURE__*/_jsx(Reanimated.View, {
       testID: testID === undefined ? undefined : `${testID}-sweep`,
-      pointerEvents: "none",
-      style: sweepStyle
+      style: [sweepStatic, sweepStyle, {
+        pointerEvents: 'none'
+      }]
     })]
   });
 });

package/lib/module/modules/progress-bar/ProgressBarProps.js

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

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

@@ -9,8 +9,8 @@ without collapsing the individually-focusable rows into one.
 
 | File | Role |
 |------|------|
-| `RadioGroup.tsx` | The component. Row composition, press wiring, a11y wiring. |
-| `RadioGroup.variants.ts` | Pure resolvers (`RADIO_GROUP_SIZES`, `resolveRadioGroupColors`, `resolveRadioRowAccessibility`) + the themed/untethemed structural resolvers (`radioGroupStructure`, `radioRowStructure`, `radioRingStructure`, `radioDotStructure`). No React, no lucide. |
+| `RadioGroup.tsx` | The component. Row composition, press wiring, a11y wiring. Focus ring geometry uses `FOCUS_RING_GAP` / `FOCUS_RING_WIDTH` from `core/style/focusRing`. |
+| `RadioGroup.variants.ts` | Pure resolvers (`RADIO_GROUP_SIZES`, `resolveRadioGroupColors`, `resolveRadioRowAccessibility`, `resolveRadioGroupKeyIndex`) + the themed/untethemed structural resolvers (`radioGroupStructure`, `radioRowStructure`, `radioRingStructure`, `radioDotStructure`). `MIN_TOUCH_TARGET` from `core/a11y/touchTarget`. No React, no lucide. |
 | `index.ts` | Public surface: `RadioGroup`, `RadioGroupProps`, `RadioGroupOption`, `RadioGroupSize`. |
 | `__tests__/RadioGroup.test.ts` | Pure: WCAG contrast (label-on-canvas, label-on-pressed-row, ring, dot — all brands × modes) + touch target + a11y contract. |
 | `__tests__/RadioGroup.render.test.tsx` | Render: selection, press blocking when disabled, per-row a11y state. |
@@ -24,7 +24,7 @@ without collapsing the individually-focusable rows into one.
 | `onValueChange` | `(value: string) => void` | — | Fires with the pressed option's `value`; gated off while `disabled`. |
 | `disabled` | `boolean` | `false` | Dims every row and blocks all presses. |
 | `size` | `sm \| md` | `md` | Both rows are 44 dp tall (see WCAG below); `sm` is the denser variant through its smaller ring/dot/font and tighter gaps. |
-| `accessibilityLabel` | `string` | — | Names the `radiogroup` container. Previously absent, so the container was announced unnamed — a reader heard each option's own label but nothing saying what the set was FOR (WCAG 1.3.1). |
+| `accessibilityLabel` | `string` | — | Names the `radiogroup` container — without it a reader hears each option's label but nothing saying what the set is FOR (WCAG 1.3.1). |
 | `style` | `LayoutStyle` | — | Layout-only, outermost (the container `View`), applied exactly once, last. |
 | `testID` | `string` | — | Container's testID; each row gets `` `${testID}-${option.value}` ``, and the focused row a `` `${testID}-${option.value}-focus-ring` `` child, when set. |
 
@@ -61,12 +61,12 @@ closed union of appearances. The ring is always `border.interactive`; the select
   handler also calls `.focus()` on the newly-selected row's node, because the tab stop moved and DOM
   focus has to follow it or the ring is stranded on the old row. RN's TypeScript `ViewPropTypes.d.ts`
   omits `onKeyDown` (its Flow types declare it), so the container `View` is re-typed once, locally.
-- **2.4.7 (focus visible)** — Button's `border.focus` ring, drawn a 2dp gap OUTSIDE the row (nothing
-  in the group clips), on the focused row only, never while disabled. Rows also carry
+- **2.4.7 (focus visible)** — `border.focus` ring (`core/style/focusRing` offsets), drawn outside the
+  row (nothing 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. Rows also carry `android_ripple`.
 - Disabled rows are exempt from the contrast minimum (WCAG 1.4.3), so the uniform `opacity: 0.5`
   dim is correct, same as Button.
 
@@ -93,9 +93,3 @@ closed union of appearances. The ring is always `border.interactive`; the select
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). The `options.map()` renders host `Pressable`/`View`/`Text`, not a library child component, so the inline per-row `onPress`/style closures were left as-is.
-
-## Modernization (v1.0.7)
-
-- 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.

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

@@ -10,8 +10,13 @@
  * 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 { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.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";
@@ -23,8 +28,96 @@ const KeyboardView = View;
 
 // Same offset ring as Button: `border.focus` a small gap OUTSIDE the row, on the canvas, which is
 // 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, {
+      testID: testID ? `${testID}-${option.value}-focus-ring` : undefined,
+      style: [styles.focusRing, focusRingStyle, {
+        pointerEvents: 'none'
+      }]
+    }), /*#__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, {
+        style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+          pointerEvents: 'none'
+        }]
+      }), /*#__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 +129,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 +140,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 +155,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 +173,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

@@ -10,10 +10,9 @@
  *    "selected"/"disabled" contract is unit-testable without rendering React Native.
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants, createVariants } from "../../core/style/index.js";
-/** Same floor as Button — Apple HIG minimum and WCAG 2.5.5 (AAA). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
+export { MIN_TOUCH_TARGET };
 /**
  * RadioGroup-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
  * test can assert `rowMinHeight + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
@@ -129,7 +128,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/radio-group/RadioGroupProps.js

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

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

@@ -11,7 +11,7 @@ way to preview the drop position. Built on **one** shared `Gesture.Pan()`
 | File | Role |
 |------|------|
 | `Reorder.tsx` | The component. The single shared pan, the five shared values that drive every row, and the two `Button` up/down alternatives. `ReorderRow` is a private, memoized sub-component rendered through `VirtualList`. |
-| `Reorder.variants.ts` | Pure resolvers (`resolveReorderColors`, `resolveReorderMoveState`, `moveItem`, `resolveRowPitch`, `resolveDragTargetIndex`, `resolveRowShift`) + the themed/untethered structural resolvers. No React, no lucide. The two drag-math resolvers are `"worklet"`-marked so the UI thread can call them. |
+| `Reorder.variants.ts` | Pure resolvers (`resolveReorderColors`, `resolveReorderMoveState`, `moveItem`, `resolveRowPitch`, `resolveDragTargetIndex`, `resolveRowShift`, `resolveReorderRowLabel`, `resolveReorderMoveAnnouncement`) + the themed/untethered structural resolvers. No React, no lucide. The two drag-math resolvers are `"worklet"`-marked so the UI thread can call them. |
 | `index.ts` | Public surface: `Reorder`, `ReorderProps`, `ReorderItem`. |
 | `__tests__/Reorder.test.ts` | Pure: WCAG contrast (all brands × modes), grip touch target, and the drag/alternative-path arithmetic. |
 | `__tests__/Reorder.render.test.tsx` | Render: labels, grip hidden from a11y, grip drag gating, the WCAG 2.5.7 alternative in both directions, disabled gating, testID wiring, the reduced-motion row shift, and the shift reset on drop. Mocks both animation peers locally and captures the pan's callbacks so a test drives a real drag. |
@@ -72,7 +72,12 @@ No `variant`/`size`/`tone` — every row reads identically; the only per-row sta
 
 Every timing comes from `core/motion` — `useMotion().duration("fast")` for the lift and the row
 shift, `useMotion().transform.pressOpacity` for the lifted row's opacity. No local duration constant
-lives in this module. Only `opacity` and `transform` animate, on reanimated's UI thread.
+lives in this module. Only `opacity` and `transform` animate, on reanimated's UI thread. Lift fires
+`haptics.impact("light")` and a committed move fires `haptics.selection()`, both gated on
+`useReducedMotion()` being false. Drag completion hops to JS with `scheduleOnRN`
+(`react-native-worklets`), never the deprecated `runOnJS`.
+
+`react-native-gesture-handler` and `react-native-reanimated` are non-optional peers here.
 
 ## Accessibility contract (WCAG)
 
@@ -129,10 +134,3 @@ lives in this module. Only `opacity` and `transform` animate, on reanimated's UI
 reads the current `items`/`onReorder` through refs, so the `Gesture.Pan()` object never has to be
 rebuilt mid-drag (re-registering a `GestureDetector` mid-drag drops the live gesture). Row callbacks
 take an `index`/`id` argument, so no per-row closure is allocated in the render loop.
-
-## History (v1.0.7)
-
-Replaced the original `PanResponder` + per-row `Animated.Value` implementation — one responder AND
-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.**