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