@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
104 lines • 4.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Overlay = exports.AnimatedContent = exports.Content = exports.Dialog = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const DialogPrimitive = tslib_1.__importStar(require("@radix-ui/react-dialog"));
const framer_motion_1 = require("framer-motion");
const react_1 = require("react");
const usehooks_ts_1 = require("usehooks-ts");
const css_1 = require("@reservoir0x/relay-design-system/css");
const react_visually_hidden_1 = require("@radix-ui/react-visually-hidden");
const OverlayStyle = (0, css_1.cva)({
base: {
position: 'fixed',
inset: 0
}
});
const Overlay = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
return ((0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, { ref: forwardedRef, ...props, className: `${(0, css_1.css)(OverlayStyle.raw(), css_1.css.raw(css))} relay-kit-reset`, children: children }));
});
exports.Overlay = Overlay;
const ContentCss = (0, css_1.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 = (0, react_1.forwardRef)(({ children, ...props }, forwardedRef) => {
return ((0, jsx_runtime_1.jsx)(DialogPrimitive.DialogContent, { ref: forwardedRef, ...props, className: ContentCss(), children: children }));
});
exports.Content = Content;
const AnimatedContent = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
const isMobile = (0, usehooks_ts_1.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 ((0, jsx_runtime_1.jsx)(DialogPrimitive.DialogContent, { className: (0, css_1.css)(ContentCss.raw(props), css_1.css.raw(css)), forceMount: true, asChild: true, ...props, children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { ref: forwardedRef, transition: {
type: isMobile ? 'tween' : undefined,
duration: isMobile ? 0.2 : 0.1,
ease: isMobile ? undefined : 'linear'
}, ...animation, children: [(0, jsx_runtime_1.jsx)(react_visually_hidden_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)(DialogPrimitive.Title, { children: "Title" }) }), children] }, isMobile + 'modal') }));
});
exports.AnimatedContent = AnimatedContent;
AnimatedContent.displayName = 'AnimatedContent';
const Dialog = (0, react_1.forwardRef)(({ children, trigger, portalProps, ...props }, forwardedRef) => {
const [open, setOpen] = (0, react_1.useState)(false);
return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Root, { onOpenChange: setOpen, open: open, children: [(0, jsx_runtime_1.jsx)(DialogPrimitive.DialogTrigger, { asChild: true, children: trigger }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open ? ((0, jsx_runtime_1.jsx)(DialogPrimitive.DialogPortal, { forceMount: true, ...portalProps, children: (0, jsx_runtime_1.jsx)(AnimatedContent, { ref: forwardedRef, forceMount: true, ...props, children: children }) })) : null })] }));
});
exports.Dialog = Dialog;
Dialog.displayName = 'Dialog';
//# sourceMappingURL=Dialog.js.map