prometeo-design-system 1.6.2 → 1.6.3
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/InputFormik.es.js
CHANGED
|
@@ -1,95 +1,97 @@
|
|
|
1
|
-
import { j as
|
|
2
|
-
import { c as
|
|
3
|
-
import { useField as
|
|
4
|
-
import { useState as
|
|
5
|
-
import { Icons as
|
|
6
|
-
const
|
|
7
|
-
icon:
|
|
8
|
-
iconPosition:
|
|
1
|
+
import { j as e } from "./jsx-runtime-ByW6EXIE.js";
|
|
2
|
+
import { c as u } from "./cn-B6yFEsav.js";
|
|
3
|
+
import { useField as k, ErrorMessage as B } from "formik";
|
|
4
|
+
import { useState as w } from "react";
|
|
5
|
+
import { Icons as v } from "./Icons.es.js";
|
|
6
|
+
const U = ({
|
|
7
|
+
icon: a,
|
|
8
|
+
iconPosition: s = "left",
|
|
9
9
|
label: c,
|
|
10
|
-
className:
|
|
11
|
-
containerClassName:
|
|
12
|
-
id:
|
|
13
|
-
type:
|
|
14
|
-
labelVariant:
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
className: j,
|
|
11
|
+
containerClassName: N,
|
|
12
|
+
id: x,
|
|
13
|
+
type: p = "text",
|
|
14
|
+
labelVariant: r = "default",
|
|
15
|
+
placeholder: o,
|
|
16
|
+
disabled: h = !1,
|
|
17
|
+
...t
|
|
17
18
|
}) => {
|
|
18
|
-
const [
|
|
19
|
-
const n = () =>
|
|
20
|
-
return
|
|
21
|
-
},
|
|
22
|
-
|
|
19
|
+
const [l, g] = k(t), [d, y] = w(!1), [i, E] = w(!1), f = g.touched && g.error, b = l.value && l.value.toString().length > 0, m = p === "password", F = m ? i ? "text" : "password" : p, I = () => {
|
|
20
|
+
const n = () => a && s === "left" ? "left-9" : "left-0";
|
|
21
|
+
return r === "static" ? `-top-5 ${n()} scale-90 px-1` : d || b ? `-top-2 ${n()} scale-90` : `top-1/2 -translate-y-1/2 ${n()} scale-100`;
|
|
22
|
+
}, z = () => r === "static" ? "text-sm" : "text-sm peer-focus:text-sm peer-placeholder-shown:text-base", C = () => r === "static" ? o || c : o || "", K = () => m ? a ? s === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : a ? s === "left" ? "pl-10" : "pr-10" : "", P = () => {
|
|
23
|
+
E(!i);
|
|
23
24
|
};
|
|
24
|
-
return /* @__PURE__ */
|
|
25
|
-
/* @__PURE__ */
|
|
26
|
-
/* @__PURE__ */
|
|
25
|
+
return /* @__PURE__ */ e.jsxs("div", { className: u("relative w-full bg-inherit", r === "static" && "mt-2", N), children: [
|
|
26
|
+
/* @__PURE__ */ e.jsxs("div", { className: "relative bg-inherit", children: [
|
|
27
|
+
/* @__PURE__ */ e.jsx(
|
|
27
28
|
"input",
|
|
28
29
|
{
|
|
29
|
-
disabled:
|
|
30
|
-
id:
|
|
31
|
-
type:
|
|
32
|
-
name:
|
|
33
|
-
value:
|
|
34
|
-
placeholder:
|
|
35
|
-
onChange:
|
|
30
|
+
disabled: h,
|
|
31
|
+
id: x || t.name,
|
|
32
|
+
type: F,
|
|
33
|
+
name: l.name,
|
|
34
|
+
value: l.value || "",
|
|
35
|
+
placeholder: C(),
|
|
36
|
+
onChange: l.onChange,
|
|
36
37
|
onFocus: () => {
|
|
37
|
-
|
|
38
|
+
y(!0), t.onFocus?.();
|
|
38
39
|
},
|
|
39
|
-
onEmptied:
|
|
40
|
-
onKeyDown:
|
|
41
|
-
onKeyUp:
|
|
40
|
+
onEmptied: t.onEmptied,
|
|
41
|
+
onKeyDown: t.onKeyDown,
|
|
42
|
+
onKeyUp: t.onKeyUp,
|
|
42
43
|
onBlur: (n) => {
|
|
43
|
-
|
|
44
|
+
y(!1), t.onBlur?.(), l.onBlur(n);
|
|
44
45
|
},
|
|
45
|
-
className:
|
|
46
|
+
className: u(
|
|
46
47
|
"w-full px-3 h-12 text-left border-1 rounded-lg transition-all duration-200 ease-in-out text-neutral-default-default",
|
|
47
48
|
"bg-transparent focus:outline-none",
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
r === "default" && !o && "placeholder:text-transparent",
|
|
50
|
+
r === "default" && o && "placeholder:text-neutral-medium-default placeholder:opacity-50",
|
|
51
|
+
r === "static" && "placeholder:text-neutral-medium-default placeholder:opacity-50",
|
|
52
|
+
d ? "border-primary-default-default border-2 text-primary-default-default" : f ? "border-error-default-default" : "border-neutral-default-default hover:border-neutral-strong-default",
|
|
53
|
+
K(),
|
|
54
|
+
j
|
|
53
55
|
)
|
|
54
56
|
}
|
|
55
57
|
),
|
|
56
|
-
/* @__PURE__ */
|
|
58
|
+
/* @__PURE__ */ e.jsx(
|
|
57
59
|
"label",
|
|
58
60
|
{
|
|
59
|
-
htmlFor:
|
|
60
|
-
className:
|
|
61
|
+
htmlFor: x || t.name,
|
|
62
|
+
className: u(
|
|
61
63
|
"absolute transition-all duration-200 ease-in-out pointer-events-none bg-inherit px-1 z-10",
|
|
64
|
+
z(),
|
|
62
65
|
I(),
|
|
63
|
-
|
|
64
|
-
y || u ? "text-primary-default-default" : i ? "text-red-500" : "text-neutral-medium-default"
|
|
66
|
+
b || d ? "text-primary-default-default" : f ? "text-red-500" : "text-neutral-medium-default"
|
|
65
67
|
),
|
|
66
68
|
children: c
|
|
67
69
|
}
|
|
68
70
|
),
|
|
69
|
-
|
|
71
|
+
a && /* @__PURE__ */ e.jsx("div", { className: u(
|
|
70
72
|
"absolute top-1/2 -translate-y-1/2 text-neutral-medium-default",
|
|
71
|
-
|
|
72
|
-
), children:
|
|
73
|
-
|
|
73
|
+
s === "left" ? "left-3" : "right-3"
|
|
74
|
+
), children: a }),
|
|
75
|
+
m && /* @__PURE__ */ e.jsx(
|
|
74
76
|
"button",
|
|
75
77
|
{
|
|
76
78
|
type: "button",
|
|
77
|
-
onClick:
|
|
78
|
-
className:
|
|
79
|
+
onClick: P,
|
|
80
|
+
className: u(
|
|
79
81
|
"absolute top-1/2 -translate-y-1/2 p-1 text-neutral-medium-default hover:text-neutral-strong-default",
|
|
80
82
|
"transition-colors duration-200 focus:outline-none focus:text-primary-default-default",
|
|
81
|
-
|
|
83
|
+
a && s === "right" ? "right-8" : "right-3"
|
|
82
84
|
),
|
|
83
85
|
tabIndex: -1,
|
|
84
|
-
disabled:
|
|
85
|
-
children:
|
|
86
|
+
disabled: h,
|
|
87
|
+
children: i ? /* @__PURE__ */ e.jsx(v.EyeVisibility, { size: 24, className: "text-neutral-default-default" }) : /* @__PURE__ */ e.jsx(v.EyeVisibilityOff, { size: 24, className: "text-neutral-default-default" })
|
|
86
88
|
}
|
|
87
89
|
)
|
|
88
90
|
] }),
|
|
89
|
-
|
|
90
|
-
|
|
91
|
+
f && /* @__PURE__ */ e.jsx(
|
|
92
|
+
B,
|
|
91
93
|
{
|
|
92
|
-
name:
|
|
94
|
+
name: t.name,
|
|
93
95
|
component: "span",
|
|
94
96
|
className: "block text-error-default-default text-xs mt-1"
|
|
95
97
|
}
|
|
@@ -97,5 +99,5 @@ const T = ({
|
|
|
97
99
|
] });
|
|
98
100
|
};
|
|
99
101
|
export {
|
|
100
|
-
|
|
102
|
+
U as default
|
|
101
103
|
};
|
|
@@ -10,6 +10,7 @@ export interface IInputFormik {
|
|
|
10
10
|
type?: string;
|
|
11
11
|
name: string;
|
|
12
12
|
labelVariant?: LabelVariant;
|
|
13
|
+
placeholder?: string;
|
|
13
14
|
onBlur?: () => void;
|
|
14
15
|
onFocus?: () => void;
|
|
15
16
|
disabled?: boolean;
|
|
@@ -17,5 +18,5 @@ export interface IInputFormik {
|
|
|
17
18
|
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
18
19
|
onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
19
20
|
}
|
|
20
|
-
declare const InputFormik: ({ icon, iconPosition, label, className, containerClassName, id, type, labelVariant, disabled, ...props }: IInputFormik) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
declare const InputFormik: ({ icon, iconPosition, label, className, containerClassName, id, type, labelVariant, placeholder, disabled, ...props }: IInputFormik) => import("react/jsx-runtime").JSX.Element;
|
|
21
22
|
export default InputFormik;
|