quirk-ui 0.1.82 → 0.1.83

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

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

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

@@ -104,7 +104,21 @@ function an({
 }) {
   const [f, Q] = v(!1), [Y, N] = v(null), [ve, ke] = v(0), [ge, Ne] = v(!1), [ye, $e] = v(null), [d, I] = v([]), [R, G] = v(
     0
-  ), [we, Z] = v(null), [M, Ce] = v(!1), [B, O] = v("forward"), P = F(null), y = F(null), T = F(null), q = F(/* @__PURE__ */ new Map()), ee = () => /* @__PURE__ */ n("div", { className: `${e.linkWrapper} ${e.parent}`, children: /* @__PURE__ */ n("div", { className: `${e.linkItem} ${e.themeToggle}`, children: x }) }), V = () => /* @__PURE__ */ n(
+  ), [we, Z] = v(null), [M, Ce] = v(!1), [B, O] = v("forward"), P = F(null), y = F(null), T = F(null), q = F(/* @__PURE__ */ new Map()), ee = () => /* @__PURE__ */ n(
+    "div",
+    {
+      className: `${e.linkWrapper} ${e.parent}`,
+      role: "presentation",
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          className: `${e.linkItem} ${e.themeToggle}`,
+          role: "presentation",
+          children: x
+        }
+      )
+    }
+  ), V = () => /* @__PURE__ */ n(
     "div",
     {
       className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,

package/package.json

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