@sigep/react 1.1.2 → 1.1.3
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.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +190 -72
- package/dist/index.mjs +195 -73
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -67,9 +67,9 @@ var avatar = (0, import_tailwind_variants.tv)({
|
|
|
67
67
|
xl: "h-16 w-16 text-lg"
|
|
68
68
|
},
|
|
69
69
|
variant: {
|
|
70
|
-
primary: "bg-blue-
|
|
71
|
-
secondary: "bg-gray-200 text-gray-
|
|
72
|
-
outline: "bg-white text-blue-
|
|
70
|
+
primary: "bg-blue-500 text-white",
|
|
71
|
+
secondary: "bg-gray-200 text-gray-600",
|
|
72
|
+
outline: "bg-white text-blue-500 ring-2 ring-blue-500 ring-offset-2"
|
|
73
73
|
}
|
|
74
74
|
},
|
|
75
75
|
defaultVariants: {
|
|
@@ -84,14 +84,22 @@ function getInitials(name) {
|
|
|
84
84
|
}
|
|
85
85
|
var Avatar = (0, import_react.forwardRef)(
|
|
86
86
|
({ name, src, alt, size, variant, className, ...props }, ref) => {
|
|
87
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
88
|
-
"
|
|
87
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
88
|
+
"div",
|
|
89
89
|
{
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
90
|
+
ref,
|
|
91
|
+
className: avatar({ size, variant, className }),
|
|
92
|
+
...props,
|
|
93
|
+
children: src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
94
|
+
"img",
|
|
95
|
+
{
|
|
96
|
+
src,
|
|
97
|
+
alt: alt || name || "avatar",
|
|
98
|
+
className: "h-full w-full object-cover"
|
|
99
|
+
}
|
|
100
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: name ? getInitials(name) : "?" })
|
|
93
101
|
}
|
|
94
|
-
)
|
|
102
|
+
);
|
|
95
103
|
}
|
|
96
104
|
);
|
|
97
105
|
Avatar.displayName = "Avatar";
|
|
@@ -104,10 +112,10 @@ var button = (0, import_tailwind_variants2.tv)({
|
|
|
104
112
|
base: "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
105
113
|
variants: {
|
|
106
114
|
variant: {
|
|
107
|
-
primary: "bg-blue-
|
|
108
|
-
secondary: "border border-blue-
|
|
109
|
-
tertiary: "text-blue-
|
|
110
|
-
danger: "bg-red-
|
|
115
|
+
primary: "bg-blue-500 text-white hover:bg-blue-700 focus-visible:outline-blue-500",
|
|
116
|
+
secondary: "border border-blue-500 text-blue-500 hover:bg-blue-50 focus-visible:outline-blue-500",
|
|
117
|
+
tertiary: "text-blue-500 hover:bg-blue-50 focus-visible:outline-blue-500",
|
|
118
|
+
danger: "bg-red-500 text-white hover:bg-red-500/90 focus-visible:outline-red-500"
|
|
111
119
|
},
|
|
112
120
|
size: {
|
|
113
121
|
sm: "h-9 px-3 text-sm",
|
|
@@ -224,7 +232,7 @@ var Modal = (0, import_react4.forwardRef)(
|
|
|
224
232
|
"button",
|
|
225
233
|
{
|
|
226
234
|
type: "button",
|
|
227
|
-
className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-200 hover:text-gray-
|
|
235
|
+
className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-200 hover:text-gray-600 transition-colors",
|
|
228
236
|
onClick: onClose,
|
|
229
237
|
"aria-label": "Fechar",
|
|
230
238
|
children: "\u2715"
|
|
@@ -444,7 +452,7 @@ var wrapper = (0, import_tailwind_variants6.tv)({
|
|
|
444
452
|
base: "flex w-full flex-col gap-1"
|
|
445
453
|
});
|
|
446
454
|
var labelStyle = (0, import_tailwind_variants6.tv)({
|
|
447
|
-
base: "text-xs text-gray-
|
|
455
|
+
base: "text-xs text-gray-600 flex items-start gap-0.5"
|
|
448
456
|
});
|
|
449
457
|
var containerStyle = (0, import_tailwind_variants6.tv)({
|
|
450
458
|
base: "flex items-center w-full rounded-md border bg-white transition-colors",
|
|
@@ -471,13 +479,35 @@ var errorStyle = (0, import_tailwind_variants6.tv)({
|
|
|
471
479
|
base: "text-xs text-red-500 mt-0.5"
|
|
472
480
|
});
|
|
473
481
|
var InputWrapper = (0, import_react6.forwardRef)(
|
|
474
|
-
({
|
|
482
|
+
({
|
|
483
|
+
label,
|
|
484
|
+
error,
|
|
485
|
+
errorMessage,
|
|
486
|
+
required,
|
|
487
|
+
disabled,
|
|
488
|
+
size,
|
|
489
|
+
children,
|
|
490
|
+
className,
|
|
491
|
+
classContainer,
|
|
492
|
+
htmlFor
|
|
493
|
+
}, ref) => {
|
|
475
494
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, className: wrapper({ className }), children: [
|
|
476
495
|
label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor, className: labelStyle(), children: [
|
|
477
496
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: label }),
|
|
478
497
|
required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
|
|
479
498
|
] }),
|
|
480
|
-
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
499
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
500
|
+
"div",
|
|
501
|
+
{
|
|
502
|
+
className: containerStyle({
|
|
503
|
+
size,
|
|
504
|
+
error: !!error,
|
|
505
|
+
disabled: !!disabled,
|
|
506
|
+
className: classContainer
|
|
507
|
+
}),
|
|
508
|
+
children
|
|
509
|
+
}
|
|
510
|
+
),
|
|
481
511
|
error && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: errorStyle(), children: errorMessage })
|
|
482
512
|
] });
|
|
483
513
|
}
|
|
@@ -1012,7 +1042,7 @@ var checkboxContainer = (0, import_tailwind_variants7.tv)({
|
|
|
1012
1042
|
base: "inline-flex items-center justify-center w-[18px] h-[18px] rounded border cursor-pointer transition-colors",
|
|
1013
1043
|
variants: {
|
|
1014
1044
|
checked: {
|
|
1015
|
-
true: "bg-blue-
|
|
1045
|
+
true: "bg-blue-500 border-blue-500",
|
|
1016
1046
|
false: "bg-white border-gray-300 hover:border-blue-500 hover:bg-blue-50"
|
|
1017
1047
|
},
|
|
1018
1048
|
disabled: {
|
|
@@ -1026,10 +1056,34 @@ var checkboxContainer = (0, import_tailwind_variants7.tv)({
|
|
|
1026
1056
|
checked: false
|
|
1027
1057
|
}
|
|
1028
1058
|
});
|
|
1029
|
-
var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1059
|
+
var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1060
|
+
"svg",
|
|
1061
|
+
{
|
|
1062
|
+
width: "10",
|
|
1063
|
+
height: "10",
|
|
1064
|
+
viewBox: "0 0 24 24",
|
|
1065
|
+
fill: "none",
|
|
1066
|
+
stroke: "white",
|
|
1067
|
+
strokeWidth: "4",
|
|
1068
|
+
strokeLinecap: "round",
|
|
1069
|
+
strokeLinejoin: "round",
|
|
1070
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("polyline", { points: "20 6 9 17 4 12" })
|
|
1071
|
+
}
|
|
1072
|
+
);
|
|
1030
1073
|
var IndeterminateIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-2 h-2 rounded-sm bg-gray-300" });
|
|
1031
1074
|
var InputCheckbox = (0, import_react16.forwardRef)(
|
|
1032
|
-
({
|
|
1075
|
+
({
|
|
1076
|
+
label,
|
|
1077
|
+
checked = false,
|
|
1078
|
+
indeterminate = false,
|
|
1079
|
+
onChange,
|
|
1080
|
+
disabled,
|
|
1081
|
+
error,
|
|
1082
|
+
labelPosition = "right",
|
|
1083
|
+
className,
|
|
1084
|
+
name,
|
|
1085
|
+
required
|
|
1086
|
+
}, ref) => {
|
|
1033
1087
|
function handleClick() {
|
|
1034
1088
|
if (disabled) return;
|
|
1035
1089
|
onChange?.(!checked);
|
|
@@ -1043,7 +1097,11 @@ var InputCheckbox = (0, import_react16.forwardRef)(
|
|
|
1043
1097
|
id: name,
|
|
1044
1098
|
"aria-checked": indeterminate ? "mixed" : checked,
|
|
1045
1099
|
"aria-required": required,
|
|
1046
|
-
className: checkboxContainer({
|
|
1100
|
+
className: checkboxContainer({
|
|
1101
|
+
checked: checked || indeterminate,
|
|
1102
|
+
disabled: !!disabled,
|
|
1103
|
+
error: !!error
|
|
1104
|
+
}),
|
|
1047
1105
|
onClick: handleClick,
|
|
1048
1106
|
disabled,
|
|
1049
1107
|
children: [
|
|
@@ -1054,9 +1112,23 @@ var InputCheckbox = (0, import_react16.forwardRef)(
|
|
|
1054
1112
|
);
|
|
1055
1113
|
if (!label) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className, children: box });
|
|
1056
1114
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [
|
|
1057
|
-
labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1115
|
+
labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1116
|
+
"label",
|
|
1117
|
+
{
|
|
1118
|
+
htmlFor: name,
|
|
1119
|
+
className: "text-sm text-gray-600 cursor-pointer select-none",
|
|
1120
|
+
children: label
|
|
1121
|
+
}
|
|
1122
|
+
),
|
|
1058
1123
|
box,
|
|
1059
|
-
labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1124
|
+
labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1125
|
+
"label",
|
|
1126
|
+
{
|
|
1127
|
+
htmlFor: name,
|
|
1128
|
+
className: "text-sm text-gray-600 cursor-pointer select-none",
|
|
1129
|
+
children: label
|
|
1130
|
+
}
|
|
1131
|
+
),
|
|
1060
1132
|
required && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-red-500 text-[10px]", children: "*" })
|
|
1061
1133
|
] });
|
|
1062
1134
|
}
|
|
@@ -1071,7 +1143,7 @@ var radioButton = (0, import_tailwind_variants8.tv)({
|
|
|
1071
1143
|
base: "inline-flex items-center justify-center w-[18px] h-[18px] rounded-full border cursor-pointer transition-colors",
|
|
1072
1144
|
variants: {
|
|
1073
1145
|
selected: {
|
|
1074
|
-
true: "border-blue-
|
|
1146
|
+
true: "border-blue-500",
|
|
1075
1147
|
false: "border-gray-300 hover:border-blue-500 hover:bg-blue-50"
|
|
1076
1148
|
},
|
|
1077
1149
|
disabled: {
|
|
@@ -1086,48 +1158,70 @@ var radioButton = (0, import_tailwind_variants8.tv)({
|
|
|
1086
1158
|
}
|
|
1087
1159
|
});
|
|
1088
1160
|
var InputRadio = (0, import_react17.forwardRef)(
|
|
1089
|
-
({
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1161
|
+
({
|
|
1162
|
+
label,
|
|
1163
|
+
options,
|
|
1164
|
+
value,
|
|
1165
|
+
onChange,
|
|
1166
|
+
disabled,
|
|
1167
|
+
error,
|
|
1168
|
+
required,
|
|
1169
|
+
name,
|
|
1170
|
+
className,
|
|
1171
|
+
direction = "horizontal"
|
|
1172
|
+
}, ref) => {
|
|
1173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1174
|
+
"div",
|
|
1175
|
+
{
|
|
1176
|
+
ref,
|
|
1177
|
+
className: `flex w-full flex-col gap-1 ${className ?? ""}`,
|
|
1178
|
+
children: [
|
|
1179
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-xs text-gray-600 flex items-start gap-0.5", children: [
|
|
1180
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: label }),
|
|
1181
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
|
|
1182
|
+
] }),
|
|
1183
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1184
|
+
"div",
|
|
1185
|
+
{
|
|
1186
|
+
role: "radiogroup",
|
|
1187
|
+
"aria-label": label,
|
|
1188
|
+
className: `flex gap-3 ${direction === "vertical" ? "flex-col" : "items-center"}`,
|
|
1189
|
+
children: options.map((option) => {
|
|
1190
|
+
const isSelected = value === option.value;
|
|
1191
|
+
const isDisabled = disabled || option.disabled;
|
|
1192
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1193
|
+
"label",
|
|
1194
|
+
{
|
|
1195
|
+
className: `flex items-center gap-2 cursor-pointer select-none ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
|
|
1196
|
+
children: [
|
|
1197
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1198
|
+
"button",
|
|
1199
|
+
{
|
|
1200
|
+
type: "button",
|
|
1201
|
+
role: "radio",
|
|
1202
|
+
"aria-checked": isSelected,
|
|
1203
|
+
className: radioButton({
|
|
1204
|
+
selected: isSelected,
|
|
1205
|
+
disabled: !!isDisabled,
|
|
1206
|
+
error: !!error
|
|
1207
|
+
}),
|
|
1208
|
+
onClick: () => !isDisabled && onChange?.(option.value),
|
|
1209
|
+
disabled: isDisabled,
|
|
1210
|
+
children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-[10px] h-[10px] rounded-full bg-blue-500" })
|
|
1211
|
+
}
|
|
1212
|
+
),
|
|
1213
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm text-gray-600", children: option.label })
|
|
1214
|
+
]
|
|
1215
|
+
},
|
|
1216
|
+
String(option.value)
|
|
1217
|
+
);
|
|
1218
|
+
})
|
|
1219
|
+
}
|
|
1220
|
+
),
|
|
1221
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-xs text-red-500 mt-0.5", children: "Selecione uma op\xE7\xE3o" })
|
|
1222
|
+
]
|
|
1223
|
+
}
|
|
1224
|
+
);
|
|
1131
1225
|
}
|
|
1132
1226
|
);
|
|
1133
1227
|
InputRadio.displayName = "InputRadio";
|
|
@@ -1152,12 +1246,32 @@ var textareaStyle = (0, import_tailwind_variants9.tv)({
|
|
|
1152
1246
|
}
|
|
1153
1247
|
});
|
|
1154
1248
|
var Textarea = (0, import_react18.forwardRef)(
|
|
1155
|
-
({
|
|
1249
|
+
({
|
|
1250
|
+
label,
|
|
1251
|
+
error,
|
|
1252
|
+
errorMessage,
|
|
1253
|
+
required,
|
|
1254
|
+
size,
|
|
1255
|
+
classInput,
|
|
1256
|
+
value,
|
|
1257
|
+
onChange,
|
|
1258
|
+
disabled,
|
|
1259
|
+
name,
|
|
1260
|
+
rows = 4,
|
|
1261
|
+
...props
|
|
1262
|
+
}, ref) => {
|
|
1156
1263
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1157
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1264
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1265
|
+
"label",
|
|
1266
|
+
{
|
|
1267
|
+
htmlFor: name,
|
|
1268
|
+
className: "text-xs text-gray-600 flex items-start gap-0.5",
|
|
1269
|
+
children: [
|
|
1270
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: label }),
|
|
1271
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
|
|
1272
|
+
]
|
|
1273
|
+
}
|
|
1274
|
+
),
|
|
1161
1275
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1162
1276
|
"textarea",
|
|
1163
1277
|
{
|
|
@@ -1169,7 +1283,11 @@ var Textarea = (0, import_react18.forwardRef)(
|
|
|
1169
1283
|
onChange: (e) => onChange?.(e.target.value),
|
|
1170
1284
|
disabled,
|
|
1171
1285
|
"aria-invalid": !!error,
|
|
1172
|
-
className: textareaStyle({
|
|
1286
|
+
className: textareaStyle({
|
|
1287
|
+
error: !!error,
|
|
1288
|
+
disabled: !!disabled,
|
|
1289
|
+
className: classInput
|
|
1290
|
+
}),
|
|
1173
1291
|
...props
|
|
1174
1292
|
}
|
|
1175
1293
|
),
|
package/dist/index.mjs
CHANGED
|
@@ -12,9 +12,9 @@ var avatar = tv({
|
|
|
12
12
|
xl: "h-16 w-16 text-lg"
|
|
13
13
|
},
|
|
14
14
|
variant: {
|
|
15
|
-
primary: "bg-blue-
|
|
16
|
-
secondary: "bg-gray-200 text-gray-
|
|
17
|
-
outline: "bg-white text-blue-
|
|
15
|
+
primary: "bg-blue-500 text-white",
|
|
16
|
+
secondary: "bg-gray-200 text-gray-600",
|
|
17
|
+
outline: "bg-white text-blue-500 ring-2 ring-blue-500 ring-offset-2"
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
defaultVariants: {
|
|
@@ -29,14 +29,22 @@ function getInitials(name) {
|
|
|
29
29
|
}
|
|
30
30
|
var Avatar = forwardRef(
|
|
31
31
|
({ name, src, alt, size, variant, className, ...props }, ref) => {
|
|
32
|
-
return /* @__PURE__ */ jsx(
|
|
33
|
-
"
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
"div",
|
|
34
34
|
{
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
ref,
|
|
36
|
+
className: avatar({ size, variant, className }),
|
|
37
|
+
...props,
|
|
38
|
+
children: src ? /* @__PURE__ */ jsx(
|
|
39
|
+
"img",
|
|
40
|
+
{
|
|
41
|
+
src,
|
|
42
|
+
alt: alt || name || "avatar",
|
|
43
|
+
className: "h-full w-full object-cover"
|
|
44
|
+
}
|
|
45
|
+
) : /* @__PURE__ */ jsx("span", { children: name ? getInitials(name) : "?" })
|
|
38
46
|
}
|
|
39
|
-
)
|
|
47
|
+
);
|
|
40
48
|
}
|
|
41
49
|
);
|
|
42
50
|
Avatar.displayName = "Avatar";
|
|
@@ -49,10 +57,10 @@ var button = tv2({
|
|
|
49
57
|
base: "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
50
58
|
variants: {
|
|
51
59
|
variant: {
|
|
52
|
-
primary: "bg-blue-
|
|
53
|
-
secondary: "border border-blue-
|
|
54
|
-
tertiary: "text-blue-
|
|
55
|
-
danger: "bg-red-
|
|
60
|
+
primary: "bg-blue-500 text-white hover:bg-blue-700 focus-visible:outline-blue-500",
|
|
61
|
+
secondary: "border border-blue-500 text-blue-500 hover:bg-blue-50 focus-visible:outline-blue-500",
|
|
62
|
+
tertiary: "text-blue-500 hover:bg-blue-50 focus-visible:outline-blue-500",
|
|
63
|
+
danger: "bg-red-500 text-white hover:bg-red-500/90 focus-visible:outline-red-500"
|
|
56
64
|
},
|
|
57
65
|
size: {
|
|
58
66
|
sm: "h-9 px-3 text-sm",
|
|
@@ -115,7 +123,11 @@ var Card = forwardRef3(
|
|
|
115
123
|
Card.displayName = "Card";
|
|
116
124
|
|
|
117
125
|
// src/components/Modal/index.tsx
|
|
118
|
-
import {
|
|
126
|
+
import {
|
|
127
|
+
forwardRef as forwardRef4,
|
|
128
|
+
useEffect,
|
|
129
|
+
useCallback
|
|
130
|
+
} from "react";
|
|
119
131
|
import { tv as tv4 } from "tailwind-variants";
|
|
120
132
|
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
121
133
|
var overlay = tv4({
|
|
@@ -169,7 +181,7 @@ var Modal = forwardRef4(
|
|
|
169
181
|
"button",
|
|
170
182
|
{
|
|
171
183
|
type: "button",
|
|
172
|
-
className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-200 hover:text-gray-
|
|
184
|
+
className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-200 hover:text-gray-600 transition-colors",
|
|
173
185
|
onClick: onClose,
|
|
174
186
|
"aria-label": "Fechar",
|
|
175
187
|
children: "\u2715"
|
|
@@ -396,7 +408,7 @@ var wrapper = tv6({
|
|
|
396
408
|
base: "flex w-full flex-col gap-1"
|
|
397
409
|
});
|
|
398
410
|
var labelStyle = tv6({
|
|
399
|
-
base: "text-xs text-gray-
|
|
411
|
+
base: "text-xs text-gray-600 flex items-start gap-0.5"
|
|
400
412
|
});
|
|
401
413
|
var containerStyle = tv6({
|
|
402
414
|
base: "flex items-center w-full rounded-md border bg-white transition-colors",
|
|
@@ -423,13 +435,35 @@ var errorStyle = tv6({
|
|
|
423
435
|
base: "text-xs text-red-500 mt-0.5"
|
|
424
436
|
});
|
|
425
437
|
var InputWrapper = forwardRef6(
|
|
426
|
-
({
|
|
438
|
+
({
|
|
439
|
+
label,
|
|
440
|
+
error,
|
|
441
|
+
errorMessage,
|
|
442
|
+
required,
|
|
443
|
+
disabled,
|
|
444
|
+
size,
|
|
445
|
+
children,
|
|
446
|
+
className,
|
|
447
|
+
classContainer,
|
|
448
|
+
htmlFor
|
|
449
|
+
}, ref) => {
|
|
427
450
|
return /* @__PURE__ */ jsxs4("div", { ref, className: wrapper({ className }), children: [
|
|
428
451
|
label && /* @__PURE__ */ jsxs4("label", { htmlFor, className: labelStyle(), children: [
|
|
429
452
|
/* @__PURE__ */ jsx6("span", { children: label }),
|
|
430
453
|
required && /* @__PURE__ */ jsx6("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
|
|
431
454
|
] }),
|
|
432
|
-
/* @__PURE__ */ jsx6(
|
|
455
|
+
/* @__PURE__ */ jsx6(
|
|
456
|
+
"div",
|
|
457
|
+
{
|
|
458
|
+
className: containerStyle({
|
|
459
|
+
size,
|
|
460
|
+
error: !!error,
|
|
461
|
+
disabled: !!disabled,
|
|
462
|
+
className: classContainer
|
|
463
|
+
}),
|
|
464
|
+
children
|
|
465
|
+
}
|
|
466
|
+
),
|
|
433
467
|
error && errorMessage && /* @__PURE__ */ jsx6("span", { className: errorStyle(), children: errorMessage })
|
|
434
468
|
] });
|
|
435
469
|
}
|
|
@@ -964,7 +998,7 @@ var checkboxContainer = tv7({
|
|
|
964
998
|
base: "inline-flex items-center justify-center w-[18px] h-[18px] rounded border cursor-pointer transition-colors",
|
|
965
999
|
variants: {
|
|
966
1000
|
checked: {
|
|
967
|
-
true: "bg-blue-
|
|
1001
|
+
true: "bg-blue-500 border-blue-500",
|
|
968
1002
|
false: "bg-white border-gray-300 hover:border-blue-500 hover:bg-blue-50"
|
|
969
1003
|
},
|
|
970
1004
|
disabled: {
|
|
@@ -978,10 +1012,34 @@ var checkboxContainer = tv7({
|
|
|
978
1012
|
checked: false
|
|
979
1013
|
}
|
|
980
1014
|
});
|
|
981
|
-
var CheckIcon = () => /* @__PURE__ */ jsx16(
|
|
1015
|
+
var CheckIcon = () => /* @__PURE__ */ jsx16(
|
|
1016
|
+
"svg",
|
|
1017
|
+
{
|
|
1018
|
+
width: "10",
|
|
1019
|
+
height: "10",
|
|
1020
|
+
viewBox: "0 0 24 24",
|
|
1021
|
+
fill: "none",
|
|
1022
|
+
stroke: "white",
|
|
1023
|
+
strokeWidth: "4",
|
|
1024
|
+
strokeLinecap: "round",
|
|
1025
|
+
strokeLinejoin: "round",
|
|
1026
|
+
children: /* @__PURE__ */ jsx16("polyline", { points: "20 6 9 17 4 12" })
|
|
1027
|
+
}
|
|
1028
|
+
);
|
|
982
1029
|
var IndeterminateIcon = () => /* @__PURE__ */ jsx16("div", { className: "w-2 h-2 rounded-sm bg-gray-300" });
|
|
983
1030
|
var InputCheckbox = forwardRef16(
|
|
984
|
-
({
|
|
1031
|
+
({
|
|
1032
|
+
label,
|
|
1033
|
+
checked = false,
|
|
1034
|
+
indeterminate = false,
|
|
1035
|
+
onChange,
|
|
1036
|
+
disabled,
|
|
1037
|
+
error,
|
|
1038
|
+
labelPosition = "right",
|
|
1039
|
+
className,
|
|
1040
|
+
name,
|
|
1041
|
+
required
|
|
1042
|
+
}, ref) => {
|
|
985
1043
|
function handleClick() {
|
|
986
1044
|
if (disabled) return;
|
|
987
1045
|
onChange?.(!checked);
|
|
@@ -995,7 +1053,11 @@ var InputCheckbox = forwardRef16(
|
|
|
995
1053
|
id: name,
|
|
996
1054
|
"aria-checked": indeterminate ? "mixed" : checked,
|
|
997
1055
|
"aria-required": required,
|
|
998
|
-
className: checkboxContainer({
|
|
1056
|
+
className: checkboxContainer({
|
|
1057
|
+
checked: checked || indeterminate,
|
|
1058
|
+
disabled: !!disabled,
|
|
1059
|
+
error: !!error
|
|
1060
|
+
}),
|
|
999
1061
|
onClick: handleClick,
|
|
1000
1062
|
disabled,
|
|
1001
1063
|
children: [
|
|
@@ -1006,9 +1068,23 @@ var InputCheckbox = forwardRef16(
|
|
|
1006
1068
|
);
|
|
1007
1069
|
if (!label) return /* @__PURE__ */ jsx16("div", { className, children: box });
|
|
1008
1070
|
return /* @__PURE__ */ jsxs9("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [
|
|
1009
|
-
labelPosition === "left" && /* @__PURE__ */ jsx16(
|
|
1071
|
+
labelPosition === "left" && /* @__PURE__ */ jsx16(
|
|
1072
|
+
"label",
|
|
1073
|
+
{
|
|
1074
|
+
htmlFor: name,
|
|
1075
|
+
className: "text-sm text-gray-600 cursor-pointer select-none",
|
|
1076
|
+
children: label
|
|
1077
|
+
}
|
|
1078
|
+
),
|
|
1010
1079
|
box,
|
|
1011
|
-
labelPosition === "right" && /* @__PURE__ */ jsx16(
|
|
1080
|
+
labelPosition === "right" && /* @__PURE__ */ jsx16(
|
|
1081
|
+
"label",
|
|
1082
|
+
{
|
|
1083
|
+
htmlFor: name,
|
|
1084
|
+
className: "text-sm text-gray-600 cursor-pointer select-none",
|
|
1085
|
+
children: label
|
|
1086
|
+
}
|
|
1087
|
+
),
|
|
1012
1088
|
required && /* @__PURE__ */ jsx16("span", { className: "text-red-500 text-[10px]", children: "*" })
|
|
1013
1089
|
] });
|
|
1014
1090
|
}
|
|
@@ -1023,7 +1099,7 @@ var radioButton = tv8({
|
|
|
1023
1099
|
base: "inline-flex items-center justify-center w-[18px] h-[18px] rounded-full border cursor-pointer transition-colors",
|
|
1024
1100
|
variants: {
|
|
1025
1101
|
selected: {
|
|
1026
|
-
true: "border-blue-
|
|
1102
|
+
true: "border-blue-500",
|
|
1027
1103
|
false: "border-gray-300 hover:border-blue-500 hover:bg-blue-50"
|
|
1028
1104
|
},
|
|
1029
1105
|
disabled: {
|
|
@@ -1038,48 +1114,70 @@ var radioButton = tv8({
|
|
|
1038
1114
|
}
|
|
1039
1115
|
});
|
|
1040
1116
|
var InputRadio = forwardRef17(
|
|
1041
|
-
({
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1117
|
+
({
|
|
1118
|
+
label,
|
|
1119
|
+
options,
|
|
1120
|
+
value,
|
|
1121
|
+
onChange,
|
|
1122
|
+
disabled,
|
|
1123
|
+
error,
|
|
1124
|
+
required,
|
|
1125
|
+
name,
|
|
1126
|
+
className,
|
|
1127
|
+
direction = "horizontal"
|
|
1128
|
+
}, ref) => {
|
|
1129
|
+
return /* @__PURE__ */ jsxs10(
|
|
1130
|
+
"div",
|
|
1131
|
+
{
|
|
1132
|
+
ref,
|
|
1133
|
+
className: `flex w-full flex-col gap-1 ${className ?? ""}`,
|
|
1134
|
+
children: [
|
|
1135
|
+
label && /* @__PURE__ */ jsxs10("span", { className: "text-xs text-gray-600 flex items-start gap-0.5", children: [
|
|
1136
|
+
/* @__PURE__ */ jsx17("span", { children: label }),
|
|
1137
|
+
required && /* @__PURE__ */ jsx17("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
|
|
1138
|
+
] }),
|
|
1139
|
+
/* @__PURE__ */ jsx17(
|
|
1140
|
+
"div",
|
|
1141
|
+
{
|
|
1142
|
+
role: "radiogroup",
|
|
1143
|
+
"aria-label": label,
|
|
1144
|
+
className: `flex gap-3 ${direction === "vertical" ? "flex-col" : "items-center"}`,
|
|
1145
|
+
children: options.map((option) => {
|
|
1146
|
+
const isSelected = value === option.value;
|
|
1147
|
+
const isDisabled = disabled || option.disabled;
|
|
1148
|
+
return /* @__PURE__ */ jsxs10(
|
|
1149
|
+
"label",
|
|
1150
|
+
{
|
|
1151
|
+
className: `flex items-center gap-2 cursor-pointer select-none ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
|
|
1152
|
+
children: [
|
|
1153
|
+
/* @__PURE__ */ jsx17(
|
|
1154
|
+
"button",
|
|
1155
|
+
{
|
|
1156
|
+
type: "button",
|
|
1157
|
+
role: "radio",
|
|
1158
|
+
"aria-checked": isSelected,
|
|
1159
|
+
className: radioButton({
|
|
1160
|
+
selected: isSelected,
|
|
1161
|
+
disabled: !!isDisabled,
|
|
1162
|
+
error: !!error
|
|
1163
|
+
}),
|
|
1164
|
+
onClick: () => !isDisabled && onChange?.(option.value),
|
|
1165
|
+
disabled: isDisabled,
|
|
1166
|
+
children: isSelected && /* @__PURE__ */ jsx17("div", { className: "w-[10px] h-[10px] rounded-full bg-blue-500" })
|
|
1167
|
+
}
|
|
1168
|
+
),
|
|
1169
|
+
/* @__PURE__ */ jsx17("span", { className: "text-sm text-gray-600", children: option.label })
|
|
1170
|
+
]
|
|
1171
|
+
},
|
|
1172
|
+
String(option.value)
|
|
1173
|
+
);
|
|
1174
|
+
})
|
|
1175
|
+
}
|
|
1176
|
+
),
|
|
1177
|
+
error && /* @__PURE__ */ jsx17("span", { className: "text-xs text-red-500 mt-0.5", children: "Selecione uma op\xE7\xE3o" })
|
|
1178
|
+
]
|
|
1179
|
+
}
|
|
1180
|
+
);
|
|
1083
1181
|
}
|
|
1084
1182
|
);
|
|
1085
1183
|
InputRadio.displayName = "InputRadio";
|
|
@@ -1104,12 +1202,32 @@ var textareaStyle = tv9({
|
|
|
1104
1202
|
}
|
|
1105
1203
|
});
|
|
1106
1204
|
var Textarea = forwardRef18(
|
|
1107
|
-
({
|
|
1205
|
+
({
|
|
1206
|
+
label,
|
|
1207
|
+
error,
|
|
1208
|
+
errorMessage,
|
|
1209
|
+
required,
|
|
1210
|
+
size,
|
|
1211
|
+
classInput,
|
|
1212
|
+
value,
|
|
1213
|
+
onChange,
|
|
1214
|
+
disabled,
|
|
1215
|
+
name,
|
|
1216
|
+
rows = 4,
|
|
1217
|
+
...props
|
|
1218
|
+
}, ref) => {
|
|
1108
1219
|
return /* @__PURE__ */ jsxs11("div", { className: "flex w-full flex-col gap-1", children: [
|
|
1109
|
-
label && /* @__PURE__ */ jsxs11(
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1220
|
+
label && /* @__PURE__ */ jsxs11(
|
|
1221
|
+
"label",
|
|
1222
|
+
{
|
|
1223
|
+
htmlFor: name,
|
|
1224
|
+
className: "text-xs text-gray-600 flex items-start gap-0.5",
|
|
1225
|
+
children: [
|
|
1226
|
+
/* @__PURE__ */ jsx18("span", { children: label }),
|
|
1227
|
+
required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
|
|
1228
|
+
]
|
|
1229
|
+
}
|
|
1230
|
+
),
|
|
1113
1231
|
/* @__PURE__ */ jsx18(
|
|
1114
1232
|
"textarea",
|
|
1115
1233
|
{
|
|
@@ -1121,7 +1239,11 @@ var Textarea = forwardRef18(
|
|
|
1121
1239
|
onChange: (e) => onChange?.(e.target.value),
|
|
1122
1240
|
disabled,
|
|
1123
1241
|
"aria-invalid": !!error,
|
|
1124
|
-
className: textareaStyle({
|
|
1242
|
+
className: textareaStyle({
|
|
1243
|
+
error: !!error,
|
|
1244
|
+
disabled: !!disabled,
|
|
1245
|
+
className: classInput
|
|
1246
|
+
}),
|
|
1125
1247
|
...props
|
|
1126
1248
|
}
|
|
1127
1249
|
),
|