@khipu/design-system 0.3.5-alpha.30 → 0.3.5-alpha.31
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 +64 -24
- package/dist/beercss/khipu-beercss.min.css +1 -1
- package/dist/beercss/khipu-beercss.scoped.css +64 -24
- package/dist/beercss/khipu-beercss.scoped.min.css +1 -1
- package/dist/beercss/metadata.json +5 -5
- package/dist/index.d.mts +5 -4
- package/dist/index.d.ts +5 -4
- package/dist/index.js +16 -10
- package/dist/index.mjs +16 -10
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khipu/design-system/beercss",
|
|
3
|
-
"version": "0.3.5-alpha.
|
|
3
|
+
"version": "0.3.5-alpha.31",
|
|
4
4
|
"description": "Khipu BeerCSS bundle with Material Design 3 and Khipu customizations",
|
|
5
|
-
"buildDate": "2026-10-
|
|
5
|
+
"buildDate": "2026-10-07T15:44:59.284Z",
|
|
6
6
|
"includes": {
|
|
7
7
|
"beercss": "4.0.1",
|
|
8
8
|
"khipu-tokens": "latest",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
},
|
|
20
20
|
"scopeClass": ".kds-theme-root",
|
|
21
21
|
"cdn": {
|
|
22
|
-
"css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.
|
|
23
|
-
"cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.
|
|
24
|
-
"js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.
|
|
22
|
+
"css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.31/dist/beercss/khipu-beercss.min.css",
|
|
23
|
+
"cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.31/dist/beercss/khipu-beercss.scoped.min.css",
|
|
24
|
+
"js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.3.5-alpha.31/dist/beercss/khipu-beercss.min.js"
|
|
25
25
|
}
|
|
26
26
|
}
|
package/dist/index.d.mts
CHANGED
|
@@ -29,7 +29,7 @@ interface KdsThemeProviderProps {
|
|
|
29
29
|
*/
|
|
30
30
|
declare function KdsThemeProvider({ primaryColor, mode, children }: KdsThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
31
31
|
|
|
32
|
-
declare const KDS_VERSION = "0.3.5-alpha.
|
|
32
|
+
declare const KDS_VERSION = "0.3.5-alpha.31";
|
|
33
33
|
|
|
34
34
|
/**
|
|
35
35
|
* Color tokens organized by theme mode
|
|
@@ -3496,9 +3496,10 @@ declare const KdsInvoiceSticky: React__default.ForwardRefExoticComponent<KdsInvo
|
|
|
3496
3496
|
* Khipu Design System - InvoiceHeaderSkeleton Component
|
|
3497
3497
|
*
|
|
3498
3498
|
* Placeholder del header de la factura (KdsInvoiceSticky) mientras sus datos no llegan:
|
|
3499
|
-
* monto, código, tile del comercio
|
|
3500
|
-
* header real
|
|
3501
|
-
*
|
|
3499
|
+
* monto, código, tile del comercio, el resumen "pago a / asunto" y "Detalle del cobro".
|
|
3500
|
+
* Replica el markup del header real y pone en cada slot un texto de relleno transparente
|
|
3501
|
+
* (`.kds-skeleton--text`): toma la fuente y el alto de línea del slot, así cada bloque mide
|
|
3502
|
+
* como el contenido real y el reemplazo por el header no desplaza el layout.
|
|
3502
3503
|
*
|
|
3503
3504
|
* Va dentro de `.kds-invoice-sticky-wrap`, igual que el header real. Es decorativo
|
|
3504
3505
|
* (`aria-hidden`): el estado de carga lo anuncia el loader del body card.
|
package/dist/index.d.ts
CHANGED
|
@@ -29,7 +29,7 @@ interface KdsThemeProviderProps {
|
|
|
29
29
|
*/
|
|
30
30
|
declare function KdsThemeProvider({ primaryColor, mode, children }: KdsThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
31
31
|
|
|
32
|
-
declare const KDS_VERSION = "0.3.5-alpha.
|
|
32
|
+
declare const KDS_VERSION = "0.3.5-alpha.31";
|
|
33
33
|
|
|
34
34
|
/**
|
|
35
35
|
* Color tokens organized by theme mode
|
|
@@ -3496,9 +3496,10 @@ declare const KdsInvoiceSticky: React__default.ForwardRefExoticComponent<KdsInvo
|
|
|
3496
3496
|
* Khipu Design System - InvoiceHeaderSkeleton Component
|
|
3497
3497
|
*
|
|
3498
3498
|
* Placeholder del header de la factura (KdsInvoiceSticky) mientras sus datos no llegan:
|
|
3499
|
-
* monto, código, tile del comercio
|
|
3500
|
-
* header real
|
|
3501
|
-
*
|
|
3499
|
+
* monto, código, tile del comercio, el resumen "pago a / asunto" y "Detalle del cobro".
|
|
3500
|
+
* Replica el markup del header real y pone en cada slot un texto de relleno transparente
|
|
3501
|
+
* (`.kds-skeleton--text`): toma la fuente y el alto de línea del slot, así cada bloque mide
|
|
3502
|
+
* como el contenido real y el reemplazo por el header no desplaza el layout.
|
|
3502
3503
|
*
|
|
3503
3504
|
* Va dentro de `.kds-invoice-sticky-wrap`, igual que el header real. Es decorativo
|
|
3504
3505
|
* (`aria-hidden`): el estado de carga lo anuncia el loader del body card.
|
package/dist/index.js
CHANGED
|
@@ -201,7 +201,7 @@ function formatTime(iso) {
|
|
|
201
201
|
}
|
|
202
202
|
|
|
203
203
|
// src/version.ts
|
|
204
|
-
var KDS_VERSION = "0.3.5-alpha.
|
|
204
|
+
var KDS_VERSION = "0.3.5-alpha.31";
|
|
205
205
|
|
|
206
206
|
// src/theme/KdsThemeProvider.tsx
|
|
207
207
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -2550,22 +2550,28 @@ KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
|
|
|
2550
2550
|
// src/components/domain/KdsInvoiceHeaderSkeleton/KdsInvoiceHeaderSkeleton.tsx
|
|
2551
2551
|
var import_react41 = require("react");
|
|
2552
2552
|
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2553
|
-
var
|
|
2553
|
+
var Text = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "kds-skeleton kds-skeleton--text", children });
|
|
2554
2554
|
var KdsInvoiceHeaderSkeleton = (0, import_react41.forwardRef)(
|
|
2555
2555
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(KdsInvoiceSticky, { ref, className: (0, import_clsx.clsx)("kds-invoice-skeleton", className), "aria-hidden": "true", ...props, children: [
|
|
2556
2556
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("header", { className: "kds-invoice-header", children: [
|
|
2557
2557
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
2558
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "kds-invoice-amount", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2559
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.
|
|
2558
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "kds-invoice-amount", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: "$00.000" }) }),
|
|
2559
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "kds-invoice-code", children: [
|
|
2560
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: "C\xF3digo" }) }),
|
|
2561
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "kds-invoice-code-value kds-invoice-code-value--lowercase", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: "xxxx-xxxx-xxxx" }) })
|
|
2562
|
+
] })
|
|
2560
2563
|
] }),
|
|
2561
2564
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-invoice-merchant kds-skeleton" })
|
|
2562
2565
|
] }),
|
|
2563
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.
|
|
2564
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2566
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "kds-invoice-collapsible", children: [
|
|
2567
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-invoice-summary", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("dl", { className: "kds-kv", children: [
|
|
2568
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dt", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: "Pago a" }) }),
|
|
2569
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: "Comercio de ejemplo SpA" }) }),
|
|
2570
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dt", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: "Asunto" }) }),
|
|
2571
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: "Orden de compra" }) })
|
|
2572
|
+
] }) }),
|
|
2573
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-expand-toggle", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { children: "Detalle del cobro" }) }) })
|
|
2574
|
+
] })
|
|
2569
2575
|
] })
|
|
2570
2576
|
);
|
|
2571
2577
|
KdsInvoiceHeaderSkeleton.displayName = "KdsInvoiceHeaderSkeleton";
|
package/dist/index.mjs
CHANGED
|
@@ -70,7 +70,7 @@ function formatTime(iso) {
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
// src/version.ts
|
|
73
|
-
var KDS_VERSION = "0.3.5-alpha.
|
|
73
|
+
var KDS_VERSION = "0.3.5-alpha.31";
|
|
74
74
|
|
|
75
75
|
// src/theme/KdsThemeProvider.tsx
|
|
76
76
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -2419,22 +2419,28 @@ KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
|
|
|
2419
2419
|
// src/components/domain/KdsInvoiceHeaderSkeleton/KdsInvoiceHeaderSkeleton.tsx
|
|
2420
2420
|
import { forwardRef as forwardRef37 } from "react";
|
|
2421
2421
|
import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2422
|
-
var
|
|
2422
|
+
var Text = ({ children }) => /* @__PURE__ */ jsx39("span", { className: "kds-skeleton kds-skeleton--text", children });
|
|
2423
2423
|
var KdsInvoiceHeaderSkeleton = forwardRef37(
|
|
2424
2424
|
({ className, ...props }, ref) => /* @__PURE__ */ jsxs28(KdsInvoiceSticky, { ref, className: clsx("kds-invoice-skeleton", className), "aria-hidden": "true", ...props, children: [
|
|
2425
2425
|
/* @__PURE__ */ jsxs28("header", { className: "kds-invoice-header", children: [
|
|
2426
2426
|
/* @__PURE__ */ jsxs28("div", { children: [
|
|
2427
|
-
/* @__PURE__ */ jsx39("p", { className: "kds-invoice-amount", children: /* @__PURE__ */ jsx39(
|
|
2428
|
-
/* @__PURE__ */
|
|
2427
|
+
/* @__PURE__ */ jsx39("p", { className: "kds-invoice-amount", children: /* @__PURE__ */ jsx39(Text, { children: "$00.000" }) }),
|
|
2428
|
+
/* @__PURE__ */ jsxs28("p", { className: "kds-invoice-code", children: [
|
|
2429
|
+
/* @__PURE__ */ jsx39("span", { children: /* @__PURE__ */ jsx39(Text, { children: "C\xF3digo" }) }),
|
|
2430
|
+
/* @__PURE__ */ jsx39("span", { className: "kds-invoice-code-value kds-invoice-code-value--lowercase", children: /* @__PURE__ */ jsx39(Text, { children: "xxxx-xxxx-xxxx" }) })
|
|
2431
|
+
] })
|
|
2429
2432
|
] }),
|
|
2430
2433
|
/* @__PURE__ */ jsx39("div", { className: "kds-invoice-merchant kds-skeleton" })
|
|
2431
2434
|
] }),
|
|
2432
|
-
/* @__PURE__ */
|
|
2433
|
-
/* @__PURE__ */ jsx39("
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2435
|
+
/* @__PURE__ */ jsxs28("div", { className: "kds-invoice-collapsible", children: [
|
|
2436
|
+
/* @__PURE__ */ jsx39("div", { className: "kds-invoice-summary", children: /* @__PURE__ */ jsxs28("dl", { className: "kds-kv", children: [
|
|
2437
|
+
/* @__PURE__ */ jsx39("dt", { children: /* @__PURE__ */ jsx39(Text, { children: "Pago a" }) }),
|
|
2438
|
+
/* @__PURE__ */ jsx39("dd", { children: /* @__PURE__ */ jsx39(Text, { children: "Comercio de ejemplo SpA" }) }),
|
|
2439
|
+
/* @__PURE__ */ jsx39("dt", { children: /* @__PURE__ */ jsx39(Text, { children: "Asunto" }) }),
|
|
2440
|
+
/* @__PURE__ */ jsx39("dd", { children: /* @__PURE__ */ jsx39(Text, { children: "Orden de compra" }) })
|
|
2441
|
+
] }) }),
|
|
2442
|
+
/* @__PURE__ */ jsx39("div", { className: "kds-expand-toggle", children: /* @__PURE__ */ jsx39("span", { children: /* @__PURE__ */ jsx39(Text, { children: "Detalle del cobro" }) }) })
|
|
2443
|
+
] })
|
|
2438
2444
|
] })
|
|
2439
2445
|
);
|
|
2440
2446
|
KdsInvoiceHeaderSkeleton.displayName = "KdsInvoiceHeaderSkeleton";
|
package/package.json
CHANGED