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

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as t, jsxs as a, Fragment as A } from "react/jsx-runtime";
import "@emotion/styled";
import { Card as G, CardHeader as I, CardBody as K, CardFooter as P } from "../../ui/card/card.js";
import { Divider as B } from "../../ui/divider/divider.js";
import { motion as Q } from "framer-motion";
import T from "react";
import { useConfig as X } from "../../../hooks/use-config.js";
import { useTheme as Z } from "../../../hooks/use-theme.js";
import { SignUpForm as _ } from "./sign-up-form.js";
function ct({
  variant: R = "shadow",
  className: c = "",
  padding: s = "lg",
  radius: m = "lg",
  shadow: u = "md",
  isBlurred: p = !1,
  methods: d = ["password", "oauth", "magic-link"],
  email: f,
  organizationId: g,
  invitationToken: n,
  redirectUrl: x,
  onSuccess: y,
  onError: h,
  title: C,
  subtitle: N,
  size: b = "md",
  showBranding: v = !0,
  disabled: S = !1,
  requireTerms: $ = !0,
  termsUrl: w = "/terms",
  privacyUrl: j = "/privacy",
  footer: l,
  header: D,
  maxWidth: r = 450,
  centered: i = !1
}) {
  const { components: V, organizationSettings: z } = X(), { getColorValue: q } = Z(), U = V.SignUpCard;
  if (U)
    return /* @__PURE__ */ t(
      U,
      {
        variant: R,
        className: c,
        padding: s,
        radius: m,
        shadow: u,
        isBlurred: p,
        methods: d,
        email: f,
        organizationId: g,
        invitationToken: n,
        redirectUrl: x,
        onSuccess: y,
        onError: h,
        title: C,
        subtitle: N,
        size: b,
        showBranding: v,
        disabled: S,
        requireTerms: $,
        termsUrl: w,
        privacyUrl: j,
        footer: l,
        header: D,
        maxWidth: r,
        centered: i
      }
    );
  const H = {
    hidden: {
      opacity: 0,
      y: 20,
      scale: 0.95
    },
    visible: {
      opacity: 1,
      y: 0,
      scale: 1,
      transition: {
        duration: 0.3,
        ease: "easeOut"
      }
    }
  }, M = {
    maxWidth: typeof r == "number" ? `${r}px` : r
  }, o = v && z?.branding, e = T.useMemo(() => {
    if (!n) return null;
    try {
      const E = atob(n);
      return JSON.parse(E);
    } catch {
      return null;
    }
  }, [n]), F = e ? {
    title: `Join ${e.orgName || "Organization"}`,
    subtitle: e.inviterName ? `${e.inviterName} has invited you to join` : "You've been invited to join"
  } : o?.customSignUpText ? {
    title: o.customSignUpText.title || "Create your account",
    subtitle: o.customSignUpText.subtitle || "Join us today"
  } : {
    title: "Create your account",
    subtitle: "Join us today"
  }, J = C || F.title, O = N || F.subtitle, Y = [
    i ? "flex items-center justify-center min-h-screen p-4" : ""
  ].filter(Boolean).join(" "), k = /* @__PURE__ */ a(
    G,
    {
      className: `${c} ${i ? "w-full" : ""}`,
      style: M,
      shadow: u,
      radius: m,
      isBlurred: p,
      children: [
        /* @__PURE__ */ t(
          I,
          {
            className: `flex flex-col items-center text-center gap-3 p-${s}`,
            children: D || /* @__PURE__ */ a(A, { children: [
              o?.logoUrl && /* @__PURE__ */ t(
                "img",
                {
                  src: o.logoUrl,
                  alt: "Organization Logo",
                  className: "h-12 w-auto mb-2"
                }
              ),
              J && /* @__PURE__ */ t("h1", { className: "text-2xl font-bold text-foreground", children: J }),
              O && /* @__PURE__ */ t("p", { className: "text-default-500 text-sm max-w-sm", children: O }),
              e && /* @__PURE__ */ a("div", { className: "bg-primary-50 dark:bg-primary-900/20 rounded-lg px-3 py-2 text-sm", children: [
                /* @__PURE__ */ a("p", { className: "text-primary-600 dark:text-primary-400", children: [
                  /* @__PURE__ */ t("span", { className: "font-medium", children: "Role:" }),
                  " ",
                  e.role
                ] }),
                e.expiresAt && /* @__PURE__ */ a("p", { className: "text-primary-500 text-xs mt-1", children: [
                  "Expires:",
                  " ",
                  new Date(e.expiresAt).toLocaleDateString()
                ] })
              ] })
            ] })
          }
        ),
        /* @__PURE__ */ t(B, {}),
        /* @__PURE__ */ t(K, { className: `p-${s}`, children: /* @__PURE__ */ t(
          _,
          {
            methods: d,
            email: f,
            organizationId: g,
            invitationToken: n,
            redirectUrl: x,
            onSuccess: y,
            onError: h,
            title: void 0,
            subtitle: void 0,
            size: b,
            showBranding: !1,
            disabled: S,
            requireTerms: $,
            termsUrl: w,
            privacyUrl: j,
            variant: "minimal",
            className: "space-y-4",
            showSignInLink: !0,
            autoFocus: !0
          }
        ) }),
        l && /* @__PURE__ */ a(A, { children: [
          /* @__PURE__ */ t(B, {}),
          /* @__PURE__ */ t(P, { className: `p-${s} text-center`, children: l })
        ] })
      ]
    }
  ), L = /* @__PURE__ */ t(
    Q.div,
    {
      initial: "hidden",
      animate: "visible",
      variants: H,
      style: { maxWidth: r },
      className: i ? "w-full" : "",
      children: k
    }
  );
  return i ? /* @__PURE__ */ t("div", { className: Y, children: L }) : L;
}
export {
  ct as SignUpCard
};
//# sourceMappingURL=sign-up-card.js.map