kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-CJATW6EO.js

@@ -0,0 +1,108 @@
+"use client";
+import {
+  formatAmount
+} from "./chunk-VM6AGMYO.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/withdraw-invoice-info.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function getAssetPrecisionForId(allAssets, assetId) {
+  return allAssets.find((asset) => asset.asset_id === assetId)?.precision ?? 0;
+}
+function formatRawAmount(amount, precision) {
+  return (amount / Math.pow(10, precision)).toLocaleString("en-US", {
+    maximumFractionDigits: precision,
+    minimumFractionDigits: 0
+  });
+}
+function WithdrawInvoiceInfo({
+  addressType,
+  decodedLnInvoice,
+  decodedRgbInvoice,
+  allAssets,
+  selectedAssetId,
+  selectedAssetTicker,
+  assetBalance,
+  maxLightningCapacity
+}) {
+  if (decodedLnInvoice && addressType === "lightning") {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 shadow-card", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: "Lightning Invoice" }),
+      decodedLnInvoice.amount != null && decodedLnInvoice.amount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Amount" }),
+        /* @__PURE__ */ jsxs("span", { className: "font-bold text-foreground", children: [
+          formatAmount(decodedLnInvoice.amount),
+          " ",
+          decodedLnInvoice.asset_id ? "units" : "sats"
+        ] })
+      ] }),
+      decodedLnInvoice.asset_id && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Asset" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-caption text-foreground", children: allAssets.find((asset) => asset.asset_id === decodedLnInvoice.asset_id)?.ticker ?? `${decodedLnInvoice.asset_id.substring(0, 12)}...` })
+      ] }),
+      decodedLnInvoice.asset_amount != null && decodedLnInvoice.asset_amount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Asset Amount" }),
+        /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground", children: formatAmount(decodedLnInvoice.asset_amount) })
+      ] }),
+      decodedLnInvoice.description && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Description" }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[180px] truncate text-right text-foreground", children: decodedLnInvoice.description })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Channel Capacity" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
+          formatAmount(Math.floor(maxLightningCapacity / 1e3)),
+          " sats"
+        ] })
+      ] })
+    ] });
+  }
+  if (decodedRgbInvoice && addressType === "rgb") {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 shadow-card", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: "RGB Invoice" }),
+      decodedRgbInvoice.asset_id && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Asset" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-caption text-foreground", children: allAssets.find((asset) => asset.asset_id === decodedRgbInvoice.asset_id)?.ticker ?? `${decodedRgbInvoice.asset_id.substring(0, 8)}...${decodedRgbInvoice.asset_id.slice(-8)}` })
+      ] }),
+      decodedRgbInvoice.assignment?.value != null && decodedRgbInvoice.assignment.value > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Requested Amount" }),
+        /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground", children: formatRawAmount(
+          decodedRgbInvoice.assignment.value,
+          getAssetPrecisionForId(allAssets, decodedRgbInvoice.asset_id ?? selectedAssetId)
+        ) })
+      ] }),
+      decodedRgbInvoice.recipient_type && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Recipient Type" }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground", children: decodedRgbInvoice.recipient_type })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Your Balance" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
+          formatRawAmount(assetBalance, getAssetPrecisionForId(allAssets, selectedAssetId)),
+          " ",
+          selectedAssetTicker ?? "units"
+        ] })
+      ] })
+    ] });
+  }
+  if (addressType === "bitcoin" || addressType === "arkade" || addressType === "liquid") {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 shadow-card", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-body", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: addressType === "arkade" ? "Available Arkade Balance" : addressType === "liquid" ? "Available Liquid Balance" : "Available Balance" }),
+      /* @__PURE__ */ jsxs("span", { className: "font-bold text-foreground", children: [
+        formatRawAmount(assetBalance, getAssetPrecisionForId(allAssets, selectedAssetId)),
+        " ",
+        selectedAssetTicker ?? "sats"
+      ] })
+    ] }) });
+  }
+  return null;
+}
+
+export {
+  WithdrawInvoiceInfo
+};

package/dist/web/chunk-CRDCVB5X.js

@@ -0,0 +1,96 @@
+"use client";
+import {
+  ChartFrame,
+  defaultChartFormat,
+  seriesColor
+} from "./chunk-EK5N3ZPW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/charts/bar-list.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function BarList({
+  items,
+  label,
+  formatValue = defaultChartFormat,
+  max,
+  sort = "none",
+  showPercent = true,
+  empty,
+  className,
+  ...head
+}) {
+  if (items.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: empty ?? null });
+  const rows = sort === "desc" ? [...items].sort((a, b) => b.value - a.value) : items;
+  const top = Math.max(max ?? 0, ...rows.map((item) => item.value), 0) || 1;
+  const sum = rows.reduce((acc, item) => acc + Math.max(0, item.value), 0);
+  const percentOf = (item) => formatPercent(item.percent ?? (sum > 0 ? Math.max(0, item.value) / sum : 0));
+  const framed = head.title !== void 0 || (head.timeframes?.length ?? 0) > 0;
+  const list = /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "bar-list",
+      "aria-label": label,
+      className: cn(
+        "m-0 grid list-none items-center gap-x-3 gap-y-2 p-0 text-caption",
+        // Under a head, a little more air than the plots' own top margin.
+        framed && "pt-2",
+        showPercent ? "grid-cols-[auto_1fr_auto_auto]" : "grid-cols-[auto_1fr_auto]",
+        className
+      ),
+      children: rows.map((item) => {
+        const share = Math.max(0, item.value) / top;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "data-slot": "bar-list-row",
+            className: "col-span-full grid grid-cols-subgrid items-center",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "max-w-[10rem] truncate text-muted-foreground", children: item.label }),
+              /* @__PURE__ */ jsx("span", { className: "h-2 overflow-hidden rounded-full bg-secondary/15 shadow-inner", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "block h-full rounded-full",
+                  style: {
+                    width: `${share * 100}%`,
+                    // A non-zero value keeps a sliver, so it never reads as zero.
+                    minWidth: item.value > 0 ? 4 : 0,
+                    background: seriesColor(0)
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsx("span", { className: "text-right font-semibold tabular-nums text-foreground", children: item.valueText ?? formatValue(item.value) }),
+              showPercent && /* @__PURE__ */ jsx("span", { className: "text-right tabular-nums text-muted-foreground", children: percentOf(item) })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+  if (!framed) return list;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...head,
+      label,
+      table: {
+        columns: showPercent ? ["Item", "Value", "Percent"] : ["Item", "Value"],
+        rows: rows.map((item) => {
+          const value = item.valueText ?? formatValue(item.value);
+          return showPercent ? [item.label, value, percentOf(item)] : [item.label, value];
+        })
+      },
+      children: list
+    }
+  );
+}
+function formatPercent(fraction) {
+  if (fraction > 0 && fraction < 5e-3) return "<1%";
+  return `${Math.round(fraction * 100)}%`;
+}
+
+export {
+  BarList
+};

package/dist/web/chunk-CRMLYZIX.js

@@ -0,0 +1,35 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/popover.tsx
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverClose = PopoverPrimitive.Close;
+var floatingSurface = "z-50 rounded-2xl bg-popover bg-gradient-card-hero text-popover-foreground shadow-popover outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-[0.98] data-[state=closed]:zoom-out-[0.98] motion-reduce:animate-none";
+var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    "data-slot": "popover-content",
+    align,
+    sideOffset,
+    className: cn(floatingSurface, "w-72 max-w-[calc(100vw-2rem)] p-4 text-caption", className),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverAnchor,
+  PopoverClose,
+  floatingSurface,
+  PopoverContent
+};

package/dist/web/chunk-CXMCWSWC.js

@@ -0,0 +1,20 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/dotted-leader.tsx
+import { jsx } from "react/jsx-runtime";
+function DottedLeader({ className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn("min-w-4 flex-1 self-center border-b border-solid border-foreground/15", className)
+    }
+  );
+}
+
+export {
+  DottedLeader
+};

package/dist/web/chunk-CZPNI33A.js

@@ -0,0 +1,31 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/status-icon-badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var STATUS_UI = {
+  completed: { icon: "check", className: "bg-primary bg-gradient-primary text-primary-foreground" },
+  success: { icon: "check", className: "bg-primary bg-gradient-primary text-primary-foreground" },
+  failed: { icon: "close", className: "bg-danger text-white" },
+  error: { icon: "close", className: "bg-danger text-white" },
+  pending: { icon: "schedule", className: "bg-warning text-background" }
+};
+var FALLBACK_UI = { icon: "remove", className: "bg-muted text-muted-foreground" };
+var iconBadgeOverlayClass = "absolute -bottom-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full ring-2 ring-card";
+function StatusIconBadge({ icon, status, className }) {
+  const ui = status ? STATUS_UI[status] ?? FALLBACK_UI : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative shrink-0", className), children: [
+    icon,
+    ui && /* @__PURE__ */ jsx("span", { className: cn(iconBadgeOverlayClass, ui.className), children: /* @__PURE__ */ jsx(Icon, { name: ui.icon, className: "size-3" }) })
+  ] });
+}
+
+export {
+  iconBadgeOverlayClass,
+  StatusIconBadge
+};

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
+};