quirk-ui 0.0.391 → 0.0.392

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/core/components/NavBar/index.cjs +3 -3
  2. package/dist/core/components/NavBar/index.mjs +41 -41
  3. package/package.json +1 -1
package/dist/core/components/NavBar/index.cjs CHANGED
@@ -3,14 +3,14 @@
3
3
  *
4
4
  * This source code is licensed under the ISC license.
5
5
  * See the LICENSE file in the root directory of this source tree.
6
- */const pe=[["path",{d:"M21.54 15H17a2 2 0 0 0-2 2v4.54",key:"1djwo0"}],["path",{d:"M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17",key:"1tzkfa"}],["path",{d:"M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05",key:"14pb5j"}],["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]],ge=R.createLucideIcon("earth",pe);/**
6
+ */const pe=[["path",{d:"M21.54 15H17a2 2 0 0 0-2 2v4.54",key:"1djwo0"}],["path",{d:"M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17",key:"1tzkfa"}],["path",{d:"M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05",key:"14pb5j"}],["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]],Ne=R.createLucideIcon("earth",pe);/**
7
7
  * @license lucide-react v0.488.0 - ISC
8
8
  *
9
9
  * This source code is licensed under the ISC license.
10
10
  * See the LICENSE file in the root directory of this source tree.
11
- */const Ne=[["line",{x1:"4",x2:"20",y1:"12",y2:"12",key:"1e0a9i"}],["line",{x1:"4",x2:"20",y1:"6",y2:"6",key:"1owob3"}],["line",{x1:"4",x2:"20",y1:"18",y2:"18",key:"yk5zj1"}]],$e=R.createLucideIcon("menu",Ne);/**
11
+ */const ge=[["line",{x1:"4",x2:"20",y1:"12",y2:"12",key:"1e0a9i"}],["line",{x1:"4",x2:"20",y1:"6",y2:"6",key:"1owob3"}],["line",{x1:"4",x2:"20",y1:"18",y2:"18",key:"yk5zj1"}]],$e=R.createLucideIcon("menu",ge);/**
12
12
  * @license lucide-react v0.488.0 - ISC
13
13
  *
14
14
  * This source code is licensed under the ISC license.
15
15
  * See the LICENSE file in the root directory of this source tree.
16
- */const we=[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]],Ce=R.createLucideIcon("search",we),Le={standard:e.styles.standard,transparent:e.styles.transparent},_e={left:e.styles.left,center:e.styles.center,right:e.styles.right};function Me({title:P,logo:z,items:N,groups:y,utilityItems:a,isSticky:ee=!1,showSearch:$=!0,showLocaleSelect:A=!0,alignment:w="right",variant:se="standard",navigationType:m="default",searchComponent:ne,localeSelectComponent:le,className:ae}){const[h,q]=r.useState(!1),[B,u]=r.useState(null),[te,ie]=r.useState(0),[re,ce]=r.useState(!1),[oe,de]=r.useState(null),[c,v]=r.useState([]),[j,C]=r.useState(0),[he,F]=r.useState(null),[x,ye]=r.useState(!1),[k,L]=r.useState("forward"),_=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(Y.Modal,{className:e.styles.searchModal,trigger:s.jsx("button",{title:"Search","aria-label":"Search",role:"menuitem",className:e.styles.search,children:s.jsx(Ce,{size:16})}),content:ne})})}),W=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(Y.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:le})})});r.useEffect(()=>{if(typeof window<"u"){const n=()=>{const l=window.innerWidth<768;ye(l)};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)}},[]);const ue=()=>{v([])},be=n=>{L("forward"),v([{title:n.title,primary:n.primaryItems??[],secondary:n.secondaryItems??[],description:""}])},D=n=>{L("forward"),v(l=>[...l,{title:n.label,primary:n.sublinks??[],secondary:[],description:n.description}])},xe=()=>{L("backward"),v(n=>n.slice(0,-1))},M=r.useRef(null),f=r.useRef(null),S=r.useRef(new Map),fe=()=>{q(n=>!n)},G=n=>{const l=S.current.get(n);if(l&&f.current){const o=l.getBoundingClientRect(),d=f.current.getBoundingClientRect(),t=o.left-d.left+o.width/2;de(t)}},me=n=>{u(l=>l===n?null:n)},O=r.useCallback(n=>{M.current&&!M.current.contains(n.target)&&u(null)},[]),I=r.useCallback(()=>{V(),typeof window<"u"&&window.innerWidth>768&&(q(!1),u(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),V=r.useCallback(()=>{if(f.current){const n=f.current.getBoundingClientRect().width;ie(n),ce(!0)}},[]);r.useEffect(()=>{const n=typeof window<"u",l=typeof document<"u";return n&&window.addEventListener("resize",I),l&&document.addEventListener("click",O),V(),()=>{n&&window.removeEventListener("resize",I),l&&document.removeEventListener("click",O)}},[]),r.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=h?"hidden":"",()=>{document.body.style.overflow=""}},[h]);const ve=n=>n.map((l,o)=>{var X,H,U,J,K;const d=`group-${o}`,g=he===o,t=(X=l.primaryItems)==null?void 0:X[j??0];return s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{F(o),u(d),G(d)},onMouseLeave:()=>{F(null),C(0),u(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:i=>{S.current.set(d,i)},role:"menuitem","aria-haspopup":"true","aria-expanded":g,"aria-controls":`submenu-${o}`,className:`${e.styles.sublinkToggle} ${g?e.styles.open:""} `,children:[l.title,s.jsx(ke.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${o}`,className:`${e.styles.sublinks} ${g?e.styles.show:""}`,role:"menu","aria-label":`${l.title} submenu`,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}),(H=l.primaryItems)==null?void 0:H.map((i,b)=>i.href?s.jsxs("a",{href:i.href,className:`${e.styles.link} ${j===b?e.styles.open:""}`,target:i.isExternal?"_blank":"_self",rel:i.isExternal?"noopener noreferrer":void 0,onClick:()=>{var Q;u(null),(Q=i.onClick)==null||Q.call(i)},onMouseEnter:()=>i.sublinks?C(b):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(T.ExternalLink,{className:e.styles.newTabIcon,size:16})]},i._key??b):s.jsx("button",{className:`${e.styles.sublinkToggle} ${j===b?e.styles.open:""}`,onMouseEnter:()=>C(b),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??b))]}),(t==null?void 0:t.sublinks)&&((U=t==null?void 0:t.sublinks)==null?void 0:U.length)>0&&s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.fadeInFromLeft}`,children:[(t==null?void 0:t.description)&&s.jsx("div",{className:e.styles.sublinksDescription,children:t==null?void 0:t.description}),(t==null?void 0:t.sublinks)&&p(t.sublinks,`${d}-${j}`)]},`${t.label}-${(J=t==null?void 0:t.sublinks)==null?void 0:J.length}`),(l==null?void 0:l.secondaryItems)&&((K=l==null?void 0:l.secondaryItems)==null?void 0:K.length)>0&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.secondaryColumn}`,children:l.secondaryItems.length&&p(l.secondaryItems,`${d}-secondary`)}),l.spotlight&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.spotlightColumn}`,children:l.spotlight})]})})})]},l._key??`group-${o}`)}),p=(n,l="")=>n.map(o=>{const d=`${l}/${o.label}`;return s.jsx(e.NavLink,{link:o,path:d,parentPath:l,openPath:B,togglePath:me,updateTriangleIndicator:G,setOpenPath:u,renderLinks:p,buttonRefs:S},o._key??d)});return s.jsx("header",{ref:M,className:`${ae??""} ${_e[w]} ${Le[se]} ${e.styles.navbar} ${ee?e.styles.sticky:""} ${y&&y.length?e.styles.advanced:e.styles.default}`,role:"navigation","aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!a||a.length===0)&&w!=="center"?e.styles.twoColumn:""}`,children:[z?s.jsx("div",{className:e.styles.logo,children:z}):s.jsx("div",{className:e.styles.title,children:P}),s.jsx("nav",{ref:f,style:{left:w==="center"?`calc(50% - ${te/2}px)`:"0"},className:`${e.styles.nav} ${h?e.styles.open:""} ${re?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:`${oe}px`},className:`${e.styles.triangle} ${B?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"&&N&&s.jsxs("div",{className:e.styles.grid,children:[N.length&&p(N),$&&!x&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(_,{})]}),A&&s.jsx(W,{})]}),!x&&m==="advanced"&&y&&s.jsxs("div",{className:e.styles.grid,children:[y.length&&ve(y),$&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(_,{})]}),A&&s.jsx(W,{})]}),x&&m==="advanced"&&h&&c.length===0&&y&&s.jsx("div",{className:`${e.styles.mobileMenu}`,children:y.map((n,l)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${k==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>be(n),children:n.title})},n._key??l))}),x&&m==="advanced"&&h&&c.length>0&&s.jsxs("div",{className:`${e.styles.mobileMenuSlide} `,children:[s.jsx("button",{className:e.styles.back,onClick:c.length===1?ue:xe,children:s.jsx(E.ChevronLeft,{size:18,"aria-hidden":"true",focusable:"false"})}),c[c.length-1].description&&s.jsx("div",{className:`${e.styles.sublinksDescription} ${k==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:c[c.length-1].description}),c[c.length-1].primary.map((n,l)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${k==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:n.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>D(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,role:"menuitem",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(T.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},n._key??`primary-${l}`)),c[c.length-1].secondary.length>0&&s.jsx("hr",{className:e.styles.groupDivider}),c[c.length-1].secondary.map((n,l)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${k==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:n.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>D(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,role:"menuitem",children:[n.label,n.isExternal&&s.jsx(T.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},n._key??`secondary-${l}`))]},`stack-${c.length}`)]})}),a&&a.length>0&&s.jsx("nav",{className:e.styles.utility,"aria-label":"Utility navigation",children:s.jsx(Z.ButtonGroup,{children:a.map((n,l)=>s.jsx(E.CallToAction,{as:"a",href:n.href??"/",variant:n.variant??"primary",displayType:n.displayType??"text",imageSrc:n.imageSrc,imageAlt:n.imageAlt,"aria-label":n.ariaLabel??n.label,icon:n.icon,iconAlignment:n.iconAlignment,children:n.imageSrc?s.jsx("img",{src:n.imageSrc,alt:n.imageAlt??n.ariaLabel??n.label}):n.label},n._key||l))})}),a&&a.length>0&&s.jsx("nav",{"aria-label":"Utility navigation",className:`${e.styles.utilityMobile} ${h?e.styles.open:""}`,children:s.jsx(Z.ButtonGroup,{alignment:"center",children:s.jsx(E.CallToAction,{as:"a",href:a[1].href??"/",variant:a[1].variant??"primary",displayType:a[1].displayType??"text",imageSrc:a[1].imageSrc,imageAlt:a[1].imageAlt,"aria-label":a[1].ariaLabel??a[1].label,icon:a[1].icon,iconAlignment:a[1].iconAlignment,children:a[1].imageSrc?s.jsx("img",{src:a[1].imageSrc,"aria-label":a[1].imageAlt??a[1].ariaLabel??a[1].label}):a[1].label})})}),s.jsxs("div",{className:e.styles.mobileButtons,children:[x&&$&&s.jsx(_,{}),s.jsx("button",{className:e.styles.menuToggle,onClick:fe,"aria-label":h?"Close menu":"Open menu","aria-expanded":h,"aria-controls":"main-menu",children:h?s.jsx(je.X,{size:24}):s.jsx($e,{size:24})})]})]})})}exports.Navbar=Me;
16
+ */const we=[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]],Ce=R.createLucideIcon("search",we),Le={standard:e.styles.standard,transparent:e.styles.transparent},_e={left:e.styles.left,center:e.styles.center,right:e.styles.right};function Me({title:P,logo:z,items:m,groups:y,utilityItems:a,isSticky:ee=!1,showSearch:$=!0,showLocaleSelect:A=!0,alignment:w="right",variant:se="standard",navigationType:v="default",searchComponent:ne,localeSelectComponent:le,className:ae}){const[h,q]=r.useState(!1),[B,u]=r.useState(null),[te,ie]=r.useState(0),[re,ce]=r.useState(!1),[oe,de]=r.useState(null),[c,j]=r.useState([]),[k,C]=r.useState(0),[he,F]=r.useState(null),[x,ye]=r.useState(!1),[p,L]=r.useState("forward"),_=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(Y.Modal,{className:e.styles.searchModal,trigger:s.jsx("button",{title:"Search","aria-label":"Search",role:"menuitem",className:e.styles.search,children:s.jsx(Ce,{size:16})}),content:ne})})}),W=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem,children:s.jsx(Y.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(Ne,{size:16})}),content:le})})});r.useEffect(()=>{if(typeof window<"u"){const n=()=>{const l=window.innerWidth<768;ye(l)};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)}},[]);const ue=()=>{j([])},be=n=>{L("forward"),j([{title:n.title,primary:n.primaryItems??[],secondary:n.secondaryItems??[],description:""}])},D=n=>{L("forward"),j(l=>[...l,{title:n.label,primary:n.sublinks??[],secondary:[],description:n.description}])},xe=()=>{L("backward"),j(n=>n.slice(0,-1))},M=r.useRef(null),f=r.useRef(null),S=r.useRef(new Map),fe=()=>{q(n=>!n)},G=n=>{const l=S.current.get(n);if(l&&f.current){const o=l.getBoundingClientRect(),d=f.current.getBoundingClientRect(),t=o.left-d.left+o.width/2;de(t)}},me=n=>{u(l=>l===n?null:n)},I=r.useCallback(n=>{M.current&&!M.current.contains(n.target)&&u(null)},[]),O=r.useCallback(()=>{V(),typeof window<"u"&&window.innerWidth>768&&(q(!1),u(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),V=r.useCallback(()=>{if(f.current){const n=f.current.getBoundingClientRect().width;ie(n),ce(!0)}},[]);r.useEffect(()=>{const n=typeof window<"u",l=typeof document<"u";return n&&window.addEventListener("resize",O),l&&document.addEventListener("click",I),V(),()=>{n&&window.removeEventListener("resize",O),l&&document.removeEventListener("click",I)}},[]),r.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=h?"hidden":"",()=>{document.body.style.overflow=""}},[h]);const ve=n=>n.map((l,o)=>{var X,H,U,J,K;const d=`group-${o}`,g=he===o,t=(X=l.primaryItems)==null?void 0:X[k??0];return s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{F(o),u(d),G(d)},onMouseLeave:()=>{F(null),C(0),u(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:i=>{S.current.set(d,i)},role:"menuitem","aria-haspopup":"true","aria-expanded":g,"aria-controls":`submenu-${o}`,className:`${e.styles.sublinkToggle} ${g?e.styles.open:""} `,children:[l.title,s.jsx(ke.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${o}`,className:`${e.styles.sublinks} ${g?e.styles.show:""}`,role:"menu","aria-label":`${l.title} submenu`,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}),(H=l.primaryItems)==null?void 0:H.map((i,b)=>i.href?s.jsxs("a",{href:i.href,className:`${e.styles.link} ${k===b?e.styles.open:""}`,target:i.isExternal?"_blank":"_self",rel:i.isExternal?"noopener noreferrer":void 0,onClick:()=>{var Q;u(null),(Q=i.onClick)==null||Q.call(i)},onMouseEnter:()=>i.sublinks?C(b):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(T.ExternalLink,{className:e.styles.newTabIcon,size:16})]},i._key??b):s.jsx("button",{className:`${e.styles.sublinkToggle} ${k===b?e.styles.open:""}`,onMouseEnter:()=>C(b),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??b))]}),(t==null?void 0:t.sublinks)&&((U=t==null?void 0:t.sublinks)==null?void 0:U.length)>0&&s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.fadeInFromLeft}`,children:[(t==null?void 0:t.description)&&s.jsx("div",{className:e.styles.sublinksDescription,children:t==null?void 0:t.description}),(t==null?void 0:t.sublinks)&&N(t.sublinks,`${d}-${k}`)]},`${t.label}-${(J=t==null?void 0:t.sublinks)==null?void 0:J.length}`),(l==null?void 0:l.secondaryItems)&&((K=l==null?void 0:l.secondaryItems)==null?void 0:K.length)>0&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.secondaryColumn}`,children:l.secondaryItems&&l.secondaryItems.length>0&&N(l.secondaryItems,`${d}-secondary`)}),l.spotlight&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.spotlightColumn}`,children:l.spotlight})]})})})]},l._key??`group-${o}`)}),N=(n,l="")=>n.map(o=>{const d=`${l}/${o.label}`;return s.jsx(e.NavLink,{link:o,path:d,parentPath:l,openPath:B,togglePath:me,updateTriangleIndicator:G,setOpenPath:u,renderLinks:N,buttonRefs:S},o._key??d)});return s.jsx("header",{ref:M,className:`${ae??""} ${_e[w]} ${Le[se]} ${e.styles.navbar} ${ee?e.styles.sticky:""} ${y&&y.length?e.styles.advanced:e.styles.default}`,role:"navigation","aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!a||a.length===0)&&w!=="center"?e.styles.twoColumn:""}`,children:[z?s.jsx("div",{className:e.styles.logo,children:z}):s.jsx("div",{className:e.styles.title,children:P}),s.jsx("nav",{ref:f,style:{left:w==="center"?`calc(50% - ${te/2}px)`:"0"},className:`${e.styles.nav} ${h?e.styles.open:""} ${re?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:`${oe}px`},className:`${e.styles.triangle} ${B?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"})}),v==="default"&&m&&s.jsxs("div",{className:e.styles.grid,children:[m&&m.length>0&&N(m),$&&!x&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(_,{})]}),A&&s.jsx(W,{})]}),!x&&v==="advanced"&&y&&s.jsxs("div",{className:e.styles.grid,children:[y.length>0&&ve(y),$&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(_,{})]}),A&&s.jsx(W,{})]}),x&&v==="advanced"&&h&&c.length===0&&y&&s.jsx("div",{className:`${e.styles.mobileMenu}`,children:y.map((n,l)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${p==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>be(n),children:n.title})},n._key??l))}),x&&v==="advanced"&&h&&c.length>0&&s.jsxs("div",{className:`${e.styles.mobileMenuSlide} `,children:[s.jsx("button",{className:e.styles.back,onClick:c.length===1?ue:xe,children:s.jsx(E.ChevronLeft,{size:18,"aria-hidden":"true",focusable:"false"})}),c[c.length-1].description&&s.jsx("div",{className:`${e.styles.sublinksDescription} ${p==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:c[c.length-1].description}),c[c.length-1].primary.map((n,l)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${p==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:n.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>D(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,role:"menuitem",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(T.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},n._key??`primary-${l}`)),c[c.length-1].secondary.length>0&&s.jsx("hr",{className:e.styles.groupDivider}),c[c.length-1].secondary.map((n,l)=>s.jsx("div",{className:`${e.styles.mobileMenuItem} ${p==="forward"?e.styles.fadeInFromLeft:e.styles.fadeInFromRight}`,children:n.sublinks?s.jsx("button",{className:e.styles.sublinkToggle,onClick:()=>D(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,role:"menuitem",children:[n.label,n.isExternal&&s.jsx(T.ExternalLink,{className:e.styles.newTabIcon,size:16})]})},n._key??`secondary-${l}`))]},`stack-${c.length}`)]})}),a&&a.length>0&&s.jsx("nav",{className:e.styles.utility,"aria-label":"Utility navigation",children:s.jsx(Z.ButtonGroup,{children:a.map((n,l)=>s.jsx(E.CallToAction,{as:"a",href:n.href??"/",variant:n.variant??"primary",displayType:n.displayType??"text",imageSrc:n.imageSrc,imageAlt:n.imageAlt,"aria-label":n.ariaLabel??n.label,icon:n.icon,iconAlignment:n.iconAlignment,children:n.imageSrc?s.jsx("img",{src:n.imageSrc,alt:n.imageAlt??n.ariaLabel??n.label}):n.label},n._key||l))})}),a&&a.length>0&&s.jsx("nav",{"aria-label":"Utility navigation",className:`${e.styles.utilityMobile} ${h?e.styles.open:""}`,children:s.jsx(Z.ButtonGroup,{alignment:"center",children:s.jsx(E.CallToAction,{as:"a",href:a[1].href??"/",variant:a[1].variant??"primary",displayType:a[1].displayType??"text",imageSrc:a[1].imageSrc,imageAlt:a[1].imageAlt,"aria-label":a[1].ariaLabel??a[1].label,icon:a[1].icon,iconAlignment:a[1].iconAlignment,children:a[1].imageSrc?s.jsx("img",{src:a[1].imageSrc,"aria-label":a[1].imageAlt??a[1].ariaLabel??a[1].label}):a[1].label})})}),s.jsxs("div",{className:e.styles.mobileButtons,children:[x&&$&&s.jsx(_,{}),s.jsx("button",{className:e.styles.menuToggle,onClick:fe,"aria-label":h?"Close menu":"Open menu","aria-expanded":h,"aria-controls":"main-menu",children:h?s.jsx(je.X,{size:24}):s.jsx($e,{size:24})})]})]})})}exports.Navbar=Me;
package/dist/core/components/NavBar/index.mjs CHANGED
@@ -57,7 +57,7 @@ const Te = [
57
57
  function qe({
58
58
  title: se,
59
59
  logo: B,
60
- items: C,
60
+ items: k,
61
61
  groups: f,
62
62
  utilityItems: s,
63
63
  isSticky: ie = !1,
@@ -65,14 +65,14 @@ function qe({
65
65
  showLocaleSelect: j = !0,
66
66
  alignment: M = "right",
67
67
  variant: re = "standard",
68
- navigationType: k = "default",
68
+ navigationType: N = "default",
69
69
  searchComponent: te,
70
70
  localeSelectComponent: ce,
71
71
  className: oe
72
72
  }) {
73
- const [b, D] = h(!1), [O, m] = h(null), [de, he] = h(0), [be, fe] = h(!1), [me, ue] = h(null), [c, N] = h([]), [g, L] = h(
73
+ const [b, D] = h(!1), [O, m] = h(null), [de, he] = h(0), [be, fe] = h(!1), [me, ue] = h(null), [c, g] = h([]), [$, L] = h(
74
74
  0
75
- ), [pe, G] = h(null), [p, ve] = h(!1), [$, E] = h("forward"), _ = () => /* @__PURE__ */ a(
75
+ ), [pe, G] = h(null), [p, ve] = h(!1), [w, E] = h("forward"), _ = () => /* @__PURE__ */ a(
76
76
  "div",
77
77
  {
78
78
  className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,
@@ -94,7 +94,7 @@ function qe({
94
94
  }
95
95
  ) })
96
96
  }
97
- ), V = () => /* @__PURE__ */ a("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ a("div", { className: e.linkItem, children: /* @__PURE__ */ a(
97
+ ), I = () => /* @__PURE__ */ a("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ a("div", { className: e.linkItem, children: /* @__PURE__ */ a(
98
98
  ne,
99
99
  {
100
100
  className: e.localeModal,
@@ -121,9 +121,9 @@ function qe({
121
121
  }
122
122
  }, []);
123
123
  const ke = () => {
124
- N([]);
124
+ g([]);
125
125
  }, Ne = (n) => {
126
- E("forward"), N([
126
+ E("forward"), g([
127
127
  {
128
128
  title: n.title,
129
129
  primary: n.primaryItems ?? [],
@@ -131,8 +131,8 @@ function qe({
131
131
  description: ""
132
132
  }
133
133
  ]);
134
- }, X = (n) => {
135
- E("forward"), N((l) => [
134
+ }, V = (n) => {
135
+ E("forward"), g((l) => [
136
136
  ...l,
137
137
  {
138
138
  title: n.label,
@@ -142,10 +142,10 @@ function qe({
142
142
  }
143
143
  ]);
144
144
  }, ge = () => {
145
- E("backward"), N((n) => n.slice(0, -1));
145
+ E("backward"), g((n) => n.slice(0, -1));
146
146
  }, S = R(null), v = R(null), z = R(/* @__PURE__ */ new Map()), $e = () => {
147
147
  D((n) => !n);
148
- }, H = (n) => {
148
+ }, X = (n) => {
149
149
  const l = z.current.get(n);
150
150
  if (l && v.current) {
151
151
  const o = l.getBoundingClientRect(), d = v.current.getBoundingClientRect(), i = o.left - d.left + o.width / 2;
@@ -153,7 +153,7 @@ function qe({
153
153
  }
154
154
  }, we = (n) => {
155
155
  m((l) => l === n ? null : n);
156
- }, I = A((n) => {
156
+ }, H = A((n) => {
157
157
  S.current && !S.current.contains(n.target) && m(null);
158
158
  }, []), q = A(() => {
159
159
  U(), typeof window < "u" && window.innerWidth > 768 && (D(!1), m(null), typeof document < "u" && (document.body.style.overflow = ""));
@@ -165,8 +165,8 @@ function qe({
165
165
  }, []);
166
166
  T(() => {
167
167
  const n = typeof window < "u", l = typeof document < "u";
168
- return n && window.addEventListener("resize", q), l && document.addEventListener("click", I), U(), () => {
169
- n && window.removeEventListener("resize", q), l && document.removeEventListener("click", I);
168
+ return n && window.addEventListener("resize", q), l && document.addEventListener("click", H), U(), () => {
169
+ n && window.removeEventListener("resize", q), l && document.removeEventListener("click", H);
170
170
  };
171
171
  }, []), T(() => {
172
172
  if (typeof document < "u")
@@ -176,13 +176,13 @@ function qe({
176
176
  }, [b]);
177
177
  const ye = (n) => n.map((l, o) => {
178
178
  var J, K, Q, Y, Z;
179
- const d = `group-${o}`, y = pe === o, i = (J = l.primaryItems) == null ? void 0 : J[g ?? 0];
179
+ const d = `group-${o}`, C = pe === o, i = (J = l.primaryItems) == null ? void 0 : J[$ ?? 0];
180
180
  return /* @__PURE__ */ r(
181
181
  "div",
182
182
  {
183
183
  className: `${e.linkWrapper} ${e.parent}`,
184
184
  onMouseEnter: () => {
185
- G(o), m(d), H(d);
185
+ G(o), m(d), X(d);
186
186
  },
187
187
  onMouseLeave: () => {
188
188
  G(null), L(0), m(null);
@@ -196,9 +196,9 @@ function qe({
196
196
  },
197
197
  role: "menuitem",
198
198
  "aria-haspopup": "true",
199
- "aria-expanded": y,
199
+ "aria-expanded": C,
200
200
  "aria-controls": `submenu-${o}`,
201
- className: `${e.sublinkToggle} ${y ? e.open : ""} `,
201
+ className: `${e.sublinkToggle} ${C ? e.open : ""} `,
202
202
  children: [
203
203
  l.title,
204
204
  /* @__PURE__ */ a(Le, { size: 18, className: e.chevron })
@@ -209,7 +209,7 @@ function qe({
209
209
  "div",
210
210
  {
211
211
  id: `submenu-${o}`,
212
- className: `${e.sublinks} ${y ? e.show : ""}`,
212
+ className: `${e.sublinks} ${C ? e.show : ""}`,
213
213
  role: "menu",
214
214
  "aria-label": `${l.title} submenu`,
215
215
  children: /* @__PURE__ */ a("div", { children: /* @__PURE__ */ r(
@@ -228,7 +228,7 @@ function qe({
228
228
  "a",
229
229
  {
230
230
  href: t.href,
231
- className: `${e.link} ${g === u ? e.open : ""}`,
231
+ className: `${e.link} ${$ === u ? e.open : ""}`,
232
232
  target: t.isExternal ? "_blank" : "_self",
233
233
  rel: t.isExternal ? "noopener noreferrer" : void 0,
234
234
  onClick: () => {
@@ -255,7 +255,7 @@ function qe({
255
255
  ) : /* @__PURE__ */ a(
256
256
  "button",
257
257
  {
258
- className: `${e.sublinkToggle} ${g === u ? e.open : ""}`,
258
+ className: `${e.sublinkToggle} ${$ === u ? e.open : ""}`,
259
259
  onMouseEnter: () => L(u),
260
260
  children: /* @__PURE__ */ r("span", { className: e.linkContent, children: [
261
261
  t.label,
@@ -274,9 +274,9 @@ function qe({
274
274
  className: `${e.sublinksColumn} ${e.fadeInFromLeft}`,
275
275
  children: [
276
276
  (i == null ? void 0 : i.description) && /* @__PURE__ */ a("div", { className: e.sublinksDescription, children: i == null ? void 0 : i.description }),
277
- (i == null ? void 0 : i.sublinks) && w(
277
+ (i == null ? void 0 : i.sublinks) && y(
278
278
  i.sublinks,
279
- `${d}-${g}`
279
+ `${d}-${$}`
280
280
  )
281
281
  ]
282
282
  },
@@ -286,7 +286,7 @@ function qe({
286
286
  "div",
287
287
  {
288
288
  className: `${e.sublinksColumn} ${e.secondaryColumn}`,
289
- children: l.secondaryItems.length && w(l.secondaryItems, `${d}-secondary`)
289
+ children: l.secondaryItems && l.secondaryItems.length > 0 && y(l.secondaryItems, `${d}-secondary`)
290
290
  }
291
291
  ),
292
292
  l.spotlight && /* @__PURE__ */ a(
@@ -305,7 +305,7 @@ function qe({
305
305
  },
306
306
  l._key ?? `group-${o}`
307
307
  );
308
- }), w = (n, l = "") => n.map((o) => {
308
+ }), y = (n, l = "") => n.map((o) => {
309
309
  const d = `${l}/${o.label}`;
310
310
  return /* @__PURE__ */ a(
311
311
  xe,
@@ -315,9 +315,9 @@ function qe({
315
315
  parentPath: l,
316
316
  openPath: O,
317
317
  togglePath: we,
318
- updateTriangleIndicator: H,
318
+ updateTriangleIndicator: X,
319
319
  setOpenPath: m,
320
- renderLinks: w,
320
+ renderLinks: y,
321
321
  buttonRefs: z
322
322
  },
323
323
  o._key ?? d
@@ -368,26 +368,26 @@ function qe({
368
368
  )
369
369
  }
370
370
  ),
371
- k === "default" && C && /* @__PURE__ */ r("div", { className: e.grid, children: [
372
- C.length && w(C),
371
+ N === "default" && k && /* @__PURE__ */ r("div", { className: e.grid, children: [
372
+ k && k.length > 0 && y(k),
373
373
  x && !p && /* @__PURE__ */ r(ee, { children: [
374
374
  /* @__PURE__ */ a("span", { className: e.separator }),
375
375
  /* @__PURE__ */ a(_, {})
376
376
  ] }),
377
- j && /* @__PURE__ */ a(V, {})
377
+ j && /* @__PURE__ */ a(I, {})
378
378
  ] }),
379
- !p && k === "advanced" && f && /* @__PURE__ */ r("div", { className: e.grid, children: [
380
- f.length && ye(f),
379
+ !p && N === "advanced" && f && /* @__PURE__ */ r("div", { className: e.grid, children: [
380
+ f.length > 0 && ye(f),
381
381
  x && /* @__PURE__ */ r(ee, { children: [
382
382
  /* @__PURE__ */ a("span", { className: e.separator }),
383
383
  /* @__PURE__ */ a(_, {})
384
384
  ] }),
385
- j && /* @__PURE__ */ a(V, {})
385
+ j && /* @__PURE__ */ a(I, {})
386
386
  ] }),
387
- p && k === "advanced" && b && c.length === 0 && f && /* @__PURE__ */ a("div", { className: `${e.mobileMenu}`, children: f.map((n, l) => /* @__PURE__ */ a(
387
+ p && N === "advanced" && b && c.length === 0 && f && /* @__PURE__ */ a("div", { className: `${e.mobileMenu}`, children: f.map((n, l) => /* @__PURE__ */ a(
388
388
  "div",
389
389
  {
390
- className: `${e.mobileMenuItem} ${$ === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
390
+ className: `${e.mobileMenuItem} ${w === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
391
391
  children: /* @__PURE__ */ a(
392
392
  "button",
393
393
  {
@@ -399,7 +399,7 @@ function qe({
399
399
  },
400
400
  n._key ?? l
401
401
  )) }),
402
- p && k === "advanced" && b && c.length > 0 && /* @__PURE__ */ r(
402
+ p && N === "advanced" && b && c.length > 0 && /* @__PURE__ */ r(
403
403
  "div",
404
404
  {
405
405
  className: `${e.mobileMenuSlide} `,
@@ -422,19 +422,19 @@ function qe({
422
422
  c[c.length - 1].description && /* @__PURE__ */ a(
423
423
  "div",
424
424
  {
425
- className: `${e.sublinksDescription} ${$ === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
425
+ className: `${e.sublinksDescription} ${w === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
426
426
  children: c[c.length - 1].description
427
427
  }
428
428
  ),
429
429
  c[c.length - 1].primary.map((n, l) => /* @__PURE__ */ a(
430
430
  "div",
431
431
  {
432
- className: `${e.mobileMenuItem} ${$ === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
432
+ className: `${e.mobileMenuItem} ${w === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
433
433
  children: n.sublinks ? /* @__PURE__ */ a(
434
434
  "button",
435
435
  {
436
436
  className: e.sublinkToggle,
437
- onClick: () => X(n),
437
+ onClick: () => V(n),
438
438
  children: /* @__PURE__ */ r("span", { className: e.linkContent, children: [
439
439
  n.label,
440
440
  n.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: n.subtitle })
@@ -471,12 +471,12 @@ function qe({
471
471
  (n, l) => /* @__PURE__ */ a(
472
472
  "div",
473
473
  {
474
- className: `${e.mobileMenuItem} ${$ === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
474
+ className: `${e.mobileMenuItem} ${w === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
475
475
  children: n.sublinks ? /* @__PURE__ */ a(
476
476
  "button",
477
477
  {
478
478
  className: e.sublinkToggle,
479
- onClick: () => X(n),
479
+ onClick: () => V(n),
480
480
  children: n.label
481
481
  }
482
482
  ) : /* @__PURE__ */ r(
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.391",
4
+ "version": "0.0.392",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {