pixelize-native-library 1.2.1 → 1.3.0

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

@@ -17,10 +17,11 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-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 { ActivityIndicator, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import Reanimated, { FadeInDown, ReduceMotion, useAnimatedStyle } from "react-native-reanimated";
+import { useAnnounce, useReducedMotion } from "../../core/a11y/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { AnimatedText, 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";
@@ -66,8 +67,9 @@ function LoadMoreButton({
       overflow: "hidden"
     }, press.animatedStyle],
     children: [/*#__PURE__*/_jsx(Reanimated.View, {
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), loading && /*#__PURE__*/_jsx(ActivityIndicator, {
       size: "small",
       color: colors.inactiveLabel,
@@ -101,6 +103,8 @@ function PaginationImpl({
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const colors = useMemo(() => resolvePaginationColors(theme.colors), [theme.colors]);
   const spec = PAGINATION_SIZES[size];
   const hitSlop = useMemo(() => resolvePaginationHitSlop(size), [size]);
@@ -119,10 +123,10 @@ function PaginationImpl({
     // The first render is not a page change — only a later one is worth acknowledging.
     if (!motion.enabled || !settled.current) {
       settled.current = true;
-      summaryOpacity.setValue(1);
+      summaryOpacity.value = 1;
       return;
     }
-    summaryOpacity.setValue(0);
+    summaryOpacity.value = 0;
     running.current = motion.timing(summaryOpacity, 1, {
       duration: "fast",
       easing: "decelerate"
@@ -132,6 +136,10 @@ function PaginationImpl({
   }, [current, motion, summaryOpacity]);
   useEffect(() => () => running.current?.stop(), []);
   const items = useMemo(() => variant === "numbered" ? buildPageRange(current, total, siblingCount) : [], [variant, current, total, siblingCount]);
+  const handlePageChange = useCallback(next => {
+    if (!reducedMotion) haptics.selection();
+    onPageChange(next);
+  }, [haptics, onPageChange, reducedMotion]);
   const renderStep = useCallback((kind, icon) => /*#__PURE__*/_jsx(PaginationStepControl, {
     kind: kind,
     icon: icon,
@@ -144,15 +152,17 @@ function PaginationImpl({
     theme: theme,
     colors: colors,
     hitSlop: hitSlop,
-    onPageChange: onPageChange,
+    onPageChange: handlePageChange,
     testID: testID ? `${testID}-${kind}` : undefined
-  }, kind), [current, total, disabled, loading, size, spec.iconSize, theme, colors, hitSlop, onPageChange, testID]);
+  }, kind), [current, total, disabled, loading, size, spec.iconSize, theme, colors, hitSlop, handlePageChange, testID]);
+  const summaryAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: summaryOpacity.value
+  }));
   const summaryStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
     fontSize: spec.fontSize,
     color: blocked ? colors.inactiveLabel : colors.label,
-    paddingHorizontal: theme.space[2],
-    opacity: summaryOpacity
-  }], [theme, spec.fontSize, blocked, colors, summaryOpacity]);
+    paddingHorizontal: theme.space[2]
+  }, summaryAnimatedStyle], [theme, spec.fontSize, blocked, colors, summaryAnimatedStyle]);
   const rowStyle = useMemo(() => [paginationRowStructure(theme), style], [theme, style]);
   const stripStyle = useMemo(() => [paginationStripRootStructure(), {
     backgroundColor: floatingBackground(theme, "sm"),
@@ -185,7 +195,7 @@ function PaginationImpl({
       testID: testID,
       accessibilityRole: "none",
       style: rowStyle,
-      children: [showFirstLast && renderStep("first", "chevrons-left"), renderStep("previous", "chevron-left"), /*#__PURE__*/_jsx(Animated.Text, {
+      children: [showFirstLast && renderStep("first", "chevrons-left"), renderStep("previous", "chevron-left"), /*#__PURE__*/_jsx(AnimatedText, {
         testID: testID ? `${testID}-summary` : undefined
         // No `accessibilityLiveRegion` (deliberate): it's Android-only, and `useAnnounce` above
         // already announces on both platforms — keeping both would double-announce on Android.
@@ -223,7 +233,7 @@ function PaginationImpl({
         theme: theme,
         colors: colors,
         hitSlop: hitSlop,
-        onPageChange: onPageChange,
+        onPageChange: handlePageChange,
         testID: testID ? `${testID}-page-${item}` : undefined
       }, `page-${item}`)), renderStep("next", "chevron-right"), showFirstLast && renderStep("last", "chevrons-right")]
     })

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

@@ -16,13 +16,13 @@
  * (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants, createVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 
 /** One slot in the numbered strip: a page number, or a gap marker standing in for a run of pages. */
 
 /** Same touch-target floor as Button/ButtonGroup (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
 
 /**
  * The WIDTH-axis touch floor, met by the rendered node itself rather than by horizontal `hitSlop` —

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

@@ -9,12 +9,12 @@ 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 { FOCUS_RING_WIDTH } from "../../core/style/focusRing.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;
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const focusRingStyleFor = theme => ({
@@ -97,8 +97,9 @@ export const PaginationStepControl = /*#__PURE__*/memo(function PaginationStepCo
     hitSlop: hitSlop,
     style: controlStyle,
     children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), focused && !inert && /*#__PURE__*/_jsx(View, {
       testID: testID ? `${testID}-focus-ring` : undefined,
       style: focusRingStyle
@@ -175,8 +176,9 @@ export const PaginationPageControl = /*#__PURE__*/memo(function PaginationPageCo
     hitSlop: hitSlop,
     style: controlStyle,
     children: [!current && /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), focused && !a11y.disabled && /*#__PURE__*/_jsx(View, {
       testID: testID ? `${testID}-focus-ring` : undefined,
       style: focusRingStyle

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

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

package/lib/module/modules/person-chip/MODULE.md

@@ -0,0 +1,11 @@
+# person-chip/ — an avatar and name chip for assignee rows
+
+Avatar + name (+ optional subtitle) for assignee rows. Removable variant composes `Chip`.
+
+## Exports
+
+- `PersonChip` — `name`, `subtitle`, `initials`, `imageUri`, `onRemove`, `size` (`"sm" | "md"`, default `"md"`)
+
+## Known gotchas
+
+- `subtitle` is dropped in the removable variant — `Chip` carries the label alone.

package/lib/module/modules/person-chip/PersonChip.js

@@ -0,0 +1,65 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { Avatar } from "../avatar/index.js";
+import { Chip } from "../chip/index.js";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PersonChip = /*#__PURE__*/memo(function PersonChip({
+  name,
+  subtitle,
+  initials,
+  imageUri,
+  onRemove,
+  size = "md",
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rowStyle = useMemo(() => ({
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[2]
+  }), [theme]);
+  const avatarSize = size === "sm" ? "xs" : "sm";
+  if (onRemove) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [rowStyle, style],
+      testID: testID,
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        size: avatarSize,
+        initials: initials ?? name,
+        source: imageUri ? {
+          uri: imageUri
+        } : undefined
+      }), /*#__PURE__*/_jsx(Chip, {
+        label: name,
+        onRemove: onRemove,
+        size: "sm"
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [rowStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      size: avatarSize,
+      initials: initials ?? name,
+      source: imageUri ? {
+        uri: imageUri
+      } : undefined
+    }), /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-sm",
+        children: name
+      }), subtitle ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "muted",
+        children: subtitle
+      }) : null]
+    })]
+  });
+});
+//# sourceMappingURL=PersonChip.js.map

package/lib/module/modules/person-chip/PersonChipProps.js

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

package/lib/module/modules/person-chip/index.js

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

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

@@ -27,7 +27,7 @@ single source of truth; the boxes only render what it already holds.
 | `secureTextEntry` | `boolean` | `false` | Renders a dot instead of the character per box, forwards to the real hidden `TextInput` (native secure-entry actually engages), and masks the announced value to one `•` per digit — same masking concept as `Input`'s prop of the same name, but end-to-end: visual, native, AND assistive tech. |
 | `keyboardType` | `number-pad \| default` | `number-pad` | `number-pad` strips non-digit characters on every change (typed OR pasted). |
 | `status` | `default \| error` | `default` | Closed union — a state, not a brand tone. |
-| `errorText` | `string` | — | Shown below the row and folded into the accessible name (`aria-invalid` set) when `status="error"`, same rule as `Input`/`FormField`. Previously `status="error"` was box-border colour only — no message, no programmatic invalid flag (WCAG 3.3.1 / 1.4.1). |
+| `errorText` | `string` | — | Shown below the row and folded into the accessible name (`aria-invalid` set) when `status="error"`, same rule as `Input`/`FormField`. |
 | `disabled` | `boolean` | `false` | Dimmed; blocks editing and the row's press-to-focus. |
 | `size` | `sm \| md \| lg` | `md` | Box 40/48/56dp square; short sizes reach 44dp via the ROW's `hitSlop`. |
 | `autoFocus` | `boolean` | `false` | Forwarded to the hidden `TextInput`. |
@@ -60,18 +60,14 @@ new `onComplete` closure) does not fire again.
   pasted string and the existing clamp logic handles it identically to typing.
 - **Focus management**: auto-advancing focus across N fields on every keystroke is a well-known
   source of bugs on backspace, selection, and IME composition. One field sidesteps the whole class.
-- **iOS/Android OTP autofill**: `textContentType="oneTimeCode"` is now UNCONDITIONAL, not gated on
-  `keyboardType="number-pad"` — an alphanumeric OTP is still an OTP, and the old gate silently lost
-  iOS's SMS-code suggestion whenever a consumer used `keyboardType="default"`. `autoComplete="sms-otp"`
-  is the Android half — genuinely absent before, despite this doc previously claiming it existed.
-- **Corrected: the field was `opacity: 0`, and that is invisible to VoiceOver, not merely "visually
-  suppressed".** iOS `UIAccessibility` excludes any view with `alpha == 0` from the accessibility
-  tree — since this hidden `TextInput` is the control's ONLY accessibility element, the whole
-  control was unreachable by VoiceOver, and there was no node to long-press for the OS paste
-  callout. Fixed by keeping `opacity: 1` and using `color: "transparent"` instead — the node stays
-  real, focusable, and long-press-able; only its glyphs render invisibly (the field paints no
-  background/border of its own). Still `StyleSheet.absoluteFill` with `pointerEvents="none"` so it
-  never intercepts touches; the row's own `Pressable` calls `inputRef.current.focus()` instead.
+- **iOS/Android OTP autofill**: `textContentType="oneTimeCode"` is unconditional — an alphanumeric
+  OTP is still an OTP — and `autoComplete` is `"sms-otp"` on Android, `"one-time-code"` elsewhere.
+- **Invisible via `color: "transparent"`, never `opacity: 0`.** iOS `UIAccessibility` drops any view
+  with `alpha == 0` from the accessibility tree, and this hidden `TextInput` is the control's ONLY
+  accessibility element — at `opacity: 0` the whole control is unreachable by VoiceOver, with no node
+  to long-press for the OS paste callout. It stays `StyleSheet.absoluteFill` with
+  `pointerEvents="none"` so it never intercepts touches; the row's own `Pressable` calls
+  `inputRef.current.focus()` instead.
 
 ## Touch target — the ROW, not per-box
 
@@ -144,10 +140,3 @@ same pattern as `Input`/`ButtonGroup`/`Reorder`'s render-level touch-target chec
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). No library child components at all — the `Array.from({length})` box list renders host `View`/`Text` — 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.
-
-- **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

@@ -101,7 +101,6 @@ export const PinInput = /*#__PURE__*/memo(function PinInput(props) {
             borderColor: boxColors.border
           }],
           children: [isActive && /*#__PURE__*/_jsx(View, {
-            pointerEvents: "none",
             testID: "pin-input-focus-ring",
             style: {
               position: "absolute",
@@ -112,7 +111,8 @@ export const PinInput = /*#__PURE__*/memo(function PinInput(props) {
               borderWidth: FOCUS_RING_WIDTH,
               borderColor: theme.colors.border.focus,
               borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
-              borderCurve: "continuous"
+              borderCurve: "continuous",
+              pointerEvents: "none"
             }
           }), char !== undefined && (secureTextEntry ? /*#__PURE__*/_jsx(View, {
             testID: testID ? `${testID}-dot-${index}` : undefined,

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

@@ -16,13 +16,12 @@
  * 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";
+export { MIN_TOUCH_TARGET };
 
 /** A validity state, not a brand tone — same reasoning as `InputStatus`. */
 
-/** Same floor as Button/Input — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules stay isolated. */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
 /**
  * PinInput-specific dimensions. Box size / dot size / gap are the component's own design
  * constants; `fontSize` sits on the theme's `fontSizes` scale (xl/2xl/3xl = 20/24/30) — a digit

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

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

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