prometeo-design-system 2.7.9 → 2.8.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/Button.es.js +5 -5
- package/dist/{CardProfile-DV3gwvqE.js → CardProfile-WHoeSibd.js} +24 -24
- package/dist/CardProfile.es.js +1 -1
- package/dist/CheckBox.es.js +4 -4
- package/dist/DatePicker.es.js +68 -68
- package/dist/DrawerDesktop.es.js +4 -4
- package/dist/DropZone.es.js +32 -32
- package/dist/FAButton.es.js +2 -2
- package/dist/HelperComponent-BeNlTMqI.js +24 -0
- package/dist/Icons/Icons.d.ts +61 -1
- package/dist/Icons.es.js +572 -410
- package/dist/{ImageGallery-D8nIvBpV.js → ImageGallery-WKzUevOQ.js} +43 -43
- package/dist/ImageGallery.es.js +1 -1
- package/dist/{Input-60IT1aGF.js → Input-Bdiozi8s.js} +68 -82
- package/dist/Input.es.js +1 -1
- package/dist/InputMultiple.es.js +51 -51
- package/dist/Logo.es.js +3 -3
- package/dist/Menu.es.js +2 -2
- package/dist/OtpInput.es.js +42 -42
- package/dist/Pagination.es.js +1 -1
- package/dist/RadioButton.es.js +1 -1
- package/dist/{Select-C4UvSsof.js → Select-DpnghyhT.js} +164 -164
- package/dist/Select.es.js +1 -1
- package/dist/SelectSearch.es.js +1 -1
- package/dist/Steps.es.js +14 -14
- package/dist/TabLinks.es.js +2 -2
- package/dist/Table.es.js +2 -2
- package/dist/Toast.es.js +23 -23
- package/dist/Tooltip.es.js +7 -7
- package/dist/components/Spinner/SpinnerV2.d.ts +12 -0
- package/dist/components/Toaster/Toaster.d.ts +3 -3
- package/dist/exports/Icons.d.ts +1 -1
- package/dist/index.d.ts +0 -12
- package/dist/prometeo-design-system.css +1 -1
- package/dist/prometeo-design-system.es.js +111 -122
- package/package.json +2 -27
- package/dist/CheckboxFormik.d.ts +0 -6
- package/dist/CheckboxFormik.es.js +0 -88
- package/dist/HelperComponent-U6mPwuDH.js +0 -24
- package/dist/InputFormik.d.ts +0 -6
- package/dist/InputFormik.es.js +0 -213
- package/dist/InputFormikV2.d.ts +0 -6
- package/dist/InputFormikV2.es.js +0 -41
- package/dist/RadioButtonFormik.d.ts +0 -2
- package/dist/RadioButtonFormik.es.js +0 -30
- package/dist/SelectFormik.d.ts +0 -6
- package/dist/SelectFormik.es.js +0 -62
- package/dist/SelectFormikLegacy.d.ts +0 -6
- package/dist/SelectFormikLegacy.es.js +0 -194
- package/dist/components/CheckboxFormik/CheckboxFormik.d.ts +0 -12
- package/dist/components/InputFormik/InputFormik.d.ts +0 -23
- package/dist/components/InputFormik/InputFormikV2.d.ts +0 -6
- package/dist/components/RadioButtonFormik/RadioButtonFormik.d.ts +0 -8
- package/dist/components/SelectFormik/SelectFormik.d.ts +0 -8
- package/dist/components/SelectFormik/SelectFormikLegacy.d.ts +0 -21
- package/dist/exports/CheckboxFormik.d.ts +0 -2
- package/dist/exports/InputFormik.d.ts +0 -2
- package/dist/exports/InputFormikV2.d.ts +0 -2
- package/dist/exports/RadioButtonFormik.d.ts +0 -1
- package/dist/exports/SelectFormik.d.ts +0 -2
- package/dist/exports/SelectFormikLegacy.d.ts +0 -2
- package/dist/pages/Autocomplete.page.d.ts +0 -2
- package/dist/pages/ButtonsPage.d.ts +0 -2
- package/dist/pages/DatePicker.d.ts +0 -2
- package/dist/pages/DialogPage.d.ts +0 -2
- package/dist/pages/DrawersPage.d.ts +0 -2
- package/dist/pages/ImagesPage.d.ts +0 -2
- package/dist/pages/OtpPage.d.ts +0 -2
- package/dist/pages/RecurrentDatePicker.page.d.ts +0 -2
- package/dist/pages/SelectsPage.d.ts +0 -2
- package/dist/pages/Skeletons.d.ts +0 -2
- package/dist/pages/ToastsPage.d.ts +0 -2
- package/dist/preview/AutocompletePreview.d.ts +0 -2
- package/dist/preview/ButtonPreview.d.ts +0 -2
- package/dist/preview/DialogModalPreview.d.ts +0 -2
- package/dist/preview/DrawerMobilePreview.d.ts +0 -2
- package/dist/preview/Dropzone.d.ts +0 -2
- package/dist/preview/FABPreview.d.ts +0 -2
- package/dist/preview/IconsPreview.d.ts +0 -2
- package/dist/preview/ImagePreview.d.ts +0 -2
- package/dist/preview/InputsPreviews.d.ts +0 -2
- package/dist/preview/Layout.d.ts +0 -2
- package/dist/preview/OTPPreview.d.ts +0 -2
- package/dist/preview/RadioButtonPreview.d.ts +0 -2
- package/dist/preview/RecurrentDatePickerPreview.d.ts +0 -2
- package/dist/preview/SegmentedButtonPreview.d.ts +0 -2
- package/dist/preview/SelectPreview/CustomFooterExample.d.ts +0 -2
- package/dist/preview/SelectPreview/SelectGroupedOptionsPreview.d.ts +0 -2
- package/dist/preview/SelectPreview/SelectPreview.d.ts +0 -2
- package/dist/preview/SidebarPreview.d.ts +0 -2
- package/dist/preview/StepsPreview.d.ts +0 -2
- package/dist/preview/SwitchPreview.d.ts +0 -2
- package/dist/preview/TabLinks.d.ts +0 -2
- package/dist/preview/TablePreview.d.ts +0 -2
- package/dist/preview/TextArea.d.ts +0 -2
- package/dist/preview/ToastsPreview.d.ts +0 -2
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { j as t } from "./jsx-runtime-DKDX3adD.js";
|
|
2
|
-
import
|
|
2
|
+
import Q, { memo as M, forwardRef as A, useRef as v, useEffect as ee, useCallback as i, useState as R, useImperativeHandle as te } from "react";
|
|
3
3
|
import { c as X } from "./cn-B6yFEsav.js";
|
|
4
|
-
import { u as
|
|
4
|
+
import { u as ne } from "./useDragScroll-CHN9OMwn.js";
|
|
5
5
|
import S from "./Button.es.js";
|
|
6
|
-
import {
|
|
7
|
-
const
|
|
8
|
-
const { ref: d, bind: a } =
|
|
6
|
+
import { Close as re, CrevronLeft as se, CrevronRight as ae } from "./Icons.es.js";
|
|
7
|
+
const L = M(A(({ images: n, className: c }, r) => {
|
|
8
|
+
const { ref: d, bind: a } = ne({
|
|
9
9
|
axis: "x",
|
|
10
10
|
friction: 0.9,
|
|
11
11
|
minVelocity: 0.5,
|
|
@@ -27,7 +27,7 @@ const O = D(L(({ images: n, className: c }, r) => {
|
|
|
27
27
|
onPointerCancel: a.onPointerCancel,
|
|
28
28
|
onClickCapture: a.onClickCapture,
|
|
29
29
|
"aria-label": "Image gallery",
|
|
30
|
-
children: n && n.length > 0 && n.map((l, o) =>
|
|
30
|
+
children: n && n.length > 0 && n.map((l, o) => Q.cloneElement(l, {
|
|
31
31
|
key: l.props.src || o,
|
|
32
32
|
...l.props,
|
|
33
33
|
galleryRef: r,
|
|
@@ -36,8 +36,8 @@ const O = D(L(({ images: n, className: c }, r) => {
|
|
|
36
36
|
}
|
|
37
37
|
);
|
|
38
38
|
}));
|
|
39
|
-
|
|
40
|
-
const
|
|
39
|
+
L.displayName = "GalleryPreview";
|
|
40
|
+
const O = M(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails: d, thumbnailsClassName: a, currentIndex: l, goToNext: o, goToPrevious: s, goToIndex: N }) => {
|
|
41
41
|
const h = v(null), y = v(null), w = v(null), m = v({
|
|
42
42
|
scale: 1,
|
|
43
43
|
translateX: 0,
|
|
@@ -49,23 +49,23 @@ const _ = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
|
|
|
49
49
|
distanceX: 0,
|
|
50
50
|
distanceY: 0
|
|
51
51
|
});
|
|
52
|
-
|
|
52
|
+
ee(() => {
|
|
53
53
|
w.current && w.current.focus();
|
|
54
54
|
}, []);
|
|
55
55
|
const k = i((e) => {
|
|
56
56
|
e.preventDefault(), e.stopPropagation(), e.key === "Escape" ? r() : e.key === "ArrowLeft" ? s() : e.key === "ArrowRight" && o();
|
|
57
|
-
}, [r, s, o]),
|
|
57
|
+
}, [r, s, o]), P = i((e) => {
|
|
58
58
|
u.current = { startX: e.touches[0].clientX, startY: e.touches[0].clientY, isDragging: !0, distanceX: 0, distanceY: 0 };
|
|
59
59
|
}, []), j = i((e) => {
|
|
60
60
|
const g = e.touches[0];
|
|
61
61
|
u.current = { ...u.current, isDragging: !0, distanceX: g.clientX - u.current.startX, distanceY: g.clientY - u.current.startY };
|
|
62
|
-
}, []),
|
|
62
|
+
}, []), z = i(() => {
|
|
63
63
|
u.current = { ...u.current, startX: 0, startY: 0, isDragging: !1 }, Math.abs(u.current.distanceX) > Math.abs(u.current.distanceY) && (u.current.distanceX < 0 ? o() : s());
|
|
64
64
|
}, [o, s]), C = i(() => {
|
|
65
65
|
const e = h.current;
|
|
66
66
|
if (!e) return;
|
|
67
|
-
const { scale: g, translateX: p, translateY:
|
|
68
|
-
e.style.transform = `scale(${g}) translate(${p}px, ${
|
|
67
|
+
const { scale: g, translateX: p, translateY: I } = m.current;
|
|
68
|
+
e.style.transform = `scale(${g}) translate(${p}px, ${I}px)`, e.style.transformOrigin = "center center", e.style.transition = "transform 0.1s ease-out";
|
|
69
69
|
}, []), b = i(() => {
|
|
70
70
|
m.current = { scale: 1, translateX: 0, translateY: 0 }, h.current && (h.current.style.transform = "scale(1) translate(0px, 0px)", h.current.style.transformOrigin = "center center");
|
|
71
71
|
}, []), f = i((e) => {
|
|
@@ -75,17 +75,17 @@ const _ = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
|
|
|
75
75
|
e.deltaY < 0 ? o() : e.deltaY > 0 && s();
|
|
76
76
|
return;
|
|
77
77
|
}
|
|
78
|
-
const
|
|
79
|
-
let x =
|
|
80
|
-
if (x = Math.max(
|
|
78
|
+
const I = 2e-3, D = 1, B = 8, F = -e.deltaY * I, E = m.current.scale;
|
|
79
|
+
let x = E + F;
|
|
80
|
+
if (x = Math.max(D, Math.min(B, x)), x === D) {
|
|
81
81
|
b();
|
|
82
82
|
return;
|
|
83
83
|
}
|
|
84
|
-
const Y = p.getBoundingClientRect(),
|
|
84
|
+
const Y = p.getBoundingClientRect(), G = e.clientX - Y.left, W = e.clientY - Y.top, H = Y.width / 2, K = Y.height / 2, $ = G - H, q = W - K, T = x / E, U = m.current.translateX, V = m.current.translateY, Z = U - $ * (T - 1) / x, J = V - q * (T - 1) / x;
|
|
85
85
|
m.current = {
|
|
86
86
|
scale: x,
|
|
87
|
-
translateX:
|
|
88
|
-
translateY:
|
|
87
|
+
translateX: Z,
|
|
88
|
+
translateY: J
|
|
89
89
|
}, C();
|
|
90
90
|
}, [o, s, C, b]);
|
|
91
91
|
return n.length === 0 ? null : /* @__PURE__ */ t.jsxs(
|
|
@@ -95,9 +95,9 @@ const _ = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
|
|
|
95
95
|
className: X("fixed inset-0 z-50 bg-black/90 flex items-center justify-center lg:px-16", c),
|
|
96
96
|
onClick: r,
|
|
97
97
|
onKeyDown: k,
|
|
98
|
-
onTouchStart:
|
|
98
|
+
onTouchStart: P,
|
|
99
99
|
onTouchMove: j,
|
|
100
|
-
onTouchEnd:
|
|
100
|
+
onTouchEnd: z,
|
|
101
101
|
tabIndex: 0,
|
|
102
102
|
role: "dialog",
|
|
103
103
|
"aria-modal": "true",
|
|
@@ -109,9 +109,9 @@ const _ = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
|
|
|
109
109
|
color: "secondary",
|
|
110
110
|
size: "small",
|
|
111
111
|
onClick: r,
|
|
112
|
-
className: "
|
|
112
|
+
className: "text-white! hover:text-gray-300! w-auto! h-auto! p-2!",
|
|
113
113
|
"aria-label": "Close gallery",
|
|
114
|
-
children: /* @__PURE__ */ t.jsx(
|
|
114
|
+
children: /* @__PURE__ */ t.jsx(re, { size: 24 })
|
|
115
115
|
}
|
|
116
116
|
) }),
|
|
117
117
|
n.length > 1 && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
|
|
@@ -131,9 +131,9 @@ const _ = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
|
|
|
131
131
|
onClick: (e) => {
|
|
132
132
|
e.stopPropagation(), s();
|
|
133
133
|
},
|
|
134
|
-
className: "
|
|
134
|
+
className: "text-white! hover:text-gray-300! w-auto! h-auto! p-2!",
|
|
135
135
|
"aria-label": "Previous image",
|
|
136
|
-
children: /* @__PURE__ */ t.jsx(
|
|
136
|
+
children: /* @__PURE__ */ t.jsx(se, { size: 24 })
|
|
137
137
|
}
|
|
138
138
|
)
|
|
139
139
|
}
|
|
@@ -154,9 +154,9 @@ const _ = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
|
|
|
154
154
|
onClick: (e) => {
|
|
155
155
|
e.stopPropagation(), o();
|
|
156
156
|
},
|
|
157
|
-
className: "
|
|
157
|
+
className: "text-white! hover:text-gray-300! w-auto! h-auto! p-2!",
|
|
158
158
|
"aria-label": "Next image",
|
|
159
|
-
children: /* @__PURE__ */ t.jsx(
|
|
159
|
+
children: /* @__PURE__ */ t.jsx(ae, { size: 24 })
|
|
160
160
|
}
|
|
161
161
|
)
|
|
162
162
|
}
|
|
@@ -194,7 +194,7 @@ const _ = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
|
|
|
194
194
|
)
|
|
195
195
|
}
|
|
196
196
|
),
|
|
197
|
-
d && /* @__PURE__ */ t.jsx("div", { className: " w-full absolute items-center flex justify-center left-0 right-0 z-
|
|
197
|
+
d && /* @__PURE__ */ t.jsx("div", { className: " w-full absolute items-center flex justify-center left-0 right-0 z-100 bottom-0", children: /* @__PURE__ */ t.jsx(_, { images: n, currentIndex: l, goToIndex: N, thumbnailsClassName: a }) }),
|
|
198
198
|
n.length > 1 && /* @__PURE__ */ t.jsxs("div", { className: "absolute bottom-20 left-1/2 transform -translate-x-1/2 text-neutral-default-default prometeo-fonts-label-xlarge px-4 py-2 rounded-full", children: [
|
|
199
199
|
l + 1,
|
|
200
200
|
" / ",
|
|
@@ -204,13 +204,13 @@ const _ = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
|
|
|
204
204
|
}
|
|
205
205
|
);
|
|
206
206
|
});
|
|
207
|
-
|
|
208
|
-
const
|
|
207
|
+
O.displayName = "LightBox";
|
|
208
|
+
const le = (n, c) => {
|
|
209
209
|
if (n.currentIndex !== c.currentIndex || n.thumbnailsClassName !== c.thumbnailsClassName || n.images.length !== c.images.length) return !1;
|
|
210
210
|
for (let r = 0; r < n.images.length; r++)
|
|
211
211
|
if (n.images[r].src !== c.images[r].src) return !1;
|
|
212
212
|
return !0;
|
|
213
|
-
},
|
|
213
|
+
}, _ = M(({ images: n, currentIndex: c, goToIndex: r, thumbnailsClassName: d }) => /* @__PURE__ */ t.jsxs(
|
|
214
214
|
"div",
|
|
215
215
|
{
|
|
216
216
|
className: "flex gap-4 w-max overflow-x-auto overflow-y-visible max-w-full px-16 py-4",
|
|
@@ -250,9 +250,9 @@ const se = (n, c) => {
|
|
|
250
250
|
))
|
|
251
251
|
]
|
|
252
252
|
}
|
|
253
|
-
),
|
|
254
|
-
|
|
255
|
-
const
|
|
253
|
+
), le);
|
|
254
|
+
_.displayName = "Thumbnails";
|
|
255
|
+
const oe = A(
|
|
256
256
|
(n, c) => {
|
|
257
257
|
const {
|
|
258
258
|
children: r,
|
|
@@ -262,15 +262,15 @@ const ae = L(
|
|
|
262
262
|
thumbnailsClassName: o
|
|
263
263
|
} = n, [s, N] = R([]), [h, y] = R(!1), [w, m] = R(0), u = r ? Array.isArray(r) ? r : [r] : [], k = i((f) => {
|
|
264
264
|
N((e) => e.some((p) => p.src === f.src) ? e : [...e, f]);
|
|
265
|
-
}, []),
|
|
265
|
+
}, []), P = i((f = 0) => {
|
|
266
266
|
m(f), y(!0);
|
|
267
267
|
}, []), j = i(() => {
|
|
268
268
|
y(!1);
|
|
269
269
|
}, []);
|
|
270
|
-
|
|
270
|
+
te(
|
|
271
271
|
c,
|
|
272
272
|
() => ({
|
|
273
|
-
openLightbox:
|
|
273
|
+
openLightbox: P,
|
|
274
274
|
closeLightbox: j,
|
|
275
275
|
isOpen: h,
|
|
276
276
|
addImage: k,
|
|
@@ -278,7 +278,7 @@ const ae = L(
|
|
|
278
278
|
}),
|
|
279
279
|
[s]
|
|
280
280
|
);
|
|
281
|
-
const
|
|
281
|
+
const z = i(() => {
|
|
282
282
|
m((f) => (f + 1) % s.length);
|
|
283
283
|
}, [s.length]), C = i(() => {
|
|
284
284
|
m((f) => (f - 1 + s.length) % s.length);
|
|
@@ -287,7 +287,7 @@ const ae = L(
|
|
|
287
287
|
}, []);
|
|
288
288
|
return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
|
|
289
289
|
/* @__PURE__ */ t.jsx(
|
|
290
|
-
|
|
290
|
+
L,
|
|
291
291
|
{
|
|
292
292
|
images: u,
|
|
293
293
|
className: d,
|
|
@@ -295,7 +295,7 @@ const ae = L(
|
|
|
295
295
|
}
|
|
296
296
|
),
|
|
297
297
|
h && /* @__PURE__ */ t.jsx(
|
|
298
|
-
|
|
298
|
+
O,
|
|
299
299
|
{
|
|
300
300
|
images: s,
|
|
301
301
|
closeLightbox: j,
|
|
@@ -303,7 +303,7 @@ const ae = L(
|
|
|
303
303
|
lightboxClassName: a,
|
|
304
304
|
thumbnailsClassName: o,
|
|
305
305
|
currentIndex: w,
|
|
306
|
-
goToNext:
|
|
306
|
+
goToNext: z,
|
|
307
307
|
goToPrevious: C,
|
|
308
308
|
goToIndex: b
|
|
309
309
|
}
|
|
@@ -311,7 +311,7 @@ const ae = L(
|
|
|
311
311
|
] });
|
|
312
312
|
}
|
|
313
313
|
);
|
|
314
|
-
|
|
314
|
+
oe.displayName = "ImageGallery";
|
|
315
315
|
export {
|
|
316
|
-
|
|
316
|
+
oe as I
|
|
317
317
|
};
|
package/dist/ImageGallery.es.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { j as r } from "./jsx-runtime-DKDX3adD.js";
|
|
2
|
-
import {
|
|
2
|
+
import { EyeVisibility as _, EyeVisibilityOff as q, Close as V } from "./Icons.es.js";
|
|
3
3
|
import { c as t } from "./cn-B6yFEsav.js";
|
|
4
|
-
import { useRef as
|
|
5
|
-
import
|
|
6
|
-
import { H as
|
|
7
|
-
|
|
8
|
-
const se = (o) => {
|
|
4
|
+
import { useRef as F, useLayoutEffect as ee, memo as te, forwardRef as re, useState as oe } from "react";
|
|
5
|
+
import le from "./Spinner.es.js";
|
|
6
|
+
import { H as se } from "./HelperComponent-BeNlTMqI.js";
|
|
7
|
+
const ae = (o) => {
|
|
9
8
|
let e = o;
|
|
10
9
|
for (; e && e !== document.body; ) {
|
|
11
10
|
const n = window.getComputedStyle(e).backgroundColor;
|
|
@@ -16,11 +15,11 @@ const se = (o) => {
|
|
|
16
15
|
const l = window.getComputedStyle(document.body).backgroundColor;
|
|
17
16
|
return l && l !== "transparent" && l !== "rgba(0, 0, 0, 0)" ? l : "rgb(255, 255, 255)";
|
|
18
17
|
};
|
|
19
|
-
function
|
|
20
|
-
const o =
|
|
21
|
-
return
|
|
18
|
+
function ne() {
|
|
19
|
+
const o = F(null);
|
|
20
|
+
return ee(() => {
|
|
22
21
|
if (!o.current || !o.current.parentElement) return;
|
|
23
|
-
const e =
|
|
22
|
+
const e = ae(o.current.parentElement);
|
|
24
23
|
o.current.style.backgroundColor = e;
|
|
25
24
|
}, []), {
|
|
26
25
|
ref: o
|
|
@@ -60,7 +59,7 @@ const b = {
|
|
|
60
59
|
label: t("text-success", "peer-focus:text-success-light"),
|
|
61
60
|
icon: t("text-success-light", "peer-focus:text-success-light")
|
|
62
61
|
}
|
|
63
|
-
}, S =
|
|
62
|
+
}, S = re(
|
|
64
63
|
({
|
|
65
64
|
label: o,
|
|
66
65
|
icon: e,
|
|
@@ -68,32 +67,32 @@ const b = {
|
|
|
68
67
|
onChange: C,
|
|
69
68
|
value: n,
|
|
70
69
|
name: g,
|
|
71
|
-
width:
|
|
70
|
+
width: x = "100%",
|
|
72
71
|
height: u,
|
|
73
72
|
variant: c = "default",
|
|
74
73
|
labelVariant: a = "default",
|
|
75
74
|
size: H = "medium",
|
|
76
|
-
disabled:
|
|
75
|
+
disabled: f = !1,
|
|
77
76
|
type: s = "text",
|
|
78
|
-
isFetching:
|
|
77
|
+
isFetching: p,
|
|
79
78
|
errorComponent: h,
|
|
80
79
|
helperComponent: w,
|
|
81
80
|
placeholder: $,
|
|
82
81
|
required: N = !1,
|
|
83
82
|
onFocus: k,
|
|
84
|
-
onBlur:
|
|
83
|
+
onBlur: I,
|
|
85
84
|
onKeyDown: L,
|
|
86
85
|
onKeyUp: R,
|
|
87
|
-
className:
|
|
88
|
-
style:
|
|
89
|
-
readOnly:
|
|
90
|
-
onClear:
|
|
91
|
-
...
|
|
92
|
-
},
|
|
93
|
-
const [y,
|
|
94
|
-
let
|
|
95
|
-
u && (
|
|
96
|
-
const
|
|
86
|
+
className: B,
|
|
87
|
+
style: P,
|
|
88
|
+
readOnly: D = !1,
|
|
89
|
+
onClear: z,
|
|
90
|
+
...v
|
|
91
|
+
}, A) => {
|
|
92
|
+
const [y, M] = oe(!1), { ref: O } = ne();
|
|
93
|
+
let d = H;
|
|
94
|
+
u && (d = "customHeight");
|
|
95
|
+
const i = {
|
|
97
96
|
small: {
|
|
98
97
|
container: "text-sm",
|
|
99
98
|
input: "h-10 px-3 text-[1rem] prometeo-fonts-body-large",
|
|
@@ -122,32 +121,32 @@ const b = {
|
|
|
122
121
|
label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-xs ",
|
|
123
122
|
icon: "w-6 h-6 right-3"
|
|
124
123
|
}
|
|
125
|
-
},
|
|
126
|
-
|
|
124
|
+
}, T = () => {
|
|
125
|
+
M(!y);
|
|
127
126
|
}, j = {};
|
|
128
|
-
|
|
129
|
-
const
|
|
127
|
+
x && x !== "100%" && (j.width = x), u && (j.height = u);
|
|
128
|
+
const E = c === "error" && h, G = !E && w, J = s === "password", K = () => a === "static" ? "-top-1 -translate-y-full left-0 pl-3" : e ? `${m ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1 peer-focus:ml-0 peer-focus:mr-0 ${l === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : `${m ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1`, Q = () => u ? i.customHeight.label : i[d].label, U = () => u ? { height: u } : {}, W = () => a === "default" ? o : $ || o || "", X = () => J ? e ? l === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : e ? l === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", Y = a === "default" && "transition-all duration-200 ease-in-out", m = h || w;
|
|
130
129
|
return /* @__PURE__ */ r.jsxs(
|
|
131
130
|
"div",
|
|
132
131
|
{
|
|
133
132
|
className: t(
|
|
134
133
|
"relative",
|
|
135
|
-
d
|
|
136
|
-
!
|
|
134
|
+
i[d].container,
|
|
135
|
+
!x && "w-full",
|
|
137
136
|
"bg-inherit",
|
|
138
137
|
a === "static" && "mt-2",
|
|
139
|
-
|
|
138
|
+
B
|
|
140
139
|
),
|
|
141
|
-
style: { ...
|
|
140
|
+
style: { ...P, ...j },
|
|
142
141
|
children: [
|
|
143
142
|
/* @__PURE__ */ r.jsx(
|
|
144
143
|
"input",
|
|
145
144
|
{
|
|
146
145
|
id: g,
|
|
147
146
|
name: g,
|
|
148
|
-
ref:
|
|
147
|
+
ref: A,
|
|
149
148
|
value: n,
|
|
150
|
-
placeholder:
|
|
149
|
+
placeholder: W(),
|
|
151
150
|
type: s === "password" && y ? "text" : s,
|
|
152
151
|
className: t(
|
|
153
152
|
"peer w-full border rounded-lg bg-transparent appearance-none transition-all duration-200 ease-in-out",
|
|
@@ -155,100 +154,87 @@ const b = {
|
|
|
155
154
|
a === "default" && "placeholder:text-transparent",
|
|
156
155
|
a === "static" && "placeholder:text-neutral-medium-default ",
|
|
157
156
|
b[c].input,
|
|
158
|
-
d
|
|
157
|
+
i[d].input,
|
|
159
158
|
e && "pr-10",
|
|
160
|
-
|
|
159
|
+
f && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
|
|
161
160
|
b[c].container,
|
|
162
|
-
|
|
161
|
+
X()
|
|
163
162
|
),
|
|
164
|
-
style:
|
|
163
|
+
style: U(),
|
|
165
164
|
onChange: C,
|
|
166
165
|
onFocus: k,
|
|
167
|
-
onBlur:
|
|
168
|
-
disabled:
|
|
166
|
+
onBlur: I,
|
|
167
|
+
disabled: f,
|
|
169
168
|
required: N,
|
|
170
169
|
onKeyDown: L,
|
|
171
170
|
onKeyUp: R,
|
|
172
|
-
defaultValue:
|
|
173
|
-
readOnly:
|
|
174
|
-
...
|
|
171
|
+
defaultValue: v.defaultValue,
|
|
172
|
+
readOnly: D,
|
|
173
|
+
...v
|
|
175
174
|
}
|
|
176
175
|
),
|
|
177
176
|
/* @__PURE__ */ r.jsx(
|
|
178
177
|
"label",
|
|
179
178
|
{
|
|
180
|
-
ref:
|
|
179
|
+
ref: O,
|
|
181
180
|
htmlFor: g,
|
|
182
181
|
className: t(
|
|
183
182
|
"absolute left-3 pointer-events-none px-1 z-10",
|
|
184
|
-
|
|
185
|
-
U(),
|
|
186
|
-
b[c].label,
|
|
183
|
+
Y,
|
|
187
184
|
Q(),
|
|
185
|
+
b[c].label,
|
|
186
|
+
K(),
|
|
188
187
|
N && "after:content-['*'] after:text-error-default after:ml-1",
|
|
189
|
-
|
|
188
|
+
f && "text-neutral-medium-disabled prometeo-fonts-label-large"
|
|
190
189
|
),
|
|
191
190
|
children: o
|
|
192
191
|
}
|
|
193
192
|
),
|
|
194
|
-
(e || s === "password" ||
|
|
193
|
+
(e || s === "password" || p) && /* @__PURE__ */ r.jsx(
|
|
195
194
|
"button",
|
|
196
195
|
{
|
|
197
196
|
tabIndex: -1,
|
|
198
197
|
type: "button",
|
|
199
198
|
className: t(
|
|
200
|
-
`absolute ${
|
|
201
|
-
d
|
|
199
|
+
`absolute ${m ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10`,
|
|
200
|
+
i[d].icon,
|
|
202
201
|
b[c].icon,
|
|
203
|
-
s === "password" && !
|
|
202
|
+
s === "password" && !p ? "cursor-pointer" : "pointer-events-none",
|
|
204
203
|
l === "right" ? "right-3" : "left-3"
|
|
205
204
|
),
|
|
206
|
-
onClick: s === "password" && !
|
|
207
|
-
onMouseDown: (
|
|
205
|
+
onClick: s === "password" && !p ? T : void 0,
|
|
206
|
+
onMouseDown: (Z) => s === "password" && !p && Z.preventDefault(),
|
|
208
207
|
children: /* @__PURE__ */ r.jsxs("div", { children: [
|
|
209
|
-
|
|
210
|
-
s === "password" && (y ? /* @__PURE__ */ r.jsx(
|
|
208
|
+
p && s !== "password" && /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsx(le, { size: 24, color: "#7c86ff", loading: !0, variant: "clip" }) }),
|
|
209
|
+
s === "password" && (y ? /* @__PURE__ */ r.jsx(_, { size: 24, className: "" }) : /* @__PURE__ */ r.jsx(q, { size: 24, className: "" })),
|
|
211
210
|
e
|
|
212
211
|
] })
|
|
213
212
|
}
|
|
214
213
|
),
|
|
215
|
-
|
|
216
|
-
|
|
214
|
+
z && /* @__PURE__ */ r.jsx(
|
|
215
|
+
"button",
|
|
217
216
|
{
|
|
218
217
|
type: "button",
|
|
219
|
-
color: "secondary",
|
|
220
|
-
size: "small",
|
|
221
|
-
animate: !1,
|
|
222
218
|
className: t(
|
|
223
|
-
`absolute
|
|
224
|
-
"size-6 p-
|
|
225
|
-
"bg-
|
|
226
|
-
"
|
|
219
|
+
`absolute ${m ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10 right-1`,
|
|
220
|
+
"size-6 p-1 rounded-full",
|
|
221
|
+
"hover:bg-neutral-medium-hover transition-colors",
|
|
222
|
+
f && "opacity-50 cursor-not-allowed"
|
|
227
223
|
),
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
variant: "text",
|
|
232
|
-
animateIcon: !1,
|
|
233
|
-
icon: /* @__PURE__ */ r.jsx(z.Close, { size: 20, className: "" })
|
|
224
|
+
disabled: f,
|
|
225
|
+
onClick: z,
|
|
226
|
+
children: /* @__PURE__ */ r.jsx(V, { size: 20, className: "" })
|
|
234
227
|
}
|
|
235
228
|
),
|
|
236
|
-
|
|
237
|
-
oe,
|
|
238
|
-
{
|
|
239
|
-
className: "absolute ",
|
|
240
|
-
variant: c,
|
|
241
|
-
children: h || w
|
|
242
|
-
}
|
|
243
|
-
) })
|
|
229
|
+
m && /* @__PURE__ */ r.jsx("div", { className: "min-h-6", children: (E || G) && /* @__PURE__ */ r.jsx(se, { className: "absolute ", variant: c, children: h || w }) })
|
|
244
230
|
]
|
|
245
231
|
}
|
|
246
232
|
);
|
|
247
233
|
}
|
|
248
234
|
);
|
|
249
235
|
S.displayName = "Input";
|
|
250
|
-
const me =
|
|
236
|
+
const me = te(S);
|
|
251
237
|
export {
|
|
252
238
|
me as I,
|
|
253
|
-
|
|
239
|
+
ne as u
|
|
254
240
|
};
|
package/dist/Input.es.js
CHANGED