quirk-ui 0.0.410 → 0.0.411

package/dist/{NavLink-BSHG9x5C.js → NavLink-B5joxE9Z.js}

@@ -1,20 +1,20 @@
 import { jsxs as l, jsx as s } from "react/jsx-runtime";
 import { useRef as v } from "react";
-import { E as g } from "./external-link-BOPobeQJ.js";
-import { C as k } from "./chevron-down-DSUzBz9F.js";
-import './assets/NavLink.css';const f = "_navbar_1bon6_5", w = "_sticky_1bon6_19", I = "_left_1bon6_34", C = "_container_1bon6_35", N = "_logo_1bon6_39", x = "_nav_1bon6_5", T = "_center_1bon6_54", E = "_hidden_1bon6_60", S = "_visible_1bon6_67", W = "_right_1bon6_82", $ = "_title_1bon6_89", y = "_linkWrapper_1bon6_99", L = "_parent_1bon6_99", M = "_linkItem_1bon6_107", j = "_link_1bon6_99", z = "_sublinkToggle_1bon6_111", R = "_standard_1bon6_159", D = "_triangle_1bon6_167", q = "_transparent_1bon6_172", A = "_twoColumn_1bon6_276", B = "_navInner_1bon6_398", F = "_grid_1bon6_409", G = "_separator_1bon6_444", H = "_newTabIcon_1bon6_474", J = "_open_1bon6_500", K = "_sublinks_1bon6_486", Q = "_show_1bon6_571", U = "_sublinksInner_1bon6_629", V = "_sublinksColumn_1bon6_647", X = "_chevron_1bon6_657", Y = "_advanced_1bon6_839", Z = "_withSpotlight_1bon6_890", O = "_withoutSpotlight_1bon6_894", P = "_searchWrapper_1bon6_940", o = {
+import { E as k } from "./external-link-BOPobeQJ.js";
+import { C as g } from "./chevron-down-DSUzBz9F.js";
+import './assets/NavLink.css';const f = "_navbar_1bon6_5", w = "_sticky_1bon6_19", C = "_left_1bon6_34", I = "_container_1bon6_35", N = "_logo_1bon6_39", x = "_nav_1bon6_5", T = "_center_1bon6_54", y = "_hidden_1bon6_60", E = "_visible_1bon6_67", S = "_right_1bon6_82", W = "_title_1bon6_89", $ = "_linkWrapper_1bon6_99", L = "_parent_1bon6_99", M = "_linkItem_1bon6_107", j = "_link_1bon6_99", z = "_sublinkToggle_1bon6_111", R = "_standard_1bon6_159", D = "_triangle_1bon6_167", q = "_transparent_1bon6_172", A = "_twoColumn_1bon6_276", B = "_navInner_1bon6_398", F = "_grid_1bon6_409", G = "_separator_1bon6_444", H = "_newTabIcon_1bon6_474", J = "_linkContent_1bon6_489", K = "_open_1bon6_500", Q = "_sublinks_1bon6_486", U = "_show_1bon6_571", V = "_primaryColumn_1bon6_612", X = "_sublinksInner_1bon6_629", Y = "_sublinksColumn_1bon6_647", Z = "_chevron_1bon6_657", O = "_advanced_1bon6_839", P = "_subtitle_1bon6_848", nn = "_withSpotlight_1bon6_890", on = "_withoutSpotlight_1bon6_894", en = "_searchWrapper_1bon6_940", o = {
   navbar: f,
   sticky: w,
-  left: I,
-  container: C,
+  left: C,
+  container: I,
   logo: N,
   nav: x,
   center: T,
-  hidden: E,
-  visible: S,
-  right: W,
-  title: $,
-  linkWrapper: y,
+  hidden: y,
+  visible: E,
+  right: S,
+  title: W,
+  linkWrapper: $,
   parent: L,
   linkItem: M,
   link: j,
@@ -27,35 +27,38 @@ import './assets/NavLink.css';const f = "_navbar_1bon6_5", w = "_sticky_1bon6_19
   grid: F,
   separator: G,
   newTabIcon: H,
-  open: J,
-  sublinks: K,
-  show: Q,
-  sublinksInner: U,
-  sublinksColumn: V,
-  chevron: X,
+  linkContent: J,
+  open: K,
+  sublinks: Q,
+  show: U,
+  primaryColumn: V,
+  sublinksInner: X,
+  sublinksColumn: Y,
+  chevron: Z,
   default: "_default_1bon6_773",
-  advanced: Y,
-  withSpotlight: Z,
-  withoutSpotlight: O,
-  searchWrapper: P
+  advanced: O,
+  subtitle: P,
+  withSpotlight: nn,
+  withoutSpotlight: on,
+  searchWrapper: en
 };
-function tn({
+function ln({
   link: n,
   path: e,
-  parentPath: a,
+  parentPath: i,
   openPath: d,
-  togglePath: i,
-  updateTriangleIndicator: p,
+  togglePath: a,
+  updateTriangleIndicator: m,
   setOpenPath: t,
-  renderLinks: h,
-  buttonRefs: m
+  renderLinks: p,
+  buttonRefs: h
 }) {
   var b;
   const r = d === e, _ = !!((b = n.sublinks) != null && b.length), c = v(null);
-  return m.current.set(e, c.current), /* @__PURE__ */ l(
+  return h.current.set(e, c.current), /* @__PURE__ */ l(
     "div",
     {
-      className: `${o.linkWrapper} ${a ? "" : o.parent}`,
+      className: `${o.linkWrapper} ${i ? "" : o.parent}`,
       children: [
         /* @__PURE__ */ s("div", { className: o.linkItem, children: n.href ? /* @__PURE__ */ l(
           "a",
@@ -69,12 +72,12 @@ function tn({
               t(null), (u = n.onClick) == null || u.call(n);
             },
             onMouseEnter: () => {
-              a || t(null);
+              i || t(null);
             },
             role: "menuitem",
             children: [
               n.label,
-              n.isExternal && /* @__PURE__ */ s(g, { className: o.newTabIcon, size: 16 })
+              n.isExternal && /* @__PURE__ */ s(k, { className: o.newTabIcon, size: 16 })
             ]
           }
         ) : /* @__PURE__ */ l(
@@ -84,13 +87,13 @@ function tn({
             "aria-haspopup": _ ? "true" : void 0,
             "aria-expanded": r,
             className: `${o.sublinkToggle} ${r ? o.open : ""}`,
-            onClick: () => i(e),
+            onClick: () => a(e),
             onMouseEnter: () => {
-              p(e), t(e);
+              m(e), t(e);
             },
             children: [
               n.label,
-              _ && /* @__PURE__ */ s(k, { size: 18, className: o.chevron })
+              _ && /* @__PURE__ */ s(g, { size: 18, className: o.chevron })
             ]
           }
         ) }),
@@ -98,10 +101,10 @@ function tn({
           "div",
           {
             className: `${o.sublinks} ${r ? o.show : ""}`,
-            onMouseLeave: () => i(e),
+            onMouseLeave: () => a(e),
             role: "menu",
             "aria-label": `${n.label} submenu`,
-            children: /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s("div", { className: o.sublinksInner, children: /* @__PURE__ */ s("div", { className: o.sublinksColumn, children: h(n.sublinks, e) }) }) })
+            children: /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s("div", { className: o.sublinksInner, children: /* @__PURE__ */ s("div", { className: o.sublinksColumn, children: p(n.sublinks, e) }) }) })
           }
         )
       ]
@@ -110,6 +113,6 @@ function tn({
   );
 }
 export {
-  tn as N,
+  ln as N,
   o as s
 };

package/dist/NavLink-BSVUqHZT.cjs

@@ -0,0 +1 @@
+"use strict";require('./assets/NavLink.css');const e=require("react/jsx-runtime"),v=require("react"),k=require("./external-link-DDShu-48.cjs"),m=require("./chevron-down-DfK1XBl3.cjs"),g="_navbar_1bon6_5",w="_sticky_1bon6_19",C="_left_1bon6_34",x="_container_1bon6_35",f="_logo_1bon6_39",I="_nav_1bon6_5",N="_center_1bon6_54",j="_hidden_1bon6_60",$="_visible_1bon6_67",y="_right_1bon6_82",T="_title_1bon6_89",S="_linkWrapper_1bon6_99",W="_parent_1bon6_99",E="_linkItem_1bon6_107",q="_link_1bon6_99",L="_sublinkToggle_1bon6_111",M="_standard_1bon6_159",R="_triangle_1bon6_167",z="_transparent_1bon6_172",D="_twoColumn_1bon6_276",A="_navInner_1bon6_398",B="_grid_1bon6_409",F="_separator_1bon6_444",G="_newTabIcon_1bon6_474",H="_linkContent_1bon6_489",J="_open_1bon6_500",K="_sublinks_1bon6_486",Q="_show_1bon6_571",U="_primaryColumn_1bon6_612",V="_sublinksInner_1bon6_629",X="_sublinksColumn_1bon6_647",Y="_chevron_1bon6_657",Z="_advanced_1bon6_839",O="_subtitle_1bon6_848",P="_withSpotlight_1bon6_890",nn="_withoutSpotlight_1bon6_894",on="_searchWrapper_1bon6_940",o={navbar:g,sticky:w,left:C,container:x,logo:f,nav:I,center:N,hidden:j,visible:$,right:y,title:T,linkWrapper:S,parent:W,linkItem:E,link:q,sublinkToggle:L,standard:M,triangle:R,transparent:z,twoColumn:D,navInner:A,grid:B,separator:F,newTabIcon:G,linkContent:H,open:J,sublinks:K,show:Q,primaryColumn:U,sublinksInner:V,sublinksColumn:X,chevron:Y,default:"_default_1bon6_773",advanced:Z,subtitle:O,withSpotlight:P,withoutSpotlight:nn,searchWrapper:on};function en({link:n,path:s,parentPath:i,openPath:u,togglePath:l,updateTriangleIndicator:d,setOpenPath:t,renderLinks:h,buttonRefs:p}){var c;const r=u===s,_=!!((c=n.sublinks)!=null&&c.length),a=v.useRef(null);return p.current.set(s,a.current),e.jsxs("div",{className:`${o.linkWrapper} ${i?"":o.parent}`,children:[e.jsx("div",{className:o.linkItem,children:n.href?e.jsxs("a",{href:n.href,className:o.link,target:n.isExternal?"_blank":"_self",rel:n.isExternal?"noopener noreferrer":void 0,onClick:()=>{var b;t(null),(b=n.onClick)==null||b.call(n)},onMouseEnter:()=>{i||t(null)},role:"menuitem",children:[n.label,n.isExternal&&e.jsx(k.ExternalLink,{className:o.newTabIcon,size:16})]}):e.jsxs("button",{ref:a,"aria-haspopup":_?"true":void 0,"aria-expanded":r,className:`${o.sublinkToggle} ${r?o.open:""}`,onClick:()=>l(s),onMouseEnter:()=>{d(s),t(s)},children:[n.label,_&&e.jsx(m.ChevronDown,{size:18,className:o.chevron})]})}),_&&e.jsx("div",{className:`${o.sublinks} ${r?o.show:""}`,onMouseLeave:()=>l(s),role:"menu","aria-label":`${n.label} submenu`,children:e.jsx("div",{children:e.jsx("div",{className:o.sublinksInner,children:e.jsx("div",{className:o.sublinksColumn,children:h(n.sublinks,s)})})})})]},s)}exports.NavLink=en;exports.styles=o;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");const e=require("../../../NavLink-CE4AZJOV.cjs");require("../../../external-link-DDShu-48.cjs");require("../../../chevron-down-DfK1XBl3.cjs");exports.NavLink=e.NavLink;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");const e=require("../../../NavLink-BSVUqHZT.cjs");require("../../../external-link-DDShu-48.cjs");require("../../../chevron-down-DfK1XBl3.cjs");exports.NavLink=e.NavLink;

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

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { N as a } from "../../../NavLink-BSHG9x5C.js";
+import { N as a } from "../../../NavLink-B5joxE9Z.js";
 import "../../../external-link-BOPobeQJ.js";
 import "../../../chevron-down-DSUzBz9F.js";
 export {

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("react"),e=require("../../../NavLink-CE4AZJOV.cjs"),K=require("../../../chevron-down-DfK1XBl3.cjs"),Q={standard:e.styles.standard,transparent:e.styles.transparent},U={left:e.styles.left,center:e.styles.center,right:e.styles.right};function Y({title:B,logo:j,items:d,groups:o,utilityItems:$,isSticky:I=!1,showSearch:b=!0,showLocaleSelect:N=!0,alignment:f="right",variant:O="standard",navigationType:g="default",className:q}){const[k,P]=l.useState(0),[v,r]=l.useState(null),[u,_]=l.useState(!1),[y,D]=l.useState(!1),[L,G]=l.useState(!1),[T,X]=l.useState(null),[F,H]=l.useState(0),[V,R]=l.useState(null),m=l.useRef(null),c=l.useRef(null),p=l.useRef(new Map);console.log(F);const C=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem})}),E=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),w=t=>{const n=p.current.get(t);if(n&&c.current){const i=n.getBoundingClientRect(),a=c.current.getBoundingClientRect(),x=i.left-a.left+i.width/2;X(x)}};console.log(w);const A=t=>{r(n=>n===t?null:t)},J=t=>t.map((n,i)=>{const a=`group-${i}`,h=V===i;return s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{R(i),r(a),w(a)},onMouseLeave:()=>{R(null),H(0),r(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:x=>{p.current.set(a,x)},role:"menuitem","aria-haspopup":"true","aria-expanded":h,"aria-controls":`submenu-${i}`,className:`${e.styles.sublinkToggle} ${h?e.styles.open:""} `,children:[n.title,s.jsx(K.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${i}`,className:`${e.styles.sublinks} ${h?e.styles.show:""}`,role:"menu","aria-label":`${n.title} submenu`,children:s.jsx("div",{children:s.jsx("div",{className:`${e.styles.sublinksInner} ${n.spotlight?e.styles.withSpotlight:e.styles.withoutSpotlight}`})})})]},n._key??`group-${i}`)}),M=(t,n="")=>t.map(i=>{const a=`${n}/${i.label}`;return s.jsx(e.NavLink,{link:i,path:a,parentPath:n,openPath:v,togglePath:A,updateTriangleIndicator:w,setOpenPath:r,renderLinks:M,buttonRefs:p},i._key??a)}),S=l.useCallback(t=>{m.current&&!m.current.contains(t.target)&&r(null)},[]),W=l.useCallback(()=>{z(),typeof window<"u"&&window.innerWidth>768&&(_(!1),r(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),z=l.useCallback(()=>{if(c.current){const t=c.current.getBoundingClientRect().width;P(t),G(!0)}},[]);return l.useEffect(()=>{const t=typeof window<"u",n=typeof document<"u";return t&&window.addEventListener("resize",W),n&&document.addEventListener("click",S),z(),()=>{t&&window.removeEventListener("resize",W),n&&document.removeEventListener("click",S)}},[]),l.useEffect(()=>{if(typeof window<"u"){const t=()=>{const n=window.innerWidth<768;D(n)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)}},[]),l.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=u?"hidden":"",()=>{document.body.style.overflow=""}},[u]),s.jsx("header",{ref:m,className:`${q??""} ${U[f]} ${Q[O]} ${e.styles.navbar} ${I?e.styles.sticky:""} ${o&&o.length?e.styles.advanced:e.styles.default}`,role:"navigation","aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!$||$.length===0)&&f!=="center"?e.styles.twoColumn:""}`,children:[j?s.jsx("div",{className:e.styles.logo,children:j}):s.jsx("div",{className:e.styles.title,children:B}),s.jsx("nav",{ref:c,style:{left:f==="center"?`calc(50% - ${k/2}px)`:"0"},className:`${e.styles.nav} ${u?e.styles.open:""} ${L?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:`${T}px`},className:`${e.styles.triangle} ${v?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"})}),g==="default"&&d&&s.jsxs("div",{className:e.styles.grid,children:[d&&d.length>0&&M(d),b&&!y&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(C,{})]}),N&&s.jsx(E,{})]}),!y&&g==="advanced"&&o&&s.jsxs("div",{className:e.styles.grid,children:[o.length>0&&J(o),b&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(C,{})]}),N&&s.jsx(E,{})]}),s.jsx("p",{children:"HELLO"}),s.jsxs("p",{children:["vis: ",L]}),s.jsxs("p",{children:["open: ",u]}),s.jsxs("p",{children:["path: ",v]}),s.jsxs("p",{children:["nav: ",k]}),s.jsxs("p",{children:["mobile: ",y]})]})})]})})}exports.Navbar=Y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("react"),e=require("../../../NavLink-BSVUqHZT.cjs"),Y=require("../../../chevron-down-DfK1XBl3.cjs"),Z=require("../../../external-link-DDShu-48.cjs"),ee={standard:e.styles.standard,transparent:e.styles.transparent},se={left:e.styles.left,center:e.styles.center,right:e.styles.right};function ne({title:P,logo:N,items:h,groups:d,utilityItems:k,isSticky:T=!1,showSearch:g=!0,showLocaleSelect:C=!0,alignment:p="right",variant:D="standard",navigationType:E="default",className:G}){const[L,X]=a.useState(0),[x,c]=a.useState(null),[y,F]=a.useState(!1),[m,H]=a.useState(!1),[R,V]=a.useState(!1),[A,J]=a.useState(null),[M,b]=a.useState(0),[K,S]=a.useState(null),j=a.useRef(null),u=a.useRef(null),$=a.useRef(new Map),I=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem})}),W=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),w=n=>{const l=$.current.get(n);if(l&&u.current){const r=l.getBoundingClientRect(),i=u.current.getBoundingClientRect(),v=r.left-i.left+r.width/2;J(v)}};console.log(w);const Q=n=>{c(l=>l===n?null:n)},U=n=>n.map((l,r)=>{var v;const i=`group-${r}`,f=K===r;return s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{S(r),c(i),w(i)},onMouseLeave:()=>{S(null),b(0),c(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:t=>{$.current.set(i,t)},role:"menuitem","aria-haspopup":"true","aria-expanded":f,"aria-controls":`submenu-${r}`,className:`${e.styles.sublinkToggle} ${f?e.styles.open:""} `,children:[l.title,s.jsx(Y.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${r}`,className:`${e.styles.sublinks} ${f?e.styles.show:""}`,role:"menu","aria-label":`${l.title} submenu`,children:s.jsx("div",{children:s.jsx("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}),(v=l.primaryItems)==null?void 0:v.map((t,o)=>t.href?s.jsxs("a",{href:t.href,className:`${e.styles.link} ${M===o?e.styles.open:""}`,target:t.isExternal?"_blank":"_self",rel:t.isExternal?"noopener noreferrer":void 0,onClick:()=>{var q;c(null),(q=t.onClick)==null||q.call(t)},onMouseEnter:()=>t.sublinks?b(o):null,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[t.label,t.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:t.subtitle})]}),t.isExternal&&s.jsx(Z.ExternalLink,{className:e.styles.newTabIcon,size:16})]},t._key??o):s.jsx("button",{className:`${e.styles.sublinkToggle} ${M===o?e.styles.open:""}`,onMouseEnter:()=>b(o),children:s.jsxs("span",{className:e.styles.linkContent,children:[t.label,t.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:t.subtitle})]})},t._key??o))]})})})})]},l._key??`group-${r}`)}),_=(n,l="")=>n.map(r=>{const i=`${l}/${r.label}`;return s.jsx(e.NavLink,{link:r,path:i,parentPath:l,openPath:x,togglePath:Q,updateTriangleIndicator:w,setOpenPath:c,renderLinks:_,buttonRefs:$},r._key??i)}),z=a.useCallback(n=>{j.current&&!j.current.contains(n.target)&&c(null)},[]),B=a.useCallback(()=>{O(),typeof window<"u"&&window.innerWidth>768&&(F(!1),c(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),O=a.useCallback(()=>{if(u.current){const n=u.current.getBoundingClientRect().width;X(n),V(!0)}},[]);return a.useEffect(()=>{const n=typeof window<"u",l=typeof document<"u";return n&&window.addEventListener("resize",B),l&&document.addEventListener("click",z),O(),()=>{n&&window.removeEventListener("resize",B),l&&document.removeEventListener("click",z)}},[]),a.useEffect(()=>{if(typeof window<"u"){const n=()=>{const l=window.innerWidth<768;H(l)};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)}},[]),a.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=y?"hidden":"",()=>{document.body.style.overflow=""}},[y]),s.jsx("header",{ref:j,className:`${G??""} ${se[p]} ${ee[D]} ${e.styles.navbar} ${T?e.styles.sticky:""} ${d&&d.length?e.styles.advanced:e.styles.default}`,role:"navigation","aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!k||k.length===0)&&p!=="center"?e.styles.twoColumn:""}`,children:[N?s.jsx("div",{className:e.styles.logo,children:N}):s.jsx("div",{className:e.styles.title,children:P}),s.jsx("nav",{ref:u,style:{left:p==="center"?`calc(50% - ${L/2}px)`:"0"},className:`${e.styles.nav} ${y?e.styles.open:""} ${R?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:`${A}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"})}),E==="default"&&h&&s.jsxs("div",{className:e.styles.grid,children:[h&&h.length>0&&_(h),g&&!m&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(I,{})]}),C&&s.jsx(W,{})]}),!m&&E==="advanced"&&d&&s.jsxs("div",{className:e.styles.grid,children:[d.length>0&&U(d),g&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(I,{})]}),C&&s.jsx(W,{})]}),s.jsx("p",{children:"HELLO"}),s.jsxs("p",{children:["vis: ",R]}),s.jsxs("p",{children:["open: ",y]}),s.jsxs("p",{children:["path: ",x]}),s.jsxs("p",{children:["nav: ",L]}),s.jsxs("p",{children:["mobile: ",m]})]})})]})})}exports.Navbar=ne;

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

@@ -1,8 +1,9 @@
-import { jsx as n, jsxs as a, Fragment as X } from "react/jsx-runtime";
-import { useState as l, useRef as g, useCallback as y, useEffect as k } from "react";
-import { s as e, N as ee } from "../../../NavLink-BSHG9x5C.js";
-import { C as ne } from "../../../chevron-down-DSUzBz9F.js";
-const te = {
+import { jsx as n, jsxs as l, Fragment as S } from "react/jsx-runtime";
+import { useState as o, useRef as C, useCallback as E, useEffect as L } from "react";
+import { s as e, N as se } from "../../../NavLink-B5joxE9Z.js";
+import { C as ae } from "../../../chevron-down-DSUzBz9F.js";
+import { E as le } from "../../../external-link-BOPobeQJ.js";
+const re = {
   standard: e.standard,
   transparent: e.transparent
 }, ie = {
@@ -10,166 +11,216 @@ const te = {
   center: e.center,
   right: e.right
 };
-function oe({
-  title: D,
-  logo: L,
-  items: u,
-  groups: c,
-  utilityItems: R,
-  isSticky: H = !1,
-  showSearch: C = !0,
-  showLocaleSelect: M = !0,
-  alignment: v = "right",
-  variant: S = "standard",
+function fe({
+  title: V,
+  logo: M,
+  items: f,
+  groups: u,
+  utilityItems: x,
+  isSticky: A = !1,
+  showSearch: R = !0,
+  showLocaleSelect: I = !0,
+  alignment: b = "right",
+  variant: F = "standard",
   navigationType: W = "default",
   // searchComponent,
   // localeSelectComponent,
-  className: T
+  className: q
 }) {
-  const [E, V] = l(0), [m, o] = l(null), [h, _] = l(!1), [p, A] = l(!1), [x, F] = l(!1), [q, J] = l(null), [K, Q] = l(
+  const [z, J] = o(0), [$, c] = o(null), [p, K] = o(!1), [w, Q] = o(!1), [B, U] = o(!1), [Y, Z] = o(null), [O, N] = o(
     0
-  ), [U, z] = l(null), w = g(null), d = g(null), $ = g(/* @__PURE__ */ new Map());
-  console.log(K);
-  const I = () => /* @__PURE__ */ n(
+  ), [ee, _] = o(null), k = C(null), h = C(null), g = C(/* @__PURE__ */ new Map()), P = () => /* @__PURE__ */ n(
     "div",
     {
       className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,
       children: /* @__PURE__ */ n("div", { className: e.linkItem })
     }
-  ), B = () => /* @__PURE__ */ n("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ n("div", { className: e.linkItem }) }), N = (t) => {
-    const i = $.current.get(t);
-    if (i && d.current) {
-      const s = i.getBoundingClientRect(), r = d.current.getBoundingClientRect(), b = s.left - r.left + s.width / 2;
-      J(b);
+  ), T = () => /* @__PURE__ */ n("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ n("div", { className: e.linkItem }) }), y = (t) => {
+    const a = g.current.get(t);
+    if (a && h.current) {
+      const r = a.getBoundingClientRect(), i = h.current.getBoundingClientRect(), m = r.left - i.left + r.width / 2;
+      Z(m);
     }
   };
-  console.log(N);
-  const Y = (t) => {
-    o((i) => i === t ? null : t);
-  }, Z = (t) => t.map((i, s) => {
-    const r = `group-${s}`, f = U === s;
-    return /* @__PURE__ */ a(
+  console.log(y);
+  const ne = (t) => {
+    c((a) => a === t ? null : t);
+  }, te = (t) => t.map((a, r) => {
+    var m;
+    const i = `group-${r}`, v = ee === r;
+    return /* @__PURE__ */ l(
       "div",
       {
         className: `${e.linkWrapper} ${e.parent}`,
         onMouseEnter: () => {
-          z(s), o(r), N(r);
+          _(r), c(i), y(i);
         },
         onMouseLeave: () => {
-          z(null), Q(0), o(null);
+          _(null), N(0), c(null);
         },
         children: [
-          /* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ a(
+          /* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ l(
             "button",
             {
-              ref: (b) => {
-                $.current.set(r, b);
+              ref: (s) => {
+                g.current.set(i, s);
               },
               role: "menuitem",
               "aria-haspopup": "true",
-              "aria-expanded": f,
-              "aria-controls": `submenu-${s}`,
-              className: `${e.sublinkToggle} ${f ? e.open : ""} `,
+              "aria-expanded": v,
+              "aria-controls": `submenu-${r}`,
+              className: `${e.sublinkToggle} ${v ? e.open : ""} `,
               children: [
-                i.title,
-                /* @__PURE__ */ n(ne, { size: 18, className: e.chevron })
+                a.title,
+                /* @__PURE__ */ n(ae, { size: 18, className: e.chevron })
               ]
             }
           ) }),
           /* @__PURE__ */ n(
             "div",
             {
-              id: `submenu-${s}`,
-              className: `${e.sublinks} ${f ? e.show : ""}`,
+              id: `submenu-${r}`,
+              className: `${e.sublinks} ${v ? e.show : ""}`,
               role: "menu",
-              "aria-label": `${i.title} submenu`,
+              "aria-label": `${a.title} submenu`,
               children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(
                 "div",
                 {
-                  className: `${e.sublinksInner} ${i.spotlight ? e.withSpotlight : e.withoutSpotlight}`
+                  className: `${e.sublinksInner} ${a.spotlight ? e.withSpotlight : e.withoutSpotlight}`,
+                  children: /* @__PURE__ */ l(
+                    "div",
+                    {
+                      className: `${e.sublinksColumn} ${e.primaryColumn}`,
+                      children: [
+                        /* @__PURE__ */ n("div", { className: e.linkItem }),
+                        (m = a.primaryItems) == null ? void 0 : m.map(
+                          (s, d) => s.href ? /* @__PURE__ */ l(
+                            "a",
+                            {
+                              href: s.href,
+                              className: `${e.link} ${O === d ? e.open : ""}`,
+                              target: s.isExternal ? "_blank" : "_self",
+                              rel: s.isExternal ? "noopener noreferrer" : void 0,
+                              onClick: () => {
+                                var H;
+                                c(null), (H = s.onClick) == null || H.call(s);
+                              },
+                              onMouseEnter: () => s.sublinks ? N(d) : null,
+                              role: "menuitem",
+                              children: [
+                                /* @__PURE__ */ l("span", { className: e.linkContent, children: [
+                                  s.label,
+                                  s.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: s.subtitle })
+                                ] }),
+                                s.isExternal && /* @__PURE__ */ n(
+                                  le,
+                                  {
+                                    className: e.newTabIcon,
+                                    size: 16
+                                  }
+                                )
+                              ]
+                            },
+                            s._key ?? d
+                          ) : /* @__PURE__ */ n(
+                            "button",
+                            {
+                              className: `${e.sublinkToggle} ${O === d ? e.open : ""}`,
+                              onMouseEnter: () => N(d),
+                              children: /* @__PURE__ */ l("span", { className: e.linkContent, children: [
+                                s.label,
+                                s.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: s.subtitle })
+                              ] })
+                            },
+                            s._key ?? d
+                          )
+                        )
+                      ]
+                    }
+                  )
                 }
               ) })
             }
           )
         ]
       },
-      i._key ?? `group-${s}`
+      a._key ?? `group-${r}`
     );
-  }), O = (t, i = "") => t.map((s) => {
-    const r = `${i}/${s.label}`;
+  }), j = (t, a = "") => t.map((r) => {
+    const i = `${a}/${r.label}`;
     return /* @__PURE__ */ n(
-      ee,
+      se,
       {
-        link: s,
-        path: r,
-        parentPath: i,
-        openPath: m,
-        togglePath: Y,
-        updateTriangleIndicator: N,
-        setOpenPath: o,
-        renderLinks: O,
-        buttonRefs: $
+        link: r,
+        path: i,
+        parentPath: a,
+        openPath: $,
+        togglePath: ne,
+        updateTriangleIndicator: y,
+        setOpenPath: c,
+        renderLinks: j,
+        buttonRefs: g
       },
-      s._key ?? r
+      r._key ?? i
     );
-  }), P = y((t) => {
-    w.current && !w.current.contains(t.target) && o(null);
-  }, []), j = y(() => {
-    G(), typeof window < "u" && window.innerWidth > 768 && (_(!1), o(null), typeof document < "u" && (document.body.style.overflow = ""));
-  }, []), G = y(() => {
-    if (d.current) {
-      const t = d.current.getBoundingClientRect().width;
-      V(t), F(!0);
+  }), G = E((t) => {
+    k.current && !k.current.contains(t.target) && c(null);
+  }, []), X = E(() => {
+    D(), typeof window < "u" && window.innerWidth > 768 && (K(!1), c(null), typeof document < "u" && (document.body.style.overflow = ""));
+  }, []), D = E(() => {
+    if (h.current) {
+      const t = h.current.getBoundingClientRect().width;
+      J(t), U(!0);
     }
   }, []);
-  return k(() => {
-    const t = typeof window < "u", i = typeof document < "u";
-    return t && window.addEventListener("resize", j), i && document.addEventListener("click", P), G(), () => {
-      t && window.removeEventListener("resize", j), i && document.removeEventListener("click", P);
+  return L(() => {
+    const t = typeof window < "u", a = typeof document < "u";
+    return t && window.addEventListener("resize", X), a && document.addEventListener("click", G), D(), () => {
+      t && window.removeEventListener("resize", X), a && document.removeEventListener("click", G);
     };
-  }, []), k(() => {
+  }, []), L(() => {
     if (typeof window < "u") {
       const t = () => {
-        const i = window.innerWidth < 768;
-        A(i);
+        const a = window.innerWidth < 768;
+        Q(a);
       };
       return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
     }
-  }, []), k(() => {
+  }, []), L(() => {
     if (typeof document < "u")
-      return document.body.style.overflow = h ? "hidden" : "", () => {
+      return document.body.style.overflow = p ? "hidden" : "", () => {
         document.body.style.overflow = "";
       };
-  }, [h]), /* @__PURE__ */ n(
+  }, [p]), /* @__PURE__ */ n(
     "header",
     {
-      ref: w,
-      className: `${T ?? ""} ${ie[v]} ${te[S]} ${e.navbar} ${H ? e.sticky : ""} ${c && c.length ? e.advanced : e.default}`,
+      ref: k,
+      className: `${q ?? ""} ${ie[b]} ${re[F]} ${e.navbar} ${A ? e.sticky : ""} ${u && u.length ? e.advanced : e.default}`,
       role: "navigation",
       "aria-label": "Main navigation",
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ l(
         "div",
         {
-          className: `${e.container} ${(!R || R.length === 0) && v !== "center" ? e.twoColumn : ""}`,
+          className: `${e.container} ${(!x || x.length === 0) && b !== "center" ? e.twoColumn : ""}`,
           children: [
-            L ? /* @__PURE__ */ n("div", { className: e.logo, children: L }) : /* @__PURE__ */ n("div", { className: e.title, children: D }),
+            M ? /* @__PURE__ */ n("div", { className: e.logo, children: M }) : /* @__PURE__ */ n("div", { className: e.title, children: V }),
             /* @__PURE__ */ n(
               "nav",
               {
-                ref: d,
+                ref: h,
                 style: {
-                  left: v === "center" ? `calc(50% - ${E / 2}px)` : "0"
+                  left: b === "center" ? `calc(50% - ${z / 2}px)` : "0"
                 },
-                className: `${e.nav} ${h ? e.open : ""} ${x ? e.visible : e.hidden}`,
+                className: `${e.nav} ${p ? e.open : ""} ${B ? e.visible : e.hidden}`,
                 id: "main-menu",
                 role: "menubar",
                 "aria-label": "Main navigation",
-                children: /* @__PURE__ */ a("div", { className: e.navInner, children: [
+                children: /* @__PURE__ */ l("div", { className: e.navInner, children: [
                   /* @__PURE__ */ n(
                     "svg",
                     {
-                      style: { left: `${q}px` },
-                      className: `${e.triangle} ${m ? e.show : ""}`,
+                      style: { left: `${Y}px` },
+                      className: `${e.triangle} ${$ ? e.show : ""}`,
                       width: 16,
                       height: 12,
                       viewBox: "0 0 100 75",
@@ -185,42 +236,42 @@ function oe({
                       )
                     }
                   ),
-                  W === "default" && u && /* @__PURE__ */ a("div", { className: e.grid, children: [
-                    u && u.length > 0 && O(u),
-                    C && !p && /* @__PURE__ */ a(X, { children: [
+                  W === "default" && f && /* @__PURE__ */ l("div", { className: e.grid, children: [
+                    f && f.length > 0 && j(f),
+                    R && !w && /* @__PURE__ */ l(S, { children: [
                       /* @__PURE__ */ n("span", { className: e.separator }),
-                      /* @__PURE__ */ n(I, {})
+                      /* @__PURE__ */ n(P, {})
                     ] }),
-                    M && /* @__PURE__ */ n(B, {})
+                    I && /* @__PURE__ */ n(T, {})
                   ] }),
-                  !p && W === "advanced" && c && /* @__PURE__ */ a("div", { className: e.grid, children: [
-                    c.length > 0 && Z(c),
-                    C && /* @__PURE__ */ a(X, { children: [
+                  !w && W === "advanced" && u && /* @__PURE__ */ l("div", { className: e.grid, children: [
+                    u.length > 0 && te(u),
+                    R && /* @__PURE__ */ l(S, { children: [
                       /* @__PURE__ */ n("span", { className: e.separator }),
-                      /* @__PURE__ */ n(I, {})
+                      /* @__PURE__ */ n(P, {})
                     ] }),
-                    M && /* @__PURE__ */ n(B, {})
+                    I && /* @__PURE__ */ n(T, {})
                   ] }),
                   /* @__PURE__ */ n("p", { children: "HELLO" }),
-                  /* @__PURE__ */ a("p", { children: [
+                  /* @__PURE__ */ l("p", { children: [
                     "vis: ",
-                    x
+                    B
                   ] }),
-                  /* @__PURE__ */ a("p", { children: [
+                  /* @__PURE__ */ l("p", { children: [
                     "open: ",
-                    h
+                    p
                   ] }),
-                  /* @__PURE__ */ a("p", { children: [
+                  /* @__PURE__ */ l("p", { children: [
                     "path: ",
-                    m
+                    $
                   ] }),
-                  /* @__PURE__ */ a("p", { children: [
+                  /* @__PURE__ */ l("p", { children: [
                     "nav: ",
-                    E
+                    z
                   ] }),
-                  /* @__PURE__ */ a("p", { children: [
+                  /* @__PURE__ */ l("p", { children: [
                     "mobile: ",
-                    p
+                    w
                   ] })
                 ] })
               }
@@ -232,5 +283,5 @@ function oe({
   );
 }
 export {
-  oe as Navbar
+  fe as Navbar
 };

package/package.json

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

package/dist/NavLink-CE4AZJOV.cjs

@@ -1 +0,0 @@
-"use strict";require('./assets/NavLink.css');const o=require("react/jsx-runtime"),p=require("react"),k=require("./external-link-DDShu-48.cjs"),g=require("./chevron-down-DfK1XBl3.cjs"),m="_navbar_1bon6_5",w="_sticky_1bon6_19",x="_left_1bon6_34",f="_container_1bon6_35",I="_logo_1bon6_39",C="_nav_1bon6_5",N="_center_1bon6_54",j="_hidden_1bon6_60",$="_visible_1bon6_67",T="_right_1bon6_82",S="_title_1bon6_89",W="_linkWrapper_1bon6_99",E="_parent_1bon6_99",q="_linkItem_1bon6_107",y="_link_1bon6_99",L="_sublinkToggle_1bon6_111",M="_standard_1bon6_159",R="_triangle_1bon6_167",z="_transparent_1bon6_172",D="_twoColumn_1bon6_276",A="_navInner_1bon6_398",B="_grid_1bon6_409",F="_separator_1bon6_444",G="_newTabIcon_1bon6_474",H="_open_1bon6_500",J="_sublinks_1bon6_486",K="_show_1bon6_571",Q="_sublinksInner_1bon6_629",U="_sublinksColumn_1bon6_647",V="_chevron_1bon6_657",X="_advanced_1bon6_839",Y="_withSpotlight_1bon6_890",Z="_withoutSpotlight_1bon6_894",O="_searchWrapper_1bon6_940",e={navbar:m,sticky:w,left:x,container:f,logo:I,nav:C,center:N,hidden:j,visible:$,right:T,title:S,linkWrapper:W,parent:E,linkItem:q,link:y,sublinkToggle:L,standard:M,triangle:R,transparent:z,twoColumn:D,navInner:A,grid:B,separator:F,newTabIcon:G,open:H,sublinks:J,show:K,sublinksInner:Q,sublinksColumn:U,chevron:V,default:"_default_1bon6_773",advanced:X,withSpotlight:Y,withoutSpotlight:Z,searchWrapper:O};function P({link:n,path:s,parentPath:i,openPath:u,togglePath:l,updateTriangleIndicator:d,setOpenPath:t,renderLinks:h,buttonRefs:v}){var c;const r=u===s,_=!!((c=n.sublinks)!=null&&c.length),a=p.useRef(null);return v.current.set(s,a.current),o.jsxs("div",{className:`${e.linkWrapper} ${i?"":e.parent}`,children:[o.jsx("div",{className:e.linkItem,children:n.href?o.jsxs("a",{href:n.href,className:e.link,target:n.isExternal?"_blank":"_self",rel:n.isExternal?"noopener noreferrer":void 0,onClick:()=>{var b;t(null),(b=n.onClick)==null||b.call(n)},onMouseEnter:()=>{i||t(null)},role:"menuitem",children:[n.label,n.isExternal&&o.jsx(k.ExternalLink,{className:e.newTabIcon,size:16})]}):o.jsxs("button",{ref:a,"aria-haspopup":_?"true":void 0,"aria-expanded":r,className:`${e.sublinkToggle} ${r?e.open:""}`,onClick:()=>l(s),onMouseEnter:()=>{d(s),t(s)},children:[n.label,_&&o.jsx(g.ChevronDown,{size:18,className:e.chevron})]})}),_&&o.jsx("div",{className:`${e.sublinks} ${r?e.show:""}`,onMouseLeave:()=>l(s),role:"menu","aria-label":`${n.label} submenu`,children:o.jsx("div",{children:o.jsx("div",{className:e.sublinksInner,children:o.jsx("div",{className:e.sublinksColumn,children:h(n.sublinks,s)})})})})]},s)}exports.NavLink=P;exports.styles=e;