@dexterai/connect 0.12.0 → 0.13.0

package/dist/react.d.ts

@@ -124,6 +124,43 @@ interface UseDexterWallet {
 }
 declare function useDexterWallet(): UseDexterWallet;
 
+interface DexterWalletChipProps {
+    /** Connected (a wallet/account is present) → avatar + label; else signed-out label only. */
+    connected: boolean;
+    /** What to show: account name, wallet label, or the signed-out prompt (e.g. "Log in"). */
+    label: string;
+    /** Avatar image (e.g. a linked X avatar); falls back to the initial. */
+    avatarUrl?: string | null;
+    /** Single-character avatar fallback (defaults to the first letter of `label`). */
+    avatarInitial?: string;
+    onClick?: () => void;
+    /** Extra className composed after the brand classes. */
+    className?: string;
+    /** Reflected to aria-expanded (when the chip toggles a menu). */
+    ariaExpanded?: boolean;
+}
+/** The branded wallet/account chip. Wire it to open your menu via `onClick`. */
+declare function DexterWalletChip(props: DexterWalletChipProps): ReactElement;
+
+interface DexterWalletMenuProps {
+    /** The wallet's display name (nickname, else "Dexter Wallet"). */
+    walletLabel: string;
+    /** Avatar initial (defaults to the first letter of walletLabel). */
+    avatarInitial?: string;
+    /** "Manage wallet" → the consumer's wallet page. Row hidden if omitted. */
+    onManageWallet?: () => void;
+    /** "Start fresh" → the consumer ejects/resets (guard + perform on its side). Row hidden if omitted. */
+    onStartFresh?: () => void;
+    /** Sign-in/save UI revealed when "Save your wallet" is tapped (e.g. <SignInWithDexter/>). Row hidden if omitted. */
+    saveSlot?: ReactNode;
+    /** Short hint shown above the save UI. */
+    saveHint?: string;
+    /** Extra className composed after the brand classes. */
+    className?: string;
+}
+/** The branded wallet dropdown. */
+declare function DexterWalletMenu(props: DexterWalletMenuProps): ReactElement;
+
 interface UseIdentityConfig {
     /** The account session token (e.g. a Supabase access_token), or null when the
      *  user has no account session. The SDK is auth-agnostic — pass your own. */
@@ -131,4 +168,4 @@ interface UseIdentityConfig {
 }
 declare function useIdentity({ accountToken }: UseIdentityConfig): ResolvedIdentity;
 
-export { type ConnectStatus, DexterButton, type DexterButtonProps, DexterMark, SignInWithDexter, type SignInWithDexterProps, type UseDexterWallet, type UseIdentityConfig, type UseSignInWithDexter, type UseSignInWithDexterConfig, useDexterWallet, useIdentity, useSignInWithDexter };
+export { type ConnectStatus, DexterButton, type DexterButtonProps, DexterMark, DexterWalletChip, type DexterWalletChipProps, DexterWalletMenu, type DexterWalletMenuProps, SignInWithDexter, type SignInWithDexterProps, type UseDexterWallet, type UseIdentityConfig, type UseSignInWithDexter, type UseSignInWithDexterConfig, useDexterWallet, useIdentity, useSignInWithDexter };

package/dist/react.js

@@ -323,6 +323,136 @@ function useDexterWallet() {
   };
 }
 
+// src/DexterWalletChip.tsx
+import { useEffect as useEffect5 } from "react";
+
+// src/walletKitStyles.ts
+var STYLE_ID2 = "dexter-connect-wallet-kit-styles";
+var WALLET_KIT_CSS = `
+.dx-wchip{
+  --dx-ember:#f26c18; --dx-ember-2:#ba3a00; --dx-fg:#fff4ea; --dx-radius:0px;
+  display:inline-flex; align-items:center; gap:9px; max-width:240px;
+  padding:6px 12px 6px 7px; font:inherit; font-weight:600; font-size:.74rem;
+  letter-spacing:.1em; text-transform:uppercase; cursor:pointer; background:transparent;
+  color:inherit; border:1px solid color-mix(in srgb,var(--dx-ember) 42%,transparent);
+  border-radius:var(--dx-radius); -webkit-tap-highlight-color:transparent;
+  transition:filter .16s ease, box-shadow .16s ease, border-color .16s ease;
+}
+.dx-wchip:hover{ filter:brightness(1.08); box-shadow:0 8px 18px color-mix(in srgb,var(--dx-ember) 18%,transparent); }
+.dx-wchip:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--dx-ember) 34%,transparent); }
+.dx-wchip--signedout{ border-color:color-mix(in srgb,currentColor 22%,transparent); padding-left:12px; }
+.dx-wchip__avatar{
+  width:22px; height:22px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
+  border-radius:50%; overflow:hidden; font-size:.72rem; font-weight:700; letter-spacing:0; line-height:1;
+  background:linear-gradient(135deg,var(--dx-ember),var(--dx-ember-2)); color:var(--dx-fg);
+}
+.dx-wchip__avatar img{ width:100%; height:100%; object-fit:cover; }
+.dx-wchip__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+
+.dx-wmenu{ --dx-ember:#f26c18; --dx-ember-2:#ba3a00; --dx-fg:#fff4ea; display:flex; flex-direction:column; min-width:248px; }
+.dx-wmenu__id{ display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent); }
+.dx-wmenu__avatar{ width:32px; height:32px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-weight:700; font-size:.85rem; line-height:1; background:linear-gradient(135deg,var(--dx-ember),var(--dx-ember-2)); color:var(--dx-fg); }
+.dx-wmenu__meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
+.dx-wmenu__name{ font-weight:700; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.dx-wmenu__sub{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; opacity:.55; }
+.dx-wmenu__list{ display:flex; flex-direction:column; padding:6px; }
+.dx-wmenu__item{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 12px; font:inherit; font-size:.82rem; font-weight:600; text-align:left; background:transparent; border:none; color:inherit; cursor:pointer; transition:background .12s ease; }
+.dx-wmenu__item:hover{ background:color-mix(in srgb,var(--dx-ember) 10%,transparent); }
+.dx-wmenu__item--danger{ color:#e5552e; }
+.dx-wmenu__icon{ opacity:.45; font-size:.9rem; }
+.dx-wmenu__back{ border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent); opacity:.85; }
+.dx-wmenu__save{ display:flex; flex-direction:column; gap:9px; padding:13px 15px; }
+.dx-wmenu__savehint{ font-size:.78rem; line-height:1.4; opacity:.7; }
+`;
+function ensureWalletKitStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID2)) return;
+  const el = document.createElement("style");
+  el.id = STYLE_ID2;
+  el.textContent = WALLET_KIT_CSS;
+  document.head.appendChild(el);
+}
+ensureWalletKitStyles();
+
+// src/DexterWalletChip.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function DexterWalletChip(props) {
+  const { connected, label, avatarUrl, avatarInitial, onClick, className, ariaExpanded } = props;
+  useEffect5(ensureWalletKitStyles, []);
+  const initial = (avatarInitial ?? label.trim().charAt(0) ?? "D").toUpperCase();
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      type: "button",
+      className: cx("dx-wchip", !connected && "dx-wchip--signedout", className),
+      onClick,
+      "aria-expanded": ariaExpanded,
+      children: [
+        connected ? /* @__PURE__ */ jsx3("span", { className: "dx-wchip__avatar", "aria-hidden": "true", children: avatarUrl ? /* @__PURE__ */ jsx3("img", { src: avatarUrl, alt: "" }) : initial }) : null,
+        /* @__PURE__ */ jsx3("span", { className: "dx-wchip__label", children: label })
+      ]
+    }
+  );
+}
+
+// src/DexterWalletMenu.tsx
+import { useEffect as useEffect6, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function DexterWalletMenu(props) {
+  const { walletLabel, avatarInitial, onManageWallet, onStartFresh, saveSlot, saveHint, className } = props;
+  useEffect6(ensureWalletKitStyles, []);
+  const [showSave, setShowSave] = useState3(false);
+  const initial = (avatarInitial ?? walletLabel.trim().charAt(0) ?? "D").toUpperCase();
+  if (showSave && saveSlot) {
+    return /* @__PURE__ */ jsxs4("div", { className: cx("dx-wmenu", className), children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "dx-wmenu__item dx-wmenu__back",
+          onClick: () => setShowSave(false),
+          children: /* @__PURE__ */ jsx4("span", { children: "\u2190 Back to wallet" })
+        }
+      ),
+      /* @__PURE__ */ jsxs4("div", { className: "dx-wmenu__save", children: [
+        saveHint ? /* @__PURE__ */ jsx4("span", { className: "dx-wmenu__savehint", children: saveHint }) : null,
+        saveSlot
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: cx("dx-wmenu", className), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "dx-wmenu__id", children: [
+      /* @__PURE__ */ jsx4("span", { className: "dx-wmenu__avatar", "aria-hidden": "true", children: initial }),
+      /* @__PURE__ */ jsxs4("span", { className: "dx-wmenu__meta", children: [
+        /* @__PURE__ */ jsx4("span", { className: "dx-wmenu__name", children: walletLabel }),
+        /* @__PURE__ */ jsx4("span", { className: "dx-wmenu__sub", children: "Your Dexter Wallet" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "dx-wmenu__list", children: [
+      onManageWallet ? /* @__PURE__ */ jsxs4("button", { type: "button", className: "dx-wmenu__item", onClick: onManageWallet, children: [
+        /* @__PURE__ */ jsx4("span", { children: "Manage wallet" }),
+        /* @__PURE__ */ jsx4("span", { className: "dx-wmenu__icon", "aria-hidden": "true", children: "\u2197" })
+      ] }) : null,
+      saveSlot ? /* @__PURE__ */ jsxs4("button", { type: "button", className: "dx-wmenu__item", onClick: () => setShowSave(true), children: [
+        /* @__PURE__ */ jsx4("span", { children: "Save your wallet" }),
+        /* @__PURE__ */ jsx4("span", { className: "dx-wmenu__icon", "aria-hidden": "true", children: "\u2197" })
+      ] }) : null,
+      onStartFresh ? /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          type: "button",
+          className: "dx-wmenu__item dx-wmenu__item--danger",
+          onClick: onStartFresh,
+          children: [
+            /* @__PURE__ */ jsx4("span", { children: "Start fresh" }),
+            /* @__PURE__ */ jsx4("span", { className: "dx-wmenu__icon", "aria-hidden": "true", children: "\u27F5" })
+          ]
+        }
+      ) : null
+    ] })
+  ] });
+}
+
 // src/useIdentity.ts
 import { useMemo as useMemo2 } from "react";
 function useIdentity({ accountToken }) {
@@ -338,6 +468,8 @@ function useIdentity({ accountToken }) {
 export {
   DexterButton,
   DexterMark,
+  DexterWalletChip,
+  DexterWalletMenu,
   SignInWithDexter,
   useDexterWallet,
   useIdentity,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dexterai/connect",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Sign in with Dexter — passkey connector. Composes @dexterai/vault.",
   "type": "module",
   "exports": {