quirk-ui 0.0.182 → 0.0.183

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/NavBar/index.js +118 -111
  2. package/dist/lib/components/CallToAction/index.d.ts +1 -1
  3. package/dist/lib/components/NavBar/index.d.ts +5 -1
  4. package/package.json +1 -1
package/dist/components/NavBar/index.js CHANGED
@@ -1,7 +1,7 @@
1
- import { jsx as n, jsxs as v } from "react/jsx-runtime";
2
- import { useState as u, useRef as m, useCallback as f, useEffect as T } from "react";
3
- import { CallToAction as I } from "../CallToAction/index.js";
4
- import { ButtonGroup as W } from "../ButtonGroup/index.js";
1
+ import { jsx as t, jsxs as _ } from "react/jsx-runtime";
2
+ import { useState as u, useRef as m, useCallback as f, useEffect as R } from "react";
3
+ import { CallToAction as W } from "../CallToAction/index.js";
4
+ import { ButtonGroup as z } from "../ButtonGroup/index.js";
5
5
  import { X as J } from "../../x-CnsEH4Ox.js";
6
6
  import { c as K } from "../../createLucideIcon-C8GTh_Qx.js";
7
7
  import { C as Q } from "../../chevron-down-DSUzBz9F.js";
@@ -15,182 +15,182 @@ const U = [
15
15
  ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
16
16
  ["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
17
17
  ["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
18
- ], Y = K("menu", U), Z = "_navbar_937v2_5", ee = "_left_937v2_18", ne = "_container_937v2_19", te = "_logo_937v2_23", oe = "_nav_937v2_5", se = "_center_937v2_38", ie = "_hidden_937v2_44", le = "_visible_937v2_51", re = "_right_937v2_66", ae = "_title_937v2_72", ce = "_sublinks_937v2_82", de = "_sublinksInner_937v2_94", ue = "_linkItem_937v2_108", _e = "_minimal_937v2_113", ve = "_menuToggle_937v2_117", me = "_linkWrapper_937v2_121", fe = "_triangle_937v2_159", he = "_transparent_937v2_164", ge = "_sticky_937v2_216", pe = "_twoColumn_937v2_245", be = "_utilityMobile_937v2_292", we = "_utility_937v2_292", ke = "_navInner_937v2_320", ye = "_grid_937v2_329", $e = "_sublinkToggle_937v2_354", Ne = "_link_937v2_108", Ce = "_open_937v2_368", xe = "_show_937v2_419", Me = "_sublinksColumn_937v2_467", Le = "_chevron_937v2_477", Ee = "_parent_937v2_556", e = {
18
+ ], Y = K("menu", U), Z = "_navbar_937v2_5", ee = "_left_937v2_18", ne = "_container_937v2_19", te = "_logo_937v2_23", le = "_nav_937v2_5", ie = "_center_937v2_38", ae = "_hidden_937v2_44", oe = "_visible_937v2_51", se = "_right_937v2_66", re = "_title_937v2_72", ce = "_sublinks_937v2_82", de = "_sublinksInner_937v2_94", ue = "_linkItem_937v2_108", ve = "_minimal_937v2_113", _e = "_menuToggle_937v2_117", me = "_linkWrapper_937v2_121", fe = "_triangle_937v2_159", he = "_transparent_937v2_164", pe = "_sticky_937v2_216", ge = "_twoColumn_937v2_245", be = "_utilityMobile_937v2_292", we = "_utility_937v2_292", ye = "_navInner_937v2_320", ke = "_grid_937v2_329", $e = "_sublinkToggle_937v2_354", Ne = "_link_937v2_108", Ce = "_open_937v2_368", xe = "_show_937v2_419", Te = "_sublinksColumn_937v2_467", Le = "_chevron_937v2_477", Me = "_parent_937v2_556", e = {
19
19
  navbar: Z,
20
20
  left: ee,
21
21
  container: ne,
22
22
  logo: te,
23
- nav: oe,
24
- center: se,
25
- hidden: ie,
26
- visible: le,
27
- right: re,
28
- title: ae,
23
+ nav: le,
24
+ center: ie,
25
+ hidden: ae,
26
+ visible: oe,
27
+ right: se,
28
+ title: re,
29
29
  default: "_default_937v2_81",
30
30
  sublinks: ce,
31
31
  sublinksInner: de,
32
32
  linkItem: ue,
33
- minimal: _e,
34
- menuToggle: ve,
33
+ minimal: ve,
34
+ menuToggle: _e,
35
35
  linkWrapper: me,
36
36
  triangle: fe,
37
37
  transparent: he,
38
- sticky: ge,
39
- twoColumn: pe,
38
+ sticky: pe,
39
+ twoColumn: ge,
40
40
  utilityMobile: be,
41
41
  utility: we,
42
- navInner: ke,
43
- grid: ye,
42
+ navInner: ye,
43
+ grid: ke,
44
44
  sublinkToggle: $e,
45
45
  link: Ne,
46
46
  open: Ce,
47
47
  show: xe,
48
- sublinksColumn: Me,
48
+ sublinksColumn: Te,
49
49
  chevron: Le,
50
- parent: Ee
51
- }, Re = {
50
+ parent: Me
51
+ }, Ee = {
52
52
  default: e.default,
53
53
  minimal: e.minimal
54
- }, Te = {
54
+ }, Re = {
55
55
  left: e.left,
56
56
  center: e.center,
57
57
  right: e.right
58
58
  };
59
- function Se({
60
- title: z,
59
+ function Xe({
60
+ title: S,
61
61
  logo: b,
62
62
  items: O,
63
- utilityItems: l,
64
- isSticky: B = !1,
65
- isTransparent: j = !1,
63
+ utilityItems: i,
64
+ isSticky: A = !1,
65
+ isTransparent: B = !1,
66
66
  alignment: h = "right",
67
- variant: X = "default",
68
- className: S
67
+ variant: j = "default",
68
+ className: X
69
69
  }) {
70
- const [r, w] = u(!1), [g, a] = u(null), [D, V] = u(0), [A, G] = u(!1), [P, q] = u(null), p = m(null), c = m(null), k = m(/* @__PURE__ */ new Map()), F = () => {
71
- w((t) => !t);
72
- }, H = (t) => {
73
- const s = k.current.get(t);
74
- if (s && c.current) {
75
- const o = s.getBoundingClientRect(), i = c.current.getBoundingClientRect(), d = o.left - i.left + o.width / 4;
70
+ const [s, w] = u(!1), [p, r] = u(null), [I, D] = u(0), [V, G] = u(!1), [P, q] = u(null), g = m(null), c = m(null), y = m(/* @__PURE__ */ new Map()), F = () => {
71
+ w((n) => !n);
72
+ }, H = (n) => {
73
+ const a = y.current.get(n);
74
+ if (a && c.current) {
75
+ const l = a.getBoundingClientRect(), o = c.current.getBoundingClientRect(), d = l.left - o.left + l.width / 4;
76
76
  q(d);
77
77
  }
78
- }, y = (t) => {
79
- a((s) => s === t ? null : t);
80
- }, $ = f((t) => {
81
- p.current && !p.current.contains(t.target) && a(null);
78
+ }, k = (n) => {
79
+ r((a) => a === n ? null : n);
80
+ }, $ = f((n) => {
81
+ g.current && !g.current.contains(n.target) && r(null);
82
82
  }, []), N = f(() => {
83
- a(null);
83
+ r(null);
84
84
  }, []), C = f(() => {
85
- x(), typeof window < "u" && window.innerWidth > 768 && (w(!1), a(null), typeof document < "u" && (document.body.style.overflow = ""));
85
+ x(), typeof window < "u" && window.innerWidth > 768 && (w(!1), r(null), typeof document < "u" && (document.body.style.overflow = ""));
86
86
  }, []), x = f(() => {
87
87
  if (c.current) {
88
- const t = c.current.getBoundingClientRect().width;
89
- V(t), G(!0);
88
+ const n = c.current.getBoundingClientRect().width;
89
+ D(n), G(!0);
90
90
  }
91
91
  }, []);
92
- T(() => {
93
- const t = typeof window < "u", s = typeof document < "u";
94
- return t && (window.addEventListener("resize", C), window.addEventListener("scroll", N)), s && document.addEventListener("click", $), x(), () => {
95
- t && (window.removeEventListener("resize", C), window.removeEventListener("scroll", N)), s && document.removeEventListener("click", $);
92
+ R(() => {
93
+ const n = typeof window < "u", a = typeof document < "u";
94
+ return n && (window.addEventListener("resize", C), window.addEventListener("scroll", N)), a && document.addEventListener("click", $), x(), () => {
95
+ n && (window.removeEventListener("resize", C), window.removeEventListener("scroll", N)), a && document.removeEventListener("click", $);
96
96
  };
97
- }, []), T(() => {
97
+ }, []), R(() => {
98
98
  if (typeof document < "u")
99
- return document.body.style.overflow = r ? "hidden" : "", () => {
99
+ return document.body.style.overflow = s ? "hidden" : "", () => {
100
100
  document.body.style.overflow = "";
101
101
  };
102
- }, [r]);
103
- const M = (t, s = "") => t.map((o) => {
104
- var E;
105
- const i = `${s}/${o.label}`, _ = g === i, d = (E = o.sublinks) == null ? void 0 : E.length, L = m(null);
106
- return k.current.set(i, L.current), /* @__PURE__ */ v(
102
+ }, [s]);
103
+ const T = (n, a = "") => n.map((l) => {
104
+ var M;
105
+ const o = `${a}/${l.label}`, v = p === o, d = (M = l.sublinks) == null ? void 0 : M.length, L = m(null);
106
+ return y.current.set(o, L.current), /* @__PURE__ */ _(
107
107
  "div",
108
108
  {
109
- className: `${e.linkWrapper} ${s ? "" : e.parent}`,
109
+ className: `${e.linkWrapper} ${a ? "" : e.parent}`,
110
110
  children: [
111
- /* @__PURE__ */ n("div", { className: e.linkItem, children: o.href ? /* @__PURE__ */ n(
111
+ /* @__PURE__ */ t("div", { className: e.linkItem, children: l.href ? /* @__PURE__ */ t(
112
112
  "a",
113
113
  {
114
- href: o.href,
114
+ href: l.href,
115
115
  className: e.link,
116
- target: o.isExternal ? "_blank" : "_self",
117
- rel: o.isExternal ? "noopener noreferrer" : void 0,
116
+ target: l.isExternal ? "_blank" : "_self",
117
+ rel: l.isExternal ? "noopener noreferrer" : void 0,
118
118
  onClick: () => {
119
- var R;
120
- a(null), (R = o.onClick) == null || R.call(o);
119
+ var E;
120
+ r(null), (E = l.onClick) == null || E.call(l);
121
121
  },
122
122
  onMouseEnter: () => {
123
- s || a(null);
123
+ a || r(null);
124
124
  },
125
125
  role: "menuitem",
126
- children: o.label
126
+ children: l.label
127
127
  }
128
- ) : /* @__PURE__ */ v(
128
+ ) : /* @__PURE__ */ _(
129
129
  "button",
130
130
  {
131
131
  ref: L,
132
132
  "aria-haspopup": d ? "true" : void 0,
133
- "aria-expanded": _,
134
- className: `${e.sublinkToggle} ${_ ? e.open : ""}`,
135
- onClick: () => y(i),
133
+ "aria-expanded": v,
134
+ className: `${e.sublinkToggle} ${v ? e.open : ""}`,
135
+ onClick: () => k(o),
136
136
  onMouseEnter: () => {
137
- H(i), a(i);
137
+ H(o), r(o);
138
138
  },
139
139
  children: [
140
- o.label,
141
- d && /* @__PURE__ */ n(Q, { size: 18, className: e.chevron })
140
+ l.label,
141
+ d && /* @__PURE__ */ t(Q, { size: 18, className: e.chevron })
142
142
  ]
143
143
  }
144
144
  ) }),
145
- d && /* @__PURE__ */ n(
145
+ d && /* @__PURE__ */ t(
146
146
  "div",
147
147
  {
148
- className: `${e.sublinks} ${_ ? e.show : ""}`,
149
- onMouseLeave: () => y(i),
148
+ className: `${e.sublinks} ${v ? e.show : ""}`,
149
+ onMouseLeave: () => k(o),
150
150
  role: "menu",
151
- "aria-label": `${o.label} submenu`,
152
- children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n("div", { className: e.sublinksInner, children: /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: M(o.sublinks, i) }) }) })
151
+ "aria-label": `${l.label} submenu`,
152
+ children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t("div", { className: e.sublinksInner, children: /* @__PURE__ */ t("div", { className: e.sublinksColumn, children: T(l.sublinks, o) }) }) })
153
153
  }
154
154
  )
155
155
  ]
156
156
  },
157
- i
157
+ o
158
158
  );
159
159
  });
160
- return /* @__PURE__ */ n(
160
+ return /* @__PURE__ */ t(
161
161
  "header",
162
162
  {
163
- ref: p,
164
- className: `${S ?? ""} ${Te[h]} ${Re[X]} ${e.navbar} ${B ? e.sticky : ""} ${j ? e.transparent : ""} `,
163
+ ref: g,
164
+ className: `${X ?? ""} ${Re[h]} ${Ee[j]} ${e.navbar} ${A ? e.sticky : ""} ${B ? e.transparent : ""} `,
165
165
  role: "navigation",
166
166
  "aria-label": "Main navigation",
167
- children: /* @__PURE__ */ v(
167
+ children: /* @__PURE__ */ _(
168
168
  "div",
169
169
  {
170
- className: `${e.container} ${(!l || l.length === 0) && h !== "center" ? e.twoColumn : ""}`,
170
+ className: `${e.container} ${(!i || i.length === 0) && h !== "center" ? e.twoColumn : ""}`,
171
171
  children: [
172
- b ? /* @__PURE__ */ n("div", { className: e.logo, children: b }) : /* @__PURE__ */ n("div", { className: e.title, children: z }),
173
- /* @__PURE__ */ n(
172
+ b ? /* @__PURE__ */ t("div", { className: e.logo, children: b }) : /* @__PURE__ */ t("div", { className: e.title, children: S }),
173
+ /* @__PURE__ */ t(
174
174
  "nav",
175
175
  {
176
176
  ref: c,
177
177
  style: {
178
- left: h === "center" ? `calc(50% - ${D / 2}px)` : "0"
178
+ left: h === "center" ? `calc(50% - ${I / 2}px)` : "0"
179
179
  },
180
- className: `${e.nav} ${r ? e.open : ""} ${A ? e.visible : e.hidden}`,
180
+ className: `${e.nav} ${s ? e.open : ""} ${V ? e.visible : e.hidden}`,
181
181
  id: "main-menu",
182
182
  role: "menubar",
183
- children: /* @__PURE__ */ v("div", { className: e.navInner, children: [
184
- /* @__PURE__ */ n(
183
+ children: /* @__PURE__ */ _("div", { className: e.navInner, children: [
184
+ /* @__PURE__ */ t(
185
185
  "svg",
186
186
  {
187
187
  style: { left: `${P}px` },
188
- className: `${e.triangle} ${g ? e.show : ""}`,
188
+ className: `${e.triangle} ${p ? e.show : ""}`,
189
189
  width: 16,
190
190
  height: 12,
191
191
  viewBox: "0 0 100 75",
192
192
  xmlns: "http://www.w3.org/2000/svg",
193
- children: /* @__PURE__ */ n(
193
+ children: /* @__PURE__ */ t(
194
194
  "polygon",
195
195
  {
196
196
  points: "50,5 95,70 5,70",
@@ -201,51 +201,58 @@ function Se({
201
201
  )
202
202
  }
203
203
  ),
204
- /* @__PURE__ */ n(
204
+ /* @__PURE__ */ t(
205
205
  "div",
206
206
  {
207
- className: `${e.triangle} ${g ? e.show : ""}`
207
+ className: `${e.triangle} ${p ? e.show : ""}`
208
208
  }
209
209
  ),
210
- /* @__PURE__ */ n("div", { className: e.grid, children: M(O) })
210
+ /* @__PURE__ */ t("div", { className: e.grid, children: T(O) })
211
211
  ] })
212
212
  }
213
213
  ),
214
- l && /* @__PURE__ */ n("nav", { className: e.utility, children: /* @__PURE__ */ n(W, { children: l.map((t, s) => /* @__PURE__ */ n(
215
- I,
214
+ i && /* @__PURE__ */ t("nav", { className: e.utility, children: /* @__PURE__ */ t(z, { children: i.map((n, a) => /* @__PURE__ */ t(
215
+ W,
216
216
  {
217
217
  as: "a",
218
- href: t.href ?? "/",
219
- variant: t.variant,
220
- children: t.label
218
+ href: n.href ?? "/",
219
+ variant: n.variant ?? "primary",
220
+ displayType: n.displayType ?? "text",
221
+ imageSrc: n.imageSrc,
222
+ imageAlt: n.imageAlt,
223
+ "aria-label": n.ariaLabel ?? n.label,
224
+ children: n.displayType === "image" ? null : n.label
221
225
  },
222
- t._key || s
226
+ n._key || a
223
227
  )) }) }),
224
- l && /* @__PURE__ */ n(
228
+ i && /* @__PURE__ */ t(
225
229
  "nav",
226
230
  {
227
- className: `${e.utilityMobile} ${r ? e.open : ""}`,
228
- children: /* @__PURE__ */ n(W, { alignment: "center", children: /* @__PURE__ */ n(
229
- I,
231
+ className: `${e.utilityMobile} ${s ? e.open : ""}`,
232
+ children: /* @__PURE__ */ t(z, { alignment: "center", children: /* @__PURE__ */ t(
233
+ W,
230
234
  {
231
235
  as: "a",
232
- href: l[1].href ?? "/",
233
- variant: "primary",
234
- children: l[1].label
235
- },
236
- l[1]._key
236
+ href: i[1].href ?? "/",
237
+ variant: i[1].variant ?? "primary",
238
+ displayType: i[1].displayType ?? "text",
239
+ imageSrc: i[1].imageSrc,
240
+ imageAlt: i[1].imageAlt,
241
+ "aria-label": i[1].ariaLabel ?? i[1].label,
242
+ children: i[1].displayType === "image" ? null : i[1].label
243
+ }
237
244
  ) })
238
245
  }
239
246
  ),
240
- /* @__PURE__ */ n(
247
+ /* @__PURE__ */ t(
241
248
  "button",
242
249
  {
243
250
  className: e.menuToggle,
244
251
  onClick: F,
245
- "aria-label": r ? "Close menu" : "Open menu",
246
- "aria-expanded": r,
252
+ "aria-label": s ? "Close menu" : "Open menu",
253
+ "aria-expanded": s,
247
254
  "aria-controls": "main-menu",
248
- children: r ? /* @__PURE__ */ n(J, { size: 24 }) : /* @__PURE__ */ n(Y, { size: 24 })
255
+ children: s ? /* @__PURE__ */ t(J, { size: 24 }) : /* @__PURE__ */ t(Y, { size: 24 })
249
256
  }
250
257
  )
251
258
  ]
@@ -255,5 +262,5 @@ function Se({
255
262
  );
256
263
  }
257
264
  export {
258
- Se as Navbar
265
+ Xe as Navbar
259
266
  };
package/dist/lib/components/CallToAction/index.d.ts CHANGED
@@ -17,7 +17,7 @@ declare const iconAlignClassMap: {
17
17
  readonly right: string;
18
18
  };
19
19
  type IconAlignment = keyof typeof iconAlignClassMap;
20
- type BaseProps = {
20
+ export type BaseProps = {
21
21
  variant: Variant;
22
22
  displayType?: "text" | "image";
23
23
  imageSrc?: string;
package/dist/lib/components/NavBar/index.d.ts CHANGED
@@ -14,8 +14,12 @@ type Alignment = keyof typeof alignmentClassMap;
14
14
  export type UtilityItem = {
15
15
  _key?: string;
16
16
  label: string;
17
+ ariaLabel: string;
17
18
  href?: string;
18
- variant: ButtonVariant;
19
+ variant?: ButtonVariant;
20
+ displayType?: "text" | "image";
21
+ imageSrc?: string;
22
+ imageAlt?: string;
19
23
  };
20
24
  export type NavItem = {
21
25
  _key?: string;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.182",
4
+ "version": "0.0.183",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {