@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

package/dist/esm/components/navigation/FootNav.js

@@ -1,10 +1,12 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { cn } from '../../utils/cn.js';
+import { PRESS_FEEDBACK } from '../../utils/touchTarget.js';
 
-var _excluded = ["items", "className"];
+var _excluded = ["items", "linkAs", "hideOnScroll", "badgeMax", "className", "onFocus"],
+  _excluded2 = ["className"];
 var hasBadge = function hasBadge(badge) {
   return badge === 0 || Boolean(badge);
 };
@@ -17,34 +19,100 @@ var passthrough = function passthrough(item) {
     return /^(aria|data)-/.test(key);
   }));
 };
+// Numeric counts above `max` read `${max}+` so a big number can't widen the tab.
+var formatBadge = function formatBadge(badge, max) {
+  return typeof badge === 'number' && typeof max === 'number' && badge > max ? "".concat(max, "+") : badge;
+};
 var Badge = function Badge(_ref3) {
-  var badge = _ref3.badge;
+  var badge = _ref3.badge,
+    max = _ref3.max;
   return jsx("span", {
-    className: "absolute -top-1.5 left-full -ml-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-600 px-1 text-micro font-semibold text-white",
+    className: "absolute -top-1.5 left-full -ml-2 flex h-4 min-w-4 items-center justify-center whitespace-nowrap rounded-full bg-error-600 px-1 text-micro font-semibold tabular-nums text-white",
     "data-slot": "badge",
-    children: badge
+    children: formatBadge(badge, max)
   });
 };
+// Scroll distance (px) that counts as a direction change, and the offset
+// before the bar may hide (so it never hides at the very top of the page).
+var SCROLL_DELTA = 8;
+var HIDE_AFTER = 64;
+// Hide on scroll down, show on scroll up. Passive listener; SSR-safe (the
+// effect only runs in the browser).
+function useHideOnScroll(enabled) {
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    hidden = _React$useState2[0],
+    setHidden = _React$useState2[1];
+  React.useEffect(function () {
+    if (!enabled || typeof window === 'undefined') {
+      setHidden(false);
+      return undefined;
+    }
+    var lastY = window.scrollY || 0;
+    var onScroll = function onScroll() {
+      var y = window.scrollY || 0;
+      var delta = y - lastY;
+      if (Math.abs(delta) < SCROLL_DELTA) return;
+      setHidden(delta > 0 && y > HIDE_AFTER);
+      lastY = y;
+    };
+    window.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+    return function () {
+      return window.removeEventListener('scroll', onScroll);
+    };
+  }, [enabled]);
+  return [hidden, setHidden];
+}
 var FootNav = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
   var _ref4$items = _ref4.items,
     items = _ref4$items === void 0 ? [] : _ref4$items,
+    linkAs = _ref4.linkAs,
+    _ref4$hideOnScroll = _ref4.hideOnScroll,
+    hideOnScroll = _ref4$hideOnScroll === void 0 ? false : _ref4$hideOnScroll,
+    _ref4$badgeMax = _ref4.badgeMax,
+    badgeMax = _ref4$badgeMax === void 0 ? 99 : _ref4$badgeMax,
     className = _ref4.className,
+    onFocus = _ref4.onFocus,
     props = _objectWithoutProperties(_ref4, _excluded);
+  var _useHideOnScroll = useHideOnScroll(hideOnScroll),
+    _useHideOnScroll2 = _slicedToArray(_useHideOnScroll, 2),
+    hidden = _useHideOnScroll2[0],
+    setHidden = _useHideOnScroll2[1];
+  // Keyboard focus moving into a hidden bar brings it back.
+  var handleFocus = function handleFocus(e) {
+    if (hidden) setHidden(false);
+    onFocus === null || onFocus === void 0 || onFocus(e);
+  };
   return jsx("nav", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('fixed bottom-0 left-0 right-0 bg-surface border-t border-line px-2 py-2 md:hidden', className)
+    "aria-label": "Primary",
+    "data-hidden": hideOnScroll ? String(hidden) : undefined,
+    className: cn('fixed bottom-0 left-0 right-0 z-sticky border-t border-line px-2 pb-safe md:hidden',
+    // Translucent where backdrop blur is supported, solid surface otherwise.
+    'bg-surface supports-[backdrop-filter]:bg-surface/80 supports-[backdrop-filter]:backdrop-blur', hideOnScroll && 'transition-transform duration-base ease-standard motion-reduce:transition-none', hideOnScroll && hidden && 'translate-y-full', className),
+    onFocus: handleFocus
   }, props), {}, {
     children: jsx("div", {
-      className: "flex items-stretch justify-around gap-1",
+      className: "flex items-stretch justify-around gap-1 py-2",
       children: items.map(function (item, index) {
-        var _item$id;
+        var _item$to, _item$id;
         var isAction = item.variant === 'action';
-        return jsxs("button", _objectSpread2(_objectSpread2({
-          type: "button",
+        var isLink = item.href !== undefined || item.to !== undefined;
+        var Item = isLink ? linkAs || 'a' : 'button';
+        var linkProps = isLink ? _objectSpread2({
+          href: item.href
+        }, linkAs ? {
+          to: (_item$to = item.to) !== null && _item$to !== void 0 ? _item$to : item.href
+        } : {}) : {
+          type: 'button'
+        };
+        return jsxs(Item, _objectSpread2(_objectSpread2(_objectSpread2({}, linkProps), {}, {
           "aria-current": item.active ? 'page' : undefined,
           "data-variant": isAction ? 'action' : undefined
         }, passthrough(item)), {}, {
-          className: cn('relative flex min-w-0 flex-1 flex-col items-center gap-1 rounded-md px-1 py-2 text-xs transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 motion-reduce:transition-none', isAction ? 'group justify-start py-0 font-medium text-muted' : item.active ? 'bg-primary-50 font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300' : 'font-medium text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800'),
+          className: cn('relative flex min-w-0 flex-1 flex-col items-center gap-1 rounded-md px-1 py-2 text-xs no-underline', PRESS_FEEDBACK, 'transition duration-fast ease-standard motion-reduce:transition-none', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-gray-900', isAction ? 'group justify-start py-0 font-medium text-muted' : item.active ? 'bg-primary-50 font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300' : 'font-medium text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800'),
           onClick: function onClick() {
             var _item$onClick;
             return (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, item);
@@ -56,13 +124,15 @@ var FootNav = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
             className: "relative -mt-7 inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary-600 text-2xl text-white shadow-lg ring-4 ring-surface transition-colors group-hover:bg-primary-700 motion-reduce:transition-none",
             "data-slot": "icon",
             children: [item.icon, hasBadge(item.badge) && jsx(Badge, {
-              badge: item.badge
+              badge: item.badge,
+              max: badgeMax
             })]
           }) : jsxs("span", {
             className: "relative inline-flex text-lg",
             "data-slot": "icon",
             children: [item.icon, hasBadge(item.badge) && jsx(Badge, {
-              badge: item.badge
+              badge: item.badge,
+              max: badgeMax
             })]
           }), jsx("span", {
             className: "block max-w-full truncate",
@@ -74,5 +144,24 @@ var FootNav = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
   }));
 });
 FootNav.displayName = 'FootNav';
+// Reserves the bar's height plus the bottom safe area at the end of the page
+// content, so nothing scrolls under the fixed bar. Hidden from `md` up, like
+// the bar itself.
+var FootNavSpacer = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
+  var className = _ref5.className,
+    props = _objectWithoutProperties(_ref5, _excluded2);
+  return jsx("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    "aria-hidden": "true",
+    "data-slot": "footnav-spacer",
+    className: cn('pb-safe md:hidden', className)
+  }, props), {}, {
+    children: jsx("div", {
+      className: "h-20"
+    })
+  }));
+});
+FootNavSpacer.displayName = 'FootNav.Spacer';
+FootNav.Spacer = FootNavSpacer;
 
 export { FootNav as default };

package/dist/esm/components/navigation/Navbar.js

@@ -2,15 +2,70 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cn } from '../../utils/cn.js';
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect, useSyncExternalStore } from 'react';
 import { ChevronLeft, Search, LogIn, LogOut, X, Menu, User, Bell } from 'lucide-react';
 import { Dropdown } from './Dropdown.js';
 import Avatar from '../utility/Avatar.js';
+import Sheet from '../feedback/Sheet.js';
+import SearchField from '../core/SearchField.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 import PropTypes from '../../_vendor/prop-types/index.js';
 
 var _excluded = ["emitter", "content", "notifications"],
-  _excluded2 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen"];
+  _excluded2 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen", "sticky", "largeTitle"];
 var NO_NOTIFICATIONS = [];
+// Icon-only bar buttons: 36px on desktop, the 44px touch target on coarse pointers.
+var ICON_BUTTON = cn("inline-flex items-center justify-center rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET);
+// Badge counts above this read "99+".
+var BADGE_MAX = 99;
+var formatBadgeCount = function formatBadgeCount(count) {
+  return count > BADGE_MAX ? "".concat(BADGE_MAX, "+") : String(count);
+};
+// Large title: collapses past COLLAPSE_AT and re-expands under EXPAND_AT. The
+// gap (hysteresis) stops the bar flickering when collapsing it shortens the page.
+var LARGE_TITLE_COLLAPSE_AT = 44;
+var LARGE_TITLE_EXPAND_AT = 8;
+// Per-instance scroll store for useSyncExternalStore: one passive window
+// scroll listener; `false` (expanded) on the server and while hydrating.
+function createScrollCollapseStore() {
+  var collapsed = false;
+  var read = function read() {
+    var y = window.scrollY || window.pageYOffset || 0;
+    if (!collapsed && y > LARGE_TITLE_COLLAPSE_AT) collapsed = true;else if (collapsed && y < LARGE_TITLE_EXPAND_AT) collapsed = false;
+  };
+  return {
+    subscribe: function subscribe(onChange) {
+      if (typeof window === "undefined") return function () {};
+      var handle = function handle() {
+        var prev = collapsed;
+        read();
+        if (prev !== collapsed) onChange();
+      };
+      handle();
+      window.addEventListener("scroll", handle, {
+        passive: true
+      });
+      return function () {
+        return window.removeEventListener("scroll", handle);
+      };
+    },
+    getSnapshot: function getSnapshot() {
+      return collapsed;
+    }
+  };
+}
+var NEVER_SUBSCRIBE = function NEVER_SUBSCRIBE() {
+  return function () {};
+};
+var ALWAYS_FALSE = function ALWAYS_FALSE() {
+  return false;
+};
+function useLargeTitleCollapsed(enabled) {
+  var _useState = useState(createScrollCollapseStore),
+    _useState2 = _slicedToArray(_useState, 1),
+    store = _useState2[0];
+  return useSyncExternalStore(enabled ? store.subscribe : NEVER_SUBSCRIBE, enabled ? store.getSnapshot : ALWAYS_FALSE, ALWAYS_FALSE);
+}
 // Simplified Notifications, uses notifications from props and a single effect for fetch/update
 var NotificationsDropdown = function NotificationsDropdown(_ref) {
   var emitter = _ref.emitter,
@@ -20,10 +75,10 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
     onFetch = _ref$onFetch === void 0 ? function () {
       return console.log("invoked onFetch notifications");
     } : _ref$onFetch;
-  var _useState = useState(initialNotifications),
-    _useState2 = _slicedToArray(_useState, 2),
-    notifications = _useState2[0],
-    setNotifications = _useState2[1];
+  var _useState3 = useState(initialNotifications),
+    _useState4 = _slicedToArray(_useState3, 2),
+    notifications = _useState4[0],
+    setNotifications = _useState4[1];
   var onView = function onView() {
     emitter.emit("notification:view", notifications);
   };
@@ -46,10 +101,10 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
   };
   // Reset to the `notifications` prop when it changes (adjust-during-render
   // pattern), then let onFetch refresh from the server.
-  var _useState3 = useState(initialNotifications),
-    _useState4 = _slicedToArray(_useState3, 2),
-    prevInitial = _useState4[0],
-    setPrevInitial = _useState4[1];
+  var _useState5 = useState(initialNotifications),
+    _useState6 = _slicedToArray(_useState5, 2),
+    prevInitial = _useState6[0],
+    setPrevInitial = _useState6[1];
   if (initialNotifications !== prevInitial) {
     setPrevInitial(initialNotifications);
     setNotifications(initialNotifications);
@@ -67,13 +122,19 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
   // For simplicity, shows notifications in the dropdown, can be expanded
   return jsx(Dropdown, {
     trigger: jsxs("button", {
-      className: "relative rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800",
-      "aria-label": "notifications",
+      type: "button",
+      className: cn(ICON_BUTTON, "relative"),
+      "aria-label": unreadCount > 0 ? "Notifications, ".concat(formatBadgeCount(unreadCount), " unread") : "Notifications",
       children: [jsx(Bell, {
-        className: "h-5 w-5"
-      }), unreadCount > 0 && jsx("span", {
-        className: "absolute -top-1 -right-1 h-4 w-4 rounded-full bg-error-500 text-xs text-white flex items-center justify-center",
-        children: unreadCount
+        className: "h-5 w-5",
+        "aria-hidden": "true"
+      }), unreadCount > 0 &&
+      // Grows with the count (min-w + padding) and caps at "99+".
+      jsx("span", {
+        "aria-hidden": "true",
+        "data-navbar-badge": "",
+        className: "absolute -right-0.5 -top-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-pill bg-error-500 px-1 text-micro font-semibold leading-none text-white",
+        children: formatBadgeCount(unreadCount)
       })]
     }),
     placement: "bottom-end",
@@ -159,7 +220,7 @@ var RightMenuContent = function RightMenuContent(_ref2) {
   });
 };
 var styledClassNames = {
-  button: "rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800",
+  button: ICON_BUTTON,
   mobileItem: "md:hidden",
   icon: "h-6 w-6",
   dropdown: "w-56 rounded-md border border-line bg-surface py-1 shadow-lg"
@@ -192,19 +253,29 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     onFetch = _ref3.onFetch;
     _ref3.isMobileOpen;
     _ref3.setIsMobileOpen;
-    var props = _objectWithoutProperties(_ref3, _excluded2);
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isMobileMenuOpen = _useState6[0],
-    setIsMobileMenuOpen = _useState6[1];
-  var _useState7 = useState(""),
+    var _ref3$sticky = _ref3.sticky,
+    sticky = _ref3$sticky === void 0 ? false : _ref3$sticky,
+    largeTitle = _ref3.largeTitle,
+    props = _objectWithoutProperties(_ref3, _excluded2);
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    searchTerm = _useState8[0],
-    setSearchTerm = _useState8[1];
-  var _useState9 = useState(typeof window !== "undefined" ? window.innerWidth < 768 : false),
+    isMobileMenuOpen = _useState8[0],
+    setIsMobileMenuOpen = _useState8[1];
+  var _useState9 = useState(""),
     _useState0 = _slicedToArray(_useState9, 2),
-    isMobile = _useState0[0],
-    setIsMobile = _useState0[1];
+    searchTerm = _useState0[0],
+    setSearchTerm = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isMobileSearchOpen = _useState10[0],
+    setIsMobileSearchOpen = _useState10[1];
+  var mobileSearchRef = useRef(null);
+  var hasLargeTitle = largeTitle !== undefined && largeTitle !== null && largeTitle !== false;
+  var titleCollapsed = useLargeTitleCollapsed(hasLargeTitle);
+  var _useState11 = useState(typeof window !== "undefined" ? window.innerWidth < 768 : false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isMobile = _useState12[0],
+    setIsMobile = _useState12[1];
   // Responsive flag update
   var handleResize = useCallback(function () {
     setIsMobile(window.innerWidth < 768);
@@ -221,6 +292,12 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     e.preventDefault();
     onSearch === null || onSearch === void 0 || onSearch(searchTerm);
   };
+  // Phones: the inline field is hidden below `sm`; a search button opens it
+  // in a top Sheet instead, sharing the same term and `onSearch`.
+  var handleMobileSearch = function handleMobileSearch(term) {
+    onSearch === null || onSearch === void 0 || onSearch(term);
+    setIsMobileSearchOpen(false);
+  };
   var handleLoginClick = function handleLoginClick() {
     onLoginClick === null || onLoginClick === void 0 || onLoginClick();
   };
@@ -262,11 +339,17 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   };
   return jsxs("nav", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn("bg-surface text-foreground border-b border-line px-4 sm:px-6 lg:px-8", className)
+    className: cn("bg-surface text-foreground border-b border-line px-4 sm:px-6 lg:px-8", sticky && "sticky top-0 z-sticky pt-safe supports-[backdrop-filter]:bg-surface/80 supports-[backdrop-filter]:backdrop-blur", className),
+    "data-sticky": sticky ? "" : undefined
   }, props), {}, {
     children: [jsxs("div", {
-      className: "flex h-16 min-w-0 items-center justify-between gap-2 sm:gap-4",
-      children: [jsxs("div", {
+      className: "relative flex h-16 min-w-0 items-center justify-between gap-2 sm:gap-4",
+      children: [hasLargeTitle && jsx("div", {
+        "aria-hidden": "true",
+        "data-navbar-compact-title": "",
+        className: cn("pointer-events-none absolute left-1/2 top-1/2 max-w-[50%] -translate-x-1/2 -translate-y-1/2 truncate text-base font-semibold", "transition-opacity duration-base ease-standard motion-reduce:transition-none", titleCollapsed ? "opacity-100" : "opacity-0"),
+        children: largeTitle
+      }), jsxs("div", {
         className: "flex min-w-0 shrink items-center",
         children: [leftIcon !== false && jsx("div", {
           className: "mr-2 hidden md:block md:mr-4",
@@ -275,8 +358,9 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
           className: "flex min-w-0 items-center",
           children: [leftIcon !== false && jsx("button", {
             onClick: onLeftIconClick,
-            className: "shrink-0 md:hidden rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800",
-            "aria-label": "back",
+            type: "button",
+            className: cn(ICON_BUTTON, "shrink-0 md:hidden"),
+            "aria-label": "Go back",
             children: leftIcon
           }), logo && jsx("div", {
             className: "ml-2 min-w-0 truncate sm:ml-4 md:ml-0",
@@ -309,6 +393,20 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
               }
             })]
           })
+        }), searchable && jsx("button", {
+          type: "button",
+          className: cn(styledClassNames.button, "sm:hidden"),
+          onClick: function onClick() {
+            return setIsMobileSearchOpen(true);
+          },
+          "aria-label": "Search",
+          "aria-haspopup": "dialog",
+          "aria-expanded": isMobileSearchOpen,
+          "data-navbar-search-button": "",
+          children: jsx(Search, {
+            className: "h-5 w-5",
+            "aria-hidden": "true"
+          })
         }), jsx(RightMenuComponent, {
           notifications: notifications,
           onFetch: onFetch
@@ -333,12 +431,14 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
           className: "relative",
           children: !user ? jsx("button", {
             className: cn(styledClassNames.button, styledClassNames.mobileItem),
+            type: "button",
             onClick: function onClick() {
               return setIsMobileMenuOpen(function (s) {
                 return !s;
               });
             },
-            "aria-label": "menu",
+            "aria-label": isMobileMenuOpen ? "Close menu" : "Open menu",
+            "aria-expanded": isMobileMenuOpen,
             children: isMobileMenuOpen ? jsx(X, {
               className: styledClassNames.icon
             }) : jsx(Menu, {
@@ -346,8 +446,9 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
             })
           }) : jsx(Dropdown, {
             trigger: jsx("button", {
+              type: "button",
               className: styledClassNames.button,
-              "aria-label": "user menu",
+              "aria-label": "User menu",
               children: user.avatar || user.name ?
               // Image when `avatar` is set; otherwise initials from
               // `name` (Avatar's own fallback logic).
@@ -361,7 +462,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
               })
             }),
             placement: "bottom-end",
-            className: "z-50",
+            className: "z-dropdown",
             children: jsxs("div", {
               className: styledClassNames.dropdown,
               children: [jsxs("div", {
@@ -404,6 +505,38 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
           })
         })]
       })]
+    }), hasLargeTitle && jsx("div", {
+      "data-navbar-large-title": "",
+      "data-collapsed": titleCollapsed ? "" : undefined,
+      className: cn("overflow-hidden transition-[max-height,opacity] duration-base ease-standard motion-reduce:transition-none", titleCollapsed ? "max-h-0 opacity-0" : "max-h-16 opacity-100"),
+      children: jsx("h1", {
+        className: "truncate pb-3 text-3xl font-bold tracking-tight text-foreground",
+        children: largeTitle
+      })
+    }), searchable && jsx(Sheet, {
+      open: isMobileSearchOpen,
+      onClose: function onClose() {
+        return setIsMobileSearchOpen(false);
+      },
+      placement: "top",
+      initialFocus: mobileSearchRef,
+      "aria-label": "Search",
+      "data-navbar-search-sheet": "",
+      children: jsx("div", {
+        className: "px-4 py-3",
+        children: jsx(SearchField, {
+          ref: mobileSearchRef,
+          presentation: "popover",
+          showCancel: true,
+          placeholder: "Search...",
+          value: searchTerm,
+          onValueChange: setSearchTerm,
+          onSearch: handleMobileSearch,
+          onCancel: function onCancel() {
+            return setIsMobileSearchOpen(false);
+          }
+        })
+      })
     }), isMobileMenuOpen && !user && jsx("div", {
       className: "md:hidden h-full",
       children: jsx("div", {
@@ -431,7 +564,9 @@ Navbar.propTypes = {
   user: PropTypes.object,
   notifications: PropTypes.array,
   searchable: PropTypes.bool,
-  onSearch: PropTypes.func
+  onSearch: PropTypes.func,
+  sticky: PropTypes.bool,
+  largeTitle: PropTypes.node
 };
 
 export { Navbar, Navbar as default };