@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.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-sans",
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-sans", wrapperClassName].filter(Boolean).join(" "),
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-sans",
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-display rh-select-none",
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
- function Select2(props, ref) {
1235
- const {
1236
- options,
1237
- label,
1238
- subtitle,
1239
- placeholder = "Select",
1240
- status = "default",
1241
- size = "md",
1242
- radius = "xs",
1243
- helperText,
1244
- disabled = false,
1245
- className = "",
1246
- wrapperClassName = "",
1247
- multiple = false
1248
- } = props;
1249
- const triggerId = React8.useId();
1250
- const listboxId = React8.useId();
1251
- const helperId = React8.useId();
1252
- const [isOpen, setIsOpen] = React8.useState(false);
1253
- const [activeIndex, setActiveIndex] = React8.useState(-1);
1254
- const wrapperRef = React8.useRef(null);
1255
- const innerRef = React8.useRef(null);
1256
- const listboxRef = React8.useRef(null);
1257
- React8.useImperativeHandle(ref, () => innerRef.current);
1258
- const [internalValue, setInternalValue] = React8.useState(() => {
1259
- if (props.defaultValue !== void 0) {
1260
- return Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue];
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
- return [];
1263
- });
1264
- const isControlled = props.value !== void 0;
1265
- const selectedValues = isControlled ? Array.isArray(props.value) ? props.value : props.value !== void 0 ? [props.value] : [] : internalValue;
1266
- const enabledOptions = options.filter((o) => !o.disabled);
1267
- const handleSelect = (optionValue) => {
1268
- if (multiple) {
1269
- const next = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
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
- const displayText = React8.useMemo(() => {
1281
- if (selectedValues.length === 0) return null;
1282
- if (!multiple) {
1283
- return options.find((o) => o.value === selectedValues[0])?.label ?? null;
1284
- }
1285
- const selectedLabels = selectedValues.map((v) => options.find((o) => o.value === v)?.label).filter(Boolean);
1286
- if (selectedLabels.length === 0) return null;
1287
- if (selectedLabels.length === 1) return selectedLabels[0];
1288
- return `${selectedLabels.length} selected`;
1289
- }, [selectedValues, options, multiple]);
1290
- React8.useEffect(() => {
1291
- if (!isOpen) return;
1292
- const handleClickOutside = (e) => {
1293
- if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
1294
- setIsOpen(false);
1295
- }
1296
- };
1297
- document.addEventListener("mousedown", handleClickOutside);
1298
- return () => document.removeEventListener("mousedown", handleClickOutside);
1299
- }, [isOpen]);
1300
- React8.useEffect(() => {
1301
- if (!isOpen) return;
1302
- const handleEscape = (e) => {
1303
- if (e.key === "Escape") {
1304
- setIsOpen(false);
1305
- innerRef.current?.focus();
1306
- }
1307
- };
1308
- document.addEventListener("keydown", handleEscape);
1309
- return () => document.removeEventListener("keydown", handleEscape);
1310
- }, [isOpen]);
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
- case "Enter":
1364
- case " ": {
1365
- e.preventDefault();
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
- break;
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
- case "Home": {
1374
- e.preventDefault();
1375
- if (isOpen) {
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
- break;
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
- case "End": {
1382
- e.preventDefault();
1383
- if (isOpen) {
1384
- const idx = enabledOptions.length > 0 ? options.indexOf(enabledOptions[enabledOptions.length - 1]) : options.length - 1;
1385
- setActiveIndex(idx);
1386
- }
1387
- break;
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
- case "Tab": {
1390
- if (isOpen) setIsOpen(false);
1391
- break;
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
- return /* @__PURE__ */ jsxs(
1396
- "div",
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
- function TagInput2({
1989
- label,
1990
- subtitle,
1991
- options = [],
1992
- value = [],
1993
- onChange,
1994
- placeholder,
1995
- status = "default",
1996
- size = "md",
1997
- radius = "md",
1998
- helperText,
1999
- disabled,
2000
- className = "",
2001
- wrapperClassName = ""
2002
- }, ref) {
2003
- const inputId = React8.useId();
2004
- const [isOpen, setIsOpen] = useState(false);
2005
- const containerRef = useRef(null);
2006
- useEffect(() => {
2007
- const handleClickOutside = (event) => {
2008
- if (containerRef.current && !containerRef.current.contains(event.target)) {
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
- const handleAddClick = () => {
2029
- if (disabled) return;
2030
- setIsOpen(!isOpen);
2031
- };
2032
- return /* @__PURE__ */ jsxs(
2033
- "div",
2034
- {
2035
- ref: (node) => {
2036
- if (typeof ref === "function") ref(node);
2037
- else if (ref) ref.current = node;
2038
- containerRef.current = node;
2039
- },
2040
- className: [
2041
- "rh-flex rh-flex-col rh-gap-2 rh-font-sans rh-relative",
2042
- wrapperClassName
2043
- ].filter(Boolean).join(" "),
2044
- children: [
2045
- label && /* @__PURE__ */ jsxs(
2046
- "label",
2047
- {
2048
- htmlFor: inputId,
2049
- className: "rh-flex rh-items-baseline rh-gap-1",
2050
- children: [
2051
- /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-semibold rh-text-text", children: label }),
2052
- subtitle && /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
2053
- ]
2054
- }
2055
- ),
2056
- /* @__PURE__ */ jsxs(
2057
- "div",
2058
- {
2059
- onClick: disabled ? void 0 : handleAddClick,
2060
- className: [
2061
- "rh-flex rh-flex-row rh-items-center rh-justify-between rh-gap-2",
2062
- "rh-border rh-bg-surface rh-font-sans",
2063
- "rh-transition-colors rh-duration-150",
2064
- statusClasses3[status],
2065
- radiusClasses5[radius],
2066
- sizeClasses9[size],
2067
- disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "rh-cursor-pointer",
2068
- className
2069
- ].filter(Boolean).join(" "),
2070
- children: [
2071
- /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-flex-row rh-flex-wrap rh-items-center rh-gap-2 rh-flex-1", children: [
2072
- value.length === 0 && placeholder && /* @__PURE__ */ jsx("span", { className: "rh-text-text-muted", children: placeholder }),
2073
- value.map((tag) => /* @__PURE__ */ jsxs(
2074
- "div",
2075
- {
2076
- className: [
2077
- "rh-inline-flex rh-items-center rh-justify-center rh-gap-1",
2078
- "rh-bg-gray-200 rh-border rh-border-gray-200 rh-rounded-[4px]",
2079
- tagSizeClasses[size]
2080
- ].join(" "),
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-w-full rh-flex rh-items-center rh-justify-between",
2182
- "rh-px-3 rh-py-3 rh-text-left",
2183
- "rh-border-b rh-border-border/50 last:rh-border-b-0",
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-text-sm rh-font-normal", children: option.label }),
2051
+ /* @__PURE__ */ jsx("span", { className: "rh-font-semibold rh-text-gray-700", children: tag.label }),
2189
2052
  /* @__PURE__ */ jsx(
2190
- "span",
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-w-5 rh-h-5 rh-rounded rh-border-2 rh-flex rh-items-center rh-justify-center",
2194
- isSelected ? "rh-bg-primary rh-border-primary" : "rh-bg-white rh-border-gray-300"
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
- children: isSelected && /* @__PURE__ */ jsx(
2068
+ "aria-label": `Remover ${tag.label}`,
2069
+ children: /* @__PURE__ */ jsx(
2197
2070
  "svg",
2198
2071
  {
2199
- viewBox: "0 0 12 12",
2072
+ viewBox: "0 0 8 8",
2200
2073
  fill: "none",
2201
2074
  xmlns: "http://www.w3.org/2000/svg",
2202
- className: "rh-w-3 rh-h-3",
2075
+ className: "rh-w-[8px] rh-h-[8px]",
2203
2076
  children: /* @__PURE__ */ jsx(
2204
2077
  "path",
2205
2078
  {
2206
- d: "M2 6L5 9L10 3",
2207
- stroke: "white",
2208
- strokeWidth: "2",
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
- ) }, option.value);
2220
- }) })
2221
- }
2222
- ),
2223
- helperText && /* @__PURE__ */ jsx(
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
- className: "rh-font-sora rh-font-bold rh-text-base rh-leading-6 rh-text-[#374151] rh-flex-1",
2265
- children: label
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
- showPercentage && /* @__PURE__ */ jsxs(
2269
- "span",
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
- className: "rh-font-inter rh-font-normal rh-text-sm rh-leading-5 rh-text-[#9CA3AF] rh-tracking-[0.025em] rh-text-right",
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
- clampedValue,
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
- /* @__PURE__ */ jsx(
2280
- "div",
2281
- {
2282
- className: "rh-w-full rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
2283
- style: { backgroundColor: bgColor || "#E5E7EB" },
2284
- children: /* @__PURE__ */ jsx(
2285
- "div",
2286
- {
2287
- className: "rh-h-full rh-rounded-[40px] rh-transition-all rh-duration-300",
2288
- style: {
2289
- width: `${clampedValue}%`,
2290
- backgroundColor: barColor || "#538CC6"
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-flex-1 rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
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-sans rh-transition-all rh-duration-150",
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(