@dossierhq/design/lib/components/Card/Card.js

The design system for Dossier.

import { jsx as _jsx } from "react/jsx-runtime";
import { Dropdown } from '../Dropdown/Dropdown.js';
import { Icon } from '../Icon/Icon.js';
export const Card = ({ children }) => {
    return _jsx("div", { className: "card", children: children });
};
Card.displayName = 'Card';
Card.Header = ({ children }) => {
    return _jsx("header", { className: "card-header", children: children });
};
Card.Header.displayName = 'Card.Header';
Card.HeaderTitle = ({ children }) => {
    return _jsx("p", { className: "card-header-title", children: children });
};
Card.HeaderTitle.displayName = 'Card.HeaderTitle';
// eslint-disable-next-line react/display-name
Card.HeaderDropdown = ({ items, renderItem, onItemClick, }) => {
    return (_jsx(Dropdown, { left: true, items: items, onItemClick: onItemClick, renderItem: renderItem, renderTrigger: (triggerRef, onOpenDropdown) => (_jsx("button", { ref: triggerRef, className: "card-header-icon", onMouseDown: (event) => {
                event.preventDefault();
                onOpenDropdown();
            }, children: _jsx(Icon, { icon: "chevronDown" }) })) }));
};
Card.HeaderIconButton = ({ icon, onClick }) => {
    return (_jsx("button", { className: "card-header-icon", onClick: onClick, children: _jsx(Icon, { icon: icon }) }));
};
Card.HeaderIconButton.displayName = 'Card.HeaderIconButton';
Card.Content = ({ children }) => {
    return (_jsx("div", { className: "card-content", children: _jsx("div", { className: "content", children: children }) }));
};
Card.Content.displayName = 'Card.Content';
Card.Footer = ({ children }) => {
    return _jsx("footer", { className: "card-footer", children: children });
};
Card.Footer.displayName = 'Card.Footer';
Card.FooterButton = ({ value, disabled, children, onClick }) => {
    return (_jsx("button", { className: "card-footer-item button is-white card-footer-button", disabled: disabled, value: value, onClick: onClick, children: children }));
};
Card.FooterButton.displayName = 'Card.FooterButton';
Card.FooterItem = ({ children }) => {
    return _jsx("p", { className: "card-footer-item", children: children });
};
Card.FooterItem.displayName = 'Card.FooterItem';
//# sourceMappingURL=Card.js.map