@hyperbridge/ui 0.0.29 → 0.0.31

package/dist/index.mjs

@@ -494,7 +494,7 @@ function TagButton(props) {
 }
 function SwapTokenButton(props) {
   const _a = props, { token, network } = _a, _props = __objRest(_a, ["token", "network"]);
-  return /* @__PURE__ */ jsxs6(BaseButton, __spreadProps(__spreadValues({ className: "cursor-pointer" }, _props), { children: [
+  return /* @__PURE__ */ jsxs6(BaseButton, __spreadProps(__spreadValues({ className: "cursor-pointer !transition-none" }, _props), { children: [
     /* @__PURE__ */ jsx7("span", { className: "inline-flex text-[0.875rem]", children: /* @__PURE__ */ jsx7(
       BadgeIcon,
       {
@@ -505,7 +505,7 @@ function SwapTokenButton(props) {
       }
     ) }),
     /* @__PURE__ */ jsxs6("span", { className: "flex flex-col font-medium shrink-0 text-start max-w-[10ch]", children: [
-      /* @__PURE__ */ jsx7("span", { className: "text-sm  uppercase text-brand-white-500 leading-[1.2]", children: token.symbol.toLowerCase() }),
+      /* @__PURE__ */ jsx7("span", { className: "text-sm uppercase text-brand-white-500 leading-[1.2]", children: token.symbol.toLowerCase() }),
       /* @__PURE__ */ jsxs6("span", { className: "text-xs text-brand-black-100 leading-[1.2]", children: [
         "on ",
         /* @__PURE__ */ jsx7("span", { className: "capitalize", children: network.name.toLowerCase() })
@@ -714,7 +714,7 @@ function SwapForm({
                         onClick: () => onPercentageChange == null ? void 0 : onPercentageChange(percent_value),
                         disabled: isLoading,
                         className: cn(
-                          "rounded-[60px] h-6 py-1 px-[9.5px] text-caption transition-colors",
+                          "rounded-[60px] h-6 py-1 px-[9.5px] text-caption transition-none",
                           percentage.value === percent_value ? "bg-white text-brand-black-500 hover:bg-white/90" : "text-brand-black-100 hover:text-white hover:bg-brand-black-200"
                         ),
                         variant: "message",
@@ -1098,7 +1098,7 @@ function NetworkSwitcherButton(props) {
     "button",
     __spreadProps(__spreadValues({}, _props), {
       type: "button",
-      className: "bg-brand-black-500 select-none rounded-[16px] py-[10px] px-3 w-[49%] cursor-pointer hover:bg-brand-black-300 duration-200 transition-all",
+      className: "bg-brand-black-500 select-none rounded-[16px] py-[10px] px-3 w-[49%] cursor-pointer hover:brightness-110",
       children: /* @__PURE__ */ jsxs9("span", { className: "flex gap-3 items-center", children: [
         /* @__PURE__ */ jsx14(TokenImage, { className: "size-8", src: image.src, alt: image.alt }),
         /* @__PURE__ */ jsxs9("span", { className: "flex flex-col items-start", children: [
@@ -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();
@@ -2100,7 +2139,7 @@ function BridgeInput(props) {
                     disabled: isLoading,
                     variant: "message",
                     className: cn(
-                      "rounded-[60px] h-6 py-1 px-[9.5px] text-caption transition-colors",
+                      "rounded-[60px] h-6 py-1 px-[9.5px] text-caption transition-none",
                       percentage.value === percent_value ? "bg-white text-brand-black-500 hover:bg-white/90" : "text-brand-black-100 hover:text-white hover:bg-brand-black-200"
                     ),
                     onClick: () => props.onPercentageChange(percent_value),
@@ -2197,14 +2236,14 @@ function BridgeForm({
   senderBalance = "0",
   senderUsdValue = "0",
   senderToken = {
-    image: "https://app.hyperbridge.network/networks/polkadot.png",
+    image: "https://app.hyperbridge.network/networks/polkadot.svg",
     symbol: "DOT"
   },
   onSenderAmountChange,
   receiverAmount = "0",
   receiverUsdValue = "0",
   receiverToken = {
-    image: "https://app.hyperbridge.network/networks/polkadot.png",
+    image: "https://app.hyperbridge.network/networks/polkadot.svg",
     symbol: "DOT"
   },
   percentagePresets = [25, 50, 100],
@@ -2389,7 +2428,7 @@ function BridgeForm({
           TokenChangeButton: /* @__PURE__ */ jsx24(TokenSelectorDialog, { children: /* @__PURE__ */ jsx24(
             TagButton,
             {
-              className: "cursor-pointer",
+              className: "cursor-pointer !transition-none",
               src: senderToken.image,
               symbol: senderToken.symbol,
               variant: "trigger",
@@ -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.31",
   "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;
+  }
+}