kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-JYM5NHBA.js

@@ -0,0 +1,80 @@
+"use client";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/bottom-sheet.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function BottomSheet({
+  open,
+  title,
+  icon,
+  children,
+  onClose,
+  closeOnBackdrop = true,
+  actions,
+  className,
+  contentClassName
+}) {
+  if (!open) return null;
+  const handleBackdropClick = (event) => {
+    if (closeOnBackdrop && event.target === event.currentTarget) onClose?.();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 z-50 flex items-end justify-center bg-background/80 backdrop-blur-lg",
+        className
+      ),
+      onClick: handleBackdropClick,
+      children: /* @__PURE__ */ jsxs(
+        ScrollArea,
+        {
+          className: cn(
+            "w-full rounded-t-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero shadow-popover ring-1 ring-inset ring-secondary/20 animate-in slide-in-from-bottom-4 duration-200",
+            contentClassName
+          ),
+          viewportClassName: "max-h-[90vh] px-4 pb-6 pt-5",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "-mt-1 flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-1 w-10 rounded-full bg-secondary/40" }) }),
+            (title || icon) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2", children: [
+              icon,
+              /* @__PURE__ */ jsx("p", { className: "text-body font-bold text-foreground", children: title })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: cn((title || icon) && "mt-3"), children }),
+            actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 flex gap-2", children: actions.map((action, index) => /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: action.variant ?? (index === actions.length - 1 ? "cta" : "outline"),
+                size: "cta",
+                className: "flex-1",
+                onClick: action.onClick,
+                disabled: action.disabled,
+                children: [
+                  action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, className: "text-icon-md" }),
+                  action.label
+                ]
+              },
+              index
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  BottomSheet
+};

package/dist/web/chunk-K7JVP24O.js

@@ -0,0 +1,89 @@
+"use client";
+import {
+  COPY_FAILED_MESSAGE
+} from "./chunk-GEXPB5CG.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/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-KDNYIMGR.js

@@ -0,0 +1,197 @@
+"use client";
+import {
+  QrCode
+} from "./chunk-F2LIZX5K.js";
+import {
+  BottomSheet
+} from "./chunk-JYM5NHBA.js";
+import {
+  Label
+} from "./chunk-H3GYLFHP.js";
+import {
+  CopyIcon,
+  InvoiceStatusBanner,
+  NETWORK_CONFIG,
+  PaidOverlay
+} from "./chunk-W4G74KFZ.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Check,
+  ContentCopy,
+  Edit,
+  ProgressActivity,
+  Refresh
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/btc-unified-receive.tsx
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatSatsForRow(value) {
+  if (!value || value <= 0 || !Number.isFinite(value)) return null;
+  return `${value.toLocaleString("en-US")} sats`;
+}
+function BtcUnifiedReceive({
+  accountReceiveResult,
+  invoiceStatus,
+  isInvoicePending,
+  isInvoicePaid,
+  isInvoiceFailedOrExpired,
+  amount,
+  handleAmountChange,
+  loading,
+  copied,
+  copyToClipboard,
+  setAddress,
+  setAmount,
+  setInvoiceStatus,
+  setAccountReceiveResult,
+  showRegenerate = true,
+  description,
+  onDescriptionChange
+}) {
+  const amountId = useId();
+  const descriptionId = useId();
+  const [showEdit, setShowEdit] = useState(false);
+  const isQrCopied = copied === accountReceiveResult.qrValue;
+  const handleNewAddress = () => {
+    setAddress("");
+    setAmount("");
+    setInvoiceStatus(null);
+    setAccountReceiveResult(null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center p-2", children: [
+        /* @__PURE__ */ jsx(QrCode, { value: accountReceiveResult.qrValue, size: 200, tone: "onDark" }),
+        isInvoicePaid && /* @__PURE__ */ jsx(PaidOverlay, {})
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2.5", children: [
+        /* @__PURE__ */ jsx(
+          GlyphButton,
+          {
+            label: `Copy ${accountReceiveResult.qrLabel}`,
+            variant: "surface",
+            size: "lg",
+            icon: isQrCopied ? Check : ContentCopy,
+            onClick: () => void copyToClipboard(accountReceiveResult.qrValue)
+          }
+        ),
+        showRegenerate && /* @__PURE__ */ jsx(GlyphButton, { label: "New address", variant: "surface", size: "lg", icon: Refresh, onClick: handleNewAddress }),
+        /* @__PURE__ */ jsx(
+          GlyphButton,
+          {
+            label: "Edit amount and description",
+            variant: "surface",
+            size: "lg",
+            icon: Edit,
+            onClick: () => setShowEdit(true)
+          }
+        )
+      ] })
+    ] }),
+    invoiceStatus && /* @__PURE__ */ jsx(
+      InvoiceStatusBanner,
+      {
+        isInvoicePending,
+        isInvoicePaid,
+        isInvoiceFailedOrExpired,
+        invoiceStatus
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: "Available Addresses" }),
+      accountReceiveResult.addresses.map((address) => {
+        const network = NETWORK_CONFIG[address.network];
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "group flex cursor-pointer items-center gap-2 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card px-2.5 py-1.5 shadow-raised",
+              "transition-all hover-gradient-violet hover:shadow-card-hover active:scale-[0.98]"
+            ),
+            style: { borderLeftWidth: 3, borderLeftColor: network.color },
+            onClick: () => void copyToClipboard(address.value),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: cn("flex size-5 flex-shrink-0 items-center justify-center rounded-md", network.bg), children: network.icon }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx("p", { className: cn(eyebrow, network.text), children: address.label }),
+                  (() => {
+                    const amountLabel = formatSatsForRow(address.amountSats);
+                    return amountLabel ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-secondary/15 px-1.5 py-0.5 text-tiny font-bold tabular-nums text-secondary-content", children: amountLabel }) : null;
+                  })()
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.value.length > 50 ? `${address.value.slice(0, 18)}...${address.value.slice(-14)}` : address.value })
+              ] }),
+              /* @__PURE__ */ jsx(CopyIcon, { copied: copied === address.value })
+            ]
+          },
+          address.network
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsx(
+      BottomSheet,
+      {
+        open: showEdit,
+        title: "Edit request",
+        icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: Edit, size: "md" }),
+        onClose: () => setShowEdit(false),
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: amountId, children: "Amount (optional)" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: amountId,
+                type: "text",
+                value: amount,
+                onChange: handleAmountChange,
+                placeholder: "Any amount",
+                className: "w-full rounded-xl bg-card/55 bg-gradient-card ring-1 ring-inset ring-secondary/15 hover:ring-secondary/35 px-3 py-2.5 font-mono text-caption font-bold text-foreground shadow-inner transition-all placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/50 focus:shadow-glow-primary-soft",
+                inputMode: "decimal"
+              }
+            ),
+            amount && loading && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 text-xxs text-warning-fg/70", children: [
+              /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-xxs" }),
+              "Updating invoice..."
+            ] })
+          ] }),
+          onDescriptionChange && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: descriptionId, children: "Description (optional)" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: descriptionId,
+                type: "text",
+                value: description ?? "",
+                onChange: (event) => onDescriptionChange(event.target.value),
+                placeholder: "What's this for?",
+                className: "w-full rounded-xl bg-card/55 bg-gradient-card ring-1 ring-inset ring-secondary/15 hover:ring-secondary/35 px-3 py-2.5 text-caption text-foreground shadow-inner transition-all placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/50 focus:shadow-glow-primary-soft"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "cta", className: "w-full", onClick: () => setShowEdit(false), children: "Done" })
+        ] })
+      }
+    )
+  ] });
+}
+
+export {
+  BtcUnifiedReceive
+};

package/dist/web/chunk-KMQN66HU.js

@@ -0,0 +1,27 @@
+"use client";
+import {
+  CopyButton
+} from "./chunk-GEXPB5CG.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/copyable.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Copyable({ value, label, children, mono = true, wrap = false, className }) {
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "copyable", className: cn("inline-flex min-w-0 max-w-full items-center gap-1", className), children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        title: value,
+        className: cn("min-w-0 select-all text-foreground", wrap ? "break-all" : "truncate", mono && "font-mono text-caption"),
+        children: children ?? value
+      }
+    ),
+    /* @__PURE__ */ jsx(CopyButton, { value, label })
+  ] });
+}
+
+export {
+  Copyable
+};

package/dist/web/chunk-LOGZGZWN.js

@@ -0,0 +1 @@
+"use client";

package/dist/web/chunk-LPDB7EHH.js

@@ -0,0 +1,65 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/status-badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatusBadge({ status, className }) {
+  const config = {
+    success: {
+      color: "text-brand",
+      bg: "bg-primary/10",
+      icon: "check_circle",
+      label: "Success"
+    },
+    completed: {
+      color: "text-brand",
+      bg: "bg-primary/10",
+      icon: "check_circle",
+      label: "Completed"
+    },
+    pending: {
+      color: "text-warning-fg",
+      bg: "bg-warning/10",
+      icon: "schedule",
+      label: "Pending"
+    },
+    failed: {
+      color: "text-danger-fg",
+      bg: "bg-danger/10",
+      icon: "error",
+      label: "Failed"
+    },
+    error: {
+      color: "text-danger-fg",
+      bg: "bg-danger/10",
+      icon: "error",
+      label: "Error"
+    }
+  };
+  const { color, bg, icon, label } = config[status];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "status-badge",
+      className: cn(
+        "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full font-medium text-caption",
+        bg,
+        color,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-icon-sm translate-y-px" }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+
+export {
+  StatusBadge
+};

package/dist/web/chunk-LSY4DY2I.js

@@ -0,0 +1,72 @@
+"use client";
+import {
+  colors
+} from "./chunk-A7MPRLJL.js";
+
+// src/tokens/brand.ts
+var brandMark = {
+  violet: "#6F32FF",
+  green: "#17B581",
+  mint: "#15E99A"
+};
+var themedForeground = {
+  light: {
+    // Brand green at full saturation (no red), as light as it goes and still
+    // clears 4.5:1 on every light surface (4.55:1 on #EFEFF4).
+    brand: "#007D49",
+    "accent-send-fg": "#6428F0",
+    "accent-recv-fg": "#007D49",
+    "success-fg": "#076A43",
+    // a shade under brand: it also sits on a 14% mint tint
+    // Tailwind -800 shades: -700 measured only 3.7 to 4.3:1 on the light ramp.
+    "warning-fg": "#92400E",
+    "danger-fg": "#991B1B",
+    "info-fg": "#1E40AF",
+    "network-bitcoin-fg": "#92400E",
+    "network-lightning-fg": "#854D0E",
+    "network-liquid-fg": "#115E59",
+    "network-arkade-fg": "#5B21B6",
+    "network-spark-fg": "#0D0C14",
+    // Spark is black on light
+    "network-rgb-fg": "#991B1B",
+    "network-taproot-fg": "#464A69"
+  },
+  dark: {
+    brand: colors.primary,
+    "accent-send-fg": "#AD94FB",
+    "accent-recv-fg": colors.primary,
+    "success-fg": colors.success,
+    "warning-fg": colors.warning,
+    // danger #E53535 and info #4290FF are 3.0:1 and 3.2:1 on the elevated
+    // surface. Same hues, lifted until they clear 4.5:1.
+    "danger-fg": "#FF9999",
+    "info-fg": "#8BBDFF",
+    "network-bitcoin-fg": colors.networkText.bitcoin,
+    "network-lightning-fg": colors.networkText.lightning,
+    "network-liquid-fg": colors.networkText.liquid,
+    // The rgb and arkade *-text tokens dip under 4.5:1 on the elevated
+    // surface (3.9 and 4.1), so their -fg twins are lifted a step.
+    "network-arkade-fg": "#B49CF5",
+    "network-spark-fg": colors.network.spark,
+    // and white on dark
+    "network-rgb-fg": "#F09490",
+    "network-taproot-fg": colors.networkText.taproot
+  }
+};
+var themedForegroundOrder = Object.keys(themedForeground.light);
+var halo = {
+  primary: colors.tx.receive,
+  secondary: brandMark.violet,
+  blur: "110px"
+};
+var brandTheme = {
+  /** AA-safe light primary: white on it is 6.3:1, it is 5.1:1 on the light ramp. */
+  lightPrimary: themedForeground.light.brand,
+  /** Lifted dark status colours (see `themedForeground.dark`). */
+  darkDanger: themedForeground.dark["danger-fg"],
+  darkInfo: themedForeground.dark["info-fg"]
+};
+
+export {
+  brandMark
+};

package/dist/web/chunk-LYLWGJ4R.js

@@ -0,0 +1,66 @@
+"use client";
+import {
+  defaultChartFormat
+} from "./chunk-CXLGQSHM.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Error,
+  Warning
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/charts/meter.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Meter({
+  label,
+  value,
+  max,
+  warnAt = 0.75,
+  dangerAt = 0.9,
+  formatValue = defaultChartFormat,
+  className
+}) {
+  const ratio = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
+  const state = ratio >= dangerAt ? "danger" : ratio >= warnAt ? "warning" : "normal";
+  const fill = { normal: "bg-primary bg-gradient-primary", warning: "bg-warning bg-gradient-warning", danger: "bg-danger bg-gradient-danger" }[state];
+  const track = { normal: "bg-primary/15", warning: "bg-warning/15", danger: "bg-danger/15" }[state];
+  const percent = Math.round(ratio * 100);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "meter", "data-state": state, className: cn("space-y-1.5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3 text-caption", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "font-semibold tabular-nums text-foreground", children: [
+        formatValue(value),
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: "font-normal text-muted-foreground", children: [
+          "/ ",
+          formatValue(max)
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "meter",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        "aria-valuetext": `${formatValue(value)} of ${formatValue(max)}, ${percent}%`,
+        "aria-label": typeof label === "string" ? label : void 0,
+        className: cn("h-2 overflow-hidden rounded-full shadow-inner", track),
+        children: /* @__PURE__ */ jsx("div", { className: cn("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", fill), style: { width: `${ratio * 100}%` } })
+      }
+    ),
+    state !== "normal" && /* @__PURE__ */ jsxs("p", { className: cn("m-0 flex items-center gap-1 text-caption", state === "danger" ? "text-danger-fg" : "text-warning-fg"), children: [
+      /* @__PURE__ */ jsx(IconGlyph, { glyph: state === "danger" ? Error : Warning, className: "text-icon-sm" }),
+      state === "danger" ? `Almost full \xB7 ${percent}%` : `Getting full \xB7 ${percent}%`
+    ] })
+  ] });
+}
+
+export {
+  Meter
+};