@coinbase/cdp-react 0.0.49 → 0.0.51

package/dist/components/SignInModal/index.js

@@ -1,62 +1,84 @@
-import { jsxs as o, jsx as n, Fragment as m } from "react/jsx-runtime";
-import "react";
-import { useAppConfig as f } from "../CDPReactProvider/index.js";
-import { SignIn as u } from "../SignIn/index.js";
-import { Button as c } from "../ui/Button/index.js";
-import { Modal as I, ModalTrigger as S, ModalContent as M, ModalClose as b, ModalTitle as v, ModalDescription as C } from "../ui/Modal/index.js";
-import { VisuallyHidden as t } from "../ui/VisuallyHidden/index.js";
-import { IconXMark as N } from "../../icons/IconXMark.js";
-import { SignInBackButton as k } from "../SignIn/SignInBackButton.js";
-import { SignInImage as x } from "../SignIn/SignInImage.js";
-import { SignInForm as B } from "../SignIn/SignInForm.js";
-import { SignInTitle as l } from "../SignIn/SignInTitle.js";
-import { SignInDescription as a } from "../SignIn/SignInDescription.js";
-import { SignInAuthMethodButtons as w } from "../SignIn/SignInAuthMethodButtons.js";
-import { SignInFooter as y } from "../SignIn/SignInFooter.js";
-import '../../assets/SignInModal.css';const D = "SignInModal-module__trigger___IcJ8x", F = "SignInModal-module__footer___6qEo2", T = "SignInModal-module__buttons___jhaVn", i = {
-  trigger: D,
+import { jsx as n, jsxs as t, Fragment as d } from "react/jsx-runtime";
+import { c as S } from "../../chunks/lite.1fxw3LjI.js";
+import { createContext as C, useMemo as b, useContext as x } from "react";
+import { useAppConfig as v } from "../CDPReactProvider/index.js";
+import { SignIn as N } from "../SignIn/index.js";
+import "@coinbase/cdp-hooks";
+import { Button as h } from "../ui/Button/index.js";
+import { ModalTrigger as w, ModalContent as T, ModalClose as k, Modal as B, ModalTitle as D, ModalDescription as F } from "../ui/Modal/index.js";
+import { VisuallyHidden as m } from "../ui/VisuallyHidden/index.js";
+import { IconXMark as j } from "../../icons/IconXMark.js";
+import { childrenHasComponent as u } from "../../utils/childrenHasComponent.js";
+import { SignInBackButton as y } from "../SignIn/SignInBackButton.js";
+import { SignInImage as A } from "../SignIn/SignInImage.js";
+import { SignInForm as V } from "../SignIn/SignInForm.js";
+import { SignInTitle as g } from "../SignIn/SignInTitle.js";
+import { SignInDescription as _ } from "../SignIn/SignInDescription.js";
+import { SignInAuthMethodButtons as z } from "../SignIn/SignInAuthMethodButtons.js";
+import { SignInFooter as E } from "../SignIn/SignInFooter.js";
+import '../../assets/SignInModal.css';const H = "SignInModal-module__trigger___IcJ8x", J = "SignInModal-module__footer___6qEo2", X = "SignInModal-module__buttons___jhaVn", i = {
+  trigger: H,
   "sign-in": "SignInModal-module__sign-in___n05-5",
   "no-footer": "SignInModal-module__no-footer___meSt1",
   "title-desc-wrapper": "SignInModal-module__title-desc-wrapper___--XLa",
   "sign-in-form": "SignInModal-module__sign-in-form___Jzx1-",
   "sign-in-image": "SignInModal-module__sign-in-image___DGg7B",
-  footer: F,
-  buttons: T,
+  footer: J,
+  buttons: X,
   "back-button": "SignInModal-module__back-button___nMh2-",
   "close-icon": "SignInModal-module__close-icon___b-gMh"
-}, R = ({ children: _, open: g, setIsOpen: p, onSuccess: s }) => {
-  const { showCoinbaseFooter: d } = f();
-  return /* @__PURE__ */ o(I, { open: g, onOpenChange: p, children: [
-    /* @__PURE__ */ n(S, { asChild: !0, children: _ || /* @__PURE__ */ n(c, { variant: "primary", className: i.trigger, children: "Sign in" }) }),
-    /* @__PURE__ */ n(M, { children: /* @__PURE__ */ n(
-      u,
-      {
-        onSuccess: s,
-        className: `${i["sign-in"]} ${d ? "" : i["no-footer"]}`,
-        children: /* @__PURE__ */ o(m, { children: [
-          /* @__PURE__ */ n(j, {}),
-          /* @__PURE__ */ o("div", { className: i.buttons, children: [
-            /* @__PURE__ */ n(k, { className: i["back-button"] }),
-            /* @__PURE__ */ n(b, { asChild: !0, children: /* @__PURE__ */ n(c, { "aria-label": "Close", size: "md", variant: "transparentSecondary", children: /* @__PURE__ */ n(N, { className: i["close-icon"] }) }) })
+}, p = C(null), $ = () => {
+  const o = x(p);
+  if (!o)
+    throw new Error("useSignInModalContext must be used within a SignInModal");
+  return o;
+}, f = ({
+  children: o,
+  className: r = "",
+  label: l,
+  ...e
+}) => /* @__PURE__ */ n(w, { asChild: !0, children: o || /* @__PURE__ */ n(h, { className: S(i.trigger, r), ...e, children: l || "Sign in" }) }), c = (o) => {
+  const { showCoinbaseFooter: r } = v(), { onSuccess: l } = $();
+  return /* @__PURE__ */ n(T, { ...o, children: /* @__PURE__ */ n(
+    N,
+    {
+      onSuccess: l,
+      className: `${i["sign-in"]} ${r ? "" : i["no-footer"]}`,
+      ...o,
+      children: /* @__PURE__ */ t(d, { children: [
+        /* @__PURE__ */ n(q, {}),
+        /* @__PURE__ */ t("div", { className: i.buttons, children: [
+          /* @__PURE__ */ n(y, { className: i["back-button"] }),
+          /* @__PURE__ */ n(k, { asChild: !0, children: /* @__PURE__ */ n(h, { "aria-label": "Close", size: "md", variant: "transparentSecondary", children: /* @__PURE__ */ n(j, { className: i["close-icon"] }) }) })
+        ] }),
+        /* @__PURE__ */ n("div", { className: i["sign-in-image"], children: /* @__PURE__ */ n(A, {}) }),
+        /* @__PURE__ */ n(V, { onSuccess: l, children: ({ authMethod: e, step: s, Form: a }) => /* @__PURE__ */ t(d, { children: [
+          /* @__PURE__ */ t("div", { className: i["title-desc-wrapper"], children: [
+            s === "verification" ? /* @__PURE__ */ n(m, { as: "div", children: /* @__PURE__ */ n(g, {}) }) : /* @__PURE__ */ n(g, {}),
+            s === "credentials" ? /* @__PURE__ */ n(m, { as: "div", children: /* @__PURE__ */ n(_, { authMethod: e }) }) : /* @__PURE__ */ n(_, { authMethod: e })
           ] }),
-          /* @__PURE__ */ n("div", { className: i["sign-in-image"], children: /* @__PURE__ */ n(x, {}) }),
-          /* @__PURE__ */ n(B, { onSuccess: s, children: ({ authMethod: r, step: e, Form: h }) => /* @__PURE__ */ o(m, { children: [
-            /* @__PURE__ */ o("div", { className: i["title-desc-wrapper"], children: [
-              e === "verification" ? /* @__PURE__ */ n(t, { as: "div", children: /* @__PURE__ */ n(l, {}) }) : /* @__PURE__ */ n(l, {}),
-              e === "credentials" ? /* @__PURE__ */ n(t, { as: "div", children: /* @__PURE__ */ n(a, { authMethod: r }) }) : /* @__PURE__ */ n(a, { authMethod: r })
-            ] }),
-            /* @__PURE__ */ n("div", { className: i["sign-in-form"], children: h }),
-            e === "credentials" && /* @__PURE__ */ n(w, { activeMethod: r })
-          ] }) }),
-          d && /* @__PURE__ */ n(y, { className: i.footer })
-        ] })
-      }
-    ) })
-  ] });
-}, j = () => /* @__PURE__ */ o(t, { children: [
-  /* @__PURE__ */ n(v, { asChild: !0, children: /* @__PURE__ */ n(l, { as: "span" }) }),
-  /* @__PURE__ */ n(C, { asChild: !0, children: /* @__PURE__ */ n(a, { as: "span" }) })
+          /* @__PURE__ */ n("div", { className: i["sign-in-form"], children: a }),
+          s === "credentials" && /* @__PURE__ */ n(z, { activeMethod: e })
+        ] }) }),
+        r && /* @__PURE__ */ n(E, { className: i.footer })
+      ] })
+    }
+  ) });
+}, an = ({ children: o, open: r, setIsOpen: l, onSuccess: e }) => {
+  const s = o ? u(o, f) : !1, a = o ? u(o, c) : !1, M = !s && !a, I = b(() => ({ onSuccess: e }), [e]);
+  return /* @__PURE__ */ n(p.Provider, { value: I, children: /* @__PURE__ */ n(B, { open: r, onOpenChange: l, children: M ? /* @__PURE__ */ t(d, { children: [
+    /* @__PURE__ */ n(f, { children: o }),
+    /* @__PURE__ */ n(c, {})
+  ] }) : /* @__PURE__ */ t(d, { children: [
+    o,
+    !a && /* @__PURE__ */ n(c, {})
+  ] }) }) });
+}, q = () => /* @__PURE__ */ t(m, { children: [
+  /* @__PURE__ */ n(D, { asChild: !0, children: /* @__PURE__ */ n(g, { as: "span" }) }),
+  /* @__PURE__ */ n(F, { asChild: !0, children: /* @__PURE__ */ n(_, { as: "span" }) })
 ] });
 export {
-  R as SignInModal
+  an as SignInModal,
+  c as SignInModalContent,
+  f as SignInModalTrigger
 };

package/dist/components/SignOutButton/index.d.ts

@@ -1,8 +1,7 @@
 import { ReactNode } from 'react';
-import { ButtonVariant } from '../../theme/theme';
-export type SignOutButtonProps = {
+import { ButtonProps } from '../ui/Button';
+export interface SignOutButtonProps extends ButtonProps {
     children?: ReactNode;
     onSuccess?: () => void;
-    variant?: ButtonVariant;
-};
-export declare const SignOutButton: ({ children, variant, onSuccess }: SignOutButtonProps) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const SignOutButton: ({ children, className, onSuccess, ...props }: SignOutButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignOutButton/index.js

@@ -1,16 +1,29 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useSignOut as r } from "@coinbase/cdp-hooks";
+import { jsx as r } from "react/jsx-runtime";
+import { useSignOut as m } from "@coinbase/cdp-hooks";
+import { c } from "../../chunks/lite.1fxw3LjI.js";
 import "react";
-import { Button as m } from "../ui/Button/index.js";
-import "../../theme/theme.js";
-import '../../assets/SignOutButton.css';const e = {
+import { Button as e } from "../ui/Button/index.js";
+import '../../assets/SignOutButton.css';const g = {
   "sign-out-button": "SignOutButton-module__sign-out-button___qiybe"
-}, O = ({ children: t, variant: o = "primary", onSuccess: n }) => {
-  const { signOut: i } = r(), u = async () => {
-    await i(), n?.();
+}, b = ({
+  children: o,
+  className: n = "",
+  onSuccess: i,
+  ...t
+}) => {
+  const { signOut: u } = m(), s = async () => {
+    await u(), i?.();
   };
-  return /* @__PURE__ */ s(m, { variant: o, className: e["sign-out-button"], onClick: u, children: t || "Sign out" });
+  return /* @__PURE__ */ r(
+    e,
+    {
+      className: t.asChild ? "" : c(g["sign-out-button"], n),
+      onClick: s,
+      ...t,
+      children: o || "Sign out"
+    }
+  );
 };
 export {
-  O as SignOutButton
+  b as SignOutButton
 };

package/dist/components/ui/Button/index.js

@@ -1,19 +1,20 @@
-import { jsx as t, jsxs as c, Fragment as p } from "react/jsx-runtime";
+import { jsx as t, jsxs as y, Fragment as c } from "react/jsx-runtime";
+import { c as p } from "../../../chunks/lite.1fxw3LjI.js";
 import { forwardRef as u } from "react";
 import { ButtonBase as k } from "../ButtonBase/index.js";
 import { LoadingSpinner as B } from "../LoadingSpinner/index.js";
-import { VisuallyHidden as b } from "../VisuallyHidden/index.js";
+import { VisuallyHidden as f } from "../VisuallyHidden/index.js";
 import "../../../theme/theme.js";
-import '../../../assets/Button.css';const f = "Button-module__btn___Wj6Dr", S = "Button-module__primary___WGT--", h = "Button-module__secondary___Fx0LJ", r = {
-  btn: f,
+import '../../../assets/Button.css';const b = "Button-module__btn___Wj6Dr", h = "Button-module__primary___WGT--", S = "Button-module__secondary___Fx0LJ", r = {
+  btn: b,
   "link-primary": "Button-module__link-primary___6Zgkh",
   "link-secondary": "Button-module__link-secondary___S0Qdo",
-  primary: S,
-  secondary: h,
+  primary: h,
+  secondary: S,
   "transparent-primary": "Button-module__transparent-primary___iwWv5",
   "transparent-secondary": "Button-module__transparent-secondary___GfRXu",
   "control-btn": "Button-module__control-btn___9Gkoz"
-}, a = {
+}, e = {
   primary: r.primary,
   secondary: r.secondary,
   linkPrimary: r["link-primary"],
@@ -23,27 +24,28 @@ import '../../../assets/Button.css';const f = "Button-module__btn___Wj6Dr", S =
   control: r["control-btn"]
 }, x = u(
   ({
-    children: e,
-    className: i = "",
+    children: i,
+    className: m = "",
     isPending: o,
     pendingLabel: s = "Loading...",
-    size: m = "md",
+    size: _ = "md",
     variant: n = "primary",
-    ..._
+    ...a
   }, d) => {
-    const y = n === "linkPrimary" || n === "linkSecondary" ? "none" : m, l = a[n] ?? a.primary;
+    const l = n === "linkPrimary" || n === "linkSecondary" ? "none" : _;
     return /* @__PURE__ */ t(
       k,
       {
-        className: `${r.btn} ${l} ${i}`,
+        className: a.asChild ? "" : p(r.btn, e[n] ?? e.primary, m),
         ref: d,
         isPending: o,
-        size: y,
-        ..._,
-        children: o ? /* @__PURE__ */ c(p, { children: [
+        size: l,
+        "data-variant": n,
+        ...a,
+        children: o ? /* @__PURE__ */ y(c, { children: [
           /* @__PURE__ */ t(B, { "aria-hidden": "true" }),
-          /* @__PURE__ */ t(b, { children: s })
-        ] }) : e
+          /* @__PURE__ */ t(f, { children: s })
+        ] }) : i
       }
     );
   }

package/dist/components/ui/ButtonBase/index.d.ts

@@ -1,6 +1,7 @@
 import { ButtonHTMLAttributes } from 'react';
 import { ButtonSize } from '../../../theme/theme';
 export interface ButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
     fullWidth?: boolean;
     isPending?: boolean;
     size?: ButtonSize;

package/dist/components/ui/ButtonBase/index.js

@@ -1,45 +1,48 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as B, useMemo as r } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import { Primitive as n } from "@radix-ui/react-primitive";
+import { c as u } from "../../../chunks/lite.1fxw3LjI.js";
+import { forwardRef as B } from "react";
 import "../../../theme/theme.js";
-import '../../../assets/ButtonBase.css';const z = "ButtonBase-module__btn___9S8PJ", s = {
-  btn: z,
+import '../../../assets/ButtonBase.css';const r = "ButtonBase-module__btn___9S8PJ", s = {
+  btn: r,
   "full-width": "ButtonBase-module__full-width___vLJsn",
   "size-lg": "ButtonBase-module__size-lg___569jT",
   "size-md": "ButtonBase-module__size-md___sAsBJ",
   "size-sm": "ButtonBase-module__size-sm___xHCtU",
   "size-xs": "ButtonBase-module__size-xs___LiiO7"
-}, _ = {
+}, i = {
   lg: s["size-lg"],
   md: s["size-md"],
   sm: s["size-sm"],
   xs: s["size-xs"],
   none: ""
-}, c = B(
+}, z = B(
   ({
-    children: n,
+    children: _,
     className: m = "",
     fullWidth: t = !1,
-    isPending: i,
-    size: o = "md",
-    ...u
-  }, a) => {
-    const l = r(() => {
-      const e = [s.btn];
-      return e.push(_[o] ?? _.md), t && e.push(s["full-width"]), e.join(" ");
-    }, [t, o]);
-    return /* @__PURE__ */ d(
-      "button",
-      {
-        className: `${l} ${m}`,
-        ref: a,
-        "data-pending": i,
-        ...u,
-        children: n
-      }
-    );
-  }
+    isPending: a,
+    size: e = "md",
+    ...o
+  }, d) => /* @__PURE__ */ l(
+    n.button,
+    {
+      className: o.asChild ? "" : u(
+        s.btn,
+        i[e] ?? i.md,
+        t && s["full-width"],
+        m
+      ),
+      ref: d,
+      "data-pending": a,
+      "data-size": e,
+      "data-full-width": t === !0 ? !0 : void 0,
+      ...o,
+      children: _
+    }
+  )
 );
-c.displayName = "ButtonBase";
+z.displayName = "ButtonBase";
 export {
-  c as ButtonBase
+  z as ButtonBase
 };

package/dist/components/ui/Modal/index.d.ts

@@ -1,6 +1,8 @@
 import { DialogContentProps } from '@radix-ui/react-dialog';
-import { HTMLAttributes } from 'react';
-interface ModalContentProps extends DialogContentProps, HTMLAttributes<HTMLDivElement> {
+import { CSSProperties, HTMLAttributes } from 'react';
+export interface ModalContentProps extends DialogContentProps, HTMLAttributes<HTMLDivElement> {
+    overlayClassName?: string;
+    overlayStyle?: CSSProperties;
 }
 export declare const ModalContent: import('react').ForwardRefExoticComponent<ModalContentProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare const Modal: import('react').FC<import('@radix-ui/react-dialog').DialogProps>;
@@ -8,4 +10,3 @@ export declare const ModalClose: import('react').ForwardRefExoticComponent<impor
 export declare const ModalDescription: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>>;
 export declare const ModalTitle: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
 export declare const ModalTrigger: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/components/ui/Modal/index.js

@@ -1,27 +1,31 @@
-import { jsx as o, jsxs as t } from "react/jsx-runtime";
-import { Dialog as i, DialogTitle as c, DialogDescription as d, DialogPortal as n, DialogOverlay as m, DialogContent as _, DialogClose as g, DialogTrigger as p } from "@radix-ui/react-dialog";
-import { forwardRef as M } from "react";
-import { useTheme as D } from "../../ThemeProvider/index.js";
-import '../../../assets/Modal.css';const f = "Modal-module__modal___MUsZA", y = "Modal-module__overlay___-RqGQ", v = "Modal-module__spacer___dIfOA", l = {
-  modal: f,
-  overlay: y,
-  spacer: v
-}, u = M(
-  ({ children: a, ...e }, s) => {
-    const { cssVariables: r } = D();
-    return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ t(m, { className: l.overlay, style: r, children: [
-      /* @__PURE__ */ o("div", { className: l.spacer }),
-      /* @__PURE__ */ o(_, { ...e, ref: s, className: l.modal, children: a })
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { Dialog as m, DialogTitle as n, DialogDescription as _, DialogPortal as p, DialogOverlay as g, DialogContent as M, DialogClose as D, DialogTrigger as f } from "@radix-ui/react-dialog";
+import { c as u } from "../../../chunks/lite.1fxw3LjI.js";
+import { forwardRef as y, useMemo as v } from "react";
+import { useTheme as C } from "../../ThemeProvider/index.js";
+import '../../../assets/Modal.css';const T = "Modal-module__modal___MUsZA", x = "Modal-module__overlay___-RqGQ", N = "Modal-module__spacer___dIfOA", a = {
+  modal: T,
+  overlay: x,
+  spacer: N
+}, h = y(
+  ({ children: e, overlayClassName: r = "", overlayStyle: l, ...t }, c) => {
+    const { cssVariables: s } = C(), i = v(
+      () => ({ ...s, ...l }),
+      [s, l]
+    );
+    return /* @__PURE__ */ o(p, { children: /* @__PURE__ */ d(g, { className: u(a.overlay, r), style: i, children: [
+      /* @__PURE__ */ o("div", { className: a.spacer }),
+      /* @__PURE__ */ o(M, { ...t, ref: c, className: a.modal, children: e })
     ] }) });
   }
 );
-u.displayName = "ModalContent";
-const x = i, j = g, A = d, O = c, R = p;
+h.displayName = "ModalContent";
+const q = m, w = D, G = _, I = n, P = f;
 export {
-  x as Modal,
-  j as ModalClose,
-  u as ModalContent,
-  A as ModalDescription,
-  O as ModalTitle,
-  R as ModalTrigger
+  q as Modal,
+  w as ModalClose,
+  h as ModalContent,
+  G as ModalDescription,
+  I as ModalTitle,
+  P as ModalTrigger
 };

package/dist/index.d.ts

@@ -8,6 +8,8 @@ export * from './components/SignIn';
 export * from './components/SignOutButton';
 export * from './components/SignInModal';
 export * from './components/ThemeProvider';
+export * from './components/ui/Button';
+export * from './components/ui/Modal';
 export * from './theme';
 export * from './icons';
 export * from './utils';