@orangecheck/design 0.1.1 → 0.3.0

package/dist/index.mjs

@@ -2,9 +2,9 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React2 from 'react';
 import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTheme } from 'next-themes';
-import { ChevronDown, Palette, Check, Sun, Moon, X, XIcon, AlertTriangle, Pencil, ChevronLeft, ChevronRight, ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
+import { ChevronDown, Palette, Check, Sun, Moon, X, XIcon, AlertTriangle, Pencil, ChevronLeft, ChevronRight, ChevronDownIcon, CheckIcon, ChevronUpIcon, Maximize2, Copy } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -14,6 +14,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Toaster as Toaster$1 } from 'sonner';
+import QRCode from 'qrcode';
 import * as ui_star from '@orangecheck/ui';
 
 var __defProp = Object.defineProperty;
@@ -47,8 +48,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,
@@ -75,6 +80,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,
@@ -95,6 +103,9 @@ __export(src_exports, {
   SheetTitle: () => SheetTitle,
   SheetTrigger: () => SheetTrigger,
   Skeleton: () => Skeleton,
+  Sparkline: () => Sparkline,
+  StatBlock: () => StatBlock,
+  StatusPill: () => StatusPill,
   Textarea: () => Textarea,
   ThemeToggle: () => ThemeToggle,
   ThemeToggleLink: () => ThemeToggleLink,
@@ -105,10 +116,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) {
@@ -120,22 +139,22 @@ var OC_THEMES = [
   {
     id: "orangecheck",
     label: "orangecheck",
-    description: "the default \u2014 Bitcoin-orange, sharp 0.25rem corners, Inter + JetBrains Mono"
-  },
-  {
-    id: "midnight",
-    label: "midnight",
-    description: "indigo on slate, softer rounded 0.625rem corners, Manrope sans \u2014 calmer, SaaS-ier"
+    description: "the chain \u2014 Bitcoin orange, sharp 0.25rem corners, Inter + JetBrains Mono"
   },
   {
     id: "phosphor",
     label: "phosphor",
-    description: "CRT terminal green, hard 0.125rem corners, fully monospace \u2014 far from orange"
+    description: "the node \u2014 CRT terminal green, hard 0.125rem, all-mono \xB7 sovereignty & verify"
+  },
+  {
+    id: "lightning",
+    label: "lightning",
+    description: "the network \u2014 electric violet (L2), hardest 0rem edges, sans \xB7 instant"
   },
   {
-    id: "aurora",
-    label: "aurora",
-    description: "cool teal, generous 0.75rem corners, soft elevation \u2014 flips the flat ethos"
+    id: "gold",
+    label: "gold",
+    description: "sound money \u2014 digital gold, hard 0.125rem milled edge, mono ledger \xB7 21M"
   }
 ];
 var DEFAULT_OC_THEME = "orangecheck";
@@ -1475,6 +1494,345 @@ var Toaster = ({ ...props }) => {
     }
   );
 };
+function Card({
+  id,
+  title,
+  subtitle,
+  refreshedAt,
+  actions,
+  children,
+  className,
+  tone = "default",
+  expandable = true
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const toneClass = tone === "warning" ? "border-warning/60" : tone === "destructive" ? "border-destructive/60" : tone === "muted" ? "border-border opacity-90" : "border-border";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        id,
+        className: cn("terminal flex flex-col rounded-sm border scroll-mt-16", toneClass, className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "terminal-title flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "terminal-dot", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "terminal-dot opacity-70", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "terminal-dot opacity-50", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "ml-2 truncate", children: title }),
+              subtitle && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/70 ml-1 truncate text-[10px] tracking-normal normal-case", children: [
+                "\xB7 ",
+                subtitle
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              refreshedAt && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 hidden text-[10px] tracking-normal normal-case sm:inline", children: refreshedAt }),
+              actions,
+              expandable && /* @__PURE__ */ 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__ */ jsx(Maximize2, { className: "size-3" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 p-4 sm:p-5", children })
+        ]
+      }
+    ),
+    expandable && /* @__PURE__ */ jsx(
+      Modal,
+      {
+        open: expanded,
+        onOpenChange: setExpanded,
+        title,
+        ...subtitle ? { subtitle } : {},
+        actions: refreshedAt ? /* @__PURE__ */ 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__ */ jsx("svg", { width, height, className: cn(className), "aria-hidden": true, children: /* @__PURE__ */ 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__ */ jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("text-primary", className),
+      "aria-hidden": true,
+      children: [
+        areaPath && /* @__PURE__ */ jsx("path", { d: areaPath, fill: "currentColor", opacity: 0.12 }),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "label-mono text-[10px]", children: label }),
+    /* @__PURE__ */ jsx("span", { className: cn("font-display text-2xl leading-none", toneClass), children: value }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+      sub && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[11px] tracking-wide lowercase", children: sub }),
+      delta && /* @__PURE__ */ 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__ */ jsxs("div", { className: cn(className), children: [
+    (label || right) && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between font-mono text-[10.5px] tracking-widest uppercase", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
+      right && /* @__PURE__ */ jsx("span", { className: "text-foreground tabular-nums", children: right })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "bg-muted mt-1.5 h-1.5 w-full overflow-hidden", children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("span", { className: cn("font-mono tabular-nums", className), children: [
+    formatSats(sats),
+    unit && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: " sats" }),
+    usd && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+      " \xB7 ",
+      satsToUsd(sats, btcUsd)
+    ] })
+  ] });
+}
+function CopyButton({
+  value,
+  label,
+  clearAfter,
+  size = "md",
+  className,
+  title,
+  onCopied
+}) {
+  const [copied, setCopied] = useState(false);
+  const resetRef = useRef(null);
+  const copy = 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__ */ 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__ */ jsx(Check, { className: cn(iconSize, "text-success"), "aria-hidden": true }) : /* @__PURE__ */ jsx(Copy, { className: iconSize, "aria-hidden": true }),
+        label && /* @__PURE__ */ 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__ */ jsxs("span", { className: cn("inline-flex items-center gap-1.5 font-mono text-xs", className), children: [
+    /* @__PURE__ */ jsx("span", { title: address, children: full ? address : shortenAddress(address, head, tail) }),
+    copyable && /* @__PURE__ */ jsx(CopyButton, { value: address, size: "sm", title: "copy address" })
+  ] });
+}
+function QrCode({ value, size = 200, label, className }) {
+  const [svg, setSvg] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    QRCode.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__ */ 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__ */ jsx(
+        "div",
+        {
+          className: "size-full [&_svg]:block [&_svg]:size-full",
+          dangerouslySetInnerHTML: { __html: svg }
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "bg-muted/40 size-full animate-pulse rounded", "aria-hidden": true })
+    }
+  );
+}
 
 // src/components/index.ts
 var components_exports = {};
@@ -1483,6 +1841,6 @@ __reExport(components_exports, ui_star);
 // src/index.ts
 __reExport(src_exports, components_exports);
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, Badge, Button, ConfirmHost, DEFAULT_OC_THEME, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, OC_SKIN_COOKIE, OC_THEMES, OcThemeBridge, OcThemePicker, OcThemeProvider, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, badgeVariants, buttonVariants, cn, confirm, getOcThemeInitScript, isKnownTheme, prompt, resolveTheme, useOcSkin };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, Badge, Bar, BitcoinAddress, Button, Card, ConfirmHost, CopyButton, DEFAULT_OC_THEME, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, OC_SKIN_COOKIE, OC_THEMES, OcThemeBridge, OcThemePicker, OcThemeProvider, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, REFERENCE_BTC_USD, SatsAmount, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatusPill, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, badgeVariants, buttonVariants, cn, confirm, explorerUrl, formatSats, formatSatsCompact, getOcThemeInitScript, isKnownTheme, priceBoth, prompt, relativeTime, resolveTheme, satsToUsd, shortenAddress, usdToSats, useOcSkin };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map