@khipu/design-system 0.2.0-alpha.44 → 0.2.0-alpha.46
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/beercss/khipu-beercss.css +69 -1
- package/dist/beercss/khipu-beercss.min.css +1 -1
- package/dist/beercss/khipu-beercss.scoped.css +69 -1
- package/dist/beercss/khipu-beercss.scoped.min.css +1 -1
- package/dist/beercss/metadata.json +5 -5
- package/dist/index.d.mts +18 -1
- package/dist/index.d.ts +18 -1
- package/dist/index.js +324 -286
- package/dist/index.mjs +306 -269
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -49,6 +49,7 @@ __export(index_exports, {
|
|
|
49
49
|
KdsCardSelector: () => KdsCardSelector,
|
|
50
50
|
KdsCheckbox: () => KdsCheckbox,
|
|
51
51
|
KdsChip: () => KdsChip,
|
|
52
|
+
KdsCopyButton: () => KdsCopyButton,
|
|
52
53
|
KdsCopyRow: () => KdsCopyRow,
|
|
53
54
|
KdsCopyableTable: () => KdsCopyableTable,
|
|
54
55
|
KdsCountdown: () => KdsCountdown,
|
|
@@ -1305,34 +1306,90 @@ var KdsSecureLoader = (0, import_react6.forwardRef)(
|
|
|
1305
1306
|
message && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "kds-secure-loader-message", children: message })
|
|
1306
1307
|
] }),
|
|
1307
1308
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "kds-secure-loader-spinner", children: [
|
|
1308
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1309
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1310
|
+
"svg",
|
|
1311
|
+
{
|
|
1312
|
+
className: "kds-secure-loader-ring",
|
|
1313
|
+
viewBox: "22 22 44 44",
|
|
1314
|
+
width: "100",
|
|
1315
|
+
height: "100",
|
|
1316
|
+
fill: "none",
|
|
1317
|
+
"aria-hidden": "true",
|
|
1318
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "44", cy: "44", r: "20.2", fill: "none" })
|
|
1319
|
+
}
|
|
1320
|
+
),
|
|
1309
1321
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("i", { className: "material-symbols-outlined kds-secure-loader-lock", "aria-hidden": "true", children: "lock" })
|
|
1310
1322
|
] })
|
|
1311
1323
|
] })
|
|
1312
1324
|
);
|
|
1313
1325
|
KdsSecureLoader.displayName = "KdsSecureLoader";
|
|
1314
1326
|
|
|
1315
|
-
// src/components/core/
|
|
1327
|
+
// src/components/core/KdsCopyButton/KdsCopyButton.tsx
|
|
1328
|
+
var import_react8 = require("react");
|
|
1329
|
+
|
|
1330
|
+
// src/components/core/hooks/useCopyToClipboard.ts
|
|
1316
1331
|
var import_react7 = require("react");
|
|
1332
|
+
function useCopyToClipboard(resetMs = 1200) {
|
|
1333
|
+
const [copied, setCopied] = (0, import_react7.useState)(false);
|
|
1334
|
+
const copy = (0, import_react7.useCallback)(
|
|
1335
|
+
async (text) => {
|
|
1336
|
+
try {
|
|
1337
|
+
await navigator.clipboard.writeText(text);
|
|
1338
|
+
setCopied(true);
|
|
1339
|
+
setTimeout(() => setCopied(false), resetMs);
|
|
1340
|
+
} catch {
|
|
1341
|
+
}
|
|
1342
|
+
},
|
|
1343
|
+
[resetMs]
|
|
1344
|
+
);
|
|
1345
|
+
return { copied, copy };
|
|
1346
|
+
}
|
|
1347
|
+
|
|
1348
|
+
// src/components/core/KdsCopyButton/KdsCopyButton.tsx
|
|
1317
1349
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1318
|
-
var
|
|
1319
|
-
({ value,
|
|
1350
|
+
var KdsCopyButton = (0, import_react8.forwardRef)(
|
|
1351
|
+
({ value, copiedText = "Copiado", className, ...props }, ref) => {
|
|
1352
|
+
const { copied, copy } = useCopyToClipboard();
|
|
1353
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1354
|
+
"button",
|
|
1355
|
+
{
|
|
1356
|
+
ref,
|
|
1357
|
+
type: "button",
|
|
1358
|
+
className: (0, import_clsx.clsx)("kds-copy-button", copied && "copied", className),
|
|
1359
|
+
onClick: () => copy(value),
|
|
1360
|
+
"aria-label": `Copiar: ${value}`,
|
|
1361
|
+
...props,
|
|
1362
|
+
children: [
|
|
1363
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "kds-copy-button-value", children: copied ? copiedText : value }),
|
|
1364
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: copied ? "check" : "content_copy" })
|
|
1365
|
+
]
|
|
1366
|
+
}
|
|
1367
|
+
);
|
|
1368
|
+
}
|
|
1369
|
+
);
|
|
1370
|
+
KdsCopyButton.displayName = "KdsCopyButton";
|
|
1371
|
+
|
|
1372
|
+
// src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
|
|
1373
|
+
var import_react9 = require("react");
|
|
1374
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1375
|
+
var KdsLinearProgress = (0, import_react9.forwardRef)(
|
|
1376
|
+
({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("progress", { ref, className: (0, import_clsx.clsx)("kds-progress", className), value, max, ...props })
|
|
1320
1377
|
);
|
|
1321
1378
|
KdsLinearProgress.displayName = "KdsLinearProgress";
|
|
1322
1379
|
|
|
1323
1380
|
// src/components/core/KdsAlert/KdsAlert.tsx
|
|
1324
|
-
var
|
|
1325
|
-
var
|
|
1381
|
+
var import_react10 = require("react");
|
|
1382
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1326
1383
|
var DEFAULT_ICONS = {
|
|
1327
1384
|
success: "check_circle",
|
|
1328
1385
|
info: "info",
|
|
1329
1386
|
warning: "warning",
|
|
1330
1387
|
error: "error"
|
|
1331
1388
|
};
|
|
1332
|
-
var KdsAlert = (0,
|
|
1389
|
+
var KdsAlert = (0, import_react10.forwardRef)(
|
|
1333
1390
|
({ severity, title, icon, inline, onClose, children, className, ...props }, ref) => {
|
|
1334
1391
|
const resolvedIcon = icon === false ? null : typeof icon === "string" ? icon : DEFAULT_ICONS[severity];
|
|
1335
|
-
return /* @__PURE__ */ (0,
|
|
1392
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1336
1393
|
"div",
|
|
1337
1394
|
{
|
|
1338
1395
|
ref,
|
|
@@ -1340,19 +1397,19 @@ var KdsAlert = (0, import_react8.forwardRef)(
|
|
|
1340
1397
|
className: (0, import_clsx.clsx)("kds-alert", `kds-${severity}`, inline && "kds-alert-inline", className),
|
|
1341
1398
|
...props,
|
|
1342
1399
|
children: [
|
|
1343
|
-
resolvedIcon && /* @__PURE__ */ (0,
|
|
1344
|
-
/* @__PURE__ */ (0,
|
|
1345
|
-
title && /* @__PURE__ */ (0,
|
|
1346
|
-
/* @__PURE__ */ (0,
|
|
1400
|
+
resolvedIcon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "kds-alert-icon", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("i", { className: "material-symbols-outlined", children: resolvedIcon }) }),
|
|
1401
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "kds-alert-content", children: [
|
|
1402
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "kds-alert-title", children: title }),
|
|
1403
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "kds-alert-description", children })
|
|
1347
1404
|
] }),
|
|
1348
|
-
onClose && /* @__PURE__ */ (0,
|
|
1405
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1349
1406
|
"button",
|
|
1350
1407
|
{
|
|
1351
1408
|
type: "button",
|
|
1352
1409
|
className: "kds-alert-close",
|
|
1353
1410
|
onClick: onClose,
|
|
1354
1411
|
"aria-label": "Cerrar",
|
|
1355
|
-
children: /* @__PURE__ */ (0,
|
|
1412
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("i", { className: "material-symbols-outlined", children: "close" })
|
|
1356
1413
|
}
|
|
1357
1414
|
)
|
|
1358
1415
|
]
|
|
@@ -1363,8 +1420,8 @@ var KdsAlert = (0, import_react8.forwardRef)(
|
|
|
1363
1420
|
KdsAlert.displayName = "KdsAlert";
|
|
1364
1421
|
|
|
1365
1422
|
// src/components/core/KdsTypography/KdsTypography.tsx
|
|
1366
|
-
var
|
|
1367
|
-
var
|
|
1423
|
+
var import_react11 = require("react");
|
|
1424
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1368
1425
|
var variantTag = {
|
|
1369
1426
|
display1: "h1",
|
|
1370
1427
|
display2: "h2",
|
|
@@ -1379,10 +1436,10 @@ var variantTag = {
|
|
|
1379
1436
|
muted: "p",
|
|
1380
1437
|
link: "span"
|
|
1381
1438
|
};
|
|
1382
|
-
var KdsTypography = (0,
|
|
1439
|
+
var KdsTypography = (0, import_react11.forwardRef)(
|
|
1383
1440
|
({ variant = "body", color, as, children, className, ...props }, ref) => {
|
|
1384
1441
|
const Tag = as || variantTag[variant];
|
|
1385
|
-
return /* @__PURE__ */ (0,
|
|
1442
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1386
1443
|
Tag,
|
|
1387
1444
|
{
|
|
1388
1445
|
ref,
|
|
@@ -1400,12 +1457,12 @@ var KdsTypography = (0, import_react9.forwardRef)(
|
|
|
1400
1457
|
KdsTypography.displayName = "KdsTypography";
|
|
1401
1458
|
|
|
1402
1459
|
// src/components/core/KdsTabs/KdsTabs.tsx
|
|
1403
|
-
var
|
|
1460
|
+
var import_react13 = __toESM(require("react"));
|
|
1404
1461
|
|
|
1405
1462
|
// src/components/core/hooks/useTabsKeyboard.ts
|
|
1406
|
-
var
|
|
1463
|
+
var import_react12 = require("react");
|
|
1407
1464
|
function useTabsKeyboard(tabCount, activeIndex, onChange) {
|
|
1408
|
-
const onKeyDown = (0,
|
|
1465
|
+
const onKeyDown = (0, import_react12.useCallback)(
|
|
1409
1466
|
(e) => {
|
|
1410
1467
|
let next = activeIndex;
|
|
1411
1468
|
if (e.key === "ArrowRight") next = (activeIndex + 1) % tabCount;
|
|
@@ -1425,12 +1482,12 @@ function useTabsKeyboard(tabCount, activeIndex, onChange) {
|
|
|
1425
1482
|
}
|
|
1426
1483
|
|
|
1427
1484
|
// src/components/core/KdsTabs/KdsTabs.tsx
|
|
1428
|
-
var
|
|
1429
|
-
var KdsTabs = (0,
|
|
1485
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1486
|
+
var KdsTabs = (0, import_react13.forwardRef)(
|
|
1430
1487
|
({ activeIndex, onChange, children, className, style, ...props }, ref) => {
|
|
1431
|
-
const tabCount =
|
|
1488
|
+
const tabCount = import_react13.Children.count(children);
|
|
1432
1489
|
const { onKeyDown } = useTabsKeyboard(tabCount, activeIndex, onChange);
|
|
1433
|
-
const mergedStyle = (0,
|
|
1490
|
+
const mergedStyle = (0, import_react13.useMemo)(
|
|
1434
1491
|
() => ({
|
|
1435
1492
|
...style,
|
|
1436
1493
|
"--_tab-count": tabCount,
|
|
@@ -1438,7 +1495,7 @@ var KdsTabs = (0, import_react11.forwardRef)(
|
|
|
1438
1495
|
}),
|
|
1439
1496
|
[tabCount, activeIndex, style]
|
|
1440
1497
|
);
|
|
1441
|
-
return /* @__PURE__ */ (0,
|
|
1498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1442
1499
|
"div",
|
|
1443
1500
|
{
|
|
1444
1501
|
ref,
|
|
@@ -1447,9 +1504,9 @@ var KdsTabs = (0, import_react11.forwardRef)(
|
|
|
1447
1504
|
style: mergedStyle,
|
|
1448
1505
|
onKeyDown,
|
|
1449
1506
|
...props,
|
|
1450
|
-
children:
|
|
1451
|
-
if (!
|
|
1452
|
-
return
|
|
1507
|
+
children: import_react13.Children.map(children, (child, i) => {
|
|
1508
|
+
if (!import_react13.default.isValidElement(child)) return child;
|
|
1509
|
+
return import_react13.default.cloneElement(child, {
|
|
1453
1510
|
_active: i === activeIndex,
|
|
1454
1511
|
_onClick: () => onChange(i)
|
|
1455
1512
|
});
|
|
@@ -1459,8 +1516,8 @@ var KdsTabs = (0, import_react11.forwardRef)(
|
|
|
1459
1516
|
}
|
|
1460
1517
|
);
|
|
1461
1518
|
KdsTabs.displayName = "KdsTabs";
|
|
1462
|
-
var KdsTab = (0,
|
|
1463
|
-
({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1519
|
+
var KdsTab = (0, import_react13.forwardRef)(
|
|
1520
|
+
({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1464
1521
|
"button",
|
|
1465
1522
|
{
|
|
1466
1523
|
ref,
|
|
@@ -1476,8 +1533,8 @@ var KdsTab = (0, import_react11.forwardRef)(
|
|
|
1476
1533
|
)
|
|
1477
1534
|
);
|
|
1478
1535
|
KdsTab.displayName = "KdsTab";
|
|
1479
|
-
var KdsTabPanel = (0,
|
|
1480
|
-
({ active, children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1536
|
+
var KdsTabPanel = (0, import_react13.forwardRef)(
|
|
1537
|
+
({ active, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1481
1538
|
"div",
|
|
1482
1539
|
{
|
|
1483
1540
|
ref,
|
|
@@ -1492,13 +1549,13 @@ var KdsTabPanel = (0, import_react11.forwardRef)(
|
|
|
1492
1549
|
KdsTabPanel.displayName = "KdsTabPanel";
|
|
1493
1550
|
|
|
1494
1551
|
// src/components/core/KdsRadioGroup/KdsRadioGroup.tsx
|
|
1495
|
-
var
|
|
1496
|
-
var
|
|
1497
|
-
var KdsRadioGroup = (0,
|
|
1498
|
-
({ label, name, options, value, onChange, size, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1499
|
-
label && /* @__PURE__ */ (0,
|
|
1500
|
-
options.map((opt) => /* @__PURE__ */ (0,
|
|
1501
|
-
/* @__PURE__ */ (0,
|
|
1552
|
+
var import_react14 = require("react");
|
|
1553
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1554
|
+
var KdsRadioGroup = (0, import_react14.forwardRef)(
|
|
1555
|
+
({ label, name, options, value, onChange, size, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("fieldset", { ref, className: (0, import_clsx.clsx)("kds-radio-group", className), ...props, children: [
|
|
1556
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("legend", { children: label }),
|
|
1557
|
+
options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: (0, import_clsx.clsx)("radio", size), children: [
|
|
1558
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1502
1559
|
"input",
|
|
1503
1560
|
{
|
|
1504
1561
|
type: "radio",
|
|
@@ -1509,16 +1566,16 @@ var KdsRadioGroup = (0, import_react12.forwardRef)(
|
|
|
1509
1566
|
onChange: () => onChange?.(opt.value)
|
|
1510
1567
|
}
|
|
1511
1568
|
),
|
|
1512
|
-
/* @__PURE__ */ (0,
|
|
1569
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: opt.label })
|
|
1513
1570
|
] }, opt.value))
|
|
1514
1571
|
] })
|
|
1515
1572
|
);
|
|
1516
1573
|
KdsRadioGroup.displayName = "KdsRadioGroup";
|
|
1517
1574
|
|
|
1518
1575
|
// src/components/core/KdsSelect/KdsSelect.tsx
|
|
1519
|
-
var
|
|
1520
|
-
var
|
|
1521
|
-
var KdsSelect = (0,
|
|
1576
|
+
var import_react15 = require("react");
|
|
1577
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1578
|
+
var KdsSelect = (0, import_react15.forwardRef)(
|
|
1522
1579
|
({
|
|
1523
1580
|
label,
|
|
1524
1581
|
options,
|
|
@@ -1534,7 +1591,7 @@ var KdsSelect = (0, import_react13.forwardRef)(
|
|
|
1534
1591
|
...props
|
|
1535
1592
|
}, ref) => {
|
|
1536
1593
|
const fieldId = id || `kds-select-${label.toLowerCase().replace(/\s+/g, "-")}`;
|
|
1537
|
-
return /* @__PURE__ */ (0,
|
|
1594
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1538
1595
|
"div",
|
|
1539
1596
|
{
|
|
1540
1597
|
className: (0, import_clsx.clsx)(
|
|
@@ -1547,8 +1604,8 @@ var KdsSelect = (0, import_react13.forwardRef)(
|
|
|
1547
1604
|
className
|
|
1548
1605
|
),
|
|
1549
1606
|
children: [
|
|
1550
|
-
prefixIcon && /* @__PURE__ */ (0,
|
|
1551
|
-
/* @__PURE__ */ (0,
|
|
1607
|
+
prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("i", { className: "material-symbols-outlined", children: prefixIcon }),
|
|
1608
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1552
1609
|
"select",
|
|
1553
1610
|
{
|
|
1554
1611
|
ref,
|
|
@@ -1557,16 +1614,16 @@ var KdsSelect = (0, import_react13.forwardRef)(
|
|
|
1557
1614
|
required,
|
|
1558
1615
|
...props,
|
|
1559
1616
|
children: [
|
|
1560
|
-
placeholder !== void 0 && /* @__PURE__ */ (0,
|
|
1561
|
-
options.map((opt) => /* @__PURE__ */ (0,
|
|
1617
|
+
placeholder !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "", children: placeholder }),
|
|
1618
|
+
options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
|
|
1562
1619
|
]
|
|
1563
1620
|
}
|
|
1564
1621
|
),
|
|
1565
|
-
/* @__PURE__ */ (0,
|
|
1622
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { htmlFor: fieldId, children: [
|
|
1566
1623
|
label,
|
|
1567
1624
|
required && " *"
|
|
1568
1625
|
] }),
|
|
1569
|
-
helperText && /* @__PURE__ */ (0,
|
|
1626
|
+
helperText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "helper", children: helperText })
|
|
1570
1627
|
]
|
|
1571
1628
|
}
|
|
1572
1629
|
);
|
|
@@ -1575,13 +1632,13 @@ var KdsSelect = (0, import_react13.forwardRef)(
|
|
|
1575
1632
|
KdsSelect.displayName = "KdsSelect";
|
|
1576
1633
|
|
|
1577
1634
|
// src/components/core/KdsChip/KdsChip.tsx
|
|
1578
|
-
var
|
|
1579
|
-
var
|
|
1580
|
-
var KdsChip = (0,
|
|
1581
|
-
({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1582
|
-
icon && /* @__PURE__ */ (0,
|
|
1583
|
-
/* @__PURE__ */ (0,
|
|
1584
|
-
onDelete && /* @__PURE__ */ (0,
|
|
1635
|
+
var import_react16 = require("react");
|
|
1636
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1637
|
+
var KdsChip = (0, import_react16.forwardRef)(
|
|
1638
|
+
({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { ref, className: (0, import_clsx.clsx)("kds-badge", color, className), ...props, children: [
|
|
1639
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", { className: "material-symbols-outlined", children: icon }),
|
|
1640
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children }),
|
|
1641
|
+
onDelete && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1585
1642
|
"button",
|
|
1586
1643
|
{
|
|
1587
1644
|
type: "button",
|
|
@@ -1591,7 +1648,7 @@ var KdsChip = (0, import_react14.forwardRef)(
|
|
|
1591
1648
|
onDelete();
|
|
1592
1649
|
},
|
|
1593
1650
|
"aria-label": "Eliminar",
|
|
1594
|
-
children: /* @__PURE__ */ (0,
|
|
1651
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", { className: "material-symbols-outlined", children: "close" })
|
|
1595
1652
|
}
|
|
1596
1653
|
)
|
|
1597
1654
|
] })
|
|
@@ -1599,15 +1656,15 @@ var KdsChip = (0, import_react14.forwardRef)(
|
|
|
1599
1656
|
KdsChip.displayName = "KdsChip";
|
|
1600
1657
|
|
|
1601
1658
|
// src/components/core/KdsSnackbar/KdsSnackbar.tsx
|
|
1602
|
-
var
|
|
1659
|
+
var import_react18 = require("react");
|
|
1603
1660
|
|
|
1604
1661
|
// src/components/core/hooks/useAutoHide.ts
|
|
1605
|
-
var
|
|
1662
|
+
var import_react17 = require("react");
|
|
1606
1663
|
function useAutoHide(durationMs, onHide) {
|
|
1607
|
-
const [visible, setVisible] = (0,
|
|
1608
|
-
const onHideRef = (0,
|
|
1664
|
+
const [visible, setVisible] = (0, import_react17.useState)(true);
|
|
1665
|
+
const onHideRef = (0, import_react17.useRef)(onHide);
|
|
1609
1666
|
onHideRef.current = onHide;
|
|
1610
|
-
(0,
|
|
1667
|
+
(0, import_react17.useEffect)(() => {
|
|
1611
1668
|
if (durationMs <= 0) return;
|
|
1612
1669
|
const timer = setTimeout(() => {
|
|
1613
1670
|
setVisible(false);
|
|
@@ -1619,13 +1676,13 @@ function useAutoHide(durationMs, onHide) {
|
|
|
1619
1676
|
}
|
|
1620
1677
|
|
|
1621
1678
|
// src/components/core/KdsSnackbar/KdsSnackbar.tsx
|
|
1622
|
-
var
|
|
1679
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1623
1680
|
var DEFAULT_ICONS2 = {
|
|
1624
1681
|
info: "info",
|
|
1625
1682
|
success: "check_circle",
|
|
1626
1683
|
error: "error"
|
|
1627
1684
|
};
|
|
1628
|
-
var KdsSnackbar = (0,
|
|
1685
|
+
var KdsSnackbar = (0, import_react18.forwardRef)(
|
|
1629
1686
|
({
|
|
1630
1687
|
message,
|
|
1631
1688
|
type = "info",
|
|
@@ -1642,7 +1699,7 @@ var KdsSnackbar = (0, import_react16.forwardRef)(
|
|
|
1642
1699
|
if (!open || !visible) return null;
|
|
1643
1700
|
const resolvedIcon = icon === false ? null : icon ?? DEFAULT_ICONS2[type];
|
|
1644
1701
|
const mergedStyle = autoDismiss ? { ...style, ["--kds-snackbar-duration"]: `${duration}ms` } : style ?? {};
|
|
1645
|
-
return /* @__PURE__ */ (0,
|
|
1702
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1646
1703
|
"div",
|
|
1647
1704
|
{
|
|
1648
1705
|
ref,
|
|
@@ -1652,16 +1709,16 @@ var KdsSnackbar = (0, import_react16.forwardRef)(
|
|
|
1652
1709
|
style: mergedStyle,
|
|
1653
1710
|
...props,
|
|
1654
1711
|
children: [
|
|
1655
|
-
resolvedIcon && /* @__PURE__ */ (0,
|
|
1656
|
-
/* @__PURE__ */ (0,
|
|
1657
|
-
onClose && /* @__PURE__ */ (0,
|
|
1712
|
+
resolvedIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "material-symbols-outlined", children: resolvedIcon }),
|
|
1713
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "max", children: message }),
|
|
1714
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1658
1715
|
"button",
|
|
1659
1716
|
{
|
|
1660
1717
|
type: "button",
|
|
1661
1718
|
className: "kds-snackbar-close",
|
|
1662
1719
|
onClick: onClose,
|
|
1663
1720
|
"aria-label": "Cerrar",
|
|
1664
|
-
children: /* @__PURE__ */ (0,
|
|
1721
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "material-symbols-outlined", children: "close" })
|
|
1665
1722
|
}
|
|
1666
1723
|
)
|
|
1667
1724
|
]
|
|
@@ -1673,7 +1730,7 @@ KdsSnackbar.displayName = "KdsSnackbar";
|
|
|
1673
1730
|
|
|
1674
1731
|
// src/components/core/KdsTooltip/KdsTooltip.tsx
|
|
1675
1732
|
var Tooltip = __toESM(require("@radix-ui/react-tooltip"));
|
|
1676
|
-
var
|
|
1733
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1677
1734
|
function KdsTooltip({
|
|
1678
1735
|
content,
|
|
1679
1736
|
children,
|
|
@@ -1684,9 +1741,9 @@ function KdsTooltip({
|
|
|
1684
1741
|
onOpenChange,
|
|
1685
1742
|
delayDuration = 300
|
|
1686
1743
|
}) {
|
|
1687
|
-
return /* @__PURE__ */ (0,
|
|
1688
|
-
/* @__PURE__ */ (0,
|
|
1689
|
-
/* @__PURE__ */ (0,
|
|
1744
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Provider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
|
|
1745
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Trigger, { asChild: true, children }),
|
|
1746
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1690
1747
|
Tooltip.Content,
|
|
1691
1748
|
{
|
|
1692
1749
|
className: (0, import_clsx.clsx)("kds-tooltip", className),
|
|
@@ -1695,7 +1752,7 @@ function KdsTooltip({
|
|
|
1695
1752
|
collisionPadding: 8,
|
|
1696
1753
|
children: [
|
|
1697
1754
|
content,
|
|
1698
|
-
/* @__PURE__ */ (0,
|
|
1755
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Arrow, { className: "kds-tooltip-arrow", width: 10, height: 5 })
|
|
1699
1756
|
]
|
|
1700
1757
|
}
|
|
1701
1758
|
) })
|
|
@@ -1703,68 +1760,68 @@ function KdsTooltip({
|
|
|
1703
1760
|
}
|
|
1704
1761
|
|
|
1705
1762
|
// src/components/core/KdsAccordion/KdsAccordion.tsx
|
|
1706
|
-
var
|
|
1707
|
-
var
|
|
1708
|
-
var KdsAccordion = (0,
|
|
1709
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1763
|
+
var import_react19 = require("react");
|
|
1764
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1765
|
+
var KdsAccordion = (0, import_react19.forwardRef)(
|
|
1766
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("details", { ref, className: (0, import_clsx.clsx)("kds-accordion", className), ...props, children })
|
|
1710
1767
|
);
|
|
1711
1768
|
KdsAccordion.displayName = "KdsAccordion";
|
|
1712
|
-
var KdsAccordionSummary = (0,
|
|
1713
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1769
|
+
var KdsAccordionSummary = (0, import_react19.forwardRef)(
|
|
1770
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("summary", { ref, className: (0, import_clsx.clsx)("kds-accordion-summary", className), ...props, children: [
|
|
1714
1771
|
children,
|
|
1715
|
-
/* @__PURE__ */ (0,
|
|
1772
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("i", { className: "material-symbols-outlined", children: "expand_more" })
|
|
1716
1773
|
] })
|
|
1717
1774
|
);
|
|
1718
1775
|
KdsAccordionSummary.displayName = "KdsAccordionSummary";
|
|
1719
|
-
var KdsAccordionDetails = (0,
|
|
1720
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1776
|
+
var KdsAccordionDetails = (0, import_react19.forwardRef)(
|
|
1777
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-accordion-details", className), ...props, children })
|
|
1721
1778
|
);
|
|
1722
1779
|
KdsAccordionDetails.displayName = "KdsAccordionDetails";
|
|
1723
1780
|
|
|
1724
1781
|
// src/components/core/KdsDivider/KdsDivider.tsx
|
|
1725
|
-
var
|
|
1726
|
-
var
|
|
1727
|
-
var KdsDivider = (0,
|
|
1728
|
-
({ dashed, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1782
|
+
var import_react20 = require("react");
|
|
1783
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1784
|
+
var KdsDivider = (0, import_react20.forwardRef)(
|
|
1785
|
+
({ dashed, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("hr", { ref, className: (0, import_clsx.clsx)(dashed ? "kds-hr-dashed" : "kds-hr", className), ...props })
|
|
1729
1786
|
);
|
|
1730
1787
|
KdsDivider.displayName = "KdsDivider";
|
|
1731
1788
|
|
|
1732
1789
|
// src/components/core/KdsSectionNote/KdsSectionNote.tsx
|
|
1733
|
-
var
|
|
1734
|
-
var
|
|
1735
|
-
var KdsSectionNote = (0,
|
|
1736
|
-
({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1737
|
-
/* @__PURE__ */ (0,
|
|
1738
|
-
/* @__PURE__ */ (0,
|
|
1790
|
+
var import_react21 = require("react");
|
|
1791
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1792
|
+
var KdsSectionNote = (0, import_react21.forwardRef)(
|
|
1793
|
+
({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { ref, className: (0, import_clsx.clsx)("kds-section-note", className), ...props, children: [
|
|
1794
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("i", { className: "material-symbols-outlined", children: icon }),
|
|
1795
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children })
|
|
1739
1796
|
] })
|
|
1740
1797
|
);
|
|
1741
1798
|
KdsSectionNote.displayName = "KdsSectionNote";
|
|
1742
1799
|
|
|
1743
1800
|
// src/components/core/KdsStatusBlock/KdsStatusBlock.tsx
|
|
1744
|
-
var
|
|
1745
|
-
var
|
|
1746
|
-
var KdsStatusBlock = (0,
|
|
1747
|
-
({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1748
|
-
/* @__PURE__ */ (0,
|
|
1749
|
-
/* @__PURE__ */ (0,
|
|
1750
|
-
/* @__PURE__ */ (0,
|
|
1751
|
-
description && /* @__PURE__ */ (0,
|
|
1801
|
+
var import_react22 = require("react");
|
|
1802
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1803
|
+
var KdsStatusBlock = (0, import_react22.forwardRef)(
|
|
1804
|
+
({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-status-block", inline && "inline", className), "data-status": status, ...props, children: [
|
|
1805
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
1806
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
|
|
1807
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "kds-status-block-title", children: title }),
|
|
1808
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "kds-status-block-description", children: description })
|
|
1752
1809
|
] })
|
|
1753
1810
|
] })
|
|
1754
1811
|
);
|
|
1755
1812
|
KdsStatusBlock.displayName = "KdsStatusBlock";
|
|
1756
1813
|
|
|
1757
1814
|
// src/components/core/KdsStepper/KdsStepper.tsx
|
|
1758
|
-
var
|
|
1759
|
-
var
|
|
1760
|
-
var KdsStepper = (0,
|
|
1761
|
-
({ steps, current, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1815
|
+
var import_react23 = require("react");
|
|
1816
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1817
|
+
var KdsStepper = (0, import_react23.forwardRef)(
|
|
1818
|
+
({ steps, current, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-stepper", className), ...props, children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
1762
1819
|
"div",
|
|
1763
1820
|
{
|
|
1764
1821
|
className: (0, import_clsx.clsx)("kds-step", i < current && "completed", i === current && "current"),
|
|
1765
1822
|
children: [
|
|
1766
|
-
/* @__PURE__ */ (0,
|
|
1767
|
-
/* @__PURE__ */ (0,
|
|
1823
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "kds-step-indicator" }),
|
|
1824
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "kds-step-label", children: label })
|
|
1768
1825
|
]
|
|
1769
1826
|
},
|
|
1770
1827
|
`${i}-${label}`
|
|
@@ -1773,32 +1830,12 @@ var KdsStepper = (0, import_react21.forwardRef)(
|
|
|
1773
1830
|
KdsStepper.displayName = "KdsStepper";
|
|
1774
1831
|
|
|
1775
1832
|
// src/components/core/KdsCopyRow/KdsCopyRow.tsx
|
|
1776
|
-
var
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
var import_react22 = require("react");
|
|
1780
|
-
function useCopyToClipboard(resetMs = 1200) {
|
|
1781
|
-
const [copied, setCopied] = (0, import_react22.useState)(false);
|
|
1782
|
-
const copy = (0, import_react22.useCallback)(
|
|
1783
|
-
async (text) => {
|
|
1784
|
-
try {
|
|
1785
|
-
await navigator.clipboard.writeText(text);
|
|
1786
|
-
setCopied(true);
|
|
1787
|
-
setTimeout(() => setCopied(false), resetMs);
|
|
1788
|
-
} catch {
|
|
1789
|
-
}
|
|
1790
|
-
},
|
|
1791
|
-
[resetMs]
|
|
1792
|
-
);
|
|
1793
|
-
return { copied, copy };
|
|
1794
|
-
}
|
|
1795
|
-
|
|
1796
|
-
// src/components/core/KdsCopyRow/KdsCopyRow.tsx
|
|
1797
|
-
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1798
|
-
var KdsCopyRow = (0, import_react23.forwardRef)(
|
|
1833
|
+
var import_react24 = require("react");
|
|
1834
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1835
|
+
var KdsCopyRow = (0, import_react24.forwardRef)(
|
|
1799
1836
|
({ label, value, copiedText = "Copiado", className, ...props }, ref) => {
|
|
1800
1837
|
const { copied, copy } = useCopyToClipboard();
|
|
1801
|
-
return /* @__PURE__ */ (0,
|
|
1838
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1802
1839
|
"button",
|
|
1803
1840
|
{
|
|
1804
1841
|
ref,
|
|
@@ -1809,13 +1846,13 @@ var KdsCopyRow = (0, import_react23.forwardRef)(
|
|
|
1809
1846
|
"aria-label": `Copiar ${label}: ${value}`,
|
|
1810
1847
|
...props,
|
|
1811
1848
|
children: [
|
|
1812
|
-
/* @__PURE__ */ (0,
|
|
1813
|
-
/* @__PURE__ */ (0,
|
|
1814
|
-
/* @__PURE__ */ (0,
|
|
1815
|
-
/* @__PURE__ */ (0,
|
|
1849
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "content_copy" }),
|
|
1850
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
|
|
1851
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "kds-copy-row-label", children: label }),
|
|
1852
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "kds-copy-row-value", children: value })
|
|
1816
1853
|
] }),
|
|
1817
|
-
/* @__PURE__ */ (0,
|
|
1818
|
-
/* @__PURE__ */ (0,
|
|
1854
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "kds-copy-toast", "aria-hidden": "true", children: [
|
|
1855
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("i", { className: "material-symbols-outlined", children: "check_circle" }),
|
|
1819
1856
|
" ",
|
|
1820
1857
|
copiedText
|
|
1821
1858
|
] })
|
|
@@ -1827,8 +1864,8 @@ var KdsCopyRow = (0, import_react23.forwardRef)(
|
|
|
1827
1864
|
KdsCopyRow.displayName = "KdsCopyRow";
|
|
1828
1865
|
|
|
1829
1866
|
// src/components/core/KdsCopyableTable/KdsCopyableTable.tsx
|
|
1830
|
-
var
|
|
1831
|
-
var
|
|
1867
|
+
var import_react25 = require("react");
|
|
1868
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1832
1869
|
async function copyToClipboard(text) {
|
|
1833
1870
|
try {
|
|
1834
1871
|
if (navigator.clipboard?.writeText) {
|
|
@@ -1853,7 +1890,7 @@ async function copyToClipboard(text) {
|
|
|
1853
1890
|
}
|
|
1854
1891
|
}
|
|
1855
1892
|
var TRANSITION_MS = 300;
|
|
1856
|
-
var KdsCopyableTable = (0,
|
|
1893
|
+
var KdsCopyableTable = (0, import_react25.forwardRef)(
|
|
1857
1894
|
({
|
|
1858
1895
|
rows,
|
|
1859
1896
|
copyAllLabel = "Copiar todos los datos",
|
|
@@ -1862,12 +1899,12 @@ var KdsCopyableTable = (0, import_react24.forwardRef)(
|
|
|
1862
1899
|
className,
|
|
1863
1900
|
...props
|
|
1864
1901
|
}, ref) => {
|
|
1865
|
-
const copiedTimers = (0,
|
|
1866
|
-
const settlingTimers = (0,
|
|
1867
|
-
const [copiedRows, setCopiedRows] = (0,
|
|
1868
|
-
const [settlingRows, setSettlingRows] = (0,
|
|
1869
|
-
const [allCopied, setAllCopied] = (0,
|
|
1870
|
-
const markCopied = (0,
|
|
1902
|
+
const copiedTimers = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
|
|
1903
|
+
const settlingTimers = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
|
|
1904
|
+
const [copiedRows, setCopiedRows] = (0, import_react25.useState)(/* @__PURE__ */ new Set());
|
|
1905
|
+
const [settlingRows, setSettlingRows] = (0, import_react25.useState)(/* @__PURE__ */ new Set());
|
|
1906
|
+
const [allCopied, setAllCopied] = (0, import_react25.useState)(false);
|
|
1907
|
+
const markCopied = (0, import_react25.useCallback)((indexes, duration = 1500) => {
|
|
1871
1908
|
setCopiedRows((prev) => {
|
|
1872
1909
|
const next = new Set(prev);
|
|
1873
1910
|
indexes.forEach((i) => next.add(i));
|
|
@@ -1926,8 +1963,8 @@ var KdsCopyableTable = (0, import_react24.forwardRef)(
|
|
|
1926
1963
|
setTimeout(() => setAllCopied(false), 2e3);
|
|
1927
1964
|
}
|
|
1928
1965
|
};
|
|
1929
|
-
return /* @__PURE__ */ (0,
|
|
1930
|
-
/* @__PURE__ */ (0,
|
|
1966
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
1967
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-copyable-table", className), ...props, children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1931
1968
|
"div",
|
|
1932
1969
|
{
|
|
1933
1970
|
className: (0, import_clsx.clsx)(
|
|
@@ -1946,13 +1983,13 @@ var KdsCopyableTable = (0, import_react24.forwardRef)(
|
|
|
1946
1983
|
},
|
|
1947
1984
|
"aria-label": `Copiar ${row.label}: ${row.value}`,
|
|
1948
1985
|
children: [
|
|
1949
|
-
/* @__PURE__ */ (0,
|
|
1950
|
-
/* @__PURE__ */ (0,
|
|
1986
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-key", children: row.label }),
|
|
1987
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-value", children: row.value })
|
|
1951
1988
|
]
|
|
1952
1989
|
},
|
|
1953
1990
|
`${row.label}-${i}`
|
|
1954
1991
|
)) }),
|
|
1955
|
-
showCopyAll && /* @__PURE__ */ (0,
|
|
1992
|
+
showCopyAll && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1956
1993
|
"button",
|
|
1957
1994
|
{
|
|
1958
1995
|
type: "button",
|
|
@@ -1966,8 +2003,8 @@ var KdsCopyableTable = (0, import_react24.forwardRef)(
|
|
|
1966
2003
|
onClick: handleCopyAll,
|
|
1967
2004
|
"aria-label": allCopied ? copiedAllLabel : copyAllLabel,
|
|
1968
2005
|
children: [
|
|
1969
|
-
/* @__PURE__ */ (0,
|
|
1970
|
-
/* @__PURE__ */ (0,
|
|
2006
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-icon", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { className: "material-symbols-outlined", children: allCopied ? "check" : "content_copy" }) }),
|
|
2007
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: allCopied ? copiedAllLabel : copyAllLabel })
|
|
1971
2008
|
]
|
|
1972
2009
|
}
|
|
1973
2010
|
)
|
|
@@ -1977,35 +2014,35 @@ var KdsCopyableTable = (0, import_react24.forwardRef)(
|
|
|
1977
2014
|
KdsCopyableTable.displayName = "KdsCopyableTable";
|
|
1978
2015
|
|
|
1979
2016
|
// src/components/core/KdsExpandPanel/KdsExpandPanel.tsx
|
|
1980
|
-
var
|
|
1981
|
-
var
|
|
1982
|
-
var KdsExpandPanel = (0,
|
|
2017
|
+
var import_react26 = require("react");
|
|
2018
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2019
|
+
var KdsExpandPanel = (0, import_react26.forwardRef)(
|
|
1983
2020
|
({ label, defaultExpanded = false, children, className, ...props }, ref) => {
|
|
1984
|
-
const [expanded, setExpanded] = (0,
|
|
1985
|
-
return /* @__PURE__ */ (0,
|
|
1986
|
-
/* @__PURE__ */ (0,
|
|
2021
|
+
const [expanded, setExpanded] = (0, import_react26.useState)(defaultExpanded);
|
|
2022
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref, className, ...props, children: [
|
|
2023
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1987
2024
|
"button",
|
|
1988
2025
|
{
|
|
1989
2026
|
className: "kds-expand-toggle",
|
|
1990
2027
|
onClick: () => setExpanded((v) => !v),
|
|
1991
2028
|
"aria-expanded": expanded,
|
|
1992
2029
|
children: [
|
|
1993
|
-
/* @__PURE__ */ (0,
|
|
1994
|
-
/* @__PURE__ */ (0,
|
|
2030
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: label }),
|
|
2031
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { className: "material-symbols-outlined", children: expanded ? "expand_less" : "expand_more" })
|
|
1995
2032
|
]
|
|
1996
2033
|
}
|
|
1997
2034
|
),
|
|
1998
|
-
/* @__PURE__ */ (0,
|
|
2035
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: (0, import_clsx.clsx)("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
|
|
1999
2036
|
] });
|
|
2000
2037
|
}
|
|
2001
2038
|
);
|
|
2002
2039
|
KdsExpandPanel.displayName = "KdsExpandPanel";
|
|
2003
2040
|
|
|
2004
2041
|
// src/components/core/KdsCountdown/KdsCountdown.tsx
|
|
2005
|
-
var
|
|
2042
|
+
var import_react28 = require("react");
|
|
2006
2043
|
|
|
2007
2044
|
// src/components/core/hooks/useCountdown.ts
|
|
2008
|
-
var
|
|
2045
|
+
var import_react27 = require("react");
|
|
2009
2046
|
function calcRemaining(deadline) {
|
|
2010
2047
|
const diff = Math.max(0, new Date(deadline).getTime() - Date.now());
|
|
2011
2048
|
const totalSeconds = Math.floor(diff / 1e3);
|
|
@@ -2018,8 +2055,8 @@ function calcRemaining(deadline) {
|
|
|
2018
2055
|
};
|
|
2019
2056
|
}
|
|
2020
2057
|
function useCountdown(deadline) {
|
|
2021
|
-
const [state, setState] = (0,
|
|
2022
|
-
(0,
|
|
2058
|
+
const [state, setState] = (0, import_react27.useState)(() => calcRemaining(deadline));
|
|
2059
|
+
(0, import_react27.useEffect)(() => {
|
|
2023
2060
|
const tick = () => setState(calcRemaining(deadline));
|
|
2024
2061
|
const id = setInterval(tick, 1e3);
|
|
2025
2062
|
return () => clearInterval(id);
|
|
@@ -2028,13 +2065,13 @@ function useCountdown(deadline) {
|
|
|
2028
2065
|
}
|
|
2029
2066
|
|
|
2030
2067
|
// src/components/core/KdsCountdown/KdsCountdown.tsx
|
|
2031
|
-
var
|
|
2032
|
-
var KdsCountdown = (0,
|
|
2068
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2069
|
+
var KdsCountdown = (0, import_react28.forwardRef)(
|
|
2033
2070
|
({ deadline, label, onExpire, className, ...props }, ref) => {
|
|
2034
2071
|
const { hours, minutes, seconds, expired, urgent } = useCountdown(deadline);
|
|
2035
|
-
const onExpireRef = (0,
|
|
2072
|
+
const onExpireRef = (0, import_react28.useRef)(onExpire);
|
|
2036
2073
|
onExpireRef.current = onExpire;
|
|
2037
|
-
(0,
|
|
2074
|
+
(0, import_react28.useEffect)(() => {
|
|
2038
2075
|
if (expired) {
|
|
2039
2076
|
onExpireRef.current?.();
|
|
2040
2077
|
}
|
|
@@ -2043,9 +2080,9 @@ var KdsCountdown = (0, import_react27.forwardRef)(
|
|
|
2043
2080
|
return null;
|
|
2044
2081
|
}
|
|
2045
2082
|
const pad = (n) => String(n).padStart(2, "0");
|
|
2046
|
-
return /* @__PURE__ */ (0,
|
|
2047
|
-
label && /* @__PURE__ */ (0,
|
|
2048
|
-
/* @__PURE__ */ (0,
|
|
2083
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-countdown", urgent && "urgent", className), ...props, children: [
|
|
2084
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "kds-countdown-label", children: label }),
|
|
2085
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "kds-countdown-value", children: [
|
|
2049
2086
|
pad(hours),
|
|
2050
2087
|
":",
|
|
2051
2088
|
pad(minutes),
|
|
@@ -2058,18 +2095,18 @@ var KdsCountdown = (0, import_react27.forwardRef)(
|
|
|
2058
2095
|
KdsCountdown.displayName = "KdsCountdown";
|
|
2059
2096
|
|
|
2060
2097
|
// src/components/core/KdsSegmentedTabs/KdsSegmentedTabs.tsx
|
|
2061
|
-
var
|
|
2062
|
-
var
|
|
2063
|
-
var KdsSegmentedTabs = (0,
|
|
2064
|
-
(props, ref) => /* @__PURE__ */ (0,
|
|
2098
|
+
var import_react29 = require("react");
|
|
2099
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2100
|
+
var KdsSegmentedTabs = (0, import_react29.forwardRef)(
|
|
2101
|
+
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(KdsTabs, { ref, ...props })
|
|
2065
2102
|
);
|
|
2066
2103
|
KdsSegmentedTabs.displayName = "KdsSegmentedTabs";
|
|
2067
2104
|
|
|
2068
2105
|
// src/components/domain/KdsBankRow/KdsBankRow.tsx
|
|
2069
|
-
var
|
|
2070
|
-
var
|
|
2071
|
-
var KdsBankRow = (0,
|
|
2072
|
-
({ name, logoUrl, selected, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2106
|
+
var import_react30 = require("react");
|
|
2107
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2108
|
+
var KdsBankRow = (0, import_react30.forwardRef)(
|
|
2109
|
+
({ name, logoUrl, selected, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
2073
2110
|
"button",
|
|
2074
2111
|
{
|
|
2075
2112
|
ref,
|
|
@@ -2077,9 +2114,9 @@ var KdsBankRow = (0, import_react29.forwardRef)(
|
|
|
2077
2114
|
className: (0, import_clsx.clsx)("kds-bank-row", selected && "selected", className),
|
|
2078
2115
|
...props,
|
|
2079
2116
|
children: [
|
|
2080
|
-
/* @__PURE__ */ (0,
|
|
2081
|
-
/* @__PURE__ */ (0,
|
|
2082
|
-
/* @__PURE__ */ (0,
|
|
2117
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { src: logoUrl, alt: name }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "initials", children: name.charAt(0) }) }),
|
|
2118
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "kds-bank-row-name", children: name }),
|
|
2119
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
|
|
2083
2120
|
]
|
|
2084
2121
|
}
|
|
2085
2122
|
)
|
|
@@ -2087,32 +2124,32 @@ var KdsBankRow = (0, import_react29.forwardRef)(
|
|
|
2087
2124
|
KdsBankRow.displayName = "KdsBankRow";
|
|
2088
2125
|
|
|
2089
2126
|
// src/components/domain/KdsBankList/KdsBankList.tsx
|
|
2090
|
-
var
|
|
2091
|
-
var
|
|
2092
|
-
var KdsBankList = (0,
|
|
2093
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2127
|
+
var import_react31 = require("react");
|
|
2128
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2129
|
+
var KdsBankList = (0, import_react31.forwardRef)(
|
|
2130
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bank-list", className), role: "list", ...props, children })
|
|
2094
2131
|
);
|
|
2095
2132
|
KdsBankList.displayName = "KdsBankList";
|
|
2096
2133
|
|
|
2097
2134
|
// src/components/domain/KdsBankModal/KdsBankModal.tsx
|
|
2098
|
-
var
|
|
2135
|
+
var import_react32 = require("react");
|
|
2099
2136
|
var Dialog = __toESM(require("@radix-ui/react-dialog"));
|
|
2100
|
-
var
|
|
2101
|
-
var KdsBankModal = (0,
|
|
2137
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2138
|
+
var KdsBankModal = (0, import_react32.forwardRef)(
|
|
2102
2139
|
({ open, onClose, title = "Selecciona tu banco", searchPlaceholder = "Buscar banco...", onSearch, children, className, container }, ref) => {
|
|
2103
|
-
const [query, setQuery] = (0,
|
|
2140
|
+
const [query, setQuery] = (0, import_react32.useState)("");
|
|
2104
2141
|
const handleSearch = (value) => {
|
|
2105
2142
|
setQuery(value);
|
|
2106
2143
|
onSearch?.(value);
|
|
2107
2144
|
};
|
|
2108
|
-
return /* @__PURE__ */ (0,
|
|
2145
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog.Root, { open, onOpenChange: (o) => {
|
|
2109
2146
|
if (!o) onClose();
|
|
2110
|
-
}, children: /* @__PURE__ */ (0,
|
|
2111
|
-
/* @__PURE__ */ (0,
|
|
2112
|
-
/* @__PURE__ */ (0,
|
|
2113
|
-
/* @__PURE__ */ (0,
|
|
2147
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Dialog.Content, { ref, className: (0, import_clsx.clsx)("kds-bank-modal", className), children: [
|
|
2148
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "kds-bank-modal-header", children: [
|
|
2149
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { children: title }) }),
|
|
2150
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("i", { className: "material-symbols-outlined", children: "close" }) }) })
|
|
2114
2151
|
] }),
|
|
2115
|
-
/* @__PURE__ */ (0,
|
|
2152
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2116
2153
|
"input",
|
|
2117
2154
|
{
|
|
2118
2155
|
type: "text",
|
|
@@ -2121,33 +2158,33 @@ var KdsBankModal = (0, import_react31.forwardRef)(
|
|
|
2121
2158
|
onChange: (e) => handleSearch(e.target.value)
|
|
2122
2159
|
}
|
|
2123
2160
|
) }),
|
|
2124
|
-
/* @__PURE__ */ (0,
|
|
2161
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "kds-bank-modal-body", children })
|
|
2125
2162
|
] }) }) }) });
|
|
2126
2163
|
}
|
|
2127
2164
|
);
|
|
2128
2165
|
KdsBankModal.displayName = "KdsBankModal";
|
|
2129
2166
|
|
|
2130
2167
|
// src/components/domain/KdsQrRow/KdsQrRow.tsx
|
|
2131
|
-
var
|
|
2132
|
-
var
|
|
2133
|
-
var KdsQrRow = (0,
|
|
2134
|
-
({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2135
|
-
/* @__PURE__ */ (0,
|
|
2136
|
-
/* @__PURE__ */ (0,
|
|
2137
|
-
/* @__PURE__ */ (0,
|
|
2138
|
-
description && /* @__PURE__ */ (0,
|
|
2168
|
+
var import_react33 = require("react");
|
|
2169
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2170
|
+
var KdsQrRow = (0, import_react33.forwardRef)(
|
|
2171
|
+
({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { ref, type: "button", className: (0, import_clsx.clsx)("kds-qr-row", className), ...props, children: [
|
|
2172
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
2173
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "kds-qr-text", children: [
|
|
2174
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "kds-qr-title", children: name }),
|
|
2175
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "kds-qr-subtitle", children: description })
|
|
2139
2176
|
] }),
|
|
2140
|
-
badge && /* @__PURE__ */ (0,
|
|
2141
|
-
/* @__PURE__ */ (0,
|
|
2177
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "kds-qr-badge", children: badge }),
|
|
2178
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", { className: "material-symbols-outlined", children: "chevron_right" })
|
|
2142
2179
|
] })
|
|
2143
2180
|
);
|
|
2144
2181
|
KdsQrRow.displayName = "KdsQrRow";
|
|
2145
2182
|
|
|
2146
2183
|
// src/components/domain/KdsCardSelector/KdsCardSelector.tsx
|
|
2147
|
-
var
|
|
2148
|
-
var
|
|
2149
|
-
var KdsCardSelector = (0,
|
|
2150
|
-
({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2184
|
+
var import_react34 = require("react");
|
|
2185
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2186
|
+
var KdsCardSelector = (0, import_react34.forwardRef)(
|
|
2187
|
+
({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
2151
2188
|
"button",
|
|
2152
2189
|
{
|
|
2153
2190
|
ref,
|
|
@@ -2155,9 +2192,9 @@ var KdsCardSelector = (0, import_react33.forwardRef)(
|
|
|
2155
2192
|
className: (0, import_clsx.clsx)("kds-card-selector", selected && "selected", className),
|
|
2156
2193
|
...props,
|
|
2157
2194
|
children: [
|
|
2158
|
-
icon && /* @__PURE__ */ (0,
|
|
2159
|
-
/* @__PURE__ */ (0,
|
|
2160
|
-
description && /* @__PURE__ */ (0,
|
|
2195
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-card-selector-icon", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
2196
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-card-selector-title", children: title }),
|
|
2197
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-card-selector-description", children: description })
|
|
2161
2198
|
]
|
|
2162
2199
|
}
|
|
2163
2200
|
)
|
|
@@ -2165,26 +2202,26 @@ var KdsCardSelector = (0, import_react33.forwardRef)(
|
|
|
2165
2202
|
KdsCardSelector.displayName = "KdsCardSelector";
|
|
2166
2203
|
|
|
2167
2204
|
// src/components/domain/KdsCardPlan/KdsCardPlan.tsx
|
|
2168
|
-
var
|
|
2169
|
-
var
|
|
2170
|
-
var KdsCardPlan = (0,
|
|
2171
|
-
({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2205
|
+
var import_react35 = require("react");
|
|
2206
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2207
|
+
var KdsCardPlan = (0, import_react35.forwardRef)(
|
|
2208
|
+
({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
2172
2209
|
"div",
|
|
2173
2210
|
{
|
|
2174
2211
|
ref,
|
|
2175
2212
|
className: (0, import_clsx.clsx)("kds-card-plan", recommended && "recommended", className),
|
|
2176
2213
|
...props,
|
|
2177
2214
|
children: [
|
|
2178
|
-
/* @__PURE__ */ (0,
|
|
2179
|
-
/* @__PURE__ */ (0,
|
|
2180
|
-
/* @__PURE__ */ (0,
|
|
2181
|
-
period && /* @__PURE__ */ (0,
|
|
2215
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { children: title }) }),
|
|
2216
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "kds-card-plan-price", children: [
|
|
2217
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-price", children: price }),
|
|
2218
|
+
period && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "kds-price-period", children: [
|
|
2182
2219
|
"/",
|
|
2183
2220
|
period
|
|
2184
2221
|
] })
|
|
2185
2222
|
] }),
|
|
2186
|
-
badgeText && /* @__PURE__ */ (0,
|
|
2187
|
-
features && features.length > 0 && /* @__PURE__ */ (0,
|
|
2223
|
+
badgeText && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-card-plan-badge", children: badgeText }),
|
|
2224
|
+
features && features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "kds-card-plan-features", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: f }, i)) }),
|
|
2188
2225
|
action
|
|
2189
2226
|
]
|
|
2190
2227
|
}
|
|
@@ -2193,18 +2230,18 @@ var KdsCardPlan = (0, import_react34.forwardRef)(
|
|
|
2193
2230
|
KdsCardPlan.displayName = "KdsCardPlan";
|
|
2194
2231
|
|
|
2195
2232
|
// src/components/domain/KdsInvoiceSticky/KdsInvoiceSticky.tsx
|
|
2196
|
-
var
|
|
2197
|
-
var
|
|
2198
|
-
var KdsInvoiceSticky = (0,
|
|
2199
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2233
|
+
var import_react36 = require("react");
|
|
2234
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2235
|
+
var KdsInvoiceSticky = (0, import_react36.forwardRef)(
|
|
2236
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-elevated", "kds-invoice-sticky", className), ...props, children })
|
|
2200
2237
|
);
|
|
2201
2238
|
KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
|
|
2202
2239
|
|
|
2203
2240
|
// src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
|
|
2204
|
-
var
|
|
2241
|
+
var import_react37 = require("react");
|
|
2205
2242
|
var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
|
|
2206
|
-
var
|
|
2207
|
-
var KdsBottomSheet = (0,
|
|
2243
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
2244
|
+
var KdsBottomSheet = (0, import_react37.forwardRef)(
|
|
2208
2245
|
({
|
|
2209
2246
|
open,
|
|
2210
2247
|
onClose,
|
|
@@ -2216,14 +2253,14 @@ var KdsBottomSheet = (0, import_react36.forwardRef)(
|
|
|
2216
2253
|
showCloseButton = false,
|
|
2217
2254
|
container,
|
|
2218
2255
|
className
|
|
2219
|
-
}, ref) => /* @__PURE__ */ (0,
|
|
2256
|
+
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
2220
2257
|
Dialog2.Root,
|
|
2221
2258
|
{
|
|
2222
2259
|
open,
|
|
2223
2260
|
onOpenChange: (o) => {
|
|
2224
2261
|
if (!o) onClose();
|
|
2225
2262
|
},
|
|
2226
|
-
children: /* @__PURE__ */ (0,
|
|
2263
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog2.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog2.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
2227
2264
|
Dialog2.Content,
|
|
2228
2265
|
{
|
|
2229
2266
|
ref,
|
|
@@ -2233,20 +2270,20 @@ var KdsBottomSheet = (0, import_react36.forwardRef)(
|
|
|
2233
2270
|
if (target.closest(".kds-bottom-sheet")) e.preventDefault();
|
|
2234
2271
|
},
|
|
2235
2272
|
children: [
|
|
2236
|
-
showGrabber && /* @__PURE__ */ (0,
|
|
2237
|
-
showCloseButton && /* @__PURE__ */ (0,
|
|
2273
|
+
showGrabber && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-bottom-sheet-grabber", "aria-hidden": "true" }),
|
|
2274
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
2238
2275
|
"button",
|
|
2239
2276
|
{
|
|
2240
2277
|
type: "button",
|
|
2241
2278
|
className: "kds-bottom-sheet-close",
|
|
2242
2279
|
"aria-label": "Cerrar",
|
|
2243
|
-
children: /* @__PURE__ */ (0,
|
|
2280
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", { className: "material-symbols-outlined", children: "close" })
|
|
2244
2281
|
}
|
|
2245
2282
|
) }),
|
|
2246
|
-
title && /* @__PURE__ */ (0,
|
|
2247
|
-
description && /* @__PURE__ */ (0,
|
|
2248
|
-
/* @__PURE__ */ (0,
|
|
2249
|
-
actions && /* @__PURE__ */ (0,
|
|
2283
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog2.Title, { className: "kds-bottom-sheet-title", children: title }),
|
|
2284
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog2.Description, { className: "kds-bottom-sheet-description", children: description }),
|
|
2285
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-bottom-sheet-body", children }),
|
|
2286
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-bottom-sheet-actions", children: actions })
|
|
2250
2287
|
]
|
|
2251
2288
|
}
|
|
2252
2289
|
) }) })
|
|
@@ -2256,55 +2293,55 @@ var KdsBottomSheet = (0, import_react36.forwardRef)(
|
|
|
2256
2293
|
KdsBottomSheet.displayName = "KdsBottomSheet";
|
|
2257
2294
|
|
|
2258
2295
|
// src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
|
|
2259
|
-
var
|
|
2260
|
-
var
|
|
2261
|
-
var KdsSecureFooter = (0,
|
|
2262
|
-
({ variant = "default", children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2263
|
-
/* @__PURE__ */ (0,
|
|
2264
|
-
children || /* @__PURE__ */ (0,
|
|
2296
|
+
var import_react38 = require("react");
|
|
2297
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2298
|
+
var KdsSecureFooter = (0, import_react38.forwardRef)(
|
|
2299
|
+
({ variant = "default", children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("footer", { ref, className: (0, import_clsx.clsx)("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
|
|
2300
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", { className: "material-symbols-outlined", children: "lock" }),
|
|
2301
|
+
children || /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: "Pago seguro con Khipu" })
|
|
2265
2302
|
] })
|
|
2266
2303
|
);
|
|
2267
2304
|
KdsSecureFooter.displayName = "KdsSecureFooter";
|
|
2268
2305
|
|
|
2269
2306
|
// src/components/domain/KdsRecapList/KdsRecapList.tsx
|
|
2270
|
-
var
|
|
2271
|
-
var
|
|
2272
|
-
var KdsRecapList = (0,
|
|
2273
|
-
({ items, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2274
|
-
/* @__PURE__ */ (0,
|
|
2275
|
-
/* @__PURE__ */ (0,
|
|
2307
|
+
var import_react39 = require("react");
|
|
2308
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2309
|
+
var KdsRecapList = (0, import_react39.forwardRef)(
|
|
2310
|
+
({ items, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { ref, className: (0, import_clsx.clsx)("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("li", { children: [
|
|
2311
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "kds-key", children: item.label }),
|
|
2312
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: (0, import_clsx.clsx)("kds-value", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
|
|
2276
2313
|
] }, i)) })
|
|
2277
2314
|
);
|
|
2278
2315
|
KdsRecapList.displayName = "KdsRecapList";
|
|
2279
2316
|
|
|
2280
2317
|
// src/components/domain/KdsMontoRow/KdsMontoRow.tsx
|
|
2281
|
-
var
|
|
2282
|
-
var
|
|
2283
|
-
var KdsMontoRow = (0,
|
|
2284
|
-
({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2285
|
-
/* @__PURE__ */ (0,
|
|
2286
|
-
/* @__PURE__ */ (0,
|
|
2287
|
-
deadline && /* @__PURE__ */ (0,
|
|
2318
|
+
var import_react40 = require("react");
|
|
2319
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2320
|
+
var KdsMontoRow = (0, import_react40.forwardRef)(
|
|
2321
|
+
({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-monto-row", className), ...props, children: [
|
|
2322
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
|
|
2323
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "kds-monto-row-title", children: title }),
|
|
2324
|
+
deadline && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "kds-monto-row-deadline", children: deadline })
|
|
2288
2325
|
] }),
|
|
2289
|
-
/* @__PURE__ */ (0,
|
|
2326
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "kds-monto-row-value", children: value })
|
|
2290
2327
|
] })
|
|
2291
2328
|
);
|
|
2292
2329
|
KdsMontoRow.displayName = "KdsMontoRow";
|
|
2293
2330
|
|
|
2294
2331
|
// src/components/domain/KdsMerchantTile/KdsMerchantTile.tsx
|
|
2295
|
-
var
|
|
2296
|
-
var
|
|
2297
|
-
var KdsMerchantTile = (0,
|
|
2332
|
+
var import_react41 = require("react");
|
|
2333
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2334
|
+
var KdsMerchantTile = (0, import_react41.forwardRef)(
|
|
2298
2335
|
({ name, logoUrl, initials, compact, className, ...props }, ref) => {
|
|
2299
2336
|
const displayInitials = (initials ?? name.slice(0, 2)).toUpperCase();
|
|
2300
|
-
return /* @__PURE__ */ (0,
|
|
2337
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2301
2338
|
"div",
|
|
2302
2339
|
{
|
|
2303
2340
|
ref,
|
|
2304
2341
|
className: (0, import_clsx.clsx)("kds-merchant-tile", logoUrl && "logo", compact && "compact", className),
|
|
2305
2342
|
"aria-label": name,
|
|
2306
2343
|
...props,
|
|
2307
|
-
children: logoUrl ? /* @__PURE__ */ (0,
|
|
2344
|
+
children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: logoUrl, alt: name }) : displayInitials
|
|
2308
2345
|
}
|
|
2309
2346
|
);
|
|
2310
2347
|
}
|
|
@@ -2312,9 +2349,9 @@ var KdsMerchantTile = (0, import_react40.forwardRef)(
|
|
|
2312
2349
|
KdsMerchantTile.displayName = "KdsMerchantTile";
|
|
2313
2350
|
|
|
2314
2351
|
// src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
|
|
2315
|
-
var
|
|
2316
|
-
var
|
|
2317
|
-
var KdsPaymentTotal = (0,
|
|
2352
|
+
var import_react42 = require("react");
|
|
2353
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2354
|
+
var KdsPaymentTotal = (0, import_react42.forwardRef)(
|
|
2318
2355
|
({
|
|
2319
2356
|
variant = "default",
|
|
2320
2357
|
tone = "brand",
|
|
@@ -2332,7 +2369,7 @@ var KdsPaymentTotal = (0, import_react41.forwardRef)(
|
|
|
2332
2369
|
const { integer, fraction } = formatAmount(amount, decimals, locale);
|
|
2333
2370
|
const isEmail = variant === "email";
|
|
2334
2371
|
const isInfoTone = tone === "info";
|
|
2335
|
-
return /* @__PURE__ */ (0,
|
|
2372
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
2336
2373
|
"div",
|
|
2337
2374
|
{
|
|
2338
2375
|
ref,
|
|
@@ -2345,14 +2382,14 @@ var KdsPaymentTotal = (0, import_react41.forwardRef)(
|
|
|
2345
2382
|
),
|
|
2346
2383
|
...props,
|
|
2347
2384
|
children: [
|
|
2348
|
-
!isEmail && title != null && /* @__PURE__ */ (0,
|
|
2349
|
-
!isEmail && titleMobile != null && /* @__PURE__ */ (0,
|
|
2350
|
-
label != null && /* @__PURE__ */ (0,
|
|
2351
|
-
/* @__PURE__ */ (0,
|
|
2385
|
+
!isEmail && title != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h5", { className: "kds-payment-total-title", children: title }),
|
|
2386
|
+
!isEmail && titleMobile != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
|
|
2387
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h6", { className: "kds-payment-label", children: label }),
|
|
2388
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("h5", { className: "kds-payment-amount", children: [
|
|
2352
2389
|
currency,
|
|
2353
2390
|
" ",
|
|
2354
2391
|
integer,
|
|
2355
|
-
fraction !== null && /* @__PURE__ */ (0,
|
|
2392
|
+
fraction !== null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
|
|
2356
2393
|
] })
|
|
2357
2394
|
]
|
|
2358
2395
|
}
|
|
@@ -2388,10 +2425,10 @@ function formatAmount(amount, decimals, locale) {
|
|
|
2388
2425
|
}
|
|
2389
2426
|
|
|
2390
2427
|
// src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
|
|
2391
|
-
var
|
|
2392
|
-
var
|
|
2393
|
-
var KdsBillAttachment = (0,
|
|
2394
|
-
({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2428
|
+
var import_react43 = require("react");
|
|
2429
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2430
|
+
var KdsBillAttachment = (0, import_react43.forwardRef)(
|
|
2431
|
+
({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
2395
2432
|
"a",
|
|
2396
2433
|
{
|
|
2397
2434
|
ref,
|
|
@@ -2401,15 +2438,15 @@ var KdsBillAttachment = (0, import_react42.forwardRef)(
|
|
|
2401
2438
|
className: (0, import_clsx.clsx)("kds-bill-attachment", className),
|
|
2402
2439
|
...props,
|
|
2403
2440
|
children: [
|
|
2404
|
-
/* @__PURE__ */ (0,
|
|
2405
|
-
/* @__PURE__ */ (0,
|
|
2441
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("i", { className: "material-symbols-outlined", children: icon }),
|
|
2442
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: filename })
|
|
2406
2443
|
]
|
|
2407
2444
|
}
|
|
2408
2445
|
)
|
|
2409
2446
|
);
|
|
2410
2447
|
KdsBillAttachment.displayName = "KdsBillAttachment";
|
|
2411
|
-
var KdsBillAttachments = (0,
|
|
2412
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2448
|
+
var KdsBillAttachments = (0, import_react43.forwardRef)(
|
|
2449
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bill-attachments", className), ...props, children })
|
|
2413
2450
|
);
|
|
2414
2451
|
KdsBillAttachments.displayName = "KdsBillAttachments";
|
|
2415
2452
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -2433,6 +2470,7 @@ KdsBillAttachments.displayName = "KdsBillAttachments";
|
|
|
2433
2470
|
KdsCardSelector,
|
|
2434
2471
|
KdsCheckbox,
|
|
2435
2472
|
KdsChip,
|
|
2473
|
+
KdsCopyButton,
|
|
2436
2474
|
KdsCopyRow,
|
|
2437
2475
|
KdsCopyableTable,
|
|
2438
2476
|
KdsCountdown,
|