kaleido-ui 0.1.2 → 0.1.3

package/dist/web/index.cjs

@@ -101,28 +101,30 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:brightness-115",
+        destructive: "bg-destructive text-destructive-foreground hover:brightness-115",
+        outline: "border border-primary/50 bg-transparent text-[#31ff8b] hover:bg-primary/5 hover:border-primary hover:brightness-115",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-foreground",
+        ghost: "text-[#31ff8b] hover:brightness-115 hover:bg-transparent hover:[&_span]:brightness-115",
         link: "text-primary underline-offset-4 hover:underline",
         glow: "bg-primary text-primary-foreground shadow-md",
-        surface: "bg-card text-card-foreground border border-border hover:bg-accent",
-        cta: "w-full bg-primary hover:bg-primary/90 text-primary-foreground font-bold rounded-2xl shadow-md disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
+        surface: "bg-primary/15 text-[#31ff8b] hover:bg-primary/25",
+        cta: "w-full bg-primary text-primary-foreground font-bold rounded-2xl shadow-md hover:brightness-115 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
         "cta-gradient": "w-full bg-gradient-to-r from-primary to-primary/80 text-primary-foreground font-extrabold rounded-2xl shadow-lg hover:opacity-90 hover:-translate-y-0.5 active:translate-y-0 active:opacity-100 disabled:opacity-40 disabled:shadow-none disabled:cursor-not-allowed disabled:bg-accent disabled:text-muted-foreground",
-        "danger-subtle": "w-full bg-red-500/10 border border-red-500/20 text-red-400 font-bold rounded-xl hover:bg-red-500/20"
+        "danger-subtle": "bg-red-500/10 border border-red-500/20 text-destructive font-bold rounded-xl hover:brightness-115",
+        hyperlink: "group text-muted-foreground underline underline-offset-2 hover:text-white hover:decoration-[#31ff8b] hover:[&_.icon]:text-[#31ff8b] bg-transparent font-normal"
       },
       size: {
         default: "h-11 px-5 py-2",
+        xs: "h-7 rounded-lg px-2 text-xs",
         sm: "h-9 rounded-lg px-3 text-xs",
         lg: "h-14 rounded-xl px-8 text-base font-bold",
         xl: "h-16 rounded-2xl px-10 text-lg font-bold",
         cta: "h-14 py-4 px-6 text-lg",
         "cta-lg": "h-[60px] py-5 px-6 text-lg",
-        icon: "h-10 w-10 rounded-full",
-        "icon-lg": "h-12 w-12 rounded-full",
-        "icon-xl": "h-14 w-14 rounded-full"
+        icon: "h-6 w-6 rounded-full",
+        "icon-lg": "h-9 w-9 rounded-full",
+        "icon-xl": "h-12 w-12 rounded-full"
       }
     },
     defaultVariants: {
@@ -155,7 +157,7 @@ var Card = React2.forwardRef(
     {
       ref,
       className: cn(
-        "rounded-2xl border border-border/50 bg-card text-card-foreground shadow-sm transition-colors",
+        "rounded-2xl bg-card text-card-foreground shadow-sm transition-colors",
         className
       ),
       ...props
@@ -201,7 +203,7 @@ var Input = React3.forwardRef(
       {
         type,
         className: cn(
-          "flex h-12 w-full rounded-xl border border-border bg-card px-4 py-3 text-base ring-offset-background transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 text-base transition-all border border-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/6",
           className
         ),
         ref,
@@ -335,13 +337,13 @@ var DialogContent = React4.forwardRef(({ className, children, ...props }, ref) =
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "close", size: "sm" }),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Close" })
         ] })
@@ -383,7 +385,7 @@ var TabsList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-card p-1.5 text-muted-foreground border border-border/50",
+      "inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-card p-1.5 text-muted-foreground",
       className
     ),
     ...props
@@ -396,8 +398,8 @@ var TabsTrigger = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ref,
     className: cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 text-sm font-semibold ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      "hover:text-foreground hover:bg-accent",
-      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+      "text-white hover:text-primary hover:bg-transparent",
+      "data-[state=active]:bg-primary/15 data-[state=active]:text-[#31ff8b] data-[state=active]:hover:bg-primary/25",
       className
     ),
     ...props
@@ -454,12 +456,12 @@ var ToastViewport = React7.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 var toastVariants = (0, import_class_variance_authority3.cva)(
-  "group pointer-events-auto relative flex w-full max-w-md items-center justify-between space-x-3 overflow-hidden rounded-xl border backdrop-blur-xl p-4 pr-10 shadow-[0_0_30px_rgba(0,0,0,0.3)] transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-bottom-full data-[state=open]:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full max-w-md items-center justify-between space-x-3 overflow-hidden rounded-xl backdrop-blur-xl p-4 shadow-[0_0_30px_rgba(0,0,0,0.3)] transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-bottom-full data-[state=open]:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
-        default: "border-border bg-card/95 text-foreground",
-        destructive: "border-red-500/20 bg-red-500/10 text-red-400"
+        default: "bg-card text-foreground brightness-125",
+        destructive: "bg-red-500/20 text-red-400"
       }
     },
     defaultVariants: {
@@ -483,7 +485,7 @@ var ToastAction = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     className: cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-lg border border-primary/50 bg-transparent px-3 text-xs font-semibold text-[#31ff8b] transition-all hover:bg-primary/5 hover:border-primary hover:brightness-115 focus:outline-none disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-red-500/30 group-[.destructive]:text-red-400 group-[.destructive]:hover:border-red-500 group-[.destructive]:hover:bg-red-500/10",
       className
     ),
     ...props
@@ -495,7 +497,7 @@ var ToastClose = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "absolute right-2 top-2 rounded-full p-1 text-muted-foreground opacity-100 transition-all hover:text-foreground hover:bg-accent focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:hover:bg-red-500/20 group-[.destructive]:focus:ring-red-400",
+      "p-1.5 text-muted-foreground opacity-100 transition-all hover:text-white focus:opacity-100 focus:outline-none group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50",
       className
     ),
     "toast-close": "",
@@ -642,7 +644,7 @@ function ToastWithProgress({ id, title, description, action, duration = 4e3, var
     if (variant === "destructive") {
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "error", size: "md", className: "text-red-400" });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "check_circle", size: "md", className: "text-foreground" });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "check_circle", size: "md", className: "text-primary" });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Toast, { ...props, variant, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
@@ -652,8 +654,10 @@ function ToastWithProgress({ id, title, description, action, duration = 4e3, var
         description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ToastDescription, { children: description })
       ] })
     ] }),
-    action,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ToastClose, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
+      action,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ToastClose, {})
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-white/10 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
@@ -729,7 +733,7 @@ function StatusBadge({ status, className }) {
     "div",
     {
       className: cn(
-        "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border font-medium text-xs",
+        "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full border font-medium text-xs",
         bg,
         border,
         color,
@@ -754,65 +758,65 @@ var networkConfig = {
     iconSuffix: "bitcoin/bitcoin-logo.svg"
   },
   LN: {
-    color: "text-purple-400",
-    bg: "bg-purple-500/10 backdrop-blur-md",
-    border: "border-purple-500/20",
+    color: "text-network-lightning",
+    bg: "bg-network-lightning/10 backdrop-blur-md",
+    border: "border-network-lightning/20",
     label: "LN",
     iconSuffix: "lightning/lightning.svg"
   },
   RGB20: {
-    color: "text-network-rgb",
-    bg: "bg-network-rgb/10 backdrop-blur-md",
-    border: "border-network-rgb/20",
+    color: "text-destructive",
+    bg: "bg-red-500/20 backdrop-blur-md",
+    border: "border-red-500/20",
     label: "RGB",
     iconSuffix: "rgb/rgb-logo.svg"
   },
   RGB21: {
-    color: "text-network-rgb",
-    bg: "bg-network-rgb/10 backdrop-blur-md",
-    border: "border-network-rgb/20",
+    color: "text-destructive",
+    bg: "bg-red-500/20 backdrop-blur-md",
+    border: "border-red-500/20",
     label: "RGB21",
     iconSuffix: "rgb/rgb-logo.svg"
   },
   "RGB-L1": {
-    color: "text-network-rgb",
-    bg: "bg-network-rgb/10 backdrop-blur-md",
-    border: "border-network-rgb/20",
+    color: "text-destructive",
+    bg: "bg-red-500/20 backdrop-blur-md",
+    border: "border-red-500/20",
     label: "RGB L1",
     iconSuffix: "rgb/rgb-logo.svg"
   },
   "RGB-LN": {
-    color: "text-network-rgb",
-    bg: "bg-network-rgb/10 backdrop-blur-md",
-    border: "border-network-rgb/20",
+    color: "text-destructive",
+    bg: "bg-red-500/20 backdrop-blur-md",
+    border: "border-red-500/20",
     label: "RGB LN",
     iconSuffix: "rgb/rgb-logo.svg"
   },
   Spark: {
-    color: "text-network-spark",
-    bg: "bg-network-spark/10 backdrop-blur-md",
-    border: "border-network-spark/20",
+    color: "text-black dark:text-white",
+    bg: "bg-black/10 dark:bg-white/10 backdrop-blur-md",
+    border: "border-black/20 dark:border-white/20",
     label: "Spark",
     iconSuffix: "spark/Asterisk/Spark Asterisk White.svg"
   },
   Arkade: {
-    color: "text-network-arkade",
-    bg: "bg-network-arkade/10 backdrop-blur-md",
-    border: "border-network-arkade/20",
+    color: "text-violet-400",
+    bg: "bg-violet-500/15 backdrop-blur-md",
+    border: "border-violet-500/20",
     label: "Arkade",
     iconSuffix: "arkade/arkade-icon.svg"
   }
 };
-function NetworkBadge({ network, iconBasePath = "/icons", className }) {
-  const { color, bg, border, label, iconSuffix } = networkConfig[network];
+function NetworkBadge({ network, iconBasePath = "/icons", iconOnly = false, className }) {
+  const { color, bg, label, iconSuffix } = networkConfig[network];
   const icon = `${iconBasePath}/${iconSuffix}`;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "span",
     {
       className: cn(
-        "text-xxs px-2 py-0.5 rounded-full font-bold border shadow-inner flex items-center justify-center gap-1 w-max transition-all",
+        "text-xs rounded-full font-bold flex items-center justify-center w-max",
+        iconOnly ? "p-1.5" : "px-2.5 py-1 gap-1",
         bg,
-        border,
         color,
         className
       ),
@@ -822,10 +826,10 @@ function NetworkBadge({ network, iconBasePath = "/icons", className }) {
           {
             src: icon,
             alt: network,
-            className: cn("size-3 object-contain", network === "Spark" && "opacity-80")
+            className: cn(iconOnly ? "size-4" : "size-3.5", "object-contain", network === "Spark" && "brightness-0 dark:brightness-0 dark:invert")
           }
         ),
-        label
+        !iconOnly && label
       ]
     }
   );
@@ -950,6 +954,7 @@ function AssetIcon({ ticker, logoUri, cdnBaseUrl, size = 40, className }) {
 }
 
 // src/web/components/asset-card.tsx
+var import_react4 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function AssetCard({
   ticker,
@@ -958,19 +963,26 @@ function AssetCard({
   networks = [],
   logoUri,
   balanceVisible = true,
+  accentColor,
   onClick,
   className
 }) {
   const shown = balanceVisible ? displayBalance : "\u2022\u2022\u2022\u2022\u2022\u2022";
+  const [hovered, setHovered] = (0, import_react4.useState)(false);
+  const gradientStyle = accentColor ? { background: `linear-gradient(135deg, var(--card) 30%, ${accentColor}${hovered ? "77" : "55"} 75%, ${accentColor}${hovered ? "dd" : "b3"} 100%)`, transition: "background 0.3s ease" } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: cn(
-        "p-4 rounded-card bg-background/40 backdrop-blur-xl border border-border transition-all shadow-sm relative overflow-hidden group",
-        onClick && "cursor-pointer hover:border-primary/40 active:scale-[0.98]",
+        "p-4 rounded-card backdrop-blur-xl transition-all shadow-sm relative overflow-hidden group",
+        !accentColor && "bg-card",
+        onClick && "cursor-pointer hover:brightness-110 active:scale-[0.98]",
         className
       ),
+      style: gradientStyle,
       onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between relative z-10", children: [
@@ -990,7 +1002,7 @@ function AssetCard({
                 {
                   className: cn(
                     "font-bold text-base leading-tight tracking-wide text-foreground",
-                    onClick && "group-hover:text-primary transition-colors"
+                    onClick && "transition-colors"
                   ),
                   children: name
                 }
@@ -999,7 +1011,7 @@ function AssetCard({
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-right", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "font-bold text-base tracking-tight text-foreground group-hover:opacity-90 transition-colors", children: shown }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "font-bold text-lg tracking-tight text-foreground group-hover:opacity-90 transition-colors", children: shown }),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-tiny text-muted-foreground font-medium tracking-wide uppercase mt-0.5", children: ticker })
           ] })
         ] })
@@ -1021,12 +1033,34 @@ function TransactionCard({
 }) {
   const isInbound = direction === "inbound";
   const formatDate = (ts) => new Date(ts * 1e3).toLocaleDateString();
+  const statusStyle = {
+    success: { base: "bg-primary/5", hover: "hover:bg-primary/10" },
+    completed: { base: "bg-primary/5", hover: "hover:bg-primary/10" },
+    pending: { base: "bg-yellow-500/10", hover: "hover:bg-yellow-500/15" },
+    failed: { base: "bg-red-500/10", hover: "hover:bg-red-500/15" },
+    error: { base: "bg-red-500/10", hover: "hover:bg-red-500/15" }
+  }[status] ?? { base: "bg-background/40", hover: "hover:bg-white/5" };
+  const iconStyle = {
+    success: "bg-primary/20 text-primary",
+    completed: "bg-primary/20 text-primary",
+    pending: "bg-yellow-500/20 text-yellow-500",
+    failed: "bg-red-500/20 text-red-500",
+    error: "bg-red-500/20 text-red-500"
+  }[status] ?? "bg-accent text-muted-foreground";
+  const textColor = {
+    success: "text-primary",
+    completed: "text-primary",
+    pending: "text-yellow-500",
+    failed: "text-red-500",
+    error: "text-red-500"
+  }[status] ?? "text-foreground";
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       className: cn(
-        "p-4 rounded-card bg-background/40 backdrop-blur-xl border border-border flex items-center justify-between transition-all shadow-sm relative overflow-hidden group",
-        onClick && "cursor-pointer hover:border-primary/40 active:scale-[0.98]",
+        "p-4 rounded-card backdrop-blur-xl flex items-center justify-between transition-all shadow-sm relative overflow-hidden group",
+        statusStyle.base,
+        onClick && `cursor-pointer active:scale-[0.98] ${statusStyle.hover}`,
         className
       ),
       onClick,
@@ -1038,24 +1072,15 @@ function TransactionCard({
             {
               className: cn(
                 "size-11 rounded-full flex items-center justify-center shadow-inner group-hover:scale-105 transition-transform",
-                isInbound ? "bg-primary/20 text-primary border border-primary/20" : "bg-accent text-muted-foreground border border-border"
+                iconStyle
               ),
               children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: isInbound ? "arrow_downward" : "arrow_outward" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "span",
-              {
-                className: cn(
-                  "font-bold text-sm text-foreground tracking-wide",
-                  onClick && "group-hover:text-primary transition-colors"
-                ),
-                children: isInbound ? "Received" : "Sent"
-              }
-            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-bold text-sm tracking-wide text-foreground", children: isInbound ? "Received" : "Sent" }),
             /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StatusBadge, { status, className: "text-xxs px-1.5 py-0.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StatusBadge, { status }),
               /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-tiny text-muted-foreground font-medium tracking-wide", children: formatDate(timestamp) })
             ] })
           ] })
@@ -1065,8 +1090,8 @@ function TransactionCard({
             "p",
             {
               className: cn(
-                "font-bold text-base tracking-tight group-hover:opacity-90 transition-opacity",
-                isInbound ? "text-primary" : "text-foreground"
+                "font-bold text-lg tracking-tight group-hover:opacity-90 transition-opacity",
+                textColor
               ),
               children: [
                 isInbound ? "+" : "-",
@@ -1109,15 +1134,15 @@ function SettingItem({
   onClick,
   showChevron = true,
   className,
-  iconColor = "text-primary"
+  iconColor = "text-[#31ff8b]"
 }) {
   const isClickable = !!onClick;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       className: cn(
-        "p-5 rounded-2xl bg-card border border-border transition-all duration-200",
-        isClickable && "cursor-pointer hover:bg-accent active:scale-[0.98]",
+        "p-5 rounded-2xl bg-card transition-all duration-200 group",
+        isClickable && "cursor-pointer active:scale-[0.98]",
         className
       ),
       onClick,
@@ -1127,7 +1152,7 @@ function SettingItem({
             "div",
             {
               className: cn(
-                "flex-shrink-0 size-10 rounded-xl flex items-center justify-center bg-muted border border-border",
+                "flex-shrink-0 size-10 rounded-xl flex items-center justify-center bg-primary/15 group-hover:bg-primary/25 group-hover:scale-105 transition-all",
                 iconColor
               ),
               children: iconSrc ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { src: iconSrc, alt: iconAlt ?? title, className: "size-5 object-contain" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: icon })
@@ -1140,7 +1165,7 @@ function SettingItem({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
           value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-muted-foreground font-mono", children: value }),
-          showChevron && isClickable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "material-symbols-outlined text-[16px] text-muted-foreground", children: "chevron_right" })
+          showChevron && isClickable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "material-symbols-outlined text-[16px] text-muted-foreground group-hover:scale-110 group-hover:text-white transition-all", children: "chevron_right" })
         ] })
       ] })
     }
@@ -1162,39 +1187,23 @@ function SectionLabel({ children, className }) {
 // src/web/components/alert-banner.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var variantStyles = {
-  error: {
-    container: "bg-red-500/10 border-red-500/20",
-    icon: "text-red-400",
-    iconName: "error"
-  },
-  warning: {
-    container: "bg-amber-500/10 border-amber-500/20",
-    icon: "text-amber-400",
-    iconName: "warning"
-  },
-  info: {
-    container: "bg-blue-500/10 border-blue-500/20",
-    icon: "text-blue-400",
-    iconName: "info"
-  },
-  success: {
-    container: "bg-primary/10 border-primary/20",
-    icon: "text-primary",
-    iconName: "check_circle"
-  }
+  error: { container: "bg-red-900/40", icon: "text-red-500", iconName: "error" },
+  warning: { container: "bg-yellow-900/40", icon: "text-yellow-400", iconName: "warning" },
+  info: { container: "bg-blue-900/40", icon: "text-blue-300", iconName: "info" },
+  success: { container: "bg-primary/8", icon: "text-primary/90", iconName: "check_circle" }
 };
 function AlertBanner({ variant = "info", icon, children, className }) {
   const styles = variantStyles[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("rounded-xl border p-3 flex items-start gap-2", styles.container, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: icon ?? styles.iconName, size: "md", className: cn("shrink-0 mt-0.5", styles.icon) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("rounded-xl p-3 flex items-center gap-2", styles.container, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: icon ?? styles.iconName, size: "md", className: cn("shrink-0", styles.icon) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn("text-sm", styles.icon), children })
   ] });
 }
 
 // src/web/components/error-boundary.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var ErrorBoundary = class extends import_react4.Component {
+var ErrorBoundary = class extends import_react5.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };

package/dist/web/index.d.cts

@@ -12,8 +12,8 @@ import * as ToastPrimitives from '@radix-ui/react-toast';
 declare function cn(...inputs: ClassValue[]): string;
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "glow" | "surface" | "cta" | "cta-gradient" | "danger-subtle" | null | undefined;
-    size?: "default" | "cta" | "sm" | "lg" | "xl" | "cta-lg" | "icon" | "icon-lg" | "icon-xl" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "glow" | "surface" | "cta" | "cta-gradient" | "danger-subtle" | "hyperlink" | null | undefined;
+    size?: "default" | "cta" | "xs" | "sm" | "lg" | "xl" | "cta-lg" | "icon" | "icon-lg" | "icon-xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -148,9 +148,11 @@ interface NetworkBadgeProps {
     network: NetworkType;
     /** Override the icon path (consumer provides asset path) */
     iconBasePath?: string;
+    /** Show only the icon, no label */
+    iconOnly?: boolean;
     className?: string;
 }
-declare function NetworkBadge({ network, iconBasePath, className }: NetworkBadgeProps): react_jsx_runtime.JSX.Element;
+declare function NetworkBadge({ network, iconBasePath, iconOnly, className }: NetworkBadgeProps): react_jsx_runtime.JSX.Element;
 
 interface AssetIconProps {
     ticker: string;
@@ -179,10 +181,12 @@ interface AssetCardProps {
     logoUri?: string;
     /** Whether balance should be masked */
     balanceVisible?: boolean;
+    /** Accent color hex for the card gradient (e.g. "#F7931A") */
+    accentColor?: string;
     onClick?: () => void;
     className?: string;
 }
-declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
+declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
 
 interface TransactionCardProps {
     /** Direction of the transaction */
@@ -231,23 +235,23 @@ declare function SectionLabel({ children, className }: SectionLabelProps): react
 
 declare const variantStyles: {
     readonly error: {
-        readonly container: "bg-red-500/10 border-red-500/20";
-        readonly icon: "text-red-400";
+        readonly container: "bg-red-900/40";
+        readonly icon: "text-red-500";
         readonly iconName: "error";
     };
     readonly warning: {
-        readonly container: "bg-amber-500/10 border-amber-500/20";
-        readonly icon: "text-amber-400";
+        readonly container: "bg-yellow-900/40";
+        readonly icon: "text-yellow-400";
         readonly iconName: "warning";
     };
     readonly info: {
-        readonly container: "bg-blue-500/10 border-blue-500/20";
-        readonly icon: "text-blue-400";
+        readonly container: "bg-blue-900/40";
+        readonly icon: "text-blue-300";
         readonly iconName: "info";
     };
     readonly success: {
-        readonly container: "bg-primary/10 border-primary/20";
-        readonly icon: "text-primary";
+        readonly container: "bg-primary/8";
+        readonly icon: "text-primary/90";
         readonly iconName: "check_circle";
     };
 };

package/dist/web/index.d.ts

@@ -12,8 +12,8 @@ import * as ToastPrimitives from '@radix-ui/react-toast';
 declare function cn(...inputs: ClassValue[]): string;
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "glow" | "surface" | "cta" | "cta-gradient" | "danger-subtle" | null | undefined;
-    size?: "default" | "cta" | "sm" | "lg" | "xl" | "cta-lg" | "icon" | "icon-lg" | "icon-xl" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "glow" | "surface" | "cta" | "cta-gradient" | "danger-subtle" | "hyperlink" | null | undefined;
+    size?: "default" | "cta" | "xs" | "sm" | "lg" | "xl" | "cta-lg" | "icon" | "icon-lg" | "icon-xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -148,9 +148,11 @@ interface NetworkBadgeProps {
     network: NetworkType;
     /** Override the icon path (consumer provides asset path) */
     iconBasePath?: string;
+    /** Show only the icon, no label */
+    iconOnly?: boolean;
     className?: string;
 }
-declare function NetworkBadge({ network, iconBasePath, className }: NetworkBadgeProps): react_jsx_runtime.JSX.Element;
+declare function NetworkBadge({ network, iconBasePath, iconOnly, className }: NetworkBadgeProps): react_jsx_runtime.JSX.Element;
 
 interface AssetIconProps {
     ticker: string;
@@ -179,10 +181,12 @@ interface AssetCardProps {
     logoUri?: string;
     /** Whether balance should be masked */
     balanceVisible?: boolean;
+    /** Accent color hex for the card gradient (e.g. "#F7931A") */
+    accentColor?: string;
     onClick?: () => void;
     className?: string;
 }
-declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
+declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
 
 interface TransactionCardProps {
     /** Direction of the transaction */
@@ -231,23 +235,23 @@ declare function SectionLabel({ children, className }: SectionLabelProps): react
 
 declare const variantStyles: {
     readonly error: {
-        readonly container: "bg-red-500/10 border-red-500/20";
-        readonly icon: "text-red-400";
+        readonly container: "bg-red-900/40";
+        readonly icon: "text-red-500";
         readonly iconName: "error";
     };
     readonly warning: {
-        readonly container: "bg-amber-500/10 border-amber-500/20";
-        readonly icon: "text-amber-400";
+        readonly container: "bg-yellow-900/40";
+        readonly icon: "text-yellow-400";
         readonly iconName: "warning";
     };
     readonly info: {
-        readonly container: "bg-blue-500/10 border-blue-500/20";
-        readonly icon: "text-blue-400";
+        readonly container: "bg-blue-900/40";
+        readonly icon: "text-blue-300";
         readonly iconName: "info";
     };
     readonly success: {
-        readonly container: "bg-primary/10 border-primary/20";
-        readonly icon: "text-primary";
+        readonly container: "bg-primary/8";
+        readonly icon: "text-primary/90";
         readonly iconName: "check_circle";
     };
 };