@hyperbridge/ui 0.0.29 → 0.0.30

package/dist/index.mjs

@@ -1210,7 +1210,7 @@ function EmptyState(props) {
 
 // src/components/molecules/modal.tsx
 import { AnimatePresence, motion } from "motion/react";
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 
 // src/hooks/is-mobile.ts
 import { useEffect as useEffect2, useState as useState3 } from "react";
@@ -1227,6 +1227,31 @@ var useIsMobile = () => {
   return isMobile;
 };
 
+// src/hooks/use-viewport-height.ts
+import { useEffect as useEffect3, useState as useState4 } from "react";
+function useViewportHeight(enabled = true) {
+  const [viewportHeight, setViewportHeight] = useState4(null);
+  useEffect3(() => {
+    if (!enabled) return;
+    const handleResize = () => {
+      if (window.visualViewport) {
+        setViewportHeight(window.visualViewport.height);
+      }
+    };
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", handleResize);
+      handleResize();
+    }
+    return () => {
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", handleResize);
+      }
+      setViewportHeight(null);
+    };
+  }, [enabled]);
+  return viewportHeight;
+}
+
 // src/lib/animations.ts
 var modalVariants = {
   initial: {
@@ -1398,8 +1423,22 @@ import { jsx as jsx17 } from "react/jsx-runtime";
 var Modal = (props) => {
   const { isOpen, children, onClose } = props;
   const isMobile = useIsMobile();
+  const viewportHeight = useViewportHeight(isMobile && isOpen);
   if (isMobile) {
-    return /* @__PURE__ */ jsx17(Drawer, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsx17(DrawerContent, { className: "bg-brand-black-550 border-brand-black-300 min-h-[90dvh]", children }) });
+    return /* @__PURE__ */ jsx17(Drawer, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsx17(
+      DrawerContent,
+      {
+        className: "bg-brand-black-550 border-brand-black-300",
+        style: viewportHeight ? {
+          height: `${viewportHeight}px`,
+          maxHeight: `${viewportHeight}px`,
+          minHeight: "auto"
+        } : {
+          minHeight: "90dvh"
+        },
+        children
+      }
+    ) });
   }
   return /* @__PURE__ */ jsx17(DestkopModal, __spreadValues({}, props));
 };
@@ -1412,7 +1451,7 @@ function DestkopModal(props) {
     className
   } = props;
   const { variants, transition } = animationPresets[animationPreset];
-  useEffect3(() => {
+  useEffect4(() => {
     const handleEscapeKey = (event) => {
       if (event.key === "Escape" && isOpen && onClose) {
         onClose();
@@ -4839,8 +4878,22 @@ function CWDrawerContent(_a) {
     "children"
   ]);
   const isMobile = useIsMobile();
+  const viewportHeight = useViewportHeight(isMobile);
   if (isMobile) {
-    return /* @__PURE__ */ jsx48(HBDrawerContent, { className: "bg-brand-black-550 rounded-t-[1rem] w-full px-[1rem] border-t border-brand-black-300 min-h-[90dvh]", children: /* @__PURE__ */ jsx48("div", { className: "flex flex-col flex-1", children }) });
+    return /* @__PURE__ */ jsx48(
+      HBDrawerContent,
+      {
+        className: "bg-brand-black-550 rounded-t-[1rem] w-full px-[1rem] border-t border-brand-black-300",
+        style: viewportHeight ? {
+          height: `${viewportHeight}px`,
+          maxHeight: `${viewportHeight}px`,
+          minHeight: "auto"
+        } : {
+          minHeight: "90dvh"
+        },
+        children: /* @__PURE__ */ jsx48("div", { className: "flex flex-col flex-1", children })
+      }
+    );
   }
   return /* @__PURE__ */ jsx48(
     SheetContent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperbridge/ui",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "sideEffects": false,
   "license": "MIT",
   "private": false,

package/styles/base.css

@@ -294,3 +294,11 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 /* End Dialog */
+
+@media (max-width: 768px) {
+  body:has([data-drawer="true"]) {
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+  }
+}