next-recomponents 2.0.34 → 2.0.36

package/dist/index.d.mts

@@ -235,7 +235,7 @@ declare function usePopup(): {
     confirm: (message: string, color?: PopupColor) => Promise<boolean>;
     prompt: (message: string, color?: PopupColor) => Promise<string | null>;
     modal: (message: ReactNode, color?: PopupColor, icons?: boolean, full?: boolean) => Promise<void>;
-    PopupComponent: () => react_jsx_runtime.JSX.Element | null;
+    PopupComponent: react_jsx_runtime.JSX.Element | null;
     close: (confirmed: boolean, value?: string) => void;
     updateMessage: (message: ReactNode) => void;
 };

package/dist/index.d.ts

@@ -235,7 +235,7 @@ declare function usePopup(): {
     confirm: (message: string, color?: PopupColor) => Promise<boolean>;
     prompt: (message: string, color?: PopupColor) => Promise<string | null>;
     modal: (message: ReactNode, color?: PopupColor, icons?: boolean, full?: boolean) => Promise<void>;
-    PopupComponent: () => react_jsx_runtime.JSX.Element | null;
+    PopupComponent: react_jsx_runtime.JSX.Element | null;
     close: (confirmed: boolean, value?: string) => void;
     updateMessage: (message: ReactNode) => void;
 };

package/dist/index.js

@@ -3668,19 +3668,8 @@ function Container({
   expandedFooter = false,
   expandedMenu = false
 }) {
-  const [isSidebarOpen, setIsSidebarOpen] = (0, import_react2.useState)(expandedMenu);
+  const [isSidebarOpen, setIsSidebarOpen] = (0, import_react2.useState)(false);
   const [isFooterOpen, setIsFooterOpen] = (0, import_react2.useState)(expandedFooter);
-  const handleClick = (state) => {
-    window.localStorage.setItem("isSidebarOpen", JSON.stringify(state));
-  };
-  (0, import_react2.useEffect)(() => {
-    if (typeof window !== "undefined") {
-      const storedSidebarState = window.localStorage.getItem("isSidebarOpen");
-      if (storedSidebarState && window.innerWidth >= 768) {
-        setIsSidebarOpen(JSON.parse(storedSidebarState));
-      }
-    }
-  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col h-screen", children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "bg-blue-600 text-white p-4 flex justify-between items-center shadow-md", children: [
@@ -3689,7 +3678,6 @@ function Container({
           {
             onClick: () => {
               setIsSidebarOpen(!isSidebarOpen);
-              handleClick(!isSidebarOpen);
             },
             className: "bg-blue-600 text-white px-2 py-1 rounded-r",
             children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuIcon, {})
@@ -3728,6 +3716,10 @@ function Container({
           className: `bg-blue-500 text-white overflow-y-auto fixed md:static top-0 left-0 h-full z-50 md:z-auto transition-all duration-300 ease-in-out
     ${isSidebarOpen ? "w-full md:w-[250px]" : "w-0 md:w-[60px]"}
   `,
+          onMouseEnter: (e) => {
+            setIsSidebarOpen(true);
+          },
+          onMouseLeave: (e) => setIsSidebarOpen(false),
           children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-4 ", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("ul", { className: "space-y-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "li",
@@ -3735,7 +3727,6 @@ function Container({
                 className: "p-2  md:hidden flex items-center justify-between font-bold",
                 onClick: (e) => {
                   setIsSidebarOpen(false);
-                  handleClick(false);
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuIcon, {}),
@@ -3771,7 +3762,6 @@ function Container({
           className: "fixed inset-0 bg-black bg-opacity-40 z-40",
           onClick: () => {
             setIsSidebarOpen(false);
-            handleClick(false);
           }
         }
       ),
@@ -37268,17 +37258,14 @@ function usePopup() {
     messageRef.current = message;
     setPopup((prev) => ({ ...prev }));
   }, []);
-  const PopupComponent = (0, import_react10.useCallback)(() => {
-    if (!popup.visible) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      PopupOverlay,
-      {
-        popup: { ...popup, message: messageRef.current },
-        onClose: close,
-        onInputChange: (v) => setPopup((prev) => ({ ...prev, inputValue: v }))
-      }
-    );
-  }, [popup, close]);
+  const PopupComponent = popup.visible ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    PopupOverlay,
+    {
+      popup: { ...popup, message: messageRef.current },
+      onClose: close,
+      onInputChange: (v) => setPopup((prev) => ({ ...prev, inputValue: v }))
+    }
+  ) : null;
   return {
     alert: alert2,
     confirm,
@@ -37299,17 +37286,24 @@ function Modal({
   title
 }) {
   const pop = usePopup();
-  const hide = (0, import_react11.useCallback)(() => pop.close(false), [pop.close]);
+  const hide = () => pop.close(false);
+  const childrenWithHide = (0, import_react11.useMemo)(
+    () => (0, import_react11.cloneElement)(children, { hide }),
+    [children]
+  );
+  (0, import_react11.useEffect)(() => {
+    pop.updateMessage(childrenWithHide);
+  }, [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: [
     (0, import_react11.cloneElement)(button, {
       onClick: (e) => {
         onClick == null ? void 0 : onClick(e);
-        pop.modal((0, import_react11.cloneElement)(children, { hide }), color, false, true);
+        pop.modal(childrenWithHide, color, false, true);
       }
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(pop.PopupComponent, {})
+    pop.PopupComponent
   ] });
 }
 

package/dist/index.mjs

@@ -3561,7 +3561,7 @@ function Button({
 }
 
 // src/container/index.tsx
-import { useEffect, useState as useState2 } from "react";
+import { useState as useState2 } from "react";
 
 // src/container/icons.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -3643,19 +3643,8 @@ function Container({
   expandedFooter = false,
   expandedMenu = false
 }) {
-  const [isSidebarOpen, setIsSidebarOpen] = useState2(expandedMenu);
+  const [isSidebarOpen, setIsSidebarOpen] = useState2(false);
   const [isFooterOpen, setIsFooterOpen] = useState2(expandedFooter);
-  const handleClick = (state) => {
-    window.localStorage.setItem("isSidebarOpen", JSON.stringify(state));
-  };
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const storedSidebarState = window.localStorage.getItem("isSidebarOpen");
-      if (storedSidebarState && window.innerWidth >= 768) {
-        setIsSidebarOpen(JSON.parse(storedSidebarState));
-      }
-    }
-  }, []);
   return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col h-screen", children: [
     /* @__PURE__ */ jsxs2("header", { className: "", children: [
       /* @__PURE__ */ jsxs2("div", { className: "bg-blue-600 text-white p-4 flex justify-between items-center shadow-md", children: [
@@ -3664,7 +3653,6 @@ function Container({
           {
             onClick: () => {
               setIsSidebarOpen(!isSidebarOpen);
-              handleClick(!isSidebarOpen);
             },
             className: "bg-blue-600 text-white px-2 py-1 rounded-r",
             children: /* @__PURE__ */ jsx3(MenuIcon, {})
@@ -3703,6 +3691,10 @@ function Container({
           className: `bg-blue-500 text-white overflow-y-auto fixed md:static top-0 left-0 h-full z-50 md:z-auto transition-all duration-300 ease-in-out
     ${isSidebarOpen ? "w-full md:w-[250px]" : "w-0 md:w-[60px]"}
   `,
+          onMouseEnter: (e) => {
+            setIsSidebarOpen(true);
+          },
+          onMouseLeave: (e) => setIsSidebarOpen(false),
           children: /* @__PURE__ */ jsx3("div", { className: "p-4 ", children: /* @__PURE__ */ jsxs2("ul", { className: "space-y-3", children: [
             /* @__PURE__ */ jsxs2(
               "li",
@@ -3710,7 +3702,6 @@ function Container({
                 className: "p-2  md:hidden flex items-center justify-between font-bold",
                 onClick: (e) => {
                   setIsSidebarOpen(false);
-                  handleClick(false);
                 },
                 children: [
                   /* @__PURE__ */ jsx3(MenuIcon, {}),
@@ -3746,7 +3737,6 @@ function Container({
           className: "fixed inset-0 bg-black bg-opacity-40 z-40",
           onClick: () => {
             setIsSidebarOpen(false);
-            handleClick(false);
           }
         }
       ),
@@ -36935,7 +36925,7 @@ function Select({
 }
 
 // src/modal/index.tsx
-import { cloneElement as cloneElement2, useCallback as useCallback2 } from "react";
+import { cloneElement as cloneElement2, useEffect as useEffect6, useMemo as useMemo4 } from "react";
 
 // src/pop/index.tsx
 import { useState as useState9, useCallback, useRef as useRef3 } from "react";
@@ -37254,17 +37244,14 @@ function usePopup() {
     messageRef.current = message;
     setPopup((prev) => ({ ...prev }));
   }, []);
-  const PopupComponent = useCallback(() => {
-    if (!popup.visible) return null;
-    return /* @__PURE__ */ jsx15(
-      PopupOverlay,
-      {
-        popup: { ...popup, message: messageRef.current },
-        onClose: close,
-        onInputChange: (v) => setPopup((prev) => ({ ...prev, inputValue: v }))
-      }
-    );
-  }, [popup, close]);
+  const PopupComponent = popup.visible ? /* @__PURE__ */ jsx15(
+    PopupOverlay,
+    {
+      popup: { ...popup, message: messageRef.current },
+      onClose: close,
+      onInputChange: (v) => setPopup((prev) => ({ ...prev, inputValue: v }))
+    }
+  ) : null;
   return {
     alert: alert2,
     confirm,
@@ -37277,7 +37264,7 @@ function usePopup() {
 }
 
 // src/modal/index.tsx
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsxs as jsxs10 } from "react/jsx-runtime";
 function Modal({
   button,
   children,
@@ -37285,25 +37272,32 @@ function Modal({
   title
 }) {
   const pop = usePopup();
-  const hide = useCallback2(() => pop.close(false), [pop.close]);
+  const hide = () => pop.close(false);
+  const childrenWithHide = useMemo4(
+    () => cloneElement2(children, { hide }),
+    [children]
+  );
+  useEffect6(() => {
+    pop.updateMessage(childrenWithHide);
+  }, [childrenWithHide]);
   const props = button == null ? void 0 : button.props;
   const onClick = props == null ? void 0 : props.onClick;
   return /* @__PURE__ */ jsxs10(Fragment2, { children: [
     cloneElement2(button, {
       onClick: (e) => {
         onClick == null ? void 0 : onClick(e);
-        pop.modal(cloneElement2(children, { hide }), color, false, true);
+        pop.modal(childrenWithHide, color, false, true);
       }
     }),
-    /* @__PURE__ */ jsx16(pop.PopupComponent, {})
+    pop.PopupComponent
   ] });
 }
 
 // src/pre/index.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Pre = ({ data }) => {
   const formatted = JSON.stringify(data, null, 2);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16(
     "pre",
     {
       style: {
@@ -37354,9 +37348,9 @@ import {
 import DatePicker from "react-datepicker";
 
 // src/calendar/calendar.icon.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function CalendarIcon() {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     "svg",
     {
       stroke: "currentColor",
@@ -37366,14 +37360,14 @@ function CalendarIcon() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx18("path", { d: "M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z" })
+      children: /* @__PURE__ */ jsx17("path", { d: "M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z" })
     }
   );
 }
 
 // src/calendar/index.tsx
 import { Dialog as Dialog2 } from "@mui/material";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function MyCalendar({
   enabledDates,
   onChange,
@@ -37409,15 +37403,15 @@ function MyCalendar({
       /* @__PURE__ */ jsxs11("div", { className: "font-bold", children: [
         label,
         " ",
-        (otherProps == null ? void 0 : otherProps.required) && /* @__PURE__ */ jsx19("span", { className: "text-red-500", children: "*" })
+        (otherProps == null ? void 0 : otherProps.required) && /* @__PURE__ */ jsx18("span", { className: "text-red-500", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsxs11(
         "div",
         {
           className: "cursor-pointer flex items-center justify-center",
           onClick: (e) => setOpen(true),
           children: [
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx18(
               "input",
               {
                 ...otherProps,
@@ -37432,13 +37426,13 @@ function MyCalendar({
                 readOnly: true
               }
             ),
-            /* @__PURE__ */ jsx19("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ jsx19(CalendarIcon, {}) })
+            /* @__PURE__ */ jsx18("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ jsx18(CalendarIcon, {}) })
           ]
         }
       ) })
     ] }),
     /* @__PURE__ */ jsxs11(Dialog2, { open, children: [
-      /* @__PURE__ */ jsx19("div", { className: "flex justify-end p-5 font-bold", children: /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx18("div", { className: "flex justify-end p-5 font-bold", children: /* @__PURE__ */ jsx18(
         "button",
         {
           className: " border-lg w-[20px] bg-red-500 text-white shadow rounded",
@@ -37446,7 +37440,7 @@ function MyCalendar({
           children: "x"
         }
       ) }),
-      /* @__PURE__ */ jsx19("div", { className: " w-[300px] flex items-start justify-center h-[300px]  p-5", children: /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx18("div", { className: " w-[300px] flex items-start justify-center h-[300px]  p-5", children: /* @__PURE__ */ jsx18(
         DatePicker,
         {
           inline: true,
@@ -37460,9 +37454,9 @@ function MyCalendar({
 }
 
 // src/doc-viewer/icon.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function Icon() {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx19(
     "svg",
     {
       stroke: "currentColor",
@@ -37472,13 +37466,13 @@ function Icon() {
       height: "200px",
       width: "200px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx20("path", { d: "M212.24,83.76l-56-56A6,6,0,0,0,152,26H56A14,14,0,0,0,42,40v88a6,6,0,0,0,12,0V40a2,2,0,0,1,2-2h90V88a6,6,0,0,0,6,6h50V216a2,2,0,0,1-2,2H176a6,6,0,0,0,0,12h24a14,14,0,0,0,14-14V88A6,6,0,0,0,212.24,83.76ZM158,46.48,193.52,82H158ZM108,130a50,50,0,0,0-46.66,32H60a34,34,0,0,0,0,68h48a50,50,0,0,0,0-100Zm0,88H60a22,22,0,0,1-1.65-43.94c-.06.47-.1.93-.15,1.4a6,6,0,1,0,12,1.08A38.57,38.57,0,0,1,71.3,170a5.71,5.71,0,0,0,.24-.86A38,38,0,1,1,108,218Z" })
+      children: /* @__PURE__ */ jsx19("path", { d: "M212.24,83.76l-56-56A6,6,0,0,0,152,26H56A14,14,0,0,0,42,40v88a6,6,0,0,0,12,0V40a2,2,0,0,1,2-2h90V88a6,6,0,0,0,6,6h50V216a2,2,0,0,1-2,2H176a6,6,0,0,0,0,12h24a14,14,0,0,0,14-14V88A6,6,0,0,0,212.24,83.76ZM158,46.48,193.52,82H158ZM108,130a50,50,0,0,0-46.66,32H60a34,34,0,0,0,0,68h48a50,50,0,0,0,0-100Zm0,88H60a22,22,0,0,1-1.65-43.94c-.06.47-.1.93-.15,1.4a6,6,0,1,0,12,1.08A38.57,38.57,0,0,1,71.3,170a5.71,5.71,0,0,0,.24-.86A38,38,0,1,1,108,218Z" })
     }
   );
 }
 
 // src/doc-viewer/index.tsx
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function DocumentViewer({ item }) {
   const { url, name, contentType, width = "100%", height = "100%" } = item;
   const isImage = contentType.startsWith("image/");
@@ -37489,8 +37483,8 @@ function DocumentViewer({ item }) {
   )}&embedded=true` : url;
   return /* @__PURE__ */ jsxs12("div", { className: "border shadow rounded p-2 h-[100%]", children: [
     /* @__PURE__ */ jsxs12("div", { className: "mb-1 flex justify-between ", children: [
-      /* @__PURE__ */ jsx21("h3", { className: "font-bold", children: name }),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx20("h3", { className: "font-bold", children: name }),
+      /* @__PURE__ */ jsx20(
         "a",
         {
           href: url,
@@ -37502,7 +37496,7 @@ function DocumentViewer({ item }) {
         }
       )
     ] }),
-    isImage ? /* @__PURE__ */ jsx21(
+    isImage ? /* @__PURE__ */ jsx20(
       "img",
       {
         src: url,
@@ -37515,7 +37509,7 @@ function DocumentViewer({ item }) {
           display: "block"
         }
       }
-    ) : isGoogleDocCompatible ? /* @__PURE__ */ jsx21(
+    ) : isGoogleDocCompatible ? /* @__PURE__ */ jsx20(
       "iframe",
       {
         title: name,
@@ -37523,7 +37517,7 @@ function DocumentViewer({ item }) {
         style: { width, height, border: "none" },
         allowFullScreen: true
       }
-    ) : /* @__PURE__ */ jsx21(
+    ) : /* @__PURE__ */ jsx20(
       "div",
       {
         style: {
@@ -37533,7 +37527,7 @@ function DocumentViewer({ item }) {
           objectFit: "cover",
           display: "block"
         },
-        children: /* @__PURE__ */ jsx21(Icon, {})
+        children: /* @__PURE__ */ jsx20(Icon, {})
       }
     )
   ] });
@@ -37541,20 +37535,20 @@ function DocumentViewer({ item }) {
 
 // src/table3/index.tsx
 import React9, {
-  useEffect as useEffect8,
-  useMemo as useMemo6,
+  useEffect as useEffect9,
+  useMemo as useMemo7,
   useReducer as useReducer2,
   useRef as useRef5,
   useState as useState13
 } from "react";
 
 // src/table3/filter.tsx
-import { useEffect as useEffect7, useMemo as useMemo4, useState as useState11 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo5, useState as useState11 } from "react";
 
 // src/table3/filters.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function FilterOffIcon() {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     "svg",
     {
       stroke: "currentColor",
@@ -37564,12 +37558,12 @@ function FilterOffIcon() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx22("path", { d: "M6.92893 0.514648L21.0711 14.6568L19.6569 16.071L15.834 12.2486L14 14.9999V21.9999H10V14.9999L4 5.99993H3V3.99993L7.585 3.99965L5.51472 1.92886L6.92893 0.514648ZM21 3.99993V5.99993H20L18.085 8.87193L13.213 3.99993H21Z" })
+      children: /* @__PURE__ */ jsx21("path", { d: "M6.92893 0.514648L21.0711 14.6568L19.6569 16.071L15.834 12.2486L14 14.9999V21.9999H10V14.9999L4 5.99993H3V3.99993L7.585 3.99965L5.51472 1.92886L6.92893 0.514648ZM21 3.99993V5.99993H20L18.085 8.87193L13.213 3.99993H21Z" })
     }
   );
 }
 function OrderDesc() {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     "svg",
     {
       stroke: "currentColor",
@@ -37579,12 +37573,12 @@ function OrderDesc() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx22("path", { d: "M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm112-128h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 65.63V48a16 16 0 0 0-16-16H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 190.37V208a16 16 0 0 0 16 16zm159.06 234.62l-59.27-160A16 16 0 0 0 372.72 288h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 480h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 480H432a16 16 0 0 0 15.06-21.38zM335.61 400L352 352l16.39 48z" })
+      children: /* @__PURE__ */ jsx21("path", { d: "M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm112-128h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 65.63V48a16 16 0 0 0-16-16H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 190.37V208a16 16 0 0 0 16 16zm159.06 234.62l-59.27-160A16 16 0 0 0 372.72 288h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 480h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 480H432a16 16 0 0 0 15.06-21.38zM335.61 400L352 352l16.39 48z" })
     }
   );
 }
 function OrderAsc() {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     "svg",
     {
       stroke: "currentColor",
@@ -37594,12 +37588,12 @@ function OrderAsc() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx22("path", { d: "M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm240-64H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 446.37V464a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 321.63V304a16 16 0 0 0-16-16zm31.06-85.38l-59.27-160A16 16 0 0 0 372.72 32h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 224h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 224H432a16 16 0 0 0 15.06-21.38zM335.61 144L352 96l16.39 48z" })
+      children: /* @__PURE__ */ jsx21("path", { d: "M176 352h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.36 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm240-64H288a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h56l-61.26 70.45A32 32 0 0 0 272 446.37V464a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-56l61.26-70.45A32 32 0 0 0 432 321.63V304a16 16 0 0 0-16-16zm31.06-85.38l-59.27-160A16 16 0 0 0 372.72 32h-41.44a16 16 0 0 0-15.07 10.62l-59.27 160A16 16 0 0 0 272 224h24.83a16 16 0 0 0 15.23-11.08l4.42-12.92h71l4.41 12.92A16 16 0 0 0 407.16 224H432a16 16 0 0 0 15.06-21.38zM335.61 144L352 96l16.39 48z" })
     }
   );
 }
 function EditIcon2() {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     "svg",
     {
       stroke: "currentColor",
@@ -37609,7 +37603,7 @@ function EditIcon2() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx22("path", { d: "M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z" })
+      children: /* @__PURE__ */ jsx21("path", { d: "M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z" })
     }
   );
 }
@@ -37625,14 +37619,14 @@ function SaveIcon() {
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx22("path", { d: "M272 64h-16c-4.4 0-8 3.6-8 8v72c0 4.4 7.6 8 12 8h12c4.4 0 8-3.6 8-8V72c0-4.4-3.6-8-8-8z" }),
-        /* @__PURE__ */ jsx22("path", { d: "M433.9 130.1L382 78.2c-9-9-21.3-14.2-34.1-14.2h-28c-8.8 0-16 7.3-16 16.2v80c0 8.8-7.2 16-16 16H160c-8.8 0-16-7.2-16-16v-80c0-8.8-7.2-16.2-16-16.2H96c-17.6 0-32 14.4-32 32v320c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V164c0-12.7-5.1-24.9-14.1-33.9zM322 400.1c0 8.8-8 16-17.8 16H143.8c-9.8 0-17.8-7.2-17.8-16v-96c0-8.8 8-16 17.8-16h160.4c9.8 0 17.8 7.2 17.8 16v96z" })
+        /* @__PURE__ */ jsx21("path", { d: "M272 64h-16c-4.4 0-8 3.6-8 8v72c0 4.4 7.6 8 12 8h12c4.4 0 8-3.6 8-8V72c0-4.4-3.6-8-8-8z" }),
+        /* @__PURE__ */ jsx21("path", { d: "M433.9 130.1L382 78.2c-9-9-21.3-14.2-34.1-14.2h-28c-8.8 0-16 7.3-16 16.2v80c0 8.8-7.2 16-16 16H160c-8.8 0-16-7.2-16-16v-80c0-8.8-7.2-16.2-16-16.2H96c-17.6 0-32 14.4-32 32v320c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V164c0-12.7-5.1-24.9-14.1-33.9zM322 400.1c0 8.8-8 16-17.8 16H143.8c-9.8 0-17.8-7.2-17.8-16v-96c0-8.8 8-16 17.8-16h160.4c9.8 0 17.8 7.2 17.8 16v96z" })
       ]
     }
   );
 }
 function ExcelIcon() {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     "svg",
     {
       stroke: "currentColor",
@@ -37642,13 +37636,13 @@ function ExcelIcon() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx22("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.87732ZM17 2.99997H21C21.5523 2.99997 22 3.44769 22 3.99997V20C22 20.5523 21.5523 21 21 21H17V2.99997ZM10.2 12L13 7.99997H10.6L9 10.2857L7.39999 7.99997H5L7.8 12L5 16H7.39999L9 13.7143L10.6 16H13L10.2 12Z" })
+      children: /* @__PURE__ */ jsx21("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.87732ZM17 2.99997H21C21.5523 2.99997 22 3.44769 22 3.99997V20C22 20.5523 21.5523 21 21 21H17V2.99997ZM10.2 12L13 7.99997H10.6L9 10.2857L7.39999 7.99997H5L7.8 12L5 16H7.39999L9 13.7143L10.6 16H13L10.2 12Z" })
     }
   );
 }
 
 // src/table3/filter.tsx
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function Filter({
   h,
   objectData,
@@ -37661,12 +37655,12 @@ function Filter({
 }) {
   const [visible, setVisible] = useState11(false);
   const [text, setText] = useState11("");
-  const items = useMemo4(
+  const items = useMemo5(
     () => [...new Set(Object.values(objectData).map((o) => o[h]))],
     [objectData]
   );
   const [selected, setSelected] = useState11(items);
-  const itemsFiltered = useMemo4(
+  const itemsFiltered = useMemo5(
     () => items.sort((a, b) => `${a}`.localeCompare(b)).filter((item) => {
       if (!text) return true;
       return `${item}`.toLowerCase().includes(text.toLowerCase());
@@ -37703,14 +37697,14 @@ function Filter({
   const hidden = Object.values(objectData).filter(
     (d) => d._visible === false
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (data.length != Object.values(objectData).map((o) => (o == null ? void 0 : o._id) || (o == null ? void 0 : o.id)).length) {
       const news = [...new Set(data.map((o) => o[h]))];
       setSelected(news);
     }
   }, [data]);
   return /* @__PURE__ */ jsxs14("th", { className: "cursor-pointer", children: [
-    /* @__PURE__ */ jsx23("div", { className: "relative", children: visible && /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx22("div", { className: "relative", children: visible && /* @__PURE__ */ jsx22(
       "div",
       {
         className: " w-full h-screen top-0 left-0 fixed  ",
@@ -37731,13 +37725,13 @@ function Filter({
           onClick: (e) => setVisible(!visible),
           children: [
             sort && //
-            Object.keys(sort)[0] == h && ((sort == null ? void 0 : sort[h]) == "asc" ? /* @__PURE__ */ jsx23("div", { className: "text-green-300", children: /* @__PURE__ */ jsx23(OrderAsc, {}) }) : (sort == null ? void 0 : sort[h]) == "desc" && /* @__PURE__ */ jsx23("div", { className: "text-green-300", children: /* @__PURE__ */ jsx23(OrderDesc, {}) })),
-            /* @__PURE__ */ jsx23("div", { children: h }),
-            selected.length < items.length && /* @__PURE__ */ jsx23("div", { className: "text-red-500 ", children: /* @__PURE__ */ jsx23(FilterOffIcon, {}) })
+            Object.keys(sort)[0] == h && ((sort == null ? void 0 : sort[h]) == "asc" ? /* @__PURE__ */ jsx22("div", { className: "text-green-300", children: /* @__PURE__ */ jsx22(OrderAsc, {}) }) : (sort == null ? void 0 : sort[h]) == "desc" && /* @__PURE__ */ jsx22("div", { className: "text-green-300", children: /* @__PURE__ */ jsx22(OrderDesc, {}) })),
+            /* @__PURE__ */ jsx22("div", { children: h }),
+            selected.length < items.length && /* @__PURE__ */ jsx22("div", { className: "text-red-500 ", children: /* @__PURE__ */ jsx22(FilterOffIcon, {}) })
           ]
         }
       ),
-      visible && /* @__PURE__ */ jsx23(
+      visible && /* @__PURE__ */ jsx22(
         "div",
         {
           className: "border shadow rounded bg-white p-1 absolute left-0 text-black",
@@ -37760,7 +37754,7 @@ function Filter({
                 },
                 className: "flex items-center gap-2 border p-1 hover:bg-blue-100",
                 children: [
-                  /* @__PURE__ */ jsx23(OrderAsc, {}),
+                  /* @__PURE__ */ jsx22(OrderAsc, {}),
                   " Ordenar de la A a la Z"
                 ]
               }
@@ -37782,7 +37776,7 @@ function Filter({
                 },
                 className: "flex items-center gap-2 border p-1 hover:bg-blue-100",
                 children: [
-                  /* @__PURE__ */ jsx23(OrderDesc, {}),
+                  /* @__PURE__ */ jsx22(OrderDesc, {}),
                   "Ordenar de la Z a la A"
                 ]
               }
@@ -37796,11 +37790,11 @@ function Filter({
                 },
                 children: [
                   "Borrar Filtro",
-                  /* @__PURE__ */ jsx23("div", { className: "text-white ", children: /* @__PURE__ */ jsx23(FilterOffIcon, {}) })
+                  /* @__PURE__ */ jsx22("div", { className: "text-white ", children: /* @__PURE__ */ jsx22(FilterOffIcon, {}) })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx23("div", { className: "", children: /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx22("div", { className: "", children: /* @__PURE__ */ jsx22(
               "input",
               {
                 className: "border shadow rounded p-2 w-full",
@@ -37819,8 +37813,8 @@ function Filter({
                 }
               }
             ) }),
-            /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsxs14("label", { className: "flex gap-1 cursor-pointer px-1", children: [
-              /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx22("div", { children: /* @__PURE__ */ jsxs14("label", { className: "flex gap-1 cursor-pointer px-1", children: [
+              /* @__PURE__ */ jsx22(
                 "input",
                 {
                   type: "checkbox",
@@ -37836,9 +37830,9 @@ function Filter({
               ),
               "(Seleccionar Todo)"
             ] }) }),
-            /* @__PURE__ */ jsx23("div", { className: "overflow-auto  flex gap-1 flex-col p-1 border shadow rounded h-[300px]", children: itemsFiltered.map((item) => {
-              return /* @__PURE__ */ jsx23("div", { className: "hover:bg-gray-100  ", children: /* @__PURE__ */ jsxs14("label", { className: "flex gap-1 cursor-pointer truncate", children: [
-                /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx22("div", { className: "overflow-auto  flex gap-1 flex-col p-1 border shadow rounded h-[300px]", children: itemsFiltered.map((item) => {
+              return /* @__PURE__ */ jsx22("div", { className: "hover:bg-gray-100  ", children: /* @__PURE__ */ jsxs14("label", { className: "flex gap-1 cursor-pointer truncate", children: [
+                /* @__PURE__ */ jsx22(
                   "input",
                   {
                     type: "checkbox",
@@ -37860,7 +37854,7 @@ function Filter({
               ] }) }, item);
             }) }),
             /* @__PURE__ */ jsxs14("div", { className: "flex justify-between px-1", children: [
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx22(
                 "button",
                 {
                   className: "p-1 shadow rounded border bg-red-500 text-white",
@@ -37871,7 +37865,7 @@ function Filter({
                   children: "Cancelar"
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx22(
                 "button",
                 {
                   className: "p-1 shadow rounded border bg-blue-500 text-white",
@@ -37890,7 +37884,7 @@ function Filter({
 }
 
 // src/table3/head.tsx
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function TableHead({
   headers,
   selectItems,
@@ -37905,9 +37899,9 @@ function TableHead({
   sort,
   setSort
 }) {
-  return /* @__PURE__ */ jsx24("thead", { children: /* @__PURE__ */ jsxs15("tr", { className: "bg-blue-500 text-white font-bold", children: [
-    modal && /* @__PURE__ */ jsx24("th", { children: "-" }),
-    selectItems && /* @__PURE__ */ jsx24("th", { children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx23("thead", { children: /* @__PURE__ */ jsxs15("tr", { className: "bg-blue-500 text-white font-bold", children: [
+    modal && /* @__PURE__ */ jsx23("th", { children: "-" }),
+    selectItems && /* @__PURE__ */ jsx23("th", { children: /* @__PURE__ */ jsx23(
       "input",
       {
         className: "m-2",
@@ -37935,7 +37929,7 @@ function TableHead({
     ) }),
     Object.values(headers).map((h) => {
       if (h.startsWith("_")) return null;
-      return /* @__PURE__ */ jsx24(
+      return /* @__PURE__ */ jsx23(
         Filter,
         {
           objectData,
@@ -37958,7 +37952,7 @@ import { useState as useState12 } from "react";
 
 // src/table3/tr.tsx
 import React7 from "react";
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 function TR({
   handlers,
   setObjectData,
@@ -37986,7 +37980,7 @@ function TR({
         setSelected(selected == index ? -1 : index);
       },
       children: [
-        modal && /* @__PURE__ */ jsx25("th", { className: "border", children: /* @__PURE__ */ jsx25(
+        modal && /* @__PURE__ */ jsx24("th", { className: "border", children: /* @__PURE__ */ jsx24(
           "button",
           {
             className: "p-1 border shadow-rounded bg-blue-500 rounded text-white",
@@ -37995,10 +37989,10 @@ function TR({
               (_a = modalRef.current) == null ? void 0 : _a.showModal();
               setDialogRow(row);
             },
-            children: /* @__PURE__ */ jsx25(EditIcon2, {})
+            children: /* @__PURE__ */ jsx24(EditIcon2, {})
           }
         ) }),
-        selectItems && /* @__PURE__ */ jsx25("th", { className: "border", children: /* @__PURE__ */ jsx25(
+        selectItems && /* @__PURE__ */ jsx24("th", { className: "border", children: /* @__PURE__ */ jsx24(
           "input",
           {
             type: "checkbox",
@@ -38066,13 +38060,13 @@ function TR({
                 return acc;
               }, {})
             });
-            return /* @__PURE__ */ jsx25("td", { className: `text-black `, children: cloned }, h);
+            return /* @__PURE__ */ jsx24("td", { className: `text-black `, children: cloned }, h);
           }
-          return symbols && (symbols == null ? void 0 : symbols[h]) ? /* @__PURE__ */ jsx25("td", { className: `text-center border max-w-[${colSize}px] `, children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1 w-full", children: [
+          return symbols && (symbols == null ? void 0 : symbols[h]) ? /* @__PURE__ */ jsx24("td", { className: `text-center border max-w-[${colSize}px] `, children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1 w-full", children: [
             symbols[h],
             " ",
             row[h]
-          ] }) }, h) : /* @__PURE__ */ jsx25("td", { className: `text-center border max-w-[${colSize}px]`, children: row[h] }, h);
+          ] }) }, h) : /* @__PURE__ */ jsx24("td", { className: `text-center border max-w-[${colSize}px]`, children: row[h] }, h);
         })
       ]
     },
@@ -38081,7 +38075,7 @@ function TR({
 }
 
 // src/table3/body.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function TableBody({
   objectData,
   setObjectData,
@@ -38125,7 +38119,7 @@ function TableBody({
     return key >= start && key < end;
   }).map(([id, k], index) => {
     const row = objectData[id];
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx25(
       TR,
       {
         ...{
@@ -38150,11 +38144,11 @@ function TableBody({
       id
     );
   });
-  return /* @__PURE__ */ jsx26("tbody", { children: sorted });
+  return /* @__PURE__ */ jsx25("tbody", { children: sorted });
 }
 
 // src/table3/panel.tsx
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 function Panel({
   page,
   setPage,
@@ -38176,7 +38170,7 @@ function Panel({
           },
           children: [
             " ",
-            /* @__PURE__ */ jsx27(SaveIcon, {}),
+            /* @__PURE__ */ jsx26(SaveIcon, {}),
             "Guardar"
           ]
         }
@@ -38195,22 +38189,22 @@ function Panel({
             );
           },
           children: [
-            /* @__PURE__ */ jsx27(ExcelIcon, {}),
+            /* @__PURE__ */ jsx26(ExcelIcon, {}),
             "Exportar"
           ]
         }
       )
     ] }),
     maxItems !== Infinity && /* @__PURE__ */ jsxs17("div", { className: "flex gap-2 items-center text-2xl", children: [
-      /* @__PURE__ */ jsx27("button", { onClick: () => setPage(1), disabled: page === 1, children: "\u23EE" }),
-      /* @__PURE__ */ jsx27("button", { onClick: () => setPage(page - 1), disabled: page === 1, children: "\u25C0" }),
+      /* @__PURE__ */ jsx26("button", { onClick: () => setPage(1), disabled: page === 1, children: "\u23EE" }),
+      /* @__PURE__ */ jsx26("button", { onClick: () => setPage(page - 1), disabled: page === 1, children: "\u25C0" }),
       /* @__PURE__ */ jsxs17("span", { className: "text-sm", children: [
         "P\xE1gina ",
         page,
         " / ",
         totalPages
       ] }),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx26(
         "button",
         {
           onClick: () => setPage(page + 1),
@@ -38218,7 +38212,7 @@ function Panel({
           children: "\u25B6"
         }
       ),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx26(
         "button",
         {
           onClick: () => setPage(totalPages),
@@ -38231,7 +38225,7 @@ function Panel({
 }
 
 // src/table3/footer.tsx
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 function TableFooter({
   objectData,
   headers,
@@ -38256,9 +38250,9 @@ function TableFooter({
         return null;
     }
   }
-  return footer && /* @__PURE__ */ jsx28("tfoot", { children: /* @__PURE__ */ jsxs18("tr", { className: "bg-blue-500 text-white", children: [
-    selectItems && /* @__PURE__ */ jsx28("th", {}),
-    modal && /* @__PURE__ */ jsx28("th", {}),
+  return footer && /* @__PURE__ */ jsx27("tfoot", { children: /* @__PURE__ */ jsxs18("tr", { className: "bg-blue-500 text-white", children: [
+    selectItems && /* @__PURE__ */ jsx27("th", {}),
+    modal && /* @__PURE__ */ jsx27("th", {}),
     headers.map((header) => {
       if (header.startsWith("_")) {
         return null;
@@ -38267,16 +38261,16 @@ function TableFooter({
           symbols[header],
           " ",
           operacion(footer[header], header)
-        ] }, header) : /* @__PURE__ */ jsx28("th", { children: operacion(footer[header], header) }, header);
+        ] }, header) : /* @__PURE__ */ jsx27("th", { children: operacion(footer[header], header) }, header);
       }
-      return /* @__PURE__ */ jsx28("th", {}, header);
+      return /* @__PURE__ */ jsx27("th", {}, header);
     })
   ] }) });
 }
 
 // src/table3/dialog.tsx
-import React8, { useMemo as useMemo5 } from "react";
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import React8, { useMemo as useMemo6 } from "react";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 function Dialog3({
   modalRef,
   children,
@@ -38292,7 +38286,7 @@ function Dialog3({
     var _a;
     return (_a = modalRef.current) == null ? void 0 : _a.close();
   };
-  const clonedModal = useMemo5(() => {
+  const clonedModal = useMemo6(() => {
     if (dialogRow && React8.isValidElement(children)) {
       return React8.cloneElement(children, {
         key: JSON.stringify(dialogRow),
@@ -38311,8 +38305,8 @@ function Dialog3({
       className: "p-6 rounded-xl shadow-2xl backdrop:bg-black/50  w-[100%] h-screen",
       children: [
         /* @__PURE__ */ jsxs19("div", { className: "flex justify-between items-center mb-4", children: [
-          /* @__PURE__ */ jsx29("div", {}),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx28("div", {}),
+          /* @__PURE__ */ jsx28(
             "button",
             {
               onClick: () => {
@@ -38324,7 +38318,7 @@ function Dialog3({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx29("div", { className: "text-gray-700", children: clonedModal })
+        /* @__PURE__ */ jsx28("div", { className: "text-gray-700", children: clonedModal })
       ]
     }
   );
@@ -38332,7 +38326,7 @@ function Dialog3({
 var dialog_default = Dialog3;
 
 // src/table3/index.tsx
-import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function Table3({
   data,
   selectItems,
@@ -38391,11 +38385,11 @@ function Table3({
     }
   }
   const [objectData, setObjectData] = useReducer2(dataReducer, null);
-  useEffect8(() => {
+  useEffect9(() => {
     setObjectData(data);
     setPage(1);
   }, [data]);
-  const headers = useMemo6(() => {
+  const headers = useMemo7(() => {
     if (!objectData) return [];
     return [
       ...new Set(
@@ -38403,7 +38397,7 @@ function Table3({
       )
     ];
   }, [objectData]);
-  const totalPages = useMemo6(() => {
+  const totalPages = useMemo7(() => {
     if (!objectData) return 0;
     return maxItems ? Math.ceil(Object.keys(objectData).length / maxItems) : 1;
   }, [objectData, maxItems]);
@@ -38436,7 +38430,7 @@ function Table3({
     setSort,
     ...props
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if ((dialogRow == null ? void 0 : dialogRow.id) || (dialogRow == null ? void 0 : dialogRow._id)) {
       const newDialogRow = objectData[dialogRow == null ? void 0 : dialogRow.id] || objectData[dialogRow == null ? void 0 : dialogRow._id];
       setDialogRow(newDialogRow);
@@ -38445,7 +38439,7 @@ function Table3({
   const style = (props == null ? void 0 : props.style) ? { ...props.style, tableLayout: "fixed" } : { tableLayout: "fixed" };
   if (!objectData) return null;
   return /* @__PURE__ */ jsxs20("div", { className: "border shadow rounded m-1 p-1 bg-white", children: [
-    modal && /* @__PURE__ */ jsx30(
+    modal && /* @__PURE__ */ jsx29(
       dialog_default,
       {
         modalRef,
@@ -38455,12 +38449,12 @@ function Table3({
         children: modal
       }
     ),
-    header && /* @__PURE__ */ jsx30("div", { className: "font-bold text-2xl py-5 px-2 bg-blue-50", children: header }),
-    /* @__PURE__ */ jsx30(Panel, { ...context }),
+    header && /* @__PURE__ */ jsx29("div", { className: "font-bold text-2xl py-5 px-2 bg-blue-50", children: header }),
+    /* @__PURE__ */ jsx29(Panel, { ...context }),
     /* @__PURE__ */ jsxs20("table", { ...props, style, children: [
-      /* @__PURE__ */ jsx30(TableHead, { ...context }),
-      /* @__PURE__ */ jsx30(TableBody, { ...context }),
-      /* @__PURE__ */ jsx30(TableFooter, { ...context })
+      /* @__PURE__ */ jsx29(TableHead, { ...context }),
+      /* @__PURE__ */ jsx29(TableBody, { ...context }),
+      /* @__PURE__ */ jsx29(TableFooter, { ...context })
     ] })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "2.0.34",
+  "version": "2.0.36",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/container/index.tsx

@@ -26,19 +26,19 @@ export default function Container({
   expandedMenu?: boolean;
   expandedFooter?: boolean;
 }) {
-  const [isSidebarOpen, setIsSidebarOpen] = useState(expandedMenu);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [isFooterOpen, setIsFooterOpen] = useState(expandedFooter);
-  const handleClick = (state: boolean) => {
-    window.localStorage.setItem("isSidebarOpen", JSON.stringify(state));
-  };
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const storedSidebarState = window.localStorage.getItem("isSidebarOpen");
-      if (storedSidebarState && window.innerWidth >= 768) {
-        setIsSidebarOpen(JSON.parse(storedSidebarState));
-      }
-    }
-  }, []);
+  // const handleClick = (state: boolean) => {
+  //   window.localStorage.setItem("isSidebarOpen", JSON.stringify(state));
+  // };
+  // useEffect(() => {
+  //   if (typeof window !== "undefined") {
+  //     const storedSidebarState = window.localStorage.getItem("isSidebarOpen");
+  //     if (storedSidebarState && window.innerWidth >= 768) {
+  //       setIsSidebarOpen(JSON.parse(storedSidebarState));
+  //     }
+  //   }
+  // }, []);
   return (
     <div className="flex flex-col h-screen">
       {/* Header */}
@@ -47,7 +47,7 @@ export default function Container({
           <button
             onClick={() => {
               setIsSidebarOpen(!isSidebarOpen);
-              handleClick(!isSidebarOpen);
+              // handleClick(!isSidebarOpen);
             }}
             className="bg-blue-600 text-white px-2 py-1 rounded-r"
           >
@@ -90,6 +90,10 @@ export default function Container({
           className={`bg-blue-500 text-white overflow-y-auto fixed md:static top-0 left-0 h-full z-50 md:z-auto transition-all duration-300 ease-in-out
     ${isSidebarOpen ? "w-full md:w-[250px]" : "w-0 md:w-[60px]"}
   `}
+          onMouseEnter={(e) => {
+            setIsSidebarOpen(true);
+          }}
+          onMouseLeave={(e) => setIsSidebarOpen(false)}
         >
           <div className="p-4 ">
             {
@@ -101,7 +105,7 @@ export default function Container({
                   }
                   onClick={(e) => {
                     setIsSidebarOpen(false);
-                    handleClick(false);
+                    // handleClick(false);
                   }}
                 >
                   <MenuIcon /> {appName}
@@ -152,7 +156,7 @@ export default function Container({
               className="fixed inset-0 bg-black bg-opacity-40 z-40"
               onClick={() => {
                 setIsSidebarOpen(false);
-                handleClick(false);
+                // handleClick(false);
               }}
             />
           )}

package/src/modal/index.tsx

@@ -1,5 +1,4 @@
-"use client";
-import React, { ReactElement, cloneElement, useCallback } from "react";
+import React, { ReactElement, cloneElement, useEffect, useMemo } from "react";
 import usePopup from "../pop";
 
 export type PopupColor =
@@ -25,8 +24,16 @@ export default function Modal({
   title?: string;
 }) {
   const pop = usePopup();
+  const hide = () => pop.close(false);
 
-  const hide = useCallback(() => pop.close(false), [pop.close]);
+  const childrenWithHide = useMemo(
+    () => cloneElement(children, { hide }),
+    [children],
+  );
+
+  useEffect(() => {
+    pop.updateMessage(childrenWithHide);
+  }, [childrenWithHide]);
 
   const props = button?.props;
   const onClick = props?.onClick;
@@ -36,13 +43,10 @@ export default function Modal({
       {cloneElement(button, {
         onClick: (e) => {
           onClick?.(e as any);
-          // En la apertura pasamos children con hide
-          pop.modal(cloneElement(children, { hide }), color, false, true);
+          pop.modal(childrenWithHide, color, false, true);
         },
       })}
-
-      {/* ✅ Componente, no elemento JSX */}
-      <pop.PopupComponent />
+      {pop.PopupComponent}
     </>
   );
 }

package/src/pop/index.tsx

@@ -1,9 +1,12 @@
 // usePopup.ts - Solución definitiva
 "use client";
+
 import { useState, useCallback, useRef, type ReactNode } from "react";
 import { PopupColor, PopupState } from "./types";
 import { PopupOverlay } from "./overlay";
+
 type PopupStateWithoutMessage = Omit<PopupState, "message">;
+
 const INITIAL_STATE: PopupStateWithoutMessage = {
   type: "alert",
   visible: false,
@@ -12,10 +15,12 @@ const INITIAL_STATE: PopupStateWithoutMessage = {
   icons: true,
   full: false,
 };
+
 export default function usePopup() {
   const [popup, setPopup] = useState<PopupStateWithoutMessage>(INITIAL_STATE);
   // El message vive FUERA del estado para no quedar congelado
   const messageRef = useRef<ReactNode>(null);
+
   const open = useCallback(
     (partial: Omit<PopupState, "visible" | "inputValue">) => {
       const { message, ...rest } = partial;
@@ -24,6 +29,7 @@ export default function usePopup() {
     },
     [],
   );
+
   const close = useCallback((confirmed: boolean, value?: string) => {
     setPopup((prev) => {
       if (confirmed) prev.onConfirm?.(value);
@@ -31,6 +37,7 @@ export default function usePopup() {
       return { ...prev, visible: false, inputValue: "" };
     });
   }, []);
+
   const alert = useCallback(
     (message: string, color: PopupColor = "primary"): Promise<void> =>
       new Promise((resolve) =>
@@ -44,6 +51,7 @@ export default function usePopup() {
       ),
     [open],
   );
+
   const modal = useCallback(
     (
       message: ReactNode,
@@ -64,6 +72,7 @@ export default function usePopup() {
       ),
     [open],
   );
+
   const confirm = useCallback(
     (message: string, color: PopupColor = "primary"): Promise<boolean> =>
       new Promise((resolve) =>
@@ -77,6 +86,7 @@ export default function usePopup() {
       ),
     [open],
   );
+
   const prompt = useCallback(
     (message: string, color: PopupColor = "primary"): Promise<string | null> =>
       new Promise((resolve) =>
@@ -90,6 +100,7 @@ export default function usePopup() {
       ),
     [open],
   );
+
   // ✅ Actualiza la ref en cada render cuando el modal está abierto
   // Esto permite que cambios en el children del padre se reflejen
   const updateMessage = useCallback((message: ReactNode) => {
@@ -97,16 +108,15 @@ export default function usePopup() {
     // Fuerza re-render del PopupComponent
     setPopup((prev) => ({ ...prev }));
   }, []);
-  const PopupComponent = useCallback(() => {
-    if (!popup.visible) return null;
-    return (
-      <PopupOverlay
-        popup={{ ...popup, message: messageRef.current }}
-        onClose={close}
-        onInputChange={(v) => setPopup((prev) => ({ ...prev, inputValue: v }))}
-      />
-    );
-  }, [popup, close]); // messageRef no necesita estar aquí, es mutable
+
+  const PopupComponent = popup.visible ? (
+    <PopupOverlay
+      popup={{ ...popup, message: messageRef.current }}
+      onClose={close}
+      onInputChange={(v) => setPopup((prev) => ({ ...prev, inputValue: v }))}
+    />
+  ) : null;
+
   return {
     alert,
     confirm,