next-recomponents 1.7.15 → 1.7.17

package/dist/index.d.mts

@@ -1,18 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { DetailedHTMLProps, ButtonHTMLAttributes, Dispatch, SetStateAction, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
 
-interface Props$5 {
+interface Props$6 {
     color?: "white" | "primary" | "secondary" | "info" | "danger" | "warning" | "success";
     children: React.ReactNode;
 }
-declare function Alert({ color, children, ...props }: Props$5): react_jsx_runtime.JSX.Element;
+declare function Alert({ color, children, ...props }: Props$6): react_jsx_runtime.JSX.Element;
 
-interface Props$4 extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+interface Props$5 extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     icon?: React.ReactNode;
     size?: "full" | "small";
     color?: "white" | "primary" | "secondary" | "info" | "danger" | "warning" | "success";
 }
-declare function Button({ className, size, color, children, icon, disabled, ...props }: Props$4): react_jsx_runtime.JSX.Element;
+declare function Button({ className, size, color, children, icon, disabled, ...props }: Props$5): react_jsx_runtime.JSX.Element;
 
 type LocationItem = {
     location: string;
@@ -33,7 +33,7 @@ declare function Container({ children, appName, menuList, navItems, leftPanel, f
 interface OnSubmitProps extends React$1.FormEvent<HTMLFormElement> {
     values: Record<string, any>;
 }
-interface Props$3 extends React$1.DetailedHTMLProps<React$1.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {
+interface Props$4 extends React$1.DetailedHTMLProps<React$1.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {
     onSubmit: (e: OnSubmitProps) => void | Promise<void>;
     children: React$1.ReactNode;
     state?: [any, Dispatch<SetStateAction<any>>];
@@ -41,7 +41,7 @@ interface Props$3 extends React$1.DetailedHTMLProps<React$1.FormHTMLAttributes<H
     loader?: React$1.ReactNode;
 }
 declare function useFormValues<T>(initial: Partial<T>): [Partial<T>, React$1.Dispatch<Partial<T>>];
-declare function Form({ onSubmit, state, invalidMessage, children, loader, ...otherProps }: Props$3): react_jsx_runtime.JSX.Element;
+declare function Form({ onSubmit, state, invalidMessage, children, loader, ...otherProps }: Props$4): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     label: React.ReactNode;
@@ -57,11 +57,11 @@ declare const regularExpresions: {
 };
 
 type DataType = string | number | Date | object | undefined | null;
-type Item = {
+type Item$1 = {
     content: DataType;
     handler: ReactNode;
 };
-type DataTypeOrItem = DataType | Item;
+type DataTypeOrItem = DataType | Item$1;
 type TableEventPropsItem = {
     index: number;
     originalData: number;
@@ -91,18 +91,18 @@ interface TableProps extends React.DetailedHTMLProps<React.TableHTMLAttributes<H
 }
 declare function Table({ ...props }: TableProps): react_jsx_runtime.JSX.Element;
 
-interface Props$2 extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+interface Props$3 extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
     label?: React$1.ReactNode;
     maxLength?: number;
 }
-declare function TextArea({ label, className, maxLength, onChange, children, ...props }: Props$2): react_jsx_runtime.JSX.Element;
+declare function TextArea({ label, className, maxLength, onChange, children, ...props }: Props$3): react_jsx_runtime.JSX.Element;
 
 interface ItemsRecord<T = any> {
     typeof: T;
     id?: number | string | string[] | undefined;
     defaultParams?: Record<string, any>;
 }
-interface Props$1<T extends Record<string, ItemsRecord>> {
+interface Props$2<T extends Record<string, ItemsRecord>> {
     baseURI: string;
     endpoints: T;
     onError?: (error: any) => void;
@@ -138,7 +138,7 @@ type EnhancedEndpoints<T extends Record<string, ItemsRecord>> = {
     };
 };
 
-declare function useResources<T extends Record<string, ItemsRecord>>({ baseURI, endpoints, onError, }: Props$1<T>): EnhancedEndpoints<T>;
+declare function useResources<T extends Record<string, ItemsRecord>>({ baseURI, endpoints, onError, }: Props$2<T>): EnhancedEndpoints<T>;
 
 interface CustomSelectProps extends React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     label?: string;
@@ -152,7 +152,7 @@ interface CustomSelectProps extends React$1.DetailedHTMLProps<React$1.InputHTMLA
 }
 declare function Select({ label, placeholder, children, strictMode, ...props }: CustomSelectProps): react_jsx_runtime.JSX.Element;
 
-interface Props extends React$1.DetailedHTMLProps<React$1.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> {
+interface Props$1 extends React$1.DetailedHTMLProps<React$1.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> {
     button: React$1.ReactElement<{
         onClick: (e: React$1.MouseEvent) => void;
     }>;
@@ -160,7 +160,7 @@ interface Props extends React$1.DetailedHTMLProps<React$1.DialogHTMLAttributes<H
         hide: () => void;
     }>;
 }
-declare function Modal({ button, children, ref, title }: Props): react_jsx_runtime.JSX.Element;
+declare function Modal({ button, children, ref, title }: Props$1): react_jsx_runtime.JSX.Element;
 
 type PreProps = {
     data: string;
@@ -190,4 +190,16 @@ interface CalendarProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputE
 }
 declare function MyCalendar({ enabledDates, onChange, defaultValue, className, label, value, ...otherProps }: CalendarProps): react_jsx_runtime.JSX.Element | null;
 
-export { Alert, Button, Container, Form, Input, Modal, MyCalendar, Pre, Select, Table, type TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, useResources };
+type Item = {
+    url: string;
+    name: string;
+    contentType: string;
+    width?: string;
+    height?: string;
+};
+type Props = {
+    item: Item;
+};
+declare function DocumentViewer({ item }: Props): react_jsx_runtime.JSX.Element;
+
+export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, Table, type TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, useResources };

package/dist/index.d.ts

@@ -1,18 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { DetailedHTMLProps, ButtonHTMLAttributes, Dispatch, SetStateAction, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
 
-interface Props$5 {
+interface Props$6 {
     color?: "white" | "primary" | "secondary" | "info" | "danger" | "warning" | "success";
     children: React.ReactNode;
 }
-declare function Alert({ color, children, ...props }: Props$5): react_jsx_runtime.JSX.Element;
+declare function Alert({ color, children, ...props }: Props$6): react_jsx_runtime.JSX.Element;
 
-interface Props$4 extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+interface Props$5 extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     icon?: React.ReactNode;
     size?: "full" | "small";
     color?: "white" | "primary" | "secondary" | "info" | "danger" | "warning" | "success";
 }
-declare function Button({ className, size, color, children, icon, disabled, ...props }: Props$4): react_jsx_runtime.JSX.Element;
+declare function Button({ className, size, color, children, icon, disabled, ...props }: Props$5): react_jsx_runtime.JSX.Element;
 
 type LocationItem = {
     location: string;
@@ -33,7 +33,7 @@ declare function Container({ children, appName, menuList, navItems, leftPanel, f
 interface OnSubmitProps extends React$1.FormEvent<HTMLFormElement> {
     values: Record<string, any>;
 }
-interface Props$3 extends React$1.DetailedHTMLProps<React$1.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {
+interface Props$4 extends React$1.DetailedHTMLProps<React$1.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {
     onSubmit: (e: OnSubmitProps) => void | Promise<void>;
     children: React$1.ReactNode;
     state?: [any, Dispatch<SetStateAction<any>>];
@@ -41,7 +41,7 @@ interface Props$3 extends React$1.DetailedHTMLProps<React$1.FormHTMLAttributes<H
     loader?: React$1.ReactNode;
 }
 declare function useFormValues<T>(initial: Partial<T>): [Partial<T>, React$1.Dispatch<Partial<T>>];
-declare function Form({ onSubmit, state, invalidMessage, children, loader, ...otherProps }: Props$3): react_jsx_runtime.JSX.Element;
+declare function Form({ onSubmit, state, invalidMessage, children, loader, ...otherProps }: Props$4): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     label: React.ReactNode;
@@ -57,11 +57,11 @@ declare const regularExpresions: {
 };
 
 type DataType = string | number | Date | object | undefined | null;
-type Item = {
+type Item$1 = {
     content: DataType;
     handler: ReactNode;
 };
-type DataTypeOrItem = DataType | Item;
+type DataTypeOrItem = DataType | Item$1;
 type TableEventPropsItem = {
     index: number;
     originalData: number;
@@ -91,18 +91,18 @@ interface TableProps extends React.DetailedHTMLProps<React.TableHTMLAttributes<H
 }
 declare function Table({ ...props }: TableProps): react_jsx_runtime.JSX.Element;
 
-interface Props$2 extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+interface Props$3 extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
     label?: React$1.ReactNode;
     maxLength?: number;
 }
-declare function TextArea({ label, className, maxLength, onChange, children, ...props }: Props$2): react_jsx_runtime.JSX.Element;
+declare function TextArea({ label, className, maxLength, onChange, children, ...props }: Props$3): react_jsx_runtime.JSX.Element;
 
 interface ItemsRecord<T = any> {
     typeof: T;
     id?: number | string | string[] | undefined;
     defaultParams?: Record<string, any>;
 }
-interface Props$1<T extends Record<string, ItemsRecord>> {
+interface Props$2<T extends Record<string, ItemsRecord>> {
     baseURI: string;
     endpoints: T;
     onError?: (error: any) => void;
@@ -138,7 +138,7 @@ type EnhancedEndpoints<T extends Record<string, ItemsRecord>> = {
     };
 };
 
-declare function useResources<T extends Record<string, ItemsRecord>>({ baseURI, endpoints, onError, }: Props$1<T>): EnhancedEndpoints<T>;
+declare function useResources<T extends Record<string, ItemsRecord>>({ baseURI, endpoints, onError, }: Props$2<T>): EnhancedEndpoints<T>;
 
 interface CustomSelectProps extends React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     label?: string;
@@ -152,7 +152,7 @@ interface CustomSelectProps extends React$1.DetailedHTMLProps<React$1.InputHTMLA
 }
 declare function Select({ label, placeholder, children, strictMode, ...props }: CustomSelectProps): react_jsx_runtime.JSX.Element;
 
-interface Props extends React$1.DetailedHTMLProps<React$1.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> {
+interface Props$1 extends React$1.DetailedHTMLProps<React$1.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> {
     button: React$1.ReactElement<{
         onClick: (e: React$1.MouseEvent) => void;
     }>;
@@ -160,7 +160,7 @@ interface Props extends React$1.DetailedHTMLProps<React$1.DialogHTMLAttributes<H
         hide: () => void;
     }>;
 }
-declare function Modal({ button, children, ref, title }: Props): react_jsx_runtime.JSX.Element;
+declare function Modal({ button, children, ref, title }: Props$1): react_jsx_runtime.JSX.Element;
 
 type PreProps = {
     data: string;
@@ -190,4 +190,16 @@ interface CalendarProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputE
 }
 declare function MyCalendar({ enabledDates, onChange, defaultValue, className, label, value, ...otherProps }: CalendarProps): react_jsx_runtime.JSX.Element | null;
 
-export { Alert, Button, Container, Form, Input, Modal, MyCalendar, Pre, Select, Table, type TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, useResources };
+type Item = {
+    url: string;
+    name: string;
+    contentType: string;
+    width?: string;
+    height?: string;
+};
+type Props = {
+    item: Item;
+};
+declare function DocumentViewer({ item }: Props): react_jsx_runtime.JSX.Element;
+
+export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, Table, type TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, useResources };

package/dist/index.js

@@ -2971,6 +2971,7 @@ __export(index_exports, {
   Alert: () => Alert,
   Button: () => Button,
   Container: () => Container,
+  DocumentViewer: () => DocumentViewer,
   Form: () => Form,
   Input: () => Input,
   Modal: () => Modal,
@@ -43580,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,
@@ -43611,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(
@@ -43630,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
@@ -44132,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",
@@ -44144,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",
@@ -44162,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,
@@ -44250,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",
@@ -44291,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) => {
@@ -44305,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"}`,
@@ -44343,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",
@@ -44357,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",
@@ -44369,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() {
@@ -44386,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;
@@ -44400,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 }));
@@ -44422,7 +44436,7 @@ 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 {
@@ -44431,7 +44445,7 @@ var Pre = ({ data }) => {
   } catch (err) {
     console.error("Invalid JSON string:", err);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "pre",
     {
       style: {
@@ -44562,9 +44576,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",
@@ -44574,13 +44588,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,
@@ -44618,10 +44632,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: () => {
@@ -44630,7 +44644,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: [
@@ -44643,12 +44657,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,
@@ -44660,7 +44674,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,
@@ -44673,11 +44687,62 @@ function MyCalendar(_a) {
     )
   ] });
 }
+
+// src/doc-viewer/index.tsx
+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/");
+  const isPdf = contentType === "application/pdf";
+  const isGoogleDocCompatible = isPdf || contentType.includes("msword") || contentType.includes("officedocument") || contentType.includes("presentation");
+  const viewerUrl = isGoogleDocCompatible ? `https://docs.google.com/gview?url=${encodeURIComponent(
+    url
+  )}&embedded=true` : url;
+  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,
+          download: name,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "border shadow rounded bg-blue-400 text-white p-2",
+          children: "Descargar"
+        }
+      )
+    ] }),
+    isImage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "img",
+      {
+        src: url,
+        alt: name,
+        style: {
+          width,
+          height,
+          maxWidth: "100%",
+          objectFit: "cover",
+          display: "block"
+        }
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "iframe",
+      {
+        title: name,
+        src: viewerUrl,
+        style: { width, height, border: "none" },
+        allowFullScreen: true
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
   Button,
   Container,
+  DocumentViewer,
   Form,
   Input,
   Modal,

package/dist/index.mjs

@@ -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,7 +44424,7 @@ 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 {
@@ -44420,7 +44433,7 @@ var Pre = ({ data }) => {
   } catch (err) {
     console.error("Invalid JSON string:", err);
   }
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "pre",
     {
       style: {
@@ -44555,9 +44568,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 +44580,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 +44624,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 +44636,7 @@ function MyCalendar(_a) {
           },
           className: "cursor-pointer flex items-center justify-center",
           children: [
-            /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsx23(
               "input",
               __spreadProps(__spreadValues({}, otherProps), {
                 className: [
@@ -44636,12 +44649,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 +44666,7 @@ function MyCalendar(_a) {
             (_a2 = modalRef.current) == null ? void 0 : _a2.close();
           }
         },
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx23(
           DatePicker,
           {
             inline: true,
@@ -44666,10 +44679,61 @@ function MyCalendar(_a) {
     )
   ] });
 }
+
+// src/doc-viewer/index.tsx
+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/");
+  const isPdf = contentType === "application/pdf";
+  const isGoogleDocCompatible = isPdf || contentType.includes("msword") || contentType.includes("officedocument") || contentType.includes("presentation");
+  const viewerUrl = isGoogleDocCompatible ? `https://docs.google.com/gview?url=${encodeURIComponent(
+    url
+  )}&embedded=true` : url;
+  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,
+          download: name,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "border shadow rounded bg-blue-400 text-white p-2",
+          children: "Descargar"
+        }
+      )
+    ] }),
+    isImage ? /* @__PURE__ */ jsx24(
+      "img",
+      {
+        src: url,
+        alt: name,
+        style: {
+          width,
+          height,
+          maxWidth: "100%",
+          objectFit: "cover",
+          display: "block"
+        }
+      }
+    ) : /* @__PURE__ */ jsx24(
+      "iframe",
+      {
+        title: name,
+        src: viewerUrl,
+        style: { width, height, border: "none" },
+        allowFullScreen: true
+      }
+    )
+  ] });
+}
 export {
   Alert,
   Button,
   Container,
+  DocumentViewer,
   Form,
   Input,
   Modal,

package/package.json

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

package/src/doc-viewer/index.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+
+type Item = {
+  url: string;
+  name: string;
+  contentType: string;
+  width?: string;
+  height?: string;
+};
+
+type Props = {
+  item: Item;
+};
+
+export default function DocumentViewer({ item }: Props) {
+  const { url, name, contentType, width = "100%", height = "100%" } = item;
+
+  const isImage = contentType.startsWith("image/");
+  const isPdf = contentType === "application/pdf";
+  const isGoogleDocCompatible =
+    isPdf ||
+    contentType.includes("msword") ||
+    contentType.includes("officedocument") ||
+    contentType.includes("presentation");
+
+  const viewerUrl = isGoogleDocCompatible
+    ? `https://docs.google.com/gview?url=${encodeURIComponent(
+        url
+      )}&embedded=true`
+    : url;
+
+  return (
+    <div className="border shadow rounded p-2 h-[100%]">
+      <div className="mb-1 flex justify-between ">
+        <h3 className="font-bold">{name}</h3>
+        <a
+          href={url}
+          download={name}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="border shadow rounded bg-blue-400 text-white p-2"
+        >
+          Descargar
+        </a>
+      </div>
+
+      {isImage ? (
+        <img
+          src={url}
+          alt={name}
+          style={{
+            width: width,
+            height: height,
+            maxWidth: "100%",
+            objectFit: "cover",
+            display: "block",
+          }}
+        />
+      ) : (
+        <iframe
+          title={name}
+          src={viewerUrl}
+          style={{ width, height, border: "none" }}
+          allowFullScreen
+        />
+      )}
+    </div>
+  );
+}

package/src/index.tsx

@@ -15,3 +15,4 @@ export { default as useExcel } from "./use-excel";
 export { default as MyCalendar } from "./calendar";
 export type { TableEventProps } from "./table";
 export { useFormValues } from "./form";
+export { default as DocumentViewer } from "./doc-viewer";

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>
+  );
+}