@orangecheck/auth-client 2.33.4 → 2.35.0

package/dist/chunk-7UYPMTAV.mjs

@@ -0,0 +1,652 @@
+import {
+  useOcSession
+} from "./chunk-7ST4Q5KR.mjs";
+
+// src/components.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function shortenAddress(addr) {
+  if (addr.length <= 12) return addr;
+  return `${addr.slice(0, 6)}\u2026${addr.slice(-4)}`;
+}
+function shortenAddressMid(addr) {
+  if (addr.length <= 16) return addr;
+  return `${addr.slice(0, 8)}\u2026${addr.slice(-6)}`;
+}
+function isPrefixOf(value, target) {
+  return target.toLowerCase().startsWith(value.toLowerCase());
+}
+var listboxIdCounter = 0;
+function useUniqueId(prefix) {
+  const [id] = React.useState(() => `${prefix}-${++listboxIdCounter}`);
+  return id;
+}
+function OcAccountChip({
+  dashboardUrl = "https://ochk.io/dashboard",
+  signInUrl: signInUrlOverride,
+  signInLabel = "sign in",
+  className,
+  triggerClassName,
+  popoverClassName,
+  menuItemClassName
+}) {
+  const { status, account, signInUrl: sessionSignInUrl, signOut } = useOcSession();
+  const signInUrl = signInUrlOverride ?? sessionSignInUrl;
+  const [open, setOpen] = React.useState(false);
+  const wrapRef = React.useRef(null);
+  React.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.didOc}. 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: account.displayName ?? shortenAddress(account.didOc) }),
+              /* @__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.didOc
+                      }
+                    ),
+                    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",
+  eager = false,
+  className,
+  signInUrl: signInUrlOverride,
+  ...rest
+}) {
+  const { status, signInUrl: sessionSignInUrl } = useOcSession();
+  const href = signInUrlOverride ?? sessionSignInUrl;
+  if (status === "authenticated") return null;
+  if (!eager && status === "loading") return null;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...rest,
+      href,
+      className,
+      "data-oc-sign-in-button": "",
+      children: label
+    }
+  );
+}
+function OcAccountPill({
+  dashboardUrl,
+  render,
+  className,
+  ...rest
+}) {
+  const { status, account, signOut } = useOcSession();
+  if (status !== "authenticated" || !account) return null;
+  const label = render ? render({ address: account.didOc, displayName: account.displayName }) : account.displayName ?? shortenAddress(account.didOc);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className,
+      "data-oc-account-pill": "",
+      style: { display: "inline-flex", alignItems: "center", gap: "0.5rem", ...rest.style ?? {} },
+      children: [
+        dashboardUrl ? /* @__PURE__ */ jsx("a", { href: dashboardUrl, children: label }) : /* @__PURE__ */ jsx("span", { children: label }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              void signOut();
+            },
+            "aria-label": "Sign out",
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              color: "inherit",
+              font: "inherit",
+              padding: 0
+            },
+            children: "sign out"
+          }
+        )
+      ]
+    }
+  );
+}
+function accountAddress(account) {
+  if (account?.primaryBtc) return account.primaryBtc;
+  return account?.displayIdentity?.kind === "btc" ? account.displayIdentity.value : null;
+}
+function useOcAddressSuggestion(options) {
+  const {
+    value,
+    onValueChange,
+    suggestionLabel = "use your address",
+    popoverClassName,
+    suggestionClassName
+  } = options;
+  const { status, account } = useOcSession();
+  const sessionAddress = status === "authenticated" ? accountAddress(account) : null;
+  const [open, setOpen] = React.useState(false);
+  const [highlighted, setHighlighted] = React.useState(false);
+  const blurTimer = React.useRef(null);
+  const listboxId = useUniqueId("oc-addr-listbox");
+  const optionId = `${listboxId}-opt`;
+  const valueMatchesSession = sessionAddress != null && value.toLowerCase() === sessionAddress.toLowerCase();
+  const canSuggest = sessionAddress != null && sessionAddress.length > 0 && !valueMatchesSession && isPrefixOf(value, sessionAddress);
+  const showPopover = open && canSuggest;
+  function selectSuggestion() {
+    if (!sessionAddress) return;
+    onValueChange(sessionAddress);
+    setOpen(false);
+    setHighlighted(false);
+  }
+  React.useEffect(() => {
+    return () => {
+      if (blurTimer.current != null) window.clearTimeout(blurTimer.current);
+    };
+  }, []);
+  const inputProps = {
+    onFocus: () => {
+      if (blurTimer.current != null) {
+        window.clearTimeout(blurTimer.current);
+        blurTimer.current = null;
+      }
+      setOpen(true);
+    },
+    onBlur: () => {
+      blurTimer.current = window.setTimeout(() => {
+        setOpen(false);
+        setHighlighted(false);
+      }, 120);
+    },
+    onKeyDown: (e) => {
+      if (!showPopover) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlighted(true);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlighted(false);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+        setHighlighted(false);
+      } else if (e.key === "Enter" && highlighted) {
+        e.preventDefault();
+        selectSuggestion();
+      }
+    },
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": showPopover,
+    "aria-controls": showPopover ? listboxId : void 0,
+    "aria-activedescendant": highlighted ? optionId : void 0,
+    autoComplete: "off",
+    spellCheck: false
+  };
+  const popover = showPopover && sessionAddress ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: listboxId,
+      role: "listbox",
+      "data-oc-address-popover": "",
+      className: popoverClassName,
+      style: {
+        position: "absolute",
+        zIndex: 50,
+        top: "calc(100% + 4px)",
+        left: 0,
+        right: 0
+      },
+      onMouseDown: (e) => e.preventDefault(),
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: optionId,
+          role: "option",
+          "aria-selected": highlighted,
+          "data-oc-address-suggestion": "",
+          "data-highlighted": highlighted ? "" : void 0,
+          className: suggestionClassName,
+          onClick: selectSuggestion,
+          onMouseEnter: () => setHighlighted(true),
+          onMouseLeave: () => setHighlighted(false),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "0.75rem",
+            width: "100%",
+            textAlign: "left",
+            cursor: "pointer",
+            font: "inherit",
+            background: "inherit",
+            color: "inherit",
+            border: 0,
+            padding: "inherit"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { "data-oc-address-suggestion-label": "", children: suggestionLabel }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-oc-address-suggestion-value": "",
+                style: { fontFamily: "ui-monospace, monospace" },
+                children: shortenAddressMid(sessionAddress)
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) : null;
+  return { inputProps, popover };
+}
+var OcAddressInput = React.forwardRef(
+  function OcAddressInput2({
+    value,
+    onValueChange,
+    suggestionLabel = "use your address",
+    wrapperClassName,
+    popoverClassName,
+    suggestionClassName,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    ...rest
+  }, forwardedRef) {
+    const { status, account } = useOcSession();
+    const sessionAddress = status === "authenticated" ? accountAddress(account) : null;
+    const [open, setOpen] = React.useState(false);
+    const [highlighted, setHighlighted] = React.useState(false);
+    const innerRef = React.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 listboxId = useUniqueId("oc-addr-listbox");
+    const optionId = `${listboxId}-opt`;
+    const valueMatchesSession = sessionAddress != null && value.toLowerCase() === sessionAddress.toLowerCase();
+    const canSuggest = sessionAddress != null && sessionAddress.length > 0 && !valueMatchesSession && isPrefixOf(value, sessionAddress);
+    const showPopover = open && canSuggest;
+    function selectSuggestion() {
+      if (!sessionAddress) return;
+      onValueChange(sessionAddress);
+      setOpen(false);
+      setHighlighted(false);
+      innerRef.current?.focus();
+    }
+    function handleFocus(e) {
+      if (blurTimer.current != null) {
+        window.clearTimeout(blurTimer.current);
+        blurTimer.current = null;
+      }
+      setOpen(true);
+      onFocus?.(e);
+    }
+    function handleBlur(e) {
+      blurTimer.current = window.setTimeout(() => {
+        setOpen(false);
+        setHighlighted(false);
+      }, 120);
+      onBlur?.(e);
+    }
+    function handleKeyDown(e) {
+      if (showPopover) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setHighlighted(true);
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setHighlighted(false);
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          setOpen(false);
+          setHighlighted(false);
+        } else if (e.key === "Enter" && highlighted) {
+          e.preventDefault();
+          selectSuggestion();
+        }
+      }
+      onKeyDown?.(e);
+    }
+    React.useEffect(() => {
+      return () => {
+        if (blurTimer.current != null) window.clearTimeout(blurTimer.current);
+      };
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-oc-address-input": "",
+        className: wrapperClassName,
+        style: { position: "relative" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              ref: setRef,
+              value,
+              onChange: (e) => onValueChange(e.target.value),
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              role: "combobox",
+              "aria-haspopup": "listbox",
+              "aria-expanded": showPopover,
+              "aria-controls": showPopover ? listboxId : void 0,
+              "aria-activedescendant": highlighted ? optionId : void 0,
+              autoComplete: "off",
+              spellCheck: false
+            }
+          ),
+          showPopover && sessionAddress && /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              "data-oc-address-popover": "",
+              className: popoverClassName,
+              style: {
+                position: "absolute",
+                zIndex: 50,
+                top: "calc(100% + 4px)",
+                left: 0,
+                right: 0
+              },
+              onMouseDown: (e) => e.preventDefault(),
+              children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  id: optionId,
+                  role: "option",
+                  "aria-selected": highlighted,
+                  "data-oc-address-suggestion": "",
+                  "data-highlighted": highlighted ? "" : void 0,
+                  className: suggestionClassName,
+                  onClick: selectSuggestion,
+                  onMouseEnter: () => setHighlighted(true),
+                  onMouseLeave: () => setHighlighted(false),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: "0.75rem",
+                    width: "100%",
+                    textAlign: "left",
+                    cursor: "pointer",
+                    font: "inherit",
+                    background: "inherit",
+                    color: "inherit",
+                    border: "inherit",
+                    padding: "inherit"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { "data-oc-address-suggestion-label": "", children: suggestionLabel }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-oc-address-suggestion-value": "",
+                        style: { fontFamily: "ui-monospace, monospace" },
+                        children: shortenAddressMid(sessionAddress)
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  OcAccountChip,
+  OcSignInButton,
+  OcAccountPill,
+  useOcAddressSuggestion,
+  OcAddressInput
+};
+//# sourceMappingURL=chunk-7UYPMTAV.mjs.map