@hyperbridge/ui 0.0.26 → 0.0.28

package/dist/{chunk-PILUO5EZ.mjs → chunk-Z3U6XEBY.mjs}

@@ -1405,10 +1405,37 @@ var SvgTrash = (props) => /* @__PURE__ */ jsx49(
 var Memo49 = memo49(SvgTrash);
 var Trash_default = Memo49;
 
-// src/components/icons/Wallet.tsx
+// src/components/icons/User.tsx
 import { memo as memo50 } from "react";
-import { jsx as jsx50 } from "react/jsx-runtime";
-var SvgWallet = (props) => /* @__PURE__ */ jsx50(
+import { jsx as jsx50, jsxs as jsxs6 } from "react/jsx-runtime";
+var SvgUser = (props) => /* @__PURE__ */ jsxs6(
+  "svg",
+  __spreadProps(__spreadValues({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 11 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {
+    children: [
+      /* @__PURE__ */ jsx50("title", { children: "User" }),
+      /* @__PURE__ */ jsx50(
+        "path",
+        {
+          d: "M5.401 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM5.401 7C2.62 7 .583 8.862.028 11.334c-.167.74.44 1.333 1.106 1.333h8.535c.666 0 1.272-.592 1.106-1.333C10.219 8.862 8.184 7 5.4 7Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  })
+);
+var Memo50 = memo50(SvgUser);
+var User_default = Memo50;
+
+// src/components/icons/Wallet.tsx
+import { memo as memo51 } from "react";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var SvgWallet = (props) => /* @__PURE__ */ jsx51(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1417,7 +1444,7 @@ var SvgWallet = (props) => /* @__PURE__ */ jsx50(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx50(
+    children: /* @__PURE__ */ jsx51(
       "path",
       {
         fillRule: "evenodd",
@@ -1428,13 +1455,13 @@ var SvgWallet = (props) => /* @__PURE__ */ jsx50(
     )
   })
 );
-var Memo50 = memo50(SvgWallet);
-var Wallet_default = Memo50;
+var Memo51 = memo51(SvgWallet);
+var Wallet_default = Memo51;
 
 // src/components/icons/XCircle.tsx
-import { memo as memo51 } from "react";
-import { jsx as jsx51 } from "react/jsx-runtime";
-var SvgXCircle = (props) => /* @__PURE__ */ jsx51(
+import { memo as memo52 } from "react";
+import { jsx as jsx52 } from "react/jsx-runtime";
+var SvgXCircle = (props) => /* @__PURE__ */ jsx52(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1443,7 +1470,7 @@ var SvgXCircle = (props) => /* @__PURE__ */ jsx51(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx51(
+    children: /* @__PURE__ */ jsx52(
       "path",
       {
         d: "M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1Zm2.948 4.054a.673.673 0 0 0-.95-.001L8.001 7.05 6.003 5.052l-.105-.086a.674.674 0 0 0-.931.931l.087.106L7.05 8 5.054 9.997a.672.672 0 0 0 .95.95L8 8.95l1.996 1.996.105.086a.672.672 0 0 0 .931-.93l-.086-.106L8.951 8l1.996-1.996a.673.673 0 0 0 .001-.95Z",
@@ -1452,13 +1479,13 @@ var SvgXCircle = (props) => /* @__PURE__ */ jsx51(
     )
   })
 );
-var Memo51 = memo51(SvgXCircle);
-var XCircle_default = Memo51;
+var Memo52 = memo52(SvgXCircle);
+var XCircle_default = Memo52;
 
 // src/components/icons/XIcon.tsx
-import { memo as memo52 } from "react";
-import { jsx as jsx52 } from "react/jsx-runtime";
-var SvgXIcon = (props) => /* @__PURE__ */ jsx52(
+import { memo as memo53 } from "react";
+import { jsx as jsx53 } from "react/jsx-runtime";
+var SvgXIcon = (props) => /* @__PURE__ */ jsx53(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1467,7 +1494,7 @@ var SvgXIcon = (props) => /* @__PURE__ */ jsx52(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx52(
+    children: /* @__PURE__ */ jsx53(
       "path",
       {
         d: "m3.334 3.334 9.333 9.333m0-9.333-9.333 9.333",
@@ -1478,8 +1505,36 @@ var SvgXIcon = (props) => /* @__PURE__ */ jsx52(
     )
   })
 );
-var Memo52 = memo52(SvgXIcon);
-var XIcon_default = Memo52;
+var Memo53 = memo53(SvgXIcon);
+var XIcon_default = Memo53;
+
+// src/components/icons/Zap.tsx
+import { memo as memo54 } from "react";
+import { jsx as jsx54, jsxs as jsxs7 } from "react/jsx-runtime";
+var SvgZap = (props) => /* @__PURE__ */ jsxs7(
+  "svg",
+  __spreadProps(__spreadValues({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {
+    children: [
+      /* @__PURE__ */ jsx54("title", { children: "Zap" }),
+      /* @__PURE__ */ jsx54(
+        "path",
+        {
+          d: "M9.333 1.57c0-.817-1.055-1.146-1.52-.473L2.116 9.36a.833.833 0 0 0 .686 1.307h3.865v3.763c0 .817 1.055 1.146 1.52.473l5.698-8.263a.833.833 0 0 0-.686-1.307H9.333V1.57Z",
+          fill: "currentColor",
+          opacity: 0.5
+        }
+      )
+    ]
+  })
+);
+var Memo54 = memo54(SvgZap);
+var Zap_default = Memo54;
 
 export {
   __spreadValues,
@@ -1534,7 +1589,9 @@ export {
   Testnet_default,
   Transfer_default,
   Trash_default,
+  User_default,
   Wallet_default,
   XCircle_default,
-  XIcon_default
+  XIcon_default,
+  Zap_default
 };

package/dist/icons/index.d.mts

@@ -2,6 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SVGProps } from 'react';
 
+declare const Memo$R: React.MemoExoticComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element>;
+
+declare const Memo$Q: React.MemoExoticComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element>;
+
 declare const Memo$P: React.MemoExoticComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element>;
 
 declare const Memo$O: React.MemoExoticComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element>;
@@ -106,4 +110,4 @@ declare const Memo$1: React.MemoExoticComponent<(props: SVGProps<SVGSVGElement>)
 
 declare const Memo: React.MemoExoticComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element>;
 
-export { Memo$P as Alert, Memo$O as ArrowBottomTop, Memo$L as ArrowRight, Memo$N as ArrowRightDownCircle, Memo$M as ArrowRightUpCircle, Memo$K as ArrowSplit, Memo$J as ArrowTopBottom, Memo$I as ArrowTriangleBottom, Memo$H as ArrowTriangleTop, Memo$G as ArrowUpRight, Memo$F as ArtifactNews, Memo$E as BrowserWindow, Memo$D as Check, Memo$C as ChevronBottomDown, Memo$B as ChevronBottomUp, Memo$A as ChevronDoubleRight, Memo$z as ChevronDownSmall, Memo$x as ChevronGrabberVertical, Memo$y as ChevronGrabberVertical1, Memo$t as Circle, Memo$w as CircleInfo, Memo$u as CirclePlaceholder, Memo$v as CirclePlaceholderDashed, Memo$s as Clock, Memo$r as Coins, Memo$q as Copy, Memo$p as Filter, Memo$o as Gas, Memo$n as History, Memo$m as Loader, Memo$l as Mainnet, Memo$k as Menu, Memo$j as Pen, Memo$i as Percent, Memo$h as Plus, Memo$g as Power, Memo$f as Refer, Memo$e as RotateCcw, Memo$d as Search, Memo$c as Server, Memo$a as Settings, Memo$b as SettingsGear, Memo$9 as Shuffle, Memo$8 as SquareArrowTopRight, Memo$7 as Star, Memo$6 as StepBack, Memo$5 as Testnet, Memo$4 as Transfer, Memo$3 as Trash, Memo$2 as Wallet, Memo$1 as XCircle, Memo as XIcon };
+export { Memo$R as Alert, Memo$Q as ArrowBottomTop, Memo$N as ArrowRight, Memo$P as ArrowRightDownCircle, Memo$O as ArrowRightUpCircle, Memo$M as ArrowSplit, Memo$L as ArrowTopBottom, Memo$K as ArrowTriangleBottom, Memo$J as ArrowTriangleTop, Memo$I as ArrowUpRight, Memo$H as ArtifactNews, Memo$G as BrowserWindow, Memo$F as Check, Memo$E as ChevronBottomDown, Memo$D as ChevronBottomUp, Memo$C as ChevronDoubleRight, Memo$B as ChevronDownSmall, Memo$z as ChevronGrabberVertical, Memo$A as ChevronGrabberVertical1, Memo$v as Circle, Memo$y as CircleInfo, Memo$w as CirclePlaceholder, Memo$x as CirclePlaceholderDashed, Memo$u as Clock, Memo$t as Coins, Memo$s as Copy, Memo$r as Filter, Memo$q as Gas, Memo$p as History, Memo$o as Loader, Memo$n as Mainnet, Memo$m as Menu, Memo$l as Pen, Memo$k as Percent, Memo$j as Plus, Memo$i as Power, Memo$h as Refer, Memo$g as RotateCcw, Memo$f as Search, Memo$e as Server, Memo$c as Settings, Memo$d as SettingsGear, Memo$b as Shuffle, Memo$a as SquareArrowTopRight, Memo$9 as Star, Memo$8 as StepBack, Memo$7 as Testnet, Memo$6 as Transfer, Memo$5 as Trash, Memo$4 as User, Memo$3 as Wallet, Memo$2 as XCircle, Memo$1 as XIcon, Memo as Zap };

package/dist/icons/index.mjs

@@ -48,10 +48,12 @@ import {
   Testnet_default,
   Transfer_default,
   Trash_default,
+  User_default,
   Wallet_default,
   XCircle_default,
-  XIcon_default
-} from "../chunk-PILUO5EZ.mjs";
+  XIcon_default,
+  Zap_default
+} from "../chunk-Z3U6XEBY.mjs";
 export {
   Alert_default as Alert,
   ArrowBottomTop_default as ArrowBottomTop,
@@ -102,7 +104,9 @@ export {
   Testnet_default as Testnet,
   Transfer_default as Transfer,
   Trash_default as Trash,
+  User_default as User,
   Wallet_default as Wallet,
   XCircle_default as XCircle,
-  XIcon_default as XIcon
+  XIcon_default as XIcon,
+  Zap_default as Zap
 };

package/dist/index.d.mts

@@ -642,6 +642,7 @@ type ItemProps = {
     from: BadgeTokenProps;
     to: BadgeTokenProps;
     amount: string;
+    size?: `${number}rem`;
 };
 declare function TxListItemProcessing(props: ItemProps & {
     eta: string;

package/dist/index.mjs

@@ -30,7 +30,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./chunk-PILUO5EZ.mjs";
+} from "./chunk-Z3U6XEBY.mjs";
 
 // src/components/atoms/search-input.tsx
 import { cva } from "class-variance-authority";
@@ -3392,7 +3392,7 @@ var TimelineItem = React13.forwardRef(function TimelineItem2(props, ref) {
               }
             ),
             /* @__PURE__ */ jsxs25("div", { className: "flex flex-col flex-1 gap-[calc(4/16rem)]", children: [
-              /* @__PURE__ */ jsx36("div", { className: "text-brand-white-500 text-[1rem] h-[1.25rem]", children: caption }),
+              /* @__PURE__ */ jsx36("div", { className: "text-brand-white-500 text-xs md:!text-base h-auto md:h-[1.25rem] truncate max-w-[150px] md:max-w-full", children: caption }),
               /* @__PURE__ */ jsx36("div", { className: "text-xs h-[1rem] text-brand-black-100", children: processingStatus === "completed" ? ((_b = props.data) == null ? void 0 : _b.transactionUrl) ? /* @__PURE__ */ jsxs25(
                 "a",
                 {
@@ -3649,6 +3649,7 @@ function ToastBox(props) {
 import { motion as motion4 } from "motion/react";
 import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 function TxListItemProcessing(props) {
+  const { size = "2rem" } = props;
   return /* @__PURE__ */ jsx38(GradientContainer, { children: /* @__PURE__ */ jsxs27("div", { className: "rounded-[1rem] bg-brand-black-350 px-[0.75rem] h-[3.75rem] flex items-center", children: [
     /* @__PURE__ */ jsx38(
       GradientLine,
@@ -3664,11 +3665,11 @@ function TxListItemProcessing(props) {
         {
           fromToken: props.from,
           toToken: props.to,
-          size: "2rem"
+          size
         }
       ),
       /* @__PURE__ */ jsxs27("div", { className: "flex flex-grow flex-col text-start", children: [
-        /* @__PURE__ */ jsx38("span", { className: "text-brand-white-500 whitespace-nowrap text-[0.875rem] h-[1.25rem]", children: props.caption }),
+        /* @__PURE__ */ jsx38("span", { className: "text-brand-white-500 whitespace-nowrap text-[0.875rem] h-[1.25rem] max-w-28 md:max-w-full truncate", children: props.caption }),
         /* @__PURE__ */ jsxs27(StatusBadge, { variant: props.status === "failed" ? "error" : "none", children: [
           "~ ",
           props.eta
@@ -3721,7 +3722,23 @@ function TxListItemProcessing(props) {
   ] }) });
 }
 var TxListItem = function TxListItem2(props) {
-  const _a = props, { caption, completedAt, mode, from, to, amount } = _a, rest = __objRest(_a, ["caption", "completedAt", "mode", "from", "to", "amount"]);
+  const _a = props, {
+    caption,
+    completedAt,
+    mode,
+    from,
+    to,
+    amount,
+    size = "2rem"
+  } = _a, rest = __objRest(_a, [
+    "caption",
+    "completedAt",
+    "mode",
+    "from",
+    "to",
+    "amount",
+    "size"
+  ]);
   return /* @__PURE__ */ jsx38(
     "button",
     __spreadProps(__spreadValues({}, rest), {
@@ -3730,10 +3747,10 @@ var TxListItem = function TxListItem2(props) {
         "apperance-none rounded-[1rem] bg-brand-black-350 px-[0.75rem] h-[3.75rem] flex items-center",
         props.className
       ),
-      children: /* @__PURE__ */ jsxs27("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
-        /* @__PURE__ */ jsx38(TokenTransferPair, { fromToken: from, toToken: to, size: "2rem" }),
+      children: /* @__PURE__ */ jsxs27("div", { className: "flex justify-between gap-4 flex-1 z-20 text-brand-black-100 font-medium", children: [
+        /* @__PURE__ */ jsx38(TokenTransferPair, { fromToken: from, toToken: to, size }),
         /* @__PURE__ */ jsxs27("div", { className: "flex flex-grow flex-col text-start whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx38("span", { className: "text-brand-white-500 text-[0.875rem] h-[1.25rem]", children: caption }),
+          /* @__PURE__ */ jsx38("span", { className: "text-brand-white-500 text-[0.875rem] h-[1.25rem] max-w-28 md:max-w-full truncate", children: caption }),
           /* @__PURE__ */ jsx38(StatusBadge, { variant: mode === "rollback" ? "refunded" : "success" })
         ] }),
         /* @__PURE__ */ jsxs27("div", { className: "shrink-0 flex flex-col text-end", children: [
@@ -3748,25 +3765,18 @@ function StatusBadge({
   variant,
   children
 }) {
-  return /* @__PURE__ */ jsxs27("span", { className: "text-xs h-[1rem] flex items-center gap-[0.125rem]", children: [
+  return /* @__PURE__ */ jsxs27("span", { className: "text-[0.625rem] md:text-xs h-[1rem] flex items-center gap-[0.125rem]", children: [
     variant === "success" ? /* @__PURE__ */ jsxs27("span", { className: "text-brand-success-400 flex items-center gap-[0.125rem]", children: [
-      /* @__PURE__ */ jsx38(Check_default, { width: "0.75rem", height: "0.75rem" }),
+      /* @__PURE__ */ jsx38(Check_default, { className: "size-2 md:size-3" }),
       " ",
       /* @__PURE__ */ jsx38("span", { children: "Success" })
     ] }) : null,
     variant === "refunded" ? /* @__PURE__ */ jsxs27(Fragment9, { children: [
-      /* @__PURE__ */ jsx38(StepBack_default, { strokeWidth: 2, width: "0.75rem", height: "0.75rem" }),
+      /* @__PURE__ */ jsx38(StepBack_default, { strokeWidth: 2, className: "size-2 md:size-3" }),
       /* @__PURE__ */ jsx38("span", { children: "Refunded" })
     ] }) : null,
     variant === "error" ? /* @__PURE__ */ jsxs27(Fragment9, { children: [
-      /* @__PURE__ */ jsx38(
-        Alert_default,
-        {
-          width: "0.75rem",
-          height: "0.75rem",
-          className: "text-brand-danger-500"
-        }
-      ),
+      /* @__PURE__ */ jsx38(Alert_default, { className: "size-2 md:size-3 text-brand-danger-500" }),
       /* @__PURE__ */ jsx38("span", { className: "text-brand-danger-500", children: "Order expired" })
     ] }) : null,
     variant === "none" ? children : null
@@ -4830,7 +4840,7 @@ function CWDrawerContent(_a) {
   ]);
   const isMobile = useIsMobile();
   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", children }) });
+    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(
     SheetContent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperbridge/ui",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "sideEffects": false,
   "license": "MIT",
   "private": false,
@@ -33,8 +33,8 @@
     "typescript": "5.8.3",
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
-    "@repo/typescript-config": "0.0.0",
-    "@repo/eslint-config": "0.0.0"
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",