@orangecheck/design 0.2.0 → 0.3.0

package/dist/index.js

@@ -15,8 +15,11 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var SelectPrimitive = require('@radix-ui/react-select');
 var sonner = require('sonner');
+var QRCode = require('qrcode');
 var ui_star = require('@orangecheck/ui');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -42,6 +45,7 @@ var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive)
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
 var ui_star__namespace = /*#__PURE__*/_interopNamespace(ui_star);
 
 var __defProp = Object.defineProperty;
@@ -75,8 +79,12 @@ __export(src_exports, {
   AlertWithAction: () => AlertWithAction,
   AlertWithCountdown: () => AlertWithCountdown,
   Badge: () => Badge,
+  Bar: () => Bar,
+  BitcoinAddress: () => BitcoinAddress,
   Button: () => Button,
+  Card: () => Card,
   ConfirmHost: () => ConfirmHost,
+  CopyButton: () => CopyButton,
   DEFAULT_OC_THEME: () => DEFAULT_OC_THEME,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
@@ -103,6 +111,9 @@ __export(src_exports, {
   PopoverContent: () => PopoverContent,
   PopoverTrigger: () => PopoverTrigger,
   PromptHost: () => PromptHost,
+  QrCode: () => QrCode,
+  REFERENCE_BTC_USD: () => REFERENCE_BTC_USD,
+  SatsAmount: () => SatsAmount,
   Select: () => Select,
   SelectContent: () => SelectContent,
   SelectGroup: () => SelectGroup,
@@ -123,6 +134,9 @@ __export(src_exports, {
   SheetTitle: () => SheetTitle,
   SheetTrigger: () => SheetTrigger,
   Skeleton: () => Skeleton,
+  Sparkline: () => Sparkline,
+  StatBlock: () => StatBlock,
+  StatusPill: () => StatusPill,
   Textarea: () => Textarea,
   ThemeToggle: () => ThemeToggle,
   ThemeToggleLink: () => ThemeToggleLink,
@@ -133,10 +147,18 @@ __export(src_exports, {
   buttonVariants: () => buttonVariants,
   cn: () => cn,
   confirm: () => confirm,
+  explorerUrl: () => explorerUrl,
+  formatSats: () => formatSats,
+  formatSatsCompact: () => formatSatsCompact,
   getOcThemeInitScript: () => getOcThemeInitScript,
   isKnownTheme: () => isKnownTheme,
+  priceBoth: () => priceBoth,
   prompt: () => prompt,
+  relativeTime: () => relativeTime,
   resolveTheme: () => resolveTheme,
+  satsToUsd: () => satsToUsd,
+  shortenAddress: () => shortenAddress,
+  usdToSats: () => usdToSats,
   useOcSkin: () => useOcSkin
 });
 function cn(...inputs) {
@@ -1503,6 +1525,345 @@ var Toaster = ({ ...props }) => {
     }
   );
 };
+function Card({
+  id,
+  title,
+  subtitle,
+  refreshedAt,
+  actions,
+  children,
+  className,
+  tone = "default",
+  expandable = true
+}) {
+  const [expanded, setExpanded] = React2.useState(false);
+  const toneClass = tone === "warning" ? "border-warning/60" : tone === "destructive" ? "border-destructive/60" : tone === "muted" ? "border-border opacity-90" : "border-border";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        id,
+        className: cn("terminal flex flex-col rounded-sm border scroll-mt-16", toneClass, className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "terminal-title flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "terminal-dot", "aria-hidden": true }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "terminal-dot opacity-70", "aria-hidden": true }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "terminal-dot opacity-50", "aria-hidden": true }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 truncate", children: title }),
+              subtitle && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground/70 ml-1 truncate text-[10px] tracking-normal normal-case", children: [
+                "\xB7 ",
+                subtitle
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              refreshedAt && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/60 hidden text-[10px] tracking-normal normal-case sm:inline", children: refreshedAt }),
+              actions,
+              expandable && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setExpanded(true),
+                  "aria-label": `expand ${title}`,
+                  title: "expand to fullscreen",
+                  className: "text-muted-foreground/70 hover:text-foreground inline-flex h-6 w-6 items-center justify-center rounded-sm",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "size-3" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 p-4 sm:p-5", children })
+        ]
+      }
+    ),
+    expandable && /* @__PURE__ */ jsxRuntime.jsx(
+      Modal,
+      {
+        open: expanded,
+        onOpenChange: setExpanded,
+        title,
+        ...subtitle ? { subtitle } : {},
+        actions: refreshedAt ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/60 hidden text-[10px] tracking-normal normal-case sm:inline", children: refreshedAt }) : null,
+        children
+      }
+    )
+  ] });
+}
+function Sparkline({ data, width = 96, height = 24, area = false, className }) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("svg", { width, height, className: cn(className), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: 0,
+        x2: width,
+        y1: height / 2,
+        y2: height / 2,
+        stroke: "currentColor",
+        strokeWidth: 1,
+        opacity: 0.25
+      }
+    ) });
+  }
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const step = data.length === 1 ? width : width / (data.length - 1);
+  const points = data.map((v, i) => {
+    const x = i * step;
+    const y = height - (v - min) / range * (height - 2) - 1;
+    return [x, y];
+  });
+  const linePath = points.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
+  const areaPath = area ? `${linePath} L${width.toFixed(2)},${height.toFixed(2)} L0,${height.toFixed(2)} Z` : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("text-primary", className),
+      "aria-hidden": true,
+      children: [
+        areaPath && /* @__PURE__ */ jsxRuntime.jsx("path", { d: areaPath, fill: "currentColor", opacity: 0.12 }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: linePath, fill: "none", stroke: "currentColor", strokeWidth: 1.25 })
+      ]
+    }
+  );
+}
+function StatBlock({ label, value, sub, delta, tone = "default", className }) {
+  const toneClass = tone === "success" ? "text-success" : tone === "warning" ? "text-warning" : tone === "destructive" ? "text-destructive" : "text-foreground";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "label-mono text-[10px]", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-display text-2xl leading-none", toneClass), children: value }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
+      sub && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[11px] tracking-wide lowercase", children: sub }),
+      delta && /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: cn(
+            "font-mono text-[11px] tracking-wide",
+            delta.value > 0 ? "text-success" : delta.value < 0 ? "text-destructive" : "text-muted-foreground"
+          ),
+          children: [
+            delta.value > 0 ? "\u25B2" : delta.value < 0 ? "\u25BC" : "\xB7",
+            " ",
+            Math.abs(delta.value).toFixed(1),
+            delta.suffix ?? "%"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var ACCENT = {
+  primary: "bg-primary",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+  success: "bg-success"
+};
+function Bar({ pct, accent = "primary", label, right, className }) {
+  const clamped = Math.max(0, Math.min(100, pct));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(className), children: [
+    (label || right) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between font-mono text-[10.5px] tracking-widest uppercase", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: label }),
+      right && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground tabular-nums", children: right })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted mt-1.5 h-1.5 w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-full", ACCENT[accent]), style: { width: `${clamped}%` } }) })
+  ] });
+}
+var TONE = {
+  success: "text-success",
+  warning: "text-warning",
+  destructive: "text-destructive",
+  muted: "text-muted-foreground",
+  primary: "text-primary",
+  info: "text-info"
+};
+function StatusPill({ label, tone = "muted", icon, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 font-mono text-[11px] tracking-wider lowercase",
+        TONE[tone],
+        className
+      ),
+      children: [
+        icon,
+        label
+      ]
+    }
+  );
+}
+
+// src/format/index.ts
+var REFERENCE_BTC_USD = 95e3;
+function formatSats(sats) {
+  return new Intl.NumberFormat("en-US").format(Math.round(sats));
+}
+function formatSatsCompact(sats) {
+  const n = Math.round(sats);
+  if (n < 1e3) return `${n} sats`;
+  const k = n / 1e3;
+  return `${Number.isInteger(k) ? k : k.toFixed(1)}k sats`;
+}
+function satsToUsd(sats, btcUsd = REFERENCE_BTC_USD) {
+  const usd = sats / 1e8 * btcUsd;
+  if (usd > 0 && usd < 0.01) return "< $0.01";
+  const fractionDigits = usd >= 100 ? 0 : 2;
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits
+  }).format(usd);
+}
+function usdToSats(usd, btcUsd = REFERENCE_BTC_USD) {
+  return Math.round(usd / btcUsd * 1e8);
+}
+function priceBoth(sats, btcUsd = REFERENCE_BTC_USD) {
+  return `${formatSats(sats)} sats \xB7 ${satsToUsd(sats, btcUsd)}`;
+}
+function relativeTime(when) {
+  const t = when instanceof Date ? when.getTime() : new Date(when).getTime();
+  if (Number.isNaN(t)) return "";
+  const diff = Date.now() - t;
+  const m = Math.floor(diff / 6e4);
+  if (m < 1) return "now";
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.floor(h / 24);
+  if (d < 30) return `${d}d ago`;
+  const mo = Math.floor(d / 30);
+  if (mo < 12) return `${mo}mo ago`;
+  return `${Math.floor(mo / 12)}y ago`;
+}
+function shortenAddress(value, head = 8, tail = 4) {
+  if (!value) return "";
+  if (value.length <= head + tail + 1) return value;
+  return `${value.slice(0, head)}\u2026${value.slice(-tail)}`;
+}
+function explorerUrl(target, network = "mainnet") {
+  const base = network === "mainnet" ? "https://mempool.space" : `https://mempool.space/${network}`;
+  if ("address" in target) return `${base}/address/${target.address}`;
+  if ("tx" in target) return `${base}/tx/${target.tx}`;
+  return `${base}/block/${target.block}`;
+}
+function SatsAmount({ sats, unit = true, usd = false, btcUsd, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("font-mono tabular-nums", className), children: [
+    formatSats(sats),
+    unit && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: " sats" }),
+    usd && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+      " \xB7 ",
+      satsToUsd(sats, btcUsd)
+    ] })
+  ] });
+}
+function CopyButton({
+  value,
+  label,
+  clearAfter,
+  size = "md",
+  className,
+  title,
+  onCopied
+}) {
+  const [copied, setCopied] = React2.useState(false);
+  const resetRef = React2.useRef(null);
+  const copy = React2.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      onCopied?.();
+      if (resetRef.current) clearTimeout(resetRef.current);
+      resetRef.current = setTimeout(() => setCopied(false), 1500);
+      if (clearAfter && clearAfter > 0) {
+        setTimeout(() => void wipeIfUnchanged(value), clearAfter * 1e3);
+      }
+    } catch {
+    }
+  }, [value, clearAfter, onCopied]);
+  const iconSize = size === "sm" ? "size-3" : "size-3.5";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: copy,
+      "aria-label": title ?? (copied ? "copied" : "copy"),
+      title: title ?? "copy",
+      className: cn(
+        "text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 rounded-sm transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        size === "sm" ? "text-[11px]" : "text-xs",
+        className
+      ),
+      children: [
+        copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn(iconSize, "text-success"), "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: iconSize, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: copied ? "copied" : label })
+      ]
+    }
+  );
+}
+async function wipeIfUnchanged(expected) {
+  try {
+    const current = await navigator.clipboard.readText();
+    if (current !== expected) return;
+    await navigator.clipboard.writeText("");
+  } catch {
+    try {
+      await navigator.clipboard.writeText("");
+    } catch {
+    }
+  }
+}
+function BitcoinAddress({
+  address,
+  head = 8,
+  tail = 4,
+  copyable = true,
+  full = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("inline-flex items-center gap-1.5 font-mono text-xs", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { title: address, children: full ? address : shortenAddress(address, head, tail) }),
+    copyable && /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: address, size: "sm", title: "copy address" })
+  ] });
+}
+function QrCode({ value, size = 200, label, className }) {
+  const [svg, setSvg] = React2.useState(null);
+  React2.useEffect(() => {
+    let cancelled = false;
+    QRCode__default.default.toString(value, {
+      type: "svg",
+      errorCorrectionLevel: "M",
+      margin: 1,
+      color: { dark: "#000000", light: "#ffffff" }
+    }).then((out) => {
+      if (!cancelled) setSvg(out);
+    }).catch(() => {
+      if (!cancelled) setSvg(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "img",
+      "aria-label": label ?? `QR code for ${value.slice(0, 24)}\u2026`,
+      className: "inline-block overflow-hidden rounded-md bg-white p-3 " + (className ?? ""),
+      style: { width: size, height: size },
+      children: svg ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "size-full [&_svg]:block [&_svg]:size-full",
+          dangerouslySetInnerHTML: { __html: svg }
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted/40 size-full animate-pulse rounded", "aria-hidden": true })
+    }
+  );
+}
 
 // src/components/index.ts
 var components_exports = {};
@@ -1521,8 +1882,12 @@ exports.AlertTitle = AlertTitle;
 exports.AlertWithAction = AlertWithAction;
 exports.AlertWithCountdown = AlertWithCountdown;
 exports.Badge = Badge;
+exports.Bar = Bar;
+exports.BitcoinAddress = BitcoinAddress;
 exports.Button = Button;
+exports.Card = Card;
 exports.ConfirmHost = ConfirmHost;
+exports.CopyButton = CopyButton;
 exports.DEFAULT_OC_THEME = DEFAULT_OC_THEME;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
@@ -1549,6 +1914,9 @@ exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.PromptHost = PromptHost;
+exports.QrCode = QrCode;
+exports.REFERENCE_BTC_USD = REFERENCE_BTC_USD;
+exports.SatsAmount = SatsAmount;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -1569,6 +1937,9 @@ exports.SheetPortal = SheetPortal;
 exports.SheetTitle = SheetTitle;
 exports.SheetTrigger = SheetTrigger;
 exports.Skeleton = Skeleton;
+exports.Sparkline = Sparkline;
+exports.StatBlock = StatBlock;
+exports.StatusPill = StatusPill;
 exports.Textarea = Textarea;
 exports.ThemeToggle = ThemeToggle;
 exports.ThemeToggleLink = ThemeToggleLink;
@@ -1579,10 +1950,18 @@ exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;
 exports.confirm = confirm;
+exports.explorerUrl = explorerUrl;
+exports.formatSats = formatSats;
+exports.formatSatsCompact = formatSatsCompact;
 exports.getOcThemeInitScript = getOcThemeInitScript;
 exports.isKnownTheme = isKnownTheme;
+exports.priceBoth = priceBoth;
 exports.prompt = prompt;
+exports.relativeTime = relativeTime;
 exports.resolveTheme = resolveTheme;
+exports.satsToUsd = satsToUsd;
+exports.shortenAddress = shortenAddress;
+exports.usdToSats = usdToSats;
 exports.useOcSkin = useOcSkin;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map