@carbon/react 1.113.0 → 1.114.0

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

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

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

@@ -0,0 +1,42 @@
+/**
+ * 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 AspectRatio from "../AspectRatio/AspectRatio.js";
+import { useCardContext } from "./CardContext.js";
+import "react";
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Card/CardMedia.tsx
+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 = usePrefix();
+	const blockClass = `${prefix}--card`;
+	const { horizontal } = useCardContext();
+	const classes = cx(`${blockClass}__media`, className);
+	if (horizontal) return /* @__PURE__ */ jsx("div", {
+		className: `${blockClass}__media ${blockClass}__media--horizontal`,
+		style: { [`--${prefix}--card--media-width`]: mediaWidth },
+		children
+	});
+	return /* @__PURE__ */ jsx(AspectRatio, {
+		ratio,
+		...rest,
+		className: classes,
+		children
+	});
+};
+CardMedia.displayName = componentName;
+//#endregion
+export { CardMedia };

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

@@ -0,0 +1,86 @@
+/**
+ * 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 { forwardRef } from "react";
+import cx from "classnames";
+import { jsx, jsxs } from "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 = forwardRef(({ children, className, titleTruncate = false, maxWidth = "100%", titleStart, titleEnd, label, labelTruncate = false, description, descriptionTruncate = false, ...rest }, ref) => {
+	const prefix = usePrefix();
+	const blockClass = `${prefix}--card`;
+	const isTitleMulti = typeof titleTruncate === "number";
+	const isLabelMulti = typeof labelTruncate === "number";
+	const isDescMulti = typeof descriptionTruncate === "number";
+	const containerClasses = cx(`${blockClass}__title`, className);
+	const textRowClasses = cx(`${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__ */ jsxs("div", {
+		...rest,
+		ref,
+		className: containerClasses,
+		children: [
+			label && /* @__PURE__ */ jsx("div", {
+				className: cx(`${blockClass}__label`, {
+					[`${blockClass}__label--truncate`]: labelTruncate === true,
+					[`${blockClass}__label--truncate-multi`]: isLabelMulti
+				}),
+				style: labelVars,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: textRowClasses,
+				style: titleVars,
+				children: [
+					titleStart && /* @__PURE__ */ jsx("span", {
+						className: `${blockClass}__title-start-icon`,
+						children: titleStart
+					}),
+					children,
+					titleEnd && /* @__PURE__ */ jsx("span", {
+						className: `${blockClass}__title-end-icon`,
+						children: titleEnd
+					})
+				]
+			}),
+			description && /* @__PURE__ */ jsx("div", {
+				className: cx(`${blockClass}__description`, {
+					[`${blockClass}__description--truncate`]: descriptionTruncate === true,
+					[`${blockClass}__description--truncate-multi`]: isDescMulti
+				}),
+				style: descVars,
+				children: description
+			})
+		]
+	});
+});
+CardTitle.displayName = componentName;
+//#endregion
+export { CardTitle };

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

@@ -0,0 +1,36 @@
+/**
+ * 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 { forwardRef } from "react";
+import cx from "classnames";
+import { jsx } from "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 = forwardRef(({ className, children, ...rest }, ref) => {
+	const titleMediaClasses = cx(`${usePrefix()}--card__title-media`, className);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref,
+		className: titleMediaClasses,
+		children
+	});
+});
+CardTitleMedia.displayName = componentName;
+//#endregion
+export { CardTitleMedia };

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

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

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

package/es/components/Card/index.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.
+ */
+
+import { __exportAll } from "../../_virtual/_rolldown/runtime.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 { Card } from "./Card.js";
+//#region src/components/Card/index.ts
+var Card_exports = /* @__PURE__ */ __exportAll({
+	Card: () => Card,
+	CardAction: () => CardAction,
+	CardActions: () => CardActions,
+	CardBody: () => CardBody,
+	CardFooter: () => CardFooter,
+	CardHeader: () => CardHeader,
+	CardHeaderMedia: () => CardHeaderMedia,
+	CardMedia: () => CardMedia,
+	CardTitle: () => CardTitle,
+	CardTitleMedia: () => CardTitleMedia
+});
+//#endregion
+export { Card, CardAction, CardActions, CardBody, CardFooter, CardHeader, CardHeaderMedia, CardMedia, CardTitle, CardTitleMedia, Card_exports };

package/es/components/Checkbox/Checkbox.js

@@ -11,9 +11,9 @@ import { Text } from "../Text/Text.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { AILabel } from "../AILabel/index.js";
 import { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
-import { AILabel } from "../AILabel/index.js";
 import React, { cloneElement } from "react";
 import cx from "classnames";
 import PropTypes from "prop-types";

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -9,9 +9,9 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { AILabel } from "../AILabel/index.js";
 import { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
-import { AILabel } from "../AILabel/index.js";
 import Checkbox$1 from "../Checkbox/Checkbox.js";
 import { Children, cloneElement } from "react";
 import cx from "classnames";

package/es/components/ComboBox/ComboBox.js

@@ -15,14 +15,14 @@ import { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { isItemDisabled } from "../../internal/isItemDisabled.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
-import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { AILabel } from "../AILabel/index.js";
+import { mergeRefs } from "../../tools/mergeRefs.js";
+import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { ListBoxSizePropType } from "../ListBox/ListBoxPropTypes.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import ListBox from "../ListBox/index.js";
 import ListBoxSelection from "../ListBox/next/ListBoxSelection.js";
 import ListBoxTrigger from "../ListBox/next/ListBoxTrigger.js";
-import { mergeRefs } from "../../tools/mergeRefs.js";
 import { cloneElement, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import cx from "classnames";
 import PropTypes from "prop-types";

package/es/components/ComboButton/index.js

@@ -13,8 +13,8 @@ import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { IconButton } from "../IconButton/index.js";
 import Button_default from "../Button/index.js";
-import { mergeRefs } from "../../tools/mergeRefs.js";
 import { Menu as Menu$1 } from "../Menu/Menu.js";
+import { mergeRefs } from "../../tools/mergeRefs.js";
 import { useAttachedMenu } from "../../internal/useAttachedMenu.js";
 import React, { useRef } from "react";
 import cx from "classnames";

package/es/components/ComposedModal/ComposedModal.js

@@ -14,9 +14,9 @@ import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { AILabel } from "../AILabel/index.js";
+import { mergeRefs } from "../../tools/mergeRefs.js";
 import { useResizeObserver } from "../../internal/useResizeObserver.js";
 import { composeEventHandlers } from "../../tools/events.js";
-import { mergeRefs } from "../../tools/mergeRefs.js";
 import { Layer } from "../Layer/index.js";
 import { ComposedModalContext } from "./ComposedModalContext.js";
 import { ModalHeader } from "./ModalHeader.js";

package/es/components/DatePicker/DatePicker.d.ts

@@ -19,6 +19,8 @@ export interface DatePickerProps {
     allowInput?: boolean;
     /**
      * The DOM element the flatpickr should be inserted into `<body>` by default.
+     *
+     * @deprecated This prop will be removed in the next major release, please see `preview__DatePicker` which does not flatpickr.
      */
     appendTo?: HTMLElement;
     /**
@@ -47,14 +49,20 @@ export interface DatePickerProps {
     datePickerType?: DatePickerTypes;
     /**
      * The flatpickr `disable` option that allows a user to disable certain dates.
+     *
+     * @deprecated This prop will be removed in the next major release, please see `preview__DatePicker` which does not flatpickr
      */
     disable?: DateLimit<DateOption>[];
     /**
      * The flatpickr `enable` option that allows a user to enable certain dates.
+     *
+     * @deprecated This prop will be removed in the next major release, please see `preview__DatePicker` which does not flatpickr
      */
     enable?: DateLimit<DateOption>[];
     /**
      * The flatpickr `inline` option.
+     *
+     * @deprecated This prop will be removed in the next major release, please see `preview__DatePicker` which does not flatpickr
      */
     inline?: boolean;
     /**
@@ -91,6 +99,8 @@ export interface DatePickerProps {
     onOpen?: flatpickr.Options.Hook;
     /**
      * flatpickr prop passthrough. Controls how dates are parsed.
+     *
+     * @deprecated This prop will be removed in the next major release, please see `preview__DatePicker` which does not flatpickr
      */
     parseDate?: (date: string) => Date | false;
     /**

package/es/components/DatePicker/DatePicker.js

@@ -21,9 +21,9 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef,
 import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { datePartsOrder } from "@carbon/utilities";
 import flatpickr from "flatpickr";
 import l10n from "flatpickr/dist/l10n/index";
-import { datePartsOrder } from "@carbon/utilities";
 //#region src/components/DatePicker/DatePicker.tsx
 /**
 * Copyright IBM Corp. 2016, 2026
@@ -40,6 +40,7 @@ function initializeWeekdayShorthand() {
 }
 const forEach = Array.prototype.forEach;
 const defaultAriaDateFormat = "l, F j, Y";
+const flatpickrDeprecation = (prop) => `The \`${prop}\` prop is deprecated and will be removed in the next major release. Please use the new \`preview__DatePicker\` component which doesn't use it — if that blocks you, tell us why: https://github.com/carbon-design-system/carbon/issues.`;
 /**
 * @param {number} monthNumber The month number.
 * @param {boolean} shorthand `true` to use shorthand month.
@@ -455,7 +456,7 @@ DatePicker.propTypes = {
 	/**
 	* The DOM element the Flatpicker should be inserted into. `<body>` by default.
 	*/
-	appendTo: PropTypes.object,
+	appendTo: deprecate(PropTypes.object, flatpickrDeprecation("appendTo")),
 	/**
 	* The child nodes.
 	*/
@@ -487,15 +488,15 @@ DatePicker.propTypes = {
 	/**
 	* The flatpickr `disable` option that allows a user to disable certain dates.
 	*/
-	disable: PropTypes.array,
+	disable: deprecate(PropTypes.array, flatpickrDeprecation("disable")),
 	/**
 	* The flatpickr `enable` option that allows a user to enable certain dates.
 	*/
-	enable: PropTypes.array,
+	enable: deprecate(PropTypes.array, flatpickrDeprecation("enable")),
 	/**
 	* The flatpickr `inline` option.
 	*/
-	inline: PropTypes.bool,
+	inline: deprecate(PropTypes.bool, flatpickrDeprecation("inline")),
 	/**
 	* Specify whether or not the control is invalid (Fluid only)
 	*/
@@ -534,7 +535,7 @@ DatePicker.propTypes = {
 	/**
 	* flatpickr prop passthrough. Controls how dates are parsed.
 	*/
-	parseDate: PropTypes.func,
+	parseDate: deprecate(PropTypes.func, flatpickrDeprecation("parseDate")),
 	/**
 	* whether the DatePicker is to be readOnly
 	* if boolean applies to all inputs

package/es/components/DatePicker/next/components/Calendar.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 type { DatePickerContext } from '@carbon/utilities/date-picker';
+/**
+ * Calendar component props
+ */
+export interface CalendarProps {
+    /**
+     * State machine context
+     */
+    context: DatePickerContext;
+    /**
+     * Date selection handler
+     */
+    onDateSelect: (date: Temporal.PlainDate) => void;
+    /**
+     * Navigation handler
+     */
+    onNavigate: (eventType: string) => void;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * BCP 47 locale tag used to localize month and weekday labels
+     */
+    locale?: string;
+}
+/**
+ * Calendar component
+ * Renders a calendar grid for date selection
+ */
+export declare function Calendar({ context, onDateSelect, onNavigate, className, locale, }: CalendarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Calendar {
+    var displayName: string;
+}