@datum-cloud/datum-ui 0.2.1 → 0.3.0-alpha.3670fb2

package/dist/calendar-date-picker-mlbzp3xR.mjs

@@ -0,0 +1,665 @@
+import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { t as Button } from "./button-AzpnV-WB.mjs";
+import { t as Calendar$1 } from "./calendar-DlIHeWb0.mjs";
+import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-Ds9624qY.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-CwVIFWFO.mjs";
+import { cva } from "class-variance-authority";
+import { CalendarIcon, X } from "lucide-react";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { endOfDay, endOfMonth, endOfWeek, endOfYear, startOfDay, startOfMonth, startOfWeek, startOfYear, subDays } from "date-fns";
+import { formatInTimeZone, toDate } from "date-fns-tz";
+
+//#region src/components/features/calendar-date-picker/calendar-date-picker.tsx
+const months = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+const multiSelectVariants = cva("flex font-normal shadow-none items-center justify-center whitespace-nowrap rounded-md text-sm text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
+	variants: { variant: {
+		default: "bg-primary text-primary-foreground hover:bg-primary/90",
+		destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+		outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+		secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+		ghost: "hover:bg-accent hover:text-accent-foreground text-background",
+		link: "text-primary underline-offset-4 hover:underline text-background"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function CalendarDatePicker({ ref, id = "calendar-date-picker", className, triggerClassName, date, closeOnSelect = false, numberOfMonths = 2, yearsRange = 10, onDateSelect, variant, placeholder, excludePresets, customPresets, minDate, maxDate, disableFuture = false, disablePast = false, maxRange, popoverClassName, ...props }) {
+	const [isPopoverOpen, setIsPopoverOpen] = React$1.useState(false);
+	const [selectedRange, setSelectedRange] = React$1.useState(numberOfMonths === 2 ? "This Year" : "Today");
+	const [monthFrom, setMonthFrom] = React$1.useState(date?.from);
+	const [yearFrom, setYearFrom] = React$1.useState(date?.from?.getFullYear());
+	const [monthTo, setMonthTo] = React$1.useState(numberOfMonths === 2 ? date?.to : date?.from);
+	const [yearTo, setYearTo] = React$1.useState(numberOfMonths === 2 ? date?.to?.getFullYear() : date?.from?.getFullYear());
+	const [highlightedPart, setHighlightedPart] = React$1.useState(null);
+	const [pendingDate, setPendingDate] = React$1.useState(date);
+	const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+	const today = /* @__PURE__ */ new Date();
+	const effectiveMinDate = React$1.useMemo(() => {
+		let min = minDate;
+		if (disablePast) {
+			const todayStart = startOfDay(today);
+			min = min ? min > todayStart ? min : todayStart : todayStart;
+		}
+		return min;
+	}, [
+		minDate,
+		disablePast,
+		today
+	]);
+	const effectiveMaxDate = React$1.useMemo(() => {
+		let max = maxDate;
+		if (disableFuture) {
+			const todayEnd = endOfDay(today);
+			max = max ? max < todayEnd ? max : todayEnd : todayEnd;
+		}
+		return max;
+	}, [
+		maxDate,
+		disableFuture,
+		today
+	]);
+	const isDateDisabled = React$1.useCallback((date) => {
+		if (effectiveMinDate && date < effectiveMinDate) return true;
+		if (effectiveMaxDate && date > effectiveMaxDate) return true;
+		return false;
+	}, [effectiveMinDate, effectiveMaxDate]);
+	const getDaysDifference = React$1.useCallback((from, to) => {
+		const timeDiff = Math.abs(to.getTime() - from.getTime());
+		return Math.ceil(timeDiff / (1e3 * 60 * 60 * 24));
+	}, []);
+	const isRangeValid = React$1.useCallback((from, to) => {
+		if (!maxRange) return true;
+		if (numberOfMonths === 1) return true;
+		return getDaysDifference(from, to) <= maxRange;
+	}, [
+		maxRange,
+		numberOfMonths,
+		getDaysDifference
+	]);
+	const adjustRangeToMaxRange = React$1.useCallback((from, to) => {
+		if (!maxRange || numberOfMonths === 1) return {
+			from,
+			to
+		};
+		if (getDaysDifference(from, to) <= maxRange) return {
+			from,
+			to
+		};
+		const adjustedTo = new Date(from.getTime() + maxRange * 24 * 60 * 60 * 1e3);
+		if (effectiveMaxDate && adjustedTo > effectiveMaxDate) {
+			const adjustedFrom = /* @__PURE__ */ new Date(to.getTime() - maxRange * 24 * 60 * 60 * 1e3);
+			if (effectiveMinDate && adjustedFrom < effectiveMinDate) return {
+				from,
+				to
+			};
+			return {
+				from: adjustedFrom,
+				to
+			};
+		}
+		return {
+			from,
+			to: adjustedTo
+		};
+	}, [
+		maxRange,
+		numberOfMonths,
+		getDaysDifference,
+		effectiveMinDate,
+		effectiveMaxDate
+	]);
+	React$1.useEffect(() => {
+		setPendingDate(date);
+	}, [date]);
+	const handleClose = () => setIsPopoverOpen(false);
+	const handleTogglePopover = () => setIsPopoverOpen((prev) => !prev);
+	const handleClear = (e) => {
+		e.stopPropagation();
+		onDateSelect(void 0);
+		setPendingDate({
+			from: void 0,
+			to: void 0
+		});
+		setSelectedRange(null);
+	};
+	const handleApply = () => {
+		if (pendingDate?.from) onDateSelect({
+			from: pendingDate.from,
+			to: pendingDate.to || pendingDate.from
+		});
+		setIsPopoverOpen(false);
+	};
+	const handleReset = () => {
+		setPendingDate(date);
+		setMonthFrom(date?.from);
+		setYearFrom(date?.from?.getFullYear());
+		setMonthTo(numberOfMonths === 2 ? date?.to : date?.from);
+		setYearTo(numberOfMonths === 2 ? date?.to?.getFullYear() : date?.from?.getFullYear());
+		setSelectedRange(null);
+	};
+	const selectDateRange = (from, to, range) => {
+		const startDate = startOfDay(toDate(from, { timeZone }));
+		const endDate = numberOfMonths === 2 ? endOfDay(toDate(to, { timeZone })) : startDate;
+		if (isDateDisabled(startDate) || isDateDisabled(endDate)) return;
+		let finalDates = {
+			from: startDate,
+			to: endDate
+		};
+		if (numberOfMonths === 2 && !isRangeValid(startDate, endDate)) {
+			finalDates = adjustRangeToMaxRange(startDate, endDate);
+			if (!isRangeValid(finalDates.from, finalDates.to)) return;
+		}
+		setPendingDate({
+			from: finalDates.from,
+			to: finalDates.to
+		});
+		setSelectedRange(range);
+		setMonthFrom(finalDates.from);
+		setYearFrom(finalDates.from.getFullYear());
+		setMonthTo(finalDates.to);
+		setYearTo(finalDates.to.getFullYear());
+		if (closeOnSelect) {
+			onDateSelect({
+				from: finalDates.from,
+				to: finalDates.to
+			});
+			setIsPopoverOpen(false);
+		}
+	};
+	const handleDateSelect = (range) => {
+		if (range) {
+			let from = startOfDay(toDate(range.from, { timeZone }));
+			let to = range.to ? endOfDay(toDate(range.to, { timeZone })) : from;
+			if (numberOfMonths === 1) if (range.from !== pendingDate?.from) to = from;
+			else from = startOfDay(toDate(range.to, { timeZone }));
+			if (isDateDisabled(from) || isDateDisabled(to)) return;
+			let finalDates = {
+				from,
+				to
+			};
+			if (numberOfMonths === 2 && !isRangeValid(from, to)) {
+				finalDates = adjustRangeToMaxRange(from, to);
+				if (!isRangeValid(finalDates.from, finalDates.to)) return;
+			}
+			setPendingDate({
+				from: finalDates.from,
+				to: finalDates.to
+			});
+			setMonthFrom(finalDates.from);
+			setYearFrom(finalDates.from.getFullYear());
+			setMonthTo(finalDates.to);
+			setYearTo(finalDates.to.getFullYear());
+			if (closeOnSelect) {
+				onDateSelect({
+					from: finalDates.from,
+					to: finalDates.to
+				});
+				setIsPopoverOpen(false);
+			}
+		}
+		setSelectedRange(null);
+	};
+	const handleMonthChange = (newMonthIndex, part) => {
+		setSelectedRange(null);
+		if (part === "from") {
+			if (yearFrom !== void 0) {
+				if (newMonthIndex < 0 || newMonthIndex > yearsRange + 1) return;
+				const newMonth = new Date(yearFrom, newMonthIndex, 1);
+				const from = numberOfMonths === 2 ? startOfMonth(toDate(newMonth, { timeZone })) : pendingDate?.from ? new Date(pendingDate.from.getFullYear(), newMonth.getMonth(), pendingDate.from.getDate()) : newMonth;
+				const to = numberOfMonths === 2 ? pendingDate?.to ? endOfDay(toDate(pendingDate.to, { timeZone })) : endOfMonth(toDate(newMonth, { timeZone })) : from;
+				if (from <= to) {
+					setPendingDate({
+						from,
+						to
+					});
+					setMonthFrom(newMonth);
+					setMonthTo(pendingDate?.to);
+				}
+			}
+		} else if (yearTo !== void 0) {
+			if (newMonthIndex < 0 || newMonthIndex > yearsRange + 1) return;
+			const newMonth = new Date(yearTo, newMonthIndex, 1);
+			const from = pendingDate?.from ? startOfDay(toDate(pendingDate.from, { timeZone })) : startOfMonth(toDate(newMonth, { timeZone }));
+			const to = numberOfMonths === 2 ? endOfMonth(toDate(newMonth, { timeZone })) : from;
+			if (from <= to) {
+				setPendingDate({
+					from,
+					to
+				});
+				setMonthTo(newMonth);
+				setMonthFrom(pendingDate?.from);
+			}
+		}
+	};
+	const years = Array.from({ length: yearsRange + 1 }, (_, i) => today.getFullYear() - yearsRange / 2 + i);
+	const handleYearChange = (newYear, part) => {
+		setSelectedRange(null);
+		if (part === "from") {
+			if (years.includes(newYear)) {
+				const newMonth = monthFrom ? new Date(newYear, monthFrom ? monthFrom.getMonth() : 0, 1) : new Date(newYear, 0, 1);
+				const from = numberOfMonths === 2 ? startOfMonth(toDate(newMonth, { timeZone })) : pendingDate?.from ? new Date(newYear, newMonth.getMonth(), pendingDate.from.getDate()) : newMonth;
+				const to = numberOfMonths === 2 ? pendingDate?.to ? endOfDay(toDate(pendingDate.to, { timeZone })) : endOfMonth(toDate(newMonth, { timeZone })) : from;
+				if (from <= to) {
+					setPendingDate({
+						from,
+						to
+					});
+					setYearFrom(newYear);
+					setMonthFrom(newMonth);
+					setYearTo(pendingDate?.to?.getFullYear());
+					setMonthTo(pendingDate?.to);
+				}
+			}
+		} else if (years.includes(newYear)) {
+			const newMonth = monthTo ? new Date(newYear, monthTo.getMonth(), 1) : new Date(newYear, 0, 1);
+			const from = pendingDate?.from ? startOfDay(toDate(pendingDate.from, { timeZone })) : startOfMonth(toDate(newMonth, { timeZone }));
+			const to = numberOfMonths === 2 ? endOfMonth(toDate(newMonth, { timeZone })) : from;
+			if (from <= to) {
+				setPendingDate({
+					from,
+					to
+				});
+				setYearTo(newYear);
+				setMonthTo(newMonth);
+				setYearFrom(pendingDate?.from?.getFullYear());
+				setMonthFrom(pendingDate?.from);
+			}
+		}
+	};
+	const defaultDateRangePresets = [
+		{
+			key: "today",
+			label: "Today",
+			start: today,
+			end: today
+		},
+		{
+			key: "yesterday",
+			label: "Yesterday",
+			start: subDays(today, 1),
+			end: subDays(today, 1)
+		},
+		{
+			key: "thisWeek",
+			label: "This Week",
+			start: startOfWeek(today, { weekStartsOn: 1 }),
+			end: endOfWeek(today, { weekStartsOn: 1 })
+		},
+		{
+			key: "lastWeek",
+			label: "Last Week",
+			start: subDays(startOfWeek(today, { weekStartsOn: 1 }), 7),
+			end: subDays(endOfWeek(today, { weekStartsOn: 1 }), 7)
+		},
+		{
+			key: "last7Days",
+			label: "Last 7 Days",
+			start: subDays(today, 6),
+			end: today
+		},
+		{
+			key: "thisMonth",
+			label: "This Month",
+			start: startOfMonth(today),
+			end: endOfMonth(today)
+		},
+		{
+			key: "lastMonth",
+			label: "Last Month",
+			start: startOfMonth(subDays(today, today.getDate())),
+			end: endOfMonth(subDays(today, today.getDate()))
+		},
+		{
+			key: "thisYear",
+			label: "This Year",
+			start: startOfYear(today),
+			end: endOfYear(today)
+		},
+		{
+			key: "lastYear",
+			label: "Last Year",
+			start: startOfYear(subDays(today, 365)),
+			end: endOfYear(subDays(today, 365))
+		}
+	];
+	const allDateRangePresets = customPresets || defaultDateRangePresets;
+	const dateRanges = React$1.useMemo(() => {
+		return allDateRangePresets.filter((preset) => {
+			if (excludePresets?.includes(preset.key)) return false;
+			const startValid = !isDateDisabled(preset.start);
+			const endValid = !isDateDisabled(preset.end);
+			const rangeValid = numberOfMonths === 1 || isRangeValid(preset.start, preset.end);
+			return startValid && endValid && rangeValid;
+		});
+	}, [
+		isDateDisabled,
+		excludePresets,
+		numberOfMonths,
+		isRangeValid
+	]);
+	const handleMouseOver = (part) => {
+		setHighlightedPart(part);
+	};
+	const handleMouseLeave = () => {
+		setHighlightedPart(null);
+	};
+	const handleWheel = (event) => {
+		event.preventDefault();
+		setSelectedRange(null);
+		if (highlightedPart === "firstDay") {
+			const newDate = new Date(pendingDate?.from);
+			const increment = event.deltaY > 0 ? -1 : 1;
+			newDate.setDate(newDate.getDate() + increment);
+			if (newDate <= pendingDate?.to) {
+				numberOfMonths === 2 ? setPendingDate({
+					from: newDate,
+					to: new Date(pendingDate?.to)
+				}) : setPendingDate({
+					from: newDate,
+					to: newDate
+				});
+				setMonthFrom(newDate);
+			} else if (newDate > pendingDate?.to && numberOfMonths === 1) {
+				setPendingDate({
+					from: newDate,
+					to: newDate
+				});
+				setMonthFrom(newDate);
+			}
+		} else if (highlightedPart === "firstMonth") handleMonthChange((monthFrom ? monthFrom.getMonth() : 0) + (event.deltaY > 0 ? -1 : 1), "from");
+		else if (highlightedPart === "firstYear" && yearFrom !== void 0) handleYearChange(yearFrom + (event.deltaY > 0 ? -1 : 1), "from");
+		else if (highlightedPart === "secondDay") {
+			const newDate = new Date(pendingDate?.to);
+			const increment = event.deltaY > 0 ? -1 : 1;
+			newDate.setDate(newDate.getDate() + increment);
+			if (newDate >= pendingDate?.from) {
+				setPendingDate({
+					from: new Date(pendingDate?.from),
+					to: newDate
+				});
+				setMonthTo(newDate);
+			}
+		} else if (highlightedPart === "secondMonth") handleMonthChange((monthTo ? monthTo.getMonth() : 0) + (event.deltaY > 0 ? -1 : 1), "to");
+		else if (highlightedPart === "secondYear" && yearTo !== void 0) handleYearChange(yearTo + (event.deltaY > 0 ? -1 : 1), "to");
+	};
+	React$1.useEffect(() => {
+		const elements = [
+			document.getElementById(`firstDay-${id}`),
+			document.getElementById(`firstMonth-${id}`),
+			document.getElementById(`firstYear-${id}`),
+			document.getElementById(`secondDay-${id}`),
+			document.getElementById(`secondMonth-${id}`),
+			document.getElementById(`secondYear-${id}`)
+		];
+		const addPassiveEventListener = (element) => {
+			if (element) element.addEventListener("wheel", handleWheel, { passive: false });
+		};
+		elements.forEach(addPassiveEventListener);
+		return () => {
+			elements.forEach((element) => {
+				if (element) element.removeEventListener("wheel", handleWheel);
+			});
+		};
+	}, [highlightedPart, pendingDate]);
+	const formatWithTz = (date, fmt) => formatInTimeZone(date, timeZone, fmt);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("style", { children: `
+            .date-part {
+              touch-action: none;
+            }
+          ` }), /* @__PURE__ */ jsxs(Popover, {
+		open: isPopoverOpen,
+		onOpenChange: setIsPopoverOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				id: "date",
+				ref,
+				...props,
+				className: cn("w-full", triggerClassName, multiSelectVariants({
+					variant,
+					className
+				})),
+				onClick: handleTogglePopover,
+				suppressHydrationWarning: true,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "text-muted-foreground h-4 w-4" }), /* @__PURE__ */ jsx("span", { children: date?.from ? date.to ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							/* @__PURE__ */ jsx("span", {
+								id: `firstDay-${id}`,
+								className: cn("date-part", highlightedPart === "firstDay" && "font-bold underline"),
+								onMouseOver: () => handleMouseOver("firstDay"),
+								onMouseLeave: handleMouseLeave,
+								children: formatWithTz(date.from, "dd")
+							}),
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								id: `firstMonth-${id}`,
+								className: cn("date-part", highlightedPart === "firstMonth" && "font-bold underline"),
+								onMouseOver: () => handleMouseOver("firstMonth"),
+								onMouseLeave: handleMouseLeave,
+								children: formatWithTz(date.from, "LLL")
+							}),
+							",",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								id: `firstYear-${id}`,
+								className: cn("date-part", highlightedPart === "firstYear" && "font-bold underline"),
+								onMouseOver: () => handleMouseOver("firstYear"),
+								onMouseLeave: handleMouseLeave,
+								children: formatWithTz(date.from, "y")
+							}),
+							numberOfMonths === 2 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								" - ",
+								/* @__PURE__ */ jsx("span", {
+									id: `secondDay-${id}`,
+									className: cn("date-part", highlightedPart === "secondDay" && "font-bold underline"),
+									onMouseOver: () => handleMouseOver("secondDay"),
+									onMouseLeave: handleMouseLeave,
+									children: formatWithTz(date.to, "dd")
+								}),
+								" ",
+								/* @__PURE__ */ jsx("span", {
+									id: `secondMonth-${id}`,
+									className: cn("date-part", highlightedPart === "secondMonth" && "font-bold underline"),
+									onMouseOver: () => handleMouseOver("secondMonth"),
+									onMouseLeave: handleMouseLeave,
+									children: formatWithTz(date.to, "LLL")
+								}),
+								",",
+								" ",
+								/* @__PURE__ */ jsx("span", {
+									id: `secondYear-${id}`,
+									className: cn("date-part", highlightedPart === "secondYear" && "font-bold underline"),
+									onMouseOver: () => handleMouseOver("secondYear"),
+									onMouseLeave: handleMouseLeave,
+									children: formatWithTz(date.to, "y")
+								})
+							] })
+						] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							/* @__PURE__ */ jsx("span", {
+								id: "day",
+								className: cn("date-part", highlightedPart === "day" && "font-bold underline"),
+								onMouseOver: () => handleMouseOver("day"),
+								onMouseLeave: handleMouseLeave,
+								children: formatWithTz(date.from, "dd")
+							}),
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								id: "month",
+								className: cn("date-part", highlightedPart === "month" && "font-bold underline"),
+								onMouseOver: () => handleMouseOver("month"),
+								onMouseLeave: handleMouseLeave,
+								children: formatWithTz(date.from, "LLL")
+							}),
+							",",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								id: "year",
+								className: cn("date-part", highlightedPart === "year" && "font-bold underline"),
+								onMouseOver: () => handleMouseOver("year"),
+								onMouseLeave: handleMouseLeave,
+								children: formatWithTz(date.from, "y")
+							})
+						] }) : /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: placeholder || "Pick a date"
+						}) })]
+					}), date?.from && /* @__PURE__ */ jsxs("div", {
+						onClick: handleClear,
+						className: "text-muted-foreground hover:text-primary size-4 p-0 hover:bg-transparent",
+						children: [/* @__PURE__ */ jsx(X, { size: 14 }), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: "Clear date"
+						})]
+					})]
+				})
+			})
+		}), isPopoverOpen && /* @__PURE__ */ jsx(PopoverContent, {
+			className: cn("w-auto popover-content-width-full", popoverClassName),
+			align: "center",
+			avoidCollisions: false,
+			onInteractOutside: handleClose,
+			onEscapeKeyDown: handleClose,
+			style: {
+				maxHeight: "var(--radix-popover-content-available-height)",
+				overflowY: "auto"
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex",
+				children: [numberOfMonths === 2 && /* @__PURE__ */ jsx("div", {
+					className: "border-foreground/10 hidden flex-col gap-1 border-r pr-4 text-left md:flex",
+					children: dateRanges.map(({ key, label, start, end }) => /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						className: cn("hover:bg-primary/90 hover:text-background justify-start", selectedRange === label && "bg-primary text-background hover:bg-primary/90 hover:text-background"),
+						onClick: () => {
+							selectDateRange(start, end, label);
+							setMonthFrom(start);
+							setYearFrom(start.getFullYear());
+							setMonthTo(end);
+							setYearTo(end.getFullYear());
+						},
+						children: label
+					}, key))
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-4",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "ml-3 flex gap-2",
+								children: [/* @__PURE__ */ jsxs(Select, {
+									onValueChange: (value) => {
+										handleMonthChange(months.indexOf(value), "from");
+										setSelectedRange(null);
+									},
+									value: monthFrom ? months[monthFrom.getMonth()] : void 0,
+									children: [/* @__PURE__ */ jsx(SelectTrigger, {
+										className: "hover:bg-accent hover:text-accent-foreground hidden w-[122px] font-medium focus:ring-0 focus:ring-offset-0 sm:flex",
+										children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Month" })
+									}), /* @__PURE__ */ jsx(SelectContent, { children: months.map((month, idx) => /* @__PURE__ */ jsx(SelectItem, {
+										value: month,
+										children: month
+									}, idx)) })]
+								}), /* @__PURE__ */ jsxs(Select, {
+									onValueChange: (value) => {
+										handleYearChange(Number(value), "from");
+										setSelectedRange(null);
+									},
+									value: yearFrom ? yearFrom.toString() : void 0,
+									children: [/* @__PURE__ */ jsx(SelectTrigger, {
+										className: "hover:bg-accent hover:text-accent-foreground hidden w-[122px] font-medium focus:ring-0 focus:ring-offset-0 sm:flex",
+										children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Year" })
+									}), /* @__PURE__ */ jsx(SelectContent, { children: years.map((year, idx) => /* @__PURE__ */ jsx(SelectItem, {
+										value: year.toString(),
+										children: year
+									}, idx)) })]
+								})]
+							}), numberOfMonths === 2 && /* @__PURE__ */ jsxs("div", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ jsxs(Select, {
+									onValueChange: (value) => {
+										handleMonthChange(months.indexOf(value), "to");
+										setSelectedRange(null);
+									},
+									value: monthTo ? months[monthTo.getMonth()] : void 0,
+									children: [/* @__PURE__ */ jsx(SelectTrigger, {
+										className: "hover:bg-accent hover:text-accent-foreground hidden w-[122px] font-medium focus:ring-0 focus:ring-offset-0 sm:flex",
+										children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Month" })
+									}), /* @__PURE__ */ jsx(SelectContent, { children: months.map((month, idx) => /* @__PURE__ */ jsx(SelectItem, {
+										value: month,
+										children: month
+									}, idx)) })]
+								}), /* @__PURE__ */ jsxs(Select, {
+									onValueChange: (value) => {
+										handleYearChange(Number(value), "to");
+										setSelectedRange(null);
+									},
+									value: yearTo ? yearTo.toString() : void 0,
+									children: [/* @__PURE__ */ jsx(SelectTrigger, {
+										className: "hover:bg-accent hover:text-accent-foreground hidden w-[122px] font-medium focus:ring-0 focus:ring-offset-0 sm:flex",
+										children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Year" })
+									}), /* @__PURE__ */ jsx(SelectContent, { children: years.map((year, idx) => /* @__PURE__ */ jsx(SelectItem, {
+										value: year.toString(),
+										children: year
+									}, idx)) })]
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex",
+							children: /* @__PURE__ */ jsx(Calendar$1, {
+								mode: "range",
+								defaultMonth: monthFrom,
+								month: monthFrom,
+								onMonthChange: setMonthFrom,
+								selected: pendingDate,
+								onSelect: handleDateSelect,
+								numberOfMonths,
+								showOutsideDays: false,
+								disabled: isDateDisabled,
+								fromDate: effectiveMinDate,
+								toDate: effectiveMaxDate,
+								className
+							})
+						}),
+						!closeOnSelect && /* @__PURE__ */ jsxs("div", {
+							className: "flex justify-end gap-2 border-t p-3",
+							children: [/* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								size: "sm",
+								onClick: handleReset,
+								type: "button",
+								children: "Reset"
+							}), /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								onClick: handleApply,
+								type: "button",
+								children: "Apply"
+							})]
+						})
+					]
+				})]
+			})
+		})]
+	})] });
+}
+CalendarDatePicker.displayName = "CalendarDatePicker";
+
+//#endregion
+export { CalendarDatePicker as t };

package/dist/components/features/calendar-date-picker/calendar-date-picker.d.ts

@@ -30,8 +30,9 @@ interface CalendarDatePickerProps extends React.HTMLAttributes<HTMLButtonElement
     disableFuture?: boolean;
     disablePast?: boolean;
     maxRange?: number;
+    popoverClassName?: string;
 }
-export declare function CalendarDatePicker({ ref, id, className, triggerClassName, date, closeOnSelect, numberOfMonths, yearsRange, onDateSelect, variant, placeholder, excludePresets, customPresets, minDate, maxDate, disableFuture, disablePast, maxRange, ...props }: CalendarDatePickerProps & {
+export declare function CalendarDatePicker({ ref, id, className, triggerClassName, date, closeOnSelect, numberOfMonths, yearsRange, onDateSelect, variant, placeholder, excludePresets, customPresets, minDate, maxDate, disableFuture, disablePast, maxRange, popoverClassName, ...props }: CalendarDatePickerProps & {
     ref?: React.RefObject<HTMLButtonElement | null>;
 }): import("react/jsx-runtime").JSX.Element;
 export declare namespace CalendarDatePicker {

package/dist/components/features/calendar-date-picker/calendar-date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/features/calendar-date-picker/calendar-date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAiBjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsB9B,QAAA,MAAM,mBAAmB;;8EAiBxB,CAAA;AAED,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,IAAI,CAAA;IACX,GAAG,EAAE,IAAI,CAAA;CACV;AAED,UAAU,uBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC;IACzF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,IAAI,EAAE,SAAS,CAAA;IACf,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,EAAE,EAAE,IAAI,CAAA;KAAE,GAAG,SAAS,KAAK,IAAI,CAAA;IACnE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,aAAa,CAAC,EAAE,eAAe,EAAE,CAAA;IAEjC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,GAAG,EAAE,EAA2B,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,aAAqB,EAAE,cAAkB,EAAE,UAAe,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,aAAqB,EAAE,WAAmB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;CAAE,2CA+xBzY;yBA/xBe,kBAAkB"}
+{"version":3,"file":"calendar-date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/features/calendar-date-picker/calendar-date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAiBjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsB9B,QAAA,MAAM,mBAAmB;;8EAiBxB,CAAA;AAED,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,IAAI,CAAA;IACX,GAAG,EAAE,IAAI,CAAA;CACV;AAED,UAAU,uBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC;IACzF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,IAAI,EAAE,SAAS,CAAA;IACf,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,EAAE,EAAE,IAAI,CAAA;KAAE,GAAG,SAAS,KAAK,IAAI,CAAA;IACnE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,aAAa,CAAC,EAAE,eAAe,EAAE,CAAA;IAEjC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,GAAG,EAAE,EAA2B,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,aAAqB,EAAE,cAAkB,EAAE,UAAe,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,aAAqB,EAAE,WAAmB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;CAAE,2CA+xB3Z;yBA/xBe,kBAAkB"}