@dloizides/ui-nav 1.30.0 → 1.32.0

package/dist/index.d.mts

@@ -155,7 +155,7 @@ interface SidebarProps {
     /** Navigation callback — receives a `NavItem.route`. */
     onNavigate: (route: string) => void;
     /** Localized menu title (heading). */
-    title: string;
+    title: React.ReactNode;
     /** Localized accessibility label for the navigation landmark. */
     regionLabel: string;
     /** a11y hint for a leaf item, given its label. Defaults to the label. */
@@ -711,6 +711,13 @@ interface AppShellProps {
 }
 declare const AppShell: ({ header, nav, sidebar, collapsedSidebar, collapsedRailRange, mobileMenu, banner, width, contentPadding, chromeAlignment, gate, state, testID, children, }: AppShellProps) => React.ReactElement | null;
 
+interface NavShellCollapsedRail {
+    items?: NavItem[];
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    range?: CollapsedRailRange;
+}
+
 /**
  * NavShell — the ONE first-class navigation shell that renders a **top bar**, a
  * **side rail**, or **BOTH together**, chosen by a single `layout` prop
@@ -786,22 +793,7 @@ interface NavShellTopBar {
      */
     barTheme?: UiTheme;
 }
-/**
- * Config for the intermediate COLLAPSED (icon-only) rail — opts the side layout
- * into a THREE-tier responsive scheme (full rail → collapsed rail → drawer). When
- * present, NavShell builds a `<CollapsedRail>` and hands it to `AppShell` for the
- * tablet band; omit it and the layout stays two-tier.
- */
-interface NavShellCollapsedRail {
-    /** Items for the icon rail. Defaults to the full rail's `items`. */
-    items?: NavItem[];
-    /** Optional header slot (e.g. a home shortcut). */
-    header?: React.ReactNode;
-    /** Optional footer slot (dark-mode toggle, logout). */
-    footer?: React.ReactNode;
-    /** The `[min, max)` viewport band for the collapsed rail (default `{ min: 768, max: 1024 }`). */
-    range?: CollapsedRailRange;
-}
+
 /**
  * Config for the SIDE rail (rendered as a `Sidebar` in `AppShell`'s sidebar
  * slot). Used when `layout` is `'side'` or `'both'`.
@@ -809,6 +801,7 @@ interface NavShellCollapsedRail {
 interface NavShellSideRail {
     /** Side-rail nav entries (sections — leaf + expandable). */
     items: NavItem[];
+    brand?: React.ReactNode;
     /** Localized menu title (heading). */
     title: string;
     /** Optional header slot rendered above the items (e.g. a Home shortcut). */
@@ -1372,6 +1365,9 @@ declare const navStyles: {
         borderRightWidth: number;
         height: "100%";
     };
+    sidebarBrand: {
+        marginBottom: number;
+    };
     sidebarTitle: {
         fontWeight: "700";
         marginBottom: number;
@@ -1396,7 +1392,7 @@ declare const navStyles: {
         paddingHorizontal: number;
     };
     topbarContainer: {
-        height: number;
+        minHeight: number;
         paddingHorizontal: number;
         borderBottomWidth: number;
         flexDirection: "row";
@@ -1450,6 +1446,7 @@ declare const navStyles: {
     };
     userEmail: {
         fontSize: number;
+        maxWidth: "100%";
     };
     accountBtn: {
         marginLeft: number;

package/dist/index.d.ts

@@ -155,7 +155,7 @@ interface SidebarProps {
     /** Navigation callback — receives a `NavItem.route`. */
     onNavigate: (route: string) => void;
     /** Localized menu title (heading). */
-    title: string;
+    title: React.ReactNode;
     /** Localized accessibility label for the navigation landmark. */
     regionLabel: string;
     /** a11y hint for a leaf item, given its label. Defaults to the label. */
@@ -711,6 +711,13 @@ interface AppShellProps {
 }
 declare const AppShell: ({ header, nav, sidebar, collapsedSidebar, collapsedRailRange, mobileMenu, banner, width, contentPadding, chromeAlignment, gate, state, testID, children, }: AppShellProps) => React.ReactElement | null;
 
+interface NavShellCollapsedRail {
+    items?: NavItem[];
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    range?: CollapsedRailRange;
+}
+
 /**
  * NavShell — the ONE first-class navigation shell that renders a **top bar**, a
  * **side rail**, or **BOTH together**, chosen by a single `layout` prop
@@ -786,22 +793,7 @@ interface NavShellTopBar {
      */
     barTheme?: UiTheme;
 }
-/**
- * Config for the intermediate COLLAPSED (icon-only) rail — opts the side layout
- * into a THREE-tier responsive scheme (full rail → collapsed rail → drawer). When
- * present, NavShell builds a `<CollapsedRail>` and hands it to `AppShell` for the
- * tablet band; omit it and the layout stays two-tier.
- */
-interface NavShellCollapsedRail {
-    /** Items for the icon rail. Defaults to the full rail's `items`. */
-    items?: NavItem[];
-    /** Optional header slot (e.g. a home shortcut). */
-    header?: React.ReactNode;
-    /** Optional footer slot (dark-mode toggle, logout). */
-    footer?: React.ReactNode;
-    /** The `[min, max)` viewport band for the collapsed rail (default `{ min: 768, max: 1024 }`). */
-    range?: CollapsedRailRange;
-}
+
 /**
  * Config for the SIDE rail (rendered as a `Sidebar` in `AppShell`'s sidebar
  * slot). Used when `layout` is `'side'` or `'both'`.
@@ -809,6 +801,7 @@ interface NavShellCollapsedRail {
 interface NavShellSideRail {
     /** Side-rail nav entries (sections — leaf + expandable). */
     items: NavItem[];
+    brand?: React.ReactNode;
     /** Localized menu title (heading). */
     title: string;
     /** Optional header slot rendered above the items (e.g. a Home shortcut). */
@@ -1372,6 +1365,9 @@ declare const navStyles: {
         borderRightWidth: number;
         height: "100%";
     };
+    sidebarBrand: {
+        marginBottom: number;
+    };
     sidebarTitle: {
         fontWeight: "700";
         marginBottom: number;
@@ -1396,7 +1392,7 @@ declare const navStyles: {
         paddingHorizontal: number;
     };
     topbarContainer: {
-        height: number;
+        minHeight: number;
         paddingHorizontal: number;
         borderBottomWidth: number;
         flexDirection: "row";
@@ -1450,6 +1446,7 @@ declare const navStyles: {
     };
     userEmail: {
         fontSize: number;
+        maxWidth: "100%";
     };
     accountBtn: {
         marginLeft: number;

package/dist/index.js

@@ -34,6 +34,9 @@ var navStyles = reactNative.StyleSheet.create({
     borderRightWidth: 1,
     height: "100%"
   },
+  sidebarBrand: {
+    marginBottom: 12
+  },
   sidebarTitle: {
     fontWeight: "700",
     marginBottom: 12
@@ -63,7 +66,7 @@ var navStyles = reactNative.StyleSheet.create({
   },
   // --- Topbar ---
   topbarContainer: {
-    height: 64,
+    minHeight: 64,
     paddingHorizontal: 12,
     borderBottomWidth: 1,
     flexDirection: "row",
@@ -84,7 +87,7 @@ var navStyles = reactNative.StyleSheet.create({
   userBlock: { marginHorizontal: 12, alignItems: "flex-end", flexShrink: 1, minWidth: 0 },
   userName: { fontWeight: "600", maxWidth: "100%" },
   accountNameBtn: { flexShrink: 1, maxWidth: "100%", minHeight: MIN_TOUCH_TARGET, minWidth: MIN_TOUCH_TARGET, justifyContent: "center", alignItems: "flex-end" },
-  userEmail: { fontSize: 12 },
+  userEmail: { fontSize: 12, maxWidth: "100%" },
   accountBtn: {
     marginLeft: 8,
     paddingHorizontal: 10,
@@ -821,7 +824,7 @@ var Sidebar = ({
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }),
+        typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.sidebarBrand, children: title }),
         showInlineSearch && search !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
           SidebarSearch,
           {
@@ -935,7 +938,22 @@ var FocusableTouchable = ({
     }
   );
 };
+var RAIL_FULL_BREAKPOINT = uiLayout.LAYOUT_COLLAPSE_BREAKPOINT;
+var DEFAULT_COLLAPSED_RAIL_MAX = 1024;
+function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
+  if (!hasSidebar) return "none";
+  if (hasCollapsed) {
+    if (viewport >= range.max) return "full";
+    if (viewport >= range.min) return "collapsed";
+    return "drawer";
+  }
+  return viewport >= RAIL_FULL_BREAKPOINT ? "full" : "drawer";
+}
 var TEXT_ON_PRIMARY = "#ffffff";
+var ON_BRAND_SCALE = "onBrand";
+var USER_BLOCK_COMPACT = { marginHorizontal: 4 };
+var MAIN_STEP = "500";
+var WRAP_ANYWHERE = reactNative.Platform.OS === "web" ? { overflowWrap: "anywhere" } : null;
 function isAccountState(account) {
   return "displayName" in account;
 }
@@ -945,6 +963,14 @@ function planToneColor(theme, tone) {
   if (tone === "enterprise") return palette.accent?.["500"] ?? palette.primary["500"];
   return theme.colors.textSecondary;
 }
+function onBrandInk(palette) {
+  const scales = palette;
+  return scales[ON_BRAND_SCALE]?.[MAIN_STEP] ?? TEXT_ON_PRIMARY;
+}
+function planBadgeInk(theme, tone) {
+  const fillIsPrimary = planToneColor(theme, tone) === theme.palette.primary["500"];
+  return fillIsPrimary ? onBrandInk(theme.palette) : TEXT_ON_PRIMARY;
+}
 var Topbar = ({
   left,
   center,
@@ -958,6 +984,9 @@ var Topbar = ({
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
+  const onPrimaryInk = onBrandInk(theme.palette);
+  const { width: viewportWidth } = reactNative.useWindowDimensions();
+  const userBlockStyle = [navStyles.userBlock, viewportWidth < RAIL_FULL_BREAKPOINT ? USER_BLOCK_COMPACT : null];
   const richAccount = account !== void 0 && isAccountState(account) ? account : void 0;
   const legacyAccount = account !== void 0 && !isAccountState(account) ? account : void 0;
   const upgrade = richAccount?.upgrade;
@@ -986,11 +1015,11 @@ var Topbar = ({
             }
           ) : null,
           renderTextSlot(notificationSlot, { color: colors.text }),
-          user ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navStyles.userBlock, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, { color: colors.text }], children: user.name }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userEmail, { color: colors.textSecondary }], children: user.email })
+          user ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { accessible: true, accessibilityLabel: `${user.name}, ${user.email}`, style: userBlockStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, WRAP_ANYWHERE, { color: colors.text }], children: user.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userEmail, WRAP_ANYWHERE, { color: colors.textSecondary }], children: user.email })
           ] }) : null,
-          richAccount ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navStyles.userBlock, children: [
+          richAccount ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: userBlockStyle, children: [
             richAccount.onAccount ? /* @__PURE__ */ jsxRuntime.jsx(
               FocusableTouchable,
               {
@@ -1016,7 +1045,7 @@ var Topbar = ({
               {
                 style: [navStyles.planBadge, { backgroundColor: planToneColor(theme, richAccount.plan.tone) }],
                 testID: NAV_TEST_IDS.accountPlan,
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.planBadgeText, { color: TEXT_ON_PRIMARY }], children: richAccount.plan.label })
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.planBadgeText, { color: planBadgeInk(theme, richAccount.plan.tone) }], children: richAccount.plan.label })
               }
             ) : null
           ] }) : null,
@@ -1029,7 +1058,7 @@ var Topbar = ({
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: legacyAccount.testID,
               onPress: legacyAccount.onPress,
-              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.accountText, { color: TEXT_ON_PRIMARY }], children: legacyAccount.label })
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.accountText, { color: onPrimaryInk }], children: legacyAccount.label })
             }
           ) : null,
           upgrade ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1041,7 +1070,7 @@ var Topbar = ({
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: upgrade.testID ?? NAV_TEST_IDS.accountUpgrade,
               onPress: upgrade.onPress,
-              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.accountText, { color: TEXT_ON_PRIMARY }], children: upgrade.label })
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.accountText, { color: onPrimaryInk }], children: upgrade.label })
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -1053,7 +1082,7 @@ var Topbar = ({
               style: [navStyles.accountBtn, { backgroundColor: primaryColor }],
               testID: logout.testID,
               onPress: richAccount ? richAccount.onLogout : logout.onPress,
-              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.accountText, { color: TEXT_ON_PRIMARY }], children: logout.label })
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.accountText, { color: onPrimaryInk }], children: logout.label })
             }
           )
         ] })
@@ -1618,17 +1647,6 @@ var Nav = (props) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(NavBar, { ...props });
 };
-var RAIL_FULL_BREAKPOINT = uiLayout.LAYOUT_COLLAPSE_BREAKPOINT;
-var DEFAULT_COLLAPSED_RAIL_MAX = 1024;
-function resolveRailMode({ viewport, hasSidebar, hasCollapsed, range }) {
-  if (!hasSidebar) return "none";
-  if (hasCollapsed) {
-    if (viewport >= range.max) return "full";
-    if (viewport >= range.min) return "collapsed";
-    return "drawer";
-  }
-  return viewport >= RAIL_FULL_BREAKPOINT ? "full" : "drawer";
-}
 var styles5 = reactNative.StyleSheet.create({
   band: { left: 0, position: "absolute", right: 0, top: 0 }
 });
@@ -2073,7 +2091,7 @@ var NavShell = ({
       renderChevron: sideRail.renderChevron,
       search: sideRail.search,
       searchQuery: sideRail.searchQuery,
-      title: sideRail.title,
+      title: sideRail.brand ?? sideRail.title,
       onNavigate,
       onSearchChange: sideRail.onSearchChange
     }