@dloizides/ui-nav 1.29.0 → 1.30.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
-import { StyleSheet, Platform, Pressable, Text, View, TextInput, useWindowDimensions, ScrollView, ActivityIndicator, Animated } from 'react-native';
+import { StyleSheet, Platform, Pressable, Text, View, TextInput, useWindowDimensions, Image, ScrollView, ActivityIndicator, Animated } from 'react-native';
 import { useUi, UiProvider } from '@dloizides/ui-feedback';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Collapse, motionDurations, motionEasings } from '@dloizides/ui-motion';
@@ -878,7 +878,9 @@ var NAV_TEST_IDS = {
   pillNavMenu: "pill-nav-menu",
   /** the optional middle slot of `Topbar` (rendered only when `center` is passed). */
   topbarCenter: "topbar-center",
-  brandHome: "nav-brand-home"
+  brandHome: "nav-brand-home",
+  brandMarkIcon: "nav-brand-mark-icon",
+  brandMarkName: "nav-brand-mark-name"
 };
 var APP_SHELL_SUFFIX = {
   content: "-content",
@@ -1566,6 +1568,44 @@ var BrandHomeLink = ({ route, label, onNavigate, children }) => {
     }
   );
 };
+var DEFAULT_ICON_SIZE = 32;
+var NAME_FONT_SIZE = 16;
+var NAME_GAP = 8;
+var styles4 = StyleSheet.create({
+  name: { flexShrink: 1, fontSize: NAME_FONT_SIZE, fontWeight: "700" },
+  row: { alignItems: "center", flexDirection: "row", gap: NAME_GAP }
+});
+var BrandMark = ({
+  source,
+  name,
+  route,
+  label,
+  onNavigate,
+  size = DEFAULT_ICON_SIZE,
+  iconOnly = false
+}) => {
+  const { theme } = useUi();
+  return /* @__PURE__ */ jsx(BrandHomeLink, { label, route, onNavigate, children: /* @__PURE__ */ jsxs(View, { style: styles4.row, children: [
+    /* @__PURE__ */ jsx(
+      Image,
+      {
+        accessibilityElementsHidden: true,
+        source,
+        style: { height: size, width: size },
+        testID: NAV_TEST_IDS.brandMarkIcon
+      }
+    ),
+    iconOnly ? null : /* @__PURE__ */ jsx(
+      Text,
+      {
+        numberOfLines: 1,
+        style: [styles4.name, { color: theme.colors.text }],
+        testID: NAV_TEST_IDS.brandMarkName,
+        children: name
+      }
+    )
+  ] }) });
+};
 var Nav = (props) => {
   if (props.orientation === "vertical") {
     return /* @__PURE__ */ jsx(Sidebar, { ...props });
@@ -1583,7 +1623,7 @@ function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
   }
   return viewport >= RAIL_FULL_BREAKPOINT ? "full" : "drawer";
 }
-var styles4 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   band: { left: 0, position: "absolute", right: 0, top: 0 }
 });
 function readBackdrop(theme) {
@@ -1606,7 +1646,7 @@ function resolveShellBackdrop(theme, viewport, contentPadding, testID) {
     View,
     {
       pointerEvents: "none",
-      style: [styles4.band, { backgroundColor: band.color, height: contentPadding + overlap }],
+      style: [styles5.band, { backgroundColor: band.color, height: contentPadding + overlap }],
       testID: `${testID}${APP_SHELL_SUFFIX.band}`
     }
   );
@@ -1618,7 +1658,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 styles5 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   // Loading is a TRANSITIONAL state: the spinner is an absolute overlay ON TOP of
   // stably-mounted children, never a replacement for them. Replacing children here
   // would unmount whatever they host (e.g. a navigator), and on remount React
@@ -1650,9 +1690,9 @@ function MessageCard({
 }) {
   const { theme } = useUi();
   const colors = theme.colors;
-  return /* @__PURE__ */ jsxs(View, { style: [styles5.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
-    /* @__PURE__ */ jsx(Text, { style: [styles5.cardTitle, { color: accentColor }], children: message.titleText }),
-    /* @__PURE__ */ jsx(Text, { style: [styles5.cardMessage, { color: colors.textSecondary }], children: message.messageText })
+  return /* @__PURE__ */ jsxs(View, { style: [styles6.card, { backgroundColor: colors.surface, borderColor: accentColor }], testID, children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles6.cardTitle, { color: accentColor }], children: message.titleText }),
+    /* @__PURE__ */ jsx(Text, { style: [styles6.cardMessage, { color: colors.textSecondary }], children: message.messageText })
   ] });
 }
 function useContentBody(state, children, testID) {
@@ -1664,12 +1704,12 @@ function useContentBody(state, children, testID) {
     return /* @__PURE__ */ jsx(MessageCard, { accentColor: errorColor, message: state.forbidden, testID: `${testID}${APP_SHELL_SUFFIX.forbidden}` });
   if (state.error)
     return /* @__PURE__ */ jsx(MessageCard, { accentColor: errorColor, message: state.error, testID: `${testID}${APP_SHELL_SUFFIX.error}` });
-  return /* @__PURE__ */ jsxs(View, { style: styles5.loadingHost, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles6.loadingHost, children: [
     children,
     state.loading === true ? /* @__PURE__ */ jsx(
       View,
       {
-        style: [styles5.loadingOverlay, { backgroundColor: theme.colors.background }],
+        style: [styles6.loadingOverlay, { backgroundColor: theme.colors.background }],
         testID: `${testID}${APP_SHELL_SUFFIX.loading}`,
         children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" })
       }
@@ -1696,7 +1736,7 @@ var DEFAULT_DRAWER_LABELS = {
   closeLabel: "Close menu",
   closeHint: "Close the navigation menu"
 };
-var styles6 = StyleSheet.create({
+var styles7 = 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
@@ -1731,10 +1771,10 @@ var MenuToggle = ({ label, hint, onOpen, testID }) => {
       accessibilityHint: hint,
       accessibilityLabel: label,
       ringColor: theme.palette.primary["500"],
-      style: styles6.menuToggle,
+      style: styles7.menuToggle,
       testID,
       onPress: onOpen,
-      children: /* @__PURE__ */ jsx(Text, { style: [styles6.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
+      children: /* @__PURE__ */ jsx(Text, { style: [styles7.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
     }
   );
 };
@@ -1760,14 +1800,14 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxs(View, { style: styles6.overlay, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles7.overlay, children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles6.scrim,
+        style: styles7.scrim,
         testID: scrimTestID,
         onPress: onClose
       }
@@ -1778,7 +1818,7 @@ var MobileDrawer = ({
         ref: panelRef,
         "aria-modal": true,
         role: "dialog",
-        style: [styles6.panel, { backgroundColor: theme.colors.surface }],
+        style: [styles7.panel, { backgroundColor: theme.colors.surface }],
         testID: drawerTestID,
         children: renderTextSlot(sidebar, { color: theme.colors.text })
       }
@@ -1796,7 +1836,7 @@ function useContentMaxWidth(width) {
   return resolveContentMaxWidth(width, viewport);
 }
 var DEFAULT_CONTENT_PADDING = 24;
-var styles7 = StyleSheet.create({
+var styles8 = 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
@@ -1858,13 +1898,13 @@ var AppShell = ({
   }, [isUnauthenticated, gate]);
   const gatePending = gate?.pending === true;
   if (isUnauthenticated) return null;
-  const columnStyle = maxWidth === "full" ? styles7.columnFull : [styles7.columnCapped, { maxWidth }];
-  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles7.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
+  const columnStyle = maxWidth === "full" ? styles8.columnFull : [styles8.columnCapped, { maxWidth }];
+  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles8.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
   const scroller = /* @__PURE__ */ jsxs(
     ScrollView,
     {
-      contentContainerStyle: [styles7.scrollContent, { padding: contentPadding }],
-      style: styles7.scroll,
+      contentContainerStyle: [styles8.scrollContent, { padding: contentPadding }],
+      style: styles8.scroll,
       testID: `${testID}${APP_SHELL_SUFFIX.content}`,
       children: [
         look.band,
@@ -1872,7 +1912,7 @@ var AppShell = ({
       ]
     }
   );
-  const headerRegion = useDrawer ? /* @__PURE__ */ jsxs(View, { style: [styles7.headerRow, look.chrome], testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
+  const headerRegion = useDrawer ? /* @__PURE__ */ jsxs(View, { style: [styles8.headerRow, look.chrome], testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
     /* @__PURE__ */ jsx(
       MenuToggle,
       {
@@ -1882,14 +1922,14 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsx(View, { style: styles7.headerFill, children: renderTextSlot(header, { color: look.chromeText }) })
+    /* @__PURE__ */ jsx(View, { style: styles8.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: [styles7.root, look.root], testID, children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles8.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: styles7.bodyRow, children: [
+    railRegion !== null ? /* @__PURE__ */ jsxs(View, { style: styles8.bodyRow, children: [
       railRegion,
       scroller
     ] }) : scroller,
@@ -1906,7 +1946,7 @@ var AppShell = ({
     gatePending ? /* @__PURE__ */ jsx(
       View,
       {
-        style: [styles7.pendingOverlay, { backgroundColor: theme.colors.background }],
+        style: [styles8.pendingOverlay, { backgroundColor: theme.colors.background }],
         testID: `${testID}${APP_SHELL_SUFFIX.pending}`,
         children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" })
       }
@@ -2273,7 +2313,7 @@ var KEY_DOWN = "ArrowDown";
 var KEY_UP = "ArrowUp";
 var KEY_ENTER = "Enter";
 var KEY_ESCAPE = "Escape";
-var styles8 = StyleSheet.create({
+var styles9 = StyleSheet.create({
   overlay: { ...StyleSheet.absoluteFillObject, zIndex: OVERLAY_Z_INDEX, alignItems: "center" },
   scrim: { ...StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR2 },
   panel: {
@@ -2302,14 +2342,14 @@ var PaletteRow = ({ item, selected, onChoose }) => {
       accessibilityLabel: item.label,
       accessibilityRole: "button",
       accessibilityState: { selected },
-      style: [styles8.row, selected ? { backgroundColor: colors.border } : void 0],
+      style: [styles9.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: styles8.rowText, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles8.rowLabel, { color: colors.text }], children: item.label }),
-          item.hint ? /* @__PURE__ */ jsx(Text, { style: [styles8.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
+        /* @__PURE__ */ jsxs(View, { style: styles9.rowText, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles9.rowLabel, { color: colors.text }], children: item.label }),
+          item.hint ? /* @__PURE__ */ jsx(Text, { style: [styles9.rowHint, { color: colors.textSecondary }], children: item.hint }) : null
         ] })
       ]
     }
@@ -2349,14 +2389,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     [results, selected, choose, onClose]
   );
   if (!open) return null;
-  return /* @__PURE__ */ jsxs(View, { style: styles8.overlay, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles9.overlay, children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityHint: labels.closeHint,
         accessibilityLabel: labels.closeLabel,
         accessibilityRole: "button",
-        style: styles8.scrim,
+        style: styles9.scrim,
         testID: `${testID ?? "command-palette"}-scrim`,
         onPress: onClose
       }
@@ -2367,7 +2407,7 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
         "aria-modal": true,
         "aria-label": labels.regionLabel,
         role: "dialog",
-        style: [styles8.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles9.panel, { backgroundColor: colors.surface, borderColor: colors.border }],
         testID: testID ?? "command-palette",
         children: [
           /* @__PURE__ */ jsx(
@@ -2377,14 +2417,14 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
               accessibilityLabel: labels.placeholder,
               placeholder: labels.placeholder,
               placeholderTextColor: colors.textSecondary,
-              style: [styles8.input, { color: colors.text, borderBottomColor: colors.border }],
+              style: [styles9.input, { color: colors.text, borderBottomColor: colors.border }],
               testID: `${testID ?? "command-palette"}-input`,
               value: query,
               onChangeText: setQuery,
               onKeyPress
             }
           ),
-          results.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles8.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", style: styles8.list, children: results.map((item, index) => /* @__PURE__ */ jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
+          results.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles9.empty, { color: colors.textSecondary }], children: labels.emptyText }) : /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", style: styles9.list, children: results.map((item, index) => /* @__PURE__ */ jsx(PaletteRow, { item, selected: index === selected, onChoose: choose }, item.key)) })
         ]
       }
     )
@@ -2489,7 +2529,7 @@ var TAB_MIN_HEIGHT = 56;
 var LABEL_SIZE = 12;
 var LABEL_GAP = 2;
 var TAB_PADDING = 4;
-var styles9 = StyleSheet.create({
+var styles10 = StyleSheet.create({
   tab: {
     flex: 1,
     minHeight: TAB_MIN_HEIGHT,
@@ -2526,31 +2566,31 @@ var BottomTab = ({
       accessibilityLabel: item.label,
       accessibilityRole: "link",
       accessibilityState: { selected: isActive },
-      style: [styles9.tab, { opacity: feedback.opacity }],
+      style: [styles10.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: [styles9.iconWrap, { transform: [{ scale }] }], children: [
+        /* @__PURE__ */ jsxs(Animated.View, { style: [styles10.iconWrap, { transform: [{ scale }] }], children: [
           feedback.pillScale === null ? null : /* @__PURE__ */ jsx(
             View,
             {
               pointerEvents: "none",
-              style: [styles9.pill, { backgroundColor: colors.pill, transform: [{ scale: feedback.pillScale }] }, motion]
+              style: [styles10.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: [styles9.label, { color }], children: item.label })
+        /* @__PURE__ */ jsx(Text, { style: [styles10.label, { color }], children: item.label })
       ]
     }
   );
 };
 var DEFAULT_TEST_ID = "bottom-tab-bar";
 var SLIDER_HEIGHT = 3;
-var styles10 = StyleSheet.create({
+var styles11 = StyleSheet.create({
   bar: { flexDirection: "row", borderTopWidth: StyleSheet.hairlineWidth },
   slider: { position: "absolute", top: 0, height: SLIDER_HEIGHT }
 });
@@ -2577,14 +2617,14 @@ var BottomTabBar = ({
     {
       "aria-label": regionLabel,
       role: "navigation",
-      style: [styles10.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
+      style: [styles11.bar, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }, containerStyle],
       testID,
       children: [
         bar === null ? null : /* @__PURE__ */ jsx(
           View,
           {
             pointerEvents: "none",
-            style: [styles10.slider, { left: bar.left, width: bar.width, backgroundColor: primary }, webTransition("left", barMs, reducedMotion)]
+            style: [styles11.slider, { left: bar.left, width: bar.width, backgroundColor: primary }, webTransition("left", barMs, reducedMotion)]
           }
         ),
         items.map((item) => /* @__PURE__ */ jsx(
@@ -2605,6 +2645,6 @@ var BottomTabBar = ({
   );
 };
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, BottomTabBar, BrandHomeLink, 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_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