@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
97 lines • 3.98 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { motion, AnimatePresence } from 'framer-motion';
import { forwardRef, useState } from 'react';
import { useMediaQuery } from 'usehooks-ts';
import { cva, css as designCss } from '@reservoir0x/relay-design-system/css';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
const OverlayStyle = cva({
base: {
position: 'fixed',
inset: 0
}
});
const Overlay = forwardRef(({ children, css, ...props }, forwardedRef) => {
return (_jsx(DialogPrimitive.Overlay, { ref: forwardedRef, ...props, className: `${designCss(OverlayStyle.raw(), designCss.raw(css))} relay-kit-reset`, children: children }));
});
const ContentCss = cva({
base: {
backgroundColor: 'modal-background',
borderRadius: 'modal-border-radius',
border: 'modal-border',
position: 'fixed',
left: '50%',
top: '100%',
minWidth: '90vw',
maxWidth: '100vw',
sm: {
minWidth: '400px',
maxWidth: '532px'
},
maxHeight: '85vh',
overflowY: 'auto',
_focus: { outline: 'none' },
'@media(max-width: 520px)': {
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
width: '100%'
}
}
});
const Content = forwardRef(({ children, ...props }, forwardedRef) => {
return (_jsx(DialogPrimitive.DialogContent, { ref: forwardedRef, ...props, className: ContentCss(), children: children }));
});
const AnimatedContent = forwardRef(({ children, css, ...props }, forwardedRef) => {
const isMobile = useMediaQuery('(max-width: 520px)');
const animation = isMobile
? {
initial: {
opacity: 0,
bottom: '-100%',
top: 'auto',
left: 0
},
animate: {
opacity: 1,
bottom: 0,
top: 'auto',
left: 0
},
exit: {
opacity: 0,
bottom: '-100%',
top: 'auto',
left: 0
}
}
: {
initial: {
opacity: 0,
top: '50%',
transform: 'translateX(-50%) translateY(-50%)'
},
animate: {
opacity: 1,
top: '50%',
transform: 'translateX(-50%) translateY(-50%)'
},
exit: {
opacity: 0,
top: '50%',
transform: 'translateX(-50%) translateY(-50%)'
}
};
return (_jsx(DialogPrimitive.DialogContent, { className: designCss(ContentCss.raw(props), designCss.raw(css)), forceMount: true, asChild: true, ...props, children: _jsxs(motion.div, { ref: forwardedRef, transition: {
type: isMobile ? 'tween' : undefined,
duration: isMobile ? 0.2 : 0.1,
ease: isMobile ? undefined : 'linear'
}, ...animation, children: [_jsx(VisuallyHidden, { children: _jsx(DialogPrimitive.Title, { children: "Title" }) }), children] }, isMobile + 'modal') }));
});
AnimatedContent.displayName = 'AnimatedContent';
const Dialog = forwardRef(({ children, trigger, portalProps, ...props }, forwardedRef) => {
const [open, setOpen] = useState(false);
return (_jsxs(DialogPrimitive.Root, { onOpenChange: setOpen, open: open, children: [_jsx(DialogPrimitive.DialogTrigger, { asChild: true, children: trigger }), _jsx(AnimatePresence, { children: open ? (_jsx(DialogPrimitive.DialogPortal, { forceMount: true, ...portalProps, children: _jsx(AnimatedContent, { ref: forwardedRef, forceMount: true, ...props, children: children }) })) : null })] }));
});
Dialog.displayName = 'Dialog';
export { Dialog, Content, AnimatedContent, Overlay };
//# sourceMappingURL=Dialog.js.map