@carbon/ibm-products
Version:
Carbon for IBM Products
112 lines (110 loc) • 3.38 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../../node_modules/classnames/index.js");
const require_settings = require("../../../settings.js");
const require_CardContext = require("./CardContext.js");
const require_CardHeader = require("./CardHeader.js");
const require_CardBody = require("./CardBody.js");
const require_CardFooter = require("./CardFooter.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
//#region src/components/Card/next/Card.tsx
/**
* Copyright IBM Corp. 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const componentName = "Card";
const blockClass = `${require_settings.pkg.prefix}--card-next`;
/**
* Card component - Root container for composable card
*/
const CardComponent = (0, react.forwardRef)(({ clickable = false, onClick, onKeyDown, disabled = false, className, children, ...rest }, ref) => {
const contextValue = (0, react.useMemo)(() => ({
clickable,
disabled
}), [clickable, disabled]);
const handleKeyDown = (event) => {
if (clickable && !disabled && (event.key === "Enter" || event.key === " ")) {
event.preventDefault();
onClick?.(event);
}
onKeyDown?.(event);
};
const handleClick = (event) => {
if (!disabled) onClick?.(event);
};
const cardClasses = (0, import_classnames.default)(blockClass, className, {
[`${blockClass}--clickable`]: clickable && !disabled,
[`${blockClass}--disabled`]: disabled
});
const cardProps = {
...rest,
ref,
className: cardClasses,
...clickable && {
role: "button",
tabIndex: disabled ? -1 : 0,
onClick: handleClick,
onKeyDown: handleKeyDown,
"aria-disabled": disabled
}
};
return /* @__PURE__ */ react.default.createElement(require_CardContext.CardContext.Provider, { value: contextValue }, /* @__PURE__ */ react.default.createElement("div", cardProps, children));
});
CardComponent.displayName = componentName;
CardComponent.propTypes = {
/**
* Card content
*/
children: prop_types.default.node,
/**
* Additional CSS class names
*/
className: prop_types.default.string,
/**
* Makes the entire card clickable
*/
clickable: prop_types.default.bool,
/**
* Disables the card and all interactive elements
*/
disabled: prop_types.default.bool,
/**
* Click handler for clickable cards
*/
onClick: prop_types.default.func,
/**
* Keyboard event handler for clickable cards
*/
onKeyDown: prop_types.default.func
};
const Card = CardComponent;
/**
* -------
* Exports
* -------
*/
const Root = Card;
Root.displayName = "Card.Root";
const Header = require_CardHeader.CardHeader;
Header.displayName = "Card.Header";
const Body = require_CardBody.CardBody;
Body.displayName = "Card.Body";
const Footer = require_CardFooter.CardFooter;
Footer.displayName = "Card.Footer";
//#endregion
exports.Body = Body;
exports.Card = Card;
exports.Footer = Footer;
exports.Header = Header;
exports.Root = Root;