@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
55 lines • 2.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DropdownMenuItem = exports.DropdownMenuContent = exports.Dropdown = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const DropdownMenuPrimitive = tslib_1.__importStar(require("@radix-ui/react-dropdown-menu"));
const css_1 = require("@reservoir0x/relay-design-system/css");
const DropdownMenuContentCss = (0, css_1.cva)({
base: {
mx: '4',
p: '3',
borderRadius: 8,
zIndex: 5,
background: 'modal-background',
boxShadow: '0px 0px 50px 0px #0000001F',
border: 'dropdown-border'
}
});
const DropdownMenuContent = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.DropdownMenuContent, { ...props, ref: forwardedRef, className: (0, css_1.css)(DropdownMenuContentCss.raw(), css_1.css.raw(css)), children: children }));
});
exports.DropdownMenuContent = DropdownMenuContent;
const DropdownMenuItemCss = (0, css_1.cva)({
base: {
display: 'flex',
alignItems: 'center',
fontSize: 16,
color: 'text-default',
background: 'modal-background',
p: '3',
outline: 'none',
cursor: 'pointer',
transition: 'backdrop-filter 250ms linear',
_hover: {
backdropFilter: 'brightness(95%)',
backgroundColor: 'gray/10'
},
'&:focus': {
backdropFilter: 'brightness(95%)',
backgroundColor: 'gray/10'
}
}
});
const DropdownMenuItem = (0, react_1.forwardRef)(({ children, css, ...props }, forwardedRef) => {
return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.DropdownMenuItem, { ...props, ref: forwardedRef, className: (0, css_1.css)(DropdownMenuItemCss.raw(), css_1.css.raw(css)), children: children }));
});
exports.DropdownMenuItem = DropdownMenuItem;
const Dropdown = (0, react_1.forwardRef)(({ children, trigger, contentProps, ...props }, forwardedRef) => {
const [open, setOpen] = (0, react_1.useState)(false);
return ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.Root, { ...props, open: props.open ?? open, onOpenChange: props.onOpenChange ?? setOpen, children: [(0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Trigger, { asChild: true, children: trigger }), (props.open || open) && ((0, jsx_runtime_1.jsx)(DropdownMenuContent, { ref: forwardedRef, ...contentProps, children: children }))] }));
});
exports.Dropdown = Dropdown;
Dropdown.displayName = 'Dropdown';
//# sourceMappingURL=Dropdown.js.map