@khipu/design-system 0.2.0-alpha.50 → 0.2.0-alpha.51

package/dist/beercss/metadata.json

@@ -1,8 +1,8 @@
 {
   "name": "@khipu/design-system/beercss",
-  "version": "0.2.0-alpha.50",
+  "version": "0.2.0-alpha.51",
   "description": "Khipu BeerCSS bundle with Material Design 3 and Khipu customizations",
-  "buildDate": "2026-06-16T20:37:43.877Z",
+  "buildDate": "2026-06-16T22:54:45.434Z",
   "includes": {
     "beercss": "4.0.1",
     "khipu-tokens": "latest",
@@ -19,8 +19,8 @@
   },
   "scopeClass": ".kds-theme-root",
   "cdn": {
-    "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.50/dist/beercss/khipu-beercss.min.css",
-    "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.50/dist/beercss/khipu-beercss.scoped.min.css",
-    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.50/dist/beercss/khipu-beercss.min.js"
+    "css": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.51/dist/beercss/khipu-beercss.min.css",
+    "cssScoped": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.51/dist/beercss/khipu-beercss.scoped.min.css",
+    "js": "https://cdn.jsdelivr.net/npm/@khipu/design-system@0.2.0-alpha.51/dist/beercss/khipu-beercss.min.js"
   }
 }

package/dist/index.d.mts

@@ -2621,8 +2621,11 @@ declare const KdsTextField: React__default.ForwardRefExoticComponent<KdsTextFiel
  */
 
 interface KdsCheckboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    /** Texto del label mostrado al lado del sprite. Opcional (puede usar aria-label). */
-    label?: string;
+    /**
+     * Contenido del label mostrado al lado del sprite. Opcional (puede usar aria-label).
+     * Acepta texto o nodos (p. ej. un enlace embebido en "Acepto los términos…").
+     */
+    label?: React__default.ReactNode;
 }
 declare const KdsCheckbox: React__default.ForwardRefExoticComponent<KdsCheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
 
@@ -2889,7 +2892,8 @@ declare const KdsTabPanel: React__default.ForwardRefExoticComponent<KdsTabPanelP
 
 interface KdsRadioOption {
     value: string;
-    label: string;
+    /** Texto o nodo del label de la opción (permite contenido rico: montos, enlaces, tablas). */
+    label: React__default.ReactNode;
     disabled?: boolean;
 }
 interface KdsRadioGroupProps extends Omit<React__default.FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
@@ -3166,6 +3170,11 @@ declare const KdsCopyRow: React__default.ForwardRefExoticComponent<KdsCopyRowPro
  * Tabla compacta con filas que se copian individualmente al click, y un
  * botón "Copiar todos los datos" que cambia el color de todas las filas al copy.
  *
+ * Variante `'grid'` (aditiva): grilla read-only de N celdas de texto por fila,
+ * sin copy ni botón "Copiar todo". Las celdas reparten el ancho equitativamente.
+ * Útil para mostrar datos dentro de opciones de radio. Soporta `disabled`
+ * (atenúa el color del texto).
+ *
  * Contrato HTML (matchea el CSS .kds-copyable-table del DS):
  * ```html
  * <div class="kds-copyable-table" id="destination-copy-list">
@@ -3197,7 +3206,27 @@ interface KdsCopyableTableRow {
     copy?: string;
 }
 interface KdsCopyableTableProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    rows: KdsCopyableTableRow[];
+    /**
+     * Filas key/value copiables (modo `'copyable'`). Opcional: default `[]`.
+     * En modo `'grid'` no se usa; usá `gridRows` en su lugar.
+     */
+    rows?: KdsCopyableTableRow[];
+    /**
+     * Variante de la tabla.
+     * - `'copyable'` (default): filas key/value que se copian individualmente al click.
+     * - `'grid'`: grilla read-only de N celdas de texto por fila, sin copy ni botón
+     *   "Copiar todo". Útil para mostrar datos dentro de opciones de radio.
+     */
+    variant?: 'copyable' | 'grid';
+    /**
+     * Datos de la grilla en modo `'grid'`: cada fila es un array de textos de celda.
+     * Las celdas se reparten el ancho equitativamente. Ignorado en modo `'copyable'`.
+     */
+    gridRows?: string[][];
+    /**
+     * Atenúa el color del texto de la grilla (modo `'grid'`). Sin efecto en `'copyable'`.
+     */
+    disabled?: boolean;
     /** Texto del botón "Copiar todo". Default: "Copiar todos los datos". */
     copyAllLabel?: string;
     /** Texto cuando se copió todo. Default: "Datos copiados". */

package/dist/index.d.ts

@@ -2621,8 +2621,11 @@ declare const KdsTextField: React__default.ForwardRefExoticComponent<KdsTextFiel
  */
 
 interface KdsCheckboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    /** Texto del label mostrado al lado del sprite. Opcional (puede usar aria-label). */
-    label?: string;
+    /**
+     * Contenido del label mostrado al lado del sprite. Opcional (puede usar aria-label).
+     * Acepta texto o nodos (p. ej. un enlace embebido en "Acepto los términos…").
+     */
+    label?: React__default.ReactNode;
 }
 declare const KdsCheckbox: React__default.ForwardRefExoticComponent<KdsCheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
 
@@ -2889,7 +2892,8 @@ declare const KdsTabPanel: React__default.ForwardRefExoticComponent<KdsTabPanelP
 
 interface KdsRadioOption {
     value: string;
-    label: string;
+    /** Texto o nodo del label de la opción (permite contenido rico: montos, enlaces, tablas). */
+    label: React__default.ReactNode;
     disabled?: boolean;
 }
 interface KdsRadioGroupProps extends Omit<React__default.FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
@@ -3166,6 +3170,11 @@ declare const KdsCopyRow: React__default.ForwardRefExoticComponent<KdsCopyRowPro
  * Tabla compacta con filas que se copian individualmente al click, y un
  * botón "Copiar todos los datos" que cambia el color de todas las filas al copy.
  *
+ * Variante `'grid'` (aditiva): grilla read-only de N celdas de texto por fila,
+ * sin copy ni botón "Copiar todo". Las celdas reparten el ancho equitativamente.
+ * Útil para mostrar datos dentro de opciones de radio. Soporta `disabled`
+ * (atenúa el color del texto).
+ *
  * Contrato HTML (matchea el CSS .kds-copyable-table del DS):
  * ```html
  * <div class="kds-copyable-table" id="destination-copy-list">
@@ -3197,7 +3206,27 @@ interface KdsCopyableTableRow {
     copy?: string;
 }
 interface KdsCopyableTableProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    rows: KdsCopyableTableRow[];
+    /**
+     * Filas key/value copiables (modo `'copyable'`). Opcional: default `[]`.
+     * En modo `'grid'` no se usa; usá `gridRows` en su lugar.
+     */
+    rows?: KdsCopyableTableRow[];
+    /**
+     * Variante de la tabla.
+     * - `'copyable'` (default): filas key/value que se copian individualmente al click.
+     * - `'grid'`: grilla read-only de N celdas de texto por fila, sin copy ni botón
+     *   "Copiar todo". Útil para mostrar datos dentro de opciones de radio.
+     */
+    variant?: 'copyable' | 'grid';
+    /**
+     * Datos de la grilla en modo `'grid'`: cada fila es un array de textos de celda.
+     * Las celdas se reparten el ancho equitativamente. Ignorado en modo `'copyable'`.
+     */
+    gridRows?: string[][];
+    /**
+     * Atenúa el color del texto de la grilla (modo `'grid'`). Sin efecto en `'copyable'`.
+     */
+    disabled?: boolean;
     /** Texto del botón "Copiar todo". Default: "Copiar todos los datos". */
     copyAllLabel?: string;
     /** Texto cuando se copió todo. Default: "Datos copiados". */

package/dist/index.js

@@ -1922,125 +1922,194 @@ async function copyToClipboard(text) {
   }
 }
 var TRANSITION_MS = 300;
-var KdsCopyableTable = (0, import_react25.forwardRef)(
-  ({
-    rows,
-    copyAllLabel = "Copiar todos los datos",
-    copiedAllLabel = "Datos copiados",
-    showCopyAll = true,
-    className,
-    ...props
-  }, ref) => {
-    const copiedTimers = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
-    const settlingTimers = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
-    const [copiedRows, setCopiedRows] = (0, import_react25.useState)(/* @__PURE__ */ new Set());
-    const [settlingRows, setSettlingRows] = (0, import_react25.useState)(/* @__PURE__ */ new Set());
-    const [allCopied, setAllCopied] = (0, import_react25.useState)(false);
-    const markCopied = (0, import_react25.useCallback)((indexes, duration = 1500) => {
-      setCopiedRows((prev) => {
-        const next = new Set(prev);
-        indexes.forEach((i) => next.add(i));
-        return next;
-      });
-      indexes.forEach((i) => {
-        const st = settlingTimers.current.get(i);
-        if (st) {
-          clearTimeout(st);
-          settlingTimers.current.delete(i);
-        }
-      });
-      setSettlingRows((prev) => {
-        const next = new Set(prev);
-        indexes.forEach((i) => next.delete(i));
-        return next;
-      });
-      indexes.forEach((i) => {
-        const existing = copiedTimers.current.get(i);
-        if (existing) clearTimeout(existing);
-        const t = setTimeout(() => {
-          setCopiedRows((prev) => {
-            const next = new Set(prev);
-            next.delete(i);
-            return next;
-          });
+function GridVariant({
+  gridRows,
+  disabled,
+  className,
+  forwardedRef,
+  rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      className: (0, import_clsx.clsx)("kds-copyable-table", "kds-copyable-table--grid", className),
+      ...rest,
+      children: gridRows.map((cells, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "div",
+        {
+          className: "kds-copyable-table-row kds-copyable-table-row--grid",
+          "data-testid": "kds-grid-row",
+          children: cells.map((text, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "span",
+            {
+              className: (0, import_clsx.clsx)("kds-grid-cell", disabled && "kds-grid-cell--disabled"),
+              children: text
+            },
+            cellIndex
+          ))
+        },
+        rowIndex
+      ))
+    }
+  );
+}
+function CopyableVariant({
+  rows,
+  copyAllLabel = "Copiar todos los datos",
+  copiedAllLabel = "Datos copiados",
+  showCopyAll = true,
+  className,
+  forwardedRef,
+  rest
+}) {
+  const copiedTimers = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
+  const settlingTimers = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
+  const [copiedRows, setCopiedRows] = (0, import_react25.useState)(/* @__PURE__ */ new Set());
+  const [settlingRows, setSettlingRows] = (0, import_react25.useState)(/* @__PURE__ */ new Set());
+  const [allCopied, setAllCopied] = (0, import_react25.useState)(false);
+  const markCopied = (0, import_react25.useCallback)((indexes, duration = 1500) => {
+    setCopiedRows((prev) => {
+      const next = new Set(prev);
+      indexes.forEach((i) => next.add(i));
+      return next;
+    });
+    indexes.forEach((i) => {
+      const st = settlingTimers.current.get(i);
+      if (st) {
+        clearTimeout(st);
+        settlingTimers.current.delete(i);
+      }
+    });
+    setSettlingRows((prev) => {
+      const next = new Set(prev);
+      indexes.forEach((i) => next.delete(i));
+      return next;
+    });
+    indexes.forEach((i) => {
+      const existing = copiedTimers.current.get(i);
+      if (existing) clearTimeout(existing);
+      const t = setTimeout(() => {
+        setCopiedRows((prev) => {
+          const next = new Set(prev);
+          next.delete(i);
+          return next;
+        });
+        setSettlingRows((prev) => {
+          const next = new Set(prev);
+          next.add(i);
+          return next;
+        });
+        copiedTimers.current.delete(i);
+        const settlingT = setTimeout(() => {
           setSettlingRows((prev) => {
             const next = new Set(prev);
-            next.add(i);
+            next.delete(i);
             return next;
           });
-          copiedTimers.current.delete(i);
-          const settlingT = setTimeout(() => {
-            setSettlingRows((prev) => {
-              const next = new Set(prev);
-              next.delete(i);
-              return next;
-            });
-            settlingTimers.current.delete(i);
-          }, TRANSITION_MS);
-          settlingTimers.current.set(i, settlingT);
-        }, duration);
-        copiedTimers.current.set(i, t);
-      });
-    }, []);
-    const handleRowCopy = async (row, index) => {
-      const ok = await copyToClipboard(row.copy ?? row.value);
-      if (ok) markCopied([index]);
-    };
-    const handleCopyAll = async () => {
-      const text = rows.map((r) => `${r.label}: ${r.value}`).join("\n");
-      const ok = await copyToClipboard(text);
-      if (ok) {
-        markCopied(rows.map((_, i) => i));
-        setAllCopied(true);
-        setTimeout(() => setAllCopied(false), 2e3);
-      }
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-      /* @__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)(
-        "div",
-        {
-          className: (0, import_clsx.clsx)(
-            "kds-copyable-table-row",
-            copiedRows.has(i) && "copied",
-            settlingRows.has(i) && "settling"
-          ),
-          role: "button",
-          tabIndex: 0,
-          onClick: () => handleRowCopy(row, i),
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleRowCopy(row, i);
-            }
-          },
-          "aria-label": `Copiar ${row.label}: ${row.value}`,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-key", children: row.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-value", children: row.value })
-          ]
+          settlingTimers.current.delete(i);
+        }, TRANSITION_MS);
+        settlingTimers.current.set(i, settlingT);
+      }, duration);
+      copiedTimers.current.set(i, t);
+    });
+  }, []);
+  const handleRowCopy = async (row, index) => {
+    const ok = await copyToClipboard(row.copy ?? row.value);
+    if (ok) markCopied([index]);
+  };
+  const handleCopyAll = async () => {
+    const text = rows.map((r) => `${r.label}: ${r.value}`).join("\n");
+    const ok = await copyToClipboard(text);
+    if (ok) {
+      markCopied(rows.map((_, i) => i));
+      setAllCopied(true);
+      setTimeout(() => setAllCopied(false), 2e3);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref: forwardedRef, className: (0, import_clsx.clsx)("kds-copyable-table", className), ...rest, children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.clsx)(
+          "kds-copyable-table-row",
+          copiedRows.has(i) && "copied",
+          settlingRows.has(i) && "settling"
+        ),
+        role: "button",
+        tabIndex: 0,
+        onClick: () => handleRowCopy(row, i),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleRowCopy(row, i);
+          }
         },
-        `${row.label}-${i}`
-      )) }),
-      showCopyAll && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-        "button",
+        "aria-label": `Copiar ${row.label}: ${row.value}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-key", children: row.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-value", children: row.value })
+        ]
+      },
+      `${row.label}-${i}`
+    )) }),
+    showCopyAll && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: (0, import_clsx.clsx)(
+          "kds-btn",
+          "kds-btn-outlined",
+          "kds-btn-block",
+          "kds-copy-all-btn",
+          allCopied && "copied"
+        ),
+        onClick: handleCopyAll,
+        "aria-label": allCopied ? copiedAllLabel : copyAllLabel,
+        children: [
+          /* @__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" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: allCopied ? copiedAllLabel : copyAllLabel })
+        ]
+      }
+    )
+  ] });
+}
+var KdsCopyableTable = (0, import_react25.forwardRef)(
+  ({
+    rows = [],
+    variant = "copyable",
+    gridRows = [],
+    disabled = false,
+    copyAllLabel,
+    copiedAllLabel,
+    showCopyAll,
+    className,
+    ...props
+  }, ref) => {
+    if (variant === "grid") {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        GridVariant,
         {
-          type: "button",
-          className: (0, import_clsx.clsx)(
-            "kds-btn",
-            "kds-btn-outlined",
-            "kds-btn-block",
-            "kds-copy-all-btn",
-            allCopied && "copied"
-          ),
-          onClick: handleCopyAll,
-          "aria-label": allCopied ? copiedAllLabel : copyAllLabel,
-          children: [
-            /* @__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" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: allCopied ? copiedAllLabel : copyAllLabel })
-          ]
+          gridRows,
+          disabled,
+          className,
+          forwardedRef: ref,
+          rest: props
         }
-      )
-    ] });
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      CopyableVariant,
+      {
+        rows,
+        copyAllLabel,
+        copiedAllLabel,
+        showCopyAll,
+        className,
+        forwardedRef: ref,
+        rest: props
+      }
+    );
   }
 );
 KdsCopyableTable.displayName = "KdsCopyableTable";