pixelize-native-library 1.0.6 → 1.2.0

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

@@ -9,30 +9,31 @@
  * escape hooks (backdrop press, Android hardware back, iOS VoiceOver escape, the web-portal opt-in)
  * is inherited for free.
  *
- * `BottomNav.tsx` owns only the fixed bar: per-tab focus tracking, the active-indicator render
- * (presence/absence + a label-weight switch, never colour alone — see the accessibility contract in
- * MODULE.md), wiring press → `onDestinationPress`, and closing the sheet after a sheet-row selection.
- * The sheet's actual content (search, Recent, grouped sections, edit mode, no-results) is
- * `BottomNavOverflowSheet` — a private sub-component in its own file, the same "this warrants its own
- * file" call this library already made for Reorder's private `ReorderRow`.
+ * `BottomNav.tsx` owns only the bar's composition: laying out the slots, wiring press →
+ * `onDestinationPress`, and closing the sheet after a sheet-row selection. One slot — icon, badge,
+ * label, focus ring, active indicator, and that indicator's transition — is `BottomNavTab`, rendered
+ * for the core tabs AND the More slot. The sheet's actual content (search, Recent, grouped sections,
+ * edit mode, no-results) is `BottomNavOverflowSheet`. Both are private sub-components in their own
+ * files, the same "this warrants its own file" call this library already made for Reorder's private
+ * `ReorderRow`.
  *
  * Every piece of state here was classified against one question: does anything OUTSIDE this
  * component plausibly need to read or set it? `active`, `moreVisible`, `recent`, `coreTabs`, and
  * `edit.editing` all answer yes (the app's own router/persistence owns them) and are therefore
  * controlled props, never internal state — see MODULE.md's "Controlled-state contract" for the full,
- * item-by-item reasoning. Only per-tab keyboard/AT focus is internal here, the same idiom
- * Button/Input/Select already use for their own focus rings.
+ * item-by-item reasoning. Only per-tab keyboard/AT focus is internal, and it lives inside
+ * `BottomNavTab` — the same idiom Button/Input/Select use for their own focus rings.
  */
 
-import { memo, useCallback, useMemo, useState } from "react";
-import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
-import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { memo, useCallback, useMemo } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
 import { Drawer } from "../drawer/index.js";
 import { Menu } from "../menu/index.js";
-import { BOTTOM_NAV_ICON_SIZE, bottomNavBarStructure, bottomNavTabStructure, resolveBottomNavAccessibility, resolveBottomNavBottomInset, resolveBottomNavTabColors } from "./BottomNav.variants.js";
+import { bottomNavBarStructure, resolveBottomNavBottomInset, resolveBottomNavOverflowBadgeTotal } from "./BottomNav.variants.js";
 import { BottomNavOverflowSheet } from "./BottomNavOverflowSheet.js";
+import { BottomNavTab } from "./BottomNavTab.js";
 
 /** Fully app-supplied. The library never hardcodes a destination's id, label, icon, or grouping. */
 
@@ -47,7 +48,6 @@ import { BottomNavOverflowSheet } from "./BottomNavOverflowSheet.js";
  * edit affordance anywhere, byte-identical to a build of this module that never had the feature.
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const ICON_STROKE = 2;
 const DEFAULT_SEARCH_PLACEHOLDER = "Search";
 const DEFAULT_RECENT_LABEL = "Recent";
 const DEFAULT_NO_RESULTS_LABEL = "No matches";
@@ -55,31 +55,11 @@ const DEFAULT_MORE_QUICK_ACTIONS_LABEL = "More options";
 // Nudges the quick-actions badge toward the More tab's corner without clipping its own ≥44dp target
 // (Button's `hitSlop` still expands outward from this offset position).
 const QUICK_ACTIONS_BADGE_OFFSET = -4;
-// The active-tab dot — presence/absence conveys selection (WCAG 1.4.1), never a colour swap alone.
-const ACTIVE_DOT_SIZE = 6;
 // Stable identity so an omitted `recent` hands `BottomNavOverflowSheet` the SAME empty array every
 // render, rather than a fresh `[]` literal that would defeat its memo.
 const EMPTY_RECENT = [];
-
-/** Which tab currently holds keyboard/AT focus — a discriminated shape (not a bare id) so the More
- *  tab, whose "id" isn't one of `coreTabs`, can't collide with a core tab that happens to share it. */
-
-function focusRing(theme, testID) {
-  return /*#__PURE__*/_jsx(View, {
-    pointerEvents: "none",
-    testID: testID,
-    style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      borderWidth: 2,
-      borderColor: theme.colors.border.focus,
-      borderRadius: theme.radii.base
-    }
-  });
-}
+// The More slot has no destination id; its own press handler takes no argument.
+const MORE_TAB_ID = "more";
 export const BottomNav = /*#__PURE__*/memo(function BottomNav(props) {
   const {
     coreTabs,
@@ -102,14 +82,10 @@ export const BottomNav = /*#__PURE__*/memo(function BottomNav(props) {
     testID
   } = props;
   const theme = useTheme();
-  const [focused, setFocused] = useState(null);
   const bottomInset = resolveBottomNavBottomInset(theme.space[2], Platform.OS);
   const moreSelected = active.kind === "more";
-  const moreColors = resolveBottomNavTabColors(theme.colors, moreSelected);
-  const moreA11y = resolveBottomNavAccessibility({
-    selected: moreSelected,
-    expanded: moreVisible
-  });
+  const overflowBadgeTotal = resolveBottomNavOverflowBadgeTotal(overflowSections);
+  const openSheet = useCallback(() => onMoreVisibleChange(true), [onMoreVisibleChange]);
   const closeSheet = useCallback(() => onMoreVisibleChange(false), [onMoreVisibleChange]);
   // Every navigation intent inside the sheet reports through the same `onDestinationPress` the core
   // tabs use, then closes the sheet — see the interaction model in MODULE.md. Stable via useCallback
@@ -138,82 +114,27 @@ export const BottomNav = /*#__PURE__*/memo(function BottomNav(props) {
         borderTopColor: theme.colors.border.default,
         paddingBottom: bottomInset
       }, style],
-      children: [coreTabs.map(tab => {
-        const selected = active.kind === "core" && active.id === tab.id;
-        const colors = resolveBottomNavTabColors(theme.colors, selected);
-        const a11y = resolveBottomNavAccessibility({
-          selected
-        });
-        const isFocused = focused?.kind === "core" && focused.id === tab.id;
-        const tabTestID = testID ? `${testID}-tab-${tab.id}` : undefined;
-        return /*#__PURE__*/_jsxs(Pressable, {
-          testID: tabTestID,
-          accessibilityRole: a11y.accessibilityRole,
-          accessibilityLabel: tab.accessibilityLabel ?? tab.label,
-          accessibilityState: a11y.accessibilityState,
-          onPress: () => onDestinationPress(tab.id),
-          onFocus: () => setFocused({
-            kind: "core",
-            id: tab.id
-          }),
-          onBlur: () => setFocused(prev => prev?.kind === "core" && prev.id === tab.id ? null : prev),
-          style: bottomNavTabStructure(theme),
-          children: [isFocused && focusRing(theme, tabTestID ? `${tabTestID}-focus-ring` : undefined), /*#__PURE__*/_jsx(Icon, {
-            name: tab.icon,
-            size: BOTTOM_NAV_ICON_SIZE,
-            color: colors.icon,
-            strokeWidth: ICON_STROKE
-          }), /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
-            style: [theme.fontStyleForWeight(selected ? theme.fontWeights.semibold : theme.fontWeights.regular), {
-              fontSize: theme.fontSizes.xs,
-              color: colors.label
-            }],
-            children: tab.label
-          }), selected && /*#__PURE__*/_jsx(View, {
-            testID: tabTestID ? `${tabTestID}-indicator` : undefined,
-            style: {
-              width: ACTIVE_DOT_SIZE,
-              height: ACTIVE_DOT_SIZE,
-              borderRadius: ACTIVE_DOT_SIZE / 2,
-              backgroundColor: colors.indicator
-            }
-          })]
-        }, tab.id);
-      }), /*#__PURE__*/_jsxs(View, {
+      children: [coreTabs.map(tab => /*#__PURE__*/_jsx(BottomNavTab, {
+        id: tab.id,
+        label: tab.label,
+        icon: tab.icon,
+        accessibilityLabel: tab.accessibilityLabel,
+        badgeCount: tab.badge,
+        selected: active.kind === "core" && active.id === tab.id,
+        onPress: onDestinationPress,
+        testID: testID ? `${testID}-tab-${tab.id}` : undefined
+      }, tab.id)), /*#__PURE__*/_jsxs(View, {
         style: styles.moreSlot,
-        children: [/*#__PURE__*/_jsxs(Pressable, {
-          testID: testID ? `${testID}-more` : undefined,
-          accessibilityRole: moreA11y.accessibilityRole,
-          accessibilityLabel: moreLabel,
-          accessibilityState: moreA11y.accessibilityState,
-          onPress: () => onMoreVisibleChange(true),
-          onFocus: () => setFocused({
-            kind: "more"
-          }),
-          onBlur: () => setFocused(prev => prev?.kind === "more" ? null : prev),
-          style: bottomNavTabStructure(theme),
-          children: [focused?.kind === "more" && focusRing(theme, testID ? `${testID}-more-focus-ring` : undefined), /*#__PURE__*/_jsx(Icon, {
-            name: moreIcon,
-            size: BOTTOM_NAV_ICON_SIZE,
-            color: moreColors.icon,
-            strokeWidth: ICON_STROKE
-          }), /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
-            style: [theme.fontStyleForWeight(moreSelected ? theme.fontWeights.semibold : theme.fontWeights.regular), {
-              fontSize: theme.fontSizes.xs,
-              color: moreColors.label
-            }],
-            children: moreLabel
-          }), moreSelected && /*#__PURE__*/_jsx(View, {
-            testID: testID ? `${testID}-more-indicator` : undefined,
-            style: {
-              width: ACTIVE_DOT_SIZE,
-              height: ACTIVE_DOT_SIZE,
-              borderRadius: ACTIVE_DOT_SIZE / 2,
-              backgroundColor: moreColors.indicator
-            }
-          })]
+        children: [/*#__PURE__*/_jsx(BottomNavTab, {
+          id: MORE_TAB_ID,
+          label: moreLabel,
+          icon: moreIcon,
+          badgeCount: overflowBadgeTotal,
+          badgeAppearance: "dot",
+          selected: moreSelected,
+          expanded: moreVisible,
+          onPress: openSheet,
+          testID: testID ? `${testID}-more` : undefined
         }), moreQuickActions !== undefined && /*#__PURE__*/_jsx(View, {
           style: styles.quickActionsBadge,
           children: /*#__PURE__*/_jsx(Menu, {

package/lib/module/modules/bottom-nav/BottomNav.variants.js

@@ -36,6 +36,52 @@ export const BOTTOM_NAV_HEIGHT = 56;
 export const BOTTOM_NAV_ICON_SIZE = 22;
 /** Icon glyph size for a row inside the overflow sheet (search result, Recent, grouped, edit slot). */
 export const OVERFLOW_ROW_ICON_SIZE = 20;
+
+/** Display cap for the count pill — a count past this renders as "99+"; the accessible name always
+ *  carries the TRUE count (see `resolveBottomNavBadge`). */
+export const BOTTOM_NAV_BADGE_MAX_COUNT = 99;
+/** The count pill's height and minimum width — deliberately below `MIN_TOUCH_TARGET`: the pill is a
+ *  passive adornment inside its destination's own touchable, never a target itself. */
+export const BOTTOM_NAV_BADGE_SIZE = 16;
+export const BOTTOM_NAV_BADGE_FONT_SIZE = 10;
+/** The More trigger's presence-only badge dot — same quiet idiom as the bar's active-indicator dot;
+ *  the summed count still reaches AT users through the trigger's accessible name. */
+export const BOTTOM_NAV_BADGE_DOT_SIZE = 8;
+
+/** The active-tab dot. Geometry is static — selection is animated on opacity/scale only, so the
+ *  bar never reflows when the active tab changes. */
+export const BOTTOM_NAV_ACTIVE_DOT_SIZE = 6;
+
+/** The one settle magnitude the bar owns: the scale both the active dot and a badge grow FROM as
+ *  they fade in, so every appearance in this module reads as the same gesture. */
+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 function resolveBottomNavBadge(count) {
+  if (count === undefined || count <= 0) return null;
+  return {
+    label: count > BOTTOM_NAV_BADGE_MAX_COUNT ? `${BOTTOM_NAV_BADGE_MAX_COUNT}+` : String(count),
+    accessibilityText: count === 1 ? "1 new item" : `${count} new items`
+  };
+}
+
+/** Sums the positive badge counts across every overflow destination — drives the More trigger's dot
+ *  and its accessible name. Structurally typed so this file stays free of `BottomNav.tsx` imports. */
+export function resolveBottomNavOverflowBadgeTotal(sections) {
+  let total = 0;
+  for (const section of sections) {
+    for (const destination of section.destinations) {
+      if (destination.badge !== undefined && destination.badge > 0) total += destination.badge;
+    }
+  }
+  return total;
+}
+/** The accessible name a destination (or the More trigger) announces: the explicit override as-is,
+ *  else the label with the badge's true count folded in ("Tasks, 5 new items"). */
+export function resolveBottomNavDestinationAccessibilityLabel(input) {
+  if (input.accessibilityLabel !== undefined) return input.accessibilityLabel;
+  return input.badge === null ? input.label : `${input.label}, ${input.badge.accessibilityText}`;
+}
 /** The edit-mode slot chip's own "this is the pin target" dot — presence/absence, not a re-tint,
  *  same "use of colour" principle the bar's own active indicator documents below. */
 export const EDIT_SLOT_INDICATOR_SIZE = 8;
@@ -80,19 +126,27 @@ export function resolveBottomNavTabColors(colors, active) {
   };
 }
 /**
- * Derives one tab's accessibility surface once, purely (WCAG 4.1.2): `selected` is required,
- * `expanded` and `disabled` are folded in only when the caller actually passes them, so a plain
- * core tab's `accessibilityState` never carries a stray `expanded: undefined` key.
+ * The badge reads at the accent's SOLID emphasis, not the Badge module's subtle chip fill — a
+ * 10dp count on a 16dp pill needs the strongest figure/ground the theme offers, and `accent.solid`
+ * is the same role the active-indicator dot already draws from, so the bar stays one accent story.
  */
-export function resolveBottomNavAccessibility(input) {
-  const accessibilityState = {
-    selected: input.selected
+export function resolveBottomNavBadgeColors(colors) {
+  return {
+    fill: colors.accent.solid,
+    label: colors.accent.onSolid
   };
-  if (input.expanded !== undefined) accessibilityState.expanded = input.expanded;
-  if (input.disabled !== undefined) accessibilityState.disabled = input.disabled;
+}
+/**
+ * Derives one tab's accessibility surface once, purely (WCAG 4.1.2): `selected` is required, while
+ * `expanded` and `disabled` stay `undefined` unless the caller passes them — React drops an
+ * `undefined` prop, so a plain core tab renders neither attribute.
+ */
+export function resolveBottomNavAccessibility(input) {
   return {
     accessibilityRole: "tab",
-    accessibilityState
+    "aria-selected": input.selected,
+    "aria-expanded": input.expanded,
+    "aria-disabled": input.disabled
   };
 }
 /** Pure "is this the targeted slot" derivation, shared by the render tree and its tests — the same
@@ -126,6 +180,20 @@ export const bottomNavTabStructure = createThemedVariants(theme => ({
   }
 }));
 
+/** The keyboard/AT focus ring drawn over one tab's own bounds — same `border.focus` treatment
+ *  Button/Input use. Its colour is applied inline over this, never hardcoded here. */
+export const bottomNavFocusRingStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: theme.borderWidths.thick,
+    borderRadius: theme.radii.base
+  }
+}));
+
 /** One row inside the overflow sheet — Recent, a grouped section's destination, or a search result.
  *  Same shape as Select's own `selectRowStructure` / Menu's `menuRowStructure`. */
 export const overflowRowStructure = createThemedVariants(theme => ({
@@ -148,6 +216,22 @@ export const overflowSectionHeaderStructure = createThemedVariants(theme => ({
   }
 }));
 
+/** The count pill, absolutely positioned over a destination icon's top-right corner. Width grows
+ *  leftward from the `end` anchor as the count widens ("99+"), never shifting the icon itself. */
+export const bottomNavBadgePillStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    top: -theme.space[1],
+    end: -theme.space[2],
+    minWidth: BOTTOM_NAV_BADGE_SIZE,
+    height: BOTTOM_NAV_BADGE_SIZE,
+    borderRadius: BOTTOM_NAV_BADGE_SIZE / 2,
+    paddingHorizontal: theme.space[1],
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+
 /** A row inside the edit-mode view — a current-core-tab slot chip, or the "Reset to default" row.
  *  Slightly tighter horizontal padding + a radius than `overflowRowStructure`: these rows read as a
  *  distinct, self-contained mini-list rather than a continuation of the section list below them. */

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

@@ -0,0 +1,123 @@
+"use strict";
+
+/**
+ * BottomNavIconWithBadge — PRIVATE sub-component (not exported from `index.ts`, same status as
+ * `BottomNavOverflowSheet`). A destination icon plus its optional attention badge, shared by the
+ * bar's core tabs, the More trigger, and every overflow-sheet row so the badge renders identically
+ * everywhere. `appearance="count"` is the numeric pill (display capped per
+ * `BOTTOM_NAV_BADGE_MAX_COUNT`); `appearance="dot"` is the More trigger's presence-only dot — the
+ * summed overflow count still reaches AT users through the trigger's accessible name, the visual
+ * just stays as quiet as the bar's own active-indicator dot idiom.
+ *
+ * Takes the raw `badgeCount` primitive, not a resolved `BottomNavBadgeState` object, so this
+ * component's `React.memo` actually holds — the parent resolves its own state object for the
+ * 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 { Icon } from "../../core/icon/index.js";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { BOTTOM_NAV_BADGE_DOT_SIZE, BOTTOM_NAV_BADGE_FONT_SIZE, BOTTOM_NAV_SETTLE_SCALE, bottomNavBadgePillStructure, resolveBottomNavBadge, resolveBottomNavBadgeColors } from "./BottomNav.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+const DOT_OFFSET = -2;
+export const BottomNavIconWithBadge = /*#__PURE__*/memo(function BottomNavIconWithBadge({
+  icon,
+  iconSize,
+  iconColor,
+  badgeCount,
+  appearance = "count",
+  badgeTestID
+}) {
+  const theme = useTheme();
+  const motion = useMotion();
+  const badge = resolveBottomNavBadge(badgeCount);
+  const badgeColors = resolveBottomNavBadgeColors(theme.colors);
+  const settle = useAnimatedValue(badge === null ? 0 : 1);
+  const running = useRef(null);
+  const firstRun = useRef(true);
+  const settleMotionStyle = useMemo(() => ({
+    opacity: settle,
+    transform: [{
+      scale: settle.interpolate({
+        inputRange: [0, 1],
+        outputRange: [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
+  // that looks identical.
+  const badgeLabel = badge?.label;
+  useEffect(() => {
+    // A badge already present at mount is part of the bar's resting state, not an appearance.
+    const onMount = firstRun.current;
+    firstRun.current = false;
+    running.current?.stop();
+    if (badgeLabel === undefined) {
+      settle.setValue(0);
+      return;
+    }
+    if (onMount || !motion.enabled) {
+      settle.setValue(1);
+      return;
+    }
+    settle.setValue(0);
+    running.current = motion.timing(settle, 1, {
+      duration: "fast",
+      easing: "decelerate"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [badgeLabel, motion, settle]);
+  useEffect(() => () => running.current?.stop(), []);
+  return /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      name: icon,
+      size: iconSize,
+      color: iconColor,
+      strokeWidth: ICON_STROKE
+    }), badge !== null && (appearance === "dot" ? /*#__PURE__*/_jsx(Animated.View, {
+      testID: badgeTestID,
+      pointerEvents: "none",
+      style: [styles.dot, {
+        backgroundColor: badgeColors.fill
+      }, settleStyle]
+    }) : /*#__PURE__*/_jsx(Animated.View, {
+      testID: badgeTestID,
+      pointerEvents: "none",
+      style: [bottomNavBadgePillStructure(theme), {
+        backgroundColor: badgeColors.fill
+      }, settleStyle],
+      children: /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
+        style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+          fontSize: BOTTOM_NAV_BADGE_FONT_SIZE,
+          color: badgeColors.label
+        }],
+        children: badge.label
+      })
+    }))]
+  });
+});
+const styles = StyleSheet.create({
+  settled: {
+    opacity: 1,
+    transform: [{
+      scale: 1
+    }]
+  },
+  dot: {
+    position: "absolute",
+    top: DOT_OFFSET,
+    end: DOT_OFFSET,
+    width: BOTTOM_NAV_BADGE_DOT_SIZE,
+    height: BOTTOM_NAV_BADGE_DOT_SIZE,
+    borderRadius: BOTTOM_NAV_BADGE_DOT_SIZE / 2
+  }
+});
+//# sourceMappingURL=BottomNavIconWithBadge.js.map