@dloizides/ui-nav 1.30.0 → 1.31.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;

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;

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
@@ -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,
           {
@@ -2073,7 +2076,7 @@ var NavShell = ({
       renderChevron: sideRail.renderChevron,
       search: sideRail.search,
       searchQuery: sideRail.searchQuery,
-      title: sideRail.title,
+      title: sideRail.brand ?? sideRail.title,
       onNavigate,
       onSearchChange: sideRail.onSearchChange
     }