@hyperbridge/ui 0.0.4 → 0.0.5

package/dist/{chunk-O7MCYCGJ.mjs → chunk-WFUCFRU6.mjs}

@@ -816,7 +816,7 @@ var SvgLoader = (props) => /* @__PURE__ */ jsxs3(
             width: 16,
             height: 16,
             fill: "#000",
-            children: /* @__PURE__ */ jsx30("path", { fill: "currentColor", d: "M0 0h16v16H0z" })
+            children: /* @__PURE__ */ jsx30("path", { fill: "transparent", d: "M0 0h16v16H0z" })
           }
         ),
         /* @__PURE__ */ jsx30(
@@ -1087,8 +1087,8 @@ var Search_default = Memo37;
 
 // src/components/icons/Server.tsx
 import { memo as memo38 } from "react";
-import { jsx as jsx38, jsxs as jsxs4 } from "react/jsx-runtime";
-var SvgServer = (props) => /* @__PURE__ */ jsxs4(
+import { jsx as jsx38 } from "react/jsx-runtime";
+var SvgServer = (props) => /* @__PURE__ */ jsx38(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1097,24 +1097,13 @@ var SvgServer = (props) => /* @__PURE__ */ jsxs4(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: [
-      /* @__PURE__ */ jsx38(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M11.665 3.208c0-.44-.25-.78-.527-1.013-.28-.236-.65-.422-1.056-.567-.817-.292-1.907-.461-3.083-.461-1.177 0-2.267.169-3.084.46-.406.146-.776.332-1.055.568-.277.234-.528.574-.528 1.013v2.625c0 .44.251.78.528 1.014.28.235.65.422 1.055.567.817.292 1.907.46 3.084.46 1.176 0 2.266-.168 3.083-.46.406-.145.776-.332 1.055-.567.277-.234.528-.574.528-1.014V3.208Zm-8.052-.122a.437.437 0 0 0-.11.122c.01.02.037.06.11.122.133.113.362.241.695.36.66.236 1.612.393 2.69.393 1.08 0 2.03-.157 2.692-.393.333-.119.561-.247.695-.36a.436.436 0 0 0 .11-.122.436.436 0 0 0-.11-.122c-.134-.113-.362-.24-.695-.36-.661-.236-1.612-.393-2.691-.393-1.08 0-2.03.157-2.691.393-.333.12-.562.247-.695.36Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ jsx38(
-        "path",
-        {
-          d: "M10.475 8.512a4.906 4.906 0 0 0 1.19-.6v2.88c0 .44-.25.78-.527 1.013-.28.236-.65.422-1.056.567-.817.292-1.907.461-3.083.461-1.177 0-2.267-.17-3.084-.46-.406-.146-.776-.332-1.055-.568-.277-.234-.528-.574-.528-1.013v-2.88c.374.266.794.459 1.19.6.974.348 2.203.53 3.477.53s2.503-.182 3.476-.53Z",
-          fill: "currentColor"
-        }
-      )
-    ]
+    children: /* @__PURE__ */ jsx38(
+      "path",
+      {
+        d: "M11.665 3.208c0-.44-.25-.78-.527-1.013-.28-.236-.65-.422-1.056-.567-.817-.292-1.907-.461-3.083-.461-1.177 0-2.267.169-3.084.46-.406.146-.776.332-1.055.568-.277.234-.528.574-.528 1.013v2.625c0 .44.251.78.528 1.014.28.235.65.422 1.055.567.817.292 1.907.46 3.084.46 1.176 0 2.266-.168 3.083-.46.406-.145.776-.332 1.055-.567.277-.234.528-.574.528-1.014V3.208Zm-8.052-.122a.437.437 0 0 0-.11.122c.01.02.037.06.11.122.133.113.362.241.695.36.66.236 1.612.393 2.69.393 1.08 0 2.03-.157 2.692-.393.333-.119.561-.247.695-.36a.436.436 0 0 0 .11-.122.436.436 0 0 0-.11-.122c-.134-.113-.362-.24-.695-.36-.661-.236-1.612-.393-2.691-.393-1.08 0-2.03.157-2.691.393-.333.12-.562.247-.695.36ZM10.475 8.512a4.906 4.906 0 0 0 1.19-.6v2.88c0 .44-.25.78-.527 1.013-.28.236-.65.422-1.056.567-.817.292-1.907.461-3.083.461-1.177 0-2.267-.17-3.084-.46-.406-.146-.776-.332-1.055-.568-.277-.234-.528-.574-.528-1.013v-2.88c.374.266.794.459 1.19.6.974.348 2.203.53 3.477.53s2.503-.182 3.476-.53Z",
+        fill: "currentColor"
+      }
+    )
   })
 );
 var Memo38 = memo38(SvgServer);
@@ -1174,8 +1163,8 @@ var Settings_default = Memo40;
 
 // src/components/icons/Shuffle.tsx
 import { memo as memo41 } from "react";
-import { jsx as jsx41, jsxs as jsxs5 } from "react/jsx-runtime";
-var SvgShuffle = (props) => /* @__PURE__ */ jsxs5(
+import { jsx as jsx41, jsxs as jsxs4 } from "react/jsx-runtime";
+var SvgShuffle = (props) => /* @__PURE__ */ jsxs4(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",

package/dist/icons/index.mjs

@@ -47,7 +47,7 @@ import {
   Wallet_default,
   XCircle_default,
   XIcon_default
-} from "../chunk-O7MCYCGJ.mjs";
+} from "../chunk-WFUCFRU6.mjs";
 export {
   Alert_default as Alert,
   ArrowBottomTop_default as ArrowBottomTop,

package/dist/index.d.mts

@@ -23,7 +23,7 @@ declare function LabelledSeperator(props: {
 }): react_jsx_runtime.JSX.Element;
 
 declare const variant_: {
-    disiplay: string;
+    display: string;
     h1: string;
     h2: string;
     h3: string;
@@ -31,6 +31,7 @@ declare const variant_: {
     h5: string;
     h6: string;
     h7: string;
+    title: string;
     body1: string;
     body2: string;
     p: string;
@@ -135,30 +136,36 @@ interface TokenInfo {
     };
 }
 interface SwapFormProps<T extends number = 25 | 50 | 100> {
-    senderAddress?: string;
-    senderBalance?: string;
-    senderAmount?: string;
-    senderUsdValue?: string | number;
-    senderToken?: TokenInfo;
-    onSenderAmountChange?: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
-    onSenderTokenSelect?: () => void;
-    receiverAddress?: string;
-    receiverAmount?: string | number;
-    receiverUsdValue?: string | number;
-    receiverToken?: TokenInfo;
-    onReceiverTokenSelect?: () => void;
-    onReceiverAddressEdit?: () => void;
-    percentagePresets?: T[];
-    activePercentage?: T | null;
-    onPercentageClick?: (percentage: T) => void;
-    onPercentageReset?: () => void;
+    sender: {
+        address: string;
+        balance: React.JSX.Element;
+        amount: string;
+        usdValue: string | number;
+        token: TokenInfo;
+        onAmountChange: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
+        onTokenSelect: () => void;
+    };
+    receiver: {
+        address: string;
+        amount: string;
+        usdValue: string | number;
+        token: TokenInfo;
+        onAmountChange?: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
+        onTokenSelect: () => void;
+        onAddressEdit: () => void;
+    };
+    percentage?: {
+        options: number[];
+        value: number | null;
+    };
+    onPercentageChange?: (percentage: number | null) => void;
     onInvert?: () => void;
     estimatedTime?: string;
     isLoading?: boolean;
     className?: string;
     error?: boolean;
 }
-declare function SwapForm<T extends number = 25 | 50 | 100>({ senderAddress, senderBalance, senderAmount, senderUsdValue, senderToken, onSenderAmountChange, onSenderTokenSelect, receiverAddress, receiverAmount, receiverUsdValue, receiverToken, onReceiverTokenSelect, onReceiverAddressEdit, percentagePresets, activePercentage, onPercentageClick, onPercentageReset, onInvert, estimatedTime, isLoading, className, error, }: SwapFormProps<T>): react_jsx_runtime.JSX.Element;
+declare function SwapForm<T extends number = 25 | 50 | 100>({ sender, receiver, percentage, onPercentageChange, onInvert, estimatedTime, isLoading, className, error, }: SwapFormProps<T>): react_jsx_runtime.JSX.Element;
 
 interface Network {
     name: string;
@@ -340,6 +347,7 @@ declare function WalletProviderItem(props: {
     onRetry?: () => void;
     onCancel?: () => void;
     onConnect?: () => void;
+    onDisconnect?: () => void;
 }): react_jsx_runtime.JSX.Element;
 declare function NetworkGroupItem(props: {
     image: {
@@ -402,7 +410,7 @@ declare function DialogFooter({ className, ...props }: React$1.ComponentProps<"d
 declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
 declare function DialogDescription({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
 
-declare function DialogMorphContent({ className, children, showCloseButton, ...props }: DialogPrimitive.DialogContentProps & {
+declare function DialogMorphContent({ className, children, showCloseButton, onInteractOutside, ...props }: DialogPrimitive.DialogContentProps & {
     showCloseButton?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
@@ -417,32 +425,6 @@ declare function EmptyState(props: {
     children?: React__default.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-type Item = {
-    network: {
-        name: string;
-        image: string;
-    };
-    wallet: {
-        image: string;
-        name: string;
-    };
-    address: string;
-    isActive?: boolean;
-};
-declare function ConnectedHeader(props: {
-    accounts: Item[];
-    onCopy?: (account: string) => void;
-    onDisconnect?: (account: Item, index: number) => void;
-    onConnect?: (networkType: "evm" | "polkadot") => void;
-    polkadotImage?: {
-        name: string;
-        src: string;
-    };
-    evmImage?: {
-        name: string;
-        src: string;
-    };
-}): react_jsx_runtime.JSX.Element;
 declare function WalletManagerUIProvider(props: {
     expand?: boolean;
     children: React__default.ReactNode;
@@ -493,7 +475,7 @@ interface ModalProps {
     title?: string;
     animationPreset?: AnimationPreset;
 }
-declare const Modal: ({ isOpen, children, onClose, className, animationPreset, }: ModalProps) => react_jsx_runtime.JSX.Element;
+declare const Modal: (props: ModalProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * Renders a Separator that shows a border when the referenced Scrollable Element is scrolled.
@@ -524,7 +506,7 @@ declare function ScrollAwareSeparator(props: React__default.ComponentProps<"div"
     scrollRef: React__default.RefObject<HTMLElement | null>;
 }): react_jsx_runtime.JSX.Element;
 
-declare function BridgeSummary(props: {
+declare function Summary(props: {
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 type SummaryEntryItem = {
@@ -545,6 +527,9 @@ declare const SummaryValues: {
         GasEntry: ({ children }: {
             children: React.ReactNode;
         }) => react_jsx_runtime.JSX.Element;
+        Rate: ({ children }: {
+            children: React.ReactNode;
+        }) => react_jsx_runtime.JSX.Element;
         SpillageTolerance: ({ children }: {
             children: React.ReactNode;
         }) => react_jsx_runtime.JSX.Element;
@@ -554,6 +539,12 @@ declare const SummaryValues: {
         ETA: ({ children }: {
             children: React.ReactNode;
         }) => react_jsx_runtime.JSX.Element;
+        RecipientAddress: ({ children }: {
+            children: React.ReactNode;
+        }) => react_jsx_runtime.JSX.Element;
+        Fee: ({ children }: {
+            children: React.ReactNode;
+        }) => react_jsx_runtime.JSX.Element;
     };
     Values: {
         Highlight: ({ children }: {
@@ -588,7 +579,7 @@ type TimelineData = {
     processingStatus: "upcoming" | "error";
 } | {
     processingStatus: "completed";
-    data: {
+    data?: {
         transactionUrl: string;
         completedIn: EstimatedTimeFormatted;
     };
@@ -596,6 +587,7 @@ type TimelineData = {
 type TimelineItemProps = Prettify<TimelineData & Level & {
     caption: string;
     secondary?: string;
+    durationMode?: "none" | "visible";
 }>;
 declare function TimelineItem(props: TimelineItemProps): react_jsx_runtime.JSX.Element;
 declare function TimelineListGroup(props: {
@@ -806,9 +798,10 @@ declare function HeaderNested(props: {
     onBack: () => void;
     hideBackButton?: boolean;
 }): react_jsx_runtime.JSX.Element;
-declare function ListSection({ children, caption, }: {
+declare function ListSection({ children, caption, contentClassName, }: {
     caption: React.ReactNode;
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    contentClassName?: string;
 }): react_jsx_runtime.JSX.Element;
 declare function CWDrawerContent({ children, ...props }: {
     children: React.ReactNode;
@@ -841,9 +834,67 @@ declare function TokenSelectionItem(props: {
     AddWalletButton: React__default.ReactNode;
 } & React__default.ComponentProps<"button">): react_jsx_runtime.JSX.Element;
 
+interface SwapTokenSelectorProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children?: React__default.ReactNode;
+    className?: string;
+}
+declare const SwapTokenSelector: ({ isOpen, onClose, children, className, }: SwapTokenSelectorProps) => react_jsx_runtime.JSX.Element;
+interface SwapTokenSelectorHeaderProps {
+    title?: string;
+    onClose?: () => void;
+    children?: React__default.ReactNode;
+    className?: string;
+}
+declare const SwapTokenSelectorHeader: ({ title, onClose, children, className, }: SwapTokenSelectorHeaderProps) => react_jsx_runtime.JSX.Element;
+interface SwapTokenSelectorSearchProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare const SwapTokenSelectorSearch: ({ children, className, }: SwapTokenSelectorSearchProps) => react_jsx_runtime.JSX.Element;
+interface SwapTokenSelectorContentProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare const SwapTokenSelectorContent: ({ children, className, }: SwapTokenSelectorContentProps) => react_jsx_runtime.JSX.Element;
+interface SwapTokenSelectorSectionProps {
+    title?: string;
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare const SwapTokenSelectorSection: ({ title, children, className, }: SwapTokenSelectorSectionProps) => react_jsx_runtime.JSX.Element;
+interface SwapTokenSelectorEmptyProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare const SwapTokenSelectorEmpty: ({ children, className, }: SwapTokenSelectorEmptyProps) => react_jsx_runtime.JSX.Element;
+interface SwapTokenItemProps {
+    token: Omit<Token, "address" | "network_group" | "amount" | "usdValue">;
+    network: Omit<Network, "group">;
+    address: React__default.ReactNode;
+    isActive?: boolean;
+    onClick?: () => void;
+    className?: string;
+    amount: string;
+    usdValue: string;
+}
+declare const SwapTokenItem: ({ token, network, address, isActive, onClick, className, amount, usdValue, }: SwapTokenItemProps) => react_jsx_runtime.JSX.Element;
+
 declare function TooltipProvider({ delayDuration, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
 declare function Tooltip({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
 declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
 
-export { AccessoryButton, type AccessoryButtonProps, AccountItem, AccountStack, type AccountStackProps, AddressInput, AddressInputFocusBehaviour, AssetList, AssetListItem, AssetValueTrend, BadgeIcon, Balance, BridgeForm, type BridgeFormProps, BridgeInput, BridgeSettings, type BridgeSettingsProps, BridgeSummary, BridgeTokenButton, Button, type ButtonProps, CWDrawerContent, ConnectedHeader, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogMorphContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerContent, EmptyState, EmptyStateConceal, EmptyStateContent, EmptyStateDescription, EmptyStateTitle, type EstimatedTimeFormatted, GradientButton, Header, 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, ReviewItem, ReviewItemAddress, ReviewItemCopyAddressButton, ScrollAwareSeparator, SearchInput, type SearchInputProps, Settings, type SettingsProps, Sheet, SheetContent, SheetTrigger, SummaryValues, SwapForm, type SwapFormProps, SwapTokenButton, 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, makeEntry };
+declare function HBDrawer({ ...props }: React$1.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
+declare function HBDrawerTrigger({ ...props }: React$1.ComponentProps<typeof Drawer$1.Trigger>): react_jsx_runtime.JSX.Element;
+declare function HBDrawerPortal({ ...props }: React$1.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime.JSX.Element;
+declare function HBDrawerClose({ ...props }: React$1.ComponentProps<typeof Drawer$1.Close>): react_jsx_runtime.JSX.Element;
+declare function HBDrawerOverlay({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Overlay>): react_jsx_runtime.JSX.Element;
+declare function HBDrawerContent({ className, children, ...props }: React$1.ComponentProps<typeof Drawer$1.Content>): react_jsx_runtime.JSX.Element;
+declare function HBDrawerHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function HBDrawerFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function HBDrawerTitle({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;
+declare function HBDrawerDescription({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Description>): react_jsx_runtime.JSX.Element;
+
+export { AccessoryButton, type AccessoryButtonProps, AccountItem, AccountStack, type AccountStackProps, AddressInput, AddressInputFocusBehaviour, AssetList, AssetListItem, AssetValueTrend, 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, EmptyState, EmptyStateConceal, EmptyStateContent, EmptyStateDescription, EmptyStateTitle, type EstimatedTimeFormatted, GradientButton, HBDrawer, HBDrawerClose, HBDrawerContent, HBDrawerDescription, HBDrawerFooter, HBDrawerHeader, HBDrawerOverlay, HBDrawerPortal, HBDrawerTitle, HBDrawerTrigger, Header, 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, 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, makeEntry };