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

package/dist/index.mjs

@@ -1814,125 +1814,194 @@ async function copyToClipboard(text) {
   }
 }
 var TRANSITION_MS = 300;
-var KdsCopyableTable = forwardRef22(
-  ({
-    rows,
-    copyAllLabel = "Copiar todos los datos",
-    copiedAllLabel = "Datos copiados",
-    showCopyAll = true,
-    className,
-    ...props
-  }, ref) => {
-    const copiedTimers = useRef2(/* @__PURE__ */ new Map());
-    const settlingTimers = useRef2(/* @__PURE__ */ new Map());
-    const [copiedRows, setCopiedRows] = useState4(/* @__PURE__ */ new Set());
-    const [settlingRows, setSettlingRows] = useState4(/* @__PURE__ */ new Set());
-    const [allCopied, setAllCopied] = useState4(false);
-    const markCopied = useCallback3((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__ */ jsx24(
+    "div",
+    {
+      ref: forwardedRef,
+      className: clsx("kds-copyable-table", "kds-copyable-table--grid", className),
+      ...rest,
+      children: gridRows.map((cells, rowIndex) => /* @__PURE__ */ jsx24(
+        "div",
+        {
+          className: "kds-copyable-table-row kds-copyable-table-row--grid",
+          "data-testid": "kds-grid-row",
+          children: cells.map((text, cellIndex) => /* @__PURE__ */ jsx24(
+            "span",
+            {
+              className: 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 = useRef2(/* @__PURE__ */ new Map());
+  const settlingTimers = useRef2(/* @__PURE__ */ new Map());
+  const [copiedRows, setCopiedRows] = useState4(/* @__PURE__ */ new Set());
+  const [settlingRows, setSettlingRows] = useState4(/* @__PURE__ */ new Set());
+  const [allCopied, setAllCopied] = useState4(false);
+  const markCopied = useCallback3((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__ */ jsxs18(Fragment2, { children: [
-      /* @__PURE__ */ jsx24("div", { ref, className: clsx("kds-copyable-table", className), ...props, children: rows.map((row, i) => /* @__PURE__ */ jsxs18(
-        "div",
-        {
-          className: 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__ */ jsx24("span", { className: "kds-key", children: row.label }),
-            /* @__PURE__ */ jsx24("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__ */ jsxs18(Fragment2, { children: [
+    /* @__PURE__ */ jsx24("div", { ref: forwardedRef, className: clsx("kds-copyable-table", className), ...rest, children: rows.map((row, i) => /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        className: 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__ */ jsxs18(
-        "button",
+        "aria-label": `Copiar ${row.label}: ${row.value}`,
+        children: [
+          /* @__PURE__ */ jsx24("span", { className: "kds-key", children: row.label }),
+          /* @__PURE__ */ jsx24("span", { className: "kds-value", children: row.value })
+        ]
+      },
+      `${row.label}-${i}`
+    )) }),
+    showCopyAll && /* @__PURE__ */ jsxs18(
+      "button",
+      {
+        type: "button",
+        className: clsx(
+          "kds-btn",
+          "kds-btn-outlined",
+          "kds-btn-block",
+          "kds-copy-all-btn",
+          allCopied && "copied"
+        ),
+        onClick: handleCopyAll,
+        "aria-label": allCopied ? copiedAllLabel : copyAllLabel,
+        children: [
+          /* @__PURE__ */ jsx24("span", { className: "kds-icon", children: /* @__PURE__ */ jsx24("i", { className: "material-symbols-outlined", children: allCopied ? "check" : "content_copy" }) }),
+          /* @__PURE__ */ jsx24("span", { children: allCopied ? copiedAllLabel : copyAllLabel })
+        ]
+      }
+    )
+  ] });
+}
+var KdsCopyableTable = forwardRef22(
+  ({
+    rows = [],
+    variant = "copyable",
+    gridRows = [],
+    disabled = false,
+    copyAllLabel,
+    copiedAllLabel,
+    showCopyAll,
+    className,
+    ...props
+  }, ref) => {
+    if (variant === "grid") {
+      return /* @__PURE__ */ jsx24(
+        GridVariant,
         {
-          type: "button",
-          className: clsx(
-            "kds-btn",
-            "kds-btn-outlined",
-            "kds-btn-block",
-            "kds-copy-all-btn",
-            allCopied && "copied"
-          ),
-          onClick: handleCopyAll,
-          "aria-label": allCopied ? copiedAllLabel : copyAllLabel,
-          children: [
-            /* @__PURE__ */ jsx24("span", { className: "kds-icon", children: /* @__PURE__ */ jsx24("i", { className: "material-symbols-outlined", children: allCopied ? "check" : "content_copy" }) }),
-            /* @__PURE__ */ jsx24("span", { children: allCopied ? copiedAllLabel : copyAllLabel })
-          ]
+          gridRows,
+          disabled,
+          className,
+          forwardedRef: ref,
+          rest: props
         }
-      )
-    ] });
+      );
+    }
+    return /* @__PURE__ */ jsx24(
+      CopyableVariant,
+      {
+        rows,
+        copyAllLabel,
+        copiedAllLabel,
+        showCopyAll,
+        className,
+        forwardedRef: ref,
+        rest: props
+      }
+    );
   }
 );
 KdsCopyableTable.displayName = "KdsCopyableTable";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khipu/design-system",
-  "version": "0.2.0-alpha.50",
+  "version": "0.2.0-alpha.51",
   "description": "Khipu Design System - UI components and design tokens for the Khipu payment platform",
   "main": "dist/index.js",
   "module": "dist/index.mjs",