@hyperbridge/ui 0.0.28 → 0.0.30

package/dist/index.d.mts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Image } from '@unpic/react';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import { VariantProps } from 'class-variance-authority';
 import * as React$1 from 'react';
 import React__default from 'react';
-import { VariantProps } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { DialogContentProps } from '@radix-ui/react-dialog';
 import * as motion_dist_react from 'motion/dist/react';
@@ -965,4 +965,4 @@ declare function Badge({ className, variant, asChild, ...props }: React$1.Compon
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-export { AccessoryButton, type AccessoryButtonProps, AccountItem, AccountStack, type AccountStackProps, AddressInput, AddressInputFocusBehaviour, AssetList, AssetListItem, AssetValueTrend, Badge, BadgeIcon, Balance, BridgeForm, type BridgeFormProps, BridgeInput, BridgeSettings, type BridgeSettingsProps, BridgeTokenButton, Button, type ButtonProps, CWDrawerContent, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogMorphContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerContent, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateConceal, EmptyStateContent, EmptyStateDescription, EmptyStateTitle, type EstimatedTimeFormatted, GradientButton, HBDrawer, HBDrawerClose, HBDrawerContent, HBDrawerDescription, HBDrawerFooter, HBDrawerHeader, HBDrawerOverlay, HBDrawerPortal, HBDrawerTitle, HBDrawerTrigger, Header, HeaderChooseProvider, HeaderContent, HeaderGradient, HeaderNested, IconButton, Input, type InputProps, LabelledSeperator, ListHeading, ListSection, ManageAccounts, Modal, type ModalProps, type Network, NetworkGroupItem, NetworkSelectionItem, NetworkSelector, type NetworkSelectorProps, NetworkSwitcher, NetworkSwitcherButton, type NetworkSwitcherProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ReviewItem, ReviewItemAddress, ReviewItemCopyAddressButton, ScrollAwareSeparator, SearchInput, type SearchInputProps, Settings, type SettingsProps, Sheet, SheetContent, SheetTrigger, Summary, SummaryValues, SwapForm, type SwapFormProps, SwapTokenButton, SwapTokenItem, type SwapTokenItemProps, SwapTokenSelector, SwapTokenSelectorContent, type SwapTokenSelectorContentProps, SwapTokenSelectorEmpty, type SwapTokenSelectorEmptyProps, SwapTokenSelectorHeader, type SwapTokenSelectorHeaderProps, type SwapTokenSelectorProps, SwapTokenSelectorSearch, type SwapTokenSelectorSearchProps, SwapTokenSelectorSection, type SwapTokenSelectorSectionProps, TabAlt, TabAltContent, TabAltHeader, TabAltHeaders, TabAltPanel, TabItem, Tabs, TabsContent, TabsList, TagButton, Text, TimelineItem, TimelineList, TimelineListGroup, TimelineRoot, TimerWrap, ToastBox, type Token, TokenImage, type TokenInfo, TokenSelectionItem, TokenSelector, type TokenSelectorProps, TokenTransferPair, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransactionTimer, TxList, TxListItem, TxListItemProcessing, type WalletAccount, WalletAccountItem, WalletConnectedHeader, type WalletConnectedHeaderProps, WalletHeader, type WalletHeaderCallbacks, WalletHeaderContent, WalletHeaderContentBlur, type WalletHeaderContentProps, type WalletHeaderProps, WalletHeaderTabItem, WalletHeaderTabs, WalletHeaderTabsContent, WalletHeaderTabsList, type WalletHeaderTabsProps, WalletManagerUIContent, WalletManagerUIProvider, WalletProviderItem, badgeVariants, makeEntry };
+export { AccessoryButton, type AccessoryButtonProps, AccountItem, AccountStack, type AccountStackProps, AddressInput, AddressInputFocusBehaviour, AssetList, AssetListItem, AssetValueTrend, Badge, BadgeIcon, Balance, BridgeForm, type BridgeFormProps, BridgeInput, BridgeSettings, type BridgeSettingsProps, BridgeTokenButton, Button, type ButtonProps, CWDrawerContent, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogMorphContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerContent, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateConceal, EmptyStateContent, EmptyStateDescription, EmptyStateTitle, type EstimatedTimeFormatted, GradientButton, HBDrawer, HBDrawerClose, HBDrawerContent, HBDrawerDescription, HBDrawerFooter, HBDrawerHeader, HBDrawerOverlay, HBDrawerPortal, HBDrawerTitle, HBDrawerTrigger, Header, HeaderChooseProvider, HeaderContent, HeaderGradient, HeaderNested, IconButton, Input, type InputProps, LabelledSeperator, ListHeading, ListSection, ManageAccounts, Modal, type ModalProps, type Network, NetworkGroupItem, NetworkSelectionItem, NetworkSelector, type NetworkSelectorProps, NetworkSwitcher, NetworkSwitcherButton, type NetworkSwitcherProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ReviewItem, ReviewItemAddress, ReviewItemCopyAddressButton, ScrollAwareSeparator, SearchInput, type SearchInputProps, Settings, type SettingsProps, Sheet, SheetContent, SheetTrigger, Summary, SummaryValues, SwapForm, type SwapFormProps, SwapTokenButton, SwapTokenItem, type SwapTokenItemProps, SwapTokenSelector, SwapTokenSelectorContent, type SwapTokenSelectorContentProps, SwapTokenSelectorEmpty, type SwapTokenSelectorEmptyProps, SwapTokenSelectorHeader, type SwapTokenSelectorHeaderProps, type SwapTokenSelectorProps, SwapTokenSelectorSearch, type SwapTokenSelectorSearchProps, SwapTokenSelectorSection, type SwapTokenSelectorSectionProps, TabAlt, TabAltContent, TabAltHeader, TabAltHeaders, TabAltPanel, TabItem, Tabs, TabsContent, TabsList, TagButton, Text, TimelineItem, TimelineList, TimelineListGroup, TimelineRoot, TimerWrap, ToastBox, type Token, TokenImage, type TokenInfo, TokenSelectionItem, TokenSelector, type TokenSelectorProps, TokenTransferPair, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransactionTimer, TxList, TxListItem, TxListItemProcessing, type WalletAccount, WalletAccountItem, WalletConnectedHeader, type WalletConnectedHeaderProps, WalletHeader, type WalletHeaderCallbacks, WalletHeaderContent, WalletHeaderContentBlur, type WalletHeaderContentProps, type WalletHeaderProps, WalletHeaderTabItem, WalletHeaderTabs, WalletHeaderTabsContent, WalletHeaderTabsList, type WalletHeaderTabsProps, WalletManagerUIContent, WalletManagerUIProvider, WalletProviderItem, badgeVariants, buttonVariants, makeEntry };

package/dist/index.mjs

@@ -246,6 +246,7 @@ function TokenTransferPair(props) {
 }
 
 // src/components/button/button.tsx
+import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { cva as cva4 } from "class-variance-authority";
 
 // src/@/ui/button.tsx
@@ -332,7 +333,6 @@ function Button(_a) {
 }
 
 // src/components/button/button.tsx
-import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function Button2(_a) {
   var _b = _a, { children } = _b, other = __objRest(_b, ["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();
@@ -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,
@@ -5440,5 +5493,6 @@ export {
   WalletManagerUIProvider,
   WalletProviderItem,
   badgeVariants,
+  buttonVariants,
   makeEntry
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperbridge/ui",
-  "version": "0.0.28",
+  "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;
+  }
+}