@khipu/design-system 0.2.0-alpha.51 → 0.2.0-alpha.52
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 +9 -8
- package/dist/beercss/khipu-beercss.min.css +1 -1
- package/dist/beercss/khipu-beercss.scoped.css +9 -8
- 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 +343 -317
- package/dist/index.mjs +317 -292
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1144,22 +1144,47 @@ var KdsTextField = forwardRef2(
|
|
|
1144
1144
|
);
|
|
1145
1145
|
KdsTextField.displayName = "KdsTextField";
|
|
1146
1146
|
|
|
1147
|
-
// src/components/core/
|
|
1147
|
+
// src/components/core/KdsSearchField/KdsSearchField.tsx
|
|
1148
1148
|
import { forwardRef as forwardRef3 } from "react";
|
|
1149
1149
|
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1150
|
-
var
|
|
1151
|
-
({
|
|
1152
|
-
/* @__PURE__ */ jsx4(
|
|
1153
|
-
|
|
1150
|
+
var KdsSearchField = forwardRef3(
|
|
1151
|
+
({ className, withIcon = false, ...props }, ref) => {
|
|
1152
|
+
const input = /* @__PURE__ */ jsx4(
|
|
1153
|
+
"input",
|
|
1154
|
+
{
|
|
1155
|
+
ref,
|
|
1156
|
+
type: "search",
|
|
1157
|
+
className: clsx("kds-search-field", className),
|
|
1158
|
+
...props
|
|
1159
|
+
}
|
|
1160
|
+
);
|
|
1161
|
+
if (!withIcon) {
|
|
1162
|
+
return input;
|
|
1163
|
+
}
|
|
1164
|
+
return /* @__PURE__ */ jsxs3("div", { className: "kds-search-field-wrapper", children: [
|
|
1165
|
+
/* @__PURE__ */ jsx4("i", { className: "material-symbols-outlined kds-search-field-icon", "aria-hidden": "true", children: "search" }),
|
|
1166
|
+
input
|
|
1167
|
+
] });
|
|
1168
|
+
}
|
|
1169
|
+
);
|
|
1170
|
+
KdsSearchField.displayName = "KdsSearchField";
|
|
1171
|
+
|
|
1172
|
+
// src/components/core/KdsCheckbox/KdsCheckbox.tsx
|
|
1173
|
+
import { forwardRef as forwardRef4 } from "react";
|
|
1174
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1175
|
+
var KdsCheckbox = forwardRef4(
|
|
1176
|
+
({ label, className, ...props }, ref) => /* @__PURE__ */ jsxs4("label", { className: clsx("checkbox", className), children: [
|
|
1177
|
+
/* @__PURE__ */ jsx5("input", { ref, type: "checkbox", ...props }),
|
|
1178
|
+
/* @__PURE__ */ jsx5("span", { children: label })
|
|
1154
1179
|
] })
|
|
1155
1180
|
);
|
|
1156
1181
|
KdsCheckbox.displayName = "KdsCheckbox";
|
|
1157
1182
|
|
|
1158
1183
|
// src/components/core/KdsCard/KdsCard.tsx
|
|
1159
|
-
import { forwardRef as
|
|
1160
|
-
import { jsx as
|
|
1161
|
-
var KdsCard =
|
|
1162
|
-
({ variant = "elevated", dimmed, children, className, ...props }, ref) => /* @__PURE__ */
|
|
1184
|
+
import { forwardRef as forwardRef5 } from "react";
|
|
1185
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
1186
|
+
var KdsCard = forwardRef5(
|
|
1187
|
+
({ variant = "elevated", dimmed, children, className, ...props }, ref) => /* @__PURE__ */ jsx6(
|
|
1163
1188
|
"article",
|
|
1164
1189
|
{
|
|
1165
1190
|
ref,
|
|
@@ -1174,31 +1199,31 @@ var KdsCard = forwardRef4(
|
|
|
1174
1199
|
)
|
|
1175
1200
|
);
|
|
1176
1201
|
KdsCard.displayName = "KdsCard";
|
|
1177
|
-
var KdsCardHeader =
|
|
1178
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */
|
|
1202
|
+
var KdsCardHeader = forwardRef5(
|
|
1203
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, className: clsx("kds-card-header", className), ...props, children })
|
|
1179
1204
|
);
|
|
1180
1205
|
KdsCardHeader.displayName = "KdsCardHeader";
|
|
1181
|
-
var KdsCardBody =
|
|
1182
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */
|
|
1206
|
+
var KdsCardBody = forwardRef5(
|
|
1207
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, className: clsx("kds-card-body", className), ...props, children })
|
|
1183
1208
|
);
|
|
1184
1209
|
KdsCardBody.displayName = "KdsCardBody";
|
|
1185
|
-
var KdsCardFooter =
|
|
1186
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */
|
|
1210
|
+
var KdsCardFooter = forwardRef5(
|
|
1211
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, className: clsx("kds-card-footer", className), ...props, children })
|
|
1187
1212
|
);
|
|
1188
1213
|
KdsCardFooter.displayName = "KdsCardFooter";
|
|
1189
1214
|
|
|
1190
1215
|
// src/components/core/KdsSpinner/KdsSpinner.tsx
|
|
1191
|
-
import { forwardRef as
|
|
1192
|
-
import { jsx as
|
|
1216
|
+
import { forwardRef as forwardRef6 } from "react";
|
|
1217
|
+
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1193
1218
|
var SIZE_CLASS = {
|
|
1194
1219
|
small: "small",
|
|
1195
1220
|
medium: null,
|
|
1196
1221
|
large: "large"
|
|
1197
1222
|
};
|
|
1198
|
-
var KdsSpinner =
|
|
1223
|
+
var KdsSpinner = forwardRef6(
|
|
1199
1224
|
({ size = "medium", label, className, ...props }, ref) => {
|
|
1200
1225
|
const sizeClass = SIZE_CLASS[size];
|
|
1201
|
-
return /* @__PURE__ */
|
|
1226
|
+
return /* @__PURE__ */ jsxs5(
|
|
1202
1227
|
"div",
|
|
1203
1228
|
{
|
|
1204
1229
|
ref,
|
|
@@ -1206,9 +1231,9 @@ var KdsSpinner = forwardRef5(
|
|
|
1206
1231
|
role: "status",
|
|
1207
1232
|
...props,
|
|
1208
1233
|
children: [
|
|
1209
|
-
/* @__PURE__ */
|
|
1210
|
-
label && /* @__PURE__ */
|
|
1211
|
-
!label && /* @__PURE__ */
|
|
1234
|
+
/* @__PURE__ */ jsx7("progress", { className: clsx("circle indeterminate", sizeClass) }),
|
|
1235
|
+
label && /* @__PURE__ */ jsx7("span", { className: "kds-text-body-small kds-text-muted", children: label }),
|
|
1236
|
+
!label && /* @__PURE__ */ jsx7("span", { className: "kds-hidden", children: "Cargando" })
|
|
1212
1237
|
]
|
|
1213
1238
|
}
|
|
1214
1239
|
);
|
|
@@ -1217,16 +1242,16 @@ var KdsSpinner = forwardRef5(
|
|
|
1217
1242
|
KdsSpinner.displayName = "KdsSpinner";
|
|
1218
1243
|
|
|
1219
1244
|
// src/components/core/KdsSecureLoader/KdsSecureLoader.tsx
|
|
1220
|
-
import { forwardRef as
|
|
1221
|
-
import { jsx as
|
|
1222
|
-
var KdsSecureLoader =
|
|
1223
|
-
({ title, message, className, ...props }, ref) => /* @__PURE__ */
|
|
1224
|
-
(title || message) && /* @__PURE__ */
|
|
1225
|
-
title && /* @__PURE__ */
|
|
1226
|
-
message && /* @__PURE__ */
|
|
1245
|
+
import { forwardRef as forwardRef7 } from "react";
|
|
1246
|
+
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1247
|
+
var KdsSecureLoader = forwardRef7(
|
|
1248
|
+
({ title, message, className, ...props }, ref) => /* @__PURE__ */ jsxs6("div", { ref, className: clsx("kds-secure-loader", className), role: "status", "aria-busy": "true", ...props, children: [
|
|
1249
|
+
(title || message) && /* @__PURE__ */ jsxs6("div", { className: "kds-secure-loader-text", children: [
|
|
1250
|
+
title && /* @__PURE__ */ jsx8("p", { className: "kds-secure-loader-title", children: title }),
|
|
1251
|
+
message && /* @__PURE__ */ jsx8("p", { className: "kds-secure-loader-message", children: message })
|
|
1227
1252
|
] }),
|
|
1228
|
-
/* @__PURE__ */
|
|
1229
|
-
/* @__PURE__ */
|
|
1253
|
+
/* @__PURE__ */ jsxs6("div", { className: "kds-secure-loader-spinner", children: [
|
|
1254
|
+
/* @__PURE__ */ jsx8(
|
|
1230
1255
|
"svg",
|
|
1231
1256
|
{
|
|
1232
1257
|
className: "kds-secure-loader-ring",
|
|
@@ -1235,17 +1260,17 @@ var KdsSecureLoader = forwardRef6(
|
|
|
1235
1260
|
height: "100",
|
|
1236
1261
|
fill: "none",
|
|
1237
1262
|
"aria-hidden": "true",
|
|
1238
|
-
children: /* @__PURE__ */
|
|
1263
|
+
children: /* @__PURE__ */ jsx8("circle", { cx: "44", cy: "44", r: "20.2", fill: "none" })
|
|
1239
1264
|
}
|
|
1240
1265
|
),
|
|
1241
|
-
/* @__PURE__ */
|
|
1266
|
+
/* @__PURE__ */ jsx8("i", { className: "material-symbols-outlined kds-secure-loader-lock", "aria-hidden": "true", children: "lock" })
|
|
1242
1267
|
] })
|
|
1243
1268
|
] })
|
|
1244
1269
|
);
|
|
1245
1270
|
KdsSecureLoader.displayName = "KdsSecureLoader";
|
|
1246
1271
|
|
|
1247
1272
|
// src/components/core/KdsCopyButton/KdsCopyButton.tsx
|
|
1248
|
-
import { forwardRef as
|
|
1273
|
+
import { forwardRef as forwardRef8 } from "react";
|
|
1249
1274
|
|
|
1250
1275
|
// src/components/core/hooks/useCopyToClipboard.ts
|
|
1251
1276
|
import { useState as useState2, useCallback } from "react";
|
|
@@ -1266,11 +1291,11 @@ function useCopyToClipboard(resetMs = 1200) {
|
|
|
1266
1291
|
}
|
|
1267
1292
|
|
|
1268
1293
|
// src/components/core/KdsCopyButton/KdsCopyButton.tsx
|
|
1269
|
-
import { jsx as
|
|
1270
|
-
var KdsCopyButton =
|
|
1294
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1295
|
+
var KdsCopyButton = forwardRef8(
|
|
1271
1296
|
({ value, copiedText = "Copiado", className, ...props }, ref) => {
|
|
1272
1297
|
const { copied, copy } = useCopyToClipboard();
|
|
1273
|
-
return /* @__PURE__ */
|
|
1298
|
+
return /* @__PURE__ */ jsxs7(
|
|
1274
1299
|
"button",
|
|
1275
1300
|
{
|
|
1276
1301
|
ref,
|
|
@@ -1280,11 +1305,11 @@ var KdsCopyButton = forwardRef7(
|
|
|
1280
1305
|
"aria-label": `Copiar: ${value}`,
|
|
1281
1306
|
...props,
|
|
1282
1307
|
children: [
|
|
1283
|
-
/* @__PURE__ */
|
|
1284
|
-
/* @__PURE__ */
|
|
1285
|
-
/* @__PURE__ */
|
|
1308
|
+
/* @__PURE__ */ jsxs7("span", { className: "kds-copy-button-label", children: [
|
|
1309
|
+
/* @__PURE__ */ jsx9("span", { className: "kds-copy-button-value", "aria-hidden": copied || void 0, children: value }),
|
|
1310
|
+
/* @__PURE__ */ jsx9("span", { className: "kds-copy-button-copied", "aria-hidden": !copied || void 0, children: copiedText })
|
|
1286
1311
|
] }),
|
|
1287
|
-
/* @__PURE__ */
|
|
1312
|
+
/* @__PURE__ */ jsx9("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: copied ? "check" : "content_copy" })
|
|
1288
1313
|
]
|
|
1289
1314
|
}
|
|
1290
1315
|
);
|
|
@@ -1293,26 +1318,26 @@ var KdsCopyButton = forwardRef7(
|
|
|
1293
1318
|
KdsCopyButton.displayName = "KdsCopyButton";
|
|
1294
1319
|
|
|
1295
1320
|
// src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
|
|
1296
|
-
import { forwardRef as
|
|
1297
|
-
import { jsx as
|
|
1298
|
-
var KdsLinearProgress =
|
|
1299
|
-
({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */
|
|
1321
|
+
import { forwardRef as forwardRef9 } from "react";
|
|
1322
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
1323
|
+
var KdsLinearProgress = forwardRef9(
|
|
1324
|
+
({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */ jsx10("progress", { ref, className: clsx("kds-progress", className), value, max, ...props })
|
|
1300
1325
|
);
|
|
1301
1326
|
KdsLinearProgress.displayName = "KdsLinearProgress";
|
|
1302
1327
|
|
|
1303
1328
|
// src/components/core/KdsAlert/KdsAlert.tsx
|
|
1304
|
-
import { forwardRef as
|
|
1305
|
-
import { jsx as
|
|
1329
|
+
import { forwardRef as forwardRef10 } from "react";
|
|
1330
|
+
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1306
1331
|
var DEFAULT_ICONS = {
|
|
1307
1332
|
success: "check_circle",
|
|
1308
1333
|
info: "info",
|
|
1309
1334
|
warning: "warning",
|
|
1310
1335
|
error: "error"
|
|
1311
1336
|
};
|
|
1312
|
-
var KdsAlert =
|
|
1337
|
+
var KdsAlert = forwardRef10(
|
|
1313
1338
|
({ severity, title, icon, inline, onClose, children, className, ...props }, ref) => {
|
|
1314
1339
|
const resolvedIcon = icon === false ? null : typeof icon === "string" ? icon : DEFAULT_ICONS[severity];
|
|
1315
|
-
return /* @__PURE__ */
|
|
1340
|
+
return /* @__PURE__ */ jsxs8(
|
|
1316
1341
|
"div",
|
|
1317
1342
|
{
|
|
1318
1343
|
ref,
|
|
@@ -1320,19 +1345,19 @@ var KdsAlert = forwardRef9(
|
|
|
1320
1345
|
className: clsx("kds-alert", `kds-${severity}`, inline && "kds-alert-inline", className),
|
|
1321
1346
|
...props,
|
|
1322
1347
|
children: [
|
|
1323
|
-
resolvedIcon && /* @__PURE__ */
|
|
1324
|
-
/* @__PURE__ */
|
|
1325
|
-
title && /* @__PURE__ */
|
|
1326
|
-
/* @__PURE__ */
|
|
1348
|
+
resolvedIcon && /* @__PURE__ */ jsx11("div", { className: "kds-alert-icon", children: /* @__PURE__ */ jsx11("i", { className: "material-symbols-outlined", children: resolvedIcon }) }),
|
|
1349
|
+
/* @__PURE__ */ jsxs8("div", { className: "kds-alert-content", children: [
|
|
1350
|
+
title && /* @__PURE__ */ jsx11("p", { className: "kds-alert-title", children: title }),
|
|
1351
|
+
/* @__PURE__ */ jsx11("p", { className: "kds-alert-description", children })
|
|
1327
1352
|
] }),
|
|
1328
|
-
onClose && /* @__PURE__ */
|
|
1353
|
+
onClose && /* @__PURE__ */ jsx11(
|
|
1329
1354
|
"button",
|
|
1330
1355
|
{
|
|
1331
1356
|
type: "button",
|
|
1332
1357
|
className: "kds-alert-close",
|
|
1333
1358
|
onClick: onClose,
|
|
1334
1359
|
"aria-label": "Cerrar",
|
|
1335
|
-
children: /* @__PURE__ */
|
|
1360
|
+
children: /* @__PURE__ */ jsx11("i", { className: "material-symbols-outlined", children: "close" })
|
|
1336
1361
|
}
|
|
1337
1362
|
)
|
|
1338
1363
|
]
|
|
@@ -1343,8 +1368,8 @@ var KdsAlert = forwardRef9(
|
|
|
1343
1368
|
KdsAlert.displayName = "KdsAlert";
|
|
1344
1369
|
|
|
1345
1370
|
// src/components/core/KdsTypography/KdsTypography.tsx
|
|
1346
|
-
import { forwardRef as
|
|
1347
|
-
import { jsx as
|
|
1371
|
+
import { forwardRef as forwardRef11 } from "react";
|
|
1372
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
1348
1373
|
var variantTag = {
|
|
1349
1374
|
display1: "h1",
|
|
1350
1375
|
display2: "h2",
|
|
@@ -1360,10 +1385,10 @@ var variantTag = {
|
|
|
1360
1385
|
link: "span",
|
|
1361
1386
|
strong: "span"
|
|
1362
1387
|
};
|
|
1363
|
-
var KdsTypography =
|
|
1388
|
+
var KdsTypography = forwardRef11(
|
|
1364
1389
|
({ variant = "body", color, as, children, className, ...props }, ref) => {
|
|
1365
1390
|
const Tag = as || variantTag[variant];
|
|
1366
|
-
return /* @__PURE__ */
|
|
1391
|
+
return /* @__PURE__ */ jsx12(
|
|
1367
1392
|
Tag,
|
|
1368
1393
|
{
|
|
1369
1394
|
ref,
|
|
@@ -1381,7 +1406,7 @@ var KdsTypography = forwardRef10(
|
|
|
1381
1406
|
KdsTypography.displayName = "KdsTypography";
|
|
1382
1407
|
|
|
1383
1408
|
// src/components/core/KdsTabs/KdsTabs.tsx
|
|
1384
|
-
import
|
|
1409
|
+
import React12, { forwardRef as forwardRef12, Children, useMemo } from "react";
|
|
1385
1410
|
|
|
1386
1411
|
// src/components/core/hooks/useTabsKeyboard.ts
|
|
1387
1412
|
import { useCallback as useCallback2 } from "react";
|
|
@@ -1406,8 +1431,8 @@ function useTabsKeyboard(tabCount, activeIndex, onChange) {
|
|
|
1406
1431
|
}
|
|
1407
1432
|
|
|
1408
1433
|
// src/components/core/KdsTabs/KdsTabs.tsx
|
|
1409
|
-
import { jsx as
|
|
1410
|
-
var KdsTabs =
|
|
1434
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
1435
|
+
var KdsTabs = forwardRef12(
|
|
1411
1436
|
({ activeIndex, onChange, children, className, style, ...props }, ref) => {
|
|
1412
1437
|
const tabCount = Children.count(children);
|
|
1413
1438
|
const { onKeyDown } = useTabsKeyboard(tabCount, activeIndex, onChange);
|
|
@@ -1419,7 +1444,7 @@ var KdsTabs = forwardRef11(
|
|
|
1419
1444
|
}),
|
|
1420
1445
|
[tabCount, activeIndex, style]
|
|
1421
1446
|
);
|
|
1422
|
-
return /* @__PURE__ */
|
|
1447
|
+
return /* @__PURE__ */ jsx13(
|
|
1423
1448
|
"div",
|
|
1424
1449
|
{
|
|
1425
1450
|
ref,
|
|
@@ -1429,8 +1454,8 @@ var KdsTabs = forwardRef11(
|
|
|
1429
1454
|
onKeyDown,
|
|
1430
1455
|
...props,
|
|
1431
1456
|
children: Children.map(children, (child, i) => {
|
|
1432
|
-
if (!
|
|
1433
|
-
return
|
|
1457
|
+
if (!React12.isValidElement(child)) return child;
|
|
1458
|
+
return React12.cloneElement(child, {
|
|
1434
1459
|
_active: i === activeIndex,
|
|
1435
1460
|
_onClick: () => onChange(i)
|
|
1436
1461
|
});
|
|
@@ -1440,8 +1465,8 @@ var KdsTabs = forwardRef11(
|
|
|
1440
1465
|
}
|
|
1441
1466
|
);
|
|
1442
1467
|
KdsTabs.displayName = "KdsTabs";
|
|
1443
|
-
var KdsTab =
|
|
1444
|
-
({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */
|
|
1468
|
+
var KdsTab = forwardRef12(
|
|
1469
|
+
({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ jsx13(
|
|
1445
1470
|
"button",
|
|
1446
1471
|
{
|
|
1447
1472
|
ref,
|
|
@@ -1457,8 +1482,8 @@ var KdsTab = forwardRef11(
|
|
|
1457
1482
|
)
|
|
1458
1483
|
);
|
|
1459
1484
|
KdsTab.displayName = "KdsTab";
|
|
1460
|
-
var KdsTabPanel =
|
|
1461
|
-
({ active, children, className, ...props }, ref) => /* @__PURE__ */
|
|
1485
|
+
var KdsTabPanel = forwardRef12(
|
|
1486
|
+
({ active, children, className, ...props }, ref) => /* @__PURE__ */ jsx13(
|
|
1462
1487
|
"div",
|
|
1463
1488
|
{
|
|
1464
1489
|
ref,
|
|
@@ -1473,13 +1498,13 @@ var KdsTabPanel = forwardRef11(
|
|
|
1473
1498
|
KdsTabPanel.displayName = "KdsTabPanel";
|
|
1474
1499
|
|
|
1475
1500
|
// src/components/core/KdsRadioGroup/KdsRadioGroup.tsx
|
|
1476
|
-
import { forwardRef as
|
|
1477
|
-
import { jsx as
|
|
1478
|
-
var KdsRadioGroup =
|
|
1479
|
-
({ label, name, options, value, onChange, size, className, ...props }, ref) => /* @__PURE__ */
|
|
1480
|
-
label && /* @__PURE__ */
|
|
1481
|
-
options.map((opt) => /* @__PURE__ */
|
|
1482
|
-
/* @__PURE__ */
|
|
1501
|
+
import { forwardRef as forwardRef13 } from "react";
|
|
1502
|
+
import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1503
|
+
var KdsRadioGroup = forwardRef13(
|
|
1504
|
+
({ label, name, options, value, onChange, size, className, ...props }, ref) => /* @__PURE__ */ jsxs9("fieldset", { ref, className: clsx("kds-radio-group", className), ...props, children: [
|
|
1505
|
+
label && /* @__PURE__ */ jsx14("legend", { children: label }),
|
|
1506
|
+
options.map((opt) => /* @__PURE__ */ jsxs9("label", { className: clsx("radio", size), children: [
|
|
1507
|
+
/* @__PURE__ */ jsx14(
|
|
1483
1508
|
"input",
|
|
1484
1509
|
{
|
|
1485
1510
|
type: "radio",
|
|
@@ -1490,16 +1515,16 @@ var KdsRadioGroup = forwardRef12(
|
|
|
1490
1515
|
onChange: () => onChange?.(opt.value)
|
|
1491
1516
|
}
|
|
1492
1517
|
),
|
|
1493
|
-
/* @__PURE__ */
|
|
1518
|
+
/* @__PURE__ */ jsx14("span", { children: opt.label })
|
|
1494
1519
|
] }, opt.value))
|
|
1495
1520
|
] })
|
|
1496
1521
|
);
|
|
1497
1522
|
KdsRadioGroup.displayName = "KdsRadioGroup";
|
|
1498
1523
|
|
|
1499
1524
|
// src/components/core/KdsSelect/KdsSelect.tsx
|
|
1500
|
-
import { forwardRef as
|
|
1501
|
-
import { jsx as
|
|
1502
|
-
var KdsSelect =
|
|
1525
|
+
import { forwardRef as forwardRef14 } from "react";
|
|
1526
|
+
import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1527
|
+
var KdsSelect = forwardRef14(
|
|
1503
1528
|
({
|
|
1504
1529
|
label,
|
|
1505
1530
|
options,
|
|
@@ -1515,7 +1540,7 @@ var KdsSelect = forwardRef13(
|
|
|
1515
1540
|
...props
|
|
1516
1541
|
}, ref) => {
|
|
1517
1542
|
const fieldId = id || `kds-select-${label.toLowerCase().replace(/\s+/g, "-")}`;
|
|
1518
|
-
return /* @__PURE__ */
|
|
1543
|
+
return /* @__PURE__ */ jsxs10(
|
|
1519
1544
|
"div",
|
|
1520
1545
|
{
|
|
1521
1546
|
className: clsx(
|
|
@@ -1528,8 +1553,8 @@ var KdsSelect = forwardRef13(
|
|
|
1528
1553
|
className
|
|
1529
1554
|
),
|
|
1530
1555
|
children: [
|
|
1531
|
-
prefixIcon && /* @__PURE__ */
|
|
1532
|
-
/* @__PURE__ */
|
|
1556
|
+
prefixIcon && /* @__PURE__ */ jsx15("i", { className: "material-symbols-outlined", children: prefixIcon }),
|
|
1557
|
+
/* @__PURE__ */ jsxs10(
|
|
1533
1558
|
"select",
|
|
1534
1559
|
{
|
|
1535
1560
|
ref,
|
|
@@ -1538,16 +1563,16 @@ var KdsSelect = forwardRef13(
|
|
|
1538
1563
|
required,
|
|
1539
1564
|
...props,
|
|
1540
1565
|
children: [
|
|
1541
|
-
placeholder !== void 0 && /* @__PURE__ */
|
|
1542
|
-
options.map((opt) => /* @__PURE__ */
|
|
1566
|
+
placeholder !== void 0 && /* @__PURE__ */ jsx15("option", { value: "", children: placeholder }),
|
|
1567
|
+
options.map((opt) => /* @__PURE__ */ jsx15("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
|
|
1543
1568
|
]
|
|
1544
1569
|
}
|
|
1545
1570
|
),
|
|
1546
|
-
/* @__PURE__ */
|
|
1571
|
+
/* @__PURE__ */ jsxs10("label", { htmlFor: fieldId, children: [
|
|
1547
1572
|
label,
|
|
1548
1573
|
required && " *"
|
|
1549
1574
|
] }),
|
|
1550
|
-
helperText && /* @__PURE__ */
|
|
1575
|
+
helperText && /* @__PURE__ */ jsx15("span", { className: "helper", children: helperText })
|
|
1551
1576
|
]
|
|
1552
1577
|
}
|
|
1553
1578
|
);
|
|
@@ -1556,13 +1581,13 @@ var KdsSelect = forwardRef13(
|
|
|
1556
1581
|
KdsSelect.displayName = "KdsSelect";
|
|
1557
1582
|
|
|
1558
1583
|
// src/components/core/KdsChip/KdsChip.tsx
|
|
1559
|
-
import { forwardRef as
|
|
1560
|
-
import { jsx as
|
|
1561
|
-
var KdsChip =
|
|
1562
|
-
({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */
|
|
1563
|
-
icon && /* @__PURE__ */
|
|
1564
|
-
/* @__PURE__ */
|
|
1565
|
-
onDelete && /* @__PURE__ */
|
|
1584
|
+
import { forwardRef as forwardRef15 } from "react";
|
|
1585
|
+
import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1586
|
+
var KdsChip = forwardRef15(
|
|
1587
|
+
({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ jsxs11("span", { ref, className: clsx("kds-badge", color, className), ...props, children: [
|
|
1588
|
+
icon && /* @__PURE__ */ jsx16("i", { className: "material-symbols-outlined", children: icon }),
|
|
1589
|
+
/* @__PURE__ */ jsx16("span", { children }),
|
|
1590
|
+
onDelete && /* @__PURE__ */ jsx16(
|
|
1566
1591
|
"button",
|
|
1567
1592
|
{
|
|
1568
1593
|
type: "button",
|
|
@@ -1572,7 +1597,7 @@ var KdsChip = forwardRef14(
|
|
|
1572
1597
|
onDelete();
|
|
1573
1598
|
},
|
|
1574
1599
|
"aria-label": "Eliminar",
|
|
1575
|
-
children: /* @__PURE__ */
|
|
1600
|
+
children: /* @__PURE__ */ jsx16("i", { className: "material-symbols-outlined", children: "close" })
|
|
1576
1601
|
}
|
|
1577
1602
|
)
|
|
1578
1603
|
] })
|
|
@@ -1580,7 +1605,7 @@ var KdsChip = forwardRef14(
|
|
|
1580
1605
|
KdsChip.displayName = "KdsChip";
|
|
1581
1606
|
|
|
1582
1607
|
// src/components/core/KdsSnackbar/KdsSnackbar.tsx
|
|
1583
|
-
import { forwardRef as
|
|
1608
|
+
import { forwardRef as forwardRef16 } from "react";
|
|
1584
1609
|
|
|
1585
1610
|
// src/components/core/hooks/useAutoHide.ts
|
|
1586
1611
|
import { useState as useState3, useEffect, useRef } from "react";
|
|
@@ -1600,13 +1625,13 @@ function useAutoHide(durationMs, onHide) {
|
|
|
1600
1625
|
}
|
|
1601
1626
|
|
|
1602
1627
|
// src/components/core/KdsSnackbar/KdsSnackbar.tsx
|
|
1603
|
-
import { jsx as
|
|
1628
|
+
import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1604
1629
|
var DEFAULT_ICONS2 = {
|
|
1605
1630
|
info: "info",
|
|
1606
1631
|
success: "check_circle",
|
|
1607
1632
|
error: "error"
|
|
1608
1633
|
};
|
|
1609
|
-
var KdsSnackbar =
|
|
1634
|
+
var KdsSnackbar = forwardRef16(
|
|
1610
1635
|
({
|
|
1611
1636
|
message,
|
|
1612
1637
|
type = "info",
|
|
@@ -1623,7 +1648,7 @@ var KdsSnackbar = forwardRef15(
|
|
|
1623
1648
|
if (!open || !visible) return null;
|
|
1624
1649
|
const resolvedIcon = icon === false ? null : icon ?? DEFAULT_ICONS2[type];
|
|
1625
1650
|
const mergedStyle = autoDismiss ? { ...style, ["--kds-snackbar-duration"]: `${duration}ms` } : style ?? {};
|
|
1626
|
-
return /* @__PURE__ */
|
|
1651
|
+
return /* @__PURE__ */ jsxs12(
|
|
1627
1652
|
"div",
|
|
1628
1653
|
{
|
|
1629
1654
|
ref,
|
|
@@ -1633,16 +1658,16 @@ var KdsSnackbar = forwardRef15(
|
|
|
1633
1658
|
style: mergedStyle,
|
|
1634
1659
|
...props,
|
|
1635
1660
|
children: [
|
|
1636
|
-
resolvedIcon && /* @__PURE__ */
|
|
1637
|
-
/* @__PURE__ */
|
|
1638
|
-
onClose && /* @__PURE__ */
|
|
1661
|
+
resolvedIcon && /* @__PURE__ */ jsx17("i", { className: "material-symbols-outlined", children: resolvedIcon }),
|
|
1662
|
+
/* @__PURE__ */ jsx17("span", { className: "max", children: message }),
|
|
1663
|
+
onClose && /* @__PURE__ */ jsx17(
|
|
1639
1664
|
"button",
|
|
1640
1665
|
{
|
|
1641
1666
|
type: "button",
|
|
1642
1667
|
className: "kds-snackbar-close",
|
|
1643
1668
|
onClick: onClose,
|
|
1644
1669
|
"aria-label": "Cerrar",
|
|
1645
|
-
children: /* @__PURE__ */
|
|
1670
|
+
children: /* @__PURE__ */ jsx17("i", { className: "material-symbols-outlined", children: "close" })
|
|
1646
1671
|
}
|
|
1647
1672
|
)
|
|
1648
1673
|
]
|
|
@@ -1654,7 +1679,7 @@ KdsSnackbar.displayName = "KdsSnackbar";
|
|
|
1654
1679
|
|
|
1655
1680
|
// src/components/core/KdsTooltip/KdsTooltip.tsx
|
|
1656
1681
|
import * as Tooltip from "@radix-ui/react-tooltip";
|
|
1657
|
-
import { jsx as
|
|
1682
|
+
import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1658
1683
|
function KdsTooltip({
|
|
1659
1684
|
content,
|
|
1660
1685
|
children,
|
|
@@ -1665,9 +1690,9 @@ function KdsTooltip({
|
|
|
1665
1690
|
onOpenChange,
|
|
1666
1691
|
delayDuration = 300
|
|
1667
1692
|
}) {
|
|
1668
|
-
return /* @__PURE__ */
|
|
1669
|
-
/* @__PURE__ */
|
|
1670
|
-
/* @__PURE__ */
|
|
1693
|
+
return /* @__PURE__ */ jsx18(Tooltip.Provider, { delayDuration, children: /* @__PURE__ */ jsxs13(Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
|
|
1694
|
+
/* @__PURE__ */ jsx18(Tooltip.Trigger, { asChild: true, children }),
|
|
1695
|
+
/* @__PURE__ */ jsx18(Tooltip.Portal, { children: /* @__PURE__ */ jsxs13(
|
|
1671
1696
|
Tooltip.Content,
|
|
1672
1697
|
{
|
|
1673
1698
|
className: clsx("kds-tooltip", className),
|
|
@@ -1676,7 +1701,7 @@ function KdsTooltip({
|
|
|
1676
1701
|
collisionPadding: 8,
|
|
1677
1702
|
children: [
|
|
1678
1703
|
content,
|
|
1679
|
-
/* @__PURE__ */
|
|
1704
|
+
/* @__PURE__ */ jsx18(Tooltip.Arrow, { className: "kds-tooltip-arrow", width: 10, height: 5 })
|
|
1680
1705
|
]
|
|
1681
1706
|
}
|
|
1682
1707
|
) })
|
|
@@ -1684,68 +1709,68 @@ function KdsTooltip({
|
|
|
1684
1709
|
}
|
|
1685
1710
|
|
|
1686
1711
|
// src/components/core/KdsAccordion/KdsAccordion.tsx
|
|
1687
|
-
import { forwardRef as
|
|
1688
|
-
import { jsx as
|
|
1689
|
-
var KdsAccordion =
|
|
1690
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */
|
|
1712
|
+
import { forwardRef as forwardRef17 } from "react";
|
|
1713
|
+
import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1714
|
+
var KdsAccordion = forwardRef17(
|
|
1715
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ jsx19("details", { ref, className: clsx("kds-accordion", className), ...props, children })
|
|
1691
1716
|
);
|
|
1692
1717
|
KdsAccordion.displayName = "KdsAccordion";
|
|
1693
|
-
var KdsAccordionSummary =
|
|
1694
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */
|
|
1718
|
+
var KdsAccordionSummary = forwardRef17(
|
|
1719
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs14("summary", { ref, className: clsx("kds-accordion-summary", className), ...props, children: [
|
|
1695
1720
|
children,
|
|
1696
|
-
/* @__PURE__ */
|
|
1721
|
+
/* @__PURE__ */ jsx19("i", { className: "material-symbols-outlined", children: "expand_more" })
|
|
1697
1722
|
] })
|
|
1698
1723
|
);
|
|
1699
1724
|
KdsAccordionSummary.displayName = "KdsAccordionSummary";
|
|
1700
|
-
var KdsAccordionDetails =
|
|
1701
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */
|
|
1725
|
+
var KdsAccordionDetails = forwardRef17(
|
|
1726
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ jsx19("div", { ref, className: clsx("kds-accordion-details", className), ...props, children })
|
|
1702
1727
|
);
|
|
1703
1728
|
KdsAccordionDetails.displayName = "KdsAccordionDetails";
|
|
1704
1729
|
|
|
1705
1730
|
// src/components/core/KdsDivider/KdsDivider.tsx
|
|
1706
|
-
import { forwardRef as
|
|
1707
|
-
import { jsx as
|
|
1708
|
-
var KdsDivider =
|
|
1709
|
-
({ dashed, className, ...props }, ref) => /* @__PURE__ */
|
|
1731
|
+
import { forwardRef as forwardRef18 } from "react";
|
|
1732
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
1733
|
+
var KdsDivider = forwardRef18(
|
|
1734
|
+
({ dashed, className, ...props }, ref) => /* @__PURE__ */ jsx20("hr", { ref, className: clsx(dashed ? "kds-hr-dashed" : "kds-hr", className), ...props })
|
|
1710
1735
|
);
|
|
1711
1736
|
KdsDivider.displayName = "KdsDivider";
|
|
1712
1737
|
|
|
1713
1738
|
// src/components/core/KdsSectionNote/KdsSectionNote.tsx
|
|
1714
|
-
import { forwardRef as
|
|
1715
|
-
import { jsx as
|
|
1716
|
-
var KdsSectionNote =
|
|
1717
|
-
({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */
|
|
1718
|
-
/* @__PURE__ */
|
|
1719
|
-
/* @__PURE__ */
|
|
1739
|
+
import { forwardRef as forwardRef19 } from "react";
|
|
1740
|
+
import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1741
|
+
var KdsSectionNote = forwardRef19(
|
|
1742
|
+
({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ jsxs15("p", { ref, className: clsx("kds-section-note", className), ...props, children: [
|
|
1743
|
+
/* @__PURE__ */ jsx21("i", { className: "material-symbols-outlined", children: icon }),
|
|
1744
|
+
/* @__PURE__ */ jsx21("span", { children })
|
|
1720
1745
|
] })
|
|
1721
1746
|
);
|
|
1722
1747
|
KdsSectionNote.displayName = "KdsSectionNote";
|
|
1723
1748
|
|
|
1724
1749
|
// src/components/core/KdsStatusBlock/KdsStatusBlock.tsx
|
|
1725
|
-
import { forwardRef as
|
|
1726
|
-
import { jsx as
|
|
1727
|
-
var KdsStatusBlock =
|
|
1728
|
-
({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */
|
|
1729
|
-
/* @__PURE__ */
|
|
1730
|
-
/* @__PURE__ */
|
|
1731
|
-
/* @__PURE__ */
|
|
1732
|
-
description && /* @__PURE__ */
|
|
1750
|
+
import { forwardRef as forwardRef20 } from "react";
|
|
1751
|
+
import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1752
|
+
var KdsStatusBlock = forwardRef20(
|
|
1753
|
+
({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ jsxs16("div", { ref, className: clsx("kds-status-block", inline && "inline", className), "data-status": status, ...props, children: [
|
|
1754
|
+
/* @__PURE__ */ jsx22("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ jsx22("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
1755
|
+
/* @__PURE__ */ jsxs16("div", { children: [
|
|
1756
|
+
/* @__PURE__ */ jsx22("h2", { className: "kds-status-block-title", children: title }),
|
|
1757
|
+
description && /* @__PURE__ */ jsx22("p", { className: "kds-status-block-description", children: description })
|
|
1733
1758
|
] })
|
|
1734
1759
|
] })
|
|
1735
1760
|
);
|
|
1736
1761
|
KdsStatusBlock.displayName = "KdsStatusBlock";
|
|
1737
1762
|
|
|
1738
1763
|
// src/components/core/KdsStepper/KdsStepper.tsx
|
|
1739
|
-
import { forwardRef as
|
|
1740
|
-
import { jsx as
|
|
1741
|
-
var KdsStepper =
|
|
1742
|
-
({ steps, current, className, ...props }, ref) => /* @__PURE__ */
|
|
1764
|
+
import { forwardRef as forwardRef21 } from "react";
|
|
1765
|
+
import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1766
|
+
var KdsStepper = forwardRef21(
|
|
1767
|
+
({ steps, current, className, ...props }, ref) => /* @__PURE__ */ jsx23("div", { ref, className: clsx("kds-stepper", className), ...props, children: steps.map((label, i) => /* @__PURE__ */ jsxs17(
|
|
1743
1768
|
"div",
|
|
1744
1769
|
{
|
|
1745
1770
|
className: clsx("kds-step", i < current && "completed", i === current && "current"),
|
|
1746
1771
|
children: [
|
|
1747
|
-
/* @__PURE__ */
|
|
1748
|
-
/* @__PURE__ */
|
|
1772
|
+
/* @__PURE__ */ jsx23("div", { className: "kds-step-indicator" }),
|
|
1773
|
+
/* @__PURE__ */ jsx23("div", { className: "kds-step-label", children: label })
|
|
1749
1774
|
]
|
|
1750
1775
|
},
|
|
1751
1776
|
`${i}-${label}`
|
|
@@ -1754,12 +1779,12 @@ var KdsStepper = forwardRef20(
|
|
|
1754
1779
|
KdsStepper.displayName = "KdsStepper";
|
|
1755
1780
|
|
|
1756
1781
|
// src/components/core/KdsCopyRow/KdsCopyRow.tsx
|
|
1757
|
-
import { forwardRef as
|
|
1758
|
-
import { jsx as
|
|
1759
|
-
var KdsCopyRow =
|
|
1782
|
+
import { forwardRef as forwardRef22 } from "react";
|
|
1783
|
+
import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1784
|
+
var KdsCopyRow = forwardRef22(
|
|
1760
1785
|
({ label, value, copiedText = "Copiado", className, ...props }, ref) => {
|
|
1761
1786
|
const { copied, copy } = useCopyToClipboard();
|
|
1762
|
-
return /* @__PURE__ */
|
|
1787
|
+
return /* @__PURE__ */ jsxs18(
|
|
1763
1788
|
"button",
|
|
1764
1789
|
{
|
|
1765
1790
|
ref,
|
|
@@ -1770,13 +1795,13 @@ var KdsCopyRow = forwardRef21(
|
|
|
1770
1795
|
"aria-label": `Copiar ${label}: ${value}`,
|
|
1771
1796
|
...props,
|
|
1772
1797
|
children: [
|
|
1773
|
-
/* @__PURE__ */
|
|
1774
|
-
/* @__PURE__ */
|
|
1775
|
-
/* @__PURE__ */
|
|
1776
|
-
/* @__PURE__ */
|
|
1798
|
+
/* @__PURE__ */ jsx24("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "content_copy" }),
|
|
1799
|
+
/* @__PURE__ */ jsxs18("div", { children: [
|
|
1800
|
+
/* @__PURE__ */ jsx24("span", { className: "kds-copy-row-label", children: label }),
|
|
1801
|
+
/* @__PURE__ */ jsx24("span", { className: "kds-copy-row-value", children: value })
|
|
1777
1802
|
] }),
|
|
1778
|
-
/* @__PURE__ */
|
|
1779
|
-
/* @__PURE__ */
|
|
1803
|
+
/* @__PURE__ */ jsxs18("span", { className: "kds-copy-toast", "aria-hidden": "true", children: [
|
|
1804
|
+
/* @__PURE__ */ jsx24("i", { className: "material-symbols-outlined", children: "check_circle" }),
|
|
1780
1805
|
" ",
|
|
1781
1806
|
copiedText
|
|
1782
1807
|
] })
|
|
@@ -1788,8 +1813,8 @@ var KdsCopyRow = forwardRef21(
|
|
|
1788
1813
|
KdsCopyRow.displayName = "KdsCopyRow";
|
|
1789
1814
|
|
|
1790
1815
|
// src/components/core/KdsCopyableTable/KdsCopyableTable.tsx
|
|
1791
|
-
import { forwardRef as
|
|
1792
|
-
import { Fragment as Fragment2, jsx as
|
|
1816
|
+
import { forwardRef as forwardRef23, useState as useState4, useRef as useRef2, useCallback as useCallback3 } from "react";
|
|
1817
|
+
import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1793
1818
|
async function copyToClipboard(text) {
|
|
1794
1819
|
try {
|
|
1795
1820
|
if (navigator.clipboard?.writeText) {
|
|
@@ -1821,18 +1846,18 @@ function GridVariant({
|
|
|
1821
1846
|
forwardedRef,
|
|
1822
1847
|
rest
|
|
1823
1848
|
}) {
|
|
1824
|
-
return /* @__PURE__ */
|
|
1849
|
+
return /* @__PURE__ */ jsx25(
|
|
1825
1850
|
"div",
|
|
1826
1851
|
{
|
|
1827
1852
|
ref: forwardedRef,
|
|
1828
1853
|
className: clsx("kds-copyable-table", "kds-copyable-table--grid", className),
|
|
1829
1854
|
...rest,
|
|
1830
|
-
children: gridRows.map((cells, rowIndex) => /* @__PURE__ */
|
|
1855
|
+
children: gridRows.map((cells, rowIndex) => /* @__PURE__ */ jsx25(
|
|
1831
1856
|
"div",
|
|
1832
1857
|
{
|
|
1833
1858
|
className: "kds-copyable-table-row kds-copyable-table-row--grid",
|
|
1834
1859
|
"data-testid": "kds-grid-row",
|
|
1835
|
-
children: cells.map((text, cellIndex) => /* @__PURE__ */
|
|
1860
|
+
children: cells.map((text, cellIndex) => /* @__PURE__ */ jsx25(
|
|
1836
1861
|
"span",
|
|
1837
1862
|
{
|
|
1838
1863
|
className: clsx("kds-grid-cell", disabled && "kds-grid-cell--disabled"),
|
|
@@ -1919,8 +1944,8 @@ function CopyableVariant({
|
|
|
1919
1944
|
setTimeout(() => setAllCopied(false), 2e3);
|
|
1920
1945
|
}
|
|
1921
1946
|
};
|
|
1922
|
-
return /* @__PURE__ */
|
|
1923
|
-
/* @__PURE__ */
|
|
1947
|
+
return /* @__PURE__ */ jsxs19(Fragment2, { children: [
|
|
1948
|
+
/* @__PURE__ */ jsx25("div", { ref: forwardedRef, className: clsx("kds-copyable-table", className), ...rest, children: rows.map((row, i) => /* @__PURE__ */ jsxs19(
|
|
1924
1949
|
"div",
|
|
1925
1950
|
{
|
|
1926
1951
|
className: clsx(
|
|
@@ -1939,13 +1964,13 @@ function CopyableVariant({
|
|
|
1939
1964
|
},
|
|
1940
1965
|
"aria-label": `Copiar ${row.label}: ${row.value}`,
|
|
1941
1966
|
children: [
|
|
1942
|
-
/* @__PURE__ */
|
|
1943
|
-
/* @__PURE__ */
|
|
1967
|
+
/* @__PURE__ */ jsx25("span", { className: "kds-key", children: row.label }),
|
|
1968
|
+
/* @__PURE__ */ jsx25("span", { className: "kds-value", children: row.value })
|
|
1944
1969
|
]
|
|
1945
1970
|
},
|
|
1946
1971
|
`${row.label}-${i}`
|
|
1947
1972
|
)) }),
|
|
1948
|
-
showCopyAll && /* @__PURE__ */
|
|
1973
|
+
showCopyAll && /* @__PURE__ */ jsxs19(
|
|
1949
1974
|
"button",
|
|
1950
1975
|
{
|
|
1951
1976
|
type: "button",
|
|
@@ -1959,14 +1984,14 @@ function CopyableVariant({
|
|
|
1959
1984
|
onClick: handleCopyAll,
|
|
1960
1985
|
"aria-label": allCopied ? copiedAllLabel : copyAllLabel,
|
|
1961
1986
|
children: [
|
|
1962
|
-
/* @__PURE__ */
|
|
1963
|
-
/* @__PURE__ */
|
|
1987
|
+
/* @__PURE__ */ jsx25("span", { className: "kds-icon", children: /* @__PURE__ */ jsx25("i", { className: "material-symbols-outlined", children: allCopied ? "check" : "content_copy" }) }),
|
|
1988
|
+
/* @__PURE__ */ jsx25("span", { children: allCopied ? copiedAllLabel : copyAllLabel })
|
|
1964
1989
|
]
|
|
1965
1990
|
}
|
|
1966
1991
|
)
|
|
1967
1992
|
] });
|
|
1968
1993
|
}
|
|
1969
|
-
var KdsCopyableTable =
|
|
1994
|
+
var KdsCopyableTable = forwardRef23(
|
|
1970
1995
|
({
|
|
1971
1996
|
rows = [],
|
|
1972
1997
|
variant = "copyable",
|
|
@@ -1979,7 +2004,7 @@ var KdsCopyableTable = forwardRef22(
|
|
|
1979
2004
|
...props
|
|
1980
2005
|
}, ref) => {
|
|
1981
2006
|
if (variant === "grid") {
|
|
1982
|
-
return /* @__PURE__ */
|
|
2007
|
+
return /* @__PURE__ */ jsx25(
|
|
1983
2008
|
GridVariant,
|
|
1984
2009
|
{
|
|
1985
2010
|
gridRows,
|
|
@@ -1990,7 +2015,7 @@ var KdsCopyableTable = forwardRef22(
|
|
|
1990
2015
|
}
|
|
1991
2016
|
);
|
|
1992
2017
|
}
|
|
1993
|
-
return /* @__PURE__ */
|
|
2018
|
+
return /* @__PURE__ */ jsx25(
|
|
1994
2019
|
CopyableVariant,
|
|
1995
2020
|
{
|
|
1996
2021
|
rows,
|
|
@@ -2007,32 +2032,32 @@ var KdsCopyableTable = forwardRef22(
|
|
|
2007
2032
|
KdsCopyableTable.displayName = "KdsCopyableTable";
|
|
2008
2033
|
|
|
2009
2034
|
// src/components/core/KdsExpandPanel/KdsExpandPanel.tsx
|
|
2010
|
-
import { forwardRef as
|
|
2011
|
-
import { jsx as
|
|
2012
|
-
var KdsExpandPanel =
|
|
2035
|
+
import { forwardRef as forwardRef24, useState as useState5 } from "react";
|
|
2036
|
+
import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2037
|
+
var KdsExpandPanel = forwardRef24(
|
|
2013
2038
|
({ label, defaultExpanded = false, children, className, ...props }, ref) => {
|
|
2014
2039
|
const [expanded, setExpanded] = useState5(defaultExpanded);
|
|
2015
|
-
return /* @__PURE__ */
|
|
2016
|
-
/* @__PURE__ */
|
|
2040
|
+
return /* @__PURE__ */ jsxs20("div", { ref, className, ...props, children: [
|
|
2041
|
+
/* @__PURE__ */ jsxs20(
|
|
2017
2042
|
"button",
|
|
2018
2043
|
{
|
|
2019
2044
|
className: "kds-expand-toggle",
|
|
2020
2045
|
onClick: () => setExpanded((v) => !v),
|
|
2021
2046
|
"aria-expanded": expanded,
|
|
2022
2047
|
children: [
|
|
2023
|
-
/* @__PURE__ */
|
|
2024
|
-
/* @__PURE__ */
|
|
2048
|
+
/* @__PURE__ */ jsx26("span", { children: label }),
|
|
2049
|
+
/* @__PURE__ */ jsx26("i", { className: "material-symbols-outlined", children: expanded ? "expand_less" : "expand_more" })
|
|
2025
2050
|
]
|
|
2026
2051
|
}
|
|
2027
2052
|
),
|
|
2028
|
-
/* @__PURE__ */
|
|
2053
|
+
/* @__PURE__ */ jsx26("div", { className: clsx("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
|
|
2029
2054
|
] });
|
|
2030
2055
|
}
|
|
2031
2056
|
);
|
|
2032
2057
|
KdsExpandPanel.displayName = "KdsExpandPanel";
|
|
2033
2058
|
|
|
2034
2059
|
// src/components/core/KdsCountdown/KdsCountdown.tsx
|
|
2035
|
-
import { forwardRef as
|
|
2060
|
+
import { forwardRef as forwardRef25, useEffect as useEffect3, useRef as useRef3 } from "react";
|
|
2036
2061
|
|
|
2037
2062
|
// src/components/core/hooks/useCountdown.ts
|
|
2038
2063
|
import { useState as useState6, useEffect as useEffect2 } from "react";
|
|
@@ -2058,8 +2083,8 @@ function useCountdown(deadline) {
|
|
|
2058
2083
|
}
|
|
2059
2084
|
|
|
2060
2085
|
// src/components/core/KdsCountdown/KdsCountdown.tsx
|
|
2061
|
-
import { jsx as
|
|
2062
|
-
var KdsCountdown =
|
|
2086
|
+
import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2087
|
+
var KdsCountdown = forwardRef25(
|
|
2063
2088
|
({ deadline, label, onExpire, className, ...props }, ref) => {
|
|
2064
2089
|
const { hours, minutes, seconds, expired, urgent } = useCountdown(deadline);
|
|
2065
2090
|
const onExpireRef = useRef3(onExpire);
|
|
@@ -2073,9 +2098,9 @@ var KdsCountdown = forwardRef24(
|
|
|
2073
2098
|
return null;
|
|
2074
2099
|
}
|
|
2075
2100
|
const pad = (n) => String(n).padStart(2, "0");
|
|
2076
|
-
return /* @__PURE__ */
|
|
2077
|
-
label && /* @__PURE__ */
|
|
2078
|
-
/* @__PURE__ */
|
|
2101
|
+
return /* @__PURE__ */ jsxs21("div", { ref, className: clsx("kds-countdown", urgent && "urgent", className), ...props, children: [
|
|
2102
|
+
label && /* @__PURE__ */ jsx27("span", { className: "kds-countdown-label", children: label }),
|
|
2103
|
+
/* @__PURE__ */ jsxs21("span", { className: "kds-countdown-value", children: [
|
|
2079
2104
|
pad(hours),
|
|
2080
2105
|
":",
|
|
2081
2106
|
pad(minutes),
|
|
@@ -2088,18 +2113,18 @@ var KdsCountdown = forwardRef24(
|
|
|
2088
2113
|
KdsCountdown.displayName = "KdsCountdown";
|
|
2089
2114
|
|
|
2090
2115
|
// src/components/core/KdsSegmentedTabs/KdsSegmentedTabs.tsx
|
|
2091
|
-
import { forwardRef as
|
|
2092
|
-
import { jsx as
|
|
2093
|
-
var KdsSegmentedTabs =
|
|
2094
|
-
(props, ref) => /* @__PURE__ */
|
|
2116
|
+
import { forwardRef as forwardRef26 } from "react";
|
|
2117
|
+
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
2118
|
+
var KdsSegmentedTabs = forwardRef26(
|
|
2119
|
+
(props, ref) => /* @__PURE__ */ jsx28(KdsTabs, { ref, ...props })
|
|
2095
2120
|
);
|
|
2096
2121
|
KdsSegmentedTabs.displayName = "KdsSegmentedTabs";
|
|
2097
2122
|
|
|
2098
2123
|
// src/components/domain/KdsBankRow/KdsBankRow.tsx
|
|
2099
|
-
import { forwardRef as
|
|
2100
|
-
import { jsx as
|
|
2101
|
-
var KdsBankRow =
|
|
2102
|
-
({ name, logoUrl, selected, className, ...props }, ref) => /* @__PURE__ */
|
|
2124
|
+
import { forwardRef as forwardRef27 } from "react";
|
|
2125
|
+
import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2126
|
+
var KdsBankRow = forwardRef27(
|
|
2127
|
+
({ name, logoUrl, selected, className, ...props }, ref) => /* @__PURE__ */ jsxs22(
|
|
2103
2128
|
"button",
|
|
2104
2129
|
{
|
|
2105
2130
|
ref,
|
|
@@ -2107,9 +2132,9 @@ var KdsBankRow = forwardRef26(
|
|
|
2107
2132
|
className: clsx("kds-bank-row", selected && "selected", className),
|
|
2108
2133
|
...props,
|
|
2109
2134
|
children: [
|
|
2110
|
-
/* @__PURE__ */
|
|
2111
|
-
/* @__PURE__ */
|
|
2112
|
-
/* @__PURE__ */
|
|
2135
|
+
/* @__PURE__ */ jsx29("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ jsx29("img", { src: logoUrl, alt: name }) : /* @__PURE__ */ jsx29("span", { className: "initials", children: name.charAt(0) }) }),
|
|
2136
|
+
/* @__PURE__ */ jsx29("span", { className: "kds-bank-row-name", children: name }),
|
|
2137
|
+
/* @__PURE__ */ jsx29("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
|
|
2113
2138
|
]
|
|
2114
2139
|
}
|
|
2115
2140
|
)
|
|
@@ -2117,67 +2142,66 @@ var KdsBankRow = forwardRef26(
|
|
|
2117
2142
|
KdsBankRow.displayName = "KdsBankRow";
|
|
2118
2143
|
|
|
2119
2144
|
// src/components/domain/KdsBankList/KdsBankList.tsx
|
|
2120
|
-
import { forwardRef as
|
|
2121
|
-
import { jsx as
|
|
2122
|
-
var KdsBankList =
|
|
2123
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */
|
|
2145
|
+
import { forwardRef as forwardRef28 } from "react";
|
|
2146
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
2147
|
+
var KdsBankList = forwardRef28(
|
|
2148
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ jsx30("div", { ref, className: clsx("kds-bank-list", className), role: "list", ...props, children })
|
|
2124
2149
|
);
|
|
2125
2150
|
KdsBankList.displayName = "KdsBankList";
|
|
2126
2151
|
|
|
2127
2152
|
// src/components/domain/KdsBankModal/KdsBankModal.tsx
|
|
2128
|
-
import { forwardRef as
|
|
2153
|
+
import { forwardRef as forwardRef29, useState as useState7 } from "react";
|
|
2129
2154
|
import * as Dialog from "@radix-ui/react-dialog";
|
|
2130
|
-
import { jsx as
|
|
2131
|
-
var KdsBankModal =
|
|
2155
|
+
import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2156
|
+
var KdsBankModal = forwardRef29(
|
|
2132
2157
|
({ open, onClose, title = "Selecciona tu banco", searchPlaceholder = "Buscar banco...", onSearch, children, className, container }, ref) => {
|
|
2133
2158
|
const [query, setQuery] = useState7("");
|
|
2134
2159
|
const handleSearch = (value) => {
|
|
2135
2160
|
setQuery(value);
|
|
2136
2161
|
onSearch?.(value);
|
|
2137
2162
|
};
|
|
2138
|
-
return /* @__PURE__ */
|
|
2163
|
+
return /* @__PURE__ */ jsx31(Dialog.Root, { open, onOpenChange: (o) => {
|
|
2139
2164
|
if (!o) onClose();
|
|
2140
|
-
}, children: /* @__PURE__ */
|
|
2141
|
-
/* @__PURE__ */
|
|
2142
|
-
/* @__PURE__ */
|
|
2143
|
-
/* @__PURE__ */
|
|
2165
|
+
}, children: /* @__PURE__ */ jsx31(Dialog.Portal, { container, children: /* @__PURE__ */ jsx31(Dialog.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ jsxs23(Dialog.Content, { ref, className: clsx("kds-bank-modal", className), children: [
|
|
2166
|
+
/* @__PURE__ */ jsxs23("div", { className: "kds-bank-modal-header", children: [
|
|
2167
|
+
/* @__PURE__ */ jsx31(Dialog.Title, { asChild: true, children: /* @__PURE__ */ jsx31("h3", { children: title }) }),
|
|
2168
|
+
/* @__PURE__ */ jsx31(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx31("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ jsx31("i", { className: "material-symbols-outlined", children: "close" }) }) })
|
|
2144
2169
|
] }),
|
|
2145
|
-
/* @__PURE__ */
|
|
2146
|
-
|
|
2170
|
+
/* @__PURE__ */ jsx31("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ jsx31(
|
|
2171
|
+
KdsSearchField,
|
|
2147
2172
|
{
|
|
2148
|
-
type: "text",
|
|
2149
2173
|
placeholder: searchPlaceholder,
|
|
2150
2174
|
value: query,
|
|
2151
2175
|
onChange: (e) => handleSearch(e.target.value)
|
|
2152
2176
|
}
|
|
2153
2177
|
) }),
|
|
2154
|
-
/* @__PURE__ */
|
|
2178
|
+
/* @__PURE__ */ jsx31("div", { className: "kds-bank-modal-body", children })
|
|
2155
2179
|
] }) }) }) });
|
|
2156
2180
|
}
|
|
2157
2181
|
);
|
|
2158
2182
|
KdsBankModal.displayName = "KdsBankModal";
|
|
2159
2183
|
|
|
2160
2184
|
// src/components/domain/KdsQrRow/KdsQrRow.tsx
|
|
2161
|
-
import { forwardRef as
|
|
2162
|
-
import { jsx as
|
|
2163
|
-
var KdsQrRow =
|
|
2164
|
-
({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */
|
|
2165
|
-
/* @__PURE__ */
|
|
2166
|
-
/* @__PURE__ */
|
|
2167
|
-
/* @__PURE__ */
|
|
2168
|
-
description && /* @__PURE__ */
|
|
2185
|
+
import { forwardRef as forwardRef30 } from "react";
|
|
2186
|
+
import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2187
|
+
var KdsQrRow = forwardRef30(
|
|
2188
|
+
({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ jsxs24("button", { ref, type: "button", className: clsx("kds-qr-row", className), ...props, children: [
|
|
2189
|
+
/* @__PURE__ */ jsx32("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ jsx32("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
2190
|
+
/* @__PURE__ */ jsxs24("span", { className: "kds-qr-text", children: [
|
|
2191
|
+
/* @__PURE__ */ jsx32("span", { className: "kds-qr-title", children: name }),
|
|
2192
|
+
description && /* @__PURE__ */ jsx32("span", { className: "kds-qr-subtitle", children: description })
|
|
2169
2193
|
] }),
|
|
2170
|
-
badge && /* @__PURE__ */
|
|
2171
|
-
/* @__PURE__ */
|
|
2194
|
+
badge && /* @__PURE__ */ jsx32("span", { className: "kds-qr-badge", children: badge }),
|
|
2195
|
+
/* @__PURE__ */ jsx32("i", { className: "material-symbols-outlined", children: "chevron_right" })
|
|
2172
2196
|
] })
|
|
2173
2197
|
);
|
|
2174
2198
|
KdsQrRow.displayName = "KdsQrRow";
|
|
2175
2199
|
|
|
2176
2200
|
// src/components/domain/KdsCardSelector/KdsCardSelector.tsx
|
|
2177
|
-
import { forwardRef as
|
|
2178
|
-
import { jsx as
|
|
2179
|
-
var KdsCardSelector =
|
|
2180
|
-
({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */
|
|
2201
|
+
import { forwardRef as forwardRef31 } from "react";
|
|
2202
|
+
import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2203
|
+
var KdsCardSelector = forwardRef31(
|
|
2204
|
+
({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ jsxs25(
|
|
2181
2205
|
"button",
|
|
2182
2206
|
{
|
|
2183
2207
|
ref,
|
|
@@ -2185,9 +2209,9 @@ var KdsCardSelector = forwardRef30(
|
|
|
2185
2209
|
className: clsx("kds-card-selector", selected && "selected", className),
|
|
2186
2210
|
...props,
|
|
2187
2211
|
children: [
|
|
2188
|
-
icon && /* @__PURE__ */
|
|
2189
|
-
/* @__PURE__ */
|
|
2190
|
-
description && /* @__PURE__ */
|
|
2212
|
+
icon && /* @__PURE__ */ jsx33("span", { className: "kds-card-selector-icon", children: /* @__PURE__ */ jsx33("i", { className: "material-symbols-outlined", children: icon }) }),
|
|
2213
|
+
/* @__PURE__ */ jsx33("span", { className: "kds-card-selector-title", children: title }),
|
|
2214
|
+
description && /* @__PURE__ */ jsx33("span", { className: "kds-card-selector-description", children: description })
|
|
2191
2215
|
]
|
|
2192
2216
|
}
|
|
2193
2217
|
)
|
|
@@ -2195,26 +2219,26 @@ var KdsCardSelector = forwardRef30(
|
|
|
2195
2219
|
KdsCardSelector.displayName = "KdsCardSelector";
|
|
2196
2220
|
|
|
2197
2221
|
// src/components/domain/KdsCardPlan/KdsCardPlan.tsx
|
|
2198
|
-
import { forwardRef as
|
|
2199
|
-
import { jsx as
|
|
2200
|
-
var KdsCardPlan =
|
|
2201
|
-
({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */
|
|
2222
|
+
import { forwardRef as forwardRef32 } from "react";
|
|
2223
|
+
import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2224
|
+
var KdsCardPlan = forwardRef32(
|
|
2225
|
+
({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ jsxs26(
|
|
2202
2226
|
"div",
|
|
2203
2227
|
{
|
|
2204
2228
|
ref,
|
|
2205
2229
|
className: clsx("kds-card-plan", recommended && "recommended", className),
|
|
2206
2230
|
...props,
|
|
2207
2231
|
children: [
|
|
2208
|
-
/* @__PURE__ */
|
|
2209
|
-
/* @__PURE__ */
|
|
2210
|
-
/* @__PURE__ */
|
|
2211
|
-
period && /* @__PURE__ */
|
|
2232
|
+
/* @__PURE__ */ jsx34("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ jsx34("h3", { children: title }) }),
|
|
2233
|
+
/* @__PURE__ */ jsxs26("div", { className: "kds-card-plan-price", children: [
|
|
2234
|
+
/* @__PURE__ */ jsx34("span", { className: "kds-price", children: price }),
|
|
2235
|
+
period && /* @__PURE__ */ jsxs26("span", { className: "kds-price-period", children: [
|
|
2212
2236
|
"/",
|
|
2213
2237
|
period
|
|
2214
2238
|
] })
|
|
2215
2239
|
] }),
|
|
2216
|
-
badgeText && /* @__PURE__ */
|
|
2217
|
-
features && features.length > 0 && /* @__PURE__ */
|
|
2240
|
+
badgeText && /* @__PURE__ */ jsx34("span", { className: "kds-card-plan-badge", children: badgeText }),
|
|
2241
|
+
features && features.length > 0 && /* @__PURE__ */ jsx34("ul", { className: "kds-card-plan-features", children: features.map((f, i) => /* @__PURE__ */ jsx34("li", { children: f }, i)) }),
|
|
2218
2242
|
action
|
|
2219
2243
|
]
|
|
2220
2244
|
}
|
|
@@ -2223,18 +2247,18 @@ var KdsCardPlan = forwardRef31(
|
|
|
2223
2247
|
KdsCardPlan.displayName = "KdsCardPlan";
|
|
2224
2248
|
|
|
2225
2249
|
// src/components/domain/KdsInvoiceSticky/KdsInvoiceSticky.tsx
|
|
2226
|
-
import { forwardRef as
|
|
2227
|
-
import { jsx as
|
|
2228
|
-
var KdsInvoiceSticky =
|
|
2229
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */
|
|
2250
|
+
import { forwardRef as forwardRef33 } from "react";
|
|
2251
|
+
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
2252
|
+
var KdsInvoiceSticky = forwardRef33(
|
|
2253
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ jsx35("div", { ref, className: clsx("kds-card-elevated", "kds-invoice-sticky", className), ...props, children })
|
|
2230
2254
|
);
|
|
2231
2255
|
KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
|
|
2232
2256
|
|
|
2233
2257
|
// src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
|
|
2234
|
-
import { forwardRef as
|
|
2258
|
+
import { forwardRef as forwardRef34 } from "react";
|
|
2235
2259
|
import * as Dialog2 from "@radix-ui/react-dialog";
|
|
2236
|
-
import { jsx as
|
|
2237
|
-
var KdsBottomSheet =
|
|
2260
|
+
import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2261
|
+
var KdsBottomSheet = forwardRef34(
|
|
2238
2262
|
({
|
|
2239
2263
|
open,
|
|
2240
2264
|
onClose,
|
|
@@ -2246,14 +2270,14 @@ var KdsBottomSheet = forwardRef33(
|
|
|
2246
2270
|
showCloseButton = false,
|
|
2247
2271
|
container,
|
|
2248
2272
|
className
|
|
2249
|
-
}, ref) => /* @__PURE__ */
|
|
2273
|
+
}, ref) => /* @__PURE__ */ jsx36(
|
|
2250
2274
|
Dialog2.Root,
|
|
2251
2275
|
{
|
|
2252
2276
|
open,
|
|
2253
2277
|
onOpenChange: (o) => {
|
|
2254
2278
|
if (!o) onClose();
|
|
2255
2279
|
},
|
|
2256
|
-
children: /* @__PURE__ */
|
|
2280
|
+
children: /* @__PURE__ */ jsx36(Dialog2.Portal, { container, children: /* @__PURE__ */ jsx36(Dialog2.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ jsxs27(
|
|
2257
2281
|
Dialog2.Content,
|
|
2258
2282
|
{
|
|
2259
2283
|
ref,
|
|
@@ -2263,20 +2287,20 @@ var KdsBottomSheet = forwardRef33(
|
|
|
2263
2287
|
if (target.closest(".kds-bottom-sheet")) e.preventDefault();
|
|
2264
2288
|
},
|
|
2265
2289
|
children: [
|
|
2266
|
-
showGrabber && /* @__PURE__ */
|
|
2267
|
-
showCloseButton && /* @__PURE__ */
|
|
2290
|
+
showGrabber && /* @__PURE__ */ jsx36("div", { className: "kds-bottom-sheet-grabber", "aria-hidden": "true" }),
|
|
2291
|
+
showCloseButton && /* @__PURE__ */ jsx36(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx36(
|
|
2268
2292
|
"button",
|
|
2269
2293
|
{
|
|
2270
2294
|
type: "button",
|
|
2271
2295
|
className: "kds-bottom-sheet-close",
|
|
2272
2296
|
"aria-label": "Cerrar",
|
|
2273
|
-
children: /* @__PURE__ */
|
|
2297
|
+
children: /* @__PURE__ */ jsx36("i", { className: "material-symbols-outlined", children: "close" })
|
|
2274
2298
|
}
|
|
2275
2299
|
) }),
|
|
2276
|
-
title && /* @__PURE__ */
|
|
2277
|
-
description && /* @__PURE__ */
|
|
2278
|
-
/* @__PURE__ */
|
|
2279
|
-
actions && /* @__PURE__ */
|
|
2300
|
+
title && /* @__PURE__ */ jsx36(Dialog2.Title, { className: "kds-bottom-sheet-title", children: title }),
|
|
2301
|
+
description && /* @__PURE__ */ jsx36(Dialog2.Description, { className: "kds-bottom-sheet-description", children: description }),
|
|
2302
|
+
/* @__PURE__ */ jsx36("div", { className: "kds-bottom-sheet-body", children }),
|
|
2303
|
+
actions && /* @__PURE__ */ jsx36("div", { className: "kds-bottom-sheet-actions", children: actions })
|
|
2280
2304
|
]
|
|
2281
2305
|
}
|
|
2282
2306
|
) }) })
|
|
@@ -2286,55 +2310,55 @@ var KdsBottomSheet = forwardRef33(
|
|
|
2286
2310
|
KdsBottomSheet.displayName = "KdsBottomSheet";
|
|
2287
2311
|
|
|
2288
2312
|
// src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
|
|
2289
|
-
import { forwardRef as
|
|
2290
|
-
import { jsx as
|
|
2291
|
-
var KdsSecureFooter =
|
|
2292
|
-
({ variant = "default", children, className, ...props }, ref) => /* @__PURE__ */
|
|
2293
|
-
/* @__PURE__ */
|
|
2294
|
-
children || /* @__PURE__ */
|
|
2313
|
+
import { forwardRef as forwardRef35 } from "react";
|
|
2314
|
+
import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2315
|
+
var KdsSecureFooter = forwardRef35(
|
|
2316
|
+
({ variant = "default", children, className, ...props }, ref) => /* @__PURE__ */ jsxs28("footer", { ref, className: clsx("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
|
|
2317
|
+
/* @__PURE__ */ jsx37("i", { className: "material-symbols-outlined", children: "lock" }),
|
|
2318
|
+
children || /* @__PURE__ */ jsx37("span", { children: "Pago seguro con Khipu" })
|
|
2295
2319
|
] })
|
|
2296
2320
|
);
|
|
2297
2321
|
KdsSecureFooter.displayName = "KdsSecureFooter";
|
|
2298
2322
|
|
|
2299
2323
|
// src/components/domain/KdsRecapList/KdsRecapList.tsx
|
|
2300
|
-
import { forwardRef as
|
|
2301
|
-
import { jsx as
|
|
2302
|
-
var KdsRecapList =
|
|
2303
|
-
({ items, className, ...props }, ref) => /* @__PURE__ */
|
|
2304
|
-
/* @__PURE__ */
|
|
2305
|
-
/* @__PURE__ */
|
|
2324
|
+
import { forwardRef as forwardRef36 } from "react";
|
|
2325
|
+
import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2326
|
+
var KdsRecapList = forwardRef36(
|
|
2327
|
+
({ items, className, ...props }, ref) => /* @__PURE__ */ jsx38("ul", { ref, className: clsx("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ jsxs29("li", { children: [
|
|
2328
|
+
/* @__PURE__ */ jsx38("span", { className: "kds-key", children: item.label }),
|
|
2329
|
+
/* @__PURE__ */ jsx38("span", { className: clsx("kds-value", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
|
|
2306
2330
|
] }, i)) })
|
|
2307
2331
|
);
|
|
2308
2332
|
KdsRecapList.displayName = "KdsRecapList";
|
|
2309
2333
|
|
|
2310
2334
|
// src/components/domain/KdsMontoRow/KdsMontoRow.tsx
|
|
2311
|
-
import { forwardRef as
|
|
2312
|
-
import { jsx as
|
|
2313
|
-
var KdsMontoRow =
|
|
2314
|
-
({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */
|
|
2315
|
-
/* @__PURE__ */
|
|
2316
|
-
/* @__PURE__ */
|
|
2317
|
-
deadline && /* @__PURE__ */
|
|
2335
|
+
import { forwardRef as forwardRef37 } from "react";
|
|
2336
|
+
import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2337
|
+
var KdsMontoRow = forwardRef37(
|
|
2338
|
+
({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ jsxs30("div", { ref, className: clsx("kds-monto-row", className), ...props, children: [
|
|
2339
|
+
/* @__PURE__ */ jsxs30("div", { children: [
|
|
2340
|
+
/* @__PURE__ */ jsx39("div", { className: "kds-monto-row-title", children: title }),
|
|
2341
|
+
deadline && /* @__PURE__ */ jsx39("div", { className: "kds-monto-row-deadline", children: deadline })
|
|
2318
2342
|
] }),
|
|
2319
|
-
/* @__PURE__ */
|
|
2343
|
+
/* @__PURE__ */ jsx39("div", { className: "kds-monto-row-value", children: value })
|
|
2320
2344
|
] })
|
|
2321
2345
|
);
|
|
2322
2346
|
KdsMontoRow.displayName = "KdsMontoRow";
|
|
2323
2347
|
|
|
2324
2348
|
// src/components/domain/KdsMerchantTile/KdsMerchantTile.tsx
|
|
2325
|
-
import { forwardRef as
|
|
2326
|
-
import { jsx as
|
|
2327
|
-
var KdsMerchantTile =
|
|
2349
|
+
import { forwardRef as forwardRef38 } from "react";
|
|
2350
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
2351
|
+
var KdsMerchantTile = forwardRef38(
|
|
2328
2352
|
({ name, logoUrl, initials, compact, className, ...props }, ref) => {
|
|
2329
2353
|
const displayInitials = (initials ?? name.slice(0, 2)).toUpperCase();
|
|
2330
|
-
return /* @__PURE__ */
|
|
2354
|
+
return /* @__PURE__ */ jsx40(
|
|
2331
2355
|
"div",
|
|
2332
2356
|
{
|
|
2333
2357
|
ref,
|
|
2334
2358
|
className: clsx("kds-merchant-tile", logoUrl && "logo", compact && "compact", className),
|
|
2335
2359
|
"aria-label": name,
|
|
2336
2360
|
...props,
|
|
2337
|
-
children: logoUrl ? /* @__PURE__ */
|
|
2361
|
+
children: logoUrl ? /* @__PURE__ */ jsx40("img", { src: logoUrl, alt: name }) : displayInitials
|
|
2338
2362
|
}
|
|
2339
2363
|
);
|
|
2340
2364
|
}
|
|
@@ -2342,9 +2366,9 @@ var KdsMerchantTile = forwardRef37(
|
|
|
2342
2366
|
KdsMerchantTile.displayName = "KdsMerchantTile";
|
|
2343
2367
|
|
|
2344
2368
|
// src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
|
|
2345
|
-
import { forwardRef as
|
|
2346
|
-
import { jsx as
|
|
2347
|
-
var KdsPaymentTotal =
|
|
2369
|
+
import { forwardRef as forwardRef39 } from "react";
|
|
2370
|
+
import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2371
|
+
var KdsPaymentTotal = forwardRef39(
|
|
2348
2372
|
({
|
|
2349
2373
|
variant = "default",
|
|
2350
2374
|
tone = "brand",
|
|
@@ -2362,7 +2386,7 @@ var KdsPaymentTotal = forwardRef38(
|
|
|
2362
2386
|
const { integer, fraction } = formatAmount(amount, decimals, locale);
|
|
2363
2387
|
const isEmail = variant === "email";
|
|
2364
2388
|
const isInfoTone = tone === "info";
|
|
2365
|
-
return /* @__PURE__ */
|
|
2389
|
+
return /* @__PURE__ */ jsxs31(
|
|
2366
2390
|
"div",
|
|
2367
2391
|
{
|
|
2368
2392
|
ref,
|
|
@@ -2375,14 +2399,14 @@ var KdsPaymentTotal = forwardRef38(
|
|
|
2375
2399
|
),
|
|
2376
2400
|
...props,
|
|
2377
2401
|
children: [
|
|
2378
|
-
!isEmail && title != null && /* @__PURE__ */
|
|
2379
|
-
!isEmail && titleMobile != null && /* @__PURE__ */
|
|
2380
|
-
label != null && /* @__PURE__ */
|
|
2381
|
-
/* @__PURE__ */
|
|
2402
|
+
!isEmail && title != null && /* @__PURE__ */ jsx41("h5", { className: "kds-payment-total-title", children: title }),
|
|
2403
|
+
!isEmail && titleMobile != null && /* @__PURE__ */ jsx41("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
|
|
2404
|
+
label != null && /* @__PURE__ */ jsx41("h6", { className: "kds-payment-label", children: label }),
|
|
2405
|
+
/* @__PURE__ */ jsxs31("h5", { className: "kds-payment-amount", children: [
|
|
2382
2406
|
currency,
|
|
2383
2407
|
" ",
|
|
2384
2408
|
integer,
|
|
2385
|
-
fraction !== null && /* @__PURE__ */
|
|
2409
|
+
fraction !== null && /* @__PURE__ */ jsx41("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
|
|
2386
2410
|
] })
|
|
2387
2411
|
]
|
|
2388
2412
|
}
|
|
@@ -2418,10 +2442,10 @@ function formatAmount(amount, decimals, locale) {
|
|
|
2418
2442
|
}
|
|
2419
2443
|
|
|
2420
2444
|
// src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
|
|
2421
|
-
import { forwardRef as
|
|
2422
|
-
import { jsx as
|
|
2423
|
-
var KdsBillAttachment =
|
|
2424
|
-
({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */
|
|
2445
|
+
import { forwardRef as forwardRef40 } from "react";
|
|
2446
|
+
import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2447
|
+
var KdsBillAttachment = forwardRef40(
|
|
2448
|
+
({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ jsxs32(
|
|
2425
2449
|
"a",
|
|
2426
2450
|
{
|
|
2427
2451
|
ref,
|
|
@@ -2431,15 +2455,15 @@ var KdsBillAttachment = forwardRef39(
|
|
|
2431
2455
|
className: clsx("kds-bill-attachment", className),
|
|
2432
2456
|
...props,
|
|
2433
2457
|
children: [
|
|
2434
|
-
/* @__PURE__ */
|
|
2435
|
-
/* @__PURE__ */
|
|
2458
|
+
/* @__PURE__ */ jsx42("i", { className: "material-symbols-outlined", children: icon }),
|
|
2459
|
+
/* @__PURE__ */ jsx42("span", { children: filename })
|
|
2436
2460
|
]
|
|
2437
2461
|
}
|
|
2438
2462
|
)
|
|
2439
2463
|
);
|
|
2440
2464
|
KdsBillAttachment.displayName = "KdsBillAttachment";
|
|
2441
|
-
var KdsBillAttachments =
|
|
2442
|
-
({ children, className, ...props }, ref) => /* @__PURE__ */
|
|
2465
|
+
var KdsBillAttachments = forwardRef40(
|
|
2466
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ jsx42("div", { ref, className: clsx("kds-bill-attachments", className), ...props, children })
|
|
2443
2467
|
);
|
|
2444
2468
|
KdsBillAttachments.displayName = "KdsBillAttachments";
|
|
2445
2469
|
export {
|
|
@@ -2476,6 +2500,7 @@ export {
|
|
|
2476
2500
|
KdsQrRow,
|
|
2477
2501
|
KdsRadioGroup,
|
|
2478
2502
|
KdsRecapList,
|
|
2503
|
+
KdsSearchField,
|
|
2479
2504
|
KdsSectionNote,
|
|
2480
2505
|
KdsSecureFooter,
|
|
2481
2506
|
KdsSecureLoader,
|