@vjdesigns/vjdesigns-ui 2.3.0 → 2.4.0

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

@@ -1 +1 @@
-const e=require("../../../types/common.cjs.js"),t=require("../../../hooks/useControllableState.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../hooks/useMergedRef.cjs.js"),i=require("../../../utils/responsive.cjs.js"),a=require("../../../utils/cx.cjs.js"),o=require("../../primitives/Button/Button.cjs.js"),s=require("../../primitives/Icon/icons.cjs.js"),c=require("../../layout/Container/Container.cjs.js"),l=require("../../overlays/Drawer/Drawer.cjs.js"),u=require("./Navbar.module.css.cjs.js");let d=require("react"),f=require("react/jsx-runtime");var p={accent:u.default.activeAccent,primary:u.default.activePrimary,neutral:u.default.activeNeutral},m={surface:u.default.surface,transparent:u.default.transparent,solid:u.default.solid},h={sm:u.default.sm,md:u.default.md,lg:u.default.lg},g={static:u.default.static,sticky:u.default.sticky,fixed:u.default.fixed},_={sm:u.default.collapseSm,md:u.default.collapseMd,lg:u.default.collapseLg},v=(0,d.createContext)(null);function y(e){let t=(0,d.useContext)(v);if(!t)throw Error(`${e} must be used inside <Navbar>.`);return t}var b=(0,d.createContext)(`bar`),x=(0,d.createContext)(!1);function S(e){for(let t=e.parentElement;t&&t!==document.body;t=t.parentElement){let{overflowY:e}=getComputedStyle(t);if(e===`auto`||e===`scroll`||e===`overlay`)return t}return document.documentElement}var C=({children:i,variant:l=`surface`,size:p=`md`,position:y=`sticky`,reserveScrollPadding:b=!0,bordered:x=!1,elevated:C=!1,elevateOnScroll:w=!1,contained:T=!0,maxWidth:E=`xl`,collapseBelow:D=`md`,open:O,defaultOpen:k=!1,onOpenChange:A,menuLabel:j,menuTitle:ee,menuSide:M=`end`,activeTone:N=`accent`,className:P,ref:F,...I})=>{let L=n.useMessages(),R=j??L.navbar.openMenu,z=ee??L.navbar.menu,B=(0,d.useRef)(null),V=r.useMergedRef(B,F);(0,d.useEffect)(()=>{let e=B.current;if(!e||y===`static`||!b)return;let t=y===`fixed`?document.documentElement:S(e),n=t.style.scrollPaddingTop,r=()=>{t.style.scrollPaddingTop=`${e.offsetHeight}px`};r();let i=typeof ResizeObserver>`u`?null:new ResizeObserver(r);return i?.observe(e),()=>{i?.disconnect(),t.style.scrollPaddingTop=n}},[y,b]);let[H,U]=t.useControllableState({value:O,defaultValue:k,onChange:A}),W=`${(0,d.useId)()}-menu`,G=(0,d.useRef)(null),[K,q]=(0,d.useState)(0),[J,Y]=(0,d.useState)(!1),X=(0,d.useCallback)(()=>(q(e=>e+1),()=>q(e=>e-1)),[]),Z=(0,d.useCallback)(e=>U(e),[U]),Q=(0,d.useRef)(!1);(0,d.useEffect)(()=>{if(!H||typeof window>`u`||!window.matchMedia)return;let t=window.matchMedia(`(min-width: ${e.breakpoints[D]}px)`),n=()=>{t.matches&&(Q.current=!0,Z(!1))};return n(),t.addEventListener(`change`,n),()=>t.removeEventListener(`change`,n)},[H,D,Z]),(0,d.useEffect)(()=>{if(H||!Q.current)return;Q.current=!1;let e=document.activeElement;(!e||e===document.body||document.getElementById(W)?.contains(e))&&G.current?.closest(`header`)?.querySelector(`nav a[href], nav button:not([disabled])`)?.focus()},[H,W]),(0,d.useEffect)(()=>{if(!w||typeof window>`u`)return;let e=0,t=()=>{e=0,Y(window.scrollY>0)},n=()=>{e||=window.requestAnimationFrame(t)};return t(),window.addEventListener(`scroll`,n,{passive:!0}),()=>{window.removeEventListener(`scroll`,n),e&&window.cancelAnimationFrame(e)}},[w]);let te=(0,d.useMemo)(()=>({open:H,setOpen:Z,menuId:W,menuTitle:z,menuSide:M,toggleRef:G,registerNav:X,activeTone:N}),[H,Z,W,z,M,X,N]),$=w&&J,ne=K>0;return(0,f.jsx)(v.Provider,{value:te,children:(0,f.jsx)(`header`,{"data-variant":l,...I,ref:V,className:a.cx(u.default.root,m[l],h[p],g[y],_[D],x&&u.default.bordered,(C||$)&&u.default.elevated,$&&u.default.scrolled,P),children:(0,f.jsxs)(c.Container,{size:E,fluid:!T,gutter:`responsive`,className:u.default.inner,children:[i,ne&&(0,f.jsx)(o.IconButton,{ref:G,"aria-label":R,"aria-haspopup":`dialog`,"aria-expanded":H,"aria-controls":H?W:void 0,variant:l===`solid`?`solid`:`ghost`,tone:l===`solid`?`primary`:`neutral`,size:p,className:u.default.toggle,onClick:()=>Z(!H),children:(0,f.jsx)(s.MenuIcon,{})})]})})})};C.displayName=`Navbar`;function w(e){let{as:t,className:n,children:r,...i}=e,o=t!==void 0||i.href!==void 0;return(0,f.jsx)(t??(o?`a`:`div`),{...i,className:a.cx(u.default.brand,o&&u.default.brandLink,n),children:r})}w.displayName=`Navbar.Brand`;var T={start:u.default.alignStart,center:u.default.alignCenter,end:u.default.alignEnd},E=i.responsiveClasses(u.default,`navGap`),D=({children:e,align:t=`start`,gap:r,className:o,style:s,"aria-label":c,"aria-labelledby":p,...m})=>{let h=n.useMessages(),g=c??h.navbar.nav,{open:_,setOpen:v,menuId:x,menuTitle:S,menuSide:C,toggleRef:w,registerNav:D}=y(`Navbar.Nav`);(0,d.useLayoutEffect)(()=>D(),[D]);let O={},k=[];return i.responsiveVars(`navbar-nav-gap`,r,e=>`var(--space-${e})`,E,O,k),(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(`nav`,{"aria-label":p?void 0:g,"aria-labelledby":p,...m,className:a.cx(u.default.nav,T[t],...k,o),style:{...O,...s},children:(0,f.jsx)(b.Provider,{value:`bar`,children:(0,f.jsx)(`ul`,{className:u.default.list,children:e})})}),(0,f.jsx)(l.Drawer,{open:_,onOpenChange:v,side:C,size:`sm`,finalFocusRef:w,children:(0,f.jsxs)(l.Drawer.Content,{id:x,children:[(0,f.jsx)(l.Drawer.Header,{children:(0,f.jsx)(l.Drawer.Title,{children:S})}),(0,f.jsx)(l.Drawer.Body,{children:(0,f.jsx)(`nav`,{"aria-label":p?void 0:g,"aria-labelledby":p,children:(0,f.jsx)(b.Provider,{value:`drawer`,children:(0,f.jsx)(`ul`,{className:u.default.drawerList,children:e})})})})]})})]})};D.displayName=`Navbar.Nav`;var O=({className:e,children:t,showIn:n=`both`,ref:r,...i})=>{let o=(0,d.useContext)(b);return n!==`both`&&n!==o?null:(0,f.jsx)(`li`,{...i,ref:o===`drawer`?void 0:r,className:a.cx(u.default.item,o===`drawer`&&u.default.itemDrawer,e),children:(0,f.jsx)(x.Provider,{value:!0,children:t})})};O.displayName=`Navbar.Item`;function k(e){let{as:t,active:n=!1,icon:r,className:i,children:o,onClick:s,"aria-current":c,ref:l,...m}=e,h=(0,d.useContext)(b),g=(0,d.useContext)(x),_=(0,d.useContext)(v),y=t??`a`,S=e=>{s?.(e),h===`drawer`&&_?.setOpen(!1)},C=(0,f.jsxs)(y,{...m,ref:h===`drawer`?void 0:l,"aria-current":n?`page`:c,onClick:S,className:a.cx(u.default.link,h===`drawer`?u.default.linkDrawer:u.default.linkBar,n&&u.default.active,n&&p[_?.activeTone??`accent`],i),children:[r!=null&&(0,f.jsx)(`span`,{className:u.default.linkIcon,"aria-hidden":`true`,children:r}),(0,f.jsx)(`span`,{className:u.default.linkLabel,children:o})]});return g?C:(0,f.jsx)(`li`,{className:a.cx(u.default.item,h===`drawer`&&u.default.itemDrawer),children:C})}k.displayName=`Navbar.Link`;var A=({className:e,children:t,...n})=>(0,f.jsx)(`div`,{...n,className:a.cx(u.default.actions,e),children:t});A.displayName=`Navbar.Actions`;var j=Object.assign(C,{Brand:w,Nav:D,Item:O,Link:k,Actions:A});exports.Navbar=j,exports.NavbarActions=A,exports.NavbarBrand=w,exports.NavbarItem=O,exports.NavbarLink=k,exports.NavbarNav=D;
+const e=require("../../../types/common.cjs.js"),t=require("../../../hooks/useControllableState.cjs.js"),n=require("../../../hooks/useDismiss.cjs.js"),r=require("../../../hooks/useFloatingPosition.cjs.js"),i=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),a=require("../../../hooks/useMergedRef.cjs.js"),o=require("../../../utils/responsive.cjs.js"),s=require("../../../utils/cx.cjs.js"),c=require("../../primitives/Button/Button.cjs.js"),l=require("../../primitives/Icon/icons.cjs.js"),u=require("../../layout/Container/Container.cjs.js"),d=require("../../data-display/Badge/Badge.cjs.js"),f=require("../../overlays/Drawer/Drawer.cjs.js"),p=require("./Navbar.module.css.cjs.js");let m=require("react"),h=require("react/jsx-runtime");var g={accent:p.default.activeAccent,primary:p.default.activePrimary,neutral:p.default.activeNeutral},_={surface:p.default.surface,transparent:p.default.transparent,solid:p.default.solid},v={sm:p.default.sm,md:p.default.md,lg:p.default.lg},y={static:p.default.static,sticky:p.default.sticky,fixed:p.default.fixed},b={sm:p.default.collapseSm,md:p.default.collapseMd,lg:p.default.collapseLg},x=(0,m.createContext)(null);function S(e){let t=(0,m.useContext)(x);if(!t)throw Error(`${e} must be used inside <Navbar>.`);return t}var C=(0,m.createContext)(`bar`),w=(0,m.createContext)(null),T=(0,m.createContext)(!1);function E(e){for(let t=e.parentElement;t&&t!==document.body;t=t.parentElement){let{overflowY:e}=getComputedStyle(t);if(e===`auto`||e===`scroll`||e===`overlay`)return t}return document.documentElement}var D=({children:n,variant:r=`surface`,size:o=`md`,position:d=`sticky`,reserveScrollPadding:f=!0,bordered:g=!1,elevated:S=!1,elevateOnScroll:C=!1,contained:w=!0,maxWidth:T=`xl`,collapseBelow:D=`md`,open:O,defaultOpen:k=!1,onOpenChange:A,menuLabel:j,menuTitle:M,menuSide:N=`end`,activeTone:P=`accent`,className:F,ref:I,...L})=>{let R=i.useMessages(),z=j??R.navbar.openMenu,B=M??R.navbar.menu,V=(0,m.useRef)(null),H=a.useMergedRef(V,I);(0,m.useEffect)(()=>{let e=V.current;if(!e||d===`static`||!f)return;let t=d===`fixed`?document.documentElement:E(e),n=t.style.scrollPaddingTop,r=()=>{t.style.scrollPaddingTop=`${e.offsetHeight}px`};r();let i=typeof ResizeObserver>`u`?null:new ResizeObserver(r);return i?.observe(e),()=>{i?.disconnect(),t.style.scrollPaddingTop=n}},[d,f]);let[U,W]=t.useControllableState({value:O,defaultValue:k,onChange:A}),G=`${(0,m.useId)()}-menu`,K=(0,m.useRef)(null),[q,J]=(0,m.useState)(0),[ee,te]=(0,m.useState)(!1),[Y,ne]=(0,m.useState)(null),X=(0,m.useCallback)(()=>(J(e=>e+1),()=>J(e=>e-1)),[]),Z=(0,m.useCallback)(e=>W(e),[W]),Q=(0,m.useRef)(!1);(0,m.useEffect)(()=>{if(!U||typeof window>`u`||!window.matchMedia)return;let t=window.matchMedia(`(min-width: ${e.breakpoints[D]}px)`),n=()=>{t.matches&&(Q.current=!0,Z(!1))};return n(),t.addEventListener(`change`,n),()=>t.removeEventListener(`change`,n)},[U,D,Z]),(0,m.useEffect)(()=>{if(U||!Q.current)return;Q.current=!1;let e=document.activeElement;(!e||e===document.body||document.getElementById(G)?.contains(e))&&K.current?.closest(`header`)?.querySelector(`nav a[href], nav button:not([disabled])`)?.focus()},[U,G]),(0,m.useEffect)(()=>{if(!C||typeof window>`u`)return;let e=0,t=()=>{e=0,te(window.scrollY>0)},n=()=>{e||=window.requestAnimationFrame(t)};return t(),window.addEventListener(`scroll`,n,{passive:!0}),()=>{window.removeEventListener(`scroll`,n),e&&window.cancelAnimationFrame(e)}},[C]);let re=(0,m.useMemo)(()=>({open:U,setOpen:Z,menuId:G,menuTitle:B,menuSide:N,toggleRef:K,registerNav:X,activeTone:P,variant:r,openGroup:Y,setOpenGroup:ne}),[U,Z,G,B,N,X,P,r,Y]),$=C&&ee,ie=q>0;return(0,h.jsx)(x.Provider,{value:re,children:(0,h.jsx)(`header`,{"data-variant":r,...L,ref:H,className:s.cx(p.default.root,_[r],v[o],y[d],b[D],g&&p.default.bordered,(S||$)&&p.default.elevated,$&&p.default.scrolled,F),children:(0,h.jsxs)(u.Container,{size:T,fluid:!w,gutter:`responsive`,className:p.default.inner,children:[n,ie&&(0,h.jsx)(c.IconButton,{ref:K,"aria-label":z,"aria-haspopup":`dialog`,"aria-expanded":U,"aria-controls":U?G:void 0,variant:r===`solid`?`solid`:`ghost`,tone:r===`solid`?`primary`:`neutral`,size:o,className:p.default.toggle,onClick:()=>Z(!U),children:(0,h.jsx)(l.MenuIcon,{})})]})})})};D.displayName=`Navbar`;function O(e){let{as:t,className:n,children:r,...i}=e,a=t!==void 0||i.href!==void 0;return(0,h.jsx)(t??(a?`a`:`div`),{...i,className:s.cx(p.default.brand,a&&p.default.brandLink,n),children:r})}O.displayName=`Navbar.Brand`;var k={start:p.default.alignStart,center:p.default.alignCenter,end:p.default.alignEnd},A=o.responsiveClasses(p.default,`navGap`),j=({children:e,align:t=`start`,gap:n,className:r,style:a,"aria-label":c,"aria-labelledby":l,...u})=>{let d=i.useMessages(),g=c??d.navbar.nav,{open:_,setOpen:v,menuId:y,menuTitle:b,menuSide:x,toggleRef:w,registerNav:T}=S(`Navbar.Nav`);(0,m.useLayoutEffect)(()=>T(),[T]);let E={},D=[];return o.responsiveVars(`navbar-nav-gap`,n,e=>`var(--space-${e})`,A,E,D),(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(`nav`,{"aria-label":l?void 0:g,"aria-labelledby":l,...u,className:s.cx(p.default.nav,k[t],...D,r),style:{...E,...a},children:(0,h.jsx)(C.Provider,{value:`bar`,children:(0,h.jsx)(`ul`,{className:p.default.list,children:e})})}),(0,h.jsx)(f.Drawer,{open:_,onOpenChange:v,side:x,size:`sm`,finalFocusRef:w,children:(0,h.jsxs)(f.Drawer.Content,{id:y,children:[(0,h.jsx)(f.Drawer.Header,{children:(0,h.jsx)(f.Drawer.Title,{children:b})}),(0,h.jsx)(f.Drawer.Body,{children:(0,h.jsx)(`nav`,{"aria-label":l?void 0:g,"aria-labelledby":l,children:(0,h.jsx)(C.Provider,{value:`drawer`,children:(0,h.jsx)(`ul`,{className:p.default.drawerList,children:e})})})})]})})]})};j.displayName=`Navbar.Nav`;var M=({className:e,children:t,showIn:n=`both`,ref:r,...i})=>{let a=(0,m.useContext)(C);return n!==`both`&&n!==a?null:(0,h.jsx)(`li`,{...i,ref:a===`drawer`?void 0:r,className:s.cx(p.default.item,a===`drawer`&&p.default.itemDrawer,e),children:(0,h.jsx)(T.Provider,{value:!0,children:t})})};M.displayName=`Navbar.Item`;var N=e=>e!==void 0&&e!==``&&e!==0;function P(e,t,n,r){if(!N(e))return null;let i=r&&n===void 0,a={variant:i?`inverse`:`solid`,tone:i?`primary`:n??`accent`,size:`sm`,label:t};return(0,h.jsxs)(h.Fragment,{children:[` `,(0,h.jsx)(`span`,{className:p.default.linkBadge,children:typeof e==`number`?(0,h.jsx)(d.Badge,{...a,count:e}):(0,h.jsx)(d.Badge,{...a,children:e})})]})}var F={bar:p.default.linkBar,drawer:p.default.linkDrawer,panel:p.default.linkPanel};function I(e){let{as:t,active:n=!1,icon:r,badge:i,badgeLabel:a,badgeTone:o,className:c,children:l,onClick:u,"aria-current":d,ref:f,..._}=e,v=(0,m.useContext)(C),y=(0,m.useContext)(T),b=(0,m.useContext)(x),S=(0,m.useContext)(w),E=t??`a`,D=e=>{u?.(e),v===`drawer`&&b?.setOpen(!1),v===`panel`&&S?.()},O=(0,h.jsxs)(E,{..._,ref:v===`drawer`?void 0:f,"aria-current":n?`page`:d,onClick:D,className:s.cx(p.default.link,F[v],n&&p.default.active,n&&g[b?.activeTone??`accent`],c),children:[r!=null&&(0,h.jsx)(`span`,{className:p.default.linkIcon,"aria-hidden":`true`,children:r}),(0,h.jsx)(`span`,{className:p.default.linkLabel,children:l}),P(i,a,o,v===`bar`&&b?.variant===`solid`)]});return y?O:(0,h.jsx)(`li`,{className:s.cx(p.default.item,v!==`bar`&&p.default.itemDrawer),children:O})}I.displayName=`Navbar.Link`;var L=e=>e?`bottom-end`:`bottom-start`,R=({label:e,icon:i,children:a,active:o=!1,badge:c,badgeLabel:u,badgeTone:d,open:f,defaultOpen:_=!1,onOpenChange:v,disabled:y=!1,className:b,ref:x,...T})=>{let E=(0,m.useContext)(C),D=S(`Navbar.Group`),O=E===`bar`,k=(0,m.useId)(),A=`${k}-list`,j=(0,m.useRef)(null),M=(0,m.useRef)(null),N=(0,m.useRef)(!1),[F,I]=t.useControllableState({value:O?f:void 0,defaultValue:O?_:_||o,onChange:O?v:void 0}),{openGroup:R,setOpenGroup:z}=D;(0,m.useEffect)(()=>{O&&F&&z(k)},[O,F,k,z]),(0,m.useEffect)(()=>{O&&R!==null&&R!==k&&I(!1)},[O,R,k,I]);let B=(0,m.useCallback)(e=>{I(!1),e&&j.current?.focus()},[I]);n.useDismiss([j,M],{active:O&&F,onDismiss:e=>B(e.type===`keydown`)});let[V,H]=(0,m.useState)(!1);(0,m.useLayoutEffect)(()=>{O&&F&&j.current&&H(getComputedStyle(j.current).direction===`rtl`)},[O,F]);let U=r.useFloatingPosition(j,M,{open:O&&F,placement:L(V),offset:4}),W=(0,h.jsxs)(`button`,{ref:j,type:`button`,disabled:y,"aria-expanded":F,"aria-controls":F?A:void 0,onClick:()=>I(!F),className:s.cx(p.default.link,p.default.groupButton,O?p.default.linkBar:p.default.linkDrawer,F&&p.default.groupOpen,o&&p.default.active,o&&g[D.activeTone]),children:[i!=null&&(0,h.jsx)(`span`,{className:p.default.linkIcon,"aria-hidden":`true`,children:i}),(0,h.jsx)(`span`,{className:p.default.linkLabel,children:e}),P(c,u,d,O&&D.variant===`solid`),(0,h.jsx)(`span`,{className:p.default.chevron,"aria-hidden":`true`,children:(0,h.jsx)(l.ChevronDownIcon,{})})]});return O?(0,h.jsxs)(`li`,{...T,ref:x,className:s.cx(p.default.item,b),onPointerDown:()=>{N.current=!0,window.setTimeout(()=>{N.current=!1},0)},onBlur:e=>{let t=e.relatedTarget,n=N.current;N.current=!1,F&&(t?!e.currentTarget.contains(t):!n)&&I(!1)},children:[W,F&&(0,h.jsx)(`div`,{ref:M,className:p.default.panelPositioner,style:U.style,children:(0,h.jsx)(C.Provider,{value:`panel`,children:(0,h.jsx)(w.Provider,{value:()=>B(!1),children:(0,h.jsx)(`ul`,{id:A,className:p.default.panel,children:a})})})})]}):(0,h.jsxs)(`li`,{...T,className:s.cx(p.default.item,p.default.itemDrawer,b),children:[W,F&&(0,h.jsx)(`ul`,{id:A,className:p.default.drawerSubList,children:a})]})};R.displayName=`Navbar.Group`;var z=({className:e,children:t,...n})=>(0,h.jsx)(`div`,{...n,className:s.cx(p.default.actions,e),children:t});z.displayName=`Navbar.Actions`;var B=Object.assign(D,{Brand:O,Nav:j,Item:M,Link:I,Group:R,Actions:z});exports.Navbar=B,exports.NavbarActions=z,exports.NavbarBrand=O,exports.NavbarGroup=R,exports.NavbarItem=M,exports.NavbarLink=I,exports.NavbarNav=j;

package/dist/components/navigation/Navbar/Navbar.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
-import { Responsive, Size, Space } from '../../../types/common';
+import { Responsive, Size, Space, Tone } from '../../../types/common';
 import { ContainerSize } from '../../layout/Container';
 /**
  * Visual style of the bar.
@@ -178,9 +178,26 @@ interface NavbarLinkOwnProps<C extends ElementType> {
     active?: boolean;
     /** Decorative icon before the label. Hidden from assistive technology. */
     icon?: ReactNode;
+    /**
+     * A count (rendered with `Badge` `count`, capped at 99+, hidden at 0) or a
+     * short text such as "New", after the label. It's part of the link's name
+     * ("Messages 3"), in the bar and the mobile menu.
+     */
+    badge?: NavbarBadgeValue;
+    /** Screen-reader text for the badge, e.g. "3 unread messages". Replaces the visible badge text in the accessible name. */
+    badgeLabel?: string;
+    /**
+     * Badge color. By default `accent`, except in the `solid` bar, where the
+     * badge takes the bar's own colors swapped (a `Badge` `variant="inverse"`)
+     * so it stands out from the bar in both themes. Setting it always gives a
+     * solid badge in that tone.
+     */
+    badgeTone?: Tone;
     /** The visible label. */
     children?: ReactNode;
 }
+/** A count or short text shown in a link's badge. */
+export type NavbarBadgeValue = number | string;
 /** Props for `Navbar.Link`, typed for the component chosen with `as`. */
 export type NavbarLinkProps<C extends ElementType = "a"> = NavbarLinkOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof NavbarLinkOwnProps<C>>;
 /**
@@ -195,6 +212,48 @@ declare function NavbarLink<C extends ElementType = "a">(props: NavbarLinkProps<
 declare namespace NavbarLink {
     var displayName: string;
 }
+export interface NavbarGroupProps extends Omit<ComponentPropsWithRef<"li">, "children"> {
+    /** The group button's visible label, and its accessible name. */
+    label: ReactNode;
+    /** Decorative icon before the label. */
+    icon?: ReactNode;
+    /** The group's `Navbar.Link`s. */
+    children?: ReactNode;
+    /**
+     * One of the group's links is the current page. The button then shows the
+     * active look (it doesn't set `aria-current`; the link does), and the
+     * group starts open in the mobile menu. @default false
+     */
+    active?: boolean;
+    /** A count or short text on the group button, like `Navbar.Link`'s `badge`. */
+    badge?: NavbarBadgeValue;
+    /** Screen-reader text for the badge. */
+    badgeLabel?: string;
+    /** Badge color. Same default as `Navbar.Link`'s `badgeTone` (inverse on the solid bar). */
+    badgeTone?: Tone;
+    /** Controlled open state of the dropdown in the bar. */
+    open?: boolean;
+    /** Initial open state of the dropdown when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state of the dropdown in the bar. */
+    onOpenChange?: (open: boolean) => void;
+    /** Disables the group button. @default false */
+    disabled?: boolean;
+}
+/**
+ * A group of links under one button, following the WAI-ARIA disclosure
+ * navigation pattern (not a `menu`): the button has `aria-expanded`, and the
+ * links stay ordinary links in the Tab order.
+ *
+ * - In the bar: the button opens a dropdown below it. Escape closes it and
+ *   returns focus to the button; so do a press outside, Tab moving focus out
+ *   of the group, and activating a link. Opening one group closes the others.
+ * - In the mobile menu: an expandable section with the links indented below.
+ */
+declare const NavbarGroup: {
+    ({ label, icon, children, active, badge, badgeLabel, badgeTone, open: openProp, defaultOpen, onOpenChange, disabled, className, ref, ...rest }: NavbarGroupProps): import("react").JSX.Element;
+    displayName: string;
+};
 export interface NavbarActionsProps extends ComponentPropsWithRef<"div"> {
     /** Buttons, an avatar, a theme toggle, a search field. Stays visible at every width, so keep it short on phones. */
     children?: ReactNode;
@@ -237,9 +296,13 @@ export declare const Navbar: {
         displayName: string;
     };
     Link: typeof NavbarLink;
+    Group: {
+        ({ label, icon, children, active, badge, badgeLabel, badgeTone, open: openProp, defaultOpen, onOpenChange, disabled, className, ref, ...rest }: NavbarGroupProps): import("react").JSX.Element;
+        displayName: string;
+    };
     Actions: {
         ({ className, children, ...rest }: NavbarActionsProps): import("react").JSX.Element;
         displayName: string;
     };
 };
-export { NavbarActions, NavbarBrand, NavbarItem, NavbarLink, NavbarNav };
+export { NavbarActions, NavbarBrand, NavbarGroup, NavbarItem, NavbarLink, NavbarNav };