@hyperbridge/ui 0.0.38 → 0.0.40

package/dist/index.d.mts

@@ -445,8 +445,9 @@ declare function SwapReviewRoot(props: {
 declare function SwapReviewSeperator(props: {
     children: React__default.ReactNode;
 }): react_jsx_runtime.JSX.Element;
+type SwapSeperatorMode = "idle" | "processing" | "complete" | "refunding" | "refunded" | "expired" | "error";
 declare function SwapReviewSeperatorStatus(props: {
-    mode: "idle" | "processing" | "complete";
+    mode: SwapSeperatorMode;
 }): react_jsx_runtime.JSX.Element;
 
 declare function Dialog({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;

package/dist/index.mjs

@@ -625,7 +625,7 @@ var NumericInput = React2.forwardRef(
         autoComplete,
         maxLength,
         className: cn(
-          "w-[269px] border-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-[48px] leading-[1.2] h-[58px] p-0 text-white placeholder:text-brand-black-100 disabled:opacity-50 bg-transparent outline-none",
+          "w-full border-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-[48px] leading-[1.2] h-[58px] p-0 text-white placeholder:text-brand-black-100 disabled:opacity-50 bg-transparent outline-none",
           className
         )
       }
@@ -3118,7 +3118,7 @@ var ReviewItemCopyAddressButton = React11.forwardRef((props, ref) => {
 });
 
 // src/components/molecules/swap-review-item.tsx
-import { Loader2Icon } from "lucide-react";
+import { CircleAlert, Loader2Icon } from "lucide-react";
 import React12 from "react";
 import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 function SwapReviewItem(props) {
@@ -3223,47 +3223,50 @@ function SwapReviewSeperator(props) {
 }
 function SwapReviewSeperatorStatus(props) {
   const { mode } = props;
-  const isLoading = mode === "processing";
-  const isIdle = mode === "idle";
+  const config = {
+    idle: { label: "Swapped", tone: "default", icon: "none" },
+    processing: { label: "Swapping", tone: "default", icon: "spinner" },
+    complete: { label: "Swapped", tone: "success", icon: "check" },
+    refunding: { label: "Refunding", tone: "default", icon: "spinner" },
+    refunded: { label: "Refunded", tone: "success", icon: "check" },
+    expired: { label: "Order expired", tone: "warning", icon: "alert" },
+    error: { label: "Failed", tone: "error", icon: "alert" }
+  };
+  const state = config[mode];
+  const hasIcon = state.icon !== "none";
   return /* @__PURE__ */ jsxs22(
     "span",
     {
       className: cn(
-        "bg-[#1E2227] z-30 transition-all relative duration-[400ms] ease-fluid flex rounded-full py-1.5 px-2.5 items-center overflow-hidden",
-        {
-          "pr-6": !isIdle
-        }
+        "bg-[#1E2227] z-30 relative flex items-center overflow-hidden rounded-full px-2.5 py-1.5 transition-all duration-[400ms] ease-fluid",
+        hasIcon && "pr-6",
+        state.tone === "warning" && "bg-brand-warning-500/15",
+        state.tone === "error" && "bg-brand-danger-500/15"
       ),
       children: [
         /* @__PURE__ */ jsx32(
           "span",
           {
-            className: cn("text-xs text-brand-black-100", {
-              "text-white": mode === "complete"
-            }),
-            children: mode === "processing" ? "Swapping" : "Swapped"
+            className: cn(
+              "text-xs",
+              state.tone === "success" && "text-white",
+              state.tone === "warning" && "text-brand-warning-500",
+              state.tone === "error" && "text-brand-danger-500",
+              (state.tone === "default" || mode === "idle") && "text-brand-black-100"
+            ),
+            children: state.label
           }
         ),
-        /* @__PURE__ */ jsx32("span", { role: "presentation", className: "absolute end-2.5", children: /* @__PURE__ */ jsxs22("span", { className: "text-[0.65625rem] size-[1em] flex items-center justify-center *:absolute *:left-0 *:top-0 relative", children: [
-          /* @__PURE__ */ jsx32(
-            Loader2Icon,
+        hasIcon && /* @__PURE__ */ jsx32("span", { role: "presentation", className: "absolute end-2.5", children: /* @__PURE__ */ jsxs22("span", { className: "relative flex size-[1em] items-center justify-center text-[0.65625rem]", children: [
+          state.icon === "spinner" && /* @__PURE__ */ jsx32(Loader2Icon, { className: "size-[1em] animate-spin" }),
+          state.icon === "check" && /* @__PURE__ */ jsx32(Check_default, { className: "size-[1em] text-brand-success-400" }),
+          state.icon === "alert" && /* @__PURE__ */ jsx32(
+            CircleAlert,
             {
               className: cn(
-                "transition-all ease-fluid opacity-0 delay-0 duration-[400ms] animate-spin size-[1em]",
-                {
-                  "opacity-100 delay-200": isLoading
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx32(
-            Check_default,
-            {
-              className: cn(
-                "text-brand-success-400 opacity-0 transition-default -rotate-45 transform",
-                {
-                  "opacity-100 rotate-0": mode === "complete"
-                }
+                "size-[1em]",
+                state.tone === "warning" && "text-brand-warning-500",
+                state.tone === "error" && "text-brand-danger-500"
               )
             }
           )

package/package.json

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