bmi-next 1.0.33 → 1.0.35

package/dist/assets/index6.css

@@ -1 +1 @@
-._overlay_1b37u_1{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--negro-60);animation:_fadeIn_1b37u_1 .25s ease-in-out;z-index:2000}._overlay_1b37u_1._closing_1b37u_12{animation:_fadeOut_1b37u_1 .25s ease-in-out forwards}@keyframes _fadeIn_1b37u_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_1b37u_1{0%{opacity:1}to{opacity:0}}._bottomDrawer_1b37u_36{position:fixed;bottom:0;left:0;right:0;background-color:#fff;border-radius:16px 16px 0 0;z-index:2001;animation:_slideUp_1b37u_1 .35s cubic-bezier(.4,0,.2,1);padding-top:7px;padding-bottom:calc(env(safe-area-inset-bottom) + 10px);padding-inline:15px;transition:transform .2s cubic-bezier(.4,0,.2,1);touch-action:none}._closing_1b37u_12{animation:_slideDown_1b37u_1 .35s cubic-bezier(.4,0,.2,1) forwards}@keyframes _slideUp_1b37u_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes _slideDown_1b37u_1{0%{transform:translateY(0)}to{transform:translateY(100%)}}._drawerHeader_1b37u_76{display:flex;flex-direction:column;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;position:relative}._drawerHeader_1b37u_76:active{cursor:grabbing}._drawerIndicator_1b37u_89{width:40px;height:7px;background-color:var(--negro-10);border-radius:14px;position:absolute;left:50%;transform:translate(-50%);top:7px}._drawerContent_1b37u_100{max-height:70vh;overflow-y:auto;padding-top:15px;display:flex;flex-direction:column;gap:19px}._drawerHeader_1b37u_76 p{font-family:Poppins Bold;font-size:19px;line-height:22.8px;margin:0}._closeButton_1b37u_116{cursor:pointer;display:flex;align-items:center;justify-content:end}._closeButton_1b37u_116>svg{background-color:var(--negro-10);border-radius:50%;padding:2px}
+._overlay_1anip_1{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--negro-60);animation:_fadeIn_1anip_1 .25s ease-in-out;z-index:2000}._overlay_1anip_1._closing_1anip_12{animation:_fadeOut_1anip_1 .25s ease-in-out forwards}@keyframes _fadeIn_1anip_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_1anip_1{0%{opacity:1}to{opacity:0}}._bottomDrawer_1anip_36{position:fixed;bottom:0;left:0;right:0;background-color:#fff;border-radius:16px 16px 0 0;z-index:2001;animation:_slideUp_1anip_1 .35s cubic-bezier(.4,0,.2,1);padding-top:7px;padding-bottom:calc(env(safe-area-inset-bottom) + 10px);padding-inline:15px;transition:transform .2s cubic-bezier(.4,0,.2,1);touch-action:none}._closing_1anip_12{animation:_slideDown_1anip_1 .35s cubic-bezier(.4,0,.2,1) forwards}@keyframes _slideUp_1anip_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes _slideDown_1anip_1{0%{transform:translateY(0)}to{transform:translateY(100%)}}._drawerHeader_1anip_76{display:flex;flex-direction:column;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;position:relative}._drawerHeader_1anip_76:active{cursor:grabbing}._drawerIndicator_1anip_89{width:40px;height:7px;background-color:var(--negro-10);border-radius:14px;position:absolute;left:50%;transform:translate(-50%);top:7px}._drawerContent_1anip_100{max-height:70vh;overflow-y:auto;padding-top:15px;display:flex;flex-direction:column;gap:19px}._drawerHeader_1anip_76 p{font-family:Poppins Bold;font-size:19px;line-height:22.8px;margin:0}._closeButton_1anip_116{cursor:pointer;display:flex;align-items:center;justify-content:end}._closeButton_1anip_116>svg{background-color:var(--negro-10);border-radius:50%;padding:2px}._modalDrawer_1anip_129{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:16px;z-index:2001;animation:_fadeIn_1anip_1 .35s cubic-bezier(.4,0,.2,1);padding:20px;max-width:90%;max-height:90vh;min-width:350px;width:350px}._modalDrawer_1anip_129._closing_1anip_12{animation:_fadeOut_1anip_1 .35s cubic-bezier(.4,0,.2,1) forwards}

package/dist/components/Drawer/DrawerPortalBase/index.d.ts

@@ -11,6 +11,7 @@ interface DrawerPortalBaseProps {
     isClosing: boolean;
     title?: string;
     children: ReactNode;
+    modal?: boolean;
 }
-export declare const DrawerPortalBase: ({ isOpen, handleClose, dragPosition, setDragPosition, isClosing, title, children, }: DrawerPortalBaseProps) => import('react').ReactPortal | null;
+export declare const DrawerPortalBase: ({ isOpen, handleClose, dragPosition, setDragPosition, isClosing, title, children, modal, }: DrawerPortalBaseProps) => import('react').ReactPortal | null;
 export {};

package/dist/components/Drawer/DrawerPortalBase/index.js

@@ -1,64 +1,67 @@
-import { jsxs as u, Fragment as f, jsx as r } from "react/jsx-runtime";
-import { useRef as w } from "react";
+import { jsxs as m, Fragment as E, jsx as t } from "react/jsx-runtime";
+import { useRef as p } from "react";
 import { r as g } from "../../../index-Cp_B-Y3h.js";
-import { Icon as p } from "../../../icons/icons.js";
-import '../../../assets/index6.css';const y = "_overlay_1b37u_1", D = "_closing_1b37u_12", Y = "_bottomDrawer_1b37u_36", L = "_drawerHeader_1b37u_76", B = "_drawerIndicator_1b37u_89", I = "_drawerContent_1b37u_100", N = "_closeButton_1b37u_116", t = {
-  overlay: y,
-  closing: D,
-  bottomDrawer: Y,
-  drawerHeader: L,
-  drawerIndicator: B,
-  drawerContent: I,
-  closeButton: N
-}, S = ({
+import { Icon as y } from "../../../icons/icons.js";
+import '../../../assets/index6.css';const Y = "_overlay_1anip_1", L = "_closing_1anip_12", B = "_bottomDrawer_1anip_36", I = "_drawerHeader_1anip_76", N = "_drawerIndicator_1anip_89", b = "_drawerContent_1anip_100", x = "_closeButton_1anip_116", $ = "_modalDrawer_1anip_129", e = {
+  overlay: Y,
+  closing: L,
+  bottomDrawer: B,
+  drawerHeader: I,
+  drawerIndicator: N,
+  drawerContent: b,
+  closeButton: x,
+  modalDrawer: $
+}, k = ({
   isOpen: h,
-  handleClose: a,
-  dragPosition: b,
-  setDragPosition: m,
-  isClosing: l,
-  title: i,
-  children: E
+  handleClose: s,
+  dragPosition: D,
+  setDragPosition: l,
+  isClosing: u,
+  title: v,
+  children: f,
+  modal: o
 }) => {
-  const s = w(0), d = w(0);
+  const d = p(0), i = p(0);
   if (!h) return null;
-  const v = (e) => {
-    const o = "touches" in e ? e.touches[0].clientY : e.clientY;
-    s.current = o, d.current = o, document.addEventListener("mousemove", c), document.addEventListener("touchmove", c), document.addEventListener("mouseup", n), document.addEventListener("touchend", n);
-  }, n = () => {
-    document.removeEventListener("mousemove", c), document.removeEventListener("touchmove", c), document.removeEventListener("mouseup", n), document.removeEventListener("touchend", n), d.current - s.current > 100 ? a() : m(0);
-  }, c = (e) => {
-    const o = "touches" in e ? e.touches[0].clientY : e.clientY, _ = o - s.current;
-    d.current = o, _ > 0 && m(_);
+  const _ = (r) => {
+    if (o) return;
+    const n = "touches" in r ? r.touches[0].clientY : r.clientY;
+    d.current = n, i.current = n, document.addEventListener("mousemove", c), document.addEventListener("touchmove", c), document.addEventListener("mouseup", a), document.addEventListener("touchend", a);
+  }, a = () => {
+    document.removeEventListener("mousemove", c), document.removeEventListener("touchmove", c), document.removeEventListener("mouseup", a), document.removeEventListener("touchend", a), i.current - d.current > 100 ? s() : l(0);
+  }, c = (r) => {
+    const n = "touches" in r ? r.touches[0].clientY : r.clientY, w = n - d.current;
+    i.current = n, w > 0 && l(w);
   };
   return g.createPortal(
-    /* @__PURE__ */ u(f, { children: [
-      /* @__PURE__ */ r(
+    /* @__PURE__ */ m(E, { children: [
+      /* @__PURE__ */ t(
         "div",
         {
-          className: `${t.overlay} ${l ? t.closing : ""}`,
-          onClick: a
+          className: `${e.overlay} ${u ? e.closing : ""}`,
+          onClick: s
         }
       ),
-      /* @__PURE__ */ u(
+      /* @__PURE__ */ m(
         "div",
         {
-          className: `${t.bottomDrawer} ${l ? t.closing : ""}`,
-          style: { transform: `translateY(${b}px)` },
+          className: `${o ? e.modalDrawer : e.bottomDrawer} ${u ? e.closing : ""}`,
+          style: { transform: o ? void 0 : `translateY(${D}px)` },
           children: [
-            /* @__PURE__ */ u(
+            /* @__PURE__ */ m(
               "header",
               {
-                className: t.drawerHeader,
-                onMouseDown: v,
-                onTouchStart: v,
+                className: e.drawerHeader,
+                onMouseDown: _,
+                onTouchStart: _,
                 children: [
-                  /* @__PURE__ */ r("div", { className: t.drawerIndicator }),
-                  /* @__PURE__ */ r("div", { className: t.closeButton, onClick: a, children: /* @__PURE__ */ r(p, { name: "Close", fill: "#030c2466" }) }),
-                  i && /* @__PURE__ */ r("p", { children: i })
+                  !o && /* @__PURE__ */ t("div", { className: e.drawerIndicator }),
+                  /* @__PURE__ */ t("div", { className: e.closeButton, onClick: s, children: /* @__PURE__ */ t(y, { name: "Close", fill: "#030c2466" }) }),
+                  v && /* @__PURE__ */ t("p", { children: v })
                 ]
               }
             ),
-            /* @__PURE__ */ r("div", { className: t.drawerContent, children: E })
+            /* @__PURE__ */ t("div", { className: e.drawerContent, children: f })
           ]
         }
       )
@@ -67,5 +70,5 @@ import '../../../assets/index6.css';const y = "_overlay_1b37u_1", D = "_closing_
   );
 };
 export {
-  S as DrawerPortalBase
+  k as DrawerPortalBase
 };

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

@@ -12,6 +12,8 @@ export interface DrawerProps {
     title?: string;
     /** Contenido del drawer */
     children: ReactNode;
+    /** Si es true, el drawer se muestra como un modal centrado */
+    modal?: boolean;
 }
 /**
  * Un componente de drawer que se abre desde la parte inferior de la pantalla
@@ -36,4 +38,4 @@ export interface DrawerProps {
  * - Previene el desplazamiento del fondo cuando está abierto
  * - Animaciones suaves de entrada y salida
  */
-export declare function Drawer({ isOpen, onClose, title, children }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Drawer({ isOpen, onClose, title, children, modal }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Drawer/index.js

@@ -1,12 +1,12 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useState as r, useEffect as a } from "react";
-import { DrawerPortalBase as m } from "./DrawerPortalBase/index.js";
-function g({ isOpen: o, onClose: s, title: l, children: n }) {
-  const [i, e] = r(!1), [d, t] = r(0);
-  return a(() => (o ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+import { jsx as a } from "react/jsx-runtime";
+import { useState as r, useEffect as m } from "react";
+import { DrawerPortalBase as u } from "./DrawerPortalBase/index.js";
+function v({ isOpen: o, onClose: s, title: l, children: n, modal: i }) {
+  const [d, e] = r(!1), [f, t] = r(0);
+  return m(() => (o ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
     document.body.style.overflow = "";
-  }), [o]), /* @__PURE__ */ f(
-    m,
+  }), [o]), /* @__PURE__ */ a(
+    u,
     {
       isOpen: o,
       handleClose: () => {
@@ -14,14 +14,15 @@ function g({ isOpen: o, onClose: s, title: l, children: n }) {
           s(), e(!1), t(0);
         }, 350);
       },
-      dragPosition: d,
+      dragPosition: f,
       setDragPosition: t,
-      isClosing: i,
+      isClosing: d,
       title: l || void 0,
+      modal: i,
       children: n
     }
   );
 }
 export {
-  g as Drawer
+  v as Drawer
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bmi-next",
   "description": "Componentes de UI para proyecto BMI Next",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "author": "David Fernández Bolaños <david@bmiahorro.com>",
   "contributors": [
     "Jorge Martín <jorge@bmiahorro.com>",