bmi-next-brokers 1.1.4 → 1.1.5

package/dist/assets/index7.css

@@ -1 +1 @@
-._modalOverlay_dvid0_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;animation:_overlayFadeIn_dvid0_1 .25s ease-in-out forwards;overflow:hidden;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}._modalOverlay_dvid0_1._closing_dvid0_16{animation:_overlayFadeOut_dvid0_1 .25s ease-in-out forwards}@keyframes _overlayFadeIn_dvid0_1{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}@keyframes _overlayFadeOut_dvid0_1{0%{opacity:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}._modal_dvid0_1{display:flex;flex-direction:column;border-radius:24px;background-color:#fff;box-shadow:0 4px 6px #0000001a;max-height:calc(100dvh - 15px)}._modalHeader_dvid0_52{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;gap:8px}._modalTitle_dvid0_60{color:var(--Blacks-Black, #000);font-size:20px;font-style:normal;font-weight:600;line-height:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._closeIcon_dvid0_71{display:flex;flex-direction:column;border-radius:50%;background-color:#d9d9d9;align-items:center;justify-content:center;aspect-ratio:1/1;padding:6.2px;cursor:pointer}._modalBody_dvid0_83{flex:1;overflow-y:auto;padding:0 16px 16px}._modalBody_dvid0_83::-webkit-scrollbar{display:none}._modalFooter_dvid0_93{display:grid;grid-template-columns:1fr 1fr;margin-left:auto;width:fit-content;gap:19px;padding-inline:16px;margin-block:16px}._modalFooter_dvid0_93 :only-child{grid-column:2}
+._modalOverlay_1x735_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;animation:_overlayFadeIn_1x735_1 .25s ease-in-out forwards;overflow:hidden}._modalOverlay_1x735_1._closing_1x735_15{animation:_overlayFadeOut_1x735_1 .25s ease-in-out forwards}@keyframes _overlayFadeIn_1x735_1{0%{opacity:0}to{opacity:1}}@keyframes _overlayFadeOut_1x735_1{0%{opacity:1}to{opacity:0}}._modal_1x735_1{display:flex;flex-direction:column;border-radius:24px;background-color:#fff;box-shadow:0 4px 6px #0000001a;max-height:calc(100dvh - 15px)}._modalHeader_1x735_47{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;gap:8px}._modalTitle_1x735_55{color:var(--Blacks-Black, #000);font-size:20px;font-style:normal;font-weight:600;line-height:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._closeIcon_1x735_66{display:flex;flex-direction:column;border-radius:50%;background-color:#d9d9d9;align-items:center;justify-content:center;aspect-ratio:1/1;padding:6.2px;cursor:pointer;margin-left:auto}._modalBody_1x735_79{flex:1;overflow-y:auto;padding:0 16px 16px}._modalBody_1x735_79::-webkit-scrollbar{display:none}._modalFooter_1x735_89{display:grid;grid-template-columns:1fr 1fr;margin-left:auto;width:fit-content;gap:19px;padding-inline:16px;margin-block:16px}._modalFooter_1x735_89 :only-child{grid-column:2}

package/dist/components/modal/index.d.ts

@@ -1,4 +1,14 @@
 import { default as React } from 'react';
+import { ButtonSize, ButtonVariant } from '../Button';
+type ModalButtonProps = {
+    show?: boolean;
+    text?: string;
+    disabled?: boolean;
+    action?: () => Promise<void> | void;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    loading?: boolean;
+};
 /**
  * Props del Modal
  */
@@ -7,10 +17,8 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
     title?: string;
     children?: React.ReactNode;
     width?: number;
-    confirmButton?: string | boolean;
-    cancelButton?: string | boolean;
-    onConfirm?: () => Promise<void> | void;
-    onCancel?: () => Promise<void> | void;
+    confirmButton: ModalButtonProps;
+    cancelButton: ModalButtonProps;
     zIndex?: number;
     className?: string;
     onClickOverlay?: (() => Promise<void> | void) | false;
@@ -18,32 +26,34 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
     closeModal: () => void;
 }
 /**
- * Componente Modal para mostrar un modal con overlay.
- * Permite pasar título, contenido personalizado, botones de confirmación y cancelación,
- * y manejar el cierre del modal mediante callbacks.
+ * Modal con overlay, header, body y footer configurable.
+ *
+ * Puedes pasar un objeto a `confirmButton` y `cancelButton` para controlar:
+ * - `show`: si se renderiza el botón (por defecto true)
+ * - `text`: texto del botón
+ * - `action`: función a ejecutar al hacer click
+ * - `variant`: variante visual del botón ("brand", "outline", etc.)
+ * - `size`: tamaño del botón ("small", "medium", "large")
+ * - `disabled`: deshabilita el botón
+ * - `loading`: muestra estado de carga en el botón
  *
  * @param isOpen - Controla la visibilidad del modal.
  * @param title - Título que se muestra en el header del modal.
  * @param children - Contenido del modal; puede ser cualquier componente React.
  * @param width - Ancho del modal en píxeles. Por defecto 752.
- * @param confirmButton - Texto del botón de confirmación.  Si es `true`, muestra "Confirmar". Si es `false`, no se renderiza. Se puede pasar texto personalizado.
- * @param cancelButton - Texto del botón de cancelación.  Si es `true`, muestra "Cancelar". Si es `false`, no se renderiza. Se puede pasar texto personalizado
- * @param onConfirm - Callback opcional al pulsar el botón de confirmación.
- * @param onCancel - Callback opcional al pulsar el botón de cancelación.
+ * @param confirmButton - Configuración del botón de confirmación.
+ * @param cancelButton - Configuración del botón de cancelación.
  * @param zIndex - Número para controlar la superposición del modal.
  * @param className - Clases CSS adicionales para el modal.
  * @param style - Estilos inline adicionales para el contenedor del modal.
- * @param onClickOverlay - Callback opcional al hacer click fuera del modal.
- *        Si se pasa `false`, el overlay no cerrará el modal ni ejecutará acción alguna.
- * @param onClose - Callback opcional al hacer click en el icono de cierre.
- *        Si se pasa `false`, no se renderiza el icono.
+ * @param onClickOverlay - Callback opcional al hacer click fuera del modal. Si se pasa `false`, el overlay no cierra el modal ni ejecuta acción.
+ * @param onClose - Callback opcional al pulsar el icono de cierre. Si se pasa `false`, no se renderiza el icono de cierre.
  * @param closeModal - Función obligatoria que cierra el modal desde el exterior.
  *
- *
  * @example
  * ```tsx
  * import { useState } from "react";
- * import { Modal, Button } from "tu-libreria";
+ * import { Modal, Button } from "bmi-next-brokers";
  *
  * export default function Example() {
  *   const [isOpen, setIsOpen] = useState(false);
@@ -60,21 +70,25 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
  *         closeModal={() => setIsOpen(false)}
  *         title="Ejemplo de Modal"
  *         width={500}
- *         confirmButton={false}
- *         cancelButton="Cancelar"
- *         onConfirm={handleConfirm}
- *         onCancel={handleCancel}
+ *         confirmButton={{
+ *           text: "Guardar",
+ *           action: handleConfirm,
+ *           variant: "brand",
+ *           size: "small",
+ *           loading: false
+ *         }}
+ *         cancelButton={{
+ *           show: false, // no se renderiza
+ *           text: "Cerrar",
+ *           action: handleCancel,
+ *           variant: "outline",
+ *           size: "small",
+ *           loading: false
+ *         }}
  *         onClose={() => console.log("Click en el botón de cierre")}
  *       >
  *         <div style={{ padding: "16px 0" }}>
- *           <p>
- *             Este es un contenido de ejemplo dentro del modal. Puedes poner
- *             cualquier componente aquí: formularios, listas, tablas, etc.
- *           </p>
- *           <p>
- *             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nisi vel
- *             consectetur interdum, aliquet nunc vitae convallis sapien.
- *           </p>
+ *           <p>Contenido del modal...</p>
  *         </div>
  *       </Modal>
  *     </>
@@ -83,3 +97,4 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
  * ```
  */
 export declare const Modal: React.FC<ModalProps>;
+export {};

package/dist/components/modal/index.js

@@ -1,72 +1,68 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { useRef as O, useState as R } from "react";
-import { Icon as S } from "../../icons/Icon.js";
-import { useScrollLock as $ } from "../../hooks/useScrollLock.js";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useRef as z, useState as A } from "react";
+import { Icon as F } from "../../icons/Icon.js";
+import { useScrollLock as H } from "../../hooks/useScrollLock.js";
 import { Button as y } from "../Button/Button.js";
-import { r as b } from "../../index-CGDUIzcq.js";
-import '../../assets/index7.css';const D = "_modalOverlay_dvid0_1", L = "_closing_dvid0_16", j = "_modal_dvid0_1", V = "_modalHeader_dvid0_52", W = "_modalTitle_dvid0_60", X = "_closeIcon_dvid0_71", Y = "_modalBody_dvid0_83", Z = "_modalFooter_dvid0_93", o = {
-  modalOverlay: D,
-  closing: L,
-  modal: j,
-  modalHeader: V,
-  modalTitle: W,
-  closeIcon: X,
-  modalBody: Y,
-  modalFooter: Z
-}, Q = ({
-  isOpen: r,
-  title: c,
-  children: g,
-  width: p = 752,
-  confirmButton: d = !0,
-  cancelButton: t = !0,
-  onConfirm: i,
-  onCancel: m,
-  zIndex: I,
-  className: C,
-  style: N,
-  onClickOverlay: s,
-  onClose: a,
-  closeModal: E,
-  ...T
+import { r as O } from "../../index-CGDUIzcq.js";
+import '../../assets/index7.css';const R = "_modalOverlay_1x735_1", $ = "_closing_1x735_15", D = "_modal_1x735_1", L = "_modalHeader_1x735_47", j = "_modalTitle_1x735_55", V = "_closeIcon_1x735_66", W = "_modalBody_1x735_79", X = "_modalFooter_1x735_89", o = {
+  modalOverlay: R,
+  closing: $,
+  modal: D,
+  modalHeader: L,
+  modalTitle: j,
+  closeIcon: V,
+  modalBody: W,
+  modalFooter: X
+}, K = ({
+  isOpen: t,
+  title: n,
+  children: x,
+  width: g = 752,
+  confirmButton: a,
+  cancelButton: l,
+  zIndex: v,
+  className: p,
+  style: u,
+  onClickOverlay: i,
+  onClose: s,
+  closeModal: C,
+  ...I
 }) => {
-  const f = O(null), [k, _] = R(!1);
-  $(r);
-  const l = () => {
-    _(!0), setTimeout(() => {
-      E(), _(!1);
+  const c = z(null), [w, m] = A(!1);
+  H(t);
+  const d = () => {
+    m(!0), setTimeout(() => {
+      C(), m(!1);
     }, 250);
-  }, x = async (H) => {
+  }, N = async (T) => {
     var h;
-    (h = f.current) != null && h.contains(H.target) || s !== !1 && (typeof s == "function" && await s(), l());
-  }, B = async () => {
-    a !== !1 && (typeof a == "function" && await a(), l());
-  }, w = async () => {
-    i && await i(), l();
-  }, A = async () => {
-    m && await m(), l();
-  }, u = t === !0 ? "Cancelar" : t || void 0, v = d === !0 ? "Confirmar" : d || void 0;
-  if (!r) return null;
-  const F = `${o.modal} ${C || ""}`;
-  return b.createPortal(
+    (h = c.current) != null && h.contains(T.target) || i !== !1 && (typeof i == "function" && await i(), d());
+  }, E = async () => {
+    s !== !1 && (typeof s == "function" && await s(), d());
+  }, b = async () => {
+    a.action && await a.action(), d();
+  }, k = async () => {
+    l.action && await l.action(), d();
+  }, _ = l.show ?? !0, f = a.show ?? !0, S = `${o.modal} ${p || ""}`;
+  return t ? O.createPortal(
     /* @__PURE__ */ e(
       "div",
       {
-        className: `${o.modalOverlay} ${k ? o.closing : ""}`,
-        style: { zIndex: 3e3 + (I || 0) },
-        onClick: x,
-        children: /* @__PURE__ */ n(
+        className: `${o.modalOverlay} ${w ? o.closing : ""}`,
+        style: { zIndex: 3e3 + (v || 0) },
+        onClick: N,
+        children: /* @__PURE__ */ r(
           "div",
           {
-            className: F,
-            style: { width: p, ...N },
-            ref: f,
-            ...T,
+            className: S,
+            style: { width: g, ...u },
+            ref: c,
+            ...I,
             children: [
-              /* @__PURE__ */ n("div", { className: o.modalHeader, children: [
-                c && /* @__PURE__ */ e("h2", { className: o.modalTitle, children: c }),
-                a !== !1 && /* @__PURE__ */ e("div", { className: o.closeIcon, onClick: B, children: /* @__PURE__ */ e(
-                  S,
+              /* @__PURE__ */ r("div", { className: o.modalHeader, children: [
+                n && /* @__PURE__ */ e("span", { className: o.modalTitle, children: n }),
+                s !== !1 && /* @__PURE__ */ e("div", { className: o.closeIcon, onClick: E, children: /* @__PURE__ */ e(
+                  F,
                   {
                     name: "Close",
                     width: 12,
@@ -75,10 +71,32 @@ import '../../assets/index7.css';const D = "_modalOverlay_dvid0_1", L = "_closin
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ e("div", { className: o.modalBody, children: g }),
-              (d || t) && /* @__PURE__ */ n("div", { className: o.modalFooter, children: [
-                u && /* @__PURE__ */ e(y, { variant: "outline", onClick: A, fullWidth: !0, children: u }),
-                v && /* @__PURE__ */ e(y, { variant: "brand", onClick: w, fullWidth: !0, children: v })
+              /* @__PURE__ */ e("div", { className: o.modalBody, children: x }),
+              (_ || f) && /* @__PURE__ */ r("div", { className: o.modalFooter, children: [
+                _ && /* @__PURE__ */ e(
+                  y,
+                  {
+                    variant: l.variant || "outline",
+                    onClick: k,
+                    disabled: l.disabled || !1,
+                    size: l.size || "small",
+                    loading: l.loading,
+                    fullWidth: !0,
+                    children: l.text || "Cancelar"
+                  }
+                ),
+                f && /* @__PURE__ */ e(
+                  y,
+                  {
+                    variant: a.variant || "brand",
+                    onClick: b,
+                    disabled: a.disabled || !1,
+                    size: a.size || "small",
+                    loading: a.loading,
+                    fullWidth: !0,
+                    children: a.text || "Confirmar"
+                  }
+                )
               ] })
             ]
           }
@@ -86,8 +104,8 @@ import '../../assets/index7.css';const D = "_modalOverlay_dvid0_1", L = "_closin
       }
     ),
     document.getElementById("root") || document.body
-  );
+  ) : null;
 };
 export {
-  Q as Modal
+  K as Modal
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bmi-next-brokers",
   "description": "Componentes de UI para proyecto BMI Next Brokers",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "author": "BMI Ahorro España",
   "contributors": [
     "José Ramón Jiménez <jrjimenez@bmicos.com>",