@povio/ui 2.2.9-rc.41 → 2.2.9-rc.44

package/dist/components/buttons/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactElement, Ref, SVGProps } from 'react';
+import { FC, ReactElement, ReactNode, Ref, SVGProps } from 'react';
 import { ButtonProps as AriaButtonProps, ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 import { LinkNavigationProps } from '../../text/Link/Link';
@@ -17,13 +17,12 @@ type ToggleButtonProps = {
     isSelected?: boolean;
 } & AriaToggleButtonProps);
 export type ButtonProps<IconOnly extends boolean = false> = ButtonVariantProps & ButtonContentVariantProps & AriaButtonProps & ButtonIconProps<IconOnly> & ToggleButtonProps & {
-    children: string;
+    children: ReactNode;
     isLoading?: boolean;
     link?: LinkNavigationProps;
     noDisableWhenLoading?: boolean;
     iconClassName?: string;
     contentRef?: Ref<HTMLElement>;
-    staticRender?: boolean;
 };
-export declare const Button: <IconOnly extends boolean = false>({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, staticRender, ...props }: ButtonProps<IconOnly>) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: <IconOnly extends boolean = false>({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, ...props }: ButtonProps<IconOnly>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/buttons/Button/Button.js

@@ -7,11 +7,10 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button, Link, ToggleButton } from "react-aria-components";
 //#region src/components/buttons/Button/Button.tsx
-var Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, staticRender, ...props }) => {
+var Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, ...props }) => {
 	const linkContext = LinkContext.useLinkContext();
 	const uiConfig = UIConfig.useConfig();
-	const variant = props.variant ?? uiConfig.button.variant;
-	const size = props.size ?? uiConfig.button.size;
+	const { variant = uiConfig.button.variant, size = uiConfig.button.size } = props;
 	const buttonCva = UIStyle.useCva("button.cva", button);
 	const buttonSizeCva = UIStyle.useCva("button.sizeCva", buttonSize);
 	const buttonContentCva = UIStyle.useCva("button.contentCva", buttonContent);
@@ -23,53 +22,45 @@ var Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, link
 		return Button;
 	})();
 	if (link && !link.to && link.href) link.to = link.href;
-	const resolvedClassName = clsx(buttonCva({
-		...props,
-		variant,
-		size,
-		className
-	}), buttonSizeCva({
-		...props,
-		variant,
-		size
-	}), buttonContentCva({
+	return /* @__PURE__ */ jsx(Component, {
 		...props,
-		variant,
-		size,
-		iconPosition: !Icon ? "none" : iconPosition
-	}));
-	const content = /* @__PURE__ */ jsx(ButtonContent, {
-		ref: contentRef,
-		isLoading,
-		icon: Icon,
-		text: children,
-		hideText: props.iconOnly,
-		iconPosition,
-		iconClassName: buttonIconSizeCva({
+		...link,
+		isDisabled: props.isDisabled || isLoading && !noDisableWhenLoading,
+		className: clsx(buttonCva({
 			...props,
 			variant,
 			size,
-			className: iconClassName
-		}),
-		typography: typographyMap({
+			className
+		}), buttonSizeCva({
 			...props,
 			variant,
 			size
+		}), buttonContentCva({
+			...props,
+			variant,
+			size,
+			iconPosition: !Icon ? "none" : iconPosition
+		})),
+		children: /* @__PURE__ */ jsx(ButtonContent, {
+			ref: contentRef,
+			isLoading,
+			icon: Icon,
+			content: children,
+			hideText: props.iconOnly,
+			iconPosition,
+			iconClassName: buttonIconSizeCva({
+				...props,
+				variant,
+				size,
+				className: iconClassName
+			}),
+			typography: typographyMap({
+				...props,
+				variant,
+				size
+			})
 		})
 	});
-	if (staticRender) return /* @__PURE__ */ jsx("div", {
-		"aria-label": props.iconOnly ? children : void 0,
-		"aria-disabled": props.isDisabled || void 0,
-		className: resolvedClassName,
-		children: content
-	});
-	return /* @__PURE__ */ jsx(Component, {
-		...props,
-		...link,
-		isDisabled: props.isDisabled || isLoading && !noDisableWhenLoading,
-		className: resolvedClassName,
-		children: content
-	});
 };
 //#endregion
 export { Button$1 as Button };

package/dist/components/buttons/PillButton/PillButton.d.ts

@@ -1,9 +1,9 @@
-import { FC, Ref, SVGProps } from 'react';
+import { FC, ReactNode, Ref, SVGProps } from 'react';
 import { ButtonProps as AriaButtonProps, ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
 import { PillButtonVariants } from './pillButton.cva';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 export interface PillButtonProps extends AriaButtonProps, Omit<AriaToggleButtonProps, keyof AriaButtonProps>, ButtonContentVariantProps, PillButtonVariants {
-    children: string;
+    children: ReactNode;
     dismissable?: boolean;
     toggle?: boolean;
     icon?: FC<SVGProps<SVGSVGElement>>;

package/dist/components/buttons/PillButton/PillButton.js

@@ -22,7 +22,7 @@ var PillButton = ({ children, dismissable, toggle, icon, iconPosition, contentRe
 		}), pillButtonContent({ iconPosition: getIconPosition() })),
 		children: /* @__PURE__ */ jsx(ButtonContent, {
 			ref: contentRef,
-			text: children,
+			content: children,
 			icon: dismissable ? CloseIcon : icon,
 			iconPosition: dismissable ? "right" : iconPosition,
 			iconClassName: pillButtonIconSize,

package/dist/components/buttons/TextButton/TextButton.d.ts

@@ -1,10 +1,11 @@
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { ReactNode } from 'react';
 import { ButtonIconProps } from '../Button/Button';
 import { ButtonVariantProps } from '../Button/button.cva';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 import { LinkNavigationProps } from '../../text/Link/Link';
 export type TextButtonProps = Omit<ButtonVariantProps, "variant"> & ButtonContentVariantProps & AriaButtonProps & ButtonIconProps<true | false> & {
-    children: string;
+    children: ReactNode;
     isLoading?: boolean;
     link?: LinkNavigationProps;
 };

package/dist/components/buttons/ToggleButton/ToggleButton.d.ts

@@ -1,8 +1,9 @@
 import { ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
+import { ReactNode } from 'react';
 import { ButtonIconProps } from '../Button/Button';
 import { ButtonVariantProps } from '../Button/button.cva';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 export type ToggleButtonProps = ButtonVariantProps & ButtonContentVariantProps & AriaToggleButtonProps & ButtonIconProps<true | false> & {
-    children: string;
+    children: ReactNode;
 };
 export declare const ToggleButton: ({ children, ...props }: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/shared/ButtonContent.d.ts

@@ -1,14 +1,14 @@
-import { FC, ReactElement, Ref, SVGProps } from 'react';
+import { FC, ReactElement, ReactNode, Ref, SVGProps } from 'react';
 import { ButtonContentVariantProps } from './buttonContent.cva';
 import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 interface ButtonContentProps extends ButtonContentVariantProps {
     ref?: Ref<HTMLElement>;
-    text: string;
+    content: ReactNode;
     isLoading?: boolean;
     icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
     iconClassName?: string;
     hideText?: boolean;
     typography?: TypographyVariantProps;
 }
-export declare const ButtonContent: ({ ref, text, isLoading, icon: Icon, iconClassName, hideText, iconPosition, typography: typographyOverrides, }: ButtonContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonContent: ({ ref, content, isLoading, icon: Icon, iconClassName, hideText, iconPosition, typography: typographyOverrides, }: ButtonContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/buttons/shared/ButtonContent.js

@@ -6,7 +6,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
 //#region src/components/buttons/shared/ButtonContent.tsx
-var ButtonContent = ({ ref, text, isLoading, icon: Icon, iconClassName, hideText, iconPosition = "left", typography: typographyOverrides }) => {
+var ButtonContent = ({ ref, content, isLoading, icon: Icon, iconClassName, hideText, iconPosition = "left", typography: typographyOverrides }) => {
 	const typographyCva = UIStyle.useCva("typography.cva", typography);
 	let iconOrLoader = null;
 	if (isLoading) iconOrLoader = /* @__PURE__ */ jsx(Loader, { className: "shrink-0" });
@@ -28,7 +28,7 @@ var ButtonContent = ({ ref, text, isLoading, icon: Icon, iconClassName, hideText
 				hideText: !!hideText
 			})),
 			ref,
-			children: text
+			children: content
 		}),
 		iconOrLoader && iconPosition === "right" && iconOrLoader
 	] });

package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts

@@ -7,6 +7,7 @@ import { DatePickerTodayIcon, DatePickerTodayIconButtonSize, DatePickerTodayIcon
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
+type DatePickerGranularity = "day" | "month" | "year";
 interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label" | "onBlur"> {
     ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
     disableDropdown?: boolean;
@@ -21,6 +22,9 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
     placeholder?: string;
     inputClassName?: string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    shouldUpdateDateOnMonthYearChange?: boolean;
+    granularity?: DatePickerGranularity;
+    format?: string;
 }
 export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: string | null;
@@ -31,5 +35,5 @@ export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "on
     renderStaticInput?: boolean;
 }
 export type ControlledDatePickerProps<TFieldValues extends FieldValues> = ControlProps<DatePickerProps, TFieldValues>;
-export declare const DatePicker: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: <TFieldValues extends FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -1,32 +1,38 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Calendar } from "../shared/Calendar.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { datePickerInputContentRow } from "../shared/datePickerInput.cva.js";
 import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { getStaticCalendarDateSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
-import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller, useWatch } from "react-hook-form";
-import { CalendarDate, createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
+import { createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DatePicker/DatePicker.tsx
-var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, granularity = ui.dateInput.granularity, autoFixYear = ui.dateInput.autoFixYear, format, ...rest } = props;
+	const normalizeByGranularity = useCallback((date) => {
+		if (granularity === "year") return date.set({
+			month: 1,
+			day: 1
+		});
+		if (granularity === "month") return date.set({ day: 1 });
+		return date;
+	}, [granularity]);
 	const formFieldProps = {
 		error,
 		label,
@@ -50,7 +56,6 @@ var DatePickerBase = (props) => {
 	const handleBlur = (val) => {
 		onBlur?.({ target: { value: val } });
 	};
-	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -62,14 +67,19 @@ var DatePickerBase = (props) => {
 		shouldForceLeadingZeros,
 		value,
 		onChange: (val) => {
-			if (val && (rest.minValue && val < rest?.minValue || rest?.maxValue && val > rest?.maxValue)) {
+			let normalizedValue = val;
+			if (val) normalizedValue = normalizeByGranularity(val);
+			if (normalizedValue && (rest.minValue && normalizedValue < rest?.minValue || rest?.maxValue && normalizedValue > rest?.maxValue)) {
 				state.setValue(state.value);
 				return;
 			}
-			onChange?.(val);
-			dialogState.setValue(val);
-			calendarState.setFocusedDate(val || today(getLocalTimeZone()));
-			debouncedBlur(val);
+			onChange?.(normalizedValue);
+			dialogState.setValue(normalizedValue);
+			if (normalizedValue) {
+				calendarState.setFocusedDate(normalizedValue);
+				return;
+			}
+			calendarState.setFocusedDate(today(getLocalTimeZone()));
 		},
 		shouldCloseOnSelect: false
 	});
@@ -101,18 +111,47 @@ var DatePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		const newValue = dialogState.value;
-		state.setValue(newValue);
+		if (dialogState.value) state.setValue(normalizeByGranularity(dialogState.value));
+		else state.setValue(dialogState.value);
 		state.toggle();
 		handleBlur(newValue);
 	};
+	const onMonthYearChange = (selectedDate) => {
+		if (!(shouldUpdateDateOnMonthYearChange || granularity !== "day")) return;
+		const updatedDate = normalizeByGranularity((dialogState.value || state.value || today(getLocalTimeZone())).set({
+			year: selectedDate.year,
+			month: selectedDate.month
+		}));
+		dialogState.setValue(updatedDate);
+		calendarState.setFocusedDate(updatedDate);
+	};
+	const onMonthYearCommit = () => {
+		onApply();
+	};
 	const onTodayPress = () => {
-		dialogState.setValue(today(getLocalTimeZone()));
-		calendarState.setFocusedDate(today(getLocalTimeZone()));
+		const todayValue = normalizeByGranularity(today(getLocalTimeZone()));
+		dialogState.setValue(todayValue);
+		calendarState.setFocusedDate(todayValue);
 	};
+	useEffect(() => {
+		if (!state.isOpen) return;
+		if (granularity !== "year") return;
+		if (dialogState.value) return;
+		const defaultYearValue = normalizeByGranularity(today(getLocalTimeZone()));
+		dialogState.setValue(defaultYearValue);
+		calendarState.setFocusedDate(defaultYearValue);
+	}, [
+		state.isOpen,
+		granularity,
+		dialogState.value,
+		dialogState,
+		calendarState,
+		normalizeByGranularity
+	]);
 	const onOpenChange = (isOpen) => {
 		state.toggle();
-		calendarState.setFocusedDate(state.value || today(getLocalTimeZone()));
+		if (state.value) calendarState.setFocusedDate(normalizeByGranularity(state.value));
+		if (!state.value) calendarState.setFocusedDate(today(getLocalTimeZone()));
 		if (!isOpen) dialogState.setValue(state.value);
 	};
 	return /* @__PURE__ */ jsx(TooltipWrapper, {
@@ -129,10 +168,7 @@ var DatePickerBase = (props) => {
 				ref: mergeRefs(ref, datePickerInputRef),
 				as,
 				groupProps,
-				fieldProps: {
-					...fieldProps,
-					placeholderValue: PLACEHOLDER_VALUE
-				},
+				fieldProps,
 				buttonProps,
 				isDirty,
 				isDisabled,
@@ -149,7 +185,9 @@ var DatePickerBase = (props) => {
 				todayIconPlacement,
 				onOpenDropdown: () => state.toggle(),
 				placeholder,
-				className: inputClassName
+				className: inputClassName,
+				dateGranularity: granularity,
+				format
 			}), (!disableDropdown || disableManualEntry) && state.isOpen && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -165,13 +203,17 @@ var DatePickerBase = (props) => {
 				children: /* @__PURE__ */ jsx(Calendar, {
 					state: calendarState,
 					calendarProps,
-					onApply
+					onApply,
+					onMonthYearChange,
+					onMonthYearCommit,
+					selectedDate: dialogState.value ?? null,
+					granularity
 				})
 			})]
 		})
 	});
 };
-var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...props }) => {
+var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const { locale } = useLocale();
@@ -193,17 +235,26 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 	let isFormControlDisabled = false;
 	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
 	const rawValue = watchedValue ?? props.value ?? null;
+	const normalizeByGranularity = (date) => {
+		if (granularity === "year") return date.set({
+			month: 1,
+			day: 1
+		});
+		if (granularity === "month") return date.set({ day: 1 });
+		return date;
+	};
 	const formatCalendarDate = (calendarDate) => {
 		if (calendarDate === null) return null;
-		if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(calendarDate);
-		const date = DateTimeUtils.fromDateValueToLocal(calendarDate);
+		const normalizedDate = normalizeByGranularity(calendarDate);
+		if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(normalizedDate);
+		const date = DateTimeUtils.fromDateValueToLocal(normalizedDate);
 		return DateTime.fromJSDate(date).toISODate();
 	};
 	const parseCalendarDate = (formattedDate) => {
 		if (formattedDate == null) return formattedDate;
-		if (fullIso) return DateTimeUtils.fromUTCISOToCalendarDate(formattedDate);
+		if (fullIso) return normalizeByGranularity(DateTimeUtils.fromUTCISOToCalendarDate(formattedDate));
 		const date = DateTime.fromISO(formattedDate).toJSDate();
-		return toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date));
+		return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date)));
 	};
 	const dateLimits = {
 		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
@@ -233,6 +284,7 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
+			contentClassName: "pr-0!",
 			contentWrapperClassName: datePickerInputContentRowCva({ size }),
 			labelPlacement: "content-row",
 			dataAttributes: {
@@ -249,6 +301,7 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments
 		});
@@ -275,6 +328,7 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 		...props,
 		...dateLimits,
 		ref: mergeRefs(props.ref, inputRef),
+		granularity,
 		value: parseCalendarDate(props.value),
 		onChange: (value) => props.onChange?.(formatCalendarDate(value))
 	});

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -2,12 +2,12 @@ import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import "../../../../config/i18n.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { datePickerInputContentRow } from "../shared/datePickerInput.cva.js";
 import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { getStaticDateRangeSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
@@ -634,6 +634,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
+			contentClassName: "pr-0!",
 			contentWrapperClassName: datePickerInputContentRowCva({ size }),
 			labelPlacement: "content-row",
 			dataAttributes: {
@@ -650,6 +651,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments
 		});

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts

@@ -21,6 +21,9 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     setDateValueOnDateSelection?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    shouldUpdateDateOnMonthYearChange?: boolean;
+    timeZone?: string;
+    format?: string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange"> {
@@ -28,6 +31,7 @@ export interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "valu
     onChange?: (value: string | null) => void;
     fullIso?: boolean;
     renderStaticInput?: boolean;
+    timeZone?: string;
 }
 export type ControlledDateTimePickerProps<TFieldValues extends FieldValues> = ControlProps<DateTimePickerProps, TFieldValues>;
 export declare const DateTimePicker: <TFieldValues extends FieldValues>({ fullIso, renderStaticInput, ...props }: ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -1,12 +1,12 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Calendar } from "../shared/Calendar.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { datePickerInputContentRow } from "../shared/datePickerInput.cva.js";
 import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { getStaticCalendarDateTimeSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
@@ -24,7 +24,9 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, setDateValueOnDateSelection = ui.dateInput.setDateValueOnDateSelection, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, timeZone, autoFixYear = ui.dateInput.autoFixYear, format, setDateValueOnDateSelection = ui.dateInput.setDateValueOnDateSelection, ...rest } = props;
+	let effectiveTimeZone = getLocalTimeZone();
+	if (timeZone) effectiveTimeZone = timeZone;
 	const formFieldProps = {
 		error,
 		label,
@@ -109,19 +111,38 @@ var DateTimePickerBase = (props) => {
 		state.toggle();
 		handleBlur(newValue);
 	};
+	const onMonthYearChange = (selectedDate) => {
+		if (!shouldUpdateDateOnMonthYearChange) return;
+		const baseDate = dialogState.value || state.value;
+		if (baseDate) {
+			const updatedDate = baseDate.set({
+				year: selectedDate.year,
+				month: selectedDate.month
+			});
+			dialogState.setValue(updatedDate);
+			calendarState.setFocusedDate(updatedDate);
+			return;
+		}
+		dialogState.setValue(toCalendarDateTime(selectedDate));
+		calendarState.setFocusedDate(selectedDate);
+	};
 	const onTodayPress = () => {
-		dialogState.setValue(toCalendarDateTime(now(getLocalTimeZone())));
-		calendarState.setFocusedDate(today(getLocalTimeZone()));
+		dialogState.setValue(toCalendarDateTime(now(effectiveTimeZone)));
+		calendarState.setFocusedDate(today(effectiveTimeZone));
 	};
 	const onOpenChange = (isOpen) => {
 		state.toggle();
-		calendarState.setFocusedDate(state.value || today(getLocalTimeZone()));
+		calendarState.setFocusedDate(state.value || today(effectiveTimeZone));
 		if (!isOpen) dialogState.setValue(state.value);
 	};
 	const onInputBlur = (e) => {
 		if (!isTimeOptional) return;
+		if (state.value) {
+			dialogState.setValue(state.value);
+			return;
+		}
 		const textValue = e.currentTarget.textContent;
-		const dateTimeValue = DateTimeUtils.formatTextDateToCalendarDateTime(textValue);
+		const dateTimeValue = DateTimeUtils.formatTextDateToCalendarDateTime(textValue, effectiveTimeZone, locale);
 		if (dateTimeValue) {
 			state.setValue(dateTimeValue);
 			dialogState.setValue(dateTimeValue);
@@ -167,7 +188,10 @@ var DateTimePickerBase = (props) => {
 				autoFixYear,
 				placeholder,
 				onOpenDropdown: () => state.toggle(),
-				className: inputClassName
+				className: inputClassName,
+				timeZone: effectiveTimeZone,
+				isTimeOptional,
+				format
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -186,6 +210,8 @@ var DateTimePickerBase = (props) => {
 					includesTime: true,
 					datePickerState: dialogState,
 					onApply,
+					onMonthYearChange,
+					granularity: "day",
 					setDateValueOnDateSelection
 				})
 			})]
@@ -214,14 +240,16 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 	let isFormControlDisabled = false;
 	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
 	const rawValue = watchedValue ?? props.value ?? null;
+	let effectiveTimeZone = getLocalTimeZone();
+	if (props.timeZone) effectiveTimeZone = props.timeZone;
 	const formatDateValue = (dateValue) => {
 		if (dateValue === null) return null;
-		if (fullIso) return DateTimeUtils.fromCalendarDateTimeToUTCISO(dateValue);
-		return DateTimeUtils.fromDateValueToISO(dateValue);
+		if (fullIso) return DateTimeUtils.fromDateValueToISO(dateValue, effectiveTimeZone);
+		return DateTimeUtils.fromDateValueToISO(dateValue, effectiveTimeZone);
 	};
 	const parseDateValue = (isoString) => {
 		if (isoString == null) return isoString;
-		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString);
+		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString, effectiveTimeZone);
 	};
 	if (!renderInput) {
 		const dateTimeValue = rawValue ? parseDateValue(rawValue) : null;
@@ -247,6 +275,7 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
+			contentClassName: "pr-0!",
 			contentWrapperClassName: datePickerInputContentRowCva({ size }),
 			labelPlacement: "content-row",
 			dataAttributes: {
@@ -263,6 +292,7 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0,
 			children: staticSegments
 		});

package/dist/components/inputs/DateTime/TimePicker/TimePicker.d.ts

@@ -19,6 +19,7 @@ export interface TimePickerProps extends Omit<TimePickerBaseProps, "value" | "on
     value?: string | null;
     onChange?: (value: string | null) => void;
     fullIso?: boolean;
+    timeZone?: string;
     renderStaticInput?: boolean;
 }
 export type ControlledTimePickerProps<TFieldValues extends FieldValues> = ControlProps<TimePickerProps, TFieldValues>;