@carbon/react 1.114.0-rc.0 → 1.114.0

package/lib/components/Card/CardBody.js

@@ -0,0 +1,37 @@
+/**
+ * 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, ...rest }, ref) => {
+	const bodyClasses = (0, classnames.default)(`${require_usePrefix.usePrefix()}--card__body`, className);
+	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,11 @@
+/**
+ * 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
+ */
+export declare const CardFooter: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Card/CardFooter.js

@@ -0,0 +1,37 @@
+/**
+ * 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/CardFooter.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 = "CardFooter";
+/**
+* CardFooter component - Footer section of the card
+*/
+const CardFooter = (0, react.forwardRef)(({ className, children, ...rest }, ref) => {
+	const footerClasses = (0, classnames.default)(`${require_usePrefix.usePrefix()}--card__footer`, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...rest,
+		ref,
+		className: footerClasses,
+		children
+	});
+});
+CardFooter.displayName = componentName;
+//#endregion
+exports.CardFooter = CardFooter;

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

@@ -0,0 +1,11 @@
+/**
+ * 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';
+/**
+ * CardHeader — header section of the card.
+ */
+export declare const CardHeader: React.ForwardRefExoticComponent<import("./Card.types").CardBaseProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Card/CardHeader.js

@@ -0,0 +1,47 @@
+/**
+ * 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_CardContext = require("./CardContext.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/CardHeader.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 = "CardHeader";
+/**
+* CardHeader — header section of the card.
+*/
+const CardHeader = (0, react.forwardRef)(({ className, children, ...rest }, ref) => {
+	const blockClass = `${require_usePrefix.usePrefix()}--card`;
+	const context = require_CardContext.useCardContext();
+	const handleDecoratorClick = (0, react.useCallback)((e) => e.stopPropagation(), []);
+	const handleDecoratorKeyDown = (0, react.useCallback)((e) => e.stopPropagation(), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...rest,
+		ref,
+		className: (0, classnames.default)(`${blockClass}__header`, className),
+		children: [children, context.decorator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `${blockClass}__decorator`,
+			role: "presentation",
+			onClick: handleDecoratorClick,
+			onKeyDown: handleDecoratorKeyDown,
+			children: context.decorator
+		})]
+	});
+});
+CardHeader.displayName = componentName;
+//#endregion
+exports.CardHeader = CardHeader;

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

@@ -0,0 +1,21 @@
+/**
+ * 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 CardHeaderMediaProps {
+    /**
+     * Provide the contents of the CardHeaderMedia.
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
+export declare const CardHeaderMedia: {
+    ({ children, className, ...rest }: CardHeaderMediaProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/components/Card/CardHeaderMedia.js

@@ -0,0 +1,33 @@
+/**
+ * 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/CardHeaderMedia.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 = "CardHeaderMedia";
+const CardHeaderMedia = ({ children, className, ...rest }) => {
+	const classes = (0, classnames.default)(`${require_usePrefix.usePrefix()}--card__header-media`, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...rest,
+		className: classes,
+		children
+	});
+};
+CardHeaderMedia.displayName = componentName;
+//#endregion
+exports.CardHeaderMedia = CardHeaderMedia;

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

@@ -0,0 +1,35 @@
+/**
+ * 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 { type AspectRatioProps } from '../AspectRatio/AspectRatio';
+export interface CardMediaProps extends Omit<AspectRatioProps, 'className'> {
+    /**
+     * Provide the contents of the CardMedia.
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Width of the media column when the card is in horizontal layout.
+     * Accepts any valid CSS width value (e.g. '200px', '40%').
+     * Defaults to '33.33%'. Has no effect in vertical (default) layout.
+     */
+    mediaWidth?: string;
+}
+/**
+ * CardMedia is a media slot component that maintains aspect ratio.
+ *
+ * In vertical (default) mode it delegates to Carbon's AspectRatio.
+ * In horizontal mode it renders a plain div sized to `mediaWidth` (default
+ * 33.33%) that stretches to the full card height — no aspect-ratio math needed.
+ */
+export declare const CardMedia: {
+    ({ children, className, ratio, mediaWidth, ...rest }: CardMediaProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/lib/components/Card/CardMedia.js

@@ -0,0 +1,51 @@
+/**
+ * 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_AspectRatio = require("../AspectRatio/AspectRatio.js");
+const require_CardContext = require("./CardContext.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/CardMedia.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 = "CardMedia";
+/**
+* CardMedia is a media slot component that maintains aspect ratio.
+*
+* In vertical (default) mode it delegates to Carbon's AspectRatio.
+* In horizontal mode it renders a plain div sized to `mediaWidth` (default
+* 33.33%) that stretches to the full card height — no aspect-ratio math needed.
+*/
+const CardMedia = ({ children, className, ratio, mediaWidth = "33.33%", ...rest }) => {
+	const prefix = require_usePrefix.usePrefix();
+	const blockClass = `${prefix}--card`;
+	const { horizontal } = require_CardContext.useCardContext();
+	const classes = (0, classnames.default)(`${blockClass}__media`, className);
+	if (horizontal) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `${blockClass}__media ${blockClass}__media--horizontal`,
+		style: { [`--${prefix}--card--media-width`]: mediaWidth },
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AspectRatio.default, {
+		ratio,
+		...rest,
+		className: classes,
+		children
+	});
+};
+CardMedia.displayName = componentName;
+//#endregion
+exports.CardMedia = CardMedia;

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

@@ -0,0 +1,72 @@
+/**
+ * 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';
+export interface CardTitleProps {
+    /**
+     * Provide the contents of the CardTitle.
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Enable text truncation with ellipsis on the title text row.
+     * - `true`: Single line truncation
+     * - `number`: Multi-line truncation (line clamp)
+     * @default false
+     */
+    titleTruncate?: boolean | number;
+    /**
+     * Maximum width applied to the title text row when truncation is active.
+     * @default '100%'
+     */
+    maxWidth?: string;
+    /**
+     * Optional leading icon or content to display before the title text.
+     * - Productive density: 16px icon recommended
+     * - Expressive density: 24px icon recommended
+     */
+    titleStart?: ReactNode;
+    /**
+     * Optional trailing icon or content to display after the title text.
+     * - Productive density: 16px icon recommended
+     * - Expressive density: 24px icon recommended
+     */
+    titleEnd?: ReactNode;
+    /**
+     * Optional label rendered above the title text.
+     * Uses $label-01 typography and $text-secondary color.
+     */
+    label?: ReactNode;
+    /**
+     * Enable truncation on the label text.
+     * - `true`: Single line truncation
+     * - `number`: Multi-line truncation (line clamp)
+     * @default false
+     */
+    labelTruncate?: boolean | number;
+    /**
+     * Optional description rendered below the title text.
+     * Uses $label-01 typography and $text-secondary color.
+     */
+    description?: ReactNode;
+    /**
+     * Enable truncation on the description text.
+     * - `true`: Single line truncation
+     * - `number`: Multi-line truncation (line clamp)
+     * @default false
+     */
+    descriptionTruncate?: boolean | number;
+}
+/**
+ * CardTitle displays the main title text in the card header.
+ * Typography is driven by density on the parent Card:
+ * - Productive: $heading-compact-02 (16px/22px)
+ * - Expressive: $heading-03 (20px/28px)
+ */
+export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Card/CardTitle.js

@@ -0,0 +1,89 @@
+/**
+ * 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/CardTitle.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 = "CardTitle";
+/**
+* CardTitle displays the main title text in the card header.
+* Typography is driven by density on the parent Card:
+* - Productive: $heading-compact-02 (16px/22px)
+* - Expressive: $heading-03 (20px/28px)
+*/
+const CardTitle = (0, react.forwardRef)(({ children, className, titleTruncate = false, maxWidth = "100%", titleStart, titleEnd, label, labelTruncate = false, description, descriptionTruncate = false, ...rest }, ref) => {
+	const prefix = require_usePrefix.usePrefix();
+	const blockClass = `${prefix}--card`;
+	const isTitleMulti = typeof titleTruncate === "number";
+	const isLabelMulti = typeof labelTruncate === "number";
+	const isDescMulti = typeof descriptionTruncate === "number";
+	const containerClasses = (0, classnames.default)(`${blockClass}__title`, className);
+	const textRowClasses = (0, classnames.default)(`${blockClass}__title-text-row`, {
+		[`${blockClass}__title-text-row--truncate`]: titleTruncate === true,
+		[`${blockClass}__title-text-row--truncate-multi`]: isTitleMulti,
+		[`${blockClass}__title-text-row--with-start-icon`]: titleStart,
+		[`${blockClass}__title-text-row--with-end-icon`]: titleEnd
+	});
+	const titleVars = titleTruncate !== false ? {
+		[`--${prefix}--card--title-max-width`]: maxWidth,
+		...isTitleMulti && { [`--${prefix}--card--title-line-clamp`]: titleTruncate }
+	} : void 0;
+	const labelVars = isLabelMulti ? { [`--${prefix}--card--label-line-clamp`]: labelTruncate } : void 0;
+	const descVars = isDescMulti ? { [`--${prefix}--card--description-line-clamp`]: descriptionTruncate } : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...rest,
+		ref,
+		className: containerClasses,
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)(`${blockClass}__label`, {
+					[`${blockClass}__label--truncate`]: labelTruncate === true,
+					[`${blockClass}__label--truncate-multi`]: isLabelMulti
+				}),
+				style: labelVars,
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: textRowClasses,
+				style: titleVars,
+				children: [
+					titleStart && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `${blockClass}__title-start-icon`,
+						children: titleStart
+					}),
+					children,
+					titleEnd && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `${blockClass}__title-end-icon`,
+						children: titleEnd
+					})
+				]
+			}),
+			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)(`${blockClass}__description`, {
+					[`${blockClass}__description--truncate`]: descriptionTruncate === true,
+					[`${blockClass}__description--truncate-multi`]: isDescMulti
+				}),
+				style: descVars,
+				children: description
+			})
+		]
+	});
+});
+CardTitle.displayName = componentName;
+//#endregion
+exports.CardTitle = CardTitle;

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

@@ -0,0 +1,23 @@
+/**
+ * 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';
+export interface CardTitleMediaProps {
+    /**
+     * Content to be rendered in the title media slot (typically an icon or small image)
+     */
+    children?: ReactNode;
+    /**
+     * Optional class name for custom styling
+     */
+    className?: string;
+}
+/**
+ * CardTitleMedia provides a media slot positioned to the left of the card title.
+ * The media slot adapts to the heading area height (min 48px, max 64px) and stays
+ * top-aligned when the title wraps to multiple lines.
+ */
+export declare const CardTitleMedia: React.ForwardRefExoticComponent<CardTitleMediaProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Card/CardTitleMedia.js

@@ -0,0 +1,39 @@
+/**
+ * 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/CardTitleMedia.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 = "CardTitleMedia";
+/**
+* CardTitleMedia provides a media slot positioned to the left of the card title.
+* The media slot adapts to the heading area height (min 48px, max 64px) and stays
+* top-aligned when the title wraps to multiple lines.
+*/
+const CardTitleMedia = (0, react.forwardRef)(({ className, children, ...rest }, ref) => {
+	const titleMediaClasses = (0, classnames.default)(`${require_usePrefix.usePrefix()}--card__title-media`, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...rest,
+		ref,
+		className: titleMediaClasses,
+		children
+	});
+});
+CardTitleMedia.displayName = componentName;
+//#endregion
+exports.CardTitleMedia = CardTitleMedia;

package/lib/components/Card/_story-assets/data.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    group: string;
+    date: string;
+    value: number;
+}[];
+export default _default;

package/lib/components/Card/_story-assets/options.d.ts

@@ -0,0 +1,47 @@
+declare namespace _default {
+    let height: string;
+    namespace grid {
+        namespace x {
+            let enabled: boolean;
+        }
+        namespace y {
+            let enabled_1: boolean;
+            export { enabled_1 as enabled };
+        }
+    }
+    namespace axes {
+        namespace bottom {
+            let visible: boolean;
+            let title: string;
+            let mapsTo: string;
+            let scaleType: string;
+        }
+        namespace left {
+            let visible_1: boolean;
+            export { visible_1 as visible };
+            let mapsTo_1: string;
+            export { mapsTo_1 as mapsTo };
+            let scaleType_1: string;
+            export { scaleType_1 as scaleType };
+        }
+    }
+    namespace color {
+        namespace gradient {
+            let enabled_2: boolean;
+            export { enabled_2 as enabled };
+        }
+    }
+    namespace points {
+        let enabled_3: boolean;
+        export { enabled_3 as enabled };
+    }
+    namespace legend {
+        let enabled_4: boolean;
+        export { enabled_4 as enabled };
+    }
+    namespace toolbar {
+        let enabled_5: boolean;
+        export { enabled_5 as enabled };
+    }
+}
+export default _default;

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

@@ -0,0 +1,8 @@
+/**
+ * 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 { Card, CardHeader, CardBody, CardFooter, CardHeaderMedia, CardMedia, CardTitle, CardTitleMedia, CardActions, CardAction, } from './Card';
+export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, CardHeaderMediaProps, CardMediaProps, CardTitleProps, CardTitleMediaProps, CardActionsProps, CardActionProps, } from './Card';