next-recomponents 1.7.15 → 1.7.16

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,
@@ -44673,11 +44674,62 @@ function MyCalendar(_a) {
     )
   ] });
 }
+
+// src/doc-viewer/index.tsx
+var import_jsx_runtime24 = 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_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)(
+        "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_runtime24.jsx)(
+      "img",
+      {
+        src: url,
+        alt: name,
+        style: {
+          width,
+          height,
+          maxWidth: "100%",
+          objectFit: "cover",
+          display: "block"
+        }
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime24.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

@@ -44666,10 +44666,61 @@ function MyCalendar(_a) {
     )
   ] });
 }
+
+// src/doc-viewer/index.tsx
+import { jsx as jsx23, jsxs as jsxs15 } 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__ */ 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(
+        "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__ */ jsx23(
+      "img",
+      {
+        src: url,
+        alt: name,
+        style: {
+          width,
+          height,
+          maxWidth: "100%",
+          objectFit: "cover",
+          display: "block"
+        }
+      }
+    ) : /* @__PURE__ */ jsx23(
+      "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.16",
   "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";