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