quirk-ui 0.0.418 → 0.0.419

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.
@@ -1,11 +1,11 @@
1
- import { jsxs as l, jsx as e } from "react/jsx-runtime";
1
+ import { jsxs as l, jsx as s } from "react/jsx-runtime";
2
2
  import { useRef as v } from "react";
3
- import { E as g } from "./external-link-BOPobeQJ.js";
4
- import { C as k } from "./chevron-down-DSUzBz9F.js";
5
- import './assets/NavLink.css';const C = "_navbar_1bon6_5", f = "_sticky_1bon6_19", w = "_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 = "_spotlightColumn_1bon6_625", Y = "_sublinksInner_1bon6_629", Z = "_sublinksColumn_1bon6_647", O = "_chevron_1bon6_657", P = "_advanced_1bon6_839", nn = "_subtitle_1bon6_848", on = "_withSpotlight_1bon6_890", sn = "_withoutSpotlight_1bon6_894", en = "_searchWrapper_1bon6_940", o = {
6
- navbar: C,
7
- sticky: f,
8
- left: w,
3
+ import { E as k } from "./external-link-BOPobeQJ.js";
4
+ import { C as g } from "./chevron-down-DSUzBz9F.js";
5
+ 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 = {
6
+ navbar: f,
7
+ sticky: w,
8
+ left: C,
9
9
  container: I,
10
10
  logo: N,
11
11
  nav: x,
@@ -32,20 +32,19 @@ import './assets/NavLink.css';const C = "_navbar_1bon6_5", f = "_sticky_1bon6_19
32
32
  sublinks: Q,
33
33
  show: U,
34
34
  primaryColumn: V,
35
- spotlightColumn: X,
36
- sublinksInner: Y,
37
- sublinksColumn: Z,
38
- chevron: O,
35
+ sublinksInner: X,
36
+ sublinksColumn: Y,
37
+ chevron: Z,
39
38
  default: "_default_1bon6_773",
40
- advanced: P,
41
- subtitle: nn,
42
- withSpotlight: on,
43
- withoutSpotlight: sn,
39
+ advanced: O,
40
+ subtitle: P,
41
+ withSpotlight: nn,
42
+ withoutSpotlight: on,
44
43
  searchWrapper: en
45
44
  };
46
- function an({
45
+ function ln({
47
46
  link: n,
48
- path: s,
47
+ path: e,
49
48
  parentPath: i,
50
49
  openPath: d,
51
50
  togglePath: a,
@@ -55,13 +54,13 @@ function an({
55
54
  buttonRefs: h
56
55
  }) {
57
56
  var b;
58
- const _ = d === s, r = !!((b = n.sublinks) != null && b.length), c = v(null);
59
- return h.current.set(s, c.current), /* @__PURE__ */ l(
57
+ const r = d === e, _ = !!((b = n.sublinks) != null && b.length), c = v(null);
58
+ return h.current.set(e, c.current), /* @__PURE__ */ l(
60
59
  "div",
61
60
  {
62
61
  className: `${o.linkWrapper} ${i ? "" : o.parent}`,
63
62
  children: [
64
- /* @__PURE__ */ e("div", { className: o.linkItem, children: n.href ? /* @__PURE__ */ l(
63
+ /* @__PURE__ */ s("div", { className: o.linkItem, children: n.href ? /* @__PURE__ */ l(
65
64
  "a",
66
65
  {
67
66
  href: n.href,
@@ -78,42 +77,42 @@ function an({
78
77
  role: "menuitem",
79
78
  children: [
80
79
  n.label,
81
- n.isExternal && /* @__PURE__ */ e(g, { className: o.newTabIcon, size: 16 })
80
+ n.isExternal && /* @__PURE__ */ s(k, { className: o.newTabIcon, size: 16 })
82
81
  ]
83
82
  }
84
83
  ) : /* @__PURE__ */ l(
85
84
  "button",
86
85
  {
87
86
  ref: c,
88
- "aria-haspopup": r ? "true" : void 0,
89
- "aria-expanded": _,
90
- className: `${o.sublinkToggle} ${_ ? o.open : ""}`,
91
- onClick: () => a(s),
87
+ "aria-haspopup": _ ? "true" : void 0,
88
+ "aria-expanded": r,
89
+ className: `${o.sublinkToggle} ${r ? o.open : ""}`,
90
+ onClick: () => a(e),
92
91
  onMouseEnter: () => {
93
- m(s), t(s);
92
+ m(e), t(e);
94
93
  },
95
94
  children: [
96
95
  n.label,
97
- r && /* @__PURE__ */ e(k, { size: 18, className: o.chevron })
96
+ _ && /* @__PURE__ */ s(g, { size: 18, className: o.chevron })
98
97
  ]
99
98
  }
100
99
  ) }),
101
- r && /* @__PURE__ */ e(
100
+ _ && /* @__PURE__ */ s(
102
101
  "div",
103
102
  {
104
- className: `${o.sublinks} ${_ ? o.show : ""}`,
105
- onMouseLeave: () => a(s),
103
+ className: `${o.sublinks} ${r ? o.show : ""}`,
104
+ onMouseLeave: () => a(e),
106
105
  role: "menu",
107
106
  "aria-label": `${n.label} submenu`,
108
- children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: o.sublinksInner, children: /* @__PURE__ */ e("div", { className: o.sublinksColumn, children: p(n.sublinks, s) }) }) })
107
+ children: /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s("div", { className: o.sublinksInner, children: /* @__PURE__ */ s("div", { className: o.sublinksColumn, children: p(n.sublinks, e) }) }) })
109
108
  }
110
109
  )
111
110
  ]
112
111
  },
113
- s
112
+ e
114
113
  );
115
114
  }
116
115
  export {
117
- an as N,
116
+ ln as N,
118
117
  o as s
119
118
  };
@@ -0,0 +1 @@
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;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");const e=require("../../../NavLink-Dr7pguuT.cjs");require("../../../external-link-DDShu-48.cjs");require("../../../chevron-down-DfK1XBl3.cjs");exports.NavLink=e.NavLink;
1
+ "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;
@@ -1,6 +1,6 @@
1
1
  import "react/jsx-runtime";
2
2
  import "react";
3
- import { N as a } from "../../../NavLink-CHG0iIum.js";
3
+ import { N as a } from "../../../NavLink-B5joxE9Z.js";
4
4
  import "../../../external-link-BOPobeQJ.js";
5
5
  import "../../../chevron-down-DSUzBz9F.js";
6
6
  export {
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("react"),e=require("../../../NavLink-Dr7pguuT.cjs"),ee=require("../../../chevron-down-DfK1XBl3.cjs"),se=require("../../../external-link-DDShu-48.cjs"),te={standard:e.styles.standard,transparent:e.styles.transparent},ne={left:e.styles.left,center:e.styles.center,right:e.styles.right};function le({title:P,logo:N,items:y,groups:d,utilityItems:w,isSticky:T=!1,showSearch:k=!0,showLocaleSelect:g=!0,alignment:f="right",variant:D="standard",navigationType:C="default",className:G}){const[X,F]=a.useState(0),[E,o]=a.useState(null),[v,V]=a.useState(!1),[L,A]=a.useState(!1),[H,J]=a.useState(!1),[K,Q]=a.useState(null),[m,p]=a.useState(0),[U,R]=a.useState(null),x=a.useRef(null),u=a.useRef(null),b=a.useRef(new Map),M=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem})}),I=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),$=n=>{const t=b.current.get(n);if(t&&u.current){const r=t.getBoundingClientRect(),i=u.current.getBoundingClientRect(),j=r.left-i.left+r.width/2;Q(j)}};console.log($);const Y=n=>{o(t=>t===n?null:n)},Z=n=>n.map((t,r)=>{var B,q;const i=`group-${r}`,h=U===r,j=(B=t.primaryItems)==null?void 0:B[m??0];return console.log(j),s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{R(r),o(i),$(i)},onMouseLeave:()=>{R(null),p(0),o(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:l=>{b.current.set(i,l)},role:"menuitem","aria-haspopup":"true","aria-expanded":h,"aria-controls":`submenu-${r}`,className:`${e.styles.sublinkToggle} ${h?e.styles.open:""} `,children:[t.title,s.jsx(ee.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${r}`,className:`${e.styles.sublinks} ${h?e.styles.show:""}`,role:"menu","aria-label":`${t.title} submenu`,children:s.jsx("div",{children:s.jsxs("div",{className:`${e.styles.sublinksInner} ${t.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}),(q=t.primaryItems)==null?void 0:q.map((l,c)=>l.href?s.jsxs("a",{href:l.href,className:`${e.styles.link} ${m===c?e.styles.open:""}`,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,onClick:()=>{var O;o(null),(O=l.onClick)==null||O.call(l)},onMouseEnter:()=>l.sublinks?p(c):null,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[l.label,l.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:l.subtitle})]}),l.isExternal&&s.jsx(se.ExternalLink,{className:e.styles.newTabIcon,size:16})]},l._key??c):s.jsx("button",{className:`${e.styles.sublinkToggle} ${m===c?e.styles.open:""}`,onMouseEnter:()=>p(c),children:s.jsxs("span",{className:e.styles.linkContent,children:[l.label,l.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:l.subtitle})]})},l._key??c))]}),t.spotlight&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.spotlightColumn}`,children:t.spotlight})]})})})]},t._key??`group-${r}`)}),S=(n,t="")=>n.map(r=>{const i=`${t}/${r.label}`;return s.jsx(e.NavLink,{link:r,path:i,parentPath:t,openPath:E,togglePath:Y,updateTriangleIndicator:$,setOpenPath:o,renderLinks:S,buttonRefs:b},r._key??i)}),W=a.useCallback(n=>{x.current&&!x.current.contains(n.target)&&o(null)},[]),_=a.useCallback(()=>{z(),typeof window<"u"&&window.innerWidth>768&&(V(!1),o(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),z=a.useCallback(()=>{if(u.current){const n=u.current.getBoundingClientRect().width;F(n),J(!0)}},[]);return a.useEffect(()=>{const n=typeof window<"u",t=typeof document<"u";return n&&window.addEventListener("resize",_),t&&document.addEventListener("click",W),z(),()=>{n&&window.removeEventListener("resize",_),t&&document.removeEventListener("click",W)}},[]),a.useEffect(()=>{if(typeof window<"u"){const n=()=>{const t=window.innerWidth<768;A(t)};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)}},[]),a.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=v?"hidden":"",()=>{document.body.style.overflow=""}},[v]),s.jsx("header",{ref:x,className:`${G??""} ${ne[f]} ${te[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} ${(!w||w.length===0)&&f!=="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:f==="center"?`calc(50% - ${X/2}px)`:"0"},className:`${e.styles.nav} ${v?e.styles.open:""} ${H?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:`${K}px`},className:`${e.styles.triangle} ${E?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"})}),C==="default"&&y&&s.jsxs("div",{className:e.styles.grid,children:[y&&y.length>0&&S(y),k&&!L&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(M,{})]}),g&&s.jsx(I,{})]}),!L&&C==="advanced"&&d&&s.jsxs("div",{className:e.styles.grid,children:[d.length>0&&Z(d),k&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(M,{})]}),g&&s.jsx(I,{})]})]})})]})})}exports.Navbar=le;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("react"),e=require("../../../NavLink-BSVUqHZT.cjs"),ee=require("../../../chevron-down-DfK1XBl3.cjs"),se=require("../../../external-link-DDShu-48.cjs"),te={standard:e.styles.standard,transparent:e.styles.transparent},ne={left:e.styles.left,center:e.styles.center,right:e.styles.right};function le({title:P,logo:w,items:y,groups:d,utilityItems:N,isSticky:T=!1,showSearch:k=!0,showLocaleSelect:g=!0,alignment:f="right",variant:D="standard",navigationType:C="default",className:G}){const[X,F]=a.useState(0),[E,o]=a.useState(null),[v,V]=a.useState(!1),[L,A]=a.useState(!1),[H,J]=a.useState(!1),[K,Q]=a.useState(null),[m,p]=a.useState(0),[U,R]=a.useState(null),x=a.useRef(null),u=a.useRef(null),b=a.useRef(new Map),M=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem})}),I=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),$=t=>{const n=b.current.get(t);if(n&&u.current){const r=n.getBoundingClientRect(),i=u.current.getBoundingClientRect(),j=r.left-i.left+r.width/2;Q(j)}};console.log($);const Y=t=>{o(n=>n===t?null:t)},Z=t=>t.map((n,r)=>{var B,q;const i=`group-${r}`,h=U===r,j=(B=n.primaryItems)==null?void 0:B[m??0];return console.log(j),s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{R(r),o(i),$(i)},onMouseLeave:()=>{R(null),p(0),o(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:l=>{b.current.set(i,l)},role:"menuitem","aria-haspopup":"true","aria-expanded":h,"aria-controls":`submenu-${r}`,className:`${e.styles.sublinkToggle} ${h?e.styles.open:""} `,children:[n.title,s.jsx(ee.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${r}`,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}`,children:s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.primaryColumn}`,children:[s.jsx("div",{className:e.styles.linkItem}),(q=n.primaryItems)==null?void 0:q.map((l,c)=>l.href?s.jsxs("a",{href:l.href,className:`${e.styles.link} ${m===c?e.styles.open:""}`,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,onClick:()=>{var O;o(null),(O=l.onClick)==null||O.call(l)},onMouseEnter:()=>l.sublinks?p(c):null,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[l.label,l.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:l.subtitle})]}),l.isExternal&&s.jsx(se.ExternalLink,{className:e.styles.newTabIcon,size:16})]},l._key??c):s.jsx("button",{className:`${e.styles.sublinkToggle} ${m===c?e.styles.open:""}`,onMouseEnter:()=>p(c),children:s.jsxs("span",{className:e.styles.linkContent,children:[l.label,l.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:l.subtitle})]})},l._key??c))]})})})})]},n._key??`group-${r}`)}),S=(t,n="")=>t.map(r=>{const i=`${n}/${r.label}`;return s.jsx(e.NavLink,{link:r,path:i,parentPath:n,openPath:E,togglePath:Y,updateTriangleIndicator:$,setOpenPath:o,renderLinks:S,buttonRefs:b},r._key??i)}),W=a.useCallback(t=>{x.current&&!x.current.contains(t.target)&&o(null)},[]),_=a.useCallback(()=>{z(),typeof window<"u"&&window.innerWidth>768&&(V(!1),o(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),z=a.useCallback(()=>{if(u.current){const t=u.current.getBoundingClientRect().width;F(t),J(!0)}},[]);return a.useEffect(()=>{const t=typeof window<"u",n=typeof document<"u";return t&&window.addEventListener("resize",_),n&&document.addEventListener("click",W),z(),()=>{t&&window.removeEventListener("resize",_),n&&document.removeEventListener("click",W)}},[]),a.useEffect(()=>{if(typeof window<"u"){const t=()=>{const n=window.innerWidth<768;A(n)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)}},[]),a.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=v?"hidden":"",()=>{document.body.style.overflow=""}},[v]),s.jsx("header",{ref:x,className:`${G??""} ${ne[f]} ${te[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} ${(!N||N.length===0)&&f!=="center"?e.styles.twoColumn:""}`,children:[w?s.jsx("div",{className:e.styles.logo,children:w}):s.jsx("div",{className:e.styles.title,children:P}),s.jsx("nav",{ref:u,style:{left:f==="center"?`calc(50% - ${X/2}px)`:"0"},className:`${e.styles.nav} ${v?e.styles.open:""} ${H?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:`${K}px`},className:`${e.styles.triangle} ${E?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"})}),C==="default"&&y&&s.jsxs("div",{className:e.styles.grid,children:[y&&y.length>0&&S(y),k&&!L&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(M,{})]}),g&&s.jsx(I,{})]}),!L&&C==="advanced"&&d&&s.jsxs("div",{className:e.styles.grid,children:[d.length>0&&Z(d),k&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(M,{})]}),g&&s.jsx(I,{})]})]})})]})})}exports.Navbar=le;
@@ -1,8 +1,8 @@
1
- import { jsx as n, jsxs as i, Fragment as V } from "react/jsx-runtime";
1
+ import { jsx as n, jsxs as r, Fragment as V } from "react/jsx-runtime";
2
2
  import { useState as o, useRef as y, useCallback as C, useEffect as E } from "react";
3
- import { s as e, N as ae } from "../../../NavLink-CHG0iIum.js";
4
- import { C as ie } from "../../../chevron-down-DSUzBz9F.js";
5
- import { E as re } from "../../../external-link-BOPobeQJ.js";
3
+ import { s as e, N as le } from "../../../NavLink-B5joxE9Z.js";
4
+ import { C as re } from "../../../chevron-down-DSUzBz9F.js";
5
+ import { E as ie } from "../../../external-link-BOPobeQJ.js";
6
6
  const oe = {
7
7
  standard: e.standard,
8
8
  transparent: e.transparent
@@ -27,7 +27,7 @@ function ve({
27
27
  // localeSelectComponent,
28
28
  className: q
29
29
  }) {
30
- const [J, K] = o(0), [W, c] = o(null), [p, Q] = o(!1), [z, U] = o(!1), [Y, Z] = o(!1), [ee, ne] = o(null), [$, b] = o(
30
+ const [J, K] = o(0), [W, c] = o(null), [p, Q] = o(!1), [z, U] = o(!1), [Y, Z] = o(!1), [ee, ne] = o(null), [b, $] = o(
31
31
  0
32
32
  ), [te, B] = o(null), w = y(null), h = y(null), N = y(/* @__PURE__ */ new Map()), _ = () => /* @__PURE__ */ n(
33
33
  "div",
@@ -35,134 +35,125 @@ function ve({
35
35
  className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,
36
36
  children: /* @__PURE__ */ n("div", { className: e.linkItem })
37
37
  }
38
- ), O = () => /* @__PURE__ */ n("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ n("div", { className: e.linkItem }) }), k = (s) => {
39
- const t = N.current.get(s);
40
- if (t && h.current) {
41
- const a = t.getBoundingClientRect(), r = h.current.getBoundingClientRect(), g = a.left - r.left + a.width / 2;
38
+ ), O = () => /* @__PURE__ */ n("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ n("div", { className: e.linkItem }) }), k = (t) => {
39
+ const s = N.current.get(t);
40
+ if (s && h.current) {
41
+ const l = s.getBoundingClientRect(), i = h.current.getBoundingClientRect(), g = l.left - i.left + l.width / 2;
42
42
  ne(g);
43
43
  }
44
44
  };
45
45
  console.log(k);
46
- const se = (s) => {
47
- c((t) => t === s ? null : s);
48
- }, le = (s) => s.map((t, a) => {
46
+ const se = (t) => {
47
+ c((s) => s === t ? null : t);
48
+ }, ae = (t) => t.map((s, l) => {
49
49
  var X, D;
50
- const r = `group-${a}`, m = te === a, g = (X = t.primaryItems) == null ? void 0 : X[$ ?? 0];
51
- return console.log(g), /* @__PURE__ */ i(
50
+ const i = `group-${l}`, m = te === l, g = (X = s.primaryItems) == null ? void 0 : X[b ?? 0];
51
+ return console.log(g), /* @__PURE__ */ r(
52
52
  "div",
53
53
  {
54
54
  className: `${e.linkWrapper} ${e.parent}`,
55
55
  onMouseEnter: () => {
56
- B(a), c(r), k(r);
56
+ B(l), c(i), k(i);
57
57
  },
58
58
  onMouseLeave: () => {
59
- B(null), b(0), c(null);
59
+ B(null), $(0), c(null);
60
60
  },
61
61
  children: [
62
- /* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ i(
62
+ /* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ r(
63
63
  "button",
64
64
  {
65
- ref: (l) => {
66
- N.current.set(r, l);
65
+ ref: (a) => {
66
+ N.current.set(i, a);
67
67
  },
68
68
  role: "menuitem",
69
69
  "aria-haspopup": "true",
70
70
  "aria-expanded": m,
71
- "aria-controls": `submenu-${a}`,
71
+ "aria-controls": `submenu-${l}`,
72
72
  className: `${e.sublinkToggle} ${m ? e.open : ""} `,
73
73
  children: [
74
- t.title,
75
- /* @__PURE__ */ n(ie, { size: 18, className: e.chevron })
74
+ s.title,
75
+ /* @__PURE__ */ n(re, { size: 18, className: e.chevron })
76
76
  ]
77
77
  }
78
78
  ) }),
79
79
  /* @__PURE__ */ n(
80
80
  "div",
81
81
  {
82
- id: `submenu-${a}`,
82
+ id: `submenu-${l}`,
83
83
  className: `${e.sublinks} ${m ? e.show : ""}`,
84
84
  role: "menu",
85
- "aria-label": `${t.title} submenu`,
86
- children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ i(
85
+ "aria-label": `${s.title} submenu`,
86
+ children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(
87
87
  "div",
88
88
  {
89
- className: `${e.sublinksInner} ${t.spotlight ? e.withSpotlight : e.withoutSpotlight}`,
90
- children: [
91
- /* @__PURE__ */ i(
92
- "div",
93
- {
94
- className: `${e.sublinksColumn} ${e.primaryColumn}`,
95
- children: [
96
- /* @__PURE__ */ n("div", { className: e.linkItem }),
97
- (D = t.primaryItems) == null ? void 0 : D.map(
98
- (l, d) => l.href ? /* @__PURE__ */ i(
99
- "a",
100
- {
101
- href: l.href,
102
- className: `${e.link} ${$ === d ? e.open : ""}`,
103
- target: l.isExternal ? "_blank" : "_self",
104
- rel: l.isExternal ? "noopener noreferrer" : void 0,
105
- onClick: () => {
106
- var S;
107
- c(null), (S = l.onClick) == null || S.call(l);
108
- },
109
- onMouseEnter: () => l.sublinks ? b(d) : null,
110
- role: "menuitem",
111
- children: [
112
- /* @__PURE__ */ i("span", { className: e.linkContent, children: [
113
- l.label,
114
- l.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: l.subtitle })
115
- ] }),
116
- l.isExternal && /* @__PURE__ */ n(
117
- re,
118
- {
119
- className: e.newTabIcon,
120
- size: 16
121
- }
122
- )
123
- ]
124
- },
125
- l._key ?? d
126
- ) : /* @__PURE__ */ n(
127
- "button",
128
- {
129
- className: `${e.sublinkToggle} ${$ === d ? e.open : ""}`,
130
- onMouseEnter: () => b(d),
131
- children: /* @__PURE__ */ i("span", { className: e.linkContent, children: [
132
- l.label,
133
- l.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: l.subtitle })
134
- ] })
89
+ className: `${e.sublinksInner} ${s.spotlight ? e.withSpotlight : e.withoutSpotlight}`,
90
+ children: /* @__PURE__ */ r(
91
+ "div",
92
+ {
93
+ className: `${e.sublinksColumn} ${e.primaryColumn}`,
94
+ children: [
95
+ /* @__PURE__ */ n("div", { className: e.linkItem }),
96
+ (D = s.primaryItems) == null ? void 0 : D.map(
97
+ (a, d) => a.href ? /* @__PURE__ */ r(
98
+ "a",
99
+ {
100
+ href: a.href,
101
+ className: `${e.link} ${b === d ? e.open : ""}`,
102
+ target: a.isExternal ? "_blank" : "_self",
103
+ rel: a.isExternal ? "noopener noreferrer" : void 0,
104
+ onClick: () => {
105
+ var S;
106
+ c(null), (S = a.onClick) == null || S.call(a);
135
107
  },
136
- l._key ?? d
137
- )
108
+ onMouseEnter: () => a.sublinks ? $(d) : null,
109
+ role: "menuitem",
110
+ children: [
111
+ /* @__PURE__ */ r("span", { className: e.linkContent, children: [
112
+ a.label,
113
+ a.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: a.subtitle })
114
+ ] }),
115
+ a.isExternal && /* @__PURE__ */ n(
116
+ ie,
117
+ {
118
+ className: e.newTabIcon,
119
+ size: 16
120
+ }
121
+ )
122
+ ]
123
+ },
124
+ a._key ?? d
125
+ ) : /* @__PURE__ */ n(
126
+ "button",
127
+ {
128
+ className: `${e.sublinkToggle} ${b === d ? e.open : ""}`,
129
+ onMouseEnter: () => $(d),
130
+ children: /* @__PURE__ */ r("span", { className: e.linkContent, children: [
131
+ a.label,
132
+ a.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: a.subtitle })
133
+ ] })
134
+ },
135
+ a._key ?? d
138
136
  )
139
- ]
140
- }
141
- ),
142
- t.spotlight && /* @__PURE__ */ n(
143
- "div",
144
- {
145
- className: `${e.sublinksColumn} ${e.spotlightColumn}`,
146
- children: t.spotlight
147
- }
148
- )
149
- ]
137
+ )
138
+ ]
139
+ }
140
+ )
150
141
  }
151
142
  ) })
152
143
  }
153
144
  )
154
145
  ]
155
146
  },
156
- t._key ?? `group-${a}`
147
+ s._key ?? `group-${l}`
157
148
  );
158
- }), P = (s, t = "") => s.map((a) => {
159
- const r = `${t}/${a.label}`;
149
+ }), P = (t, s = "") => t.map((l) => {
150
+ const i = `${s}/${l.label}`;
160
151
  return /* @__PURE__ */ n(
161
- ae,
152
+ le,
162
153
  {
163
- link: a,
164
- path: r,
165
- parentPath: t,
154
+ link: l,
155
+ path: i,
156
+ parentPath: s,
166
157
  openPath: W,
167
158
  togglePath: se,
168
159
  updateTriangleIndicator: k,
@@ -170,30 +161,30 @@ function ve({
170
161
  renderLinks: P,
171
162
  buttonRefs: N
172
163
  },
173
- a._key ?? r
164
+ l._key ?? i
174
165
  );
175
- }), T = C((s) => {
176
- w.current && !w.current.contains(s.target) && c(null);
166
+ }), T = C((t) => {
167
+ w.current && !w.current.contains(t.target) && c(null);
177
168
  }, []), j = C(() => {
178
169
  G(), typeof window < "u" && window.innerWidth > 768 && (Q(!1), c(null), typeof document < "u" && (document.body.style.overflow = ""));
179
170
  }, []), G = C(() => {
180
171
  if (h.current) {
181
- const s = h.current.getBoundingClientRect().width;
182
- K(s), Z(!0);
172
+ const t = h.current.getBoundingClientRect().width;
173
+ K(t), Z(!0);
183
174
  }
184
175
  }, []);
185
176
  return E(() => {
186
- const s = typeof window < "u", t = typeof document < "u";
187
- return s && window.addEventListener("resize", j), t && document.addEventListener("click", T), G(), () => {
188
- s && window.removeEventListener("resize", j), t && document.removeEventListener("click", T);
177
+ const t = typeof window < "u", s = typeof document < "u";
178
+ return t && window.addEventListener("resize", j), s && document.addEventListener("click", T), G(), () => {
179
+ t && window.removeEventListener("resize", j), s && document.removeEventListener("click", T);
189
180
  };
190
181
  }, []), E(() => {
191
182
  if (typeof window < "u") {
192
- const s = () => {
193
- const t = window.innerWidth < 768;
194
- U(t);
183
+ const t = () => {
184
+ const s = window.innerWidth < 768;
185
+ U(s);
195
186
  };
196
- return s(), window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
187
+ return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
197
188
  }
198
189
  }, []), E(() => {
199
190
  if (typeof document < "u")
@@ -207,7 +198,7 @@ function ve({
207
198
  className: `${q ?? ""} ${ce[v]} ${oe[H]} ${e.navbar} ${F ? e.sticky : ""} ${u && u.length ? e.advanced : e.default}`,
208
199
  role: "navigation",
209
200
  "aria-label": "Main navigation",
210
- children: /* @__PURE__ */ i(
201
+ children: /* @__PURE__ */ r(
211
202
  "div",
212
203
  {
213
204
  className: `${e.container} ${(!I || I.length === 0) && v !== "center" ? e.twoColumn : ""}`,
@@ -224,7 +215,7 @@ function ve({
224
215
  id: "main-menu",
225
216
  role: "menubar",
226
217
  "aria-label": "Main navigation",
227
- children: /* @__PURE__ */ i("div", { className: e.navInner, children: [
218
+ children: /* @__PURE__ */ r("div", { className: e.navInner, children: [
228
219
  /* @__PURE__ */ n(
229
220
  "svg",
230
221
  {
@@ -245,17 +236,17 @@ function ve({
245
236
  )
246
237
  }
247
238
  ),
248
- R === "default" && f && /* @__PURE__ */ i("div", { className: e.grid, children: [
239
+ R === "default" && f && /* @__PURE__ */ r("div", { className: e.grid, children: [
249
240
  f && f.length > 0 && P(f),
250
- M && !z && /* @__PURE__ */ i(V, { children: [
241
+ M && !z && /* @__PURE__ */ r(V, { children: [
251
242
  /* @__PURE__ */ n("span", { className: e.separator }),
252
243
  /* @__PURE__ */ n(_, {})
253
244
  ] }),
254
245
  x && /* @__PURE__ */ n(O, {})
255
246
  ] }),
256
- !z && R === "advanced" && u && /* @__PURE__ */ i("div", { className: e.grid, children: [
257
- u.length > 0 && le(u),
258
- M && /* @__PURE__ */ i(V, { children: [
247
+ !z && R === "advanced" && u && /* @__PURE__ */ r("div", { className: e.grid, children: [
248
+ u.length > 0 && ae(u),
249
+ M && /* @__PURE__ */ r(V, { children: [
259
250
  /* @__PURE__ */ n("span", { className: e.separator }),
260
251
  /* @__PURE__ */ n(_, {})
261
252
  ] }),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.418",
4
+ "version": "0.0.419",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {
@@ -1 +0,0 @@
1
- "use strict";require('./assets/NavLink.css');const e=require("react/jsx-runtime"),m=require("react"),v=require("./external-link-DDShu-48.cjs"),k=require("./chevron-down-DfK1XBl3.cjs"),g="_navbar_1bon6_5",C="_sticky_1bon6_19",w="_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="_spotlightColumn_1bon6_625",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:g,sticky:C,left:w,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,spotlightColumn:V,sublinksInner:X,sublinksColumn:Y,chevron:Z,default:"_default_1bon6_773",advanced:O,subtitle:P,withSpotlight:nn,withoutSpotlight:on,searchWrapper:en};function sn({link:n,path:s,parentPath:l,openPath:u,togglePath:i,updateTriangleIndicator:d,setOpenPath:t,renderLinks:h,buttonRefs:p}){var c;const r=u===s,_=!!((c=n.sublinks)!=null&&c.length),a=m.useRef(null);return p.current.set(s,a.current),e.jsxs("div",{className:`${o.linkWrapper} ${l?"":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:()=>{l||t(null)},role:"menuitem",children:[n.label,n.isExternal&&e.jsx(v.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:()=>i(s),onMouseEnter:()=>{d(s),t(s)},children:[n.label,_&&e.jsx(k.ChevronDown,{size:18,className:o.chevron})]})}),_&&e.jsx("div",{className:`${o.sublinks} ${r?o.show:""}`,onMouseLeave:()=>i(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=sn;exports.styles=o;