quirk-ui 0.0.15 → 0.0.16
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.
package/dist/assets/index45.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--nav-height: 65px}.
|
|
1
|
+
:root{--nav-height: 65px}._navbar_1ymss_5{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;background-color:var(--color-background);border-bottom:1px solid var(--color-border);padding:0 var(--spacing-md);position:relative;z-index:1000;height:var(--nav-height)}._sticky_1ymss_19{position:sticky;top:0;width:100%}._container_1ymss_25{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;max-width:1280px;margin:0 auto}._logo_1ymss_35{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._menuToggle_1ymss_41{background:none;border:none;cursor:pointer;display:none;color:var(--color-text-primary);z-index:1100}._nav_1ymss_5{display:flex;gap:var(--spacing-lg);height:100%;transition:transform .3s ease}._linkWrapper_1ymss_57{position:relative;display:flex;align-items:center}._linkItem_1ymss_63{display:flex;align-items:center;box-sizing:border-box}._sublinkToggle_1ymss_71,._link_1ymss_57{text-decoration:none;color:var(--color-text-primary);padding:var(--spacing-sm);transition:color .3s ease;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);box-sizing:border-box}._link_1ymss_57:hover,._sublinkToggle_1ymss_71:hover,._navItem_1ymss_87:hover{color:var(--color-primary)}._sublinkToggle_1ymss_71{background:none;border:none;display:flex;align-items:center;cursor:pointer;color:var(--color-text-primary)}._sublinks_1ymss_101{position:absolute;right:0;top:100%;background-color:var(--color-background);box-shadow:0 6px 8px #0000001a;overflow:hidden;max-height:0;min-width:100%;width:max-content;opacity:0;z-index:100;transition:max-height .3s ease,opacity .3s ease,visibility .3s ease;display:flex;visibility:hidden;flex-direction:column;align-items:flex-end;gap:var(--spacing-md);padding:var(--spacing-md);border-radius:0 0 var(--radius-md) var(--radius-md);pointer-events:none}._sublinks_1ymss_101._show_1ymss_124{max-height:500px;opacity:1;pointer-events:auto;visibility:visible}._chevron_1ymss_131{transition:transform .3s ease}._sublinkToggle_1ymss_71._open_1ymss_135 ._chevron_1ymss_131{transform:rotate(180deg)}@media (max-width: 768px){._menuToggle_1ymss_41{display:flex;align-items:center;justify-content:center}._nav_1ymss_5{display:none;position:fixed;top:calc(var(--nav-height) - 1px);left:0;width:100%;height:100%;background-color:var(--color-background);display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-md);border-top:1px solid var(--color-border);z-index:1000;overflow-y:auto;transform:translate(100%)}._nav_1ymss_5._open_1ymss_135{transform:translate(0)}._linkWrapper_1ymss_57{flex-direction:column;width:100%;max-width:300px;margin:0 auto;padding:var(--spacing-sm) 0}._linkWrapper_1ymss_57._parent_1ymss_177{border-bottom:1px solid var(--color-border)}._linkWrapper_1ymss_57._parent_1ymss_177:last-of-type{border:none}._linkItem_1ymss_63{width:100%}._chevron_1ymss_131{display:none}._sublinks_1ymss_101{position:relative;top:0;box-shadow:none;max-height:fit-content;opacity:1;visibility:visible;align-items:flex-start;padding:var(--spacing-sm);gap:0;pointer-events:auto}._sublinkToggle_1ymss_71{cursor:pointer;pointer-events:none;color:var(--color-muted)}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as s, jsxs as
|
|
2
|
-
import { useState as
|
|
1
|
+
import { jsx as s, jsxs as u } from "react/jsx-runtime";
|
|
2
|
+
import { useState as k, useRef as T, useCallback as d, useEffect as f } from "react";
|
|
3
3
|
import { X as z } from "../../x-CnsEH4Ox.js";
|
|
4
4
|
import { c as I } from "../../createLucideIcon-C8GTh_Qx.js";
|
|
5
5
|
import { C as O } from "../../chevron-down-DSUzBz9F.js";
|
|
@@ -13,7 +13,7 @@ const W = [
|
|
|
13
13
|
["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
|
|
14
14
|
["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
|
|
15
15
|
["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
|
|
16
|
-
], j = I("menu", W), M = "
|
|
16
|
+
], j = I("menu", W), M = "_navbar_1ymss_5", R = "_sticky_1ymss_19", S = "_container_1ymss_25", P = "_logo_1ymss_35", D = "_menuToggle_1ymss_41", X = "_nav_1ymss_5", q = "_linkWrapper_1ymss_57", A = "_linkItem_1ymss_63", B = "_sublinkToggle_1ymss_71", F = "_link_1ymss_57", G = "_sublinks_1ymss_101", H = "_show_1ymss_124", J = "_chevron_1ymss_131", K = "_open_1ymss_135", Q = "_parent_1ymss_177", e = {
|
|
17
17
|
navbar: M,
|
|
18
18
|
sticky: R,
|
|
19
19
|
container: S,
|
|
@@ -36,26 +36,26 @@ function ne({
|
|
|
36
36
|
isSticky: x = !1,
|
|
37
37
|
className: N
|
|
38
38
|
}) {
|
|
39
|
-
const [l, _] =
|
|
39
|
+
const [l, _] = k(!1), [C, r] = k(null), i = T(null), E = () => {
|
|
40
40
|
_((o) => !o);
|
|
41
41
|
}, L = (o) => {
|
|
42
42
|
r((a) => a === o ? null : o);
|
|
43
|
-
},
|
|
43
|
+
}, v = d((o) => {
|
|
44
44
|
i.current && !i.current.contains(o.target) && r(null);
|
|
45
|
-
}, []),
|
|
45
|
+
}, []), y = d(() => {
|
|
46
46
|
r(null);
|
|
47
|
-
}, []), p =
|
|
47
|
+
}, []), p = d(() => {
|
|
48
48
|
window.innerWidth > 768 && (_(!1), r(null), document.body.style.overflow = "");
|
|
49
49
|
}, []);
|
|
50
|
-
|
|
51
|
-
window.removeEventListener("resize", p), document.removeEventListener("click",
|
|
52
|
-
}), []),
|
|
50
|
+
f(() => (window.addEventListener("resize", p), document.addEventListener("click", v), window.addEventListener("scroll", y), () => {
|
|
51
|
+
window.removeEventListener("resize", p), document.removeEventListener("click", v), window.removeEventListener("scroll", y);
|
|
52
|
+
}), []), f(() => (document.body.style.overflow = l ? "hidden" : "", () => {
|
|
53
53
|
document.body.style.overflow = "";
|
|
54
54
|
}), [l]);
|
|
55
|
-
const
|
|
56
|
-
var
|
|
57
|
-
const t = `${a}/${n.label}`, c = C === t,
|
|
58
|
-
return /* @__PURE__ */
|
|
55
|
+
const b = (o, a = "") => o.map((n) => {
|
|
56
|
+
var h;
|
|
57
|
+
const t = `${a}/${n.label}`, c = C === t, m = (h = n.sublinks) == null ? void 0 : h.length;
|
|
58
|
+
return /* @__PURE__ */ u(
|
|
59
59
|
"div",
|
|
60
60
|
{
|
|
61
61
|
className: `${e.linkWrapper} ${a ? "" : e.parent}`,
|
|
@@ -68,32 +68,32 @@ function ne({
|
|
|
68
68
|
target: n.isExternal ? "_blank" : "_self",
|
|
69
69
|
rel: n.isExternal ? "noopener noreferrer" : void 0,
|
|
70
70
|
onClick: () => {
|
|
71
|
-
var
|
|
72
|
-
r(null), (
|
|
71
|
+
var g;
|
|
72
|
+
r(null), (g = n.onClick) == null || g.call(n);
|
|
73
73
|
},
|
|
74
74
|
role: "menuitem",
|
|
75
75
|
children: n.label
|
|
76
76
|
}
|
|
77
|
-
) : /* @__PURE__ */
|
|
77
|
+
) : /* @__PURE__ */ u(
|
|
78
78
|
"button",
|
|
79
79
|
{
|
|
80
|
-
"aria-haspopup":
|
|
80
|
+
"aria-haspopup": m ? "true" : void 0,
|
|
81
81
|
"aria-expanded": c,
|
|
82
82
|
className: `${e.sublinkToggle} ${c ? e.open : ""}`,
|
|
83
83
|
onClick: () => L(t),
|
|
84
84
|
children: [
|
|
85
85
|
n.label,
|
|
86
|
-
|
|
86
|
+
m && /* @__PURE__ */ s(O, { size: 21, className: e.chevron })
|
|
87
87
|
]
|
|
88
88
|
}
|
|
89
89
|
) }),
|
|
90
|
-
|
|
90
|
+
m && /* @__PURE__ */ s(
|
|
91
91
|
"div",
|
|
92
92
|
{
|
|
93
93
|
className: `${e.sublinks} ${c ? e.show : ""}`,
|
|
94
94
|
role: "menu",
|
|
95
95
|
"aria-label": `${n.label} submenu`,
|
|
96
|
-
children:
|
|
96
|
+
children: b(n.sublinks, t)
|
|
97
97
|
}
|
|
98
98
|
)
|
|
99
99
|
]
|
|
@@ -108,7 +108,7 @@ function ne({
|
|
|
108
108
|
className: `${e.navbar} ${x ? e.sticky : ""} ${N ?? ""}`,
|
|
109
109
|
role: "navigation",
|
|
110
110
|
"aria-label": "Main navigation",
|
|
111
|
-
children: /* @__PURE__ */
|
|
111
|
+
children: /* @__PURE__ */ u("div", { className: e.container, children: [
|
|
112
112
|
/* @__PURE__ */ s("div", { className: e.logo, children: w }),
|
|
113
113
|
/* @__PURE__ */ s(
|
|
114
114
|
"button",
|
|
@@ -127,7 +127,7 @@ function ne({
|
|
|
127
127
|
className: `${e.nav} ${l ? e.open : ""}`,
|
|
128
128
|
id: "main-menu",
|
|
129
129
|
role: "menubar",
|
|
130
|
-
children:
|
|
130
|
+
children: b($)
|
|
131
131
|
}
|
|
132
132
|
)
|
|
133
133
|
] })
|