prometeo-design-system 1.6.4 → 1.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
interface ProfilePictureUploadProps {
|
|
1
|
+
export interface ProfilePictureUploadProps {
|
|
2
2
|
imageUrl?: string;
|
|
3
3
|
fallbackText?: string;
|
|
4
4
|
onFileSelect?: (file: File) => void;
|
|
@@ -13,4 +13,3 @@ interface ProfilePictureUploadProps {
|
|
|
13
13
|
onError?: (error: string) => void;
|
|
14
14
|
}
|
|
15
15
|
export declare function ProfilePictureUpload({ imageUrl, fallbackText, onFileSelect, onEditClick, onRemoveClick, size, className, disabled, showRemoveButton, acceptedTypes, maxFileSize, onError, }: ProfilePictureUploadProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -12,11 +12,13 @@ export { default as InputFormik } from './components/InputFormik/InputFormik';
|
|
|
12
12
|
export { default as Logo } from './components/Logo/Logo';
|
|
13
13
|
export { Menu } from './components/Menu/MenuComposable';
|
|
14
14
|
export { default as Pagination } from './components/Pagination/Pagination';
|
|
15
|
+
export { ProfilePictureUpload } from './components/ProfilePictureUpload/ProfilePictureUpload';
|
|
15
16
|
export { default as ProgressBar } from './components/ProgressBar/ProgressBar';
|
|
16
17
|
export { default as Select } from './components/Select/Select';
|
|
17
18
|
export { default as SelectFormik } from './components/SelectFormik/SelectFormik';
|
|
18
19
|
export { default as ChangueAccount } from './components/Sidebar/components/changue-account';
|
|
19
20
|
export { default as Spinner } from './components/Spinner/Spinner';
|
|
21
|
+
export { default as Steps } from './components/Steps/Steps';
|
|
20
22
|
export { default as SwipeContainer } from './components/SwipeContainer/SwipeContainer';
|
|
21
23
|
export { default as TabLinks } from './components/TabLinks/TabLinks';
|
|
22
24
|
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './components/Table/Table';
|
|
@@ -56,6 +58,8 @@ export type { INavAction, INavLink, Role, RoleLevels, } from './components/Sideb
|
|
|
56
58
|
export type { SidebarContextValue } from './components/Sidebar/hooks/useSidebarHook';
|
|
57
59
|
export type { SpinnerProps, SpinnerSize, SpinnerVariant, } from './components/Spinner/Spinner';
|
|
58
60
|
export type { PaginationProps } from './components/Pagination/Pagination';
|
|
61
|
+
export type { ProfilePictureUploadProps } from './components/ProfilePictureUpload/ProfilePictureUpload';
|
|
62
|
+
export type { Step, StepsProps } from './components/Steps/Steps';
|
|
59
63
|
export type { SelectOptionRendererProps, SelectProps, SelectionDisplayProps, } from './components/Select/Select';
|
|
60
64
|
export type { ISelectFormik, ISelectFormikOption, } from './components/SelectFormik/SelectFormik';
|
|
61
65
|
export type { DialogHandle } from './components/Dialog/Dialog';
|
|
@@ -1,44 +1,425 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { default as
|
|
3
|
-
import { C as
|
|
4
|
-
import { default as
|
|
5
|
-
import { default as
|
|
6
|
-
import { default as
|
|
7
|
-
import { default as
|
|
8
|
-
import { default as
|
|
9
|
-
import { default as
|
|
10
|
-
import { default as
|
|
11
|
-
import { default as
|
|
12
|
-
import { default as
|
|
13
|
-
import { Menu as
|
|
14
|
-
import { default as
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import { default as
|
|
19
|
-
import { default as
|
|
20
|
-
import { default as
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import
|
|
31
|
-
import {
|
|
32
|
-
import
|
|
33
|
-
import { default as
|
|
34
|
-
import { DropZone as
|
|
35
|
-
const
|
|
36
|
-
|
|
1
|
+
import M from "./Avatar.es.js";
|
|
2
|
+
import { default as De } from "./Button.es.js";
|
|
3
|
+
import { C as Fe, a as Me } from "./CardProfile-BZajBGbO.js";
|
|
4
|
+
import { default as ze } from "./CheckBox.es.js";
|
|
5
|
+
import { default as Ye } from "./CheckboxFormik.es.js";
|
|
6
|
+
import { default as Ue, useDialogControl as Ve } from "./DialogModal.es.js";
|
|
7
|
+
import { default as Ze, useDrawerDesktop as Je } from "./DrawerDesktop.es.js";
|
|
8
|
+
import { default as Qe, useDrawerMobile as _e } from "./DrawerMobile.es.js";
|
|
9
|
+
import { default as tt } from "./Header.es.js";
|
|
10
|
+
import { default as rt } from "./Input.es.js";
|
|
11
|
+
import { default as nt } from "./InputFormik.es.js";
|
|
12
|
+
import { default as st } from "./Logo.es.js";
|
|
13
|
+
import { Menu as ct } from "./Menu.es.js";
|
|
14
|
+
import { default as dt } from "./Pagination.es.js";
|
|
15
|
+
import { j as t } from "./jsx-runtime-ByW6EXIE.js";
|
|
16
|
+
import { motion as c, AnimatePresence as $ } from "framer-motion";
|
|
17
|
+
import { useRef as C, useState as k, useLayoutEffect as W, createContext as z, useContext as X, forwardRef as T, useCallback as Y, useEffect as A } from "react";
|
|
18
|
+
import { default as mt } from "./ProgressBar.es.js";
|
|
19
|
+
import { default as xt } from "./Select.es.js";
|
|
20
|
+
import { default as gt } from "./SelectFormik.es.js";
|
|
21
|
+
import { default as bt } from "./Spinner.es.js";
|
|
22
|
+
import { c as f } from "./cn-B6yFEsav.js";
|
|
23
|
+
import { Icons as N } from "./Icons.es.js";
|
|
24
|
+
import { default as wt } from "./SwipeContainer.es.js";
|
|
25
|
+
import { default as Nt } from "./TabLinks.es.js";
|
|
26
|
+
import { Table as St, TableBody as kt, TableCaption as It, TableCell as Bt, TableFooter as Lt, TableHead as $t, TableHeader as Rt, TableRow as Pt } from "./Table.es.js";
|
|
27
|
+
import { default as Tt } from "./TextArea.es.js";
|
|
28
|
+
import { default as Ot } from "./Tooltip.es.js";
|
|
29
|
+
import { u as O } from "./LayoutGeneric-jDE96L2N.js";
|
|
30
|
+
import { L as Et, S as Ft } from "./LayoutGeneric-jDE96L2N.js";
|
|
31
|
+
import { useGSAP as D } from "@gsap/react";
|
|
32
|
+
import p from "gsap";
|
|
33
|
+
import { default as Wt } from "./OtpInput.es.js";
|
|
34
|
+
import { DropZone as Xt } from "./DropZone.es.js";
|
|
35
|
+
const H = {
|
|
36
|
+
sm: "w-16 h-16",
|
|
37
|
+
md: "w-24 h-24",
|
|
38
|
+
lg: "w-32 h-32",
|
|
39
|
+
xl: "w-40 h-40"
|
|
40
|
+
}, U = {
|
|
41
|
+
sm: "w-4 h-4",
|
|
42
|
+
md: "w-5 h-5",
|
|
43
|
+
lg: "w-6 h-6",
|
|
44
|
+
xl: "w-8 h-8"
|
|
45
|
+
}, V = {
|
|
46
|
+
sm: "w-6 h-6",
|
|
47
|
+
md: "w-7 h-7",
|
|
48
|
+
lg: "w-8 h-8",
|
|
49
|
+
xl: "w-10 h-10"
|
|
50
|
+
}, G = {
|
|
51
|
+
sm: "-bottom-1 -right-0.5",
|
|
52
|
+
md: "-bottom-0.5 -right-0.5",
|
|
53
|
+
lg: "bottom-1 right-1",
|
|
54
|
+
xl: "bottom-3 right-2"
|
|
55
|
+
}, R = {
|
|
56
|
+
sm: "w-4 h-4",
|
|
57
|
+
md: "w-5 h-5",
|
|
58
|
+
lg: "w-6 h-6",
|
|
59
|
+
xl: "w-7 h-7"
|
|
60
|
+
}, Z = {
|
|
61
|
+
sm: "-top-0.5 -right-0.5",
|
|
62
|
+
md: "-top-1 -right-1",
|
|
63
|
+
lg: "-top-1 -right-0",
|
|
64
|
+
xl: "top-1 right-1"
|
|
65
|
+
};
|
|
66
|
+
function je({
|
|
67
|
+
imageUrl: a,
|
|
68
|
+
fallbackText: e = "S L",
|
|
69
|
+
onFileSelect: o,
|
|
70
|
+
onEditClick: r,
|
|
71
|
+
onRemoveClick: n,
|
|
72
|
+
size: i = "lg",
|
|
73
|
+
className: u,
|
|
74
|
+
disabled: s = !1,
|
|
75
|
+
showRemoveButton: m = !0,
|
|
76
|
+
acceptedTypes: h = "image/*",
|
|
77
|
+
maxFileSize: x = 5 * 1024 * 1024,
|
|
78
|
+
onError: g
|
|
79
|
+
}) {
|
|
80
|
+
const v = C(null), [y, S] = k(!1), l = (w) => w.type.startsWith("image/") ? w.size > x ? (g?.(`La imagen debe ser menor a ${Math.round(x / 1024 / 1024)}MB`), !1) : !0 : (g?.("Por favor selecciona un archivo de imagen válido"), !1), d = (w) => {
|
|
81
|
+
const B = w.target.files?.[0];
|
|
82
|
+
B && (l(B) && o?.(B), w.target.value = "");
|
|
83
|
+
}, b = () => {
|
|
84
|
+
s || (r ? r() : v.current?.click());
|
|
85
|
+
}, j = (w) => {
|
|
86
|
+
w.stopPropagation(), !s && n?.();
|
|
87
|
+
};
|
|
88
|
+
return /* @__PURE__ */ t.jsxs(
|
|
89
|
+
"div",
|
|
90
|
+
{
|
|
91
|
+
onMouseEnter: () => S(!0),
|
|
92
|
+
onMouseLeave: () => S(!1),
|
|
93
|
+
className: `relative inline-block border-inherit ${u || ""}`,
|
|
94
|
+
children: [
|
|
95
|
+
/* @__PURE__ */ t.jsx(
|
|
96
|
+
"input",
|
|
97
|
+
{
|
|
98
|
+
ref: v,
|
|
99
|
+
type: "file",
|
|
100
|
+
accept: h,
|
|
101
|
+
onChange: d,
|
|
102
|
+
className: "hidden",
|
|
103
|
+
disabled: s
|
|
104
|
+
}
|
|
105
|
+
),
|
|
106
|
+
/* @__PURE__ */ t.jsx(
|
|
107
|
+
c.div,
|
|
108
|
+
{
|
|
109
|
+
className: `
|
|
110
|
+
${H[i]}
|
|
111
|
+
rounded-full
|
|
112
|
+
overflow-hidden
|
|
113
|
+
flex items-center justify-center
|
|
114
|
+
relative
|
|
115
|
+
${s ? "opacity-50 cursor-not-allowed" : ""}
|
|
116
|
+
`,
|
|
117
|
+
children: /* @__PURE__ */ t.jsx(
|
|
118
|
+
M,
|
|
119
|
+
{
|
|
120
|
+
urlImage: a,
|
|
121
|
+
fallbackText: e,
|
|
122
|
+
sizeImage: i,
|
|
123
|
+
sizeFallback: i
|
|
124
|
+
}
|
|
125
|
+
)
|
|
126
|
+
}
|
|
127
|
+
),
|
|
128
|
+
/* @__PURE__ */ t.jsx(
|
|
129
|
+
c.button,
|
|
130
|
+
{
|
|
131
|
+
className: `
|
|
132
|
+
absolute
|
|
133
|
+
${G[i]}
|
|
134
|
+
border-3
|
|
135
|
+
border-inherit
|
|
136
|
+
${V[i]}
|
|
137
|
+
rounded-lg
|
|
138
|
+
bg-primary-default-default
|
|
139
|
+
hover:bg-primary-default-hover
|
|
140
|
+
transition-all duration-300
|
|
141
|
+
flex
|
|
142
|
+
items-center
|
|
143
|
+
justify-center
|
|
144
|
+
cursor-pointer
|
|
145
|
+
${s ? "opacity-50 cursor-not-allowed" : ""}
|
|
146
|
+
`,
|
|
147
|
+
onClick: b,
|
|
148
|
+
disabled: s,
|
|
149
|
+
whileTap: s ? {} : { scale: 0.95, transition: { duration: 0.2, ease: "easeInOut" } },
|
|
150
|
+
initial: { scale: 0, rotate: -180 },
|
|
151
|
+
animate: { scale: 1, rotate: 0 },
|
|
152
|
+
children: /* @__PURE__ */ t.jsx(
|
|
153
|
+
c.svg,
|
|
154
|
+
{
|
|
155
|
+
className: `${U[i]} text-white`,
|
|
156
|
+
fill: "none",
|
|
157
|
+
stroke: "currentColor",
|
|
158
|
+
viewBox: "0 0 24 24",
|
|
159
|
+
animate: y && !s ? {
|
|
160
|
+
x: [0, -1, 0, 1, -1, 0, 1],
|
|
161
|
+
y: [0, 1, 0, 1, 0, 1, 1],
|
|
162
|
+
rotate: [0, 5, -3, 8, -5, 3, 1],
|
|
163
|
+
transition: {
|
|
164
|
+
duration: 2,
|
|
165
|
+
ease: "easeInOut"
|
|
166
|
+
}
|
|
167
|
+
} : { x: 0, y: 0, rotate: 0 },
|
|
168
|
+
transition: {
|
|
169
|
+
duration: 1.2,
|
|
170
|
+
repeat: 0,
|
|
171
|
+
ease: "easeInOut"
|
|
172
|
+
},
|
|
173
|
+
children: /* @__PURE__ */ t.jsx(
|
|
174
|
+
"path",
|
|
175
|
+
{
|
|
176
|
+
strokeLinecap: "round",
|
|
177
|
+
strokeLinejoin: "round",
|
|
178
|
+
strokeWidth: 2,
|
|
179
|
+
d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
|
|
180
|
+
}
|
|
181
|
+
)
|
|
182
|
+
}
|
|
183
|
+
)
|
|
184
|
+
}
|
|
185
|
+
),
|
|
186
|
+
/* @__PURE__ */ t.jsx($, { children: a && m && !s && /* @__PURE__ */ t.jsx(
|
|
187
|
+
c.button,
|
|
188
|
+
{
|
|
189
|
+
className: `
|
|
190
|
+
absolute
|
|
191
|
+
${Z[i]}
|
|
192
|
+
${R[i]}
|
|
193
|
+
rounded-full
|
|
194
|
+
shadow-lg
|
|
195
|
+
bg-error-light
|
|
196
|
+
flex
|
|
197
|
+
cursor-pointer
|
|
198
|
+
items-center
|
|
199
|
+
justify-center
|
|
200
|
+
${s ? "opacity-50 cursor-not-allowed" : ""}
|
|
201
|
+
`,
|
|
202
|
+
disabled: s,
|
|
203
|
+
onClick: j,
|
|
204
|
+
initial: { scale: 0, opacity: 0, rotate: -90 },
|
|
205
|
+
animate: {
|
|
206
|
+
scale: y ? 1 : 0.8,
|
|
207
|
+
opacity: y ? 1 : 0,
|
|
208
|
+
rotate: 0
|
|
209
|
+
},
|
|
210
|
+
exit: { scale: 0, opacity: 0, rotate: 90 },
|
|
211
|
+
whileTap: { scale: 0.9 },
|
|
212
|
+
transition: {
|
|
213
|
+
type: "spring",
|
|
214
|
+
stiffness: 300,
|
|
215
|
+
damping: 25
|
|
216
|
+
},
|
|
217
|
+
children: /* @__PURE__ */ t.jsx(
|
|
218
|
+
c.svg,
|
|
219
|
+
{
|
|
220
|
+
className: `${R[i]} text-white p-1`,
|
|
221
|
+
fill: "none",
|
|
222
|
+
stroke: "currentColor",
|
|
223
|
+
viewBox: "0 0 24 24",
|
|
224
|
+
whileHover: { rotate: 90 },
|
|
225
|
+
transition: { duration: 0.2 },
|
|
226
|
+
children: /* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
|
|
227
|
+
}
|
|
228
|
+
)
|
|
229
|
+
}
|
|
230
|
+
) })
|
|
231
|
+
]
|
|
232
|
+
}
|
|
233
|
+
);
|
|
234
|
+
}
|
|
235
|
+
const P = ({
|
|
236
|
+
index: a,
|
|
237
|
+
isHorizontal: e,
|
|
238
|
+
currentStep: o
|
|
239
|
+
}) => {
|
|
240
|
+
const r = a < o, n = a === o - 1;
|
|
241
|
+
return /* @__PURE__ */ t.jsxs("div", { className: `relative ${e ? "w-20 h-1" : "w-0.5 h-8"}`, children: [
|
|
242
|
+
/* @__PURE__ */ t.jsx(
|
|
243
|
+
"div",
|
|
244
|
+
{
|
|
245
|
+
className: "absolute inset-0 rounded-full bg-neutral-medium-default"
|
|
246
|
+
}
|
|
247
|
+
),
|
|
248
|
+
/* @__PURE__ */ t.jsx(
|
|
249
|
+
c.div,
|
|
250
|
+
{
|
|
251
|
+
className: "absolute inset-0 rounded-full bg-primary-default-default",
|
|
252
|
+
initial: {
|
|
253
|
+
scaleX: e ? 0 : 1,
|
|
254
|
+
scaleY: e ? 1 : 0,
|
|
255
|
+
opacity: 0
|
|
256
|
+
},
|
|
257
|
+
animate: {
|
|
258
|
+
scaleX: r ? 1 : e ? 0 : 1,
|
|
259
|
+
scaleY: r || e ? 1 : 0,
|
|
260
|
+
opacity: r ? 1 : 0
|
|
261
|
+
},
|
|
262
|
+
transition: {
|
|
263
|
+
duration: 0.2,
|
|
264
|
+
ease: "easeInOut",
|
|
265
|
+
delay: a * 0.1
|
|
266
|
+
},
|
|
267
|
+
style: {
|
|
268
|
+
originX: e ? 0 : 0.5,
|
|
269
|
+
originY: e ? 0.5 : 0
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
),
|
|
273
|
+
n && /* @__PURE__ */ t.jsx(
|
|
274
|
+
c.div,
|
|
275
|
+
{
|
|
276
|
+
className: "absolute inset-0 rounded-full bg-primary-default-default",
|
|
277
|
+
initial: {
|
|
278
|
+
scaleX: e ? 0 : 1,
|
|
279
|
+
scaleY: e ? 1 : 0,
|
|
280
|
+
opacity: 0
|
|
281
|
+
},
|
|
282
|
+
animate: {
|
|
283
|
+
scaleX: 1,
|
|
284
|
+
scaleY: 1,
|
|
285
|
+
opacity: [0, 0.3, 0]
|
|
286
|
+
},
|
|
287
|
+
transition: {
|
|
288
|
+
duration: 1.5,
|
|
289
|
+
repeat: 1 / 0,
|
|
290
|
+
ease: "easeInOut"
|
|
291
|
+
},
|
|
292
|
+
style: {
|
|
293
|
+
originX: e ? 0 : 0.5,
|
|
294
|
+
originY: e ? 0.5 : 0,
|
|
295
|
+
filter: "blur(4px)"
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
)
|
|
299
|
+
] });
|
|
300
|
+
}, Ne = ({
|
|
301
|
+
steps: a,
|
|
302
|
+
currentStep: e,
|
|
303
|
+
orientation: o = "horizontal",
|
|
304
|
+
variant: r = "default",
|
|
305
|
+
size: n = "md",
|
|
306
|
+
className: i = "",
|
|
307
|
+
onStepClick: u,
|
|
308
|
+
allowClickableSteps: s = !1
|
|
309
|
+
}) => {
|
|
310
|
+
const m = o === "horizontal", h = (l) => ({
|
|
311
|
+
sm: { right: "-40px", top: "16px" },
|
|
312
|
+
md: { right: "-40px", top: "20px" },
|
|
313
|
+
lg: { right: "-40px", top: "24px" }
|
|
314
|
+
})[l], x = {
|
|
315
|
+
sm: {
|
|
316
|
+
circle: "w-8 h-8 text-xs",
|
|
317
|
+
title: "text-sm",
|
|
318
|
+
description: "text-xs",
|
|
319
|
+
spacing: m ? "gap-4" : "gap-1"
|
|
320
|
+
},
|
|
321
|
+
md: {
|
|
322
|
+
circle: "w-10 h-10 text-sm",
|
|
323
|
+
title: "text-base",
|
|
324
|
+
description: "text-sm",
|
|
325
|
+
spacing: m ? "gap-3" : "gap-2"
|
|
326
|
+
},
|
|
327
|
+
lg: {
|
|
328
|
+
circle: "w-12 h-12 text-base",
|
|
329
|
+
title: "text-lg",
|
|
330
|
+
description: "text-base",
|
|
331
|
+
spacing: m ? "gap-4" : "gap-3"
|
|
332
|
+
}
|
|
333
|
+
}, g = (l) => l < e ? "completed" : l === e ? "current" : "upcoming", v = (l) => {
|
|
334
|
+
const d = `${x[n].circle} rounded-full flex items-center justify-center font-medium`;
|
|
335
|
+
switch (l) {
|
|
336
|
+
case "completed":
|
|
337
|
+
return `${d} bg-primary-default-default text-neutral-strong-default shadow-lg`;
|
|
338
|
+
case "current":
|
|
339
|
+
return `${d} border-3 border-primary text-neutral-strong-default shadow-lg duration-900`;
|
|
340
|
+
default:
|
|
341
|
+
return `${d} bg-neutral-medium-default text-neutral-medium-default`;
|
|
342
|
+
}
|
|
343
|
+
}, y = (l) => {
|
|
344
|
+
s && u && u(l);
|
|
345
|
+
}, S = m ? `flex items-center ${i}` : `space-y-0 ${i}`;
|
|
346
|
+
return /* @__PURE__ */ t.jsx("div", { className: S, children: a.map((l, d) => {
|
|
347
|
+
const b = g(d), j = s && u;
|
|
348
|
+
return /* @__PURE__ */ t.jsx("div", { className: "flex items-center", children: m ? /* @__PURE__ */ t.jsx("div", { className: "flex", children: /* @__PURE__ */ t.jsxs("div", { className: "w-40 flex flex-col items-center relative", children: [
|
|
349
|
+
/* @__PURE__ */ t.jsx(
|
|
350
|
+
c.div,
|
|
351
|
+
{
|
|
352
|
+
className: `${v(b)} ${j ? "cursor-pointer" : ""} relative z-10`,
|
|
353
|
+
initial: { scale: 0.8, opacity: 0 },
|
|
354
|
+
animate: { scale: 1, opacity: 1 },
|
|
355
|
+
transition: { duration: 0.3, delay: d * 0.1 },
|
|
356
|
+
whileTap: j ? { scale: 0.95 } : {},
|
|
357
|
+
onClick: () => y(d),
|
|
358
|
+
children: r === "numbered" || !l.icon ? b === "completed" ? /* @__PURE__ */ t.jsx(c.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ t.jsx(N.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ t.jsx("span", { children: d + 1 }) : l.icon
|
|
359
|
+
}
|
|
360
|
+
),
|
|
361
|
+
d < a.length - 1 && /* @__PURE__ */ t.jsx(
|
|
362
|
+
"div",
|
|
363
|
+
{
|
|
364
|
+
className: "absolute",
|
|
365
|
+
style: h(n),
|
|
366
|
+
children: /* @__PURE__ */ t.jsx(
|
|
367
|
+
P,
|
|
368
|
+
{
|
|
369
|
+
index: d,
|
|
370
|
+
isHorizontal: m,
|
|
371
|
+
currentStep: e
|
|
372
|
+
}
|
|
373
|
+
)
|
|
374
|
+
}
|
|
375
|
+
),
|
|
376
|
+
r !== "minimal" && l.description && /* @__PURE__ */ t.jsx("p", { className: f(
|
|
377
|
+
x[n].description,
|
|
378
|
+
"text-gray-400 mt-2 text-center max-w-full",
|
|
379
|
+
b === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"
|
|
380
|
+
), children: l.description })
|
|
381
|
+
] }) }) : /* @__PURE__ */ t.jsxs("div", { className: "relative flex w-36", children: [
|
|
382
|
+
/* @__PURE__ */ t.jsxs("div", { className: "flex flex-col items-center w-full", children: [
|
|
383
|
+
/* @__PURE__ */ t.jsx(
|
|
384
|
+
c.div,
|
|
385
|
+
{
|
|
386
|
+
className: `${v(b)} ${j ? "cursor-pointer" : ""}`,
|
|
387
|
+
initial: { scale: 0.8, opacity: 0 },
|
|
388
|
+
animate: { scale: 1, opacity: 1 },
|
|
389
|
+
transition: { duration: 0.3, delay: d * 0.1 },
|
|
390
|
+
whileTap: j ? { scale: 0.95 } : {},
|
|
391
|
+
onClick: () => y(d),
|
|
392
|
+
children: r === "numbered" || !l.icon ? b === "completed" ? /* @__PURE__ */ t.jsx(c.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ t.jsx(N.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ t.jsx("span", { children: d + 1 }) : l.icon
|
|
393
|
+
}
|
|
394
|
+
),
|
|
395
|
+
d < a.length - 1 && /* @__PURE__ */ t.jsx(
|
|
396
|
+
P,
|
|
397
|
+
{
|
|
398
|
+
index: d,
|
|
399
|
+
isHorizontal: m,
|
|
400
|
+
currentStep: e
|
|
401
|
+
}
|
|
402
|
+
)
|
|
403
|
+
] }),
|
|
404
|
+
r !== "minimal" && /* @__PURE__ */ t.jsx(
|
|
405
|
+
c.div,
|
|
406
|
+
{
|
|
407
|
+
className: `absolute -right-30 ml-4 top-3 gap-3 flex flex-col w-full ${x[n].spacing} flex h-full`,
|
|
408
|
+
initial: { opacity: 0, x: -10 },
|
|
409
|
+
animate: { opacity: 1, x: 0 },
|
|
410
|
+
transition: { duration: 0.3, delay: d * 0.1 + 0.1 },
|
|
411
|
+
children: l.description && /* @__PURE__ */ t.jsx("p", { className: f(x[n].description, "text-gray-400", b === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"), children: l.description })
|
|
412
|
+
}
|
|
413
|
+
)
|
|
414
|
+
] }) }, l.id);
|
|
415
|
+
}) });
|
|
416
|
+
}, J = (a, e) => {
|
|
417
|
+
D(
|
|
37
418
|
() => {
|
|
38
|
-
if (!
|
|
39
|
-
const o =
|
|
419
|
+
if (!a.current) return;
|
|
420
|
+
const o = a.current, r = document.querySelector('[data-main-content="true"]');
|
|
40
421
|
if (e) {
|
|
41
|
-
|
|
422
|
+
p.fromTo(
|
|
42
423
|
o,
|
|
43
424
|
{
|
|
44
425
|
width: "0rem",
|
|
@@ -50,13 +431,13 @@ const D = (t, e) => {
|
|
|
50
431
|
duration: 0.4,
|
|
51
432
|
ease: "power2.out"
|
|
52
433
|
}
|
|
53
|
-
), r &&
|
|
434
|
+
), r && p.to(r, {
|
|
54
435
|
marginLeft: o.offsetWidth + "px",
|
|
55
436
|
duration: 0.4,
|
|
56
437
|
ease: "power2.out"
|
|
57
438
|
});
|
|
58
439
|
const n = o.querySelectorAll(".secondary-bar-content > *");
|
|
59
|
-
n.length > 0 &&
|
|
440
|
+
n.length > 0 && p.fromTo(
|
|
60
441
|
n,
|
|
61
442
|
{
|
|
62
443
|
y: 20,
|
|
@@ -72,92 +453,92 @@ const D = (t, e) => {
|
|
|
72
453
|
}
|
|
73
454
|
);
|
|
74
455
|
} else
|
|
75
|
-
|
|
456
|
+
p.to(o, {
|
|
76
457
|
width: "0rem",
|
|
77
458
|
opacity: 0,
|
|
78
459
|
duration: 0.3,
|
|
79
460
|
ease: "power2.in"
|
|
80
|
-
}), r &&
|
|
461
|
+
}), r && p.to(r, {
|
|
81
462
|
marginLeft: "0px",
|
|
82
463
|
duration: 0.3,
|
|
83
464
|
ease: "power2.in"
|
|
84
465
|
});
|
|
85
466
|
},
|
|
86
|
-
{ scope:
|
|
467
|
+
{ scope: a, dependencies: [e] }
|
|
87
468
|
);
|
|
88
|
-
},
|
|
89
|
-
children:
|
|
469
|
+
}, q = ({
|
|
470
|
+
children: a,
|
|
90
471
|
isOpen: e = !1,
|
|
91
472
|
className: o = "",
|
|
92
473
|
width: r = "w-96",
|
|
93
474
|
action: n,
|
|
94
475
|
primarySidebarCollapsed: i,
|
|
95
|
-
onClose:
|
|
476
|
+
onClose: u
|
|
96
477
|
}) => {
|
|
97
|
-
const
|
|
98
|
-
return
|
|
478
|
+
const s = C(null), [m, h] = k({ left: 0, width: 0 }), { primarySidebarRef: x } = O();
|
|
479
|
+
return W(() => {
|
|
99
480
|
if (x?.current) {
|
|
100
481
|
const g = x.current.getBoundingClientRect();
|
|
101
|
-
|
|
482
|
+
h({
|
|
102
483
|
left: g.width,
|
|
103
484
|
width: g.width
|
|
104
485
|
});
|
|
105
486
|
}
|
|
106
|
-
}, [x, e, i]),
|
|
107
|
-
/* @__PURE__ */
|
|
487
|
+
}, [x, e, i]), J(s, e), /* @__PURE__ */ t.jsx(t.Fragment, { children: e && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
|
|
488
|
+
/* @__PURE__ */ t.jsx(
|
|
108
489
|
"div",
|
|
109
490
|
{
|
|
110
491
|
className: "fixed inset-0 bg-black/95 z-20",
|
|
111
492
|
style: {
|
|
112
|
-
left:
|
|
493
|
+
left: m.left
|
|
113
494
|
},
|
|
114
|
-
onClick:
|
|
495
|
+
onClick: u
|
|
115
496
|
}
|
|
116
497
|
),
|
|
117
|
-
/* @__PURE__ */
|
|
498
|
+
/* @__PURE__ */ t.jsx(
|
|
118
499
|
"div",
|
|
119
500
|
{
|
|
120
|
-
ref:
|
|
121
|
-
className:
|
|
501
|
+
ref: s,
|
|
502
|
+
className: f(
|
|
122
503
|
"h-screen bg-neutral-default-default border-r-1 border-neutral-strong-default flex flex-col secondary-bar flex-shrink-0",
|
|
123
504
|
"absolute top-0 z-30",
|
|
124
505
|
r,
|
|
125
506
|
o
|
|
126
507
|
),
|
|
127
508
|
style: {
|
|
128
|
-
left:
|
|
509
|
+
left: m.left
|
|
129
510
|
},
|
|
130
511
|
"data-action": n,
|
|
131
|
-
children: /* @__PURE__ */
|
|
512
|
+
children: /* @__PURE__ */ t.jsx("div", { className: "secondary-bar-content", children: a })
|
|
132
513
|
}
|
|
133
514
|
)
|
|
134
515
|
] }) });
|
|
135
|
-
},
|
|
136
|
-
Root:
|
|
137
|
-
Header:
|
|
138
|
-
Content:
|
|
139
|
-
Footer:
|
|
140
|
-
Spacer:
|
|
141
|
-
}),
|
|
516
|
+
}, K = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: f("h-16 ", e), children: a }), Q = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: f("flex-1 overflow-y-auto p-4", e), children: a }), _ = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: f("p-4 border-t border-neutral-strong-default", e), children: a }), ee = ({ className: a }) => /* @__PURE__ */ t.jsx("div", { className: f("flex-1", a) }), Ce = Object.assign(q, {
|
|
517
|
+
Root: q,
|
|
518
|
+
Header: K,
|
|
519
|
+
Content: Q,
|
|
520
|
+
Footer: _,
|
|
521
|
+
Spacer: ee
|
|
522
|
+
}), E = z(
|
|
142
523
|
void 0
|
|
143
|
-
),
|
|
144
|
-
const
|
|
145
|
-
if (!
|
|
524
|
+
), Se = () => {
|
|
525
|
+
const a = X(E);
|
|
526
|
+
if (!a)
|
|
146
527
|
throw new Error("useSidebar must be used within a Sidebar.Root");
|
|
147
|
-
return
|
|
148
|
-
},
|
|
149
|
-
children:
|
|
528
|
+
return a;
|
|
529
|
+
}, te = ({
|
|
530
|
+
children: a
|
|
150
531
|
}) => {
|
|
151
|
-
const [e, o] =
|
|
532
|
+
const [e, o] = k(!1), [r, n] = k(!1), i = C(null), u = () => {
|
|
152
533
|
o(!1), n(!1);
|
|
153
|
-
},
|
|
534
|
+
}, s = () => {
|
|
154
535
|
o(!0), n(!1);
|
|
155
|
-
},
|
|
536
|
+
}, v = {
|
|
156
537
|
isCollapsed: e,
|
|
157
538
|
setIsCollapsed: o,
|
|
158
539
|
navbarRef: i,
|
|
159
540
|
toggleCollapse: () => {
|
|
160
|
-
e ?
|
|
541
|
+
e ? u() : s();
|
|
161
542
|
},
|
|
162
543
|
activeSecondaryBar: r ? "notifications" : null,
|
|
163
544
|
openSecondaryBar: () => {
|
|
@@ -167,22 +548,22 @@ const D = (t, e) => {
|
|
|
167
548
|
n(!1);
|
|
168
549
|
},
|
|
169
550
|
toggleSecondaryBar: () => {
|
|
170
|
-
n((
|
|
551
|
+
n((y) => !y);
|
|
171
552
|
}
|
|
172
553
|
};
|
|
173
|
-
return /* @__PURE__ */
|
|
174
|
-
},
|
|
175
|
-
|
|
554
|
+
return /* @__PURE__ */ t.jsx(E.Provider, { value: v, children: a });
|
|
555
|
+
}, I = (a, e, o, r) => e && (Array.isArray(e) ? e.length > 0 : e) ? a.to(e, o, r) : a, ae = (a, e, o) => {
|
|
556
|
+
D(
|
|
176
557
|
() => {
|
|
177
|
-
if (!
|
|
178
|
-
const r =
|
|
558
|
+
if (!a.current) return;
|
|
559
|
+
const r = p.timeline({
|
|
179
560
|
defaults: { duration: 0.7, ease: "power1.out" }
|
|
180
561
|
}), n = {
|
|
181
|
-
navbar:
|
|
182
|
-
navLabels:
|
|
183
|
-
navIconWrappers:
|
|
184
|
-
navIcons:
|
|
185
|
-
navLinkItems:
|
|
562
|
+
navbar: a.current,
|
|
563
|
+
navLabels: p.utils.toArray(".nav-label"),
|
|
564
|
+
navIconWrappers: p.utils.toArray(".nav-icon-wrapper"),
|
|
565
|
+
navIcons: p.utils.toArray(".nav-icon"),
|
|
566
|
+
navLinkItems: p.utils.toArray(".nav-link-item"),
|
|
186
567
|
logoutButton: document.querySelector(".logout-button"),
|
|
187
568
|
logoutLabel: document.querySelector(".logout-label"),
|
|
188
569
|
logoutIcon: document.querySelector(".logout-icon"),
|
|
@@ -210,15 +591,15 @@ const D = (t, e) => {
|
|
|
210
591
|
),
|
|
211
592
|
// Secondary bar elements
|
|
212
593
|
secondaryBar: document.querySelector(".secondary-bar"),
|
|
213
|
-
secondaryBarContent:
|
|
214
|
-
badgeInLink:
|
|
594
|
+
secondaryBarContent: p.utils.toArray(".secondary-bar *"),
|
|
595
|
+
badgeInLink: p.utils.toArray(".badge-in-link")
|
|
215
596
|
};
|
|
216
|
-
e ?
|
|
597
|
+
e ? re(r, n) : oe(r, n), n.secondaryBar && ne(n.secondaryBar);
|
|
217
598
|
},
|
|
218
|
-
{ scope:
|
|
599
|
+
{ scope: a, dependencies: [e, o] }
|
|
219
600
|
);
|
|
220
|
-
},
|
|
221
|
-
|
|
601
|
+
}, re = (a, e) => {
|
|
602
|
+
a.to(e.navbar, {
|
|
222
603
|
width: "5rem",
|
|
223
604
|
duration: 0.2,
|
|
224
605
|
ease: "bounce.out"
|
|
@@ -276,8 +657,8 @@ const D = (t, e) => {
|
|
|
276
657
|
marginLeft: 0
|
|
277
658
|
},
|
|
278
659
|
0
|
|
279
|
-
).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0),
|
|
280
|
-
|
|
660
|
+
).to(e.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), I(
|
|
661
|
+
a,
|
|
281
662
|
e.buttonCrevron,
|
|
282
663
|
{
|
|
283
664
|
width: 0,
|
|
@@ -289,8 +670,8 @@ const D = (t, e) => {
|
|
|
289
670
|
}
|
|
290
671
|
},
|
|
291
672
|
0
|
|
292
|
-
),
|
|
293
|
-
|
|
673
|
+
), I(
|
|
674
|
+
a,
|
|
294
675
|
e.buttonContentChevron,
|
|
295
676
|
{
|
|
296
677
|
display: "none"
|
|
@@ -356,8 +737,8 @@ const D = (t, e) => {
|
|
|
356
737
|
},
|
|
357
738
|
-1
|
|
358
739
|
);
|
|
359
|
-
},
|
|
360
|
-
|
|
740
|
+
}, oe = (a, e) => {
|
|
741
|
+
a.to(e.navbar, { width: "20rem" }, -1).to(
|
|
361
742
|
e.navLinkItems,
|
|
362
743
|
{
|
|
363
744
|
borderRadius: "10px",
|
|
@@ -366,8 +747,8 @@ const D = (t, e) => {
|
|
|
366
747
|
justifyContent: "flex-start"
|
|
367
748
|
},
|
|
368
749
|
-1
|
|
369
|
-
),
|
|
370
|
-
|
|
750
|
+
), I(
|
|
751
|
+
a,
|
|
371
752
|
e.buttonCrevron,
|
|
372
753
|
{
|
|
373
754
|
width: "auto",
|
|
@@ -379,8 +760,8 @@ const D = (t, e) => {
|
|
|
379
760
|
}
|
|
380
761
|
},
|
|
381
762
|
0
|
|
382
|
-
),
|
|
383
|
-
|
|
763
|
+
), I(
|
|
764
|
+
a,
|
|
384
765
|
e.buttonContentChevron,
|
|
385
766
|
{
|
|
386
767
|
display: "flex"
|
|
@@ -484,44 +865,44 @@ const D = (t, e) => {
|
|
|
484
865
|
},
|
|
485
866
|
0
|
|
486
867
|
).to(e.navIcons, { scale: 1 }, 0.3);
|
|
487
|
-
},
|
|
488
|
-
|
|
868
|
+
}, ne = (a, e) => {
|
|
869
|
+
p.to(a, {
|
|
489
870
|
x: "-100%",
|
|
490
871
|
opacity: 0,
|
|
491
872
|
duration: 0.3,
|
|
492
873
|
ease: "power2.in"
|
|
493
874
|
});
|
|
494
|
-
},
|
|
495
|
-
({ children:
|
|
496
|
-
const n =
|
|
497
|
-
n.current =
|
|
875
|
+
}, ie = T(
|
|
876
|
+
({ children: a, isCollapsed: e = !1, className: o = "" }, r) => {
|
|
877
|
+
const n = C(null), { registerPrimarySidebar: i } = O(), u = Y((s) => {
|
|
878
|
+
n.current = s, typeof r == "function" ? r(s) : r && (r.current = s);
|
|
498
879
|
}, [r]);
|
|
499
|
-
return
|
|
880
|
+
return A(() => {
|
|
500
881
|
n.current && i(n);
|
|
501
|
-
}, [i]),
|
|
882
|
+
}, [i]), ae(n, e, !1), /* @__PURE__ */ t.jsx(
|
|
502
883
|
"div",
|
|
503
884
|
{
|
|
504
|
-
ref:
|
|
885
|
+
ref: u,
|
|
505
886
|
className: `bg-neutral-default-default hidden overflow-hidden h-screen md:flex flex-col border-r border-neutral-strong-default transition-all duration-300 relative z-50 flex-shrink-0
|
|
506
887
|
${e ? "w-16" : "w-64"} ${o}`,
|
|
507
|
-
children:
|
|
888
|
+
children: a
|
|
508
889
|
}
|
|
509
890
|
);
|
|
510
891
|
}
|
|
511
|
-
),
|
|
512
|
-
(
|
|
892
|
+
), L = T(
|
|
893
|
+
(a, e) => /* @__PURE__ */ t.jsx(te, { children: /* @__PURE__ */ t.jsx(ie, { ...a, ref: e }) })
|
|
513
894
|
);
|
|
514
|
-
|
|
515
|
-
const
|
|
895
|
+
L.displayName = "SidebarRoot";
|
|
896
|
+
const se = ({ isCollapsed: a, onToggleCollapse: e }) => /* @__PURE__ */ t.jsx("div", { className: f("flex mt-5 mb-4 justify-end mr-5 container-icon-collapsade", a && ""), children: /* @__PURE__ */ t.jsx(
|
|
516
897
|
"button",
|
|
517
898
|
{
|
|
518
899
|
onClick: e,
|
|
519
|
-
title:
|
|
520
|
-
"aria-label":
|
|
900
|
+
title: a ? "Expandir Navbar" : "Contraer Navbar",
|
|
901
|
+
"aria-label": a ? "Expandir Navbar" : "Contraer Navbar",
|
|
521
902
|
className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
|
|
522
|
-
children:
|
|
903
|
+
children: a ? /* @__PURE__ */ t.jsx(N.CloseNavBarDesktop, { size: 24, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ t.jsx(N.CloseNavBarDesktop, { size: 24, className: "rotate-0 transition-transform duration-300" })
|
|
523
904
|
}
|
|
524
|
-
) }),
|
|
905
|
+
) }), le = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: `${e} sidebar-header`, children: a }), ce = ({ className: a }) => /* @__PURE__ */ t.jsx("div", { className: f("px-3 flex justify-center items-center w-full mb-4", a), children: /* @__PURE__ */ t.jsx("div", { className: "border-b border-neutral-strong-default border-1 w-full" }) }), ue = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: e, children: a }), de = ({ className: a, size: e = "auto" }) => {
|
|
525
906
|
const o = () => {
|
|
526
907
|
switch (e) {
|
|
527
908
|
case "auto":
|
|
@@ -534,78 +915,78 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
|
|
|
534
915
|
return "h-8 w-8";
|
|
535
916
|
}
|
|
536
917
|
};
|
|
537
|
-
return /* @__PURE__ */
|
|
538
|
-
},
|
|
539
|
-
Root:
|
|
540
|
-
CollapseButton:
|
|
541
|
-
Header:
|
|
542
|
-
Divider:
|
|
543
|
-
Content:
|
|
544
|
-
Spacer:
|
|
545
|
-
Footer:
|
|
546
|
-
}),
|
|
547
|
-
children:
|
|
918
|
+
return /* @__PURE__ */ t.jsx("div", { className: f(o(), a) });
|
|
919
|
+
}, fe = ({ children: a, className: e }) => /* @__PURE__ */ t.jsx("div", { className: e, children: a }), ke = Object.assign(L, {
|
|
920
|
+
Root: L,
|
|
921
|
+
CollapseButton: se,
|
|
922
|
+
Header: le,
|
|
923
|
+
Divider: ce,
|
|
924
|
+
Content: ue,
|
|
925
|
+
Spacer: de,
|
|
926
|
+
Footer: fe
|
|
927
|
+
}), Ie = ({
|
|
928
|
+
children: a,
|
|
548
929
|
icon: e,
|
|
549
930
|
label: o,
|
|
550
931
|
href: r,
|
|
551
932
|
onClick: n,
|
|
552
933
|
isActive: i = !1,
|
|
553
|
-
className:
|
|
934
|
+
className: u
|
|
554
935
|
}) => {
|
|
555
|
-
const
|
|
556
|
-
return /* @__PURE__ */
|
|
557
|
-
|
|
936
|
+
const s = r ? "a" : "button";
|
|
937
|
+
return /* @__PURE__ */ t.jsxs(
|
|
938
|
+
s,
|
|
558
939
|
{
|
|
559
940
|
href: r,
|
|
560
941
|
onClick: n,
|
|
561
|
-
className:
|
|
942
|
+
className: f(
|
|
562
943
|
"nav-link-item",
|
|
563
944
|
"flex items-center w-full px-3 py-2 text-left",
|
|
564
945
|
"hover:bg-neutral-medium-default transition-colors rounded-lg",
|
|
565
946
|
"focus:outline-none focus:ring-2 focus:ring-primary-default-default",
|
|
566
947
|
i && "bg-neutral-medium-default",
|
|
567
|
-
|
|
948
|
+
u
|
|
568
949
|
),
|
|
569
950
|
children: [
|
|
570
|
-
e && /* @__PURE__ */
|
|
571
|
-
o && /* @__PURE__ */
|
|
572
|
-
|
|
951
|
+
e && /* @__PURE__ */ t.jsx("div", { className: "nav-icon-wrapper mr-3 flex-shrink-0", children: /* @__PURE__ */ t.jsx("div", { className: "nav-icon flex items-center justify-center w-5 h-5", children: e }) }),
|
|
952
|
+
o && /* @__PURE__ */ t.jsx("span", { className: "nav-label text-sm text-neutral-strong-default", children: o }),
|
|
953
|
+
a
|
|
573
954
|
]
|
|
574
955
|
}
|
|
575
956
|
);
|
|
576
|
-
},
|
|
577
|
-
count:
|
|
957
|
+
}, F = ({
|
|
958
|
+
count: a,
|
|
578
959
|
maxCount: e = 9,
|
|
579
960
|
className: o = "",
|
|
580
961
|
size: r = "medium",
|
|
581
962
|
variant: n = "primary",
|
|
582
963
|
showZero: i = !1
|
|
583
964
|
}) => {
|
|
584
|
-
const
|
|
585
|
-
if (
|
|
586
|
-
const
|
|
965
|
+
const u = a, s = u > e ? `+${e}` : u;
|
|
966
|
+
if (u === 0 && !i) return null;
|
|
967
|
+
const m = {
|
|
587
968
|
small: "w-4.5 h-4.5 text-xs ",
|
|
588
969
|
medium: "w-5 h-5 text-xs",
|
|
589
970
|
large: "w-6 h-6 text-sm"
|
|
590
|
-
},
|
|
971
|
+
}, h = {
|
|
591
972
|
primary: "bg-primary-default-default text-neutral-strong-default",
|
|
592
973
|
secondary: "bg-neutral-medium-default text-neutral-strong-default",
|
|
593
974
|
success: "bg-green-500 text-white",
|
|
594
975
|
warning: "bg-yellow-500 text-black",
|
|
595
976
|
danger: "bg-red-500 text-white"
|
|
596
977
|
};
|
|
597
|
-
return /* @__PURE__ */
|
|
978
|
+
return /* @__PURE__ */ t.jsx("div", { className: f(
|
|
598
979
|
"rounded-full flex items-center justify-center font-medium ",
|
|
599
|
-
|
|
600
|
-
|
|
980
|
+
m[r],
|
|
981
|
+
h[n],
|
|
601
982
|
o
|
|
602
|
-
), children: /* @__PURE__ */
|
|
603
|
-
},
|
|
604
|
-
linkActions:
|
|
983
|
+
), children: /* @__PURE__ */ t.jsx("span", { children: s }) });
|
|
984
|
+
}, Be = ({
|
|
985
|
+
linkActions: a,
|
|
605
986
|
onClick: e,
|
|
606
987
|
activeAction: o
|
|
607
|
-
}) => /* @__PURE__ */
|
|
608
|
-
|
|
988
|
+
}) => /* @__PURE__ */ t.jsx("nav", { className: "flex flex-col gap-1", children: a?.map((r, n) => r.isView && r.viewAccess() && /* @__PURE__ */ t.jsx(
|
|
989
|
+
c.div,
|
|
609
990
|
{
|
|
610
991
|
initial: { opacity: 0 },
|
|
611
992
|
animate: { opacity: 1 },
|
|
@@ -615,21 +996,21 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
|
|
|
615
996
|
ease: "easeOut"
|
|
616
997
|
},
|
|
617
998
|
className: "relative flex justify-center w-full items-center px-3",
|
|
618
|
-
children: /* @__PURE__ */
|
|
999
|
+
children: /* @__PURE__ */ t.jsxs(
|
|
619
1000
|
"button",
|
|
620
1001
|
{
|
|
621
1002
|
onClick: () => {
|
|
622
1003
|
e?.(r.action);
|
|
623
1004
|
},
|
|
624
|
-
className:
|
|
1005
|
+
className: f(
|
|
625
1006
|
"nav-link-item flex rounded-lg cursor-pointer relative overflow-hidden h-10 ",
|
|
626
1007
|
"transition-all duration-300 ease-out w-full",
|
|
627
1008
|
"group hover:bg-neutral-medium-selected",
|
|
628
1009
|
o === r.action ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
|
|
629
1010
|
),
|
|
630
1011
|
children: [
|
|
631
|
-
/* @__PURE__ */
|
|
632
|
-
|
|
1012
|
+
/* @__PURE__ */ t.jsx($, { mode: "wait", children: o === r.action && /* @__PURE__ */ t.jsx(
|
|
1013
|
+
c.div,
|
|
633
1014
|
{
|
|
634
1015
|
layoutId: "nav-active-bg",
|
|
635
1016
|
className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
|
|
@@ -643,8 +1024,8 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
|
|
|
643
1024
|
}
|
|
644
1025
|
}
|
|
645
1026
|
) }),
|
|
646
|
-
/* @__PURE__ */
|
|
647
|
-
|
|
1027
|
+
/* @__PURE__ */ t.jsxs(
|
|
1028
|
+
c.div,
|
|
648
1029
|
{
|
|
649
1030
|
className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
|
|
650
1031
|
animate: {
|
|
@@ -655,9 +1036,9 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
|
|
|
655
1036
|
ease: "easeOut"
|
|
656
1037
|
},
|
|
657
1038
|
children: [
|
|
658
|
-
/* @__PURE__ */
|
|
659
|
-
/* @__PURE__ */
|
|
660
|
-
|
|
1039
|
+
/* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-3", children: [
|
|
1040
|
+
/* @__PURE__ */ t.jsx(
|
|
1041
|
+
c.div,
|
|
661
1042
|
{
|
|
662
1043
|
className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
|
|
663
1044
|
animate: {
|
|
@@ -669,16 +1050,16 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
|
|
|
669
1050
|
},
|
|
670
1051
|
children: typeof r.icon == "function" ? r.icon({
|
|
671
1052
|
size: 24,
|
|
672
|
-
className:
|
|
1053
|
+
className: f(
|
|
673
1054
|
"nav-icon transition-colors duration-250 ease-out",
|
|
674
1055
|
o === r.action ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
|
|
675
1056
|
)
|
|
676
1057
|
}) : null
|
|
677
1058
|
}
|
|
678
1059
|
),
|
|
679
|
-
/* @__PURE__ */
|
|
1060
|
+
/* @__PURE__ */ t.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
|
|
680
1061
|
] }),
|
|
681
|
-
/* @__PURE__ */
|
|
1062
|
+
/* @__PURE__ */ t.jsx("div", { className: "badge-in-link", children: r.count && r?.count >= 1 ? /* @__PURE__ */ t.jsx(F, { count: r.count, maxCount: 9, className: "" }) : "" })
|
|
682
1063
|
]
|
|
683
1064
|
}
|
|
684
1065
|
)
|
|
@@ -687,16 +1068,16 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
|
|
|
687
1068
|
)
|
|
688
1069
|
},
|
|
689
1070
|
n
|
|
690
|
-
)) }),
|
|
691
|
-
links:
|
|
1071
|
+
)) }), Le = ({
|
|
1072
|
+
links: a,
|
|
692
1073
|
isLinkActive: e,
|
|
693
1074
|
onLinkClick: o
|
|
694
|
-
}) => /* @__PURE__ */
|
|
1075
|
+
}) => /* @__PURE__ */ t.jsx("nav", { className: "flex flex-col gap-1", children: a?.map((r, n) => {
|
|
695
1076
|
const i = e(r.path) || (r.relatedPaths?.some(
|
|
696
|
-
(
|
|
1077
|
+
(u) => e(u)
|
|
697
1078
|
) ?? !1);
|
|
698
|
-
return r.isView && r.viewAccess() && /* @__PURE__ */
|
|
699
|
-
|
|
1079
|
+
return r.isView && r.viewAccess() && /* @__PURE__ */ t.jsx(
|
|
1080
|
+
c.div,
|
|
700
1081
|
{
|
|
701
1082
|
initial: { opacity: 0 },
|
|
702
1083
|
animate: { opacity: 1 },
|
|
@@ -706,21 +1087,21 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
|
|
|
706
1087
|
ease: "easeOut"
|
|
707
1088
|
},
|
|
708
1089
|
className: "relative flex justify-center w-full items-center px-3",
|
|
709
|
-
children: /* @__PURE__ */
|
|
1090
|
+
children: /* @__PURE__ */ t.jsxs(
|
|
710
1091
|
"button",
|
|
711
1092
|
{
|
|
712
1093
|
onClick: () => {
|
|
713
1094
|
o?.(r.path);
|
|
714
1095
|
},
|
|
715
|
-
className:
|
|
1096
|
+
className: f(
|
|
716
1097
|
"nav-link-item flex rounded-lg cursor-pointer relative overflow-hidden h-10 ",
|
|
717
1098
|
"transition-all duration-300 ease-out w-full",
|
|
718
1099
|
"group hover:bg-neutral-medium-selected",
|
|
719
1100
|
i ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
|
|
720
1101
|
),
|
|
721
1102
|
children: [
|
|
722
|
-
/* @__PURE__ */
|
|
723
|
-
|
|
1103
|
+
/* @__PURE__ */ t.jsx($, { mode: "wait", children: i && /* @__PURE__ */ t.jsx(
|
|
1104
|
+
c.div,
|
|
724
1105
|
{
|
|
725
1106
|
layoutId: "nav-active-bg",
|
|
726
1107
|
className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
|
|
@@ -734,8 +1115,8 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
|
|
|
734
1115
|
}
|
|
735
1116
|
}
|
|
736
1117
|
) }),
|
|
737
|
-
/* @__PURE__ */
|
|
738
|
-
|
|
1118
|
+
/* @__PURE__ */ t.jsxs(
|
|
1119
|
+
c.div,
|
|
739
1120
|
{
|
|
740
1121
|
className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
|
|
741
1122
|
animate: {
|
|
@@ -746,9 +1127,9 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
|
|
|
746
1127
|
ease: "easeOut"
|
|
747
1128
|
},
|
|
748
1129
|
children: [
|
|
749
|
-
/* @__PURE__ */
|
|
750
|
-
/* @__PURE__ */
|
|
751
|
-
|
|
1130
|
+
/* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-3", children: [
|
|
1131
|
+
/* @__PURE__ */ t.jsx(
|
|
1132
|
+
c.div,
|
|
752
1133
|
{
|
|
753
1134
|
className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
|
|
754
1135
|
animate: {
|
|
@@ -760,16 +1141,16 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
|
|
|
760
1141
|
},
|
|
761
1142
|
children: typeof r.icon == "function" ? r.icon({
|
|
762
1143
|
size: 24,
|
|
763
|
-
className:
|
|
1144
|
+
className: f(
|
|
764
1145
|
"nav-icon transition-colors duration-250 ease-out",
|
|
765
1146
|
i ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
|
|
766
1147
|
)
|
|
767
1148
|
}) : null
|
|
768
1149
|
}
|
|
769
1150
|
),
|
|
770
|
-
/* @__PURE__ */
|
|
1151
|
+
/* @__PURE__ */ t.jsx("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: r.title })
|
|
771
1152
|
] }),
|
|
772
|
-
/* @__PURE__ */
|
|
1153
|
+
/* @__PURE__ */ t.jsx("div", { className: "badge-in-link", children: r.count && r.count ? /* @__PURE__ */ t.jsx(F, { count: r.count, maxCount: 9, className: "" }) : "" })
|
|
773
1154
|
]
|
|
774
1155
|
}
|
|
775
1156
|
)
|
|
@@ -779,42 +1160,42 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
|
|
|
779
1160
|
},
|
|
780
1161
|
n
|
|
781
1162
|
);
|
|
782
|
-
}) }),
|
|
783
|
-
isActiveModalNotification:
|
|
1163
|
+
}) }), $e = ({
|
|
1164
|
+
isActiveModalNotification: a,
|
|
784
1165
|
setIsActiveModalNotification: e
|
|
785
1166
|
}) => ({ handleNotificationClick: () => {
|
|
786
1167
|
e(!0);
|
|
787
|
-
}, isActiveModalNotification:
|
|
788
|
-
const e =
|
|
1168
|
+
}, isActiveModalNotification: a }), Re = (a) => {
|
|
1169
|
+
const e = C(null);
|
|
789
1170
|
return {
|
|
790
|
-
isCollapsed:
|
|
1171
|
+
isCollapsed: a,
|
|
791
1172
|
navbarRef: e
|
|
792
1173
|
};
|
|
793
|
-
},
|
|
794
|
-
isCollapsed:
|
|
1174
|
+
}, Pe = ({
|
|
1175
|
+
isCollapsed: a,
|
|
795
1176
|
onToggle: e
|
|
796
|
-
}) => /* @__PURE__ */
|
|
1177
|
+
}) => /* @__PURE__ */ t.jsx("div", { className: "", children: /* @__PURE__ */ t.jsx(
|
|
797
1178
|
"button",
|
|
798
1179
|
{
|
|
799
1180
|
onClick: e,
|
|
800
|
-
title:
|
|
801
|
-
"aria-label":
|
|
1181
|
+
title: a ? "Expandir Navbar" : "Contraer Navbar",
|
|
1182
|
+
"aria-label": a ? "Expandir Navbar" : "Contraer Navbar",
|
|
802
1183
|
className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
|
|
803
|
-
children:
|
|
1184
|
+
children: a ? /* @__PURE__ */ t.jsx(N.CloseNavBarDesktop, { size: 34, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ t.jsx(N.CloseNavBarDesktop, { size: 34, className: "rotate-0 transition-transform duration-300" })
|
|
804
1185
|
}
|
|
805
|
-
) }),
|
|
1186
|
+
) }), qe = ({ logoUrl: a, companyName: e }) => /* @__PURE__ */ t.jsx("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ t.jsx(
|
|
806
1187
|
"img",
|
|
807
1188
|
{
|
|
808
|
-
src:
|
|
1189
|
+
src: a,
|
|
809
1190
|
className: "h-2/3 rounded-full",
|
|
810
1191
|
alt: e ?? ""
|
|
811
1192
|
}
|
|
812
|
-
) }),
|
|
813
|
-
const o =
|
|
814
|
-
return
|
|
1193
|
+
) }), Te = (a, e = !0) => {
|
|
1194
|
+
const o = C(null);
|
|
1195
|
+
return A(() => {
|
|
815
1196
|
if (!e) return;
|
|
816
1197
|
const r = (n) => {
|
|
817
|
-
o.current && !o.current.contains(n.target) &&
|
|
1198
|
+
o.current && !o.current.contains(n.target) && a();
|
|
818
1199
|
};
|
|
819
1200
|
return document.addEventListener("mousedown", r, {
|
|
820
1201
|
capture: !0
|
|
@@ -827,60 +1208,62 @@ const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("di
|
|
|
827
1208
|
capture: !0
|
|
828
1209
|
});
|
|
829
1210
|
};
|
|
830
|
-
}, [
|
|
1211
|
+
}, [a, e]), o;
|
|
831
1212
|
};
|
|
832
1213
|
export {
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
Te as
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
1214
|
+
M as Avatar,
|
|
1215
|
+
F as Badge,
|
|
1216
|
+
De as Button,
|
|
1217
|
+
Fe as CardProfile,
|
|
1218
|
+
Me as ChangueAccount,
|
|
1219
|
+
ze as CheckBox,
|
|
1220
|
+
Ye as CheckboxFormik,
|
|
1221
|
+
qe as CompanyLogo,
|
|
1222
|
+
Ue as DialogModal,
|
|
1223
|
+
Ze as DrawerDesktop,
|
|
1224
|
+
Qe as DrawerMobile,
|
|
1225
|
+
Xt as DropZone,
|
|
1226
|
+
tt as Header,
|
|
1227
|
+
N as Icons,
|
|
1228
|
+
rt as Input,
|
|
1229
|
+
nt as InputFormik,
|
|
1230
|
+
Et as LayoutGeneric,
|
|
1231
|
+
st as Logo,
|
|
1232
|
+
ct as Menu,
|
|
1233
|
+
Be as NavBarActions,
|
|
1234
|
+
Pe as NavbarCollapseButton,
|
|
1235
|
+
Le as NavbarLinks,
|
|
1236
|
+
Ie as NavigationLink,
|
|
1237
|
+
Wt as OtpInput,
|
|
1238
|
+
dt as Pagination,
|
|
1239
|
+
je as ProfilePictureUpload,
|
|
1240
|
+
mt as ProgressBar,
|
|
1241
|
+
Ce as SecondaryBar,
|
|
1242
|
+
xt as Select,
|
|
1243
|
+
gt as SelectFormik,
|
|
1244
|
+
ke as Sidebar,
|
|
1245
|
+
te as SidebarProvider,
|
|
1246
|
+
Ft as SidebarRefProvider,
|
|
1247
|
+
bt as Spinner,
|
|
1248
|
+
Ne as Steps,
|
|
1249
|
+
wt as SwipeContainer,
|
|
1250
|
+
Nt as TabLinks,
|
|
1251
|
+
St as Table,
|
|
1252
|
+
kt as TableBody,
|
|
1253
|
+
It as TableCaption,
|
|
1254
|
+
Bt as TableCell,
|
|
1255
|
+
Lt as TableFooter,
|
|
1256
|
+
$t as TableHead,
|
|
1257
|
+
Rt as TableHeader,
|
|
1258
|
+
Pt as TableRow,
|
|
1259
|
+
Tt as TextArea,
|
|
1260
|
+
Ot as Tooltip,
|
|
1261
|
+
$e as useActionsNavbar,
|
|
1262
|
+
Te as useClickOutside,
|
|
1263
|
+
Ve as useDialogControl,
|
|
1264
|
+
Je as useDrawerDesktop,
|
|
1265
|
+
_e as useDrawerMobile,
|
|
1266
|
+
Re as useNavbarCollapse,
|
|
1267
|
+
Se as useSidebar,
|
|
1268
|
+
O as useSidebarContext
|
|
886
1269
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "prometeo-design-system",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.6.
|
|
4
|
+
"version": "1.6.6",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "design kit system",
|
|
7
7
|
"main": "dist/prometeo-design-system.umd.js",
|
|
@@ -77,6 +77,10 @@
|
|
|
77
77
|
"types": "./dist/ProgressBar.d.ts",
|
|
78
78
|
"import": "./dist/ProgressBar.es.js"
|
|
79
79
|
},
|
|
80
|
+
"./ProfilePictureUpload": {
|
|
81
|
+
"types": "./dist/ProfilePictureUpload.d.ts",
|
|
82
|
+
"import": "./dist/ProfilePictureUpload.es.js"
|
|
83
|
+
},
|
|
80
84
|
"./Select": {
|
|
81
85
|
"types": "./dist/Select.d.ts",
|
|
82
86
|
"import": "./dist/Select.es.js"
|
|
@@ -89,6 +93,10 @@
|
|
|
89
93
|
"types": "./dist/Spinner.d.ts",
|
|
90
94
|
"import": "./dist/Spinner.es.js"
|
|
91
95
|
},
|
|
96
|
+
"./Steps": {
|
|
97
|
+
"types": "./dist/Steps.d.ts",
|
|
98
|
+
"import": "./dist/Steps.es.js"
|
|
99
|
+
},
|
|
92
100
|
"./SwipeContainer": {
|
|
93
101
|
"types": "./dist/SwipeContainer.d.ts",
|
|
94
102
|
"import": "./dist/SwipeContainer.es.js"
|