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

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as s, jsxs as x, Fragment as H } from "react/jsx-runtime";
import "@emotion/styled";
import { Button as K } from "../../ui/button/button.js";
import { Modal as L, ModalHeader as R, ModalBody as X } from "../../ui/modal/modal.js";
import { XMarkIcon as A } from "@heroicons/react/24/outline";
import F, { useCallback as i } from "react";
import { useConfig as G } from "../../../hooks/use-config.js";
import { SignUpForm as J } from "./sign-up-form.js";
function q({
  isOpen: l = !1,
  onClose: e,
  modalSize: o = "md",
  closeOnBackdropClick: r = !0,
  closeOnEscape: m = !0,
  modalClassName: c = "",
  showCloseButton: n = !0,
  methods: a = ["password", "oauth", "magic-link"],
  email: v,
  organizationId: g,
  invitationToken: N,
  redirectUrl: u,
  onSuccess: h,
  onError: z,
  title: d,
  subtitle: f,
  size: w = "md",
  showBranding: y = !0,
  disabled: t = !1,
  requireTerms: M = !0,
  termsUrl: S = "/terms",
  privacyUrl: B = "/privacy",
  backdrop: b = "blur",
  placement: D = "center"
}) {
  const { components: I } = G(), P = I.SignUpModal;
  if (P)
    return /* @__PURE__ */ s(
      P,
      {
        isOpen: l,
        onClose: e,
        modalSize: o,
        closeOnBackdropClick: r,
        closeOnEscape: m,
        modalClassName: c,
        showCloseButton: n,
        methods: a,
        email: v,
        organizationId: g,
        invitationToken: N,
        redirectUrl: u,
        onSuccess: h,
        onError: z,
        title: d,
        subtitle: f,
        size: w,
        showBranding: y,
        disabled: t,
        requireTerms: M,
        termsUrl: S,
        privacyUrl: B,
        backdrop: b,
        placement: D
      }
    );
  const $ = i(
    (k) => {
      h?.(k), u || setTimeout(() => {
        e?.();
      }, 2e3);
    },
    [h, e, u]
  ), j = i(() => {
    t || e?.();
  }, [e, t]), p = (() => {
    switch (o) {
      case "sm":
        return {
          size: "sm",
          className: "max-w-sm max-h-[90vh]",
          scrollBehavior: "inside"
        };
      case "md":
        return {
          size: "md",
          className: "max-w-md max-h-[90vh]",
          scrollBehavior: "inside"
        };
      case "lg":
        return {
          size: "lg",
          className: "max-w-lg max-h-[90vh]",
          scrollBehavior: "inside"
        };
      case "xl":
        return {
          size: "xl",
          className: "max-w-xl max-h-[90vh]",
          scrollBehavior: "inside"
        };
      case "full":
        return {
          size: "full",
          className: "max-w-full h-full",
          scrollBehavior: "outside"
        };
      default:
        return {
          size: "md",
          className: "max-w-md max-h-[90vh]",
          scrollBehavior: "inside"
        };
    }
  })();
  return /* @__PURE__ */ s(
    L,
    {
      isOpen: l,
      onClose: j,
      size: p.size,
      backdrop: b,
      placement: D,
      scrollBehavior: p.scrollBehavior,
      closeButton: !1,
      isDismissable: r && !t,
      isKeyboardDismissDisabled: !m || t,
      className: `${c}`,
      classNames: {
        wrapper: "z-[9999]",
        backdrop: "z-[9998]",
        base: `${p.className}`,
        body: "px-0 py-0"
      },
      children: /* @__PURE__ */ x(H, { children: [
        /* @__PURE__ */ x(R, { className: "flex items-center justify-between px-6 py-4 border-b border-divider", children: [
          /* @__PURE__ */ x("div", { className: "flex-1", children: [
            d && /* @__PURE__ */ s("h2", { className: "text-lg font-semibold text-foreground", children: d }),
            f && /* @__PURE__ */ s("p", { className: "text-sm text-default-500 mt-1", children: f })
          ] }),
          n && /* @__PURE__ */ s(
            K,
            {
              isIconOnly: !0,
              variant: "light",
              size: "sm",
              onPress: j,
              className: "text-default-400 hover:text-default-600 -mr-2",
              isDisabled: t,
              children: /* @__PURE__ */ s(A, { className: "w-4 h-4" })
            }
          )
        ] }),
        /* @__PURE__ */ s(X, { children: /* @__PURE__ */ s("div", { className: "px-6 py-6", children: /* @__PURE__ */ s(
          J,
          {
            methods: a,
            email: v,
            organizationId: g,
            invitationToken: N,
            redirectUrl: u,
            onSuccess: $,
            onError: z,
            title: void 0,
            subtitle: void 0,
            size: w,
            showBranding: y,
            disabled: t,
            requireTerms: M,
            termsUrl: S,
            privacyUrl: B,
            variant: "minimal",
            className: "space-y-4",
            showSignInLink: !0,
            autoFocus: !0
          }
        ) }) })
      ] })
    }
  );
}
function C() {
  const [l, e] = F.useState(!1), [o, r] = F.useState({}), m = i((a) => {
    a && r(a), e(!0);
  }, []), c = i(() => {
    e(!1), setTimeout(() => {
      r({});
    }, 300);
  }, []), n = i(() => e((a) => !a), []);
  return {
    isOpen: l,
    open: m,
    close: c,
    toggle: n,
    setIsOpen: e,
    modalData: o,
    setModalData: r
  };
}
export {
  q as SignUpModal,
  C as useSignUpModal
};
//# sourceMappingURL=sign-up-modal.js.map