@dloizides/ui-nav 1.15.0 → 1.16.1

package/dist/index.mjs

@@ -1,13 +1,45 @@
-import { StyleSheet, Platform, TouchableOpacity, View, Text, useWindowDimensions, ActivityIndicator, ScrollView, Pressable, TextInput } from 'react-native';
+import React3, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { StyleSheet, Platform, Text, TouchableOpacity, View, TextInput, Pressable, useWindowDimensions, ActivityIndicator, ScrollView } from 'react-native';
 import { useUi, UiProvider } from '@dloizides/ui-feedback';
-import React2, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { Collapse } from '@dloizides/ui-motion';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { ModalDropdown } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes } from '@dloizides/auth-web';
 
 // src/Sidebar.tsx
 
+// src/sidebarFilter.ts
+function searchTokens(query) {
+  return query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+}
+function labelMatches(item, tokens) {
+  const label = item.label.toLowerCase();
+  return tokens.every((token) => label.includes(token));
+}
+function filterNavItems(items, query) {
+  const tokens = searchTokens(query);
+  if (tokens.length === 0) return [...items];
+  return filterByTokens(items, tokens);
+}
+function filterByTokens(items, tokens) {
+  const kept = [];
+  for (const item of items) {
+    const selfMatch = labelMatches(item, tokens);
+    const children = item.children ?? [];
+    if (selfMatch) {
+      kept.push(item);
+      continue;
+    }
+    if (children.length === 0) continue;
+    const prunedChildren = filterByTokens(children, tokens);
+    if (prunedChildren.length > 0) kept.push({ ...item, children: prunedChildren });
+  }
+  return kept;
+}
+function isFilterActive(query) {
+  return searchTokens(query).length > 0;
+}
+
 // src/isRouteActive.ts
 function isRouteActive(pathname, route) {
   if (route === "/") return pathname === "/";
@@ -15,6 +47,9 @@ function isRouteActive(pathname, route) {
 }
 var ACTIVE_BORDER_RADIUS = 4;
 var ACTIVE_ACCENT_WIDTH = 3;
+var NAV_ROW_RADIUS = 8;
+var ACTIVE_TINT_OPACITY = 0.14;
+var HOVER_TINT_OPACITY = 0.06;
 var NAV_LINK_GAP = 4;
 var navStyles = StyleSheet.create({
   // --- Sidebar ---
@@ -40,6 +75,12 @@ var navStyles = StyleSheet.create({
   sidebarSpacer: {
     flex: 1
   },
+  // Inline-search no-match text — sits where the nav list would, muted + padded.
+  sidebarEmpty: {
+    fontSize: 13,
+    paddingVertical: 10,
+    paddingHorizontal: 12
+  },
   // --- Topbar ---
   topbarContainer: {
     height: 64,
@@ -240,8 +281,12 @@ var collapsedRailStyles = StyleSheet.create({
 var expandableStyles = StyleSheet.create({
   // Every leaf reserves the accent-bar gutter (a TRANSPARENT left border of the
   // same width the active item colours in) so activation never shifts the row.
+  // `overflow: hidden` clips the rounded {@link tintOverlay} to the row's corners;
+  // `position: relative` anchors that absolutely-filled overlay to the row.
   childItem: {
-    borderRadius: 6,
+    position: "relative",
+    overflow: "hidden",
+    borderRadius: NAV_ROW_RADIUS,
     flexDirection: "row",
     alignItems: "center",
     paddingVertical: 9,
@@ -252,8 +297,24 @@ var expandableStyles = StyleSheet.create({
   childItemTextWithIcon: { fontSize: 14, marginLeft: 6 },
   chevron: { marginLeft: "auto" },
   childrenContainer: { overflow: "hidden", marginBottom: 4 },
+  // The hover/active brand wash: a rounded fill behind the row's icon + label,
+  // its opacity eased between 0 / hover / active. Colour + opacity are applied at
+  // render time (theme primary); this only positions and rounds it.
+  tintOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: NAV_ROW_RADIUS,
+    // `style.pointerEvents` (not the deprecated prop) so the overlay never
+    // intercepts the row's press/hover — RNW forwards this style key to the DOM.
+    pointerEvents: "none"
+  },
   header: {
-    borderRadius: 6,
+    position: "relative",
+    overflow: "hidden",
+    borderRadius: NAV_ROW_RADIUS,
     flexDirection: "row",
     alignItems: "center",
     paddingVertical: 8
@@ -280,6 +341,7 @@ var IS_WEB = Platform.OS === "web";
 var FOCUS_RING_WIDTH = 2;
 var FOCUS_RING_OFFSET = 2;
 var HOVER_TRANSITION_MS = 150;
+var TINT_TRANSITION_MS = 160;
 function focusRingStyle(focused, ringColor) {
   if (!IS_WEB || !focused) return void 0;
   const ring = {
@@ -290,24 +352,80 @@ function focusRingStyle(focused, ringColor) {
   };
   return ring;
 }
-function hoverTransitionStyle(reducedMotion) {
+function webTransition(properties, durationMs, reducedMotion) {
   if (!IS_WEB) return void 0;
   const transition = {
-    transitionProperty: "color, background-color",
-    transitionDuration: reducedMotion ? "0ms" : `${HOVER_TRANSITION_MS}ms`
+    transitionProperty: properties,
+    transitionDuration: reducedMotion ? "0ms" : `${durationMs}ms`
   };
   return transition;
 }
+function hoverTransitionStyle(reducedMotion) {
+  return webTransition("color, background-color", HOVER_TRANSITION_MS, reducedMotion);
+}
+function tintTransitionStyle(reducedMotion) {
+  return webTransition("opacity", TINT_TRANSITION_MS, reducedMotion);
+}
+function rotateTransitionStyle(reducedMotion) {
+  return webTransition("transform", TINT_TRANSITION_MS, reducedMotion);
+}
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function getReducedMotionQuery() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
+  return window.matchMedia(REDUCED_MOTION_QUERY);
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(() => getReducedMotionQuery()?.matches ?? false);
+  useEffect(() => {
+    const mql = getReducedMotionQuery();
+    if (mql === void 0 || mql.addEventListener === void 0) return void 0;
+    const onChange = () => setReduced(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => {
+      mql.removeEventListener?.("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+var CHEVRON_GLYPH = "\u203A";
+var EXPANDED_ROTATION = "90deg";
+var COLLAPSED_ROTATION = "0deg";
+var CHEVRON_FONT_WEIGHT = "700";
+var SidebarChevron = ({ expanded, color, size }) => {
+  const reducedMotion = useReducedMotion();
+  const style = {
+    color,
+    fontSize: size,
+    fontWeight: CHEVRON_FONT_WEIGHT,
+    transform: [{ rotate: expanded ? EXPANDED_ROTATION : COLLAPSED_ROTATION }]
+  };
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      style: [style, rotateTransitionStyle(reducedMotion)],
+      children: CHEVRON_GLYPH
+    }
+  );
+};
 function ariaCurrentProps(isActive) {
   return isActive ? { "aria-current": "page" } : {};
 }
 function ariaExpandedProps(expanded) {
   return { "aria-expanded": expanded };
 }
+function hoverHandlerProps(onIn, onOut) {
+  return IS_WEB ? { onHoverIn: onIn, onHoverOut: onOut } : {};
+}
 function hasActiveDescendant(item, pathname) {
   if (isRouteActive(pathname, item.route)) return true;
   return (item.children ?? []).some((child) => hasActiveDescendant(child, pathname));
 }
+function TintOverlay({ opacity, color }) {
+  const reducedMotion = useReducedMotion();
+  return /* @__PURE__ */ jsx(View, { style: [expandableStyles.tintOverlay, { backgroundColor: color, opacity }, tintTransitionStyle(reducedMotion)] });
+}
 var NavExpandableItem = ({
   item,
   pathname,
@@ -320,25 +438,25 @@ var NavExpandableItem = ({
 }) => {
   const [expanded, setExpanded] = useState(() => hasActiveDescendant(item, pathname));
   const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
   const { theme } = useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
   const toggle = useCallback(() => setExpanded((v) => !v), []);
+  const onHoverIn = useCallback(() => setHovered(true), []);
+  const onHoverOut = useCallback(() => setHovered(false), []);
   const indent = depth * BASE_INDENT;
   const hasChildren = Array.isArray(item.children) && item.children.length > 0;
   const isActive = isRouteActive(pathname, item.route);
   const isSectionHeader = hasChildren && depth === 0;
-  const activeItemStyle = useMemo(
-    () => ({
-      backgroundColor: colors.border,
-      borderRadius: ACTIVE_BORDER_RADIUS,
-      borderLeftWidth: ACTIVE_ACCENT_WIDTH,
-      borderLeftColor: primaryColor
-    }),
-    [colors.border, primaryColor]
+  const activeAccentStyle = useMemo(
+    () => ({ borderLeftWidth: ACTIVE_ACCENT_WIDTH, borderLeftColor: primaryColor }),
+    [primaryColor]
   );
   const paddingStyle = useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
   const headerPaddingStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);
+  const leafTintOpacity = isActive ? ACTIVE_TINT_OPACITY : hovered ? HOVER_TINT_OPACITY : 0;
+  const headerTintOpacity = hovered ? HOVER_TINT_OPACITY : 0;
   if (!hasChildren)
     return /* @__PURE__ */ jsxs(
       TouchableOpacity,
@@ -350,15 +468,17 @@ var NavExpandableItem = ({
         style: [
           expandableStyles.childItem,
           paddingStyle,
-          isActive ? activeItemStyle : void 0,
+          isActive ? activeAccentStyle : void 0,
           focusRingStyle(focused, primaryColor)
         ],
         testID: item.testID ?? item.key,
         onBlur: () => setFocused(false),
         onFocus: () => setFocused(true),
         onPress: () => onNavigate(item.route),
+        ...hoverHandlerProps(onHoverIn, onHoverOut),
         ...ariaCurrentProps(isActive),
         children: [
+          /* @__PURE__ */ jsx(TintOverlay, { color: primaryColor, opacity: leafTintOpacity }),
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.iconWrapper, children: item.renderIcon(colors.textSecondary, NAV_ICON_SIZE) }) : null,
           /* @__PURE__ */ jsx(
             Text,
@@ -373,6 +493,7 @@ var NavExpandableItem = ({
         ]
       }
     );
+  const chevronColor = colors.textSecondary;
   return /* @__PURE__ */ jsxs(View, { children: [
     /* @__PURE__ */ jsxs(
       TouchableOpacity,
@@ -391,8 +512,10 @@ var NavExpandableItem = ({
         onBlur: () => setFocused(false),
         onFocus: () => setFocused(true),
         onPress: toggle,
+        ...hoverHandlerProps(onHoverIn, onHoverOut),
         ...ariaExpandedProps(expanded),
         children: [
+          /* @__PURE__ */ jsx(TintOverlay, { color: primaryColor, opacity: headerTintOpacity }),
           typeof item.renderIcon === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.iconWrapper, children: item.renderIcon(isSectionHeader ? colors.textSecondary : colors.text, NAV_ICON_SIZE) }) : null,
           /* @__PURE__ */ jsx(
             Text,
@@ -404,7 +527,7 @@ var NavExpandableItem = ({
               children: item.label
             }
           ),
-          typeof renderChevron === "function" ? /* @__PURE__ */ jsx(View, { style: expandableStyles.chevron, children: renderChevron(expanded, colors.textSecondary, CHEVRON_ICON_SIZE) }) : null
+          /* @__PURE__ */ jsx(View, { style: expandableStyles.chevron, children: typeof renderChevron === "function" ? renderChevron(expanded, chevronColor, CHEVRON_ICON_SIZE) : /* @__PURE__ */ jsx(SidebarChevron, { color: chevronColor, expanded, size: CHEVRON_ICON_SIZE }) })
         ]
       }
     ),
@@ -424,13 +547,93 @@ var NavExpandableItem = ({
     )) }) })
   ] });
 };
+var FIELD_MIN_HEIGHT = 38;
+var CLEAR_GLYPH = "\u2715";
+var CLEAR_MIN_TARGET = 28;
+var styles = StyleSheet.create({
+  wrap: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingLeft: 12,
+    paddingRight: 6,
+    marginBottom: 12
+  },
+  input: {
+    flex: 1,
+    fontSize: 14,
+    paddingVertical: 8,
+    minHeight: FIELD_MIN_HEIGHT
+  },
+  clear: {
+    minWidth: CLEAR_MIN_TARGET,
+    minHeight: CLEAR_MIN_TARGET,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6
+  },
+  clearGlyph: { fontSize: 13, fontWeight: "700" }
+});
+var SidebarSearch = ({
+  value,
+  onChangeText,
+  onClear,
+  labels,
+  testID
+}) => {
+  const { theme } = useUi();
+  const colors = theme.colors;
+  const primary = theme.palette.primary["500"];
+  const [focused, setFocused] = useState(false);
+  const hasQuery = value.length > 0;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.wrap,
+        { backgroundColor: colors.surface, borderColor: focused ? primary : colors.border },
+        focusRingStyle(focused, primary)
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            accessibilityHint: labels.hint,
+            accessibilityLabel: labels.placeholder,
+            placeholder: labels.placeholder,
+            placeholderTextColor: colors.textSecondary,
+            style: [styles.input, { color: colors.text }],
+            testID,
+            value,
+            onBlur: () => setFocused(false),
+            onChangeText,
+            onFocus: () => setFocused(true)
+          }
+        ),
+        hasQuery ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityHint: labels.clearHint,
+            accessibilityLabel: labels.clearLabel,
+            accessibilityRole: "button",
+            style: styles.clear,
+            testID: `${testID}-clear`,
+            onPress: onClear,
+            children: /* @__PURE__ */ jsx(Text, { style: [styles.clearGlyph, { color: colors.textSecondary }], children: CLEAR_GLYPH })
+          }
+        ) : null
+      ]
+    }
+  );
+};
 function isBareText(node) {
   return typeof node === "string" || typeof node === "number";
 }
 function renderTextSlot(node, style) {
   if (node === void 0 || node === null) return node;
   if (isBareText(node)) return /* @__PURE__ */ jsx(Text, { style, children: node });
-  return React2.Children.map(
+  return React3.Children.map(
     node,
     (child) => isBareText(child) ? /* @__PURE__ */ jsx(Text, { style, children: child }) : child
   );
@@ -445,12 +648,30 @@ var Sidebar = ({
   expandHint = "",
   collapseHint = "",
   renderChevron,
+  enableInlineSearch = false,
+  search,
+  searchQuery,
+  onSearchChange,
   header,
   footer,
   containerStyle
 }) => {
   const { theme } = useUi();
   const colors = theme.colors;
+  const [internalQuery, setInternalQuery] = useState("");
+  const controlled = searchQuery !== void 0;
+  const query = controlled ? searchQuery : internalQuery;
+  const setQuery = useCallback(
+    (next) => {
+      if (!controlled) setInternalQuery(next);
+      onSearchChange?.(next);
+    },
+    [controlled, onSearchChange]
+  );
+  const clearQuery = useCallback(() => setQuery(""), [setQuery]);
+  const searchOn = enableInlineSearch && search !== void 0;
+  const visibleItems = searchOn ? filterNavItems(items, query) : items;
+  const showEmpty = searchOn && isFilterActive(query) && visibleItems.length === 0;
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -464,8 +685,18 @@ var Sidebar = ({
       ],
       children: [
         /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }),
+        searchOn && search !== void 0 ? /* @__PURE__ */ jsx(
+          SidebarSearch,
+          {
+            labels: search,
+            testID: "sidebar-search",
+            value: query,
+            onChangeText: setQuery,
+            onClear: clearQuery
+          }
+        ) : null,
         renderTextSlot(header, { color: colors.text }),
-        items.map((item) => /* @__PURE__ */ jsx(
+        showEmpty && search !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [navStyles.sidebarEmpty, { color: colors.textSecondary }], testID: "sidebar-search-empty", children: search.emptyText }) : visibleItems.map((item) => /* @__PURE__ */ jsx(
           NavExpandableItem,
           {
             collapseHint,
@@ -485,6 +716,12 @@ var Sidebar = ({
   );
 };
 
+// src/searchAffordance.ts
+var DEFAULT_SEARCH_BREAKPOINT = 768;
+function resolveSearchAffordance(viewport, breakpoint = DEFAULT_SEARCH_BREAKPOINT) {
+  return viewport >= breakpoint ? "inline" : "palette";
+}
+
 // src/constants.ts
 var NAV_TEST_IDS = {
   /** displayName line in the rich account header (tappable when `onAccount` set). */
@@ -820,24 +1057,6 @@ function useNavOverflow(itemCount, gap) {
   );
   return { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth };
 }
-var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-function getReducedMotionQuery() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
-  return window.matchMedia(REDUCED_MOTION_QUERY);
-}
-function useReducedMotion() {
-  const [reduced, setReduced] = useState(() => getReducedMotionQuery()?.matches ?? false);
-  useEffect(() => {
-    const mql = getReducedMotionQuery();
-    if (mql === void 0 || mql.addEventListener === void 0) return void 0;
-    const onChange = () => setReduced(mql.matches);
-    mql.addEventListener("change", onChange);
-    return () => {
-      mql.removeEventListener?.("change", onChange);
-    };
-  }, []);
-  return reduced;
-}
 var LINKS_REGION_ID = "navbar-links-region";
 var DEFAULT_COLLAPSE_BELOW = 760;
 var MENU_GLYPH = "\u2630";
@@ -938,7 +1157,7 @@ var NavBarInner = ({
             }
           );
           if (collapsed) {
-            return /* @__PURE__ */ jsx(View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsx(React2.Fragment, { children: renderLink(item) }, item.key)) });
+            return /* @__PURE__ */ jsx(View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsx(React3.Fragment, { children: renderLink(item) }, item.key)) });
           }
           const visibleItems = items.slice(0, visibleCount);
           const overflowItems = items.slice(visibleCount);
@@ -1004,7 +1223,7 @@ var CARD_BORDER_WIDTH = 1;
 var CARD_TITLE_FONT_SIZE = 16;
 var CARD_MESSAGE_FONT_SIZE = 14;
 var CARD_TITLE_MARGIN_BOTTOM = 8;
-var styles = StyleSheet.create({
+var styles2 = StyleSheet.create({
   centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
   card: {
     padding: CARD_PADDING,
@@ -1021,9 +1240,9 @@ function MessageCard({
 }) {
   const { theme } = useUi();
   const colors = theme.colors;
-  return /* @__PURE__ */ jsxs(View, { style: [styles.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
-    /* @__PURE__ */ jsx(Text, { style: [styles.cardTitle, { color: accentColor }], children: message.titleText }),
-    /* @__PURE__ */ jsx(Text, { style: [styles.cardMessage, { color: colors.textSecondary }], children: message.messageText })
+  return /* @__PURE__ */ jsxs(View, { style: [styles2.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles2.cardTitle, { color: accentColor }], children: message.titleText }),
+    /* @__PURE__ */ jsx(Text, { style: [styles2.cardMessage, { color: colors.textSecondary }], children: message.messageText })
   ] });
 }
 function useContentBody(state, children, testID) {
@@ -1035,7 +1254,7 @@ function useContentBody(state, children, testID) {
   if (state?.error)
     return /* @__PURE__ */ jsx(MessageCard, { accentColor: errorColor, message: state.error, testID: `${testID}${APP_SHELL_SUFFIX.error}` });
   if (state?.loading === true)
-    return /* @__PURE__ */ jsx(View, { style: styles.centerFill, testID: `${testID}${APP_SHELL_SUFFIX.loading}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
+    return /* @__PURE__ */ jsx(View, { style: styles2.centerFill, testID: `${testID}${APP_SHELL_SUFFIX.loading}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
   return children;
 }
 var SCRIM_COLOR = "rgba(0, 0, 0, 0.5)";
@@ -1059,7 +1278,7 @@ var DEFAULT_DRAWER_LABELS = {
   closeLabel: "Close menu",
   closeHint: "Close the navigation menu"
 };
-var styles2 = StyleSheet.create({
+var styles3 = StyleSheet.create({
   overlay: { ...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
@@ -1094,10 +1313,10 @@ var MenuToggle = ({ label, hint, onOpen, testID }) => {
       accessibilityHint: hint,
       accessibilityLabel: label,
       ringColor: theme.palette.primary["500"],
-      style: styles2.menuToggle,
+      style: styles3.menuToggle,
       testID,
       onPress: onOpen,
-      children: /* @__PURE__ */ jsx(Text, { style: [styles2.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
+      children: /* @__PURE__ */ jsx(Text, { style: [styles3.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
     }
   );
 };
@@ -1123,14 +1342,14 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxs(View, { style: styles2.overlay, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles3.overlay, children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles2.scrim,
+        style: styles3.scrim,
         testID: scrimTestID,
         onPress: onClose
       }
@@ -1141,7 +1360,7 @@ var MobileDrawer = ({
         ref: panelRef,
         "aria-modal": true,
         role: "dialog",
-        style: [styles2.panel, { backgroundColor: theme.colors.surface }],
+        style: [styles3.panel, { backgroundColor: theme.colors.surface }],
         testID: drawerTestID,
         children: renderTextSlot(sidebar, { color: theme.colors.text })
       }
@@ -1172,7 +1391,7 @@ function useContentMaxWidth(width) {
   return resolveContentMaxWidth(width, viewport);
 }
 var DEFAULT_CONTENT_PADDING = 24;
-var styles3 = StyleSheet.create({
+var styles4 = StyleSheet.create({
   root: { flex: 1 },
   centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
   scroll: { flex: 1 },
@@ -1229,20 +1448,20 @@ var AppShell = ({
     if (isUnauthenticated && gate !== void 0) gate.onRedirect();
   }, [isUnauthenticated, gate]);
   if (gate?.pending === true)
-    return /* @__PURE__ */ jsx(View, { style: [styles3.root, styles3.centerFill, { backgroundColor: theme.colors.background }], testID: `${testID}${APP_SHELL_SUFFIX.pending}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
+    return /* @__PURE__ */ jsx(View, { style: [styles4.root, styles4.centerFill, { backgroundColor: theme.colors.background }], testID: `${testID}${APP_SHELL_SUFFIX.pending}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
   if (isUnauthenticated) return null;
-  const columnStyle = maxWidth === "full" ? styles3.columnFull : [styles3.columnCapped, { maxWidth }];
-  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles3.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
+  const columnStyle = maxWidth === "full" ? styles4.columnFull : [styles4.columnCapped, { maxWidth }];
+  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles4.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
   const scroller = /* @__PURE__ */ jsx(
     ScrollView,
     {
-      contentContainerStyle: [styles3.scrollContent, { padding: contentPadding }],
-      style: styles3.scroll,
+      contentContainerStyle: [styles4.scrollContent, { padding: contentPadding }],
+      style: styles4.scroll,
       testID: `${testID}${APP_SHELL_SUFFIX.content}`,
       children: /* @__PURE__ */ jsx(View, { style: columnStyle, children: body })
     }
   );
-  const headerRegion = useDrawer ? /* @__PURE__ */ jsxs(View, { style: styles3.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
+  const headerRegion = useDrawer ? /* @__PURE__ */ jsxs(View, { style: styles4.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
     /* @__PURE__ */ jsx(
       MenuToggle,
       {
@@ -1252,14 +1471,14 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsx(View, { style: styles3.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
+    /* @__PURE__ */ jsx(View, { style: styles4.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
   ] }) : /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: theme.colors.text }) });
   const railRegion = railMode === "full" ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: renderTextSlot(sidebar, { color: theme.colors.text }) }) : railMode === "collapsed" ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.collapsedSidebar}`, children: renderTextSlot(collapsedSidebar, { color: theme.colors.text }) }) : null;
-  return /* @__PURE__ */ jsxs(View, { style: [styles3.root, { backgroundColor: theme.colors.background }], testID, children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles4.root, { backgroundColor: theme.colors.background }], testID, children: [
     headerRegion,
     nav !== void 0 ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsx(View, { style: navInnerStyle, children: renderTextSlot(nav, { color: theme.colors.text }) }) : renderTextSlot(nav, { color: theme.colors.text }) }) : null,
     banner !== void 0 ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: renderTextSlot(banner, { color: theme.colors.text }) }) : null,
-    railRegion !== null ? /* @__PURE__ */ jsxs(View, { style: styles3.bodyRow, children: [
+    railRegion !== null ? /* @__PURE__ */ jsxs(View, { style: styles4.bodyRow, children: [
       railRegion,
       scroller
     ] }) : scroller,
@@ -1376,6 +1595,7 @@ var NavShell = ({
     {
       collapseHint: sideRail.collapseHint,
       containerStyle: sideRail.containerStyle,
+      enableInlineSearch: sideRail.enableInlineSearch,
       expandHint: sideRail.expandHint,
       footer: sideRail.footer,
       header: sideRail.header,
@@ -1384,8 +1604,11 @@ var NavShell = ({
       pathname,
       regionLabel,
       renderChevron: sideRail.renderChevron,
+      search: sideRail.search,
+      searchQuery: sideRail.searchQuery,
       title: sideRail.title,
-      onNavigate
+      onNavigate,
+      onSearchChange: sideRail.onSearchChange
     }
   ) : void 0;
   const collapsedCfg = showSideRail ? sideRail?.collapsed : void 0;
@@ -1553,7 +1776,7 @@ var KEY_DOWN = "ArrowDown";
 var KEY_UP = "ArrowUp";
 var KEY_ENTER = "Enter";
 var KEY_ESCAPE = "Escape";
-var styles4 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   overlay: { ...StyleSheet.absoluteFillObject, zIndex: OVERLAY_Z_INDEX, alignItems: "center" },
   scrim: { ...StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR2 },
   panel: {
@@ -1582,14 +1805,14 @@ var PaletteRow = ({ item, selected, onChoose }) => {
       accessibilityLabel: item.label,
       accessibilityRole: "button",
       accessibilityState: { selected },
-      style: [styles4.row, selected ? { backgroundColor: colors.border } : void 0],
+      style: [styles5.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__ */ jsxs(View, { style: styles4.rowText, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles4.rowLabel, { color: colors.text }], children: item.label }),
-          item.hint ? /* @__PURE__ */ jsx(Text, { style: [styles4.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
+        /* @__PURE__ */ jsxs(View, { style: styles5.rowText, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles5.rowLabel, { color: colors.text }], children: item.label }),
+          item.hint ? /* @__PURE__ */ jsx(Text, { style: [styles5.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
         ] })
       ]
     }
@@ -1629,14 +1852,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     [results, selected, choose, onClose]
   );
   if (!open) return null;
-  return /* @__PURE__ */ jsxs(View, { style: styles4.overlay, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles5.overlay, children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles4.scrim,
+        style: styles5.scrim,
         testID: `${testID ?? "command-palette"}-scrim`,
         onPress: onClose
       }
@@ -1647,7 +1870,7 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
         "aria-modal": true,
         "aria-label": labels.regionLabel,
         role: "dialog",
-        style: [styles4.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles5.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
         testID: testID ?? "command-palette",
         children: [
           /* @__PURE__ */ jsx(
@@ -1657,21 +1880,21 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
               accessibilityLabel: labels.placeholder,
               placeholder: labels.placeholder,
               placeholderTextColor: colors.textSecondary,
-              style: [styles4.input, { color: colors.text, borderBottomColor: colors.border }],
+              style: [styles5.input, { color: colors.text, borderBottomColor: colors.border }],
               testID: `${testID ?? "command-palette"}-input`,
               value: query,
               onChangeText: setQuery,
               onKeyPress
             }
           ),
-          results.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles4.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", style: styles4.list, children: results.map((item, index) => /* @__PURE__ */ jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
+          results.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles5.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", style: styles5.list, children: results.map((item, index) => /* @__PURE__ */ jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
         ]
       }
     )
   ] });
 };
 var MIN_TARGET = 36;
-var styles5 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   trigger: {
     flexDirection: "row",
     alignItems: "center",
@@ -1696,7 +1919,7 @@ var CommandPaletteTrigger = ({
   const { theme } = useUi();
   const colors = theme.colors;
   const primary = theme.palette.primary["500"];
-  const [focused, setFocused] = React2.useState(false);
+  const [focused, setFocused] = React3.useState(false);
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
@@ -1704,7 +1927,7 @@ var CommandPaletteTrigger = ({
       accessibilityLabel: label,
       accessibilityRole: "button",
       style: [
-        styles5.trigger,
+        styles6.trigger,
         { backgroundColor: colors.surface, borderColor: colors.border },
         focusRingStyle(focused, primary)
       ],
@@ -1713,8 +1936,8 @@ var CommandPaletteTrigger = ({
       onFocus: () => setFocused(true),
       onPress,
       children: [
-        /* @__PURE__ */ jsx(Text, { style: [styles5.label, { color: colors.textSecondary }], children: label }),
-        /* @__PURE__ */ jsx(View, { style: [styles5.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsx(Text, { style: [styles5.badgeText, { color: colors.textSecondary }], children: shortcut }) })
+        /* @__PURE__ */ jsx(Text, { style: [styles6.label, { color: colors.textSecondary }], children: label }),
+        /* @__PURE__ */ jsx(View, { style: [styles6.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsx(Text, { style: [styles6.badgeText, { color: colors.textSecondary }], children: shortcut }) })
       ]
     }
   );
@@ -1744,6 +1967,6 @@ function accessibleNavItems(user, table, translate) {
   return roleRoutesToNavItems(resolveAccessibleRoutes(user, table), translate);
 }
 
-export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, CommandPalette, CommandPaletteTrigger, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, NavExpandableItem, NavOverflowMenu, NavShell, PillNav, RAIL_FULL_BREAKPOINT, Sidebar, Topbar, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };
+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, RAIL_FULL_BREAKPOINT, Sidebar, SidebarChevron, SidebarSearch, Topbar, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map