@carbon/react 1.113.0 → 1.114.0

package/es/components/DatePicker/next/components/Calendar.js

@@ -0,0 +1,181 @@
+/**
+ * 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 { useCallback, useMemo, useState } from "react";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { generateCalendarGrid, getFullDateLabel, getMonthYearLabel, getWeekdayLabels } from "@carbon/utilities/date-picker";
+//#region src/components/DatePicker/next/components/Calendar.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.
+*/
+/**
+* Calendar component
+* Renders a calendar grid for date selection
+*/
+function Calendar({ context, onDateSelect, onNavigate, className, locale = "en" }) {
+	const prefix = usePrefix();
+	const { viewDate, startDate, endDate, minDate, maxDate, focusedDate, mode } = context;
+	const [hoveredDate, setHoveredDate] = useState(null);
+	const calendarGrid = useMemo(() => {
+		if (!viewDate) return [];
+		return generateCalendarGrid(viewDate, minDate, maxDate);
+	}, [
+		viewDate,
+		minDate,
+		maxDate
+	]);
+	const handlePrevMonth = useCallback(() => {
+		onNavigate("PREV_MONTH");
+	}, [onNavigate]);
+	const handleNextMonth = useCallback(() => {
+		onNavigate("NEXT_MONTH");
+	}, [onNavigate]);
+	const handleDateClick = useCallback((date, isDisabled) => {
+		if (!isDisabled) onDateSelect(date);
+	}, [onDateSelect]);
+	const isDateSelected = useCallback((date) => {
+		if (!startDate) return false;
+		if (Temporal.PlainDate.compare(date, startDate) === 0) return true;
+		if (endDate && Temporal.PlainDate.compare(date, endDate) === 0) return true;
+		return false;
+	}, [startDate, endDate]);
+	const isDateInRange = useCallback((date) => {
+		if (mode !== "range" || !startDate) return false;
+		if (endDate) return Temporal.PlainDate.compare(date, startDate) > 0 && Temporal.PlainDate.compare(date, endDate) < 0;
+		const previewDate = hoveredDate || focusedDate;
+		if (previewDate) {
+			if (minDate && Temporal.PlainDate.compare(previewDate, minDate) < 0 || maxDate && Temporal.PlainDate.compare(previewDate, maxDate) > 0) return false;
+			const earlierDate = Temporal.PlainDate.compare(startDate, previewDate) < 0 ? startDate : previewDate;
+			const laterDate = Temporal.PlainDate.compare(startDate, previewDate) < 0 ? previewDate : startDate;
+			return Temporal.PlainDate.compare(date, earlierDate) > 0 && Temporal.PlainDate.compare(date, laterDate) < 0;
+		}
+		return false;
+	}, [
+		mode,
+		startDate,
+		endDate,
+		hoveredDate,
+		focusedDate,
+		minDate,
+		maxDate
+	]);
+	const isDateFocused = useCallback((date) => {
+		if (!focusedDate) return false;
+		return Temporal.PlainDate.compare(date, focusedDate) === 0;
+	}, [focusedDate]);
+	if (!viewDate) return null;
+	const calendarClasses = cx(`${prefix}--date-picker__calendar`, className);
+	const monthYear = getMonthYearLabel(viewDate, locale);
+	const weekdayLabels = getWeekdayLabels(locale);
+	return /* @__PURE__ */ jsxs("div", {
+		className: calendarClasses,
+		role: "grid",
+		"aria-label": "Calendar",
+		tabIndex: 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: `${prefix}--date-picker__month`,
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: `${prefix}--date-picker__month-nav`,
+						onClick: handlePrevMonth,
+						"aria-label": "Previous month",
+						children: /* @__PURE__ */ jsx("svg", {
+							focusable: "false",
+							preserveAspectRatio: "xMidYMid meet",
+							xmlns: "http://www.w3.org/2000/svg",
+							fill: "currentColor",
+							width: "16",
+							height: "16",
+							viewBox: "0 0 16 16",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("path", {
+								d: "M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z",
+								transform: "rotate(180 8 8)"
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: `${prefix}--date-picker__current-month`,
+						children: monthYear
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: `${prefix}--date-picker__month-nav`,
+						onClick: handleNextMonth,
+						"aria-label": "Next month",
+						children: /* @__PURE__ */ jsx("svg", {
+							focusable: "false",
+							preserveAspectRatio: "xMidYMid meet",
+							xmlns: "http://www.w3.org/2000/svg",
+							fill: "currentColor",
+							width: "16",
+							height: "16",
+							viewBox: "0 0 16 16",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("path", { d: "M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z" })
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: `${prefix}--date-picker__weekdays`,
+				children: weekdayLabels.map((day, index) => /* @__PURE__ */ jsx("div", {
+					className: `${prefix}--date-picker__weekday`,
+					title: day,
+					children: day
+				}, index))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: `${prefix}--date-picker__days`,
+				children: calendarGrid.flat().map((dayCell, index) => {
+					const { date, isCurrentMonth, isDisabled, isToday } = dayCell;
+					const selected = isDateSelected(date);
+					const inRange = isDateInRange(date);
+					const focused = isDateFocused(date);
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: cx(`${prefix}--date-picker__day`, {
+							today: isToday,
+							selected,
+							inRange,
+							prevMonthDay: !isCurrentMonth && date.month < viewDate.month,
+							nextMonthDay: !isCurrentMonth && date.month > viewDate.month,
+							disabled: isDisabled,
+							focused
+						}),
+						onMouseDown: (event) => {
+							event.preventDefault();
+						},
+						onMouseEnter: () => {
+							if (mode === "range" && startDate && !endDate) setHoveredDate(date);
+						},
+						onMouseLeave: () => {
+							setHoveredDate(null);
+						},
+						onClick: () => handleDateClick(date, isDisabled),
+						disabled: isDisabled,
+						"aria-label": getFullDateLabel(date, locale),
+						"aria-pressed": selected || void 0,
+						"aria-current": isToday ? "date" : void 0,
+						tabIndex: focused ? 0 : -1,
+						children: date.day
+					}, index);
+				})
+			})
+		]
+	});
+}
+Calendar.displayName = "Calendar";
+//#endregion
+export { Calendar };

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

@@ -0,0 +1,86 @@
+/**
+ * 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';
+/**
+ * DatePicker component props
+ * Maintains 100% backwards compatibility with Carbon React v11 API
+ */
+export interface DatePickerProps {
+    /**
+     * The type of date picker
+     */
+    datePickerType?: 'simple' | 'single' | 'range';
+    /**
+     * The date format string
+     */
+    dateFormat?: string;
+    /**
+     * Minimum selectable date (mm/dd/yyyy format)
+     */
+    minDate?: string;
+    /**
+     * Maximum selectable date (mm/dd/yyyy format)
+     */
+    maxDate?: string;
+    /**
+     * Locale for date formatting
+     */
+    locale?: string;
+    /**
+     * Whether the picker is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Whether to use the light variant
+     */
+    light?: boolean;
+    /**
+     * Whether to use the short variant
+     */
+    short?: boolean;
+    /**
+     * Whether to allow manual input
+     */
+    allowInput?: boolean;
+    /**
+     * Whether to close calendar on date selection
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Change handler - receives array of Date objects
+     */
+    onChange?: (dates: Date[]) => void;
+    /**
+     * Close handler
+     */
+    onClose?: () => void;
+    /**
+     * Open handler
+     */
+    onOpen?: () => void;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Children (DatePickerInput components)
+     */
+    children?: React.ReactNode;
+    /**
+     * Initial value
+     */
+    value?: string;
+}
+/**
+ * DatePicker component
+ * Main wrapper component that orchestrates date picker functionality
+ * Maintains 100% backwards compatibility with Carbon React v11
+ */
+export declare function DatePicker({ datePickerType, dateFormat, minDate, maxDate, locale, readOnly, light, short, allowInput, closeOnSelect, onChange, onClose, onOpen, className, children, value, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DatePicker {
+    var displayName: string;
+}

package/es/components/DatePicker/next/components/DatePicker.js

@@ -0,0 +1,147 @@
+/**
+ * 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 { useDatePicker } from "../hooks/useDatePicker.js";
+import { Calendar } from "./Calendar.js";
+import React, { Children, isValidElement, useRef } from "react";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { formatPlainDate } from "@carbon/utilities/date-picker";
+//#region src/components/DatePicker/next/components/DatePicker.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.
+*/
+/**
+* DatePicker component
+* Main wrapper component that orchestrates date picker functionality
+* Maintains 100% backwards compatibility with Carbon React v11
+*/
+function DatePicker({ datePickerType = "single", dateFormat = "m/d/Y", minDate, maxDate, locale = "en", readOnly = false, light = false, short = false, allowInput = true, closeOnSelect = true, onChange, onClose, onOpen, className, children, value }) {
+	const containerRef = useRef(null);
+	const prefix = usePrefix();
+	const { context, isOpen, selectDate, openCalendar, closeCalendar, handleInputFocus, handleInputBlur, handleInputChange, send, startInputRef, endInputRef, calendarRef, exitSentinelRef, handleExitSentinelFocus } = useDatePicker({
+		datePickerType,
+		value,
+		minDate,
+		maxDate,
+		dateFormat,
+		allowInput,
+		closeOnSelect,
+		readOnly,
+		locale,
+		onChange,
+		onOpen,
+		onClose
+	});
+	const handleNavigate = (eventType) => {
+		send(eventType);
+	};
+	const handleIconClick = () => {
+		if (isOpen) closeCalendar();
+		else openCalendar();
+	};
+	const enhancedChildren = Children.toArray(children).map((child, index) => {
+		if (!isValidElement(child)) return child;
+		const isStartInput = index === 0;
+		const isEndInput = index === 1 && datePickerType === "range";
+		const inputRef = isStartInput ? startInputRef : isEndInput ? endInputRef : void 0;
+		let inputValue = child.props.value ?? "";
+		if (inputValue === "") {
+			if (isStartInput && context.startDate) inputValue = formatPlainDate(context.startDate, context.dateFormat);
+			else if (isEndInput && context.endDate) inputValue = formatPlainDate(context.endDate, context.dateFormat);
+		}
+		const enhancedProps = {
+			...child.props,
+			value: inputValue,
+			disabled: child.props.disabled || context.isDisabled,
+			readOnly: child.props.readOnly || readOnly,
+			onFocus: (e) => {
+				child.props.onFocus?.(e);
+				handleInputFocus(isEndInput ? "to" : "from");
+			},
+			onBlur: (e) => {
+				child.props.onBlur?.(e);
+				handleInputBlur();
+			},
+			onChange: (e) => {
+				child.props.onChange?.(e);
+				handleInputChange(e.target.value, isEndInput ? "to" : "from");
+			},
+			onClick: (e) => {
+				child.props.onClick?.(e);
+				if (!isOpen) openCalendar();
+			},
+			onKeyDown: (e) => {
+				child.props.onKeyDown?.(e);
+				if (!e.defaultPrevented && e.key === "Tab" && !e.shiftKey && !isOpen) {
+					e.preventDefault();
+					openCalendar();
+				}
+			},
+			onIconClick: () => {
+				child.props.onIconClick?.();
+				handleIconClick();
+			},
+			hideIcon: datePickerType === "simple" || child.props.hideIcon
+		};
+		return /* @__PURE__ */ jsx("div", {
+			className: cx(`${prefix}--date-picker-container`, {
+				[`${prefix}--date-picker-container--single`]: datePickerType === "single",
+				[`${prefix}--date-picker-container--from`]: isStartInput && datePickerType === "range",
+				[`${prefix}--date-picker-container--to`]: isEndInput && datePickerType === "range"
+			}),
+			children: React.createElement(child.type, {
+				...child.props,
+				...enhancedProps,
+				ref: inputRef
+			})
+		}, child.props.id);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: cx(`${prefix}--date-picker`, `${prefix}--date-picker--next`, {
+			[`${prefix}--date-picker--simple`]: datePickerType === "simple",
+			[`${prefix}--date-picker--single`]: datePickerType === "single",
+			[`${prefix}--date-picker--range`]: datePickerType === "range",
+			[`${prefix}--date-picker--light`]: light,
+			[`${prefix}--date-picker--short`]: short,
+			[`${prefix}--date-picker--open`]: isOpen
+		}, className),
+		children: [
+			enhancedChildren,
+			datePickerType !== "simple" && isOpen && /* @__PURE__ */ jsx("div", {
+				ref: calendarRef,
+				className: `${prefix}--date-picker__calendar-container`,
+				children: /* @__PURE__ */ jsx(Calendar, {
+					context,
+					onDateSelect: selectDate,
+					onNavigate: handleNavigate,
+					locale
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				ref: exitSentinelRef,
+				tabIndex: -1,
+				"aria-hidden": true,
+				onFocus: handleExitSentinelFocus,
+				style: {
+					position: "absolute",
+					width: 0,
+					height: 0,
+					overflow: "hidden"
+				}
+			})
+		]
+	});
+}
+DatePicker.displayName = "DatePicker";
+//#endregion
+export { DatePicker };

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

@@ -0,0 +1,143 @@
+/**
+ * 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';
+/**
+ * DatePickerInput component props
+ * Maintains 100% backwards compatibility with Carbon React v11 API
+ */
+export interface DatePickerInputProps {
+    /**
+     * The unique identifier for the input (required)
+     */
+    id: string;
+    /**
+     * The label text
+     */
+    labelText?: React.ReactNode;
+    /**
+     * The placeholder text
+     */
+    placeholder?: string;
+    /**
+     * The input size
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is invalid
+     */
+    invalid?: boolean;
+    /**
+     * The invalid text to display
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Whether the input has a warning
+     */
+    warn?: boolean;
+    /**
+     * The warning text to display
+     */
+    warnText?: React.ReactNode;
+    /**
+     * Helper text to display below the input
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Whether to hide the label visually (still accessible)
+     */
+    hideLabel?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * The input value
+     */
+    value?: string;
+    /**
+     * Default value for uncontrolled component
+     */
+    defaultValue?: string;
+    /**
+     * Change handler
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Focus handler
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Blur handler
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Keydown handler
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * Icon description for accessibility
+     */
+    iconDescription?: string;
+    /**
+     * Calendar icon click handler
+     */
+    onIconClick?: () => void;
+    /**
+     * Whether to show the calendar icon
+     */
+    hideIcon?: boolean;
+    /**
+     * Pattern for input validation
+     */
+    pattern?: string;
+    /**
+     * Type of input
+     */
+    type?: string;
+    /**
+     * Whether the input is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Autocomplete attribute
+     */
+    autoComplete?: string;
+    /**
+     * Name attribute
+     */
+    name?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Callback when calendar opens (for internal use)
+     */
+    onOpen?: () => void;
+    /**
+     * Decorator component (e.g., AI Label)
+     */
+    decorator?: React.ReactNode;
+    /**
+     * @deprecated Use `decorator` instead. Will be removed in next major version.
+     */
+    slug?: React.ReactNode;
+}
+/**
+ * DatePickerInput component
+ * Input field for date picker with Carbon Design System styling
+ * Maintains 100% backwards compatibility with Carbon React v11
+ */
+export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;

package/es/components/DatePicker/next/components/DatePickerInput.js

@@ -0,0 +1,124 @@
+/**
+ * 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 { cloneElement, forwardRef, isValidElement } from "react";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/DatePicker/next/components/DatePickerInput.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.
+*/
+/**
+* DatePickerInput component
+* Input field for date picker with Carbon Design System styling
+* Maintains 100% backwards compatibility with Carbon React v11
+*/
+const DatePickerInput = forwardRef(function DatePickerInput({ id, labelText, placeholder = "mm/dd/yyyy", size = "md", disabled = false, invalid = false, invalidText, warn = false, warnText, helperText, hideLabel = false, className, value, defaultValue, onChange, onFocus, onBlur, onKeyDown, onClick, iconDescription = "Open calendar", onIconClick, hideIcon = false, pattern, type = "text", readOnly = false, autoComplete = "off", name, required = false, onOpen: _onOpen, decorator, slug, ...rest }, ref) {
+	const prefix = usePrefix();
+	const candidate = decorator || slug;
+	const normalizedDecorator = candidate && isValidElement(candidate) && candidate.type?.displayName === "AILabel" && isValidElement(candidate) ? cloneElement(candidate, { size: "mini" }) : candidate;
+	const wrapperClasses = cx(`${prefix}--date-picker-input__wrapper`, className, {
+		[`${prefix}--date-picker-input__wrapper--slug`]: slug,
+		[`${prefix}--date-picker-input__wrapper--decorator`]: decorator
+	});
+	const inputClasses = cx(`${prefix}--date-picker__input`, {
+		[`${prefix}--date-picker__input--sm`]: size === "sm",
+		[`${prefix}--date-picker__input--lg`]: size === "lg",
+		[`${prefix}--date-picker__input--invalid`]: invalid,
+		[`${prefix}--date-picker__input--warn`]: warn && !invalid
+	});
+	const labelClasses = cx(`${prefix}--label`, {
+		[`${prefix}--visually-hidden`]: hideLabel,
+		[`${prefix}--label--disabled`]: disabled
+	});
+	const showInvalidText = invalid && invalidText;
+	const showWarnText = !invalid && warn && warnText;
+	const showHelperText = !invalid && !warn && helperText;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		labelText && /* @__PURE__ */ jsxs("label", {
+			htmlFor: id,
+			className: labelClasses,
+			children: [labelText, required && /* @__PURE__ */ jsx("span", {
+				className: `${prefix}--label__required`,
+				children: "*"
+			})]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: wrapperClasses,
+			children: /* @__PURE__ */ jsxs("span", { children: [
+				/* @__PURE__ */ jsx("input", {
+					...rest,
+					ref,
+					id,
+					name,
+					type,
+					className: inputClasses,
+					placeholder,
+					value,
+					defaultValue,
+					disabled,
+					readOnly,
+					pattern,
+					autoComplete,
+					required,
+					onChange,
+					onFocus,
+					onBlur,
+					onKeyDown,
+					onClick,
+					"aria-invalid": invalid || void 0,
+					"aria-describedby": showInvalidText ? `${id}-error` : showWarnText ? `${id}-warn` : showHelperText ? `${id}-helper` : void 0
+				}),
+				slug ? normalizedDecorator : decorator ? /* @__PURE__ */ jsx("div", {
+					className: `${prefix}--date-picker-input-inner-wrapper--decorator`,
+					children: normalizedDecorator
+				}) : null,
+				!hideIcon && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: `${prefix}--date-picker__icon`,
+					onClick: onIconClick,
+					disabled: disabled || readOnly,
+					"aria-label": iconDescription,
+					tabIndex: -1,
+					children: /* @__PURE__ */ jsx("svg", {
+						focusable: "false",
+						preserveAspectRatio: "xMidYMid meet",
+						xmlns: "http://www.w3.org/2000/svg",
+						fill: "currentColor",
+						width: "16",
+						height: "16",
+						viewBox: "0 0 32 32",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", { d: "M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20  V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z" })
+					})
+				})
+			] })
+		}),
+		showInvalidText && /* @__PURE__ */ jsx("div", {
+			id: `${id}-error`,
+			className: `${prefix}--form-requirement`,
+			children: invalidText
+		}),
+		showWarnText && /* @__PURE__ */ jsx("div", {
+			id: `${id}-warn`,
+			className: `${prefix}--form-requirement`,
+			children: warnText
+		}),
+		showHelperText && /* @__PURE__ */ jsx("div", {
+			id: `${id}-helper`,
+			className: `${prefix}--form__helper-text`,
+			children: helperText
+		})
+	] });
+});
+DatePickerInput.displayName = "DatePickerInput";
+//#endregion
+export { DatePickerInput };

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

@@ -0,0 +1,22 @@
+/**
+ * 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';
+export interface DatePickerSkeletonProps {
+    /**
+     * Specify whether the skeleton should be a range date picker
+     */
+    range?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * DatePickerSkeleton component for loading states
+ */
+export declare const DatePickerSkeleton: React.FC<DatePickerSkeletonProps>;
+export default DatePickerSkeleton;