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

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as s, jsxs as y, Fragment as q } from "react/jsx-runtime";
import "@emotion/styled";
import { Card as R, CardHeader as X, CardBody as Y, CardFooter as Z } from "../../ui/card/card.js";
import { Divider as z } from "../../ui/divider/divider.js";
import { motion as _ } from "framer-motion";
import { useConfig as E } from "../../../hooks/use-config.js";
import { useTheme as F } from "../../../hooks/use-theme.js";
import { SignInForm as G } from "./sign-in-form.js";
function cs({
  variant: A = "shadow",
  className: v = "",
  padding: m = "lg",
  radius: x = "lg",
  shadow: N = "md",
  isBlurred: $ = !1,
  methods: C = ["password", "oauth", "magic-link"],
  email: S,
  organizationId: w,
  redirectUrl: j,
  onSuccess: h,
  onError: I,
  title: l,
  subtitle: o,
  size: V = "md",
  showBranding: b = !0,
  disabled: k = !1,
  footer: r,
  header: B,
  backgroundImage: f,
  backgroundGradient: p,
  animated: D = !0,
  maxWidth: n = 400,
  centered: t = !1,
  fullHeight: L = !1,
  showOrganizationBranding: O = !0,
  cardHeader: a,
  cardFooter: u,
  hideCardHeader: i = !1,
  hideCardFooter: g = !1
}) {
  const { components: J, organizationSettings: K } = E(), { getColorValue: W } = F(), P = J.SignInCard;
  if (P)
    return /* @__PURE__ */ s(
      P,
      {
        variant: A,
        className: v,
        padding: m,
        radius: x,
        shadow: N,
        isBlurred: $,
        methods: C,
        email: S,
        organizationId: w,
        redirectUrl: j,
        onSuccess: h,
        onError: I,
        title: l,
        subtitle: o,
        size: V,
        showBranding: b,
        disabled: k,
        footer: r,
        header: B,
        backgroundImage: f,
        backgroundGradient: p,
        animated: D,
        maxWidth: n,
        centered: t,
        fullHeight: L,
        showOrganizationBranding: O,
        cardHeader: a,
        cardFooter: u,
        hideCardHeader: i,
        hideCardFooter: g
      }
    );
  const M = {
    hidden: {
      opacity: 0,
      y: 20,
      scale: 0.95
    },
    visible: {
      opacity: 1,
      y: 0,
      scale: 1,
      transition: {
        duration: 0.3,
        ease: "easeOut"
      }
    }
  }, c = {};
  f && (c.backgroundImage = `url(${f})`, c.backgroundSize = "cover", c.backgroundPosition = "center"), p && (c.background = p), n && (c.maxWidth = typeof n == "number" ? `${n}px` : n);
  const e = O && K?.branding, Q = [
    t ? "flex items-center justify-center min-h-screen p-4" : "",
    L ? "h-full" : ""
  ].filter(Boolean).join(" "), T = /* @__PURE__ */ y(
    R,
    {
      className: `${v} ${t ? "w-full" : ""}`,
      style: c,
      shadow: N,
      radius: x,
      isBlurred: $,
      children: [
        !i && (a || l || o || e) && /* @__PURE__ */ s(
          X,
          {
            className: `flex flex-col items-center text-center gap-2 p-${m}`,
            children: a || /* @__PURE__ */ y(q, { children: [
              e?.logoUrl && /* @__PURE__ */ s(
                "img",
                {
                  src: e.logoUrl,
                  alt: "Organization Logo",
                  className: "h-12 w-auto mb-2"
                }
              ),
              l && /* @__PURE__ */ s("h1", { className: "text-2xl font-bold text-foreground", children: l }),
              o && /* @__PURE__ */ s("p", { className: "text-default-500 text-sm max-w-sm", children: o }),
              B
            ] })
          }
        ),
        !i && (a || l || o || e) && !g && /* @__PURE__ */ s(z, {}),
        /* @__PURE__ */ s(Y, { className: `p-${m}`, children: /* @__PURE__ */ s(
          G,
          {
            methods: C,
            email: S,
            organizationId: w,
            redirectUrl: j,
            onSuccess: h,
            onError: I,
            title: i ? l : void 0,
            subtitle: i ? o : void 0,
            size: V,
            showBranding: i ? b : !1,
            disabled: k,
            variant: "minimal",
            className: "space-y-4"
          }
        ) }),
        !g && (u || r) && /* @__PURE__ */ y(q, { children: [
          /* @__PURE__ */ s(z, {}),
          /* @__PURE__ */ s(Z, { className: `p-${m} text-center`, children: u || r })
        ] })
      ]
    }
  ), U = D ? /* @__PURE__ */ s(
    _.div,
    {
      initial: "hidden",
      animate: "visible",
      variants: M,
      style: { maxWidth: n },
      className: t ? "w-full" : "",
      children: T
    }
  ) : /* @__PURE__ */ s("div", { style: { maxWidth: n }, className: t ? "w-full" : "", children: T });
  return t ? /* @__PURE__ */ s("div", { className: Q, children: U }) : U;
}
export {
  cs as SignInCard
};
//# sourceMappingURL=sign-in-card.js.map