next-recomponents 2.0.40 → 2.0.42

package/dist/index.js

@@ -3500,6 +3500,7 @@ __export(index_exports, {
   Select: () => Select,
   Table: () => Table,
   Table3: () => Table3,
+  TableAdvanced: () => TableAdvanced,
   TextArea: () => TextArea,
   regularExpresions: () => regular_expresions_default,
   useDates: () => useDates,
@@ -3890,15 +3891,15 @@ function Input({
   const isPassword = props.type === "password";
   const [showPassword, setShowPassword] = (0, import_react4.useState)(false);
   const svg = icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative flex items-center border rounded bg-white pr-1 mb-5", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full relative my-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative flex items-center border rounded bg-white pr-1 mb-5 w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "input",
         {
           ...props,
           type: isPassword && showPassword ? "text" : props.type,
           className: [
-            "flex p-2 w-full bg-transparent pt-4",
+            "block p-2 w-full bg-transparent  min-w-0",
             isPassword && "pr-10",
             value !== "" && !isValid && "bg-red-200 text-black",
             value !== "" && isValid && "bg-green-200 text-black",
@@ -3906,7 +3907,7 @@ function Input({
           ].filter(Boolean).join(" ")
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "absolute -top-2.5 left-2 text-xs font-bold bg-white px-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "absolute -top-2.5 left-2 text-xs font-bold  px-1", children: [
         label,
         (props == null ? void 0 : props.required) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
       ] }),
@@ -36177,7 +36178,7 @@ function TextArea({
   ...props
 }) {
   const [value, setValue] = (0, import_react6.useState)((props == null ? void 0 : props.value) || "");
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-full relative mb-5", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex items-center border rounded bg-white ", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-full relative my-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex items-center border rounded bg-white ", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "textarea",
       {
@@ -36194,7 +36195,7 @@ function TextArea({
       }
     ),
     " ",
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "absolute -top-2.5 left-2 text-xs font-bold bg-white px-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "absolute -top-2.5 left-2 text-xs font-bold  px-1", children: [
       label,
       " ",
       (props == null ? void 0 : props.required) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-red-500", children: "*" })
@@ -36814,7 +36815,7 @@ function Select({
       }
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: containerRef, className: "w-full relative mb-5", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: containerRef, className: "w-full relative my-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative flex items-center border rounded bg-white", children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "input",
@@ -36852,7 +36853,7 @@ function Select({
           onKeyDown: handleKeyDown
         }
       ),
-      label && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "absolute -top-2.5 left-2 text-xs font-bold bg-white px-1", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "absolute -top-2.5 left-2 text-xs font-bold  px-1", children: [
         label,
         " ",
         (props == null ? void 0 : props.required) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-red-500", children: "*" })
@@ -37024,7 +37025,7 @@ var COLOR_CONFIG = {
     label: "\u25CE"
   },
   white: {
-    bg: "from-gray-50 to-white",
+    bg: "from-white to-white",
     iconBg: "bg-gray-100",
     iconText: "text-gray-500",
     border: "border-gray-200",
@@ -37085,7 +37086,7 @@ function PopupOverlay({
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
-      className: "fixed inset-0 flex items-center justify-center z-[1000]  ",
+      className: "fixed inset-0 flex items-center justify-center z-[1000] overflow-auto p-1",
       style: { background: "rgba(15,23,42,0.45)", backdropFilter: "blur(2px)" },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("style", { children: `
@@ -37097,7 +37098,7 @@ function PopupOverlay({
         /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "div",
           {
-            className: `bg-gradient-to-br ${c.bg} border ${c.border} ${popup.full == true ? " w-full h-screen m-20 " : " max-w-sm "} rounded-2xl shadow-2xl  mx-4`,
+            className: `bg-gradient-to-br ${c.bg} border ${c.border} ${popup.full == true ? " w-screen h-screen  mt-10 " : " max-w-sm "} rounded shadow  m-2`,
             style: { animation: "fadeInScale 0.18s ease-out", overflow: "auto" },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col items-center gap-3 px-8 pt-8 pb-5 text-center ", children: [
@@ -37142,7 +37143,7 @@ function PopupOverlay({
                   onEnter: () => onClose(true, popup.inputValue)
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `border-t ${c.border} mt-4` }),
+              popup.type !== "modal" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `border-t ${c.border} mt-4` }),
               popup.type !== "modal" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 PopupActions,
                 {
@@ -37182,14 +37183,21 @@ function usePopup() {
     },
     []
   );
-  const close = (0, import_react10.useCallback)((confirmed, value) => {
-    setPopup((prev) => {
+  const close = (0, import_react10.useCallback)(
+    async (confirmed, value) => {
       var _a, _b;
-      if (confirmed) (_a = prev.onConfirm) == null ? void 0 : _a.call(prev, value);
-      else (_b = prev.onCancel) == null ? void 0 : _b.call(prev);
-      return { ...prev, visible: false, inputValue: "" };
-    });
-  }, []);
+      const prev = { ...popup };
+      let visible = false;
+      if (confirmed) {
+        (_a = prev.onConfirm) == null ? void 0 : _a.call(prev, value);
+      } else if (prev == null ? void 0 : prev.onCancel) {
+        visible = !Boolean(await ((_b = prev.onCancel) == null ? void 0 : _b.call(prev)));
+      }
+      const data = { ...prev, visible, inputValue: "" };
+      setPopup(data);
+    },
+    [popup]
+  );
   const alert2 = (0, import_react10.useCallback)(
     (message, color = "primary") => new Promise(
       (resolve) => open({
@@ -37203,13 +37211,17 @@ function usePopup() {
     [open]
   );
   const modal = (0, import_react10.useCallback)(
-    (message, color = "primary", icons = false, full = false) => new Promise(
+    (message, color = "primary", icons = false, full = false, onClose) => new Promise(
       (resolve) => open({
         type: "modal",
         message,
         color,
-        onConfirm: () => resolve(),
-        onCancel: () => resolve(),
+        // onConfirm: () => {
+        //   resolve();
+        // },
+        onCancel: async () => {
+          return await (onClose == null ? void 0 : onClose());
+        },
         icons,
         full
       })
@@ -37269,10 +37281,13 @@ function Modal({
   button,
   children,
   color = "primary",
-  title
+  title,
+  onClose
 }) {
   const pop = usePopup();
-  const hide = () => pop.close(false);
+  const hide = () => {
+    pop.close(false);
+  };
   const childrenWithHide = (0, import_react11.useMemo)(
     () => (0, import_react11.cloneElement)(children, { hide }),
     [children]
@@ -37282,11 +37297,11 @@ function Modal({
   }, [childrenWithHide]);
   const props = button == null ? void 0 : button.props;
   const onClick = props == null ? void 0 : props.onClick;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "", children: [
     (0, import_react11.cloneElement)(button, {
       onClick: (e) => {
         onClick == null ? void 0 : onClick(e);
-        pop.modal(childrenWithHide, color, false, true);
+        pop.modal(childrenWithHide, color, false, true, onClose);
       }
     }),
     pop.PopupComponent
@@ -38450,6 +38465,1121 @@ function Table3({
     ] })
   ] });
 }
+
+// src/table-advanced/index.tsx
+var import_react21 = require("react");
+
+// src/table-advanced/h.table.tsx
+var import_react19 = __toESM(require("react"));
+
+// src/table-advanced/header.tsx
+var import_react18 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/table-advanced/icons.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function DropIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 512 512",
+      height: "1em",
+      className: "text-blue-500",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: "256", cy: "256", r: "48" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: "256", cy: "416", r: "48" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: "256", cy: "96", r: "48" })
+      ]
+    }
+  );
+}
+function EditIcon3() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "svg",
+    {
+      className: "text-white",
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 24 24",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M16.7574 2.99678L14.7574 4.99678H5V18.9968H19V9.23943L21 7.23943V19.9968C21 20.5491 20.5523 20.9968 20 20.9968H4C3.44772 20.9968 3 20.5491 3 19.9968V3.99678C3 3.4445 3.44772 2.99678 4 2.99678H16.7574ZM20.4853 2.09729L21.8995 3.5115L12.7071 12.7039L11.2954 12.7064L11.2929 11.2897L20.4853 2.09729Z" })
+    }
+  );
+}
+function ExcelIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 24 24",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M2.85858 2.87732L15.4293 1.0815C15.7027 1.04245 15.9559 1.2324 15.995 1.50577C15.9983 1.52919 16 1.55282 16 1.57648V22.4235C16 22.6996 15.7761 22.9235 15.5 22.9235C15.4763 22.9235 15.4527 22.9218 15.4293 22.9184L2.85858 21.1226C2.36593 21.0522 2 20.6303 2 20.1327V3.86727C2 3.36962 2.36593 2.9477 2.85858 2.87732ZM4 4.73457V19.2654L14 20.694V3.30599L4 4.73457ZM17 19H20V4.99997H17V2.99997H21C21.5523 2.99997 22 3.44769 22 3.99997V20C22 20.5523 21.5523 21 21 21H17V19ZM10.2 12L13 16H10.6L9 13.7143L7.39999 16H5L7.8 12L5 7.99997H7.39999L9 10.2857L10.6 7.99997H13L10.2 12Z" })
+    }
+  );
+}
+function OrderAscIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      version: "1",
+      viewBox: "0 0 48 48",
+      enableBackground: "new 0 0 48 48",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "polygon",
+          {
+            fill: "#546E7A",
+            points: "38,33 38,5 34,5 34,33 28,33 36,43 44,33"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { fill: "#2196F3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M16.8,17.2h-5.3l-1.1,3H6.9L12.6,5h2.9l5.7,15.2h-3.2L16.8,17.2z M12.2,14.5H16l-1.9-5.7L12.2,14.5z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M12.4,40.5H20V43H8.4v-1.9L16,30.3H8.4v-2.5h11.4v1.7L12.4,40.5z" })
+        ] })
+      ]
+    }
+  );
+}
+function OrderDesIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      version: "1",
+      viewBox: "0 0 48 48",
+      enableBackground: "new 0 0 48 48",
+      height: "1em",
+      width: "1em",
+      className: "text-blue-500",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { fill: "#2196F3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M16.8,40h-5.3l-1.1,3H6.9l5.7-15.2h2.9L21.1,43h-3.2L16.8,40z M12.2,37.3H16l-1.9-5.7L12.2,37.3z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M12.4,17.7H20v2.5H8.4v-1.9L16,7.5H8.4V5h11.4v1.7L12.4,17.7z" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "polygon",
+          {
+            fill: "#546E7A",
+            points: "38,33 38,5 34,5 34,33 28,33 36,43 44,33"
+          }
+        )
+      ]
+    }
+  );
+}
+function ArrowDownIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      className: "text-blue-500",
+      viewBox: "0 0 512 512",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M348.3 295.6c-5-5.1-13.3-5.1-18.4-.1L269 356.2V124.9c0-7.1-5.8-12.9-13-12.9s-13 5.8-13 12.9v231.3l-60.9-60.8c-5.1-5-13.3-4.9-18.4.1-5 5.1-5 13.2.1 18.3l83 82.4c1.2 1.1 2.5 2 4.1 2.7 1.6.7 3.3 1 5 1 3.4 0 6.6-1.3 9.1-3.7l83-82.4c5.2-4.9 5.3-13.1.3-18.2z" })
+    }
+  );
+}
+function ArrowUPIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      className: "text-blue-500",
+      viewBox: "0 0 512 512",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M348.3 216.4c-5 5.1-13.3 5.1-18.4.1L269 155.8v231.3c0 7.1-5.8 12.9-13 12.9s-13-5.8-13-12.9V155.8l-60.9 60.8c-5.1 5-13.3 4.9-18.4-.1-5-5.1-5-13.2.1-18.3l83-82.4c1.2-1.1 2.5-2 4.1-2.7 1.6-.7 3.3-1 5-1 3.4 0 6.6 1.3 9.1 3.7l83 82.4c5.2 4.9 5.3 13.1.3 18.2z" })
+    }
+  );
+}
+function SearchIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 24 24",
+      className: "text-blue-500",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M7 9H2V7h5zm0 3H2v2h5zm13.59 7-3.83-3.83c-.8.52-1.74.83-2.76.83-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L22 17.59zM17 11c0-1.65-1.35-3-3-3s-3 1.35-3 3 1.35 3 3 3 3-1.35 3-3M2 19h10v-2H2z" })
+      ]
+    }
+  );
+}
+function FilterIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "svg",
+    {
+      className: "text-red-300",
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 24 24",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { fill: "none", d: "M0 0h24v24H0zM0 0h24m0 24H0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M4.25 5.66c.1.13 5.74 7.33 5.74 7.33V19c0 .55.45 1 1.01 1h2.01c.55 0 1.01-.45 1.01-1v-6.02s5.49-7.02 5.75-7.34S20 5 20 5c0-.55-.45-1-1.01-1H5.01C4.4 4 4 4.48 4 5c0 .2.06.44.25.66" })
+      ]
+    }
+  );
+}
+
+// src/table-advanced/menu.item.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function MenuItem({
+  label,
+  icon,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "div",
+    {
+      className: "cursor-pointer border p-2 hover:bg-gray-100 flex items-center bg-white gap-2",
+      onClick,
+      children: [
+        icon,
+        label
+      ]
+    }
+  );
+}
+
+// src/table-advanced/header.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function Header({
+  header,
+  context,
+  drag,
+  padding
+}) {
+  const [visible, setVisible] = (0, import_react18.useState)(false);
+  const sortIndex = context.sort.findIndex((b) => b.field == header);
+  const [text, setText] = (0, import_react18.useState)("");
+  const cellRef = (0, import_react18.useRef)(null);
+  const [coords, setCoords] = (0, import_react18.useState)(
+    null
+  );
+  const filteredValues = [
+    ...new Set(context.data.map((d) => d[header]))
+  ].filter((d) => {
+    if (text == "") return true;
+    return `${d}`.toLowerCase().includes(text.toLowerCase());
+  });
+  const [selected, setSelected] = (0, import_react18.useState)([...filteredValues]);
+  const hasFilter = context.filters.find((b) => b.field == header);
+  (0, import_react18.useEffect)(() => {
+    if (visible) {
+      context.setCurrentHeader(header);
+    }
+    setText("");
+  }, [visible]);
+  (0, import_react18.useEffect)(() => {
+    if (!visible || !cellRef.current) {
+      setCoords(null);
+      return;
+    }
+    const updateCoords = () => {
+      if (!cellRef.current) return;
+      const rect = cellRef.current.getBoundingClientRect();
+      const POPUP_WIDTH = 300;
+      setCoords({
+        top: rect.bottom,
+        left: Math.max(8, rect.right - POPUP_WIDTH)
+      });
+    };
+    updateCoords();
+    window.addEventListener("scroll", updateCoords, true);
+    window.addEventListener("resize", updateCoords);
+    return () => {
+      window.removeEventListener("scroll", updateCoords, true);
+      window.removeEventListener("resize", updateCoords);
+    };
+  }, [visible]);
+  if (header == "__modal__") {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "div",
+      {
+        className: "break-words border  text-center relative  ",
+        style: { zIndex: 10, height: `${padding}px`, maxHeight: "100px" }
+      }
+    ) });
+  } else if (header == "__select__") {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "div",
+      {
+        className: "border flex items-center justify-center  text-center relative  ",
+        style: { zIndex: 10, height: `${padding}px`, maxHeight: "100px" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            className: "w-5 h-5 accent-blue-600 transition-all  duration-300 checked:scale-110",
+            checked: Boolean(
+              context.selected.length == context.filteredData.length
+            ),
+            onChange: (e) => {
+              if (context.selected.length < context.filteredData.length) {
+                context.setSelected(context.filteredData.map((d) => d.id));
+              } else {
+                context.setSelected([]);
+              }
+            }
+          }
+        )
+      }
+    ) });
+  } else
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      "div",
+      {
+        ref: cellRef,
+        className: "break-words border  text-center relative ",
+        style: { zIndex: 10, height: `${padding}px`, maxHeight: "100px" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex gap-5 items-center justify-between h-full cursor-pointer", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex gap-2", children: [
+              hasFilter ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                "div",
+                {
+                  className: "cursor-pointer",
+                  onClick: (e) => {
+                    context.setFilters(null);
+                    setSelected(filteredValues);
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FilterIcon, {})
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {}),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                "div",
+                {
+                  onClick: (e) => {
+                    context.setSort({
+                      [header]: "TOGGLE"
+                    });
+                  },
+                  children: sortIndex >= 0 ? context.sort[sortIndex].type === "ASC" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArrowUPIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArrowDownIcon2, {}) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "div",
+              {
+                className: "w-full",
+                onClick: (e) => {
+                  context.setSort({
+                    [header]: "TOGGLE"
+                  });
+                },
+                children: header
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "div",
+              {
+                style: { zIndex: 10 },
+                className: "icon font-bold  p-1 cursor-pointer pr-3 ",
+                onClick: (e) => setVisible(true),
+                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropIcon, {})
+              }
+            )
+          ] }),
+          context.currentHeader != header && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "div",
+            {
+              onMouseDown: (e) => drag.startDrag(e, header),
+              className: "absolute top-0 h-full cursor-col-resize hover:bg-blue-300  p-2",
+              style: { right: -2, width: 6, zIndex: 20 }
+            }
+          ),
+          visible && context.currentHeader == header && (0, import_react_dom.createPortal)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                "div",
+                {
+                  className: "w-screen h-screen fixed top-0 left-0",
+                  onClick: (e) => {
+                    setVisible(false);
+                  },
+                  style: { zIndex: 9998 }
+                }
+              ),
+              coords && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                "div",
+                {
+                  className: "fixed",
+                  style: { top: coords.top, left: coords.left, zIndex: 9999 },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "bg-gray-100  w-[300px] flex flex-col border shadow rounded ", children: [
+                    hasFilter && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      MenuItem,
+                      {
+                        label: "Quitar filtro",
+                        icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FilterIcon, {}),
+                        onClick: (e) => {
+                          setVisible(false);
+                          context.setFilters(null);
+                          setSelected(filteredValues);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      MenuItem,
+                      {
+                        label: "Orenar de A a Z",
+                        icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(OrderAscIcon, {}),
+                        onClick: (e) => {
+                          setVisible(false);
+                          context.setSort({ [header]: "ASC" });
+                          context.setCurrentHeader(null);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      MenuItem,
+                      {
+                        label: "Orenar de Z a A",
+                        icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(OrderDesIcon, {}),
+                        onClick: (e) => {
+                          setVisible(false);
+                          context.setSort({ [header]: "DESC" });
+                          context.setCurrentHeader(null);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                      Form,
+                      {
+                        onSubmit: (e) => {
+                          if (text != "") {
+                            setSelected(filteredValues);
+                          }
+                          context.setFilters({
+                            field: header,
+                            values: text != "" ? filteredValues : selected
+                          });
+                          setVisible(false);
+                          context.setCurrentHeader(null);
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "m-2 bg-white gap-2 flex flex-col", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                              "input",
+                              {
+                                placeholder: "Buscar...",
+                                className: "border shadow rounded p-2 w-full",
+                                value: text,
+                                onChange: (e) => setText(e.target.value)
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                              "div",
+                              {
+                                className: "flex items-start flex-col p-2 border shadow rounded max-w-[600px] h-[300px] bg-white ",
+                                style: { overflow: "auto" },
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                                    "div",
+                                    {
+                                      className: "flex gap-2 " + (text != "" ? "text-gray-400" : ""),
+                                      children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                          "input",
+                                          {
+                                            type: "checkbox",
+                                            checked: text != "" || selected.length == filteredValues.length,
+                                            onClick: (e) => {
+                                              if (selected.length == filteredValues.length) {
+                                                setSelected([]);
+                                              } else {
+                                                setSelected(filteredValues);
+                                              }
+                                            },
+                                            disabled: text != ""
+                                          }
+                                        ),
+                                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "truncate", children: "Seleccionar todo" })
+                                      ]
+                                    }
+                                  ),
+                                  filteredValues.map((d) => {
+                                    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex gap-2 ", children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                        "input",
+                                        {
+                                          disabled: text != "",
+                                          type: "checkbox",
+                                          onChange: (e) => {
+                                            const ns = [...selected];
+                                            const index = ns.findIndex((n) => n == d);
+                                            if (index >= 0) {
+                                              ns.splice(index, 1);
+                                            } else {
+                                              ns.push(d);
+                                            }
+                                            setSelected(ns);
+                                          },
+                                          checked: text != "" || selected.includes(d)
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "truncate", children: d })
+                                    ] }, d);
+                                  })
+                                ]
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-between p-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                              "button",
+                              {
+                                onClick: (e) => {
+                                  setVisible(false);
+                                  context.setCurrentHeader(null);
+                                },
+                                className: "p-2 border shadow rounded bg-gray-300 text-black",
+                                type: "button",
+                                children: "Cancelar"
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "p-2 border shadow rounded bg-blue-500 text-white", children: "Aceptar" })
+                          ] })
+                        ]
+                      }
+                    )
+                  ] })
+                }
+              )
+            ] }),
+            document.body
+          )
+        ]
+      }
+    ) });
+}
+
+// src/table-advanced/searchable.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function Searchable({
+  context
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex justify-start p-2 relative w-96", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "input",
+      {
+        type: "search",
+        placeholder: "Buscar por ....",
+        className: "border shadow rounded p-2 w-full pr-10",
+        value: context.searchBy,
+        onChange: (e) => context.setSearchBy(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute top-0 right-0 p-5", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SearchIcon, {}) })
+  ] });
+}
+
+// src/table-advanced/types.ts
+var regularExpresions2 = {
+  email: /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/,
+  phone: /^\d{10}$/,
+  number: /^\d+$/
+};
+var types_default = regularExpresions2;
+
+// src/table-advanced/h.table.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function HTable({
+  context
+}) {
+  const [isLoading, setIsloading] = (0, import_react19.useState)(false);
+  const { cols, headers } = context;
+  const [currentIndex, setCurrentIndex] = (0, import_react19.useState)(-1);
+  const tableRef = (0, import_react19.useRef)(null);
+  const modalRef = (0, import_react19.useRef)(null);
+  const catDensities = { confortable: 80, compact: 30, standard: 53 };
+  const padding = (context == null ? void 0 : context.rowHeight) || (context == null ? void 0 : context.density) ? catDensities[context == null ? void 0 : context.density] : 53;
+  function useResizableColumns(headers2, defaultWidth = 160, minWidth = 60) {
+    function getWidth(h) {
+      return [
+        "__select__",
+        "__modal__",
+        ...(context == null ? void 0 : context.hideColumns) || []
+      ].includes(h) ? minWidth : defaultWidth;
+    }
+    function resize(headers3) {
+      return Object.fromEntries(headers3.map((h) => [h, getWidth(h)]));
+    }
+    const [widths2, setWidths2] = (0, import_react19.useState)({});
+    const startDrag2 = (0, import_react19.useCallback)(
+      (e, headerKey) => {
+        var _a;
+        e.preventDefault();
+        const startX = e.clientX;
+        const startWidth = (_a = widths2[headerKey]) != null ? _a : defaultWidth;
+        const onMove = (ev) => {
+          const newWidth = Math.max(
+            minWidth,
+            startWidth + (ev.clientX - startX)
+          );
+          setWidths2((prev) => ({ ...prev, [headerKey]: newWidth }));
+        };
+        const onUp = () => {
+          window.removeEventListener("mousemove", onMove);
+          window.removeEventListener("mouseup", onUp);
+        };
+        window.addEventListener("mousemove", onMove);
+        window.addEventListener("mouseup", onUp);
+      },
+      [widths2, defaultWidth, minWidth]
+    );
+    const gridTemplateColumns2 = headers2.filter((h) => {
+      var _a, _b;
+      return !((_b = (_a = context == null ? void 0 : context.hideColumns) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, h));
+    }).map((h) => {
+      var _a;
+      return `${(_a = widths2[h]) != null ? _a : defaultWidth}px`;
+    }).join(" ");
+    return { widths: widths2, gridTemplateColumns: gridTemplateColumns2, startDrag: startDrag2, setWidths: setWidths2 };
+  }
+  const { gridTemplateColumns, startDrag, widths, setWidths } = useResizableColumns(headers);
+  (0, import_react19.useEffect)(() => {
+    if (!tableRef.current) return;
+    const observer = new ResizeObserver(([entry]) => {
+      const sizeados = headers.filter(
+        (h) => [
+          "__select__",
+          "__modal__"
+          // ...(context?.hideColumns || []),
+          // ...(context?.colSize ? Object.keys(context.colSize) : []),
+        ].includes(h)
+      );
+      const personalizados = (context == null ? void 0 : context.colSize) ? Object.values(context.colSize) : [];
+      const personalizadosSum = personalizados.length > 0 ? personalizados.reduce((acc, i) => acc + i, 0) : 0;
+      const ancho = +entry.contentRect.width;
+      const sizeadosLength = sizeados.length;
+      const sizeadosWidth = sizeadosLength * 60;
+      const w = (ancho - sizeadosWidth - personalizadosSum) / (headers.length - sizeadosLength - personalizados.length);
+      console.log({
+        w,
+        ancho,
+        sizeadosWidth,
+        sizeadosLength,
+        personalizadosSum,
+        headers: headers.length,
+        personalizados: personalizados.length
+      });
+      setWidths(
+        Object.fromEntries(
+          headers.map((h) => {
+            var _a, _b;
+            return [
+              h,
+              ((_a = context == null ? void 0 : context.colSize) == null ? void 0 : _a[h]) ? (_b = context == null ? void 0 : context.colSize) == null ? void 0 : _b[h] : ["__select__", "__modal__"].includes(h) ? 60 : w
+            ];
+          })
+        )
+      );
+    });
+    observer.observe(tableRef.current);
+    return () => observer.disconnect();
+  }, [headers.length]);
+  const searchedData = context.filteredData.filter((row) => {
+    if (context.searchBy === "") return true;
+    return Object.values(row).some(
+      (value) => String(value).toLowerCase().includes(context.searchBy.toLowerCase())
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    "div",
+    {
+      className: [context.className, "bg-white relative"].join(" "),
+      ref: tableRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-white px-1 font-bold", children: context.header }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "bg-white flex gap-2 items-center", children: [
+          context.searchable && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Searchable, { context }),
+          context.exportName && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+            "button",
+            {
+              onClick: (e) => {
+                context.excel.export(
+                  context.data.map((d) => {
+                    const { __select__, __modal__, ...datums } = d;
+                    return datums;
+                  })
+                );
+              },
+              className: "flex gap-1 items-center border shadow rounded p-1 text-white bg-green-800 px-2",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ExcelIcon2, {}),
+                "Exportar"
+              ]
+            }
+          ),
+          context.onSelect && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "button",
+            {
+              className: "border shadow rounded p-1 text-white px-2 " + (context.selected.length > 0 ? "bg-blue-500" : "bg-gray-500"),
+              disabled: context.selected.length == 0,
+              onClick: async (e) => {
+                setIsloading(true);
+                const ex = context.filteredData.filter((d) => context.selected.includes(d.id)).map((d) => {
+                  const { __select__, __modal__, ...datums } = d;
+                  return datums;
+                });
+                await context.onSelect(ex);
+                setIsloading(false);
+              },
+              children: (context == null ? void 0 : context.onSelectLabel) || "Guardar selecci\xF3n"
+            }
+          ),
+          context.onSave && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "button",
+            {
+              className: "border shadow rounded p-1 text-white px-2 " + (context.editions.length > 0 ? "bg-blue-500" : "bg-gray-500"),
+              disabled: context.editions.length == 0,
+              onClick: async (e) => {
+                setIsloading(true);
+                const ex = context.filteredData.map((d) => {
+                  const { __select__, __modal__, ...datums } = d;
+                  return datums;
+                });
+                await context.onSave(ex);
+                setIsloading(false);
+              },
+              children: context.onSaveLabel || "Guardar cambios"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid ", style: { gridTemplateColumns }, children: [
+          headers.map((header, i) => {
+            var _a, _b;
+            if ((_b = (_a = context == null ? void 0 : context.hideColumns) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, header)) return null;
+            return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+              "div",
+              {
+                className: "bg-white",
+                style: { position: "relative" },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    Header,
+                    {
+                      padding,
+                      header,
+                      context,
+                      drag: { gridTemplateColumns, startDrag, widths }
+                    }
+                  ),
+                  i < headers.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    "div",
+                    {
+                      onMouseDown: (e) => startDrag(e, header),
+                      style: {
+                        position: "absolute",
+                        right: -3,
+                        top: 0,
+                        width: 6,
+                        height: "100%",
+                        cursor: "col-resize",
+                        background: "transparent"
+                      },
+                      onMouseEnter: (e) => e.currentTarget.style.background = "var(--border-strong, #ccc)",
+                      onMouseLeave: (e) => e.currentTarget.style.background = "transparent"
+                    }
+                  )
+                ]
+              },
+              header
+            );
+          }),
+          searchedData.map((row, rowIndex) => {
+            const items = Object.entries(row);
+            return items.map(([key, item], i) => {
+              var _a, _b, _c, _d, _e, _f, _g;
+              if ((_b = (_a = context == null ? void 0 : context.hideColumns) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, key)) return null;
+              if (key == "__modal__") {
+                return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  "div",
+                  {
+                    onMouseEnter: (e) => setCurrentIndex(rowIndex),
+                    style: {
+                      height: `${padding}px`
+                    },
+                    className: (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + " border-b p-2 flex items-center justify-center  " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? "bg-yellow-100" : ""),
+                    children: (context == null ? void 0 : context.modalButton) || /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      "button",
+                      {
+                        className: "border shadow rounded bg-blue-500 text-white p-2 ",
+                        onClick: (e) => {
+                          var _a2;
+                          setCurrentIndex(rowIndex);
+                          (_a2 = modalRef.current) == null ? void 0 : _a2.click();
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(EditIcon3, {})
+                      }
+                    )
+                  },
+                  row.id + i
+                );
+              }
+              if (key == "__select__") {
+                return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  "div",
+                  {
+                    onMouseEnter: (e) => setCurrentIndex(rowIndex),
+                    style: {
+                      height: `${padding}px`
+                    },
+                    className: (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + " border-b p-2 flex items-center justify-center " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? "bg-yellow-100" : ""),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        className: "w-5 h-5 accent-blue-600 transition-all duration-300 checked:scale-110 ",
+                        checked: Boolean(
+                          context.selected.find((s) => s == (row == null ? void 0 : row.id))
+                        ),
+                        onChange: (e) => {
+                          const newSelected = [...context.selected];
+                          const index = newSelected.findIndex((s) => s == (row == null ? void 0 : row.id));
+                          if (index >= 0) {
+                            newSelected.splice(index, 1);
+                          } else {
+                            newSelected.push(row == null ? void 0 : row.id);
+                          }
+                          context.setSelected(newSelected);
+                        }
+                      }
+                    )
+                  },
+                  row.id + i
+                );
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                "div",
+                {
+                  onMouseEnter: (e) => setCurrentIndex(rowIndex),
+                  style: {
+                    fontSize: context.fontSize,
+                    ...(context == null ? void 0 : context.wrapText) ? { minHeight: `${padding}px` } : { height: `${padding}px` }
+                  },
+                  className: " flex  justify-center items-center " + (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + (context.wrapText ? " text-wrap truncate " : "  truncate ") + " border-b  " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? rowIndex == currentIndex ? " bg-yellow-200 " : " bg-yellow-100 " : ""),
+                  children: (context == null ? void 0 : context.editableFields) && context.editableFields.includes(key) ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    "input",
+                    {
+                      defaultValue: item,
+                      className: "w-full " + (context.editions.includes(row == null ? void 0 : row.id) ? "bg-blue-400 text-white" : "bg-blue-100"),
+                      onBlur: (e) => {
+                        const id = row == null ? void 0 : row.id;
+                        const newData = [...context.data];
+                        const index = newData.findIndex((d) => +d.id == +id);
+                        newData[index][key] = e.target.value;
+                        context.setData(newData);
+                        const newEditions = [
+                          .../* @__PURE__ */ new Set([...context.editions, id])
+                        ];
+                        context.setEditions(newEditions);
+                      }
+                    }
+                  ) : ((_c = context.buttons) == null ? void 0 : _c[key]) ? import_react19.default.cloneElement(context.buttons[key], {
+                    // children: context.buttons[key]?.props?.children
+                    //   ? item
+                    //   : undefined,
+                    value: item,
+                    children: ((_e = (_d = context.buttons[key]) == null ? void 0 : _d.props) == null ? void 0 : _e.children) ? item : null,
+                    onClick: async (e) => {
+                      var _a2, _b2;
+                      const ret = await ((_b2 = (_a2 = context.buttons[key].props) == null ? void 0 : _a2.onClick) == null ? void 0 : _b2.call(_a2, e)) || {};
+                      const newData = [...context.data];
+                      const index = newData.findIndex((f) => f.id == (row == null ? void 0 : row.id));
+                      newData[index] = { ...newData[index], ...ret };
+                      context.setData(newData);
+                    },
+                    onChange: async (e) => {
+                      var _a2, _b2, _c2;
+                      const value = e.target.value;
+                      const ret = await ((_b2 = (_a2 = context.buttons[key].props) == null ? void 0 : _a2.onChange) == null ? void 0 : _b2.call(_a2, e)) || {};
+                      const newData = [...context.data];
+                      const index = newData.findIndex((f) => f.id == (row == null ? void 0 : row.id));
+                      if (index >= 0) {
+                        newData[index][key] = value;
+                      }
+                      for (let i2 in ret) {
+                        if ((_c2 = newData[index]) == null ? void 0 : _c2[i2]) {
+                          const v = ret[i2];
+                          newData[index][i2] = v;
+                        }
+                      }
+                      context.setData(newData);
+                    },
+                    className: `${(_g = (_f = context.buttons[key]) == null ? void 0 : _f.props) == null ? void 0 : _g.className} text-xs w-full`
+                  }) : ["number", "string"].includes(typeof item) ? valueFormatter({
+                    value: item,
+                    currentCoin: context.currentCoin
+                  }) : JSON.stringify(item)
+                },
+                row.id + i
+              );
+            });
+          }),
+          Object.keys((context == null ? void 0 : context.footer) || {}).length > 0 && headers.map((header) => {
+            var _a;
+            return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "div",
+              {
+                style: {
+                  height: `${padding}px`,
+                  maxHeight: "100px"
+                },
+                className: "border-b  font-bold  bg-white flex items-center justify-center",
+                children: valueFormatter({
+                  currentCoin: context.currentCoin,
+                  value: ((_a = context.footer) == null ? void 0 : _a[header]) ? context.footer[header] == "sum" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) : context.footer[header] == "count" ? context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : context.footer[header] == "avg" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) / context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : "" : ""
+                })
+              },
+              header
+            );
+          })
+        ] }),
+        context.modal && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          Modal,
+          {
+            button: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { ref: modalRef }),
+            color: "white",
+            onClose: async () => {
+              var _a;
+              const c = await ((_a = context == null ? void 0 : context.onCloseModal) == null ? void 0 : _a.call(context, searchedData[currentIndex]));
+              return c;
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "fixed top-0 left-0 p-10 ", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  "button",
+                  {
+                    className: "p-2 border shadow rounded " + (currentIndex > 0 ? "bg-white " : "bg-gray-100"),
+                    onClick: (e) => {
+                      currentIndex > 0 && setCurrentIndex(currentIndex - 1);
+                    },
+                    children: "Anterior"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  "button",
+                  {
+                    className: "p-2 border shadow rounded " + (currentIndex < searchedData.length - 1 ? "bg-white " : "bg-gray-100"),
+                    onClick: (e) => {
+                      currentIndex < searchedData.length - 1 && setCurrentIndex(currentIndex + 1);
+                    },
+                    children: "Siguiente"
+                  }
+                )
+              ] }),
+              import_react19.default.cloneElement(context.modal, {
+                row: searchedData[currentIndex]
+              })
+            ] })
+          }
+        ),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "div",
+          {
+            className: "bg-white/40  absolute inset-0 text-black flex items-center justify-center",
+            style: { zIndex: 9999999 },
+            children: "Loading..."
+          }
+        )
+      ]
+    }
+  );
+}
+function valueFormatter({
+  value,
+  currentCoin = ""
+}) {
+  if (value == null || value === "") return "";
+  const isDate = /(\d{4}-\d{2}-\d{2})(T[\d:,.+-]*(Z)?)?/;
+  if (`${value}`.match(isDate)) {
+    return value.toString().split("T")[0].split("-").reverse().join("/");
+  }
+  const splited = `${value}`.split(".");
+  const hasDecimals = splited.length == 2 && splited.every((v) => `${v}`.match(types_default.number));
+  if (hasDecimals) {
+    return [
+      currentCoin,
+      (+`${value}`).toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      })
+    ].join(" ");
+  }
+  return value;
+}
+
+// src/table-advanced/context.ts
+var import_react20 = require("react");
+
+// src/table-advanced/filter.reducer.ts
+var filterReducer = (acc, b) => {
+  if (b == null) return [];
+  const newAcc = [];
+  newAcc.push(b);
+  return newAcc;
+};
+
+// src/table-advanced/sort.reducer.ts
+var sortReducer = (acc, b) => {
+  var _a;
+  const oldAcc = [...acc];
+  const newAcc = [];
+  const keys2 = Object.keys(b);
+  const k = keys2[0];
+  let newType = b[k];
+  if (b[k] == "TOGGLE") {
+    newType = ((_a = oldAcc == null ? void 0 : oldAcc[0]) == null ? void 0 : _a.type) == "ASC" ? "DESC" : "ASC";
+  }
+  newAcc.push({ field: k, type: newType });
+  return newAcc;
+};
+
+// src/table-advanced/context.ts
+function useContext({ onSelect }) {
+  const excel = useExcel();
+  const [editions, setEditions] = (0, import_react20.useState)([]);
+  const [selected, setSelected] = (0, import_react20.useState)([]);
+  const [data, setData] = (0, import_react20.useState)([]);
+  const headers = [...new Set(data.map((b) => Object.keys(b)).flat())];
+  const [currentHeader, setCurrentHeader] = (0, import_react20.useState)(null);
+  const cols = headers.length;
+  const [filters, setFilters] = (0, import_react20.useReducer)(
+    filterReducer,
+    new Array()
+  );
+  const [searchBy, setSearchBy] = (0, import_react20.useState)("");
+  const [sort, setSort] = (0, import_react20.useReducer)(sortReducer, new Array());
+  const sortedData = (0, import_react20.useMemo)(() => {
+    return [...data].sort((a, b) => {
+      for (const { field, type } of sort.reverse()) {
+        const av = a[field];
+        const bv = b[field];
+        if (av == null && bv == null) continue;
+        if (av == null) return 1;
+        if (bv == null) return -1;
+        let cmp;
+        if (typeof av === "number" && typeof bv === "number") {
+          cmp = av - bv;
+        } else {
+          cmp = `${av}`.localeCompare(`${bv}`, void 0, { numeric: true });
+        }
+        if (cmp !== 0) {
+          return type === "DESC" ? -cmp : cmp;
+        }
+      }
+      return 0;
+    });
+  }, [data, sort]);
+  const filteredData = [...sortedData].filter((d) => {
+    if (editions.includes(d == null ? void 0 : d.id)) return true;
+    for (const { field, values } of filters) {
+      if (!values.includes(d[field])) {
+        return false;
+      }
+    }
+    return true;
+  });
+  (0, import_react20.useEffect)(() => {
+    if (filters.length == 0) {
+      setEditions([]);
+    }
+  }, [filters]);
+  return {
+    currentHeader,
+    setCurrentHeader,
+    sort,
+    setSort,
+    cols,
+    headers,
+    data,
+    sortedData,
+    filters,
+    setFilters,
+    filteredData,
+    setData,
+    searchBy,
+    setSearchBy,
+    selected,
+    setSelected,
+    editions,
+    excel,
+    setEditions
+  };
+}
+
+// src/table-advanced/index.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function TableAdvanced(tableProps) {
+  const { data, ...props } = tableProps;
+  const context = useContext({ onSelect: Boolean(tableProps.onSelect) });
+  (0, import_react21.useEffect)(() => {
+    context.setData(
+      Array.isArray(data) ? data.map((d) => {
+        return {
+          ...(tableProps == null ? void 0 : tableProps.modal) ? { __modal__: "" } : {},
+          ...(tableProps == null ? void 0 : tableProps.onSelect) ? { __select__: "" } : {},
+          ...d
+        };
+      }) : data
+    );
+  }, [data]);
+  (0, import_react21.useEffect)(() => {
+    if (tableProps == null ? void 0 : tableProps.sortBy) {
+      const [k, v] = Object.entries(tableProps.sortBy)[0];
+      context.setSort({ [k]: v });
+    }
+  }, [tableProps == null ? void 0 : tableProps.sortBy]);
+  if (Array.isArray(data) && data.length > 0) {
+    if (data.every((d) => !(d == null ? void 0 : d.id))) {
+      throw new Error("All data rows must have an 'id' property.");
+    }
+    if ((props == null ? void 0 : props.onSave) && props.onSelect) {
+      throw new Error("Must have only one of onSave or onSelect");
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(HTable, { context: { ...context, ...props } });
+  }
+  return null;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -38464,6 +39594,7 @@ function Table3({
   Select,
   Table,
   Table3,
+  TableAdvanced,
   TextArea,
   regularExpresions,
   useDates,