@orangecheck/app-design 0.0.0-stage → 0.1.0

package/dist/components.mjs

@@ -0,0 +1,588 @@
+import { forwardRef, createElement, useState, useRef, useEffect, useCallback } from 'react';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { Check, Copy } from 'lucide-react';
+
+var merge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "oca-type": [
+        "oca-display-1",
+        "oca-display-2",
+        "oca-display-3",
+        "oca-title",
+        "oca-title-sm",
+        "oca-eyebrow",
+        "oca-lead",
+        "oca-body",
+        "oca-numeral"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return merge(clsx(inputs));
+}
+function Eyebrow({ className, onInk, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("oca-eyebrow", onInk && "text-oca-ink-eyebrow", className), ...props });
+}
+function Display({ level = 2, as, className, ...props }) {
+  const tag = as ?? `h${level}`;
+  return createElement(tag, { className: cn(`oca-display-${level}`, className), ...props });
+}
+function Accent({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-oca-accent-display", className), children });
+}
+function Lead({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("oca-lead max-w-[40rem]", className), ...props });
+}
+function Footnote({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-[0.9375rem] text-muted-foreground", className), ...props });
+}
+function Prose({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "max-w-[42rem] text-[1.0625rem] leading-[1.7] text-muted-foreground",
+        "[&_h2]:oca-display-3 [&_h2]:mb-4 [&_h2]:mt-14 [&_h2]:text-foreground",
+        "[&_h3]:oca-title [&_h3]:mb-3 [&_h3]:mt-10 [&_h3]:text-foreground",
+        "[&_p]:my-4 [&_strong]:font-medium [&_strong]:text-foreground",
+        "[&_a]:text-foreground [&_a]:underline [&_a]:decoration-border [&_a]:underline-offset-4 hover:[&_a]:decoration-foreground",
+        "[&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:my-1.5 [&_code]:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var sectionVariants = cva("relative w-full overflow-x-clip", {
+  variants: {
+    tone: {
+      canvas: "bg-background text-foreground",
+      card: "bg-card text-card-foreground",
+      ink: "bg-oca-ink text-oca-ink-foreground",
+      brand: "bg-brand text-brand-foreground"
+    },
+    space: {
+      none: "",
+      sm: "py-12 md:py-16",
+      md: "oca-section",
+      lg: "py-24 md:py-40"
+    }
+  },
+  defaultVariants: { tone: "canvas", space: "md" }
+});
+function Section({ tone, space, contained = true, className, children, ...props }) {
+  return /* @__PURE__ */ jsx("section", { className: cn(sectionVariants({ tone, space }), className), ...props, children: contained ? /* @__PURE__ */ jsx("div", { className: "oca-container", children }) : children });
+}
+function Container({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("oca-container", className), ...props });
+}
+function SectionIntro({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-4 md:gap-5",
+        align === "center" && "mx-auto items-center text-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var badgeVariants = cva(
+  "inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 text-[0.8125rem] font-medium leading-none",
+  {
+    variants: {
+      tone: {
+        neutral: "border-border bg-card text-foreground",
+        muted: "border-transparent bg-muted text-muted-foreground",
+        brand: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_12%,var(--card))] text-oca-accent-ink",
+        success: "border-transparent bg-[color-mix(in_oklab,var(--success)_12%,var(--card))] text-success",
+        warning: "border-transparent bg-[color-mix(in_oklab,var(--warning)_14%,var(--card))] text-warning",
+        danger: "border-transparent bg-[color-mix(in_oklab,var(--destructive)_12%,var(--card))] text-destructive",
+        info: "border-transparent bg-[color-mix(in_oklab,var(--info)_12%,var(--card))] text-info",
+        ink: "border-transparent bg-oca-ink text-oca-ink-foreground",
+        onInk: "border-white/15 bg-white/5 text-white/90"
+      }
+    },
+    defaultVariants: { tone: "neutral" }
+  }
+);
+function Badge({ className, tone, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "data-ui": "badge", className: cn(badgeVariants({ tone }), className), ...props });
+}
+var cardVariants = cva("relative rounded-[1.25rem] border", {
+  variants: {
+    tone: {
+      default: "border-border bg-card text-card-foreground",
+      sunken: "border-transparent bg-muted text-foreground",
+      ink: "border-oca-ink-line bg-oca-ink-card text-oca-ink-foreground",
+      outline: "border-border bg-transparent text-foreground"
+    },
+    padding: {
+      none: "",
+      sm: "p-5",
+      md: "p-6 md:p-8",
+      lg: "p-8 md:p-10"
+    },
+    interactive: {
+      true: "transition-colors hover:border-oca-hairline-strong focus-within:border-oca-hairline-strong",
+      false: ""
+    }
+  },
+  defaultVariants: { tone: "default", padding: "md", interactive: false }
+});
+var Card = forwardRef(function Card2({ className, tone, padding, interactive, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, "data-ui": "card", className: cn(cardVariants({ tone, padding, interactive }), className), ...props });
+});
+function CardNumeral({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("oca-numeral block", className), ...props });
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("h3", { className: cn("oca-title flex flex-wrap items-center gap-2.5", className), ...props });
+}
+var pad = (n) => String(n + 1).padStart(2, "0");
+function StepGrid({ items, look = "cards", className }) {
+  const cols = items.length >= 3 ? "md:grid-cols-3" : items.length === 2 ? "md:grid-cols-2" : "";
+  return /* @__PURE__ */ jsx("ol", { className: cn("grid gap-4 md:gap-5", cols, className), children: items.map(
+    (it, i) => look === "plain" ? /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-3 pr-4", children: [
+      /* @__PURE__ */ jsx(CardNumeral, { children: it.numeral ?? pad(i) }),
+      /* @__PURE__ */ jsxs(CardTitle, { className: "oca-title-sm", children: [
+        it.title,
+        it.badge ? /* @__PURE__ */ jsx(Badge, { children: it.badge }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "oca-body text-[0.9375rem]", children: it.body })
+    ] }, i) : look === "ink" ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Card, { tone: "ink", padding: "md", className: "h-full", children: [
+      /* @__PURE__ */ jsxs(CardTitle, { className: "text-oca-ink-title", children: [
+        it.title,
+        it.badge ? /* @__PURE__ */ jsx(Badge, { tone: "onInk", children: it.badge }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-3 text-[1rem] leading-relaxed text-oca-ink-muted", children: it.body })
+    ] }) }, i) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Card, { padding: "md", className: "flex h-full flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(CardNumeral, { children: it.numeral ?? pad(i) }),
+      /* @__PURE__ */ jsxs(CardTitle, { children: [
+        it.title,
+        it.badge ? /* @__PURE__ */ jsx(Badge, { children: it.badge }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "oca-body", children: it.body })
+    ] }) }, i)
+  ) });
+}
+var KIND = {
+  package: "text-oca-code-package",
+  tag: "text-oca-code-tag",
+  link: "text-oca-code-link"
+};
+function PackageCard({ items, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-x-10 gap-y-7 rounded-[1.25rem] border border-oca-ink-line bg-oca-ink-card p-6 text-oca-ink-foreground md:grid-cols-2 md:p-9",
+        className
+      ),
+      children: items.map((it, i) => {
+        const code = /* @__PURE__ */ jsx("span", { className: cn("text-[0.9375rem]", KIND[it.kind ?? "package"]), children: it.code });
+        return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-[1.125rem] font-semibold tracking-[-0.01em] text-oca-ink-title", children: it.title }),
+          it.href ? /* @__PURE__ */ jsx("a", { href: it.href, className: "w-fit underline decoration-transparent underline-offset-4 hover:decoration-current", children: code }) : code,
+          it.note ? /* @__PURE__ */ jsxs("p", { className: "text-[0.9375rem] leading-relaxed text-oca-ink-subtle", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "// " }),
+            it.note
+          ] }) : null
+        ] }, i);
+      })
+    }
+  );
+}
+function CodeBlock({
+  code,
+  caption,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("figure", { className: cn("overflow-hidden rounded-[1.25rem] border border-oca-ink-line bg-oca-ink-card", className), children: [
+    caption ? /* @__PURE__ */ jsx("figcaption", { className: "border-b border-oca-ink-line px-5 py-3 text-[0.8125rem] text-oca-ink-subtle", children: caption }) : null,
+    /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-5 font-mono text-[0.875rem] leading-relaxed text-oca-ink-muted", children: /* @__PURE__ */ jsx("code", { children: code }) })
+  ] });
+}
+var LABEL = {
+  yes: "Yes",
+  testing: "In testing",
+  "not-yet": "Not yet",
+  no: "No"
+};
+var TONE = {
+  yes: "text-oca-accent-ink",
+  testing: "text-foreground",
+  "not-yet": "text-muted-foreground",
+  no: "text-muted-foreground"
+};
+function TruthTable({
+  rows,
+  statusHeading = "Status",
+  whatHeading = "What",
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-xl border border-oca-hairline-strong", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem] md:text-[1rem]", children: [
+    /* @__PURE__ */ jsx("thead", { className: "bg-oca-table-head", children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "w-[30%] border-b border-oca-hairline-strong px-4 py-3 font-semibold md:w-[22%]", children: statusHeading }),
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "border-b border-l border-oca-hairline-strong px-4 py-3 font-semibold", children: whatHeading })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { className: "bg-card", children: rows.map((r, i) => /* @__PURE__ */ jsxs("tr", { className: "align-top", children: [
+      /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: cn(
+            "border-t border-oca-hairline-strong px-4 py-3 font-medium",
+            i === 0 && "border-t-0",
+            TONE[r.status]
+          ),
+          children: LABEL[r.status]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: cn(
+            "border-l border-t border-oca-hairline-strong px-4 py-3 leading-relaxed",
+            i === 0 && "border-t-0"
+          ),
+          children: r.what
+        }
+      )
+    ] }, i)) })
+  ] }) });
+}
+var INT = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+var COMPACT = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
+function satsText(value, opts = {}) {
+  if (value == null || !Number.isFinite(value)) return null;
+  const whole = Math.trunc(value);
+  const body = (opts.compact ? COMPACT : INT).format(Math.abs(whole));
+  const sign = whole < 0 ? "\u2212" : opts.signed && whole > 0 ? "+" : "";
+  const unit = opts.unit === "none" ? "" : whole === 1 || whole === -1 ? " sat" : " sats";
+  return `${sign}${body}${unit}`;
+}
+function Sats({ value, unit, compact, signed, unknown = "\u2014", className, ...props }) {
+  const text = satsText(value, { unit, compact, signed });
+  if (text === null) {
+    return /* @__PURE__ */ jsxs("span", { className: cn("oca-tabular text-muted-foreground", className), ...props, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: unknown }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "unknown" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { className: cn("oca-tabular whitespace-nowrap", className), ...props, children: text });
+}
+function UsdApprox({
+  sats,
+  usdPerBtc,
+  className
+}) {
+  if (sats == null || usdPerBtc == null || !Number.isFinite(sats) || !Number.isFinite(usdPerBtc)) return null;
+  const usd = sats / 1e8 * usdPerBtc;
+  const text = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: usd < 1 ? 4 : 2
+  }).format(usd);
+  return /* @__PURE__ */ jsxs("span", { className: cn("oca-tabular text-muted-foreground", className), children: [
+    "\u2248 ",
+    text
+  ] });
+}
+function SatsFigure({
+  label,
+  value,
+  hint,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem] text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxs("span", { className: "oca-display-3 oca-tabular", children: [
+      /* @__PURE__ */ jsx(Sats, { value, unit: "none" }),
+      /* @__PURE__ */ jsx("span", { className: "ml-2 text-[0.5em] tracking-normal text-muted-foreground", children: "sats" })
+    ] }),
+    hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: hint }) : null
+  ] });
+}
+var TOP = "0,3 2,2 6,4 14,0 16,1 6,6";
+var LEFT = "0,3 6,6 6,8 0,5";
+var RIGHT = "6,6 16,1 16,3 6,8";
+var MARK_FACES = { top: "#FED8AB", left: "#FB933C", right: "#EA580B" };
+function Mark({ title, size, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 8",
+      width: size,
+      height: size ? size / 2 : void 0,
+      role: title ? "img" : void 0,
+      "aria-hidden": title ? void 0 : true,
+      className: cn("shrink-0", className),
+      ...rest,
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        /* @__PURE__ */ jsx("polygon", { points: LEFT, fill: MARK_FACES.left }),
+        /* @__PURE__ */ jsx("polygon", { points: RIGHT, fill: MARK_FACES.right }),
+        /* @__PURE__ */ jsx("polygon", { points: TOP, fill: MARK_FACES.top })
+      ]
+    }
+  );
+}
+function PageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: cn("flex flex-col gap-5 md:flex-row md:items-end md:justify-between", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex max-w-[44rem] flex-col gap-3", children: [
+      eyebrow ? /* @__PURE__ */ jsx("p", { className: "oca-eyebrow", children: eyebrow }) : null,
+      /* @__PURE__ */ jsx("h1", { className: "oca-display-3", children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "oca-body text-[1.0625rem]", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-3", children: actions }) : null
+  ] });
+}
+function StatCard({
+  label,
+  value,
+  hint,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 rounded-[1.25rem] border border-border bg-card p-5 md:p-6", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "oca-tabular text-[1.75rem] leading-tight tracking-[-0.02em]", children: value }),
+    hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : null
+  ] });
+}
+function StatGrid({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-3 md:grid-cols-4 md:gap-4", className), ...props });
+}
+function KeyValueList({ items, className }) {
+  return /* @__PURE__ */ jsx("dl", { className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: items.map((it, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-5 py-3.5 sm:flex-row sm:items-baseline sm:gap-6", children: [
+    /* @__PURE__ */ jsx("dt", { className: "shrink-0 text-[0.875rem] text-muted-foreground sm:w-48", children: it.label }),
+    /* @__PURE__ */ jsx("dd", { className: cn("min-w-0 break-words text-[0.9375rem]", it.mono && "font-mono text-[0.875rem]"), children: it.value })
+  ] }, i)) });
+}
+function DataTable({
+  columns,
+  rows,
+  rowKey,
+  empty,
+  caption,
+  className
+}) {
+  if (rows.length === 0 && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-x-auto rounded-[1.25rem] border border-border bg-card", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[0.9375rem]", children: [
+    caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border", children: columns.map((c) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        scope: "col",
+        className: cn(
+          "whitespace-nowrap px-5 py-3 text-[0.8125rem] font-medium text-muted-foreground",
+          c.align === "end" && "text-right",
+          c.wide && "hidden md:table-cell"
+        ),
+        children: c.header
+      },
+      c.key
+    )) }) }),
+    /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: rows.map((r, i) => /* @__PURE__ */ jsx("tr", { className: "transition-colors hover:bg-accent/60", children: columns.map((c) => /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: cn(
+          "px-5 py-3.5 align-middle",
+          c.align === "end" && "text-right",
+          c.wide && "hidden md:table-cell"
+        ),
+        children: c.cell(r)
+      },
+      c.key
+    )) }, rowKey(r, i))) })
+  ] }) });
+}
+function EmptyState({
+  title,
+  children,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center gap-4 rounded-[1.25rem] border border-dashed border-oca-hairline-strong px-6 py-12 text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Mark, { size: 56 }),
+        /* @__PURE__ */ jsx("h3", { className: "oca-title-sm", children: title }),
+        children ? /* @__PURE__ */ jsx("div", { className: "oca-body max-w-md text-[0.9375rem]", children }) : null,
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap justify-center gap-3", children: action }) : null
+      ]
+    }
+  );
+}
+var NOTICE = {
+  neutral: "border-border bg-card",
+  info: "border-[color-mix(in_oklab,var(--info)_30%,var(--border))] bg-[color-mix(in_oklab,var(--info)_6%,var(--card))]",
+  success: "border-[color-mix(in_oklab,var(--success)_30%,var(--border))] bg-[color-mix(in_oklab,var(--success)_6%,var(--card))]",
+  warning: "border-[color-mix(in_oklab,var(--warning)_35%,var(--border))] bg-[color-mix(in_oklab,var(--warning)_7%,var(--card))]",
+  danger: "border-[color-mix(in_oklab,var(--destructive)_32%,var(--border))] bg-[color-mix(in_oklab,var(--destructive)_6%,var(--card))]",
+  brand: "border-[color-mix(in_oklab,var(--oca-orange)_35%,var(--border))] bg-[color-mix(in_oklab,var(--oca-orange)_7%,var(--card))]"
+};
+var NOTICE_TITLE = {
+  neutral: "text-foreground",
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-destructive",
+  brand: "text-oca-accent-ink"
+};
+function Notice({
+  tone = "neutral",
+  title,
+  children,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: tone === "danger" || tone === "warning" ? "alert" : "note",
+      className: cn(
+        "flex flex-col gap-3 rounded-2xl border px-5 py-4 sm:flex-row sm:items-start sm:justify-between",
+        NOTICE[tone],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          title ? /* @__PURE__ */ jsx("p", { className: cn("text-[0.9375rem] font-medium", NOTICE_TITLE[tone]), children: title }) : null,
+          children ? /* @__PURE__ */ jsx("div", { className: "text-[0.9375rem] leading-relaxed text-foreground/85", children }) : null
+        ] }),
+        action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
+      ]
+    }
+  );
+}
+function middle(v, head, tail) {
+  return v.length <= head + tail + 1 ? v : `${v.slice(0, head)}\u2026${v.slice(-tail)}`;
+}
+function useCopy(timeoutMs = 1600) {
+  const [copied, setCopied] = useState(false);
+  const t = useRef(null);
+  useEffect(() => () => {
+    if (t.current) clearTimeout(t.current);
+  }, []);
+  const copy = useCallback(
+    async (text) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        if (t.current) clearTimeout(t.current);
+        t.current = setTimeout(() => setCopied(false), timeoutMs);
+      } catch {
+        setCopied(false);
+      }
+    },
+    [timeoutMs]
+  );
+  return { copied, copy };
+}
+function CopyButton({ value, label = "Copy", className }) {
+  const { copied, copy } = useCopy();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => void copy(value),
+      "aria-label": copied ? "Copied" : label,
+      className: cn(
+        "inline-flex size-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        className
+      ),
+      children: [
+        copied ? /* @__PURE__ */ jsx(Check, { className: "size-4 text-success" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "Copied" : "" })
+      ]
+    }
+  );
+}
+function HashChip({
+  value,
+  head = 8,
+  tail = 6,
+  copy = true,
+  href,
+  className
+}) {
+  const shown = middle(value, head, tail);
+  const text = /* @__PURE__ */ jsx("span", { title: value, className: "font-mono text-[0.875rem]", children: shown });
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex max-w-full items-center gap-1", className), children: [
+    href ? /* @__PURE__ */ jsx("a", { href, className: "underline decoration-border underline-offset-4 hover:decoration-foreground", children: text }) : text,
+    copy ? /* @__PURE__ */ jsx(CopyButton, { value, label: "Copy full value" }) : null
+  ] });
+}
+function ProgressSteps({ steps, className }) {
+  return /* @__PURE__ */ jsx("ol", { className: cn("flex flex-col gap-0", className), children: steps.map((s, i) => {
+    const last = i === steps.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "relative flex gap-4 pb-6 last:pb-0", "aria-current": s.state === "current" ? "step" : void 0, children: [
+      !last ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "absolute left-[11px] top-7 h-[calc(100%-1.5rem)] w-px",
+            s.state === "done" ? "bg-foreground/30" : "bg-border"
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "relative z-10 mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border text-[0.75rem] oca-tabular",
+            s.state === "done" && "border-primary bg-primary text-primary-foreground",
+            s.state === "current" && "border-brand bg-card text-oca-accent-ink",
+            s.state === "upcoming" && "border-border bg-card text-muted-foreground",
+            s.state === "blocked" && "border-destructive bg-card text-destructive"
+          ),
+          children: s.state === "done" ? /* @__PURE__ */ jsx(Check, { className: "size-3.5", strokeWidth: 3 }) : String(i + 1).padStart(2, "0")
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: cn("text-[0.9375rem]", s.state === "upcoming" ? "text-muted-foreground" : "font-medium"), children: s.label }),
+        s.hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: s.hint }) : null
+      ] })
+    ] }, i);
+  }) });
+}
+function ActivityList({ items, empty, className }) {
+  if (items.length === 0 && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
+  return /* @__PURE__ */ jsx("ul", { className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: items.map((it) => {
+    const body = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 px-5 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[0.9375rem]", children: it.title }),
+        it.meta ? /* @__PURE__ */ jsx("span", { className: "truncate text-[0.8125rem] text-muted-foreground", children: it.meta }) : null
+      ] }),
+      it.trailing ? /* @__PURE__ */ jsx("div", { className: "shrink-0 text-right", children: it.trailing }) : null
+    ] });
+    return /* @__PURE__ */ jsx("li", { children: it.href ? /* @__PURE__ */ jsx("a", { href: it.href, className: "block transition-colors hover:bg-accent/60", children: body }) : body }, it.id);
+  }) });
+}
+
+export { Accent, ActivityList, CodeBlock, Container, CopyButton, DataTable, Display, EmptyState, Eyebrow, Footnote, HashChip, KeyValueList, Lead, Notice, PackageCard, PageHeader, ProgressSteps, Prose, Sats, SatsFigure, Section, SectionIntro, StatCard, StatGrid, StepGrid, TruthTable, UsdApprox, satsText, sectionVariants, useCopy };
+//# sourceMappingURL=components.mjs.map
+//# sourceMappingURL=components.mjs.map