kaleido-ui 0.2.2 → 0.2.4

package/dist/web/chunk-7NS5S2PG.js

@@ -0,0 +1,126 @@
+"use client";
+import {
+  formatDisplayAmountText
+} from "./chunk-VM6AGMYO.js";
+import {
+  StatusBadge
+} from "./chunk-LPDB7EHH.js";
+import {
+  AssetIcon
+} from "./chunk-2REWXJEN.js";
+import {
+  NetworkBadge
+} from "./chunk-IV6AAVUE.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/asset-card.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AssetCard({
+  ticker,
+  name,
+  displayBalance,
+  networks = [],
+  logoUri,
+  balanceVisible = true,
+  accentColor,
+  status,
+  isYielding,
+  onClick,
+  className
+}) {
+  const shown = balanceVisible ? displayBalance : "\u2022\u2022\u2022\u2022\u2022\u2022";
+  const displayShown = balanceVisible ? formatDisplayAmountText(displayBalance) : shown;
+  const [hovered, setHovered] = useState(false);
+  const showYield = isYielding ?? ["USDB"].includes(ticker.toUpperCase());
+  const gradientStyle = accentColor ? {
+    background: `linear-gradient(135deg, var(--card) 35%, ${accentColor}${hovered ? "33" : "1f"} 78%, ${accentColor}${hovered ? "55" : "3d"} 100%)`,
+    transition: "background 0.3s ease"
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "p-4 rounded-card transition-all duration-200 shadow-card-secondary relative overflow-hidden group",
+        !accentColor && "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card",
+        onClick && "cursor-pointer hover:shadow-card-secondary hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98]",
+        className
+      ),
+      style: gradientStyle,
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-secondary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex min-w-0 items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              AssetIcon,
+              {
+                ticker,
+                logoUri,
+                size: 44,
+                className: "group-hover:scale-105 transition-transform"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "max-w-full truncate font-bold text-body leading-tight tracking-wide text-foreground",
+                    onClick && "transition-colors"
+                  ),
+                  title: name,
+                  children: name
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-nowrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ jsx(NetworkBadge, { network, size: "sm" }, network)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-[45%] flex-col items-end text-right", children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "max-w-full truncate font-bold text-subhead tabular-nums tracking-tight text-foreground transition-colors group-hover:opacity-90",
+                title: shown,
+                children: displayShown
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex min-h-6 items-center justify-end gap-1", children: [
+              status && /* @__PURE__ */ jsx(StatusBadge, { status }),
+              status && ticker && /* @__PURE__ */ jsx("span", { className: "text-tiny text-muted-foreground", children: "\xB7" }),
+              showYield && /* @__PURE__ */ jsx("div", { title: "Yield Generating Asset", className: "text-success-fg/90 flex items-center justify-center bg-success/10 rounded-full p-0.5", children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "w-3 h-3",
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" }),
+                    /* @__PURE__ */ jsx("path", { d: "M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("p", { className: cn("truncate text-muted-foreground", eyebrow), children: ticker })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  AssetCard
+};

package/dist/web/chunk-7OE6AXLY.js

@@ -0,0 +1,27 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/halo-backdrop.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function HaloBackdrop({ animated = true, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-slot": "halo-backdrop",
+      "data-animated": animated ? "true" : "false",
+      className: cn("kui-halo pointer-events-none absolute inset-0 -z-10 overflow-hidden", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "kui-halo-blob kui-halo-blob-a" }),
+        /* @__PURE__ */ jsx("div", { className: "kui-halo-blob kui-halo-blob-b" }),
+        /* @__PURE__ */ jsx("div", { className: "kui-halo-blob kui-halo-blob-c" })
+      ]
+    }
+  );
+}
+
+export {
+  HaloBackdrop
+};