@carbon/react 1.113.0 → 1.114.0-rc.0

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;

package/es/components/DatePicker/next/components/DatePickerSkeleton.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 { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/DatePicker/next/components/DatePickerSkeleton.tsx
+/**
+* DatePickerSkeleton component for loading states
+*/
+const DatePickerSkeleton = ({ range = false, className }) => {
+	const prefix = usePrefix();
+	return /* @__PURE__ */ jsx("div", {
+		className: `${prefix}--form-item`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `${prefix}--date-picker ${prefix}--date-picker--next ${prefix}--date-picker--${range ? "range" : "single"} ${prefix}--skeleton ${className || ""}`,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: `${prefix}--date-picker-container`,
+				children: [/* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--date-picker__input ${prefix}--skeleton` })]
+			}), range && /* @__PURE__ */ jsxs("div", {
+				className: `${prefix}--date-picker-container`,
+				children: [/* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--date-picker__input ${prefix}--skeleton` })]
+			})]
+		})
+	});
+};
+//#endregion
+export { DatePickerSkeleton, DatePickerSkeleton as default };

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

@@ -0,0 +1,144 @@
+/**
+ * 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 RefObject } from 'react';
+import { DatePickerState, type DatePickerContext } from '@carbon/utilities/date-picker';
+/**
+ * Configuration for the useDatePicker hook
+ * Maintains 100% backwards compatibility with Carbon React v11 API
+ */
+export interface UseDatePickerConfig {
+    /**
+     * The type of date picker (Carbon API uses datePickerType, not mode)
+     */
+    datePickerType?: 'simple' | 'single' | 'range';
+    /**
+     * Initial value as ISO date string
+     */
+    value?: string;
+    /**
+     * Minimum selectable date (mm/dd/yyyy format - Carbon API)
+     */
+    minDate?: string | null;
+    /**
+     * Maximum selectable date (mm/dd/yyyy format - Carbon API)
+     */
+    maxDate?: string | null;
+    /**
+     * Date format string (Flatpickr-compatible format)
+     */
+    dateFormat?: string;
+    /**
+     * Whether to allow manual input
+     */
+    allowInput?: boolean;
+    /**
+     * Whether to close calendar on date selection
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the picker is read-only (Carbon uses readOnly, not readonly)
+     */
+    readOnly?: boolean;
+    /**
+     * Locale for date formatting
+     */
+    locale?: string;
+    /**
+     * Change handler - receives array of Date objects (Carbon API)
+     */
+    onChange?: (dates: Date[]) => void;
+    /**
+     * Open handler
+     */
+    onOpen?: () => void;
+    /**
+     * Close handler
+     */
+    onClose?: () => void;
+}
+/**
+ * Return type for the useDatePicker hook
+ */
+export interface UseDatePickerReturn {
+    /**
+     * Current state machine context
+     */
+    context: DatePickerContext;
+    /**
+     * Ref to attach to the exit sentinel element in the render tree.
+     * The sentinel is a visually-hidden, aria-hidden span placed just after the
+     * calendar container.  It has tabindex="-1" by default and is briefly set to
+     * tabindex="0" when Tab is pressed from the calendar so the browser delivers
+     * focus there naturally — no DOM scan needed.
+     */
+    exitSentinelRef: RefObject<HTMLSpanElement | null>;
+    /**
+     * onFocus handler to attach to the exit sentinel element.
+     * Restores tabindex="-1" on the sentinel and closes the calendar if still open.
+     */
+    handleExitSentinelFocus: () => void;
+    /**
+     * Current state
+     */
+    state: DatePickerState;
+    /**
+     * Whether the calendar is open
+     */
+    isOpen: boolean;
+    /**
+     * Send an event to the state machine
+     */
+    send: (eventType: string, payload?: unknown) => void;
+    /**
+     * Open the calendar
+     */
+    openCalendar: () => void;
+    /**
+     * Close the calendar
+     */
+    closeCalendar: () => void;
+    /**
+     * Select a date
+     */
+    selectDate: (date: Temporal.PlainDate) => void;
+    /**
+     * Handle input focus
+     */
+    handleInputFocus: (inputType?: 'from' | 'to') => void;
+    /**
+     * Handle input blur
+     */
+    handleInputBlur: () => void;
+    /**
+     * Handle input value change
+     */
+    handleInputChange: (value: string, inputType?: 'from' | 'to') => void;
+    /**
+     * Ref for the start input
+     */
+    startInputRef: React.RefObject<HTMLInputElement | null>;
+    /**
+     * Ref for the end input (range mode)
+     */
+    endInputRef: React.RefObject<HTMLInputElement | null>;
+    /**
+     * Ref for the calendar container
+     */
+    calendarRef: React.RefObject<HTMLDivElement | null>;
+}
+/**
+ * React hook for managing date picker state using the shared state machine
+ * Maintains 100% backwards compatibility with Carbon React v11 API
+ *
+ * @param {UseDatePickerConfig} config - Configuration options
+ * @returns {UseDatePickerReturn} Hook return object with state and handlers
+ */
+export declare function useDatePicker(config?: UseDatePickerConfig): UseDatePickerReturn;

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

@@ -0,0 +1,286 @@
+/**
+ * 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 { useCallback, useEffect, useRef, useState } from "react";
+import { ClickOutsideHandler, DatePickerEvent, DatePickerState, DatePickerStateMachine, mapKeyboardToStateMachineEvent, parseDateToPlainDate, plainDateToDate } from "@carbon/utilities/date-picker";
+//#region src/components/DatePicker/next/hooks/useDatePicker.ts
+/**
+* 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.
+*/
+/**
+* React hook for managing date picker state using the shared state machine
+* Maintains 100% backwards compatibility with Carbon React v11 API
+*
+* @param {UseDatePickerConfig} config - Configuration options
+* @returns {UseDatePickerReturn} Hook return object with state and handlers
+*/
+function useDatePicker(config = {}) {
+	const { datePickerType = "single", value = "", minDate = null, maxDate = null, dateFormat = "m/d/Y", closeOnSelect = true, disabled = false, readOnly = false, onChange, onOpen, onClose } = config;
+	const startInputRef = useRef(null);
+	const endInputRef = useRef(null);
+	const calendarRef = useRef(null);
+	const exitSentinelRef = useRef(null);
+	const machineRef = useRef(null);
+	const suppressOpenOnFocusRef = useRef(false);
+	const [context, setContext] = useState(() => {
+		const machine = new DatePickerStateMachine({
+			mode: datePickerType,
+			value,
+			minDate: parseDateToPlainDate(minDate),
+			maxDate: parseDateToPlainDate(maxDate),
+			dateFormat,
+			isDisabled: disabled,
+			isReadonly: readOnly
+		});
+		machineRef.current = machine;
+		return machine.getContext();
+	});
+	const [state, setState] = useState(() => {
+		return machineRef.current?.getState() || DatePickerState.IDLE;
+	});
+	useEffect(() => {
+		const machine = machineRef.current;
+		if (!machine) return;
+		let wasCalendarOpen = machine.getContext().isOpen;
+		return machine.subscribe((transition) => {
+			setContext(transition.context);
+			setState(transition.to);
+			if (transition.to === DatePickerState.CALENDAR_OPEN && onOpen) onOpen();
+			if (wasCalendarOpen && !transition.context.isOpen && onClose) onClose();
+			wasCalendarOpen = transition.context.isOpen;
+		});
+	}, [onOpen, onClose]);
+	useEffect(() => {
+		if (!context.shouldRestoreFocus) return;
+		const targetRef = context.restoreFocusTo === "to" ? endInputRef : startInputRef;
+		const timeoutId = window.setTimeout(() => {
+			suppressOpenOnFocusRef.current = true;
+			targetRef.current?.focus();
+			machineRef.current?.updateContext({
+				shouldRestoreFocus: false,
+				restoreFocusTo: null
+			});
+			setContext(machineRef.current.getContext());
+			queueMicrotask(() => {
+				suppressOpenOnFocusRef.current = false;
+			});
+		}, 0);
+		return () => {
+			window.clearTimeout(timeoutId);
+		};
+	}, [context.shouldRestoreFocus, context.restoreFocusTo]);
+	const prevDatesRef = useRef("");
+	useEffect(() => {
+		if (!onChange) return;
+		const dates = [];
+		if (context.startDate) {
+			const date = plainDateToDate(context.startDate);
+			if (date) dates.push(date);
+		}
+		if (context.endDate) {
+			const date = plainDateToDate(context.endDate);
+			if (date) dates.push(date);
+		}
+		const datesKey = dates.map((d) => d.toISOString()).join(",");
+		if (dates.length > 0 && datesKey !== prevDatesRef.current) {
+			prevDatesRef.current = datesKey;
+			onChange(dates);
+		}
+	}, [
+		context.startDate,
+		context.endDate,
+		onChange
+	]);
+	useEffect(() => {
+		const machine = machineRef.current;
+		if (!machine) return;
+		if (disabled !== context.isDisabled) machine.send(disabled ? DatePickerEvent.DISABLE : DatePickerEvent.ENABLE);
+		if (readOnly !== context.isReadonly) machine.send(readOnly ? DatePickerEvent.SET_READONLY : DatePickerEvent.UNSET_READONLY);
+		const newMinDate = parseDateToPlainDate(minDate);
+		const newMaxDate = parseDateToPlainDate(maxDate);
+		if (newMinDate) machine.send(DatePickerEvent.SET_MIN_DATE, { date: newMinDate });
+		if (newMaxDate) machine.send(DatePickerEvent.SET_MAX_DATE, { date: newMaxDate });
+	}, [
+		disabled,
+		readOnly,
+		minDate,
+		maxDate,
+		context.isDisabled,
+		context.isReadonly
+	]);
+	const send = useCallback((eventType, payload) => {
+		machineRef.current?.send(eventType, payload);
+	}, []);
+	const openCalendar = useCallback(() => {
+		send(DatePickerEvent.CALENDAR_ICON_CLICK);
+	}, [send]);
+	const closeCalendar = useCallback(() => {
+		send(DatePickerEvent.CALENDAR_CLOSE);
+	}, [send]);
+	const selectDate = useCallback((date) => {
+		if (datePickerType === "range") if (!context.startDate || context.endDate) send(DatePickerEvent.RANGE_START_SELECT, { date });
+		else {
+			send(DatePickerEvent.RANGE_END_SELECT, { date });
+			if (closeOnSelect) send(DatePickerEvent.CALENDAR_CLOSE);
+		}
+		else {
+			send(DatePickerEvent.DATE_SELECT, { date });
+			if (closeOnSelect) send(DatePickerEvent.CALENDAR_CLOSE);
+		}
+	}, [
+		closeOnSelect,
+		datePickerType,
+		context.startDate,
+		context.endDate,
+		send
+	]);
+	const handleInputFocus = useCallback((inputType = "from") => {
+		send(DatePickerEvent.INPUT_FOCUS, { inputType });
+		if (suppressOpenOnFocusRef.current) return;
+		send(DatePickerEvent.CALENDAR_OPEN);
+	}, [send]);
+	const handleInputBlur = useCallback(() => {
+		send(DatePickerEvent.INPUT_BLUR);
+	}, [send]);
+	const handleInputChange = useCallback((value, inputType = "from") => {
+		send(DatePickerEvent.VALUE_CHANGE, {
+			value,
+			inputType
+		});
+	}, [send]);
+	useEffect(() => {
+		if (!context.isOpen) return;
+		const handler = new ClickOutsideHandler({
+			isOpen: context.isOpen,
+			/**
+			* Check if a node is contained within the date picker elements
+			* @param {Node} node - The node to check
+			* @returns {boolean} True if the node is within the date picker
+			*/
+			containsNode: (node) => {
+				const calendarEl = calendarRef.current;
+				const startInputEl = startInputRef.current;
+				const endInputEl = endInputRef.current;
+				return (calendarEl?.contains(node) ?? false) || (startInputEl?.contains(node) ?? false) || (endInputEl?.contains(node) ?? false);
+			},
+			/**
+			* Handle clicks outside the date picker
+			*/
+			onOutsideClick: () => send(DatePickerEvent.OUTSIDE_CLICK),
+			useCapture: true,
+			attachDelay: 0
+		});
+		handler.attach();
+		return () => {
+			handler.detach();
+		};
+	}, [context.isOpen, send]);
+	useEffect(() => {
+		/**
+		* Handle keyboard events for calendar navigation
+		*
+		* @param {KeyboardEvent} event - Keyboard event
+		*/
+		const handleKeyDown = (event) => {
+			const { key } = event;
+			const target = event.target;
+			const calendarEl = calendarRef.current;
+			const startInputEl = startInputRef.current;
+			const endInputEl = endInputRef.current;
+			const isFocusInCalendar = calendarEl && (calendarEl.contains(target) || target === calendarEl || target.classList?.contains("cds--date-picker__calendar"));
+			const isFocusInInput = target === startInputEl || target === endInputEl || startInputEl && startInputEl.contains(target) || endInputEl && endInputEl.contains(target);
+			if (key === "Escape" && context.isOpen) {
+				event.preventDefault();
+				send(DatePickerEvent.ESCAPE_KEY);
+				return;
+			}
+			if (key === "Tab") {
+				if (isFocusInInput && !event.shiftKey) {
+					event.preventDefault();
+					if (calendarEl) calendarEl.querySelector(".cds--date-picker__calendar")?.focus();
+					return;
+				}
+				if (isFocusInCalendar && event.shiftKey) {
+					event.preventDefault();
+					if (datePickerType === "range" && context.lastFocusedInput === "to" && endInputEl) endInputEl.focus();
+					else if (startInputEl) startInputEl.focus();
+					return;
+				}
+				if (isFocusInCalendar && !event.shiftKey) {
+					send(DatePickerEvent.TAB_KEY);
+					if (exitSentinelRef.current) exitSentinelRef.current.tabIndex = 0;
+					return;
+				}
+				return;
+			}
+			if (!context.isOpen) return;
+			if (!isFocusInCalendar || isFocusInInput) return;
+			const mappedEvent = mapKeyboardToStateMachineEvent({
+				key,
+				shiftKey: event.shiftKey,
+				mode: datePickerType,
+				state,
+				focusedDate: context.focusedDate
+			});
+			if (mappedEvent) {
+				if (mappedEvent.preventDefault) event.preventDefault();
+				if (mappedEvent.eventType) send(mappedEvent.eventType, mappedEvent.payload);
+				return;
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [
+		context.isOpen,
+		context.focusedDate,
+		context.lastFocusedInput,
+		state,
+		datePickerType,
+		send
+	]);
+	/**
+	* Called when the browser delivers focus to the exit sentinel.
+	* Closes the calendar (state machine already received TAB_KEY in _handleKeyDown)
+	* and immediately restores tabindex="-1" so future Tab presses skip the sentinel.
+	*
+	* TODO (carbon monorepo migration): replace this hand-rolled sentinel with the
+	* upstream Carbon wrapFocus utility, which implements the same start/end sentinel
+	* pattern for focus trapping and exit.
+	* Upstream location: packages/react/src/internal/wrapFocus.ts (wrapFocus /
+	* wrapFocusWithoutSentinels exports).  Note that wrapFocus is designed to trap
+	* focus inside a container (modal pattern) rather than release it; the exit-only
+	* direction we need maps to the endTrapNode path in that utility.
+	*/
+	const handleExitSentinelFocus = useCallback(() => {
+		if (exitSentinelRef.current) exitSentinelRef.current.tabIndex = -1;
+		if (context.isOpen) send(DatePickerEvent.TAB_KEY);
+	}, [context.isOpen, send]);
+	return {
+		context,
+		state,
+		isOpen: context.isOpen,
+		send,
+		openCalendar,
+		closeCalendar,
+		selectDate,
+		handleInputFocus,
+		handleInputBlur,
+		handleInputChange,
+		startInputRef,
+		endInputRef,
+		calendarRef,
+		exitSentinelRef,
+		handleExitSentinelFocus
+	};
+}
+//#endregion
+export { useDatePicker };

package/es/components/DatePicker/next/index.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.
+ */
+export { DatePicker } from './components/DatePicker';
+export { DatePickerInput } from './components/DatePickerInput';
+export { DatePickerSkeleton } from './components/DatePickerSkeleton';
+export type { DatePickerProps } from './components/DatePicker';
+export type { DatePickerInputProps } from './components/DatePickerInput';
+export type { DatePickerSkeletonProps } from './components/DatePickerSkeleton';

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

@@ -0,0 +1,19 @@
+/**
+ * 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 { DatePicker } from "./components/DatePicker.js";
+import { DatePickerInput } from "./components/DatePickerInput.js";
+import { DatePickerSkeleton } from "./components/DatePickerSkeleton.js";
+//#region src/components/DatePicker/next/index.tsx
+var next_exports = /* @__PURE__ */ __exportAll({
+	DatePicker: () => DatePicker,
+	DatePickerInput: () => DatePickerInput,
+	DatePickerSkeleton: () => DatePickerSkeleton
+});
+//#endregion
+export { DatePicker, DatePickerInput, DatePickerSkeleton, next_exports };

package/es/index.d.ts

@@ -29,6 +29,7 @@ export * from './components/DataTable';
 export * from './components/DataTableSkeleton';
 export * from './components/DatePicker';
 export * from './components/DatePickerInput';
+export * as preview__DatePicker from './components/DatePicker/next';
 export * from './components/Dropdown';
 export * from './components/ErrorBoundary';
 export * from './components/ExpandableSearch';