nexaas-ui-components 1.0.78 → 1.0.80
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/index.cjs +572 -121
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.cts +109 -50
- package/dist/index.d.ts +109 -50
- package/dist/index.js +571 -121
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -40,68 +40,103 @@ var SpinnerIcon = (props) => /* @__PURE__ */ jsx(
|
|
|
40
40
|
)
|
|
41
41
|
}
|
|
42
42
|
);
|
|
43
|
+
var xSmall = {
|
|
44
|
+
text: "h-6 min-w-6 !rounded-[6px] text-[12px] leading-[1.3]",
|
|
45
|
+
icon: "text-[12px] leading-3",
|
|
46
|
+
gap: "gap-[4px]",
|
|
47
|
+
spinner: "w-3 h-3"
|
|
48
|
+
};
|
|
43
49
|
var sizes = {
|
|
44
|
-
xxs:
|
|
45
|
-
|
|
46
|
-
icon: "text-[12px] leading-3"
|
|
47
|
-
},
|
|
48
|
-
xxsm: {
|
|
49
|
-
text: "h-6 min-w-6 max-w-6 !rounded-md",
|
|
50
|
-
icon: "text-[12px] leading-3"
|
|
51
|
-
},
|
|
50
|
+
xxs: xSmall,
|
|
51
|
+
xxsm: xSmall,
|
|
52
52
|
xs: {
|
|
53
53
|
text: "h-8 min-w-8 max-w-20",
|
|
54
|
-
icon: "text-[16px] leading-4"
|
|
54
|
+
icon: "text-[16px] leading-4",
|
|
55
|
+
gap: "gap-[6px]",
|
|
56
|
+
spinner: "w-3.5 h-3.5"
|
|
55
57
|
},
|
|
56
58
|
sm: {
|
|
57
|
-
text: "h-[32px] text-[
|
|
58
|
-
icon: "text-[
|
|
59
|
+
text: "h-[32px] text-[14px]",
|
|
60
|
+
icon: "text-[14px] leading-[14px]",
|
|
61
|
+
gap: "gap-[4px]",
|
|
62
|
+
spinner: "w-3 h-3"
|
|
59
63
|
},
|
|
60
64
|
md: {
|
|
61
65
|
text: "h-[38px]",
|
|
62
|
-
icon: "text-[20px] leading-5"
|
|
66
|
+
icon: "text-[20px] leading-5",
|
|
67
|
+
gap: "gap-[6px]",
|
|
68
|
+
spinner: "w-3.5 h-3.5"
|
|
63
69
|
},
|
|
64
70
|
lg: {
|
|
65
71
|
text: "h-[46px]",
|
|
66
|
-
icon: "text-[20px] leading-5"
|
|
72
|
+
icon: "text-[20px] leading-5",
|
|
73
|
+
gap: "gap-[6px]",
|
|
74
|
+
spinner: "w-3.5 h-3.5"
|
|
67
75
|
}
|
|
68
76
|
};
|
|
77
|
+
var SHADOW_XS_NEUTRAL = "shadow-[0px_1px_1px_0px_rgba(56,61,77,0.1)]";
|
|
78
|
+
var SHADOW_SM_NEUTRAL = "shadow-[0px_1px_1.5px_0px_rgba(56,61,77,0.12)]";
|
|
79
|
+
var NEUTRAL_BORDERED_VARIANTS = /* @__PURE__ */ new Set([
|
|
80
|
+
"secondary",
|
|
81
|
+
"outline",
|
|
82
|
+
"dangerOutline",
|
|
83
|
+
"successOutline"
|
|
84
|
+
]);
|
|
69
85
|
var variants = {
|
|
86
|
+
// Default: sólido rose-500 + véu de brilho (mix-blend-plus-lighter, sempre
|
|
87
|
+
// ligado — não só no hover) igual ao node 2:2602 do Figma, sombra rosa com
|
|
88
|
+
// blur 4px (era 2px, não batia com "Shadow/Button - Primary" do Figma).
|
|
89
|
+
// Hover troca pro gradiente rose-start/rose-end; active vira rose-600 sólido
|
|
90
|
+
// sem sombra — nenhum dos dois mudou, só o default e o blur da sombra.
|
|
70
91
|
primary: {
|
|
71
|
-
text: "bg-
|
|
92
|
+
text: "relative bg-rose-500 text-white shadow-[0_1px_4px_0_rgba(217,48,99,0.3)] before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-lg before:pointer-events-none before:mix-blend-plus-lighter before:bg-gradient-to-b before:from-[rgba(218,48,99,0.2)] before:to-[rgba(218,48,99,0)] hover:bg-gradient-to-b hover:from-rose-start hover:to-rose-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-rose-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
|
|
72
93
|
},
|
|
73
94
|
secondary: {
|
|
74
|
-
text: "
|
|
95
|
+
text: "bg-surface border-[0.5px] border-neutral-300 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-600 active:text-neutral-600 active:bg-neutral-200 active:shadow-none disabled:opacity-50"
|
|
75
96
|
},
|
|
76
97
|
icon: {
|
|
77
|
-
text: "shadow-
|
|
98
|
+
text: "shadow-[0_1px_1px_0_rgba(56,61,77,0.1)] gap-1 bg-surface border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 active:bg-neutral-200 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-surface disabled:opacity-50 active:shadow-none"
|
|
78
99
|
},
|
|
100
|
+
// Figma: borda rose-400 (mais clara que o texto rose-500), sem escurecer o
|
|
101
|
+
// texto em hover/active. Active vira preenchimento sólido rose-500 com
|
|
102
|
+
// texto branco. Disabled clareia pra rose-300 em vez de escurecer.
|
|
79
103
|
outline: {
|
|
80
|
-
text: "
|
|
104
|
+
text: "bg-surface border-[0.5px] border-rose-400 text-rose-500 hover:bg-rose-100 active:bg-rose-500 active:text-white active:border-transparent active:shadow-none disabled:bg-surface disabled:border-rose-300 disabled:text-rose-300 disabled:shadow-none"
|
|
81
105
|
},
|
|
82
106
|
link: {
|
|
83
|
-
|
|
107
|
+
// blue-400 não existe no design system — o disabled não mudava de cor
|
|
108
|
+
// nenhuma antes disso, só perdia o underline.
|
|
109
|
+
text: "text-left text-blue-500 hover:text-blue-600 hover:underline active:text-blue-600 disabled:text-blue-500 disabled:opacity-50 disabled:no-underline outline-none focus:outline-none shadow-none font-normal"
|
|
84
110
|
},
|
|
111
|
+
// Antes o default usava dangerous-300 (o tom claro que o Figma reserva pro
|
|
112
|
+
// disabled) — a borda/texto de força total é o estado default correto.
|
|
85
113
|
dangerOutline: {
|
|
86
|
-
text: "
|
|
114
|
+
text: "text-dangerous-500 bg-surface border-[0.5px] border-dangerous-500 hover:bg-dangerous-100 active:bg-dangerous-500 active:text-white active:border-transparent active:shadow-none disabled:bg-surface disabled:border-dangerous-300 disabled:text-dangerous-300 disabled:shadow-none"
|
|
87
115
|
},
|
|
88
116
|
danger: {
|
|
89
|
-
text: "shadow-
|
|
117
|
+
text: "shadow-[0_1px_1.5px_0_rgba(222,56,56,0.12)] text-white bg-dangerous-500 hover:bg-gradient-to-b hover:from-danger-start hover:to-danger-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-dangerous-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
|
|
90
118
|
},
|
|
91
119
|
success: {
|
|
92
|
-
text: "shadow-
|
|
120
|
+
text: "shadow-[0_1px_1.5px_0_rgba(13,189,105,0.2)] text-white bg-success-500 hover:bg-gradient-to-b hover:from-success-start hover:to-success-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-success-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
|
|
93
121
|
},
|
|
122
|
+
// Antes usava green-500/green-100 — tokens que não existem no design
|
|
123
|
+
// system (caem no verde default do Tailwind). Trocado pros tokens success-*.
|
|
94
124
|
successOutline: {
|
|
95
|
-
text: "active:shadow-none
|
|
125
|
+
text: "active:shadow-none text-success-500 font-bold bg-surface border-[0.5px] border-success-500 hover:bg-success-100 active:bg-success-500 active:text-white active:border-transparent disabled:opacity-50 disabled:bg-surface disabled:text-success-500"
|
|
96
126
|
},
|
|
97
127
|
warn: {
|
|
98
|
-
text: "shadow-
|
|
128
|
+
text: "shadow-[0_1px_1.5px_0_rgba(242,153,20,0.2)] text-white bg-warning-500 hover:bg-gradient-to-b hover:from-warning-start hover:to-warning-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-warning-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
|
|
99
129
|
},
|
|
100
130
|
blue: {
|
|
101
131
|
text: "shadow-button bg-blue-500 text-accent-label hover:bg-blue-600 active:bg-blue-600 text-bold"
|
|
102
132
|
},
|
|
133
|
+
// Figma "Ghost button / Transparent" (pra usar sobre fundo colorido/escuro):
|
|
134
|
+
// fica transparente sempre — hover/active só ganham um véu branco (10%/20%),
|
|
135
|
+
// nunca fundo sólido, borda, ou mudança de cor do ícone. Antes o active usava
|
|
136
|
+
// um véu PRETO (bg-[#0A0A0A40]) e o disabled ganhava fundo branco + borda +
|
|
137
|
+
// texto cinza — nada disso existe no Figma, só opacity-50.
|
|
103
138
|
iconSecondary: {
|
|
104
|
-
text: "
|
|
139
|
+
text: "text-white bg-transparent hover:bg-[rgba(255,255,255,0.1)] active:bg-[rgba(255,255,255,0.2)] active:shadow-none disabled:opacity-50"
|
|
105
140
|
},
|
|
106
141
|
outlineIcon: {
|
|
107
142
|
text: "bg-surface text-rose-500 hover:shadow-button hover:text-rose-600 active:bg-rose-500 active:text-white disabled:text-neutral-400 disabled:border-disabled disabled:bg-surface disabled:opacity-50 active:shadow-none"
|
|
@@ -111,18 +146,46 @@ var variants = {
|
|
|
111
146
|
},
|
|
112
147
|
ghost: {
|
|
113
148
|
text: "bg-transparent hover:bg-neutral-100 !rounded-full text-paragraph active:bg-neutral-200 disabled:opacity-50"
|
|
149
|
+
},
|
|
150
|
+
// Novo: réplica do "Icon Button / Primary" do Figma — botão só-ícone
|
|
151
|
+
// preenchido. Diferente do primary em texto: aqui NÃO tem gradiente no
|
|
152
|
+
// hover (o Figma só troca a cor no active) e a sombra é neutra, não
|
|
153
|
+
// rosa — igual à sombra do "Icon Button / Danger" abaixo, só que cinza.
|
|
154
|
+
iconPrimary: {
|
|
155
|
+
text: "bg-rose-500 text-white shadow-[0px_1px_1.5px_0px_rgba(56,61,77,0.12)] active:bg-rose-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
|
|
156
|
+
},
|
|
157
|
+
// Novo: réplica do "Icon Button / Danger" do Figma — bordado em vermelho
|
|
158
|
+
// cheio (dangerous-500), diferente do outlineIcon (que é rose, não red).
|
|
159
|
+
iconDanger: {
|
|
160
|
+
text: "bg-surface border-[0.5px] border-dangerous-500 text-dangerous-500 shadow-[0px_1px_1.5px_0px_rgba(222,56,56,0.12)] hover:bg-dangerous-100 active:bg-dangerous-500 active:text-white active:border-transparent active:shadow-none disabled:opacity-50 disabled:shadow-none"
|
|
161
|
+
},
|
|
162
|
+
// Novo: réplica do "Ghost button / Neutral" do Figma — utilitário só-ícone
|
|
163
|
+
// sem borda, cor --label; distinto do `ghost` existente (pill com texto).
|
|
164
|
+
// Disabled vira fundo branco + opacity-50 (não fica transparente feito o
|
|
165
|
+
// default) — igual ao secondary comum.
|
|
166
|
+
ghostIcon: {
|
|
167
|
+
text: "bg-transparent text-label rounded-[6px] hover:bg-neutral-100 active:bg-neutral-200 disabled:bg-surface disabled:opacity-50"
|
|
168
|
+
},
|
|
169
|
+
// Novo: réplica do "Transparent button" do Figma — texto branco em negrito
|
|
170
|
+
// centralizado, pensado pra ficar sobre fundo colorido/escuro (ex.: banners,
|
|
171
|
+
// headers coloridos). Padding e radius próprios, independentes do size.
|
|
172
|
+
onColorText: {
|
|
173
|
+
text: "!rounded-[4px] justify-center bg-transparent text-white hover:bg-[rgba(214,214,214,0.15)] active:bg-[rgba(10,10,10,0.25)] active:shadow-none disabled:opacity-50 disabled:shadow-[0_2px_6px_0_rgba(56,61,77,0.12)]"
|
|
114
174
|
}
|
|
115
175
|
};
|
|
116
176
|
var paddingConfig = {
|
|
177
|
+
// xxs fica sem padding de propósito (era assim antes) — usado em contextos
|
|
178
|
+
// sem chrome de botão (ex.: variant="link" como texto "ver mais/menos"),
|
|
179
|
+
// onde padding quebraria o alinhamento inline com o texto ao redor.
|
|
117
180
|
xxs: {
|
|
118
181
|
normal: "",
|
|
119
182
|
icon: "",
|
|
120
183
|
iconOnly: ""
|
|
121
184
|
},
|
|
122
185
|
xxsm: {
|
|
123
|
-
normal: "
|
|
124
|
-
icon: "
|
|
125
|
-
iconOnly: "p-[
|
|
186
|
+
normal: "px-2 py-1",
|
|
187
|
+
icon: "py-1 pl-2 pr-2.5",
|
|
188
|
+
iconOnly: "p-[6px]"
|
|
126
189
|
},
|
|
127
190
|
xs: {
|
|
128
191
|
normal: "p-2",
|
|
@@ -155,8 +218,9 @@ var Button = ({
|
|
|
155
218
|
const applyGap = props.icon && props.children;
|
|
156
219
|
const appliedVariant = variants[variant].text;
|
|
157
220
|
const appliedSize = sizes[size];
|
|
221
|
+
const neutralShadow = NEUTRAL_BORDERED_VARIANTS.has(variant) ? size === "lg" ? SHADOW_SM_NEUTRAL : SHADOW_XS_NEUTRAL : "";
|
|
158
222
|
const appliedPadding = props.icon ? props.children ? paddingConfig[size].icon : paddingConfig[size].iconOnly : paddingConfig[size].normal;
|
|
159
|
-
const gapText = applyGap ?
|
|
223
|
+
const gapText = applyGap ? appliedSize.gap : "gap-0";
|
|
160
224
|
useEffect(() => {
|
|
161
225
|
if (!hotkey || !props.onClick) return;
|
|
162
226
|
const handleKeyDown = (event) => {
|
|
@@ -214,10 +278,11 @@ var Button = ({
|
|
|
214
278
|
disabled: props.disabled || props.loading,
|
|
215
279
|
className: `
|
|
216
280
|
${props.className}
|
|
217
|
-
${appliedVariant}
|
|
218
|
-
${
|
|
219
|
-
${
|
|
220
|
-
${
|
|
281
|
+
${appliedVariant}
|
|
282
|
+
${neutralShadow}
|
|
283
|
+
${appliedSize.text}
|
|
284
|
+
${appliedPadding}
|
|
285
|
+
${gapText}
|
|
221
286
|
whitespace-nowrap group rounded-lg font-bold disabled:shadow-none active:shadow-none flex items-center disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px]
|
|
222
287
|
`,
|
|
223
288
|
children: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -228,7 +293,7 @@ var Button = ({
|
|
|
228
293
|
children: props.icon && !props.loading ? props.icon : props.loadingIcon && props.loading ? props.loadingIcon : /* @__PURE__ */ jsx(
|
|
229
294
|
SpinnerIcon,
|
|
230
295
|
{
|
|
231
|
-
className:
|
|
296
|
+
className: `animate-spin ${appliedSize.spinner}`,
|
|
232
297
|
fill: "currentColor"
|
|
233
298
|
}
|
|
234
299
|
)
|
|
@@ -239,7 +304,7 @@ var Button = ({
|
|
|
239
304
|
"- ",
|
|
240
305
|
hotkeyLabel
|
|
241
306
|
] }),
|
|
242
|
-
props.dropdown && /* @__PURE__ */ jsx("i", { className: "uil uil-angle-down text-[
|
|
307
|
+
props.dropdown && /* @__PURE__ */ jsx("i", { className: "uil uil-angle-down text-[20px]" })
|
|
243
308
|
] })
|
|
244
309
|
}
|
|
245
310
|
),
|
|
@@ -469,8 +534,8 @@ var Input = ({
|
|
|
469
534
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
470
535
|
const [showPassword, setShowPassword] = React5__default.useState(false);
|
|
471
536
|
const styles = {
|
|
472
|
-
input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border
|
|
473
|
-
${!hasError ? "border-
|
|
537
|
+
input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-[var(--input-bg-disabled)] disabled:border-[var(--input-border-disabled)] disabled:text-disabled disabled:cursor-not-allowed disabled:shadow-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px] ${label ? "pt-[22px]" : "pt-[10px]"}
|
|
538
|
+
${!hasError ? "border-stroke" : ""}`,
|
|
474
539
|
icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label peer-focus:text-blue-500"} peer-focus:border-blue-500`,
|
|
475
540
|
rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
|
|
476
541
|
label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
|
|
@@ -730,7 +795,7 @@ var DatePickerInput = forwardRef(
|
|
|
730
795
|
];
|
|
731
796
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
732
797
|
const styles = {
|
|
733
|
-
input: `text-p-md text-paragraph bg-surface
|
|
798
|
+
input: `text-p-md text-paragraph bg-surface shadow-input border-[0.5px] rounded block pb-[10px] h-[46px] w-full disabled:bg-light-gray-100 disabled:shadow-none focus:border-[1.5px] focus:border-blue-500 ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke"}`,
|
|
734
799
|
icon: `absolute bg-light-gray-100 h-[44px] w-[38px] top-[1px] left-[1px] rounded-l-lg rounded-r-none ${hasError ? "text-dangerous-700" : "text-label"}`,
|
|
735
800
|
label: "absolute text-label text-sm",
|
|
736
801
|
clear: "absolute top-[8px] right-[8px] cursor-pointer text-label text-[22px]"
|
|
@@ -1600,7 +1665,10 @@ function InputSmall({
|
|
|
1600
1665
|
const styles = {
|
|
1601
1666
|
input: `text-p-md text-paragraph w-full outline-none placeholder:text-label disabled:text-disabled disabled:cursor-not-allowed bg-transparent`,
|
|
1602
1667
|
icon: "text-label group-focus-within:text-neutral-600 m-[10px]",
|
|
1603
|
-
|
|
1668
|
+
// disabled fica no <input> interno, não neste wrapper — por isso o
|
|
1669
|
+
// estado desabilitado é resolvido via ternário em vez de `disabled:`
|
|
1670
|
+
// (pseudo-classe que nunca dispararia numa div).
|
|
1671
|
+
wrapper: `border-[0.5px] border-stroke focus-within:border-[1.5px] focus-within:border-blue-500 group rounded-lg h-9 w-full text-paragraph flex items-center justify-between ${disabled ? "bg-neutral-100 shadow-none" : "bg-surface shadow-input"} ${className}`,
|
|
1604
1672
|
clear: "pr-[5px] cursor-pointer text-label text-[16px]"
|
|
1605
1673
|
};
|
|
1606
1674
|
const elem = inputRef == null ? void 0 : inputRef.current;
|
|
@@ -1652,7 +1720,7 @@ function InputSmall({
|
|
|
1652
1720
|
["pl-[2px]"]: collapsed
|
|
1653
1721
|
}),
|
|
1654
1722
|
onClick: searchOnClick,
|
|
1655
|
-
children: /* @__PURE__ */ jsx("i", { className: "uil uil-search text-[16px]
|
|
1723
|
+
children: /* @__PURE__ */ jsx("i", { className: "uil uil-search text-[16px] rounded-full p-1.5 hover:bg-blue-100 active:bg-blue-500 active:text-white transition-colors" })
|
|
1656
1724
|
}
|
|
1657
1725
|
) })
|
|
1658
1726
|
] });
|
|
@@ -2050,6 +2118,371 @@ var FilterOptions = ({
|
|
|
2050
2118
|
}
|
|
2051
2119
|
);
|
|
2052
2120
|
};
|
|
2121
|
+
var FilterSelect = ({
|
|
2122
|
+
icon,
|
|
2123
|
+
label,
|
|
2124
|
+
isMulti,
|
|
2125
|
+
options = [],
|
|
2126
|
+
onApply,
|
|
2127
|
+
onClear,
|
|
2128
|
+
onSelectAll,
|
|
2129
|
+
control,
|
|
2130
|
+
name,
|
|
2131
|
+
fetch,
|
|
2132
|
+
subFilters = [],
|
|
2133
|
+
emptyMessage,
|
|
2134
|
+
initialMessage,
|
|
2135
|
+
initialMessageClassName,
|
|
2136
|
+
applyOnClick = false,
|
|
2137
|
+
showFilter = false,
|
|
2138
|
+
renderOption,
|
|
2139
|
+
searchPlaceholder = "Pesquisar",
|
|
2140
|
+
panelClassName = "p-2",
|
|
2141
|
+
applyLabel = "Aplicar",
|
|
2142
|
+
cancelLabel = "Cancelar",
|
|
2143
|
+
clearLabel = "Limpar",
|
|
2144
|
+
selectAllLabel = "Marcar todos",
|
|
2145
|
+
clearButton = true
|
|
2146
|
+
}) => {
|
|
2147
|
+
const [currentValue, setCurrentValue] = useState(isMulti ? [] : {});
|
|
2148
|
+
const [data, setData] = useState(() => options);
|
|
2149
|
+
const [filter, setFilter] = useState("");
|
|
2150
|
+
const [subFilter, setSubFilter] = useState(
|
|
2151
|
+
(subFilters == null ? void 0 : subFilters.length) > 0 ? subFilters[0].id : null
|
|
2152
|
+
);
|
|
2153
|
+
const [loading, setLoading] = useState(false);
|
|
2154
|
+
const search = async () => {
|
|
2155
|
+
if ((filter == null ? void 0 : filter.length) > 0 || (options == null ? void 0 : options.length) > 0) {
|
|
2156
|
+
if (fetch) {
|
|
2157
|
+
setData(await fetch(filter, subFilter));
|
|
2158
|
+
} else {
|
|
2159
|
+
const result = options.filter(
|
|
2160
|
+
(opt) => {
|
|
2161
|
+
var _a;
|
|
2162
|
+
return (_a = opt == null ? void 0 : opt.label) == null ? void 0 : _a.toLowerCase().includes(filter.toLowerCase());
|
|
2163
|
+
}
|
|
2164
|
+
);
|
|
2165
|
+
const order = result.sort((a, b) => {
|
|
2166
|
+
var _a;
|
|
2167
|
+
return (_a = a == null ? void 0 : a.label) == null ? void 0 : _a.toLowerCase();
|
|
2168
|
+
});
|
|
2169
|
+
setData(order);
|
|
2170
|
+
}
|
|
2171
|
+
} else {
|
|
2172
|
+
setData([]);
|
|
2173
|
+
}
|
|
2174
|
+
setLoading(false);
|
|
2175
|
+
};
|
|
2176
|
+
useEffect(() => {
|
|
2177
|
+
setLoading(true);
|
|
2178
|
+
const timeout = setTimeout(() => {
|
|
2179
|
+
search();
|
|
2180
|
+
}, 400);
|
|
2181
|
+
return () => clearTimeout(timeout);
|
|
2182
|
+
}, [filter]);
|
|
2183
|
+
const optionStyle = (option, isSelected) => {
|
|
2184
|
+
return /* @__PURE__ */ jsx(
|
|
2185
|
+
ListboxOption,
|
|
2186
|
+
{
|
|
2187
|
+
disabled: option.disabled,
|
|
2188
|
+
value: option,
|
|
2189
|
+
as: Fragment$1,
|
|
2190
|
+
children: renderOption ? /* @__PURE__ */ jsx(
|
|
2191
|
+
"div",
|
|
2192
|
+
{
|
|
2193
|
+
className: clsx9(
|
|
2194
|
+
"relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
|
|
2195
|
+
{
|
|
2196
|
+
["hover:bg-neutral-100"]: !option.disabled && !isSelected,
|
|
2197
|
+
["text-disabled"]: option.disabled,
|
|
2198
|
+
["bg-blue-500 hover:bg-blue-500"]: isSelected
|
|
2199
|
+
}
|
|
2200
|
+
),
|
|
2201
|
+
children: renderOption(option, isSelected)
|
|
2202
|
+
}
|
|
2203
|
+
) : /* @__PURE__ */ jsxs(
|
|
2204
|
+
"div",
|
|
2205
|
+
{
|
|
2206
|
+
className: clsx9(
|
|
2207
|
+
"relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
|
|
2208
|
+
{
|
|
2209
|
+
["hover:bg-neutral-100"]: !option.disabled && !isSelected,
|
|
2210
|
+
["text-disabled"]: option.disabled,
|
|
2211
|
+
["bg-blue-500 hover:bg-blue-500"]: isSelected
|
|
2212
|
+
}
|
|
2213
|
+
),
|
|
2214
|
+
children: [
|
|
2215
|
+
/* @__PURE__ */ jsx(
|
|
2216
|
+
"span",
|
|
2217
|
+
{
|
|
2218
|
+
className: clsx9(
|
|
2219
|
+
{
|
|
2220
|
+
["font-semibold text-accent-label"]: isSelected
|
|
2221
|
+
},
|
|
2222
|
+
"text-wrap break-words font-normal block"
|
|
2223
|
+
),
|
|
2224
|
+
children: option == null ? void 0 : option.label
|
|
2225
|
+
}
|
|
2226
|
+
),
|
|
2227
|
+
/* @__PURE__ */ jsx(
|
|
2228
|
+
"span",
|
|
2229
|
+
{
|
|
2230
|
+
className: clsx9(
|
|
2231
|
+
{
|
|
2232
|
+
["font-semibold text-accent-label"]: isSelected,
|
|
2233
|
+
["text-label"]: !isSelected
|
|
2234
|
+
},
|
|
2235
|
+
"w-[200px] whitespace-nowrap text-ellipsis overflow-hidden text-p-sm block"
|
|
2236
|
+
),
|
|
2237
|
+
children: option == null ? void 0 : option.description
|
|
2238
|
+
}
|
|
2239
|
+
)
|
|
2240
|
+
]
|
|
2241
|
+
}
|
|
2242
|
+
)
|
|
2243
|
+
},
|
|
2244
|
+
option.id
|
|
2245
|
+
);
|
|
2246
|
+
};
|
|
2247
|
+
const isMobileSize = (window == null ? void 0 : window.innerWidth) < 768;
|
|
2248
|
+
return /* @__PURE__ */ jsx(
|
|
2249
|
+
Controller,
|
|
2250
|
+
{
|
|
2251
|
+
name,
|
|
2252
|
+
control,
|
|
2253
|
+
render: ({ field }) => {
|
|
2254
|
+
var _a, _b;
|
|
2255
|
+
let hasValue = isMulti ? ((_a = field == null ? void 0 : field.value) == null ? void 0 : _a.length) > 0 : !!((_b = field == null ? void 0 : field.value) == null ? void 0 : _b.id);
|
|
2256
|
+
return /* @__PURE__ */ jsx(
|
|
2257
|
+
Popover,
|
|
2258
|
+
{
|
|
2259
|
+
className: clsx9(
|
|
2260
|
+
{ ["w-full"]: isMobileSize },
|
|
2261
|
+
"relative text-paragraph"
|
|
2262
|
+
),
|
|
2263
|
+
children: ({ open }) => {
|
|
2264
|
+
var _a2, _b2;
|
|
2265
|
+
return /* @__PURE__ */ jsxs(Float, { composable: true, shift: 8, zIndex: 99, offset: 6, children: [
|
|
2266
|
+
/* @__PURE__ */ jsx(Float.Reference, { children: /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
|
|
2267
|
+
/* @__PURE__ */ jsxs(
|
|
2268
|
+
PopoverButton,
|
|
2269
|
+
{
|
|
2270
|
+
as: "button",
|
|
2271
|
+
className: clsx9(
|
|
2272
|
+
"group/chip flex items-center justify-center gap-[6px] rounded-lg px-3 py-2 text-p-md font-bold outline-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px]",
|
|
2273
|
+
hasValue ? "bg-blue-100 border-[0.5px] border-blue-500 text-blue-500 shadow-[0px_1px_3px_0px_rgba(0,158,219,0.2)] hover:bg-blue-500 hover:border-transparent hover:text-white active:bg-[#007fb0] active:border-transparent active:text-white" : "bg-surface border-[0.5px] border-stroke text-paragraph shadow-[0px_1px_2px_0px_rgba(56,61,77,0.1)] hover:bg-neutral-50 active:bg-blue-100 active:border-blue-500 active:text-blue-500"
|
|
2274
|
+
),
|
|
2275
|
+
children: [
|
|
2276
|
+
icon && /* @__PURE__ */ jsx("div", { className: "text-[18px] leading-none", children: icon }),
|
|
2277
|
+
/* @__PURE__ */ jsx("span", { className: "truncate cursor-pointer", children: isMulti ? label : ((_a2 = field == null ? void 0 : field.value) == null ? void 0 : _a2.id) ? (_b2 = field == null ? void 0 : field.value) == null ? void 0 : _b2.label : label }),
|
|
2278
|
+
isMulti && field.value && field.value.length > 0 && /* @__PURE__ */ jsx("div", { className: "rounded-[2px] bg-blue-500 px-1 py-px text-p-xs text-white group-hover/chip:bg-[#007fb0] group-active/chip:bg-[#007fb0]", children: field.value.length }),
|
|
2279
|
+
/* @__PURE__ */ jsx(
|
|
2280
|
+
"i",
|
|
2281
|
+
{
|
|
2282
|
+
className: clsx9(
|
|
2283
|
+
"text-[18px]",
|
|
2284
|
+
open ? "uil uil-angle-up" : "uil uil-angle-down",
|
|
2285
|
+
// Some quando o X de limpar aparece, pra não sobrepor.
|
|
2286
|
+
hasValue && clearButton ? "group-hover:opacity-0 group-active:opacity-0" : ""
|
|
2287
|
+
)
|
|
2288
|
+
}
|
|
2289
|
+
)
|
|
2290
|
+
]
|
|
2291
|
+
}
|
|
2292
|
+
),
|
|
2293
|
+
hasValue && clearButton && /* @__PURE__ */ jsx(
|
|
2294
|
+
"button",
|
|
2295
|
+
{
|
|
2296
|
+
type: "button",
|
|
2297
|
+
"aria-label": clearLabel,
|
|
2298
|
+
onClick: (e) => {
|
|
2299
|
+
e.stopPropagation();
|
|
2300
|
+
e.preventDefault();
|
|
2301
|
+
const emptyValue = isMulti ? [] : null;
|
|
2302
|
+
field.onChange(emptyValue);
|
|
2303
|
+
setCurrentValue(isMulti ? [] : {});
|
|
2304
|
+
if (onClear) onClear();
|
|
2305
|
+
},
|
|
2306
|
+
className: clsx9(
|
|
2307
|
+
"absolute right-0 top-1/2 hidden h-9 -translate-y-1/2 items-center justify-end rounded-r-lg pl-2 pr-1",
|
|
2308
|
+
"bg-gradient-to-l from-blue-500 via-blue-500 via-[69%] to-transparent",
|
|
2309
|
+
"group-hover:flex group-active:flex group-active:from-[#007fb0] group-active:via-[#007fb0]"
|
|
2310
|
+
),
|
|
2311
|
+
children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-7 items-center justify-center rounded-[6px] text-white", children: /* @__PURE__ */ jsx("i", { className: "uil uil-times text-[18px]" }) })
|
|
2312
|
+
}
|
|
2313
|
+
)
|
|
2314
|
+
] }) }),
|
|
2315
|
+
open && /* @__PURE__ */ jsx(Float.Content, { children: /* @__PURE__ */ jsx(
|
|
2316
|
+
PopoverPanel,
|
|
2317
|
+
{
|
|
2318
|
+
className: clsx9(
|
|
2319
|
+
"whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-200",
|
|
2320
|
+
panelClassName
|
|
2321
|
+
),
|
|
2322
|
+
children: ({ close }) => {
|
|
2323
|
+
const onClose = () => {
|
|
2324
|
+
setCurrentValue(field.value);
|
|
2325
|
+
close();
|
|
2326
|
+
};
|
|
2327
|
+
useEffect(() => {
|
|
2328
|
+
setCurrentValue(field.value);
|
|
2329
|
+
}, [open]);
|
|
2330
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
2331
|
+
/* @__PURE__ */ jsx(
|
|
2332
|
+
Listbox,
|
|
2333
|
+
{
|
|
2334
|
+
value: currentValue || [],
|
|
2335
|
+
onChange: setCurrentValue,
|
|
2336
|
+
multiple: isMulti,
|
|
2337
|
+
children: /* @__PURE__ */ jsxs(
|
|
2338
|
+
ListboxOptions,
|
|
2339
|
+
{
|
|
2340
|
+
static: true,
|
|
2341
|
+
className: clsx9(
|
|
2342
|
+
"max-h-60 w-full overflow-x-hidden overflow-y-auto bg-surface text-p-md focus:outline-none sm:text-sm relative",
|
|
2343
|
+
{
|
|
2344
|
+
"pr-2": options.some(
|
|
2345
|
+
(option) => option.description
|
|
2346
|
+
) ? options.length > 3 : options.length > 4
|
|
2347
|
+
}
|
|
2348
|
+
),
|
|
2349
|
+
children: [
|
|
2350
|
+
/* @__PURE__ */ jsxs("div", { className: "mr-1 sticky top-0 z-30", children: [
|
|
2351
|
+
showFilter && /* @__PURE__ */ jsx(
|
|
2352
|
+
InputSmall,
|
|
2353
|
+
{
|
|
2354
|
+
icon: /* @__PURE__ */ jsx("i", { className: "uil uil-search" }),
|
|
2355
|
+
onChange: (e) => setFilter(e),
|
|
2356
|
+
value: filter,
|
|
2357
|
+
placeholder: searchPlaceholder,
|
|
2358
|
+
clearField: true,
|
|
2359
|
+
onKeyDown: (e) => {
|
|
2360
|
+
if (e.key === " " || e.code === "Space") {
|
|
2361
|
+
e.stopPropagation();
|
|
2362
|
+
}
|
|
2363
|
+
}
|
|
2364
|
+
}
|
|
2365
|
+
),
|
|
2366
|
+
subFilters && fetch && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 pt-2 bg-surface", children: subFilters.map((item, index) => {
|
|
2367
|
+
const active = (item == null ? void 0 : item.id) === subFilter;
|
|
2368
|
+
return /* @__PURE__ */ jsx(
|
|
2369
|
+
"button",
|
|
2370
|
+
{
|
|
2371
|
+
className: clsx9(
|
|
2372
|
+
{
|
|
2373
|
+
["bg-blue-500 text-accent-label"]: active,
|
|
2374
|
+
["text-paragraph"]: !active
|
|
2375
|
+
},
|
|
2376
|
+
`rounded-[20px] border-[0.5px] border-neutral-200 px-4 py-[6px]`
|
|
2377
|
+
),
|
|
2378
|
+
onClick: () => {
|
|
2379
|
+
if (subFilter == item.id) {
|
|
2380
|
+
setSubFilter(null);
|
|
2381
|
+
} else {
|
|
2382
|
+
setSubFilter(item.id);
|
|
2383
|
+
}
|
|
2384
|
+
},
|
|
2385
|
+
children: item.name
|
|
2386
|
+
},
|
|
2387
|
+
index
|
|
2388
|
+
);
|
|
2389
|
+
}) })
|
|
2390
|
+
] }),
|
|
2391
|
+
loading && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 w-full my-4", children: [
|
|
2392
|
+
/* @__PURE__ */ jsx(SpinnerIcon, { className: "animate-spin w-[16px] h-[16px]" }),
|
|
2393
|
+
"Carregando"
|
|
2394
|
+
] }),
|
|
2395
|
+
(data == null ? void 0 : data.length) === 0 && (filter == null ? void 0 : filter.length) > 0 && !loading && /* @__PURE__ */ jsx("div", { className: "py-4", children: /* @__PURE__ */ jsx("span", { className: "text-label text-p-md", children: emptyMessage }) }),
|
|
2396
|
+
initialMessage && (data == null ? void 0 : data.length) === 0 && (filter == null ? void 0 : filter.length) === 0 && !loading && (options == null ? void 0 : options.length) === 0 && !(currentValue == null ? void 0 : currentValue.id) && /* @__PURE__ */ jsx("div", { className: clsx9("py-4", initialMessageClassName), children: /* @__PURE__ */ jsx("span", { className: "text-label text-p-md", children: initialMessage }) }),
|
|
2397
|
+
initialMessage && currentValue && (currentValue == null ? void 0 : currentValue.id) && (filter == null ? void 0 : filter.length) === 0 && /* @__PURE__ */ jsx("div", { className: "py-2", children: isMulti ? /* @__PURE__ */ jsx(Fragment, { children: currentValue == null ? void 0 : currentValue.map((option) => {
|
|
2398
|
+
let isSelected = isMulti ? currentValue && (currentValue == null ? void 0 : currentValue.length) > 0 && (currentValue == null ? void 0 : currentValue.some(
|
|
2399
|
+
(e) => e.id === option.id
|
|
2400
|
+
)) : currentValue && (currentValue == null ? void 0 : currentValue.id) === option.id;
|
|
2401
|
+
return optionStyle(
|
|
2402
|
+
options,
|
|
2403
|
+
isSelected
|
|
2404
|
+
);
|
|
2405
|
+
}) }) : optionStyle(field.value, true) }),
|
|
2406
|
+
!loading && (data == null ? void 0 : data.map((option) => {
|
|
2407
|
+
let isSelected = isMulti ? currentValue && currentValue.length > 0 && currentValue.some(
|
|
2408
|
+
(e) => e.id === option.id
|
|
2409
|
+
) : currentValue && currentValue.id === option.id;
|
|
2410
|
+
return optionStyle(option, isSelected);
|
|
2411
|
+
}))
|
|
2412
|
+
]
|
|
2413
|
+
}
|
|
2414
|
+
)
|
|
2415
|
+
}
|
|
2416
|
+
),
|
|
2417
|
+
!applyOnClick && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center justify-end border-t border-t-neutral-200 pt-3", children: [
|
|
2418
|
+
isMulti && onSelectAll && /* @__PURE__ */ jsx("div", { className: "border-r pr-2 border-neutral-300", children: /* @__PURE__ */ jsx(
|
|
2419
|
+
Button,
|
|
2420
|
+
{
|
|
2421
|
+
variant: "link",
|
|
2422
|
+
size: "xxs",
|
|
2423
|
+
onClick: () => {
|
|
2424
|
+
onSelectAll();
|
|
2425
|
+
field.onChange(options);
|
|
2426
|
+
setCurrentValue(options);
|
|
2427
|
+
close();
|
|
2428
|
+
},
|
|
2429
|
+
children: selectAllLabel
|
|
2430
|
+
}
|
|
2431
|
+
) }),
|
|
2432
|
+
onClear && /* @__PURE__ */ jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsx(
|
|
2433
|
+
Button,
|
|
2434
|
+
{
|
|
2435
|
+
variant: "link",
|
|
2436
|
+
size: "xxs",
|
|
2437
|
+
onClick: () => {
|
|
2438
|
+
if (onClear) {
|
|
2439
|
+
onClear();
|
|
2440
|
+
setCurrentValue([]);
|
|
2441
|
+
field.onChange([]);
|
|
2442
|
+
}
|
|
2443
|
+
close();
|
|
2444
|
+
},
|
|
2445
|
+
children: clearLabel
|
|
2446
|
+
}
|
|
2447
|
+
) }),
|
|
2448
|
+
/* @__PURE__ */ jsx(
|
|
2449
|
+
Button,
|
|
2450
|
+
{
|
|
2451
|
+
size: "xs",
|
|
2452
|
+
variant: "secondary",
|
|
2453
|
+
onClick: () => {
|
|
2454
|
+
onClose();
|
|
2455
|
+
},
|
|
2456
|
+
children: cancelLabel
|
|
2457
|
+
}
|
|
2458
|
+
),
|
|
2459
|
+
/* @__PURE__ */ jsx(
|
|
2460
|
+
Button,
|
|
2461
|
+
{
|
|
2462
|
+
size: "xs",
|
|
2463
|
+
variant: "primary",
|
|
2464
|
+
disabled: JSON.stringify(currentValue) === JSON.stringify(field == null ? void 0 : field.value),
|
|
2465
|
+
onClick: () => {
|
|
2466
|
+
field.onChange(currentValue);
|
|
2467
|
+
if (onApply) onApply();
|
|
2468
|
+
close();
|
|
2469
|
+
},
|
|
2470
|
+
children: applyLabel
|
|
2471
|
+
}
|
|
2472
|
+
)
|
|
2473
|
+
] })
|
|
2474
|
+
] });
|
|
2475
|
+
}
|
|
2476
|
+
}
|
|
2477
|
+
) })
|
|
2478
|
+
] });
|
|
2479
|
+
}
|
|
2480
|
+
}
|
|
2481
|
+
);
|
|
2482
|
+
}
|
|
2483
|
+
}
|
|
2484
|
+
);
|
|
2485
|
+
};
|
|
2053
2486
|
var IntlCurrencyInput = IntlCurrencyInputRaw.default || IntlCurrencyInputRaw;
|
|
2054
2487
|
var intl_currency_input_default = IntlCurrencyInput;
|
|
2055
2488
|
function InputMoney({
|
|
@@ -2094,7 +2527,7 @@ function InputMoney({
|
|
|
2094
2527
|
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
2095
2528
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
2096
2529
|
const styles = {
|
|
2097
|
-
input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input
|
|
2530
|
+
input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:shadow-none focus-visible:border ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke focus-visible:border-blue-500"}`,
|
|
2098
2531
|
icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
|
|
2099
2532
|
`,
|
|
2100
2533
|
label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
|
|
@@ -2216,12 +2649,12 @@ function InputNumber({
|
|
|
2216
2649
|
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
2217
2650
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
2218
2651
|
const styles = {
|
|
2219
|
-
input: `text-p-md pl-
|
|
2652
|
+
input: `text-p-md pl-3 peer text-paragraph bg-surface border-[0.5px] rounded-lg outline-none block pb-[10px] h-[44px] w-full disabled:bg-neutral-100 disabled:shadow-none focus-visible:border-[1.5px] ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500 shadow-none" : "border-stroke focus-visible:border-blue-500 shadow-input"}`,
|
|
2220
2653
|
icon: `absolute bg-neutral-100 h-[44px] top-[2px] left-[1.5px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
|
|
2221
2654
|
`,
|
|
2222
2655
|
label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
|
|
2223
2656
|
buttonsWrapper: "absolute top-[7px] right-[10px] cursor-pointer text-label flex flex-col gap-[2px]",
|
|
2224
|
-
button:
|
|
2657
|
+
button: `border-[0.5px] border-neutral-300 rounded shadow-[0px_1px_1px_rgba(56,61,77,0.1)] h-4 w-4 flex items-center justify-center ${disabled ? "bg-neutral-100" : "bg-surface"}`
|
|
2225
2658
|
};
|
|
2226
2659
|
const [debouncedCount, setDebouncedCount] = useState(0);
|
|
2227
2660
|
const save = () => {
|
|
@@ -2429,7 +2862,7 @@ function InputPercentage({
|
|
|
2429
2862
|
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
2430
2863
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
2431
2864
|
const styles = {
|
|
2432
|
-
input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input
|
|
2865
|
+
input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:shadow-none focus-visible:border-[1.5px] ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke focus-visible:border-blue-500"}`,
|
|
2433
2866
|
icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] text-[22px] rounded-lg ${hasError ? "text-dangerous-500" : "text-label"}
|
|
2434
2867
|
`,
|
|
2435
2868
|
label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0"};
|
|
@@ -2737,7 +3170,7 @@ var ModalDialog = ({
|
|
|
2737
3170
|
)
|
|
2738
3171
|
] });
|
|
2739
3172
|
};
|
|
2740
|
-
var
|
|
3173
|
+
var Popover4 = ({
|
|
2741
3174
|
id,
|
|
2742
3175
|
displayArrow = true,
|
|
2743
3176
|
openOnClick = false
|
|
@@ -2778,13 +3211,17 @@ var customStyles = {
|
|
|
2778
3211
|
var _a;
|
|
2779
3212
|
return {
|
|
2780
3213
|
...provided,
|
|
2781
|
-
color: "var(--paragraph)",
|
|
3214
|
+
color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)",
|
|
2782
3215
|
transform: ((_a = state == null ? void 0 : state.selectProps) == null ? void 0 : _a.menuIsOpen) ? "rotate(180deg)" : "rotate(0)",
|
|
2783
3216
|
":hover": {
|
|
2784
|
-
color: "var(--paragraph)"
|
|
3217
|
+
color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)"
|
|
2785
3218
|
}
|
|
2786
3219
|
};
|
|
2787
3220
|
},
|
|
3221
|
+
placeholder: (provided, state) => ({
|
|
3222
|
+
...provided,
|
|
3223
|
+
color: state.isDisabled ? "var(--input-placeholder-disabled)" : "var(--label)"
|
|
3224
|
+
}),
|
|
2788
3225
|
input: (provided, state) => ({
|
|
2789
3226
|
...provided,
|
|
2790
3227
|
color: "var(--paragraph)",
|
|
@@ -2811,20 +3248,23 @@ var customStyles = {
|
|
|
2811
3248
|
color: state.data.value === "active" ? "#0EAF86" : state.selectProps.hasError ? "var(--dangerous-500)" : "var(--paragraph)",
|
|
2812
3249
|
display: "flex"
|
|
2813
3250
|
}),
|
|
2814
|
-
control: (provided, state) =>
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
3251
|
+
control: (provided, state) => {
|
|
3252
|
+
const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-700)" : state.menuIsOpen ? "1.5px solid var(--blue-700)" : "0.5px solid var(--stroke)";
|
|
3253
|
+
return {
|
|
3254
|
+
...provided,
|
|
3255
|
+
cursor: "pointer",
|
|
3256
|
+
border,
|
|
3257
|
+
boxShadow: state.isDisabled ? "none" : state.isFocused ? "0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue-500)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
|
|
3258
|
+
outline: "none",
|
|
3259
|
+
borderRadius: state.isFocused ? "2px" : "0.5rem",
|
|
3260
|
+
placeholder: " ",
|
|
3261
|
+
height: state.selectProps.smallField ? "30px" : "46px",
|
|
3262
|
+
backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
|
|
3263
|
+
":hover": {
|
|
3264
|
+
border
|
|
3265
|
+
}
|
|
3266
|
+
};
|
|
3267
|
+
},
|
|
2828
3268
|
multiValue: (provided) => ({
|
|
2829
3269
|
...provided,
|
|
2830
3270
|
borderRadius: "20px",
|
|
@@ -3229,20 +3669,23 @@ var customStyles2 = {
|
|
|
3229
3669
|
paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
|
|
3230
3670
|
color: state.isDisabled ? "var(--input-placeholder-disabled)" : "var(--label)"
|
|
3231
3671
|
}),
|
|
3232
|
-
control: (provided, state) =>
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3672
|
+
control: (provided, state) => {
|
|
3673
|
+
const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-700)" : state.menuIsOpen ? "1.5px solid var(--blue-700)" : "0.5px solid var(--stroke)";
|
|
3674
|
+
return {
|
|
3675
|
+
...provided,
|
|
3676
|
+
cursor: "pointer",
|
|
3677
|
+
border,
|
|
3678
|
+
boxShadow: state.isDisabled ? "none" : state.isFocused ? "0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue-500)" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
|
|
3679
|
+
outline: "none",
|
|
3680
|
+
borderRadius: state.isFocused ? "2px" : "0.5rem",
|
|
3681
|
+
placeholder: " ",
|
|
3682
|
+
height: "46px",
|
|
3683
|
+
backgroundColor: state.isDisabled ? "var(--input-bg-disabled)" : "var(--surface)",
|
|
3684
|
+
":hover": {
|
|
3685
|
+
border
|
|
3686
|
+
}
|
|
3687
|
+
};
|
|
3688
|
+
},
|
|
3246
3689
|
multiValue: (provided) => ({
|
|
3247
3690
|
...provided,
|
|
3248
3691
|
borderRadius: "20px",
|
|
@@ -4638,7 +5081,7 @@ function CopyPopover({ children, valueToCopy }) {
|
|
|
4638
5081
|
"data-tooltip-content": copied ? "Copiado" : "Copiar",
|
|
4639
5082
|
"data-tooltip-place": "top",
|
|
4640
5083
|
children: [
|
|
4641
|
-
/* @__PURE__ */ jsx(
|
|
5084
|
+
/* @__PURE__ */ jsx(Popover4, { id: "copy-id" }),
|
|
4642
5085
|
/* @__PURE__ */ jsx("div", { className: "text-neutral-400 text-xs", children })
|
|
4643
5086
|
]
|
|
4644
5087
|
}
|
|
@@ -4650,7 +5093,7 @@ function CopyPopover({ children, valueToCopy }) {
|
|
|
4650
5093
|
"data-tooltip-content": copied ? "Copiado" : "Copiar",
|
|
4651
5094
|
"data-tooltip-place": "top",
|
|
4652
5095
|
children: [
|
|
4653
|
-
/* @__PURE__ */ jsx(
|
|
5096
|
+
/* @__PURE__ */ jsx(Popover4, { id: "icon-id" }),
|
|
4654
5097
|
/* @__PURE__ */ jsx("i", { className: "uil uil-copy text-base text-blue-500 cursor-pointer -mt-[1px]" })
|
|
4655
5098
|
]
|
|
4656
5099
|
}
|
|
@@ -4682,7 +5125,7 @@ var Menu = ({ triggerElement, children, className }) => {
|
|
|
4682
5125
|
children: /* @__PURE__ */ jsx(
|
|
4683
5126
|
MenuItems,
|
|
4684
5127
|
{
|
|
4685
|
-
className: `border-[0.5px] mt-1
|
|
5128
|
+
className: `border-[0.5px] mt-1 border-stroke flex min-w-[200px] flex-col p-2 absolute right-0 z-[999] rounded-lg shadow-[0px_4px_16px_rgba(56,61,77,0.1)] bg-surface cursor-default ${className}`,
|
|
4686
5129
|
children
|
|
4687
5130
|
}
|
|
4688
5131
|
)
|
|
@@ -4695,9 +5138,9 @@ var Item = ({ index, isActive, onClick, children }) => {
|
|
|
4695
5138
|
"div",
|
|
4696
5139
|
{
|
|
4697
5140
|
className: clsx9(
|
|
4698
|
-
"
|
|
5141
|
+
"p-3 rounded-lg items-center cursor-pointer flex whitespace-nowrap no-underline ",
|
|
4699
5142
|
{
|
|
4700
|
-
"bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": isActive
|
|
5143
|
+
"bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label font-bold": isActive
|
|
4701
5144
|
},
|
|
4702
5145
|
{
|
|
4703
5146
|
"hover:bg-neutral-100 text-paragraph": !isActive
|
|
@@ -5610,7 +6053,7 @@ function InfoIcon({
|
|
|
5610
6053
|
"data-tooltip-html": content,
|
|
5611
6054
|
"data-tooltip-place": "top",
|
|
5612
6055
|
children: [
|
|
5613
|
-
/* @__PURE__ */ jsx(
|
|
6056
|
+
/* @__PURE__ */ jsx(Popover4, { id }),
|
|
5614
6057
|
/* @__PURE__ */ jsx("i", { className: "uil uil-info-circle text-p-lg text-neutral-400" })
|
|
5615
6058
|
]
|
|
5616
6059
|
}
|
|
@@ -5665,23 +6108,26 @@ var customStyles3 = {
|
|
|
5665
6108
|
color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
|
|
5666
6109
|
display: "flex"
|
|
5667
6110
|
}),
|
|
5668
|
-
control: (provided, state) =>
|
|
5669
|
-
|
|
5670
|
-
|
|
5671
|
-
|
|
5672
|
-
|
|
5673
|
-
|
|
5674
|
-
|
|
5675
|
-
|
|
5676
|
-
|
|
5677
|
-
|
|
5678
|
-
|
|
5679
|
-
|
|
5680
|
-
|
|
5681
|
-
|
|
5682
|
-
|
|
5683
|
-
|
|
5684
|
-
|
|
6111
|
+
control: (provided, state) => {
|
|
6112
|
+
const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.menuIsOpen ? "1.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
|
|
6113
|
+
return {
|
|
6114
|
+
...provided,
|
|
6115
|
+
cursor: "pointer",
|
|
6116
|
+
border,
|
|
6117
|
+
boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
|
|
6118
|
+
outline: "none",
|
|
6119
|
+
borderRadius: "0.5rem",
|
|
6120
|
+
paddingLeft: "0px",
|
|
6121
|
+
placeholder: " ",
|
|
6122
|
+
minHeight: "46px",
|
|
6123
|
+
alignItems: "end",
|
|
6124
|
+
paddingTop: "8px",
|
|
6125
|
+
backgroundColor: "var(--surface)",
|
|
6126
|
+
":hover": {
|
|
6127
|
+
border
|
|
6128
|
+
}
|
|
6129
|
+
};
|
|
6130
|
+
},
|
|
5685
6131
|
multiValue: (provided) => ({
|
|
5686
6132
|
...provided,
|
|
5687
6133
|
borderRadius: "20px",
|
|
@@ -5878,12 +6324,13 @@ var customStyles4 = {
|
|
|
5878
6324
|
background: "var(--surface)"
|
|
5879
6325
|
}),
|
|
5880
6326
|
control: (provided, state) => {
|
|
6327
|
+
const border = state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.isFocused ? "1.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
|
|
5881
6328
|
return {
|
|
5882
6329
|
...provided,
|
|
5883
6330
|
cursor: "pointer",
|
|
5884
6331
|
paddingTop: state.selectProps.hasLabel ? "18px" : "0px",
|
|
5885
|
-
border: state.
|
|
5886
|
-
boxShadow: "none",
|
|
6332
|
+
border: state.isDisabled ? "0.5px solid var(--input-border-disabled, var(--stroke))" : border,
|
|
6333
|
+
boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
|
|
5887
6334
|
outline: "none",
|
|
5888
6335
|
borderRadius: "0.5rem",
|
|
5889
6336
|
backgroundColor: "var(--surface)",
|
|
@@ -5892,7 +6339,7 @@ var customStyles4 = {
|
|
|
5892
6339
|
placeholder: state.selectProps.hasLabel ? " " : state.selectProps.placeholder,
|
|
5893
6340
|
alignItems: state.selectProps.hasLabel ? "end" : "center",
|
|
5894
6341
|
":hover": {
|
|
5895
|
-
border: state.
|
|
6342
|
+
border: state.isDisabled ? "0.5px solid var(--input-border-disabled, var(--stroke))" : border
|
|
5896
6343
|
// height: "52px",
|
|
5897
6344
|
},
|
|
5898
6345
|
":focus-within": {
|
|
@@ -6073,22 +6520,25 @@ var customStyles5 = {
|
|
|
6073
6520
|
color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
|
|
6074
6521
|
display: "flex"
|
|
6075
6522
|
}),
|
|
6076
|
-
control: (provided, state) =>
|
|
6077
|
-
|
|
6078
|
-
|
|
6079
|
-
|
|
6080
|
-
|
|
6081
|
-
|
|
6082
|
-
|
|
6083
|
-
|
|
6084
|
-
|
|
6085
|
-
|
|
6086
|
-
|
|
6087
|
-
|
|
6088
|
-
|
|
6089
|
-
|
|
6090
|
-
|
|
6091
|
-
|
|
6523
|
+
control: (provided, state) => {
|
|
6524
|
+
const border = state.isDisabled ? "0.5px solid var(--input-border-disabled)" : state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.menuIsOpen ? "1.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
|
|
6525
|
+
return {
|
|
6526
|
+
...provided,
|
|
6527
|
+
cursor: "pointer",
|
|
6528
|
+
border,
|
|
6529
|
+
boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
|
|
6530
|
+
outline: "none",
|
|
6531
|
+
borderRadius: "0.5rem",
|
|
6532
|
+
paddingLeft: "8px",
|
|
6533
|
+
placeholder: " ",
|
|
6534
|
+
height: "46px",
|
|
6535
|
+
alignItems: "end",
|
|
6536
|
+
backgroundColor: "var(--surface)",
|
|
6537
|
+
":hover": {
|
|
6538
|
+
border
|
|
6539
|
+
}
|
|
6540
|
+
};
|
|
6541
|
+
},
|
|
6092
6542
|
multiValue: (provided) => ({
|
|
6093
6543
|
...provided,
|
|
6094
6544
|
borderRadius: "20px",
|
|
@@ -6813,7 +7263,7 @@ var TextArea = ({
|
|
|
6813
7263
|
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
6814
7264
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
6815
7265
|
const styles = {
|
|
6816
|
-
input: `border
|
|
7266
|
+
input: `border-[0.5px] rounded-lg block pb-[10px] pt-[18px] w-full bg-surface disabled:bg-neutral-100 disabled:shadow-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px] text-p-md peer shadow-input pl-2 outline-none ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-stroke text-paragraph"}`,
|
|
6817
7267
|
label: `cursor-text absolute text-label top-[0.70rem] z-10 transform origin-[0] -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3 left-2.5`
|
|
6818
7268
|
};
|
|
6819
7269
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
@@ -6960,8 +7410,8 @@ function ControlledInput({
|
|
|
6960
7410
|
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
6961
7411
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
6962
7412
|
const styles = {
|
|
6963
|
-
input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input
|
|
6964
|
-
${!hasError ? "border-
|
|
7413
|
+
input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 disabled:shadow-none focus-visible:border-[1.5px] focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
|
|
7414
|
+
${!hasError ? "border-stroke" : ""}`,
|
|
6965
7415
|
icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label"}`,
|
|
6966
7416
|
rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
|
|
6967
7417
|
label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0",
|
|
@@ -7070,7 +7520,7 @@ function ControlledInput({
|
|
|
7070
7520
|
["text-neutral-300"]: disabled
|
|
7071
7521
|
}),
|
|
7072
7522
|
onClick: searchOnClick,
|
|
7073
|
-
children: /* @__PURE__ */ jsx("i", { className: "uil uil-search text-[16px]
|
|
7523
|
+
children: /* @__PURE__ */ jsx("i", { className: "uil uil-search text-[16px] rounded-full p-1.5 hover:bg-blue-100 active:bg-blue-500 active:text-white transition-colors" })
|
|
7074
7524
|
}
|
|
7075
7525
|
) })
|
|
7076
7526
|
] }),
|
|
@@ -7091,6 +7541,6 @@ function ControlledInput({
|
|
|
7091
7541
|
}
|
|
7092
7542
|
ControlledInput.displayName = "ControlledInput";
|
|
7093
7543
|
|
|
7094
|
-
export { Accordion, Badge, Button, ButtonLink, Calendar, Checkbox, ControlledInput, CopyPopover, DataTable, DataTablePagination, DatePickerInput, EditableButton, EditableText, EditableTextSelect, FileUpload, FilterCalendar, FilterOptions, InfoIcon, Input, InputMoney, InputNumber, InputPercentage, InputTag, Item, Logo, MaskedInput, Menu, ModalDialog, MultiSelect, MultiSelectBottom, PageBox, PageHeader, PaginationSelect,
|
|
7544
|
+
export { Accordion, Badge, Button, ButtonLink, Calendar, Checkbox, ControlledInput, CopyPopover, DataTable, DataTablePagination, DatePickerInput, EditableButton, EditableText, EditableTextSelect, FileUpload, FilterCalendar, FilterOptions, FilterSelect, InfoIcon, Input, InputMoney, InputNumber, InputPercentage, InputTag, Item, Logo, MaskedInput, Menu, ModalDialog, MultiSelect, MultiSelectBottom, PageBox, PageHeader, PaginationSelect, Popover4 as Popover, ProgressBar, Radio, RocketIcon, SelectField, SelectFieldBip, SimpleTab, SkeletonDetails, SkeletonList, SkeletonRegister, SpinnerIcon, StatusBall, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, Timeline, Toggle, ValueContainer4 as ValueContainer, sizes2 as sizes, translateVariant };
|
|
7095
7545
|
//# sourceMappingURL=index.js.map
|
|
7096
7546
|
//# sourceMappingURL=index.js.map
|