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