@dloizides/ui-nav 1.26.1 → 1.27.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.27.0
+
+- INVOICE-5 "Edit invoices before sending, shared background and menu hover" (AC-UI-2, AC-UI-6): `NavBar` takes `hoverFeedback` (`NavHoverFeedback`: `default`, `tint-pill`, `underline`, `lift`, `sliding-highlight`); the new phone `BottomTabBar` takes `tabFeedback` (`TabFeedback`: `default`, `indicator-pill`, `dim-spring`, `sliding-bar`, `icon-lift`). Timings come from the `@dloizides/ui-motion` tokens (<= 300 ms); reduced motion keeps every option still. `default` keeps today's look, so existing apps do not change.
+
+## 1.26.2
+
+- KEFI-LAUNCH-1 "Do every open Kefi task before the public launch": a long account name no longer overlaps the `Topbar` center slot at 360 px. The center slot keeps its content width (`flexShrink: 0`); only the account name gives way. The overlap dates from 1.24.0, when the slot was added.
+
 ## 1.26.1
 
 - KEFI-LAUNCH-1 "Do every open Kefi task before the public launch": the `Topbar` left slot no longer wraps beside a long account name at 360 px. The left slot keeps its width (`flexShrink: 0`) and the account name truncates to one line.

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import { UiTheme } from '@dloizides/ui-feedback';
 import { DropdownVariant } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes, RoleRouteTable, RoleRoute } from '@dloizides/auth-web';
@@ -363,6 +363,14 @@ interface TopbarProps {
 }
 declare const Topbar: ({ left, center, language, notificationSlot, user, account, logout, containerStyle, }: TopbarProps) => React.ReactElement;
 
+declare enum NavHoverFeedback {
+    Default = "default",
+    TintPill = "tint-pill",
+    Underline = "underline",
+    Lift = "lift",
+    SlidingHighlight = "sliding-highlight"
+}
+
 /**
  * NavBar — the config-driven HORIZONTAL top navigation bar. It is the top-bar
  * counterpart to `Sidebar`: it renders the SAME caller-supplied `NavItem[]`
@@ -445,6 +453,7 @@ interface NavBarProps {
      * theme. Style-only: every colour still flows through the theme — no per-app fork.
      */
     barTheme?: UiTheme;
+    hoverFeedback?: NavHoverFeedback;
 }
 /**
  * `NavBar` — the horizontal top bar. When `barTheme` is supplied it re-provisions
@@ -1598,4 +1607,25 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, PillNavVariant, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
+declare enum TabFeedback {
+    Default = "default",
+    IndicatorPill = "indicator-pill",
+    DimSpring = "dim-spring",
+    SlidingBar = "sliding-bar",
+    IconLift = "icon-lift"
+}
+
+interface BottomTabBarProps {
+    items: NavItem[];
+    pathname: string;
+    onNavigate: (route: string) => void;
+    tabFeedback?: TabFeedback;
+    navigateHint?: (label: string) => string;
+    regionLabel?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/** Phone tab bar; `tabFeedback` picks the press feedback, `Default` adds no motion. */
+declare const BottomTabBar: ({ items, pathname, onNavigate, tabFeedback, navigateHint, regionLabel, containerStyle, testID, }: BottomTabBarProps) => React.ReactElement;
+
+export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, BottomTabBar, type BottomTabBarProps, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, NavHoverFeedback, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, PillNavVariant, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, TabFeedback, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import { UiTheme } from '@dloizides/ui-feedback';
 import { DropdownVariant } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes, RoleRouteTable, RoleRoute } from '@dloizides/auth-web';
@@ -363,6 +363,14 @@ interface TopbarProps {
 }
 declare const Topbar: ({ left, center, language, notificationSlot, user, account, logout, containerStyle, }: TopbarProps) => React.ReactElement;
 
+declare enum NavHoverFeedback {
+    Default = "default",
+    TintPill = "tint-pill",
+    Underline = "underline",
+    Lift = "lift",
+    SlidingHighlight = "sliding-highlight"
+}
+
 /**
  * NavBar — the config-driven HORIZONTAL top navigation bar. It is the top-bar
  * counterpart to `Sidebar`: it renders the SAME caller-supplied `NavItem[]`
@@ -445,6 +453,7 @@ interface NavBarProps {
      * theme. Style-only: every colour still flows through the theme — no per-app fork.
      */
     barTheme?: UiTheme;
+    hoverFeedback?: NavHoverFeedback;
 }
 /**
  * `NavBar` — the horizontal top bar. When `barTheme` is supplied it re-provisions
@@ -1598,4 +1607,25 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, PillNavVariant, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
+declare enum TabFeedback {
+    Default = "default",
+    IndicatorPill = "indicator-pill",
+    DimSpring = "dim-spring",
+    SlidingBar = "sliding-bar",
+    IconLift = "icon-lift"
+}
+
+interface BottomTabBarProps {
+    items: NavItem[];
+    pathname: string;
+    onNavigate: (route: string) => void;
+    tabFeedback?: TabFeedback;
+    navigateHint?: (label: string) => string;
+    regionLabel?: string;
+    containerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/** Phone tab bar; `tabFeedback` picks the press feedback, `Default` adds no motion. */
+declare const BottomTabBar: ({ items, pathname, onNavigate, tabFeedback, navigateHint, regionLabel, containerStyle, testID, }: BottomTabBarProps) => React.ReactElement;
+
+export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, BottomTabBar, type BottomTabBarProps, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, NavHoverFeedback, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, PillNavVariant, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, TabFeedback, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.js

@@ -71,7 +71,7 @@ var navStyles = reactNative.StyleSheet.create({
     justifyContent: "space-between"
   },
   topbarLeft: { flexGrow: 1, flexShrink: 0 },
-  topbarCenter: { flexShrink: 1, minWidth: 0, flexDirection: "row", alignItems: "center", marginHorizontal: 8 },
+  topbarCenter: { flexShrink: 0, minWidth: 0, flexDirection: "row", alignItems: "center", marginHorizontal: 8 },
   topbarRight: { flexDirection: "row", alignItems: "center", flexShrink: 1, minWidth: 0 },
   topbarRowItem: {
     marginHorizontal: 8,
@@ -1057,10 +1057,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 +1147,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 +1168,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 +1363,8 @@ var NavBarInner = ({
   overflowLabel = "More",
   overflowHint = "",
   containerStyle,
-  contentMaxWidth
+  contentMaxWidth,
+  hoverFeedback = "default" /* Default */
 }) => {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
@@ -1278,6 +1398,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 +1453,11 @@ var NavBarInner = ({
               colors: linkColors,
               iconSize: NAV_ICON_SIZE,
               isActive: item.route === activeRoute,
+              hoverFeedback,
               item,
               navigateHint,
               reducedMotion,
+              onHoverChange: slide.hover,
               onPress: handlePress
             }
           );
@@ -1355,11 +1483,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
@@ -2220,11 +2352,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 styles7 = 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: [styles7.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: [styles7.iconWrap, { transform: [{ scale }] }], children: [
+          feedback.pillScale === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              pointerEvents: "none",
+              style: [styles7.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: [styles7.label, { color }], children: item.label })
+      ]
+    }
+  );
+};
+var DEFAULT_TEST_ID = "bottom-tab-bar";
+var SLIDER_HEIGHT = 3;
+var styles8 = 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: [styles8.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
+      testID,
+      children: [
+        bar === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            pointerEvents: "none",
+            style: [styles8.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 +2563,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 +2572,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;