@hyperbridge/ui 0.0.27 → 0.0.28

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

@@ -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.27",
+  "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",