softable-pixels-web 1.2.16 → 1.2.17

package/dist/{DatePicker-Cj2Y6_7E.js → DatePicker-CqDALumP.js}

@@ -1,13 +1,15 @@
 import { n as styled, t as useThemedStyles } from "./useThemedStyles-B1E0m8Ih.js";
-import { t as Icon } from "./Icon-Ded27Khw.js";
+import { t as Icon } from "./Icon-Cs9B-aOe.js";
 import { t as Typography } from "./Typography-DOmGYHd6.js";
 import { t as BasePopover } from "./BasePopover-BvMT9rNx.js";
 import { t as Label } from "./Label-DYeW5MAo.js";
+import { t as ErrorMessage } from "./ErrorMessage-W0yfhfJP.js";
 import { t as Button } from "./Button-CxAl6MNt.js";
-import { i as MaskModule, n as Locale, r as MaskType } from "./MaskModule-NVjkWlFm.js";
+import { a as Locale, i as DateMask, n as DateValidator, o as MaskType, s as MaskModule, t as TimeValidator } from "./MaskModule-B29Q2AH2.js";
 import { forwardRef, useEffect, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { addDays, addMonths, addYears, eachDayOfInterval, endOfMonth, endOfWeek, format, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval, parse, parseISO, setHours, setMinutes, startOfDay, startOfMonth, startOfWeek, startOfYear } from "date-fns";
+import { motion } from "framer-motion";
+import { addDays, addMonths, addYears, eachDayOfInterval, endOfDay, endOfMonth, endOfWeek, format, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval, parse, parseISO, setHours, setMinutes, startOfDay, startOfMonth, startOfWeek, startOfYear } from "date-fns";
 import { ptBR } from "date-fns/locale";
 
 //#region src/utils/functions/capitalize.ts
@@ -19,9 +21,11 @@ function capitalize(text) {
 //#endregion
 //#region src/components/commons/toolkit/Calendar/components/CalendarMonth/components/CalendarDay/utils.ts
 function getDayMetadata(params) {
-	const { day, currentMonth, selection, disablePastDates } = params;
+	const { day, currentMonth, selection, disablePastDates, disableFutureDates } = params;
+	const endOfToday = endOfDay(/* @__PURE__ */ new Date());
 	const isPastDate = isBefore(day, startOfDay(/* @__PURE__ */ new Date()));
-	const isDisabled = !isSameMonth(day, currentMonth) || disablePastDates && isPastDate || false;
+	const isFutureDate = isAfter(day, endOfToday);
+	const isDisabled = !isSameMonth(day, currentMonth) || disablePastDates && isPastDate || disableFutureDates && isFutureDate || false;
 	if (!selection) return {
 		ariaLabel: getAriaLabel(day, {
 			isDisabled,
@@ -122,17 +126,19 @@ function getButtonBorderRadius({ isBetween, isRangeStart, isRangeEnd }) {
 //#endregion
 //#region src/components/commons/toolkit/Calendar/components/CalendarMonth/components/CalendarDay/index.tsx
 const CalendarDay = (props) => {
-	const { day, currentMonth, selection, disablePastDates, onClick } = props;
+	const { day, selection, currentMonth, disablePastDates, disableFutureDates, onClick } = props;
 	const dayConfig = useMemo(() => getDayMetadata({
 		day,
 		selection,
 		currentMonth,
-		disablePastDates
+		disablePastDates,
+		disableFutureDates
 	}), [
 		day,
 		selection,
 		currentMonth,
-		disablePastDates
+		disablePastDates,
+		disableFutureDates
 	]);
 	const { styles, classes } = useThemedStyles({
 		...props,
@@ -240,6 +246,7 @@ const CalendarMonth = (props) => {
 			selection: props.selection,
 			currentMonth,
 			disablePastDates: props.disablePastDates,
+			disableFutureDates: props.disableFutureDates,
 			onClick: props.onDayClick
 		}, day.toISOString()))
 	})] });
@@ -285,13 +292,18 @@ const NavButton = ({ visible = true, ...props }) => {
 //#endregion
 //#region src/components/commons/toolkit/Calendar/components/CalendarHeader/utils.ts
 function getNavMetadata(params) {
-	const { currentDate, isDualView, position, disablePastDates } = params;
+	const { position, isDualView, currentDate, disablePastDates, disableFutureDates } = params;
 	const today = /* @__PURE__ */ new Date();
 	const hasPrevMonthAvailable = !disablePastDates || isBefore(startOfMonth(today), startOfMonth(currentDate));
 	const hasPrevYearAvailable = !disablePastDates || isBefore(startOfYear(today), startOfYear(currentDate));
+	const showPrevButtons = !isDualView ? hasPrevMonthAvailable || hasPrevYearAvailable : position !== "right";
+	function checkRenderShowNextButton() {
+		if (disableFutureDates) return false;
+		else return !isDualView ? true : position !== "left";
+	}
 	return {
-		showPrevButtons: !isDualView ? hasPrevMonthAvailable || hasPrevYearAvailable : position !== "right",
-		showNextButtons: !isDualView ? true : position !== "left",
+		showPrevButtons,
+		showNextButtons: checkRenderShowNextButton(),
 		hasPrevYearAvailable,
 		hasPrevMonthAvailable
 	};
@@ -309,11 +321,15 @@ function createCalendarHeaderStyles(_props) {
 			paddingBlock: "0.375rem"
 		},
 		leftButtonsContainer: {
+			minWidth: "3.5rem",
+			minHeight: "1.5rem",
 			display: "flex",
 			alignItems: "center",
 			gap: "0.25rem"
 		},
 		rightButtonsContainer: {
+			minWidth: "3.5rem",
+			minHeight: "1.5rem",
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "flex-end",
@@ -352,7 +368,7 @@ const CalendarHeader = (props) => {
 					visible: hasPrevYearAvailable,
 					onClick: () => onNavAction("prev-year")
 				})]
-			}) : /* @__PURE__ */ jsx("div", {}),
+			}) : /* @__PURE__ */ jsx("div", { style: styles.leftButtonsContainer }),
 			/* @__PURE__ */ jsx(Typography, {
 				variant: "b2",
 				align: "center",
@@ -370,58 +386,244 @@ const CalendarHeader = (props) => {
 					icon: "chevrons-left",
 					onClick: () => onNavAction("next-month")
 				})]
-			}) : /* @__PURE__ */ jsx("div", {})
+			}) : /* @__PURE__ */ jsx("div", { style: styles.rightButtonsContainer })
 		]
 	});
 };
 
 //#endregion
-//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/hooks/useDateTimeInput/utils.ts
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/components/PeriodSwitch/components/PeriodSwitchItem/styles.ts
+function createTabSwitchItemStyles({ selected }) {
+	return styled({
+		item: {
+			minHeight: "1rem",
+			position: "relative",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: 4,
+			background: "transparent",
+			border: 0,
+			padding: "0.25rem",
+			userSelect: "none",
+			whiteSpace: "nowrap",
+			__rules: { "& > p": { zIndex: 1 } }
+		},
+		selectedBg: {
+			position: "absolute",
+			inset: 0,
+			borderRadius: 6,
+			border: "1px solid var(--px-border-primary)"
+		}
+	});
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/components/PeriodSwitch/components/PeriodSwitchItem/index.tsx
+const PeriodSwitchItem = (props) => {
+	const { option, selected, onClick } = props;
+	const { styles, classes } = useThemedStyles(props, createTabSwitchItemStyles, { pick: (p) => [p.selected] });
+	return /* @__PURE__ */ jsxs("button", {
+		tabIndex: 0,
+		type: "button",
+		style: styles.item,
+		className: classes.item,
+		onBlur: props.onBlur,
+		onClick: () => onClick(option.value),
+		children: [selected ? /* @__PURE__ */ jsx(motion.div, {
+			layoutId: props.layoutId,
+			style: styles.selectedBg
+		}) : null, /* @__PURE__ */ jsx(Typography, {
+			variant: "b1",
+			fontSize: "0.625rem",
+			fontWeight: "semibold",
+			children: option.label
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/components/PeriodSwitch/constants.ts
+const PERIOD_OPTIONS = [{
+	value: "am",
+	label: "AM"
+}, {
+	value: "pm",
+	label: "PM"
+}];
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/components/PeriodSwitch/styles.ts
+function createTabSwitchStyles(props) {
+	return styled({ container: {
+		width: "fit-content",
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		color: "var(--px-text-primary, #4b5563)",
+		gap: 0,
+		__rules: { "& svg": { zIndex: 1 } }
+	} });
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/components/PeriodSwitch/index.tsx
+const PeriodSwitch = (props) => {
+	{
+		const { currentValue, onChange } = props;
+		const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {
+			pick: (p) => [p.currentValue],
+			applyCommonProps: true
+		});
+		return /* @__PURE__ */ jsx("div", {
+			style: styles.container,
+			className: classes.container,
+			children: PERIOD_OPTIONS.map((opt) => /* @__PURE__ */ jsx(PeriodSwitchItem, {
+				option: opt,
+				layoutId: props.layoutId,
+				selected: currentValue === opt.value,
+				onClick: onChange,
+				onBlur: props.onBlur
+			}, String(opt.value)))
+		});
+	}
+};
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/constants.ts
+const DEFAULT_TIME_FORMAT = "24h";
+const DEFAULT_VIEW_MODE = "double";
+const DEFAULT_DATE_FORMAT = "dd/MM/yyyy";
+const DEFAULT_DISPLAY_DATE_FORMAT = "dd MMMM yyyy";
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/constants.ts
+const DATE_FORMAT_MASK_MAPPER = {
+	"dd/MM/yyyy": "DD/MM/YYYY",
+	"MM/dd/yyyy": "MM/DD/YYYY",
+	"yyyy/MM/dd": "YYYY/MM/DD"
+};
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/hooks/useDateTimeInput/utils/buildISODate.ts
 function makeInitialDateTime() {
 	return {
 		time: "",
-		date: ""
+		date: "",
+		period: "am"
 	};
 }
-function buildISO(date, time, dateFormat = "dd/MM/yyyy") {
+function buildISO({ date, time, period = "am", timeFormat = DEFAULT_TIME_FORMAT, dateFormat = DEFAULT_DATE_FORMAT }) {
 	const baseDate = parse(date, dateFormat, /* @__PURE__ */ new Date());
-	const [hours, minutes] = time.split(":").map(Number);
+	let [hours, minutes] = time.split(":").map(Number);
+	if (timeFormat === "12h") {
+		if (period === "pm" && hours !== 12) hours += 12;
+		else if (period === "am" && hours === 12) hours = 0;
+	}
 	return setMinutes(setHours(baseDate, hours || 0), minutes || 0).toISOString();
 }
 
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/hooks/useDateTimeInput/utils/errors.ts
+function checkErrors({ values, disablePastDates, disableFutureDates, timeFormat = DEFAULT_TIME_FORMAT, dateFormat = DEFAULT_DATE_FORMAT }) {
+	const maskFormat = DATE_FORMAT_MASK_MAPPER[dateFormat];
+	const dateValidator = new DateValidator({ dateFormat: maskFormat });
+	const timeValidator = new TimeValidator({ format: timeFormat });
+	const isValidDate = dateValidator.validate(values.date);
+	const isValidTime = timeValidator.validate(values.time);
+	let error = "";
+	if (!isValidTime) error = "Formato de hora inválida";
+	if (!isValidDate) error = "Formato de data inválida";
+	if (isValidDate) {
+		const endOfToday = endOfDay(/* @__PURE__ */ new Date());
+		const startOfToday = startOfDay(/* @__PURE__ */ new Date());
+		const dateISO = createISODate(values.date, dateFormat);
+		if (dateISO && disableFutureDates && isAfter(dateISO, endOfToday.toISOString())) error = "Data futura indisponível";
+		if (dateISO && disablePastDates && isBefore(dateISO, startOfToday.toISOString())) error = "Data passada indisponível";
+	}
+	return error ?? null;
+}
+function createISODate(value, format$1) {
+	const parts = value.split("/");
+	if (parts.length !== 3) return null;
+	let day;
+	let month;
+	let year;
+	switch (format$1) {
+		case "dd/MM/yyyy":
+			[day, month, year] = parts;
+			break;
+		case "MM/dd/yyyy":
+			[month, day, year] = parts;
+			break;
+		case "yyyy/MM/dd":
+			[year, month, day] = parts;
+			break;
+	}
+	return new Date(Number(year), Number(month) - 1, Number(day));
+}
+
 //#endregion
 //#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/hooks/useDateTimeInput/index.ts
-function useDateTimeInput({ value, dateFormat = "dd/MM/yyyy", onChange }) {
+function useDateTimeInput({ value, disablePastDates, disableFutureDates, timeFormat = DEFAULT_TIME_FORMAT, dateFormat = DEFAULT_DATE_FORMAT, onChange }) {
+	const [errorMessage, setErrorMessage] = useState("");
 	const [datetimeValue, setDatetimeValue] = useState(makeInitialDateTime);
 	useEffect(() => {
 		if (!value) return;
 		const date = parseISO(value);
-		setDatetimeValue({
-			date: format(date, dateFormat),
-			time: format(date, "HH:mm")
-		});
-	}, [value, dateFormat]);
+		let time;
+		let period = "am";
+		if (timeFormat === "12h") {
+			time = format(date, "hh:mm");
+			period = format(date, "a").toLowerCase();
+		} else time = format(date, "HH:mm");
+		setDatetimeValue((prev) => ({
+			...prev,
+			time,
+			period,
+			date: format(date, dateFormat)
+		}));
+	}, [
+		value,
+		dateFormat,
+		timeFormat
+	]);
 	function emitChange() {
-		onChange(buildISO(datetimeValue.date, datetimeValue.time, dateFormat));
+		const error = checkErrors({
+			dateFormat,
+			timeFormat,
+			disablePastDates,
+			disableFutureDates,
+			values: datetimeValue
+		});
+		if (error) return setErrorMessage(error);
+		onChange(buildISO({
+			...datetimeValue,
+			dateFormat,
+			timeFormat
+		}));
 	}
 	function handleDateTimeChange(changes) {
-		const formattedValue = {};
+		const formattedChanges = {};
+		setErrorMessage("");
 		if (changes.date != null && changes.date !== void 0) {
-			const module = MaskModule.getMask(Locale.BR, MaskType.DATE);
-			formattedValue.date = module ? module.format(changes.date) : changes.date;
+			const maskDateFormat = DATE_FORMAT_MASK_MAPPER[dateFormat];
+			const module = new DateMask({ dateFormat: maskDateFormat });
+			formattedChanges.date = module ? module.format(changes.date) : changes.date;
 		}
 		if (changes.time != null && changes.time !== void 0) {
-			const module = MaskModule.getMask(Locale.BR, MaskType.TIME);
-			formattedValue.time = module ? module.format(changes.time) : changes.time;
+			const module = timeFormat === "12h" ? MaskModule.getMask(Locale.BR, MaskType.TIME_12H) : MaskModule.getMask(Locale.BR, MaskType.TIME_24H);
+			formattedChanges.time = module ? module.format(changes.time) : changes.time;
 		}
+		if (changes.period) formattedChanges.period = changes.period;
 		setDatetimeValue((prev) => ({
 			...prev,
-			...formattedValue
+			...formattedChanges
 		}));
 	}
 	return {
-		date: datetimeValue.date,
-		time: datetimeValue.time,
+		errorMessage,
+		datetimeValue,
 		emitChange,
 		handleDateTimeChange
 	};
@@ -432,33 +634,34 @@ function useDateTimeInput({ value, dateFormat = "dd/MM/yyyy", onChange }) {
 function createDateTimeInputStyles(_props) {
 	return styled({
 		container: {
+			width: "17.5rem",
+			display: "flex",
+			flexDirection: "column",
+			gap: "0.25rem"
+		},
+		content: {
 			width: "100%",
 			height: "2.5rem",
 			display: "flex",
 			alignItems: "center",
+			columnGap: "0.25rem",
 			borderWidth: 1,
 			borderStyle: "solid",
 			borderRadius: "0.5rem",
 			padding: "0.625rem 0.875rem",
 			boxShadow: "var(--px-shadow-default)",
-			borderColor: "var(--px-border-primary)",
+			borderColor: _props.errorMessage ? "var(--px-color-error)" : "var(--px-border-primary)",
 			__rules: { "&:focus-within": {
 				outlineOffset: "-1px",
 				outline: "2px solid var(--px-color-primary)"
 			} }
 		},
-		content: {
-			flex: 1,
-			display: "flex",
-			alignItems: "center",
-			columnGap: "0.25rem"
-		},
 		wrapper: {
-			flex: 1,
+			width: "100%",
 			minWidth: 0,
 			display: "flex",
 			alignItems: "center",
-			gap: "0.5rem"
+			gap: "0.25rem"
 		},
 		divider: {
 			border: 0,
@@ -494,16 +697,19 @@ function createDateTimeInputStyles(_props) {
 //#endregion
 //#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/index.tsx
 const DateTimeInput = (props) => {
-	const { styles, classes } = useThemedStyles(props, createDateTimeInputStyles, {
-		applyCommonProps: true,
-		pick: (p) => [p.value]
-	});
-	const { date, time, emitChange, handleDateTimeChange } = useDateTimeInput(props);
-	return /* @__PURE__ */ jsx("div", {
+	const { styles, classes } = useThemedStyles(props, createDateTimeInputStyles, { applyCommonProps: true });
+	const { errorMessage, datetimeValue, emitChange, handleDateTimeChange } = useDateTimeInput(props);
+	function handleKeyDown(e) {
+		if (e.key === "Enter") emitChange();
+	}
+	function handleBlur() {
+		emitChange();
+	}
+	return /* @__PURE__ */ jsxs("div", {
 		style: styles.container,
-		className: classes.container,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
 			style: styles.content,
+			className: classes.content,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					style: styles.wrapper,
@@ -512,84 +718,119 @@ const DateTimeInput = (props) => {
 						name: "general-calendar",
 						color: "var(--px-text-disabled)"
 					}), /* @__PURE__ */ jsx("input", {
-						size: 1,
-						value: date,
 						style: styles.input,
 						className: classes.input,
-						onBlur: () => emitChange(),
+						value: datetimeValue.date,
 						placeholder: props.dateFormat,
+						onBlur: handleBlur,
+						onKeyDown: handleKeyDown,
 						onChange: (e) => handleDateTimeChange({ date: e.target.value })
 					})]
 				}),
 				/* @__PURE__ */ jsx("hr", { style: styles.divider }),
 				/* @__PURE__ */ jsxs("div", {
 					style: styles.wrapper,
-					children: [/* @__PURE__ */ jsx(Icon, {
-						size: "sm",
-						name: "general-clock",
-						color: "var(--px-text-disabled)"
-					}), /* @__PURE__ */ jsx("input", {
-						size: 1,
-						value: time,
-						placeholder: "12:00",
-						style: styles.input,
-						className: classes.input,
-						onBlur: () => emitChange(),
-						onChange: (e) => handleDateTimeChange({ time: e.target.value }),
-						onFocus: () => emitChange()
-					})]
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							size: "sm",
+							name: "general-clock",
+							color: "var(--px-text-disabled)"
+						}),
+						/* @__PURE__ */ jsx("input", {
+							placeholder: "12:00",
+							style: styles.input,
+							className: classes.input,
+							value: datetimeValue.time,
+							onBlur: handleBlur,
+							onKeyDown: handleKeyDown,
+							onChange: (e) => handleDateTimeChange({ time: e.target.value })
+						}),
+						props.timeFormat === "12h" ? /* @__PURE__ */ jsx(PeriodSwitch, {
+							layoutId: props.layoutId,
+							currentValue: datetimeValue.period,
+							onBlur: handleBlur,
+							onChange: (value) => handleDateTimeChange({ period: value })
+						}) : null
+					]
 				})
 			]
-		})
+		}), errorMessage ? /* @__PURE__ */ jsx(ErrorMessage, { message: errorMessage }) : null]
 	});
 };
 
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/hooks/useDateTimeControl/index.ts
+function useDateTimeControl({ value, onChange }) {
+	function handleDateTimeChange(changes) {
+		const draft = {
+			start: changes.start ?? value?.start,
+			end: changes.end ?? value?.end
+		};
+		if (!draft.start) return;
+		const newValues = {
+			start: draft.start,
+			end: draft.end
+		};
+		if (newValues.end) {
+			if (isAfter(newValues.start, newValues.end)) {
+				const tempStart = newValues.start;
+				newValues.start = newValues.end;
+				newValues.end = tempStart;
+			}
+		}
+		onChange(newValues);
+	}
+	return { handleDateTimeChange };
+}
+
 //#endregion
 //#region src/components/commons/toolkit/Calendar/components/DateTimeControl/styles.ts
 function createDateTimeControlStyles(_props) {
 	return styled({ container: {
 		width: "100%",
 		display: "flex",
-		flexDirection: "column",
+		alignItems: _props.viewMode === "double" ? "center" : void 0,
+		flexDirection: _props.viewMode === "single" ? "column" : "row",
 		gap: "0.5rem"
 	} });
 }
 
 //#endregion
 //#region src/components/commons/toolkit/Calendar/components/DateTimeControl/index.tsx
-const DateTimeControl = (props) => {
-	const { styles } = useThemedStyles(props, createDateTimeControlStyles, {
-		applyCommonProps: true,
-		pick: (p) => [p.value, p.selectionMode]
-	});
-	function handleStartDateChange(date) {
-		const { value, onChange } = props;
-		onChange({
-			...value,
-			start: date
-		});
-	}
-	function handleEndDateChange(date) {
-		const { value, onChange } = props;
-		if (!value?.start) return;
-		onChange({
-			...value,
-			end: date
-		});
-	}
+const DateTimeControl = ({ viewMode = DEFAULT_VIEW_MODE, ...props }) => {
+	const resolvedProps = {
+		viewMode,
+		...props
+	};
+	const { styles } = useThemedStyles(resolvedProps, createDateTimeControlStyles, { applyCommonProps: true });
+	const { handleDateTimeChange } = useDateTimeControl(resolvedProps);
 	return /* @__PURE__ */ jsxs("div", {
 		style: styles.container,
-		children: [/* @__PURE__ */ jsx(DateTimeInput, {
-			dateFormat: props.dateFormat,
-			timeFormat: props.timeFormat,
-			value: props.value?.start ?? "",
-			onChange: handleStartDateChange
-		}), props.selectionMode === "range" ? /* @__PURE__ */ jsx(DateTimeInput, {
-			value: props?.value?.end,
-			timeFormat: props.timeFormat,
-			dateFormat: props.dateFormat,
-			onChange: handleEndDateChange
-		}) : null]
+		children: [
+			/* @__PURE__ */ jsx(DateTimeInput, {
+				layoutId: "start-date",
+				dateFormat: resolvedProps.dateFormat,
+				timeFormat: resolvedProps.timeFormat,
+				value: resolvedProps.value?.start ?? "",
+				disablePastDates: resolvedProps.disablePastDates,
+				disableFutureDates: resolvedProps.disableFutureDates,
+				onChange: (start) => handleDateTimeChange({ start })
+			}),
+			resolvedProps.viewMode === "double" && resolvedProps.selectionMode === "range" ? /* @__PURE__ */ jsx(Icon, {
+				name: "arrows-right",
+				size: "sm",
+				color: "var(--px-text-secondary)"
+			}) : null,
+			resolvedProps.selectionMode === "range" ? /* @__PURE__ */ jsx(DateTimeInput, {
+				layoutId: "end-date",
+				value: resolvedProps?.value?.end,
+				timeFormat: resolvedProps.timeFormat,
+				dateFormat: resolvedProps.dateFormat,
+				disablePastDates: resolvedProps.disablePastDates,
+				disableFutureDates: resolvedProps.disableFutureDates,
+				onChange: (end) => handleDateTimeChange({ end })
+			}) : null
+		]
 	});
 };
 
@@ -638,10 +879,20 @@ function useCalendar(initialDate = /* @__PURE__ */ new Date()) {
 
 //#endregion
 //#region src/components/commons/toolkit/Calendar/styles.ts
-function createCalendarStyles(props) {
+function createCalendarStyles() {
 	return styled({
 		container: {
 			display: "flex",
+			flexDirection: "column"
+		},
+		dateTimeControlContent: {
+			display: "flex",
+			padding: "0.75rem 1rem",
+			paddingBottom: "0"
+		},
+		monthsContainer: {
+			display: "flex",
+			flexDirection: "row",
 			alignItems: "center"
 		},
 		monthContainer: {
@@ -649,18 +900,13 @@ function createCalendarStyles(props) {
 			flexDirection: "column",
 			gap: "0.75rem",
 			padding: "0.75rem 1rem"
-		},
-		timeContainer: {
-			display: "flex",
-			flexDirection: "column",
-			gap: "0.5rem"
 		}
 	});
 }
 
 //#endregion
 //#region src/components/commons/toolkit/Calendar/index.tsx
-const Calendar = ({ viewMode = "double", dateFormat = "dd/MM/yyyy", timeFormat = "24h", ...props }) => {
+const Calendar = ({ viewMode = DEFAULT_VIEW_MODE, dateFormat = DEFAULT_DATE_FORMAT, timeFormat = DEFAULT_TIME_FORMAT, ...props }) => {
 	const resolvedProps = {
 		timeFormat,
 		dateFormat,
@@ -669,10 +915,7 @@ const Calendar = ({ viewMode = "double", dateFormat = "dd/MM/yyyy", timeFormat =
 	};
 	const mainCalendar = useCalendar();
 	const secondaryCalendar = useCalendar(addMonths(mainCalendar.currentDate, 1));
-	const { styles } = useThemedStyles(resolvedProps, createCalendarStyles, {
-		applyCommonProps: true,
-		pick: (p) => [p.viewMode]
-	});
+	const { styles } = useThemedStyles(resolvedProps, createCalendarStyles, { applyCommonProps: true });
 	useEffect(() => {
 		secondaryCalendar.setCurrentDate(addMonths(mainCalendar.currentDate, 1));
 	}, [mainCalendar.currentDate]);
@@ -697,48 +940,67 @@ const Calendar = ({ viewMode = "double", dateFormat = "dd/MM/yyyy", timeFormat =
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		style: styles.container,
-		children: [/* @__PURE__ */ jsxs("div", {
-			style: styles.monthContainer,
-			children: [
-				/* @__PURE__ */ jsx(CalendarHeader, {
+		children: [resolvedProps.isDateTimePicker ? /* @__PURE__ */ jsx("div", {
+			style: styles.dateTimeControlContent,
+			children: /* @__PURE__ */ jsx(DateTimeControl, { ...resolvedProps })
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			style: styles.monthsContainer,
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: styles.monthContainer,
+				children: [/* @__PURE__ */ jsx(CalendarHeader, {
 					position: "left",
 					currentDate: mainCalendar.currentDate,
 					isDualView: resolvedProps.viewMode === "double",
 					disablePastDates: resolvedProps.disablePastDates,
+					disableFutureDates: resolvedProps.disableFutureDates,
 					onNavAction: mainCalendar.handleNavAction
-				}),
-				resolvedProps.isDateTimePicker ? /* @__PURE__ */ jsx(DateTimeControl, {
-					value: resolvedProps.value,
-					dateFormat: resolvedProps.dateFormat,
-					timeFormat: resolvedProps.timeFormat,
-					selectionMode: resolvedProps.selectionMode,
-					onChange: resolvedProps.onChange
-				}) : null,
-				/* @__PURE__ */ jsx(CalendarMonth, {
+				}), /* @__PURE__ */ jsx(CalendarMonth, {
 					days: mainCalendar.days,
 					selection: resolvedProps.value,
 					disablePastDates: resolvedProps.disablePastDates,
+					disableFutureDates: resolvedProps.disableFutureDates,
 					onDayClick: handleSelect
-				})
-			]
-		}), resolvedProps.viewMode === "double" ? /* @__PURE__ */ jsxs("div", {
-			style: styles.monthContainer,
-			children: [/* @__PURE__ */ jsx(CalendarHeader, {
-				isDualView: true,
-				position: "right",
-				currentDate: secondaryCalendar.currentDate,
-				disablePastDates: resolvedProps.disablePastDates,
-				onNavAction: mainCalendar.handleNavAction
-			}), /* @__PURE__ */ jsx(CalendarMonth, {
-				selection: resolvedProps.value,
-				days: secondaryCalendar.days,
-				disablePastDates: resolvedProps.disablePastDates,
-				onDayClick: handleSelect
-			})]
-		}) : null]
+				})]
+			}), resolvedProps.viewMode === "double" ? /* @__PURE__ */ jsxs("div", {
+				style: styles.monthContainer,
+				children: [/* @__PURE__ */ jsx(CalendarHeader, {
+					isDualView: true,
+					position: "right",
+					currentDate: secondaryCalendar.currentDate,
+					disablePastDates: resolvedProps.disablePastDates,
+					disableFutureDates: resolvedProps.disableFutureDates,
+					onNavAction: mainCalendar.handleNavAction
+				}), /* @__PURE__ */ jsx(CalendarMonth, {
+					days: secondaryCalendar.days,
+					selection: resolvedProps.value,
+					disablePastDates: resolvedProps.disablePastDates,
+					disableFutureDates: resolvedProps.disableFutureDates,
+					onDayClick: handleSelect
+				})]
+			}) : null]
+		})]
 	});
 };
 
+//#endregion
+//#region src/components/commons/inputs/DatePicker/components/DatePickerTrigger/utils.ts
+function hasTimeTokens(formatStr) {
+	return /(H{1,2}|h{1,2}|m{1,2}|a)/.test(formatStr);
+}
+function normalizeTimeFormat(formatStr, timeFormat) {
+	if (timeFormat === "24h") return formatStr.replace(/h{1,2}/g, (match) => match.length === 2 ? "HH" : "H").replace(/\s*a/g, "");
+	return formatStr.replace(/H{1,2}/g, (match) => match.length === 2 ? "hh" : "h");
+}
+function getDefaultTimeFormat(timeFormat) {
+	return timeFormat === "24h" ? "HH:mm" : "hh:mm a";
+}
+function buildDisplayFormat({ displayDateFormat, isDateTimePicker, timeFormat }) {
+	const formatHasTime = hasTimeTokens(displayDateFormat);
+	if (!isDateTimePicker) return formatHasTime ? displayDateFormat.replace(/\s*(H{1,2}|h{1,2}|m{1,2}|a|:)+/g, "") : displayDateFormat;
+	if (formatHasTime) return normalizeTimeFormat(displayDateFormat, timeFormat);
+	return `${displayDateFormat} ${getDefaultTimeFormat(timeFormat)}`;
+}
+
 //#endregion
 //#region src/components/commons/inputs/DatePicker/components/DatePickerTrigger/styles.ts
 function createDatePickerTriggerStyles(props) {
@@ -781,7 +1043,7 @@ function createDatePickerTriggerStyles(props) {
 
 //#endregion
 //#region src/components/commons/inputs/DatePicker/components/DatePickerTrigger/index.tsx
-const DatePickerTrigger = forwardRef(function DatePickerTrigger$1({ dateFormat = "dd/MM/yyyy", ...props }, ref) {
+const DatePickerTrigger = forwardRef(function DatePickerTrigger$1({ timeFormat = DEFAULT_TIME_FORMAT, displayDateFormat = DEFAULT_DISPLAY_DATE_FORMAT, ...props }, ref) {
 	const inputId = useId();
 	const { styles, classes } = useThemedStyles(props, createDatePickerTriggerStyles, {
 		pick: (p) => [p.disabled, p.errorMessage],
@@ -793,8 +1055,13 @@ const DatePickerTrigger = forwardRef(function DatePickerTrigger$1({ dateFormat =
 	function renderDate() {
 		if (!hasValue) return placeholder ?? "Selecione uma data";
 		const { start, end } = value;
-		const startDate = format(start, dateFormat);
-		const endDate = end ? format(end, dateFormat) : "";
+		const finalFormat = buildDisplayFormat({
+			timeFormat,
+			displayDateFormat,
+			isDateTimePicker: !!props.isDateTimePicker
+		});
+		const startDate = format(start, finalFormat, { locale: ptBR });
+		const endDate = end ? format(end, finalFormat, { locale: ptBR }) : "";
 		return `${startDate}${endDate ? ` - ${endDate}` : ""}`;
 	}
 	return /* @__PURE__ */ jsxs("div", {
@@ -886,7 +1153,7 @@ function createDatePickerStyles(props) {
 			alignItems: "center",
 			justifyContent: props.viewMode === "single" ? "center" : "flex-end",
 			gap: "0.75rem",
-			padding: "0.5rem"
+			padding: "0.5rem 1rem"
 		}
 	});
 }
@@ -900,13 +1167,6 @@ var types_exports = {};
 const DatePicker = (props) => {
 	const { isOpen, selectedDate, toggleDialog, handleDateChange, handleConfirmClick } = useDatePicker(props);
 	const { styles } = useThemedStyles(props, createDatePickerStyles, {
-		pick: (p) => [
-			p.value,
-			p.disabled,
-			p.viewMode,
-			p.errorMessage,
-			p.disablePastDates
-		],
 		applyCommonProps: true,
 		commonSlot: "container"
 	});
@@ -935,10 +1195,8 @@ const DatePicker = (props) => {
 			},
 			children: [
 				/* @__PURE__ */ jsx(Calendar, {
+					...props,
 					value: selectedDate,
-					viewMode: props.viewMode ?? "double",
-					isDateTimePicker: props.isDateTimePicker,
-					disablePastDates: props.disablePastDates,
 					selectionMode: props.selectionMode ?? "range",
 					onChange: handleDateChange
 				}),
@@ -967,4 +1225,4 @@ const DatePicker = (props) => {
 
 //#endregion
 export { types_exports as n, DatePicker as t };
-//# sourceMappingURL=DatePicker-Cj2Y6_7E.js.map
+//# sourceMappingURL=DatePicker-CqDALumP.js.map