@dloizides/ui-nav 1.36.0 → 1.37.0

package/dist/index.mjs

@@ -22,7 +22,6 @@ var NAV_LINK_GAP = 4;
 var navStyles = StyleSheet.create({
   // --- Sidebar ---
   sidebarContainer: {
-    width: 220,
     paddingTop: 24,
     paddingHorizontal: 12,
     borderRightWidth: 1,
@@ -831,6 +830,20 @@ var SidebarSearch = ({
     }
   );
 };
+
+// src/types.ts
+var SIDEBAR_WIDTH_PX = {
+  default: 220,
+  sm: 240,
+  md: 264,
+  lg: 288
+};
+var NAV_BRAND_DEFAULTS = {
+  brandPlacement: "sidebar",
+  sidebarWidth: "default",
+  drawerHeader: "none",
+  drawerWidth: "default"
+};
 function isBareText(node) {
   return typeof node === "string" || typeof node === "number";
 }
@@ -848,6 +861,7 @@ var Sidebar = ({
   pathname,
   onNavigate,
   title,
+  width: railWidth = "default",
   regionLabel,
   navigateHint = (label) => label,
   expandHint = "",
@@ -895,11 +909,12 @@ var Sidebar = ({
       role: "navigation",
       style: [
         navStyles.sidebarContainer,
+        { width: SIDEBAR_WIDTH_PX[railWidth] },
         { backgroundColor: colors.surface, borderRightColor: colors.border },
         containerStyle
       ],
       children: [
-        typeof title === "string" ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }) : /* @__PURE__ */ jsx(View, { style: navStyles.sidebarBrand, children: title }),
+        title === null ? null : typeof title === "string" ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }) : /* @__PURE__ */ jsx(View, { style: navStyles.sidebarBrand, children: title }),
         showInlineSearch && search !== void 0 ? /* @__PURE__ */ jsx(
           SidebarSearch,
           {
@@ -1829,6 +1844,33 @@ function useContentBody(state, children, testID) {
     ) : null
   ] });
 }
+var CLOSE_GLYPH = "\u2715";
+var CLOSE_GLYPH_FONT_SIZE = 18;
+var BAR_PADDING = 12;
+var styles8 = StyleSheet.create({
+  bar: { flexDirection: "row", alignItems: "center", paddingLeft: BAR_PADDING, borderBottomWidth: 1 },
+  brand: { flex: 1 },
+  close: { minWidth: MIN_TOUCH_TARGET, minHeight: MIN_TOUCH_TARGET, alignItems: "center", justifyContent: "center" },
+  glyph: { fontSize: CLOSE_GLYPH_FONT_SIZE, fontWeight: "700" }
+});
+var DrawerHeaderBar = ({ brand, closeLabel, closeHint, onClose, testID }) => {
+  const { theme } = useUi();
+  return /* @__PURE__ */ jsxs(View, { style: [styles8.bar, { borderBottomColor: theme.colors.border }], testID, children: [
+    /* @__PURE__ */ jsx(View, { style: styles8.brand, children: brand }),
+    /* @__PURE__ */ jsx(
+      FocusableTouchable,
+      {
+        accessibilityHint: closeHint,
+        accessibilityLabel: closeLabel,
+        ringColor: theme.palette.primary["500"],
+        style: styles8.close,
+        testID: `${testID}-close`,
+        onPress: onClose,
+        children: /* @__PURE__ */ jsx(Text, { style: [styles8.glyph, { color: theme.colors.text }], children: CLOSE_GLYPH })
+      }
+    )
+  ] });
+};
 var SCRIM_COLOR = "rgba(0, 0, 0, 0.5)";
 var MENU_GLYPH2 = "\u2630";
 var MENU_GLYPH_FONT_SIZE = 20;
@@ -1849,7 +1891,7 @@ var DEFAULT_DRAWER_LABELS = {
   closeLabel: "Close menu",
   closeHint: "Close the navigation menu"
 };
-var styles8 = StyleSheet.create({
+var styles9 = 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
@@ -1867,6 +1909,8 @@ var styles8 = StyleSheet.create({
   // so on react-native-web it — and the nav leaves inside it — sit above the scrim
   // and receive presses instead of the scrim swallowing them.
   panel: { position: "absolute", top: 0, bottom: 0, left: 0, width: DRAWER_WIDTH, zIndex: PANEL_Z_INDEX },
+  panelFull: { width: "100%" },
+  panelBody: { flex: 1 },
   menuToggle: {
     minWidth: MIN_TOUCH_TARGET,
     minHeight: MIN_TOUCH_TARGET,
@@ -1884,10 +1928,10 @@ var MenuToggle = ({ label, hint, onOpen, testID }) => {
       accessibilityHint: hint,
       accessibilityLabel: label,
       ringColor: theme.palette.primary["500"],
-      style: styles8.menuToggle,
+      style: styles9.menuToggle,
       testID,
       onPress: onOpen,
-      children: /* @__PURE__ */ jsx(Text, { style: [styles8.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
+      children: /* @__PURE__ */ jsx(Text, { style: [styles9.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
     }
   );
 };
@@ -1896,10 +1940,14 @@ var MobileDrawer = ({
   labels,
   onClose,
   drawerTestID,
-  scrimTestID
+  scrimTestID,
+  header,
+  width = "default"
 }) => {
   const { theme } = useUi();
   const panelRef = useRef(null);
+  const isFull = width === "full";
+  const showHeaderBar = header !== void 0 || isFull;
   useEffect(() => {
     const node = panelRef.current;
     if (node === null || typeof node.addEventListener !== "function") return void 0;
@@ -1913,27 +1961,39 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxs(View, { style: styles8.overlay, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(View, { style: styles9.overlay, children: [
+    isFull ? null : /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles8.scrim,
+        style: styles9.scrim,
         testID: scrimTestID,
         onPress: onClose
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       View,
       {
         ref: panelRef,
         "aria-modal": true,
         role: "dialog",
-        style: [styles8.panel, { backgroundColor: theme.colors.surface }],
+        style: [styles9.panel, isFull ? styles9.panelFull : null, { backgroundColor: theme.colors.surface }],
         testID: drawerTestID,
-        children: /* @__PURE__ */ jsx(NavAccordionContext.Provider, { value: true, children: renderTextSlot(sidebar, { color: theme.colors.text }) })
+        children: [
+          showHeaderBar ? /* @__PURE__ */ jsx(
+            DrawerHeaderBar,
+            {
+              brand: header,
+              closeHint: labels.closeHint,
+              closeLabel: labels.closeLabel,
+              testID: `${drawerTestID}-header`,
+              onClose
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(NavAccordionContext.Provider, { value: true, children: showHeaderBar ? /* @__PURE__ */ jsx(View, { style: styles9.panelBody, children: renderTextSlot(sidebar, { color: theme.colors.text }) }) : renderTextSlot(sidebar, { color: theme.colors.text }) })
+        ]
       }
     )
   ] });
@@ -1949,7 +2009,7 @@ function useContentMaxWidth(width) {
   return resolveContentMaxWidth(width, viewport);
 }
 var DEFAULT_CONTENT_PADDING = 24;
-var styles9 = StyleSheet.create({
+var styles10 = 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
@@ -2011,13 +2071,13 @@ var AppShell = ({
   }, [isUnauthenticated, gate]);
   const gatePending = gate?.pending === true;
   if (isUnauthenticated) return null;
-  const columnStyle = maxWidth === "full" ? styles9.columnFull : [styles9.columnCapped, { maxWidth }];
-  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles9.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
+  const columnStyle = maxWidth === "full" ? styles10.columnFull : [styles10.columnCapped, { maxWidth }];
+  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles10.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
   const scroller = /* @__PURE__ */ jsxs(
     ScrollView,
     {
-      contentContainerStyle: [styles9.scrollContent, { padding: contentPadding }],
-      style: styles9.scroll,
+      contentContainerStyle: [styles10.scrollContent, { padding: contentPadding }],
+      style: styles10.scroll,
       testID: `${testID}${APP_SHELL_SUFFIX.content}`,
       children: [
         look.band,
@@ -2025,7 +2085,7 @@ var AppShell = ({
       ]
     }
   );
-  const headerRegion = useDrawer ? /* @__PURE__ */ jsxs(View, { style: [styles9.headerRow, look.chrome], testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
+  const headerRegion = useDrawer ? /* @__PURE__ */ jsxs(View, { style: [styles10.headerRow, look.chrome], testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
     /* @__PURE__ */ jsx(
       MenuToggle,
       {
@@ -2035,14 +2095,14 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsx(View, { style: styles9.headerFill, children: renderTextSlot(header, { color: look.chromeText }) })
+    /* @__PURE__ */ jsx(View, { style: styles10.headerFill, children: renderTextSlot(header, { color: look.chromeText }) })
   ] }) : /* @__PURE__ */ jsx(View, { style: look.chrome, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: look.chromeText }) });
   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: [styles9.root, look.root], testID, children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles10.root, look.root], testID, children: [
     headerRegion,
     nav !== void 0 ? /* @__PURE__ */ jsx(View, { style: look.chrome, testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsx(View, { style: navInnerStyle, children: renderTextSlot(nav, { color: look.chromeText }) }) : renderTextSlot(nav, { color: look.chromeText }) }) : 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: styles9.bodyRow, children: [
+    railRegion !== null ? /* @__PURE__ */ jsxs(View, { style: styles10.bodyRow, children: [
       railRegion,
       scroller
     ] }) : scroller,
@@ -2051,15 +2111,17 @@ var AppShell = ({
       {
         drawerTestID: `${testID}${APP_SHELL_SUFFIX.drawer}`,
         labels: drawerLabels,
+        header: mobileMenu?.header,
         scrimTestID: `${testID}${APP_SHELL_SUFFIX.scrim}`,
-        sidebar,
+        sidebar: mobileMenu?.sidebar ?? sidebar,
+        width: mobileMenu?.width,
         onClose: closeDrawer
       }
     ) : null,
     gatePending ? /* @__PURE__ */ jsx(
       View,
       {
-        style: [styles9.pendingOverlay, { backgroundColor: theme.colors.background }],
+        style: [styles10.pendingOverlay, { backgroundColor: theme.colors.background }],
         testID: `${testID}${APP_SHELL_SUFFIX.pending}`,
         children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" })
       }
@@ -2120,6 +2182,45 @@ var CollapsedRail = ({
     }
   );
 };
+function renderShellSidebar({ sideRail, nav, width, showBrand }) {
+  const brandSlot = sideRail.brand ?? sideRail.title;
+  return /* @__PURE__ */ jsx(
+    Sidebar,
+    {
+      collapseHint: sideRail.collapseHint,
+      containerStyle: sideRail.containerStyle,
+      enableInlineSearch: sideRail.enableInlineSearch,
+      expandHint: sideRail.expandHint,
+      footer: sideRail.footer,
+      header: sideRail.header,
+      items: sideRail.items,
+      navigateHint: nav.navigateHint,
+      paletteTrigger: sideRail.paletteTrigger,
+      pathname: nav.pathname,
+      regionLabel: nav.regionLabel,
+      renderChevron: sideRail.renderChevron,
+      search: sideRail.search,
+      searchQuery: sideRail.searchQuery,
+      title: showBrand ? brandSlot : null,
+      width,
+      onNavigate: nav.onNavigate,
+      onSearchChange: sideRail.onSearchChange
+    }
+  );
+}
+var styles11 = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center" },
+  brand: { justifyContent: "center", paddingHorizontal: 12 },
+  fill: { flex: 1 }
+});
+var TopbarBrandRow = ({ brand, brandWidth, testID, children }) => {
+  const { width } = useWindowDimensions();
+  if (width < RAIL_FULL_BREAKPOINT) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs(View, { style: styles11.row, testID, children: [
+    /* @__PURE__ */ jsx(View, { style: [styles11.brand, brandWidth !== void 0 ? { width: brandWidth } : null], testID: `${testID}-brand`, children: brand }),
+    /* @__PURE__ */ jsx(View, { style: styles11.fill, children })
+  ] });
+};
 function wantsTopBar(layout, hasHeader) {
   return layout === "top" || layout === "both" || hasHeader;
 }
@@ -2138,6 +2239,11 @@ var NavShell = ({
   children,
   collapsedSidebar: collapsedSidebarProp,
   collapsedRailRange: collapsedRailRangeProp,
+  brandPlacement = NAV_BRAND_DEFAULTS.brandPlacement,
+  sidebarWidth = NAV_BRAND_DEFAULTS.sidebarWidth,
+  drawerHeader = NAV_BRAND_DEFAULTS.drawerHeader,
+  drawerWidth = NAV_BRAND_DEFAULTS.drawerWidth,
+  mobileMenu,
   ...shellProps
 }) => {
   const showTopBar = wantsTopBar(layout, header !== void 0);
@@ -2163,28 +2269,13 @@ var NavShell = ({
       onNavigate
     }
   ) : null;
-  const sidebarNode = showSideRail && sideRail !== void 0 ? /* @__PURE__ */ jsx(
-    Sidebar,
-    {
-      collapseHint: sideRail.collapseHint,
-      containerStyle: sideRail.containerStyle,
-      enableInlineSearch: sideRail.enableInlineSearch,
-      expandHint: sideRail.expandHint,
-      footer: sideRail.footer,
-      header: sideRail.header,
-      items: sideRail.items,
-      navigateHint,
-      paletteTrigger: sideRail.paletteTrigger,
-      pathname,
-      regionLabel,
-      renderChevron: sideRail.renderChevron,
-      search: sideRail.search,
-      searchQuery: sideRail.searchQuery,
-      title: sideRail.brand ?? sideRail.title,
-      onNavigate,
-      onSearchChange: sideRail.onSearchChange
-    }
-  ) : void 0;
+  const nav = { pathname, onNavigate, regionLabel, navigateHint };
+  const rail = showSideRail ? sideRail : void 0;
+  const brandInBar = brandPlacement === "topbar" && rail?.brand !== void 0;
+  const brandInDrawer = drawerHeader === "brand" ? rail?.brand : void 0;
+  const sidebarNode = rail === void 0 ? void 0 : renderShellSidebar({ sideRail: rail, nav, width: sidebarWidth, showBrand: !brandInBar });
+  const drawerSidebar = rail !== void 0 && brandInDrawer !== void 0 && !brandInBar ? renderShellSidebar({ sideRail: rail, nav, width: sidebarWidth, showBrand: false }) : void 0;
+  const shellHeader = brandInBar ? /* @__PURE__ */ jsx(TopbarBrandRow, { brand: rail?.brand, brandWidth: SIDEBAR_WIDTH_PX[sidebarWidth], testID: `${shellProps.testID}-topbar-brand-row`, children: headerNode }) : headerNode;
   const collapsedCfg = showSideRail ? sideRail?.collapsed : void 0;
   const collapsedNode = collapsedCfg !== void 0 && sideRail !== void 0 ? /* @__PURE__ */ jsx(
     CollapsedRail,
@@ -2205,7 +2296,8 @@ var NavShell = ({
       ...shellProps,
       collapsedRailRange: collapsedRange,
       collapsedSidebar: collapsedNode,
-      header: headerNode,
+      header: shellHeader,
+      mobileMenu: { ...mobileMenu, header: brandInDrawer, width: drawerWidth, sidebar: drawerSidebar },
       sidebar: sidebarNode,
       children
     }
@@ -2428,7 +2520,7 @@ var KEY_DOWN = "ArrowDown";
 var KEY_UP = "ArrowUp";
 var KEY_ENTER = "Enter";
 var KEY_ESCAPE = "Escape";
-var styles10 = StyleSheet.create({
+var styles12 = StyleSheet.create({
   overlay: { ...StyleSheet.absoluteFillObject, zIndex: OVERLAY_Z_INDEX, alignItems: "center" },
   scrim: { ...StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR2 },
   panel: {
@@ -2457,14 +2549,14 @@ var PaletteRow = ({ item, selected, onChoose }) => {
       accessibilityLabel: item.label,
       accessibilityRole: "button",
       accessibilityState: { selected },
-      style: [styles10.row, selected ? { backgroundColor: colors.border } : void 0],
+      style: [styles12.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: styles10.rowText, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles10.rowLabel, { color: colors.text }], children: item.label }),
-          item.hint ? /* @__PURE__ */ jsx(Text, { style: [styles10.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
+        /* @__PURE__ */ jsxs(View, { style: styles12.rowText, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles12.rowLabel, { color: colors.text }], children: item.label }),
+          item.hint ? /* @__PURE__ */ jsx(Text, { style: [styles12.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
         ] })
       ]
     }
@@ -2504,14 +2596,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     [results, selected, choose, onClose]
   );
   if (!open) return null;
-  return /* @__PURE__ */ jsxs(View, { style: styles10.overlay, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles12.overlay, children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles10.scrim,
+        style: styles12.scrim,
         testID: `${testID ?? "command-palette"}-scrim`,
         onPress: onClose
       }
@@ -2522,7 +2614,7 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
         "aria-modal": true,
         "aria-label": labels.regionLabel,
         role: "dialog",
-        style: [styles10.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles12.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
         testID: testID ?? "command-palette",
         children: [
           /* @__PURE__ */ jsx(
@@ -2532,14 +2624,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
               accessibilityLabel: labels.placeholder,
               placeholder: labels.placeholder,
               placeholderTextColor: colors.textSecondary,
-              style: [styles10.input, { color: colors.text, borderBottomColor: colors.border }],
+              style: [styles12.input, { color: colors.text, borderBottomColor: colors.border }],
               testID: `${testID ?? "command-palette"}-input`,
               value: query,
               onChangeText: setQuery,
               onKeyPress
             }
           ),
-          results.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles10.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", style: styles10.list, children: results.map((item, index) => /* @__PURE__ */ jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
+          results.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles12.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", style: styles12.list, children: results.map((item, index) => /* @__PURE__ */ jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
         ]
       }
     )
@@ -2644,7 +2736,7 @@ var TAB_MIN_HEIGHT = 56;
 var LABEL_SIZE = 12;
 var LABEL_GAP = 2;
 var TAB_PADDING = 4;
-var styles11 = StyleSheet.create({
+var styles13 = StyleSheet.create({
   tab: {
     flex: 1,
     minHeight: TAB_MIN_HEIGHT,
@@ -2681,31 +2773,31 @@ var BottomTab = ({
       accessibilityLabel: item.label,
       accessibilityRole: "link",
       accessibilityState: { selected: isActive },
-      style: [styles11.tab, { opacity: feedback.opacity }],
+      style: [styles13.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: [styles11.iconWrap, { transform: [{ scale }] }], children: [
+        /* @__PURE__ */ jsxs(Animated.View, { style: [styles13.iconWrap, { transform: [{ scale }] }], children: [
           feedback.pillScale === null ? null : /* @__PURE__ */ jsx(
             View,
             {
               pointerEvents: "none",
-              style: [styles11.pill, { backgroundColor: colors.pill, transform: [{ scale: feedback.pillScale }] }, motion]
+              style: [styles13.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: [styles11.label, { color }], children: item.label })
+        /* @__PURE__ */ jsx(Text, { style: [styles13.label, { color }], children: item.label })
       ]
     }
   );
 };
 var DEFAULT_TEST_ID = "bottom-tab-bar";
 var SLIDER_HEIGHT = 3;
-var styles12 = StyleSheet.create({
+var styles14 = StyleSheet.create({
   bar: { flexDirection: "row", borderTopWidth: StyleSheet.hairlineWidth },
   slider: { position: "absolute", top: 0, height: SLIDER_HEIGHT }
 });
@@ -2732,14 +2824,14 @@ var BottomTabBar = ({
     {
       "aria-label": regionLabel,
       role: "navigation",
-      style: [styles12.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
+      style: [styles14.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
       testID,
       children: [
         bar === null ? null : /* @__PURE__ */ jsx(
           View,
           {
             pointerEvents: "none",
-            style: [styles12.slider, { left: bar.left, width: bar.width, backgroundColor: primary }, webTransition("left", barMs, reducedMotion)]
+            style: [styles14.slider, { left: bar.left, width: bar.width, backgroundColor: primary }, webTransition("left", barMs, reducedMotion)]
           }
         ),
         items.map((item) => /* @__PURE__ */ jsx(
@@ -2760,6 +2852,6 @@ var BottomTabBar = ({
   );
 };
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, BottomTabBar, BrandHomeLink, BrandMark, 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 };
+export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, BottomTabBar, BrandHomeLink, BrandMark, CHEVRON_ICON_SIZE, CollapsedRail, CommandPalette, CommandPaletteTrigger, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, HOVER_TINT_OPACITY, NAV_BRAND_DEFAULTS, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, NavExpandableItem, NavHoverFeedback, NavOverflowMenu, NavShell, PillNav, PillNavVariant, RAIL_FULL_BREAKPOINT, SIDEBAR_WIDTH_PX, 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