@dloizides/ui-nav 1.26.2 → 1.28.0

package/dist/index.js

@@ -903,7 +903,8 @@ var APP_SHELL_SUFFIX = {
   pending: "-pending",
   loading: "-loading",
   error: "-error",
-  forbidden: "-forbidden"
+  forbidden: "-forbidden",
+  band: "-backdrop-band"
 };
 var FocusableTouchable = ({
   onPress,
@@ -1057,10 +1058,88 @@ var Topbar = ({
     }
   );
 };
+
+// src/NavHoverFeedback.ts
+var NavHoverFeedback = /* @__PURE__ */ ((NavHoverFeedback2) => {
+  NavHoverFeedback2["Default"] = "default";
+  NavHoverFeedback2["TintPill"] = "tint-pill";
+  NavHoverFeedback2["Underline"] = "underline";
+  NavHoverFeedback2["Lift"] = "lift";
+  NavHoverFeedback2["SlidingHighlight"] = "sliding-highlight";
+  return NavHoverFeedback2;
+})(NavHoverFeedback || {});
+
+// src/feedback/navLinkFeedback.ts
+var DEFAULT_FADE_MS = 150;
+var PRESS_SCALE = 0.97;
+var PRESS_NUDGE_PX = 1;
+var LIFT_PX = -2;
+var PILL_KINDS = /* @__PURE__ */ new Set([
+  "default" /* Default */,
+  "tint-pill" /* TintPill */,
+  "lift" /* Lift */
+]);
+function pillBackground(kind, isHovered, active, colors) {
+  if (!PILL_KINDS.has(kind)) return void 0;
+  if (active) return colors.activeBg;
+  return isHovered ? colors.hoverBg : void 0;
+}
+function linkTextColor(kind, isHovered, active, colors) {
+  if (active) return PILL_KINDS.has(kind) ? colors.onPrimary : colors.activeBg;
+  return isHovered ? colors.hoverText : colors.rest;
+}
+function pressTransform(kind, pressed, isHovered) {
+  if (kind === "tint-pill" /* TintPill */) return pressed ? [{ scale: PRESS_SCALE }] : void 0;
+  if (kind === "underline" /* Underline */) return pressed ? [{ translateY: PRESS_NUDGE_PX }] : void 0;
+  if (kind !== "lift" /* Lift */) return void 0;
+  if (pressed) return [{ translateY: 0 }];
+  return isHovered ? [{ translateY: LIFT_PX }] : void 0;
+}
+function feedbackDuration(kind) {
+  if (kind === "default" /* Default */) return DEFAULT_FADE_MS;
+  return kind === "tint-pill" /* TintPill */ ? uiMotion.motionDurations.fast : uiMotion.motionDurations.base;
+}
+function resolveLinkFeedback(kind, state, colors, reducedMotion) {
+  const isHovered = state.hovered && !state.active;
+  const underlined = state.active || isHovered;
+  return {
+    background: pillBackground(kind, isHovered, state.active, colors),
+    textColor: linkTextColor(kind, isHovered, state.active, colors),
+    transform: reducedMotion ? void 0 : pressTransform(kind, state.pressed, isHovered),
+    shadow: kind === "lift" /* Lift */ && isHovered,
+    underline: kind === "underline" /* Underline */ ? { color: colors.activeBg, scale: underlined ? 1 : 0 } : null,
+    durationMs: reducedMotion ? uiMotion.motionDurations.instant : feedbackDuration(kind)
+  };
+}
 var TEXT_ON_PRIMARY2 = "#ffffff";
 function ariaCurrentProps2(isActive) {
   return isActive ? { "aria-current": "page" } : {};
 }
+var FEEDBACK_PROPERTIES = "color, background-color, transform, box-shadow";
+var UNDERLINE_INSET = 14;
+var UNDERLINE_HEIGHT = 2;
+var SHADOW_OPACITY = 0.18;
+var SHADOW_RADIUS = 6;
+var SHADOW_OFFSET = { width: 0, height: 2 };
+function feedbackStyle(kind, feedback, shadowColor, reducedMotion) {
+  const background = feedback.background === void 0 ? {} : { backgroundColor: feedback.background };
+  const shadow = feedback.shadow ? { shadowColor, shadowOpacity: SHADOW_OPACITY, shadowRadius: SHADOW_RADIUS, shadowOffset: SHADOW_OFFSET } : {};
+  const transition = kind === "default" /* Default */ ? hoverTransitionStyle(reducedMotion) : webTransition(FEEDBACK_PROPERTIES, feedback.durationMs, reducedMotion);
+  return [background, shadow, { transform: feedback.transform }, transition ?? {}];
+}
+function underlineStyle(feedback, reducedMotion) {
+  if (feedback.underline === null) return null;
+  const line = {
+    position: "absolute",
+    left: UNDERLINE_INSET,
+    right: UNDERLINE_INSET,
+    bottom: 0,
+    height: UNDERLINE_HEIGHT,
+    backgroundColor: feedback.underline.color,
+    transform: [{ scaleX: feedback.underline.scale }]
+  };
+  return [line, webTransition("transform", feedback.durationMs, reducedMotion) ?? {}];
+}
 var NavBarLink = ({
   item,
   isActive,
@@ -1069,13 +1148,20 @@ var NavBarLink = ({
   reducedMotion,
   colors,
   navigateHint,
-  onPress
+  onPress,
+  hoverFeedback = "default" /* Default */,
+  onHoverChange
 }) => {
   const [hovered, setHovered] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
-  const isHovered = hovered && !isActive;
-  const textColor = isActive ? TEXT_ON_PRIMARY2 : isHovered ? colors.hoverText : colors.rest;
-  const pillStyle = isActive ? { backgroundColor: colors.activeBg } : isHovered ? { backgroundColor: colors.hoverBg } : void 0;
+  const linkColors = { ...colors, onPrimary: TEXT_ON_PRIMARY2 };
+  const resolve = (pressed) => resolveLinkFeedback(hoverFeedback, { hovered, pressed, active: isActive }, linkColors, reducedMotion);
+  const textColor = resolve(false).textColor;
+  const underline = underlineStyle(resolve(false), reducedMotion);
+  const setHover = (next) => {
+    setHovered(next);
+    onHoverChange?.(item.key, next);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.Pressable,
     {
@@ -1083,27 +1169,61 @@ var NavBarLink = ({
       accessibilityLabel: item.label,
       accessibilityRole: "link",
       accessibilityState: { selected: isActive },
-      style: [
+      style: ({ pressed }) => [
         navBarStyles.link,
         collapsed ? navBarStyles.linkStacked : void 0,
-        pillStyle,
-        hoverTransitionStyle(reducedMotion),
+        ...feedbackStyle(hoverFeedback, resolve(pressed), colors.rest, reducedMotion),
         focusRingStyle(focused, colors.ring)
       ],
       testID: item.testID ?? item.key,
       onBlur: () => setFocused(false),
       onFocus: () => setFocused(true),
-      onHoverIn: () => setHovered(true),
-      onHoverOut: () => setHovered(false),
+      onHoverIn: () => setHover(true),
+      onHoverOut: () => setHover(false),
       onPress: () => onPress(item.route),
       ...ariaCurrentProps2(isActive),
       children: [
         typeof item.renderIcon === "function" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navBarStyles.linkIcon, children: item.renderIcon(textColor, iconSize) }) : null,
+        underline === null ? null : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: underline }),
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navBarStyles.linkText, { color: textColor }], children: item.label })
       ]
     }
   );
 };
+var HIGHLIGHT_RADIUS = 8;
+var SLIDE_PROPERTIES = "left, top, width, height";
+function slideHighlightRect(layouts, activeKey, hoveredKey) {
+  const hoveredRect = hoveredKey === null ? void 0 : layouts[hoveredKey];
+  const activeRect = activeKey === void 0 ? void 0 : layouts[activeKey];
+  return hoveredRect ?? activeRect ?? null;
+}
+function useSlidingHighlight(enabled, activeKey, color, reducedMotion) {
+  const [layouts, setLayouts] = React.useState({});
+  const [hoveredKey, setHoveredKey] = React.useState(null);
+  const measure = React.useCallback(
+    (key, layout) => {
+      if (enabled) setLayouts((prev) => ({ ...prev, [key]: layout }));
+    },
+    [enabled]
+  );
+  const hover = React.useCallback((key, hovered) => {
+    setHoveredKey((prev) => hovered ? key : prev === key ? null : prev);
+  }, []);
+  const rect = enabled ? slideHighlightRect(layouts, activeKey, hoveredKey) : null;
+  const style = rect === null ? null : [
+    {
+      position: "absolute",
+      left: rect.x,
+      top: rect.y,
+      width: rect.width,
+      height: rect.height,
+      borderRadius: HIGHLIGHT_RADIUS,
+      backgroundColor: color
+    },
+    webTransition(SLIDE_PROPERTIES, uiMotion.motionDurations.base, reducedMotion)
+  ];
+  return { style, measure, hover };
+}
 var TEXT_ON_PRIMARY3 = "#ffffff";
 var NO_ACTIVE_ROUTE = "";
 var OVERFLOW_MENU_MIN_WIDTH = 200;
@@ -1244,7 +1364,8 @@ var NavBarInner = ({
   overflowLabel = "More",
   overflowHint = "",
   containerStyle,
-  contentMaxWidth
+  contentMaxWidth,
+  hoverFeedback = "default" /* Default */
 }) => {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
@@ -1278,6 +1399,12 @@ var NavBarInner = ({
     [onNavigate]
   );
   const activeRoute = resolveActiveRoute(items, pathname);
+  const slide = useSlidingHighlight(
+    hoverFeedback === "sliding-highlight" /* SlidingHighlight */,
+    items.find((item) => item.route === activeRoute)?.key,
+    colors.surfaceElevated,
+    reducedMotion
+  );
   const linkColors = React.useMemo(
     () => ({
       rest: colors.textSecondary,
@@ -1327,9 +1454,11 @@ var NavBarInner = ({
               colors: linkColors,
               iconSize: NAV_ICON_SIZE,
               isActive: item.route === activeRoute,
+              hoverFeedback,
               item,
               navigateHint,
               reducedMotion,
+              onHoverChange: slide.hover,
               onPress: handlePress
             }
           );
@@ -1355,11 +1484,15 @@ var NavBarInner = ({
               testID: NAV_TEST_IDS.navBarLinks,
               onLayout: (event) => setAvailableWidth(event.nativeEvent.layout.width),
               children: [
+                slide.style === null ? null : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: slide.style }),
                 visibleItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
                   reactNative.View,
                   {
                     style: navBarStyles.linkCell,
-                    onLayout: (event) => setItemWidth(index, event.nativeEvent.layout.width),
+                    onLayout: (event) => {
+                      setItemWidth(index, event.nativeEvent.layout.width);
+                      slide.measure(item.key, event.nativeEvent.layout);
+                    },
                     children: renderLink(item)
                   },
                   item.key
@@ -1410,13 +1543,53 @@ var Nav = (props) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(NavBar, { ...props });
 };
+var RAIL_FULL_BREAKPOINT = uiLayout.LAYOUT_COLLAPSE_BREAKPOINT;
+var DEFAULT_COLLAPSED_RAIL_MAX = 1024;
+function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
+  if (!hasSidebar) return "none";
+  if (hasCollapsed) {
+    if (viewport >= range.max) return "full";
+    if (viewport >= range.min) return "collapsed";
+    return "drawer";
+  }
+  return viewport >= RAIL_FULL_BREAKPOINT ? "full" : "drawer";
+}
+var styles3 = reactNative.StyleSheet.create({
+  band: { left: 0, position: "absolute", right: 0, top: 0 }
+});
+function readBackdrop(theme) {
+  return theme.backdrop;
+}
+function rootStyle(backdrop, fallback) {
+  if (backdrop === void 0) return { backgroundColor: fallback };
+  const base = { backgroundColor: backdrop.color };
+  if (!IS_WEB || backdrop.image === null) return base;
+  const web = { backgroundImage: backdrop.image, backgroundSize: backdrop.imageSize ?? "auto" };
+  return { ...base, ...web };
+}
+function resolveShellBackdrop(theme, viewport, contentPadding, testID) {
+  const backdrop = readBackdrop(theme);
+  const band = backdrop?.band ?? null;
+  const root = rootStyle(backdrop, theme.colors.background);
+  if (band === null) return { root, chrome: void 0, chromeText: theme.colors.text, band: null };
+  const overlap = viewport < RAIL_FULL_BREAKPOINT ? band.overlap.compact : band.overlap.wide;
+  const element = /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      pointerEvents: "none",
+      style: [styles3.band, { backgroundColor: band.color, height: contentPadding + overlap }],
+      testID: `${testID}${APP_SHELL_SUFFIX.band}`
+    }
+  );
+  return { root, chrome: { backgroundColor: band.color }, chromeText: band.text, band: element };
+}
 var CARD_PADDING = 20;
 var CARD_BORDER_RADIUS = 12;
 var CARD_BORDER_WIDTH = 1;
 var CARD_TITLE_FONT_SIZE = 16;
 var CARD_MESSAGE_FONT_SIZE = 14;
 var CARD_TITLE_MARGIN_BOTTOM = 8;
-var styles3 = reactNative.StyleSheet.create({
+var styles4 = reactNative.StyleSheet.create({
   // Loading is a TRANSITIONAL state: the spinner is an absolute overlay ON TOP of
   // stably-mounted children, never a replacement for them. Replacing children here
   // would unmount whatever they host (e.g. a navigator), and on remount React
@@ -1448,9 +1621,9 @@ function MessageCard({
 }) {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.cardTitle, { color: accentColor }], children: message.titleText }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.cardMessage, { color: colors.textSecondary }], children: message.messageText })
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles4.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.cardTitle, { color: accentColor }], children: message.titleText }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.cardMessage, { color: colors.textSecondary }], children: message.messageText })
   ] });
 }
 function useContentBody(state, children, testID) {
@@ -1462,12 +1635,12 @@ function useContentBody(state, children, testID) {
     return /* @__PURE__ */ jsxRuntime.jsx(MessageCard, { accentColor: errorColor, message: state.forbidden, testID: `${testID}${APP_SHELL_SUFFIX.forbidden}` });
   if (state.error)
     return /* @__PURE__ */ jsxRuntime.jsx(MessageCard, { accentColor: errorColor, message: state.error, testID: `${testID}${APP_SHELL_SUFFIX.error}` });
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.loadingHost, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.loadingHost, children: [
     children,
     state.loading === true ? /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
-        style: [styles3.loadingOverlay, { backgroundColor: theme.colors.background }],
+        style: [styles4.loadingOverlay, { backgroundColor: theme.colors.background }],
         testID: `${testID}${APP_SHELL_SUFFIX.loading}`,
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" })
       }
@@ -1494,7 +1667,7 @@ var DEFAULT_DRAWER_LABELS = {
   closeLabel: "Close menu",
   closeHint: "Close the navigation menu"
 };
-var styles4 = reactNative.StyleSheet.create({
+var styles5 = reactNative.StyleSheet.create({
   overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: DRAWER_Z_INDEX },
   // The scrim's tap-to-close hit area is anchored to the RIGHT of the panel
   // (`left: DRAWER_WIDTH`), so it NEVER overlaps the panel: nav-item taps always
@@ -1529,10 +1702,10 @@ var MenuToggle = ({ label, hint, onOpen, testID }) => {
       accessibilityHint: hint,
       accessibilityLabel: label,
       ringColor: theme.palette.primary["500"],
-      style: styles4.menuToggle,
+      style: styles5.menuToggle,
       testID,
       onPress: onOpen,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
     }
   );
 };
@@ -1558,14 +1731,14 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles4.scrim,
+        style: styles5.scrim,
         testID: scrimTestID,
         onPress: onClose
       }
@@ -1576,24 +1749,13 @@ var MobileDrawer = ({
         ref: panelRef,
         "aria-modal": true,
         role: "dialog",
-        style: [styles4.panel, { backgroundColor: theme.colors.surface }],
+        style: [styles5.panel, { backgroundColor: theme.colors.surface }],
         testID: drawerTestID,
         children: renderTextSlot(sidebar, { color: theme.colors.text })
       }
     )
   ] });
 };
-var RAIL_FULL_BREAKPOINT = uiLayout.LAYOUT_COLLAPSE_BREAKPOINT;
-var DEFAULT_COLLAPSED_RAIL_MAX = 1024;
-function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
-  if (!hasSidebar) return "none";
-  if (hasCollapsed) {
-    if (viewport >= range.max) return "full";
-    if (viewport >= range.min) return "collapsed";
-    return "drawer";
-  }
-  return viewport >= RAIL_FULL_BREAKPOINT ? "full" : "drawer";
-}
 function resolveContentMaxWidth(width, viewport) {
   if (width === "full") return "full";
   const wideMinViewport = width.wideMinViewport ?? Number.POSITIVE_INFINITY;
@@ -1605,7 +1767,7 @@ function useContentMaxWidth(width) {
   return resolveContentMaxWidth(width, viewport);
 }
 var DEFAULT_CONTENT_PADDING = 24;
-var styles5 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   root: { flex: 1 },
   // Auth-pending spinner: an opaque absolute overlay over the mounted shell, so
   // `children` (and any navigator they host) are never unmounted while the gate
@@ -1645,6 +1807,7 @@ var AppShell = ({
   const maxWidth = useContentMaxWidth(width);
   const body = useContentBody(state, children, testID);
   const { width: viewportWidth } = reactNative.useWindowDimensions();
+  const look = resolveShellBackdrop(theme, viewportWidth, contentPadding, testID);
   const railRange = collapsedRailRange ?? { min: RAIL_FULL_BREAKPOINT, max: DEFAULT_COLLAPSED_RAIL_MAX };
   const railMode = resolveRailMode({
     viewport: viewportWidth,
@@ -1666,18 +1829,21 @@ var AppShell = ({
   }, [isUnauthenticated, gate]);
   const gatePending = gate?.pending === true;
   if (isUnauthenticated) return null;
-  const columnStyle = maxWidth === "full" ? styles5.columnFull : [styles5.columnCapped, { maxWidth }];
-  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles5.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
-  const scroller = /* @__PURE__ */ jsxRuntime.jsx(
+  const columnStyle = maxWidth === "full" ? styles6.columnFull : [styles6.columnCapped, { maxWidth }];
+  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles6.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
+  const scroller = /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.ScrollView,
     {
-      contentContainerStyle: [styles5.scrollContent, { padding: contentPadding }],
-      style: styles5.scroll,
+      contentContainerStyle: [styles6.scrollContent, { padding: contentPadding }],
+      style: styles6.scroll,
       testID: `${testID}${APP_SHELL_SUFFIX.content}`,
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: columnStyle, children: body })
+      children: [
+        look.band,
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: columnStyle, children: body })
+      ]
     }
   );
-  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
+  const headerRegion = useDrawer ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles6.headerRow, look.chrome], testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       MenuToggle,
       {
@@ -1687,14 +1853,14 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: theme.colors.text }) });
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.headerFill, children: renderTextSlot(header, { color: look.chromeText }) })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: look.chrome, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: look.chromeText }) });
   const railRegion = railMode === "full" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: renderTextSlot(sidebar, { color: theme.colors.text }) }) : railMode === "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.collapsedSidebar}`, children: renderTextSlot(collapsedSidebar, { color: theme.colors.text }) }) : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles5.root, { backgroundColor: theme.colors.background }], testID, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles6.root, look.root], testID, children: [
     headerRegion,
-    nav !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navInnerStyle, children: renderTextSlot(nav, { color: theme.colors.text }) }) : renderTextSlot(nav, { color: theme.colors.text }) }) : null,
+    nav !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: look.chrome, testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navInnerStyle, children: renderTextSlot(nav, { color: look.chromeText }) }) : renderTextSlot(nav, { color: look.chromeText }) }) : null,
     banner !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: renderTextSlot(banner, { color: theme.colors.text }) }) : null,
-    railRegion !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.bodyRow, children: [
+    railRegion !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.bodyRow, children: [
       railRegion,
       scroller
     ] }) : scroller,
@@ -1711,7 +1877,7 @@ var AppShell = ({
     gatePending ? /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
-        style: [styles5.pendingOverlay, { backgroundColor: theme.colors.background }],
+        style: [styles6.pendingOverlay, { backgroundColor: theme.colors.background }],
         testID: `${testID}${APP_SHELL_SUFFIX.pending}`,
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary, size: "large" })
       }
@@ -2078,7 +2244,7 @@ var KEY_DOWN = "ArrowDown";
 var KEY_UP = "ArrowUp";
 var KEY_ENTER = "Enter";
 var KEY_ESCAPE = "Escape";
-var styles6 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   overlay: { ...reactNative.StyleSheet.absoluteFillObject, zIndex: OVERLAY_Z_INDEX, alignItems: "center" },
   scrim: { ...reactNative.StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR2 },
   panel: {
@@ -2107,14 +2273,14 @@ var PaletteRow = ({ item, selected, onChoose }) => {
       accessibilityLabel: item.label,
       accessibilityRole: "button",
       accessibilityState: { selected },
-      style: [styles6.row, selected ? { backgroundColor: colors.border } : void 0],
+      style: [styles7.row, selected ? { backgroundColor: colors.border } : void 0],
       testID: item.testID ?? item.key,
       onPress: () => onChoose(item),
       children: [
         typeof item.renderIcon === "function" ? item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.rowText, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.rowLabel, { color: colors.text }], children: item.label }),
-          item.hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.rowText, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.rowLabel, { color: colors.text }], children: item.label }),
+          item.hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
         ] })
       ]
     }
@@ -2154,14 +2320,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     [results, selected, choose, onClose]
   );
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.overlay, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles6.scrim,
+        style: styles7.scrim,
         testID: `${testID ?? "command-palette"}-scrim`,
         onPress: onClose
       }
@@ -2172,7 +2338,7 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
         "aria-modal": true,
         "aria-label": labels.regionLabel,
         role: "dialog",
-        style: [styles6.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles7.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
         testID: testID ?? "command-palette",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2182,14 +2348,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
               accessibilityLabel: labels.placeholder,
               placeholder: labels.placeholder,
               placeholderTextColor: colors.textSecondary,
-              style: [styles6.input, { color: colors.text, borderBottomColor: colors.border }],
+              style: [styles7.input, { color: colors.text, borderBottomColor: colors.border }],
               testID: `${testID ?? "command-palette"}-input`,
               value: query,
               onChangeText: setQuery,
               onKeyPress
             }
           ),
-          results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", style: styles6.list, children: results.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
+          results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { keyboardShouldPersistTaps: "handled", style: styles7.list, children: results.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
         ]
       }
     )
@@ -2220,11 +2386,202 @@ function accessibleNavItems(user, table, translate) {
   return roleRoutesToNavItems(authWeb.resolveAccessibleRoutes(user, table), translate);
 }
 
+// src/TabFeedback.ts
+var TabFeedback = /* @__PURE__ */ ((TabFeedback2) => {
+  TabFeedback2["Default"] = "default";
+  TabFeedback2["IndicatorPill"] = "indicator-pill";
+  TabFeedback2["DimSpring"] = "dim-spring";
+  TabFeedback2["SlidingBar"] = "sliding-bar";
+  TabFeedback2["IconLift"] = "icon-lift";
+  return TabFeedback2;
+})(TabFeedback || {});
+
+// src/feedback/tabPressFeedback.ts
+var FULL = 1;
+var PERCENT = 100;
+var PRESS_ICON_SCALE = 0.92;
+var DIM_OPACITY = 0.6;
+var ICON_LIFT_PX = -3;
+var SPRING_OVERSHOOT = 1.06;
+function tabIconTransform(kind, state) {
+  if (kind === "indicator-pill" /* IndicatorPill */ && state.pressed) return [{ scale: PRESS_ICON_SCALE }];
+  const lifted = state.active || state.pressed;
+  return kind === "icon-lift" /* IconLift */ && lifted ? [{ translateY: ICON_LIFT_PX }] : void 0;
+}
+function tabDuration(kind) {
+  if (kind === "default" /* Default */) return uiMotion.motionDurations.instant;
+  const slow = kind === "dim-spring" /* DimSpring */ || kind === "sliding-bar" /* SlidingBar */;
+  return slow ? uiMotion.motionDurations.slow : uiMotion.motionDurations.base;
+}
+function resolveTabFeedback(kind, state, reducedMotion) {
+  const pillScale = state.active ? FULL : 0;
+  return {
+    opacity: kind === "dim-spring" /* DimSpring */ && state.pressed ? DIM_OPACITY : FULL,
+    iconTransform: reducedMotion ? void 0 : tabIconTransform(kind, state),
+    pillScale: kind === "indicator-pill" /* IndicatorPill */ ? pillScale : null,
+    spring: kind === "dim-spring" /* DimSpring */ && !reducedMotion,
+    durationMs: reducedMotion ? uiMotion.motionDurations.instant : tabDuration(kind)
+  };
+}
+function slidingBarPosition(activeIndex, count) {
+  if (activeIndex < 0 || count <= 0) return null;
+  const share = PERCENT / count;
+  return { left: `${activeIndex * share}%`, width: `${share}%` };
+}
+function springSteps() {
+  return [
+    { toValue: SPRING_OVERSHOOT, durationMs: uiMotion.motionDurations.fast },
+    { toValue: FULL, durationMs: uiMotion.motionDurations.slow - uiMotion.motionDurations.fast }
+  ];
+}
+function useSettleSpring(active, enabled) {
+  const scale = React.useRef(new reactNative.Animated.Value(FULL)).current;
+  React.useEffect(() => {
+    if (!enabled || !active) return void 0;
+    const steps = springSteps().map(
+      (step) => reactNative.Animated.timing(scale, {
+        toValue: step.toValue,
+        duration: step.durationMs,
+        easing: uiMotion.motionEasings.standard,
+        useNativeDriver: false
+      })
+    );
+    const animation = reactNative.Animated.sequence(steps);
+    animation.start();
+    return () => animation.stop();
+  }, [active, enabled, scale]);
+  return scale;
+}
+var ICON_SIZE = 24;
+var PILL_WIDTH = 56;
+var PILL_HEIGHT = 32;
+var PILL_RADIUS = 16;
+var TAB_MIN_HEIGHT = 56;
+var LABEL_SIZE = 12;
+var LABEL_GAP = 2;
+var TAB_PADDING = 4;
+var styles8 = reactNative.StyleSheet.create({
+  tab: {
+    flex: 1,
+    minHeight: TAB_MIN_HEIGHT,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: TAB_PADDING,
+    rowGap: LABEL_GAP
+  },
+  iconWrap: { width: PILL_WIDTH, height: PILL_HEIGHT, alignItems: "center", justifyContent: "center" },
+  pill: { ...reactNative.StyleSheet.absoluteFillObject, borderRadius: PILL_RADIUS },
+  label: { fontSize: LABEL_SIZE, textAlign: "center" }
+});
+function ariaCurrentProps3(isActive) {
+  return isActive ? { "aria-current": "page" } : {};
+}
+var BottomTab = ({
+  item,
+  isActive,
+  kind,
+  colors,
+  reducedMotion,
+  navigateHint,
+  onPress
+}) => {
+  const [pressed, setPressed] = React.useState(false);
+  const feedback = resolveTabFeedback(kind, { active: isActive, pressed }, reducedMotion);
+  const scale = useSettleSpring(isActive, feedback.spring);
+  const color = isActive ? colors.active : colors.rest;
+  const motion = webTransition("transform", feedback.durationMs, reducedMotion);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      accessibilityHint: navigateHint(item.label),
+      accessibilityLabel: item.label,
+      accessibilityRole: "link",
+      accessibilityState: { selected: isActive },
+      style: [styles8.tab, { opacity: feedback.opacity }],
+      testID: item.testID ?? item.key,
+      onPress: () => onPress(item.route),
+      onPressIn: () => setPressed(true),
+      onPressOut: () => setPressed(false),
+      ...ariaCurrentProps3(isActive),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Animated.View, { style: [styles8.iconWrap, { transform: [{ scale }] }], children: [
+          feedback.pillScale === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              pointerEvents: "none",
+              style: [styles8.pill, { backgroundColor: colors.pill, transform: [{ scale: feedback.pillScale }] }, motion]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [{ transform: feedback.iconTransform }, motion], children: item.renderIcon?.(color, ICON_SIZE) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.label, { color }], children: item.label })
+      ]
+    }
+  );
+};
+var DEFAULT_TEST_ID = "bottom-tab-bar";
+var SLIDER_HEIGHT = 3;
+var styles9 = reactNative.StyleSheet.create({
+  bar: { flexDirection: "row", borderTopWidth: reactNative.StyleSheet.hairlineWidth },
+  slider: { position: "absolute", top: 0, height: SLIDER_HEIGHT }
+});
+var BottomTabBar = ({
+  items,
+  pathname,
+  onNavigate,
+  tabFeedback = "default" /* Default */,
+  navigateHint = (label) => label,
+  regionLabel = "",
+  containerStyle,
+  testID = DEFAULT_TEST_ID
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const reducedMotion = useReducedMotion();
+  const primary = theme.palette.primary["500"];
+  const activeRoute = resolveActiveRoute(items, pathname);
+  const activeIndex = items.findIndex((item) => item.route === activeRoute);
+  const bar = tabFeedback === "sliding-bar" /* SlidingBar */ ? slidingBarPosition(activeIndex, items.length) : null;
+  const barMs = resolveTabFeedback(tabFeedback, { active: true, pressed: false }, reducedMotion).durationMs;
+  const colors = { active: primary, rest: theme.colors.textSecondary, pill: theme.colors.surfaceElevated };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      "aria-label": regionLabel,
+      role: "navigation",
+      style: [styles9.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
+      testID,
+      children: [
+        bar === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            pointerEvents: "none",
+            style: [styles9.slider, { left: bar.left, width: bar.width, backgroundColor: primary }, webTransition("left", barMs, reducedMotion)]
+          }
+        ),
+        items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          BottomTab,
+          {
+            colors,
+            isActive: item.route === activeRoute,
+            item,
+            kind: tabFeedback,
+            navigateHint,
+            reducedMotion,
+            onPress: onNavigate
+          },
+          item.key
+        ))
+      ]
+    }
+  );
+};
+
 exports.ACTIVE_BORDER_RADIUS = ACTIVE_BORDER_RADIUS;
 exports.ACTIVE_TINT_OPACITY = ACTIVE_TINT_OPACITY;
 exports.APP_SHELL_SUFFIX = APP_SHELL_SUFFIX;
 exports.AppShell = AppShell;
 exports.BASE_INDENT = BASE_INDENT;
+exports.BottomTabBar = BottomTabBar;
 exports.CHEVRON_ICON_SIZE = CHEVRON_ICON_SIZE;
 exports.CollapsedRail = CollapsedRail;
 exports.CommandPalette = CommandPalette;
@@ -2240,6 +2597,7 @@ exports.NAV_TEST_IDS = NAV_TEST_IDS;
 exports.Nav = Nav;
 exports.NavBar = NavBar;
 exports.NavExpandableItem = NavExpandableItem;
+exports.NavHoverFeedback = NavHoverFeedback;
 exports.NavOverflowMenu = NavOverflowMenu;
 exports.NavShell = NavShell;
 exports.PillNav = PillNav;
@@ -2248,6 +2606,7 @@ exports.RAIL_FULL_BREAKPOINT = RAIL_FULL_BREAKPOINT;
 exports.Sidebar = Sidebar;
 exports.SidebarChevron = SidebarChevron;
 exports.SidebarSearch = SidebarSearch;
+exports.TabFeedback = TabFeedback;
 exports.Topbar = Topbar;
 exports.accessibleNavItems = accessibleNavItems;
 exports.collapsedRailStyles = collapsedRailStyles;