next-recomponents 1.7.16 → 1.7.18

package/dist/index.d.mts

@@ -163,7 +163,7 @@ interface Props$1 extends React$1.DetailedHTMLProps<React$1.DialogHTMLAttributes
 declare function Modal({ button, children, ref, title }: Props$1): react_jsx_runtime.JSX.Element;
 
 type PreProps = {
-    data: string;
+    data: any;
 };
 declare const Pre: React$1.FC<PreProps>;
 

package/dist/index.d.ts

@@ -163,7 +163,7 @@ interface Props$1 extends React$1.DetailedHTMLProps<React$1.DialogHTMLAttributes
 declare function Modal({ button, children, ref, title }: Props$1): react_jsx_runtime.JSX.Element;
 
 type PreProps = {
-    data: string;
+    data: any;
 };
 declare const Pre: React$1.FC<PreProps>;
 

package/dist/index.js

@@ -10998,7 +10998,7 @@ function Container({
       {
         className: "bg-blue-100 overflow-hidden",
         initial: isFooterOpen,
-        animate: { height: isFooterOpen ? 200 : 40 },
+        animate: { maxHeight: isFooterOpen ? 200 : 40 },
         transition: { duration: 0.3 },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex justify-center items-center p-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -43581,22 +43581,35 @@ function HTable(_a) {
   ] });
 }
 
-// src/table/index.tsx
+// src/table/v.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
+function VTable({ data }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("table", { className: "min-w-full border border-gray-300 bg-white text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: Object.entries(data).map(([key, value], idx) => {
+    const content = typeof value === "object" && value !== null && "content" in value ? value.content : value;
+    const handler = typeof value === "object" && value !== null && "handler" in value ? value.handler : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { className: "border-t", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: "p-2 font-medium text-gray-700 bg-gray-100 w-1/3", children: key }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: "p-2 text-gray-900", children: handler ? handler : String(content) })
+    ] }, idx);
+  }) }) });
+}
+
+// src/table/index.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Table(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       className: "bg-gray-200 border rounded shadow p-1",
-      children: Array.isArray(props.data) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HTable, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: " p-5 border rounded shadow bg-yellw-500", children: "No es un array" })
+      children: Array.isArray(props.data) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(HTable, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VTable, __spreadValues({}, props))
     }
   );
 }
 
 // src/text-area/index.tsx
 var import_react26 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function TextArea(_a) {
   var _b = _a, {
     label,
@@ -43612,10 +43625,10 @@ function TextArea(_a) {
     "children"
   ]);
   const [value, setValue] = (0, import_react26.useState)(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "font-bold ", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "font-bold ", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "textarea",
         __spreadProps(__spreadValues({}, props), {
           className: ["p-1 w-full rounded border shadow", className].join(
@@ -43631,7 +43644,7 @@ function TextArea(_a) {
           value
         })
       ),
-      maxLength && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: " text-xs text-gray text-right", children: [
+      maxLength && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: " text-xs text-gray text-right", children: [
         value.length,
         " / ",
         maxLength
@@ -44133,9 +44146,9 @@ function useResources({
 var import_react29 = __toESM(require("react"));
 
 // src/select/icon.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function SelectIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "svg",
     {
       stroke: "currentColor",
@@ -44145,15 +44158,15 @@ function SelectIcon() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" })
     }
   );
 }
 
 // src/select/close.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "svg",
     {
       stroke: "currentColor",
@@ -44163,13 +44176,13 @@ function CloseIcon() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64-64 64L169.37 320l64-64-64-64L192 169.37l64 64 64-64L342.63 192l-64 64z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64-64 64L169.37 320l64-64-64-64L192 169.37l64 64 64-64L342.63 192l-64 64z" })
     }
   );
 }
 
 // src/select/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Select(_a) {
   var _b = _a, {
     label,
@@ -44251,10 +44264,10 @@ function Select(_a) {
       }
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref: containerRef, className: "w-full", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "font-bold mb-1 block", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: containerRef, className: "w-full", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "font-bold mb-1 block", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "input",
         __spreadProps(__spreadValues({
           autoComplete: "off",
@@ -44292,8 +44305,8 @@ function Select(_a) {
           onKeyDown: handleKeyDown
         })
       ),
-      !isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectIcon, {}) }),
-      isOpen && inputValue != "" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      !isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectIcon, {}) }),
+      isOpen && inputValue != "" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
           onClick: (e) => {
@@ -44306,14 +44319,14 @@ function Select(_a) {
           },
           className: "absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold text-red-500",
           style: { zIndex: 999999999 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CloseIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CloseIcon, {})
         }
       ),
-      isOpen && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      isOpen && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "div",
         {
           className: `absolute w-full border rounded shadow bg-white z-10 max-h-60 overflow-y-auto ${openUpwards ? "bottom-full mb-1" : "mt-1"}`,
-          children: filtered.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          children: filtered.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "div",
             {
               className: `p-2 cursor-pointer ${index === highlightedIndex ? "bg-blue-100" : "hover:bg-gray-100"}`,
@@ -44344,7 +44357,7 @@ function Select(_a) {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         className: "fixed top-0 left-0 w-full h-screen",
@@ -44358,9 +44371,9 @@ function Select(_a) {
 var import_react30 = __toESM(require("react"));
 
 // src/modal/close.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function CloseIcon2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "svg",
     {
       stroke: "currentColor",
@@ -44370,13 +44383,13 @@ function CloseIcon2() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64-64 64L169.37 320l64-64-64-64L192 169.37l64 64 64-64L342.63 192l-64 64z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64-64 64L169.37 320l64-64-64-64L192 169.37l64 64 64-64L342.63 192l-64 64z" })
     }
   );
 }
 
 // src/modal/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function Modal({ button, children, ref, title = "" }) {
   const modalRef = ref || (0, import_react30.useRef)(null);
   function show() {
@@ -44387,7 +44400,7 @@ function Modal({ button, children, ref, title = "" }) {
     var _a;
     typeof modalRef == "object" && ((_a = modalRef.current) == null ? void 0 : _a.close());
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
     import_react30.default.Children.map(button, (child) => {
       if (import_react30.default.isValidElement(child)) {
         const { type, props } = child;
@@ -44401,17 +44414,17 @@ function Modal({ button, children, ref, title = "" }) {
       }
       return child;
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("dialog", { ref: modalRef, className: "p-5 border shadow rounded", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("dialog", { ref: modalRef, className: "p-5 border shadow rounded", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "button",
         {
           onClick: hide,
           className: "absolute top-0 right-0 text-red-500 ",
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CloseIcon2, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CloseIcon2, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "font-bold text-xl", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-col gap-3 pt-6", children: import_react30.default.Children.map(children, (child) => {
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "font-bold text-xl", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col gap-3 pt-6", children: import_react30.default.Children.map(children, (child) => {
         if (import_react30.default.isValidElement(child)) {
           const { type, props } = child;
           return import_react30.default.createElement(type, __spreadProps(__spreadValues({}, props), { hide }));
@@ -44423,16 +44436,10 @@ function Modal({ button, children, ref, title = "" }) {
 }
 
 // src/pre/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Pre = ({ data }) => {
-  let formatted = data;
-  try {
-    const parsed = JSON.parse(data);
-    formatted = JSON.stringify(parsed, null, 2);
-  } catch (err) {
-    console.error("Invalid JSON string:", err);
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const formatted = JSON.stringify(data, null, 2);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "pre",
     {
       style: {
@@ -44563,9 +44570,9 @@ var import_react31 = require("react");
 var import_react_datepicker = __toESM(require("react-datepicker"));
 
 // src/calendar/calendar.icon.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function CalendarIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "svg",
     {
       stroke: "currentColor",
@@ -44575,13 +44582,13 @@ function CalendarIcon() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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__ */ (0, import_jsx_runtime23.jsx)("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
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function MyCalendar(_a) {
   var _b = _a, {
     enabledDates,
@@ -44619,10 +44626,10 @@ function MyCalendar(_a) {
   if (!(enabledDates == null ? void 0 : enabledDates.length)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "font-bold ", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "font-bold ", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "div",
         {
           onClick: () => {
@@ -44631,7 +44638,7 @@ function MyCalendar(_a) {
           },
           className: "cursor-pointer flex items-center justify-center",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "input",
               __spreadProps(__spreadValues({}, otherProps), {
                 className: [
@@ -44644,12 +44651,12 @@ function MyCalendar(_a) {
                 readOnly: true
               })
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CalendarIcon, {}) })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarIcon, {}) })
           ]
         }
       ) })
     ] }),
-    visible && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    visible && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "dialog",
       {
         ref: modalRef,
@@ -44661,7 +44668,7 @@ function MyCalendar(_a) {
             (_a2 = modalRef.current) == null ? void 0 : _a2.close();
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_react_datepicker.default,
           {
             inline: true,
@@ -44676,7 +44683,7 @@ function MyCalendar(_a) {
 }
 
 // src/doc-viewer/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function DocumentViewer({ item }) {
   const { url, name, contentType, width = "100%", height = "100%" } = item;
   const isImage = contentType.startsWith("image/");
@@ -44685,10 +44692,10 @@ function DocumentViewer({ item }) {
   const viewerUrl = isGoogleDocCompatible ? `https://docs.google.com/gview?url=${encodeURIComponent(
     url
   )}&embedded=true` : url;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "border shadow rounded p-2 h-[100%]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mb-1 flex justify-between ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { className: "font-bold", children: name }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "border shadow rounded p-2 h-[100%]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mb-1 flex justify-between ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: "font-bold", children: name }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "a",
         {
           href: url,
@@ -44700,7 +44707,7 @@ function DocumentViewer({ item }) {
         }
       )
     ] }),
-    isImage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    isImage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "img",
       {
         src: url,
@@ -44713,7 +44720,7 @@ function DocumentViewer({ item }) {
           display: "block"
         }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "iframe",
       {
         title: name,

package/dist/index.mjs

@@ -10975,7 +10975,7 @@ function Container({
       {
         className: "bg-blue-100 overflow-hidden",
         initial: isFooterOpen,
-        animate: { height: isFooterOpen ? 200 : 40 },
+        animate: { maxHeight: isFooterOpen ? 200 : 40 },
         transition: { duration: 0.3 },
         children: [
           /* @__PURE__ */ jsx5("div", { className: "flex justify-center items-center p-2", children: /* @__PURE__ */ jsx5(
@@ -43563,15 +43563,28 @@ function HTable(_a) {
   ] });
 }
 
+// src/table/v.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function VTable({ data }) {
+  return /* @__PURE__ */ jsx13("table", { className: "min-w-full border border-gray-300 bg-white text-sm", children: /* @__PURE__ */ jsx13("tbody", { children: Object.entries(data).map(([key, value], idx) => {
+    const content = typeof value === "object" && value !== null && "content" in value ? value.content : value;
+    const handler = typeof value === "object" && value !== null && "handler" in value ? value.handler : null;
+    return /* @__PURE__ */ jsxs11("tr", { className: "border-t", children: [
+      /* @__PURE__ */ jsx13("td", { className: "p-2 font-medium text-gray-700 bg-gray-100 w-1/3", children: key }),
+      /* @__PURE__ */ jsx13("td", { className: "p-2 text-gray-900", children: handler ? handler : String(content) })
+    ] }, idx);
+  }) }) });
+}
+
 // src/table/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Table(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       className: "bg-gray-200 border rounded shadow p-1",
-      children: Array.isArray(props.data) ? /* @__PURE__ */ jsx13(HTable, __spreadValues({}, props)) : /* @__PURE__ */ jsx13("div", { className: " p-5 border rounded shadow bg-yellw-500", children: "No es un array" })
+      children: Array.isArray(props.data) ? /* @__PURE__ */ jsx14(HTable, __spreadValues({}, props)) : /* @__PURE__ */ jsx14(VTable, __spreadValues({}, props))
     }
   );
 }
@@ -43580,7 +43593,7 @@ function Table(_a) {
 import {
   useState as useState7
 } from "react";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function TextArea(_a) {
   var _b = _a, {
     label,
@@ -43596,10 +43609,10 @@ function TextArea(_a) {
     "children"
   ]);
   const [value, setValue] = useState7(children);
-  return /* @__PURE__ */ jsx14("div", { className: "w-full", children: /* @__PURE__ */ jsxs11("label", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx14("div", { className: "font-bold ", children: label }),
-    /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15("div", { className: "w-full", children: /* @__PURE__ */ jsxs12("label", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx15("div", { className: "font-bold ", children: label }),
+    /* @__PURE__ */ jsxs12("div", { children: [
+      /* @__PURE__ */ jsx15(
         "textarea",
         __spreadProps(__spreadValues({}, props), {
           className: ["p-1 w-full rounded border shadow", className].join(
@@ -43615,7 +43628,7 @@ function TextArea(_a) {
           value
         })
       ),
-      maxLength && /* @__PURE__ */ jsxs11("div", { className: " text-xs text-gray text-right", children: [
+      maxLength && /* @__PURE__ */ jsxs12("div", { className: " text-xs text-gray text-right", children: [
         value.length,
         " / ",
         maxLength
@@ -44121,9 +44134,9 @@ import React6, {
 } from "react";
 
 // src/select/icon.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function SelectIcon() {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "svg",
     {
       stroke: "currentColor",
@@ -44133,15 +44146,15 @@ function SelectIcon() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx15("path", { d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" })
+      children: /* @__PURE__ */ jsx16("path", { d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" })
     }
   );
 }
 
 // src/select/close.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function CloseIcon() {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "svg",
     {
       stroke: "currentColor",
@@ -44151,13 +44164,13 @@ function CloseIcon() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx16("path", { d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64-64 64L169.37 320l64-64-64-64L192 169.37l64 64 64-64L342.63 192l-64 64z" })
+      children: /* @__PURE__ */ jsx17("path", { d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64-64 64L169.37 320l64-64-64-64L192 169.37l64 64 64-64L342.63 192l-64 64z" })
     }
   );
 }
 
 // src/select/index.tsx
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function Select(_a) {
   var _b = _a, {
     label,
@@ -44239,10 +44252,10 @@ function Select(_a) {
       }
     }
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs12("div", { ref: containerRef, className: "w-full", children: [
-    label && /* @__PURE__ */ jsx17("label", { className: "font-bold mb-1 block", children: label }),
-    /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs13("div", { ref: containerRef, className: "w-full", children: [
+    label && /* @__PURE__ */ jsx18("label", { className: "font-bold mb-1 block", children: label }),
+    /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx18(
         "input",
         __spreadProps(__spreadValues({
           autoComplete: "off",
@@ -44280,8 +44293,8 @@ function Select(_a) {
           onKeyDown: handleKeyDown
         })
       ),
-      !isOpen && /* @__PURE__ */ jsx17("div", { className: "absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold", children: /* @__PURE__ */ jsx17(SelectIcon, {}) }),
-      isOpen && inputValue != "" && /* @__PURE__ */ jsx17(
+      !isOpen && /* @__PURE__ */ jsx18("div", { className: "absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold", children: /* @__PURE__ */ jsx18(SelectIcon, {}) }),
+      isOpen && inputValue != "" && /* @__PURE__ */ jsx18(
         "button",
         {
           onClick: (e) => {
@@ -44294,14 +44307,14 @@ function Select(_a) {
           },
           className: "absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold text-red-500",
           style: { zIndex: 999999999 },
-          children: /* @__PURE__ */ jsx17(CloseIcon, {})
+          children: /* @__PURE__ */ jsx18(CloseIcon, {})
         }
       ),
-      isOpen && filtered.length > 0 && /* @__PURE__ */ jsx17(
+      isOpen && filtered.length > 0 && /* @__PURE__ */ jsx18(
         "div",
         {
           className: `absolute w-full border rounded shadow bg-white z-10 max-h-60 overflow-y-auto ${openUpwards ? "bottom-full mb-1" : "mt-1"}`,
-          children: filtered.map((opt, index) => /* @__PURE__ */ jsx17(
+          children: filtered.map((opt, index) => /* @__PURE__ */ jsx18(
             "div",
             {
               className: `p-2 cursor-pointer ${index === highlightedIndex ? "bg-blue-100" : "hover:bg-gray-100"}`,
@@ -44332,7 +44345,7 @@ function Select(_a) {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx17(
+    isOpen && /* @__PURE__ */ jsx18(
       "div",
       {
         className: "fixed top-0 left-0 w-full h-screen",
@@ -44346,9 +44359,9 @@ function Select(_a) {
 import React7, { useRef as useRef6 } from "react";
 
 // src/modal/close.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function CloseIcon2() {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "svg",
     {
       stroke: "currentColor",
@@ -44358,13 +44371,13 @@ function CloseIcon2() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx18("path", { d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64-64 64L169.37 320l64-64-64-64L192 169.37l64 64 64-64L342.63 192l-64 64z" })
+      children: /* @__PURE__ */ jsx19("path", { d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64-64 64L169.37 320l64-64-64-64L192 169.37l64 64 64-64L342.63 192l-64 64z" })
     }
   );
 }
 
 // src/modal/index.tsx
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function Modal({ button, children, ref, title = "" }) {
   const modalRef = ref || useRef6(null);
   function show() {
@@ -44375,7 +44388,7 @@ function Modal({ button, children, ref, title = "" }) {
     var _a;
     typeof modalRef == "object" && ((_a = modalRef.current) == null ? void 0 : _a.close());
   }
-  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
     React7.Children.map(button, (child) => {
       if (React7.isValidElement(child)) {
         const { type, props } = child;
@@ -44389,17 +44402,17 @@ function Modal({ button, children, ref, title = "" }) {
       }
       return child;
     }),
-    /* @__PURE__ */ jsx19("dialog", { ref: modalRef, className: "p-5 border shadow rounded", children: /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20("dialog", { ref: modalRef, className: "p-5 border shadow rounded", children: /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx20(
         "button",
         {
           onClick: hide,
           className: "absolute top-0 right-0 text-red-500 ",
-          children: /* @__PURE__ */ jsx19(CloseIcon2, {})
+          children: /* @__PURE__ */ jsx20(CloseIcon2, {})
         }
       ),
-      /* @__PURE__ */ jsx19("div", { className: "font-bold text-xl", children: title }),
-      /* @__PURE__ */ jsx19("div", { className: "flex flex-col gap-3 pt-6", children: React7.Children.map(children, (child) => {
+      /* @__PURE__ */ jsx20("div", { className: "font-bold text-xl", children: title }),
+      /* @__PURE__ */ jsx20("div", { className: "flex flex-col gap-3 pt-6", children: React7.Children.map(children, (child) => {
         if (React7.isValidElement(child)) {
           const { type, props } = child;
           return React7.createElement(type, __spreadProps(__spreadValues({}, props), { hide }));
@@ -44411,16 +44424,10 @@ function Modal({ button, children, ref, title = "" }) {
 }
 
 // src/pre/index.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var Pre = ({ data }) => {
-  let formatted = data;
-  try {
-    const parsed = JSON.parse(data);
-    formatted = JSON.stringify(parsed, null, 2);
-  } catch (err) {
-    console.error("Invalid JSON string:", err);
-  }
-  return /* @__PURE__ */ jsx20(
+  const formatted = JSON.stringify(data, null, 2);
+  return /* @__PURE__ */ jsx21(
     "pre",
     {
       style: {
@@ -44555,9 +44562,9 @@ import {
 import DatePicker from "react-datepicker";
 
 // src/calendar/calendar.icon.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function CalendarIcon() {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "svg",
     {
       stroke: "currentColor",
@@ -44567,13 +44574,13 @@ function CalendarIcon() {
       height: "20px",
       width: "20px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx21("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__ */ jsx22("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 { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function MyCalendar(_a) {
   var _b = _a, {
     enabledDates,
@@ -44611,10 +44618,10 @@ function MyCalendar(_a) {
   if (!(enabledDates == null ? void 0 : enabledDates.length)) {
     return null;
   }
-  return /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxs14("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx22("div", { className: "font-bold ", children: label }),
-      /* @__PURE__ */ jsx22("div", { children: /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs15("label", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx23("div", { className: "font-bold ", children: label }),
+      /* @__PURE__ */ jsx23("div", { children: /* @__PURE__ */ jsxs15(
         "div",
         {
           onClick: () => {
@@ -44623,7 +44630,7 @@ function MyCalendar(_a) {
           },
           className: "cursor-pointer flex items-center justify-center",
           children: [
-            /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsx23(
               "input",
               __spreadProps(__spreadValues({}, otherProps), {
                 className: [
@@ -44636,12 +44643,12 @@ function MyCalendar(_a) {
                 readOnly: true
               })
             ),
-            /* @__PURE__ */ jsx22("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ jsx22(CalendarIcon, {}) })
+            /* @__PURE__ */ jsx23("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ jsx23(CalendarIcon, {}) })
           ]
         }
       ) })
     ] }),
-    visible && /* @__PURE__ */ jsx22(
+    visible && /* @__PURE__ */ jsx23(
       "dialog",
       {
         ref: modalRef,
@@ -44653,7 +44660,7 @@ function MyCalendar(_a) {
             (_a2 = modalRef.current) == null ? void 0 : _a2.close();
           }
         },
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx23(
           DatePicker,
           {
             inline: true,
@@ -44668,7 +44675,7 @@ function MyCalendar(_a) {
 }
 
 // src/doc-viewer/index.tsx
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 function DocumentViewer({ item }) {
   const { url, name, contentType, width = "100%", height = "100%" } = item;
   const isImage = contentType.startsWith("image/");
@@ -44677,10 +44684,10 @@ function DocumentViewer({ item }) {
   const viewerUrl = isGoogleDocCompatible ? `https://docs.google.com/gview?url=${encodeURIComponent(
     url
   )}&embedded=true` : url;
-  return /* @__PURE__ */ jsxs15("div", { className: "border shadow rounded p-2 h-[100%]", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "mb-1 flex justify-between ", children: [
-      /* @__PURE__ */ jsx23("h3", { className: "font-bold", children: name }),
-      /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs16("div", { className: "border shadow rounded p-2 h-[100%]", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "mb-1 flex justify-between ", children: [
+      /* @__PURE__ */ jsx24("h3", { className: "font-bold", children: name }),
+      /* @__PURE__ */ jsx24(
         "a",
         {
           href: url,
@@ -44692,7 +44699,7 @@ function DocumentViewer({ item }) {
         }
       )
     ] }),
-    isImage ? /* @__PURE__ */ jsx23(
+    isImage ? /* @__PURE__ */ jsx24(
       "img",
       {
         src: url,
@@ -44705,7 +44712,7 @@ function DocumentViewer({ item }) {
           display: "block"
         }
       }
-    ) : /* @__PURE__ */ jsx23(
+    ) : /* @__PURE__ */ jsx24(
       "iframe",
       {
         title: name,

package/package.json

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

package/src/container/index.tsx

@@ -158,7 +158,7 @@ export default function Container({
         <motion.footer
           className="bg-blue-100 overflow-hidden"
           initial={isFooterOpen}
-          animate={{ height: isFooterOpen ? 200 : 40 }}
+          animate={{ maxHeight: isFooterOpen ? 200 : 40 }}
           transition={{ duration: 0.3 }}
         >
           <div className="flex justify-center items-center p-2">

package/src/pre/index.tsx

@@ -1,18 +1,11 @@
 import React from "react";
 
 type PreProps = {
-  data: string;
+  data: any;
 };
 
 const Pre: React.FC<PreProps> = ({ data }) => {
-  let formatted = data;
-
-  try {
-    const parsed = JSON.parse(data);
-    formatted = JSON.stringify(parsed, null, 2); // Formatea con indentación
-  } catch (err) {
-    console.error("Invalid JSON string:", err);
-  }
+  const formatted = JSON.stringify(data, null, 2);
 
   return (
     <pre

package/src/table/index.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import HTable from "./h";
+import VTable from "./v";
 type DataType = string | number | Date | object | undefined | null;
 type Item = { content: DataType; handler: ReactNode };
 export type DataTypeOrItem = DataType | Item;
@@ -46,9 +47,7 @@ export default function Table({ ...props }: TableProps) {
       {Array.isArray(props.data) ? (
         <HTable {...props} />
       ) : (
-        <div className=" p-5 border rounded shadow bg-yellw-500">
-          No es un array
-        </div>
+        <VTable {...props} />
       )}
     </div>
   );

package/src/table/v.tsx

@@ -0,0 +1,32 @@
+import { DataTypeOrItem, TableProps } from ".";
+
+export default function VTable({ data }: TableProps) {
+  return (
+    <table className="min-w-full border border-gray-300 bg-white text-sm">
+      <tbody>
+        {Object.entries(data).map(([key, value], idx) => {
+          const content =
+            typeof value === "object" && value !== null && "content" in value
+              ? value.content
+              : value;
+
+          const handler =
+            typeof value === "object" && value !== null && "handler" in value
+              ? value.handler
+              : null;
+
+          return (
+            <tr key={idx} className="border-t">
+              <td className="p-2 font-medium text-gray-700 bg-gray-100 w-1/3">
+                {key}
+              </td>
+              <td className="p-2 text-gray-900">
+                {handler ? handler : String(content)}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}