kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-RULT57JR.js

@@ -0,0 +1,85 @@
+"use client";
+import {
+  AssetCard
+} from "./chunk-4BTXTIE6.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/wallet-asset-list.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function AssetSkeleton({ index }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center justify-between rounded-card bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-3 shadow-card animate-pulse",
+      style: { animationDelay: `${index * 100}ms` },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-8 rounded-full bg-secondary/20" }),
+            /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 -right-1 size-icon-md rounded-full bg-secondary/15" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-3.5 w-20 rounded bg-foreground/10" }),
+            /* @__PURE__ */ jsx("div", { className: "h-2.5 w-10 rounded bg-foreground/5" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-3.5 w-16 rounded bg-foreground/10" }),
+          /* @__PURE__ */ jsx("div", { className: "h-2.5 w-8 rounded bg-foreground/5" })
+        ] })
+      ]
+    }
+  );
+}
+function EmptyState({ state }) {
+  return /* @__PURE__ */ jsxs("div", { className: "py-8 text-center", children: [
+    state.icon && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-3 flex size-12 items-center justify-center rounded-card bg-secondary/15 text-secondary-content shadow-raised", children: state.icon }),
+    state.title && /* @__PURE__ */ jsx("p", { className: "mb-1 text-caption font-medium text-muted-foreground", children: state.title }),
+    state.description && /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground/70", children: state.description })
+  ] });
+}
+function WalletAssetList({
+  items,
+  title = "Your Assets",
+  amountLabel = "Amount",
+  hideHeader = false,
+  isLoading = false,
+  loadingRows = 2,
+  emptyStates = [],
+  bottomSpacer = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    !hideHeader && /* @__PURE__ */ jsxs("div", { className: "mb-1 mt-3 flex items-center justify-between px-2", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", eyebrow), children: title }),
+      /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", eyebrow), children: amountLabel })
+    ] }),
+    isLoading && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: Array.from({ length: loadingRows }).map((_, index) => /* @__PURE__ */ jsx(AssetSkeleton, { index }, index)) }),
+    !isLoading && items.map((item) => /* @__PURE__ */ jsx(
+      AssetCard,
+      {
+        ticker: item.ticker,
+        name: item.name,
+        displayBalance: item.displayBalance,
+        networks: item.networks,
+        logoUri: item.logoUri,
+        balanceVisible: item.balanceVisible,
+        accentColor: item.accentColor,
+        status: item.status,
+        onClick: item.onClick
+      },
+      item.id
+    )),
+    !isLoading && emptyStates.map((state) => /* @__PURE__ */ jsx(EmptyState, { state }, state.id)),
+    bottomSpacer && /* @__PURE__ */ jsx("div", { className: "h-32" })
+  ] });
+}
+
+export {
+  WalletAssetList
+};

package/dist/web/chunk-RWJHJMVJ.js

@@ -0,0 +1,67 @@
+"use client";
+import {
+  AccountHeaderIcons
+} from "./chunk-YFYAMVTL.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  ExpandLess,
+  ExpandMore
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/account-capabilities-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function AccountCapabilitiesCard({
+  accountId,
+  title,
+  description,
+  capabilities,
+  isExpanded,
+  onToggle,
+  collapsible = true,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-4 shadow-card-secondary transition-all duration-300", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group flex items-start justify-between gap-3",
+          collapsible && "cursor-pointer"
+        ),
+        onClick: collapsible ? onToggle : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+            /* @__PURE__ */ jsx(AccountHeaderIcons, { accountId }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-body font-bold text-foreground transition-colors group-hover:text-secondary-content", children: title }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-caption text-muted-foreground", children: description })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col items-end gap-2", children: collapsible && /* @__PURE__ */ jsx("div", { className: "mt-1 text-muted-foreground transition-colors group-hover:text-secondary-content", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: isExpanded ? ExpandLess : ExpandMore, size: "md" }) }) })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxs("div", { className: "mt-5 duration-200 animate-in fade-in slide-in-from-top-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-6 space-y-2", children: [
+        /* @__PURE__ */ jsx("h4", { className: cn("mb-2 text-muted-foreground", eyebrow), children: "Capabilities" }),
+        capabilities.map((capability) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-caption text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 rounded-full bg-secondary-content" }),
+          /* @__PURE__ */ jsx("span", { children: capability })
+        ] }, capability))
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "pt-5", children })
+    ] })
+  ] });
+}
+
+export {
+  AccountCapabilitiesCard
+};

package/dist/web/chunk-RXXYUYBP.js

@@ -0,0 +1,25 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/section-header.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SectionHeader({
+  children,
+  right,
+  as: Tag = "h2",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-3 px-1", className), children: [
+    /* @__PURE__ */ jsx(Tag, { className: cn("text-muted-foreground", eyebrow), children }),
+    right
+  ] });
+}
+
+export {
+  SectionHeader
+};

package/dist/web/chunk-SGXLWU4V.js

@@ -0,0 +1,96 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  protocolIcons
+} from "./chunk-WEPSTI3Z.js";
+import {
+  getFallbackAssetIconUrl,
+  useAssetIcon
+} from "./chunk-VLZMX43R.js";
+
+// src/web/components/asset-icon.tsx
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var ASSET_COLORS = {
+  BTC: "bg-transparent",
+  ETH: "bg-asset-eth",
+  USDT: "bg-asset-usdt",
+  USDC: "bg-asset-usdc"
+};
+var LOCAL_ICONS = {
+  BTC: protocolIcons.Bitcoin,
+  ARKADE: protocolIcons.Arkade,
+  RGB: protocolIcons.RGB20,
+  SPARK: protocolIcons.Spark,
+  LIQUID: protocolIcons.Liquid,
+  "L-BTC": protocolIcons.Liquid
+};
+function AssetIcon({ ticker, logoUri, cdnBaseUrl, size = 40, className }) {
+  const normTicker = ticker.toUpperCase();
+  const localIcon = LOCAL_ICONS[normTicker];
+  const cdnUrl = useAssetIcon(ticker, cdnBaseUrl);
+  const fallbackUrl = getFallbackAssetIconUrl(ticker);
+  const [useFallback, setUseFallback] = useState(!logoUri && !localIcon && !cdnUrl && !!fallbackUrl);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    setFailed(false);
+    setUseFallback(!logoUri && !localIcon && !cdnUrl && !!fallbackUrl);
+  }, [logoUri, localIcon, cdnUrl, fallbackUrl]);
+  const iconUrl = logoUri ? logoUri : localIcon ? localIcon : failed ? null : useFallback || !cdnUrl ? fallbackUrl || null : cdnUrl || fallbackUrl || null;
+  const bgColor = ASSET_COLORS[normTicker] || "bg-secondary bg-gradient-violet";
+  if (iconUrl) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "rounded-full overflow-hidden flex items-center justify-center shadow-inner",
+          !localIcon && bgColor,
+          className
+        ),
+        style: { width: size, height: size },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: iconUrl,
+            alt: `${ticker} icon`,
+            width: size,
+            height: size,
+            className: cn("object-cover w-full h-full", normTicker === "SPARK" && localIcon && "kui-mono-icon"),
+            onError: () => {
+              if (logoUri) {
+                setFailed(false);
+                setUseFallback(!localIcon && !!fallbackUrl);
+                return;
+              }
+              if (localIcon) return;
+              if (!useFallback && fallbackUrl) {
+                setUseFallback(true);
+                return;
+              }
+              setFailed(true);
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-full flex items-center justify-center font-bold shadow-inner",
+        bgColor,
+        ASSET_COLORS[normTicker] ? "text-foreground" : "text-secondary-foreground",
+        className
+      ),
+      style: { width: size, height: size, fontSize: size * 0.4 },
+      children: ticker.charAt(0).toUpperCase()
+    }
+  );
+}
+
+export {
+  AssetIcon
+};

package/dist/web/chunk-SIE2FP2T.js

@@ -0,0 +1,62 @@
+"use client";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  ChevronLeft,
+  ChevronRight
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/pager.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pager({
+  offset,
+  limit,
+  returned,
+  onOffsetChange,
+  noun = "rows",
+  previousLabel = "Previous",
+  nextLabel = "Next",
+  alwaysShow = false,
+  emptyLabel,
+  className
+}) {
+  const hasPrevious = offset > 0;
+  const hasNext = returned === limit && limit > 0;
+  if (!hasPrevious && !hasNext && !alwaysShow) return null;
+  const first = returned > 0 ? offset + 1 : offset;
+  const last = offset + returned;
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", "data-slot": "pager", className: cn("flex items-center justify-between gap-3", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "m-0 text-caption tabular-nums text-muted-foreground", children: returned === 0 && alwaysShow ? emptyLabel ?? `No ${noun} in this window` : `${noun} ${first}\u2013${last}` }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "surface",
+          size: "sm",
+          disabled: !hasPrevious,
+          onClick: () => onOffsetChange(Math.max(0, offset - limit)),
+          children: [
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: ChevronLeft, className: "text-icon-md" }),
+            previousLabel
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "surface", size: "sm", disabled: !hasNext, onClick: () => onOffsetChange(offset + limit), children: [
+        nextLabel,
+        /* @__PURE__ */ jsx(IconGlyph, { glyph: ChevronRight, className: "text-icon-md" })
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  Pager
+};

package/dist/web/chunk-STMNX3QT.js

@@ -0,0 +1,109 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/metric-card.tsx
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var toneClasses = {
+  primary: "bg-primary/10 text-brand",
+  purple: "bg-network-arkade/10 text-network-arkade-fg",
+  blue: "bg-info/10 text-info-fg",
+  info: "bg-info/10 text-info-fg",
+  warning: "bg-warning/10 text-warning-fg",
+  success: "bg-success/10 text-success-fg",
+  muted: "bg-secondary/15 text-secondary-content"
+};
+function MetricCard({
+  label,
+  value,
+  description,
+  icon,
+  tone = "muted",
+  size = "compact",
+  iconPlacement,
+  trend,
+  definition,
+  change,
+  className,
+  ...rest
+}) {
+  const labelId = useId();
+  const comfortable = size === "comfortable";
+  const placement = iconPlacement ?? (comfortable ? "end" : "label");
+  const hasEnd = placement === "end" || !!trend;
+  const iconBox = comfortable ? "size-9 rounded-xl shadow-raised" : placement === "end" ? "size-7 rounded-lg" : "size-5 rounded-md";
+  const iconGlyph = comfortable ? "text-icon-lg" : placement === "end" ? "text-icon-md" : "text-icon-xs";
+  const iconNode = icon ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "metric-card-icon",
+      className: cn(
+        "flex shrink-0 items-center justify-center",
+        iconBox,
+        toneClasses[tone]
+      ),
+      children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconGlyph }) : icon
+    }
+  ) : null;
+  const labelNode = /* @__PURE__ */ jsx("span", { id: labelId, "data-slot": "metric-card-label", className: cn(eyebrow, "text-muted-foreground"), children: label });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-labelledby": rest["aria-label"] ? void 0 : labelId,
+      "data-slot": "metric-card",
+      "data-size": size,
+      className: cn(
+        comfortable ? "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero p-4 shadow-card" : "rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero p-2.5 shadow-raised",
+        hasEnd ? "flex items-stretch justify-between gap-3" : "space-y-1",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: hasEnd ? "min-w-0 flex-1 space-y-1" : "contents", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            placement === "label" && iconNode,
+            labelNode
+          ] }),
+          definition && /* @__PURE__ */ jsx("p", { "data-slot": "metric-card-definition", className: "m-0 text-caption text-muted-foreground", children: definition }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              "data-slot": "metric-card-value",
+              className: cn(
+                "m-0 font-bold tabular-nums text-foreground",
+                comfortable ? "text-headline" : "text-body"
+              ),
+              children: value
+            }
+          ),
+          change && /* @__PURE__ */ jsx("p", { "data-slot": "metric-card-change", className: cn("m-0 tabular-nums text-foreground", comfortable ? "text-caption" : "text-xxs"), children: change }),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              "data-slot": "metric-card-description",
+              className: cn("m-0 text-muted-foreground", comfortable ? "text-caption" : "text-xxs"),
+              children: description
+            }
+          )
+        ] }),
+        hasEnd && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-end justify-between gap-2", children: [
+          placement === "end" && iconNode,
+          trend && /* @__PURE__ */ jsx("div", { "data-slot": "metric-card-trend", className: "min-h-0 flex-1", children: trend })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  MetricCard
+};

package/dist/web/chunk-SUOATMIA.js

@@ -0,0 +1,113 @@
+"use client";
+import {
+  COPY_FAILED_MESSAGE
+} from "./chunk-GEXPB5CG.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Check,
+  ContentCopy,
+  Visibility,
+  VisibilityOff
+} from "./chunk-XXH4TYKZ.js";
+import {
+  useCopyToClipboard
+} from "./chunk-BGUBHWIO.js";
+
+// src/web/components/recovery-phrase-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function RecoveryPhraseCard({
+  words,
+  revealed = false,
+  onRevealChange,
+  copyValue,
+  copyLabel = "Copy to clipboard",
+  copiedLabel = "Copied",
+  copyFailedMessage = COPY_FAILED_MESSAGE,
+  onCopy,
+  title = "Recovery Phrase",
+  emptyMessage = "Recovery phrase is not available yet.",
+  className
+}) {
+  const hasWords = words.length > 0;
+  const clipboard = useCopyToClipboard();
+  const selfCopy = !onCopy && copyValue !== void 0;
+  const handleCopy = onCopy ?? (selfCopy ? () => void clipboard.copy(copyValue) : void 0);
+  const copied = selfCopy && clipboard.state === "copied";
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-0.5", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: title }),
+      hasWords && revealed && onRevealChange && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "surface",
+          size: "xs",
+          onClick: () => onRevealChange(!revealed),
+          children: [
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: VisibilityOff, className: "text-icon-md" }),
+            "Hide"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      hasWords ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-3 gap-2 transition-all duration-300",
+            !revealed && "pointer-events-none select-none blur-sm"
+          ),
+          children: words.map((word, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-xl bg-card bg-gradient-card px-3 py-2.5 shadow-raised", children: [
+            /* @__PURE__ */ jsx("span", { className: "w-4 shrink-0 text-caption font-bold text-secondary-content", children: index + 1 }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-body text-foreground", children: word })
+          ] }, `${index}-${word}`))
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "rounded-xl bg-warning/10 px-4 py-3 text-body text-warning-fg", children: emptyMessage }),
+      hasWords && !revealed && onRevealChange && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "surface",
+          size: "sm",
+          onClick: () => onRevealChange(true),
+          children: [
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: Visibility, className: "text-icon-lg" }),
+            "Tap to reveal"
+          ]
+        }
+      ) })
+    ] }),
+    hasWords && revealed && handleCopy && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "surface",
+        size: "lg",
+        onClick: handleCopy,
+        className: cn("w-full", copied && "bg-primary/10 bg-gradient-active text-brand ring-primary/40 hover:ring-primary/50"),
+        children: [
+          /* @__PURE__ */ jsx(IconGlyph, { glyph: copied ? Check : ContentCopy, className: "text-icon-lg" }),
+          copied ? copiedLabel : copyLabel
+        ]
+      }
+    ),
+    selfCopy && clipboard.state === "failed" && /* @__PURE__ */ jsx("p", { role: "alert", className: "m-0 text-caption text-danger-fg", children: copyFailedMessage }),
+    selfCopy && /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? copiedLabel : "" })
+  ] });
+}
+
+export {
+  RecoveryPhraseCard
+};