@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/components/combobox/ComboboxState.js

@@ -0,0 +1,70 @@
+import { Text } from "../text/Text.js";
+import { useComboboxContext } from "./context/ComboboxContext.js";
+import { useComboboxEvent } from "./context/useComboboxEvent.js";
+import { CLASSNAME, COMPONENT_NAME, ComboboxState as ComboboxState$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxState.js";
+import { subscribeComboboxState } from "../../packages/lumx-core/src/js/components/Combobox/subscribeComboboxState.js";
+import { GenericBlock } from "../generic-block/GenericBlock.js";
+import { useEffect, useState } from "react";
+//#region src/components/combobox/ComboboxState.tsx
+/**
+* Combobox.State component - displays empty and error states for the combobox list.
+*
+* Place this component as a sibling to `Combobox.List` inside a `Combobox.Popover`:
+*
+* ```tsx
+* <Combobox.Popover>
+*   <Combobox.List aria-label="Options">{options}</Combobox.List>
+*   <Combobox.State
+*     emptyMessage="No results"
+*     errorMessage={isError ? 'Service unavailable' : undefined}
+*     errorTryReloadMessage="Please try again"
+*   />
+* </Combobox.Popover>
+* ```
+*
+* Activation rules (in priority order):
+* - **Error state**: active when `errorMessage` is provided (presence-based).
+*   Takes priority over all other states.
+* - **Loading state**: active when `loadingMessage` is provided and skeletons have been
+*   mounted for at least 500ms. Suppresses the empty state while loading.
+* - **Empty state**: active when `emptyMessage` is provided and the list has no visible options
+*   and is not loading.
+* - **Option count**: active when `nbOptionMessage` is provided and the list is not empty,
+*   not loading, and not in error.
+*
+* @param props Component props.
+* @return React element.
+*/
+var ComboboxState = (props) => {
+	const { handle } = useComboboxContext();
+	const optionsState = useComboboxEvent("optionsChange", void 0);
+	const [isLoading, setIsLoading] = useState(false);
+	const [shouldAnnounce, setShouldAnnounce] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+	useEffect(() => {
+		if (!handle) return void 0;
+		return subscribeComboboxState(handle, {
+			setIsLoading,
+			setShouldAnnounce,
+			setIsOpen
+		});
+	}, [handle]);
+	const state = {
+		...optionsState,
+		isLoading,
+		isOpen
+	};
+	const loadingMessage = shouldAnnounce ? props.loadingMessage : void 0;
+	return ComboboxState$1({
+		...props,
+		loadingMessage,
+		state
+	}, {
+		GenericBlock,
+		Text
+	});
+};
+ComboboxState.displayName = COMPONENT_NAME;
+ComboboxState.className = CLASSNAME;
+//#endregion
+export { ComboboxState };

package/_internal/components/combobox/context/ComboboxContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+//#region src/components/combobox/context/ComboboxContext.ts
+var ComboboxContext = createContext(void 0);
+/**
+* Hook to access the Combobox context.
+* @throws Error if used outside of a Combobox component.
+* @returns The combobox context value.
+*/
+function useComboboxContext() {
+	const context = useContext(ComboboxContext);
+	if (!context) throw new Error("Combobox sub-components must be used within a Combobox");
+	return context;
+}
+//#endregion
+export { ComboboxContext, useComboboxContext };

package/_internal/components/combobox/context/ComboboxListContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+//#region src/components/combobox/context/ComboboxListContext.ts
+var ComboboxListContext = createContext({ type: "listbox" });
+/**
+* Hook to access the Combobox.List context (provides the `type`).
+* @returns The list context value.
+*/
+function useComboboxListContext() {
+	return useContext(ComboboxListContext);
+}
+//#endregion
+export { ComboboxListContext, useComboboxListContext };

package/_internal/components/combobox/context/ComboboxOptionContext.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+//#region src/components/combobox/context/ComboboxOptionContext.ts
+var ComboboxOptionContext = createContext(void 0);
+/**
+* Hook to access the Combobox.Option context.
+* Must be used within a Combobox.Option's `after` slot.
+* @throws Error if used outside of a Combobox.Option.
+* @returns The option context value.
+*/
+function useComboboxOptionContext() {
+	const context = useContext(ComboboxOptionContext);
+	if (!context) throw new Error("Combobox.OptionMoreInfo must be used within a Combobox.Option `after` slot");
+	return context;
+}
+//#endregion
+export { ComboboxOptionContext, useComboboxOptionContext };

package/_internal/components/combobox/context/useComboboxEvent.d.ts

@@ -0,0 +1,10 @@
+import { ComboboxEventMap } from "../../../packages/lumx-core/src/js/components/Combobox/types.js";
+
+//#region src/components/combobox/context/useComboboxEvent.d.ts
+/**
+ * Hook to subscribe to a combobox event via the handle's subscriber system.
+ * Re-subscribes when the handle changes (e.g. trigger mount/unmount).
+ */
+declare function useComboboxEvent<K extends keyof ComboboxEventMap>(event: K, initialValue: ComboboxEventMap[K]): ComboboxEventMap[K];
+//#endregion
+export { useComboboxEvent };

package/_internal/components/combobox/context/useComboboxEvent.js

@@ -0,0 +1,17 @@
+import { useComboboxContext } from "./ComboboxContext.js";
+import { useEffect, useState } from "react";
+//#region src/components/combobox/context/useComboboxEvent.ts
+/**
+* Hook to subscribe to a combobox event via the handle's subscriber system.
+* Re-subscribes when the handle changes (e.g. trigger mount/unmount).
+*/
+function useComboboxEvent(event, initialValue) {
+	const { handle } = useComboboxContext();
+	const [value, setValue] = useState(initialValue);
+	useEffect(() => {
+		return handle?.subscribe(event, setValue);
+	}, [handle, event]);
+	return value;
+}
+//#endregion
+export { useComboboxEvent };

package/_internal/components/combobox/context/useComboboxOpen.js

@@ -0,0 +1,13 @@
+import { useComboboxContext } from "./ComboboxContext.js";
+import { useComboboxEvent } from "./useComboboxEvent.js";
+import { useCallback } from "react";
+//#region src/components/combobox/context/useComboboxOpen.ts
+/**
+* Hook to subscribe to the combobox open/close state.
+*/
+function useComboboxOpen() {
+	const { handle } = useComboboxContext();
+	return [useComboboxEvent("open", false), useCallback((open) => handle?.setIsOpen(open), [handle])];
+}
+//#endregion
+export { useComboboxOpen };

package/_internal/components/combobox/index.d.ts

@@ -0,0 +1,73 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ComponentRef } from "../../utils/type/ComponentRef.js";
+import { HasPolymorphicAs } from "../../utils/type/HasPolymorphicAs.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ButtonProps } from "../button/Button.js";
+import { ComboboxButtonProps } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxButton.js";
+import { ComboboxInputProps } from "./ComboboxInput.js";
+import { ComboboxListProps } from "./ComboboxList.js";
+import { ComboboxOptionProps } from "./ComboboxOption.js";
+import { ComboboxOptionMoreInfoProps } from "./ComboboxOptionMoreInfo.js";
+import { ComboboxOptionSkeletonProps } from "./ComboboxOptionSkeleton.js";
+import { ComboboxPopoverComponentProps, ComboboxPopoverProps } from "./ComboboxPopover.js";
+import { ComboboxSectionProps } from "./ComboboxSection.js";
+import { ComboboxStateProps } from "./ComboboxState.js";
+import { ListDividerProps } from "../list/ListDivider.js";
+import { ComboboxProvider, ComboboxProviderProps } from "./ComboboxProvider.js";
+import { useComboboxEvent } from "./context/useComboboxEvent.js";
+import { ComboboxButtonProps as ComboboxButtonProps$1 } from "./ComboboxButton.js";
+import { ComboboxOptionActionProps } from "./ComboboxOptionAction.js";
+
+//#region src/components/combobox/index.d.ts
+/**
+ * Combobox compound component namespace.
+ */
+declare const Combobox: {
+  /** Provides shared combobox context (handle, listbox ID, anchor ref) to all sub-components. */Provider: typeof ComboboxProvider; /** Button trigger for select-only combobox mode with keyboard navigation and typeahead. */
+  Button: (<E extends import("react").ElementType = Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>>(props: Omit<HasPolymorphicAs<E>, "children" | "aria-expanded" | "aria-haspopup" | "role" | "aria-controls" | "aria-activedescendant"> & import("@lumx/core/js/types").HasRequiredLinkHref<E> & ReactToJSX<ComboboxButtonProps> & import("react").ComponentProps<E> & {
+    ref?: ComponentRef<E> | undefined;
+  }) => React.JSX.Element) & {
+    displayName: string;
+    className: "lumx-combobox-button";
+  }; /** Text input trigger for autocomplete combobox mode with optional toggle button and filtering. */
+  Input: Comp<ComboboxInputProps, HTMLDivElement>; /** Listbox container that registers with the combobox handle and tracks loading state. */
+  List: Comp<ComboboxListProps, HTMLUListElement>; /** Selectable option item with filtering and keyboard navigation support. */
+  Option: Comp<ComboboxOptionProps, HTMLLIElement>; /** Secondary action button within a grid-mode option row, rendered as an independent gridcell. */
+  OptionAction: (<E extends import("react").ElementType = "button">(props: import("react").PropsWithoutRef<import("react").ComponentProps<E>> & {
+    as?: E | undefined;
+  } & import("@lumx/core/js/types").HasClassName & import("@lumx/core/js/types").HasRequiredLinkHref<E> & {
+    children?: import("react").ReactNode;
+    isDisabled?: boolean;
+    onClick?(evt: import("react").SyntheticEvent): void;
+  } & import("react").ComponentProps<E> & {
+    ref?: ComponentRef<E> | undefined;
+  }) => React.JSX.Element) & {
+    displayName: string;
+    className: "lumx-combobox-option-action";
+  }; /** Info button on an option that shows a popover on hover or keyboard highlight. */
+  OptionMoreInfo: {
+    (props: ComboboxOptionMoreInfoProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    className: "lumx-combobox-option-more-info";
+  }; /** Loading placeholder skeleton(s) that auto-register loading state with the combobox handle. */
+  OptionSkeleton: {
+    (props: ComboboxOptionSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    className: "lumx-combobox-option-skeleton";
+  }; /** Floating popover container that auto-binds to the combobox anchor and open/close state. */
+  Popover: {
+    (props: ComboboxPopoverComponentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    className: "lumx-combobox-popover";
+  }; /** Labelled group of options that auto-hides when all its child options are filtered out. */
+  Section: Comp<ComboboxSectionProps, HTMLLIElement>; /** Displays empty, error, and loading state messages for the combobox list. */
+  State: {
+    (props: ComboboxStateProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    className: "lumx-combobox-state";
+  }; /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
+  Divider: Comp<ListDividerProps, HTMLLIElement>; /** Hook to subscribe to combobox events. Must be used within a Combobox.Provider. */
+  useComboboxEvent: typeof useComboboxEvent;
+};
+//#endregion
+export { Combobox };

package/_internal/components/combobox/index.js

@@ -0,0 +1,47 @@
+import { useComboboxEvent } from "./context/useComboboxEvent.js";
+import { ComboboxButton } from "./ComboboxButton.js";
+import { ComboboxInput } from "./ComboboxInput.js";
+import { ComboboxList } from "./ComboboxList.js";
+import { ComboboxOption } from "./ComboboxOption.js";
+import { ComboboxOptionAction } from "./ComboboxOptionAction.js";
+import { ComboboxOptionMoreInfo } from "./ComboboxOptionMoreInfo.js";
+import { ComboboxOptionSkeleton } from "./ComboboxOptionSkeleton.js";
+import { ComboboxPopover } from "./ComboboxPopover.js";
+import { ComboboxProvider } from "./ComboboxProvider.js";
+import { ComboboxSection } from "./ComboboxSection.js";
+import { ComboboxState } from "./ComboboxState.js";
+import { ListDivider } from "../list/ListDivider.js";
+//#region src/components/combobox/index.ts
+/**
+* Combobox compound component namespace.
+*/
+var Combobox = {
+	/** Provides shared combobox context (handle, listbox ID, anchor ref) to all sub-components. */
+	Provider: ComboboxProvider,
+	/** Button trigger for select-only combobox mode with keyboard navigation and typeahead. */
+	Button: ComboboxButton,
+	/** Text input trigger for autocomplete combobox mode with optional toggle button and filtering. */
+	Input: ComboboxInput,
+	/** Listbox container that registers with the combobox handle and tracks loading state. */
+	List: ComboboxList,
+	/** Selectable option item with filtering and keyboard navigation support. */
+	Option: ComboboxOption,
+	/** Secondary action button within a grid-mode option row, rendered as an independent gridcell. */
+	OptionAction: ComboboxOptionAction,
+	/** Info button on an option that shows a popover on hover or keyboard highlight. */
+	OptionMoreInfo: ComboboxOptionMoreInfo,
+	/** Loading placeholder skeleton(s) that auto-register loading state with the combobox handle. */
+	OptionSkeleton: ComboboxOptionSkeleton,
+	/** Floating popover container that auto-binds to the combobox anchor and open/close state. */
+	Popover: ComboboxPopover,
+	/** Labelled group of options that auto-hides when all its child options are filtered out. */
+	Section: ComboboxSection,
+	/** Displays empty, error, and loading state messages for the combobox list. */
+	State: ComboboxState,
+	/** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
+	Divider: ListDivider,
+	/** Hook to subscribe to combobox events. Must be used within a Combobox.Provider. */
+	useComboboxEvent
+};
+//#endregion
+export { Combobox };

package/_internal/components/combobox/wrapRenderOption.js

@@ -0,0 +1,38 @@
+import { isComponentType } from "../../utils/type/isComponentType.js";
+import { ComboboxOption } from "./ComboboxOption.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/combobox/wrapRenderOption.tsx
+/**
+* Adapts a React `renderOption` callback returning a `<Combobox.Option>` into the
+* `renderOption` shape expected by the core Select* templates.
+*
+* Used by both `SelectTextField` and `SelectButton` React wrappers.
+*
+* Behavior:
+* - If `renderOption` is `undefined`, returns `undefined` (no custom rendering).
+* - If the consumer returns a `<Combobox.Option>`, its props/children are merged with the
+*   core-computed `value` / `isSelected` / `description` / `key`.
+*   When the consumer's `<Combobox.Option>` has no children, falls back to the option `name`.
+* - If the consumer returns anything else, returns `null` (skips the option).
+*
+* @param renderOption Consumer-provided render function.
+* @return The wrapped `renderOption` callback or `undefined`.
+*/
+function wrapRenderOption(renderOption) {
+	if (!renderOption) return void 0;
+	return (option, { index, value: optionValue, isSelected, description, name }) => {
+		const node = renderOption(option, index);
+		if (!isComponentType(ComboboxOption)(node)) return null;
+		const { children = name, ...customProps } = node.props;
+		return /* @__PURE__ */ jsx(ComboboxOption, {
+			...customProps,
+			value: optionValue,
+			isSelected,
+			description,
+			children
+		}, optionValue);
+	};
+}
+//#endregion
+export { wrapRenderOption };

package/_internal/components/comment-block/CommentBlock.d.ts

@@ -0,0 +1,68 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { AvatarProps } from "../avatar/Avatar.js";
+import { ReactNode } from "react";
+
+//#region src/components/comment-block/CommentBlock.d.ts
+/**
+ * Comment block variants.
+ */
+declare const CommentBlockVariant: {
+  readonly indented: "indented";
+  readonly linear: "linear";
+};
+type CommentBlockVariant = index_d_exports.ValueOf<typeof CommentBlockVariant>;
+/**
+ * Defines the props of the component.
+ */
+interface CommentBlockProps extends index_d_exports.GenericProps, index_d_exports.HasTheme {
+  /** Action toolbar content. */
+  actions?: ReactNode;
+  /** Props to pass to the avatar. */
+  avatarProps: AvatarProps;
+  /** Comment block replies. */
+  children?: ReactNode;
+  /** Comment date with the minimal timestamp information (xx minutes, x hours, yesterday, 6 days, Month Day, Month Day Year)*/
+  date?: string;
+  /** Comment date with the full timestamp information (day, month, year, time) */
+  fullDate?: string;
+  /** Whether the component has actions to display or not. */
+  hasActions?: boolean;
+  /** Action toolbar header content. */
+  headerActions?: ReactNode;
+  /** Whether the component is open or not. */
+  isOpen?: boolean;
+  /** Whether the comment is relevant or not. */
+  isRelevant?: boolean;
+  /** Comment author name. */
+  name?: React.ReactNode;
+  /**
+   * On click callback.
+   * @deprecated Use avatarProps instead and/or inject a clickable component in `name`
+   */
+  onClick?(): void;
+  /**
+   * On mouse enter callback.
+   * @deprecated Use avatarProps instead and/or inject a clickable component in `name`
+   */
+  onMouseEnter?(): void;
+  /**
+   * On mouse leave callback.
+   * @deprecated Use avatarProps instead and/or inject a clickable component in `name`
+   */
+  onMouseLeave?(): void;
+  /** Comment content. */
+  text: ReactNode | string;
+  /** Comment variant. */
+  variant?: CommentBlockVariant;
+}
+/**
+ * CommentBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const CommentBlock: Comp<CommentBlockProps, HTMLDivElement>;
+//#endregion
+export { CommentBlock, CommentBlockProps, CommentBlockVariant };

package/_internal/components/comment-block/CommentBlock.js

@@ -0,0 +1,109 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { Avatar } from "../avatar/Avatar.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { src_exports } from "../../../index.js";
+import { Children } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/comment-block/CommentBlock.tsx
+/**
+* Comment block variants.
+*/
+var CommentBlockVariant = {
+	indented: "indented",
+	linear: "linear"
+};
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "CommentBlock";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-comment-block";
+var { block, element } = classNames.bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { variant: CommentBlockVariant.indented };
+/**
+* CommentBlock component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var CommentBlock = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { actions, avatarProps, children, className, date, fullDate, hasActions, headerActions, isOpen, isRelevant, name, onClick, onMouseEnter, onMouseLeave, text, theme = defaultTheme, variant = DEFAULT_PROPS.variant, ...forwardedProps } = props;
+	const hasChildren = Children.count(children) > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classNames.join(className, block({
+			"has-children": hasChildren && isOpen,
+			"has-indented-children": hasChildren && variant === CommentBlockVariant.indented,
+			"has-linear-children": hasChildren && variant === CommentBlockVariant.linear,
+			"is-relevant": isRelevant,
+			[`theme-${theme}`]: Boolean(theme)
+		})),
+		...forwardedProps,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: element("wrapper"),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: element("avatar"),
+				children: /* @__PURE__ */ jsx(Avatar, {
+					...avatarProps,
+					size: src_exports.Size.m,
+					onClick
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: element("container"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: element("content"),
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: element("meta"),
+							children: [name && /* @__PURE__ */ jsx("span", {
+								className: element("name"),
+								onClick,
+								onMouseEnter,
+								onMouseLeave,
+								children: name
+							}), headerActions && /* @__PURE__ */ jsx("span", {
+								className: element("header-actions"),
+								children: headerActions
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: element("text"),
+							children: text
+						}),
+						date && (fullDate ? /* @__PURE__ */ jsx(Tooltip, {
+							label: fullDate,
+							placement: "top",
+							children: /* @__PURE__ */ jsx("span", {
+								className: element("date"),
+								children: date
+							})
+						}) : /* @__PURE__ */ jsx("span", {
+							className: element("date"),
+							children: date
+						}))
+					]
+				}), hasActions && /* @__PURE__ */ jsx("div", {
+					className: element("actions"),
+					children: actions
+				})]
+			})]
+		}), hasChildren && isOpen && /* @__PURE__ */ jsx("div", {
+			className: element("children"),
+			children
+		})]
+	});
+});
+CommentBlock.displayName = COMPONENT_NAME;
+CommentBlock.className = CLASSNAME;
+CommentBlock.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { CommentBlock, CommentBlockVariant };

package/_internal/components/comment-block/index.d.ts

@@ -0,0 +1 @@
+import { CommentBlock, CommentBlockProps, CommentBlockVariant } from "./CommentBlock.js";

package/_internal/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,14 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { DatePickerProps } from "./types.js";
+
+//#region src/components/date-picker/DatePicker.d.ts
+/**
+ * DatePicker component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const DatePicker: Comp<DatePickerProps, HTMLDivElement>;
+//#endregion
+export { DatePicker };

package/_internal/components/date-picker/DatePicker.js

@@ -0,0 +1,45 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { addMonthResetDay } from "../../utils/date/addMonthResetDay.js";
+import { isDateValid } from "../../utils/date/isDateValid.js";
+import { CLASSNAME, COMPONENT_NAME } from "./constants.js";
+import { DatePickerControlled } from "./DatePickerControlled.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/date-picker/DatePicker.tsx
+/**
+* DatePicker component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var DatePicker = forwardRef((props, ref) => {
+	const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;
+	let referenceDate = value || defaultMonth || /* @__PURE__ */ new Date();
+	if (!isDateValid(referenceDate)) {
+		console.warn(`[@lumx/react/DatePicker] Invalid date provided ${referenceDate}`);
+		referenceDate = /* @__PURE__ */ new Date();
+	}
+	const [selectedMonth, setSelectedMonth] = useState(referenceDate);
+	const setPrevMonth = () => setSelectedMonth((current) => addMonthResetDay(current, -1));
+	const setNextMonth = () => setSelectedMonth((current) => addMonthResetDay(current, 1));
+	const onDatePickerChange = (newDate) => {
+		onChange(newDate);
+	};
+	return /* @__PURE__ */ jsx(DatePickerControlled, {
+		ref,
+		...forwardedProps,
+		defaultMonth,
+		locale,
+		value,
+		onPrevMonthChange: setPrevMonth,
+		onNextMonthChange: setNextMonth,
+		selectedMonth,
+		onChange: onDatePickerChange,
+		onMonthChange: setSelectedMonth
+	});
+});
+DatePicker.displayName = COMPONENT_NAME;
+DatePicker.className = CLASSNAME;
+//#endregion
+export { DatePicker };

package/_internal/components/date-picker/DatePickerControlled.d.ts

@@ -0,0 +1,26 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { DatePickerProps } from "./types.js";
+//#region src/components/date-picker/DatePickerControlled.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface DatePickerControlledProps extends DatePickerProps {
+  /** Selected month to display. */
+  selectedMonth: Date;
+  /** On previous month change callback. */
+  onPrevMonthChange(): void;
+  /** On next month change callback. */
+  onNextMonthChange(): void;
+  /** On month/year change callback. */
+  onMonthChange?: (newMonth: Date) => void;
+}
+/**
+ * DatePickerControlled component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElement>;
+//#endregion
+export { DatePickerControlled, DatePickerControlledProps };