quirk-ui 0.0.503 → 0.0.504

package/dist/core/components/NavBar/index.cjs

@@ -13,4 +13,4 @@
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const Se=[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]],_e=G.createLucideIcon("search",Se),Le={standard:e.styles.standard,transparent:e.styles.transparent},Me={left:e.styles.left,center:e.styles.center,right:e.styles.right},Ee=({spotlight:a,renderText:b})=>{var t,C,k,p,j,S,m,_,L,M,y;const w=(t=a.image)==null?void 0:t.asset.altText,x=((C=a.callToAction.linkOptions)==null?void 0:C.linkType)==="external";let u="#";return((k=a.callToAction.linkOptions)==null?void 0:k.linkType)==="external"&&((p=a.callToAction.linkOptions)!=null&&p.externalUrl)?u=(j=a.callToAction.linkOptions)==null?void 0:j.externalUrl:((S=a.callToAction.linkOptions)==null?void 0:S.linkType)==="internal"&&((_=(m=a.callToAction.linkOptions)==null?void 0:m.internalUrl)!=null&&_.slug.current)&&(u=`/${(M=(L=a.callToAction.linkOptions)==null?void 0:L.internalUrl)==null?void 0:M.slug.current}`),s.jsxs("div",{className:e.styles.spotlight,children:[a.image&&s.jsx("div",{className:e.styles.imageWrapper,children:s.jsx("img",{src:(a==null?void 0:a.image.imageUrl)??"",alt:w||a.image.asset.description||"Content image",width:600,height:400})}),s.jsxs("div",{className:e.styles.content,children:[a.title&&s.jsx("div",{className:e.styles.title,children:b==null?void 0:b(a.title,e.styles.title)}),a.description&&s.jsx("div",{className:e.styles.description,children:b==null?void 0:b(a.description,e.styles.description)})]}),((y=a.callToAction)==null?void 0:y.linkOptions)&&s.jsx("div",{className:e.styles.actions,children:s.jsx(O.CallToAction,{as:"a",variant:a.callToAction.variant??"primary",href:u,target:x?"_blank":"_self",rel:x?"noopener noreferrer":"","aria-label":a.callToAction.ariaLabel||a.callToAction.label,children:a.callToAction.label})})]})};function Ae({renderText:a,title:b,logo:w,items:x,groups:u,utilityItems:t,isSticky:C=!1,showSearch:k=!0,showLocaleSelect:p=!0,alignment:j="right",variant:S="standard",navigationType:m="default",searchComponent:_,localeSelectComponent:L,className:M}){const[y,U]=r.useState(!1),[X,f]=r.useState(null),[ce,re]=r.useState(0),[oe,de]=r.useState(!1),[ye,ue]=r.useState(null),[o,N]=r.useState([]),[E,q]=r.useState(0),[he,H]=r.useState(null),[$,be]=r.useState(!1),[A,T]=r.useState("forward"),B=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(te.Modal,{className:e.styles.searchModal,trigger:s.jsx("button",{title:"Search","aria-label":"Search",className:e.styles.search,children:s.jsx(_e,{size:16})}),content:_})})}),V=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(te.Modal,{className:e.styles.localeModal,trigger:s.jsx("button",{title:"Locale Select","aria-label":"Locale Select",role:"menuitem",className:e.styles.locale,children:s.jsx(ge,{size:16})}),content:L})})});r.useEffect(()=>{if(typeof window<"u"){const l=()=>{const n=window.innerWidth<768;be(n)};return l(),window.addEventListener("resize",l),()=>window.removeEventListener("resize",l)}},[]);const fe=()=>{N([])},xe=l=>{T("forward"),N([{title:l.title,primary:l.primaryItems??[],secondary:l.secondaryItems??[],description:""}])},J=l=>{T("forward"),N(n=>[...n,{title:l.label,primary:l.sublinks??[],secondary:[],description:l.description}])},me=()=>{T("backward"),N(l=>l.slice(0,-1))},F=r.useRef(null),g=r.useRef(null),W=r.useRef(new Map),ke=()=>{U(l=>{const n=!l;return n||(N([]),T("forward"),f(null)),n})},K=l=>{const n=W.current.get(l);if(n&&g.current){const d=n.getBoundingClientRect(),h=g.current.getBoundingClientRect(),c=d.left-h.left+d.width/2;ue(c)}},je=l=>{f(n=>n===l?null:l)},Q=r.useCallback(l=>{F.current&&!F.current.contains(l.target)&&f(null)},[]),Y=r.useCallback(()=>{Z(),typeof window<"u"&&window.innerWidth>768&&(U(!1),f(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),Z=r.useCallback(()=>{if(g.current){const l=g.current.getBoundingClientRect().width;re(l),de(!0)}},[]);r.useEffect(()=>{const l=typeof window<"u",n=typeof document<"u";return l&&window.addEventListener("resize",Y),n&&document.addEventListener("click",Q),Z(),()=>{l&&window.removeEventListener("resize",Y),n&&document.removeEventListener("click",Q)}},[]),r.useEffect(()=>{if(typeof document<"u")return y?setTimeout(()=>{I.lockScroll()},0):I.unlockScroll(),()=>I.unlockScroll()},[y]);const ve=l=>l.map((n,d)=>{var P,ee,se,le,ne;const h=`group-${d}`,z=he===d,c=(P=n.primaryItems)==null?void 0:P[E??0];return s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{H(d),f(h),K(h)},onMouseLeave:()=>{H(null),q(0),f(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:i=>{W.current.set(h,i)},role:"menuitem","aria-haspopup":"true","aria-expanded":z,"aria-controls":`submenu-${d}`,className:`${e.styles.sublinkToggle} ${z?e.styles.open:""} `,children:[n.title,s.jsx(Ne.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${d}`,className:`${e.styles.sublinks} ${z?e.styles.show:""}`,role:"menu","aria-label":`${n.title} submenu`,children:s.jsx("div",{children:s.jsxs("div",{className:`${e.styles.sublinksInner} ${n.spotlight?e.styles.withSpotlight:e.styles.withoutSpotlight}`,children:[s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.primaryColumn}`,children:[s.jsx("div",{className:e.styles.linkItem}),(ee=n.primaryItems)==null?void 0:ee.map((i,v)=>i.href?s.jsxs("a",{href:i.href,className:`${e.styles.link} ${E===v?e.styles.open:""}`,target:i.isExternal?"_blank":"_self",rel:i.isExternal?"noopener noreferrer":void 0,onClick:()=>{var ae;f(null),(ae=i.onClick)==null||ae.call(i)},onMouseEnter:()=>i.sublinks?q(v):null,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[i.label,i.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:i.subtitle})]}),i.isExternal&&s.jsx(D.ExternalLink,{className:e.styles.newTabIcon,size:16})]},i._key??v):s.jsx("button",{className:`${e.styles.sublinkToggle} ${E===v?e.styles.open:""}`,onMouseEnter:()=>q(v),children:s.jsxs("span",{className:e.styles.linkContent,children:[i.label,i.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:i.subtitle})]})},i._key??v))]}),(c==null?void 0:c.sublinks)&&((se=c==null?void 0:c.sublinks)==null?void 0:se.length)>0&&s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.fadeInFromLeft}`,children:[(c==null?void 0:c.description)&&s.jsxs("div",{className:e.styles.sublinksDescription,children:[s.jsx("p",{children:"TEXT HERE"}),a==null?void 0:a(c.description)]}),(c==null?void 0:c.sublinks)&&R(c.sublinks,`${h}-${E}`)]},`${c.label}-${(le=c==null?void 0:c.sublinks)==null?void 0:le.length}`),(n==null?void 0:n.secondaryItems)&&((ne=n==null?void 0:n.secondaryItems)==null?void 0:ne.length)>0&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.secondaryColumn}`,children:n.secondaryItems&&n.secondaryItems.length>0&&R(n.secondaryItems,`${h}-secondary`)}),n.spotlight&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.spotlightColumn}`,children:s.jsx(Ee,{spotlight:n.spotlight,renderText:a??(i=>String(i))})})]})})})]},n._key??`group-${d}`)}),R=(l,n="")=>l.map(d=>{const h=`${n}/${d.label}`;return s.jsx(e.NavLink,{link:d,path:h,parentPath:n,openPath:X,togglePath:je,updateTriangleIndicator:K,setOpenPath:f,renderLinks:R,buttonRefs:W},d._key??h)});return s.jsx("header",{ref:F,className:`${M??""} ${Me[j]} ${Le[S]} ${e.styles.navbar} ${C?e.styles.sticky:""} ${u&&u.length?e.styles.advanced:e.styles.default}`,"aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!t||t.length===0)&&j!=="center"?e.styles.twoColumn:""}`,children:[w?s.jsx("div",{className:e.styles.logo,children:w}):s.jsx("div",{className:e.styles.title,children:b}),s.jsx("nav",{ref:g,style:{left:j==="center"?`calc(50% - ${ce/2}px)`:"0"},className:`${e.styles.nav} ${y?e.styles.open:""} ${oe?e.styles.visible:e.styles.hidden}`,id:"main-menu",role:"menubar","aria-label":"Main navigation",children:s.jsxs("div",{className:e.styles.navInner,children:[s.jsx("svg",{style:{left:`${ye}px`},className:`${e.styles.triangle} ${X?e.styles.show:""}`,width:16,height:12,viewBox:"0 0 100 75",xmlns:"http://www.w3.org/2000/svg",children:s.jsx("polygon",{points:"50,5 95,70 5,70",strokeLinejoin:"round",fill:"white",stroke:"white"})}),m==="default"&&x&&s.jsxs("div",{className:e.styles.grid,children:[x&&x.length>0&&R(x),k&&!$&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(B,{})]}),p&&s.jsx(V,{})]}),!$&&m==="advanced"&&u&&s.jsxs("div",{className:e.styles.grid,children:[u.length>0&&ve(u),k&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(B,{})]}),p&&s.jsx(V,{})]}),$&&m==="advanced"&&y&&o.length===0&&u&&s.jsx("div",{className:`${e.styles.mobileMenu}`,children:u.map((l,n)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>xe(l),children:l.title})},l._key??n))}),$&&m==="advanced"&&y&&o.length>0&&s.jsxs("div",{className:`${e.styles.mobileMenuSlide} `,children:[s.jsx("button",{className:e.styles.back,onClick:o.length===1?fe:me,children:s.jsx(O.ChevronLeft,{size:18,"aria-hidden":"true",focusable:"false"})}),o[o.length-1].description&&s.jsx("div",{className:`${e.styles.sublinksDescription} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:a==null?void 0:a(o[o.length-1].description)}),o[o.length-1].primary.map((l,n)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:l.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>J(l),children:s.jsxs("span",{className:e.styles.linkContent,children:[l.label,l.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:l.subtitle})]})}):s.jsxs("a",{href:l.href,className:e.styles.link,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[l.label,l.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:l.subtitle})]}),l.isExternal&&s.jsx(D.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},l._key??`primary-${n}`)),o[o.length-1].secondary.length>0&&s.jsx("hr",{className:e.styles.groupDivider}),o[o.length-1].secondary.map((l,n)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:l.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>J(l),children:l.label}):s.jsxs("a",{href:l.href,className:e.styles.link,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,role:"menuitem",children:[l.label,l.isExternal&&s.jsx(D.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},l._key??`secondary-${n}`))]},`stack-${o.length}`)]})}),t&&t.length>0&&s.jsx("nav",{className:e.styles.utility,"aria-label":"Utility navigation",children:s.jsx(ie.ButtonGroup,{children:t.map((l,n)=>s.jsx(O.CallToAction,{as:"a",href:l.href??"/",variant:l.variant??"primary",displayType:l.displayType??"text",imageSrc:l.imageSrc,imageAlt:l.imageAlt,"aria-label":l.ariaLabel??l.label,icon:l.icon,iconAlignment:l.iconAlignment,children:l.imageSrc?s.jsx("img",{src:l.imageSrc,alt:l.imageAlt??l.ariaLabel??l.label}):l.label},l._key||n))})}),t&&t.length>0&&s.jsx("nav",{"aria-label":"Utility navigation",className:`${e.styles.utilityMobile} ${y?e.styles.open:""}`,children:s.jsx(ie.ButtonGroup,{alignment:"center",children:s.jsx(O.CallToAction,{as:"a",href:t[1].href??"/",variant:t[1].variant??"primary",displayType:t[1].displayType??"text",imageSrc:t[1].imageSrc,imageAlt:t[1].imageAlt,"aria-label":t[1].ariaLabel??t[1].label,icon:t[1].icon,iconAlignment:t[1].iconAlignment,children:t[1].imageSrc?s.jsx("img",{src:t[1].imageSrc,"aria-label":t[1].imageAlt??t[1].ariaLabel??t[1].label}):t[1].label})})}),s.jsxs("div",{className:e.styles.mobileButtons,children:[$&&k&&s.jsx(B,{}),s.jsx("button",{className:e.styles.menuToggle,onClick:ke,"aria-label":y?"Close menu":"Open menu","aria-expanded":y,"aria-controls":"main-menu",children:y?s.jsx(pe.X,{size:24}):s.jsx(Ce,{size:24})})]})]})})}exports.Navbar=Ae;
+ */const Se=[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]],_e=G.createLucideIcon("search",Se),Le={standard:e.styles.standard,transparent:e.styles.transparent},Me={left:e.styles.left,center:e.styles.center,right:e.styles.right},Ee=({spotlight:a,renderText:b})=>{var t,C,k,p,j,S,x,_,L,M,y;const w=(t=a.image)==null?void 0:t.asset.altText,f=((C=a.callToAction.linkOptions)==null?void 0:C.linkType)==="external";let u="#";return((k=a.callToAction.linkOptions)==null?void 0:k.linkType)==="external"&&((p=a.callToAction.linkOptions)!=null&&p.externalUrl)?u=(j=a.callToAction.linkOptions)==null?void 0:j.externalUrl:((S=a.callToAction.linkOptions)==null?void 0:S.linkType)==="internal"&&((_=(x=a.callToAction.linkOptions)==null?void 0:x.internalUrl)!=null&&_.slug.current)&&(u=`/${(M=(L=a.callToAction.linkOptions)==null?void 0:L.internalUrl)==null?void 0:M.slug.current}`),s.jsxs("div",{className:e.styles.spotlight,children:[a.image&&s.jsx("div",{className:e.styles.imageWrapper,children:s.jsx("img",{src:(a==null?void 0:a.image.imageUrl)??"",alt:w||a.image.asset.description||"Content image",width:600,height:400})}),s.jsxs("div",{className:e.styles.content,children:[a.title&&s.jsx("div",{className:e.styles.title,children:b==null?void 0:b(a.title,e.styles.title)}),a.description&&s.jsx("div",{className:e.styles.description,children:b==null?void 0:b(a.description,e.styles.description)})]}),((y=a.callToAction)==null?void 0:y.linkOptions)&&s.jsx("div",{className:e.styles.actions,children:s.jsx(O.CallToAction,{as:"a",variant:a.callToAction.variant??"primary",href:u,target:f?"_blank":"_self",rel:f?"noopener noreferrer":"","aria-label":a.callToAction.ariaLabel||a.callToAction.label,children:a.callToAction.label})})]})};function Ae({renderText:a,title:b,logo:w,items:f,groups:u,utilityItems:t,isSticky:C=!1,showSearch:k=!0,showLocaleSelect:p=!0,alignment:j="right",variant:S="standard",navigationType:x="default",searchComponent:_,localeSelectComponent:L,className:M}){const[y,U]=r.useState(!1),[X,m]=r.useState(null),[ce,re]=r.useState(0),[oe,de]=r.useState(!1),[ye,ue]=r.useState(null),[o,N]=r.useState([]),[E,q]=r.useState(0),[he,H]=r.useState(null),[$,be]=r.useState(!1),[A,T]=r.useState("forward"),B=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(te.Modal,{className:e.styles.searchModal,trigger:s.jsx("button",{title:"Search","aria-label":"Search",className:e.styles.search,children:s.jsx(_e,{size:16})}),content:_})})}),V=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(te.Modal,{className:e.styles.localeModal,trigger:s.jsx("button",{title:"Locale Select","aria-label":"Locale Select",role:"menuitem",className:e.styles.locale,children:s.jsx(ge,{size:16})}),content:L})})});r.useEffect(()=>{if(typeof window<"u"){const l=()=>{const n=window.innerWidth<768;be(n)};return l(),window.addEventListener("resize",l),()=>window.removeEventListener("resize",l)}},[]);const me=()=>{N([])},fe=l=>{T("forward"),N([{title:l.title,primary:l.primaryItems??[],secondary:l.secondaryItems??[],description:""}])},J=l=>{T("forward"),N(n=>[...n,{title:l.label,primary:l.sublinks??[],secondary:[],description:l.description}])},xe=()=>{T("backward"),N(l=>l.slice(0,-1))},F=r.useRef(null),g=r.useRef(null),W=r.useRef(new Map),ke=()=>{U(l=>{const n=!l;return n||(N([]),T("forward"),m(null)),n})},K=l=>{const n=W.current.get(l);if(n&&g.current){const d=n.getBoundingClientRect(),h=g.current.getBoundingClientRect(),c=d.left-h.left+d.width/2;ue(c)}},je=l=>{m(n=>n===l?null:l)},Q=r.useCallback(l=>{F.current&&!F.current.contains(l.target)&&m(null)},[]),Y=r.useCallback(()=>{Z(),typeof window<"u"&&window.innerWidth>768&&(U(!1),m(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),Z=r.useCallback(()=>{if(g.current){const l=g.current.getBoundingClientRect().width;re(l),de(!0)}},[]);r.useEffect(()=>{const l=typeof window<"u",n=typeof document<"u";return l&&window.addEventListener("resize",Y),n&&document.addEventListener("click",Q),Z(),()=>{l&&window.removeEventListener("resize",Y),n&&document.removeEventListener("click",Q)}},[]),r.useEffect(()=>{if(typeof document<"u")return y?setTimeout(()=>{I.lockScroll()},0):I.unlockScroll(),()=>I.unlockScroll()},[y]);const ve=l=>l.map((n,d)=>{var P,ee,se,le,ne;const h=`group-${d}`,z=he===d,c=(P=n.primaryItems)==null?void 0:P[E??0];return s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{H(d),m(h),K(h)},onMouseLeave:()=>{H(null),q(0),m(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:i=>{W.current.set(h,i)},role:"menuitem","aria-haspopup":"true","aria-expanded":z,"aria-controls":`submenu-${d}`,className:`${e.styles.sublinkToggle} ${z?e.styles.open:""} `,children:[n.title,s.jsx(Ne.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${d}`,className:`${e.styles.sublinks} ${z?e.styles.show:""}`,role:"menu","aria-label":`${n.title} submenu`,children:s.jsx("div",{children:s.jsxs("div",{className:`${e.styles.sublinksInner} ${n.spotlight?e.styles.withSpotlight:e.styles.withoutSpotlight}`,children:[s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.primaryColumn}`,children:[s.jsx("div",{className:e.styles.linkItem}),(ee=n.primaryItems)==null?void 0:ee.map((i,v)=>i.href?s.jsxs("a",{href:i.href,className:`${e.styles.link} ${E===v?e.styles.open:""}`,target:i.isExternal?"_blank":"_self",rel:i.isExternal?"noopener noreferrer":void 0,onClick:()=>{var ae;m(null),(ae=i.onClick)==null||ae.call(i)},onMouseEnter:()=>i.sublinks?q(v):null,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[i.label,i.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:i.subtitle})]}),i.isExternal&&s.jsx(D.ExternalLink,{className:e.styles.newTabIcon,size:16})]},i._key??v):s.jsx("button",{role:"menuitem",className:`${e.styles.sublinkToggle} ${E===v?e.styles.open:""}`,onMouseEnter:()=>q(v),children:s.jsxs("span",{className:e.styles.linkContent,children:[i.label,i.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:i.subtitle})]})},i._key??v))]}),(c==null?void 0:c.sublinks)&&((se=c==null?void 0:c.sublinks)==null?void 0:se.length)>0&&s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.fadeInFromLeft}`,children:[(c==null?void 0:c.description)&&s.jsxs("div",{className:e.styles.sublinksDescription,children:[s.jsx("p",{children:"TEXT HERE"}),a==null?void 0:a(c.description)]}),(c==null?void 0:c.sublinks)&&R(c.sublinks,`${h}-${E}`)]},`${c.label}-${(le=c==null?void 0:c.sublinks)==null?void 0:le.length}`),(n==null?void 0:n.secondaryItems)&&((ne=n==null?void 0:n.secondaryItems)==null?void 0:ne.length)>0&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.secondaryColumn}`,children:n.secondaryItems&&n.secondaryItems.length>0&&R(n.secondaryItems,`${h}-secondary`)}),n.spotlight&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.spotlightColumn}`,children:s.jsx(Ee,{spotlight:n.spotlight,renderText:a??(i=>String(i))})})]})})})]},n._key??`group-${d}`)}),R=(l,n="")=>l.map(d=>{const h=`${n}/${d.label}`;return s.jsx(e.NavLink,{link:d,path:h,parentPath:n,openPath:X,togglePath:je,updateTriangleIndicator:K,setOpenPath:m,renderLinks:R,buttonRefs:W},d._key??h)});return s.jsx("header",{ref:F,className:`${M??""} ${Me[j]} ${Le[S]} ${e.styles.navbar} ${C?e.styles.sticky:""} ${u&&u.length?e.styles.advanced:e.styles.default}`,"aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!t||t.length===0)&&j!=="center"?e.styles.twoColumn:""}`,children:[w?s.jsx("div",{className:e.styles.logo,children:w}):s.jsx("div",{className:e.styles.title,children:b}),s.jsx("nav",{ref:g,style:{left:j==="center"?`calc(50% - ${ce/2}px)`:"0"},className:`${e.styles.nav} ${y?e.styles.open:""} ${oe?e.styles.visible:e.styles.hidden}`,id:"main-menu",role:"menubar","aria-label":"Main navigation",children:s.jsxs("div",{className:e.styles.navInner,children:[s.jsx("svg",{style:{left:`${ye}px`},className:`${e.styles.triangle} ${X?e.styles.show:""}`,width:16,height:12,viewBox:"0 0 100 75",xmlns:"http://www.w3.org/2000/svg",children:s.jsx("polygon",{points:"50,5 95,70 5,70",strokeLinejoin:"round",fill:"white",stroke:"white"})}),x==="default"&&f&&s.jsxs("div",{className:e.styles.grid,children:[f&&f.length>0&&R(f),k&&!$&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(B,{})]}),p&&s.jsx(V,{})]}),!$&&x==="advanced"&&u&&s.jsxs("div",{className:e.styles.grid,children:[u.length>0&&ve(u),k&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(B,{})]}),p&&s.jsx(V,{})]}),$&&x==="advanced"&&y&&o.length===0&&u&&s.jsx("div",{className:`${e.styles.mobileMenu}`,children:u.map((l,n)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:s.jsx("button",{role:"menuitem",className:e.styles.sublinkToggle,onClick:()=>fe(l),children:l.title})},l._key??n))}),$&&x==="advanced"&&y&&o.length>0&&s.jsxs("div",{className:`${e.styles.mobileMenuSlide} `,children:[s.jsx("button",{className:e.styles.back,onClick:o.length===1?me:xe,children:s.jsx(O.ChevronLeft,{size:18,"aria-hidden":"true",focusable:"false"})}),o[o.length-1].description&&s.jsx("div",{className:`${e.styles.sublinksDescription} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:a==null?void 0:a(o[o.length-1].description)}),o[o.length-1].primary.map((l,n)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:l.sublinks?s.jsx("button",{role:"menuitem",className:e.styles.sublinkToggle,onClick:()=>J(l),children:s.jsxs("span",{className:e.styles.linkContent,children:[l.label,l.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:l.subtitle})]})}):s.jsxs("a",{href:l.href,className:e.styles.link,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[l.label,l.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:l.subtitle})]}),l.isExternal&&s.jsx(D.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},l._key??`primary-${n}`)),o[o.length-1].secondary.length>0&&s.jsx("hr",{className:e.styles.groupDivider}),o[o.length-1].secondary.map((l,n)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${A==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:l.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>J(l),children:l.label}):s.jsxs("a",{href:l.href,className:e.styles.link,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,role:"menuitem",children:[l.label,l.isExternal&&s.jsx(D.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},l._key??`secondary-${n}`))]},`stack-${o.length}`)]})}),t&&t.length>0&&s.jsx("nav",{className:e.styles.utility,"aria-label":"Utility navigation",children:s.jsx(ie.ButtonGroup,{children:t.map((l,n)=>s.jsx(O.CallToAction,{as:"a",href:l.href??"/",variant:l.variant??"primary",displayType:l.displayType??"text",imageSrc:l.imageSrc,imageAlt:l.imageAlt,"aria-label":l.ariaLabel??l.label,icon:l.icon,iconAlignment:l.iconAlignment,children:l.imageSrc?s.jsx("img",{src:l.imageSrc,alt:l.imageAlt??l.ariaLabel??l.label}):l.label},l._key||n))})}),t&&t.length>0&&s.jsx("nav",{"aria-label":"Utility navigation",className:`${e.styles.utilityMobile} ${y?e.styles.open:""}`,children:s.jsx(ie.ButtonGroup,{alignment:"center",children:s.jsx(O.CallToAction,{as:"a",href:t[1].href??"/",variant:t[1].variant??"primary",displayType:t[1].displayType??"text",imageSrc:t[1].imageSrc,imageAlt:t[1].imageAlt,"aria-label":t[1].ariaLabel??t[1].label,icon:t[1].icon,iconAlignment:t[1].iconAlignment,children:t[1].imageSrc?s.jsx("img",{src:t[1].imageSrc,"aria-label":t[1].imageAlt??t[1].ariaLabel??t[1].label}):t[1].label})})}),s.jsxs("div",{className:e.styles.mobileButtons,children:[$&&k&&s.jsx(B,{}),s.jsx("button",{className:e.styles.menuToggle,onClick:ke,"aria-label":y?"Close menu":"Open menu","aria-expanded":y,"aria-controls":"main-menu",children:y?s.jsx(pe.X,{size:24}):s.jsx(Ce,{size:24})})]})]})})}exports.Navbar=Ae;

package/dist/core/components/NavBar/index.mjs

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as c, Fragment as oe } from "react/jsx-runtime";
-import { useState as b, useEffect as U, useRef as I, useCallback as G } from "react";
+import { useState as u, useEffect as U, useRef as I, useCallback as G } from "react";
 import { Modal as te } from "../Modal/index.mjs";
 import { a as Me, C as H } from "../../../index-C-E0ib2G.js";
 import { ButtonGroup as de } from "../ButtonGroup/index.mjs";
@@ -56,7 +56,7 @@ const Oe = [
   right: e.right
 }, je = ({
   spotlight: s,
-  renderText: u
+  renderText: b
 }) => {
   var i, E, N, w, $, A, p, S, _, z, h;
   const M = (i = s.image) == null ? void 0 : i.asset.altText, v = ((E = s.callToAction.linkOptions) == null ? void 0 : E.linkType) === "external";
@@ -72,8 +72,8 @@ const Oe = [
       }
     ) }),
     /* @__PURE__ */ c("div", { className: e.content, children: [
-      s.title && /* @__PURE__ */ a("div", { className: e.title, children: u == null ? void 0 : u(s.title, e.title) }),
-      s.description && /* @__PURE__ */ a("div", { className: e.description, children: u == null ? void 0 : u(s.description, e.description) })
+      s.title && /* @__PURE__ */ a("div", { className: e.title, children: b == null ? void 0 : b(s.title, e.title) }),
+      s.description && /* @__PURE__ */ a("div", { className: e.description, children: b == null ? void 0 : b(s.description, e.description) })
     ] }),
     ((h = s.callToAction) == null ? void 0 : h.linkOptions) && /* @__PURE__ */ a("div", { className: e.actions, children: /* @__PURE__ */ a(
       H,
@@ -91,7 +91,7 @@ const Oe = [
 };
 function Ye({
   renderText: s,
-  title: u,
+  title: b,
   logo: M,
   items: v,
   groups: m,
@@ -106,9 +106,9 @@ function Ye({
   localeSelectComponent: _,
   className: z
 }) {
-  const [h, q] = b(!1), [J, k] = b(null), [me, fe] = b(0), [be, ue] = b(!1), [ke, ve] = b(null), [t, y] = b([]), [T, F] = b(
+  const [h, q] = u(!1), [J, k] = u(null), [me, fe] = u(0), [ue, be] = u(!1), [ke, ve] = u(null), [t, y] = u([]), [T, F] = u(
     0
-  ), [pe, K] = b(null), [C, Ne] = b(!1), [x, R] = b("forward"), B = () => /* @__PURE__ */ a(
+  ), [pe, K] = u(null), [C, Ne] = u(!1), [x, R] = u("forward"), B = () => /* @__PURE__ */ a(
     "div",
     {
       className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,
@@ -198,7 +198,7 @@ function Ye({
   }, []), ne = G(() => {
     if (L.current) {
       const n = L.current.getBoundingClientRect().width;
-      fe(n), ue(!0);
+      fe(n), be(!0);
     }
   }, []);
   U(() => {
@@ -293,6 +293,7 @@ function Ye({
                             ) : /* @__PURE__ */ a(
                               "button",
                               {
+                                role: "menuitem",
                                 className: `${e.sublinkToggle} ${T === g ? e.open : ""}`,
                                 onMouseEnter: () => F(g),
                                 children: /* @__PURE__ */ c("span", { className: e.linkContent, children: [
@@ -381,7 +382,7 @@ function Ye({
         {
           className: `${e.container} ${(!i || i.length === 0) && $ !== "center" ? e.twoColumn : ""}`,
           children: [
-            M ? /* @__PURE__ */ a("div", { className: e.logo, children: M }) : /* @__PURE__ */ a("div", { className: e.title, children: u }),
+            M ? /* @__PURE__ */ a("div", { className: e.logo, children: M }) : /* @__PURE__ */ a("div", { className: e.title, children: b }),
             /* @__PURE__ */ a(
               "nav",
               {
@@ -389,7 +390,7 @@ function Ye({
                 style: {
                   left: $ === "center" ? `calc(50% - ${me / 2}px)` : "0"
                 },
-                className: `${e.nav} ${h ? e.open : ""} ${be ? e.visible : e.hidden}`,
+                className: `${e.nav} ${h ? e.open : ""} ${ue ? e.visible : e.hidden}`,
                 id: "main-menu",
                 role: "menubar",
                 "aria-label": "Main navigation",
@@ -437,6 +438,7 @@ function Ye({
                       children: /* @__PURE__ */ a(
                         "button",
                         {
+                          role: "menuitem",
                           className: e.sublinkToggle,
                           onClick: () => ge(n),
                           children: n.title
@@ -481,6 +483,7 @@ function Ye({
                             children: n.sublinks ? /* @__PURE__ */ a(
                               "button",
                               {
+                                role: "menuitem",
                                 className: e.sublinkToggle,
                                 onClick: () => Y(n),
                                 children: /* @__PURE__ */ c("span", { className: e.linkContent, children: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quirk-ui",
   "private": false,
-  "version": "0.0.503",
+  "version": "0.0.504",
   "type": "module",
   "exports": {
     ".": {