UNPKG

@frank-auth/react

Version:

Flexible and customizable React UI components for Frank Authentication

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