@dloizides/ui-nav 1.26.1 → 1.27.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
-import { StyleSheet, Platform, Pressable, Text, View, TextInput, useWindowDimensions, ScrollView, ActivityIndicator } from 'react-native';
+import { StyleSheet, Platform, Pressable, Text, View, TextInput, useWindowDimensions, ScrollView, ActivityIndicator, Animated } from 'react-native';
 import { useUi, UiProvider } from '@dloizides/ui-feedback';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Collapse } from '@dloizides/ui-motion';
+import { Collapse, motionDurations, motionEasings } from '@dloizides/ui-motion';
 import { LAYOUT_COLLAPSE_BREAKPOINT, ModalDropdown, DropdownVariant, SelectedMarker } from '@dloizides/ui-layout';
 import { Z_INDEX } from '@dloizides/design-tokens';
 import { resolveAccessibleRoutes } from '@dloizides/auth-web';
@@ -65,7 +65,7 @@ var navStyles = 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,
@@ -1051,10 +1051,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 */ ? motionDurations.fast : 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 ? 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,
@@ -1063,13 +1141,20 @@ var NavBarLink = ({
   reducedMotion,
   colors,
   navigateHint,
-  onPress
+  onPress,
+  hoverFeedback = "default" /* Default */,
+  onHoverChange
 }) => {
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = 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__ */ jsxs(
     Pressable,
     {
@@ -1077,27 +1162,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__ */ jsx(View, { style: navBarStyles.linkIcon, children: item.renderIcon(textColor, iconSize) }) : null,
+        underline === null ? null : /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: underline }),
         /* @__PURE__ */ jsx(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] = useState({});
+  const [hoveredKey, setHoveredKey] = useState(null);
+  const measure = useCallback(
+    (key, layout) => {
+      if (enabled) setLayouts((prev) => ({ ...prev, [key]: layout }));
+    },
+    [enabled]
+  );
+  const hover = 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, motionDurations.base, reducedMotion)
+  ];
+  return { style, measure, hover };
+}
 var TEXT_ON_PRIMARY3 = "#ffffff";
 var NO_ACTIVE_ROUTE = "";
 var OVERFLOW_MENU_MIN_WIDTH = 200;
@@ -1238,7 +1357,8 @@ var NavBarInner = ({
   overflowLabel = "More",
   overflowHint = "",
   containerStyle,
-  contentMaxWidth
+  contentMaxWidth,
+  hoverFeedback = "default" /* Default */
 }) => {
   const { theme } = useUi();
   const colors = theme.colors;
@@ -1272,6 +1392,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 = useMemo(
     () => ({
       rest: colors.textSecondary,
@@ -1321,9 +1447,11 @@ var NavBarInner = ({
               colors: linkColors,
               iconSize: NAV_ICON_SIZE,
               isActive: item.route === activeRoute,
+              hoverFeedback,
               item,
               navigateHint,
               reducedMotion,
+              onHoverChange: slide.hover,
               onPress: handlePress
             }
           );
@@ -1349,11 +1477,15 @@ var NavBarInner = ({
               testID: NAV_TEST_IDS.navBarLinks,
               onLayout: (event) => setAvailableWidth(event.nativeEvent.layout.width),
               children: [
+                slide.style === null ? null : /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: slide.style }),
                 visibleItems.map((item, index) => /* @__PURE__ */ jsx(
                   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
@@ -2214,6 +2346,196 @@ function accessibleNavItems(user, table, translate) {
   return roleRoutesToNavItems(resolveAccessibleRoutes(user, table), translate);
 }
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, CommandPalette, CommandPaletteTrigger, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, NavExpandableItem, NavOverflowMenu, NavShell, PillNav, PillNavVariant, RAIL_FULL_BREAKPOINT, Sidebar, SidebarChevron, SidebarSearch, Topbar, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
+// 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 motionDurations.instant;
+  const slow = kind === "dim-spring" /* DimSpring */ || kind === "sliding-bar" /* SlidingBar */;
+  return slow ? motionDurations.slow : 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 ? 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: motionDurations.fast },
+    { toValue: FULL, durationMs: motionDurations.slow - motionDurations.fast }
+  ];
+}
+function useSettleSpring(active, enabled) {
+  const scale = useRef(new Animated.Value(FULL)).current;
+  useEffect(() => {
+    if (!enabled || !active) return void 0;
+    const steps = springSteps().map(
+      (step) => Animated.timing(scale, {
+        toValue: step.toValue,
+        duration: step.durationMs,
+        easing: motionEasings.standard,
+        useNativeDriver: false
+      })
+    );
+    const animation = 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 = 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: { ...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] = 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__ */ jsxs(
+    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__ */ jsxs(Animated.View, { style: [styles7.iconWrap, { transform: [{ scale }] }], children: [
+          feedback.pillScale === null ? null : /* @__PURE__ */ jsx(
+            View,
+            {
+              pointerEvents: "none",
+              style: [styles7.pill, { backgroundColor: colors.pill, transform: [{ scale: feedback.pillScale }] }, motion]
+            }
+          ),
+          /* @__PURE__ */ jsx(View, { style: [{ transform: feedback.iconTransform }, motion], children: item.renderIcon?.(color, ICON_SIZE) })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { style: [styles7.label, { color }], children: item.label })
+      ]
+    }
+  );
+};
+var DEFAULT_TEST_ID = "bottom-tab-bar";
+var SLIDER_HEIGHT = 3;
+var styles8 = StyleSheet.create({
+  bar: { flexDirection: "row", borderTopWidth: 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 } = 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__ */ jsxs(
+    View,
+    {
+      "aria-label": regionLabel,
+      role: "navigation",
+      style: [styles8.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
+      testID,
+      children: [
+        bar === null ? null : /* @__PURE__ */ jsx(
+          View,
+          {
+            pointerEvents: "none",
+            style: [styles8.slider, { left: bar.left, width: bar.width, backgroundColor: primary }, webTransition("left", barMs, reducedMotion)]
+          }
+        ),
+        items.map((item) => /* @__PURE__ */ jsx(
+          BottomTab,
+          {
+            colors,
+            isActive: item.route === activeRoute,
+            item,
+            kind: tabFeedback,
+            navigateHint,
+            reducedMotion,
+            onPress: onNavigate
+          },
+          item.key
+        ))
+      ]
+    }
+  );
+};
+
+export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, BottomTabBar, CHEVRON_ICON_SIZE, CollapsedRail, CommandPalette, CommandPaletteTrigger, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, NavExpandableItem, NavHoverFeedback, NavOverflowMenu, NavShell, PillNav, PillNavVariant, RAIL_FULL_BREAKPOINT, Sidebar, SidebarChevron, SidebarSearch, TabFeedback, Topbar, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolvePillMenuLabel, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map