next-recomponents 1.1.8 → 1.2.0

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$4 {
+interface Props$5 {
     color?: "white" | "primary" | "secondary" | "info" | "danger" | "warning" | "success";
     children: React.ReactNode;
 }
-declare function Alert({ color, children, ...props }: Props$4): react_jsx_runtime.JSX.Element;
+declare function Alert({ color, children, ...props }: Props$5): react_jsx_runtime.JSX.Element;
 
-interface Props$3 extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+interface Props$4 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$3): react_jsx_runtime.JSX.Element;
+declare function Button({ className, size, color, children, icon, disabled, ...props }: Props$4): react_jsx_runtime.JSX.Element;
 
 type LocationItem = {
     location: string;
@@ -33,14 +33,14 @@ declare function Container({ children, appName, menuList, navItems, leftPanel, f
 interface OnSubmitProps extends React$1.FormEvent<HTMLFormElement> {
     values: Record<string, any>;
 }
-interface Props$2 {
+interface Props$3 {
     onSubmit: (e: OnSubmitProps) => void | Promise<void>;
     children: React$1.ReactNode;
     state?: [any, Dispatch<SetStateAction<any>>];
     invalidMessage?: string;
     loader?: React$1.ReactNode;
 }
-declare function Form({ onSubmit, state, invalidMessage, children, loader, }: Props$2): react_jsx_runtime.JSX.Element;
+declare function Form({ onSubmit, state, invalidMessage, children, loader, }: Props$3): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     label: React.ReactNode;
@@ -66,16 +66,16 @@ interface TableProps extends React.DetailedHTMLProps<React.TableHTMLAttributes<H
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;
 
-interface Props$1 extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+interface Props$2 extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
     label?: React$1.ReactNode;
     maxLength?: number;
 }
-declare function TextArea({ label, className, maxLength, onChange, children, ...props }: Props$1): react_jsx_runtime.JSX.Element;
+declare function TextArea({ label, className, maxLength, onChange, children, ...props }: Props$2): react_jsx_runtime.JSX.Element;
 
 interface ItemsRecord {
     typeof: Object;
 }
-interface Props {
+interface Props$1 {
     baseURI: string;
     authURI?: string;
     endpoints: Record<string, Partial<ItemsRecord>>;
@@ -110,7 +110,7 @@ type EnhancedEndpoints<T extends Record<string, ItemsRecord>> = {
     };
 };
 
-declare function useResources<T extends Record<string, ItemsRecord>>({ baseURI, authURI, endpoints, onError, }: Props): EnhancedEndpoints<T>;
+declare function useResources<T extends Record<string, ItemsRecord>>({ baseURI, authURI, endpoints, onError, }: Props$1): EnhancedEndpoints<T>;
 
 interface CustomSelectProps extends React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     label?: string;
@@ -124,9 +124,9 @@ interface CustomSelectProps extends React$1.DetailedHTMLProps<React$1.InputHTMLA
 }
 declare function Select({ label, placeholder, children, strictMode, ...props }: CustomSelectProps): react_jsx_runtime.JSX.Element;
 
-declare function Modal({ button, children, }: {
-    button: any;
-    children?: React$1.ReactNode;
-}): react_jsx_runtime.JSX.Element;
+interface Props extends React$1.DetailedHTMLProps<React$1.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> {
+    button: React$1.ReactElement;
+}
+declare function Modal({ button, children }: Props): react_jsx_runtime.JSX.Element;
 
 export { Alert, Button, Container, Form, Input, Modal, Select, Table, TextArea, regularExpresions, 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$4 {
+interface Props$5 {
     color?: "white" | "primary" | "secondary" | "info" | "danger" | "warning" | "success";
     children: React.ReactNode;
 }
-declare function Alert({ color, children, ...props }: Props$4): react_jsx_runtime.JSX.Element;
+declare function Alert({ color, children, ...props }: Props$5): react_jsx_runtime.JSX.Element;
 
-interface Props$3 extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+interface Props$4 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$3): react_jsx_runtime.JSX.Element;
+declare function Button({ className, size, color, children, icon, disabled, ...props }: Props$4): react_jsx_runtime.JSX.Element;
 
 type LocationItem = {
     location: string;
@@ -33,14 +33,14 @@ declare function Container({ children, appName, menuList, navItems, leftPanel, f
 interface OnSubmitProps extends React$1.FormEvent<HTMLFormElement> {
     values: Record<string, any>;
 }
-interface Props$2 {
+interface Props$3 {
     onSubmit: (e: OnSubmitProps) => void | Promise<void>;
     children: React$1.ReactNode;
     state?: [any, Dispatch<SetStateAction<any>>];
     invalidMessage?: string;
     loader?: React$1.ReactNode;
 }
-declare function Form({ onSubmit, state, invalidMessage, children, loader, }: Props$2): react_jsx_runtime.JSX.Element;
+declare function Form({ onSubmit, state, invalidMessage, children, loader, }: Props$3): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     label: React.ReactNode;
@@ -66,16 +66,16 @@ interface TableProps extends React.DetailedHTMLProps<React.TableHTMLAttributes<H
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;
 
-interface Props$1 extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+interface Props$2 extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
     label?: React$1.ReactNode;
     maxLength?: number;
 }
-declare function TextArea({ label, className, maxLength, onChange, children, ...props }: Props$1): react_jsx_runtime.JSX.Element;
+declare function TextArea({ label, className, maxLength, onChange, children, ...props }: Props$2): react_jsx_runtime.JSX.Element;
 
 interface ItemsRecord {
     typeof: Object;
 }
-interface Props {
+interface Props$1 {
     baseURI: string;
     authURI?: string;
     endpoints: Record<string, Partial<ItemsRecord>>;
@@ -110,7 +110,7 @@ type EnhancedEndpoints<T extends Record<string, ItemsRecord>> = {
     };
 };
 
-declare function useResources<T extends Record<string, ItemsRecord>>({ baseURI, authURI, endpoints, onError, }: Props): EnhancedEndpoints<T>;
+declare function useResources<T extends Record<string, ItemsRecord>>({ baseURI, authURI, endpoints, onError, }: Props$1): EnhancedEndpoints<T>;
 
 interface CustomSelectProps extends React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     label?: string;
@@ -124,9 +124,9 @@ interface CustomSelectProps extends React$1.DetailedHTMLProps<React$1.InputHTMLA
 }
 declare function Select({ label, placeholder, children, strictMode, ...props }: CustomSelectProps): react_jsx_runtime.JSX.Element;
 
-declare function Modal({ button, children, }: {
-    button: any;
-    children?: React$1.ReactNode;
-}): react_jsx_runtime.JSX.Element;
+interface Props extends React$1.DetailedHTMLProps<React$1.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> {
+    button: React$1.ReactElement;
+}
+declare function Modal({ button, children }: Props): react_jsx_runtime.JSX.Element;
 
 export { Alert, Button, Container, Form, Input, Modal, Select, Table, TextArea, regularExpresions, useResources };

package/dist/index.js

@@ -32692,10 +32692,7 @@ function Select(_a) {
 // src/modal/index.tsx
 var import_react31 = __toESM(require("react"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function Modal({
-  button,
-  children
-}) {
+function Modal({ button, children }) {
   const modalRef = (0, import_react31.useRef)(null);
   function show() {
     var _a;
@@ -32705,25 +32702,30 @@ function Modal({
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.close();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    import_react31.default.cloneElement(button, {
+  const newChildren = (0, import_react31.useMemo)(() => {
+    return children && import_react31.default.cloneElement(children, { hide });
+  }, [children]);
+  const newButton = (0, import_react31.useMemo)(() => {
+    return button && import_react31.default.cloneElement(button, {
       onClick: (e) => {
         var _a, _b;
         show();
         (_b = (_a = button.props).onClick) == null ? void 0 : _b.call(_a, e);
       }
-    }),
+    });
+  }, [button]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    newButton,
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("dialog", { ref: modalRef, className: "p-5 border shadow rounded", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        Button,
+        "button",
         {
           onClick: hide,
-          color: "danger",
-          className: "absolute top-0 right-0 ",
+          className: "absolute top-0 right-0 text-red-500 ",
           children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CloseIcon, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col gap-3 pt-6", children })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col gap-3 pt-6", children: newChildren })
     ] }) })
   ] });
 }

package/dist/index.mjs

@@ -32687,12 +32687,9 @@ function Select(_a) {
 }
 
 // src/modal/index.tsx
-import React6, { useRef as useRef6 } from "react";
+import React6, { useMemo as useMemo10, useRef as useRef6 } from "react";
 import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
-function Modal({
-  button,
-  children
-}) {
+function Modal({ button, children }) {
   const modalRef = useRef6(null);
   function show() {
     var _a;
@@ -32702,25 +32699,30 @@ function Modal({
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.close();
   }
-  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
-    React6.cloneElement(button, {
+  const newChildren = useMemo10(() => {
+    return children && React6.cloneElement(children, { hide });
+  }, [children]);
+  const newButton = useMemo10(() => {
+    return button && React6.cloneElement(button, {
       onClick: (e) => {
         var _a, _b;
         show();
         (_b = (_a = button.props).onClick) == null ? void 0 : _b.call(_a, e);
       }
-    }),
+    });
+  }, [button]);
+  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
+    newButton,
     /* @__PURE__ */ jsx17("dialog", { ref: modalRef, className: "p-5 border shadow rounded", children: /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
       /* @__PURE__ */ jsx17(
-        Button,
+        "button",
         {
           onClick: hide,
-          color: "danger",
-          className: "absolute top-0 right-0 ",
+          className: "absolute top-0 right-0 text-red-500 ",
           children: /* @__PURE__ */ jsx17(CloseIcon, {})
         }
       ),
-      /* @__PURE__ */ jsx17("div", { className: "flex flex-col gap-3 pt-6", children })
+      /* @__PURE__ */ jsx17("div", { className: "flex flex-col gap-3 pt-6", children: newChildren })
     ] }) })
   ] });
 }

package/package.json

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

package/src/modal/index.tsx

@@ -1,14 +1,13 @@
-import React, { useRef } from "react";
+import React, { useMemo, useRef } from "react";
 import CloseIcon from "../select/close";
-import { Button } from "..";
-
-export default function Modal({
-  button,
-  children,
-}: {
-  button: any;
-  children?: React.ReactNode;
-}) {
+interface Props
+  extends React.DetailedHTMLProps<
+    React.DialogHTMLAttributes<HTMLDialogElement>,
+    HTMLDialogElement
+  > {
+  button: React.ReactElement;
+}
+export default function Modal({ button, children }: Props) {
   const modalRef = useRef<HTMLDialogElement>(null);
   function show() {
     modalRef.current?.showModal();
@@ -16,27 +15,36 @@ export default function Modal({
   function hide() {
     modalRef.current?.close();
   }
-
-  return (
-    <>
-      {React.cloneElement(button, {
-        onClick: (e) => {
+  const newChildren = useMemo(() => {
+    return (
+      children && React.cloneElement(children as React.ReactElement, { hide })
+    );
+  }, [children]);
+  const newButton = useMemo(() => {
+    return (
+      button &&
+      React.cloneElement(button, {
+        onClick: (e: any) => {
           show();
           button.props.onClick?.(e);
         },
-      })}
+      })
+    );
+  }, [button]);
+
+  return (
+    <>
+      {newButton}
       <dialog ref={modalRef} className="p-5 border shadow rounded">
         <div className="relative">
           {/* Botón de cerrar en la esquina superior derecha */}
-          <Button
+          <button
             onClick={hide}
-            color="danger"
-            className="absolute top-0 right-0 "
+            className="absolute top-0 right-0 text-red-500 "
           >
             <CloseIcon />
-          </Button>
-
-          <div className="flex flex-col gap-3 pt-6">{children}</div>
+          </button>
+          <div className="flex flex-col gap-3 pt-6">{newChildren}</div>
         </div>
       </dialog>
     </>