@guruhotel/aura-ui
Version:
⚛️ React UI library by GuruHotel
1 lines • 1.49 kB
JavaScript
import{styled as t,keyframes as e}from"../theme";import*as o from"@radix-ui/react-dialog";import{Text as i}from"../text";import{rounded as a}from"../common-variants";const r=e({"0%":{opacity:0},"100%":{opacity:1}}),n=e({"0%":{opacity:0,transform:"translate(-50%, -48%) scale(.96)"},"100%":{opacity:1,transform:"translate(-50%, -50%) scale(1)"}});export const StyledOverlay=t(o.Overlay,{backgroundColor:"$blackA9",position:"fixed",inset:0,"@media (prefers-reduced-motion: no-preference)":{animation:`${r} 150ms cubic-bezier(0.16, 1, 0.3, 1)`}});export const StyledContent=t(o.Content,{backgroundColor:"white",boxShadow:"$md",position:"fixed",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"90vw",maxHeight:"85vh",padding:25,"&:focus":{outline:"none"},"@media (prefers-reduced-motion: no-preference)":{animation:`${n} 150ms cubic-bezier(0.16, 1, 0.3, 1)`},variants:{rounded:a,isCentered:{true:{top:"50%",left:"50%",transform:"translate(-50%, -50%)"}},size:{xs:{maxWidth:"$xs"},sm:{maxWidth:"$sm"},md:{maxWidth:"$md"},lg:{maxWidth:"$lg"},xl:{maxWidth:"$xl"},"2xl":{maxWidth:"$2xl"},"3xl":{maxWidth:"$3xl"},"4xl":{maxWidth:"$4xl"},"5xl":{maxWidth:"$5xl"},"6xl":{maxWidth:"$6xl"},"7xl":{maxWidth:"$7xl"},"8xl":{maxWidth:"$8xl"},full:{maxWidth:"$full"}}},defaultVariants:{isCentered:!1,size:"sm",rounded:"sm"}});export const StyledTitle=t(i,{fontSize:"$lg",fontWeight:"$bold"});export const StyledDescription=t(i,{marginTop:"$3",marginBottom:"$6",color:"$gray12",fontSize:"$sm"});