pixelize-native-library 1.2.1 → 1.3.0

package/lib/module/modules/app-switcher/index.js

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

package/lib/module/modules/appearance-settings/AppearanceSettings.js

@@ -0,0 +1,58 @@
+"use strict";
+
+import { memo, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { themeNames } from "../../theme/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { Chip, ChipGroup } from "../chip/index.js";
+import { SegmentedControl } from "../segmented-control/index.js";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const AppearanceSettings = /*#__PURE__*/memo(function AppearanceSettings({
+  brand,
+  mode,
+  onBrandChange,
+  onModeChange,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const modeOptions = useMemo(() => [{
+    value: "light",
+    label: "Light"
+  }, {
+    value: "dark",
+    label: "Dark"
+  }], []);
+  const handleMode = useCallback(value => onModeChange(value), [onModeChange]);
+  const handleBrand = useCallback(next => () => onBrandChange(next), [onBrandChange]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [{
+      gap: theme.space[4]
+    }, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-sm",
+        children: "Colour mode"
+      }), /*#__PURE__*/_jsx(SegmentedControl, {
+        options: modeOptions,
+        value: mode,
+        onChange: handleMode
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-sm",
+        children: "Brand"
+      }), /*#__PURE__*/_jsx(ChipGroup, {
+        wrap: true,
+        children: themeNames.map(name => /*#__PURE__*/_jsx(Chip, {
+          label: name,
+          selected: brand === name,
+          onPress: handleBrand(name)
+        }, name))
+      })]
+    })]
+  });
+});
+//# sourceMappingURL=AppearanceSettings.js.map

package/lib/module/modules/appearance-settings/AppearanceSettingsProps.js

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

package/lib/module/modules/appearance-settings/MODULE.md

@@ -0,0 +1,9 @@
+# appearance-settings/ — a brand and light/dark mode picker
+
+Brand + light/dark picker for a settings screen: a `SegmentedControl` over `AppearanceColorMode`
+(`"light"` | `"dark"`) and a wrapping `ChipGroup` over `themeNames`.
+
+## Exports
+
+- `AppearanceSettings` — `brand`, `mode`, `onBrandChange`, `onModeChange`, layout-only `style`, `testID`
+- `AppearanceColorMode` — `"light" | "dark"`, not the theme's own `ThemeMode` (no `"system"` option here)

package/lib/module/modules/appearance-settings/index.js

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

package/lib/module/modules/avatar/Avatar.variants.js

@@ -18,8 +18,10 @@
  * only `react-native`'s `StyleSheet`, as `core/style` and `Button.variants.ts` do).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { resolveFilledAccent } from "../../theme/tokens/builders/accentText.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 
 /** `circle` for a person, `rounded` for an organisation/product, `square` for tiles/thumbnails. */
 

package/lib/module/modules/avatar/AvatarProps.js

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

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

@@ -10,7 +10,7 @@ which is exactly why its accessibility default is the one place it deliberately
 | File | Role |
 |------|------|
 | `Avatar.tsx` | The component. Fallback precedence (image → initials → placeholder), a11y wiring. |
-| `Avatar.variants.ts` | Pure resolvers (`AVATAR_SIZES`, `resolveAvatarColors`, `resolveAvatarIdentityColors`, `avatarIdentityRamp`, `resolveAvatarAccessibility`) + the themed structural variant resolver `avatarStructure`. No React. |
+| `Avatar.variants.ts` | Pure resolvers (`AVATAR_SIZES`, `resolveAvatarColors`, `resolveAvatarIdentityColors`, `avatarIdentityRamp`, `resolveAvatarAccessibility`) + the themed structural variant resolver `avatarStructure`. Re-exports `MIN_TOUCH_TARGET` from `core/a11y/touchTarget` for tests only — this module is not interactive. No React. |
 | `index.ts` | Public surface: `Avatar`, `AvatarProps`, `AvatarSize`, `AvatarShape`. |
 | `__tests__/Avatar.test.ts` | Pure: WCAG contrast for the neutral **and** every identity fill (all brands × modes) + the identity hash + the size scale + the a11y contract. |
 | `__tests__/Avatar.render.test.tsx` | Render: fallback precedence, size scale, shape, identity fill, recycling key, decorative-vs-labelled a11y. |
@@ -20,7 +20,7 @@ which is exactly why its accessibility default is the one place it deliberately
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `size` | `xs \| sm \| md \| lg \| xl` | `md` | Diameters 24 / 32 / 40 / 56 / 72 dp. |
-| `shape` | `circle \| rounded` | `circle` | `rounded` uses `radii.full` for an org/product; a person stays circular. |
+| `shape` | `circle \| rounded \| square` | `circle` | `circle` is `radii.full` (a person), `rounded` is `radii.lg` (an org/product), `square` is `radii.none` (a tile/thumbnail). |
 | `source` | `{ uri: string }` | — | A remote image. Wins over `initials` when present. |
 | `initials` | `string` | — | Shown when there is no `source`. Clipped to the first two characters. |
 | `identity` | `string` | — | Seeds a stable hashed fill for the initials/placeholder state. Absent → the neutral fill. |
@@ -72,7 +72,7 @@ fewer place to special-case the optional-peer fallback.
    contract is unit-tested by measuring real palettes — never eyeballed.
 3. **`radii.full` clips a circle for any diameter.** One token (a finite `9999`, not `Infinity` —
    RN rejects non-finite style values) covers every size instead of each variant computing its own
-   `box / 2`; `shape="rounded"` swaps it for `radii.full`.
+   `box / 2`; the other two shapes swap it for `radii.lg` / `radii.none`.
 4. **`style: LayoutStyle` last and once, no `{...rest}`** — internals never receive consumer style.
 
 ## Testing note — hidden elements and React Native Testing Library

package/lib/module/modules/avatar-group/AvatarGroupProps.js

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

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

@@ -8,6 +8,7 @@ overflow pill when `avatars.length` exceeds `max`.
 | File | Role |
 |------|------|
 | `AvatarGroup.tsx` | The component. Composes `Avatar` + overflow pill; `style` last. |
+| `AvatarGroupProps.ts` | `AvatarGroupProps` + `AvatarGroupItem`, with the per-prop JSDoc consumers see on hover. |
 | `AvatarGroup.variants.ts` | Pure resolvers (colours, overlap math, overflow counts) + themed structural resolvers. |
 | `index.ts` | Public surface: `AvatarGroup`, `AvatarGroupProps`, `AvatarGroupItem`, `AvatarSize`. |
 | `__tests__/AvatarGroup.test.ts` | Pure: overflow math, WCAG on overflow pill label. |
@@ -32,7 +33,7 @@ overflow pill when `avatars.length` exceeds `max`.
   consumer doesn't set `AvatarGroupItem.accessibilityLabel` — a grouped face has no adjacent visible
   name to lean on, unlike a standalone `Avatar`, so leaving it unlabeled would leave it silent.
 
-## Borders (Wave 5 tonal restyle)
+## Borders
 
 The `AVATAR_GROUP_RING_WIDTH` ring (`avatarGroupItemStructure`) is deliberately KEPT, unlike other
 modules' container hairlines: it is drawn in `colors.ring` (`bg.canvas`, not a visible stroke

package/lib/module/modules/backdrop/Backdrop.js

@@ -0,0 +1,38 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { withAlpha } from "../../core/gradient/index.js";
+import { MOTION_TRANSFORM } from "../../core/motion/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SCRIM = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
+export const Backdrop = /*#__PURE__*/memo(function Backdrop({
+  visible = true,
+  onPress,
+  style,
+  testID
+}) {
+  const rootStyle = useMemo(() => [styles.fill, {
+    backgroundColor: SCRIM
+  }, style], [style]);
+  if (!visible) return null;
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: "Dismiss",
+      onPress: onPress,
+      style: rootStyle,
+      testID: testID
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [rootStyle, {
+      pointerEvents: 'none'
+    }],
+    testID: testID
+  });
+});
+const styles = StyleSheet.create({
+  fill: StyleSheet.absoluteFill
+});
+//# sourceMappingURL=Backdrop.js.map

package/lib/module/modules/backdrop/BackdropProps.js

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

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

@@ -0,0 +1,11 @@
+# backdrop/ — a full-screen scrim for sheets and overlays
+
+Full-screen scrim using `MOTION_TRANSFORM.scrimOpacity`. Pairs with sheets and overlays; prefer this over hand-rolled `absoluteFill` + hex.
+
+## Exports
+
+- `Backdrop` — `visible` (default `true`; `false` renders nothing), `onPress`, layout-only `style`, `testID`
+
+With `onPress` it is a `Pressable` with `accessibilityRole="button"` and the label `"Dismiss"`;
+without it, a non-interactive `View` with `pointerEvents: "none"`. It never animates — enter/exit
+is the parent's mount/unmount.

package/lib/module/modules/backdrop/index.js

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

package/lib/module/modules/badge/BadgeProps.js

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

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

@@ -1,8 +1,9 @@
 # badge/ — non-interactive status/label chip
 
-`Badge` renders a small status/label chip: subtle tinted fill, a coloured border, and a label
-(with an optional leading icon). It is a `View`, never a `Pressable` — no press, focus, loading,
-or disabled state.
+`Badge` renders a small status/label chip: a fill, a coloured border, and a label (with an optional
+leading icon). It is a `View`, never a `Pressable` — no press, focus, loading, or disabled state.
+Every tone but `accent` paints the tone's subtle tinted fill; `accent` paints `AccentGradientFill`
+over `accent.solid` and inks both icon and label with `accent.onSolid`.
 
 ## Files
 
@@ -32,7 +33,8 @@ or disabled state.
   `accessibilityLabel={label}`. The icon (a plain SVG, not independently accessible) and the label
   `Text` never surface as two separate elements to assistive tech.
 - **1.4.3** — the label is the tone's derived `text` colour on the tone's `fill`, measured ≥ 4.5:1
-  for every tone × brand × mode (`Badge.test.ts`).
+  for every tone × brand × mode (`Badge.test.ts`); `accent` instead inks `accent.onSolid` on its
+  gradient fill.
 - **1.4.11** — the border clears ≥ 3:1 both against the canvas AND against the chip's own `fill`
   (the two colours it's actually adjacent to), for every tone × brand × mode.
 - No touch target / `hitSlop`, no focus ring, no reduced-motion handling — none apply. Badge is

package/lib/module/modules/banner/Banner.js

@@ -11,7 +11,7 @@
  */
 
 import { memo, useCallback, useMemo } from "react";
-import { Animated, Platform, Pressable, Text as RNText, View } from "react-native";
+import { Platform, Pressable, Text as RNText, View } from "react-native";
 import Reanimated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
 import { useEnterExit } from "../../core/motion/index.js";
@@ -113,7 +113,7 @@ export const Banner = /*#__PURE__*/memo(function Banner({
     entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
     exiting: FadeOut.reduceMotion(ReduceMotion.System),
     layout: LinearTransition.reduceMotion(ReduceMotion.System),
-    children: /*#__PURE__*/_jsxs(Animated.View, {
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
       style: rootStyle,
       children: [glyph && /*#__PURE__*/_jsx(View, {
         style: {

package/lib/module/modules/banner/Banner.variants.js

@@ -9,7 +9,9 @@
  * `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 /**
  * `subtle` reuses Badge's exact role mapping, which is already measured ≥ 4.5:1 for the label on its
  * own fill and ≥ 3:1 for `status.text`-as-border against both the canvas and that fill, on every
@@ -102,7 +104,7 @@ export function resolveBannerAccessibility(input) {
 export const BANNER_ICON_SIZE = 20;
 /** Dismiss and action are real touch targets; the visual glyph is smaller than its 44dp hit area. */
 export const BANNER_DISMISS_ICON_SIZE = 16;
-export const BANNER_MIN_TOUCH_TARGET = 44;
+export const BANNER_MIN_TOUCH_TARGET = MIN_TOUCH_TARGET;
 export const bannerStructure = createThemedVariants(theme => ({
   base: {
     flexDirection: "row",

package/lib/module/modules/banner/BannerProps.js

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

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

@@ -28,6 +28,7 @@ of a family that is easy to confuse:
 | `tone` | `accent \| neutral \| success \| warning \| danger \| info` | `info` | Closed union. |
 | `variant` | `subtle \| solid` | `subtle` | `subtle` tints; `solid` inverts onto a filled surface. |
 | `icon` | `IconName \| null` | per tone | `null` suppresses the glyph entirely. |
+| `visible` | `boolean` | `true` | `false` fades+slides the banner out, then unmounts it. |
 | `onDismiss` | `() => void` | — | Absent = the banner cannot be closed. |
 | `dismissLabel` | `string` | `"Dismiss"` | Screen-reader name for the close control. |
 | `action` | `{ label, onPress }` | — | One inline action; use with `actions` for multiple. |
@@ -37,15 +38,10 @@ of a family that is easy to confuse:
 
 ## Accessibility contract (WCAG)
 
-- **4.1.2 / semantics** — title + message collapse into ONE accessible node, so a screen reader
-  announces the banner as a unit instead of two loose strings. Dismiss and action are their own
-  `button`-role elements with their own labels, so activating either can never be confused with the
-  other (they are also separate code paths — `onDismiss` vs `action.onPress`). Crucially, **both sit
-  OUTSIDE that accessible node**: an accessible node collapses its whole subtree into a single
-  element, so the action — which used to render inside it — could be tapped but never focused or
-  activated by VoiceOver/TalkBack, and its existence was not announced at all (the accessible name
-  is only `"title. message"`). The content column is now a plain layout `View` holding two siblings:
-  the accessible title+message block, and the action. `Banner.render.test.tsx` pins that structure.
+- **4.1.2 / semantics** — title + message collapse into ONE accessible node so the banner announces
+  as a unit. Dismiss and the actions are `button`-role siblings **outside** that node: an accessible
+  node collapses its whole subtree, so a control nested inside it is tappable but never focusable or
+  announced. `Banner.render.test.tsx` pins that sibling structure.
 - **4.1.3 status messages** — `danger` and `warning` announce with `accessibilityRole="alert"` so the
   reader interrupts; the passive tones (`accent`, `neutral`, `success`, `info`) use `text` and are
   read when focus reaches them. Severity, not styling, decides this.
@@ -62,14 +58,12 @@ of a family that is easy to confuse:
   (`rippleColor(theme.mode)`), gated on `Platform.OS === "android"`. The dismiss glyph is
   round/icon-only, so its ripple is `borderless: true`; the action link is a text target, so its
   ripple is `borderless: false`.
-- **2.3.3** — nothing animates; a banner appears and stays. Nothing to suppress.
-- **1.3.1** — the tone icon is redundant with the accessible title/message node right beside it (the
-  glyph repeats what `resolveBannerAccessibility`'s `alert`/`text` role and label already say), so it
-  must not reach assistive tech as a second, unexplained element. `Banner` never wraps it in a hidden
-  container itself — it relies on `core/icon`'s `Icon` defaulting to `aria-hidden` when rendered with
-  no `label`, which is every call site in this file (`Banner` never passes one). Fixed at the `Icon`
-  level rather than here because this exact gap — an un-wrapped `<Icon>` — was a repeated, per-consumer
-  mistake across the library, not a `Banner`-specific one.
+- **2.3.3** — every animation carries `ReduceMotion.System`, so the enter/exit and layout shift
+  collapse to an instant swap when the OS asks for reduced motion.
+- **1.3.1** — the tone glyph repeats what the accessible node already says, so it must not reach
+  assistive tech. `Banner` passes `Icon` no `label`, and `core/icon` defaults to `aria-hidden` —
+  fixed there rather than here because un-wrapped `<Icon>` was a library-wide, not `Banner`-specific,
+  mistake.
 
 ## Patterns copied from the reference modules
 
@@ -89,30 +83,25 @@ of a family that is easy to confuse:
 - **`accent` and `neutral` get no default glyph.** An icon on a banner communicates *severity*; those
   two tones carry none, so a glyph would be decoration pretending to be meaning. Callers can still
   pass one explicitly.
-- **Exactly one `action`.** Two or more competing actions is a decision, and a decision belongs in
-  `alert-dialog` where it can block. Keeping this to one keeps banners non-blocking by design.
+- **`action` is the primary; `actions` appends secondary ones.** Both render as the same inline
+  text targets in one wrapping row. A banner that needs a *blocking* decision belongs in
+  `alert-dialog`, not here.
 - **No `onPress` on the banner body.** A whole-surface tap target next to a dismiss button produces
   mis-taps; if the banner should navigate, use the `action`.
-- **The action is a sibling of the accessible text block, not a child of it.** The dismiss control
-  was always shaped that way; the action was not, and that is exactly why it was invisible to
-  assistive tech. The content column carries the layout (`flex: 1` + `rowGap`), the inner block
-  carries `accessible` + the role + the combined name and only the `rowGap` between title and
-  message — so the rendered spacing is unchanged.
 
 ## Known gaps
 
 - No auto-dismiss timer — that is `toast`'s job by definition.
 - No stacking/queueing of multiple banners; a caller rendering several owns their order and spacing.
-- No enter/exit animation. Adding one would need `useReducedMotion()` gating (see `2.3.3` above).
+
+## Motion
+
+`visible` drives a `FadeInDown` enter / `FadeOut` exit plus `LinearTransition` on layout, through
+`useEnterExit`. A banner that mounts already visible skips the enter, so a consumer that never
+passes `visible` sees no animation on first paint.
 
 ## Performance
 
 Wrapped in `React.memo`. `bannerStructure` is a themed resolver, so the structural `StyleSheet`
 compiles once per theme identity rather than per render. The action handler is `useCallback`'d;
 `onDismiss` is passed to the `Pressable` verbatim, since the caller already owns its identity.
-
-## 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/bottom-nav/BottomNav.variants.js

@@ -22,11 +22,10 @@
  * only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
 
 /** Same touch-target floor as Button/Select/Menu (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-
 /** The bar's fixed visual height. A design constant, not a caller-facing `size` scale — v1 is a
  *  single fixed shape (see MODULE.md's API stability contract, "out of contract"). Comfortably
  *  clears `MIN_TOUCH_TARGET` on its own, with no `hitSlop` needed (unlike Button's shorter sizes). */
@@ -57,6 +56,7 @@ export const BOTTOM_NAV_ACTIVE_DOT_SIZE = 6;
 export const BOTTOM_NAV_SETTLE_SCALE = 0.8;
 /** `undefined`/`0` (or any non-positive count) resolves to `null` — the badge renders nothing and
  *  leaves the accessible name untouched. */
+export { MIN_TOUCH_TARGET };
 export function resolveBottomNavBadge(count) {
   if (count === undefined || count <= 0) return null;
   return {

package/lib/module/modules/bottom-nav/BottomNavIconWithBadge.js

@@ -14,8 +14,9 @@
  * accessible name but never passes that fresh-per-render object down.
  */
 
-import { memo, useEffect, useMemo, useRef } from "react";
-import { Animated, StyleSheet, Text, View } from "react-native";
+import { memo, useEffect, useRef } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Reanimated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
 import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
@@ -38,16 +39,12 @@ export const BottomNavIconWithBadge = /*#__PURE__*/memo(function BottomNavIconWi
   const settle = useAnimatedValue(badge === null ? 0 : 1);
   const running = useRef(null);
   const firstRun = useRef(true);
-  const settleMotionStyle = useMemo(() => ({
-    opacity: settle,
+  const settleMotionStyle = useAnimatedStyle(() => ({
+    opacity: settle.value,
     transform: [{
-      scale: settle.interpolate({
-        inputRange: [0, 1],
-        outputRange: [BOTTOM_NAV_SETTLE_SCALE, 1]
-      })
+      scale: interpolate(settle.value, [0, 1], [BOTTOM_NAV_SETTLE_SCALE, 1])
     }]
-  }), [settle]);
-  // No animation runs under reduce motion, so the settled style is rendered directly.
+  }));
   const settleStyle = motion.enabled ? settleMotionStyle : styles.settled;
 
   // Keyed on the DISPLAY label, so a count change inside the "99+" cap doesn't re-settle a pill
@@ -59,14 +56,14 @@ export const BottomNavIconWithBadge = /*#__PURE__*/memo(function BottomNavIconWi
     firstRun.current = false;
     running.current?.stop();
     if (badgeLabel === undefined) {
-      settle.setValue(0);
+      settle.value = 0;
       return;
     }
     if (onMount || !motion.enabled) {
-      settle.setValue(1);
+      settle.value = 1;
       return;
     }
-    settle.setValue(0);
+    settle.value = 0;
     running.current = motion.timing(settle, 1, {
       duration: "fast",
       easing: "decelerate"
@@ -81,18 +78,20 @@ export const BottomNavIconWithBadge = /*#__PURE__*/memo(function BottomNavIconWi
       size: iconSize,
       color: iconColor,
       strokeWidth: ICON_STROKE
-    }), badge !== null && (appearance === "dot" ? /*#__PURE__*/_jsx(Animated.View, {
+    }), badge !== null && (appearance === "dot" ? /*#__PURE__*/_jsx(Reanimated.View, {
       testID: badgeTestID,
-      pointerEvents: "none",
       style: [styles.dot, {
         backgroundColor: badgeColors.fill
-      }, settleStyle]
-    }) : /*#__PURE__*/_jsx(Animated.View, {
+      }, settleStyle, {
+        pointerEvents: "none"
+      }]
+    }) : /*#__PURE__*/_jsx(Reanimated.View, {
       testID: badgeTestID,
-      pointerEvents: "none",
       style: [bottomNavBadgePillStructure(theme), {
         backgroundColor: badgeColors.fill
-      }, settleStyle],
+      }, settleStyle, {
+        pointerEvents: "none"
+      }],
       children: /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {

package/lib/module/modules/bottom-nav/BottomNavOverflowSheet.js

@@ -21,9 +21,10 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Platform, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from "react-native";
+import { Platform, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useMotion, useAnimatedValue } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { Button } from "../button/index.js";
@@ -263,9 +264,9 @@ const EditSlotChip = /*#__PURE__*/memo(function EditSlotChip({
   const motion = useMotion();
   const opacity = useAnimatedValue(selected ? 1 : 0);
   const running = useRef(null);
-  const opacityMotionStyle = useMemo(() => ({
-    opacity
-  }), [opacity]);
+  const opacityMotionStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value
+  }));
   const androidRipple = useMemo(() => Platform.OS === "android" ? {
     color: rippleColor(theme.mode)
   } : undefined, [theme.mode]);
@@ -278,7 +279,7 @@ const EditSlotChip = /*#__PURE__*/memo(function EditSlotChip({
     const toValue = selected ? 1 : 0;
     running.current?.stop();
     if (!motion.enabled) {
-      opacity.setValue(toValue);
+      opacity.value = toValue;
       return;
     }
     running.current = motion.timing(opacity, toValue, {
@@ -316,7 +317,7 @@ const EditSlotChip = /*#__PURE__*/memo(function EditSlotChip({
         color: theme.colors.fg.default
       }],
       children: tab.label
-    }), /*#__PURE__*/_jsx(Animated.View, {
+    }), /*#__PURE__*/_jsx(Reanimated.View, {
       testID: testID ? `${testID}-indicator` : undefined,
       style: [styles.slotIndicator, {
         backgroundColor: theme.colors.accent.solid

package/lib/module/modules/bottom-nav/BottomNavProps.js

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

package/lib/module/modules/bottom-nav/BottomNavTab.js

@@ -16,9 +16,9 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Platform, Pressable, StyleSheet, Text } from "react-native";
-import Reanimated from "react-native-reanimated";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { useMotion, useAnimatedValue } from "../../core/motion/index.js";
 import { usePressState } from "../../core/motion/usePressState.js";
 import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
@@ -49,20 +49,17 @@ export const BottomNavTab = /*#__PURE__*/memo(function BottomNavTab({
   });
   const indicator = useAnimatedValue(selected ? 1 : 0);
   const running = useRef(null);
-  const indicatorMotionStyle = useMemo(() => ({
-    opacity: indicator,
+  const indicatorMotionStyle = useAnimatedStyle(() => ({
+    opacity: indicator.value,
     transform: [{
-      scale: indicator.interpolate({
-        inputRange: [0, 1],
-        outputRange: [BOTTOM_NAV_SETTLE_SCALE, 1]
-      })
+      scale: interpolate(indicator.value, [0, 1], [BOTTOM_NAV_SETTLE_SCALE, 1])
     }]
-  }), [indicator]);
+  }));
   useEffect(() => {
     const toValue = selected ? 1 : 0;
     running.current?.stop();
     if (!motion.enabled) {
-      indicator.setValue(toValue);
+      indicator.value = toValue;
       return;
     }
     running.current = motion.timing(indicator, toValue, {
@@ -107,14 +104,16 @@ export const BottomNavTab = /*#__PURE__*/memo(function BottomNavTab({
       overflow: "hidden"
     }, press.animatedStyle],
     children: [/*#__PURE__*/_jsx(Reanimated.View, {
-      pointerEvents: "none",
       testID: testID ? `${testID}-press-overlay` : undefined,
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
-    }), focused && /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), focused && /*#__PURE__*/_jsx(View, {
       testID: testID ? `${testID}-focus-ring` : undefined,
       style: [bottomNavFocusRingStructure(theme), {
         borderColor: theme.colors.border.focus
+      }, {
+        pointerEvents: 'none'
       }]
     }), /*#__PURE__*/_jsx(BottomNavIconWithBadge, {
       icon: icon,
@@ -130,7 +129,7 @@ export const BottomNavTab = /*#__PURE__*/memo(function BottomNavTab({
         color: colors.label
       }],
       children: label
-    }), /*#__PURE__*/_jsx(Animated.View, {
+    }), /*#__PURE__*/_jsx(Reanimated.View, {
       testID: testID ? `${testID}-indicator` : undefined,
       style: [styles.indicator, {
         backgroundColor: colors.indicator