@frank-auth/react/dist/esm/components/auth/sign-up/sign-up.js

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as t, jsxs as h } from "react/jsx-runtime";
import c from "react";
import { SignUpForm as g } from "./sign-up-form.js";
import { SignUpModal as S } from "./sign-up-modal.js";
import { SignUpCard as b } from "./sign-up-card.js";
function n({
  mode: e = "form",
  modalProps: i = {},
  cardProps: m = {},
  formProps: o = {},
  autoMode: u = !1,
  ...a
}) {
  const s = c.useMemo(() => u ? typeof window < "u" && document.querySelector("[data-modal-backdrop]") ? "modal" : typeof window < "u" && document.querySelector("[data-card-container]") ? "card" : "form" : e, [u, e]);
  switch (u ? s : e) {
    case "modal":
      return /* @__PURE__ */ t(
        S,
        {
          ...a,
          ...i
        }
      );
    case "card":
      return /* @__PURE__ */ t(
        b,
        {
          ...a,
          ...m
        }
      );
    case "form":
    default:
      return /* @__PURE__ */ t(
        g,
        {
          ...a,
          ...o
        }
      );
  }
}
function w(e) {
  return /* @__PURE__ */ t(n, { ...e, mode: "form" });
}
function k(e) {
  return /* @__PURE__ */ t(n, { ...e, mode: "modal" });
}
function x(e) {
  return /* @__PURE__ */ t(n, { ...e, mode: "card" });
}
function P({
  invitationToken: e,
  organizationName: i,
  inviterInfo: m,
  title: o,
  subtitle: u,
  ...a
}) {
  const s = c.useMemo(() => {
    try {
      const p = atob(e);
      return JSON.parse(p);
    } catch {
      return null;
    }
  }, [e]), l = i || s?.orgName || "the organization", r = m?.name || s?.inviterName, d = o || `Join ${l}`, f = u || (r ? `${r} has invited you to join ${l}` : `You've been invited to join ${l}`);
  return /* @__PURE__ */ t(
    n,
    {
      ...a,
      invitationToken: e,
      organizationId: s?.orgId,
      title: d,
      subtitle: f,
      showBranding: !0
    }
  );
}
function q(e) {
  return /* @__PURE__ */ t(
    n,
    {
      ...e,
      formProps: {
        variant: "compact",
        collectFields: ["firstName", "lastName"],
        ...e.formProps
      }
    }
  );
}
function F(e) {
  return /* @__PURE__ */ t(
    n,
    {
      ...e,
      formProps: {
        variant: "default",
        collectFields: ["firstName", "lastName", "username", "phoneNumber"],
        passwordRequirements: {
          minLength: 12,
          requireUppercase: !0,
          requireLowercase: !0,
          requireNumbers: !0,
          requireSymbols: !0
        },
        ...e.formProps
      }
    }
  );
}
function M(e) {
  return /* @__PURE__ */ t(
    n,
    {
      ...e,
      methods: ["oauth"],
      title: "Create your account",
      subtitle: "Sign up with your social account"
    }
  );
}
function j(e) {
  return /* @__PURE__ */ t(
    n,
    {
      ...e,
      methods: ["magic-link", "passkey", "oauth"],
      title: "Create your account",
      subtitle: "Sign up without a password"
    }
  );
}
function B({
  onSuccess: e,
  ...i
}) {
  const [m, o] = c.useState("basic"), [u, a] = c.useState(null), s = c.useCallback((r) => {
    r.status === "complete" ? e?.(r) : r.status === "needs_verification" ? (a(r), o("verification")) : (a(r), o("detailed"));
  }, [e]), l = c.useCallback((r) => {
    r.status === "complete" ? e?.(r) : (a(r), o("verification"));
  }, [e]);
  switch (c.useCallback((r) => {
    e?.(r);
  }, [e]), m) {
    case "detailed":
      return /* @__PURE__ */ t(
        n,
        {
          ...i,
          title: "Complete your profile",
          subtitle: "Tell us a bit more about yourself",
          formProps: {
            collectFields: ["firstName", "lastName", "username"],
            autoFocus: !0,
            ...i.formProps
          },
          onSuccess: l
        }
      );
    case "verification":
      return /* @__PURE__ */ h("div", { className: "text-center space-y-4", children: [
        /* @__PURE__ */ t("h2", { className: "text-xl font-semibold", children: "Check your email" }),
        /* @__PURE__ */ t("p", { className: "text-default-500", children: "We've sent a verification link to your email address" }),
        /* @__PURE__ */ t(
          "button",
          {
            onClick: () => o("basic"),
            className: "text-primary hover:underline",
            children: "Use a different email"
          }
        )
      ] });
    case "basic":
    default:
      return /* @__PURE__ */ t(
        n,
        {
          ...i,
          formProps: {
            variant: "minimal",
            collectFields: [],
            ...i.formProps
          },
          onSuccess: s
        }
      );
  }
}
export {
  F as ComprehensiveSignUp,
  P as OrganizationInviteSignUp,
  j as PasswordlessSignUp,
  B as ProgressiveSignUp,
  q as QuickSignUp,
  n as SignUp,
  x as SignUpCardComponent,
  w as SignUpFormComponent,
  k as SignUpModalComponent,
  M as SocialSignUp
};
//# sourceMappingURL=sign-up.js.map