kaleido-ui 0.2.2 → 0.2.4

package/dist/web/chunk-DDMDRAD6.js

@@ -0,0 +1,403 @@
+"use client";
+import {
+  TooltipBubble
+} from "./chunk-YQDCU7ZL.js";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  ChevronLeft,
+  ChevronRight
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/drawer.tsx
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Slot } from "@radix-ui/react-slot";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DrawerContext = React.createContext({ collapsed: false });
+var DrawerOpenContext = React.createContext(void 0);
+var useDrawerCollapsed = () => React.useContext(DrawerContext).collapsed;
+var panel = "flex h-full flex-col border-r border-divider/30 bg-surface-base bg-gradient-card text-foreground shadow-raised";
+var sectionLabel = cn(eyebrow, "text-muted-foreground");
+var DrawerSidebar = React.forwardRef(
+  ({
+    className,
+    children,
+    collapsed = false,
+    onCollapsedChange,
+    header,
+    collapseLabel = "Collapse sidebar",
+    expandLabel = "Expand sidebar",
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      ref,
+      "data-state": collapsed ? "collapsed" : "expanded",
+      className: cn(
+        panel,
+        // Sticky rather than fixed, so the page beside it needs no margin
+        // kept in step with its width.
+        "sticky top-0 h-screen shrink-0 transition-[width] duration-300 ease-in-out motion-reduce:transition-none",
+        collapsed ? "w-20" : "w-72",
+        className
+      ),
+      ...props,
+      children: [
+        (header || onCollapsedChange) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center px-4 py-5", collapsed ? "justify-center" : "justify-between gap-3"), children: [
+          !collapsed && header && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
+          onCollapsedChange && /* @__PURE__ */ jsx(
+            GlyphButton,
+            {
+              icon: collapsed ? ChevronRight : ChevronLeft,
+              label: collapsed ? expandLabel : collapseLabel,
+              "aria-expanded": !collapsed,
+              onClick: () => onCollapsedChange(!collapsed)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          DrawerContext.Provider,
+          {
+            value: { collapsed, expand: onCollapsedChange ? () => onCollapsedChange(false) : void 0 },
+            children
+          }
+        )
+      ]
+    }
+  )
+);
+DrawerSidebar.displayName = "DrawerSidebar";
+var Drawer = ({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  ...props
+}) => {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
+  const open = openProp ?? uncontrolled;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (openProp === void 0) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange]
+  );
+  const close = React.useCallback(() => setOpen(false), [setOpen]);
+  return /* @__PURE__ */ jsx(DrawerOpenContext.Provider, { value: close, children: /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange: setOpen, ...props }) });
+};
+Drawer.displayName = "Drawer";
+var DrawerTrigger = DialogPrimitive.Trigger;
+var DrawerPortal = DialogPrimitive.Portal;
+var DrawerClose = DialogPrimitive.Close;
+var DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-lg data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none",
+      className
+    ),
+    ...props
+  }
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+var DrawerContent = React.forwardRef(({ className, children, header, showClose = true, closeLabel = "Close navigation", ...props }, ref) => {
+  const close = React.useContext(DrawerOpenContext);
+  return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          panel,
+          // The expanded sidebar's width, never more than 85% of the viewport so
+          // a strip of the page stays visible to tap away.
+          "fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] focus:outline-none data-[state=open]:animate-drawer-in-left data-[state=closed]:animate-drawer-out-left motion-reduce:animate-none",
+          className
+        ),
+        ...props,
+        children: [
+          (header || showClose) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-5", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
+            showClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(GlyphButton, { icon: ChevronLeft, label: closeLabel }) })
+          ] }),
+          /* @__PURE__ */ jsx(DrawerContext.Provider, { value: { collapsed: false, close }, children })
+        ]
+      }
+    )
+  ] });
+});
+DrawerContent.displayName = "DrawerContent";
+var DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, className: cn("px-4", sectionLabel, className), ...props }));
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("sr-only", className), ...props }));
+DrawerDescription.displayName = "DrawerDescription";
+var DrawerBody = ({ className, children, ...props }) => /* @__PURE__ */ jsx(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: cn("px-4 py-4", className), ...props, children });
+DrawerBody.displayName = "DrawerBody";
+var DrawerSection = ({ className, label, children, ...props }) => {
+  const { collapsed } = React.useContext(DrawerContext);
+  return /* @__PURE__ */ jsxs("div", { className: cn("group/section [&+&]:mt-6", className), ...props, children: [
+    collapsed ? /* @__PURE__ */ jsx("div", { role: "separator", className: "mx-2 my-3 border-t border-divider/60 group-first/section:hidden" }) : label && /* @__PURE__ */ jsx("div", { className: cn("mb-2 px-4", sectionLabel), children: label }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children })
+  ] });
+};
+DrawerSection.displayName = "DrawerSection";
+var activeIcon = "[&>span[aria-hidden=true]]:text-status-success";
+var activeRow = cn(
+  "bg-primary/10 bg-gradient-active font-semibold text-foreground ring-1 ring-inset ring-primary/40 shadow-nav-active",
+  activeIcon
+);
+var idleRow = "text-content-secondary hover-gradient-violet hover:text-foreground hover:shadow-raised";
+var DrawerGroupContext = React.createContext(false);
+var DrawerNavItem = React.forwardRef(
+  ({ className, icon, label, active = false, asChild = false, disabledReason, children, title, onClick, ...props }, ref) => {
+    const { collapsed, close } = React.useContext(DrawerContext);
+    const nested = React.useContext(DrawerGroupContext);
+    const reasonId = React.useId();
+    const restricted = (rowClassName, row) => /* @__PURE__ */ jsxs("span", { "data-slot": "drawer-nav-item-restricted", className: "group/tooltip relative block", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          role: "link",
+          "aria-disabled": "true",
+          "aria-describedby": reasonId,
+          tabIndex: 0,
+          title,
+          className: cn(rowClassName, "cursor-not-allowed opacity-50 hover:translate-x-0 hover:scale-100"),
+          children: row
+        }
+      ),
+      /* @__PURE__ */ jsx(TooltipBubble, { id: reasonId, placement: collapsed ? "right" : "bottom", children: disabledReason })
+    ] });
+    if (nested) {
+      const row = /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex shrink-0 transition-transform duration-200 hover:scale-110 motion-reduce:transition-none", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: label })
+      ] });
+      const rowProps = {
+        ref,
+        "aria-current": active ? "page" : void 0,
+        title,
+        className: cn(
+          "flex min-w-0 items-center gap-3 rounded-lg px-4 py-2.5 text-caption transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+          active ? cn("bg-primary/10 bg-gradient-active font-semibold text-brand", activeIcon) : "text-content-secondary hover:translate-x-1 hover-gradient-violet hover:text-foreground motion-reduce:hover:translate-x-0",
+          className
+        ),
+        onClick: (event) => {
+          onClick?.(event);
+          close?.();
+        },
+        ...props
+      };
+      if (disabledReason) return restricted(rowProps.className, row);
+      return asChild && React.isValidElement(children) ? /* @__PURE__ */ jsx(Slot, { ...rowProps, children: React.cloneElement(children, void 0, row) }) : /* @__PURE__ */ jsx("a", { ...rowProps, children: row });
+    }
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "flex shrink-0 transition-transform duration-300 group-hover:scale-110 motion-reduce:transition-none",
+          children: icon
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: cn("truncate text-body font-semibold", collapsed && "sr-only"), children: label })
+    ] });
+    const itemProps = {
+      ref,
+      "aria-current": active ? "page" : void 0,
+      title: title ?? (collapsed && typeof label === "string" ? label : void 0),
+      className: cn(
+        "group flex min-w-0 items-center rounded-xl px-4 py-3 transition-all duration-300 hover:scale-[1.02] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring active:scale-95 motion-reduce:transition-none motion-reduce:hover:scale-100",
+        collapsed ? "justify-center" : "gap-4",
+        active ? activeRow : idleRow,
+        className
+      ),
+      // In the mobile drawer, choosing a destination is the end of the errand
+      // -- even when the link prevents the default, as a router link does.
+      onClick: (event) => {
+        onClick?.(event);
+        close?.();
+      },
+      ...props
+    };
+    if (disabledReason) return restricted(itemProps.className, content);
+    const item = asChild && React.isValidElement(children) ? /* @__PURE__ */ jsx(Slot, { ...itemProps, children: React.cloneElement(children, void 0, content) }) : /* @__PURE__ */ jsx("a", { ...itemProps, children: content });
+    return item;
+  }
+);
+DrawerNavItem.displayName = "DrawerNavItem";
+var DrawerNavGroup = ({
+  icon,
+  label,
+  active = false,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  href: hrefProp,
+  railHref,
+  onNavigate,
+  expandGroupLabel,
+  children,
+  className
+}) => {
+  const href = hrefProp ?? railHref;
+  const { collapsed, close, expand } = React.useContext(DrawerContext);
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? active);
+  const open = openProp ?? uncontrolled;
+  const setOpen = (next) => {
+    if (openProp === void 0) setUncontrolled(next);
+    onOpenChange?.(next);
+  };
+  React.useEffect(() => {
+    if (active && openProp === void 0) setUncontrolled(true);
+  }, [active, openProp]);
+  const follow = (event) => {
+    if (!href || !onNavigate) return;
+    event.preventDefault();
+    onNavigate(href);
+  };
+  const panelId = React.useId();
+  const labelId = `${panelId}-label`;
+  const rowClass = cn(
+    "group flex w-full min-w-0 items-center rounded-xl px-4 py-3 text-left transition-all duration-300 hover:scale-[1.02] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring active:scale-95 motion-reduce:transition-none motion-reduce:hover:scale-100",
+    collapsed ? "justify-center" : "gap-4",
+    active ? activeRow : idleRow
+  );
+  const iconNode = icon && /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "flex shrink-0 transition-transform duration-300 group-hover:scale-110 motion-reduce:transition-none",
+      children: icon
+    }
+  );
+  const rowContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconNode,
+    /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 flex-1 truncate text-body font-semibold", children: label }),
+    /* @__PURE__ */ jsx(
+      IconGlyph,
+      {
+        glyph: ChevronRight,
+        className: cn(
+          "shrink-0 text-icon-md transition-all duration-300 motion-reduce:transition-none",
+          open && "rotate-90"
+        )
+      }
+    )
+  ] });
+  if (collapsed) {
+    const railTitle = typeof label === "string" ? label : void 0;
+    return href ? /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href,
+        title: railTitle,
+        className: cn(rowClass, className),
+        onClick: (event) => {
+          follow(event);
+          setOpen(true);
+          expand?.();
+          close?.();
+        },
+        children: [
+          iconNode,
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+        ]
+      }
+    ) : expand ? (
+      // No first page to go to: the icon unfolds the sidebar onto the group, open.
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          title: railTitle,
+          "aria-label": expandGroupLabel ?? (railTitle ? `${railTitle}: expand the sidebar to show its pages` : void 0),
+          className: cn(rowClass, className),
+          onClick: () => {
+            setOpen(true);
+            expand();
+          },
+          children: [
+            iconNode,
+            !expandGroupLabel && !railTitle && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+          ]
+        }
+      )
+    ) : /* @__PURE__ */ jsxs("div", { title: railTitle, className: cn(rowClass, className), children: [
+      iconNode,
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    !open && href ? (
+      // Closed, with a first page: the row is a link there, and opens.
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          "aria-expanded": false,
+          "aria-controls": panelId,
+          className: rowClass,
+          onClick: (event) => {
+            follow(event);
+            setOpen(true);
+            close?.();
+          },
+          children: rowContent
+        }
+      )
+    ) : /* @__PURE__ */ jsx("button", { type: "button", "aria-expanded": open, "aria-controls": panelId, className: rowClass, onClick: () => setOpen(!open), children: rowContent }),
+    open && // A named group, so a screen reader says which submenu its pages belong to.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: panelId,
+        role: "group",
+        "aria-labelledby": labelId,
+        className: "mt-2 space-y-1.5 pl-4 data-[state=open]:animate-fade-in motion-reduce:animate-none",
+        "data-state": "open",
+        children: /* @__PURE__ */ jsx(DrawerGroupContext.Provider, { value: true, children })
+      }
+    )
+  ] });
+};
+DrawerNavGroup.displayName = "DrawerNavGroup";
+var DrawerFooter = ({ className, children, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("px-4 pb-4", className), ...props, children: [
+  /* @__PURE__ */ jsx("div", { role: "separator", className: "mb-4 border-t border-divider/60" }),
+  children
+] });
+DrawerFooter.displayName = "DrawerFooter";
+
+export {
+  useDrawerCollapsed,
+  DrawerSidebar,
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerBody,
+  DrawerSection,
+  DrawerNavItem,
+  DrawerNavGroup,
+  DrawerFooter
+};

package/dist/web/chunk-DH7VXKGM.js

@@ -0,0 +1,247 @@
+"use client";
+import {
+  QrCode
+} from "./chunk-F2LIZX5K.js";
+import {
+  Label
+} from "./chunk-H3GYLFHP.js";
+import {
+  CopyIcon,
+  InvoiceStatusBanner,
+  PaidOverlay
+} from "./chunk-GX7GBHJ6.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Check,
+  ContentCopy,
+  Person,
+  ProgressActivity,
+  Refresh
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/deposit-generated-view.tsx
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function parseAssetAmount(amountString, asset) {
+  const value = Number(amountString);
+  if (!Number.isFinite(value)) return 0;
+  return Math.round(value * Math.pow(10, asset?.precision ?? 0));
+}
+function formatAssetAmount(amount, asset) {
+  const precision = asset?.precision ?? 0;
+  return (amount / Math.pow(10, precision)).toLocaleString("en-US", {
+    maximumFractionDigits: precision,
+    minimumFractionDigits: 0
+  });
+}
+function DepositGeneratedView({
+  network,
+  net,
+  isBtc,
+  address,
+  addressLabel,
+  recipientId,
+  arkSubMode,
+  invoiceStatus,
+  isInvoicePending,
+  isInvoicePaid,
+  isInvoiceFailedOrExpired,
+  amount,
+  handleAmountChange,
+  loading,
+  copied,
+  copyToClipboard,
+  getUnitLabel,
+  selectedAsset,
+  maxDepositAmount,
+  setAddress,
+  setRecipientId,
+  setAmount,
+  setInvoiceStatus,
+  showQrNetworkBadge = true,
+  showRegenerate = true,
+  onRegenerate
+}) {
+  const btcAmountId = useId();
+  const assetAmountId = useId();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
+    (network === "lightning" || network === "arkade" && arkSubMode === "ark") && isBtc && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-2.5 shadow-card", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ jsx(Label, { htmlFor: btcAmountId, children: "Specify amount (optional)" }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: btcAmountId,
+          type: "text",
+          value: amount,
+          onChange: handleAmountChange,
+          placeholder: "Any amount",
+          className: "w-full rounded-lg bg-card/55 bg-gradient-card ring-1 ring-inset ring-secondary/15 hover:ring-secondary/35 px-3 py-1.5 font-mono text-caption font-bold text-foreground shadow-inner transition-all placeholder:text-muted-foreground focus:ring-primary/50 focus:shadow-glow-primary-soft focus:outline-none",
+          inputMode: "decimal"
+        }
+      ),
+      amount && /* @__PURE__ */ jsx("p", { className: "text-xxs text-warning-fg/70", children: loading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-xxs" }),
+        "Updating ",
+        network === "arkade" ? "URI" : "invoice",
+        "..."
+      ] }) : network === "arkade" ? `Unified URI for ${amount} ${getUnitLabel()}` : `Invoice for ${amount} ${getUnitLabel()}` })
+    ] }),
+    network === "lightning" && !isBtc && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-2.5 shadow-card", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ jsx(Label, { htmlFor: assetAmountId, children: "Specify amount (optional)" }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: assetAmountId,
+          type: "text",
+          value: amount,
+          onChange: handleAmountChange,
+          placeholder: selectedAsset?.ticker ? `Any amount (${selectedAsset.ticker})` : "Any amount",
+          className: "w-full rounded-lg bg-card/55 bg-gradient-card ring-1 ring-inset ring-secondary/15 hover:ring-secondary/35 px-3 py-1.5 font-mono text-caption font-bold text-foreground shadow-inner transition-all placeholder:text-muted-foreground focus:ring-primary/50 focus:shadow-glow-primary-soft focus:outline-none",
+          inputMode: "decimal"
+        }
+      ),
+      amount && /* @__PURE__ */ jsx("p", { className: "text-xxs text-warning-fg/70", children: loading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-xxs" }),
+        "Updating invoice..."
+      ] }) : `Invoice for ${amount} ${getUnitLabel()}` }),
+      amount && maxDepositAmount > 0 && parseAssetAmount(amount, selectedAsset) > maxDepositAmount && /* @__PURE__ */ jsxs("p", { className: "rounded-lg bg-danger/10 px-2.5 py-1.5 text-xxs text-danger-fg", children: [
+        "Exceeds max: ",
+        formatAssetAmount(maxDepositAmount, selectedAsset),
+        " ",
+        getUnitLabel()
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative flex flex-col items-center rounded-2xl bg-white p-3.5 transition-all",
+          style: net.qrGlow,
+          children: [
+            showQrNetworkBadge && network !== "spark" && network !== "arkade" && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "absolute right-2.5 top-2.5 flex items-center gap-1 rounded-full bg-foreground/90 px-1.5 py-0.5 text-xxs font-bold shadow-sm",
+                  net.text
+                ),
+                children: [
+                  net.icon,
+                  /* @__PURE__ */ jsx("span", { children: net.label })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(QrCode, { value: address, size: 188 }),
+            isInvoicePaid && /* @__PURE__ */ jsx(PaidOverlay, {}),
+            loading && !isInvoicePaid && // Loading scrim — sits over the QR while a fresh address/invoice
+            // is being fetched (e.g. after the New Address button).
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center rounded-2xl bg-foreground/80 backdrop-blur-sm", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-3xl text-network-bitcoin-fg" }) })
+          ]
+        }
+      ),
+      (() => {
+        const isAddressCopied = copied === address;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "flex items-center gap-1 rounded-full px-2.5 py-1 transition-all",
+              eyebrow,
+              isAddressCopied ? "bg-primary/10 text-brand shadow-glow-primary-soft" : "bg-secondary/15 text-secondary-content shadow-raised hover-gradient-violet hover:text-foreground"
+            ),
+            onClick: (event) => {
+              event.stopPropagation();
+              void copyToClipboard(address);
+            },
+            children: [
+              /* @__PURE__ */ jsx(IconGlyph, { glyph: isAddressCopied ? Check : ContentCopy, size: "xs" }),
+              isAddressCopied ? "Copied" : network === "lightning" ? "Copy Invoice" : "Copy Address"
+            ]
+          }
+        );
+      })()
+    ] }),
+    network === "lightning" && invoiceStatus && /* @__PURE__ */ jsx(
+      InvoiceStatusBanner,
+      {
+        isInvoicePending,
+        isInvoicePaid,
+        isInvoiceFailedOrExpired,
+        invoiceStatus
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "deposit-generated-address",
+        "data-address": address,
+        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-card",
+          "transition-all hover-gradient-violet hover:shadow-card-hover active:scale-[0.98]"
+        ),
+        onClick: () => void copyToClipboard(address),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: cn("flex size-5 flex-shrink-0 items-center justify-center rounded-md", net.bg), children: net.icon }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: cn(eyebrow, net.text), children: /* @__PURE__ */ jsx("span", { "data-testid": "deposit-address-label", children: addressLabel }) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.length > 50 ? `${address.slice(0, 18)}...${address.slice(-14)}` : address })
+          ] }),
+          /* @__PURE__ */ jsx(CopyIcon, { copied: copied === address })
+        ]
+      }
+    ),
+    recipientId && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group flex cursor-pointer items-center gap-2 rounded-xl bg-primary/10 px-2.5 py-1.5 shadow-raised",
+          "transition-all hover:bg-primary/15 active:scale-[0.98]"
+        ),
+        onClick: () => void copyToClipboard(recipientId),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex size-5 flex-shrink-0 items-center justify-center rounded-md bg-primary/15", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Person, size: "xs", className: "text-brand" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: cn("text-brand", eyebrow), children: "Recipient ID" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: recipientId.length > 50 ? `${recipientId.slice(0, 18)}...${recipientId.slice(-14)}` : recipientId })
+          ] }),
+          /* @__PURE__ */ jsx(CopyIcon, { copied: copied === recipientId })
+        ]
+      }
+    ),
+    showRegenerate && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ jsx(
+      GlyphButton,
+      {
+        label: `New ${network === "lightning" ? "invoice" : "address"}`,
+        variant: "secondary",
+        disabled: loading,
+        onClick: () => {
+          if (onRegenerate) {
+            void onRegenerate();
+            return;
+          }
+          setAddress("");
+          setRecipientId("");
+          setAmount("");
+          setInvoiceStatus(null);
+        },
+        icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: Refresh, "aria-hidden": "true", className: cn(loading && "animate-spin motion-reduce:animate-none") })
+      }
+    ) })
+  ] });
+}
+
+export {
+  DepositGeneratedView
+};