quirk-ui 0.0.140 → 0.0.141

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 +1 @@
1
- :root{--nav-height: 65px}._navbar_1ntr6_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)}._left_1ntr6_19 ._container_1ntr6_20{justify-content:flex-start}._left_1ntr6_19 ._logo_1ntr6_24{flex:unset}._left_1ntr6_19 ._nav_1ntr6_5{flex:1}@media (max-width: 767px){._left_1ntr6_19 ._logo_1ntr6_24{flex:1}}._center_1ntr6_39 ._nav_1ntr6_5{position:absolute;transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_1ntr6_39 ._nav_1ntr6_5._hidden_1ntr6_45{transform:translateY(-100%);opacity:0;pointer-events:none}._center_1ntr6_39 ._nav_1ntr6_5._visible_1ntr6_51{transform:translateY(0);opacity:1;pointer-events:auto}@media (max-width: 767px){._center_1ntr6_39 ._logo_1ntr6_24{flex:1}}._right_1ntr6_65 ._container_1ntr6_20{justify-content:flex-end}._right_1ntr6_65 ._logo_1ntr6_24{flex:1}._right_1ntr6_65 ._nav_1ntr6_5{flex:unset}._sticky_1ntr6_79{position:sticky;top:0;width:100%}._container_1ntr6_20{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);width:100%;height:100%;margin:0 auto}._logo_1ntr6_24{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary);display:flex;align-items:center;justify-content:flex-start}._logo_1ntr6_24 img{height:auto;width:auto}._menuToggle_1ntr6_109{background:none;border:none;cursor:pointer;display:none;color:var(--color-text-primary);z-index:1100}._utilityMobile_1ntr6_118{display:none}._nav_1ntr6_5{display:flex;gap:var(--spacing-lg);height:100%;transition:transform .3s ease}._linkWrapper_1ntr6_129{position:relative;display:flex;align-items:center}._linkItem_1ntr6_135{display:flex;align-items:center;box-sizing:border-box}._sublinkToggle_1ntr6_143,._link_1ntr6_129{text-decoration:none;color:var(--color-text-primary);padding:var(--spacing-sm);transition:color .3s ease;font-family:inherit;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);box-sizing:border-box}._link_1ntr6_129:hover,._sublinkToggle_1ntr6_143:hover,._navItem_1ntr6_160:hover{color:var(--color-primary)}._sublinkToggle_1ntr6_143{background:none;border:none;display:flex;align-items:center;cursor:pointer;color:var(--color-text-primary)}._sublinks_1ntr6_174{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_1ntr6_174._show_1ntr6_197{max-height:500px;opacity:1;pointer-events:auto;visibility:visible}._chevron_1ntr6_204{transition:transform .3s ease}._sublinkToggle_1ntr6_143._open_1ntr6_208 ._chevron_1ntr6_204{transform:rotate(180deg)}@media (max-width: 767px){._logo_1ntr6_24{flex:1}._menuToggle_1ntr6_109{display:flex;align-items:center;justify-content:center}._utility_1ntr6_118 a:first-of-type{display:none}._utilityMobile_1ntr6_118{display:block;transform:translateY(100px);position:fixed;bottom:1rem;margin:0 auto;width:100%;z-index:1001;transition:transform .3s ease-in-out}._utilityMobile_1ntr6_118._open_1ntr6_208{transform:translateY(0)}._nav_1ntr6_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_1ntr6_5._open_1ntr6_208{transform:translate(0)}._linkWrapper_1ntr6_129{flex-direction:column;width:100%;max-width:300px;margin:0 auto;padding:var(--spacing-sm) 0}._linkWrapper_1ntr6_129._parent_1ntr6_277{border-bottom:1px solid var(--color-border)}._linkWrapper_1ntr6_129._parent_1ntr6_277:last-of-type{border:none}._linkItem_1ntr6_135{width:100%}._chevron_1ntr6_204{display:none}._sublinks_1ntr6_174{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_1ntr6_143{cursor:pointer;pointer-events:none;color:var(--color-muted)}}
1
+ :root{--nav-height: 65px}._navbar_153u1_5{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;background-color:var(--color-background);padding:0 var(--spacing-md);position:relative;z-index:1000;height:var(--nav-height)}._transparent_153u1_19{position:fixed;background-color:transparent}._transparent_153u1_19 ._logo_153u1_23{color:#fff}._transparent_153u1_19 ._logo_153u1_23 img{filter:brightness(0) invert(1)}._transparent_153u1_19 ._nav_153u1_5{background:#ffffff80;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);height:auto;border-radius:var(--radius-full);padding:0 var(--spacing-md)}._transparent_153u1_19 ._nav_153u1_5 ._sublinks_153u1_39{background:#ffffff80;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}._left_153u1_47 ._container_153u1_48{justify-content:flex-start}._left_153u1_47 ._logo_153u1_23{flex:unset}._left_153u1_47 ._nav_153u1_5{flex:1}@media (max-width: 767px){._left_153u1_47 ._logo_153u1_23{flex:1}}._center_153u1_67 ._nav_153u1_5{position:absolute;transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_153u1_67 ._nav_153u1_5._hidden_153u1_73{transform:translateY(-100%);opacity:0;pointer-events:none}._center_153u1_67 ._nav_153u1_5._visible_153u1_79{transform:translateY(0);opacity:1;pointer-events:auto}@media (max-width: 767px){._center_153u1_67 ._logo_153u1_23{flex:1}}._right_153u1_93 ._container_153u1_48{justify-content:flex-end}._right_153u1_93 ._logo_153u1_23{flex:1}._right_153u1_93 ._nav_153u1_5{flex:unset}._sticky_153u1_107{position:sticky;top:0;width:100%}._container_153u1_48{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);width:100%;height:100%;margin:0 auto}._logo_153u1_23{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary);display:flex;align-items:center;justify-content:flex-start}._logo_153u1_23 img{height:auto;width:auto}._menuToggle_153u1_137{background:none;border:none;cursor:pointer;display:none;color:var(--color-text-primary);z-index:1100}._utilityMobile_153u1_146{display:none}._utility_153u1_146 a{font-size:var(--font-size-sm)}._nav_153u1_5{display:flex;gap:var(--spacing-lg);height:100%;transition:transform .3s ease}._linkWrapper_153u1_161{position:relative;display:flex;align-items:center}._linkItem_153u1_167{display:flex;align-items:center;box-sizing:border-box}._sublinkToggle_153u1_175,._link_153u1_161{text-decoration:none;color:var(--color-text-primary);padding:var(--spacing-sm);transition:color .3s ease;font-family:inherit;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);box-sizing:border-box}._link_153u1_161:hover,._sublinkToggle_153u1_175:hover,._navItem_153u1_192:hover{color:var(--color-primary)}._sublinkToggle_153u1_175{background:none;border:none;display:flex;align-items:center;cursor:pointer;color:var(--color-text-primary)}._sublinks_153u1_39{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_153u1_39._show_153u1_229{max-height:500px;opacity:1;pointer-events:auto;visibility:visible}._chevron_153u1_236{transition:transform .3s ease}._sublinkToggle_153u1_175._open_153u1_240 ._chevron_153u1_236{transform:rotate(180deg)}@media (max-width: 767px){._logo_153u1_23{flex:1}._menuToggle_153u1_137{display:flex;align-items:center;justify-content:center}._utility_153u1_146 a:first-of-type{display:none}._utilityMobile_153u1_146{display:block;transform:translateY(100px);position:fixed;bottom:1rem;margin:0 auto;width:100%;z-index:1001;transition:transform .3s ease-in-out}._utilityMobile_153u1_146._open_153u1_240{transform:translateY(0)}._nav_153u1_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_153u1_5._open_153u1_240{transform:translate(0)}._linkWrapper_153u1_161{flex-direction:column;width:100%;max-width:300px;margin:0 auto;padding:var(--spacing-sm) 0}._linkWrapper_153u1_161._parent_153u1_309{border-bottom:1px solid var(--color-border)}._linkWrapper_153u1_161._parent_153u1_309:last-of-type{border:none}._linkItem_153u1_167{width:100%}._chevron_153u1_236{display:none}._sublinks_153u1_39{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_153u1_175{cursor:pointer;pointer-events:none;color:var(--color-muted)}}
@@ -1,8 +1,8 @@
1
1
  import { jsx as t, jsxs as m } from "react/jsx-runtime";
2
- import { useState as c, useRef as x, useCallback as d, useEffect as C } from "react";
3
- import { CallToAction as E } from "../CallToAction/index.js";
4
- import { ButtonGroup as T } from "../ButtonGroup/index.js";
5
- import { X as V } from "../../x-CnsEH4Ox.js";
2
+ import { useState as u, useRef as C, useCallback as d, useEffect as E } from "react";
3
+ import { CallToAction as W } from "../CallToAction/index.js";
4
+ import { ButtonGroup as I } from "../ButtonGroup/index.js";
5
+ import { X as P } from "../../x-CnsEH4Ox.js";
6
6
  import { c as A } from "../../createLucideIcon-C8GTh_Qx.js";
7
7
  import { C as G } from "../../chevron-down-DSUzBz9F.js";
8
8
  import '../../assets/index46.css';/**
@@ -11,167 +11,184 @@ import '../../assets/index46.css';/**
11
11
  * This source code is licensed under the ISC license.
12
12
  * See the LICENSE file in the root directory of this source tree.
13
13
  */
14
- const I = [
14
+ const X = [
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
- ], X = A("menu", I), q = "_navbar_1ntr6_5", F = "_left_1ntr6_19", H = "_container_1ntr6_20", J = "_logo_1ntr6_24", K = "_nav_1ntr6_5", Q = "_center_1ntr6_39", U = "_hidden_1ntr6_45", Y = "_visible_1ntr6_51", Z = "_right_1ntr6_65", ee = "_sticky_1ntr6_79", ne = "_menuToggle_1ntr6_109", te = "_utilityMobile_1ntr6_118", oe = "_linkWrapper_1ntr6_129", re = "_linkItem_1ntr6_135", ie = "_sublinkToggle_1ntr6_143", se = "_link_1ntr6_129", le = "_sublinks_1ntr6_174", ae = "_show_1ntr6_197", ce = "_chevron_1ntr6_204", de = "_open_1ntr6_208", ue = "_utility_1ntr6_118", _e = "_parent_1ntr6_277", e = {
19
- navbar: q,
20
- left: F,
21
- container: H,
18
+ ], q = A("menu", X), F = "_navbar_153u1_5", H = "_transparent_153u1_19", J = "_logo_153u1_23", K = "_nav_153u1_5", Q = "_sublinks_153u1_39", U = "_left_153u1_47", Y = "_container_153u1_48", Z = "_center_153u1_67", ee = "_hidden_153u1_73", ne = "_visible_153u1_79", te = "_right_153u1_93", re = "_sticky_153u1_107", oe = "_menuToggle_153u1_137", ie = "_utilityMobile_153u1_146", se = "_utility_153u1_146", ae = "_linkWrapper_153u1_161", le = "_linkItem_153u1_167", ce = "_sublinkToggle_153u1_175", ue = "_link_153u1_161", de = "_show_153u1_229", _e = "_chevron_153u1_236", he = "_open_153u1_240", ve = "_parent_153u1_309", e = {
19
+ navbar: F,
20
+ transparent: H,
22
21
  logo: J,
23
22
  nav: K,
24
- center: Q,
25
- hidden: U,
26
- visible: Y,
27
- right: Z,
28
- sticky: ee,
29
- menuToggle: ne,
30
- utilityMobile: te,
31
- linkWrapper: oe,
32
- linkItem: re,
33
- sublinkToggle: ie,
34
- link: se,
35
- sublinks: le,
36
- show: ae,
37
- chevron: ce,
38
- open: de,
39
- utility: ue,
40
- parent: _e
41
- }, he = {
23
+ sublinks: Q,
24
+ left: U,
25
+ container: Y,
26
+ center: Z,
27
+ hidden: ee,
28
+ visible: ne,
29
+ right: te,
30
+ sticky: re,
31
+ menuToggle: oe,
32
+ utilityMobile: ie,
33
+ utility: se,
34
+ linkWrapper: ae,
35
+ linkItem: le,
36
+ sublinkToggle: ce,
37
+ link: ue,
38
+ show: de,
39
+ chevron: _e,
40
+ open: he,
41
+ parent: ve
42
+ }, me = {
42
43
  left: e.left,
43
44
  center: e.center,
44
45
  right: e.right
45
46
  };
46
- function ke({
47
- logo: W,
48
- items: L,
49
- utilityItems: i,
50
- isSticky: M = !1,
51
- alignment: v = "right",
47
+ function $e({
48
+ logo: L,
49
+ items: M,
50
+ utilityItems: s,
51
+ isSticky: T = !1,
52
+ isTransparent: f = !1,
53
+ alignment: p = "right",
52
54
  className: z
53
55
  }) {
54
- const [s, p] = c(!1), [O, l] = c(null), [R, j] = c(0), [S, B] = c(!1), u = x(null), _ = x(null), D = () => {
55
- p((n) => !n);
56
- }, P = (n) => {
57
- l((r) => r === n ? null : n);
58
- }, b = d((n) => {
59
- u.current && !u.current.contains(n.target) && l(null);
60
- }, []), g = d(() => {
61
- l(null);
56
+ const [a, b] = u(!1), [O, c] = u(null), [R, j] = u(0), [S, V] = u(!1), _ = C(null), h = C(null), B = () => {
57
+ b((n) => !n);
58
+ }, D = (n) => {
59
+ c((o) => o === n ? null : n);
60
+ }, g = d((n) => {
61
+ _.current && !_.current.contains(n.target) && c(null);
62
62
  }, []), y = d(() => {
63
- k(), typeof window < "u" && window.innerWidth > 768 && (p(!1), l(null), typeof document < "u" && (document.body.style.overflow = ""));
63
+ c(null);
64
64
  }, []), k = d(() => {
65
- if (_.current) {
66
- const n = _.current.getBoundingClientRect().width;
67
- j(n), B(!0);
65
+ w(), typeof window < "u" && window.innerWidth > 768 && (b(!1), c(null), typeof document < "u" && (document.body.style.overflow = ""));
66
+ }, []), w = d(() => {
67
+ if (h.current) {
68
+ const n = h.current.getBoundingClientRect().width;
69
+ j(n), V(!0);
68
70
  }
69
71
  }, []);
70
- C(() => {
71
- const n = typeof window < "u", r = typeof document < "u";
72
- return n && (window.addEventListener("resize", y), window.addEventListener("scroll", g)), r && document.addEventListener("click", b), k(), () => {
73
- n && (window.removeEventListener("resize", y), window.removeEventListener("scroll", g)), r && document.removeEventListener("click", b);
72
+ E(() => {
73
+ const n = typeof window < "u", o = typeof document < "u";
74
+ return n && (window.addEventListener("resize", k), window.addEventListener("scroll", y)), o && document.addEventListener("click", g), w(), () => {
75
+ n && (window.removeEventListener("resize", k), window.removeEventListener("scroll", y)), o && document.removeEventListener("click", g);
74
76
  };
75
- }, []), C(() => {
77
+ }, []), E(() => {
76
78
  if (typeof document < "u")
77
- return document.body.style.overflow = s ? "hidden" : "", () => {
79
+ return document.body.style.overflow = a ? "hidden" : "", () => {
78
80
  document.body.style.overflow = "";
79
81
  };
80
- }, [s]);
81
- const w = (n, r = "") => n.map((o) => {
82
+ }, [a]);
83
+ const $ = (n, o = "") => n.map((r) => {
82
84
  var N;
83
- const a = `${r}/${o.label}`, h = O === a, f = (N = o.sublinks) == null ? void 0 : N.length;
85
+ const i = `${o}/${r.label}`, l = O === i, v = (N = r.sublinks) == null ? void 0 : N.length;
84
86
  return /* @__PURE__ */ m(
85
87
  "div",
86
88
  {
87
- className: `${e.linkWrapper} ${r ? "" : e.parent}`,
89
+ className: `${e.linkWrapper} ${o ? "" : e.parent}`,
88
90
  children: [
89
- /* @__PURE__ */ t("div", { className: e.linkItem, children: o.href ? /* @__PURE__ */ t(
91
+ /* @__PURE__ */ t("div", { className: e.linkItem, children: r.href ? /* @__PURE__ */ t(
90
92
  "a",
91
93
  {
92
- href: o.href,
94
+ href: r.href,
93
95
  className: e.link,
94
- target: o.isExternal ? "_blank" : "_self",
95
- rel: o.isExternal ? "noopener noreferrer" : void 0,
96
+ target: r.isExternal ? "_blank" : "_self",
97
+ rel: r.isExternal ? "noopener noreferrer" : void 0,
96
98
  onClick: () => {
97
- var $;
98
- l(null), ($ = o.onClick) == null || $.call(o);
99
+ var x;
100
+ c(null), (x = r.onClick) == null || x.call(r);
99
101
  },
100
102
  role: "menuitem",
101
- children: o.label
103
+ children: r.label
102
104
  }
103
105
  ) : /* @__PURE__ */ m(
104
106
  "button",
105
107
  {
106
- "aria-haspopup": f ? "true" : void 0,
107
- "aria-expanded": h,
108
- className: `${e.sublinkToggle} ${h ? e.open : ""}`,
109
- onClick: () => P(a),
108
+ "aria-haspopup": v ? "true" : void 0,
109
+ "aria-expanded": l,
110
+ className: `${e.sublinkToggle} ${l ? e.open : ""}`,
111
+ onClick: () => D(i),
110
112
  children: [
111
- o.label,
112
- f && /* @__PURE__ */ t(G, { size: 21, className: e.chevron })
113
+ r.label,
114
+ v && /* @__PURE__ */ t(G, { size: 21, className: e.chevron })
113
115
  ]
114
116
  }
115
117
  ) }),
116
- f && /* @__PURE__ */ t(
118
+ v && /* @__PURE__ */ t(
117
119
  "div",
118
120
  {
119
- className: `${e.sublinks} ${h ? e.show : ""}`,
121
+ className: `${e.sublinks} ${l ? e.show : ""}`,
120
122
  role: "menu",
121
- "aria-label": `${o.label} submenu`,
122
- children: w(o.sublinks, a)
123
+ "aria-label": `${r.label} submenu`,
124
+ children: $(r.sublinks, i)
123
125
  }
124
126
  )
125
127
  ]
126
128
  },
127
- a
129
+ i
128
130
  );
129
131
  });
130
132
  return /* @__PURE__ */ t(
131
133
  "header",
132
134
  {
133
- ref: u,
134
- className: `${z ?? ""} ${he[v]} ${e.navbar} ${M ? e.sticky : ""} `,
135
+ ref: _,
136
+ className: `${z ?? ""} ${me[p]} ${e.navbar} ${T ? e.sticky : ""} ${f ? e.transparent : ""} `,
135
137
  role: "navigation",
136
138
  "aria-label": "Main navigation",
137
139
  children: /* @__PURE__ */ m("div", { className: e.container, children: [
138
- /* @__PURE__ */ t("div", { className: e.logo, children: W }),
140
+ /* @__PURE__ */ t("div", { className: e.logo, children: L }),
139
141
  /* @__PURE__ */ t(
140
142
  "nav",
141
143
  {
142
- ref: _,
144
+ ref: h,
143
145
  style: {
144
- left: v === "center" ? `calc(50% - ${R / 2}px)` : "unset"
146
+ left: p === "center" ? `calc(50% - ${R / 2}px)` : "unset"
145
147
  },
146
- className: `${e.nav} ${s ? e.open : ""} ${S ? e.visible : e.hidden}`,
148
+ className: `${e.nav} ${a ? e.open : ""} ${S ? e.visible : e.hidden}`,
147
149
  id: "main-menu",
148
150
  role: "menubar",
149
- children: w(L)
151
+ children: $(M)
150
152
  }
151
153
  ),
152
- i && /* @__PURE__ */ t("nav", { className: e.utility, children: /* @__PURE__ */ t(T, { children: i.map((n, r) => /* @__PURE__ */ t(
153
- E,
154
- {
155
- as: "a",
156
- href: n.href ?? "/",
157
- variant: n.variant,
158
- children: n.label
159
- },
160
- n._id || r
161
- )) }) }),
162
- i && /* @__PURE__ */ t(
154
+ s && /* @__PURE__ */ t("nav", { className: e.utility, children: /* @__PURE__ */ t(I, { children: s.map((n, o) => {
155
+ const r = (() => {
156
+ const i = n.variant, l = f && !i.includes("Inverted") ? `${i}Inverted` : i;
157
+ return [
158
+ "primary",
159
+ "primaryInverted",
160
+ "secondary",
161
+ "secondaryInverted",
162
+ "link",
163
+ "linkInverted",
164
+ "underline",
165
+ "underlineInverted"
166
+ ].includes(l) ? l : "primary";
167
+ })();
168
+ return /* @__PURE__ */ t(
169
+ W,
170
+ {
171
+ as: "a",
172
+ href: n.href ?? "/",
173
+ variant: r,
174
+ children: n.label
175
+ },
176
+ n._id || o
177
+ );
178
+ }) }) }),
179
+ s && /* @__PURE__ */ t(
163
180
  "nav",
164
181
  {
165
- className: `${e.utilityMobile} ${s ? e.open : ""}`,
166
- children: /* @__PURE__ */ t(T, { alignment: "center", children: /* @__PURE__ */ t(
167
- E,
182
+ className: `${e.utilityMobile} ${a ? e.open : ""}`,
183
+ children: /* @__PURE__ */ t(I, { alignment: "center", children: /* @__PURE__ */ t(
184
+ W,
168
185
  {
169
186
  as: "a",
170
- href: i[0].href ?? "/",
171
- variant: i[0].variant,
172
- children: i[0].label
187
+ href: s[0].href ?? "/",
188
+ variant: s[0].variant,
189
+ children: s[0].label
173
190
  },
174
- i[0]._id
191
+ s[0]._id
175
192
  ) })
176
193
  }
177
194
  ),
@@ -179,11 +196,11 @@ function ke({
179
196
  "button",
180
197
  {
181
198
  className: e.menuToggle,
182
- onClick: D,
183
- "aria-label": s ? "Close menu" : "Open menu",
184
- "aria-expanded": s,
199
+ onClick: B,
200
+ "aria-label": a ? "Close menu" : "Open menu",
201
+ "aria-expanded": a,
185
202
  "aria-controls": "main-menu",
186
- children: s ? /* @__PURE__ */ t(V, { size: 24 }) : /* @__PURE__ */ t(X, { size: 24 })
203
+ children: a ? /* @__PURE__ */ t(P, { size: 24 }) : /* @__PURE__ */ t(q, { size: 24 })
187
204
  }
188
205
  )
189
206
  ] })
@@ -191,5 +208,5 @@ function ke({
191
208
  );
192
209
  }
193
210
  export {
194
- ke as Navbar
211
+ $e as Navbar
195
212
  };
@@ -24,8 +24,9 @@ type NavbarProps = {
24
24
  items: NavItem[];
25
25
  utilityItems?: UtilityItem[];
26
26
  isSticky?: boolean;
27
+ isTransparent?: boolean;
27
28
  alignment: Alignment;
28
29
  className?: string;
29
30
  };
30
- export declare function Navbar({ logo, items, utilityItems, isSticky, alignment, className, }: NavbarProps): import("react/jsx-runtime").JSX.Element;
31
+ export declare function Navbar({ logo, items, utilityItems, isSticky, isTransparent, alignment, className, }: NavbarProps): import("react/jsx-runtime").JSX.Element;
31
32
  export {};
package/dist/styles.css CHANGED
@@ -43,6 +43,6 @@ ul._list_4w9h5_1{list-style-type:none;padding:0;margin:0}ol._list_4w9h5_1{list-s
43
43
  ._wrapper_13tha_1{display:flex;flex-direction:column;position:relative}._input_13tha_7{padding:var(--spacing-sm) var(--spacing-sm);border:2px solid var(--color-border, #ccc);border-radius:var(--radius-md);font-size:var(--font-size-md);outline:none;background-color:var(--color-background);color:var(--color-text-primary)}._input_13tha_7::placeholder{color:var(--color-muted)}._input_13tha_7:focus{border-color:var(--color-primary)}._popover_13tha_25{position:absolute;top:100%;left:0;z-index:10;border-radius:var(--radius-md);background-color:var(--color-background);border:1px solid var(--color-border);margin-top:var(--spacing-xs)}
44
44
  ._wrapper_7toxm_1{display:flex;flex-direction:column;gap:var(--spacing-sm)}._trackContainer_7toxm_7{display:flex;align-items:center;gap:var(--spacing-sm)}._track_7toxm_7{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background-color:var(--color-muted);border-radius:4px;outline:none}._track_7toxm_7::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;border:none}._track_7toxm_7::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;border:none}._value_7toxm_44{width:2rem;text-align:right;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-primary)}._error_7toxm_52{color:var(--color-error)}._errorMessage_7toxm_56{font-size:var(--font-size-sm);color:var(--color-error)}
45
45
  ._wrapper_s8dew_1{display:flex;flex-direction:column;gap:var(--spacing-sm)}._dropZone_s8dew_7{border:2px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xl);text-align:center;cursor:pointer;background-color:var(--color-background);transition:background-color .3s ease}._dropZone_s8dew_7 p{color:var(--color-text-primary)}._dropZone_s8dew_7:hover{background-color:var(--color-background)}._dragging_s8dew_25{background-color:var(--color-primary);border-color:var(--color-primary)}._input_s8dew_30{display:none}._fileList_s8dew_34{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-md);list-style:none;padding:0}._fileList_s8dew_34 li{color:var(--color-text-primary);display:flex;align-items:center;gap:var(--spacing-sm)}._fileList_s8dew_34 li button{cursor:pointer}
46
- :root{--nav-height: 65px}._navbar_1ntr6_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)}._left_1ntr6_19 ._container_1ntr6_20{justify-content:flex-start}._left_1ntr6_19 ._logo_1ntr6_24{flex:unset}._left_1ntr6_19 ._nav_1ntr6_5{flex:1}@media (max-width: 767px){._left_1ntr6_19 ._logo_1ntr6_24{flex:1}}._center_1ntr6_39 ._nav_1ntr6_5{position:absolute;transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_1ntr6_39 ._nav_1ntr6_5._hidden_1ntr6_45{transform:translateY(-100%);opacity:0;pointer-events:none}._center_1ntr6_39 ._nav_1ntr6_5._visible_1ntr6_51{transform:translateY(0);opacity:1;pointer-events:auto}@media (max-width: 767px){._center_1ntr6_39 ._logo_1ntr6_24{flex:1}}._right_1ntr6_65 ._container_1ntr6_20{justify-content:flex-end}._right_1ntr6_65 ._logo_1ntr6_24{flex:1}._right_1ntr6_65 ._nav_1ntr6_5{flex:unset}._sticky_1ntr6_79{position:sticky;top:0;width:100%}._container_1ntr6_20{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);width:100%;height:100%;margin:0 auto}._logo_1ntr6_24{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary);display:flex;align-items:center;justify-content:flex-start}._logo_1ntr6_24 img{height:auto;width:auto}._menuToggle_1ntr6_109{background:none;border:none;cursor:pointer;display:none;color:var(--color-text-primary);z-index:1100}._utilityMobile_1ntr6_118{display:none}._nav_1ntr6_5{display:flex;gap:var(--spacing-lg);height:100%;transition:transform .3s ease}._linkWrapper_1ntr6_129{position:relative;display:flex;align-items:center}._linkItem_1ntr6_135{display:flex;align-items:center;box-sizing:border-box}._sublinkToggle_1ntr6_143,._link_1ntr6_129{text-decoration:none;color:var(--color-text-primary);padding:var(--spacing-sm);transition:color .3s ease;font-family:inherit;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);box-sizing:border-box}._link_1ntr6_129:hover,._sublinkToggle_1ntr6_143:hover,._navItem_1ntr6_160:hover{color:var(--color-primary)}._sublinkToggle_1ntr6_143{background:none;border:none;display:flex;align-items:center;cursor:pointer;color:var(--color-text-primary)}._sublinks_1ntr6_174{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_1ntr6_174._show_1ntr6_197{max-height:500px;opacity:1;pointer-events:auto;visibility:visible}._chevron_1ntr6_204{transition:transform .3s ease}._sublinkToggle_1ntr6_143._open_1ntr6_208 ._chevron_1ntr6_204{transform:rotate(180deg)}@media (max-width: 767px){._logo_1ntr6_24{flex:1}._menuToggle_1ntr6_109{display:flex;align-items:center;justify-content:center}._utility_1ntr6_118 a:first-of-type{display:none}._utilityMobile_1ntr6_118{display:block;transform:translateY(100px);position:fixed;bottom:1rem;margin:0 auto;width:100%;z-index:1001;transition:transform .3s ease-in-out}._utilityMobile_1ntr6_118._open_1ntr6_208{transform:translateY(0)}._nav_1ntr6_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_1ntr6_5._open_1ntr6_208{transform:translate(0)}._linkWrapper_1ntr6_129{flex-direction:column;width:100%;max-width:300px;margin:0 auto;padding:var(--spacing-sm) 0}._linkWrapper_1ntr6_129._parent_1ntr6_277{border-bottom:1px solid var(--color-border)}._linkWrapper_1ntr6_129._parent_1ntr6_277:last-of-type{border:none}._linkItem_1ntr6_135{width:100%}._chevron_1ntr6_204{display:none}._sublinks_1ntr6_174{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_1ntr6_143{cursor:pointer;pointer-events:none;color:var(--color-muted)}}
46
+ :root{--nav-height: 65px}._navbar_153u1_5{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;background-color:var(--color-background);padding:0 var(--spacing-md);position:relative;z-index:1000;height:var(--nav-height)}._transparent_153u1_19{position:fixed;background-color:transparent}._transparent_153u1_19 ._logo_153u1_23{color:#fff}._transparent_153u1_19 ._logo_153u1_23 img{filter:brightness(0) invert(1)}._transparent_153u1_19 ._nav_153u1_5{background:#ffffff80;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);height:auto;border-radius:var(--radius-full);padding:0 var(--spacing-md)}._transparent_153u1_19 ._nav_153u1_5 ._sublinks_153u1_39{background:#ffffff80;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}._left_153u1_47 ._container_153u1_48{justify-content:flex-start}._left_153u1_47 ._logo_153u1_23{flex:unset}._left_153u1_47 ._nav_153u1_5{flex:1}@media (max-width: 767px){._left_153u1_47 ._logo_153u1_23{flex:1}}._center_153u1_67 ._nav_153u1_5{position:absolute;transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_153u1_67 ._nav_153u1_5._hidden_153u1_73{transform:translateY(-100%);opacity:0;pointer-events:none}._center_153u1_67 ._nav_153u1_5._visible_153u1_79{transform:translateY(0);opacity:1;pointer-events:auto}@media (max-width: 767px){._center_153u1_67 ._logo_153u1_23{flex:1}}._right_153u1_93 ._container_153u1_48{justify-content:flex-end}._right_153u1_93 ._logo_153u1_23{flex:1}._right_153u1_93 ._nav_153u1_5{flex:unset}._sticky_153u1_107{position:sticky;top:0;width:100%}._container_153u1_48{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);width:100%;height:100%;margin:0 auto}._logo_153u1_23{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary);display:flex;align-items:center;justify-content:flex-start}._logo_153u1_23 img{height:auto;width:auto}._menuToggle_153u1_137{background:none;border:none;cursor:pointer;display:none;color:var(--color-text-primary);z-index:1100}._utilityMobile_153u1_146{display:none}._utility_153u1_146 a{font-size:var(--font-size-sm)}._nav_153u1_5{display:flex;gap:var(--spacing-lg);height:100%;transition:transform .3s ease}._linkWrapper_153u1_161{position:relative;display:flex;align-items:center}._linkItem_153u1_167{display:flex;align-items:center;box-sizing:border-box}._sublinkToggle_153u1_175,._link_153u1_161{text-decoration:none;color:var(--color-text-primary);padding:var(--spacing-sm);transition:color .3s ease;font-family:inherit;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);box-sizing:border-box}._link_153u1_161:hover,._sublinkToggle_153u1_175:hover,._navItem_153u1_192:hover{color:var(--color-primary)}._sublinkToggle_153u1_175{background:none;border:none;display:flex;align-items:center;cursor:pointer;color:var(--color-text-primary)}._sublinks_153u1_39{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_153u1_39._show_153u1_229{max-height:500px;opacity:1;pointer-events:auto;visibility:visible}._chevron_153u1_236{transition:transform .3s ease}._sublinkToggle_153u1_175._open_153u1_240 ._chevron_153u1_236{transform:rotate(180deg)}@media (max-width: 767px){._logo_153u1_23{flex:1}._menuToggle_153u1_137{display:flex;align-items:center;justify-content:center}._utility_153u1_146 a:first-of-type{display:none}._utilityMobile_153u1_146{display:block;transform:translateY(100px);position:fixed;bottom:1rem;margin:0 auto;width:100%;z-index:1001;transition:transform .3s ease-in-out}._utilityMobile_153u1_146._open_153u1_240{transform:translateY(0)}._nav_153u1_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_153u1_5._open_153u1_240{transform:translate(0)}._linkWrapper_153u1_161{flex-direction:column;width:100%;max-width:300px;margin:0 auto;padding:var(--spacing-sm) 0}._linkWrapper_153u1_161._parent_153u1_309{border-bottom:1px solid var(--color-border)}._linkWrapper_153u1_161._parent_153u1_309:last-of-type{border:none}._linkItem_153u1_167{width:100%}._chevron_153u1_236{display:none}._sublinks_153u1_39{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_153u1_175{cursor:pointer;pointer-events:none;color:var(--color-muted)}}
47
47
  ._label_15ngo_1{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._text_15ngo_6{display:inline-flex;align-items:center;gap:var(--spacing-xs)}._sm_15ngo_13{font-size:.75rem}._md_15ngo_17{font-size:.875rem}._lg_15ngo_21{font-size:1rem}._default_15ngo_26{color:var(--color-text-primary)}._muted_15ngo_30{color:var(--color-muted)}._accent_15ngo_34{color:var(--color-primary)}._disabled_15ngo_38{color:var(--color-muted)}._error_15ngo_42{color:var(--color-error)}._required_15ngo_47{color:var(--color-error);margin-left:.25rem}._optional_15ngo_52{color:var(--color-muted);font-style:italic;margin-left:.25rem}._srOnly_15ngo_58{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._icon_15ngo_71{line-height:0;margin-left:var(--spacing-xs)}._tooltipWrapper_15ngo_77{position:relative;display:inline-flex;align-items:center}._tooltipIcon_15ngo_83{line-height:0;font-size:var(--font-size-md);cursor:help;margin-left:var(--spacing-xs);color:var(--color-muted)}._tooltipText_15ngo_91{visibility:hidden;background-color:#111;color:#fff;text-align:center;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);position:absolute;z-index:10;bottom:125%;left:50%;transform:translate(-50%);font-size:var(--font-size-xs);white-space:nowrap;opacity:0;transition:opacity .2s ease}._tooltipWrapper_15ngo_77:hover ._tooltipText_15ngo_91,._tooltipWrapper_15ngo_77:focus-within ._tooltipText_15ngo_91{visibility:visible;opacity:1}
48
48
  ._calendar_zbxci_1{padding:var(--spacing-sm);border-radius:var(--radius-md);min-width:250px}._header_zbxci_7{display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm)}._dayName_zbxci_13{font-weight:var(--font-weight-semibold);color:var(--color-text-primary);width:30px;text-align:center;flex:1;font-size:var(--font-size-sm)}._monthName_zbxci_23{font-weight:var(--font-weight-bold);color:var(--color-text-primary)}._week_zbxci_28{display:flex;justify-content:space-between;color:var(--color-text-primary)}._cell_zbxci_34{flex:1;padding:var(--spacing-xs) 0;text-align:center;background:none;color:var(--color-text-primary);border:none;cursor:pointer;width:30px}._outside_zbxci_45{color:var(--color-muted)}._selected_zbxci_49{background-color:var(--color-primary);color:#fff;border-radius:var(--radius-md)}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.140",
4
+ "version": "0.0.141",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {