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