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

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as e, jsxs as g, Fragment as O } from "react/jsx-runtime";
import "@emotion/styled";
import { Button as Q } from "../../ui/button/button.js";
import { Modal as T, ModalHeader as V, ModalBody as W, ModalFooter as Y } from "../../ui/modal/modal.js";
import { XMarkIcon as Z } from "@heroicons/react/24/outline";
import _, { useCallback as t } from "react";
import { useConfig as k } from "../../../hooks/use-config.js";
import { SignInForm as F } from "./sign-in-form.js";
function ts({
  isOpen: m = !1,
  onClose: s,
  modalSize: l = "md",
  closeOnBackdropClick: n = !0,
  closeOnEscape: c = !0,
  modalClassName: r = "",
  showCloseButton: x = !0,
  methods: z = ["password", "oauth", "magic-link"],
  email: d,
  organizationId: M,
  redirectUrl: i,
  onSuccess: p,
  onError: y,
  title: u,
  subtitle: f,
  size: I = "md",
  showBranding: h = !0,
  disabled: a = !1,
  showSignUpLink: v = !0,
  showForgotPasswordLink: w = !0,
  footer: S,
  header: D,
  backdrop: j = "blur",
  placement: P = "center",
  modalHeader: $,
  modalFooter: N,
  hideHeader: o = !1,
  hideFooter: b = !1,
  scrollBehavior: K = "inside"
}) {
  const { components: A } = k(), R = A.SignInModal;
  if (R)
    return /* @__PURE__ */ e(
      R,
      {
        isOpen: m,
        onClose: s,
        modalSize: l,
        closeOnBackdropClick: n,
        closeOnEscape: c,
        modalClassName: r,
        showCloseButton: x,
        methods: z,
        email: d,
        organizationId: M,
        redirectUrl: i,
        onSuccess: p,
        onError: y,
        title: u,
        subtitle: f,
        size: I,
        showBranding: h,
        disabled: a,
        showSignUpLink: v,
        showForgotPasswordLink: w,
        footer: S,
        header: D,
        backdrop: j,
        placement: P,
        modalHeader: $,
        modalFooter: N,
        hideHeader: o,
        hideFooter: b,
        scrollBehavior: K
      }
    );
  const G = t(
    (J) => {
      p?.(J), i || s?.();
    },
    [p, s, i]
  ), X = t(() => {
    a || s?.();
  }, [s, a]), q = (() => {
    switch (l) {
      case "sm":
        return { size: "sm", className: "max-w-sm" };
      case "md":
        return { size: "md", className: "max-w-md" };
      case "lg":
        return { size: "lg", className: "max-w-lg" };
      case "xl":
        return { size: "xl", className: "max-w-xl" };
      case "full":
        return { size: "full", className: "max-w-full" };
      default:
        return { size: "md", className: "max-w-md" };
    }
  })();
  return /* @__PURE__ */ e(
    T,
    {
      isOpen: m,
      onClose: X,
      size: q.size,
      backdrop: j,
      placement: P,
      scrollBehavior: K,
      closeButton: x,
      isDismissable: n && !a,
      isKeyboardDismissDisabled: !c || a,
      className: `${r}`,
      classNames: {
        wrapper: "z-[9999]",
        backdrop: "z-[9998]",
        base: `${q.className}`
      },
      children: /* @__PURE__ */ g(O, { children: [
        !o && /* @__PURE__ */ e(V, { className: "flex flex-col gap-1 px-6 py-4", children: $ || /* @__PURE__ */ g("div", { className: "flex items-center justify-between w-full", children: [
          /* @__PURE__ */ g("div", { children: [
            u && /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-foreground", children: u }),
            f && /* @__PURE__ */ e("p", { className: "text-sm text-default-500 mt-1", children: f })
          ] }),
          x && /* @__PURE__ */ e(
            Q,
            {
              isIconOnly: !0,
              variant: "light",
              size: "sm",
              onPress: X,
              className: "text-default-400 hover:text-default-600",
              isDisabled: a,
              children: /* @__PURE__ */ e(Z, { className: "w-4 h-4" })
            }
          )
        ] }) }),
        /* @__PURE__ */ e(W, { className: "px-6 py-4", children: /* @__PURE__ */ e(
          F,
          {
            methods: z,
            email: d,
            organizationId: M,
            redirectUrl: i,
            onSuccess: G,
            onError: y,
            title: o ? u : void 0,
            subtitle: o ? f : void 0,
            size: I,
            showBranding: h,
            disabled: a,
            showSignUpLink: v,
            showForgotPasswordLink: w,
            header: D,
            footer: S,
            variant: "minimal",
            className: "space-y-4"
          }
        ) }),
        !b && N && /* @__PURE__ */ e(Y, { className: "px-6 py-4", children: N })
      ] })
    }
  );
}
function ms() {
  const [m, s] = _.useState(!1), l = t(() => s(!0), []), n = t(() => s(!1), []), c = t(() => s((r) => !r), []);
  return {
    isOpen: m,
    open: l,
    close: n,
    toggle: c,
    setIsOpen: s
  };
}
export {
  ts as SignInModal,
  ms as useSignInModal
};
//# sourceMappingURL=sign-in-modal.js.map