kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-PTSOVDKH.js

@@ -0,0 +1,169 @@
+"use client";
+import {
+  formatAmount
+} from "./chunk-VM6AGMYO.js";
+import {
+  AssetIcon
+} from "./chunk-2REWXJEN.js";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  ArrowBack,
+  Fingerprint,
+  ProgressActivity
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/withdraw-confirmation.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function WithdrawConfirmation({
+  isConfirming,
+  isPollingStatus,
+  setShowConfirmation,
+  displayAmount,
+  selectedAssetId,
+  selectedAsset,
+  destination,
+  networkLabel,
+  networkIcon,
+  routeAccount,
+  estimatedFee,
+  feeIsExact = false,
+  feeRate,
+  addressType,
+  decodedRgbInvoice,
+  witnessAmountSat,
+  amount,
+  reviewLabels,
+  handleConfirmSend,
+  locale
+}) {
+  const ticker = selectedAsset?.ticker ?? selectedAssetId;
+  const unit = selectedAssetId === "BTC" ? "sats" : selectedAsset?.ticker ?? "units";
+  const busy = isConfirming || isPollingStatus;
+  const showTotal = selectedAssetId === "BTC" && estimatedFee > 0;
+  const fromAccount = routeAccount && routeAccount.toLowerCase() !== networkLabel.toLowerCase() ? routeAccount : null;
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background bg-page-radial font-display text-foreground", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-4 top-4 z-30", children: /* @__PURE__ */ jsx(
+      GlyphButton,
+      {
+        icon: ArrowBack,
+        label: "Go back",
+        size: "lg",
+        onClick: () => {
+          if (!busy) setShowConfirmation(false);
+        },
+        className: busy ? "pointer-events-none opacity-70" : void 0
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", viewportClassName: "px-5 pt-14 pb-6", children: /* @__PURE__ */ jsxs("main", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { "data-slot": "payment-review-hero", className: "flex flex-col items-center pt-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative mb-3", children: [
+          /* @__PURE__ */ jsx(AssetIcon, { ticker, logoUri: selectedAsset?.icon, size: 48 }),
+          networkIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "payment-review-network-badge",
+              "aria-hidden": "true",
+              className: "absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full bg-card ring-2 ring-background",
+              children: networkIcon
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-caption uppercase tracking-eyebrow text-muted-foreground", children: reviewLabels?.recipientReceives ?? "Recipient receives" }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 flex items-baseline gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-display font-bold tabular-nums text-gradient-brand", children: formatAmount(displayAmount, { locale }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-body text-muted-foreground", children: unit })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1 rounded-2xl bg-card bg-gradient-card p-2 shadow-card", children: [
+        /* @__PURE__ */ jsx(ReviewRow, { label: "To", children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono text-body text-foreground", title: destination, children: destination.length > 24 ? `${destination.slice(0, 12)}\u2026${destination.slice(-8)}` : destination }) }),
+        /* @__PURE__ */ jsx(ReviewRow, { label: "Network", "data-testid": "payment-review-network", children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+          networkIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex shrink-0 items-center", children: networkIcon }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-body font-bold text-foreground", children: networkLabel }),
+          fromAccount && /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-caption text-muted-foreground", children: [
+            "from ",
+            fromAccount
+          ] })
+        ] }) }),
+        estimatedFee > 0 && /* @__PURE__ */ jsx(
+          ReviewRow,
+          {
+            label: reviewLabels?.estimatedNetworkFee ?? "Estimated network fee",
+            "data-testid": "payment-review-fee",
+            children: /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-body tabular-nums text-foreground", children: `${feeIsExact ? "" : "~"}${formatAmount(estimatedFee, { locale })} sats` }),
+              feeRate && /* @__PURE__ */ jsx("span", { className: "text-xxs font-bold capitalize tracking-wider text-secondary-content", children: feeRate })
+            ] })
+          }
+        ),
+        addressType === "rgb" && decodedRgbInvoice?.recipient_type === "Witness" && /* @__PURE__ */ jsx(ReviewRow, { label: "Witness amount", children: /* @__PURE__ */ jsxs("span", { className: "text-body tabular-nums text-foreground", children: [
+          formatAmount(witnessAmountSat, { locale }),
+          " sats"
+        ] }) }),
+        showTotal && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-testid": "payment-review-total",
+            className: "flex items-center justify-between gap-3 rounded-xl bg-muted/40 px-3 py-2.5",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-caption font-bold uppercase tracking-eyebrow text-brand", children: reviewLabels?.totalDeducted ?? "Total deducted" }),
+              /* @__PURE__ */ jsxs("span", { className: "text-subhead font-bold tabular-nums text-foreground", children: [
+                formatAmount(Math.round(parseFloat(amount.replace(/,/g, "")) || 0) + estimatedFee, { locale }),
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "text-caption text-brand", children: "sats" })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      isPollingStatus && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-xl bg-gradient-active p-4 shadow-glow-violet-soft ring-1 ring-inset ring-secondary/40", children: [
+        /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-2xl text-secondary-content" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-body font-medium text-foreground", children: "Processing payment..." }),
+          /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: "Waiting for confirmation" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "cta",
+          size: "cta-lg",
+          onClick: handleConfirmSend,
+          disabled: busy,
+          className: "w-full",
+          children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-2xl" }),
+            isPollingStatus ? "Waiting for confirmation..." : "Sending..."
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: Fingerprint, className: "text-icon-2xl" }),
+            "Confirm & Send"
+          ] })
+        }
+      )
+    ] }) })
+  ] });
+}
+function ReviewRow({
+  label,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-11 items-center justify-between gap-3 px-3 py-2", ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-caption text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "flex min-w-0 justify-end", children })
+  ] });
+}
+
+export {
+  WithdrawConfirmation
+};

package/dist/web/chunk-QBZSLR7U.js

@@ -0,0 +1,54 @@
+"use client";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-6IBQJIHT.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/basic-collapsible.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function BasicCollapsible({
+  title,
+  children,
+  open,
+  onOpenChange,
+  defaultOpen,
+  className,
+  triggerClassName,
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open,
+      onOpenChange,
+      defaultOpen,
+      "data-slot": "basic-collapsible",
+      className: cn("overflow-hidden rounded-xl bg-surface-inset/40 shadow-raised", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          CollapsibleTrigger,
+          {
+            className: cn(
+              "flex w-full items-center justify-between px-3 py-2 text-caption font-semibold text-foreground hover-gradient-violet focus-visible:ring-inset",
+              triggerClassName
+            ),
+            children: [
+              title,
+              /* @__PURE__ */ jsx(CollapsibleChevron, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(CollapsibleContent, { className: cn("px-3 pb-3 pt-1 text-caption text-muted-foreground", contentClassName), children })
+      ]
+    }
+  );
+}
+
+export {
+  BasicCollapsible
+};

package/dist/web/chunk-QCQRA6L5.js

@@ -0,0 +1,63 @@
+"use client";
+import {
+  useCopyToClipboard
+} from "./chunk-BGUBHWIO.js";
+import {
+  CopyIcon
+} from "./chunk-GX7GBHJ6.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/copy-button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var COPY_FAILED_MESSAGE = "Copy failed \u2014 select it and copy by hand.";
+function CopyButton({
+  value,
+  label,
+  failedMessage = COPY_FAILED_MESSAGE,
+  copyLabel,
+  copiedAnnouncement,
+  onCopied,
+  onCopyError,
+  variant = "quiet",
+  className,
+  disabled,
+  ...props
+}) {
+  const { state, copy } = useCopyToClipboard();
+  const onClick = (event) => {
+    event.stopPropagation();
+    void copy(value, { onSuccess: onCopied, onError: onCopyError });
+  };
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "copy-button", "data-status": state, className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant,
+        size: "icon-sm",
+        "aria-label": copyLabel ?? `Copy ${label}`,
+        disabled,
+        onClick,
+        className: cn(
+          "focus-visible:ring-primary/50 focus-visible:ring-offset-0 focus-visible:shadow-glow-primary-soft",
+          state === "copied" && "bg-primary/10 text-brand hover:bg-primary/15 hover:text-brand",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(CopyIcon, { copied: state === "copied", variant: "bare" })
+      }
+    ),
+    state === "failed" && /* @__PURE__ */ jsx("span", { "data-slot": "copy-button-error", role: "alert", className: "text-caption text-danger-fg", children: failedMessage }),
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: state === "copied" ? copiedAnnouncement ?? `${label} copied to the clipboard` : "" })
+  ] });
+}
+
+export {
+  COPY_FAILED_MESSAGE,
+  CopyButton
+};