softable-pixels-web 1.2.7 → 1.2.9

package/dist/DatePicker-DyhE04Wg.js

@@ -0,0 +1,863 @@
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-B1E0m8Ih.js";
+import { t as Icon } from "./Icon-Ded27Khw.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 Button } from "./Button-CxAl6MNt.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, parseISO, startOfDay, startOfMonth, startOfWeek, startOfYear } from "date-fns";
+import { ptBR } from "date-fns/locale";
+
+//#region src/utils/functions/capitalize.ts
+function capitalize(text) {
+	if (!text) return "";
+	return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/CalendarMonth/components/CalendarDay/utils.ts
+function getDayMetadata(params) {
+	const { day, currentMonth, selection, disablePastDates } = params;
+	const isPastDate = isBefore(day, startOfDay(/* @__PURE__ */ new Date()));
+	const isDisabled = !isSameMonth(day, currentMonth) || disablePastDates && isPastDate || false;
+	if (!selection) return {
+		ariaLabel: getAriaLabel(day, {
+			isDisabled,
+			isBetween: false,
+			isSelected: false
+		}),
+		isDisabled,
+		isSelected: false,
+		isBetween: false,
+		isRangeEnd: false,
+		isRangeStart: false
+	};
+	const { start, end } = selection;
+	const isRangeStart = start ? isSameDay(day, start) : false;
+	const isRangeEnd = end ? isSameDay(day, end) : false;
+	const isBetween = start && end ? isWithinInterval(startOfDay(day), {
+		start: startOfDay(start),
+		end: startOfDay(end)
+	}) : false;
+	const isSelected = isRangeStart || isRangeEnd;
+	return {
+		ariaLabel: getAriaLabel(day, {
+			isSelected,
+			isBetween,
+			isDisabled
+		}),
+		isBetween,
+		isDisabled,
+		isSelected,
+		isRangeEnd,
+		isRangeStart
+	};
+}
+function getAriaLabel(day, options) {
+	const { isSelected, isBetween, isDisabled } = options;
+	const baseLabel = format(day, "d 'de' MMMM 'de' yyyy", { locale: ptBR });
+	if (isSelected) return `${baseLabel}, selecionado`;
+	if (isBetween) return `${baseLabel}, dentro do intervalo`;
+	if (isDisabled) return `${baseLabel}, indisponível`;
+	return baseLabel;
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/CalendarMonth/components/CalendarDay/styles.ts
+function createCalendarDayStyles(params) {
+	return styled({
+		container: {
+			width: "100%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			backgroundColor: getContainerBackgroundColor(params),
+			borderTopLeftRadius: getContainerBorderLeft(params),
+			borderBottomLeftRadius: getContainerBorderLeft(params),
+			borderTopRightRadius: getContainerBorderRight(params),
+			borderBottomRightRadius: getContainerBorderRight(params)
+		},
+		button: {
+			display: "flex",
+			width: "2.2rem",
+			height: "2.2rem",
+			alignItems: "center",
+			justifyContent: "center",
+			backgroundColor: getButtonBackgroundColor(params),
+			borderRadius: getButtonBorderRadius(params),
+			transition: "all 200ms ease-in-out",
+			cursor: params.isDisabled ? "not-allowed" : "pointer",
+			opacity: params.isDisabled ? .5 : 1,
+			__rules: {
+				"&:hover": { opacity: "0.85" },
+				"&:disabled": {
+					opacity: "0.5",
+					cursor: "not-allowed"
+				}
+			}
+		}
+	});
+}
+function getContainerBackgroundColor({ isBetween }) {
+	if (isBetween) return "rgba(14, 178, 76, 0.1)";
+	return "transparent";
+}
+function getContainerBorderLeft({ isRangeStart }) {
+	return isRangeStart ? "50%" : "0";
+}
+function getContainerBorderRight({ isRangeEnd }) {
+	return isRangeEnd ? "50%" : "0";
+}
+function getButtonBackgroundColor({ isSelected, isRangeStart, isRangeEnd }) {
+	if (isSelected || isRangeStart || isRangeEnd) return "var(--px-btn-filled-bg)";
+	return "transparent";
+}
+function getButtonBorderRadius({ isBetween, isRangeStart, isRangeEnd }) {
+	if (isBetween && !isRangeStart && !isRangeEnd) return "0";
+	return "50%";
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/CalendarMonth/components/CalendarDay/index.tsx
+const CalendarDay = (props) => {
+	const { day, currentMonth, selection, disablePastDates, onClick } = props;
+	const dayConfig = useMemo(() => getDayMetadata({
+		day,
+		selection,
+		currentMonth,
+		disablePastDates
+	}), [
+		day,
+		selection,
+		currentMonth,
+		disablePastDates
+	]);
+	const { styles, classes } = useThemedStyles({
+		...props,
+		...dayConfig
+	}, createCalendarDayStyles, { applyCommonProps: true });
+	function handleClick() {
+		onClick(day);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		style: styles.container,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			style: styles.button,
+			className: classes.button,
+			disabled: dayConfig.isDisabled,
+			"aria-label": dayConfig.ariaLabel,
+			onClick: handleClick,
+			children: /* @__PURE__ */ jsx(Typography, {
+				variant: "b2",
+				color: dayConfig.isSelected ? "white" : "var(--px-text-secondary)",
+				fontWeight: dayConfig.isSelected || dayConfig.isBetween ? "medium" : "regular",
+				children: day.getDate()
+			})
+		})
+	});
+};
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/CalendarMonth/constants.ts
+const WEEK_DAYS = [
+	{
+		short: "D",
+		full: "Domingo"
+	},
+	{
+		short: "S",
+		full: "Segunda"
+	},
+	{
+		short: "T",
+		full: "Terça"
+	},
+	{
+		short: "Q",
+		full: "Quarta"
+	},
+	{
+		short: "Q",
+		full: "Quinta"
+	},
+	{
+		short: "S",
+		full: "Sexta"
+	},
+	{
+		short: "S",
+		full: "Sábado"
+	}
+];
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/CalendarMonth/index.tsx
+const CalendarMonth = (props) => {
+	const currentMonth = props.days.length ? props.days[Math.floor(props.days.length / 2)] : /* @__PURE__ */ new Date();
+	function renderWeekDays() {
+		return WEEK_DAYS.map((day) => /* @__PURE__ */ jsx("div", {
+			className: "w-10 h-10 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(Typography, {
+				variant: "b2",
+				className: "text-tx-primary",
+				children: day.short
+			})
+		}, day.full));
+	}
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+		className: "grid [grid-template-columns:repeat(7,_2.5rem)]",
+		children: renderWeekDays()
+	}), /* @__PURE__ */ jsx("div", {
+		className: "grid [grid-template-columns:repeat(7,_2.5rem)] gap-y-1",
+		children: props.days.map((day) => /* @__PURE__ */ jsx(CalendarDay, {
+			day,
+			selection: props.selection,
+			currentMonth,
+			disablePastDates: props.disablePastDates,
+			onClick: props.onDayClick
+		}, day.toISOString()))
+	})] });
+};
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/CalendarHeader/components/NavButton/styles.ts
+function createNavButtonStyles(_props) {
+	return styled({ container: {
+		display: "flex",
+		cursor: "pointer",
+		padding: "0.125rem",
+		borderRadius: "50%",
+		transition: "background-color 0.2s ease-out",
+		rotate: _props.next ? "180deg" : "0deg",
+		__rules: { "&:hover": { backgroundColor: "var(--color-gray-50)" } }
+	} });
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/CalendarHeader/components/NavButton/index.tsx
+const NavButton = ({ visible = true, ...props }) => {
+	const { styles, classes } = useThemedStyles({
+		visible,
+		...props
+	}, createNavButtonStyles, {
+		applyCommonProps: true,
+		pick: (p) => [p.next, p.visible]
+	});
+	if (!visible) return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		style: styles.container,
+		className: classes.container,
+		onClick: props.onClick,
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: props.icon,
+			color: "var(--color-gray-400)"
+		})
+	});
+};
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/CalendarHeader/utils.ts
+function getNavMetadata(params) {
+	const { currentDate, isDualView, position, disablePastDates } = params;
+	const today = /* @__PURE__ */ new Date();
+	const hasPrevMonthAvailable = !disablePastDates || isBefore(startOfMonth(today), startOfMonth(currentDate));
+	const hasPrevYearAvailable = !disablePastDates || isBefore(startOfYear(today), startOfYear(currentDate));
+	return {
+		showPrevButtons: !isDualView ? hasPrevMonthAvailable || hasPrevYearAvailable : position !== "right",
+		showNextButtons: !isDualView ? true : position !== "left",
+		hasPrevYearAvailable,
+		hasPrevMonthAvailable
+	};
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/CalendarHeader/styles.ts
+function createCalendarHeaderStyles(_props) {
+	return styled({
+		container: {
+			width: "100%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			paddingBlock: "0.375rem"
+		},
+		leftButtonsContainer: {
+			display: "flex",
+			alignItems: "center",
+			gap: "0.25rem"
+		},
+		rightButtonsContainer: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "flex-end",
+			gap: "0.25rem"
+		}
+	});
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/CalendarHeader/index.tsx
+const CalendarHeader = (props) => {
+	const { onNavAction, ...rest } = props;
+	const { showPrevButtons, showNextButtons, hasPrevYearAvailable, hasPrevMonthAvailable } = getNavMetadata(rest);
+	const { styles } = useThemedStyles(props, createCalendarHeaderStyles, {
+		applyCommonProps: true,
+		pick: (p) => [
+			p.currentDate,
+			p.isDualView,
+			p.position
+		]
+	});
+	function renderMonthName() {
+		return capitalize(format(rest.currentDate, "MMMM yyyy", { locale: ptBR }));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [
+			showPrevButtons ? /* @__PURE__ */ jsxs("div", {
+				style: styles.leftButtonsContainer,
+				children: [/* @__PURE__ */ jsx(NavButton, {
+					icon: "chevrons-left",
+					visible: hasPrevMonthAvailable,
+					onClick: () => onNavAction("prev-month")
+				}), /* @__PURE__ */ jsx(NavButton, {
+					icon: "chevrons-double-left",
+					visible: hasPrevYearAvailable,
+					onClick: () => onNavAction("prev-year")
+				})]
+			}) : /* @__PURE__ */ jsx("div", {}),
+			/* @__PURE__ */ jsx(Typography, {
+				variant: "b2",
+				align: "center",
+				fontWeight: "semibold",
+				children: renderMonthName()
+			}),
+			showNextButtons ? /* @__PURE__ */ jsxs("div", {
+				style: styles.rightButtonsContainer,
+				children: [/* @__PURE__ */ jsx(NavButton, {
+					next: true,
+					icon: "chevrons-double-left",
+					onClick: () => onNavAction("next-year")
+				}), /* @__PURE__ */ jsx(NavButton, {
+					next: true,
+					icon: "chevrons-left",
+					onClick: () => onNavAction("next-month")
+				})]
+			}) : /* @__PURE__ */ jsx("div", {})
+		]
+	});
+};
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/styles.ts
+function createDateTimeInputStyles(_props) {
+	return styled({
+		container: {
+			width: "100%",
+			height: "2.5rem",
+			display: "flex",
+			alignItems: "center",
+			borderWidth: 1,
+			borderStyle: "solid",
+			borderRadius: "0.5rem",
+			padding: "0.625rem 0.875rem",
+			boxShadow: "var(--px-shadow-default)",
+			borderColor: "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,
+			minWidth: 0,
+			display: "flex",
+			alignItems: "center",
+			gap: "0.5rem"
+		},
+		divider: {
+			border: 0,
+			width: "1px",
+			height: "1rem",
+			marginInline: "0.5rem",
+			backgroundColor: "var(--px-border-primary)"
+		},
+		input: {
+			flex: 1,
+			width: "100%",
+			minWidth: 0,
+			fontWeight: 500,
+			fontSize: "1rem",
+			lineHeight: "1.5rem",
+			fontFamily: "inherit",
+			color: "var(--px-text-primary)",
+			backgroundColor: "transparent",
+			border: "none",
+			padding: 0,
+			__rules: {
+				"&:disabled": { cursor: "not-allowed" },
+				"&:focus": { outline: "none" },
+				"&::placeholder": {
+					fontWeight: 400,
+					color: "var(--px-text-secondary)"
+				}
+			}
+		}
+	});
+}
+
+//#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]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		style: styles.container,
+		className: classes.container,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: styles.content,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: styles.wrapper,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						size: "sm",
+						name: "general-calendar",
+						color: "var(--px-text-disabled)"
+					}), /* @__PURE__ */ jsx("input", {
+						size: 1,
+						style: styles.input,
+						className: classes.input
+					})]
+				}),
+				/* @__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,
+						style: styles.input,
+						className: classes.input
+					})]
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/styles.ts
+function createDateTimeControlStyles(_props) {
+	return styled({ container: {
+		width: "100%",
+		display: "flex",
+		flexDirection: "column",
+		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
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [/* @__PURE__ */ jsx(DateTimeInput, {
+			value: props.value?.start ?? "",
+			onChange: handleStartDateChange
+		}), props.selectionMode === "range" ? /* @__PURE__ */ jsx(DateTimeInput, {
+			value: props?.value?.end,
+			onChange: handleEndDateChange
+		}) : null]
+	});
+};
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/hooks/useCalendar.ts
+function useCalendar(initialDate = /* @__PURE__ */ new Date()) {
+	const [currentDate, setCurrentDate] = useState(initialDate);
+	const days = useMemo(() => {
+		const start = startOfWeek(startOfMonth(currentDate), { weekStartsOn: 0 });
+		const end = endOfWeek(endOfMonth(currentDate), { weekStartsOn: 0 });
+		let days$1 = eachDayOfInterval({
+			start,
+			end
+		});
+		if (days$1.length < 42) {
+			const diff = 42 - days$1.length;
+			const last = end;
+			const extraDays = Array.from({ length: diff }, (_, i) => addDays(last, i + 1));
+			days$1 = [...days$1, ...extraDays];
+		}
+		return days$1;
+	}, [currentDate]);
+	function handleNavAction(action) {
+		switch (action) {
+			case "next-month":
+				setCurrentDate((prev) => addMonths(prev, 1));
+				break;
+			case "prev-month":
+				setCurrentDate((prev) => addMonths(prev, -1));
+				break;
+			case "next-year":
+				setCurrentDate((prev) => addYears(prev, 1));
+				break;
+			case "prev-year":
+				setCurrentDate((prev) => addYears(prev, -1));
+				break;
+		}
+	}
+	return {
+		currentDate,
+		days,
+		handleNavAction,
+		setCurrentDate
+	};
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/styles.ts
+function createCalendarStyles(props) {
+	return styled({
+		container: {
+			display: "flex",
+			alignItems: "center"
+		},
+		monthContainer: {
+			display: "flex",
+			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 = (props) => {
+	const mainCalendar = useCalendar();
+	const secondaryCalendar = useCalendar(addMonths(mainCalendar.currentDate, 1));
+	const { styles } = useThemedStyles(props, createCalendarStyles, {
+		applyCommonProps: true,
+		pick: (p) => [p.viewMode]
+	});
+	useEffect(() => {
+		secondaryCalendar.setCurrentDate(addMonths(mainCalendar.currentDate, 1));
+	}, [mainCalendar.currentDate]);
+	function handleSelect(day) {
+		const { value, selectionMode, onChange } = props;
+		if (selectionMode === "single") onChange({ start: day.toISOString() });
+		else {
+			const start = value?.start ? parseISO(value.start) : null;
+			const end = value?.end ? parseISO(value.end) : null;
+			if (!start || start && end) onChange({
+				start: day.toISOString(),
+				end: void 0
+			});
+			else if (start && !end) {
+				const [from, to] = isAfter(day, start) || isSameDay(day, start) ? [start, day] : [day, start];
+				onChange({
+					start: from.toISOString(),
+					end: to.toISOString()
+				});
+			}
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: styles.monthContainer,
+			children: [
+				/* @__PURE__ */ jsx(CalendarHeader, {
+					position: "left",
+					currentDate: mainCalendar.currentDate,
+					isDualView: props.viewMode === "double",
+					disablePastDates: props.disablePastDates,
+					onNavAction: mainCalendar.handleNavAction
+				}),
+				props.isDateTimePicker ? /* @__PURE__ */ jsx(DateTimeControl, {
+					value: props.value,
+					selectionMode: props.selectionMode,
+					onChange: props.onChange
+				}) : null,
+				/* @__PURE__ */ jsx(CalendarMonth, {
+					selection: props.value,
+					days: mainCalendar.days,
+					disablePastDates: props.disablePastDates,
+					onDayClick: handleSelect
+				})
+			]
+		}), props.viewMode === "double" ? /* @__PURE__ */ jsxs("div", {
+			style: styles.monthContainer,
+			children: [/* @__PURE__ */ jsx(CalendarHeader, {
+				isDualView: true,
+				position: "right",
+				currentDate: secondaryCalendar.currentDate,
+				disablePastDates: props.disablePastDates,
+				onNavAction: mainCalendar.handleNavAction
+			}), /* @__PURE__ */ jsx(CalendarMonth, {
+				selection: props.value,
+				days: secondaryCalendar.days,
+				disablePastDates: props.disablePastDates,
+				onDayClick: handleSelect
+			})]
+		}) : null]
+	});
+};
+
+//#endregion
+//#region src/components/commons/inputs/DatePicker/components/DatePickerTrigger/styles.ts
+function createDatePickerTriggerStyles(props) {
+	return styled({
+		container: {
+			width: "100%",
+			display: "flex",
+			flexDirection: "column",
+			gap: "0.5rem",
+			opacity: props.disabled ? .5 : 1,
+			cursor: props.disabled ? "not-allowed" : "pointer"
+		},
+		button: {
+			width: "100%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: "0.5rem",
+			borderRadius: "0.5rem",
+			padding: "0.625rem 0.875rem",
+			border: props.errorMessage ? "1px solid var(--px-color-error)" : "1px solid var(--px-border-primary)",
+			__rules: {
+				"&:hover": {
+					boxShadow: "var(--px-shadow-default)",
+					borderColor: "var(--px-color-primary)"
+				},
+				"&:focus-within": {
+					outlineOffset: "-1px",
+					outline: props.errorMessage ? "2px solid var(--px-color-error)" : `2px solid var(--px-color-primary)`
+				}
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/components/commons/inputs/DatePicker/components/DatePickerTrigger/index.tsx
+const DatePickerTrigger = forwardRef(function DatePickerTrigger$1({ dateFormat = "dd/MM/yyyy", ...props }, ref) {
+	const inputId = useId();
+	const { styles, classes } = useThemedStyles(props, createDatePickerTriggerStyles, {
+		pick: (p) => [p.disabled, p.errorMessage],
+		applyCommonProps: true,
+		commonSlot: "container"
+	});
+	const { label, value, disabled, required, placeholder, onClick } = props;
+	const hasValue = !!value?.start;
+	function renderDate() {
+		if (!hasValue) return placeholder ?? "Selecione uma data";
+		const { start, end } = value;
+		const startDate = format(start, dateFormat);
+		const endDate = end ? format(end, dateFormat) : "";
+		return `${startDate}${endDate ? ` - ${endDate}` : ""}`;
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				label,
+				htmlFor: inputId,
+				required,
+				requiredColor: "var(--color-error)"
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				ref,
+				type: "button",
+				disabled,
+				style: styles.button,
+				"aria-labelledby": inputId,
+				"aria-expanded": props.ariaExpanded,
+				className: classes.button,
+				onClick,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						size: "sm",
+						name: "general-calendar",
+						color: "var(--px-text-primary)"
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "b1",
+						className: "font-normal",
+						children: renderDate()
+					})]
+				}), /* @__PURE__ */ jsx(Icon, {
+					size: "sm",
+					color: "var(--px-text-primary)",
+					name: props.ariaExpanded ? "chevrons-up" : "chevrons-down"
+				})]
+			}),
+			props.errorMessage ? /* @__PURE__ */ jsx(Typography, {
+				variant: "b2",
+				fontSize: "0.75rem",
+				fontWeight: "regular",
+				color: "var(--px-color-error)",
+				children: props.errorMessage
+			}) : null
+		]
+	});
+});
+
+//#endregion
+//#region src/components/commons/inputs/DatePicker/hooks/useDatePicker.ts
+function useDatePicker(params) {
+	const [isOpen, setOpen] = useState(false);
+	const [selectedDate, setSelectedDate] = useState();
+	function toggleDialog(status) {
+		if (status) setSelectedDate(params.value);
+		setOpen(status);
+	}
+	function handleDateChange(value) {
+		setSelectedDate(value);
+	}
+	function handleConfirmClick() {
+		if (!selectedDate) return;
+		setOpen(false);
+		params.onChange(selectedDate);
+	}
+	return {
+		isOpen,
+		selectedDate,
+		toggleDialog,
+		handleDateChange,
+		handleConfirmClick
+	};
+}
+
+//#endregion
+//#region src/components/commons/inputs/DatePicker/styles.ts
+function createDatePickerStyles(props) {
+	return styled({
+		container: { width: "100%" },
+		divider: {
+			border: 0,
+			display: "flex",
+			marginBlock: "0.1rem",
+			borderTop: "1px solid var(--px-border-primary)"
+		},
+		buttonsContainer: {
+			width: "100%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: props.viewMode === "single" ? "center" : "flex-end",
+			gap: "0.75rem",
+			padding: "0.5rem"
+		}
+	});
+}
+
+//#endregion
+//#region src/components/commons/inputs/DatePicker/index.tsx
+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"
+	});
+	const isSingleMode = props.viewMode === "single";
+	function renderTrigger({ ref, ariaExpanded, onClick }) {
+		return /* @__PURE__ */ jsx(DatePickerTrigger, {
+			...props,
+			ref,
+			ariaExpanded,
+			onClick
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		style: styles.container,
+		children: /* @__PURE__ */ jsxs(BasePopover, {
+			open: isOpen,
+			maxWidth: "fit-content",
+			minWidth: "fit-content",
+			maxHeight: "fit-content",
+			trigger: renderTrigger,
+			onOpenChange: toggleDialog,
+			floatingOptions: {
+				strategy: "fixed",
+				placement: "bottom-start",
+				scrollContainerId: props.scrollContainerId
+			},
+			children: [
+				/* @__PURE__ */ jsx(Calendar, {
+					value: selectedDate,
+					viewMode: props.viewMode ?? "double",
+					isDateTimePicker: props.isDateTimePicker,
+					disablePastDates: props.disablePastDates,
+					selectionMode: props.selectionMode ?? "range",
+					onChange: handleDateChange
+				}),
+				isSingleMode ? /* @__PURE__ */ jsx("hr", { style: styles.divider }) : null,
+				/* @__PURE__ */ jsxs("div", {
+					style: styles.buttonsContainer,
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						type: "button",
+						label: "Cancelar",
+						variant: "outlined",
+						fullWidth: isSingleMode,
+						onClick: () => toggleDialog(false)
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						label: "Aplicar",
+						variant: "filled",
+						fullWidth: isSingleMode,
+						onClick: handleConfirmClick
+					})]
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+export { DatePicker as t };
+//# sourceMappingURL=DatePicker-DyhE04Wg.js.map