@dexterai/connect 0.7.0 → 0.8.0

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 import { DexterApiBrowserPasskeySigner } from '@dexterai/vault/signers/browser';
 import { S as SignInResult, P as PasskeyLoginTokens, C as ConnectVault, a as ConnectError, c as StoredWallet, b as PasskeySignalSupport } from './signals-CkBFwCNw.js';
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 type ConnectStatus = 'idle' | 'pending' | 'done' | 'error';
 interface UseSignInWithDexterConfig {
@@ -48,24 +48,49 @@ interface SignInWithDexterProps extends UseSignInWithDexterConfig {
     onError?: (error: ConnectError) => void;
     /** Button label when signed out. Default "Sign in with Dexter". */
     label?: string;
-    /** Visual variant: 'primary' = filled ember (default), 'secondary' = outline. */
+    /** 'primary' = filled ember (default), 'secondary' = outline. */
     variant?: 'primary' | 'secondary';
+    /** Full-width button. */
+    block?: boolean;
     /** Extra className composed after the brand classes. Prefer overriding the
-     *  `--dx-*` CSS variables for theming over restyling from scratch. */
+     *  `--dx-*` CSS variables for theming. */
     className?: string;
-    /** Render the built-in connected chip (wallet + balance). Default true.
-     *  Set false to render nothing once connected (consumer renders its own UI). */
+    /** Render the built-in connected chip (wallet + balance). Default true. */
     showConnectedChip?: boolean;
 }
 /**
- * Turnkey "Sign in with Dexter" element. Signed out → the branded ember button
+ * Turnkey "Sign in with Dexter" element. Signed out → the branded DexterButton
  * (hover / focus / active / loading states, themeable via --dx-* CSS vars);
  * signed in → a compact chip with the Dexter Wallet address + USD available.
- * Wraps useSignInWithDexter; consumers who need the raw vault/passkey data
- * should use that hook directly. Brand voice: no emojis, "unlock" banned.
+ * Wraps useSignInWithDexter; for the wallet CREATE flow use <DexterButton>
+ * wired to your create action. Brand voice: no emojis, "unlock" banned.
  */
 declare function SignInWithDexter(props: SignInWithDexterProps): ReactElement | null;
 
+/** The Dexter passkey mark — the brand glyph carried on the branded button. */
+declare function DexterMark(): ReactElement;
+interface DexterButtonProps {
+    /** Button content (e.g. "Sign in with Dexter", "Create your Dexter Wallet"). */
+    children?: ReactNode;
+    /** Loading state: shows the animated spinner + `loadingLabel`, disables click. */
+    loading?: boolean;
+    /** Label shown next to the spinner while loading. Default "Connecting…". */
+    loadingLabel?: string;
+    /** 'primary' = filled ember (default), 'secondary' = outline. */
+    variant?: 'primary' | 'secondary';
+    /** Full-width (fills its container). */
+    block?: boolean;
+    /** Render the Dexter mark before the children. Default true. */
+    withMark?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Extra className composed after the brand classes. */
+    className?: string;
+    type?: 'button' | 'submit';
+}
+/** The branded Dexter button. Wire it to any action via `onClick`. */
+declare function DexterButton(props: DexterButtonProps): ReactElement;
+
 interface UseDexterWallet {
     /** Active wallet handle, or null if this browser has no active wallet. */
     activeHandle: string | null;
@@ -96,4 +121,4 @@ interface UseDexterWallet {
 }
 declare function useDexterWallet(): UseDexterWallet;
 
-export { type ConnectStatus, SignInWithDexter, type SignInWithDexterProps, type UseDexterWallet, type UseSignInWithDexter, type UseSignInWithDexterConfig, useDexterWallet, useSignInWithDexter };
+export { type ConnectStatus, DexterButton, type DexterButtonProps, DexterMark, SignInWithDexter, type SignInWithDexterProps, type UseDexterWallet, type UseSignInWithDexter, type UseSignInWithDexterConfig, useDexterWallet, useSignInWithDexter };

package/dist/react.js

@@ -116,6 +116,9 @@ function useSignInWithDexter(config = {}) {
 }
 
 // src/SignInWithDexter.tsx
+import { useEffect as useEffect3 } from "react";
+
+// src/DexterButton.tsx
 import { useEffect as useEffect2 } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var STYLE_ID = "dexter-connect-button-styles";
@@ -139,6 +142,7 @@ var BUTTON_CSS = `
 .dx-btn:disabled{ cursor:default; filter:saturate(.85) brightness(.98); }
 .dx-btn--secondary{ background:transparent; color:var(--dx-ember); box-shadow:none; border-color:color-mix(in srgb,var(--dx-ember) 45%,transparent); }
 .dx-btn--secondary:hover{ background:color-mix(in srgb,var(--dx-ember) 9%,transparent); filter:none; box-shadow:none; }
+.dx-btn--block{ width:100%; }
 .dx-btn__mark{ flex-shrink:0; }
 .dx-btn__spin{ width:15px; height:15px; flex-shrink:0; border-radius:50%;
   border:2px solid color-mix(in srgb,currentColor 30%,transparent); border-top-color:currentColor;
@@ -152,7 +156,7 @@ var BUTTON_CSS = `
 .dx-chip__x{ margin-left:2px; border:none; background:transparent; color:inherit; cursor:pointer; font-size:16px; line-height:1; opacity:.6; }
 .dx-chip__x:hover{ opacity:1; }
 `;
-function ensureStyles() {
+function ensureDexterButtonStyles() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID)) return;
   const el = document.createElement("style");
@@ -160,16 +164,10 @@ function ensureStyles() {
   el.textContent = BUTTON_CSS;
   document.head.appendChild(el);
 }
-ensureStyles();
+ensureDexterButtonStyles();
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-function shortAddress(addr) {
-  return addr.length > 10 ? `${addr.slice(0, 4)}\u2026${addr.slice(-4)}` : addr;
-}
-function formatUsd(n) {
-  return n.toLocaleString("en-US", { style: "currency", currency: "USD" });
-}
 function DexterMark() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -188,17 +186,59 @@ function DexterMark() {
     }
   );
 }
+function DexterButton(props) {
+  const {
+    children,
+    loading = false,
+    loadingLabel = "Connecting\u2026",
+    variant = "primary",
+    block = false,
+    withMark = true,
+    onClick,
+    disabled = false,
+    className,
+    type = "button"
+  } = props;
+  useEffect2(ensureDexterButtonStyles, []);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      className: cx("dx-btn", variant === "secondary" && "dx-btn--secondary", block && "dx-btn--block", className),
+      onClick,
+      disabled: disabled || loading,
+      "aria-busy": loading,
+      children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "dx-btn__spin", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "dx-btn__doing", children: loadingLabel })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        withMark && /* @__PURE__ */ jsx(DexterMark, {}),
+        children
+      ] })
+    }
+  );
+}
+
+// src/SignInWithDexter.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function shortAddress(addr) {
+  return addr.length > 10 ? `${addr.slice(0, 4)}\u2026${addr.slice(-4)}` : addr;
+}
+function formatUsd(n) {
+  return n.toLocaleString("en-US", { style: "currency", currency: "USD" });
+}
 function SignInWithDexter(props) {
   const {
     onSuccess,
     onError,
     label = "Sign in with Dexter",
     variant = "primary",
+    block = false,
     className,
     showConnectedChip = true,
     ...config
   } = props;
-  useEffect2(ensureStyles, []);
+  useEffect3(ensureDexterButtonStyles, []);
   const c = useSignInWithDexter(config);
   const handleClick = async () => {
     try {
@@ -209,44 +249,37 @@ function SignInWithDexter(props) {
   };
   if (c.isVaultConnected) {
     if (!showConnectedChip) return null;
-    return /* @__PURE__ */ jsxs("span", { className: cx("dx-chip", className), children: [
-      /* @__PURE__ */ jsx("span", { className: "dx-chip__dot", "aria-hidden": true }),
-      /* @__PURE__ */ jsx("span", { children: c.vaultAddress ? shortAddress(c.vaultAddress) : "Connected" }),
-      c.usdcBalance !== null && /* @__PURE__ */ jsxs("span", { className: "dx-chip__bal", children: [
+    return /* @__PURE__ */ jsxs2("span", { className: cx("dx-chip", className), children: [
+      /* @__PURE__ */ jsx2("span", { className: "dx-chip__dot", "aria-hidden": true }),
+      /* @__PURE__ */ jsx2("span", { children: c.vaultAddress ? shortAddress(c.vaultAddress) : "Connected" }),
+      c.usdcBalance !== null && /* @__PURE__ */ jsxs2("span", { className: "dx-chip__bal", children: [
         formatUsd(c.usdcBalance),
         " available"
       ] }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "dx-chip__x", onClick: c.disconnect, "aria-label": "Disconnect", children: "\xD7" })
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "dx-chip__x", onClick: c.disconnect, "aria-label": "Disconnect", children: "\xD7" })
     ] });
   }
-  const pending = c.status === "pending";
-  return /* @__PURE__ */ jsx(
-    "button",
+  return /* @__PURE__ */ jsx2(
+    DexterButton,
     {
-      type: "button",
-      className: cx("dx-btn", variant === "secondary" && "dx-btn--secondary", className),
+      loading: c.status === "pending",
+      variant,
+      block,
+      className,
       onClick: handleClick,
-      disabled: pending,
-      "aria-busy": pending,
-      children: pending ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "dx-btn__spin", "aria-hidden": true }),
-        /* @__PURE__ */ jsx("span", { className: "dx-btn__doing", children: "Connecting\u2026" })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(DexterMark, {}),
-        label
-      ] })
+      children: label
     }
   );
 }
 
 // src/useDexterWallet.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useState as useState2 } from "react";
 var NO_SUPPORT = { rename: false, prune: false, syncAccepted: false };
 function useDexterWallet() {
   const [activeHandle, setHandle] = useState2(() => getActiveHandle());
   const [wallets, setWallets] = useState2(() => listWallets());
   const [support, setSupport] = useState2(NO_SUPPORT);
-  useEffect3(() => {
+  useEffect4(() => {
     const sync = () => {
       setHandle(getActiveHandle());
       setWallets(listWallets());
@@ -282,6 +315,8 @@ function useDexterWallet() {
   };
 }
 export {
+  DexterButton,
+  DexterMark,
   SignInWithDexter,
   useDexterWallet,
   useSignInWithDexter

package/package.json

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