prometeo-design-system 4.4.0 → 4.4.1
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/Chip.d.ts +6 -0
- package/dist/Chip.es.js +55 -0
- package/dist/Input.es.js +108 -95
- package/dist/PyrionLayout.es.js +5 -4
- package/dist/Select.es.js +382 -429
- package/dist/SelectSearch.es.js +38 -38
- package/dist/components/Input/Input.d.ts +3 -3
- package/dist/components/Shared/Chip.d.ts +2 -2
- package/dist/exports/Chip.d.ts +2 -0
- package/package.json +8 -1
package/dist/Chip.d.ts
ADDED
package/dist/Chip.es.js
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { j as t } from "./jsx-runtime-GkKLlHH4.js";
|
|
2
|
+
import { c as r } from "./cn-B6yFEsav.js";
|
|
3
|
+
import { memo as f } from "react";
|
|
4
|
+
import { Close as p } from "./Icons/Close.es.js";
|
|
5
|
+
const m = {
|
|
6
|
+
default: {
|
|
7
|
+
container: "text-neutral-default-default border-neutral-default-default ",
|
|
8
|
+
icon: ""
|
|
9
|
+
},
|
|
10
|
+
error: {
|
|
11
|
+
container: "",
|
|
12
|
+
icon: ""
|
|
13
|
+
},
|
|
14
|
+
success: {
|
|
15
|
+
container: "",
|
|
16
|
+
icon: ""
|
|
17
|
+
}
|
|
18
|
+
}, l = {
|
|
19
|
+
icon: " text-neutral-default-disabled",
|
|
20
|
+
container: " border-neutral-strong-default text-neutral-default-disabled"
|
|
21
|
+
}, i = ({ id: a, label: c, onRemove: n, className: u, disabled: e, variant: d = "default", tabIndex: o }) => /* @__PURE__ */ t.jsxs(
|
|
22
|
+
"div",
|
|
23
|
+
{
|
|
24
|
+
tabIndex: o,
|
|
25
|
+
className: r(
|
|
26
|
+
"inline-flex max-w-[calc(50%-0.25rem)] items-center gap-1 px-2 py-1 bg-inherit text-xs rounded-lg border h-[30px]",
|
|
27
|
+
m[d].container,
|
|
28
|
+
e && l.container
|
|
29
|
+
),
|
|
30
|
+
children: [
|
|
31
|
+
/* @__PURE__ */ t.jsx("span", { className: "truncate w-max ", children: c }),
|
|
32
|
+
n && /* @__PURE__ */ t.jsx(
|
|
33
|
+
"button",
|
|
34
|
+
{
|
|
35
|
+
onMouseDown: (s) => {
|
|
36
|
+
e || (s.stopPropagation(), s.preventDefault(), a && n?.(a));
|
|
37
|
+
},
|
|
38
|
+
className: r(
|
|
39
|
+
"shrink-0 p-0.5 transition-all duration-200 hover:text-neutral-default-hover cursor-pointer z-50 text-neutral-default-default hover:scale-105",
|
|
40
|
+
e && "cursor-default hover:scale-100",
|
|
41
|
+
u
|
|
42
|
+
),
|
|
43
|
+
type: "button",
|
|
44
|
+
tabIndex: o,
|
|
45
|
+
children: /* @__PURE__ */ t.jsx(p, { size: 18, className: r(e && l.icon) })
|
|
46
|
+
}
|
|
47
|
+
)
|
|
48
|
+
]
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
i.displayName = "Chip";
|
|
52
|
+
const C = f(i);
|
|
53
|
+
export {
|
|
54
|
+
C as default
|
|
55
|
+
};
|
package/dist/Input.es.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { j as t } from "./jsx-runtime-GkKLlHH4.js";
|
|
2
2
|
import { c as e } from "./cn-B6yFEsav.js";
|
|
3
|
-
import { memo as
|
|
4
|
-
import
|
|
5
|
-
import { u as
|
|
6
|
-
import { H as
|
|
7
|
-
import { EyeVisibility as
|
|
8
|
-
import { EyeVisibilityOff as
|
|
3
|
+
import { memo as Z, forwardRef as q, useState as V } from "react";
|
|
4
|
+
import F from "./Spinner.es.js";
|
|
5
|
+
import { u as ee } from "./useLabelBackground-D5SzHhl_.js";
|
|
6
|
+
import { H as te } from "./HelperComponent-ljsn0xD6.js";
|
|
7
|
+
import { EyeVisibility as re } from "./Icons/EyeVisibility.es.js";
|
|
8
|
+
import { EyeVisibilityOff as oe } from "./Icons/EyeVisibilityOff.es.js";
|
|
9
9
|
import le from "./Button.es.js";
|
|
10
|
-
import { Close as
|
|
10
|
+
import { Close as se } from "./Icons/Close.es.js";
|
|
11
11
|
const x = {
|
|
12
12
|
default: {
|
|
13
13
|
container: "",
|
|
@@ -42,159 +42,173 @@ const x = {
|
|
|
42
42
|
label: e("text-success", "peer-focus:text-success-light"),
|
|
43
43
|
icon: e("text-success-light", "peer-focus:text-success-light")
|
|
44
44
|
}
|
|
45
|
-
},
|
|
45
|
+
}, ae = q(
|
|
46
46
|
({
|
|
47
|
-
label:
|
|
48
|
-
icon:
|
|
49
|
-
iconPosition:
|
|
47
|
+
label: b,
|
|
48
|
+
icon: l,
|
|
49
|
+
iconPosition: s = "left",
|
|
50
50
|
onChange: I,
|
|
51
51
|
value: S,
|
|
52
|
-
name:
|
|
53
|
-
width:
|
|
52
|
+
name: h,
|
|
53
|
+
width: m = "100%",
|
|
54
54
|
height: a,
|
|
55
55
|
variant: u = "default",
|
|
56
|
-
labelVariant:
|
|
57
|
-
size:
|
|
58
|
-
disabled:
|
|
56
|
+
labelVariant: o = "default",
|
|
57
|
+
size: g = "medium",
|
|
58
|
+
disabled: c = !1,
|
|
59
59
|
type: r = "text",
|
|
60
60
|
isFetching: n,
|
|
61
|
-
errorComponent:
|
|
62
|
-
helperComponent:
|
|
63
|
-
placeholder:
|
|
64
|
-
required:
|
|
65
|
-
onFocus:
|
|
66
|
-
onBlur:
|
|
67
|
-
onKeyDown:
|
|
68
|
-
onKeyUp:
|
|
69
|
-
className:
|
|
70
|
-
style:
|
|
71
|
-
readOnly:
|
|
72
|
-
onClear:
|
|
73
|
-
onClickIcon:
|
|
61
|
+
errorComponent: w,
|
|
62
|
+
helperComponent: y,
|
|
63
|
+
placeholder: E,
|
|
64
|
+
required: z = !1,
|
|
65
|
+
onFocus: L,
|
|
66
|
+
onBlur: R,
|
|
67
|
+
onKeyDown: k,
|
|
68
|
+
onKeyUp: B,
|
|
69
|
+
className: D,
|
|
70
|
+
style: P,
|
|
71
|
+
readOnly: M = !1,
|
|
72
|
+
onClear: i,
|
|
73
|
+
onClickIcon: $,
|
|
74
74
|
...v
|
|
75
|
-
},
|
|
76
|
-
const [
|
|
77
|
-
let p =
|
|
75
|
+
}, O) => {
|
|
76
|
+
const [j, T] = V(!1), { ref: _ } = ee();
|
|
77
|
+
let p = g;
|
|
78
78
|
a && (p = "customHeight");
|
|
79
|
-
const
|
|
79
|
+
const f = {
|
|
80
|
+
xsmall: {
|
|
81
|
+
container: "text-sm p-0",
|
|
82
|
+
input: "h-8 px-0 text-[1rem] prometeo-fonts-body-medium",
|
|
83
|
+
label: ` prometeo-fonts-label-large
|
|
84
|
+
peer-focus:prometeo-fonts-label-large
|
|
85
|
+
peer-placeholder-shown:${o === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default peer-focus:text-neutral-medium-default `,
|
|
86
|
+
icon: "w-5 h-5 *:size-5",
|
|
87
|
+
button: "left-2"
|
|
88
|
+
},
|
|
80
89
|
small: {
|
|
81
90
|
container: "text-sm",
|
|
82
91
|
input: "h-10 px-3 text-[1rem] prometeo-fonts-body-large",
|
|
83
92
|
label: ` prometeo-fonts-label-large
|
|
84
93
|
peer-focus:prometeo-fonts-label-large
|
|
85
|
-
peer-placeholder-shown:${
|
|
86
|
-
icon: "w-4 h-4 right-3"
|
|
94
|
+
peer-placeholder-shown:${o === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default peer-focus:text-neutral-medium-default `,
|
|
95
|
+
icon: "w-4 h-4 right-3",
|
|
96
|
+
button: ""
|
|
87
97
|
},
|
|
88
98
|
medium: {
|
|
89
99
|
container: "text-base",
|
|
90
100
|
input: "h-12 px-3 prometeo-fonts-body-large",
|
|
91
101
|
label: ` prometeo-fonts-label-large
|
|
92
102
|
peer-focus:prometeo-fonts-label-large
|
|
93
|
-
peer-placeholder-shown:${
|
|
94
|
-
icon: "w-5 h-5 right-3"
|
|
103
|
+
peer-placeholder-shown:${o === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default text-neutral-medium-default peer-focus:text-neutral-medium-default `,
|
|
104
|
+
icon: "w-5 h-5 right-3",
|
|
105
|
+
button: ""
|
|
95
106
|
},
|
|
96
107
|
large: {
|
|
97
108
|
container: "text-lg",
|
|
98
109
|
input: "h-14 px-3 text-lg border-b border-t-0 border-x-0 rounded-none focus:ring-0 prometeo-fonts-body-xlarge ",
|
|
99
110
|
label: "peer-placeholder-shown:prometeo-fonts-body-xlarge peer-focus:prometeo-fonts-label-large peer-focus:text-neutral-medium-default prometeo-fonts-label-large ",
|
|
100
|
-
icon: "w-6 h-6 right-3"
|
|
111
|
+
icon: "w-6 h-6 right-3",
|
|
112
|
+
button: ""
|
|
101
113
|
},
|
|
102
114
|
customHeight: {
|
|
103
115
|
container: "text-base",
|
|
104
116
|
input: "text-base",
|
|
105
117
|
label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-xs ",
|
|
106
|
-
icon: "w-6 h-6 right-3"
|
|
118
|
+
icon: "w-6 h-6 right-3",
|
|
119
|
+
button: ""
|
|
107
120
|
}
|
|
108
|
-
},
|
|
109
|
-
|
|
110
|
-
},
|
|
111
|
-
|
|
112
|
-
const H = u === "error" &&
|
|
121
|
+
}, A = () => {
|
|
122
|
+
T(!j);
|
|
123
|
+
}, N = {};
|
|
124
|
+
m && m !== "100%" && (N.width = m), a && (N.height = a);
|
|
125
|
+
const H = u === "error" && w, C = !H && y, G = r === "password", J = () => o === "static" ? "-top-1 -translate-y-full left-0 pl-3" : l ? `${d ? "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 ${s === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : `${d ? "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`, K = () => a ? f.customHeight.label : f[p].label, Q = () => a ? { height: a } : {}, U = () => o === "default" ? b : E || b || "", W = () => G ? !l && !i ? "pr-10" : s === "left" ? "pl-10 pr-10" : "pr-16" : i ? l ? s === "left" ? `pl-10 pr-7 ${g === "xsmall" && "pl-8"}` : "pr-10 pl-3" : "pr-7" : l ? s === "left" ? `pl-10 pr-7 ${g === "xsmall" && "pl-[31px]"}` : "pr-10 pl-3" : "", X = o === "default" && "transition-all duration-200 ease-in-out", d = w || y;
|
|
113
126
|
return /* @__PURE__ */ t.jsxs(
|
|
114
127
|
"div",
|
|
115
128
|
{
|
|
116
129
|
className: e(
|
|
117
130
|
"relative",
|
|
118
|
-
|
|
119
|
-
!
|
|
131
|
+
f[p].container,
|
|
132
|
+
!m && "w-full",
|
|
120
133
|
"bg-inherit",
|
|
121
|
-
|
|
122
|
-
|
|
134
|
+
o === "static" && "mt-2",
|
|
135
|
+
D
|
|
123
136
|
),
|
|
124
|
-
style: { ...
|
|
137
|
+
style: { ...P, ...N },
|
|
125
138
|
children: [
|
|
126
139
|
/* @__PURE__ */ t.jsx(
|
|
127
140
|
"input",
|
|
128
141
|
{
|
|
129
|
-
id:
|
|
130
|
-
name:
|
|
131
|
-
ref:
|
|
142
|
+
id: h,
|
|
143
|
+
name: h,
|
|
144
|
+
ref: O,
|
|
132
145
|
value: S,
|
|
133
|
-
placeholder:
|
|
134
|
-
type: r === "password" &&
|
|
146
|
+
placeholder: U(),
|
|
147
|
+
type: r === "password" && j ? "text" : r,
|
|
135
148
|
className: e(
|
|
136
149
|
"peer w-full border rounded-lg bg-transparent appearance-none transition-all duration-200 ease-in-out",
|
|
137
150
|
"focus:outline-none px-3",
|
|
138
|
-
|
|
139
|
-
|
|
151
|
+
o === "default" && "placeholder:text-transparent",
|
|
152
|
+
o === "static" && "placeholder:text-neutral-medium-default ",
|
|
140
153
|
x[u].input,
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
154
|
+
f[p].input,
|
|
155
|
+
l && "pr-10",
|
|
156
|
+
c && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
|
|
144
157
|
x[u].container,
|
|
145
|
-
|
|
158
|
+
W()
|
|
146
159
|
),
|
|
147
|
-
style:
|
|
160
|
+
style: Q(),
|
|
148
161
|
onChange: I,
|
|
149
|
-
onFocus:
|
|
150
|
-
onBlur:
|
|
151
|
-
disabled:
|
|
152
|
-
required:
|
|
153
|
-
onKeyDown:
|
|
154
|
-
onKeyUp:
|
|
162
|
+
onFocus: L,
|
|
163
|
+
onBlur: R,
|
|
164
|
+
disabled: c,
|
|
165
|
+
required: z,
|
|
166
|
+
onKeyDown: k,
|
|
167
|
+
onKeyUp: B,
|
|
155
168
|
defaultValue: v.defaultValue,
|
|
156
|
-
readOnly:
|
|
169
|
+
readOnly: M,
|
|
157
170
|
...v
|
|
158
171
|
}
|
|
159
172
|
),
|
|
160
173
|
/* @__PURE__ */ t.jsx(
|
|
161
174
|
"label",
|
|
162
175
|
{
|
|
163
|
-
ref:
|
|
164
|
-
htmlFor:
|
|
176
|
+
ref: _,
|
|
177
|
+
htmlFor: h,
|
|
165
178
|
className: e(
|
|
166
179
|
"absolute left-3 pointer-events-none px-1 z-10",
|
|
167
|
-
|
|
168
|
-
|
|
180
|
+
X,
|
|
181
|
+
K(),
|
|
169
182
|
x[u].label,
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
183
|
+
J(),
|
|
184
|
+
z && "after:content-['*'] after:text-error-default after:ml-1",
|
|
185
|
+
c && "text-neutral-medium-disabled prometeo-fonts-label-large"
|
|
173
186
|
),
|
|
174
|
-
children:
|
|
187
|
+
children: b
|
|
175
188
|
}
|
|
176
189
|
),
|
|
177
|
-
(
|
|
190
|
+
(l || r === "password" || n) && /* @__PURE__ */ t.jsx(
|
|
178
191
|
"button",
|
|
179
192
|
{
|
|
180
193
|
tabIndex: -1,
|
|
181
194
|
type: "button",
|
|
182
195
|
className: e(
|
|
183
196
|
`absolute ${d ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10`,
|
|
184
|
-
|
|
197
|
+
f[p].icon,
|
|
185
198
|
x[u].icon,
|
|
186
|
-
(r === "password" ||
|
|
187
|
-
|
|
199
|
+
(r === "password" || $) && !n ? "cursor-pointer" : "pointer-events-none",
|
|
200
|
+
s === "right" ? "right-3" : "left-3",
|
|
201
|
+
f[p]?.button
|
|
188
202
|
),
|
|
189
|
-
onClick: n ? void 0 : r === "password" ?
|
|
190
|
-
onMouseDown: (
|
|
203
|
+
onClick: n ? void 0 : r === "password" ? A : $,
|
|
204
|
+
onMouseDown: (Y) => r === "password" && !n && Y.preventDefault(),
|
|
191
205
|
children: /* @__PURE__ */ t.jsxs("div", { className: "flex items-center", children: [
|
|
192
|
-
n && r !== "password" ? /* @__PURE__ */ t.jsx(
|
|
193
|
-
r === "password" && (
|
|
206
|
+
n && r !== "password" ? /* @__PURE__ */ t.jsx(F, { variant: "sync", size: "small", className: "size-5" }) : l,
|
|
207
|
+
r === "password" && (j ? /* @__PURE__ */ t.jsx(re, { size: 24, className: "" }) : /* @__PURE__ */ t.jsx(oe, { size: 24, className: "" }))
|
|
194
208
|
] })
|
|
195
209
|
}
|
|
196
210
|
),
|
|
197
|
-
|
|
211
|
+
i && /* @__PURE__ */ t.jsx(
|
|
198
212
|
le,
|
|
199
213
|
{
|
|
200
214
|
type: "button",
|
|
@@ -202,24 +216,23 @@ const x = {
|
|
|
202
216
|
`absolute ${d ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10 right-1`,
|
|
203
217
|
"size-6 p-1 rounded-full",
|
|
204
218
|
"hover:bg-neutral-medium-hover transition-colors",
|
|
205
|
-
|
|
206
|
-
(
|
|
219
|
+
c && "opacity-50 cursor-not-allowed",
|
|
220
|
+
(l && s === "right" || r === "password" || n) && "mr-9"
|
|
207
221
|
),
|
|
208
|
-
disabled:
|
|
209
|
-
onClick:
|
|
222
|
+
disabled: c,
|
|
223
|
+
onClick: i,
|
|
210
224
|
variant: "text",
|
|
211
225
|
color: "secondary",
|
|
212
|
-
icon: /* @__PURE__ */ t.jsx(
|
|
226
|
+
icon: /* @__PURE__ */ t.jsx(se, { size: 20, className: "" })
|
|
213
227
|
}
|
|
214
228
|
),
|
|
215
|
-
d && /* @__PURE__ */ t.jsx("div", { className: "min-h-6", children: (H ||
|
|
229
|
+
d && /* @__PURE__ */ t.jsx("div", { className: "min-h-6", children: (H || C) && /* @__PURE__ */ t.jsx(te, { className: "absolute ", variant: u, children: w || y }) })
|
|
216
230
|
]
|
|
217
231
|
}
|
|
218
232
|
);
|
|
219
233
|
}
|
|
220
|
-
);
|
|
221
|
-
|
|
222
|
-
const be = q($);
|
|
234
|
+
), ue = Z(ae);
|
|
235
|
+
ue.displayName = "Input";
|
|
223
236
|
export {
|
|
224
|
-
|
|
237
|
+
ue as default
|
|
225
238
|
};
|
package/dist/PyrionLayout.es.js
CHANGED
|
@@ -869,7 +869,8 @@ const Ht = (t) => {
|
|
|
869
869
|
label: "Cerrar sesión",
|
|
870
870
|
icon: /* @__PURE__ */ e.jsx(St, {}),
|
|
871
871
|
size: "small",
|
|
872
|
-
color: "secondary"
|
|
872
|
+
color: "secondary",
|
|
873
|
+
className: "w-full justify-start h-12 max-h-none p-3 "
|
|
873
874
|
}
|
|
874
875
|
)
|
|
875
876
|
] }) })
|
|
@@ -1298,9 +1299,9 @@ const pt = Ie(null), wr = () => {
|
|
|
1298
1299
|
if (Array.isArray(a)) {
|
|
1299
1300
|
const P = a?.[0] ? ye(y, a[0]) : null, j = a?.[1] ? ye(y, a[1]) : null, K = X(P), fe = X(j);
|
|
1300
1301
|
return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
|
|
1301
|
-
/* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-default-default line-clamp-1
|
|
1302
|
-
fe && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 flex-1 grow shrink-0 min-w-
|
|
1303
|
-
/* @__PURE__ */ e.jsx("span", { className: "size-0.5 bg-[--neutral-300] rounded-full" }),
|
|
1302
|
+
/* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-default-default line-clamp-1 min-w-[40%] text-nowrap wrap-break-word overflow-hidden text-ellipsis", children: K }),
|
|
1303
|
+
fe && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 flex-1 grow shrink-0 min-w-max max-w-2/3 overflow-visible ", children: [
|
|
1304
|
+
/* @__PURE__ */ e.jsx("span", { className: "size-0.5 bg-[var(--neutral-300)] rounded-full" }),
|
|
1304
1305
|
/* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-default-default line-clamp-1 whitespace-pre text-ellipsis", children: fe })
|
|
1305
1306
|
] })
|
|
1306
1307
|
] });
|