trepur_components 2.3.33 → 2.3.34
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/lib/components/Nav/index.js +42 -56
- package/package.json +1 -1
|
@@ -1,97 +1,83 @@
|
|
|
1
1
|
import { jsx as e, jsxs as p, Fragment as H } from "react/jsx-runtime";
|
|
2
|
-
import { createContext as w, forwardRef as
|
|
2
|
+
import { createContext as w, forwardRef as d, useState as v, useMemo as C, useContext as c, useRef as k } from "react";
|
|
3
3
|
import { HamburgerIcon as M } from "../HamburgerIcon/index.js";
|
|
4
4
|
import { faChevronDown as j } from "@fortawesome/fontawesome-free-solid";
|
|
5
|
-
import
|
|
5
|
+
import n from "clsx";
|
|
6
6
|
import { Icon as D } from "../Icon/index.js";
|
|
7
7
|
import { NavItem as F } from "../NavItem/index.js";
|
|
8
|
-
const i = w(null),
|
|
9
|
-
const [s,
|
|
8
|
+
const i = w(null), g = d(({ className: t, children: r, loading: a }, o) => {
|
|
9
|
+
const [s, l] = v(!1), m = C(
|
|
10
10
|
() => ({
|
|
11
11
|
expanded: s,
|
|
12
|
-
setExpanded:
|
|
12
|
+
setExpanded: l,
|
|
13
13
|
loading: a
|
|
14
14
|
}),
|
|
15
|
-
[s,
|
|
15
|
+
[s, l, a]
|
|
16
16
|
);
|
|
17
|
-
return /* @__PURE__ */ e(i.Provider, { value:
|
|
18
|
-
}),
|
|
17
|
+
return /* @__PURE__ */ e(i.Provider, { value: m, children: /* @__PURE__ */ e("div", { className: t, ref: o, children: r }) });
|
|
18
|
+
}), N = d(
|
|
19
19
|
({ className: t, children: r }, a) => /* @__PURE__ */ e(
|
|
20
20
|
"div",
|
|
21
21
|
{
|
|
22
22
|
ref: a,
|
|
23
|
-
className:
|
|
23
|
+
className: n("relative h-24 w-full bg-nav-bg px-2 py-2", t),
|
|
24
24
|
children: r
|
|
25
25
|
}
|
|
26
26
|
)
|
|
27
|
-
),
|
|
28
|
-
const { loading: o, setExpanded: s, expanded:
|
|
29
|
-
return /* @__PURE__ */ p("div", { ref: a, className:
|
|
27
|
+
), f = d(({ className: t, children: r }, a) => {
|
|
28
|
+
const { loading: o, setExpanded: s, expanded: l } = c(i) || {};
|
|
29
|
+
return /* @__PURE__ */ p("div", { ref: a, className: n("flex h-full lg:hidden", t), children: [
|
|
30
30
|
!o && /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
|
|
31
31
|
M,
|
|
32
32
|
{
|
|
33
33
|
variant: "ghost",
|
|
34
|
-
onClick: () => s == null ? void 0 : s(!
|
|
34
|
+
onClick: () => s == null ? void 0 : s(!l),
|
|
35
35
|
className: "aspect-square"
|
|
36
36
|
}
|
|
37
37
|
) }),
|
|
38
38
|
/* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: r })
|
|
39
39
|
] });
|
|
40
|
-
}), u =
|
|
40
|
+
}), u = d(({ className: t, children: r }, a) => /* @__PURE__ */ e(
|
|
41
41
|
"div",
|
|
42
42
|
{
|
|
43
43
|
ref: a,
|
|
44
|
-
className:
|
|
45
|
-
"hidden justify-between lg:flex
|
|
44
|
+
className: n(
|
|
45
|
+
"hidden justify-between lg:flex gap-4 px-4 lg:gap-8 lg:px-20",
|
|
46
46
|
t
|
|
47
47
|
),
|
|
48
48
|
children: r
|
|
49
49
|
}
|
|
50
|
-
)), x =
|
|
50
|
+
)), x = d(
|
|
51
51
|
({ className: t, children: r }, a) => {
|
|
52
|
-
const { expanded: o } =
|
|
52
|
+
const { expanded: o } = c(i) || {};
|
|
53
53
|
return o ? /* @__PURE__ */ e(
|
|
54
54
|
"div",
|
|
55
55
|
{
|
|
56
56
|
ref: a,
|
|
57
|
-
className:
|
|
58
|
-
"h-screen bg-nav-bg px-8 pb-12 pt-2
|
|
57
|
+
className: n(
|
|
58
|
+
"h-screen bg-nav-bg px-8 pb-12 pt-2 lg:hidden",
|
|
59
59
|
t
|
|
60
60
|
),
|
|
61
|
-
children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4
|
|
61
|
+
children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 lg:hidden", children: r })
|
|
62
62
|
}
|
|
63
63
|
) : /* @__PURE__ */ e(H, {});
|
|
64
64
|
}
|
|
65
|
-
), h =
|
|
65
|
+
), h = d(
|
|
66
66
|
({ className: t, children: r }, a) => {
|
|
67
|
-
const { loading: o } =
|
|
68
|
-
return o ? /* @__PURE__ */ e(
|
|
69
|
-
"div",
|
|
70
|
-
{
|
|
71
|
-
ref: a,
|
|
72
|
-
className: d("my-4 md:flex md:gap-4 lg:gap-6", t),
|
|
73
|
-
children: [...Array(5)].map((s, n) => /* @__PURE__ */ e(F, { loading: !0 }, n))
|
|
74
|
-
}
|
|
75
|
-
) : /* @__PURE__ */ e(
|
|
76
|
-
"div",
|
|
77
|
-
{
|
|
78
|
-
ref: a,
|
|
79
|
-
className: d("my-4 md:flex md:gap-4 lg:gap-6", t),
|
|
80
|
-
children: r
|
|
81
|
-
}
|
|
82
|
-
);
|
|
67
|
+
const { loading: o } = c(i) || {};
|
|
68
|
+
return o ? /* @__PURE__ */ e("div", { ref: a, className: n("my-4 lg:flex lg:gap-6", t), children: [...Array(5)].map((s, l) => /* @__PURE__ */ e(F, { loading: !0 }, l)) }) : /* @__PURE__ */ e("div", { ref: a, className: n("my-4 lg:flex lg:gap-6", t), children: r });
|
|
83
69
|
}
|
|
84
|
-
), b =
|
|
85
|
-
const [s,
|
|
70
|
+
), b = d(({ className: t, label: r, children: a, active: o = !1 }) => {
|
|
71
|
+
const [s, l] = v(!1), m = k(null);
|
|
86
72
|
return /* @__PURE__ */ p(
|
|
87
73
|
"div",
|
|
88
74
|
{
|
|
89
|
-
ref:
|
|
90
|
-
onMouseEnter: () =>
|
|
91
|
-
onMouseLeave: () =>
|
|
92
|
-
onClick: () =>
|
|
93
|
-
className:
|
|
94
|
-
"relative m-auto py-0 text-nav-text
|
|
75
|
+
ref: m,
|
|
76
|
+
onMouseEnter: () => l(!0),
|
|
77
|
+
onMouseLeave: () => l(!1),
|
|
78
|
+
onClick: () => l(!s),
|
|
79
|
+
className: n(
|
|
80
|
+
"relative m-auto py-0 text-nav-text lg:after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
|
|
95
81
|
{
|
|
96
82
|
"font-bold": o,
|
|
97
83
|
"font-light": !o
|
|
@@ -103,34 +89,34 @@ const i = w(null), N = l(({ className: t, children: r, loading: a }, o) => {
|
|
|
103
89
|
/* @__PURE__ */ e("p", { className: "text-lg", children: r }),
|
|
104
90
|
/* @__PURE__ */ e(D, { size: "xs", icon: j })
|
|
105
91
|
] }),
|
|
106
|
-
s && /* @__PURE__ */ e("div", { className: "rounded-md
|
|
92
|
+
s && /* @__PURE__ */ e("div", { className: "rounded-md lg:absolute lg:-left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ e("div", { className: "rounded-md grid grid-cols-1 gap-y-2 bg-nav-bg px-1 py-2 w-full", children: a }) })
|
|
107
93
|
]
|
|
108
94
|
}
|
|
109
95
|
);
|
|
110
|
-
}), y =
|
|
111
|
-
const { loading: s } =
|
|
96
|
+
}), y = d(({ className: t, src: r, ...a }, o) => {
|
|
97
|
+
const { loading: s } = c(i) || {};
|
|
112
98
|
return s ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "h-20 w-20 animate-pulse bg-gray-300" }) }) : /* @__PURE__ */ e(
|
|
113
99
|
"img",
|
|
114
100
|
{
|
|
115
|
-
className:
|
|
101
|
+
className: n("h-20 flex-none", t),
|
|
116
102
|
ref: o,
|
|
117
103
|
src: r,
|
|
118
104
|
...a
|
|
119
105
|
}
|
|
120
106
|
);
|
|
121
107
|
});
|
|
122
|
-
|
|
123
|
-
|
|
108
|
+
g.displayName = "Nav";
|
|
109
|
+
N.displayName = "Nav.Header";
|
|
124
110
|
u.displayName = "Nav.DesktopHeader";
|
|
125
|
-
|
|
111
|
+
f.displayName = "Nav.MobileHeader";
|
|
126
112
|
y.displayName = "Nav.Logo";
|
|
127
113
|
h.displayName = "Nav.Section";
|
|
128
114
|
x.displayName = "Nav.Body";
|
|
129
115
|
b.displayName = "Nav.Folder";
|
|
130
|
-
const q = Object.assign(
|
|
131
|
-
Header:
|
|
116
|
+
const q = Object.assign(g, {
|
|
117
|
+
Header: N,
|
|
132
118
|
DesktopHeader: u,
|
|
133
|
-
MobileHeader:
|
|
119
|
+
MobileHeader: f,
|
|
134
120
|
Section: h,
|
|
135
121
|
Logo: y,
|
|
136
122
|
Body: x,
|