@carbon/react 1.114.0-rc.0 → 1.115.0-rc.0

package/lib/components/Card/Card.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import { CardProps } from './Card.types';
+import { CardHeader } from './CardHeader';
+import { CardBody } from './CardBody';
+import { CardFooter } from './CardFooter';
+import { CardHeaderMedia } from './CardHeaderMedia';
+import { CardMedia } from './CardMedia';
+import { CardTitle } from './CardTitle';
+import { CardTitleMedia } from './CardTitleMedia';
+import { CardActions } from './CardActions';
+import { CardAction } from './CardAction';
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Card.types").CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;
+    HeaderMedia: {
+        ({ children, className, ...rest }: import("./CardHeaderMedia").CardHeaderMediaProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Media: {
+        ({ children, className, ratio, mediaWidth, ...rest }: import("./CardMedia").CardMediaProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: React.ForwardRefExoticComponent<import("./CardTitle").CardTitleProps & React.RefAttributes<HTMLDivElement>>;
+    TitleMedia: React.ForwardRefExoticComponent<import("./CardTitleMedia").CardTitleMediaProps & React.RefAttributes<HTMLDivElement>>;
+    Actions: {
+        ({ children, className, overflowMenuLabel, ...rest }: import("./CardActions").CardActionsProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Action: {
+        ({ children, className, ...rest }: import("./CardAction").CardActionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { Card as default, CardHeader, CardBody, CardFooter, CardHeaderMedia, CardMedia, CardTitle, CardTitleMedia, CardActions, CardAction, };
+export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, } from './Card.types';
+export type { CardHeaderMediaProps } from './CardHeaderMedia';
+export type { CardMediaProps } from './CardMedia';
+export type { CardTitleProps } from './CardTitle';
+export type { CardTitleMediaProps } from './CardTitleMedia';
+export type { CardActionsProps } from './CardActions';
+export type { CardActionProps } from './CardAction';

package/lib/components/Card/Card.js

@@ -0,0 +1,173 @@
+/**
+ * Copyright IBM Corp. 2016, 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_usePrefix = require("../../internal/usePrefix.js");
+const require_index = require("../AILabel/index.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");
+const require_CardHeaderMedia = require("./CardHeaderMedia.js");
+const require_CardMedia = require("./CardMedia.js");
+const require_CardTitle = require("./CardTitle.js");
+const require_CardTitleMedia = require("./CardTitleMedia.js");
+const require_CardActions = require("./CardActions.js");
+const require_CardAction = require("./CardAction.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _carbon_icons_react = require("@carbon/icons-react");
+//#region src/components/Card/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.
+*/
+const componentName = "Card";
+/**
+* Card component - Root container for composable card
+*/
+const CardComponent = (0, react.forwardRef)(({ as, clickable = false, onClick, onKeyDown, disabled = false, density = "productive", decorator, horizontal = false, renderFooterIcon: FooterIcon = _carbon_icons_react.ArrowRight, className, children, ...rest }, ref) => {
+	const blockClass = `${require_usePrefix.usePrefix()}--card`;
+	const hasAILabel = (0, react.useMemo)(() => (0, react.isValidElement)(decorator) && decorator.type === require_index.AILabel, [decorator]);
+	if (FooterIcon !== _carbon_icons_react.ArrowRight && !clickable) console.error("[Card] `renderFooterIcon` only has effect when `clickable` is true.");
+	if (clickable && !rest["aria-label"] && !rest["aria-labelledby"]) console.error("[Card] A clickable card must have an accessible name. Pass `aria-label` or `aria-labelledby` to the Card.");
+	const contextValue = (0, react.useMemo)(() => ({
+		clickable,
+		disabled,
+		decorator,
+		horizontal,
+		onClick
+	}), [
+		clickable,
+		disabled,
+		decorator,
+		horizontal,
+		onClick
+	]);
+	const handleKeyDown = (0, react.useCallback)((event) => {
+		if (clickable && !disabled && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			onClick?.(event);
+		}
+		onKeyDown?.(event);
+	}, [
+		clickable,
+		disabled,
+		onClick,
+		onKeyDown
+	]);
+	const handleClick = (0, react.useCallback)((event) => {
+		if (!disabled) onClick?.(event);
+	}, [disabled, onClick]);
+	const cardClasses = (0, classnames.default)(blockClass, className, {
+		[`${blockClass}--clickable`]: clickable && !disabled,
+		[`${blockClass}--disabled`]: disabled,
+		[`${blockClass}--${density}`]: density,
+		[`${blockClass}--has-ai-label`]: hasAILabel,
+		[`${blockClass}--horizontal`]: horizontal
+	});
+	const BaseComponent = as ?? "div";
+	const isAnchor = BaseComponent === "a";
+	const cardProps = {
+		...rest,
+		ref,
+		className: cardClasses,
+		...disabled && { "aria-disabled": true },
+		...clickable && { ...isAnchor ? { onClick: handleClick } : {
+			role: "button",
+			tabIndex: disabled ? -1 : 0,
+			onClick: handleClick,
+			onKeyDown: handleKeyDown,
+			"aria-disabled": disabled
+		} }
+	};
+	const { mediaChildren, contentChildren, mediaIsFirst } = (0, react.useMemo)(() => {
+		if (!horizontal) return {
+			mediaChildren: [],
+			contentChildren: [],
+			mediaIsFirst: false
+		};
+		const childArray = react.default.Children.toArray(children);
+		const isMedia = (child) => react.default.isValidElement(child) && child.type === require_CardMedia.CardMedia;
+		return {
+			mediaChildren: childArray.filter(isMedia),
+			contentChildren: childArray.filter((c) => !isMedia(c)),
+			mediaIsFirst: childArray.findIndex(isMedia) < childArray.findIndex((c) => !isMedia(c))
+		};
+	}, [children, horizontal]);
+	let renderedChildren = children;
+	if (horizontal) {
+		const contentWrapper = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `${blockClass}__content`,
+			children: contentChildren
+		});
+		renderedChildren = mediaIsFirst ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [mediaChildren, contentWrapper] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [contentWrapper, mediaChildren] });
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CardContext.CardContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BaseComponent, {
+			...cardProps,
+			children: [renderedChildren, clickable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${blockClass}__clickable-footer`,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterIcon, { "aria-hidden": "true" })
+			})]
+		})
+	});
+});
+CardComponent.displayName = componentName;
+/**
+* -------
+* Exports
+* -------
+*/
+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";
+const HeaderMedia = require_CardHeaderMedia.CardHeaderMedia;
+HeaderMedia.displayName = "Card.HeaderMedia";
+const Media = require_CardMedia.CardMedia;
+Media.displayName = "Card.Media";
+const Title = require_CardTitle.CardTitle;
+Title.displayName = "Card.Title";
+const TitleMedia = require_CardTitleMedia.CardTitleMedia;
+TitleMedia.displayName = "Card.TitleMedia";
+const Actions = require_CardActions.CardActions;
+Actions.displayName = "Card.Actions";
+const Action = require_CardAction.CardAction;
+Action.displayName = "Card.Action";
+const Card = Object.assign(CardComponent, {
+	Header,
+	Body,
+	Footer,
+	HeaderMedia,
+	Media,
+	Title,
+	TitleMedia,
+	Actions,
+	Action
+});
+//#endregion
+exports.Card = Card;
+exports.default = Card;
+exports.CardAction = require_CardAction.CardAction;
+exports.CardActions = require_CardActions.CardActions;
+exports.CardBody = require_CardBody.CardBody;
+exports.CardFooter = require_CardFooter.CardFooter;
+exports.CardHeader = require_CardHeader.CardHeader;
+exports.CardHeaderMedia = require_CardHeaderMedia.CardHeaderMedia;
+exports.CardMedia = require_CardMedia.CardMedia;
+exports.CardTitle = require_CardTitle.CardTitle;
+exports.CardTitleMedia = require_CardTitleMedia.CardTitleMedia;

package/lib/components/Card/Card.types.d.ts

@@ -0,0 +1,119 @@
+/**
+ * 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.
+ */
+import React, { ReactNode } from 'react';
+/**
+ * Base props shared across card components
+ */
+export interface CardBaseProps {
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Card content
+     */
+    children?: ReactNode;
+}
+/**
+ * Props for the Card root component
+ */
+export interface CardProps extends CardBaseProps {
+    /**
+     * The underlying element or component to render the card as.
+     * Defaults to `'div'`. Use `'a'` or a router Link component for
+     * navigation cards when combined with `clickable`.
+     * @example <Card as="a" clickable href="/dashboard">...</Card>
+     * @example <Card as={RouterLink} clickable to="/dashboard">...</Card>
+     */
+    as?: React.ElementType;
+    /**
+     * Makes the entire card clickable. When true, the card gains interactive
+     * styles (hover, focus, active) and renders a built-in footer affordance
+     * with an arrow icon. Use `onClick` for action cards or `as="a"` with
+     * `href` for navigation cards.
+     */
+    clickable?: boolean;
+    /**
+     * Click handler for clickable cards. Only has effect when `clickable`
+     * is true.
+     */
+    onClick?: (event: React.MouseEvent) => void;
+    /**
+     * Keyboard event handler. Only has effect when `clickable` is true.
+     */
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    /**
+     * Disables the card and all interactive elements
+     */
+    disabled?: boolean;
+    /**
+     * Density variant: productive uses heading-compact-02, expressive uses heading-03
+     */
+    density?: 'productive' | 'expressive';
+    /**
+     * Optional decorator component (typically AILabel from Carbon).
+     * Renders in the top-right corner of the card header with a blue gradient border.
+     */
+    decorator?: ReactNode;
+    /**
+     * When true, the card renders in a horizontal layout: media on the left,
+     * header/body/footer stacked vertically on the right.
+     */
+    horizontal?: boolean;
+    /**
+     * Icon rendered in the built-in footer affordance of a clickable card.
+     * Only has effect when `clickable` is true. Defaults to ArrowRight.
+     * Pass any icon component from `@carbon/icons-react`.
+     * @example <Card clickable renderFooterIcon={Launch}>...</Card>
+     */
+    renderFooterIcon?: React.ElementType;
+}
+/**
+ * Props for CardHeader component
+ */
+export type CardHeaderProps = CardBaseProps;
+/**
+ * Props for CardBody component
+ */
+export interface CardBodyProps extends CardBaseProps {
+    /**
+     * When true, removes all padding so content fills the body edge-to-edge.
+     * Use when the body contains a component (e.g. a table, chart, or image)
+     * that manages its own internal spacing.
+     */
+    isFlush?: boolean;
+}
+/**
+ * Props for CardFooter component
+ */
+export type CardFooterProps = CardBaseProps;
+/**
+ * Context value for Card
+ */
+export interface CardContextValue {
+    /**
+     * Whether the card is clickable
+     */
+    clickable: boolean;
+    /**
+     * Whether the card is disabled
+     */
+    disabled: boolean;
+    /**
+     * Optional decorator component (typically AILabel) to be rendered by CardHeader
+     */
+    decorator?: ReactNode;
+    /**
+     * Whether the card is in horizontal layout mode
+     */
+    horizontal?: boolean;
+    /**
+     * Click handler forwarded from the Card root, available to child components
+     * (e.g. the built-in clickable footer affordance).
+     */
+    onClick?: (event: React.MouseEvent) => void;
+}

package/lib/components/Card/CardAction.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+import { ReactNode } from 'react';
+export interface CardActionProps {
+    /**
+     * Provide the contents of the CardAction (typically a Button or IconButton).
+     * Wrapping content in CardAction opts into action-set layout: no footer
+     * padding, automatic top border, and stretch/fixed-width button behavior.
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Label shown in the overflow menu when this action is hidden.
+     * If not provided, CardActions will attempt to read it from the
+     * direct child's props (label, iconDescription, or children text).
+     */
+    label?: string;
+}
+/**
+ * CardAction is a wrapper for interactive elements in the card footer.
+ * Its presence signals action-set layout to the footer (no padding, auto
+ * border, stretch behavior).
+ *
+ * Note: do not use CardAction inside a clickable card — clickable cards
+ * should not contain interactive elements (see usage guidelines).
+ */
+export declare const CardAction: {
+    ({ children, className, ...rest }: CardActionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/components/Card/CardAction.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright IBM Corp. 2016, 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_usePrefix = require("../../internal/usePrefix.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Card/CardAction.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.
+*/
+const componentName = "CardAction";
+/**
+* CardAction is a wrapper for interactive elements in the card footer.
+* Its presence signals action-set layout to the footer (no padding, auto
+* border, stretch behavior).
+*
+* Note: do not use CardAction inside a clickable card — clickable cards
+* should not contain interactive elements (see usage guidelines).
+*/
+const CardAction = ({ children, className, ...rest }) => {
+	const prefix = require_usePrefix.usePrefix();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...rest,
+		className: (0, classnames.default)(`${prefix}--card__action`, className),
+		children
+	});
+};
+CardAction.displayName = componentName;
+//#endregion
+exports.CardAction = CardAction;

package/lib/components/Card/CardActions.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+import { ReactNode } from 'react';
+export interface CardActionsProps {
+    /**
+     * Provide the contents of the CardActions (typically CardAction components).
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Aria label for the overflow menu
+     */
+    overflowMenuLabel?: string;
+}
+/**
+ * CardActions is a container for action buttons in the card header.
+ * Positioned in the top-right corner with 8px gap between actions.
+ * When actions exceed 50% of available header space, overflow menu is shown.
+ */
+export declare const CardActions: {
+    ({ children, className, overflowMenuLabel, ...rest }: CardActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/components/Card/CardActions.js

@@ -0,0 +1,96 @@
+/**
+ * Copyright IBM Corp. 2016, 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_usePrefix = require("../../internal/usePrefix.js");
+const require_MenuItem = require("../Menu/MenuItem.js");
+const require_index = require("../OverflowMenu/next/index.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _carbon_utilities = require("@carbon/utilities");
+//#region src/components/Card/CardActions.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.
+*/
+const componentName = "CardActions";
+/**
+* CardActions is a container for action buttons in the card header.
+* Positioned in the top-right corner with 8px gap between actions.
+* When actions exceed 50% of available header space, overflow menu is shown.
+*/
+const CardActions = ({ children, className, overflowMenuLabel = "More actions", ...rest }) => {
+	const blockClass = `${require_usePrefix.usePrefix()}--card`;
+	const containerRef = (0, react.useRef)(null);
+	const [hiddenItems, setHiddenItems] = (0, react.useState)([]);
+	const classes = (0, classnames.default)(`${blockClass}__actions`, className);
+	const actionItems = (0, react.useMemo)(() => {
+		const items = [];
+		react.Children.forEach(children, (child, index) => {
+			if (react.default.isValidElement(child)) {
+				const actionProps = child.props;
+				const button = actionProps.children;
+				const buttonProps = react.default.isValidElement(button) ? button.props : null;
+				const label = actionProps.label ?? buttonProps?.label ?? buttonProps?.iconDescription ?? (typeof buttonProps?.children === "string" ? buttonProps.children : `Action ${index + 1}`);
+				const id = `${label}-${index}`;
+				items.push({
+					id,
+					element: child,
+					label
+				});
+			}
+		});
+		return items;
+	}, [children]);
+	(0, react.useEffect)(() => {
+		if (!containerRef.current || actionItems.length === 0) return;
+		const handler = (0, _carbon_utilities.createOverflowHandler)({
+			container: containerRef.current,
+			onChange: (_visible, hidden) => {
+				const hiddenIds = hidden.map((el) => el.dataset.id);
+				setHiddenItems(actionItems.filter((item) => hiddenIds.includes(item.id)));
+			}
+		});
+		return () => handler.disconnect();
+	}, [actionItems]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: containerRef,
+		className: classes,
+		...rest,
+		children: [actionItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-id": item.id,
+			children: item.element
+		}, item.id)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-offset": true,
+			"data-hidden": true,
+			"data-floating-menu-container": true,
+			style: { position: "relative" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.OverflowMenu, {
+				size: "sm",
+				label: overflowMenuLabel,
+				children: hiddenItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
+					label: item.label || "Action",
+					onClick: () => {
+						const button = item.element.props.children;
+						if (button && react.default.isValidElement(button)) {
+							const buttonProps = button.props;
+							if (buttonProps.onClick) buttonProps.onClick();
+						}
+					}
+				}, item.id))
+			})
+		})]
+	});
+};
+CardActions.displayName = componentName;
+//#endregion
+exports.CardActions = CardActions;

package/lib/components/Card/CardBody.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import { CardBodyProps } from './Card.types';
+/**
+ * CardBody component - Body section of the card for free-form content
+ */
+export declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Card/CardBody.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2016, 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_usePrefix = require("../../internal/usePrefix.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Card/CardBody.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.
+*/
+const componentName = "CardBody";
+/**
+* CardBody component - Body section of the card for free-form content
+*/
+const CardBody = (0, react.forwardRef)(({ className, children, isFlush = false, ...rest }, ref) => {
+	const prefix = require_usePrefix.usePrefix();
+	const bodyClasses = (0, classnames.default)(`${prefix}--card__body`, className, { [`${prefix}--card__body--flush`]: isFlush });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...rest,
+		ref,
+		className: bodyClasses,
+		children
+	});
+});
+CardBody.displayName = componentName;
+//#endregion
+exports.CardBody = CardBody;

package/lib/components/Card/CardContext.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+import { CardContextValue } from './Card.types';
+/**
+ * Context for sharing Card state with child components
+ */
+export declare const CardContext: import("react").Context<CardContextValue | undefined>;
+/**
+ * Hook to access Card context
+ * @returns CardContextValue
+ * @throws Error if used outside of Card component
+ */
+export declare const useCardContext: () => CardContextValue;

package/lib/components/Card/CardContext.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+let react = require("react");
+//#region src/components/Card/CardContext.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.
+*/
+/**
+* Context for sharing Card state with child components
+*/
+const CardContext = (0, react.createContext)(void 0);
+/**
+* Hook to access Card context
+* @returns CardContextValue
+* @throws Error if used outside of Card component
+*/
+const useCardContext = () => {
+	const context = (0, react.useContext)(CardContext);
+	if (!context) throw new Error("Card subcomponents must be used within a Card component");
+	return context;
+};
+//#endregion
+exports.CardContext = CardContext;
+exports.useCardContext = useCardContext;

package/lib/components/Card/CardFooter.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+import React from 'react';
+/**
+ * CardFooter component - Footer section of the card.
+ *
+ * Not supported inside a `clickable` card. A clickable card renders its own
+ * built-in footer affordance automatically. Use the `renderFooterIcon` prop on
+ * `Card` to customize the icon.
+ */
+export declare const CardFooter: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;