@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
44 lines • 3.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const TooltipPrimitive = tslib_1.__importStar(require("@radix-ui/react-tooltip"));
const Popover = tslib_1.__importStar(require("@radix-ui/react-popover"));
const usehooks_ts_1 = require("usehooks-ts");
const Box_js_1 = tslib_1.__importDefault(require("./Box.js"));
const css_1 = require("@reservoir0x/relay-design-system/css");
const TooltipArrowStyle = (0, css_1.cva)({
base: {
fill: 'modal-background'
}
});
const PopoverArrow = (0, css_1.cva)({
base: {
fill: 'modal-background'
}
});
const Tooltip = ({ children, content, open, defaultOpen, onOpenChange, asChild = false, ...props }) => {
const isSmallDevice = (0, usehooks_ts_1.useMediaQuery)('(max-width: 600px)');
if (isSmallDevice) {
return ((0, jsx_runtime_1.jsxs)(Popover.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [(0, jsx_runtime_1.jsx)(Popover.Trigger, { asChild: asChild, children: children }), (0, jsx_runtime_1.jsxs)(Popover.Content, { sideOffset: 2, side: "bottom", align: "center", style: { zIndex: 100, outline: 'none', maxWidth: '100vw' }, ...props, children: [(0, jsx_runtime_1.jsx)(Popover.Arrow, { className: PopoverArrow() }), (0, jsx_runtime_1.jsx)(Box_js_1.default, { css: {
zIndex: 9999,
boxShadow: '0px 1px 5px rgba(0,0,0,0.2)',
borderRadius: 8,
overflow: 'hidden'
}, children: (0, jsx_runtime_1.jsx)(Box_js_1.default, { css: {
background: 'modal-background',
p: '2'
}, children: content }) })] })] }));
}
return ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Provider, { children: (0, jsx_runtime_1.jsxs)(TooltipPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, delayDuration: 250, children: [(0, jsx_runtime_1.jsx)(TooltipPrimitive.Trigger, { asChild: asChild, children: children }), (0, jsx_runtime_1.jsxs)(TooltipPrimitive.Content, { sideOffset: 2, side: "bottom", align: "center", style: { zIndex: 100 }, ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: TooltipArrowStyle() }), (0, jsx_runtime_1.jsx)(Box_js_1.default, { css: {
zIndex: 9999,
boxShadow: '0px 1px 5px rgba(0,0,0,0.2)',
borderRadius: 8,
overflow: 'hidden'
}, children: (0, jsx_runtime_1.jsx)(Box_js_1.default, { css: {
background: 'modal-background',
p: '2'
}, children: content }) })] })] }) }));
};
exports.default = Tooltip;
//# sourceMappingURL=Tooltip.js.map