quirk-ui 0.0.415 → 0.0.417

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,8 +1,8 @@
1
- import { jsxs as l, jsx as s } from "react/jsx-runtime";
1
+ import { jsxs as l, jsx as e } from "react/jsx-runtime";
2
2
  import { useRef as v } from "react";
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 C = "_navbar_1bon6_5", f = "_sticky_1bon6_19", w = "_left_1bon6_34", I = "_container_1bon6_35", N = "_logo_1bon6_39", y = "_nav_1bon6_5", x = "_center_1bon6_54", T = "_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 = "_secondaryColumn_1bon6_621", Y = "_sublinksInner_1bon6_629", Z = "_sublinksColumn_1bon6_647", O = "_chevron_1bon6_657", P = "_advanced_1bon6_839", nn = "_subtitle_1bon6_848", on = "_withSpotlight_1bon6_890", en = "_withoutSpotlight_1bon6_894", sn = "_searchWrapper_1bon6_940", o = {
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", y = "_nav_1bon6_5", x = "_center_1bon6_54", T = "_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 = "_secondaryColumn_1bon6_621", Y = "_spotlightColumn_1bon6_625", Z = "_sublinksInner_1bon6_629", O = "_sublinksColumn_1bon6_647", P = "_chevron_1bon6_657", nn = "_advanced_1bon6_839", on = "_subtitle_1bon6_848", sn = "_withSpotlight_1bon6_890", en = "_withoutSpotlight_1bon6_894", tn = "_searchWrapper_1bon6_940", o = {
6
6
  navbar: C,
7
7
  sticky: f,
8
8
  left: w,
@@ -33,19 +33,20 @@ import './assets/NavLink.css';const C = "_navbar_1bon6_5", f = "_sticky_1bon6_19
33
33
  show: U,
34
34
  primaryColumn: V,
35
35
  secondaryColumn: X,
36
- sublinksInner: Y,
37
- sublinksColumn: Z,
38
- chevron: O,
36
+ spotlightColumn: Y,
37
+ sublinksInner: Z,
38
+ sublinksColumn: O,
39
+ chevron: P,
39
40
  default: "_default_1bon6_773",
40
- advanced: P,
41
- subtitle: nn,
42
- withSpotlight: on,
41
+ advanced: nn,
42
+ subtitle: on,
43
+ withSpotlight: sn,
43
44
  withoutSpotlight: en,
44
- searchWrapper: sn
45
+ searchWrapper: tn
45
46
  };
46
- function an({
47
+ function cn({
47
48
  link: n,
48
- path: e,
49
+ path: s,
49
50
  parentPath: i,
50
51
  openPath: d,
51
52
  togglePath: a,
@@ -55,13 +56,13 @@ function an({
55
56
  buttonRefs: h
56
57
  }) {
57
58
  var b;
58
- const r = d === e, _ = !!((b = n.sublinks) != null && b.length), c = v(null);
59
- return h.current.set(e, c.current), /* @__PURE__ */ l(
59
+ const _ = d === s, r = !!((b = n.sublinks) != null && b.length), c = v(null);
60
+ return h.current.set(s, c.current), /* @__PURE__ */ l(
60
61
  "div",
61
62
  {
62
63
  className: `${o.linkWrapper} ${i ? "" : o.parent}`,
63
64
  children: [
64
- /* @__PURE__ */ s("div", { className: o.linkItem, children: n.href ? /* @__PURE__ */ l(
65
+ /* @__PURE__ */ e("div", { className: o.linkItem, children: n.href ? /* @__PURE__ */ l(
65
66
  "a",
66
67
  {
67
68
  href: n.href,
@@ -78,42 +79,42 @@ function an({
78
79
  role: "menuitem",
79
80
  children: [
80
81
  n.label,
81
- n.isExternal && /* @__PURE__ */ s(k, { className: o.newTabIcon, size: 16 })
82
+ n.isExternal && /* @__PURE__ */ e(g, { className: o.newTabIcon, size: 16 })
82
83
  ]
83
84
  }
84
85
  ) : /* @__PURE__ */ l(
85
86
  "button",
86
87
  {
87
88
  ref: c,
88
- "aria-haspopup": _ ? "true" : void 0,
89
- "aria-expanded": r,
90
- className: `${o.sublinkToggle} ${r ? o.open : ""}`,
91
- onClick: () => a(e),
89
+ "aria-haspopup": r ? "true" : void 0,
90
+ "aria-expanded": _,
91
+ className: `${o.sublinkToggle} ${_ ? o.open : ""}`,
92
+ onClick: () => a(s),
92
93
  onMouseEnter: () => {
93
- m(e), t(e);
94
+ m(s), t(s);
94
95
  },
95
96
  children: [
96
97
  n.label,
97
- _ && /* @__PURE__ */ s(g, { size: 18, className: o.chevron })
98
+ r && /* @__PURE__ */ e(k, { size: 18, className: o.chevron })
98
99
  ]
99
100
  }
100
101
  ) }),
101
- _ && /* @__PURE__ */ s(
102
+ r && /* @__PURE__ */ e(
102
103
  "div",
103
104
  {
104
- className: `${o.sublinks} ${r ? o.show : ""}`,
105
- onMouseLeave: () => a(e),
105
+ className: `${o.sublinks} ${_ ? o.show : ""}`,
106
+ onMouseLeave: () => a(s),
106
107
  role: "menu",
107
108
  "aria-label": `${n.label} submenu`,
108
- children: /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s("div", { className: o.sublinksInner, children: /* @__PURE__ */ s("div", { className: o.sublinksColumn, children: p(n.sublinks, e) }) }) })
109
+ children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: o.sublinksInner, children: /* @__PURE__ */ e("div", { className: o.sublinksColumn, children: p(n.sublinks, s) }) }) })
109
110
  }
110
111
  )
111
112
  ]
112
113
  },
113
- e
114
+ s
114
115
  );
115
116
  }
116
117
  export {
117
- an as N,
118
+ cn as N,
118
119
  o as s
119
120
  };
@@ -0,0 +1 @@
1
+ "use strict";require('./assets/NavLink.css');const e=require("react/jsx-runtime"),p=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",y="_center_1bon6_54",N="_hidden_1bon6_60",j="_visible_1bon6_67",$="_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="_secondaryColumn_1bon6_621",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",en="_withoutSpotlight_1bon6_894",sn="_searchWrapper_1bon6_940",o={navbar:g,sticky:C,left:w,container:x,logo:f,nav:I,center:y,hidden:N,visible:j,right:$,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,secondaryColumn:V,spotlightColumn:X,sublinksInner:Y,sublinksColumn:Z,chevron:O,default:"_default_1bon6_773",advanced:P,subtitle:nn,withSpotlight:on,withoutSpotlight:en,searchWrapper:sn};function tn({link:n,path:s,parentPath:l,openPath:u,togglePath:i,updateTriangleIndicator:d,setOpenPath:t,renderLinks:h,buttonRefs:m}){var c;const r=u===s,_=!!((c=n.sublinks)!=null&&c.length),a=p.useRef(null);return m.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=tn;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-B-VlTZ4z.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-VkWDBdck.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-DIfybFk5.js";
3
+ import { N as a } from "../../../NavLink-BTwMRfGl.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-B-VlTZ4z.cjs"),se=require("../../../chevron-down-DfK1XBl3.cjs"),te=require("../../../external-link-DDShu-48.cjs"),ne={standard:e.styles.standard,transparent:e.styles.transparent},le={left:e.styles.left,center:e.styles.center,right:e.styles.right};function ae({title:T,logo:p,items:y,groups:d,utilityItems:k,isSticky:D=!1,showSearch:g=!0,showLocaleSelect:C=!0,alignment:f="right",variant:G="standard",navigationType:I="default",className:X}){const[F,V]=a.useState(0),[E,c]=a.useState(null),[v,A]=a.useState(!1),[L,H]=a.useState(!1),[J,K]=a.useState(!1),[Q,U]=a.useState(null),[m,x]=a.useState(0),[Y,R]=a.useState(null),b=a.useRef(null),u=a.useRef(null),$=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})}),S=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),j=n=>{const t=$.current.get(n);if(t&&u.current){const r=t.getBoundingClientRect(),i=u.current.getBoundingClientRect(),w=r.left-i.left+r.width/2;U(w)}};console.log(j);const Z=n=>{c(t=>t===n?null:n)},ee=n=>n.map((t,r)=>{var B,q,O;const i=`group-${r}`,h=Y===r,w=(B=t.primaryItems)==null?void 0:B[m??0];return console.log(w),s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{R(r),c(i),j(i)},onMouseLeave:()=>{R(null),x(0),c(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:l=>{$.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(se.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,o)=>l.href?s.jsxs("a",{href:l.href,className:`${e.styles.link} ${m===o?e.styles.open:""}`,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,onClick:()=>{var P;c(null),(P=l.onClick)==null||P.call(l)},onMouseEnter:()=>l.sublinks?x(o):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(te.ExternalLink,{className:e.styles.newTabIcon,size:16})]},l._key??o):s.jsx("button",{className:`${e.styles.sublinkToggle} ${m===o?e.styles.open:""}`,onMouseEnter:()=>x(o),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??o))]}),(t==null?void 0:t.secondaryItems)&&((O=t==null?void 0:t.secondaryItems)==null?void 0:O.length)>0&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.secondaryColumn}`,children:t.secondaryItems&&t.secondaryItems.length>0&&N(t.secondaryItems,`${i}-secondary`)})]})})})]},t._key??`group-${r}`)}),N=(n,t="")=>n.map(r=>{const i=`${t}/${r.label}`;return s.jsx(e.NavLink,{link:r,path:i,parentPath:t,openPath:E,togglePath:Z,updateTriangleIndicator:j,setOpenPath:c,renderLinks:N,buttonRefs:$},r._key??i)}),W=a.useCallback(n=>{b.current&&!b.current.contains(n.target)&&c(null)},[]),_=a.useCallback(()=>{z(),typeof window<"u"&&window.innerWidth>768&&(A(!1),c(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),z=a.useCallback(()=>{if(u.current){const n=u.current.getBoundingClientRect().width;V(n),K(!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;H(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:b,className:`${X??""} ${le[f]} ${ne[G]} ${e.styles.navbar} ${D?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)&&f!=="center"?e.styles.twoColumn:""}`,children:[p?s.jsx("div",{className:e.styles.logo,children:p}):s.jsx("div",{className:e.styles.title,children:T}),s.jsx("nav",{ref:u,style:{left:f==="center"?`calc(50% - ${F/2}px)`:"0"},className:`${e.styles.nav} ${v?e.styles.open:""} ${J?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:`${Q}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"})}),I==="default"&&y&&s.jsxs("div",{className:e.styles.grid,children:[y&&y.length>0&&N(y),g&&!L&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(M,{})]}),C&&s.jsx(S,{})]}),!L&&I==="advanced"&&d&&s.jsxs("div",{className:e.styles.grid,children:[d.length>0&&ee(d),g&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(M,{})]}),C&&s.jsx(S,{})]})]})})]})})}exports.Navbar=ae;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("react"),e=require("../../../NavLink-VkWDBdck.cjs"),se=require("../../../chevron-down-DfK1XBl3.cjs"),te=require("../../../external-link-DDShu-48.cjs"),ne={standard:e.styles.standard,transparent:e.styles.transparent},le={left:e.styles.left,center:e.styles.center,right:e.styles.right};function ae({title:T,logo:p,items:y,groups:d,utilityItems:k,isSticky:D=!1,showSearch:g=!0,showLocaleSelect:C=!0,alignment:f="right",variant:G="standard",navigationType:I="default",className:X}){const[F,V]=a.useState(0),[E,c]=a.useState(null),[m,A]=a.useState(!1),[L,H]=a.useState(!1),[J,K]=a.useState(!1),[Q,U]=a.useState(null),[v,x]=a.useState(0),[Y,R]=a.useState(null),b=a.useRef(null),u=a.useRef(null),$=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})}),S=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),j=n=>{const t=$.current.get(n);if(t&&u.current){const i=t.getBoundingClientRect(),r=u.current.getBoundingClientRect(),w=i.left-r.left+i.width/2;U(w)}};console.log(j);const Z=n=>{c(t=>t===n?null:n)},ee=n=>n.map((t,i)=>{var B,q,O;const r=`group-${i}`,h=Y===i,w=(B=t.primaryItems)==null?void 0:B[v??0];return console.log(w),s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{R(i),c(r),j(r)},onMouseLeave:()=>{R(null),x(0),c(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:l=>{$.current.set(r,l)},role:"menuitem","aria-haspopup":"true","aria-expanded":h,"aria-controls":`submenu-${i}`,className:`${e.styles.sublinkToggle} ${h?e.styles.open:""} `,children:[t.title,s.jsx(se.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":`${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,o)=>l.href?s.jsxs("a",{href:l.href,className:`${e.styles.link} ${v===o?e.styles.open:""}`,target:l.isExternal?"_blank":"_self",rel:l.isExternal?"noopener noreferrer":void 0,onClick:()=>{var P;c(null),(P=l.onClick)==null||P.call(l)},onMouseEnter:()=>l.sublinks?x(o):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(te.ExternalLink,{className:e.styles.newTabIcon,size:16})]},l._key??o):s.jsx("button",{className:`${e.styles.sublinkToggle} ${v===o?e.styles.open:""}`,onMouseEnter:()=>x(o),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??o))]}),(t==null?void 0:t.secondaryItems)&&((O=t==null?void 0:t.secondaryItems)==null?void 0:O.length)>0&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.secondaryColumn}`,children:t.secondaryItems&&t.secondaryItems.length>0&&N(t.secondaryItems,`${r}-secondary`)}),t.spotlight&&s.jsx("div",{className:`${e.styles.sublinksColumn} ${e.styles.spotlightColumn}`,children:t.spotlight})]})})})]},t._key??`group-${i}`)}),N=(n,t="")=>n.map(i=>{const r=`${t}/${i.label}`;return s.jsx(e.NavLink,{link:i,path:r,parentPath:t,openPath:E,togglePath:Z,updateTriangleIndicator:j,setOpenPath:c,renderLinks:N,buttonRefs:$},i._key??r)}),W=a.useCallback(n=>{b.current&&!b.current.contains(n.target)&&c(null)},[]),_=a.useCallback(()=>{z(),typeof window<"u"&&window.innerWidth>768&&(A(!1),c(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),z=a.useCallback(()=>{if(u.current){const n=u.current.getBoundingClientRect().width;V(n),K(!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;H(t)};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)}},[]),a.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=m?"hidden":"",()=>{document.body.style.overflow=""}},[m]),s.jsx("header",{ref:b,className:`${X??""} ${le[f]} ${ne[G]} ${e.styles.navbar} ${D?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)&&f!=="center"?e.styles.twoColumn:""}`,children:[p?s.jsx("div",{className:e.styles.logo,children:p}):s.jsx("div",{className:e.styles.title,children:T}),s.jsx("nav",{ref:u,style:{left:f==="center"?`calc(50% - ${F/2}px)`:"0"},className:`${e.styles.nav} ${m?e.styles.open:""} ${J?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:`${Q}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"})}),I==="default"&&y&&s.jsxs("div",{className:e.styles.grid,children:[y&&y.length>0&&N(y),g&&!L&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(M,{})]}),C&&s.jsx(S,{})]}),!L&&I==="advanced"&&d&&s.jsxs("div",{className:e.styles.grid,children:[d.length>0&&ee(d),g&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(M,{})]}),C&&s.jsx(S,{})]})]})})]})})}exports.Navbar=ae;
@@ -1,6 +1,6 @@
1
1
  import { jsx as t, jsxs as i, Fragment as A } from "react/jsx-runtime";
2
2
  import { useState as o, useRef as g, useCallback as I, useEffect as E } from "react";
3
- import { s as e, N as ie } from "../../../NavLink-DIfybFk5.js";
3
+ import { s as e, N as ie } from "../../../NavLink-BTwMRfGl.js";
4
4
  import { C as re } from "../../../chevron-down-DSUzBz9F.js";
5
5
  import { E as oe } from "../../../external-link-BOPobeQJ.js";
6
6
  const ce = {
@@ -29,20 +29,20 @@ function $e({
29
29
  }) {
30
30
  const [K, Q] = o(0), [z, c] = o(null), [$, U] = o(!1), [B, Y] = o(!1), [Z, ee] = o(!1), [ne, te] = o(null), [p, b] = o(
31
31
  0
32
- ), [se, _] = o(null), w = g(null), h = g(null), N = g(/* @__PURE__ */ new Map()), O = () => /* @__PURE__ */ t(
32
+ ), [se, _] = o(null), N = g(null), h = g(null), w = g(/* @__PURE__ */ new Map()), O = () => /* @__PURE__ */ t(
33
33
  "div",
34
34
  {
35
35
  className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,
36
36
  children: /* @__PURE__ */ t("div", { className: e.linkItem })
37
37
  }
38
- ), P = () => /* @__PURE__ */ t("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ t("div", { className: e.linkItem }) }), y = (s) => {
39
- const n = N.current.get(s);
38
+ ), P = () => /* @__PURE__ */ t("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ t("div", { className: e.linkItem }) }), k = (s) => {
39
+ const n = w.current.get(s);
40
40
  if (n && h.current) {
41
41
  const l = n.getBoundingClientRect(), r = h.current.getBoundingClientRect(), C = l.left - r.left + l.width / 2;
42
42
  te(C);
43
43
  }
44
44
  };
45
- console.log(y);
45
+ console.log(k);
46
46
  const ae = (s) => {
47
47
  c((n) => n === s ? null : s);
48
48
  }, le = (s) => s.map((n, l) => {
@@ -53,7 +53,7 @@ function $e({
53
53
  {
54
54
  className: `${e.linkWrapper} ${e.parent}`,
55
55
  onMouseEnter: () => {
56
- _(l), c(r), y(r);
56
+ _(l), c(r), k(r);
57
57
  },
58
58
  onMouseLeave: () => {
59
59
  _(null), b(0), c(null);
@@ -63,7 +63,7 @@ function $e({
63
63
  "button",
64
64
  {
65
65
  ref: (a) => {
66
- N.current.set(r, a);
66
+ w.current.set(r, a);
67
67
  },
68
68
  role: "menuitem",
69
69
  "aria-haspopup": "true",
@@ -143,7 +143,14 @@ function $e({
143
143
  "div",
144
144
  {
145
145
  className: `${e.sublinksColumn} ${e.secondaryColumn}`,
146
- children: n.secondaryItems && n.secondaryItems.length > 0 && k(n.secondaryItems, `${r}-secondary`)
146
+ children: n.secondaryItems && n.secondaryItems.length > 0 && y(n.secondaryItems, `${r}-secondary`)
147
+ }
148
+ ),
149
+ n.spotlight && /* @__PURE__ */ t(
150
+ "div",
151
+ {
152
+ className: `${e.sublinksColumn} ${e.spotlightColumn}`,
153
+ children: n.spotlight
147
154
  }
148
155
  )
149
156
  ]
@@ -155,7 +162,7 @@ function $e({
155
162
  },
156
163
  n._key ?? `group-${l}`
157
164
  );
158
- }), k = (s, n = "") => s.map((l) => {
165
+ }), y = (s, n = "") => s.map((l) => {
159
166
  const r = `${n}/${l.label}`;
160
167
  return /* @__PURE__ */ t(
161
168
  ie,
@@ -165,15 +172,15 @@ function $e({
165
172
  parentPath: n,
166
173
  openPath: z,
167
174
  togglePath: ae,
168
- updateTriangleIndicator: y,
175
+ updateTriangleIndicator: k,
169
176
  setOpenPath: c,
170
- renderLinks: k,
171
- buttonRefs: N
177
+ renderLinks: y,
178
+ buttonRefs: w
172
179
  },
173
180
  l._key ?? r
174
181
  );
175
182
  }), T = I((s) => {
176
- w.current && !w.current.contains(s.target) && c(null);
183
+ N.current && !N.current.contains(s.target) && c(null);
177
184
  }, []), j = I(() => {
178
185
  G(), typeof window < "u" && window.innerWidth > 768 && (U(!1), c(null), typeof document < "u" && (document.body.style.overflow = ""));
179
186
  }, []), G = I(() => {
@@ -203,7 +210,7 @@ function $e({
203
210
  }, [$]), /* @__PURE__ */ t(
204
211
  "header",
205
212
  {
206
- ref: w,
213
+ ref: N,
207
214
  className: `${J ?? ""} ${de[v]} ${ce[q]} ${e.navbar} ${H ? e.sticky : ""} ${u && u.length ? e.advanced : e.default}`,
208
215
  role: "navigation",
209
216
  "aria-label": "Main navigation",
@@ -246,7 +253,7 @@ function $e({
246
253
  }
247
254
  ),
248
255
  W === "default" && m && /* @__PURE__ */ i("div", { className: e.grid, children: [
249
- m && m.length > 0 && k(m),
256
+ m && m.length > 0 && y(m),
250
257
  x && !B && /* @__PURE__ */ i(A, { children: [
251
258
  /* @__PURE__ */ t("span", { className: e.separator }),
252
259
  /* @__PURE__ */ t(O, {})
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.415",
4
+ "version": "0.0.417",
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"),p=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",y="_center_1bon6_54",N="_hidden_1bon6_60",j="_visible_1bon6_67",$="_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="_secondaryColumn_1bon6_621",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:y,hidden:N,visible:j,right:$,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,secondaryColumn: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:m}){var c;const r=u===s,_=!!((c=n.sublinks)!=null&&c.length),a=p.useRef(null);return m.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;