pixelize-native-library 1.2.0 → 1.3.0

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
 
@@ -18,7 +19,8 @@ or disabled state.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `tone` | `accent \| neutral \| success \| warning \| danger \| info` | `accent` | Closed union — see below. |
+| `tone` | `accent \| neutral \| success \| warning \| danger \| info \| custom` | `accent` | Closed union — see below. |
+| `customColors` | `{ bg, fg }` | — | Required when `tone="custom"`. Server-driven hex escape hatch. |
 | `size` | `sm \| md` | `md` | 20 / 24 dp. No touch-target floor — not interactive. |
 | `label` | `string` | — | Always required; a Badge is never icon-only. |
 | `icon` | `IconName` | — | A NAME, never a `ReactNode`. Optional, leading only. |
@@ -31,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
@@ -40,10 +43,9 @@ or disabled state.
 ## Why `tone` is a union, not a `color`
 
 Same reasoning as Button/Input: every colour a Badge can show is a role lookup
-(`resolveBadgeTone`), guaranteed legible in both modes, never an app-invented hex. `accent`/
-`neutral` mirror Button's tone shapes at "subtle" emphasis only (a badge never uses a solid fill —
-it's a passive label, not a call-to-action). The four status tones map onto
-`colors.status.<role>`.
+(`resolveBadgeTone`), guaranteed legible in both modes, never an app-invented hex — except
+`tone="custom"`, which requires `customColors={{ bg, fg }}` and maps fill/text/border from those
+values (the same escape hatch `Chip` and `SelectOption` share for workflow-driven colours).
 
 ## A real gap this module found: `StatusColors.border` is not a badge border
 

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

@@ -11,10 +11,16 @@
  */
 
 import { memo, useCallback, useMemo } from "react";
-import { Animated, Pressable, Text, 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";
+import { concentric } from "../../core/style/index.js";
+import { elevation, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
 import { useTheme } from "../../theme/hooks.js";
+import { resolveTextStyle } from "../text/Text.variants.js";
 import { BANNER_DISMISS_ICON_SIZE, BANNER_ICON_SIZE, BANNER_MIN_TOUCH_TARGET, bannerStructure, resolveBannerAccessibility, resolveBannerIcon, resolveBannerTone } from "./Banner.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
@@ -38,6 +44,7 @@ export const Banner = /*#__PURE__*/memo(function Banner({
   onDismiss,
   dismissLabel = "Dismiss",
   action,
+  actions,
   style,
   testID
 }) {
@@ -50,13 +57,25 @@ export const Banner = /*#__PURE__*/memo(function Banner({
     message
   }), [tone, title, message]);
   const glyph = icon === null ? undefined : icon ?? resolveBannerIcon(tone);
-  const handleAction = useCallback(() => action?.onPress(), [action]);
+  const handleAction = useCallback(item => item.onPress(), []);
+  const bannerActions = useMemo(() => {
+    const list = [];
+    if (action !== undefined) list.push(action);
+    if (actions !== undefined) list.push(...actions);
+    return list;
+  }, [action, actions]);
+  const floatingStyle = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.sm);
+    void theme.elevatedSurfaces;
+    return floatingSurfaceStyle(theme, "sm");
+  }, [theme]);
+  const iconChipRadius = useMemo(() => concentric(theme.radii.lg, theme.space[3]), [theme.radii.lg, theme.space]);
 
   // `style` stays last; the enter/exit style holds only opacity/transform, which `LayoutStyle` cannot name.
   const rootStyle = useMemo(() => [bannerStructure(theme), {
-    backgroundColor: colors.fill,
-    borderColor: colors.border
-  }, enterExit.style, style], [theme, colors, enterExit.style, style]);
+    backgroundColor: colors.fill
+  }, floatingStyle, enterExit.style, style], [theme, floatingStyle, colors, enterExit.style, style]);
   const contentStyle = useMemo(() => ({
     flex: 1,
     rowGap: theme.space[1]
@@ -64,72 +83,99 @@ export const Banner = /*#__PURE__*/memo(function Banner({
   const textBlockStyle = useMemo(() => ({
     rowGap: theme.space[1]
   }), [theme]);
-  const titleStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-    fontSize: theme.fontSizes.md,
+  const titleStyle = useMemo(() => [resolveTextStyle(theme, "subheading"), {
     color: colors.text
-  }], [theme, colors]);
-  const messageStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
-    fontSize: theme.fontSizes.sm,
+  }], [theme, colors.text]);
+  const messageStyle = useMemo(() => [resolveTextStyle(theme, "body-sm"), {
     color: colors.text
-  }], [theme, colors]);
-  const actionStyle = useMemo(() => ({
-    alignSelf: "flex-start",
-    paddingVertical: theme.space[1]
-  }), [theme]);
-  const actionLabelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-    fontSize: theme.fontSizes.sm,
+  }], [theme, colors.text]);
+  const actionLabelStyle = useMemo(() => [resolveTextStyle(theme, "label-sm"), {
     color: colors.text,
     textDecorationLine: "underline"
-  }], [theme, colors]);
+  }], [theme, colors.text]);
+  const actionRowStyle = useMemo(() => ({
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: theme.space[3]
+  }), [theme]);
   const actionHitSlop = useMemo(() => hitSlopFor(theme.fontSizes.sm), [theme]);
+  const actionRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
+  const dismissRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: true
+  } : undefined, [theme.mode]);
   if (!enterExit.mounted) return null;
-  return /*#__PURE__*/_jsxs(Animated.View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     testID: testID,
-    style: rootStyle,
-    children: [glyph && /*#__PURE__*/_jsx(Icon, {
-      name: glyph,
-      size: BANNER_ICON_SIZE,
-      color: colors.text,
-      strokeWidth: ICON_STROKE
-    }), /*#__PURE__*/_jsxs(View, {
-      style: contentStyle,
-      children: [/*#__PURE__*/_jsxs(View, {
-        accessible: a11y.accessible,
-        accessibilityRole: a11y.accessibilityRole,
-        accessibilityLabel: a11y.accessibilityLabel,
-        style: textBlockStyle,
-        children: [title && /*#__PURE__*/_jsx(Text, {
-          style: titleStyle,
-          children: title
-        }), /*#__PURE__*/_jsx(Text, {
-          style: messageStyle,
-          children: message
+    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+    exiting: FadeOut.reduceMotion(ReduceMotion.System),
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
+      style: rootStyle,
+      children: [glyph && /*#__PURE__*/_jsx(View, {
+        style: {
+          borderRadius: iconChipRadius,
+          borderCurve: "continuous",
+          overflow: "hidden",
+          padding: theme.space[1]
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: glyph,
+          size: BANNER_ICON_SIZE,
+          color: colors.text,
+          strokeWidth: ICON_STROKE
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: contentStyle,
+        children: [/*#__PURE__*/_jsxs(View, {
+          accessible: a11y.accessible,
+          accessibilityRole: a11y.accessibilityRole,
+          accessibilityLabel: a11y.accessibilityLabel,
+          style: textBlockStyle,
+          children: [title && /*#__PURE__*/_jsx(RNText, {
+            style: titleStyle,
+            children: title
+          }), /*#__PURE__*/_jsx(RNText, {
+            style: messageStyle,
+            children: message
+          })]
+        }), bannerActions.length > 0 && /*#__PURE__*/_jsx(View, {
+          style: actionRowStyle,
+          children: bannerActions.map((item, index) => /*#__PURE__*/_jsx(Pressable, {
+            testID: testID ? `${testID}-action-${index}` : undefined,
+            accessibilityRole: "button",
+            accessibilityLabel: item.label,
+            onPress: () => handleAction(item),
+            hitSlop: actionHitSlop,
+            android_ripple: actionRipple,
+            style: {
+              alignSelf: "flex-start",
+              paddingVertical: theme.space[1]
+            },
+            children: /*#__PURE__*/_jsx(RNText, {
+              style: actionLabelStyle,
+              children: item.label
+            })
+          }, `${item.label}-${index}`))
         })]
-      }), action && /*#__PURE__*/_jsx(Pressable, {
-        testID: testID ? `${testID}-action` : undefined,
+      }), onDismiss && /*#__PURE__*/_jsx(Pressable, {
+        testID: testID ? `${testID}-dismiss` : undefined,
         accessibilityRole: "button",
-        accessibilityLabel: action.label,
-        onPress: handleAction,
-        hitSlop: actionHitSlop,
-        style: actionStyle,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: actionLabelStyle,
-          children: action.label
+        accessibilityLabel: dismissLabel,
+        onPress: onDismiss,
+        hitSlop: DISMISS_HIT_SLOP,
+        android_ripple: dismissRipple,
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "x",
+          size: BANNER_DISMISS_ICON_SIZE,
+          color: colors.text,
+          strokeWidth: ICON_STROKE
         })
       })]
-    }), onDismiss && /*#__PURE__*/_jsx(Pressable, {
-      testID: testID ? `${testID}-dismiss` : undefined,
-      accessibilityRole: "button",
-      accessibilityLabel: dismissLabel,
-      onPress: onDismiss,
-      hitSlop: DISMISS_HIT_SLOP,
-      children: /*#__PURE__*/_jsx(Icon, {
-        name: "x",
-        size: BANNER_DISMISS_ICON_SIZE,
-        color: colors.text,
-        strokeWidth: ICON_STROKE
-      })
-    })]
+    })
   });
 });
 //# sourceMappingURL=Banner.js.map

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,15 +104,15 @@ 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",
     alignItems: "flex-start",
     columnGap: theme.space[3],
     padding: theme.space[3],
-    borderRadius: theme.radii.base,
-    borderWidth: theme.borderWidths.thin
+    borderRadius: theme.radii.lg,
+    borderCurve: "continuous"
   },
   variants: {},
   defaultVariants: {}

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,23 +28,20 @@ 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; more than one belongs in a dialog. |
+| `action` | `{ label, onPress }` | — | One inline action; use with `actions` for multiple. |
+| `actions` | `BannerAction[]` | — | Additional actions rendered after `action`. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
-| `testID` | `string` | — | Seeds `${testID}-dismiss` and `${testID}-action`. |
+| `testID` | `string` | — | Seeds `${testID}-dismiss` and `${testID}-action-{index}`. |
 
 ## 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.
@@ -57,14 +54,16 @@ of a family that is easy to confuse:
   canvas instead — otherwise a solid banner could be invisible on a same-toned page.
 - **2.5.8 / 2.5.5 target size** — the dismiss glyph (16dp) and the action label are padded to a 44dp
   touch target via `hitSlop`, so the visual size never dictates the tap size.
-- **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.
+- **Android touch feedback** — both the dismiss control and the action link carry `android_ripple`
+  (`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** — 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
 
@@ -84,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.js

@@ -27,6 +27,7 @@
 
 import { memo, useCallback, useMemo } from "react";
 import { Platform, StyleSheet, View } from "react-native";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
 import { Drawer } from "../drawer/index.js";
@@ -82,6 +83,10 @@ export const BottomNav = /*#__PURE__*/memo(function BottomNav(props) {
     testID
   } = props;
   const theme = useTheme();
+  const barDepth = useMemo(() => ({
+    backgroundColor: floatingBackground(theme, "md"),
+    ...floatingSurfaceStyle(theme, "md")
+  }), [theme]);
   const bottomInset = resolveBottomNavBottomInset(theme.space[2], Platform.OS);
   const moreSelected = active.kind === "more";
   const overflowBadgeTotal = resolveBottomNavOverflowBadgeTotal(overflowSections);
@@ -109,9 +114,7 @@ export const BottomNav = /*#__PURE__*/memo(function BottomNav(props) {
     children: [/*#__PURE__*/_jsxs(View, {
       testID: testID,
       accessibilityRole: "tablist",
-      style: [bottomNavBarStructure(theme), {
-        backgroundColor: theme.colors.bg.surface,
-        borderTopColor: theme.colors.border.default,
+      style: [bottomNavBarStructure(theme), barDepth, {
         paddingBottom: bottomInset
       }, style],
       children: [coreTabs.map(tab => /*#__PURE__*/_jsx(BottomNavTab, {

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 {
@@ -120,8 +120,8 @@ export function resolveOverflowSheetHeight(windowHeight) {
  */
 export function resolveBottomNavTabColors(colors, active) {
   return {
-    icon: active ? colors.fg.default : colors.fg.muted,
-    label: active ? colors.fg.default : colors.fg.muted,
+    icon: active ? colors.accent.text : colors.fg.muted,
+    label: active ? colors.accent.text : colors.fg.muted,
     indicator: colors.accent.solid
   };
 }
@@ -157,13 +157,10 @@ export function resolveEditRowState(input) {
   };
 }
 
-/** The bar container: tabs laid out as equal-width flex children, top border separating it from the
- *  screen content above. Colour (border, background) is resolved from role tokens and applied
- *  inline over this — never a hardcoded hex here. */
-export const bottomNavBarStructure = createThemedVariants(theme => ({
+/** Tabs laid out as equal-width flex children; the bar separates from content by tone + elevation. */
+export const bottomNavBarStructure = createThemedVariants(_theme => ({
   base: {
-    flexDirection: "row",
-    borderTopWidth: theme.borderWidths.thin
+    flexDirection: "row"
   }
 }));
 
@@ -190,7 +187,8 @@ export const bottomNavFocusRingStructure = createThemedVariants(theme => ({
     right: 0,
     bottom: 0,
     borderWidth: theme.borderWidths.thick,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 
@@ -242,7 +240,8 @@ export const editRowStructure = createThemedVariants(theme => ({
     minHeight: MIN_TOUCH_TARGET,
     columnGap: theme.space[2],
     paddingHorizontal: theme.space[3],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   }
 }));
 //# sourceMappingURL=BottomNav.variants.js.map

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), {