@rehagro/ui 1.0.12 → 1.0.13
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.js +545 -614
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +545 -614
- package/dist/index.mjs.map +1 -1
- package/dist/native.js +15 -2
- package/dist/native.js.map +1 -1
- package/dist/native.mjs +15 -2
- package/dist/native.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -347,27 +347,19 @@ var Toast = forwardRef(function Toast2({
|
|
|
347
347
|
className: [
|
|
348
348
|
"rh-flex rh-items-start rh-gap-3",
|
|
349
349
|
"rh-w-80 rh-rounded-sm rh-border rh-p-4",
|
|
350
|
-
"rh-shadow-md rh-font-
|
|
350
|
+
"rh-shadow-md rh-font-body",
|
|
351
351
|
containerStyles[styleKey],
|
|
352
352
|
className
|
|
353
353
|
].filter(Boolean).join(" "),
|
|
354
354
|
...rest,
|
|
355
355
|
children: [
|
|
356
|
-
/* @__PURE__ */ jsx("span", { className: "rh-flex-shrink-0 rh-mt-0.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
357
|
-
Icon,
|
|
358
|
-
{
|
|
359
|
-
className: ["rh-w-5 rh-h-5", iconStyles[styleKey]].filter(Boolean).join(" ")
|
|
360
|
-
}
|
|
361
|
-
) }),
|
|
356
|
+
/* @__PURE__ */ jsx("span", { className: "rh-flex-shrink-0 rh-mt-0.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { className: ["rh-w-5 rh-h-5", iconStyles[styleKey]].filter(Boolean).join(" ") }) }),
|
|
362
357
|
/* @__PURE__ */ jsxs("div", { className: "rh-flex-1 rh-min-w-0", children: [
|
|
363
358
|
/* @__PURE__ */ jsx("p", { className: "rh-text-sm rh-font-semibold rh-leading-tight", children: title }),
|
|
364
359
|
description && /* @__PURE__ */ jsx(
|
|
365
360
|
"p",
|
|
366
361
|
{
|
|
367
|
-
className: [
|
|
368
|
-
"rh-mt-1 rh-text-sm rh-leading-normal",
|
|
369
|
-
descriptionStyles[styleKey]
|
|
370
|
-
].filter(Boolean).join(" "),
|
|
362
|
+
className: ["rh-mt-1 rh-text-sm rh-leading-normal", descriptionStyles[styleKey]].filter(Boolean).join(" "),
|
|
371
363
|
children: description
|
|
372
364
|
}
|
|
373
365
|
),
|
|
@@ -962,7 +954,7 @@ var TextInput = forwardRef(function TextInput2({
|
|
|
962
954
|
return /* @__PURE__ */ jsxs(
|
|
963
955
|
"div",
|
|
964
956
|
{
|
|
965
|
-
className: ["rh-flex rh-flex-col rh-gap-[0.5rem] rh-font-
|
|
957
|
+
className: ["rh-flex rh-flex-col rh-gap-[0.5rem] rh-font-body", wrapperClassName].filter(Boolean).join(" "),
|
|
966
958
|
children: [
|
|
967
959
|
label && /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "rh-flex rh-items-baseline rh-gap-1", children: [
|
|
968
960
|
/* @__PURE__ */ jsx("span", { className: `rh-text-sm ${labelWeightClasses[labelWeight]} rh-text-text`, children: label }),
|
|
@@ -973,7 +965,7 @@ var TextInput = forwardRef(function TextInput2({
|
|
|
973
965
|
{
|
|
974
966
|
className: [
|
|
975
967
|
"rh-flex rh-items-center rh-gap-2",
|
|
976
|
-
"rh-border rh-bg-surface rh-font-
|
|
968
|
+
"rh-border rh-bg-surface rh-font-body",
|
|
977
969
|
"rh-transition-colors rh-duration-150",
|
|
978
970
|
statusClasses[status],
|
|
979
971
|
radiusClasses3[radius],
|
|
@@ -1111,7 +1103,7 @@ var Checkbox = forwardRef(function Checkbox2({
|
|
|
1111
1103
|
{
|
|
1112
1104
|
htmlFor: inputId,
|
|
1113
1105
|
className: [
|
|
1114
|
-
"rh-inline-flex rh-items-center rh-gap-2 rh-font-
|
|
1106
|
+
"rh-inline-flex rh-items-center rh-gap-2 rh-font-body rh-select-none",
|
|
1115
1107
|
disabled ? "rh-cursor-not-allowed rh-opacity-50" : "rh-cursor-pointer",
|
|
1116
1108
|
className
|
|
1117
1109
|
].filter(Boolean).join(" "),
|
|
@@ -1230,319 +1222,307 @@ var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsx(
|
|
|
1230
1222
|
)
|
|
1231
1223
|
}
|
|
1232
1224
|
);
|
|
1233
|
-
var Select = forwardRef(
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1225
|
+
var Select = forwardRef(function Select2(props, ref) {
|
|
1226
|
+
const {
|
|
1227
|
+
options,
|
|
1228
|
+
label,
|
|
1229
|
+
subtitle,
|
|
1230
|
+
placeholder = "Select",
|
|
1231
|
+
status = "default",
|
|
1232
|
+
size = "md",
|
|
1233
|
+
radius = "xs",
|
|
1234
|
+
helperText,
|
|
1235
|
+
disabled = false,
|
|
1236
|
+
className = "",
|
|
1237
|
+
wrapperClassName = "",
|
|
1238
|
+
multiple = false
|
|
1239
|
+
} = props;
|
|
1240
|
+
const triggerId = React8.useId();
|
|
1241
|
+
const listboxId = React8.useId();
|
|
1242
|
+
const helperId = React8.useId();
|
|
1243
|
+
const [isOpen, setIsOpen] = React8.useState(false);
|
|
1244
|
+
const [activeIndex, setActiveIndex] = React8.useState(-1);
|
|
1245
|
+
const wrapperRef = React8.useRef(null);
|
|
1246
|
+
const innerRef = React8.useRef(null);
|
|
1247
|
+
const listboxRef = React8.useRef(null);
|
|
1248
|
+
React8.useImperativeHandle(ref, () => innerRef.current);
|
|
1249
|
+
const [internalValue, setInternalValue] = React8.useState(() => {
|
|
1250
|
+
if (props.defaultValue !== void 0) {
|
|
1251
|
+
return Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue];
|
|
1252
|
+
}
|
|
1253
|
+
return [];
|
|
1254
|
+
});
|
|
1255
|
+
const isControlled = props.value !== void 0;
|
|
1256
|
+
const selectedValues = isControlled ? Array.isArray(props.value) ? props.value : props.value !== void 0 ? [props.value] : [] : internalValue;
|
|
1257
|
+
const enabledOptions = options.filter((o) => !o.disabled);
|
|
1258
|
+
const handleSelect = (optionValue) => {
|
|
1259
|
+
if (multiple) {
|
|
1260
|
+
const next = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
|
|
1261
|
+
if (!isControlled) setInternalValue(next);
|
|
1262
|
+
props.onChange?.(next);
|
|
1263
|
+
} else {
|
|
1264
|
+
const next = [optionValue];
|
|
1265
|
+
if (!isControlled) setInternalValue(next);
|
|
1266
|
+
props.onChange?.(optionValue);
|
|
1267
|
+
setIsOpen(false);
|
|
1268
|
+
innerRef.current?.focus();
|
|
1269
|
+
}
|
|
1270
|
+
};
|
|
1271
|
+
const displayText = React8.useMemo(() => {
|
|
1272
|
+
if (selectedValues.length === 0) return null;
|
|
1273
|
+
if (!multiple) {
|
|
1274
|
+
return options.find((o) => o.value === selectedValues[0])?.label ?? null;
|
|
1275
|
+
}
|
|
1276
|
+
const selectedLabels = selectedValues.map((v) => options.find((o) => o.value === v)?.label).filter(Boolean);
|
|
1277
|
+
if (selectedLabels.length === 0) return null;
|
|
1278
|
+
if (selectedLabels.length === 1) return selectedLabels[0];
|
|
1279
|
+
return `${selectedLabels.length} selected`;
|
|
1280
|
+
}, [selectedValues, options, multiple]);
|
|
1281
|
+
React8.useEffect(() => {
|
|
1282
|
+
if (!isOpen) return;
|
|
1283
|
+
const handleClickOutside = (e) => {
|
|
1284
|
+
if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
|
|
1285
|
+
setIsOpen(false);
|
|
1261
1286
|
}
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
if (!isControlled) setInternalValue(next);
|
|
1271
|
-
props.onChange?.(next);
|
|
1272
|
-
} else {
|
|
1273
|
-
const next = [optionValue];
|
|
1274
|
-
if (!isControlled) setInternalValue(next);
|
|
1275
|
-
props.onChange?.(optionValue);
|
|
1287
|
+
};
|
|
1288
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1289
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
1290
|
+
}, [isOpen]);
|
|
1291
|
+
React8.useEffect(() => {
|
|
1292
|
+
if (!isOpen) return;
|
|
1293
|
+
const handleEscape = (e) => {
|
|
1294
|
+
if (e.key === "Escape") {
|
|
1276
1295
|
setIsOpen(false);
|
|
1277
1296
|
innerRef.current?.focus();
|
|
1278
1297
|
}
|
|
1279
1298
|
};
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
React8.useEffect(() => {
|
|
1312
|
-
if (!isOpen || activeIndex < 0) return;
|
|
1313
|
-
const listbox = listboxRef.current;
|
|
1314
|
-
if (!listbox) return;
|
|
1315
|
-
const activeEl = listbox.children[activeIndex];
|
|
1316
|
-
if (typeof activeEl?.scrollIntoView === "function") {
|
|
1317
|
-
activeEl.scrollIntoView({ block: "nearest" });
|
|
1318
|
-
}
|
|
1319
|
-
}, [activeIndex, isOpen]);
|
|
1320
|
-
React8.useEffect(() => {
|
|
1321
|
-
if (isOpen) {
|
|
1322
|
-
const firstSelectedIdx = options.findIndex(
|
|
1323
|
-
(o) => !o.disabled && selectedValues.includes(o.value)
|
|
1324
|
-
);
|
|
1325
|
-
setActiveIndex(firstSelectedIdx >= 0 ? firstSelectedIdx : 0);
|
|
1326
|
-
} else {
|
|
1327
|
-
setActiveIndex(-1);
|
|
1328
|
-
}
|
|
1329
|
-
}, [isOpen]);
|
|
1330
|
-
const handleKeyDown = (e) => {
|
|
1331
|
-
if (disabled) return;
|
|
1332
|
-
switch (e.key) {
|
|
1333
|
-
case "ArrowDown":
|
|
1334
|
-
case "Down": {
|
|
1335
|
-
e.preventDefault();
|
|
1336
|
-
if (!isOpen) {
|
|
1337
|
-
setIsOpen(true);
|
|
1338
|
-
return;
|
|
1339
|
-
}
|
|
1340
|
-
setActiveIndex((prev) => {
|
|
1341
|
-
for (let i = prev + 1; i < options.length; i++) {
|
|
1342
|
-
if (!options[i].disabled) return i;
|
|
1343
|
-
}
|
|
1344
|
-
return prev;
|
|
1345
|
-
});
|
|
1346
|
-
break;
|
|
1347
|
-
}
|
|
1348
|
-
case "ArrowUp":
|
|
1349
|
-
case "Up": {
|
|
1350
|
-
e.preventDefault();
|
|
1351
|
-
if (!isOpen) {
|
|
1352
|
-
setIsOpen(true);
|
|
1353
|
-
return;
|
|
1354
|
-
}
|
|
1355
|
-
setActiveIndex((prev) => {
|
|
1356
|
-
for (let i = prev - 1; i >= 0; i--) {
|
|
1357
|
-
if (!options[i].disabled) return i;
|
|
1358
|
-
}
|
|
1359
|
-
return prev;
|
|
1360
|
-
});
|
|
1361
|
-
break;
|
|
1299
|
+
document.addEventListener("keydown", handleEscape);
|
|
1300
|
+
return () => document.removeEventListener("keydown", handleEscape);
|
|
1301
|
+
}, [isOpen]);
|
|
1302
|
+
React8.useEffect(() => {
|
|
1303
|
+
if (!isOpen || activeIndex < 0) return;
|
|
1304
|
+
const listbox = listboxRef.current;
|
|
1305
|
+
if (!listbox) return;
|
|
1306
|
+
const activeEl = listbox.children[activeIndex];
|
|
1307
|
+
if (typeof activeEl?.scrollIntoView === "function") {
|
|
1308
|
+
activeEl.scrollIntoView({ block: "nearest" });
|
|
1309
|
+
}
|
|
1310
|
+
}, [activeIndex, isOpen]);
|
|
1311
|
+
React8.useEffect(() => {
|
|
1312
|
+
if (isOpen) {
|
|
1313
|
+
const firstSelectedIdx = options.findIndex(
|
|
1314
|
+
(o) => !o.disabled && selectedValues.includes(o.value)
|
|
1315
|
+
);
|
|
1316
|
+
setActiveIndex(firstSelectedIdx >= 0 ? firstSelectedIdx : 0);
|
|
1317
|
+
} else {
|
|
1318
|
+
setActiveIndex(-1);
|
|
1319
|
+
}
|
|
1320
|
+
}, [isOpen]);
|
|
1321
|
+
const handleKeyDown = (e) => {
|
|
1322
|
+
if (disabled) return;
|
|
1323
|
+
switch (e.key) {
|
|
1324
|
+
case "ArrowDown":
|
|
1325
|
+
case "Down": {
|
|
1326
|
+
e.preventDefault();
|
|
1327
|
+
if (!isOpen) {
|
|
1328
|
+
setIsOpen(true);
|
|
1329
|
+
return;
|
|
1362
1330
|
}
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
if (!isOpen) {
|
|
1367
|
-
setIsOpen(true);
|
|
1368
|
-
} else if (activeIndex >= 0 && !options[activeIndex].disabled) {
|
|
1369
|
-
handleSelect(options[activeIndex].value);
|
|
1331
|
+
setActiveIndex((prev) => {
|
|
1332
|
+
for (let i = prev + 1; i < options.length; i++) {
|
|
1333
|
+
if (!options[i].disabled) return i;
|
|
1370
1334
|
}
|
|
1371
|
-
|
|
1335
|
+
return prev;
|
|
1336
|
+
});
|
|
1337
|
+
break;
|
|
1338
|
+
}
|
|
1339
|
+
case "ArrowUp":
|
|
1340
|
+
case "Up": {
|
|
1341
|
+
e.preventDefault();
|
|
1342
|
+
if (!isOpen) {
|
|
1343
|
+
setIsOpen(true);
|
|
1344
|
+
return;
|
|
1372
1345
|
}
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
const idx = enabledOptions.length > 0 ? options.indexOf(enabledOptions[0]) : 0;
|
|
1377
|
-
setActiveIndex(idx);
|
|
1346
|
+
setActiveIndex((prev) => {
|
|
1347
|
+
for (let i = prev - 1; i >= 0; i--) {
|
|
1348
|
+
if (!options[i].disabled) return i;
|
|
1378
1349
|
}
|
|
1379
|
-
|
|
1350
|
+
return prev;
|
|
1351
|
+
});
|
|
1352
|
+
break;
|
|
1353
|
+
}
|
|
1354
|
+
case "Enter":
|
|
1355
|
+
case " ": {
|
|
1356
|
+
e.preventDefault();
|
|
1357
|
+
if (!isOpen) {
|
|
1358
|
+
setIsOpen(true);
|
|
1359
|
+
} else if (activeIndex >= 0 && !options[activeIndex].disabled) {
|
|
1360
|
+
handleSelect(options[activeIndex].value);
|
|
1380
1361
|
}
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1362
|
+
break;
|
|
1363
|
+
}
|
|
1364
|
+
case "Home": {
|
|
1365
|
+
e.preventDefault();
|
|
1366
|
+
if (isOpen) {
|
|
1367
|
+
const idx = enabledOptions.length > 0 ? options.indexOf(enabledOptions[0]) : 0;
|
|
1368
|
+
setActiveIndex(idx);
|
|
1388
1369
|
}
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1370
|
+
break;
|
|
1371
|
+
}
|
|
1372
|
+
case "End": {
|
|
1373
|
+
e.preventDefault();
|
|
1374
|
+
if (isOpen) {
|
|
1375
|
+
const idx = enabledOptions.length > 0 ? options.indexOf(enabledOptions[enabledOptions.length - 1]) : options.length - 1;
|
|
1376
|
+
setActiveIndex(idx);
|
|
1392
1377
|
}
|
|
1378
|
+
break;
|
|
1393
1379
|
}
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
{
|
|
1398
|
-
ref: wrapperRef,
|
|
1399
|
-
className: [
|
|
1400
|
-
"rh-relative rh-flex rh-flex-col rh-gap-1 rh-font-sans",
|
|
1401
|
-
wrapperClassName
|
|
1402
|
-
].filter(Boolean).join(" "),
|
|
1403
|
-
children: [
|
|
1404
|
-
label && /* @__PURE__ */ jsxs(
|
|
1405
|
-
"label",
|
|
1406
|
-
{
|
|
1407
|
-
id: `${triggerId}-label`,
|
|
1408
|
-
className: "rh-flex rh-items-baseline rh-gap-1",
|
|
1409
|
-
children: [
|
|
1410
|
-
/* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-medium rh-text-text", children: label }),
|
|
1411
|
-
subtitle && /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
|
|
1412
|
-
]
|
|
1413
|
-
}
|
|
1414
|
-
),
|
|
1415
|
-
/* @__PURE__ */ jsxs(
|
|
1416
|
-
"button",
|
|
1417
|
-
{
|
|
1418
|
-
ref: innerRef,
|
|
1419
|
-
id: triggerId,
|
|
1420
|
-
type: "button",
|
|
1421
|
-
role: "combobox",
|
|
1422
|
-
"aria-expanded": isOpen,
|
|
1423
|
-
"aria-haspopup": "listbox",
|
|
1424
|
-
"aria-controls": listboxId,
|
|
1425
|
-
"aria-labelledby": label ? `${triggerId}-label` : void 0,
|
|
1426
|
-
"aria-describedby": helperText ? helperId : void 0,
|
|
1427
|
-
"aria-invalid": status === "error" || void 0,
|
|
1428
|
-
"aria-disabled": disabled || void 0,
|
|
1429
|
-
disabled,
|
|
1430
|
-
onClick: () => !disabled && setIsOpen((o) => !o),
|
|
1431
|
-
onKeyDown: handleKeyDown,
|
|
1432
|
-
className: [
|
|
1433
|
-
"rh-flex rh-items-center rh-justify-between rh-gap-2",
|
|
1434
|
-
"rh-border rh-bg-surface rh-font-sans",
|
|
1435
|
-
"rh-transition-colors rh-duration-150",
|
|
1436
|
-
"rh-text-left rh-w-full",
|
|
1437
|
-
statusClasses2[status],
|
|
1438
|
-
radiusClasses4[radius],
|
|
1439
|
-
sizeClasses5[size],
|
|
1440
|
-
disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "rh-cursor-pointer",
|
|
1441
|
-
className
|
|
1442
|
-
].filter(Boolean).join(" "),
|
|
1443
|
-
children: [
|
|
1444
|
-
/* @__PURE__ */ jsx(
|
|
1445
|
-
"span",
|
|
1446
|
-
{
|
|
1447
|
-
className: [
|
|
1448
|
-
"rh-flex-1 rh-truncate",
|
|
1449
|
-
displayText ? "rh-text-text" : "rh-text-text-muted"
|
|
1450
|
-
].join(" "),
|
|
1451
|
-
children: displayText ?? placeholder
|
|
1452
|
-
}
|
|
1453
|
-
),
|
|
1454
|
-
/* @__PURE__ */ jsx(
|
|
1455
|
-
ChevronIcon,
|
|
1456
|
-
{
|
|
1457
|
-
className: [
|
|
1458
|
-
"rh-w-5 rh-h-5 rh-shrink-0 rh-text-text-muted rh-transition-transform rh-duration-150",
|
|
1459
|
-
isOpen ? "rh-rotate-180" : ""
|
|
1460
|
-
].filter(Boolean).join(" ")
|
|
1461
|
-
}
|
|
1462
|
-
)
|
|
1463
|
-
]
|
|
1464
|
-
}
|
|
1465
|
-
),
|
|
1466
|
-
isOpen && /* @__PURE__ */ jsx(
|
|
1467
|
-
"ul",
|
|
1468
|
-
{
|
|
1469
|
-
ref: listboxRef,
|
|
1470
|
-
id: listboxId,
|
|
1471
|
-
role: "listbox",
|
|
1472
|
-
"aria-labelledby": label ? `${triggerId}-label` : triggerId,
|
|
1473
|
-
"aria-multiselectable": multiple || void 0,
|
|
1474
|
-
tabIndex: -1,
|
|
1475
|
-
className: [
|
|
1476
|
-
"rh-absolute rh-z-50 rh-w-full rh-mt-1",
|
|
1477
|
-
"rh-border rh-border-border rh-bg-surface",
|
|
1478
|
-
"rh-shadow-md rh-overflow-auto rh-max-h-60",
|
|
1479
|
-
"rh-py-1",
|
|
1480
|
-
dropdownRadiusClasses[radius]
|
|
1481
|
-
].filter(Boolean).join(" "),
|
|
1482
|
-
style: { top: "100%" },
|
|
1483
|
-
children: options.map((option, index) => {
|
|
1484
|
-
const isSelected = selectedValues.includes(option.value);
|
|
1485
|
-
const isActive = index === activeIndex;
|
|
1486
|
-
const isDisabled = option.disabled;
|
|
1487
|
-
return /* @__PURE__ */ jsxs(
|
|
1488
|
-
"li",
|
|
1489
|
-
{
|
|
1490
|
-
id: `${listboxId}-option-${index}`,
|
|
1491
|
-
role: "option",
|
|
1492
|
-
"aria-selected": isSelected,
|
|
1493
|
-
"aria-disabled": isDisabled || void 0,
|
|
1494
|
-
onClick: () => {
|
|
1495
|
-
if (!isDisabled) handleSelect(option.value);
|
|
1496
|
-
},
|
|
1497
|
-
onMouseEnter: () => {
|
|
1498
|
-
if (!isDisabled) setActiveIndex(index);
|
|
1499
|
-
},
|
|
1500
|
-
className: [
|
|
1501
|
-
"rh-flex rh-items-center rh-justify-between rh-gap-2",
|
|
1502
|
-
"rh-transition-colors rh-duration-150",
|
|
1503
|
-
optionSizeClasses[size],
|
|
1504
|
-
isDisabled ? "rh-opacity-50 rh-cursor-not-allowed" : "rh-cursor-pointer",
|
|
1505
|
-
isActive && !isDisabled ? "rh-bg-background" : "",
|
|
1506
|
-
isSelected && !isActive ? "rh-bg-primary/5" : ""
|
|
1507
|
-
].filter(Boolean).join(" "),
|
|
1508
|
-
children: [
|
|
1509
|
-
/* @__PURE__ */ jsx("span", { className: "rh-flex-1 rh-truncate rh-text-text", children: option.label }),
|
|
1510
|
-
multiple ? /* @__PURE__ */ jsx(
|
|
1511
|
-
"span",
|
|
1512
|
-
{
|
|
1513
|
-
className: [
|
|
1514
|
-
"rh-inline-flex rh-items-center rh-justify-center",
|
|
1515
|
-
"rh-w-5 rh-h-5 rh-shrink-0",
|
|
1516
|
-
"rh-border rh-rounded-xxs rh-transition-colors rh-duration-150",
|
|
1517
|
-
isSelected ? "rh-bg-primary rh-border-primary rh-text-surface" : "rh-border-border rh-bg-surface"
|
|
1518
|
-
].filter(Boolean).join(" "),
|
|
1519
|
-
"aria-hidden": "true",
|
|
1520
|
-
children: isSelected && /* @__PURE__ */ jsx(CheckIcon2, { className: "rh-w-3 rh-h-3" })
|
|
1521
|
-
}
|
|
1522
|
-
) : isSelected && /* @__PURE__ */ jsx(CheckIcon2, { className: "rh-w-3.5 rh-h-3.5 rh-shrink-0 rh-text-primary" })
|
|
1523
|
-
]
|
|
1524
|
-
},
|
|
1525
|
-
option.value
|
|
1526
|
-
);
|
|
1527
|
-
})
|
|
1528
|
-
}
|
|
1529
|
-
),
|
|
1530
|
-
helperText && /* @__PURE__ */ jsx(
|
|
1531
|
-
"span",
|
|
1532
|
-
{
|
|
1533
|
-
id: helperId,
|
|
1534
|
-
className: [
|
|
1535
|
-
"rh-flex rh-items-center rh-gap-1 rh-text-xs",
|
|
1536
|
-
helperStatusClasses2[status]
|
|
1537
|
-
].join(" "),
|
|
1538
|
-
children: helperText
|
|
1539
|
-
}
|
|
1540
|
-
)
|
|
1541
|
-
]
|
|
1380
|
+
case "Tab": {
|
|
1381
|
+
if (isOpen) setIsOpen(false);
|
|
1382
|
+
break;
|
|
1542
1383
|
}
|
|
1543
|
-
|
|
1544
|
-
}
|
|
1545
|
-
|
|
1384
|
+
}
|
|
1385
|
+
};
|
|
1386
|
+
return /* @__PURE__ */ jsxs(
|
|
1387
|
+
"div",
|
|
1388
|
+
{
|
|
1389
|
+
ref: wrapperRef,
|
|
1390
|
+
className: ["rh-relative rh-flex rh-flex-col rh-gap-1 rh-font-body", wrapperClassName].filter(Boolean).join(" "),
|
|
1391
|
+
children: [
|
|
1392
|
+
label && /* @__PURE__ */ jsxs("label", { id: `${triggerId}-label`, className: "rh-flex rh-items-baseline rh-gap-1", children: [
|
|
1393
|
+
/* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-medium rh-text-text", children: label }),
|
|
1394
|
+
subtitle && /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
|
|
1395
|
+
] }),
|
|
1396
|
+
/* @__PURE__ */ jsxs(
|
|
1397
|
+
"button",
|
|
1398
|
+
{
|
|
1399
|
+
ref: innerRef,
|
|
1400
|
+
id: triggerId,
|
|
1401
|
+
type: "button",
|
|
1402
|
+
role: "combobox",
|
|
1403
|
+
"aria-expanded": isOpen,
|
|
1404
|
+
"aria-haspopup": "listbox",
|
|
1405
|
+
"aria-controls": listboxId,
|
|
1406
|
+
"aria-labelledby": label ? `${triggerId}-label` : void 0,
|
|
1407
|
+
"aria-describedby": helperText ? helperId : void 0,
|
|
1408
|
+
"aria-invalid": status === "error" || void 0,
|
|
1409
|
+
"aria-disabled": disabled || void 0,
|
|
1410
|
+
disabled,
|
|
1411
|
+
onClick: () => !disabled && setIsOpen((o) => !o),
|
|
1412
|
+
onKeyDown: handleKeyDown,
|
|
1413
|
+
className: [
|
|
1414
|
+
"rh-flex rh-items-center rh-justify-between rh-gap-2",
|
|
1415
|
+
"rh-border rh-bg-surface rh-font-body",
|
|
1416
|
+
"rh-transition-colors rh-duration-150",
|
|
1417
|
+
"rh-text-left rh-w-full",
|
|
1418
|
+
statusClasses2[status],
|
|
1419
|
+
radiusClasses4[radius],
|
|
1420
|
+
sizeClasses5[size],
|
|
1421
|
+
disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "rh-cursor-pointer",
|
|
1422
|
+
className
|
|
1423
|
+
].filter(Boolean).join(" "),
|
|
1424
|
+
children: [
|
|
1425
|
+
/* @__PURE__ */ jsx(
|
|
1426
|
+
"span",
|
|
1427
|
+
{
|
|
1428
|
+
className: [
|
|
1429
|
+
"rh-flex-1 rh-truncate",
|
|
1430
|
+
displayText ? "rh-text-text" : "rh-text-text-muted"
|
|
1431
|
+
].join(" "),
|
|
1432
|
+
children: displayText ?? placeholder
|
|
1433
|
+
}
|
|
1434
|
+
),
|
|
1435
|
+
/* @__PURE__ */ jsx(
|
|
1436
|
+
ChevronIcon,
|
|
1437
|
+
{
|
|
1438
|
+
className: [
|
|
1439
|
+
"rh-w-5 rh-h-5 rh-shrink-0 rh-text-text-muted rh-transition-transform rh-duration-150",
|
|
1440
|
+
isOpen ? "rh-rotate-180" : ""
|
|
1441
|
+
].filter(Boolean).join(" ")
|
|
1442
|
+
}
|
|
1443
|
+
)
|
|
1444
|
+
]
|
|
1445
|
+
}
|
|
1446
|
+
),
|
|
1447
|
+
isOpen && /* @__PURE__ */ jsx(
|
|
1448
|
+
"ul",
|
|
1449
|
+
{
|
|
1450
|
+
ref: listboxRef,
|
|
1451
|
+
id: listboxId,
|
|
1452
|
+
role: "listbox",
|
|
1453
|
+
"aria-labelledby": label ? `${triggerId}-label` : triggerId,
|
|
1454
|
+
"aria-multiselectable": multiple || void 0,
|
|
1455
|
+
tabIndex: -1,
|
|
1456
|
+
className: [
|
|
1457
|
+
"rh-absolute rh-z-50 rh-w-full rh-mt-1",
|
|
1458
|
+
"rh-border rh-border-border rh-bg-surface",
|
|
1459
|
+
"rh-shadow-md rh-overflow-auto rh-max-h-60",
|
|
1460
|
+
"rh-py-1",
|
|
1461
|
+
dropdownRadiusClasses[radius]
|
|
1462
|
+
].filter(Boolean).join(" "),
|
|
1463
|
+
style: { top: "100%" },
|
|
1464
|
+
children: options.map((option, index) => {
|
|
1465
|
+
const isSelected = selectedValues.includes(option.value);
|
|
1466
|
+
const isActive = index === activeIndex;
|
|
1467
|
+
const isDisabled = option.disabled;
|
|
1468
|
+
return /* @__PURE__ */ jsxs(
|
|
1469
|
+
"li",
|
|
1470
|
+
{
|
|
1471
|
+
id: `${listboxId}-option-${index}`,
|
|
1472
|
+
role: "option",
|
|
1473
|
+
"aria-selected": isSelected,
|
|
1474
|
+
"aria-disabled": isDisabled || void 0,
|
|
1475
|
+
onClick: () => {
|
|
1476
|
+
if (!isDisabled) handleSelect(option.value);
|
|
1477
|
+
},
|
|
1478
|
+
onMouseEnter: () => {
|
|
1479
|
+
if (!isDisabled) setActiveIndex(index);
|
|
1480
|
+
},
|
|
1481
|
+
className: [
|
|
1482
|
+
"rh-flex rh-items-center rh-justify-between rh-gap-2",
|
|
1483
|
+
"rh-transition-colors rh-duration-150",
|
|
1484
|
+
optionSizeClasses[size],
|
|
1485
|
+
isDisabled ? "rh-opacity-50 rh-cursor-not-allowed" : "rh-cursor-pointer",
|
|
1486
|
+
isActive && !isDisabled ? "rh-bg-background" : "",
|
|
1487
|
+
isSelected && !isActive ? "rh-bg-primary/5" : ""
|
|
1488
|
+
].filter(Boolean).join(" "),
|
|
1489
|
+
children: [
|
|
1490
|
+
/* @__PURE__ */ jsx("span", { className: "rh-flex-1 rh-truncate rh-text-text", children: option.label }),
|
|
1491
|
+
multiple ? /* @__PURE__ */ jsx(
|
|
1492
|
+
"span",
|
|
1493
|
+
{
|
|
1494
|
+
className: [
|
|
1495
|
+
"rh-inline-flex rh-items-center rh-justify-center",
|
|
1496
|
+
"rh-w-5 rh-h-5 rh-shrink-0",
|
|
1497
|
+
"rh-border rh-rounded-xxs rh-transition-colors rh-duration-150",
|
|
1498
|
+
isSelected ? "rh-bg-primary rh-border-primary rh-text-surface" : "rh-border-border rh-bg-surface"
|
|
1499
|
+
].filter(Boolean).join(" "),
|
|
1500
|
+
"aria-hidden": "true",
|
|
1501
|
+
children: isSelected && /* @__PURE__ */ jsx(CheckIcon2, { className: "rh-w-3 rh-h-3" })
|
|
1502
|
+
}
|
|
1503
|
+
) : isSelected && /* @__PURE__ */ jsx(CheckIcon2, { className: "rh-w-3.5 rh-h-3.5 rh-shrink-0 rh-text-primary" })
|
|
1504
|
+
]
|
|
1505
|
+
},
|
|
1506
|
+
option.value
|
|
1507
|
+
);
|
|
1508
|
+
})
|
|
1509
|
+
}
|
|
1510
|
+
),
|
|
1511
|
+
helperText && /* @__PURE__ */ jsx(
|
|
1512
|
+
"span",
|
|
1513
|
+
{
|
|
1514
|
+
id: helperId,
|
|
1515
|
+
className: [
|
|
1516
|
+
"rh-flex rh-items-center rh-gap-1 rh-text-xs",
|
|
1517
|
+
helperStatusClasses2[status]
|
|
1518
|
+
].join(" "),
|
|
1519
|
+
children: helperText
|
|
1520
|
+
}
|
|
1521
|
+
)
|
|
1522
|
+
]
|
|
1523
|
+
}
|
|
1524
|
+
);
|
|
1525
|
+
});
|
|
1546
1526
|
var variantClasses = {
|
|
1547
1527
|
light: "rh-bg-surface rh-text-text rh-border rh-border-border rh-shadow-md",
|
|
1548
1528
|
default: "rh-bg-primary/10 rh-text-text rh-border rh-border-primary/20 rh-shadow-md",
|
|
@@ -1984,228 +1964,121 @@ var addButtonSizeClasses = {
|
|
|
1984
1964
|
md: "rh-w-5 rh-h-5",
|
|
1985
1965
|
lg: "rh-w-5 rh-h-5"
|
|
1986
1966
|
};
|
|
1987
|
-
var TagInput = forwardRef(
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
setIsOpen(false);
|
|
2010
|
-
}
|
|
2011
|
-
};
|
|
2012
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
2013
|
-
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2014
|
-
}, []);
|
|
2015
|
-
const handleRemoveTag = (tagValue) => {
|
|
2016
|
-
if (disabled) return;
|
|
2017
|
-
onChange(value.filter((tag) => tag.value !== tagValue));
|
|
2018
|
-
};
|
|
2019
|
-
const handleToggleOption = (option) => {
|
|
2020
|
-
if (disabled) return;
|
|
2021
|
-
const isSelected = value.some((v) => v.value === option.value);
|
|
2022
|
-
if (isSelected) {
|
|
2023
|
-
onChange(value.filter((v) => v.value !== option.value));
|
|
2024
|
-
} else {
|
|
2025
|
-
onChange([...value, option]);
|
|
1967
|
+
var TagInput = forwardRef(function TagInput2({
|
|
1968
|
+
label,
|
|
1969
|
+
subtitle,
|
|
1970
|
+
options = [],
|
|
1971
|
+
value = [],
|
|
1972
|
+
onChange,
|
|
1973
|
+
placeholder,
|
|
1974
|
+
status = "default",
|
|
1975
|
+
size = "md",
|
|
1976
|
+
radius = "md",
|
|
1977
|
+
helperText,
|
|
1978
|
+
disabled,
|
|
1979
|
+
className = "",
|
|
1980
|
+
wrapperClassName = ""
|
|
1981
|
+
}, ref) {
|
|
1982
|
+
const inputId = React8.useId();
|
|
1983
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
1984
|
+
const containerRef = useRef(null);
|
|
1985
|
+
useEffect(() => {
|
|
1986
|
+
const handleClickOutside = (event) => {
|
|
1987
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
1988
|
+
setIsOpen(false);
|
|
2026
1989
|
}
|
|
2027
1990
|
};
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
children: [
|
|
2082
|
-
/* @__PURE__ */ jsx("span", { className: "rh-font-semibold rh-text-gray-700", children: tag.label }),
|
|
2083
|
-
/* @__PURE__ */ jsx(
|
|
2084
|
-
"button",
|
|
2085
|
-
{
|
|
2086
|
-
type: "button",
|
|
2087
|
-
onClick: (e) => {
|
|
2088
|
-
e.stopPropagation();
|
|
2089
|
-
handleRemoveTag(tag.value);
|
|
2090
|
-
},
|
|
2091
|
-
disabled,
|
|
2092
|
-
className: [
|
|
2093
|
-
"rh-flex rh-items-center rh-justify-center",
|
|
2094
|
-
"rh-bg-white rh-rounded-full",
|
|
2095
|
-
"rh-cursor-pointer hover:rh-bg-gray-100",
|
|
2096
|
-
"disabled:rh-cursor-not-allowed disabled:rh-opacity-50",
|
|
2097
|
-
deleteButtonSizeClasses[size]
|
|
2098
|
-
].join(" "),
|
|
2099
|
-
"aria-label": `Remover ${tag.label}`,
|
|
2100
|
-
children: /* @__PURE__ */ jsx(
|
|
2101
|
-
"svg",
|
|
2102
|
-
{
|
|
2103
|
-
viewBox: "0 0 8 8",
|
|
2104
|
-
fill: "none",
|
|
2105
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2106
|
-
className: "rh-w-[8px] rh-h-[8px]",
|
|
2107
|
-
children: /* @__PURE__ */ jsx(
|
|
2108
|
-
"path",
|
|
2109
|
-
{
|
|
2110
|
-
d: "M6 2L2 6M2 2L6 6",
|
|
2111
|
-
stroke: "#374151",
|
|
2112
|
-
strokeWidth: "1.5",
|
|
2113
|
-
strokeLinecap: "round",
|
|
2114
|
-
strokeLinejoin: "round"
|
|
2115
|
-
}
|
|
2116
|
-
)
|
|
2117
|
-
}
|
|
2118
|
-
)
|
|
2119
|
-
}
|
|
2120
|
-
)
|
|
2121
|
-
]
|
|
2122
|
-
},
|
|
2123
|
-
tag.value
|
|
2124
|
-
))
|
|
2125
|
-
] }),
|
|
2126
|
-
/* @__PURE__ */ jsx(
|
|
2127
|
-
"button",
|
|
2128
|
-
{
|
|
2129
|
-
type: "button",
|
|
2130
|
-
onClick: handleAddClick,
|
|
2131
|
-
disabled,
|
|
2132
|
-
className: [
|
|
2133
|
-
"rh-flex rh-items-center rh-justify-center rh-shrink-0",
|
|
2134
|
-
"rh-text-text-muted hover:rh-text-text",
|
|
2135
|
-
"rh-cursor-pointer",
|
|
2136
|
-
"disabled:rh-cursor-not-allowed disabled:rh-opacity-50",
|
|
2137
|
-
addButtonSizeClasses[size]
|
|
2138
|
-
].join(" "),
|
|
2139
|
-
"aria-label": "Adicionar",
|
|
2140
|
-
"aria-expanded": isOpen,
|
|
2141
|
-
children: /* @__PURE__ */ jsx(
|
|
2142
|
-
"svg",
|
|
2143
|
-
{
|
|
2144
|
-
viewBox: "0 0 20 20",
|
|
2145
|
-
fill: "none",
|
|
2146
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2147
|
-
className: "rh-w-full rh-h-full",
|
|
2148
|
-
children: /* @__PURE__ */ jsx(
|
|
2149
|
-
"path",
|
|
2150
|
-
{
|
|
2151
|
-
d: "M10 4V16M4 10H16",
|
|
2152
|
-
stroke: "currentColor",
|
|
2153
|
-
strokeWidth: "2",
|
|
2154
|
-
strokeLinecap: "round",
|
|
2155
|
-
strokeLinejoin: "round"
|
|
2156
|
-
}
|
|
2157
|
-
)
|
|
2158
|
-
}
|
|
2159
|
-
)
|
|
2160
|
-
}
|
|
2161
|
-
)
|
|
2162
|
-
]
|
|
2163
|
-
}
|
|
2164
|
-
),
|
|
2165
|
-
isOpen && options.length > 0 && /* @__PURE__ */ jsx(
|
|
2166
|
-
"div",
|
|
2167
|
-
{
|
|
2168
|
-
className: [
|
|
2169
|
-
"rh-absolute rh-top-full rh-left-0 rh-right-0 rh-z-50",
|
|
2170
|
-
"rh-mt-1 rh-bg-surface rh-border rh-border-border",
|
|
2171
|
-
"rh-rounded-[8px] rh-shadow-lg rh-overflow-hidden"
|
|
2172
|
-
].join(" "),
|
|
2173
|
-
children: /* @__PURE__ */ jsx("ul", { className: "rh-max-h-[200px] rh-overflow-y-auto", children: options.map((option) => {
|
|
2174
|
-
const isSelected = value.some((v) => v.value === option.value);
|
|
2175
|
-
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
|
|
2176
|
-
"button",
|
|
1991
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1992
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
1993
|
+
}, []);
|
|
1994
|
+
const handleRemoveTag = (tagValue) => {
|
|
1995
|
+
if (disabled) return;
|
|
1996
|
+
onChange(value.filter((tag) => tag.value !== tagValue));
|
|
1997
|
+
};
|
|
1998
|
+
const handleToggleOption = (option) => {
|
|
1999
|
+
if (disabled) return;
|
|
2000
|
+
const isSelected = value.some((v) => v.value === option.value);
|
|
2001
|
+
if (isSelected) {
|
|
2002
|
+
onChange(value.filter((v) => v.value !== option.value));
|
|
2003
|
+
} else {
|
|
2004
|
+
onChange([...value, option]);
|
|
2005
|
+
}
|
|
2006
|
+
};
|
|
2007
|
+
const handleAddClick = () => {
|
|
2008
|
+
if (disabled) return;
|
|
2009
|
+
setIsOpen(!isOpen);
|
|
2010
|
+
};
|
|
2011
|
+
return /* @__PURE__ */ jsxs(
|
|
2012
|
+
"div",
|
|
2013
|
+
{
|
|
2014
|
+
ref: (node) => {
|
|
2015
|
+
if (typeof ref === "function") ref(node);
|
|
2016
|
+
else if (ref) ref.current = node;
|
|
2017
|
+
containerRef.current = node;
|
|
2018
|
+
},
|
|
2019
|
+
className: ["rh-flex rh-flex-col rh-gap-2 rh-font-body rh-relative", wrapperClassName].filter(Boolean).join(" "),
|
|
2020
|
+
children: [
|
|
2021
|
+
label && /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "rh-flex rh-items-baseline rh-gap-1", children: [
|
|
2022
|
+
/* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-semibold rh-text-text", children: label }),
|
|
2023
|
+
subtitle && /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
|
|
2024
|
+
] }),
|
|
2025
|
+
/* @__PURE__ */ jsxs(
|
|
2026
|
+
"div",
|
|
2027
|
+
{
|
|
2028
|
+
onClick: disabled ? void 0 : handleAddClick,
|
|
2029
|
+
className: [
|
|
2030
|
+
"rh-flex rh-flex-row rh-items-center rh-justify-between rh-gap-2",
|
|
2031
|
+
"rh-border rh-bg-surface rh-font-body",
|
|
2032
|
+
"rh-transition-colors rh-duration-150",
|
|
2033
|
+
statusClasses3[status],
|
|
2034
|
+
radiusClasses5[radius],
|
|
2035
|
+
sizeClasses9[size],
|
|
2036
|
+
disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "rh-cursor-pointer",
|
|
2037
|
+
className
|
|
2038
|
+
].filter(Boolean).join(" "),
|
|
2039
|
+
children: [
|
|
2040
|
+
/* @__PURE__ */ jsxs("div", { className: "rh-flex rh-flex-row rh-flex-wrap rh-items-center rh-gap-2 rh-flex-1", children: [
|
|
2041
|
+
value.length === 0 && placeholder && /* @__PURE__ */ jsx("span", { className: "rh-text-text-muted", children: placeholder }),
|
|
2042
|
+
value.map((tag) => /* @__PURE__ */ jsxs(
|
|
2043
|
+
"div",
|
|
2177
2044
|
{
|
|
2178
|
-
type: "button",
|
|
2179
|
-
onClick: () => handleToggleOption(option),
|
|
2180
2045
|
className: [
|
|
2181
|
-
"rh-
|
|
2182
|
-
"rh-
|
|
2183
|
-
|
|
2184
|
-
"hover:rh-bg-gray-50 rh-transition-colors",
|
|
2185
|
-
isSelected ? "rh-text-text" : "rh-text-text-muted"
|
|
2046
|
+
"rh-inline-flex rh-items-center rh-justify-center rh-gap-1",
|
|
2047
|
+
"rh-bg-gray-200 rh-border rh-border-gray-200 rh-rounded-[4px]",
|
|
2048
|
+
tagSizeClasses[size]
|
|
2186
2049
|
].join(" "),
|
|
2187
2050
|
children: [
|
|
2188
|
-
/* @__PURE__ */ jsx("span", { className: "rh-
|
|
2051
|
+
/* @__PURE__ */ jsx("span", { className: "rh-font-semibold rh-text-gray-700", children: tag.label }),
|
|
2189
2052
|
/* @__PURE__ */ jsx(
|
|
2190
|
-
"
|
|
2053
|
+
"button",
|
|
2191
2054
|
{
|
|
2055
|
+
type: "button",
|
|
2056
|
+
onClick: (e) => {
|
|
2057
|
+
e.stopPropagation();
|
|
2058
|
+
handleRemoveTag(tag.value);
|
|
2059
|
+
},
|
|
2060
|
+
disabled,
|
|
2192
2061
|
className: [
|
|
2193
|
-
"rh-
|
|
2194
|
-
|
|
2062
|
+
"rh-flex rh-items-center rh-justify-center",
|
|
2063
|
+
"rh-bg-white rh-rounded-full",
|
|
2064
|
+
"rh-cursor-pointer hover:rh-bg-gray-100",
|
|
2065
|
+
"disabled:rh-cursor-not-allowed disabled:rh-opacity-50",
|
|
2066
|
+
deleteButtonSizeClasses[size]
|
|
2195
2067
|
].join(" "),
|
|
2196
|
-
|
|
2068
|
+
"aria-label": `Remover ${tag.label}`,
|
|
2069
|
+
children: /* @__PURE__ */ jsx(
|
|
2197
2070
|
"svg",
|
|
2198
2071
|
{
|
|
2199
|
-
viewBox: "0 0
|
|
2072
|
+
viewBox: "0 0 8 8",
|
|
2200
2073
|
fill: "none",
|
|
2201
2074
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2202
|
-
className: "rh-w-
|
|
2075
|
+
className: "rh-w-[8px] rh-h-[8px]",
|
|
2203
2076
|
children: /* @__PURE__ */ jsx(
|
|
2204
2077
|
"path",
|
|
2205
2078
|
{
|
|
2206
|
-
d: "
|
|
2207
|
-
stroke: "
|
|
2208
|
-
strokeWidth: "
|
|
2079
|
+
d: "M6 2L2 6M2 2L6 6",
|
|
2080
|
+
stroke: "#374151",
|
|
2081
|
+
strokeWidth: "1.5",
|
|
2209
2082
|
strokeLinecap: "round",
|
|
2210
2083
|
strokeLinejoin: "round"
|
|
2211
2084
|
}
|
|
@@ -2215,101 +2088,142 @@ var TagInput = forwardRef(
|
|
|
2215
2088
|
}
|
|
2216
2089
|
)
|
|
2217
2090
|
]
|
|
2218
|
-
}
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
"span",
|
|
2225
|
-
{
|
|
2226
|
-
id: `${inputId}-helper`,
|
|
2227
|
-
className: [
|
|
2228
|
-
"rh-flex rh-items-center rh-gap-1 rh-text-xs",
|
|
2229
|
-
helperStatusClasses3[status]
|
|
2230
|
-
].join(" "),
|
|
2231
|
-
children: helperText
|
|
2232
|
-
}
|
|
2233
|
-
)
|
|
2234
|
-
]
|
|
2235
|
-
}
|
|
2236
|
-
);
|
|
2237
|
-
}
|
|
2238
|
-
);
|
|
2239
|
-
var ProgressBar = forwardRef(
|
|
2240
|
-
function ProgressBar2({
|
|
2241
|
-
value,
|
|
2242
|
-
label,
|
|
2243
|
-
size = "sm",
|
|
2244
|
-
showPercentage = true,
|
|
2245
|
-
barColor,
|
|
2246
|
-
bgColor,
|
|
2247
|
-
className = ""
|
|
2248
|
-
}, ref) {
|
|
2249
|
-
const clampedValue = Math.min(100, Math.max(0, value));
|
|
2250
|
-
if (size === "lg") {
|
|
2251
|
-
return /* @__PURE__ */ jsxs(
|
|
2252
|
-
"div",
|
|
2253
|
-
{
|
|
2254
|
-
ref,
|
|
2255
|
-
className: [
|
|
2256
|
-
"rh-flex rh-flex-col rh-items-start rh-gap-2 rh-font-sans",
|
|
2257
|
-
className
|
|
2258
|
-
].filter(Boolean).join(" "),
|
|
2259
|
-
children: [
|
|
2260
|
-
/* @__PURE__ */ jsxs("div", { className: "rh-flex rh-flex-row rh-justify-between rh-items-start rh-w-full", children: [
|
|
2261
|
-
label && /* @__PURE__ */ jsx(
|
|
2262
|
-
"span",
|
|
2091
|
+
},
|
|
2092
|
+
tag.value
|
|
2093
|
+
))
|
|
2094
|
+
] }),
|
|
2095
|
+
/* @__PURE__ */ jsx(
|
|
2096
|
+
"button",
|
|
2263
2097
|
{
|
|
2264
|
-
|
|
2265
|
-
|
|
2098
|
+
type: "button",
|
|
2099
|
+
onClick: handleAddClick,
|
|
2100
|
+
disabled,
|
|
2101
|
+
className: [
|
|
2102
|
+
"rh-flex rh-items-center rh-justify-center rh-shrink-0",
|
|
2103
|
+
"rh-text-text-muted hover:rh-text-text",
|
|
2104
|
+
"rh-cursor-pointer",
|
|
2105
|
+
"disabled:rh-cursor-not-allowed disabled:rh-opacity-50",
|
|
2106
|
+
addButtonSizeClasses[size]
|
|
2107
|
+
].join(" "),
|
|
2108
|
+
"aria-label": "Adicionar",
|
|
2109
|
+
"aria-expanded": isOpen,
|
|
2110
|
+
children: /* @__PURE__ */ jsx(
|
|
2111
|
+
"svg",
|
|
2112
|
+
{
|
|
2113
|
+
viewBox: "0 0 20 20",
|
|
2114
|
+
fill: "none",
|
|
2115
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2116
|
+
className: "rh-w-full rh-h-full",
|
|
2117
|
+
children: /* @__PURE__ */ jsx(
|
|
2118
|
+
"path",
|
|
2119
|
+
{
|
|
2120
|
+
d: "M10 4V16M4 10H16",
|
|
2121
|
+
stroke: "currentColor",
|
|
2122
|
+
strokeWidth: "2",
|
|
2123
|
+
strokeLinecap: "round",
|
|
2124
|
+
strokeLinejoin: "round"
|
|
2125
|
+
}
|
|
2126
|
+
)
|
|
2127
|
+
}
|
|
2128
|
+
)
|
|
2266
2129
|
}
|
|
2267
|
-
)
|
|
2268
|
-
|
|
2269
|
-
|
|
2130
|
+
)
|
|
2131
|
+
]
|
|
2132
|
+
}
|
|
2133
|
+
),
|
|
2134
|
+
isOpen && options.length > 0 && /* @__PURE__ */ jsx(
|
|
2135
|
+
"div",
|
|
2136
|
+
{
|
|
2137
|
+
className: [
|
|
2138
|
+
"rh-absolute rh-top-full rh-left-0 rh-right-0 rh-z-50",
|
|
2139
|
+
"rh-mt-1 rh-bg-surface rh-border rh-border-border",
|
|
2140
|
+
"rh-rounded-[8px] rh-shadow-lg rh-overflow-hidden"
|
|
2141
|
+
].join(" "),
|
|
2142
|
+
children: /* @__PURE__ */ jsx("ul", { className: "rh-max-h-[200px] rh-overflow-y-auto", children: options.map((option) => {
|
|
2143
|
+
const isSelected = value.some((v) => v.value === option.value);
|
|
2144
|
+
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
|
|
2145
|
+
"button",
|
|
2270
2146
|
{
|
|
2271
|
-
|
|
2147
|
+
type: "button",
|
|
2148
|
+
onClick: () => handleToggleOption(option),
|
|
2149
|
+
className: [
|
|
2150
|
+
"rh-w-full rh-flex rh-items-center rh-justify-between",
|
|
2151
|
+
"rh-px-3 rh-py-3 rh-text-left",
|
|
2152
|
+
"rh-border-b rh-border-border/50 last:rh-border-b-0",
|
|
2153
|
+
"hover:rh-bg-gray-50 rh-transition-colors",
|
|
2154
|
+
isSelected ? "rh-text-text" : "rh-text-text-muted"
|
|
2155
|
+
].join(" "),
|
|
2272
2156
|
children: [
|
|
2273
|
-
|
|
2274
|
-
|
|
2157
|
+
/* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-normal", children: option.label }),
|
|
2158
|
+
/* @__PURE__ */ jsx(
|
|
2159
|
+
"span",
|
|
2160
|
+
{
|
|
2161
|
+
className: [
|
|
2162
|
+
"rh-w-5 rh-h-5 rh-rounded rh-border-2 rh-flex rh-items-center rh-justify-center",
|
|
2163
|
+
isSelected ? "rh-bg-primary rh-border-primary" : "rh-bg-white rh-border-gray-300"
|
|
2164
|
+
].join(" "),
|
|
2165
|
+
children: isSelected && /* @__PURE__ */ jsx(
|
|
2166
|
+
"svg",
|
|
2167
|
+
{
|
|
2168
|
+
viewBox: "0 0 12 12",
|
|
2169
|
+
fill: "none",
|
|
2170
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2171
|
+
className: "rh-w-3 rh-h-3",
|
|
2172
|
+
children: /* @__PURE__ */ jsx(
|
|
2173
|
+
"path",
|
|
2174
|
+
{
|
|
2175
|
+
d: "M2 6L5 9L10 3",
|
|
2176
|
+
stroke: "white",
|
|
2177
|
+
strokeWidth: "2",
|
|
2178
|
+
strokeLinecap: "round",
|
|
2179
|
+
strokeLinejoin: "round"
|
|
2180
|
+
}
|
|
2181
|
+
)
|
|
2182
|
+
}
|
|
2183
|
+
)
|
|
2184
|
+
}
|
|
2185
|
+
)
|
|
2275
2186
|
]
|
|
2276
2187
|
}
|
|
2277
|
-
)
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
)
|
|
2294
|
-
}
|
|
2295
|
-
)
|
|
2296
|
-
]
|
|
2297
|
-
}
|
|
2298
|
-
);
|
|
2188
|
+
) }, option.value);
|
|
2189
|
+
}) })
|
|
2190
|
+
}
|
|
2191
|
+
),
|
|
2192
|
+
helperText && /* @__PURE__ */ jsx(
|
|
2193
|
+
"span",
|
|
2194
|
+
{
|
|
2195
|
+
id: `${inputId}-helper`,
|
|
2196
|
+
className: [
|
|
2197
|
+
"rh-flex rh-items-center rh-gap-1 rh-text-xs",
|
|
2198
|
+
helperStatusClasses3[status]
|
|
2199
|
+
].join(" "),
|
|
2200
|
+
children: helperText
|
|
2201
|
+
}
|
|
2202
|
+
)
|
|
2203
|
+
]
|
|
2299
2204
|
}
|
|
2205
|
+
);
|
|
2206
|
+
});
|
|
2207
|
+
var ProgressBar = forwardRef(function ProgressBar2({ value, label, size = "sm", showPercentage = true, barColor, bgColor, className = "" }, ref) {
|
|
2208
|
+
const clampedValue = Math.min(100, Math.max(0, value));
|
|
2209
|
+
if (size === "lg") {
|
|
2300
2210
|
return /* @__PURE__ */ jsxs(
|
|
2301
2211
|
"div",
|
|
2302
2212
|
{
|
|
2303
2213
|
ref,
|
|
2304
|
-
className: [
|
|
2305
|
-
"rh-flex rh-flex-row rh-items-center rh-gap-2 rh-font-sans",
|
|
2306
|
-
className
|
|
2307
|
-
].filter(Boolean).join(" "),
|
|
2214
|
+
className: ["rh-flex rh-flex-col rh-items-start rh-gap-2 rh-font-body", className].filter(Boolean).join(" "),
|
|
2308
2215
|
children: [
|
|
2216
|
+
/* @__PURE__ */ jsxs("div", { className: "rh-flex rh-flex-row rh-justify-between rh-items-start rh-w-full", children: [
|
|
2217
|
+
label && /* @__PURE__ */ jsx("span", { className: "rh-font-sora rh-font-bold rh-text-base rh-leading-6 rh-text-[#374151] rh-flex-1", children: label }),
|
|
2218
|
+
showPercentage && /* @__PURE__ */ jsxs("span", { className: "rh-font-inter rh-font-normal rh-text-sm rh-leading-5 rh-text-[#9CA3AF] rh-tracking-[0.025em] rh-text-right", children: [
|
|
2219
|
+
clampedValue,
|
|
2220
|
+
"%"
|
|
2221
|
+
] })
|
|
2222
|
+
] }),
|
|
2309
2223
|
/* @__PURE__ */ jsx(
|
|
2310
2224
|
"div",
|
|
2311
2225
|
{
|
|
2312
|
-
className: "rh-
|
|
2226
|
+
className: "rh-w-full rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
|
|
2313
2227
|
style: { backgroundColor: bgColor || "#E5E7EB" },
|
|
2314
2228
|
children: /* @__PURE__ */ jsx(
|
|
2315
2229
|
"div",
|
|
@@ -2322,22 +2236,42 @@ var ProgressBar = forwardRef(
|
|
|
2322
2236
|
}
|
|
2323
2237
|
)
|
|
2324
2238
|
}
|
|
2325
|
-
),
|
|
2326
|
-
showPercentage && /* @__PURE__ */ jsxs(
|
|
2327
|
-
"span",
|
|
2328
|
-
{
|
|
2329
|
-
className: "rh-font-inter rh-font-normal rh-text-sm rh-leading-5 rh-text-[#9CA3AF] rh-tracking-[0.025em] rh-text-right rh-min-w-[40px]",
|
|
2330
|
-
children: [
|
|
2331
|
-
clampedValue,
|
|
2332
|
-
"%"
|
|
2333
|
-
]
|
|
2334
|
-
}
|
|
2335
2239
|
)
|
|
2336
2240
|
]
|
|
2337
2241
|
}
|
|
2338
2242
|
);
|
|
2339
2243
|
}
|
|
2340
|
-
|
|
2244
|
+
return /* @__PURE__ */ jsxs(
|
|
2245
|
+
"div",
|
|
2246
|
+
{
|
|
2247
|
+
ref,
|
|
2248
|
+
className: ["rh-flex rh-flex-row rh-items-center rh-gap-2 rh-font-body", className].filter(Boolean).join(" "),
|
|
2249
|
+
children: [
|
|
2250
|
+
/* @__PURE__ */ jsx(
|
|
2251
|
+
"div",
|
|
2252
|
+
{
|
|
2253
|
+
className: "rh-flex-1 rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
|
|
2254
|
+
style: { backgroundColor: bgColor || "#E5E7EB" },
|
|
2255
|
+
children: /* @__PURE__ */ jsx(
|
|
2256
|
+
"div",
|
|
2257
|
+
{
|
|
2258
|
+
className: "rh-h-full rh-rounded-[40px] rh-transition-all rh-duration-300",
|
|
2259
|
+
style: {
|
|
2260
|
+
width: `${clampedValue}%`,
|
|
2261
|
+
backgroundColor: barColor || "#538CC6"
|
|
2262
|
+
}
|
|
2263
|
+
}
|
|
2264
|
+
)
|
|
2265
|
+
}
|
|
2266
|
+
),
|
|
2267
|
+
showPercentage && /* @__PURE__ */ jsxs("span", { className: "rh-font-inter rh-font-normal rh-text-sm rh-leading-5 rh-text-[#9CA3AF] rh-tracking-[0.025em] rh-text-right rh-min-w-[40px]", children: [
|
|
2268
|
+
clampedValue,
|
|
2269
|
+
"%"
|
|
2270
|
+
] })
|
|
2271
|
+
]
|
|
2272
|
+
}
|
|
2273
|
+
);
|
|
2274
|
+
});
|
|
2341
2275
|
var PRESET_COLORS4 = /* @__PURE__ */ new Set([
|
|
2342
2276
|
"primary",
|
|
2343
2277
|
"secondary",
|
|
@@ -2465,7 +2399,7 @@ var Card = forwardRef(function Card2({
|
|
|
2465
2399
|
tabIndex: isInteractive ? 0 : void 0,
|
|
2466
2400
|
"aria-disabled": disabled || void 0,
|
|
2467
2401
|
className: [
|
|
2468
|
-
"rh-font-
|
|
2402
|
+
"rh-font-body rh-transition-all rh-duration-150",
|
|
2469
2403
|
variantClasses3[variant],
|
|
2470
2404
|
radiusClasses7[radius],
|
|
2471
2405
|
paddingClasses[padding],
|
|
@@ -2654,10 +2588,7 @@ function TableInner({
|
|
|
2654
2588
|
"table",
|
|
2655
2589
|
{
|
|
2656
2590
|
ref,
|
|
2657
|
-
className: [
|
|
2658
|
-
"rh-w-full rh-border-collapse rh-font-sans",
|
|
2659
|
-
className
|
|
2660
|
-
].filter(Boolean).join(" "),
|
|
2591
|
+
className: ["rh-w-full rh-border-collapse rh-font-body", className].filter(Boolean).join(" "),
|
|
2661
2592
|
...rest,
|
|
2662
2593
|
children: [
|
|
2663
2594
|
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "rh-border-b rh-border-border", style: headerStyle, children: columns.map((column) => /* @__PURE__ */ jsx(
|