@orangecheck/ui 0.9.0 → 0.10.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Boxes, ChevronDown, Check, CornerDownLeft } from 'lucide-react';
+import { Boxes, ChevronDown, Check, CornerDownLeft, Copy } from 'lucide-react';
 import Link5 from 'next/link';
 import { useState, useRef, useEffect, useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -526,6 +526,71 @@ function shortenDid(s) {
   if (s.length <= 14) return s;
   return `${s.slice(0, 7)}\u2026${s.slice(-5)}`;
 }
+async function writeClipboard(text) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+  }
+  try {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.setAttribute("readonly", "");
+    ta.style.position = "fixed";
+    ta.style.top = "-1000px";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+function CopyableDid({ did }) {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(null);
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const onCopy = async () => {
+    const ok = await writeClipboard(did);
+    if (!ok) return;
+    setCopied(true);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setCopied(false), 1600);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onCopy,
+      "aria-label": copied ? "OrangeCheck identity copied to clipboard" : `Copy OrangeCheck identity ${did} to clipboard`,
+      title: "Copy identity",
+      "data-oc-account-menu-copy-did": "",
+      "data-copied": copied ? "" : void 0,
+      className: "group/did hover:bg-accent focus-visible:ring-ring/60 -mx-1.5 mt-px flex w-[calc(100%+0.75rem)] items-start gap-1.5 rounded px-1.5 py-1 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-foreground/90 min-w-0 flex-1 font-mono text-[11px] leading-tight break-all", children: did }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "mt-px shrink-0 transition-colors " + (copied ? "text-primary" : "text-muted-foreground/50 group-hover/did:text-foreground/80"),
+            "aria-hidden": true,
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? "Copied to clipboard" : "" })
+      ]
+    }
+  );
+}
 function OcAccountMenu(props) {
   const session = useOcSession();
   return /* @__PURE__ */ jsx(
@@ -669,7 +734,7 @@ function OcAccountMenuView({
                   "\xA7 signed in \xB7 ",
                   hostname
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "text-foreground/90 font-mono text-[11px] leading-tight break-all", children: account.didOc }),
+                /* @__PURE__ */ jsx(CopyableDid, { did: account.didOc }),
                 displayName ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/80 mt-1 font-mono text-[10px] tracking-wide", children: displayName }) : null
               ] }),
               primaryNavLinks && primaryNavLinks.length > 0 ? /* @__PURE__ */ jsx(