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.cjs
CHANGED
|
@@ -72,68 +72,103 @@ var SpinnerIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
|
72
72
|
)
|
|
73
73
|
}
|
|
74
74
|
);
|
|
75
|
+
var xSmall = {
|
|
76
|
+
text: "h-6 min-w-6 !rounded-[6px] text-[12px] leading-[1.3]",
|
|
77
|
+
icon: "text-[12px] leading-3",
|
|
78
|
+
gap: "gap-[4px]",
|
|
79
|
+
spinner: "w-3 h-3"
|
|
80
|
+
};
|
|
75
81
|
var sizes = {
|
|
76
|
-
xxs:
|
|
77
|
-
|
|
78
|
-
icon: "text-[12px] leading-3"
|
|
79
|
-
},
|
|
80
|
-
xxsm: {
|
|
81
|
-
text: "h-6 min-w-6 max-w-6 !rounded-md",
|
|
82
|
-
icon: "text-[12px] leading-3"
|
|
83
|
-
},
|
|
82
|
+
xxs: xSmall,
|
|
83
|
+
xxsm: xSmall,
|
|
84
84
|
xs: {
|
|
85
85
|
text: "h-8 min-w-8 max-w-20",
|
|
86
|
-
icon: "text-[16px] leading-4"
|
|
86
|
+
icon: "text-[16px] leading-4",
|
|
87
|
+
gap: "gap-[6px]",
|
|
88
|
+
spinner: "w-3.5 h-3.5"
|
|
87
89
|
},
|
|
88
90
|
sm: {
|
|
89
|
-
text: "h-[32px] text-[
|
|
90
|
-
icon: "text-[
|
|
91
|
+
text: "h-[32px] text-[14px]",
|
|
92
|
+
icon: "text-[14px] leading-[14px]",
|
|
93
|
+
gap: "gap-[4px]",
|
|
94
|
+
spinner: "w-3 h-3"
|
|
91
95
|
},
|
|
92
96
|
md: {
|
|
93
97
|
text: "h-[38px]",
|
|
94
|
-
icon: "text-[20px] leading-5"
|
|
98
|
+
icon: "text-[20px] leading-5",
|
|
99
|
+
gap: "gap-[6px]",
|
|
100
|
+
spinner: "w-3.5 h-3.5"
|
|
95
101
|
},
|
|
96
102
|
lg: {
|
|
97
103
|
text: "h-[46px]",
|
|
98
|
-
icon: "text-[20px] leading-5"
|
|
104
|
+
icon: "text-[20px] leading-5",
|
|
105
|
+
gap: "gap-[6px]",
|
|
106
|
+
spinner: "w-3.5 h-3.5"
|
|
99
107
|
}
|
|
100
108
|
};
|
|
109
|
+
var SHADOW_XS_NEUTRAL = "shadow-[0px_1px_1px_0px_rgba(56,61,77,0.1)]";
|
|
110
|
+
var SHADOW_SM_NEUTRAL = "shadow-[0px_1px_1.5px_0px_rgba(56,61,77,0.12)]";
|
|
111
|
+
var NEUTRAL_BORDERED_VARIANTS = /* @__PURE__ */ new Set([
|
|
112
|
+
"secondary",
|
|
113
|
+
"outline",
|
|
114
|
+
"dangerOutline",
|
|
115
|
+
"successOutline"
|
|
116
|
+
]);
|
|
101
117
|
var variants = {
|
|
118
|
+
// Default: sólido rose-500 + véu de brilho (mix-blend-plus-lighter, sempre
|
|
119
|
+
// ligado — não só no hover) igual ao node 2:2602 do Figma, sombra rosa com
|
|
120
|
+
// blur 4px (era 2px, não batia com "Shadow/Button - Primary" do Figma).
|
|
121
|
+
// Hover troca pro gradiente rose-start/rose-end; active vira rose-600 sólido
|
|
122
|
+
// sem sombra — nenhum dos dois mudou, só o default e o blur da sombra.
|
|
102
123
|
primary: {
|
|
103
|
-
text: "bg-
|
|
124
|
+
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"
|
|
104
125
|
},
|
|
105
126
|
secondary: {
|
|
106
|
-
text: "
|
|
127
|
+
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"
|
|
107
128
|
},
|
|
108
129
|
icon: {
|
|
109
|
-
text: "shadow-
|
|
130
|
+
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"
|
|
110
131
|
},
|
|
132
|
+
// Figma: borda rose-400 (mais clara que o texto rose-500), sem escurecer o
|
|
133
|
+
// texto em hover/active. Active vira preenchimento sólido rose-500 com
|
|
134
|
+
// texto branco. Disabled clareia pra rose-300 em vez de escurecer.
|
|
111
135
|
outline: {
|
|
112
|
-
text: "
|
|
136
|
+
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"
|
|
113
137
|
},
|
|
114
138
|
link: {
|
|
115
|
-
|
|
139
|
+
// blue-400 não existe no design system — o disabled não mudava de cor
|
|
140
|
+
// nenhuma antes disso, só perdia o underline.
|
|
141
|
+
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"
|
|
116
142
|
},
|
|
143
|
+
// Antes o default usava dangerous-300 (o tom claro que o Figma reserva pro
|
|
144
|
+
// disabled) — a borda/texto de força total é o estado default correto.
|
|
117
145
|
dangerOutline: {
|
|
118
|
-
text: "
|
|
146
|
+
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"
|
|
119
147
|
},
|
|
120
148
|
danger: {
|
|
121
|
-
text: "shadow-
|
|
149
|
+
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"
|
|
122
150
|
},
|
|
123
151
|
success: {
|
|
124
|
-
text: "shadow-
|
|
152
|
+
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"
|
|
125
153
|
},
|
|
154
|
+
// Antes usava green-500/green-100 — tokens que não existem no design
|
|
155
|
+
// system (caem no verde default do Tailwind). Trocado pros tokens success-*.
|
|
126
156
|
successOutline: {
|
|
127
|
-
text: "active:shadow-none
|
|
157
|
+
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"
|
|
128
158
|
},
|
|
129
159
|
warn: {
|
|
130
|
-
text: "shadow-
|
|
160
|
+
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"
|
|
131
161
|
},
|
|
132
162
|
blue: {
|
|
133
163
|
text: "shadow-button bg-blue-500 text-accent-label hover:bg-blue-600 active:bg-blue-600 text-bold"
|
|
134
164
|
},
|
|
165
|
+
// Figma "Ghost button / Transparent" (pra usar sobre fundo colorido/escuro):
|
|
166
|
+
// fica transparente sempre — hover/active só ganham um véu branco (10%/20%),
|
|
167
|
+
// nunca fundo sólido, borda, ou mudança de cor do ícone. Antes o active usava
|
|
168
|
+
// um véu PRETO (bg-[#0A0A0A40]) e o disabled ganhava fundo branco + borda +
|
|
169
|
+
// texto cinza — nada disso existe no Figma, só opacity-50.
|
|
135
170
|
iconSecondary: {
|
|
136
|
-
text: "
|
|
171
|
+
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"
|
|
137
172
|
},
|
|
138
173
|
outlineIcon: {
|
|
139
174
|
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"
|
|
@@ -143,18 +178,46 @@ var variants = {
|
|
|
143
178
|
},
|
|
144
179
|
ghost: {
|
|
145
180
|
text: "bg-transparent hover:bg-neutral-100 !rounded-full text-paragraph active:bg-neutral-200 disabled:opacity-50"
|
|
181
|
+
},
|
|
182
|
+
// Novo: réplica do "Icon Button / Primary" do Figma — botão só-ícone
|
|
183
|
+
// preenchido. Diferente do primary em texto: aqui NÃO tem gradiente no
|
|
184
|
+
// hover (o Figma só troca a cor no active) e a sombra é neutra, não
|
|
185
|
+
// rosa — igual à sombra do "Icon Button / Danger" abaixo, só que cinza.
|
|
186
|
+
iconPrimary: {
|
|
187
|
+
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"
|
|
188
|
+
},
|
|
189
|
+
// Novo: réplica do "Icon Button / Danger" do Figma — bordado em vermelho
|
|
190
|
+
// cheio (dangerous-500), diferente do outlineIcon (que é rose, não red).
|
|
191
|
+
iconDanger: {
|
|
192
|
+
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"
|
|
193
|
+
},
|
|
194
|
+
// Novo: réplica do "Ghost button / Neutral" do Figma — utilitário só-ícone
|
|
195
|
+
// sem borda, cor --label; distinto do `ghost` existente (pill com texto).
|
|
196
|
+
// Disabled vira fundo branco + opacity-50 (não fica transparente feito o
|
|
197
|
+
// default) — igual ao secondary comum.
|
|
198
|
+
ghostIcon: {
|
|
199
|
+
text: "bg-transparent text-label rounded-[6px] hover:bg-neutral-100 active:bg-neutral-200 disabled:bg-surface disabled:opacity-50"
|
|
200
|
+
},
|
|
201
|
+
// Novo: réplica do "Transparent button" do Figma — texto branco em negrito
|
|
202
|
+
// centralizado, pensado pra ficar sobre fundo colorido/escuro (ex.: banners,
|
|
203
|
+
// headers coloridos). Padding e radius próprios, independentes do size.
|
|
204
|
+
onColorText: {
|
|
205
|
+
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)]"
|
|
146
206
|
}
|
|
147
207
|
};
|
|
148
208
|
var paddingConfig = {
|
|
209
|
+
// xxs fica sem padding de propósito (era assim antes) — usado em contextos
|
|
210
|
+
// sem chrome de botão (ex.: variant="link" como texto "ver mais/menos"),
|
|
211
|
+
// onde padding quebraria o alinhamento inline com o texto ao redor.
|
|
149
212
|
xxs: {
|
|
150
213
|
normal: "",
|
|
151
214
|
icon: "",
|
|
152
215
|
iconOnly: ""
|
|
153
216
|
},
|
|
154
217
|
xxsm: {
|
|
155
|
-
normal: "
|
|
156
|
-
icon: "
|
|
157
|
-
iconOnly: "p-[
|
|
218
|
+
normal: "px-2 py-1",
|
|
219
|
+
icon: "py-1 pl-2 pr-2.5",
|
|
220
|
+
iconOnly: "p-[6px]"
|
|
158
221
|
},
|
|
159
222
|
xs: {
|
|
160
223
|
normal: "p-2",
|
|
@@ -187,8 +250,9 @@ var Button = ({
|
|
|
187
250
|
const applyGap = props.icon && props.children;
|
|
188
251
|
const appliedVariant = variants[variant].text;
|
|
189
252
|
const appliedSize = sizes[size];
|
|
253
|
+
const neutralShadow = NEUTRAL_BORDERED_VARIANTS.has(variant) ? size === "lg" ? SHADOW_SM_NEUTRAL : SHADOW_XS_NEUTRAL : "";
|
|
190
254
|
const appliedPadding = props.icon ? props.children ? paddingConfig[size].icon : paddingConfig[size].iconOnly : paddingConfig[size].normal;
|
|
191
|
-
const gapText = applyGap ?
|
|
255
|
+
const gapText = applyGap ? appliedSize.gap : "gap-0";
|
|
192
256
|
React5.useEffect(() => {
|
|
193
257
|
if (!hotkey || !props.onClick) return;
|
|
194
258
|
const handleKeyDown = (event) => {
|
|
@@ -246,10 +310,11 @@ var Button = ({
|
|
|
246
310
|
disabled: props.disabled || props.loading,
|
|
247
311
|
className: `
|
|
248
312
|
${props.className}
|
|
249
|
-
${appliedVariant}
|
|
250
|
-
${
|
|
251
|
-
${
|
|
252
|
-
${
|
|
313
|
+
${appliedVariant}
|
|
314
|
+
${neutralShadow}
|
|
315
|
+
${appliedSize.text}
|
|
316
|
+
${appliedPadding}
|
|
317
|
+
${gapText}
|
|
253
318
|
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]
|
|
254
319
|
`,
|
|
255
320
|
children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -260,7 +325,7 @@ var Button = ({
|
|
|
260
325
|
children: props.icon && !props.loading ? props.icon : props.loadingIcon && props.loading ? props.loadingIcon : /* @__PURE__ */ jsxRuntime.jsx(
|
|
261
326
|
SpinnerIcon,
|
|
262
327
|
{
|
|
263
|
-
className:
|
|
328
|
+
className: `animate-spin ${appliedSize.spinner}`,
|
|
264
329
|
fill: "currentColor"
|
|
265
330
|
}
|
|
266
331
|
)
|
|
@@ -271,7 +336,7 @@ var Button = ({
|
|
|
271
336
|
"- ",
|
|
272
337
|
hotkeyLabel
|
|
273
338
|
] }),
|
|
274
|
-
props.dropdown && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[
|
|
339
|
+
props.dropdown && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[20px]" })
|
|
275
340
|
] })
|
|
276
341
|
}
|
|
277
342
|
),
|
|
@@ -501,8 +566,8 @@ var Input = ({
|
|
|
501
566
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
502
567
|
const [showPassword, setShowPassword] = React5__namespace.default.useState(false);
|
|
503
568
|
const styles = {
|
|
504
|
-
input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border
|
|
505
|
-
${!hasError ? "border-
|
|
569
|
+
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]"}
|
|
570
|
+
${!hasError ? "border-stroke" : ""}`,
|
|
506
571
|
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`,
|
|
507
572
|
rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
|
|
508
573
|
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",
|
|
@@ -762,7 +827,7 @@ var DatePickerInput = React5.forwardRef(
|
|
|
762
827
|
];
|
|
763
828
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
764
829
|
const styles = {
|
|
765
|
-
input: `text-p-md text-paragraph bg-surface
|
|
830
|
+
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"}`,
|
|
766
831
|
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"}`,
|
|
767
832
|
label: "absolute text-label text-sm",
|
|
768
833
|
clear: "absolute top-[8px] right-[8px] cursor-pointer text-label text-[22px]"
|
|
@@ -1632,7 +1697,10 @@ function InputSmall({
|
|
|
1632
1697
|
const styles = {
|
|
1633
1698
|
input: `text-p-md text-paragraph w-full outline-none placeholder:text-label disabled:text-disabled disabled:cursor-not-allowed bg-transparent`,
|
|
1634
1699
|
icon: "text-label group-focus-within:text-neutral-600 m-[10px]",
|
|
1635
|
-
|
|
1700
|
+
// disabled fica no <input> interno, não neste wrapper — por isso o
|
|
1701
|
+
// estado desabilitado é resolvido via ternário em vez de `disabled:`
|
|
1702
|
+
// (pseudo-classe que nunca dispararia numa div).
|
|
1703
|
+
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}`,
|
|
1636
1704
|
clear: "pr-[5px] cursor-pointer text-label text-[16px]"
|
|
1637
1705
|
};
|
|
1638
1706
|
const elem = inputRef == null ? void 0 : inputRef.current;
|
|
@@ -1684,7 +1752,7 @@ function InputSmall({
|
|
|
1684
1752
|
["pl-[2px]"]: collapsed
|
|
1685
1753
|
}),
|
|
1686
1754
|
onClick: searchOnClick,
|
|
1687
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-search text-[16px]
|
|
1755
|
+
children: /* @__PURE__ */ jsxRuntime.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" })
|
|
1688
1756
|
}
|
|
1689
1757
|
) })
|
|
1690
1758
|
] });
|
|
@@ -2082,6 +2150,371 @@ var FilterOptions = ({
|
|
|
2082
2150
|
}
|
|
2083
2151
|
);
|
|
2084
2152
|
};
|
|
2153
|
+
var FilterSelect = ({
|
|
2154
|
+
icon,
|
|
2155
|
+
label,
|
|
2156
|
+
isMulti,
|
|
2157
|
+
options = [],
|
|
2158
|
+
onApply,
|
|
2159
|
+
onClear,
|
|
2160
|
+
onSelectAll,
|
|
2161
|
+
control,
|
|
2162
|
+
name,
|
|
2163
|
+
fetch,
|
|
2164
|
+
subFilters = [],
|
|
2165
|
+
emptyMessage,
|
|
2166
|
+
initialMessage,
|
|
2167
|
+
initialMessageClassName,
|
|
2168
|
+
applyOnClick = false,
|
|
2169
|
+
showFilter = false,
|
|
2170
|
+
renderOption,
|
|
2171
|
+
searchPlaceholder = "Pesquisar",
|
|
2172
|
+
panelClassName = "p-2",
|
|
2173
|
+
applyLabel = "Aplicar",
|
|
2174
|
+
cancelLabel = "Cancelar",
|
|
2175
|
+
clearLabel = "Limpar",
|
|
2176
|
+
selectAllLabel = "Marcar todos",
|
|
2177
|
+
clearButton = true
|
|
2178
|
+
}) => {
|
|
2179
|
+
const [currentValue, setCurrentValue] = React5.useState(isMulti ? [] : {});
|
|
2180
|
+
const [data, setData] = React5.useState(() => options);
|
|
2181
|
+
const [filter, setFilter] = React5.useState("");
|
|
2182
|
+
const [subFilter, setSubFilter] = React5.useState(
|
|
2183
|
+
(subFilters == null ? void 0 : subFilters.length) > 0 ? subFilters[0].id : null
|
|
2184
|
+
);
|
|
2185
|
+
const [loading, setLoading] = React5.useState(false);
|
|
2186
|
+
const search = async () => {
|
|
2187
|
+
if ((filter == null ? void 0 : filter.length) > 0 || (options == null ? void 0 : options.length) > 0) {
|
|
2188
|
+
if (fetch) {
|
|
2189
|
+
setData(await fetch(filter, subFilter));
|
|
2190
|
+
} else {
|
|
2191
|
+
const result = options.filter(
|
|
2192
|
+
(opt) => {
|
|
2193
|
+
var _a;
|
|
2194
|
+
return (_a = opt == null ? void 0 : opt.label) == null ? void 0 : _a.toLowerCase().includes(filter.toLowerCase());
|
|
2195
|
+
}
|
|
2196
|
+
);
|
|
2197
|
+
const order = result.sort((a, b) => {
|
|
2198
|
+
var _a;
|
|
2199
|
+
return (_a = a == null ? void 0 : a.label) == null ? void 0 : _a.toLowerCase();
|
|
2200
|
+
});
|
|
2201
|
+
setData(order);
|
|
2202
|
+
}
|
|
2203
|
+
} else {
|
|
2204
|
+
setData([]);
|
|
2205
|
+
}
|
|
2206
|
+
setLoading(false);
|
|
2207
|
+
};
|
|
2208
|
+
React5.useEffect(() => {
|
|
2209
|
+
setLoading(true);
|
|
2210
|
+
const timeout = setTimeout(() => {
|
|
2211
|
+
search();
|
|
2212
|
+
}, 400);
|
|
2213
|
+
return () => clearTimeout(timeout);
|
|
2214
|
+
}, [filter]);
|
|
2215
|
+
const optionStyle = (option, isSelected) => {
|
|
2216
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2217
|
+
react.ListboxOption,
|
|
2218
|
+
{
|
|
2219
|
+
disabled: option.disabled,
|
|
2220
|
+
value: option,
|
|
2221
|
+
as: React5.Fragment,
|
|
2222
|
+
children: renderOption ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2223
|
+
"div",
|
|
2224
|
+
{
|
|
2225
|
+
className: clsx9__default.default(
|
|
2226
|
+
"relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
|
|
2227
|
+
{
|
|
2228
|
+
["hover:bg-neutral-100"]: !option.disabled && !isSelected,
|
|
2229
|
+
["text-disabled"]: option.disabled,
|
|
2230
|
+
["bg-blue-500 hover:bg-blue-500"]: isSelected
|
|
2231
|
+
}
|
|
2232
|
+
),
|
|
2233
|
+
children: renderOption(option, isSelected)
|
|
2234
|
+
}
|
|
2235
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2236
|
+
"div",
|
|
2237
|
+
{
|
|
2238
|
+
className: clsx9__default.default(
|
|
2239
|
+
"relative cursor-pointer outline-none select-none p-3 rounded-lg pr-9 text-paragraph mt-1 first:mt-0 overflow-hidden w-full",
|
|
2240
|
+
{
|
|
2241
|
+
["hover:bg-neutral-100"]: !option.disabled && !isSelected,
|
|
2242
|
+
["text-disabled"]: option.disabled,
|
|
2243
|
+
["bg-blue-500 hover:bg-blue-500"]: isSelected
|
|
2244
|
+
}
|
|
2245
|
+
),
|
|
2246
|
+
children: [
|
|
2247
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2248
|
+
"span",
|
|
2249
|
+
{
|
|
2250
|
+
className: clsx9__default.default(
|
|
2251
|
+
{
|
|
2252
|
+
["font-semibold text-accent-label"]: isSelected
|
|
2253
|
+
},
|
|
2254
|
+
"text-wrap break-words font-normal block"
|
|
2255
|
+
),
|
|
2256
|
+
children: option == null ? void 0 : option.label
|
|
2257
|
+
}
|
|
2258
|
+
),
|
|
2259
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2260
|
+
"span",
|
|
2261
|
+
{
|
|
2262
|
+
className: clsx9__default.default(
|
|
2263
|
+
{
|
|
2264
|
+
["font-semibold text-accent-label"]: isSelected,
|
|
2265
|
+
["text-label"]: !isSelected
|
|
2266
|
+
},
|
|
2267
|
+
"w-[200px] whitespace-nowrap text-ellipsis overflow-hidden text-p-sm block"
|
|
2268
|
+
),
|
|
2269
|
+
children: option == null ? void 0 : option.description
|
|
2270
|
+
}
|
|
2271
|
+
)
|
|
2272
|
+
]
|
|
2273
|
+
}
|
|
2274
|
+
)
|
|
2275
|
+
},
|
|
2276
|
+
option.id
|
|
2277
|
+
);
|
|
2278
|
+
};
|
|
2279
|
+
const isMobileSize = (window == null ? void 0 : window.innerWidth) < 768;
|
|
2280
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2281
|
+
reactHookForm.Controller,
|
|
2282
|
+
{
|
|
2283
|
+
name,
|
|
2284
|
+
control,
|
|
2285
|
+
render: ({ field }) => {
|
|
2286
|
+
var _a, _b;
|
|
2287
|
+
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);
|
|
2288
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2289
|
+
react.Popover,
|
|
2290
|
+
{
|
|
2291
|
+
className: clsx9__default.default(
|
|
2292
|
+
{ ["w-full"]: isMobileSize },
|
|
2293
|
+
"relative text-paragraph"
|
|
2294
|
+
),
|
|
2295
|
+
children: ({ open }) => {
|
|
2296
|
+
var _a2, _b2;
|
|
2297
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Float, { composable: true, shift: 8, zIndex: 99, offset: 6, children: [
|
|
2298
|
+
/* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Reference, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
|
|
2299
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2300
|
+
react.PopoverButton,
|
|
2301
|
+
{
|
|
2302
|
+
as: "button",
|
|
2303
|
+
className: clsx9__default.default(
|
|
2304
|
+
"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]",
|
|
2305
|
+
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"
|
|
2306
|
+
),
|
|
2307
|
+
children: [
|
|
2308
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[18px] leading-none", children: icon }),
|
|
2309
|
+
/* @__PURE__ */ jsxRuntime.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 }),
|
|
2310
|
+
isMulti && field.value && field.value.length > 0 && /* @__PURE__ */ jsxRuntime.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 }),
|
|
2311
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2312
|
+
"i",
|
|
2313
|
+
{
|
|
2314
|
+
className: clsx9__default.default(
|
|
2315
|
+
"text-[18px]",
|
|
2316
|
+
open ? "uil uil-angle-up" : "uil uil-angle-down",
|
|
2317
|
+
// Some quando o X de limpar aparece, pra não sobrepor.
|
|
2318
|
+
hasValue && clearButton ? "group-hover:opacity-0 group-active:opacity-0" : ""
|
|
2319
|
+
)
|
|
2320
|
+
}
|
|
2321
|
+
)
|
|
2322
|
+
]
|
|
2323
|
+
}
|
|
2324
|
+
),
|
|
2325
|
+
hasValue && clearButton && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2326
|
+
"button",
|
|
2327
|
+
{
|
|
2328
|
+
type: "button",
|
|
2329
|
+
"aria-label": clearLabel,
|
|
2330
|
+
onClick: (e) => {
|
|
2331
|
+
e.stopPropagation();
|
|
2332
|
+
e.preventDefault();
|
|
2333
|
+
const emptyValue = isMulti ? [] : null;
|
|
2334
|
+
field.onChange(emptyValue);
|
|
2335
|
+
setCurrentValue(isMulti ? [] : {});
|
|
2336
|
+
if (onClear) onClear();
|
|
2337
|
+
},
|
|
2338
|
+
className: clsx9__default.default(
|
|
2339
|
+
"absolute right-0 top-1/2 hidden h-9 -translate-y-1/2 items-center justify-end rounded-r-lg pl-2 pr-1",
|
|
2340
|
+
"bg-gradient-to-l from-blue-500 via-blue-500 via-[69%] to-transparent",
|
|
2341
|
+
"group-hover:flex group-active:flex group-active:from-[#007fb0] group-active:via-[#007fb0]"
|
|
2342
|
+
),
|
|
2343
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-full w-7 items-center justify-center rounded-[6px] text-white", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-[18px]" }) })
|
|
2344
|
+
}
|
|
2345
|
+
)
|
|
2346
|
+
] }) }),
|
|
2347
|
+
open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2348
|
+
react.PopoverPanel,
|
|
2349
|
+
{
|
|
2350
|
+
className: clsx9__default.default(
|
|
2351
|
+
"whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-200",
|
|
2352
|
+
panelClassName
|
|
2353
|
+
),
|
|
2354
|
+
children: ({ close }) => {
|
|
2355
|
+
const onClose = () => {
|
|
2356
|
+
setCurrentValue(field.value);
|
|
2357
|
+
close();
|
|
2358
|
+
};
|
|
2359
|
+
React5.useEffect(() => {
|
|
2360
|
+
setCurrentValue(field.value);
|
|
2361
|
+
}, [open]);
|
|
2362
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
2363
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2364
|
+
react.Listbox,
|
|
2365
|
+
{
|
|
2366
|
+
value: currentValue || [],
|
|
2367
|
+
onChange: setCurrentValue,
|
|
2368
|
+
multiple: isMulti,
|
|
2369
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2370
|
+
react.ListboxOptions,
|
|
2371
|
+
{
|
|
2372
|
+
static: true,
|
|
2373
|
+
className: clsx9__default.default(
|
|
2374
|
+
"max-h-60 w-full overflow-x-hidden overflow-y-auto bg-surface text-p-md focus:outline-none sm:text-sm relative",
|
|
2375
|
+
{
|
|
2376
|
+
"pr-2": options.some(
|
|
2377
|
+
(option) => option.description
|
|
2378
|
+
) ? options.length > 3 : options.length > 4
|
|
2379
|
+
}
|
|
2380
|
+
),
|
|
2381
|
+
children: [
|
|
2382
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-1 sticky top-0 z-30", children: [
|
|
2383
|
+
showFilter && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2384
|
+
InputSmall,
|
|
2385
|
+
{
|
|
2386
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-search" }),
|
|
2387
|
+
onChange: (e) => setFilter(e),
|
|
2388
|
+
value: filter,
|
|
2389
|
+
placeholder: searchPlaceholder,
|
|
2390
|
+
clearField: true,
|
|
2391
|
+
onKeyDown: (e) => {
|
|
2392
|
+
if (e.key === " " || e.code === "Space") {
|
|
2393
|
+
e.stopPropagation();
|
|
2394
|
+
}
|
|
2395
|
+
}
|
|
2396
|
+
}
|
|
2397
|
+
),
|
|
2398
|
+
subFilters && fetch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 pt-2 bg-surface", children: subFilters.map((item, index) => {
|
|
2399
|
+
const active = (item == null ? void 0 : item.id) === subFilter;
|
|
2400
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2401
|
+
"button",
|
|
2402
|
+
{
|
|
2403
|
+
className: clsx9__default.default(
|
|
2404
|
+
{
|
|
2405
|
+
["bg-blue-500 text-accent-label"]: active,
|
|
2406
|
+
["text-paragraph"]: !active
|
|
2407
|
+
},
|
|
2408
|
+
`rounded-[20px] border-[0.5px] border-neutral-200 px-4 py-[6px]`
|
|
2409
|
+
),
|
|
2410
|
+
onClick: () => {
|
|
2411
|
+
if (subFilter == item.id) {
|
|
2412
|
+
setSubFilter(null);
|
|
2413
|
+
} else {
|
|
2414
|
+
setSubFilter(item.id);
|
|
2415
|
+
}
|
|
2416
|
+
},
|
|
2417
|
+
children: item.name
|
|
2418
|
+
},
|
|
2419
|
+
index
|
|
2420
|
+
);
|
|
2421
|
+
}) })
|
|
2422
|
+
] }),
|
|
2423
|
+
loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 w-full my-4", children: [
|
|
2424
|
+
/* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "animate-spin w-[16px] h-[16px]" }),
|
|
2425
|
+
"Carregando"
|
|
2426
|
+
] }),
|
|
2427
|
+
(data == null ? void 0 : data.length) === 0 && (filter == null ? void 0 : filter.length) > 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label text-p-md", children: emptyMessage }) }),
|
|
2428
|
+
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__ */ jsxRuntime.jsx("div", { className: clsx9__default.default("py-4", initialMessageClassName), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label text-p-md", children: initialMessage }) }),
|
|
2429
|
+
initialMessage && currentValue && (currentValue == null ? void 0 : currentValue.id) && (filter == null ? void 0 : filter.length) === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: isMulti ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: currentValue == null ? void 0 : currentValue.map((option) => {
|
|
2430
|
+
let isSelected = isMulti ? currentValue && (currentValue == null ? void 0 : currentValue.length) > 0 && (currentValue == null ? void 0 : currentValue.some(
|
|
2431
|
+
(e) => e.id === option.id
|
|
2432
|
+
)) : currentValue && (currentValue == null ? void 0 : currentValue.id) === option.id;
|
|
2433
|
+
return optionStyle(
|
|
2434
|
+
options,
|
|
2435
|
+
isSelected
|
|
2436
|
+
);
|
|
2437
|
+
}) }) : optionStyle(field.value, true) }),
|
|
2438
|
+
!loading && (data == null ? void 0 : data.map((option) => {
|
|
2439
|
+
let isSelected = isMulti ? currentValue && currentValue.length > 0 && currentValue.some(
|
|
2440
|
+
(e) => e.id === option.id
|
|
2441
|
+
) : currentValue && currentValue.id === option.id;
|
|
2442
|
+
return optionStyle(option, isSelected);
|
|
2443
|
+
}))
|
|
2444
|
+
]
|
|
2445
|
+
}
|
|
2446
|
+
)
|
|
2447
|
+
}
|
|
2448
|
+
),
|
|
2449
|
+
!applyOnClick && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-end border-t border-t-neutral-200 pt-3", children: [
|
|
2450
|
+
isMulti && onSelectAll && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-r pr-2 border-neutral-300", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2451
|
+
Button,
|
|
2452
|
+
{
|
|
2453
|
+
variant: "link",
|
|
2454
|
+
size: "xxs",
|
|
2455
|
+
onClick: () => {
|
|
2456
|
+
onSelectAll();
|
|
2457
|
+
field.onChange(options);
|
|
2458
|
+
setCurrentValue(options);
|
|
2459
|
+
close();
|
|
2460
|
+
},
|
|
2461
|
+
children: selectAllLabel
|
|
2462
|
+
}
|
|
2463
|
+
) }),
|
|
2464
|
+
onClear && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2465
|
+
Button,
|
|
2466
|
+
{
|
|
2467
|
+
variant: "link",
|
|
2468
|
+
size: "xxs",
|
|
2469
|
+
onClick: () => {
|
|
2470
|
+
if (onClear) {
|
|
2471
|
+
onClear();
|
|
2472
|
+
setCurrentValue([]);
|
|
2473
|
+
field.onChange([]);
|
|
2474
|
+
}
|
|
2475
|
+
close();
|
|
2476
|
+
},
|
|
2477
|
+
children: clearLabel
|
|
2478
|
+
}
|
|
2479
|
+
) }),
|
|
2480
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2481
|
+
Button,
|
|
2482
|
+
{
|
|
2483
|
+
size: "xs",
|
|
2484
|
+
variant: "secondary",
|
|
2485
|
+
onClick: () => {
|
|
2486
|
+
onClose();
|
|
2487
|
+
},
|
|
2488
|
+
children: cancelLabel
|
|
2489
|
+
}
|
|
2490
|
+
),
|
|
2491
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2492
|
+
Button,
|
|
2493
|
+
{
|
|
2494
|
+
size: "xs",
|
|
2495
|
+
variant: "primary",
|
|
2496
|
+
disabled: JSON.stringify(currentValue) === JSON.stringify(field == null ? void 0 : field.value),
|
|
2497
|
+
onClick: () => {
|
|
2498
|
+
field.onChange(currentValue);
|
|
2499
|
+
if (onApply) onApply();
|
|
2500
|
+
close();
|
|
2501
|
+
},
|
|
2502
|
+
children: applyLabel
|
|
2503
|
+
}
|
|
2504
|
+
)
|
|
2505
|
+
] })
|
|
2506
|
+
] });
|
|
2507
|
+
}
|
|
2508
|
+
}
|
|
2509
|
+
) })
|
|
2510
|
+
] });
|
|
2511
|
+
}
|
|
2512
|
+
}
|
|
2513
|
+
);
|
|
2514
|
+
}
|
|
2515
|
+
}
|
|
2516
|
+
);
|
|
2517
|
+
};
|
|
2085
2518
|
var IntlCurrencyInput = IntlCurrencyInputRaw__default.default.default || IntlCurrencyInputRaw__default.default;
|
|
2086
2519
|
var intl_currency_input_default = IntlCurrencyInput;
|
|
2087
2520
|
function InputMoney({
|
|
@@ -2126,7 +2559,7 @@ function InputMoney({
|
|
|
2126
2559
|
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
2127
2560
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
2128
2561
|
const styles = {
|
|
2129
|
-
input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input
|
|
2562
|
+
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"}`,
|
|
2130
2563
|
icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
|
|
2131
2564
|
`,
|
|
2132
2565
|
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"};
|
|
@@ -2248,12 +2681,12 @@ function InputNumber({
|
|
|
2248
2681
|
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
2249
2682
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
2250
2683
|
const styles = {
|
|
2251
|
-
input: `text-p-md pl-
|
|
2684
|
+
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"}`,
|
|
2252
2685
|
icon: `absolute bg-neutral-100 h-[44px] top-[2px] left-[1.5px] w-[38px] rounded-l-lg ${hasError ? "text-dangerous-500" : "text-label"}
|
|
2253
2686
|
`,
|
|
2254
2687
|
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",
|
|
2255
2688
|
buttonsWrapper: "absolute top-[7px] right-[10px] cursor-pointer text-label flex flex-col gap-[2px]",
|
|
2256
|
-
button:
|
|
2689
|
+
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"}`
|
|
2257
2690
|
};
|
|
2258
2691
|
const [debouncedCount, setDebouncedCount] = React5.useState(0);
|
|
2259
2692
|
const save = () => {
|
|
@@ -2461,7 +2894,7 @@ function InputPercentage({
|
|
|
2461
2894
|
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
2462
2895
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
2463
2896
|
const styles = {
|
|
2464
|
-
input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input
|
|
2897
|
+
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"}`,
|
|
2465
2898
|
icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] text-[22px] rounded-lg ${hasError ? "text-dangerous-500" : "text-label"}
|
|
2466
2899
|
`,
|
|
2467
2900
|
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"};
|
|
@@ -2769,7 +3202,7 @@ var ModalDialog = ({
|
|
|
2769
3202
|
)
|
|
2770
3203
|
] });
|
|
2771
3204
|
};
|
|
2772
|
-
var
|
|
3205
|
+
var Popover4 = ({
|
|
2773
3206
|
id,
|
|
2774
3207
|
displayArrow = true,
|
|
2775
3208
|
openOnClick = false
|
|
@@ -2810,13 +3243,17 @@ var customStyles = {
|
|
|
2810
3243
|
var _a;
|
|
2811
3244
|
return {
|
|
2812
3245
|
...provided,
|
|
2813
|
-
color: "var(--paragraph)",
|
|
3246
|
+
color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)",
|
|
2814
3247
|
transform: ((_a = state == null ? void 0 : state.selectProps) == null ? void 0 : _a.menuIsOpen) ? "rotate(180deg)" : "rotate(0)",
|
|
2815
3248
|
":hover": {
|
|
2816
|
-
color: "var(--paragraph)"
|
|
3249
|
+
color: state.isDisabled ? "var(--input-icon-disabled)" : "var(--paragraph)"
|
|
2817
3250
|
}
|
|
2818
3251
|
};
|
|
2819
3252
|
},
|
|
3253
|
+
placeholder: (provided, state) => ({
|
|
3254
|
+
...provided,
|
|
3255
|
+
color: state.isDisabled ? "var(--input-placeholder-disabled)" : "var(--label)"
|
|
3256
|
+
}),
|
|
2820
3257
|
input: (provided, state) => ({
|
|
2821
3258
|
...provided,
|
|
2822
3259
|
color: "var(--paragraph)",
|
|
@@ -2843,20 +3280,23 @@ var customStyles = {
|
|
|
2843
3280
|
color: state.data.value === "active" ? "#0EAF86" : state.selectProps.hasError ? "var(--dangerous-500)" : "var(--paragraph)",
|
|
2844
3281
|
display: "flex"
|
|
2845
3282
|
}),
|
|
2846
|
-
control: (provided, state) =>
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
3283
|
+
control: (provided, state) => {
|
|
3284
|
+
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)";
|
|
3285
|
+
return {
|
|
3286
|
+
...provided,
|
|
3287
|
+
cursor: "pointer",
|
|
3288
|
+
border,
|
|
3289
|
+
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)",
|
|
3290
|
+
outline: "none",
|
|
3291
|
+
borderRadius: state.isFocused ? "2px" : "0.5rem",
|
|
3292
|
+
placeholder: " ",
|
|
3293
|
+
height: state.selectProps.smallField ? "30px" : "46px",
|
|
3294
|
+
backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
|
|
3295
|
+
":hover": {
|
|
3296
|
+
border
|
|
3297
|
+
}
|
|
3298
|
+
};
|
|
3299
|
+
},
|
|
2860
3300
|
multiValue: (provided) => ({
|
|
2861
3301
|
...provided,
|
|
2862
3302
|
borderRadius: "20px",
|
|
@@ -3261,20 +3701,23 @@ var customStyles2 = {
|
|
|
3261
3701
|
paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
|
|
3262
3702
|
color: state.isDisabled ? "var(--input-placeholder-disabled)" : "var(--label)"
|
|
3263
3703
|
}),
|
|
3264
|
-
control: (provided, state) =>
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3704
|
+
control: (provided, state) => {
|
|
3705
|
+
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)";
|
|
3706
|
+
return {
|
|
3707
|
+
...provided,
|
|
3708
|
+
cursor: "pointer",
|
|
3709
|
+
border,
|
|
3710
|
+
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)",
|
|
3711
|
+
outline: "none",
|
|
3712
|
+
borderRadius: state.isFocused ? "2px" : "0.5rem",
|
|
3713
|
+
placeholder: " ",
|
|
3714
|
+
height: "46px",
|
|
3715
|
+
backgroundColor: state.isDisabled ? "var(--input-bg-disabled)" : "var(--surface)",
|
|
3716
|
+
":hover": {
|
|
3717
|
+
border
|
|
3718
|
+
}
|
|
3719
|
+
};
|
|
3720
|
+
},
|
|
3278
3721
|
multiValue: (provided) => ({
|
|
3279
3722
|
...provided,
|
|
3280
3723
|
borderRadius: "20px",
|
|
@@ -4670,7 +5113,7 @@ function CopyPopover({ children, valueToCopy }) {
|
|
|
4670
5113
|
"data-tooltip-content": copied ? "Copiado" : "Copiar",
|
|
4671
5114
|
"data-tooltip-place": "top",
|
|
4672
5115
|
children: [
|
|
4673
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5116
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover4, { id: "copy-id" }),
|
|
4674
5117
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral-400 text-xs", children })
|
|
4675
5118
|
]
|
|
4676
5119
|
}
|
|
@@ -4682,7 +5125,7 @@ function CopyPopover({ children, valueToCopy }) {
|
|
|
4682
5125
|
"data-tooltip-content": copied ? "Copiado" : "Copiar",
|
|
4683
5126
|
"data-tooltip-place": "top",
|
|
4684
5127
|
children: [
|
|
4685
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5128
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover4, { id: "icon-id" }),
|
|
4686
5129
|
/* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-copy text-base text-blue-500 cursor-pointer -mt-[1px]" })
|
|
4687
5130
|
]
|
|
4688
5131
|
}
|
|
@@ -4714,7 +5157,7 @@ var Menu = ({ triggerElement, children, className }) => {
|
|
|
4714
5157
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4715
5158
|
react.MenuItems,
|
|
4716
5159
|
{
|
|
4717
|
-
className: `border-[0.5px] mt-1
|
|
5160
|
+
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}`,
|
|
4718
5161
|
children
|
|
4719
5162
|
}
|
|
4720
5163
|
)
|
|
@@ -4727,9 +5170,9 @@ var Item = ({ index, isActive, onClick, children }) => {
|
|
|
4727
5170
|
"div",
|
|
4728
5171
|
{
|
|
4729
5172
|
className: clsx9__default.default(
|
|
4730
|
-
"
|
|
5173
|
+
"p-3 rounded-lg items-center cursor-pointer flex whitespace-nowrap no-underline ",
|
|
4731
5174
|
{
|
|
4732
|
-
"bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label": isActive
|
|
5175
|
+
"bg-blue-500 hover:bg-blue-500 hover:text-accent-label text-accent-label font-bold": isActive
|
|
4733
5176
|
},
|
|
4734
5177
|
{
|
|
4735
5178
|
"hover:bg-neutral-100 text-paragraph": !isActive
|
|
@@ -5642,7 +6085,7 @@ function InfoIcon({
|
|
|
5642
6085
|
"data-tooltip-html": content,
|
|
5643
6086
|
"data-tooltip-place": "top",
|
|
5644
6087
|
children: [
|
|
5645
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6088
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover4, { id }),
|
|
5646
6089
|
/* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-info-circle text-p-lg text-neutral-400" })
|
|
5647
6090
|
]
|
|
5648
6091
|
}
|
|
@@ -5697,23 +6140,26 @@ var customStyles3 = {
|
|
|
5697
6140
|
color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
|
|
5698
6141
|
display: "flex"
|
|
5699
6142
|
}),
|
|
5700
|
-
control: (provided, state) =>
|
|
5701
|
-
|
|
5702
|
-
|
|
5703
|
-
|
|
5704
|
-
|
|
5705
|
-
|
|
5706
|
-
|
|
5707
|
-
|
|
5708
|
-
|
|
5709
|
-
|
|
5710
|
-
|
|
5711
|
-
|
|
5712
|
-
|
|
5713
|
-
|
|
5714
|
-
|
|
5715
|
-
|
|
5716
|
-
|
|
6143
|
+
control: (provided, state) => {
|
|
6144
|
+
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)";
|
|
6145
|
+
return {
|
|
6146
|
+
...provided,
|
|
6147
|
+
cursor: "pointer",
|
|
6148
|
+
border,
|
|
6149
|
+
boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
|
|
6150
|
+
outline: "none",
|
|
6151
|
+
borderRadius: "0.5rem",
|
|
6152
|
+
paddingLeft: "0px",
|
|
6153
|
+
placeholder: " ",
|
|
6154
|
+
minHeight: "46px",
|
|
6155
|
+
alignItems: "end",
|
|
6156
|
+
paddingTop: "8px",
|
|
6157
|
+
backgroundColor: "var(--surface)",
|
|
6158
|
+
":hover": {
|
|
6159
|
+
border
|
|
6160
|
+
}
|
|
6161
|
+
};
|
|
6162
|
+
},
|
|
5717
6163
|
multiValue: (provided) => ({
|
|
5718
6164
|
...provided,
|
|
5719
6165
|
borderRadius: "20px",
|
|
@@ -5910,12 +6356,13 @@ var customStyles4 = {
|
|
|
5910
6356
|
background: "var(--surface)"
|
|
5911
6357
|
}),
|
|
5912
6358
|
control: (provided, state) => {
|
|
6359
|
+
const border = state.selectProps.hasError ? "0.5px solid var(--dangerous-500)" : state.isFocused ? "1.5px solid var(--blue-500)" : "0.5px solid var(--stroke)";
|
|
5913
6360
|
return {
|
|
5914
6361
|
...provided,
|
|
5915
6362
|
cursor: "pointer",
|
|
5916
6363
|
paddingTop: state.selectProps.hasLabel ? "18px" : "0px",
|
|
5917
|
-
border: state.
|
|
5918
|
-
boxShadow: "none",
|
|
6364
|
+
border: state.isDisabled ? "0.5px solid var(--input-border-disabled, var(--stroke))" : border,
|
|
6365
|
+
boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
|
|
5919
6366
|
outline: "none",
|
|
5920
6367
|
borderRadius: "0.5rem",
|
|
5921
6368
|
backgroundColor: "var(--surface)",
|
|
@@ -5924,7 +6371,7 @@ var customStyles4 = {
|
|
|
5924
6371
|
placeholder: state.selectProps.hasLabel ? " " : state.selectProps.placeholder,
|
|
5925
6372
|
alignItems: state.selectProps.hasLabel ? "end" : "center",
|
|
5926
6373
|
":hover": {
|
|
5927
|
-
border: state.
|
|
6374
|
+
border: state.isDisabled ? "0.5px solid var(--input-border-disabled, var(--stroke))" : border
|
|
5928
6375
|
// height: "52px",
|
|
5929
6376
|
},
|
|
5930
6377
|
":focus-within": {
|
|
@@ -6105,22 +6552,25 @@ var customStyles5 = {
|
|
|
6105
6552
|
color: state.data.value === "active" ? "#0EAF86" : "var(--paragraph)",
|
|
6106
6553
|
display: "flex"
|
|
6107
6554
|
}),
|
|
6108
|
-
control: (provided, state) =>
|
|
6109
|
-
|
|
6110
|
-
|
|
6111
|
-
|
|
6112
|
-
|
|
6113
|
-
|
|
6114
|
-
|
|
6115
|
-
|
|
6116
|
-
|
|
6117
|
-
|
|
6118
|
-
|
|
6119
|
-
|
|
6120
|
-
|
|
6121
|
-
|
|
6122
|
-
|
|
6123
|
-
|
|
6555
|
+
control: (provided, state) => {
|
|
6556
|
+
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)";
|
|
6557
|
+
return {
|
|
6558
|
+
...provided,
|
|
6559
|
+
cursor: "pointer",
|
|
6560
|
+
border,
|
|
6561
|
+
boxShadow: state.isDisabled ? "none" : "0px 1px 1.5px 0px rgba(56,61,77,0.12)",
|
|
6562
|
+
outline: "none",
|
|
6563
|
+
borderRadius: "0.5rem",
|
|
6564
|
+
paddingLeft: "8px",
|
|
6565
|
+
placeholder: " ",
|
|
6566
|
+
height: "46px",
|
|
6567
|
+
alignItems: "end",
|
|
6568
|
+
backgroundColor: "var(--surface)",
|
|
6569
|
+
":hover": {
|
|
6570
|
+
border
|
|
6571
|
+
}
|
|
6572
|
+
};
|
|
6573
|
+
},
|
|
6124
6574
|
multiValue: (provided) => ({
|
|
6125
6575
|
...provided,
|
|
6126
6576
|
borderRadius: "20px",
|
|
@@ -6845,7 +7295,7 @@ var TextArea = ({
|
|
|
6845
7295
|
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
6846
7296
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
6847
7297
|
const styles = {
|
|
6848
|
-
input: `border
|
|
7298
|
+
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"}`,
|
|
6849
7299
|
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`
|
|
6850
7300
|
};
|
|
6851
7301
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
@@ -6992,8 +7442,8 @@ function ControlledInput({
|
|
|
6992
7442
|
const fieldValidationMessages = [error == null ? void 0 : error.message];
|
|
6993
7443
|
const hasError = fieldValidationMessages.some((item) => item !== void 0);
|
|
6994
7444
|
const styles = {
|
|
6995
|
-
input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input
|
|
6996
|
-
${!hasError ? "border-
|
|
7445
|
+
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]"}
|
|
7446
|
+
${!hasError ? "border-stroke" : ""}`,
|
|
6997
7447
|
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"}`,
|
|
6998
7448
|
rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
|
|
6999
7449
|
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",
|
|
@@ -7102,7 +7552,7 @@ function ControlledInput({
|
|
|
7102
7552
|
["text-neutral-300"]: disabled
|
|
7103
7553
|
}),
|
|
7104
7554
|
onClick: searchOnClick,
|
|
7105
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-search text-[16px]
|
|
7555
|
+
children: /* @__PURE__ */ jsxRuntime.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" })
|
|
7106
7556
|
}
|
|
7107
7557
|
) })
|
|
7108
7558
|
] }),
|
|
@@ -7140,6 +7590,7 @@ exports.EditableTextSelect = EditableTextSelect;
|
|
|
7140
7590
|
exports.FileUpload = FileUpload;
|
|
7141
7591
|
exports.FilterCalendar = FilterCalendar;
|
|
7142
7592
|
exports.FilterOptions = FilterOptions;
|
|
7593
|
+
exports.FilterSelect = FilterSelect;
|
|
7143
7594
|
exports.InfoIcon = InfoIcon;
|
|
7144
7595
|
exports.Input = Input;
|
|
7145
7596
|
exports.InputMoney = InputMoney;
|
|
@@ -7156,7 +7607,7 @@ exports.MultiSelectBottom = MultiSelectBottom;
|
|
|
7156
7607
|
exports.PageBox = PageBox;
|
|
7157
7608
|
exports.PageHeader = PageHeader;
|
|
7158
7609
|
exports.PaginationSelect = PaginationSelect;
|
|
7159
|
-
exports.Popover =
|
|
7610
|
+
exports.Popover = Popover4;
|
|
7160
7611
|
exports.ProgressBar = ProgressBar;
|
|
7161
7612
|
exports.Radio = Radio;
|
|
7162
7613
|
exports.RocketIcon = RocketIcon;
|