kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-D5CPIS6B.js

@@ -0,0 +1,169 @@
+"use client";
+import {
+  formatAmount
+} from "./chunk-VM6AGMYO.js";
+import {
+  AssetIcon
+} from "./chunk-SGXLWU4V.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-DCUAE6PX.js

@@ -0,0 +1,202 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/scroll-area.tsx
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function readPxToken(name, fallback) {
+  if (typeof window === "undefined") return fallback;
+  const value = window.getComputedStyle(document.documentElement).getPropertyValue(name);
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+var hiddenThumb = { offset: 0, length: 0, visible: false };
+function metrics(viewport, axis) {
+  return axis === "y" ? { client: viewport.clientHeight, scroll: viewport.scrollHeight, position: viewport.scrollTop } : { client: viewport.clientWidth, scroll: viewport.scrollWidth, position: viewport.scrollLeft };
+}
+function setScrollPosition(viewport, axis, value) {
+  if (axis === "y") viewport.scrollTop = value;
+  else viewport.scrollLeft = value;
+}
+var pointerAlong = (event, axis) => axis === "y" ? event.clientY : event.clientX;
+function OverlayScrollArea({
+  axis,
+  children,
+  className,
+  viewportClassName,
+  thumbClassName,
+  viewportAs: Viewport = "div",
+  viewportProps,
+  thickness: size = "thin",
+  ...props
+}) {
+  const viewportRef = useRef(null);
+  const trackRef = useRef(null);
+  const dragRef = useRef(null);
+  const [thumb, setThumb] = useState(hiddenThumb);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHoveringThumb, setIsHoveringThumb] = useState(false);
+  const updateThumb = useCallback(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const { client, scroll, position } = metrics(viewport, axis);
+    if (scroll <= client + 1) {
+      setThumb((current) => current.visible ? hiddenThumb : current);
+      return;
+    }
+    const minLength = readPxToken("--spacing-scrollbar-thumb-min", 24);
+    const length = Math.max(minLength, client / scroll * client);
+    const maxOffset = Math.max(0, client - length);
+    const maxScroll = Math.max(1, scroll - client);
+    const offset = position / maxScroll * maxOffset;
+    setThumb(
+      (current) => current.visible && current.offset === offset && current.length === length ? current : { offset, length, visible: true }
+    );
+  }, [axis]);
+  const scrollFromThumbDelta = useCallback((delta, startScroll) => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const { client, scroll } = metrics(viewport, axis);
+    const maxOffset = Math.max(1, client - thumb.length);
+    const maxScroll = Math.max(1, scroll - client);
+    setScrollPosition(viewport, axis, startScroll + delta / maxOffset * maxScroll);
+  }, [axis, thumb.length]);
+  const handleTrackPointerDown = useCallback((event) => {
+    if (event.target !== event.currentTarget) return;
+    const viewport = viewportRef.current;
+    const track = trackRef.current;
+    if (!viewport || !track) return;
+    const rect = track.getBoundingClientRect();
+    const start = axis === "y" ? rect.top : rect.left;
+    const target = pointerAlong(event, axis) - start - thumb.length / 2;
+    const { client, scroll } = metrics(viewport, axis);
+    const maxOffset = Math.max(1, client - thumb.length);
+    const maxScroll = Math.max(1, scroll - client);
+    setScrollPosition(viewport, axis, target / maxOffset * maxScroll);
+  }, [axis, thumb.length]);
+  const handleThumbPointerDown = useCallback((event) => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = {
+      pointerId: event.pointerId,
+      start: pointerAlong(event, axis),
+      startScroll: metrics(viewport, axis).position
+    };
+    setIsHoveringThumb(true);
+    setIsDragging(true);
+  }, [axis]);
+  const handleThumbPointerMove = useCallback((event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    scrollFromThumbDelta(pointerAlong(event, axis) - drag.start, drag.startScroll);
+  }, [axis, scrollFromThumbDelta]);
+  const handleThumbPointerUp = useCallback((event) => {
+    if (dragRef.current?.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    setIsDragging(false);
+    event.currentTarget.releasePointerCapture(event.pointerId);
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    updateThumb();
+    viewport.addEventListener("scroll", updateThumb, { passive: true });
+    window.addEventListener("resize", updateThumb);
+    let resizeObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(updateThumb);
+      resizeObserver.observe(viewport);
+      if (viewport.firstElementChild) {
+        resizeObserver.observe(viewport.firstElementChild);
+      }
+    }
+    return () => {
+      viewport.removeEventListener("scroll", updateThumb);
+      window.removeEventListener("resize", updateThumb);
+      resizeObserver?.disconnect();
+    };
+  }, [updateThumb]);
+  useIsomorphicLayoutEffect(() => {
+    updateThumb();
+  });
+  const vertical = axis === "y";
+  const restVar = size === "thick" ? "var(--spacing-scrollbar-thick)" : "var(--spacing-scrollbar)";
+  const hoverVar = size === "thick" ? "var(--spacing-scrollbar-thick-hover)" : "var(--spacing-scrollbar-hover)";
+  const thickness = isHoveringThumb ? hoverVar : restVar;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative min-h-0 min-w-0 overflow-hidden", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      Viewport,
+      {
+        ...viewportProps,
+        ref: viewportRef,
+        "data-scroll-axis": axis,
+        className: cn(
+          vertical ? "h-full min-h-0 overflow-y-auto" : "w-full min-w-0 overflow-x-auto",
+          "no-scrollbar",
+          viewportClassName
+        ),
+        children
+      }
+    ),
+    thumb.visible && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        ref: trackRef,
+        "data-slot": "scrollbar",
+        "data-orientation": vertical ? "vertical" : "horizontal",
+        "data-thickness": size,
+        className: vertical ? "absolute inset-y-0 right-0 flex justify-end" : "absolute inset-x-0 bottom-0 flex items-end",
+        onPointerEnter: () => setIsHoveringThumb(true),
+        onPointerLeave: () => setIsHoveringThumb(false),
+        onPointerDown: handleTrackPointerDown,
+        style: { zIndex: "var(--z-scrollbar)", ...vertical ? { width: hoverVar } : { height: hoverVar } },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "scrollbar-thumb",
+            className: cn(
+              "absolute rounded-full bg-scrollbar-thumb",
+              vertical ? "right-0 transition-[width,background-color]" : "bottom-0 transition-[height,background-color]",
+              // Held and dragged: a brighter green than the hover.
+              isDragging ? "bg-scrollbar-thumb-active" : isHoveringThumb && "bg-scrollbar-thumb-hover",
+              thumbClassName
+            ),
+            onPointerDown: handleThumbPointerDown,
+            onPointerMove: handleThumbPointerMove,
+            onPointerUp: handleThumbPointerUp,
+            onPointerCancel: handleThumbPointerUp,
+            style: {
+              ...vertical ? { height: thumb.length, width: thickness, transform: `translateY(${thumb.offset}px)` } : { width: thumb.length, height: thickness, transform: `translateX(${thumb.offset}px)` },
+              cursor: isDragging ? "grabbing" : isHoveringThumb ? "grab" : "default"
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function ScrollArea(props) {
+  return /* @__PURE__ */ jsx(OverlayScrollArea, { axis: "y", ...props });
+}
+var VerticalScrollArea = ScrollArea;
+function HorizontalScrollArea(props) {
+  return /* @__PURE__ */ jsx(OverlayScrollArea, { axis: "x", ...props });
+}
+
+export {
+  ScrollArea,
+  VerticalScrollArea,
+  HorizontalScrollArea
+};

package/dist/web/chunk-DUAFJ3CX.js

@@ -0,0 +1,179 @@
+"use client";
+import {
+  HorizontalScrollArea
+} from "./chunk-DCUAE6PX.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 {
+  ArrowDownward,
+  ArrowUpward,
+  SwapVert
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/primitives/table.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultRowCountLabel = (shown, total) => {
+  const of = total ?? shown;
+  return `${shown} of ${of} ${of === 1 ? "row" : "rows"}`;
+};
+function countBodyRows(children) {
+  let count = 0;
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    const type = child.type;
+    if (child.type === TableBody || type.displayName === "TableBody") {
+      React.Children.forEach(child.props.children, (row) => {
+        if (React.isValidElement(row)) count += 1;
+      });
+    }
+  });
+  return count;
+}
+var Table = React.forwardRef(
+  ({ className, children, showRowCount = false, totalRowCount, rowCountLabel = defaultRowCountLabel, ...props }, ref) => {
+    const table = /* @__PURE__ */ jsx(HorizontalScrollArea, { className: "w-full", viewportProps: { "data-slot": "table-scroll" }, children: /* @__PURE__ */ jsx(
+      "table",
+      {
+        ref,
+        "data-slot": "table",
+        className: cn("w-full caption-bottom border-collapse text-caption", className),
+        ...props,
+        children
+      }
+    ) });
+    if (!showRowCount) return table;
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "table-with-count", className: "min-w-0", children: [
+      table,
+      /* @__PURE__ */ jsx("p", { "data-slot": "table-row-count", "aria-live": "polite", className: "m-0 px-4 pt-3 text-caption text-muted-foreground tabular-nums", children: rowCountLabel(countBodyRows(children), totalRowCount) })
+    ] });
+  }
+);
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    "data-slot": "table-header",
+    className: cn("[&_tr]:border-b [&_tr]:border-border [&_tr]:hover:bg-transparent", className),
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    "data-slot": "table-body",
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    "data-slot": "table-footer",
+    className: cn("border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      "data-slot": "table-row",
+      className: cn(
+        // Selected by `aria-selected="true"` (a selectable grid row) or
+        // `data-state="selected"` (a row the consumer marks itself).
+        "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted aria-selected:bg-muted",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var ariaSort = { asc: "ascending", desc: "descending", none: "none" };
+var TableHead = React.forwardRef(
+  ({ className, sortable, sortDirection = "none", onSort, children, ...props }, ref) => {
+    const sortIcon = sortDirection === "asc" ? ArrowUpward : sortDirection === "desc" ? ArrowDownward : SwapVert;
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        ref,
+        "data-slot": "table-head",
+        "aria-sort": sortable ? ariaSort[sortDirection] : void 0,
+        className: cn(
+          "whitespace-nowrap px-4 py-3 text-left align-middle text-muted-foreground [&:has([role=checkbox])]:pr-0",
+          eyebrow,
+          className
+        ),
+        ...props,
+        children: sortable ? /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "xs",
+            "data-slot": "table-sort",
+            onClick: onSort,
+            className: cn(
+              "-ml-2 uppercase tracking-eyebrow font-medium text-mini text-muted-foreground",
+              sortDirection !== "none" && "text-foreground"
+            ),
+            children: [
+              children,
+              /* @__PURE__ */ jsx(IconGlyph, { glyph: sortIcon, size: "sm" })
+            ]
+          }
+        ) : children
+      }
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+var TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    "data-slot": "table-cell",
+    className: cn("px-4 py-3 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    "data-slot": "table-caption",
+    className: cn("mt-4 text-caption text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption
+};