@orangecheck/auth-client 0.3.0 → 0.4.1

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React2 from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/provider.tsx
@@ -20,7 +20,7 @@ function buildSignInUrl(cfg, returnTo) {
   u.searchParams.set("return_to", returnTo);
   return u.toString();
 }
-var SessionContext = React.createContext(null);
+var SessionContext = React2.createContext(null);
 function normalizeAccount(raw) {
   if (!raw) return null;
   const address = raw.btc_address ?? raw.address;
@@ -38,11 +38,11 @@ function OcSessionProvider({
   config,
   defaultReturnTo
 }) {
-  const cfg = React.useMemo(() => resolveConfig(config), [config]);
-  const [account, setAccount] = React.useState(null);
-  const [status, setStatus] = React.useState("loading");
-  const [error, setError] = React.useState(null);
-  const refresh = React.useCallback(async () => {
+  const cfg = React2.useMemo(() => resolveConfig(config), [config]);
+  const [account, setAccount] = React2.useState(null);
+  const [status, setStatus] = React2.useState("loading");
+  const [error, setError] = React2.useState(null);
+  const refresh = React2.useCallback(async () => {
     if (typeof window === "undefined") return;
     try {
       const res = await fetch(cfg.mePath, {
@@ -71,10 +71,10 @@ function OcSessionProvider({
       setError(err instanceof Error ? err : new Error(String(err)));
     }
   }, [cfg.mePath]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const signOut = React.useCallback(async () => {
+  const signOut = React2.useCallback(async () => {
     try {
       await fetch(`${cfg.authOrigin}${cfg.logoutPath}`, {
         method: "POST",
@@ -85,7 +85,7 @@ function OcSessionProvider({
     setAccount(null);
     setStatus("anonymous");
   }, [cfg.authOrigin, cfg.logoutPath]);
-  const value = React.useMemo(() => {
+  const value = React2.useMemo(() => {
     const returnTo = defaultReturnTo ?? (typeof window !== "undefined" ? window.location.href : void 0);
     return {
       status,
@@ -99,7 +99,7 @@ function OcSessionProvider({
   return /* @__PURE__ */ jsx(SessionContext.Provider, { value, children });
 }
 function useOcSession() {
-  const ctx = React.useContext(SessionContext);
+  const ctx = React2.useContext(SessionContext);
   if (!ctx) {
     throw new Error(
       "[@orangecheck/auth-client] useOcSession() must be called inside <OcSessionProvider>"
@@ -108,7 +108,7 @@ function useOcSession() {
   return ctx;
 }
 function useOptionalOcSession() {
-  return React.useContext(SessionContext);
+  return React2.useContext(SessionContext);
 }
 function shortenAddress(addr) {
   if (addr.length <= 12) return addr;
@@ -123,9 +123,270 @@ function isPrefixOf(value, target) {
 }
 var listboxIdCounter = 0;
 function useUniqueId(prefix) {
-  const [id] = React.useState(() => `${prefix}-${++listboxIdCounter}`);
+  const [id] = React2.useState(() => `${prefix}-${++listboxIdCounter}`);
   return id;
 }
+function OcAccountChip({
+  dashboardUrl = "https://ochk.io/dashboard",
+  signInLabel = "sign in",
+  className,
+  triggerClassName,
+  popoverClassName,
+  menuItemClassName
+}) {
+  const { status, account, signInUrl, signOut } = useOcSession();
+  const [open, setOpen] = React2.useState(false);
+  const wrapRef = React2.useRef(null);
+  React2.useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    function handleEscape(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [open]);
+  if (status === "loading") return null;
+  if (status !== "authenticated" || !account) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: signInUrl,
+        className: triggerClassName ?? className,
+        "data-oc-account-chip-signin": "",
+        children: signInLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapRef,
+      className,
+      "data-oc-account-chip": "",
+      style: { position: "relative", display: "inline-block" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen((v) => !v),
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "aria-label": `Signed in as ${account.address}. Open account menu.`,
+            className: triggerClassName,
+            "data-oc-account-chip-trigger": "",
+            style: triggerClassName ? void 0 : {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.4rem",
+              padding: "0.25rem 0.625rem",
+              borderRadius: "9999px",
+              border: "1px solid var(--border, #27272a)",
+              background: "color-mix(in oklch, var(--muted, #27272a) 40%, transparent)",
+              color: "var(--foreground, #fafafa)",
+              fontFamily: "ui-monospace, SFMono-Regular, monospace",
+              fontSize: 12,
+              cursor: "pointer"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "#22c55e", fontSize: 8 }, children: "\u25CF" }),
+              /* @__PURE__ */ jsx("span", { children: shortenAddress(account.address) }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "9",
+                  height: "9",
+                  viewBox: "0 0 10 10",
+                  "aria-hidden": "true",
+                  style: {
+                    transition: "transform 120ms",
+                    transform: open ? "rotate(180deg)" : "rotate(0)",
+                    opacity: 0.6
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M2 4 L5 7 L8 4",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      fill: "none",
+                      strokeLinecap: "round"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "menu",
+            "aria-label": "Account menu",
+            className: popoverClassName,
+            "data-oc-account-chip-popover": "",
+            style: popoverClassName ? { position: "absolute", zIndex: 50, top: "calc(100% + 6px)", right: 0 } : {
+              position: "absolute",
+              zIndex: 50,
+              top: "calc(100% + 6px)",
+              right: 0,
+              minWidth: 240,
+              background: "var(--popover, #0a0a0a)",
+              color: "var(--popover-foreground, #fafafa)",
+              border: "1px solid var(--border, #27272a)",
+              boxShadow: "0 10px 32px -4px rgba(0,0,0,0.35)",
+              fontFamily: "ui-monospace, SFMono-Regular, monospace"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-oc-account-chip-header": "",
+                  style: {
+                    padding: "0.75rem 0.75rem 0.625rem",
+                    borderBottom: "1px solid var(--border, #27272a)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-oc-account-chip-label": "",
+                        style: {
+                          color: "var(--primary, #f97316)",
+                          fontSize: 10,
+                          letterSpacing: "0.18em",
+                          textTransform: "uppercase",
+                          marginBottom: 4
+                        },
+                        children: "\xA7 signed in"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-oc-account-chip-address": "",
+                        style: {
+                          color: "var(--popover-foreground, #fafafa)",
+                          fontSize: 11,
+                          wordBreak: "break-all",
+                          lineHeight: 1.35
+                        },
+                        children: account.address
+                      }
+                    ),
+                    account.displayName ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          color: "var(--muted-foreground, #a1a1aa)",
+                          fontSize: 10,
+                          marginTop: 4,
+                          letterSpacing: "0.06em"
+                        },
+                        children: account.displayName
+                      }
+                    ) : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { role: "none", style: { padding: "0.25rem" }, children: [
+                dashboardUrl ? /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    role: "menuitem",
+                    href: dashboardUrl,
+                    onClick: () => setOpen(false),
+                    className: menuItemClassName,
+                    "data-oc-account-chip-item": "",
+                    style: menuItemClassName ? void 0 : {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "0.5rem",
+                      padding: "0.5rem 0.625rem",
+                      fontSize: 12,
+                      color: "var(--popover-foreground, #fafafa)",
+                      textDecoration: "none",
+                      cursor: "pointer"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          style: { color: "var(--muted-foreground, #a1a1aa)" },
+                          children: "\u2192"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: "dashboard" }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            color: "var(--muted-foreground, #a1a1aa)",
+                            fontSize: 10
+                          },
+                          children: "\u2197"
+                        }
+                      )
+                    ]
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: () => {
+                      setOpen(false);
+                      void signOut();
+                    },
+                    className: menuItemClassName,
+                    "data-oc-account-chip-item": "",
+                    "data-oc-account-chip-signout": "",
+                    style: menuItemClassName ? void 0 : {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "0.5rem",
+                      width: "100%",
+                      padding: "0.5rem 0.625rem",
+                      fontSize: 12,
+                      color: "var(--popover-foreground, #fafafa)",
+                      background: "transparent",
+                      border: 0,
+                      fontFamily: "inherit",
+                      textAlign: "left",
+                      cursor: "pointer"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          style: { color: "var(--muted-foreground, #a1a1aa)" },
+                          children: "\u2192"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: "sign out" })
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function OcSignInButton({
   label = "sign in with bitcoin",
   eager = false,
@@ -197,9 +458,9 @@ function useOcAddressSuggestion(options) {
   } = options;
   const { status, account } = useOcSession();
   const sessionAddress = status === "authenticated" ? account?.address ?? null : null;
-  const [open, setOpen] = React.useState(false);
-  const [highlighted, setHighlighted] = React.useState(false);
-  const blurTimer = React.useRef(null);
+  const [open, setOpen] = React2.useState(false);
+  const [highlighted, setHighlighted] = React2.useState(false);
+  const blurTimer = React2.useRef(null);
   const listboxId = useUniqueId("oc-addr-listbox");
   const optionId = `${listboxId}-opt`;
   const valueMatchesSession = sessionAddress != null && value.toLowerCase() === sessionAddress.toLowerCase();
@@ -211,7 +472,7 @@ function useOcAddressSuggestion(options) {
     setOpen(false);
     setHighlighted(false);
   }
-  React.useEffect(() => {
+  React2.useEffect(() => {
     return () => {
       if (blurTimer.current != null) window.clearTimeout(blurTimer.current);
     };
@@ -314,7 +575,7 @@ function useOcAddressSuggestion(options) {
   ) : null;
   return { inputProps, popover };
 }
-var OcAddressInput = React.forwardRef(
+var OcAddressInput = React2.forwardRef(
   function OcAddressInput2({
     value,
     onValueChange,
@@ -329,15 +590,15 @@ var OcAddressInput = React.forwardRef(
   }, forwardedRef) {
     const { status, account } = useOcSession();
     const sessionAddress = status === "authenticated" ? account?.address ?? null : null;
-    const [open, setOpen] = React.useState(false);
-    const [highlighted, setHighlighted] = React.useState(false);
-    const innerRef = React.useRef(null);
+    const [open, setOpen] = React2.useState(false);
+    const [highlighted, setHighlighted] = React2.useState(false);
+    const innerRef = React2.useRef(null);
     const setRef = (node) => {
       innerRef.current = node;
       if (typeof forwardedRef === "function") forwardedRef(node);
       else if (forwardedRef) forwardedRef.current = node;
     };
-    const blurTimer = React.useRef(null);
+    const blurTimer = React2.useRef(null);
     const listboxId = useUniqueId("oc-addr-listbox");
     const optionId = `${listboxId}-opt`;
     const valueMatchesSession = sessionAddress != null && value.toLowerCase() === sessionAddress.toLowerCase();
@@ -384,7 +645,7 @@ var OcAddressInput = React.forwardRef(
       }
       onKeyDown?.(e);
     }
-    React.useEffect(() => {
+    React2.useEffect(() => {
       return () => {
         if (blurTimer.current != null) window.clearTimeout(blurTimer.current);
       };
@@ -478,6 +739,6 @@ var OcAddressInput = React.forwardRef(
   }
 );
 
-export { DEFAULT_CONFIG, OcAccountPill, OcAddressInput, OcSessionProvider, OcSignInButton, buildSignInUrl, useOcAddressSuggestion, useOcSession, useOptionalOcSession };
+export { DEFAULT_CONFIG, OcAccountChip, OcAccountPill, OcAddressInput, OcSessionProvider, OcSignInButton, buildSignInUrl, useOcAddressSuggestion, useOcSession, useOptionalOcSession };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map