@khyxer/fastyui 1.0.1 → 1.0.2
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/fastyui.css +1341 -1
- package/dist/index.cjs.js +1769 -6
- package/dist/index.es.js +1100 -966
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
import { Children
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
var
|
|
5
|
-
if (typeof require < "u") return require.apply(this, arguments);
|
|
6
|
-
throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
|
|
7
|
-
}), f = {
|
|
1
|
+
import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
|
|
2
|
+
import gsap$1, { gsap } from "gsap";
|
|
3
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
var Button_module_default = {
|
|
8
5
|
button: "_button_1xsg4_1",
|
|
9
6
|
primary: "_primary_1xsg4_18",
|
|
10
7
|
disabled: "_disabled_1xsg4_23",
|
|
@@ -14,216 +11,49 @@ var u = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
|
|
|
14
11
|
sm: "_sm_1xsg4_92",
|
|
15
12
|
lg: "_lg_1xsg4_103",
|
|
16
13
|
xl: "_xl_1xsg4_114"
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
try {
|
|
57
|
-
return t(e(n));
|
|
58
|
-
} catch {}
|
|
59
|
-
}
|
|
60
|
-
return null;
|
|
61
|
-
}
|
|
62
|
-
function n(e) {
|
|
63
|
-
return "" + e;
|
|
64
|
-
}
|
|
65
|
-
function r(e) {
|
|
66
|
-
try {
|
|
67
|
-
n(e);
|
|
68
|
-
var t = !1;
|
|
69
|
-
} catch {
|
|
70
|
-
t = !0;
|
|
71
|
-
}
|
|
72
|
-
if (t) {
|
|
73
|
-
t = console;
|
|
74
|
-
var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
75
|
-
return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
function i(e) {
|
|
79
|
-
if (e === v) return "<>";
|
|
80
|
-
if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
|
|
81
|
-
try {
|
|
82
|
-
var n = t(e);
|
|
83
|
-
return n ? "<" + n + ">" : "<...>";
|
|
84
|
-
} catch {
|
|
85
|
-
return "<...>";
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
function a() {
|
|
89
|
-
var e = A.A;
|
|
90
|
-
return e === null ? null : e.getOwner();
|
|
91
|
-
}
|
|
92
|
-
function o() {
|
|
93
|
-
return Error("react-stack-top-frame");
|
|
94
|
-
}
|
|
95
|
-
function s(e) {
|
|
96
|
-
if (j.call(e, "key")) {
|
|
97
|
-
var t = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
98
|
-
if (t && t.isReactWarning) return !1;
|
|
99
|
-
}
|
|
100
|
-
return e.key !== void 0;
|
|
101
|
-
}
|
|
102
|
-
function c(e, t) {
|
|
103
|
-
function n() {
|
|
104
|
-
P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
|
|
105
|
-
}
|
|
106
|
-
n.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
107
|
-
get: n,
|
|
108
|
-
configurable: !0
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
function l() {
|
|
112
|
-
var e = t(this.type);
|
|
113
|
-
return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
|
|
114
|
-
}
|
|
115
|
-
function u(e, t, n, r, i, a) {
|
|
116
|
-
var o = n.ref;
|
|
117
|
-
return e = {
|
|
118
|
-
$$typeof: g,
|
|
119
|
-
type: e,
|
|
120
|
-
key: t,
|
|
121
|
-
props: n,
|
|
122
|
-
_owner: r
|
|
123
|
-
}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
|
|
124
|
-
enumerable: !1,
|
|
125
|
-
value: null
|
|
126
|
-
}) : Object.defineProperty(e, "ref", {
|
|
127
|
-
enumerable: !1,
|
|
128
|
-
get: l
|
|
129
|
-
}), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
130
|
-
configurable: !1,
|
|
131
|
-
enumerable: !1,
|
|
132
|
-
writable: !0,
|
|
133
|
-
value: 0
|
|
134
|
-
}), Object.defineProperty(e, "_debugInfo", {
|
|
135
|
-
configurable: !1,
|
|
136
|
-
enumerable: !1,
|
|
137
|
-
writable: !0,
|
|
138
|
-
value: null
|
|
139
|
-
}), Object.defineProperty(e, "_debugStack", {
|
|
140
|
-
configurable: !1,
|
|
141
|
-
enumerable: !1,
|
|
142
|
-
writable: !0,
|
|
143
|
-
value: i
|
|
144
|
-
}), Object.defineProperty(e, "_debugTask", {
|
|
145
|
-
configurable: !1,
|
|
146
|
-
enumerable: !1,
|
|
147
|
-
writable: !0,
|
|
148
|
-
value: a
|
|
149
|
-
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
150
|
-
}
|
|
151
|
-
function f(e, n, i, o, l, d) {
|
|
152
|
-
var f = n.children;
|
|
153
|
-
if (f !== void 0) if (o) if (M(f)) {
|
|
154
|
-
for (o = 0; o < f.length; o++) p(f[o]);
|
|
155
|
-
Object.freeze && Object.freeze(f);
|
|
156
|
-
} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
|
|
157
|
-
else p(f);
|
|
158
|
-
if (j.call(n, "key")) {
|
|
159
|
-
f = t(e);
|
|
160
|
-
var m = Object.keys(n).filter(function(e) {
|
|
161
|
-
return e !== "key";
|
|
162
|
-
});
|
|
163
|
-
o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />", o, f, m, f), R[f + o] = !0);
|
|
164
|
-
}
|
|
165
|
-
if (f = null, i !== void 0 && (r(i), f = "" + i), s(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
|
|
166
|
-
else i = n;
|
|
167
|
-
return f && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), u(e, f, i, a(), l, d);
|
|
168
|
-
}
|
|
169
|
-
function p(e) {
|
|
170
|
-
m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
171
|
-
}
|
|
172
|
-
function m(e) {
|
|
173
|
-
return typeof e == "object" && !!e && e.$$typeof === g;
|
|
174
|
-
}
|
|
175
|
-
var h = d("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
|
|
176
|
-
return null;
|
|
177
|
-
};
|
|
178
|
-
h = { react_stack_bottom_frame: function(e) {
|
|
179
|
-
return e();
|
|
180
|
-
} };
|
|
181
|
-
var P, F = {}, I = h.react_stack_bottom_frame.bind(h, o)(), L = N(i(o)), R = {};
|
|
182
|
-
e.Fragment = v, e.jsx = function(e, t, n) {
|
|
183
|
-
var r = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
184
|
-
return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
|
|
185
|
-
}, e.jsxs = function(e, t, n) {
|
|
186
|
-
var r = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
187
|
-
return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
|
|
188
|
-
};
|
|
189
|
-
})();
|
|
190
|
-
})), h = (/* @__PURE__ */ u(((e, t) => {
|
|
191
|
-
process.env.NODE_ENV === "production" ? t.exports = p() : t.exports = m();
|
|
192
|
-
})))();
|
|
193
|
-
function g({ text: e, variant: t = "primary", size: n = "lg", onClick: r, icon: i, disabled: a = !1, className: s, ...c }) {
|
|
194
|
-
let u = o(null);
|
|
195
|
-
return /* @__PURE__ */ (0, h.jsxs)("button", {
|
|
196
|
-
ref: u,
|
|
197
|
-
onClick: () => {
|
|
198
|
-
a || r?.();
|
|
199
|
-
},
|
|
200
|
-
onMouseDown: () => {
|
|
201
|
-
a || !u.current || l.to(u.current, {
|
|
202
|
-
scale: .96,
|
|
203
|
-
duration: .1,
|
|
204
|
-
ease: "power2.in"
|
|
205
|
-
});
|
|
206
|
-
},
|
|
207
|
-
onMouseUp: () => {
|
|
208
|
-
a || !u.current || l.to(u.current, {
|
|
209
|
-
scale: 1,
|
|
210
|
-
duration: .2,
|
|
211
|
-
ease: "back.out(1.7)"
|
|
212
|
-
});
|
|
213
|
-
},
|
|
214
|
-
disabled: a,
|
|
215
|
-
className: `${f.button} ${f[t]} ${n ? f[n] : ""} ${a ? f.disabled : ""} ${s || ""}`,
|
|
216
|
-
...c,
|
|
217
|
-
children: [i && /* @__PURE__ */ (0, h.jsx)("span", {
|
|
218
|
-
className: f.icon,
|
|
219
|
-
children: i
|
|
220
|
-
}), e && /* @__PURE__ */ (0, h.jsx)("span", {
|
|
221
|
-
className: f.text,
|
|
222
|
-
children: e
|
|
14
|
+
};
|
|
15
|
+
//#endregion
|
|
16
|
+
//#region src/components/button/Button.tsx
|
|
17
|
+
function Button({ text, variant = "primary", size = "lg", onClick, icon, disabled = false, className, ...props }) {
|
|
18
|
+
const buttonRef = useRef(null);
|
|
19
|
+
const handleMouseDown = () => {
|
|
20
|
+
if (disabled || !buttonRef.current) return;
|
|
21
|
+
gsap.to(buttonRef.current, {
|
|
22
|
+
scale: .96,
|
|
23
|
+
duration: .1,
|
|
24
|
+
ease: "power2.in"
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
const handleMouseUp = () => {
|
|
28
|
+
if (disabled || !buttonRef.current) return;
|
|
29
|
+
gsap.to(buttonRef.current, {
|
|
30
|
+
scale: 1,
|
|
31
|
+
duration: .2,
|
|
32
|
+
ease: "back.out(1.7)"
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
const handleClick = () => {
|
|
36
|
+
if (disabled) return;
|
|
37
|
+
onClick?.();
|
|
38
|
+
};
|
|
39
|
+
return /* @__PURE__ */ jsxs("button", {
|
|
40
|
+
ref: buttonRef,
|
|
41
|
+
onClick: handleClick,
|
|
42
|
+
onMouseDown: handleMouseDown,
|
|
43
|
+
onMouseUp: handleMouseUp,
|
|
44
|
+
disabled,
|
|
45
|
+
className: `${Button_module_default.button} ${Button_module_default[variant]} ${size ? Button_module_default[size] : ""} ${disabled ? Button_module_default.disabled : ""} ${className || ""}`,
|
|
46
|
+
...props,
|
|
47
|
+
children: [icon && /* @__PURE__ */ jsx("span", {
|
|
48
|
+
className: Button_module_default.icon,
|
|
49
|
+
children: icon
|
|
50
|
+
}), text && /* @__PURE__ */ jsx("span", {
|
|
51
|
+
className: Button_module_default.text,
|
|
52
|
+
children: text
|
|
223
53
|
})]
|
|
224
54
|
});
|
|
225
55
|
}
|
|
226
|
-
var
|
|
56
|
+
var Input_module_default = {
|
|
227
57
|
input: "_input_1ddpd_1",
|
|
228
58
|
inputWrapper: "_inputWrapper_1ddpd_19",
|
|
229
59
|
icon: "_icon_1ddpd_37",
|
|
@@ -235,26 +65,28 @@ var _ = {
|
|
|
235
65
|
};
|
|
236
66
|
//#endregion
|
|
237
67
|
//#region src/components/input/Input.tsx
|
|
238
|
-
function
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
68
|
+
function Input({ size = "lg", icon, password = false, className, ...props }) {
|
|
69
|
+
const [showPassword, setShowPassword] = useState(false);
|
|
70
|
+
const sizeClass = size ? Input_module_default[size] : "";
|
|
71
|
+
const inputType = password ? showPassword ? "text" : "password" : props.type || "text";
|
|
72
|
+
if (icon || password) return /* @__PURE__ */ jsxs("div", {
|
|
73
|
+
className: `${Input_module_default.inputWrapper}`,
|
|
242
74
|
children: [
|
|
243
|
-
|
|
244
|
-
className:
|
|
245
|
-
children:
|
|
75
|
+
icon && /* @__PURE__ */ jsx("span", {
|
|
76
|
+
className: Input_module_default.icon,
|
|
77
|
+
children: icon
|
|
246
78
|
}),
|
|
247
|
-
/* @__PURE__ */
|
|
248
|
-
type:
|
|
249
|
-
className: `${
|
|
250
|
-
...
|
|
79
|
+
/* @__PURE__ */ jsx("input", {
|
|
80
|
+
type: inputType,
|
|
81
|
+
className: `${Input_module_default.inputWithIcon} ${sizeClass} ${className || ""}`,
|
|
82
|
+
...props
|
|
251
83
|
}),
|
|
252
|
-
|
|
84
|
+
password && /* @__PURE__ */ jsx("button", {
|
|
253
85
|
type: "button",
|
|
254
|
-
className:
|
|
255
|
-
onClick: () =>
|
|
256
|
-
"aria-label":
|
|
257
|
-
children:
|
|
86
|
+
className: Input_module_default.eyeButton,
|
|
87
|
+
onClick: () => setShowPassword(!showPassword),
|
|
88
|
+
"aria-label": showPassword ? "Ocultar contraseña" : "Mostrar contraseña",
|
|
89
|
+
children: showPassword ? /* @__PURE__ */ jsxs("svg", {
|
|
258
90
|
xmlns: "http://www.w3.org/2000/svg",
|
|
259
91
|
width: "20",
|
|
260
92
|
height: "20",
|
|
@@ -264,13 +96,13 @@ function v({ size: e = "lg", icon: t, password: n = !1, className: r, ...i }) {
|
|
|
264
96
|
strokeWidth: "2",
|
|
265
97
|
strokeLinecap: "round",
|
|
266
98
|
strokeLinejoin: "round",
|
|
267
|
-
children: [/* @__PURE__ */
|
|
99
|
+
children: [/* @__PURE__ */ jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), /* @__PURE__ */ jsx("line", {
|
|
268
100
|
x1: "2",
|
|
269
101
|
y1: "2",
|
|
270
102
|
x2: "22",
|
|
271
103
|
y2: "22"
|
|
272
104
|
})]
|
|
273
|
-
}) : /* @__PURE__ */
|
|
105
|
+
}) : /* @__PURE__ */ jsxs("svg", {
|
|
274
106
|
xmlns: "http://www.w3.org/2000/svg",
|
|
275
107
|
width: "20",
|
|
276
108
|
height: "20",
|
|
@@ -280,7 +112,7 @@ function v({ size: e = "lg", icon: t, password: n = !1, className: r, ...i }) {
|
|
|
280
112
|
strokeWidth: "2",
|
|
281
113
|
strokeLinecap: "round",
|
|
282
114
|
strokeLinejoin: "round",
|
|
283
|
-
children: [/* @__PURE__ */
|
|
115
|
+
children: [/* @__PURE__ */ jsx("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }), /* @__PURE__ */ jsx("circle", {
|
|
284
116
|
cx: "12",
|
|
285
117
|
cy: "12",
|
|
286
118
|
r: "3"
|
|
@@ -288,26 +120,27 @@ function v({ size: e = "lg", icon: t, password: n = !1, className: r, ...i }) {
|
|
|
288
120
|
})
|
|
289
121
|
})
|
|
290
122
|
]
|
|
291
|
-
})
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
123
|
+
});
|
|
124
|
+
return /* @__PURE__ */ jsx("input", {
|
|
125
|
+
type: inputType,
|
|
126
|
+
className: `${Input_module_default.input} ${sizeClass} ${className || ""}`,
|
|
127
|
+
...props
|
|
295
128
|
});
|
|
296
129
|
}
|
|
297
|
-
var
|
|
130
|
+
var Card_module_default = {
|
|
298
131
|
card: "_card_w8zkq_1",
|
|
299
132
|
dashed: "_dashed_w8zkq_9"
|
|
300
133
|
};
|
|
301
134
|
//#endregion
|
|
302
135
|
//#region src/components/card/Card.tsx
|
|
303
|
-
function
|
|
304
|
-
return /* @__PURE__ */
|
|
305
|
-
className: `${
|
|
306
|
-
...
|
|
307
|
-
children
|
|
136
|
+
function Card({ children, dashed = false, className, ...props }) {
|
|
137
|
+
return /* @__PURE__ */ jsx("div", {
|
|
138
|
+
className: `${Card_module_default.card} ${dashed ? Card_module_default.dashed : ""} ${className || ""}`,
|
|
139
|
+
...props,
|
|
140
|
+
children
|
|
308
141
|
});
|
|
309
142
|
}
|
|
310
|
-
var
|
|
143
|
+
var Sheet_module_default = {
|
|
311
144
|
overlay: "_overlay_1qbeq_1",
|
|
312
145
|
sheet: "_sheet_1qbeq_8",
|
|
313
146
|
right: "_right_1qbeq_18",
|
|
@@ -320,35 +153,39 @@ var x = {
|
|
|
320
153
|
xl: "_xl_1qbeq_64",
|
|
321
154
|
full: "_full_1qbeq_70",
|
|
322
155
|
closeButton: "_closeButton_1qbeq_109"
|
|
323
|
-
}
|
|
156
|
+
};
|
|
157
|
+
var HeroSheet_module_default = {
|
|
324
158
|
header: "_header_1pbdy_1",
|
|
325
159
|
content: "_content_1pbdy_9",
|
|
326
160
|
title: "_title_1pbdy_15",
|
|
327
161
|
description: "_description_1pbdy_23",
|
|
328
162
|
closeButton: "_closeButton_1pbdy_30"
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
className:
|
|
345
|
-
children:
|
|
163
|
+
};
|
|
164
|
+
//#endregion
|
|
165
|
+
//#region src/components/sheet/HeroSheet.tsx
|
|
166
|
+
var SheetContext = createContext(null);
|
|
167
|
+
function HeroSheet({ title, description, showCloseButton = false, className, ...props }) {
|
|
168
|
+
const context = useContext(SheetContext);
|
|
169
|
+
if (!context) throw new Error("HeroSheet must be used within a Sheet component");
|
|
170
|
+
return /* @__PURE__ */ jsx("div", {
|
|
171
|
+
className: `${HeroSheet_module_default.heroSheet} ${className || ""}`,
|
|
172
|
+
...props,
|
|
173
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
174
|
+
className: HeroSheet_module_default.header,
|
|
175
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
176
|
+
className: HeroSheet_module_default.content,
|
|
177
|
+
children: [/* @__PURE__ */ jsx("h2", {
|
|
178
|
+
className: HeroSheet_module_default.title,
|
|
179
|
+
children: title
|
|
180
|
+
}), description && /* @__PURE__ */ jsx("p", {
|
|
181
|
+
className: HeroSheet_module_default.description,
|
|
182
|
+
children: description
|
|
346
183
|
})]
|
|
347
|
-
}),
|
|
348
|
-
className:
|
|
349
|
-
onClick:
|
|
184
|
+
}), showCloseButton && /* @__PURE__ */ jsx("button", {
|
|
185
|
+
className: HeroSheet_module_default.closeButton,
|
|
186
|
+
onClick: context.onClose,
|
|
350
187
|
"aria-label": "Close",
|
|
351
|
-
children: /* @__PURE__ */
|
|
188
|
+
children: /* @__PURE__ */ jsxs("svg", {
|
|
352
189
|
xmlns: "http://www.w3.org/2000/svg",
|
|
353
190
|
width: "24",
|
|
354
191
|
height: "24",
|
|
@@ -359,7 +196,7 @@ function w({ title: e, description: t, showCloseButton: n = !1, className: r, ..
|
|
|
359
196
|
"stroke-linecap": "round",
|
|
360
197
|
"stroke-linejoin": "round",
|
|
361
198
|
className: "lucide lucide-x-icon lucide-x",
|
|
362
|
-
children: [/* @__PURE__ */
|
|
199
|
+
children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
|
|
363
200
|
})
|
|
364
201
|
})]
|
|
365
202
|
})
|
|
@@ -367,95 +204,125 @@ function w({ title: e, description: t, showCloseButton: n = !1, className: r, ..
|
|
|
367
204
|
}
|
|
368
205
|
//#endregion
|
|
369
206
|
//#region src/components/sheet/Sheet.tsx
|
|
370
|
-
function
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
207
|
+
function Sheet({ children, side = "right", width = "md", className, ...props }) {
|
|
208
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
209
|
+
const overlayRef = useRef(null);
|
|
210
|
+
const sheetRef = useRef(null);
|
|
211
|
+
useEffect(() => {
|
|
212
|
+
if (isOpen) {
|
|
213
|
+
document.body.style.overflow = "hidden";
|
|
214
|
+
animateIn();
|
|
215
|
+
} else document.body.style.overflow = "unset";
|
|
216
|
+
return () => {
|
|
217
|
+
document.body.style.overflow = "unset";
|
|
218
|
+
};
|
|
219
|
+
}, [isOpen]);
|
|
220
|
+
const animateIn = () => {
|
|
221
|
+
if (!overlayRef.current || !sheetRef.current) return;
|
|
222
|
+
gsap$1.fromTo(overlayRef.current, { opacity: 0 }, {
|
|
377
223
|
opacity: 1,
|
|
378
224
|
duration: .2,
|
|
379
225
|
ease: "power2.out"
|
|
380
|
-
})
|
|
226
|
+
});
|
|
227
|
+
gsap$1.fromTo(sheetRef.current, {
|
|
381
228
|
right: { x: "100%" },
|
|
382
229
|
left: { x: "-100%" },
|
|
383
230
|
top: { y: "-100%" },
|
|
384
231
|
bottom: { y: "100%" }
|
|
385
|
-
}[
|
|
232
|
+
}[side], {
|
|
386
233
|
x: 0,
|
|
387
234
|
y: 0,
|
|
388
235
|
duration: .3,
|
|
389
236
|
ease: "power2.out"
|
|
390
|
-
})
|
|
391
|
-
}
|
|
392
|
-
|
|
237
|
+
});
|
|
238
|
+
};
|
|
239
|
+
const animateOut = () => {
|
|
240
|
+
if (!overlayRef.current || !sheetRef.current) return;
|
|
241
|
+
gsap$1.to(overlayRef.current, {
|
|
393
242
|
opacity: 0,
|
|
394
243
|
duration: .3,
|
|
395
244
|
ease: "power2.in"
|
|
396
|
-
})
|
|
245
|
+
});
|
|
246
|
+
gsap$1.to(sheetRef.current, {
|
|
397
247
|
...{
|
|
398
248
|
right: { x: "100%" },
|
|
399
249
|
left: { x: "-100%" },
|
|
400
250
|
top: { y: "-100%" },
|
|
401
251
|
bottom: { y: "100%" }
|
|
402
|
-
}[
|
|
252
|
+
}[side],
|
|
403
253
|
duration: .3,
|
|
404
254
|
ease: "power2.in",
|
|
405
|
-
onComplete: () =>
|
|
406
|
-
})
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
}), /* @__PURE__ */ (
|
|
415
|
-
ref:
|
|
416
|
-
className:
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
255
|
+
onComplete: () => setIsOpen(false)
|
|
256
|
+
});
|
|
257
|
+
};
|
|
258
|
+
const handleClose = () => {
|
|
259
|
+
animateOut();
|
|
260
|
+
};
|
|
261
|
+
const childrenArray = Children.toArray(children);
|
|
262
|
+
const trigger = childrenArray[0];
|
|
263
|
+
const content = childrenArray.slice(1);
|
|
264
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [isValidElement(trigger) ? cloneElement(trigger, { onClick: () => setIsOpen(true) }) : trigger, isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
|
|
265
|
+
ref: overlayRef,
|
|
266
|
+
className: Sheet_module_default.overlay,
|
|
267
|
+
onClick: handleClose
|
|
268
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
269
|
+
ref: sheetRef,
|
|
270
|
+
className: `${Sheet_module_default.sheet} ${Sheet_module_default[side]} ${Sheet_module_default[width]} ${className || ""}`,
|
|
271
|
+
...props,
|
|
272
|
+
children: /* @__PURE__ */ jsx(SheetContext.Provider, {
|
|
273
|
+
value: { onClose: handleClose },
|
|
274
|
+
children: content
|
|
421
275
|
})
|
|
422
276
|
})] })] });
|
|
423
277
|
}
|
|
424
|
-
var
|
|
278
|
+
var SheetContent_module_default = { content: "_content_n86ez_1" };
|
|
425
279
|
//#endregion
|
|
426
280
|
//#region src/components/sheet/SheetContent.tsx
|
|
427
|
-
function
|
|
428
|
-
return /* @__PURE__ */
|
|
429
|
-
className: `${
|
|
430
|
-
...
|
|
431
|
-
children
|
|
281
|
+
function SheetContent({ children, className, ...props }) {
|
|
282
|
+
return /* @__PURE__ */ jsx("div", {
|
|
283
|
+
className: `${SheetContent_module_default.content} ${className || ""}`,
|
|
284
|
+
...props,
|
|
285
|
+
children
|
|
432
286
|
});
|
|
433
287
|
}
|
|
434
|
-
var
|
|
288
|
+
var SheetFooter_module_default = { footer: "_footer_e6jod_1" };
|
|
435
289
|
//#endregion
|
|
436
290
|
//#region src/components/sheet/SheetFooter.tsx
|
|
437
|
-
function
|
|
438
|
-
return /* @__PURE__ */
|
|
439
|
-
className: `${
|
|
440
|
-
...
|
|
441
|
-
children
|
|
291
|
+
function SheetFooter({ children, className, ...props }) {
|
|
292
|
+
return /* @__PURE__ */ jsx("div", {
|
|
293
|
+
className: `${SheetFooter_module_default.footer} ${className || ""}`,
|
|
294
|
+
...props,
|
|
295
|
+
children
|
|
442
296
|
});
|
|
443
297
|
}
|
|
444
|
-
var
|
|
298
|
+
var Modal_module_default = {
|
|
445
299
|
overlay: "_overlay_160jk_1",
|
|
446
300
|
modal: "_modal_160jk_11"
|
|
447
|
-
}
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
301
|
+
};
|
|
302
|
+
//#endregion
|
|
303
|
+
//#region src/components/modal/Modal.tsx
|
|
304
|
+
var ModalContext = createContext(null);
|
|
305
|
+
function Modal({ children, className, ...props }) {
|
|
306
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
307
|
+
const overlayRef = useRef(null);
|
|
308
|
+
const modalRef = useRef(null);
|
|
309
|
+
useEffect(() => {
|
|
310
|
+
if (isOpen) {
|
|
311
|
+
document.body.style.overflow = "hidden";
|
|
312
|
+
animateIn();
|
|
313
|
+
} else document.body.style.overflow = "unset";
|
|
314
|
+
return () => {
|
|
315
|
+
document.body.style.overflow = "unset";
|
|
316
|
+
};
|
|
317
|
+
}, [isOpen]);
|
|
318
|
+
const animateIn = () => {
|
|
319
|
+
if (!overlayRef.current || !modalRef.current) return;
|
|
320
|
+
gsap$1.fromTo(overlayRef.current, { opacity: 0 }, {
|
|
455
321
|
opacity: 1,
|
|
456
322
|
duration: .3,
|
|
457
323
|
ease: "power2.out"
|
|
458
|
-
})
|
|
324
|
+
});
|
|
325
|
+
gsap$1.fromTo(modalRef.current, {
|
|
459
326
|
opacity: 0,
|
|
460
327
|
scale: .9,
|
|
461
328
|
y: 20
|
|
@@ -465,38 +332,45 @@ function M({ children: n, className: i, ...l }) {
|
|
|
465
332
|
y: 0,
|
|
466
333
|
duration: .4,
|
|
467
334
|
ease: "back.out(1.7)"
|
|
468
|
-
})
|
|
469
|
-
}
|
|
470
|
-
|
|
335
|
+
});
|
|
336
|
+
};
|
|
337
|
+
const animateOut = () => {
|
|
338
|
+
if (!overlayRef.current || !modalRef.current) return;
|
|
339
|
+
gsap$1.to(overlayRef.current, {
|
|
471
340
|
opacity: 0,
|
|
472
341
|
duration: .25,
|
|
473
342
|
ease: "power2.in"
|
|
474
|
-
})
|
|
343
|
+
});
|
|
344
|
+
gsap$1.to(modalRef.current, {
|
|
475
345
|
opacity: 0,
|
|
476
346
|
scale: .95,
|
|
477
347
|
y: 10,
|
|
478
348
|
duration: .25,
|
|
479
349
|
ease: "power2.in",
|
|
480
|
-
onComplete: () =>
|
|
481
|
-
})
|
|
482
|
-
}
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
}), /* @__PURE__ */ (
|
|
490
|
-
ref:
|
|
491
|
-
className:
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
350
|
+
onComplete: () => setIsOpen(false)
|
|
351
|
+
});
|
|
352
|
+
};
|
|
353
|
+
const handleClose = () => {
|
|
354
|
+
animateOut();
|
|
355
|
+
};
|
|
356
|
+
const childrenArray = Children.toArray(children);
|
|
357
|
+
const trigger = childrenArray[0];
|
|
358
|
+
const content = childrenArray.slice(1);
|
|
359
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [isValidElement(trigger) ? cloneElement(trigger, { onClick: () => setIsOpen(true) }) : trigger, isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
|
|
360
|
+
ref: overlayRef,
|
|
361
|
+
className: Modal_module_default.overlay,
|
|
362
|
+
onClick: handleClose
|
|
363
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
364
|
+
ref: modalRef,
|
|
365
|
+
className: `${Modal_module_default.modal} ${className || ""}`,
|
|
366
|
+
...props,
|
|
367
|
+
children: /* @__PURE__ */ jsx(ModalContext.Provider, {
|
|
368
|
+
value: { onClose: handleClose },
|
|
369
|
+
children: content
|
|
496
370
|
})
|
|
497
371
|
})] })] });
|
|
498
372
|
}
|
|
499
|
-
var
|
|
373
|
+
var ModalHeader_module_default = {
|
|
500
374
|
header: "_header_52hw4_1",
|
|
501
375
|
content: "_content_52hw4_10",
|
|
502
376
|
title: "_title_52hw4_16",
|
|
@@ -505,26 +379,26 @@ var N = {
|
|
|
505
379
|
};
|
|
506
380
|
//#endregion
|
|
507
381
|
//#region src/components/modal/ModalHeader.tsx
|
|
508
|
-
function
|
|
509
|
-
|
|
510
|
-
if (!
|
|
511
|
-
return /* @__PURE__ */
|
|
512
|
-
className: `${
|
|
513
|
-
...
|
|
514
|
-
children: [/* @__PURE__ */
|
|
515
|
-
className:
|
|
516
|
-
children: [/* @__PURE__ */
|
|
517
|
-
className:
|
|
518
|
-
children:
|
|
519
|
-
}),
|
|
520
|
-
className:
|
|
521
|
-
children:
|
|
382
|
+
function ModalHeader({ title, description, showCloseButton = true, className, ...props }) {
|
|
383
|
+
const context = useContext(ModalContext);
|
|
384
|
+
if (!context) throw new Error("ModalHeader must be used within a Modal component");
|
|
385
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
386
|
+
className: `${ModalHeader_module_default.header} ${className || ""}`,
|
|
387
|
+
...props,
|
|
388
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
389
|
+
className: ModalHeader_module_default.content,
|
|
390
|
+
children: [/* @__PURE__ */ jsx("h2", {
|
|
391
|
+
className: ModalHeader_module_default.title,
|
|
392
|
+
children: title
|
|
393
|
+
}), description && /* @__PURE__ */ jsx("p", {
|
|
394
|
+
className: ModalHeader_module_default.description,
|
|
395
|
+
children: description
|
|
522
396
|
})]
|
|
523
|
-
}),
|
|
524
|
-
className:
|
|
525
|
-
onClick:
|
|
397
|
+
}), showCloseButton && /* @__PURE__ */ jsx("button", {
|
|
398
|
+
className: ModalHeader_module_default.closeButton,
|
|
399
|
+
onClick: context.onClose,
|
|
526
400
|
"aria-label": "Close",
|
|
527
|
-
children: /* @__PURE__ */
|
|
401
|
+
children: /* @__PURE__ */ jsxs("svg", {
|
|
528
402
|
xmlns: "http://www.w3.org/2000/svg",
|
|
529
403
|
width: "24",
|
|
530
404
|
height: "24",
|
|
@@ -534,22 +408,22 @@ function P({ title: e, description: t, showCloseButton: n = !0, className: r, ..
|
|
|
534
408
|
strokeWidth: "2",
|
|
535
409
|
strokeLinecap: "round",
|
|
536
410
|
strokeLinejoin: "round",
|
|
537
|
-
children: [/* @__PURE__ */
|
|
411
|
+
children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
|
|
538
412
|
})
|
|
539
413
|
})]
|
|
540
414
|
});
|
|
541
415
|
}
|
|
542
|
-
var
|
|
416
|
+
var ModalBody_module_default = { body: "_body_6i5xc_1" };
|
|
543
417
|
//#endregion
|
|
544
418
|
//#region src/components/modal/ModalBody.tsx
|
|
545
|
-
function
|
|
546
|
-
return /* @__PURE__ */
|
|
547
|
-
className: `${
|
|
548
|
-
...
|
|
549
|
-
children
|
|
419
|
+
function ModalBody({ children, className, ...props }) {
|
|
420
|
+
return /* @__PURE__ */ jsx("div", {
|
|
421
|
+
className: `${ModalBody_module_default.body} ${className || ""}`,
|
|
422
|
+
...props,
|
|
423
|
+
children
|
|
550
424
|
});
|
|
551
425
|
}
|
|
552
|
-
var
|
|
426
|
+
var ModalContent_module_default = {
|
|
553
427
|
content: "_content_5wshu_1",
|
|
554
428
|
sm: "_sm_5wshu_7",
|
|
555
429
|
md: "_md_5wshu_12",
|
|
@@ -558,24 +432,24 @@ var L = {
|
|
|
558
432
|
};
|
|
559
433
|
//#endregion
|
|
560
434
|
//#region src/components/modal/ModalContent.tsx
|
|
561
|
-
function
|
|
562
|
-
return /* @__PURE__ */
|
|
563
|
-
className: `${
|
|
564
|
-
...
|
|
565
|
-
children
|
|
435
|
+
function ModalContent({ children, width = "md", className, ...props }) {
|
|
436
|
+
return /* @__PURE__ */ jsx("div", {
|
|
437
|
+
className: `${ModalContent_module_default.content} ${ModalContent_module_default[width]} ${className || ""}`,
|
|
438
|
+
...props,
|
|
439
|
+
children
|
|
566
440
|
});
|
|
567
441
|
}
|
|
568
|
-
var
|
|
442
|
+
var ModalFooter_module_default = { footer: "_footer_1hqi4_1" };
|
|
569
443
|
//#endregion
|
|
570
444
|
//#region src/components/modal/ModalFooter.tsx
|
|
571
|
-
function
|
|
572
|
-
return /* @__PURE__ */
|
|
573
|
-
className: `${
|
|
574
|
-
...
|
|
575
|
-
children
|
|
445
|
+
function ModalFooter({ children, className, ...props }) {
|
|
446
|
+
return /* @__PURE__ */ jsx("div", {
|
|
447
|
+
className: `${ModalFooter_module_default.footer} ${className || ""}`,
|
|
448
|
+
...props,
|
|
449
|
+
children
|
|
576
450
|
});
|
|
577
451
|
}
|
|
578
|
-
var
|
|
452
|
+
var toast_module_default = {
|
|
579
453
|
"toast-container": "_toast-container_1rucc_1",
|
|
580
454
|
"toast-container--top-left": "_toast-container--top-left_1rucc_7",
|
|
581
455
|
"toast-container--top-center": "_toast-container--top-center_1rucc_12",
|
|
@@ -591,64 +465,77 @@ var z = {
|
|
|
591
465
|
"toast--error": "_toast--error_1rucc_128",
|
|
592
466
|
"toast--warning": "_toast--warning_1rucc_137",
|
|
593
467
|
"toast--info": "_toast--info_1rucc_146"
|
|
594
|
-
}
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
}
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
x:
|
|
636
|
-
y:
|
|
468
|
+
};
|
|
469
|
+
//#endregion
|
|
470
|
+
//#region src/components/toast/Toast.tsx
|
|
471
|
+
var Toast = ({ id, message, type, duration = 3e3, onClose, isGlobalPaused, onHoverChange, position, zIndex }) => {
|
|
472
|
+
const toastRef = useRef(null);
|
|
473
|
+
const timerRef = useRef(null);
|
|
474
|
+
const startTimeRef = useRef(Date.now());
|
|
475
|
+
const remainingTimeRef = useRef(duration);
|
|
476
|
+
const getAnimationValues = () => {
|
|
477
|
+
if (position.includes("right")) return {
|
|
478
|
+
from: {
|
|
479
|
+
x: 400,
|
|
480
|
+
y: 0
|
|
481
|
+
},
|
|
482
|
+
to: {
|
|
483
|
+
x: 400,
|
|
484
|
+
y: 0
|
|
485
|
+
}
|
|
486
|
+
};
|
|
487
|
+
else if (position.includes("left")) return {
|
|
488
|
+
from: {
|
|
489
|
+
x: -400,
|
|
490
|
+
y: 0
|
|
491
|
+
},
|
|
492
|
+
to: {
|
|
493
|
+
x: -400,
|
|
494
|
+
y: 0
|
|
495
|
+
}
|
|
496
|
+
};
|
|
497
|
+
else if (position.includes("top")) return {
|
|
498
|
+
from: {
|
|
499
|
+
x: 0,
|
|
500
|
+
y: -100
|
|
501
|
+
},
|
|
502
|
+
to: {
|
|
503
|
+
x: 0,
|
|
504
|
+
y: -100
|
|
505
|
+
}
|
|
506
|
+
};
|
|
507
|
+
else return {
|
|
508
|
+
from: {
|
|
509
|
+
x: 0,
|
|
510
|
+
y: 100
|
|
511
|
+
},
|
|
512
|
+
to: {
|
|
513
|
+
x: 0,
|
|
514
|
+
y: 100
|
|
515
|
+
}
|
|
516
|
+
};
|
|
517
|
+
};
|
|
518
|
+
const handleClose = () => {
|
|
519
|
+
if (toastRef.current) {
|
|
520
|
+
const animValues = getAnimationValues();
|
|
521
|
+
gsap$1.to(toastRef.current, {
|
|
522
|
+
x: animValues.to.x,
|
|
523
|
+
y: animValues.to.y,
|
|
637
524
|
opacity: 0,
|
|
638
525
|
duration: .3,
|
|
639
526
|
ease: "power2.in",
|
|
640
527
|
onComplete: () => {
|
|
641
|
-
|
|
528
|
+
onClose(id);
|
|
642
529
|
}
|
|
643
530
|
});
|
|
644
531
|
}
|
|
645
532
|
};
|
|
646
|
-
|
|
647
|
-
if (
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
x:
|
|
651
|
-
y:
|
|
533
|
+
useEffect(() => {
|
|
534
|
+
if (toastRef.current) {
|
|
535
|
+
const animValues = getAnimationValues();
|
|
536
|
+
gsap$1.fromTo(toastRef.current, {
|
|
537
|
+
x: animValues.from.x,
|
|
538
|
+
y: animValues.from.y,
|
|
652
539
|
opacity: 0
|
|
653
540
|
}, {
|
|
654
541
|
x: 0,
|
|
@@ -658,22 +545,27 @@ var z = {
|
|
|
658
545
|
ease: "power2.out"
|
|
659
546
|
});
|
|
660
547
|
}
|
|
661
|
-
}, [])
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
548
|
+
}, []);
|
|
549
|
+
useEffect(() => {
|
|
550
|
+
if (isGlobalPaused) {
|
|
551
|
+
if (timerRef.current) {
|
|
552
|
+
clearTimeout(timerRef.current);
|
|
553
|
+
timerRef.current = null;
|
|
554
|
+
const elapsed = Date.now() - startTimeRef.current;
|
|
555
|
+
remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
|
|
667
556
|
}
|
|
668
|
-
} else
|
|
669
|
-
|
|
670
|
-
|
|
557
|
+
} else {
|
|
558
|
+
startTimeRef.current = Date.now();
|
|
559
|
+
timerRef.current = setTimeout(() => {
|
|
560
|
+
handleClose();
|
|
561
|
+
}, remainingTimeRef.current);
|
|
562
|
+
}
|
|
671
563
|
return () => {
|
|
672
|
-
|
|
564
|
+
if (timerRef.current) clearTimeout(timerRef.current);
|
|
673
565
|
};
|
|
674
|
-
}, [
|
|
675
|
-
|
|
676
|
-
success: /* @__PURE__ */
|
|
566
|
+
}, [isGlobalPaused]);
|
|
567
|
+
const icons = {
|
|
568
|
+
success: /* @__PURE__ */ jsxs("svg", {
|
|
677
569
|
xmlns: "http://www.w3.org/2000/svg",
|
|
678
570
|
width: "24",
|
|
679
571
|
height: "24",
|
|
@@ -684,13 +576,13 @@ var z = {
|
|
|
684
576
|
"stroke-linecap": "round",
|
|
685
577
|
"stroke-linejoin": "round",
|
|
686
578
|
className: "lucide lucide-circle-check-icon lucide-circle-check",
|
|
687
|
-
children: [/* @__PURE__ */
|
|
579
|
+
children: [/* @__PURE__ */ jsx("circle", {
|
|
688
580
|
cx: "12",
|
|
689
581
|
cy: "12",
|
|
690
582
|
r: "10"
|
|
691
|
-
}), /* @__PURE__ */
|
|
583
|
+
}), /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })]
|
|
692
584
|
}),
|
|
693
|
-
error: /* @__PURE__ */
|
|
585
|
+
error: /* @__PURE__ */ jsxs("svg", {
|
|
694
586
|
xmlns: "http://www.w3.org/2000/svg",
|
|
695
587
|
width: "24",
|
|
696
588
|
height: "24",
|
|
@@ -702,16 +594,16 @@ var z = {
|
|
|
702
594
|
"stroke-linejoin": "round",
|
|
703
595
|
className: "lucide lucide-circle-x-icon lucide-circle-x",
|
|
704
596
|
children: [
|
|
705
|
-
/* @__PURE__ */
|
|
597
|
+
/* @__PURE__ */ jsx("circle", {
|
|
706
598
|
cx: "12",
|
|
707
599
|
cy: "12",
|
|
708
600
|
r: "10"
|
|
709
601
|
}),
|
|
710
|
-
/* @__PURE__ */
|
|
711
|
-
/* @__PURE__ */
|
|
602
|
+
/* @__PURE__ */ jsx("path", { d: "m15 9-6 6" }),
|
|
603
|
+
/* @__PURE__ */ jsx("path", { d: "m9 9 6 6" })
|
|
712
604
|
]
|
|
713
605
|
}),
|
|
714
|
-
warning: /* @__PURE__ */
|
|
606
|
+
warning: /* @__PURE__ */ jsxs("svg", {
|
|
715
607
|
xmlns: "http://www.w3.org/2000/svg",
|
|
716
608
|
width: "24",
|
|
717
609
|
height: "24",
|
|
@@ -723,12 +615,12 @@ var z = {
|
|
|
723
615
|
"stroke-linejoin": "round",
|
|
724
616
|
className: "lucide lucide-alert-triangle-icon lucide-alert-triangle",
|
|
725
617
|
children: [
|
|
726
|
-
/* @__PURE__ */
|
|
727
|
-
/* @__PURE__ */
|
|
728
|
-
/* @__PURE__ */
|
|
618
|
+
/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
|
|
619
|
+
/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
|
|
620
|
+
/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
|
|
729
621
|
]
|
|
730
622
|
}),
|
|
731
|
-
info: /* @__PURE__ */
|
|
623
|
+
info: /* @__PURE__ */ jsxs("svg", {
|
|
732
624
|
xmlns: "http://www.w3.org/2000/svg",
|
|
733
625
|
width: "24",
|
|
734
626
|
height: "24",
|
|
@@ -740,37 +632,37 @@ var z = {
|
|
|
740
632
|
"stroke-linejoin": "round",
|
|
741
633
|
className: "lucide lucide-info-icon lucide-info",
|
|
742
634
|
children: [
|
|
743
|
-
/* @__PURE__ */
|
|
635
|
+
/* @__PURE__ */ jsx("circle", {
|
|
744
636
|
cx: "12",
|
|
745
637
|
cy: "12",
|
|
746
638
|
r: "10"
|
|
747
639
|
}),
|
|
748
|
-
/* @__PURE__ */
|
|
749
|
-
/* @__PURE__ */
|
|
640
|
+
/* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
|
|
641
|
+
/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
|
|
750
642
|
]
|
|
751
643
|
})
|
|
752
644
|
};
|
|
753
|
-
return /* @__PURE__ */
|
|
754
|
-
ref:
|
|
755
|
-
className: `${
|
|
645
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
646
|
+
ref: toastRef,
|
|
647
|
+
className: `${toast_module_default.toast} ${toast_module_default[`toast--${type}`]}`,
|
|
756
648
|
role: "alert",
|
|
757
|
-
style: { zIndex
|
|
758
|
-
onMouseEnter: () =>
|
|
759
|
-
onMouseLeave: () =>
|
|
649
|
+
style: { zIndex },
|
|
650
|
+
onMouseEnter: () => onHoverChange(true),
|
|
651
|
+
onMouseLeave: () => onHoverChange(false),
|
|
760
652
|
children: [
|
|
761
|
-
/* @__PURE__ */
|
|
762
|
-
className:
|
|
763
|
-
children:
|
|
653
|
+
/* @__PURE__ */ jsx("span", {
|
|
654
|
+
className: toast_module_default.toast__icon,
|
|
655
|
+
children: icons[type]
|
|
764
656
|
}),
|
|
765
|
-
/* @__PURE__ */
|
|
766
|
-
className:
|
|
767
|
-
children:
|
|
657
|
+
/* @__PURE__ */ jsx("span", {
|
|
658
|
+
className: toast_module_default.toast__message,
|
|
659
|
+
children: message
|
|
768
660
|
}),
|
|
769
|
-
/* @__PURE__ */
|
|
770
|
-
className:
|
|
771
|
-
onClick:
|
|
661
|
+
/* @__PURE__ */ jsx("button", {
|
|
662
|
+
className: toast_module_default.toast__close,
|
|
663
|
+
onClick: handleClose,
|
|
772
664
|
"aria-label": "Close",
|
|
773
|
-
children: /* @__PURE__ */
|
|
665
|
+
children: /* @__PURE__ */ jsxs("svg", {
|
|
774
666
|
xmlns: "http://www.w3.org/2000/svg",
|
|
775
667
|
width: "24",
|
|
776
668
|
height: "24",
|
|
@@ -781,77 +673,101 @@ var z = {
|
|
|
781
673
|
"stroke-linecap": "round",
|
|
782
674
|
"stroke-linejoin": "round",
|
|
783
675
|
className: "lucide lucide-x-icon lucide-x",
|
|
784
|
-
children: [/* @__PURE__ */
|
|
676
|
+
children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
|
|
785
677
|
})
|
|
786
678
|
})
|
|
787
679
|
]
|
|
788
680
|
});
|
|
789
|
-
}
|
|
681
|
+
};
|
|
682
|
+
//#endregion
|
|
683
|
+
//#region src/components/toast/toastService.ts
|
|
684
|
+
var ToastEmitter = class {
|
|
790
685
|
constructor() {
|
|
791
686
|
this.listeners = [];
|
|
792
687
|
}
|
|
793
|
-
on(
|
|
794
|
-
this.listeners.push(
|
|
688
|
+
on(event, listener) {
|
|
689
|
+
this.listeners.push(listener);
|
|
795
690
|
}
|
|
796
|
-
off(
|
|
797
|
-
this.listeners = this.listeners.filter((
|
|
691
|
+
off(event, listener) {
|
|
692
|
+
this.listeners = this.listeners.filter((l) => l !== listener);
|
|
798
693
|
}
|
|
799
|
-
emit(
|
|
800
|
-
this.listeners.forEach((
|
|
694
|
+
emit(event, toast) {
|
|
695
|
+
this.listeners.forEach((listener) => listener(toast));
|
|
801
696
|
}
|
|
802
|
-
}
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
697
|
+
};
|
|
698
|
+
var toastEmitter = new ToastEmitter();
|
|
699
|
+
var toastCounter = 0;
|
|
700
|
+
var showToast = (message, type, duration) => {
|
|
701
|
+
const id = `toast-${Date.now()}-${toastCounter++}`;
|
|
702
|
+
toastEmitter.emit("show", {
|
|
703
|
+
id,
|
|
704
|
+
message,
|
|
705
|
+
type,
|
|
706
|
+
duration
|
|
809
707
|
});
|
|
810
|
-
}
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
708
|
+
};
|
|
709
|
+
var toast = {
|
|
710
|
+
success: (message, duration) => showToast(message, "success", duration),
|
|
711
|
+
error: (message, duration) => showToast(message, "error", duration),
|
|
712
|
+
warning: (message, duration) => showToast(message, "warning", duration),
|
|
713
|
+
info: (message, duration) => showToast(message, "info", duration)
|
|
714
|
+
};
|
|
715
|
+
//#endregion
|
|
716
|
+
//#region src/components/toast/ToastContainer.tsx
|
|
717
|
+
var ToastContainer = ({ position = "top-right" }) => {
|
|
718
|
+
const [toasts, setToasts] = useState([]);
|
|
719
|
+
const [isGlobalPaused, setIsGlobalPaused] = useState(false);
|
|
720
|
+
const containerRef = useRef(null);
|
|
721
|
+
const toastHeightWithGap = 76;
|
|
722
|
+
const isBottom = position.startsWith("bottom");
|
|
723
|
+
useEffect(() => {
|
|
724
|
+
const handleToast = (toast) => {
|
|
725
|
+
setToasts((prev) => {
|
|
726
|
+
if (isBottom) return [...prev, toast];
|
|
727
|
+
return [toast, ...prev];
|
|
728
|
+
});
|
|
820
729
|
};
|
|
821
|
-
|
|
822
|
-
|
|
730
|
+
toastEmitter.on("show", handleToast);
|
|
731
|
+
return () => {
|
|
732
|
+
toastEmitter.off("show", handleToast);
|
|
823
733
|
};
|
|
824
|
-
}, [
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
734
|
+
}, [isBottom]);
|
|
735
|
+
useEffect(() => {
|
|
736
|
+
if (!containerRef.current) return;
|
|
737
|
+
const toastElements = containerRef.current.querySelectorAll(`.${toast_module_default.toast}`);
|
|
738
|
+
toastElements.forEach((element, index) => {
|
|
739
|
+
const htmlElement = element;
|
|
740
|
+
let targetY;
|
|
741
|
+
if (isBottom) targetY = -(toastElements.length - 1 - index) * toastHeightWithGap;
|
|
742
|
+
else targetY = index * toastHeightWithGap;
|
|
743
|
+
if (gsap$1.getProperty(htmlElement, "y") !== targetY) gsap$1.to(htmlElement, {
|
|
744
|
+
y: targetY,
|
|
831
745
|
duration: .3,
|
|
832
746
|
ease: "power2.out"
|
|
833
747
|
});
|
|
834
748
|
});
|
|
835
|
-
}, [
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
}
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
749
|
+
}, [toasts, isBottom]);
|
|
750
|
+
const handleClose = (id) => {
|
|
751
|
+
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
752
|
+
};
|
|
753
|
+
const positionClass = toast_module_default[`toast-container--${position}`];
|
|
754
|
+
return /* @__PURE__ */ jsx("div", {
|
|
755
|
+
ref: containerRef,
|
|
756
|
+
className: `${toast_module_default["toast-container"]} ${positionClass}`,
|
|
757
|
+
children: toasts.map((toast, index) => /* @__PURE__ */ jsx(Toast, {
|
|
758
|
+
id: toast.id,
|
|
759
|
+
message: toast.message,
|
|
760
|
+
type: toast.type,
|
|
761
|
+
duration: toast.duration,
|
|
762
|
+
onClose: handleClose,
|
|
763
|
+
isGlobalPaused,
|
|
764
|
+
onHoverChange: setIsGlobalPaused,
|
|
765
|
+
position,
|
|
766
|
+
zIndex: toasts.length - index
|
|
767
|
+
}, toast.id))
|
|
853
768
|
});
|
|
854
|
-
}
|
|
769
|
+
};
|
|
770
|
+
var OTPInput_module_default = {
|
|
855
771
|
otpContainer: "_otpContainer_vqdff_1",
|
|
856
772
|
otpInput: "_otpInput_vqdff_8",
|
|
857
773
|
filled: "_filled_vqdff_31",
|
|
@@ -862,71 +778,108 @@ var z = {
|
|
|
862
778
|
};
|
|
863
779
|
//#endregion
|
|
864
780
|
//#region src/components/otp/OTPInput.tsx
|
|
865
|
-
function
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
781
|
+
function OTPInput({ length = 6, type = "number", onChange, onComplete, size = "lg", disabled = false, autoFocus = false, value: controlledValue, className, ...props }) {
|
|
782
|
+
const [otp, setOtp] = useState(Array(length).fill(""));
|
|
783
|
+
const inputRefs = useRef([]);
|
|
784
|
+
useEffect(() => {
|
|
785
|
+
if (controlledValue !== void 0) {
|
|
786
|
+
const newOtp = controlledValue.split("").slice(0, length);
|
|
787
|
+
setOtp([...newOtp, ...Array(length - newOtp.length).fill("")]);
|
|
871
788
|
}
|
|
872
|
-
}, [
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
if (
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
789
|
+
}, [controlledValue, length]);
|
|
790
|
+
useEffect(() => {
|
|
791
|
+
if (autoFocus && inputRefs.current[0]) inputRefs.current[0].focus();
|
|
792
|
+
}, [autoFocus]);
|
|
793
|
+
const validateInput = (char) => {
|
|
794
|
+
if (type === "number") return /^\d$/.test(char);
|
|
795
|
+
else if (type === "text") return /^[a-zA-Z]$/.test(char);
|
|
796
|
+
else if (type === "alphanumeric") return /^[a-zA-Z0-9]$/.test(char);
|
|
797
|
+
return false;
|
|
798
|
+
};
|
|
799
|
+
const handleChange = (index, value) => {
|
|
800
|
+
if (disabled) return;
|
|
801
|
+
const char = value.slice(-1);
|
|
802
|
+
if (value === "" || validateInput(char)) {
|
|
803
|
+
const newOtp = [...otp];
|
|
804
|
+
newOtp[index] = char.toUpperCase();
|
|
805
|
+
setOtp(newOtp);
|
|
806
|
+
const otpValue = newOtp.join("");
|
|
807
|
+
onChange?.(otpValue);
|
|
808
|
+
if (char && index < length - 1) inputRefs.current[index + 1]?.focus();
|
|
809
|
+
if (otpValue.length === length && newOtp.every((digit) => digit !== "")) onComplete?.(otpValue);
|
|
883
810
|
}
|
|
884
|
-
}
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
811
|
+
};
|
|
812
|
+
const handleKeyDown = (index, e) => {
|
|
813
|
+
if (disabled) return;
|
|
814
|
+
if (e.key === "Backspace") {
|
|
815
|
+
e.preventDefault();
|
|
816
|
+
const newOtp = [...otp];
|
|
817
|
+
if (otp[index]) {
|
|
818
|
+
newOtp[index] = "";
|
|
819
|
+
setOtp(newOtp);
|
|
820
|
+
onChange?.(newOtp.join(""));
|
|
821
|
+
} else if (index > 0) {
|
|
822
|
+
newOtp[index - 1] = "";
|
|
823
|
+
setOtp(newOtp);
|
|
824
|
+
onChange?.(newOtp.join(""));
|
|
825
|
+
inputRefs.current[index - 1]?.focus();
|
|
896
826
|
}
|
|
827
|
+
} else if (e.key === "ArrowLeft" && index > 0) {
|
|
828
|
+
e.preventDefault();
|
|
829
|
+
inputRefs.current[index - 1]?.focus();
|
|
830
|
+
} else if (e.key === "ArrowRight" && index < length - 1) {
|
|
831
|
+
e.preventDefault();
|
|
832
|
+
inputRefs.current[index + 1]?.focus();
|
|
833
|
+
} else if (e.key === "Delete") {
|
|
834
|
+
e.preventDefault();
|
|
835
|
+
const newOtp = [...otp];
|
|
836
|
+
newOtp[index] = "";
|
|
837
|
+
setOtp(newOtp);
|
|
838
|
+
onChange?.(newOtp.join(""));
|
|
839
|
+
}
|
|
840
|
+
};
|
|
841
|
+
const handlePaste = (e) => {
|
|
842
|
+
e.preventDefault();
|
|
843
|
+
if (disabled) return;
|
|
844
|
+
const pastedData = e.clipboardData.getData("text/plain").slice(0, length);
|
|
845
|
+
const newOtp = [...otp];
|
|
846
|
+
let validChars = 0;
|
|
847
|
+
for (let i = 0; i < pastedData.length; i++) if (validateInput(pastedData[i])) {
|
|
848
|
+
newOtp[i] = pastedData[i].toUpperCase();
|
|
849
|
+
validChars++;
|
|
897
850
|
}
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
return /* @__PURE__ */
|
|
909
|
-
className: `${
|
|
910
|
-
...
|
|
911
|
-
children:
|
|
912
|
-
ref: (
|
|
913
|
-
|
|
851
|
+
setOtp(newOtp);
|
|
852
|
+
onChange?.(newOtp.join(""));
|
|
853
|
+
const nextIndex = Math.min(validChars, length - 1);
|
|
854
|
+
inputRefs.current[nextIndex]?.focus();
|
|
855
|
+
if (newOtp.every((digit) => digit !== "")) onComplete?.(newOtp.join(""));
|
|
856
|
+
};
|
|
857
|
+
const handleFocus = (index) => {
|
|
858
|
+
inputRefs.current[index]?.select();
|
|
859
|
+
};
|
|
860
|
+
const sizeClass = size ? OTPInput_module_default[size] : "";
|
|
861
|
+
return /* @__PURE__ */ jsx("div", {
|
|
862
|
+
className: `${OTPInput_module_default.otpContainer} ${sizeClass} ${className || ""}`,
|
|
863
|
+
...props,
|
|
864
|
+
children: otp.map((digit, index) => /* @__PURE__ */ jsx("input", {
|
|
865
|
+
ref: (el) => {
|
|
866
|
+
inputRefs.current[index] = el;
|
|
914
867
|
},
|
|
915
868
|
type: "text",
|
|
916
|
-
inputMode:
|
|
869
|
+
inputMode: type === "number" ? "numeric" : "text",
|
|
917
870
|
maxLength: 1,
|
|
918
|
-
value:
|
|
919
|
-
onChange: (e) =>
|
|
920
|
-
onKeyDown: (e) =>
|
|
921
|
-
onPaste:
|
|
922
|
-
onFocus: () =>
|
|
923
|
-
disabled
|
|
924
|
-
className: `${
|
|
925
|
-
"aria-label": `Dígito ${
|
|
926
|
-
},
|
|
871
|
+
value: digit,
|
|
872
|
+
onChange: (e) => handleChange(index, e.target.value),
|
|
873
|
+
onKeyDown: (e) => handleKeyDown(index, e),
|
|
874
|
+
onPaste: handlePaste,
|
|
875
|
+
onFocus: () => handleFocus(index),
|
|
876
|
+
disabled,
|
|
877
|
+
className: `${OTPInput_module_default.otpInput} ${digit ? OTPInput_module_default.filled : ""} ${disabled ? OTPInput_module_default.disabled : ""}`,
|
|
878
|
+
"aria-label": `Dígito ${index + 1} de ${length}`
|
|
879
|
+
}, index))
|
|
927
880
|
});
|
|
928
881
|
}
|
|
929
|
-
var
|
|
882
|
+
var Accordion_module_default = {
|
|
930
883
|
accordion: "_accordion_p5xc9_1",
|
|
931
884
|
accordionItem: "_accordionItem_p5xc9_8",
|
|
932
885
|
open: "_open_p5xc9_16",
|
|
@@ -938,64 +891,82 @@ var U = {
|
|
|
938
891
|
sm: "_sm_p5xc9_71",
|
|
939
892
|
lg: "_lg_p5xc9_89",
|
|
940
893
|
xl: "_xl_p5xc9_103"
|
|
941
|
-
}
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
894
|
+
};
|
|
895
|
+
//#endregion
|
|
896
|
+
//#region src/components/accordion/Accordion.tsx
|
|
897
|
+
var AccordionContext = createContext(void 0);
|
|
898
|
+
function Accordion({ children, multiple = false, defaultValue, size = "lg", className, ...props }) {
|
|
899
|
+
const [openItems, setOpenItems] = useState(() => {
|
|
900
|
+
if (defaultValue) return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
|
|
901
|
+
return [];
|
|
902
|
+
});
|
|
903
|
+
const toggleItem = (value) => {
|
|
904
|
+
setOpenItems((prev) => {
|
|
905
|
+
if (prev.includes(value)) return prev.filter((item) => item !== value);
|
|
906
|
+
else return multiple ? [...prev, value] : [value];
|
|
907
|
+
});
|
|
908
|
+
};
|
|
909
|
+
const sizeClass = size ? Accordion_module_default[size] : "";
|
|
910
|
+
return /* @__PURE__ */ jsx(AccordionContext.Provider, {
|
|
947
911
|
value: {
|
|
948
|
-
openItems
|
|
949
|
-
toggleItem
|
|
950
|
-
multiple
|
|
912
|
+
openItems,
|
|
913
|
+
toggleItem,
|
|
914
|
+
multiple
|
|
951
915
|
},
|
|
952
|
-
children: /* @__PURE__ */
|
|
953
|
-
className: `${
|
|
954
|
-
...
|
|
955
|
-
children
|
|
916
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
917
|
+
className: `${Accordion_module_default.accordion} ${sizeClass} ${className || ""}`,
|
|
918
|
+
...props,
|
|
919
|
+
children
|
|
956
920
|
})
|
|
957
921
|
});
|
|
958
922
|
}
|
|
959
|
-
function
|
|
960
|
-
|
|
961
|
-
if (!
|
|
962
|
-
return
|
|
923
|
+
function useAccordionContext() {
|
|
924
|
+
const context = useContext(AccordionContext);
|
|
925
|
+
if (!context) throw new Error("Accordion components must be used within an Accordion");
|
|
926
|
+
return context;
|
|
963
927
|
}
|
|
964
928
|
//#endregion
|
|
965
929
|
//#region src/components/accordion/AccordionItem.tsx
|
|
966
|
-
function
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
"
|
|
971
|
-
|
|
972
|
-
|
|
930
|
+
function AccordionItem({ value, children, className, ...props }) {
|
|
931
|
+
const { openItems } = useAccordionContext();
|
|
932
|
+
const isOpen = openItems.includes(value);
|
|
933
|
+
return /* @__PURE__ */ jsx("div", {
|
|
934
|
+
className: `${Accordion_module_default.accordionItem} ${isOpen ? Accordion_module_default.open : ""} ${className || ""}`,
|
|
935
|
+
"data-value": value,
|
|
936
|
+
...props,
|
|
937
|
+
children
|
|
973
938
|
});
|
|
974
939
|
}
|
|
975
|
-
function
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
940
|
+
function AccordionTrigger({ children, icon, className, ...props }) {
|
|
941
|
+
const { openItems, toggleItem } = useAccordionContext();
|
|
942
|
+
const triggerRef = useRef(null);
|
|
943
|
+
const iconRef = useRef(null);
|
|
944
|
+
const value = triggerRef.current?.closest("[data-value]")?.getAttribute("data-value") || "";
|
|
945
|
+
const isOpen = openItems.includes(value);
|
|
946
|
+
useEffect(() => {
|
|
947
|
+
if (iconRef.current) gsap.to(iconRef.current, {
|
|
948
|
+
rotation: isOpen ? 180 : 0,
|
|
980
949
|
duration: .3,
|
|
981
950
|
ease: "power2.out"
|
|
982
951
|
});
|
|
983
|
-
}, [
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
952
|
+
}, [isOpen]);
|
|
953
|
+
const handleClick = () => {
|
|
954
|
+
const itemValue = triggerRef.current?.closest("[data-value]")?.getAttribute("data-value");
|
|
955
|
+
if (itemValue) toggleItem(itemValue);
|
|
956
|
+
};
|
|
957
|
+
return /* @__PURE__ */ jsxs("button", {
|
|
958
|
+
ref: triggerRef,
|
|
959
|
+
className: `${Accordion_module_default.accordionTrigger} ${className || ""}`,
|
|
960
|
+
onClick: handleClick,
|
|
990
961
|
type: "button",
|
|
991
|
-
...
|
|
992
|
-
children: [/* @__PURE__ */
|
|
993
|
-
className:
|
|
994
|
-
children
|
|
995
|
-
}), /* @__PURE__ */
|
|
996
|
-
ref:
|
|
997
|
-
className:
|
|
998
|
-
children:
|
|
962
|
+
...props,
|
|
963
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
964
|
+
className: Accordion_module_default.triggerText,
|
|
965
|
+
children
|
|
966
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
967
|
+
ref: iconRef,
|
|
968
|
+
className: Accordion_module_default.triggerIcon,
|
|
969
|
+
children: icon || /* @__PURE__ */ jsx("svg", {
|
|
999
970
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1000
971
|
width: "20",
|
|
1001
972
|
height: "20",
|
|
@@ -1005,87 +976,112 @@ function le({ children: e, icon: t, className: n, ...r }) {
|
|
|
1005
976
|
strokeWidth: "2",
|
|
1006
977
|
strokeLinecap: "round",
|
|
1007
978
|
strokeLinejoin: "round",
|
|
1008
|
-
children: /* @__PURE__ */
|
|
979
|
+
children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
|
|
1009
980
|
})
|
|
1010
981
|
})]
|
|
1011
982
|
});
|
|
1012
983
|
}
|
|
1013
|
-
function
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
984
|
+
function AccordionContent({ children, className, ...props }) {
|
|
985
|
+
const { openItems } = useAccordionContext();
|
|
986
|
+
const contentRef = useRef(null);
|
|
987
|
+
const innerRef = useRef(null);
|
|
988
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
989
|
+
const isFirstRender = useRef(true);
|
|
990
|
+
useEffect(() => {
|
|
991
|
+
const content = contentRef.current;
|
|
992
|
+
const inner = innerRef.current;
|
|
993
|
+
if (!content || !inner) return;
|
|
994
|
+
const value = content.closest("[data-value]")?.getAttribute("data-value") || "";
|
|
995
|
+
const newIsOpen = openItems.includes(value);
|
|
996
|
+
if (isFirstRender.current) {
|
|
997
|
+
isFirstRender.current = false;
|
|
998
|
+
setIsOpen(newIsOpen);
|
|
999
|
+
if (newIsOpen) {
|
|
1000
|
+
content.style.height = "auto";
|
|
1001
|
+
content.style.overflow = "visible";
|
|
1002
|
+
gsap.set(inner, {
|
|
1003
|
+
opacity: 1,
|
|
1004
|
+
y: 0
|
|
1005
|
+
});
|
|
1006
|
+
} else {
|
|
1007
|
+
content.style.height = "0";
|
|
1008
|
+
gsap.set(inner, {
|
|
1009
|
+
opacity: 0,
|
|
1010
|
+
y: -10
|
|
1011
|
+
});
|
|
1012
|
+
}
|
|
1027
1013
|
return;
|
|
1028
1014
|
}
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1015
|
+
if (newIsOpen !== isOpen) {
|
|
1016
|
+
setIsOpen(newIsOpen);
|
|
1017
|
+
if (newIsOpen) {
|
|
1018
|
+
gsap.to(content, {
|
|
1019
|
+
height: "auto",
|
|
1020
|
+
duration: .4,
|
|
1021
|
+
ease: "power2.out",
|
|
1022
|
+
onStart: () => {
|
|
1023
|
+
content.style.overflow = "hidden";
|
|
1024
|
+
},
|
|
1025
|
+
onComplete: () => {
|
|
1026
|
+
content.style.overflow = "visible";
|
|
1027
|
+
}
|
|
1028
|
+
});
|
|
1029
|
+
gsap.fromTo(inner, {
|
|
1030
|
+
opacity: 0,
|
|
1031
|
+
y: -10
|
|
1032
|
+
}, {
|
|
1033
|
+
opacity: 1,
|
|
1034
|
+
y: 0,
|
|
1035
|
+
duration: .3,
|
|
1036
|
+
delay: .1,
|
|
1037
|
+
ease: "power2.out"
|
|
1038
|
+
});
|
|
1039
|
+
} else {
|
|
1040
|
+
gsap.to(content, {
|
|
1041
|
+
height: 0,
|
|
1042
|
+
duration: .3,
|
|
1043
|
+
ease: "power2.in",
|
|
1044
|
+
onStart: () => {
|
|
1045
|
+
content.style.overflow = "hidden";
|
|
1046
|
+
}
|
|
1047
|
+
});
|
|
1048
|
+
gsap.to(inner, {
|
|
1049
|
+
opacity: 0,
|
|
1050
|
+
y: -10,
|
|
1051
|
+
duration: .2,
|
|
1052
|
+
ease: "power2.in"
|
|
1053
|
+
});
|
|
1054
1054
|
}
|
|
1055
|
-
}
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
children: /* @__PURE__ */ (0, h.jsx)("div", {
|
|
1066
|
-
ref: c,
|
|
1067
|
-
className: U.accordionContentInner,
|
|
1068
|
-
children: e
|
|
1055
|
+
}
|
|
1056
|
+
}, [openItems, isOpen]);
|
|
1057
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1058
|
+
ref: contentRef,
|
|
1059
|
+
className: `${Accordion_module_default.accordionContent} ${className || ""}`,
|
|
1060
|
+
...props,
|
|
1061
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
1062
|
+
ref: innerRef,
|
|
1063
|
+
className: Accordion_module_default.accordionContentInner,
|
|
1064
|
+
children
|
|
1069
1065
|
})
|
|
1070
1066
|
});
|
|
1071
1067
|
}
|
|
1072
|
-
var
|
|
1068
|
+
var Badge_module_default = {
|
|
1073
1069
|
badge: "_badge_1p9t7_1",
|
|
1074
|
-
default: "_default_1p9t7_15",
|
|
1070
|
+
"default": "_default_1p9t7_15",
|
|
1075
1071
|
secondary: "_secondary_1p9t7_21",
|
|
1076
1072
|
destructive: "_destructive_1p9t7_27"
|
|
1077
1073
|
};
|
|
1078
1074
|
//#endregion
|
|
1079
1075
|
//#region src/components/badge/Badge.tsx
|
|
1080
|
-
function
|
|
1081
|
-
|
|
1082
|
-
return /* @__PURE__ */
|
|
1083
|
-
className: `${
|
|
1084
|
-
...
|
|
1085
|
-
children
|
|
1076
|
+
function Badge({ children, variant = "default", className, ...props }) {
|
|
1077
|
+
const variantClass = variant ? Badge_module_default[variant] : "";
|
|
1078
|
+
return /* @__PURE__ */ jsx("span", {
|
|
1079
|
+
className: `${Badge_module_default.badge} ${variantClass} ${className || ""}`,
|
|
1080
|
+
...props,
|
|
1081
|
+
children
|
|
1086
1082
|
});
|
|
1087
1083
|
}
|
|
1088
|
-
var
|
|
1084
|
+
var HoverCard_module_default = {
|
|
1089
1085
|
hoverCardWrapper: "_hoverCardWrapper_1cb8v_1",
|
|
1090
1086
|
trigger: "_trigger_1cb8v_7",
|
|
1091
1087
|
bridge: "_bridge_1cb8v_11",
|
|
@@ -1095,26 +1091,68 @@ var q = {
|
|
|
1095
1091
|
};
|
|
1096
1092
|
//#endregion
|
|
1097
1093
|
//#region src/components/hovercard/HoverCard.tsx
|
|
1098
|
-
function
|
|
1099
|
-
|
|
1100
|
-
|
|
1094
|
+
function HoverCard({ children, trigger, delay = 200, className, ...props }) {
|
|
1095
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
1096
|
+
const [shouldRender, setShouldRender] = useState(false);
|
|
1097
|
+
const [position, setPosition] = useState("bottom");
|
|
1098
|
+
const [horizontalOffset, setHorizontalOffset] = useState(0);
|
|
1099
|
+
const triggerRef = useRef(null);
|
|
1100
|
+
const cardRef = useRef(null);
|
|
1101
|
+
const timeoutRef = useRef(null);
|
|
1102
|
+
const closeTimeoutRef = useRef(null);
|
|
1103
|
+
const calculatePosition = () => {
|
|
1104
|
+
if (!triggerRef.current || !cardRef.current) return {
|
|
1101
1105
|
position: "bottom",
|
|
1102
1106
|
offset: 0
|
|
1103
1107
|
};
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1108
|
+
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
1109
|
+
const cardWidth = cardRef.current.offsetWidth;
|
|
1110
|
+
const cardHeight = cardRef.current.offsetHeight;
|
|
1111
|
+
const viewportHeight = window.innerHeight;
|
|
1112
|
+
const viewportWidth = window.innerWidth;
|
|
1113
|
+
const spaceBelow = viewportHeight - triggerRect.bottom;
|
|
1114
|
+
const spaceAbove = triggerRect.top;
|
|
1115
|
+
let verticalPosition = "bottom";
|
|
1116
|
+
if (spaceBelow >= cardHeight + 10) verticalPosition = "bottom";
|
|
1117
|
+
else if (spaceAbove >= cardHeight + 10) verticalPosition = "top";
|
|
1118
|
+
else verticalPosition = "bottom";
|
|
1119
|
+
const triggerCenter = triggerRect.left + triggerRect.width / 2;
|
|
1120
|
+
const cardHalfWidth = cardWidth / 2;
|
|
1121
|
+
let offset = 0;
|
|
1122
|
+
const idealLeft = triggerCenter - cardHalfWidth;
|
|
1123
|
+
const idealRight = triggerCenter + cardHalfWidth;
|
|
1124
|
+
if (idealLeft < 10) offset = 10 - idealLeft;
|
|
1125
|
+
else if (idealRight > viewportWidth - 10) offset = viewportWidth - 10 - idealRight;
|
|
1126
|
+
return {
|
|
1127
|
+
position: verticalPosition,
|
|
1128
|
+
offset
|
|
1110
1129
|
};
|
|
1111
1130
|
};
|
|
1112
|
-
|
|
1113
|
-
if (
|
|
1114
|
-
|
|
1115
|
-
|
|
1131
|
+
const handleMouseEnter = () => {
|
|
1132
|
+
if (closeTimeoutRef.current) {
|
|
1133
|
+
clearTimeout(closeTimeoutRef.current);
|
|
1134
|
+
closeTimeoutRef.current = null;
|
|
1135
|
+
}
|
|
1136
|
+
timeoutRef.current = setTimeout(() => {
|
|
1137
|
+
setShouldRender(true);
|
|
1138
|
+
setIsOpen(true);
|
|
1139
|
+
}, delay);
|
|
1140
|
+
};
|
|
1141
|
+
const handleMouseLeave = () => {
|
|
1142
|
+
if (timeoutRef.current) {
|
|
1143
|
+
clearTimeout(timeoutRef.current);
|
|
1144
|
+
timeoutRef.current = null;
|
|
1145
|
+
}
|
|
1146
|
+
setIsOpen(false);
|
|
1147
|
+
};
|
|
1148
|
+
useEffect(() => {
|
|
1149
|
+
if (isOpen && cardRef.current) {
|
|
1150
|
+
const { position: newPosition, offset } = calculatePosition();
|
|
1151
|
+
setPosition(newPosition);
|
|
1152
|
+
setHorizontalOffset(offset);
|
|
1153
|
+
gsap.fromTo(cardRef.current, {
|
|
1116
1154
|
opacity: 0,
|
|
1117
|
-
y:
|
|
1155
|
+
y: newPosition === "bottom" ? -10 : 10,
|
|
1118
1156
|
scale: .95
|
|
1119
1157
|
}, {
|
|
1120
1158
|
opacity: 1,
|
|
@@ -1123,43 +1161,42 @@ function fe({ children: e, trigger: t, delay: n = 200, className: r, ...i }) {
|
|
|
1123
1161
|
duration: .2,
|
|
1124
1162
|
ease: "power2.out"
|
|
1125
1163
|
});
|
|
1126
|
-
} else !
|
|
1164
|
+
} else if (!isOpen && cardRef.current) gsap.to(cardRef.current, {
|
|
1127
1165
|
opacity: 0,
|
|
1128
|
-
y:
|
|
1166
|
+
y: position === "bottom" ? -10 : 10,
|
|
1129
1167
|
scale: .95,
|
|
1130
1168
|
duration: .15,
|
|
1131
1169
|
ease: "power2.in",
|
|
1132
1170
|
onComplete: () => {
|
|
1133
|
-
|
|
1171
|
+
setShouldRender(false);
|
|
1134
1172
|
}
|
|
1135
1173
|
});
|
|
1136
|
-
}, [
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
}
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
style: { transform: `translateX(calc(-50% + ${g}px))` },
|
|
1174
|
+
}, [isOpen, position]);
|
|
1175
|
+
useEffect(() => {
|
|
1176
|
+
return () => {
|
|
1177
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
1178
|
+
if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
|
|
1179
|
+
};
|
|
1180
|
+
}, []);
|
|
1181
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
1182
|
+
className: `${HoverCard_module_default.hoverCardWrapper} ${className || ""}`,
|
|
1183
|
+
onMouseEnter: handleMouseEnter,
|
|
1184
|
+
onMouseLeave: handleMouseLeave,
|
|
1185
|
+
...props,
|
|
1186
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
1187
|
+
ref: triggerRef,
|
|
1188
|
+
className: HoverCard_module_default.trigger,
|
|
1189
|
+
children: trigger
|
|
1190
|
+
}), shouldRender && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: `${HoverCard_module_default.bridge} ${HoverCard_module_default[position]}` }), /* @__PURE__ */ jsx("div", {
|
|
1191
|
+
ref: cardRef,
|
|
1192
|
+
className: `${HoverCard_module_default.hoverCard} ${HoverCard_module_default[position]}`,
|
|
1193
|
+
style: { transform: `translateX(calc(-50% + ${horizontalOffset}px))` },
|
|
1157
1194
|
role: "tooltip",
|
|
1158
|
-
children
|
|
1195
|
+
children
|
|
1159
1196
|
})] })]
|
|
1160
1197
|
});
|
|
1161
1198
|
}
|
|
1162
|
-
var
|
|
1199
|
+
var Checkbox_module_default = {
|
|
1163
1200
|
checkboxWrapper: "_checkboxWrapper_1owy4_1",
|
|
1164
1201
|
hiddenInput: "_hiddenInput_1owy4_7",
|
|
1165
1202
|
checkboxLabel: "_checkboxLabel_1owy4_15",
|
|
@@ -1171,75 +1208,90 @@ var J = {
|
|
|
1171
1208
|
};
|
|
1172
1209
|
//#endregion
|
|
1173
1210
|
//#region src/components/checkbox/Checkbox.tsx
|
|
1174
|
-
function
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1211
|
+
function Checkbox({ checked: controlledChecked, defaultChecked = false, onChange, label, disabled = false, id, className, ...props }) {
|
|
1212
|
+
const [internalChecked, setInternalChecked] = useState(defaultChecked);
|
|
1213
|
+
const isControlled = controlledChecked !== void 0;
|
|
1214
|
+
const checked = isControlled ? controlledChecked : internalChecked;
|
|
1215
|
+
const checkboxRef = useRef(null);
|
|
1216
|
+
const checkmarkRef = useRef(null);
|
|
1217
|
+
const pathRef = useRef(null);
|
|
1218
|
+
const handleChange = () => {
|
|
1219
|
+
if (disabled) return;
|
|
1220
|
+
const newChecked = !checked;
|
|
1221
|
+
if (!isControlled) setInternalChecked(newChecked);
|
|
1222
|
+
onChange?.(newChecked);
|
|
1179
1223
|
};
|
|
1180
|
-
|
|
1181
|
-
!
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
}
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1224
|
+
useEffect(() => {
|
|
1225
|
+
if (!checkboxRef.current || !checkmarkRef.current || !pathRef.current) return;
|
|
1226
|
+
if (checked) {
|
|
1227
|
+
gsap.to(checkboxRef.current, {
|
|
1228
|
+
scale: .9,
|
|
1229
|
+
duration: .1,
|
|
1230
|
+
ease: "power2.in",
|
|
1231
|
+
onComplete: () => {
|
|
1232
|
+
gsap.to(checkboxRef.current, {
|
|
1233
|
+
scale: 1,
|
|
1234
|
+
duration: .2,
|
|
1235
|
+
ease: "elastic.out(1, 0.5)"
|
|
1236
|
+
});
|
|
1237
|
+
}
|
|
1238
|
+
});
|
|
1239
|
+
gsap.fromTo(checkmarkRef.current, {
|
|
1240
|
+
scale: 0,
|
|
1241
|
+
rotation: -45
|
|
1242
|
+
}, {
|
|
1243
|
+
scale: 1,
|
|
1244
|
+
rotation: 0,
|
|
1245
|
+
duration: .3,
|
|
1246
|
+
ease: "back.out(1.7)"
|
|
1247
|
+
});
|
|
1248
|
+
gsap.fromTo(pathRef.current, {
|
|
1249
|
+
strokeDasharray: 100,
|
|
1250
|
+
strokeDashoffset: 100
|
|
1251
|
+
}, {
|
|
1252
|
+
strokeDashoffset: 0,
|
|
1253
|
+
duration: .3,
|
|
1254
|
+
ease: "power2.out"
|
|
1255
|
+
});
|
|
1256
|
+
} else {
|
|
1257
|
+
gsap.to(checkmarkRef.current, {
|
|
1258
|
+
scale: 0,
|
|
1259
|
+
rotation: 45,
|
|
1260
|
+
duration: .2,
|
|
1261
|
+
ease: "back.in(1.7)"
|
|
1262
|
+
});
|
|
1263
|
+
gsap.to(checkboxRef.current, {
|
|
1264
|
+
scale: 1,
|
|
1265
|
+
duration: .2,
|
|
1266
|
+
ease: "power2.out"
|
|
1267
|
+
});
|
|
1268
|
+
}
|
|
1269
|
+
}, [checked]);
|
|
1270
|
+
const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
|
|
1271
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
1272
|
+
className: `${Checkbox_module_default.checkboxWrapper} ${disabled ? Checkbox_module_default.disabled : ""} ${className || ""}`,
|
|
1273
|
+
children: [/* @__PURE__ */ jsx("input", {
|
|
1222
1274
|
type: "checkbox",
|
|
1223
|
-
id:
|
|
1224
|
-
checked
|
|
1225
|
-
onChange:
|
|
1226
|
-
disabled
|
|
1227
|
-
className:
|
|
1228
|
-
...
|
|
1229
|
-
}), /* @__PURE__ */
|
|
1230
|
-
htmlFor:
|
|
1231
|
-
className:
|
|
1232
|
-
children: [/* @__PURE__ */
|
|
1233
|
-
ref:
|
|
1234
|
-
className: `${
|
|
1235
|
-
children: /* @__PURE__ */
|
|
1236
|
-
ref:
|
|
1237
|
-
className:
|
|
1275
|
+
id: checkboxId,
|
|
1276
|
+
checked,
|
|
1277
|
+
onChange: handleChange,
|
|
1278
|
+
disabled,
|
|
1279
|
+
className: Checkbox_module_default.hiddenInput,
|
|
1280
|
+
...props
|
|
1281
|
+
}), /* @__PURE__ */ jsxs("label", {
|
|
1282
|
+
htmlFor: checkboxId,
|
|
1283
|
+
className: Checkbox_module_default.checkboxLabel,
|
|
1284
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
1285
|
+
ref: checkboxRef,
|
|
1286
|
+
className: `${Checkbox_module_default.checkbox} ${checked ? Checkbox_module_default.checked : ""}`,
|
|
1287
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
1288
|
+
ref: checkmarkRef,
|
|
1289
|
+
className: Checkbox_module_default.checkmark,
|
|
1238
1290
|
viewBox: "0 0 24 24",
|
|
1239
1291
|
fill: "none",
|
|
1240
1292
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1241
|
-
children: /* @__PURE__ */
|
|
1242
|
-
ref:
|
|
1293
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
1294
|
+
ref: pathRef,
|
|
1243
1295
|
d: "M5 13l4 4L19 7",
|
|
1244
1296
|
stroke: "currentColor",
|
|
1245
1297
|
strokeWidth: "3",
|
|
@@ -1247,14 +1299,14 @@ function pe({ checked: e, defaultChecked: t = !1, onChange: n, label: r, disable
|
|
|
1247
1299
|
strokeLinejoin: "round"
|
|
1248
1300
|
})
|
|
1249
1301
|
})
|
|
1250
|
-
}),
|
|
1251
|
-
className:
|
|
1252
|
-
children:
|
|
1302
|
+
}), label && /* @__PURE__ */ jsx("span", {
|
|
1303
|
+
className: Checkbox_module_default.labelText,
|
|
1304
|
+
children: label
|
|
1253
1305
|
})]
|
|
1254
1306
|
})]
|
|
1255
1307
|
});
|
|
1256
1308
|
}
|
|
1257
|
-
var
|
|
1309
|
+
var DropdownMenu_module_default = {
|
|
1258
1310
|
dropdownWrapper: "_dropdownWrapper_iqkch_1",
|
|
1259
1311
|
trigger: "_trigger_iqkch_7",
|
|
1260
1312
|
dropdownMenu: "_dropdownMenu_iqkch_11",
|
|
@@ -1267,23 +1319,42 @@ var Y = {
|
|
|
1267
1319
|
arrowIcon: "_arrowIcon_iqkch_64",
|
|
1268
1320
|
subMenu: "_subMenu_iqkch_70",
|
|
1269
1321
|
separator: "_separator_iqkch_84"
|
|
1270
|
-
}
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1322
|
+
};
|
|
1323
|
+
//#endregion
|
|
1324
|
+
//#region src/components/dropdown/DropdownMenu.tsx
|
|
1325
|
+
var DropdownContext = createContext(void 0);
|
|
1326
|
+
function DropdownMenu({ children, trigger, className, ...props }) {
|
|
1327
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
1328
|
+
const [shouldRender, setShouldRender] = useState(false);
|
|
1329
|
+
const [position, setPosition] = useState("bottom");
|
|
1330
|
+
const triggerRef = useRef(null);
|
|
1331
|
+
const menuRef = useRef(null);
|
|
1332
|
+
const calculatePosition = () => {
|
|
1333
|
+
if (!triggerRef.current || !menuRef.current) return "bottom";
|
|
1334
|
+
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
1335
|
+
const menuHeight = menuRef.current.offsetHeight;
|
|
1336
|
+
const spaceBelow = window.innerHeight - triggerRect.bottom;
|
|
1337
|
+
const spaceAbove = triggerRect.top;
|
|
1338
|
+
if (spaceBelow >= menuHeight + 10) return "bottom";
|
|
1339
|
+
else if (spaceAbove >= menuHeight + 10) return "top";
|
|
1340
|
+
else return "bottom";
|
|
1280
1341
|
};
|
|
1281
|
-
|
|
1282
|
-
if (
|
|
1283
|
-
|
|
1284
|
-
|
|
1342
|
+
const toggleMenu = () => {
|
|
1343
|
+
if (!isOpen) {
|
|
1344
|
+
setShouldRender(true);
|
|
1345
|
+
setIsOpen(true);
|
|
1346
|
+
} else setIsOpen(false);
|
|
1347
|
+
};
|
|
1348
|
+
const closeMenu = () => {
|
|
1349
|
+
setIsOpen(false);
|
|
1350
|
+
};
|
|
1351
|
+
useEffect(() => {
|
|
1352
|
+
if (isOpen && menuRef.current) {
|
|
1353
|
+
const newPosition = calculatePosition();
|
|
1354
|
+
setPosition(newPosition);
|
|
1355
|
+
gsap.fromTo(menuRef.current, {
|
|
1285
1356
|
opacity: 0,
|
|
1286
|
-
y:
|
|
1357
|
+
y: newPosition === "bottom" ? -10 : 10,
|
|
1287
1358
|
scale: .95
|
|
1288
1359
|
}, {
|
|
1289
1360
|
opacity: 1,
|
|
@@ -1292,53 +1363,78 @@ function me({ children: e, trigger: t, className: n, ...r }) {
|
|
|
1292
1363
|
duration: .2,
|
|
1293
1364
|
ease: "power2.out"
|
|
1294
1365
|
});
|
|
1295
|
-
} else !
|
|
1366
|
+
} else if (!isOpen && menuRef.current) gsap.to(menuRef.current, {
|
|
1296
1367
|
opacity: 0,
|
|
1297
|
-
y:
|
|
1368
|
+
y: position === "bottom" ? -10 : 10,
|
|
1298
1369
|
scale: .95,
|
|
1299
1370
|
duration: .15,
|
|
1300
1371
|
ease: "power2.in",
|
|
1301
1372
|
onComplete: () => {
|
|
1302
|
-
|
|
1373
|
+
setShouldRender(false);
|
|
1303
1374
|
}
|
|
1304
1375
|
});
|
|
1305
|
-
}, [
|
|
1306
|
-
|
|
1307
|
-
|
|
1376
|
+
}, [isOpen, position]);
|
|
1377
|
+
useEffect(() => {
|
|
1378
|
+
const handleClickOutside = (event) => {
|
|
1379
|
+
if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) closeMenu();
|
|
1308
1380
|
};
|
|
1309
|
-
|
|
1310
|
-
|
|
1381
|
+
if (isOpen) document.addEventListener("mousedown", handleClickOutside);
|
|
1382
|
+
return () => {
|
|
1383
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
1311
1384
|
};
|
|
1312
|
-
}, [
|
|
1385
|
+
}, [isOpen]);
|
|
1386
|
+
return /* @__PURE__ */ jsx(DropdownContext.Provider, {
|
|
1313
1387
|
value: {
|
|
1314
|
-
isOpen
|
|
1315
|
-
closeMenu
|
|
1388
|
+
isOpen,
|
|
1389
|
+
closeMenu
|
|
1316
1390
|
},
|
|
1317
|
-
children: /* @__PURE__ */
|
|
1318
|
-
className: `${
|
|
1319
|
-
...
|
|
1320
|
-
children: [/* @__PURE__ */
|
|
1321
|
-
ref:
|
|
1322
|
-
onClick:
|
|
1323
|
-
className:
|
|
1324
|
-
children:
|
|
1325
|
-
}),
|
|
1326
|
-
ref:
|
|
1327
|
-
className: `${
|
|
1328
|
-
children
|
|
1391
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
1392
|
+
className: `${DropdownMenu_module_default.dropdownWrapper} ${className || ""}`,
|
|
1393
|
+
...props,
|
|
1394
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
1395
|
+
ref: triggerRef,
|
|
1396
|
+
onClick: toggleMenu,
|
|
1397
|
+
className: DropdownMenu_module_default.trigger,
|
|
1398
|
+
children: trigger
|
|
1399
|
+
}), shouldRender && /* @__PURE__ */ jsx("div", {
|
|
1400
|
+
ref: menuRef,
|
|
1401
|
+
className: `${DropdownMenu_module_default.dropdownMenu} ${DropdownMenu_module_default[position]}`,
|
|
1402
|
+
children
|
|
1329
1403
|
})]
|
|
1330
1404
|
})
|
|
1331
1405
|
});
|
|
1332
1406
|
}
|
|
1333
|
-
function
|
|
1334
|
-
|
|
1335
|
-
if (!
|
|
1336
|
-
return
|
|
1407
|
+
function useDropdownContext() {
|
|
1408
|
+
const context = useContext(DropdownContext);
|
|
1409
|
+
if (!context) throw new Error("Dropdown components must be used within DropdownMenu");
|
|
1410
|
+
return context;
|
|
1337
1411
|
}
|
|
1338
|
-
function
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1412
|
+
function DropdownItem({ children, onClick, disabled = false, subItems, className, ...props }) {
|
|
1413
|
+
const { closeMenu } = useDropdownContext();
|
|
1414
|
+
const [showSubMenu, setShowSubMenu] = useState(false);
|
|
1415
|
+
const [shouldRenderSub, setShouldRenderSub] = useState(false);
|
|
1416
|
+
const itemRef = useRef(null);
|
|
1417
|
+
const subMenuRef = useRef(null);
|
|
1418
|
+
const hoverTimeoutRef = useRef(null);
|
|
1419
|
+
const handleClick = () => {
|
|
1420
|
+
if (disabled) return;
|
|
1421
|
+
if (!subItems) {
|
|
1422
|
+
onClick?.();
|
|
1423
|
+
closeMenu();
|
|
1424
|
+
}
|
|
1425
|
+
};
|
|
1426
|
+
const handleMouseEnter = () => {
|
|
1427
|
+
if (subItems && !disabled) hoverTimeoutRef.current = setTimeout(() => {
|
|
1428
|
+
setShouldRenderSub(true);
|
|
1429
|
+
setShowSubMenu(true);
|
|
1430
|
+
}, 150);
|
|
1431
|
+
};
|
|
1432
|
+
const handleMouseLeave = () => {
|
|
1433
|
+
if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
|
|
1434
|
+
setShowSubMenu(false);
|
|
1435
|
+
};
|
|
1436
|
+
useEffect(() => {
|
|
1437
|
+
if (showSubMenu && subMenuRef.current) gsap.fromTo(subMenuRef.current, {
|
|
1342
1438
|
opacity: 0,
|
|
1343
1439
|
x: -10,
|
|
1344
1440
|
scale: .95
|
|
@@ -1348,38 +1444,35 @@ function he({ children: e, onClick: t, disabled: n = !1, subItems: r, className:
|
|
|
1348
1444
|
scale: 1,
|
|
1349
1445
|
duration: .2,
|
|
1350
1446
|
ease: "power2.out"
|
|
1351
|
-
})
|
|
1447
|
+
});
|
|
1448
|
+
else if (!showSubMenu && subMenuRef.current) gsap.to(subMenuRef.current, {
|
|
1352
1449
|
opacity: 0,
|
|
1353
1450
|
x: -10,
|
|
1354
1451
|
scale: .95,
|
|
1355
1452
|
duration: .15,
|
|
1356
1453
|
ease: "power2.in",
|
|
1357
1454
|
onComplete: () => {
|
|
1358
|
-
|
|
1455
|
+
setShouldRenderSub(false);
|
|
1359
1456
|
}
|
|
1360
1457
|
});
|
|
1361
|
-
}, [
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
className: Y.itemContent,
|
|
1380
|
-
children: e
|
|
1381
|
-
}), r && /* @__PURE__ */ (0, h.jsxs)(h.Fragment, { children: [/* @__PURE__ */ (0, h.jsx)("svg", {
|
|
1382
|
-
className: Y.arrowIcon,
|
|
1458
|
+
}, [showSubMenu]);
|
|
1459
|
+
useEffect(() => {
|
|
1460
|
+
return () => {
|
|
1461
|
+
if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
|
|
1462
|
+
};
|
|
1463
|
+
}, []);
|
|
1464
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
1465
|
+
ref: itemRef,
|
|
1466
|
+
className: `${DropdownMenu_module_default.dropdownItem} ${disabled ? DropdownMenu_module_default.disabled : ""} ${subItems ? DropdownMenu_module_default.hasSubItems : ""} ${className || ""}`,
|
|
1467
|
+
onClick: handleClick,
|
|
1468
|
+
onMouseEnter: handleMouseEnter,
|
|
1469
|
+
onMouseLeave: handleMouseLeave,
|
|
1470
|
+
...props,
|
|
1471
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
1472
|
+
className: DropdownMenu_module_default.itemContent,
|
|
1473
|
+
children
|
|
1474
|
+
}), subItems && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("svg", {
|
|
1475
|
+
className: DropdownMenu_module_default.arrowIcon,
|
|
1383
1476
|
width: "16",
|
|
1384
1477
|
height: "16",
|
|
1385
1478
|
viewBox: "0 0 24 24",
|
|
@@ -1388,18 +1481,18 @@ function he({ children: e, onClick: t, disabled: n = !1, subItems: r, className:
|
|
|
1388
1481
|
strokeWidth: "2",
|
|
1389
1482
|
strokeLinecap: "round",
|
|
1390
1483
|
strokeLinejoin: "round",
|
|
1391
|
-
children: /* @__PURE__ */
|
|
1392
|
-
}),
|
|
1393
|
-
ref:
|
|
1394
|
-
className:
|
|
1395
|
-
children:
|
|
1484
|
+
children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
|
|
1485
|
+
}), shouldRenderSub && /* @__PURE__ */ jsx("div", {
|
|
1486
|
+
ref: subMenuRef,
|
|
1487
|
+
className: DropdownMenu_module_default.subMenu,
|
|
1488
|
+
children: subItems
|
|
1396
1489
|
})] })]
|
|
1397
1490
|
});
|
|
1398
1491
|
}
|
|
1399
|
-
function
|
|
1400
|
-
return /* @__PURE__ */
|
|
1492
|
+
function DropdownSeparator({}) {
|
|
1493
|
+
return /* @__PURE__ */ jsx("div", { className: DropdownMenu_module_default.separator });
|
|
1401
1494
|
}
|
|
1402
|
-
var
|
|
1495
|
+
var Tabs_module_default = {
|
|
1403
1496
|
tabsContainer: "_tabsContainer_bvqc3_1",
|
|
1404
1497
|
tabsList: "_tabsList_bvqc3_8",
|
|
1405
1498
|
tab: "_tab_bvqc3_1",
|
|
@@ -1408,28 +1501,42 @@ var Q = {
|
|
|
1408
1501
|
};
|
|
1409
1502
|
//#endregion
|
|
1410
1503
|
//#region src/components/tabs/Tabs.tsx
|
|
1411
|
-
function
|
|
1412
|
-
|
|
1413
|
-
|
|
1504
|
+
function Tabs({ tabs, defaultValue, onChange, className, ...props }) {
|
|
1505
|
+
const [activeTab, setActiveTab] = useState(defaultValue || tabs[0]?.value);
|
|
1506
|
+
const [isFirstRender, setIsFirstRender] = useState(true);
|
|
1507
|
+
const indicatorRef = useRef(null);
|
|
1508
|
+
const tabRefs = useRef(/* @__PURE__ */ new Map());
|
|
1509
|
+
const contentRef = useRef(null);
|
|
1510
|
+
const handleTabClick = (value) => {
|
|
1511
|
+
if (value === activeTab) return;
|
|
1512
|
+
setActiveTab(value);
|
|
1513
|
+
onChange?.(value);
|
|
1414
1514
|
};
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
if (!
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1515
|
+
useEffect(() => {
|
|
1516
|
+
const activeTabElement = tabRefs.current.get(activeTab);
|
|
1517
|
+
if (!activeTabElement || !indicatorRef.current) return;
|
|
1518
|
+
const { offsetLeft, offsetWidth } = activeTabElement;
|
|
1519
|
+
const indicatorOffset = offsetLeft - 6;
|
|
1520
|
+
if (isFirstRender) {
|
|
1521
|
+
gsap.set(indicatorRef.current, {
|
|
1522
|
+
x: indicatorOffset,
|
|
1523
|
+
width: offsetWidth
|
|
1524
|
+
});
|
|
1525
|
+
setIsFirstRender(false);
|
|
1526
|
+
} else gsap.to(indicatorRef.current, {
|
|
1527
|
+
x: indicatorOffset,
|
|
1528
|
+
width: offsetWidth,
|
|
1425
1529
|
duration: .3,
|
|
1426
1530
|
ease: "power2.out"
|
|
1427
1531
|
});
|
|
1428
|
-
}, [
|
|
1429
|
-
|
|
1532
|
+
}, [activeTab, isFirstRender]);
|
|
1533
|
+
useEffect(() => {
|
|
1534
|
+
if (!contentRef.current) return;
|
|
1535
|
+
if (isFirstRender) gsap.set(contentRef.current, {
|
|
1430
1536
|
opacity: 1,
|
|
1431
1537
|
y: 0
|
|
1432
|
-
})
|
|
1538
|
+
});
|
|
1539
|
+
else gsap.fromTo(contentRef.current, {
|
|
1433
1540
|
opacity: 0,
|
|
1434
1541
|
y: 10
|
|
1435
1542
|
}, {
|
|
@@ -1437,33 +1544,33 @@ function _e({ tabs: e, defaultValue: t, onChange: n, className: r, ...i }) {
|
|
|
1437
1544
|
y: 0,
|
|
1438
1545
|
duration: .3,
|
|
1439
1546
|
ease: "power2.out"
|
|
1440
|
-
})
|
|
1441
|
-
}, [
|
|
1442
|
-
|
|
1443
|
-
return /* @__PURE__ */
|
|
1444
|
-
className: `${
|
|
1445
|
-
...
|
|
1446
|
-
children: [/* @__PURE__ */
|
|
1447
|
-
className:
|
|
1448
|
-
children: [
|
|
1449
|
-
ref: (
|
|
1450
|
-
|
|
1547
|
+
});
|
|
1548
|
+
}, [activeTab, isFirstRender]);
|
|
1549
|
+
const activeTabContent = tabs.find((tab) => tab.value === activeTab)?.content;
|
|
1550
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
1551
|
+
className: `${Tabs_module_default.tabsContainer} ${className || ""}`,
|
|
1552
|
+
...props,
|
|
1553
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
1554
|
+
className: Tabs_module_default.tabsList,
|
|
1555
|
+
children: [tabs.map((tab) => /* @__PURE__ */ jsx("button", {
|
|
1556
|
+
ref: (el) => {
|
|
1557
|
+
if (el) tabRefs.current.set(tab.value, el);
|
|
1451
1558
|
},
|
|
1452
|
-
className: `${
|
|
1453
|
-
onClick: () =>
|
|
1454
|
-
children:
|
|
1455
|
-
},
|
|
1456
|
-
ref:
|
|
1457
|
-
className:
|
|
1559
|
+
className: `${Tabs_module_default.tab} ${activeTab === tab.value ? Tabs_module_default.active : ""}`,
|
|
1560
|
+
onClick: () => handleTabClick(tab.value),
|
|
1561
|
+
children: tab.label
|
|
1562
|
+
}, tab.value)), /* @__PURE__ */ jsx("div", {
|
|
1563
|
+
ref: indicatorRef,
|
|
1564
|
+
className: Tabs_module_default.indicator
|
|
1458
1565
|
})]
|
|
1459
|
-
}), /* @__PURE__ */
|
|
1460
|
-
ref:
|
|
1461
|
-
className:
|
|
1462
|
-
children:
|
|
1566
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
1567
|
+
ref: contentRef,
|
|
1568
|
+
className: Tabs_module_default.tabContent,
|
|
1569
|
+
children: activeTabContent
|
|
1463
1570
|
})]
|
|
1464
1571
|
});
|
|
1465
1572
|
}
|
|
1466
|
-
var
|
|
1573
|
+
var Tooltip_module_default = {
|
|
1467
1574
|
tooltipWrapper: "_tooltipWrapper_39a7p_1",
|
|
1468
1575
|
trigger: "_trigger_39a7p_7",
|
|
1469
1576
|
tooltip: "_tooltip_39a7p_1",
|
|
@@ -1479,41 +1586,67 @@ var $ = {
|
|
|
1479
1586
|
};
|
|
1480
1587
|
//#endregion
|
|
1481
1588
|
//#region src/components/tooltip/Tooltip.tsx
|
|
1482
|
-
function
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1589
|
+
function Tooltip({ children, content, position: preferredPosition = "top", delay = 200, className, ...props }) {
|
|
1590
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
1591
|
+
const [shouldRender, setShouldRender] = useState(false);
|
|
1592
|
+
const [finalPosition, setFinalPosition] = useState(preferredPosition);
|
|
1593
|
+
const triggerRef = useRef(null);
|
|
1594
|
+
const tooltipRef = useRef(null);
|
|
1595
|
+
const arrowRef = useRef(null);
|
|
1596
|
+
const timeoutRef = useRef(null);
|
|
1597
|
+
const calculateBestPosition = () => {
|
|
1598
|
+
if (!triggerRef.current || !tooltipRef.current) return preferredPosition;
|
|
1599
|
+
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
1600
|
+
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
1601
|
+
const viewportWidth = window.innerWidth;
|
|
1602
|
+
const viewportHeight = window.innerHeight;
|
|
1603
|
+
const spacing = 12;
|
|
1604
|
+
const positions = {
|
|
1486
1605
|
top: {
|
|
1487
|
-
available:
|
|
1488
|
-
priority:
|
|
1606
|
+
available: triggerRect.top >= tooltipRect.height + spacing,
|
|
1607
|
+
priority: preferredPosition === "top" ? 4 : 3
|
|
1489
1608
|
},
|
|
1490
1609
|
bottom: {
|
|
1491
|
-
available:
|
|
1492
|
-
priority:
|
|
1610
|
+
available: viewportHeight - triggerRect.bottom >= tooltipRect.height + spacing,
|
|
1611
|
+
priority: preferredPosition === "bottom" ? 4 : 2
|
|
1493
1612
|
},
|
|
1494
1613
|
left: {
|
|
1495
|
-
available:
|
|
1496
|
-
priority:
|
|
1614
|
+
available: triggerRect.left >= tooltipRect.width + spacing,
|
|
1615
|
+
priority: preferredPosition === "left" ? 4 : 1
|
|
1497
1616
|
},
|
|
1498
1617
|
right: {
|
|
1499
|
-
available:
|
|
1500
|
-
priority:
|
|
1618
|
+
available: viewportWidth - triggerRect.right >= tooltipRect.width + spacing,
|
|
1619
|
+
priority: preferredPosition === "right" ? 4 : 0
|
|
1501
1620
|
}
|
|
1502
1621
|
};
|
|
1503
|
-
return Object.keys(
|
|
1622
|
+
return Object.keys(positions).filter((pos) => positions[pos].available).sort((a, b) => positions[b].priority - positions[a].priority)[0] || preferredPosition;
|
|
1623
|
+
};
|
|
1624
|
+
const handleMouseEnter = () => {
|
|
1625
|
+
timeoutRef.current = setTimeout(() => {
|
|
1626
|
+
setShouldRender(true);
|
|
1627
|
+
setIsVisible(true);
|
|
1628
|
+
}, delay);
|
|
1629
|
+
};
|
|
1630
|
+
const handleMouseLeave = () => {
|
|
1631
|
+
if (timeoutRef.current) {
|
|
1632
|
+
clearTimeout(timeoutRef.current);
|
|
1633
|
+
timeoutRef.current = null;
|
|
1634
|
+
}
|
|
1635
|
+
setIsVisible(false);
|
|
1504
1636
|
};
|
|
1505
|
-
|
|
1506
|
-
if (
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1637
|
+
useEffect(() => {
|
|
1638
|
+
if (isVisible && tooltipRef.current && arrowRef.current) {
|
|
1639
|
+
const position = calculateBestPosition();
|
|
1640
|
+
setFinalPosition(position);
|
|
1641
|
+
const isVertical = position === "top" || position === "bottom";
|
|
1642
|
+
const direction = position === "top" || position === "left" ? -1 : 1;
|
|
1643
|
+
gsap.fromTo(tooltipRef.current, {
|
|
1511
1644
|
opacity: 0,
|
|
1512
1645
|
scale: .8,
|
|
1513
|
-
y:
|
|
1514
|
-
x:
|
|
1515
|
-
rotateX:
|
|
1516
|
-
rotateY:
|
|
1646
|
+
y: isVertical ? direction * 15 : 0,
|
|
1647
|
+
x: !isVertical ? direction * 15 : 0,
|
|
1648
|
+
rotateX: isVertical ? direction * 15 : 0,
|
|
1649
|
+
rotateY: !isVertical ? direction * 15 : 0
|
|
1517
1650
|
}, {
|
|
1518
1651
|
opacity: 1,
|
|
1519
1652
|
scale: 1,
|
|
@@ -1523,7 +1656,8 @@ function ve({ children: e, content: t, position: n = "top", delay: r = 200, clas
|
|
|
1523
1656
|
rotateY: 0,
|
|
1524
1657
|
duration: .4,
|
|
1525
1658
|
ease: "back.out(1.7)"
|
|
1526
|
-
})
|
|
1659
|
+
});
|
|
1660
|
+
gsap.fromTo(arrowRef.current, {
|
|
1527
1661
|
opacity: 0,
|
|
1528
1662
|
scale: 0
|
|
1529
1663
|
}, {
|
|
@@ -1533,52 +1667,52 @@ function ve({ children: e, content: t, position: n = "top", delay: r = 200, clas
|
|
|
1533
1667
|
delay: .1,
|
|
1534
1668
|
ease: "back.out(2)"
|
|
1535
1669
|
});
|
|
1536
|
-
} else if (!
|
|
1537
|
-
|
|
1538
|
-
|
|
1670
|
+
} else if (!isVisible && tooltipRef.current && arrowRef.current) {
|
|
1671
|
+
const isVertical = finalPosition === "top" || finalPosition === "bottom";
|
|
1672
|
+
const direction = finalPosition === "top" || finalPosition === "left" ? -1 : 1;
|
|
1673
|
+
gsap.to(arrowRef.current, {
|
|
1539
1674
|
opacity: 0,
|
|
1540
1675
|
scale: 0,
|
|
1541
1676
|
duration: .15,
|
|
1542
1677
|
ease: "power2.in"
|
|
1543
|
-
})
|
|
1678
|
+
});
|
|
1679
|
+
gsap.to(tooltipRef.current, {
|
|
1544
1680
|
opacity: 0,
|
|
1545
1681
|
scale: .8,
|
|
1546
|
-
y:
|
|
1547
|
-
x:
|
|
1682
|
+
y: isVertical ? direction * 10 : 0,
|
|
1683
|
+
x: !isVertical ? direction * 10 : 0,
|
|
1548
1684
|
duration: .2,
|
|
1549
1685
|
ease: "power2.in",
|
|
1550
1686
|
onComplete: () => {
|
|
1551
|
-
|
|
1687
|
+
setShouldRender(false);
|
|
1552
1688
|
}
|
|
1553
1689
|
});
|
|
1554
1690
|
}
|
|
1555
|
-
}, [
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
onMouseLeave:
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
ref: v,
|
|
1574
|
-
className: `${$.tooltip} ${$[m]}`,
|
|
1691
|
+
}, [isVisible, finalPosition]);
|
|
1692
|
+
useEffect(() => {
|
|
1693
|
+
return () => {
|
|
1694
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
1695
|
+
};
|
|
1696
|
+
}, []);
|
|
1697
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
1698
|
+
className: `${Tooltip_module_default.tooltipWrapper} ${className || ""}`,
|
|
1699
|
+
onMouseEnter: handleMouseEnter,
|
|
1700
|
+
onMouseLeave: handleMouseLeave,
|
|
1701
|
+
...props,
|
|
1702
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
1703
|
+
ref: triggerRef,
|
|
1704
|
+
className: Tooltip_module_default.trigger,
|
|
1705
|
+
children
|
|
1706
|
+
}), shouldRender && /* @__PURE__ */ jsxs("div", {
|
|
1707
|
+
ref: tooltipRef,
|
|
1708
|
+
className: `${Tooltip_module_default.tooltip} ${Tooltip_module_default[finalPosition]}`,
|
|
1575
1709
|
role: "tooltip",
|
|
1576
|
-
children: [
|
|
1577
|
-
ref:
|
|
1578
|
-
className: `${
|
|
1710
|
+
children: [content, /* @__PURE__ */ jsx("div", {
|
|
1711
|
+
ref: arrowRef,
|
|
1712
|
+
className: `${Tooltip_module_default.arrow} ${Tooltip_module_default[`arrow-${finalPosition}`]}`
|
|
1579
1713
|
})]
|
|
1580
1714
|
})]
|
|
1581
1715
|
});
|
|
1582
1716
|
}
|
|
1583
1717
|
//#endregion
|
|
1584
|
-
export {
|
|
1718
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Badge, Button, Card, Checkbox, DropdownItem, DropdownMenu, DropdownSeparator, HeroSheet, HoverCard, Input, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, OTPInput, Sheet, SheetContent, SheetFooter, Tabs, ToastContainer, Tooltip, toast };
|