next-recomponents 2.0.4 → 2.0.5

package/dist/index.js

@@ -35694,24 +35694,17 @@ function useExcel() {
 }
 
 // src/table/index.tsx
-var import_material2 = require("@mui/material");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function Table(props) {
-  if (Array.isArray(props.data)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IHTable, { ...props });
-  } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: " bg-white border shadow rounded p-1", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("table", { className: "rounded", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: Object.keys(props.data).map((k) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("tr", { className: "border-b ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { className: "font-bold p-3 text-right", children: k }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "td",
-        {
-          className: typeof props.data[k] === "number" ? "text-right" : "text-center",
-          children: props.data[k]
-        }
-      )
-    ] }, k)) }) }) });
-  }
-}
+var HEIGHT_MAP = {
+  1: 150,
+  2: 200,
+  3: 250,
+  4: 310,
+  5: 360,
+  6: 410,
+  7: 460,
+  8: 510
+};
 function EditIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "svg",
@@ -35727,65 +35720,142 @@ function EditIcon() {
     }
   );
 }
-function IHTable({
-  data,
-  flex = 1,
-  editableFields,
+function KeyValueTable({ data }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-white border shadow rounded p-1", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("table", { className: "rounded", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: Object.keys(data).map((key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("tr", { className: "border-b", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { className: "font-bold p-3 text-right", children: key }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "td",
+      {
+        className: typeof data[key] === "number" ? "text-right" : "text-center",
+        children: data[key]
+      }
+    )
+  ] }, key)) }) }) });
+}
+var FOOTER_LABELS = {
+  sum: "Suma",
+  avg: "Promedio",
+  count: "Conteo"
+};
+function computeAggregation(rows, key, type) {
+  const values = rows.map((r) => {
+    var _a;
+    return Number((_a = r[key]) != null ? _a : 0);
+  }).filter((v) => !isNaN(v));
+  if (type === "sum") return values.reduce((acc, v) => acc + v, 0);
+  if (type === "count") return values.length;
+  if (type === "avg")
+    return values.length ? values.reduce((acc, v) => acc + v, 0) / values.length : 0;
+  return 0;
+}
+function CustomFooter({
+  rows,
+  footer
+}) {
+  const entries = Object.entries(footer);
+  if (!entries.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-end gap-6 px-4 py-2 bg-gray-100 border-t border-gray-300 text-sm font-semibold text-gray-700", children: entries.map(([key, type]) => {
+    const value = computeAggregation(rows, key, type);
+    const formatted = type === "avg" ? value.toLocaleString(void 0, { maximumFractionDigits: 2 }) : value.toLocaleString();
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+      FOOTER_LABELS[type],
+      " de",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-gray-900", children: key }),
+      ":",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-blue-700", children: formatted })
+    ] }, key);
+  }) });
+}
+function ModalDialog({ open, onClose, modal, selectedRow }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material.Dialog, { open, onClose, maxWidth: "xl", fullWidth: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        onClick: onClose,
+        className: "text-gray-500 hover:text-gray-800 text-xl font-bold p-5",
+        children: "\xD7"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-4 m-auto p-5", children: selectedRow && import_react4.default.cloneElement(
+      modal,
+      { row: selectedRow }
+    ) })
+  ] });
+}
+function Toolbar({
+  exportName,
   onSave,
   onSelect,
-  buttons,
-  exportName,
-  modal,
-  height = 600,
-  width = "100%",
-  header,
-  hideColumns = [],
-  footer
+  rows,
+  filteredRows
 }) {
-  const [open, setOpen] = (0, import_react4.useState)(false);
-  if (modal) {
-    buttons = { ...buttons, Modal: "" };
-  }
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => {
-    setOpen(false);
-    setSelectedRows({
-      type: "include",
-      ids: /* @__PURE__ */ new Set()
-    });
-  };
   const excel = useExcel();
-  const [rows, setRows] = (0, import_react4.useState)(data);
-  const [selectedRows, setSelectedRows] = (0, import_react4.useState)();
-  (0, import_react4.useEffect)(() => {
-    setRows(data);
-  }, [data]);
-  const columns = (0, import_react4.useMemo)(() => {
+  const stripMeta = (r) => {
+    const { _edited, ...rest } = r;
+    return rest;
+  };
+  if (!exportName && !onSave && !onSelect) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2 bg-gray-200 border shadow rounded p-2", children: [
+    exportName && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Button,
+      {
+        className: "bg-green-800 text-white",
+        onClick: () => excel.export(rows.map(stripMeta), `${exportName}.xlsx`),
+        children: "Exportar"
+      }
+    ),
+    onSelect ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Button,
+      {
+        disabled: filteredRows.length === 0,
+        color: filteredRows.length === 0 ? "white" : "primary",
+        onClick: () => onSelect(filteredRows.map(stripMeta)),
+        children: "Guardar Selecci\xF3n"
+      }
+    ) : onSave && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { onClick: () => onSave(rows.map(stripMeta)), children: "Guardar" })
+  ] });
+}
+function useColumns(rows, options) {
+  const {
+    flex,
+    editableFields,
+    buttons,
+    hideColumns,
+    modal,
+    handleRowUpdate,
+    onModalOpen
+  } = options;
+  return (0, import_react4.useMemo)(() => {
     if (!rows.length) return [];
-    const arr = Object.keys(rows[0]).filter((key) => !key.startsWith("_") && !hideColumns.includes(key)).map((key, i) => ({
-      field: key,
-      headerName: key,
-      flex,
-      editable: editableFields == null ? void 0 : editableFields.includes(key),
-      type: typeof rows[0][key] === "number" ? "number" : "string",
-      renderCell: (buttons == null ? void 0 : buttons[key]) ? (params) => {
-        var _a, _b;
-        return import_react4.default.cloneElement(buttons[key], {
-          className: ((_a = params == null ? void 0 : params.className) != null ? _a : "") + " m-auto text-xs ",
-          children: (_b = params == null ? void 0 : params.row) == null ? void 0 : _b[key],
-          onClick: (e) => {
-            var _a2, _b2;
-            e.row = params == null ? void 0 : params.row;
-            if ((_b2 = (_a2 = buttons[key]) == null ? void 0 : _a2.props) == null ? void 0 : _b2.onClick) {
-              const newVal = buttons[key].props.onClick(e);
-              newVal && handleRowUpdate(newVal);
+    const cols = Object.keys(rows[0]).filter((key) => !key.startsWith("_") && !hideColumns.includes(key)).map((key) => {
+      var _a;
+      return {
+        field: key,
+        headerName: key,
+        flex,
+        editable: (_a = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _a : false,
+        type: typeof rows[0][key] === "number" ? "number" : "string",
+        renderCell: (buttons == null ? void 0 : buttons[key]) ? (params) => {
+          var _a2, _b;
+          return import_react4.default.cloneElement(buttons[key], {
+            className: `${(_a2 = params == null ? void 0 : params.className) != null ? _a2 : ""} m-auto text-xs`,
+            children: (_b = params == null ? void 0 : params.row) == null ? void 0 : _b[key],
+            onClick: (e) => {
+              var _a3, _b2;
+              e.row = params == null ? void 0 : params.row;
+              if ((_b2 = (_a3 = buttons[key]) == null ? void 0 : _a3.props) == null ? void 0 : _b2.onClick) {
+                const newVal = buttons[key].props.onClick(e);
+                if (newVal) handleRowUpdate(newVal);
+              }
             }
-          }
-        });
-      } : null
-    }));
+          });
+        } : null
+      };
+    });
     if (modal) {
-      arr.unshift({
+      cols.unshift({
         field: "Modal",
         headerName: "Modal",
         flex,
@@ -35797,9 +35867,7 @@ function IHTable({
             Button,
             {
               className: "text-xs",
-              onClick: () => {
-                handleOpen();
-              },
+              onClick: () => onModalOpen(params.row),
               icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EditIcon, {}),
               children: (_a = params == null ? void 0 : params.row) == null ? void 0 : _a["Modal"]
             }
@@ -35807,98 +35875,104 @@ function IHTable({
         }
       });
     }
-    return arr;
+    return cols;
   }, [rows]);
+}
+function IHTable({
+  data,
+  flex = 1,
+  editableFields,
+  onSave,
+  onSelect,
+  buttons,
+  exportName,
+  modal,
+  height = 510,
+  width = "100%",
+  header,
+  hideColumns = [],
+  footer = {}
+}) {
+  var _a;
+  if (modal && onSelect)
+    throw new Error("Solo se puede usar modal o onSelect por separado");
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [rows, setRows] = (0, import_react4.useState)(data);
+  const [selectedRows, setSelectedRows] = (0, import_react4.useState)({
+    type: "include",
+    ids: /* @__PURE__ */ new Set()
+  });
+  const [modalRow, setModalRow] = (0, import_react4.useState)();
+  const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
+  (0, import_react4.useEffect)(() => {
+    setRows(data);
+  }, [data]);
+  const handleModalOpen = (row) => {
+    setModalRow(row);
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setModalRow(void 0);
+  };
   const handleRowUpdate = (newRow) => {
     if (!newRow.id) throw new Error("Fila sin id");
-    newRow._edited = true;
-    setRows((prev) => prev.map((row) => row.id === newRow.id ? newRow : row));
-    return newRow;
-  };
-  const ref = (0, import_react4.useRef)(null);
-  const cat1 = {
-    1: 110,
-    2: 160,
-    3: 215,
-    4: 266,
-    5: 316
+    const updated = { ...newRow, _edited: true };
+    setRows(
+      (prev) => prev.map((row) => row.id === updated.id ? updated : row)
+    );
+    return updated;
   };
-  const filtered = (0, import_react4.useMemo)(() => {
-    let filtered2 = [];
-    if ((selectedRows == null ? void 0 : selectedRows.type) == "exclude") {
-      filtered2 = rows.filter(
-        (r) => !Array.from(selectedRows.ids).includes(r.id)
-      );
-    } else if ((selectedRows == null ? void 0 : selectedRows.type) == "include") {
-      filtered2 = rows.filter(
-        (r) => Array.from(selectedRows.ids).includes(r.id)
-      );
-    }
-    return filtered2;
-  }, [selectedRows]);
-  return rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  const filteredRows = (0, import_react4.useMemo)(() => {
+    if ((selectedRows == null ? void 0 : selectedRows.type) === "exclude") {
+      return rows.filter((r) => !Array.from(selectedRows.ids).includes(r.id));
+    }
+    if ((selectedRows == null ? void 0 : selectedRows.type) === "include") {
+      return rows.filter((r) => Array.from(selectedRows.ids).includes(r.id));
+    }
+    return [];
+  }, [selectedRows, rows]);
+  const columns = useColumns(rows, {
+    flex,
+    editableFields,
+    buttons: resolvedButtons,
+    hideColumns,
+    modal,
+    handleRowUpdate,
+    onModalOpen: handleModalOpen
+  });
+  if (!rows.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     import_material.Box,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
-        height: (cat1 == null ? void 0 : cat1[height]) || height,
+        height: (_a = HEIGHT_MAP[rows.length]) != null ? _a : height,
         width,
         zIndex: 999999999
       },
       children: [
-        modal && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material2.Dialog, { open, onClose: handleClose, maxWidth: "xl", fullWidth: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "button",
-            {
-              onClick: () => {
-                handleClose();
-              },
-              className: "text-gray-500 hover:text-gray-800 text-xl font-bold p-5",
-              children: "\xD7"
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-4 m-auto p-5", children: selectedRows && Array.from(selectedRows == null ? void 0 : selectedRows.ids).length > 0 && import_react4.default.cloneElement(modal, {
-            row: rows.find(
-              (r) => Array.from(selectedRows == null ? void 0 : selectedRows.ids).includes(r.id)
-            )
-          }) })
-        ] }),
+        modal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ModalDialog,
+          {
+            open,
+            onClose: handleClose,
+            modal,
+            selectedRow: modalRow
+          }
+        ),
         header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "font-bold text-xl p-2 bg-blue-500 text-white border shadow rounded", children: header }),
-        (exportName || onSave || onSelect) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2 bg-gray-200 border shadow rounded p-2", children: [
-          exportName && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            Button,
-            {
-              className: "bg-green-800 text-white",
-              onClick: (e) => {
-                excel.export(
-                  rows.map(({ _edited, ...r }) => r),
-                  `${exportName}.xlsx`
-                );
-              },
-              children: "Exportar"
-            }
-          ),
-          onSelect ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            Button,
-            {
-              disabled: filtered.length == 0,
-              color: filtered.length == 0 ? "white" : "primary",
-              onClick: (e) => {
-                onSelect == null ? void 0 : onSelect(filtered.map(({ _edited, ...r }) => r));
-              },
-              children: "Guardar Selecci\xF3n"
-            }
-          ) : onSave && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            Button,
-            {
-              onClick: (e) => {
-                onSave == null ? void 0 : onSave(rows.map(({ _edited, ...r }) => r));
-              },
-              children: "Guardar"
-            }
-          )
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Toolbar,
+          {
+            exportName,
+            onSave,
+            onSelect,
+            rows,
+            filteredRows
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           import_x_data_grid.DataGrid,
           {
@@ -35906,59 +35980,34 @@ function IHTable({
             columns,
             checkboxSelection: Boolean(onSelect),
             rowSelectionModel: selectedRows,
-            onRowSelectionModelChange: (newSelection) => {
-              setSelectedRows(newSelection);
-            },
+            onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
             sx: {
               "& .MuiDataGrid-cell--editable": {
                 backgroundColor: "#c6d8f0",
                 fontWeight: 500
+              },
+              ...rows.length <= Object.keys(HEIGHT_MAP).length && {
+                "& .MuiDataGrid-filler": {
+                  display: "none"
+                }
               }
             },
             editMode: "row",
             processRowUpdate: handleRowUpdate,
-            pageSizeOptions: [5, 10]
+            pageSizeOptions: [5, 10],
+            hideFooter: rows.length <= Object.keys(HEIGHT_MAP).length
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomFooter, { footer: footer || {}, rows })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomFooter, { footer, rows })
       ]
     }
   );
 }
-function CustomFooter({
-  rows,
-  footer
-}) {
-  const entries = Object.entries(footer);
-  if (!entries.length) return null;
-  const compute = (key, type) => {
-    const values = rows.map((r) => {
-      var _a;
-      return Number((_a = r[key]) != null ? _a : 0);
-    }).filter((v) => !isNaN(v));
-    if (type === "sum") return values.reduce((acc, v) => acc + v, 0);
-    if (type === "avg")
-      return values.length ? values.reduce((acc, v) => acc + v, 0) / values.length : 0;
-    if (type === "count") return values.length;
-    return 0;
-  };
-  const label = {
-    sum: "Suma",
-    avg: "Promedio",
-    count: "Conteo"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-end gap-6 px-4 py-2 bg-gray-100 border-t border-gray-300 text-sm font-semibold text-gray-700", children: entries.map(([key, type]) => {
-    const value = compute(key, type);
-    const formatted = type === "avg" ? value.toLocaleString(void 0, { maximumFractionDigits: 2 }) : value.toLocaleString();
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
-      label[type],
-      " de ",
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-gray-900", children: key }),
-      ":",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-blue-700", children: formatted })
-    ] }, key);
-  }) });
+function Table(props) {
+  if (Array.isArray(props.data)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IHTable, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(KeyValueTable, { data: props.data });
 }
 
 // src/text-area/index.tsx
@@ -36755,7 +36804,7 @@ function CloseIcon2() {
 }
 
 // src/modal/index.tsx
-var import_material3 = require("@mui/material");
+var import_material2 = require("@mui/material");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function Modal({ button, children, ref, title = "" }) {
   const [open, setOpen] = (0, import_react9.useState)(false);
@@ -36780,7 +36829,7 @@ function Modal({ button, children, ref, title = "" }) {
       }
       return child;
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material3.Dialog, { open, onClose: hide, fullWidth: true, maxWidth: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "m-auto p-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material2.Dialog, { open, onClose: hide, fullWidth: true, maxWidth: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "m-auto p-5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
@@ -36872,7 +36921,7 @@ function CalendarIcon() {
 }
 
 // src/calendar/index.tsx
-var import_material4 = require("@mui/material");
+var import_material3 = require("@mui/material");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function MyCalendar({
   enabledDates,
@@ -36937,7 +36986,7 @@ function MyCalendar({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material4.Dialog, { open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material3.Dialog, { open, children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex justify-end p-5 font-bold", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {
@@ -37962,20 +38011,85 @@ function Table3({
 // src/pop/index.tsx
 var import_react16 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
+var COLOR_CONFIG = {
+  primary: {
+    bg: "from-blue-50 to-indigo-50",
+    iconBg: "bg-blue-100",
+    iconText: "text-blue-600",
+    border: "border-blue-200",
+    confirm: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-300",
+    label: "\u2139"
+  },
+  info: {
+    bg: "from-sky-50 to-cyan-50",
+    iconBg: "bg-sky-100",
+    iconText: "text-sky-600",
+    border: "border-sky-200",
+    confirm: "bg-sky-600 hover:bg-sky-700 focus:ring-sky-300",
+    label: "\u2139"
+  },
+  success: {
+    bg: "from-emerald-50 to-green-50",
+    iconBg: "bg-emerald-100",
+    iconText: "text-emerald-600",
+    border: "border-emerald-200",
+    confirm: "bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-300",
+    label: "\u2713"
+  },
+  warning: {
+    bg: "from-amber-50 to-yellow-50",
+    iconBg: "bg-amber-100",
+    iconText: "text-amber-600",
+    border: "border-amber-200",
+    confirm: "bg-amber-500 hover:bg-amber-600 focus:ring-amber-300",
+    label: "\u26A0"
+  },
+  danger: {
+    bg: "from-red-50 to-rose-50",
+    iconBg: "bg-red-100",
+    iconText: "text-red-600",
+    border: "border-red-200",
+    confirm: "bg-red-600 hover:bg-red-700 focus:ring-red-300",
+    label: "\u2715"
+  },
+  secondary: {
+    bg: "from-slate-50 to-gray-50",
+    iconBg: "bg-slate-100",
+    iconText: "text-slate-600",
+    border: "border-slate-200",
+    confirm: "bg-slate-700 hover:bg-slate-800 focus:ring-slate-300",
+    label: "\u25CE"
+  },
+  white: {
+    bg: "from-gray-50 to-white",
+    iconBg: "bg-gray-100",
+    iconText: "text-gray-500",
+    border: "border-gray-200",
+    confirm: "bg-gray-700 hover:bg-gray-800 focus:ring-gray-300",
+    label: "\u25CE"
+  }
+};
 function usePopup() {
-  const [popup, setPopup] = (0, import_react16.useState)({ type: "alert", message: "", visible: false, inputValue: "" });
-  function alert2(message) {
+  const [popup, setPopup] = (0, import_react16.useState)({
+    type: "alert",
+    message: "",
+    visible: false,
+    inputValue: "",
+    color: "primary"
+  });
+  function alert2(message, color = "primary") {
     return new Promise((resolve) => {
       setPopup({
         type: "alert",
         message,
         visible: true,
         inputValue: "",
-        onConfirm: () => resolve()
+        onConfirm: () => resolve(),
+        color
       });
     });
   }
-  function confirm(message) {
+  function confirm(message, color = "primary") {
     return new Promise((resolve) => {
       setPopup({
         type: "confirm",
@@ -37983,11 +38097,12 @@ function usePopup() {
         visible: true,
         inputValue: "",
         onConfirm: () => resolve(true),
-        onCancel: () => resolve(false)
+        onCancel: () => resolve(false),
+        color
       });
     });
   }
-  function prompt(message) {
+  function prompt(message, color = "primary") {
     return new Promise((resolve) => {
       setPopup({
         type: "prompt",
@@ -37995,7 +38110,8 @@ function usePopup() {
         visible: true,
         inputValue: "",
         onConfirm: (value) => resolve(value != null ? value : ""),
-        onCancel: () => resolve(null)
+        onCancel: () => resolve(null),
+        color
       });
     });
   }
@@ -38007,35 +38123,40 @@ function usePopup() {
       return { ...prev, visible: false, inputValue: "" };
     });
   }
+  const c = COLOR_CONFIG[popup.color];
   const PopupComponent = popup.visible ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
-      style: {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        background: "rgba(0,0,0,0.5)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        zIndex: 1e3
-      },
+      className: "fixed inset-0 flex items-center justify-center z-[1000]",
+      style: { background: "rgba(15,23,42,0.45)", backdropFilter: "blur(2px)" },
+      onClick: (e) => e.target === e.currentTarget && close(false),
       children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "div",
         {
-          style: {
-            background: "#fff",
-            padding: "24px 32px",
-            borderRadius: "8px",
-            minWidth: "300px",
-            textAlign: "center",
-            boxShadow: "0 4px 20px rgba(0,0,0,0.2)"
-          },
+          className: `
+          bg-gradient-to-br ${c.bg} border ${c.border}
+          rounded-2xl shadow-2xl w-full max-w-sm mx-4
+          animate-[fadeInScale_0.18s_ease-out]
+        `,
+          style: { animation: "fadeInScale 0.18s ease-out" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { style: { margin: "0 0 16px", fontSize: "16px" }, children: popup.message }),
-            popup.type === "prompt" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("style", { children: `
+          @keyframes fadeInScale {
+            from { opacity: 0; transform: scale(0.93) translateY(8px); }
+            to   { opacity: 1; transform: scale(1)    translateY(0);   }
+          }
+        ` }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center gap-3 px-8 pt-8 pb-5 text-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                "div",
+                {
+                  className: `w-12 h-12 rounded-full ${c.iconBg} flex items-center justify-center`,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: `text-xl font-bold ${c.iconText}`, children: c.label })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-gray-800 text-[15px] font-medium leading-snug", children: popup.message })
+            ] }),
+            popup.type === "prompt" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-8 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "input",
               {
                 autoFocus: true,
@@ -38043,31 +38164,22 @@ function usePopup() {
                 value: popup.inputValue,
                 onChange: (e) => setPopup((prev) => ({ ...prev, inputValue: e.target.value })),
                 onKeyDown: (e) => e.key === "Enter" && close(true, popup.inputValue),
-                style: {
-                  width: "100%",
-                  padding: "8px 12px",
-                  marginBottom: "16px",
-                  border: "1px solid #d1d5db",
-                  borderRadius: "6px",
-                  fontSize: "14px",
-                  boxSizing: "border-box"
-                }
+                className: `
+                w-full px-3 py-2 rounded-lg border ${c.border} bg-white
+                text-sm text-gray-800 outline-none
+                focus:ring-2 ${c.confirm.includes("blue") ? "focus:ring-blue-200" : "focus:ring-gray-200"}
+                transition
+              `,
+                placeholder: "Escribe aqu\xED..."
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { display: "flex", gap: "8px", justifyContent: "center" }, children: [
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `border-t ${c.border} mx-0 mt-4` }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-2 px-6 py-4 justify-end", children: [
               (popup.type === "confirm" || popup.type === "prompt") && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "button",
                 {
                   onClick: () => close(false),
-                  style: {
-                    padding: "8px 24px",
-                    background: "#e5e7eb",
-                    color: "#374151",
-                    border: "none",
-                    borderRadius: "6px",
-                    cursor: "pointer",
-                    fontSize: "14px"
-                  },
+                  className: "\r\n                px-4 py-2 rounded-lg text-sm font-medium\r\n                bg-white border border-gray-200 text-gray-600\r\n                hover:bg-gray-50 transition\r\n              ",
                   children: "Cancelar"
                 }
               ),
@@ -38075,16 +38187,11 @@ function usePopup() {
                 "button",
                 {
                   onClick: () => close(true, popup.inputValue),
-                  style: {
-                    padding: "8px 24px",
-                    background: "#3b82f6",
-                    color: "#fff",
-                    border: "none",
-                    borderRadius: "6px",
-                    cursor: "pointer",
-                    fontSize: "14px"
-                  },
-                  children: "OK"
+                  className: `
+              px-5 py-2 rounded-lg text-sm font-semibold text-white
+              ${c.confirm} transition focus:outline-none focus:ring-2
+            `,
+                  children: "Aceptar"
                 }
               )
             ] })