kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-GX7GBHJ6.js

@@ -0,0 +1,362 @@
+"use client";
+import {
+  colors
+} from "./chunk-A7MPRLJL.js";
+import {
+  DisclosureCard
+} from "./chunk-TMK3SVYI.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  LiquidNetworkIcon,
+  OnchainNetworkIcon,
+  RgbNetworkIcon
+} from "./chunk-LYCLVP26.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Cancel,
+  Check,
+  CheckCircle,
+  ContentCopy,
+  Info,
+  ProgressActivity,
+  SwapHoriz
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/deposit-ui-shared.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var GLOW_ALPHA = "26";
+function qrGlowStyle(hex) {
+  return { boxShadow: `0 0 30px ${hex}${GLOW_ALPHA}` };
+}
+var NETWORK_CONFIG = {
+  onchain: {
+    label: "On-chain",
+    color: colors.network.bitcoin,
+    bg: "bg-network-bitcoin/15",
+    text: "text-network-bitcoin-fg",
+    border: "border-network-bitcoin/40",
+    qrBorder: "border-network-bitcoin/30",
+    qrGlow: qrGlowStyle(colors.network.bitcoin),
+    // On-chain uses the chain mark (as in NetworkBadge) rather than the ₿ coin — the coin reads
+    // as "the BTC asset", whereas this row is specifically the *on-chain* (L1)
+    // receive rail alongside Lightning/Spark/Arkade, so a chain mark disambiguates.
+    icon: /* @__PURE__ */ jsx(OnchainNetworkIcon, { className: "size-3" })
+  },
+  lightning: {
+    label: "Lightning",
+    color: colors.network.lightning,
+    bg: "bg-network-lightning/15",
+    text: "text-network-lightning-fg",
+    border: "border-network-lightning/40",
+    qrBorder: "border-network-lightning/30",
+    qrGlow: qrGlowStyle(colors.network.lightning),
+    icon: /* @__PURE__ */ jsx("img", { src: "/icons/lightning/lightning.svg", className: "size-3", alt: "" })
+  },
+  spark: {
+    label: "Spark",
+    color: colors.info,
+    bg: "bg-info/15",
+    text: "text-info-fg",
+    border: "border-info/40",
+    qrBorder: "border-info/30",
+    qrGlow: qrGlowStyle(colors.info),
+    icon: /* @__PURE__ */ jsx("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", className: "kui-mono-icon h-3 w-3", alt: "" })
+  },
+  arkade: {
+    label: "Arkade",
+    color: colors.network.arkade,
+    bg: "bg-network-arkade/15",
+    text: "text-network-arkade-fg",
+    border: "border-network-arkade/40",
+    qrBorder: "border-network-arkade/30",
+    qrGlow: qrGlowStyle(colors.network.arkade),
+    icon: /* @__PURE__ */ jsx("img", { src: "/icons/arkade/arkade-icon.svg", className: "h-3 w-3 rounded-sm", alt: "" })
+  },
+  liquid: {
+    label: "Liquid",
+    color: colors.network.liquid,
+    bg: "bg-network-liquid/15",
+    text: "text-network-liquid-fg",
+    border: "border-network-liquid/40",
+    qrBorder: "border-network-liquid/30",
+    qrGlow: qrGlowStyle(colors.network.liquid),
+    icon: /* @__PURE__ */ jsx(LiquidNetworkIcon, { className: "h-3 w-3" })
+  }
+};
+var ACCOUNT_META = {
+  RGB: {
+    shortLabel: "RGB",
+    accentBg: "bg-primary/10",
+    accentText: "text-brand",
+    accentBorder: "border-primary/30",
+    // Bundled RGB mark (protocolIcons) — a host-served /icons/rgb/... path
+    // renders as a broken box in consumers that don't ship that asset.
+    icon: /* @__PURE__ */ jsx(RgbNetworkIcon, { className: "h-2.5 w-2.5" })
+  },
+  SPARK: {
+    shortLabel: "Spark",
+    accentBg: "bg-network-spark/10",
+    accentText: "text-network-spark-fg",
+    accentBorder: "border-network-spark/30",
+    icon: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: "/icons/spark/Asterisk/Spark Asterisk White.svg",
+        alt: "",
+        className: "kui-mono-icon h-2.5 w-2.5 object-contain"
+      }
+    )
+  },
+  ARKADE: {
+    shortLabel: "Arkade",
+    accentBg: "bg-network-arkade/10",
+    accentText: "text-network-arkade-fg",
+    accentBorder: "border-network-arkade/30",
+    icon: /* @__PURE__ */ jsx("img", { src: "/icons/arkade/arkade-icon.svg", alt: "", className: "h-2.5 w-2.5 rounded-[1px] object-contain" })
+  },
+  LIQUID: {
+    shortLabel: "Liquid",
+    accentBg: "bg-network-liquid/10",
+    accentText: "text-network-liquid-fg",
+    accentBorder: "border-network-liquid/30",
+    icon: /* @__PURE__ */ jsx(LiquidNetworkIcon, { className: "h-2.5 w-2.5" })
+  }
+};
+var METHOD_META = {
+  bitcoin_l1: { label: "On-chain", icon: /* @__PURE__ */ jsx(OnchainNetworkIcon, { className: "size-3" }) },
+  lightning: { label: "Lightning", icon: /* @__PURE__ */ jsx("img", { src: "/icons/lightning/lightning.svg", className: "size-3", alt: "" }) },
+  spark: {
+    label: "Spark",
+    icon: /* @__PURE__ */ jsx("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", className: "kui-mono-icon size-3 object-contain", alt: "" })
+  },
+  arkade: { label: "Arkade", icon: /* @__PURE__ */ jsx("img", { src: "/icons/arkade/arkade-icon.svg", className: "size-3 rounded-sm object-contain", alt: "" }) },
+  // Boarding is on-chain BTC joining Arkade; a submarine swap is a swap between rails.
+  boarding: { label: "Boarding", icon: /* @__PURE__ */ jsx(OnchainNetworkIcon, { className: "size-3" }) },
+  submarine_swap: { label: "Submarine Swap", icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: SwapHoriz, className: "text-icon-xs" }) }
+};
+function InvoiceStatusBanner({
+  isInvoicePending,
+  isInvoicePaid,
+  isInvoiceFailedOrExpired,
+  invoiceStatus
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-2 rounded-xl px-3 py-1.5 text-caption font-bold",
+        isInvoicePaid ? "bg-primary/10 text-brand shadow-glow-primary-soft" : isInvoiceFailedOrExpired ? "bg-danger/10 text-danger-fg" : "bg-warning/10 text-warning-fg"
+      ),
+      children: [
+        isInvoicePending && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-sm" }),
+          /* @__PURE__ */ jsx("span", { children: "Waiting for payment..." })
+        ] }),
+        isInvoicePaid && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(IconGlyph, { glyph: CheckCircle, className: "text-icon-sm" }),
+          /* @__PURE__ */ jsx("span", { children: "Payment received!" })
+        ] }),
+        isInvoiceFailedOrExpired && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(IconGlyph, { glyph: Cancel, className: "text-icon-sm" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Invoice ",
+            invoiceStatus?.toLowerCase() === "expired" ? "expired" : "failed"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function PaidOverlay() {
+  return (
+    // Reaches 3px past the QR card, its radius concentric with the card's
+    // rounded-2xl, so neither the card's anti-aliased white edge nor a frame
+    // of up to 3px shows at the corners.
+    /* @__PURE__ */ jsx("div", { className: "absolute -inset-[3px] flex items-center justify-center rounded-[calc(var(--radius-2xl)+3px)] bg-background/95 bg-gradient-card-hero", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex size-14 items-center justify-center rounded-full bg-primary bg-gradient-primary shadow-glow-brand", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: "text-icon-4xl text-background" }) }),
+      /* @__PURE__ */ jsx("span", { className: "text-body font-bold text-gradient-brand", children: "Received!" })
+    ] }) })
+  );
+}
+function CopyIcon({ copied, variant = "tile", className }) {
+  if (variant === "bare") {
+    return /* @__PURE__ */ jsx(
+      IconGlyph,
+      {
+        glyph: copied ? Check : ContentCopy,
+        "aria-hidden": "true",
+        className: cn("text-icon-sm", copied && "text-brand", className)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex-shrink-0 rounded-lg p-2 transition-all",
+        copied ? "bg-primary/15 text-brand shadow-glow-primary-soft" : "bg-secondary/15 text-secondary-content group-hover:bg-secondary group-hover:bg-gradient-violet group-hover:text-white"
+      ),
+      children: copied ? /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, size: "sm" }) : /* @__PURE__ */ jsx(IconGlyph, { glyph: ContentCopy, size: "sm" })
+    }
+  );
+}
+function AccountChoiceChip({
+  account,
+  active,
+  onClick,
+  label
+}) {
+  const meta = ACCOUNT_META[account];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "data-testid": `deposit-account-${account.toLowerCase()}`,
+      className: cn(
+        "flex flex-shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-1.5 text-icon-xxs font-bold transition-all",
+        active ? cn(meta.accentText, "bg-primary/10 bg-gradient-active ring-1 ring-inset ring-primary/40 shadow-glow-primary-faint") : "bg-foreground/5 text-muted-foreground hover-gradient-violet hover:text-foreground/80"
+      ),
+      children: [
+        meta.icon,
+        /* @__PURE__ */ jsx("span", { children: label ?? meta.shortLabel })
+      ]
+    }
+  );
+}
+var NETWORK_INFO = {
+  onchain: {
+    title: "On-chain (Bitcoin L1)",
+    detail: "Standard Bitcoin transaction. Anyone can pay you from any Bitcoin wallet.",
+    bullets: [
+      "Settles in about 10 minutes per confirmation",
+      "Pays Bitcoin miner fees, which vary with network load",
+      "Spark deposits are auto-claimed once confirmed"
+    ]
+  },
+  lightning: {
+    title: "Lightning",
+    detail: "Instant Bitcoin payments off-chain. Best for small amounts, near-zero fees.",
+    bullets: [
+      "Settles in seconds, very low fees",
+      "Sender needs a Lightning wallet with outbound liquidity",
+      "Invoice expires, so generate a fresh one if needed"
+    ]
+  },
+  spark: {
+    title: "Spark",
+    detail: "Native Spark transfer between Spark wallets. Instant and effectively free.",
+    bullets: [
+      "Settles instantly between Spark wallets",
+      "Sender must use a Spark-compatible wallet",
+      "Cannot receive from a regular Bitcoin or Lightning wallet directly"
+    ]
+  },
+  arkade: {
+    title: "Arkade",
+    detail: "Off-chain VTXO on the Ark protocol. Instant receive, with periodic on-chain settlement.",
+    bullets: [
+      "Settles instantly between Arkade wallets",
+      "Boarding address accepts on-chain Bitcoin and joins the next round",
+      "VTXOs require periodic refresh to stay valid"
+    ]
+  },
+  liquid: {
+    title: "Liquid",
+    detail: "Bitcoin sidechain transaction (L-BTC or Liquid assets). One confidential address receives any Liquid asset.",
+    bullets: [
+      "Blocks every minute; ~2 confirmations to settle",
+      "Amounts are confidential on-chain by default",
+      "Sender needs a Liquid wallet (L-BTC or Liquid assets)"
+    ]
+  }
+};
+var NETWORK_INFO_MARK = {
+  onchain: { src: "/logos/protocols/bitcoin.svg", text: "text-network-bitcoin-fg" },
+  lightning: { src: "/logos/protocols/lightning.svg", text: "text-network-lightning-fg" },
+  spark: { src: "/logos/protocols/spark-asterisk-white.svg", text: "text-network-spark-fg", mono: true },
+  arkade: { src: "/logos/protocols/arkade.svg", text: "text-network-arkade-fg" },
+  liquid: { src: "/logos/protocols/liquid.svg", text: "text-network-liquid-fg" }
+};
+function NetworkInfoDisclosure({
+  networks,
+  className
+}) {
+  if (networks.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    DisclosureCard,
+    {
+      className,
+      triggerClassName: "px-2.5 py-1.5",
+      contentClassName: "space-y-2 px-2.5 pb-2.5 pt-1",
+      icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: Info, size: "xs", className: "text-secondary-content" }),
+      title: /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", eyebrow), children: "What are these networks?" }),
+      children: networks.map((network) => {
+        const info = NETWORK_INFO[network];
+        const mark = NETWORK_INFO_MARK[network];
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            network === "onchain" ? /* @__PURE__ */ jsx(OnchainNetworkIcon, {}) : /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: mark.src,
+                alt: "",
+                className: cn("size-3.5 flex-shrink-0 object-contain", mark.mono && "kui-mono-icon")
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: cn(eyebrow, mark.text), children: info.title })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "pl-5 text-tiny leading-snug text-muted-foreground", children: info.detail }),
+          /* @__PURE__ */ jsx("ul", { className: "space-y-0.5 pl-5", children: info.bullets.map((bullet) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-1.5 text-xxs leading-snug text-foreground/50", children: [
+            /* @__PURE__ */ jsx("span", { className: "mt-[1px] text-foreground/55", children: "-" }),
+            /* @__PURE__ */ jsx("span", { children: bullet })
+          ] }, bullet)) })
+        ] }, network);
+      })
+    }
+  );
+}
+function MethodChoiceChip({
+  method,
+  active,
+  enabled,
+  disabledReason,
+  onClick
+}) {
+  const meta = METHOD_META[method];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled: !enabled,
+      "data-testid": `deposit-method-${method}`,
+      className: cn(
+        "flex flex-shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-1.5 text-icon-xxs font-bold transition-all",
+        active ? "bg-primary bg-gradient-primary text-primary-foreground shadow-button-primary" : enabled ? "bg-foreground/5 text-muted-foreground hover-gradient-violet hover:text-foreground/80" : "cursor-not-allowed bg-foreground/3 text-foreground/20"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("flex shrink-0 items-center", !enabled && "opacity-40 grayscale"), children: meta.icon }),
+        meta.label,
+        !enabled && disabledReason && /* @__PURE__ */ jsx("span", { className: "text-xxs font-normal opacity-60", children: disabledReason })
+      ]
+    }
+  );
+}
+
+export {
+  NETWORK_CONFIG,
+  InvoiceStatusBanner,
+  PaidOverlay,
+  CopyIcon,
+  AccountChoiceChip,
+  NetworkInfoDisclosure,
+  MethodChoiceChip
+};

package/dist/web/chunk-GZZ5KVON.js

@@ -0,0 +1,70 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/card.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var cardSurface = {
+  primary: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-card",
+  secondary: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-card-secondary"
+};
+var Card = React.forwardRef(
+  ({ className, variant = "primary", ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-variant": variant,
+      className: cn(
+        cardSurface[variant],
+        // A column, so CardFooter can sit on the bottom edge when the card is
+        // taller than its content (a grid row of cards stretches them all).
+        "flex flex-col text-card-foreground transition-[color,background-color,box-shadow] duration-300",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn("text-title font-semibold leading-none tracking-tight", className),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-caption text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(
+  ({ className, ...props }, ref) => (
+    // mt-auto: the card's actions stay on its bottom edge, however tall it is.
+    /* @__PURE__ */ jsx("div", { ref, className: cn("mt-auto flex items-center p-6 pt-0", className), ...props })
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export {
+  cardSurface,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter
+};

package/dist/web/chunk-H3GYLFHP.js

@@ -0,0 +1,30 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/label.tsx
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx } from "react/jsx-runtime";
+var Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "mb-1 inline-block leading-none",
+      eyebrow,
+      "text-secondary-content peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    ),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export {
+  Label
+};

package/dist/web/chunk-HDLOPDFX.js

@@ -0,0 +1,89 @@
+"use client";
+import {
+  COPY_FAILED_MESSAGE
+} from "./chunk-QCQRA6L5.js";
+import {
+  useCopyToClipboard
+} from "./chunk-BGUBHWIO.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Check,
+  ContentCopy,
+  Visibility,
+  VisibilityOff
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/secret-reveal-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SecretRevealCard({
+  value,
+  revealed,
+  onRevealChange,
+  copyValue,
+  copiedLabel = "Copied",
+  copyFailedMessage = COPY_FAILED_MESSAGE,
+  onCopy,
+  revealLabel = "Tap to reveal",
+  hideLabel = "Hide",
+  copyLabel = "Copy",
+  className,
+  valueClassName
+}) {
+  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("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-xl bg-card/55 bg-gradient-card px-3 py-3 shadow-inner ring-1 ring-inset ring-secondary/15 backdrop-blur-xl backdrop-saturate-150", children: /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "break-all font-mono text-body text-foreground transition-all duration-300",
+            // Hidden: blurred and faded, so the reveal button reads over it.
+            !revealed && "pointer-events-none select-none opacity-[var(--app-hidden-opacity)] blur-md",
+            valueClassName
+          ),
+          children: value
+        }
+      ) }),
+      !revealed && /* @__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" }),
+        revealLabel
+      ] }) })
+    ] }),
+    revealed && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "surface", className: "flex-1", onClick: () => onRevealChange(false), children: [
+        /* @__PURE__ */ jsx(IconGlyph, { glyph: VisibilityOff, className: "text-icon-lg" }),
+        hideLabel
+      ] }),
+      handleCopy && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "surface",
+          onClick: handleCopy,
+          className: cn("flex-1", 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 {
+  SecretRevealCard
+};

package/dist/web/chunk-HP25HN7Q.js

@@ -0,0 +1,69 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/charts/sparkline.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Sparkline({ values, label, width = 96, height = 28, pulse = false, tone = "default", className }) {
+  const fill = height === "fill";
+  const boxRef = useRef(null);
+  const [measured, setMeasured] = useState(28);
+  useEffect(() => {
+    const box = boxRef.current;
+    if (!fill || !box) return;
+    const measure = () => setMeasured(Math.max(16, Math.round(box.getBoundingClientRect().height)));
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(box);
+    return () => observer.disconnect();
+  }, [fill]);
+  if (values.length < 2) return null;
+  const h = fill ? measured : height;
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const span = max - min || 1;
+  const pad = 4;
+  const x = (index) => pad + index / (values.length - 1) * (width - pad * 2);
+  const y = (value) => h - pad - (value - min) / span * (h - pad * 2);
+  const d = values.map((value, index) => `${index === 0 ? "M" : "L"}${x(index).toFixed(1)},${y(value).toFixed(1)}`).join("");
+  const last = values.length - 1;
+  const dot = tone === "negative" ? "var(--color-danger)" : "var(--series-1)";
+  const svg = /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "data-slot": "sparkline",
+      role: "img",
+      "aria-label": label,
+      width,
+      height: h,
+      viewBox: `0 0 ${width} ${h}`,
+      className: cn("block shrink-0 overflow-visible", !fill && className, fill && "absolute inset-y-0 right-0"),
+      children: [
+        /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: "var(--muted-foreground)", strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" }),
+        pulse && /* @__PURE__ */ jsx(
+          "circle",
+          {
+            "data-slot": "sparkline-pulse",
+            "aria-hidden": "true",
+            cx: x(last),
+            cy: y(values[last]),
+            r: 4,
+            fill: dot,
+            className: "opacity-0 motion-safe:animate-ping motion-safe:opacity-75",
+            style: { transformBox: "fill-box", transformOrigin: "center" }
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: x(last), cy: y(values[last]), r: 4, fill: dot, stroke: "var(--card)", strokeWidth: 2 })
+      ]
+    }
+  );
+  if (!fill) return svg;
+  return /* @__PURE__ */ jsx("span", { ref: boxRef, className: cn("relative block h-full", className), style: { width }, children: svg });
+}
+
+export {
+  Sparkline
+};