@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
209 lines (196 loc) • 7.41 kB
JavaScript
'use client';
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),z=require("../../../theme/context.cjs"),t=require("@emotion/react"),_=require("@emotion/styled"),r=require("react"),B=require("react-dom"),p=e=>e&&e.__esModule?e:{default:e},a=p(_),E=p(r),I=t.keyframes`
from {
opacity: 0;
}
to {
opacity: 1;
}
`,L=t.keyframes`
from {
opacity: 1;
}
to {
opacity: 0;
}
`,P=t.keyframes`
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
`,F=t.keyframes`
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.95);
}
`,H=e=>{const{theme:s,size:o="md"}=e;switch(o){case"xs":return t.css`
max-width: 320px;
width: 90vw;
`;case"sm":return t.css`
max-width: 400px;
width: 90vw;
`;case"md":return t.css`
max-width: 512px;
width: 90vw;
`;case"lg":return t.css`
max-width: 640px;
width: 90vw;
`;case"xl":return t.css`
max-width: 768px;
width: 90vw;
`;case"2xl":return t.css`
max-width: 896px;
width: 90vw;
`;case"3xl":return t.css`
max-width: 1024px;
width: 90vw;
`;case"4xl":return t.css`
max-width: 1152px;
width: 90vw;
`;case"5xl":return t.css`
max-width: 1280px;
width: 90vw;
`;case"full":return t.css`
width: 100vw;
height: 100vh;
max-width: none;
max-height: none;
border-radius: 0;
margin: 0;
`;default:return t.css`
max-width: 512px;
width: 90vw;
`}},T=e=>{const{theme:s,radius:o="lg",size:i}=e;if(i==="full")return t.css``;switch(o){case"none":return t.css`border-radius: ${s.borderRadius.none};`;case"sm":return t.css`border-radius: ${s.borderRadius.sm};`;case"md":return t.css`border-radius: ${s.borderRadius.md};`;case"lg":return t.css`border-radius: ${s.borderRadius.lg};`;case"xl":return t.css`border-radius: ${s.borderRadius.xl};`;default:return t.css`border-radius: ${s.borderRadius.lg};`}},N=e=>{const{placement:s="center",size:o}=e;if(o==="full")return t.css`
justify-content: center;
align-items: center;
`;switch(s){case"top":return t.css`
justify-content: flex-start;
align-items: flex-start;
padding-top: 3rem;
`;case"top-center":return t.css`
justify-content: center;
align-items: flex-start;
padding-top: 3rem;
`;case"center":return t.css`
justify-content: center;
align-items: center;
`;case"bottom":return t.css`
justify-content: flex-start;
align-items: flex-end;
padding-bottom: 3rem;
`;case"bottom-center":return t.css`
justify-content: center;
align-items: flex-end;
padding-bottom: 3rem;
`;default:return t.css`
justify-content: center;
align-items: center;
@media (max-height: 640px) {
align-items: flex-start;
padding-top: 2rem;
padding-bottom: 2rem;
}
`}},W=e=>{const{theme:s,backdrop:o="opaque"}=e;switch(o){case"transparent":return t.css`
background-color: transparent;
`;case"opaque":return t.css`
background-color: rgba(0, 0, 0, 0.5);
`;case"blur":return t.css`
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(4px);
`;default:return t.css`
background-color: rgba(0, 0, 0, 0.5);
`}},A=a.default.div`
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: ${e=>e.theme.zIndex.modal};
display: flex;
padding: ${e=>e.theme.spacing[4]};
animation: ${e=>e.isClosing?L:I}
${e=>e.theme.transitions.normal};
${W}
${N}
/* Custom CSS prop */
${e=>e.css}
`,D=a.default.div`
position: relative;
background-color: ${e=>e.theme.colors.background.primary};
box-shadow: ${e=>e.theme.shadows.xl};
display: flex;
flex-direction: column;
outline: none;
animation: ${e=>e.isClosing?F:P}
${e=>e.theme.transitions.normal};
${H}
${T}
${e=>e.scrollBehavior==="inside"&&t.css`
max-height: calc(100vh - 2 * ${e.theme.spacing[4]});
overflow: hidden;
`}
${e=>e.scrollBehavior==="outside"&&t.css`
max-height: none;
overflow: visible;
`}
`,G=a.default.button`
position: absolute;
top: ${e=>e.theme.spacing[4]};
right: ${e=>e.theme.spacing[4]};
background: none;
border: none;
cursor: pointer;
padding: ${e=>e.theme.spacing[2]};
border-radius: ${e=>e.theme.borderRadius.sm};
color: ${e=>e.theme.colors.text.secondary};
transition: all ${e=>e.theme.transitions.fast};
z-index: 10;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: ${e=>e.theme.colors.neutral[100]};
color: ${e=>e.theme.colors.text.primary};
}
&:focus {
outline: 2px solid ${e=>e.theme.colors.border.focus};
outline-offset: 2px;
}
`,J=()=>n.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[n.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),n.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),y=E.default.forwardRef(({children:e,isOpen:s=!1,onClose:o,size:i="md",radius:w="lg",placement:b="auto",hideCloseButton:$=!1,isDismissable:m=!0,isKeyboardDismissDisabled:f=!1,scrollBehavior:d="normal",backdrop:v="opaque",className:k,css:j,portalContainer:M,...R},V)=>{const{theme:h}=z.useTheme(),l=r.useRef(null),x=r.useRef(null),u=r.useCallback(c=>{!f&&c.key==="Escape"&&s&&o?.()},[s,o,f]),C=r.useCallback(c=>{m&&c.target===x.current&&o?.()},[m,o]);r.useEffect(()=>{s&&l.current&&l.current.focus()},[s]),r.useEffect(()=>{if(s&&d!=="normal"){const c=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=c}}},[s,d]),r.useEffect(()=>{if(s)return document.addEventListener("keydown",u),()=>document.removeEventListener("keydown",u)},[s,u]);const g={...R,size:i,radius:w,placement:b,backdrop:v,scrollBehavior:d,className:k,theme:h,css:j};if(!s)return null;const S=n.jsx(A,{ref:x,onClick:C,...g,children:n.jsxs(D,{ref:l,tabIndex:-1,role:"dialog","aria-modal":"true",...g,children:[!$&&n.jsx(G,{theme:h,onClick:o,"aria-label":"Close modal",children:n.jsx(J,{})}),e]})}),q=M||document.body;return B.createPortal(S,q)});y.displayName="Modal";const K=a.default.div`
display: flex;
flex-direction: column;
gap: ${e=>e.theme.spacing[2]};
padding: ${e=>e.theme.spacing[6]} ${e=>e.theme.spacing[6]} 0;
padding-right: ${e=>e.theme.spacing[12]}; /* Space for close button */
${e=>e.css}
`,Q=a.default.div`
display: flex;
flex-direction: column;
gap: ${e=>e.theme.spacing[4]};
padding: ${e=>e.theme.spacing[6]};
flex: 1;
${e=>e.scrollBehavior==="inside"&&t.css`
overflow-y: auto;
max-height: none;
`}
${e=>e.css}
`,U=a.default.div`
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: ${e=>e.theme.spacing[3]};
padding: 0 ${e=>e.theme.spacing[6]} ${e=>e.theme.spacing[6]};
${e=>e.css}
`;exports.Modal=y;exports.ModalBody=Q;exports.ModalFooter=U;exports.ModalHeader=K;
//# sourceMappingURL=modal.cjs.map