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

package/es/components/BigNumber/BigNumber.d.ts

@@ -0,0 +1,82 @@
+/**
+ * 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';
+import { BigNumberSizeValues } from './constants';
+export interface BigNumberProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The default behavior will hide `total` if `undefined` or is the same as `value`.
+     *
+     * Set to `true` to ignore the default behavior and show the `total`.
+     */
+    forceShowTotal?: boolean;
+    /**
+     * Specifies the number of fraction digits when truncating `value` and `total`.
+     */
+    fractionDigits?: number;
+    /**
+     * Displays an icon button next to `value`.
+     */
+    iconButton?: ReactNode;
+    /**
+     * Text label above the `value`.
+     */
+    label: string;
+    /**
+     * When `true`, will show the loading state.
+     */
+    loading?: boolean;
+    /**
+     * Determines how `value` and `total` will be formatted.
+     */
+    locale?: string;
+    /**
+     * Appends a percent sign (_%_) after `value` and hides `total`.
+     */
+    percentage?: boolean;
+    /**
+     * Controls the visual size of the component.
+     */
+    size?: BigNumberSizeValues;
+    /**
+     * When applied, an information icon will be rendered next to the
+     * `label` and the description will be applied to its tooltip.
+     */
+    tooltipDescription?: string;
+    /**
+     * The number that will appear after the slash (i.e. the "denominator" of a fraction).
+     *
+     * This number will not be rendered if it's the same as `value` or
+     * `percentage` is true. See also the **forceShowTotal** prop.
+     */
+    total?: number;
+    /**
+     * When `true`, will render a "trending up" icon.
+     */
+    trending?: boolean;
+    /**
+     * Abbreviates the number when `true`. E.g. from _1,000_ to _1K_.
+     */
+    truncate?: boolean;
+    /**
+     * The primary value to display (or the "numerator" of a fraction).
+     */
+    value?: number;
+}
+/**
+ * BigNumber is used to display large values in a small area. The display of
+ * values can be the value itself, or grouped in a `numerator/denominator` fashion.
+ * Control over the total fraction decimals displayed as well as how the
+ * values/totals are displayed are done via a locale prop. Other optional props
+ * allow control over size, truncation, if the value is a percentage, the addition
+ * of a button as well as tooltip functionality.
+ * The default locale is English (`en-US`) if one is not provided or if the provided one is not supported.
+ */
+export declare const BigNumber: React.ForwardRefExoticComponent<BigNumberProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/BigNumber/BigNumberSkeleton.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 { BigNumberProps } from './BigNumber';
+/**
+ * BigNumberSkeleton is used to display a skeleton version while
+ * content is loading (handled by the BigNumber prop `loading`).
+ *
+ * Note: This component is only used within BigNumber.
+ */
+export type BigNumberSkeletonProps = Pick<BigNumberProps, 'className' | 'size'> & React.HTMLAttributes<HTMLDivElement>;
+export declare const BigNumberSkeleton: React.ForwardRefExoticComponent<Pick<BigNumberProps, "className" | "size"> & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/es/components/BigNumber/constants.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+export declare enum BigNumberSize {
+    Default = "default",
+    Large = "lg",
+    XLarge = "xl"
+}
+export type BigNumberSizeValues = `${BigNumberSize}`;
+export declare enum Characters {
+    Dash = "\u2013",
+    Slash = "/"
+}
+export declare const DefaultLocale = "en-US";
+export declare const formatValue: (locale: Intl.LocalesArgument, value: number | null | undefined, fractionDigits: number, truncate: boolean) => string | null | undefined;
+export declare const getIconSize: (size: BigNumberSizeValues) => number;

package/es/components/BigNumber/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+export { BigNumber } from './BigNumber';
+export type { BigNumberProps } from './BigNumber';
+export { BigNumberSkeleton } from './BigNumberSkeleton';

package/es/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/es/components/Card/Card.js

@@ -0,0 +1,160 @@
+/**
+ * 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.
+ */
+
+import { usePrefix } from "../../internal/usePrefix.js";
+import { AILabel } from "../AILabel/index.js";
+import { CardContext } from "./CardContext.js";
+import { CardHeader } from "./CardHeader.js";
+import { CardBody } from "./CardBody.js";
+import { CardFooter } from "./CardFooter.js";
+import { CardHeaderMedia } from "./CardHeaderMedia.js";
+import { CardMedia } from "./CardMedia.js";
+import { CardTitle } from "./CardTitle.js";
+import { CardTitleMedia } from "./CardTitleMedia.js";
+import { CardActions } from "./CardActions.js";
+import { CardAction } from "./CardAction.js";
+import React, { forwardRef, isValidElement, useCallback, useMemo } from "react";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRight } from "@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 = forwardRef(({ as, clickable = false, onClick, onKeyDown, disabled = false, density = "productive", decorator, horizontal = false, renderFooterIcon: FooterIcon = ArrowRight, className, children, ...rest }, ref) => {
+	const blockClass = `${usePrefix()}--card`;
+	const hasAILabel = useMemo(() => isValidElement(decorator) && decorator.type === AILabel, [decorator]);
+	if (FooterIcon !== 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 = useMemo(() => ({
+		clickable,
+		disabled,
+		decorator,
+		horizontal,
+		onClick
+	}), [
+		clickable,
+		disabled,
+		decorator,
+		horizontal,
+		onClick
+	]);
+	const handleKeyDown = useCallback((event) => {
+		if (clickable && !disabled && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			onClick?.(event);
+		}
+		onKeyDown?.(event);
+	}, [
+		clickable,
+		disabled,
+		onClick,
+		onKeyDown
+	]);
+	const handleClick = useCallback((event) => {
+		if (!disabled) onClick?.(event);
+	}, [disabled, onClick]);
+	const cardClasses = cx(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 } = useMemo(() => {
+		if (!horizontal) return {
+			mediaChildren: [],
+			contentChildren: [],
+			mediaIsFirst: false
+		};
+		const childArray = React.Children.toArray(children);
+		const isMedia = (child) => React.isValidElement(child) && child.type === 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__ */ jsx("div", {
+			className: `${blockClass}__content`,
+			children: contentChildren
+		});
+		renderedChildren = mediaIsFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [mediaChildren, contentWrapper] }) : /* @__PURE__ */ jsxs(Fragment, { children: [contentWrapper, mediaChildren] });
+	}
+	return /* @__PURE__ */ jsx(CardContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs(BaseComponent, {
+			...cardProps,
+			children: [renderedChildren, clickable && /* @__PURE__ */ jsx("div", {
+				className: `${blockClass}__clickable-footer`,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(FooterIcon, { "aria-hidden": "true" })
+			})]
+		})
+	});
+});
+CardComponent.displayName = componentName;
+/**
+* -------
+* Exports
+* -------
+*/
+const Header = CardHeader;
+Header.displayName = "Card.Header";
+const Body = CardBody;
+Body.displayName = "Card.Body";
+const Footer = CardFooter;
+Footer.displayName = "Card.Footer";
+const HeaderMedia = CardHeaderMedia;
+HeaderMedia.displayName = "Card.HeaderMedia";
+const Media = CardMedia;
+Media.displayName = "Card.Media";
+const Title = CardTitle;
+Title.displayName = "Card.Title";
+const TitleMedia = CardTitleMedia;
+TitleMedia.displayName = "Card.TitleMedia";
+const Actions = CardActions;
+Actions.displayName = "Card.Actions";
+const Action = CardAction;
+Action.displayName = "Card.Action";
+const Card = Object.assign(CardComponent, {
+	Header,
+	Body,
+	Footer,
+	HeaderMedia,
+	Media,
+	Title,
+	TitleMedia,
+	Actions,
+	Action
+});
+//#endregion
+export { Card, Card as default, CardAction, CardActions, CardBody, CardFooter, CardHeader, CardHeaderMedia, CardMedia, CardTitle, CardTitleMedia };

package/es/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/es/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/es/components/Card/CardAction.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.
+ */
+
+import { usePrefix } from "../../internal/usePrefix.js";
+import "react";
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Card/CardAction.tsx
+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 = usePrefix();
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cx(`${prefix}--card__action`, className),
+		children
+	});
+};
+CardAction.displayName = componentName;
+//#endregion
+export { CardAction };

package/es/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/es/components/Card/CardActions.js

@@ -0,0 +1,93 @@
+/**
+ * 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.
+ */
+
+import { usePrefix } from "../../internal/usePrefix.js";
+import { MenuItem } from "../Menu/MenuItem.js";
+import { OverflowMenu } from "../OverflowMenu/next/index.js";
+import React, { Children, useEffect, useMemo, useRef, useState } from "react";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createOverflowHandler } from "@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 = `${usePrefix()}--card`;
+	const containerRef = useRef(null);
+	const [hiddenItems, setHiddenItems] = useState([]);
+	const classes = cx(`${blockClass}__actions`, className);
+	const actionItems = useMemo(() => {
+		const items = [];
+		Children.forEach(children, (child, index) => {
+			if (React.isValidElement(child)) {
+				const actionProps = child.props;
+				const button = actionProps.children;
+				const buttonProps = React.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]);
+	useEffect(() => {
+		if (!containerRef.current || actionItems.length === 0) return;
+		const handler = 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__ */ jsxs("div", {
+		ref: containerRef,
+		className: classes,
+		...rest,
+		children: [actionItems.map((item) => /* @__PURE__ */ jsx("div", {
+			"data-id": item.id,
+			children: item.element
+		}, item.id)), /* @__PURE__ */ jsx("div", {
+			"data-offset": true,
+			"data-hidden": true,
+			"data-floating-menu-container": true,
+			style: { position: "relative" },
+			children: /* @__PURE__ */ jsx(OverflowMenu, {
+				size: "sm",
+				label: overflowMenuLabel,
+				children: hiddenItems.map((item) => /* @__PURE__ */ jsx(MenuItem, {
+					label: item.label || "Action",
+					onClick: () => {
+						const button = item.element.props.children;
+						if (button && React.isValidElement(button)) {
+							const buttonProps = button.props;
+							if (buttonProps.onClick) buttonProps.onClick();
+						}
+					}
+				}, item.id))
+			})
+		})]
+	});
+};
+CardActions.displayName = componentName;
+//#endregion
+export { CardActions };

package/es/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>>;