@datum-cloud/datum-ui 0.2.0-alpha.3 → 0.2.0-alpha.4

package/dist/to-api-format-C2xjQUcI.mjs

@@ -0,0 +1,1506 @@
+import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { t as Button } from "./button-C1wRfGtT.mjs";
+import { t as Separator } from "./separator-T2ppyD-8.mjs";
+import { t as Button$1 } from "./button-AzpnV-WB.mjs";
+import { t as Icon } from "./icon-wrapper-9ticVbRL.mjs";
+import { t as Calendar$1 } from "./calendar-DlIHeWb0.mjs";
+import { t as Input } from "./input-fzXBheCN.mjs";
+import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-SQlKSz6L.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-DVlEzD2W.mjs";
+import { cva } from "class-variance-authority";
+import { Calendar, CalendarIcon, Globe, X } from "lucide-react";
+import * as React$1 from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { endOfDay, endOfMonth, endOfWeek, endOfYear, format, isSameDay, isSameYear, parse, startOfDay, startOfMonth, startOfWeek, startOfYear, subDays, subHours, subMinutes } from "date-fns";
+import { formatInTimeZone, fromZonedTime, toDate, toZonedTime } 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, ...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$1, {
+				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: "w-auto",
+			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$1, {
+						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$1, {
+								variant: "outline",
+								size: "sm",
+								onClick: handleReset,
+								type: "button",
+								children: "Reset"
+							}), /* @__PURE__ */ jsx(Button$1, {
+								size: "sm",
+								onClick: handleApply,
+								type: "button",
+								children: "Apply"
+							})]
+						})
+					]
+				})]
+			})
+		})]
+	})] });
+}
+CalendarDatePicker.displayName = "CalendarDatePicker";
+
+//#endregion
+//#region src/components/features/time-range-picker/utils/timezone.ts
+/**
+* Get the UTC offset string for a timezone
+* @example getTimezoneOffset('Asia/Jakarta') => '+07:00'
+*/
+function getTimezoneOffset(timezone) {
+	try {
+		const now = /* @__PURE__ */ new Date();
+		const offsetPart = new Intl.DateTimeFormat("en-US", {
+			timeZone: timezone,
+			timeZoneName: "shortOffset"
+		}).formatToParts(now).find((p) => p.type === "timeZoneName");
+		if (offsetPart) {
+			const match = offsetPart.value.match(/GMT([+-])(\d+)(?::(\d+))?/);
+			if (match) return `${match[1]}${match[2].padStart(2, "0")}:${match[3]?.padStart(2, "0") ?? "00"}`;
+			if (offsetPart.value === "GMT") return "+00:00";
+		}
+	} catch {}
+	return "+00:00";
+}
+/**
+* Format a timezone for display
+* @example formatTimezoneLabel('Asia/Jakarta') => 'Asia/Jakarta (UTC+07:00)'
+*/
+function formatTimezoneLabel(timezone) {
+	const offset = getTimezoneOffset(timezone);
+	return `${timezone.replace(/_/g, " ")} (UTC${offset})`;
+}
+/**
+* Create a TimezoneOption from a timezone string
+*/
+function createTimezoneOption(timezone) {
+	return {
+		value: timezone,
+		label: formatTimezoneLabel(timezone),
+		offset: getTimezoneOffset(timezone)
+	};
+}
+/**
+* Get default timezone options (user's timezone + UTC)
+*/
+function getDefaultTimezoneOptions(userTimezone) {
+	const options = [];
+	if (userTimezone && userTimezone !== "UTC") options.push(createTimezoneOption(userTimezone));
+	options.push({
+		value: "UTC",
+		label: "UTC (+00:00)",
+		offset: "+00:00"
+	});
+	return options;
+}
+/**
+* Get short offset display (e.g., "UTC+7")
+*/
+function getShortTimezoneDisplay(timezone) {
+	const offset = getTimezoneOffset(timezone);
+	const match = offset.match(/([+-])(\d+):(\d+)/);
+	if (match) {
+		const sign = match[1];
+		const hours = Number.parseInt(match[2], 10);
+		const minutes = match[3];
+		if (minutes === "00") return `UTC${sign}${hours}`;
+		return `UTC${sign}${hours}:${minutes}`;
+	}
+	return `UTC${offset}`;
+}
+/**
+* Get the browser's timezone
+*/
+function getBrowserTimezone() {
+	try {
+		return Intl.DateTimeFormat().resolvedOptions().timeZone;
+	} catch {
+		return "UTC";
+	}
+}
+/**
+* Convert a UTC Date to a local datetime-local input string in the given timezone
+* @example utcToLocalInputString(new Date('2026-01-16T04:00:00Z'), 'Asia/Jakarta') => '2026-01-16T11:00'
+*/
+function utcToLocalInputString(utcDate, timezone) {
+	return format(toZonedTime(utcDate, timezone), "yyyy-MM-dd'T'HH:mm");
+}
+/**
+* Convert a local datetime-local input string to a UTC Date
+* @example localInputStringToUtc('2026-01-16T11:00', 'Asia/Jakarta') => Date('2026-01-16T04:00:00Z')
+*/
+function localInputStringToUtc(localString, timezone) {
+	return fromZonedTime(parse(localString, "yyyy-MM-dd'T'HH:mm", /* @__PURE__ */ new Date()), timezone);
+}
+/**
+* Convert a UTC ISO string to a Date for display in user's timezone
+*/
+function utcStringToZonedDate(utcString, timezone) {
+	return toZonedTime(new Date(utcString), timezone);
+}
+/**
+* Convert a zoned Date to UTC ISO string
+*/
+function zonedDateToUtcString(zonedDate, timezone) {
+	return fromZonedTime(zonedDate, timezone).toISOString();
+}
+/**
+* Format a UTC ISO string for display in user's timezone
+* @example formatUtcForDisplay('2026-01-16T04:00:00Z', 'Asia/Jakarta') => 'Jan 16, 2026 11:00'
+*/
+function formatUtcForDisplay(utcString, timezone, formatString = "MMM d, yyyy HH:mm") {
+	return format(utcStringToZonedDate(utcString, timezone), formatString);
+}
+
+//#endregion
+//#region src/components/features/time-range-picker/components/absolute-range-panel.tsx
+/**
+* Parse a zoned date into separate date and time parts
+*/
+function parseDateTimeParts(zonedDate) {
+	return {
+		date: zonedDate,
+		time: `${zonedDate.getHours().toString().padStart(2, "0")}:${zonedDate.getMinutes().toString().padStart(2, "0")}`
+	};
+}
+/**
+* Combine a date and time string into a single Date
+*/
+function combineDateAndTime(date, time) {
+	const [hours, minutes] = time.split(":").map(Number);
+	const combined = new Date(date);
+	combined.setHours(hours || 0, minutes || 0, 0, 0);
+	return combined;
+}
+/**
+* Validate time string format (HH:mm)
+*/
+function isValidTime(time) {
+	const match = time.match(/^(\d{2}):(\d{2})$/);
+	if (!match) return false;
+	const hours = Number.parseInt(match[1], 10);
+	const minutes = Number.parseInt(match[2], 10);
+	return hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59;
+}
+function CustomRangePanel({ fromUtc, toUtc, timezone, onRangeChange, disableFuture = false, debounceMs = 600, className }) {
+	const startDateId = useId();
+	const startTimeId = useId();
+	const endDateId = useId();
+	const endTimeId = useId();
+	const userHasEditedTimeRef = useRef(false);
+	const prevFromUtcRef = useRef(fromUtc);
+	const prevToUtcRef = useRef(toUtc);
+	const debounceTimerRef = useRef(null);
+	const [startDateOpen, setStartDateOpen] = useState(false);
+	const [endDateOpen, setEndDateOpen] = useState(false);
+	const initialFrom = parseDateTimeParts(utcStringToZonedDate(fromUtc, timezone));
+	const initialTo = parseDateTimeParts(utcStringToZonedDate(toUtc, timezone));
+	const [startDate, setStartDate] = useState(initialFrom.date);
+	const [startTime, setStartTime] = useState(initialFrom.time);
+	const [endDate, setEndDate] = useState(initialTo.date);
+	const [endTime, setEndTime] = useState(initialTo.time);
+	useEffect(() => {
+		return () => {
+			if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+		};
+	}, []);
+	useEffect(() => {
+		const fromChanged = fromUtc !== prevFromUtcRef.current;
+		const toChanged = toUtc !== prevToUtcRef.current;
+		if (fromChanged) {
+			try {
+				const parsed = parseDateTimeParts(utcStringToZonedDate(fromUtc, timezone));
+				setStartDate(parsed.date);
+				setStartTime(parsed.time);
+				userHasEditedTimeRef.current = false;
+			} catch {}
+			prevFromUtcRef.current = fromUtc;
+		}
+		if (toChanged) {
+			try {
+				const parsed = parseDateTimeParts(utcStringToZonedDate(toUtc, timezone));
+				setEndDate(parsed.date);
+				setEndTime(parsed.time);
+				userHasEditedTimeRef.current = false;
+			} catch {}
+			prevToUtcRef.current = toUtc;
+		}
+	}, [
+		fromUtc,
+		toUtc,
+		timezone
+	]);
+	const notifyChangeImmediate = useCallback((newStartDate, newStartTime, newEndDate, newEndTime) => {
+		if (!isValidTime(newStartTime) || !isValidTime(newEndTime)) return;
+		const startCombined = combineDateAndTime(newStartDate, newStartTime);
+		const endCombined = combineDateAndTime(newEndDate, newEndTime);
+		if (startCombined >= endCombined) return;
+		const newFromUtc = zonedDateToUtcString(startCombined, timezone);
+		const newToUtc = zonedDateToUtcString(endCombined, timezone);
+		if (newFromUtc !== fromUtc || newToUtc !== toUtc) onRangeChange(newFromUtc, newToUtc);
+	}, [
+		timezone,
+		fromUtc,
+		toUtc,
+		onRangeChange
+	]);
+	const notifyChangeDebounced = useCallback((newStartDate, newStartTime, newEndDate, newEndTime) => {
+		if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+		debounceTimerRef.current = setTimeout(() => {
+			notifyChangeImmediate(newStartDate, newStartTime, newEndDate, newEndTime);
+		}, debounceMs);
+	}, [notifyChangeImmediate, debounceMs]);
+	const handleStartDateSelect = useCallback((date) => {
+		if (!date) return;
+		setStartDate(date);
+		setStartDateOpen(false);
+		notifyChangeImmediate(date, startTime, endDate, endTime);
+	}, [
+		startTime,
+		endDate,
+		endTime,
+		notifyChangeImmediate
+	]);
+	const handleStartTimeChange = useCallback((e) => {
+		const newTime = e.target.value;
+		userHasEditedTimeRef.current = true;
+		setStartTime(newTime);
+		if (isValidTime(newTime)) notifyChangeDebounced(startDate, newTime, endDate, endTime);
+	}, [
+		startDate,
+		endDate,
+		endTime,
+		notifyChangeDebounced
+	]);
+	const handleEndDateSelect = useCallback((date) => {
+		if (!date) return;
+		setEndDate(date);
+		setEndDateOpen(false);
+		notifyChangeImmediate(startDate, startTime, date, endTime);
+	}, [
+		startDate,
+		startTime,
+		endTime,
+		notifyChangeImmediate
+	]);
+	const handleEndTimeChange = useCallback((e) => {
+		const newTime = e.target.value;
+		userHasEditedTimeRef.current = true;
+		setEndTime(newTime);
+		if (isValidTime(newTime)) notifyChangeDebounced(startDate, startTime, endDate, newTime);
+	}, [
+		startDate,
+		startTime,
+		endDate,
+		notifyChangeDebounced
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-2", className),
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs font-medium",
+			children: "Custom Range"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ jsxs(Popover, {
+						open: startDateOpen,
+						onOpenChange: setStartDateOpen,
+						children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsxs(Button, {
+								type: "quaternary",
+								theme: "outline",
+								id: startDateId,
+								className: "h-8 w-full justify-start gap-1.5 px-2 text-xs font-normal",
+								children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-50" }), /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: format(startDate, "MMM d, yyyy")
+								})]
+							})
+						}), /* @__PURE__ */ jsx(PopoverContent, {
+							className: "w-auto p-0",
+							align: "start",
+							children: /* @__PURE__ */ jsx(Calendar$1, {
+								mode: "single",
+								selected: startDate,
+								onSelect: handleStartDateSelect,
+								disabled: disableFuture ? (date) => date > /* @__PURE__ */ new Date() : void 0,
+								initialFocus: true
+							})
+						})]
+					}), /* @__PURE__ */ jsx(Input, {
+						type: "time",
+						id: startTimeId,
+						value: startTime,
+						onChange: handleStartTimeChange,
+						className: cn("h-8 w-[80px] px-2 text-xs md:text-xs", "appearance-none bg-transparent", "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none")
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-sm",
+					children: "—"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ jsxs(Popover, {
+						open: endDateOpen,
+						onOpenChange: setEndDateOpen,
+						children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsxs(Button, {
+								type: "quaternary",
+								theme: "outline",
+								id: endDateId,
+								className: "h-8 w-full justify-start gap-1.5 px-2 text-xs font-normal",
+								children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-50" }), /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: format(endDate, "MMM d, yyyy")
+								})]
+							})
+						}), /* @__PURE__ */ jsx(PopoverContent, {
+							className: "w-auto p-0",
+							align: "start",
+							children: /* @__PURE__ */ jsx(Calendar$1, {
+								mode: "single",
+								selected: endDate,
+								onSelect: handleEndDateSelect,
+								disabled: disableFuture ? (date) => date > /* @__PURE__ */ new Date() || date < startDate : (date) => date < startDate,
+								initialFocus: true
+							})
+						})]
+					}), /* @__PURE__ */ jsx(Input, {
+						type: "time",
+						id: endTimeId,
+						value: endTime,
+						onChange: handleEndTimeChange,
+						className: cn("h-8 w-[80px] px-2 text-xs md:text-xs", "appearance-none bg-transparent", "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none")
+					})]
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/features/time-range-picker/components/quick-ranges-panel.tsx
+function QuickRangesPanel({ presets, value, onPresetSelect, className }) {
+	const selectedPreset = value?.type === "preset" ? value.preset : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-2", className),
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground px-3 text-xs font-medium",
+			children: "Presets"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1",
+			children: presets.map((preset) => {
+				const isSelected = selectedPreset === preset.key;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => onPresetSelect(preset),
+					className: cn("flex items-center justify-between gap-2 rounded-lg px-3 py-1.5 text-xs transition-colors", "hover:bg-accent hover:text-accent-foreground", isSelected ? "bg-accent text-primary border-border border font-medium" : "border border-transparent"),
+					children: [/* @__PURE__ */ jsx("span", { children: preset.label }), /* @__PURE__ */ jsx("kbd", {
+						className: cn("bg-muted pointer-events-none hidden h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium select-none sm:flex", isSelected ? "border-primary" : "bg-muted/50 border-transparent"),
+						children: preset.shortcut
+					})]
+				}, preset.key);
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/features/time-range-picker/components/timezone-selector.tsx
+function TimezoneSelector({ value, onChange, options, className }) {
+	const selectedOption = options.find((opt) => opt.value === value);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx(Globe, { className: "text-muted-foreground h-4 w-4 shrink-0" }), /* @__PURE__ */ jsxs(Select, {
+			value,
+			onValueChange: onChange,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				className: "hover:bg-accent h-8 min-w-[180px] border-0 bg-transparent px-2 text-xs shadow-none",
+				children: /* @__PURE__ */ jsx(SelectValue, {
+					placeholder: "Select timezone",
+					children: selectedOption?.label ?? value
+				})
+			}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value,
+				className: "text-xs",
+				children: option.label
+			}, option.value)) })]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/features/time-range-picker/presets.ts
+/**
+* Get start of day in a specific timezone
+*/
+function startOfDayInTimezone(date, timezone) {
+	const zonedDate = toZonedTime(date, timezone);
+	zonedDate.setHours(0, 0, 0, 0);
+	return fromZonedTime(zonedDate, timezone);
+}
+/**
+* Get end of day in a specific timezone
+*/
+function endOfDayInTimezone(date, timezone) {
+	const zonedDate = toZonedTime(date, timezone);
+	zonedDate.setHours(23, 59, 59, 999);
+	return fromZonedTime(zonedDate, timezone);
+}
+/**
+* Default time range presets with timezone-aware range calculation
+* Note: All presets use "now" as end time to avoid future timestamps
+* (API rejects future times for historical audit logs)
+*
+* API constraint: Maximum time range is 720 hours (30 days)
+*/
+const DEFAULT_PRESETS = [
+	{
+		key: "15m",
+		label: "Last 15 minutes",
+		shortcut: "1",
+		getRange: (_timezone) => {
+			const now = /* @__PURE__ */ new Date();
+			return {
+				from: subMinutes(now, 15),
+				to: now
+			};
+		}
+	},
+	{
+		key: "30m",
+		label: "Last 30 minutes",
+		shortcut: "3",
+		getRange: (_timezone) => {
+			const now = /* @__PURE__ */ new Date();
+			return {
+				from: subMinutes(now, 30),
+				to: now
+			};
+		}
+	},
+	{
+		key: "1h",
+		label: "Last hour",
+		shortcut: "H",
+		getRange: (_timezone) => {
+			const now = /* @__PURE__ */ new Date();
+			return {
+				from: subHours(now, 1),
+				to: now
+			};
+		}
+	},
+	{
+		key: "today",
+		label: "Today",
+		shortcut: "D",
+		getRange: (timezone) => {
+			const now = /* @__PURE__ */ new Date();
+			return {
+				from: startOfDayInTimezone(now, timezone),
+				to: now
+			};
+		}
+	},
+	{
+		key: "yesterday",
+		label: "Yesterday",
+		shortcut: "Y",
+		getRange: (timezone) => {
+			const yesterday = subDays(/* @__PURE__ */ new Date(), 1);
+			return {
+				from: startOfDayInTimezone(yesterday, timezone),
+				to: endOfDayInTimezone(yesterday, timezone)
+			};
+		}
+	},
+	{
+		key: "7d",
+		label: "Last 7 days",
+		shortcut: "W",
+		getRange: (_timezone) => {
+			const now = /* @__PURE__ */ new Date();
+			return {
+				from: subDays(now, 7),
+				to: now
+			};
+		}
+	},
+	{
+		key: "30d",
+		label: "Last 30 days",
+		shortcut: "M",
+		getRange: (_timezone) => {
+			const now = /* @__PURE__ */ new Date();
+			return {
+				from: subDays(now, 30),
+				to: now
+			};
+		}
+	}
+];
+/**
+* Get a preset by key
+*/
+function getPresetByKey(key, presets = DEFAULT_PRESETS) {
+	return presets.find((p) => p.key === key);
+}
+/**
+* Get a preset by keyboard shortcut
+*/
+function getPresetByShortcut(shortcut, presets = DEFAULT_PRESETS) {
+	return presets.find((p) => p.shortcut.toLowerCase() === shortcut.toLowerCase());
+}
+/**
+* Get the default preset (last 7 days)
+*/
+function getDefaultPreset(presets = DEFAULT_PRESETS) {
+	return getPresetByKey("today", presets) ?? presets[0];
+}
+/**
+* Calculate preset range and return UTC ISO strings
+*/
+function getPresetRange(preset, timezone) {
+	const range = preset.getRange(timezone);
+	return {
+		from: range.from.toISOString(),
+		to: range.to.toISOString()
+	};
+}
+
+//#endregion
+//#region src/components/features/time-range-picker/utils/format-display.ts
+/**
+* Format a TimeRangeValue for display in the trigger button
+* Always shows the actual date/time range, not preset labels
+* Converts UTC timestamps to user's timezone for display
+*/
+function formatTimeRangeDisplay(value, timezone) {
+	if (!value || !value.from || !value.to) return "Select time range";
+	return formatDateRangeDisplay(value.from, value.to, timezone);
+}
+/**
+* Format a date range for display
+* Smart formatting based on whether dates are same day/year
+*/
+function formatDateRangeDisplay(fromUtc, toUtc, timezone) {
+	try {
+		const fromDate = utcStringToZonedDate(fromUtc, timezone);
+		const toDate = utcStringToZonedDate(toUtc, timezone);
+		const now = /* @__PURE__ */ new Date();
+		if (isSameDay(fromDate, toDate)) return `${isSameYear(fromDate, now) ? format(fromDate, "MMM d") : format(fromDate, "MMM d, yyyy")}, ${format(fromDate, "HH:mm")} - ${format(toDate, "HH:mm")}`;
+		if (isSameYear(fromDate, now) && isSameYear(toDate, now)) return `${format(fromDate, "MMM d, HH:mm")} - ${format(toDate, "MMM d, HH:mm")}`;
+		return `${format(fromDate, "MMM d, yyyy")} - ${format(toDate, "MMM d, yyyy")}`;
+	} catch {
+		return `${formatUtcForDisplay(fromUtc, timezone, "MMM d, HH:mm")} - ${formatUtcForDisplay(toUtc, timezone, "MMM d, HH:mm")}`;
+	}
+}
+/**
+* Format a UTC ISO string for display in user's timezone
+*/
+function formatSingleTimeDisplay(utcString, timezone) {
+	try {
+		return formatUtcForDisplay(utcString, timezone, "MMM d, yyyy HH:mm");
+	} catch {
+		return utcString;
+	}
+}
+/**
+* Format a Date object for the datetime-local input field
+*/
+function formatDateForInput(date) {
+	return format(date, "yyyy-MM-dd'T'HH:mm");
+}
+
+//#endregion
+//#region src/components/features/time-range-picker/time-range-picker.tsx
+function TimeRangePicker({ value, onChange, onClear, timezone: timezoneProp, presets = DEFAULT_PRESETS, disableFuture = false, maxDate, minDate, className, disabled = false, placeholder = "Select time range", align = "start", side = "bottom" }) {
+	const [open, setOpen] = useState(false);
+	const timezone = timezoneProp ?? getBrowserTimezone();
+	const defaultPreset = getDefaultPreset(presets);
+	const defaultRange = useMemo(() => getPresetRange(defaultPreset, timezone), [defaultPreset, timezone]);
+	const currentFromUtc = value?.from ?? defaultRange.from;
+	const currentToUtc = value?.to ?? defaultRange.to;
+	const calendarRange = useMemo(() => {
+		try {
+			return {
+				from: utcStringToZonedDate(currentFromUtc, timezone),
+				to: utcStringToZonedDate(currentToUtc, timezone)
+			};
+		} catch {
+			return;
+		}
+	}, [
+		currentFromUtc,
+		currentToUtc,
+		timezone
+	]);
+	const effectiveValue = useMemo(() => {
+		if (value?.type === "preset" && value?.preset && (!value?.from || !value?.to)) {
+			const preset = presets.find((p) => p.key === value.preset) ?? defaultPreset;
+			const range = getPresetRange(preset, timezone);
+			return {
+				type: "preset",
+				preset: preset.key,
+				from: range.from,
+				to: range.to
+			};
+		}
+		if (value?.from && value?.to) return value;
+		return {
+			type: "preset",
+			preset: defaultPreset.key,
+			from: defaultRange.from,
+			to: defaultRange.to
+		};
+	}, [
+		value,
+		defaultPreset,
+		defaultRange.from,
+		defaultRange.to,
+		presets,
+		timezone
+	]);
+	const displayText = useMemo(() => formatTimeRangeDisplay(effectiveValue, timezone) || placeholder, [
+		effectiveValue,
+		timezone,
+		placeholder
+	]);
+	const handlePresetSelect = useCallback((preset) => {
+		const range = getPresetRange(preset, timezone);
+		onChange({
+			type: "preset",
+			preset: preset.key,
+			from: range.from,
+			to: range.to
+		});
+		setOpen(false);
+	}, [onChange, timezone]);
+	const userClickedCalendarRef = useRef(false);
+	const handleDayClick = useCallback(() => {
+		userClickedCalendarRef.current = true;
+	}, []);
+	const handleCalendarSelect = useCallback((range) => {
+		if (!userClickedCalendarRef.current) return;
+		userClickedCalendarRef.current = false;
+		if (range?.from && range?.to) {
+			const now = /* @__PURE__ */ new Date();
+			const fromStart = new Date(range.from);
+			fromStart.setHours(0, 0, 0, 0);
+			const toEnd = new Date(range.to);
+			toEnd.setHours(23, 59, 59, 999);
+			const effectiveToEnd = toEnd > now ? now : toEnd;
+			onChange({
+				type: "custom",
+				from: zonedDateToUtcString(fromStart, timezone),
+				to: zonedDateToUtcString(effectiveToEnd, timezone)
+			});
+		} else if (range?.from) {
+			const now = /* @__PURE__ */ new Date();
+			const fromStart = new Date(range.from);
+			fromStart.setHours(0, 0, 0, 0);
+			const toEnd = new Date(range.from);
+			toEnd.setHours(23, 59, 59, 999);
+			const effectiveToEnd = toEnd > now ? now : toEnd;
+			onChange({
+				type: "custom",
+				from: zonedDateToUtcString(fromStart, timezone),
+				to: zonedDateToUtcString(effectiveToEnd, timezone)
+			});
+		}
+	}, [onChange, timezone]);
+	const handleCustomRangeChange = useCallback((fromUtc, toUtc) => {
+		onChange({
+			type: "custom",
+			from: fromUtc,
+			to: toUtc
+		});
+	}, [onChange]);
+	useEffect(() => {
+		if (!open) return;
+		const handleKeyDown = (e) => {
+			const preset = getPresetByShortcut(e.key, presets);
+			if (preset) {
+				e.preventDefault();
+				handlePresetSelect(preset);
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [
+		open,
+		presets,
+		handlePresetSelect
+	]);
+	const effectiveMaxDate = disableFuture ? /* @__PURE__ */ new Date() : maxDate;
+	const handleClear = useCallback((e) => {
+		e.stopPropagation();
+		onClear?.();
+	}, [onClear]);
+	const showClearButton = value && onClear;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "relative inline-flex",
+			children: /* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(Button, {
+					type: "quaternary",
+					theme: "outline",
+					disabled,
+					className: cn("text-foreground min-w-[200px] items-center justify-between gap-2 px-3 font-normal", className),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-1 items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: Calendar,
+							size: 16
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate text-xs",
+							children: displayText
+						})]
+					}), showClearButton && /* @__PURE__ */ jsx("div", {
+						onClick: (e) => {
+							e.stopPropagation();
+							e.preventDefault();
+							handleClear(e);
+						},
+						className: cn("size-[14px] shrink-0 p-0 hover:bg-transparent", "hover:text-destructive text-icon-quaternary hover:bg-transparent dark:text-white", "focus:ring-ring focus:ring-2 focus:ring-offset-1 focus:outline-none", "disabled:pointer-events-none disabled:opacity-50", "transition-colors"),
+						"aria-label": "Clear time range",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: X,
+							size: 14
+						})
+					})]
+				})
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-auto rounded-xl p-0",
+			align,
+			side,
+			sideOffset: 4,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "divide-border flex flex-col divide-x sm:flex-row",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex-1 px-0",
+						children: /* @__PURE__ */ jsx(Calendar$1, {
+							className: "w-full",
+							mode: "range",
+							defaultMonth: calendarRange?.from,
+							selected: calendarRange,
+							onSelect: handleCalendarSelect,
+							onDayClick: handleDayClick,
+							numberOfMonths: 1,
+							disabled: (date) => {
+								if (effectiveMaxDate && date > effectiveMaxDate) return true;
+								if (minDate && date < minDate) return true;
+								return false;
+							},
+							initialFocus: true
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "p-3",
+						children: /* @__PURE__ */ jsx(QuickRangesPanel, {
+							presets,
+							value: effectiveValue,
+							onPresetSelect: handlePresetSelect
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, {}),
+				/* @__PURE__ */ jsx("div", {
+					className: "p-3",
+					children: /* @__PURE__ */ jsx(CustomRangePanel, {
+						fromUtc: currentFromUtc,
+						toUtc: currentToUtc,
+						timezone,
+						onRangeChange: handleCustomRangeChange,
+						disableFuture
+					})
+				}),
+				/* @__PURE__ */ jsx(Separator, {}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-muted-foreground bg-muted/30 flex items-center gap-2 px-3 py-2 text-xs",
+					children: [/* @__PURE__ */ jsx(Globe, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsxs("span", { children: ["Your timezone:", formatTimezoneLabel(timezone)] })]
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/features/time-range-picker/utils/to-api-format.ts
+/**
+* Convert a TimeRangeValue to API format (startTime/endTime)
+*
+* Since TimeRangeValue now always stores UTC timestamps,
+* this is a simple passthrough.
+*
+* @param value - The time range value (stores UTC timestamps)
+* @param timezone - User's timezone (used only if value needs recalculation)
+* @param presets - Preset configurations
+*/
+function toApiTimeRange(value, timezone, presets = DEFAULT_PRESETS) {
+	const tz = timezone ?? getBrowserTimezone();
+	if (!value) {
+		const range = getPresetRange(getDefaultPreset(), tz);
+		return {
+			startTime: range.from,
+			endTime: range.to
+		};
+	}
+	if (value.from && value.to) return {
+		startTime: value.from,
+		endTime: value.to
+	};
+	if (value.type === "preset" && value.preset) {
+		const preset = presets.find((p) => p.key === value.preset);
+		if (preset) {
+			const range = getPresetRange(preset, tz);
+			return {
+				startTime: range.from,
+				endTime: range.to
+			};
+		}
+	}
+	const range = getPresetRange(getDefaultPreset(presets), tz);
+	return {
+		startTime: range.from,
+		endTime: range.to
+	};
+}
+
+//#endregion
+export { utcToLocalInputString as C, utcStringToZonedDate as S, CalendarDatePicker as T, getBrowserTimezone as _, formatTimeRangeDisplay as a, getTimezoneOffset as b, getPresetByKey as c, TimezoneSelector as d, QuickRangesPanel as f, formatUtcForDisplay as g, formatTimezoneLabel as h, formatSingleTimeDisplay as i, getPresetByShortcut as l, createTimezoneOption as m, TimeRangePicker as n, DEFAULT_PRESETS as o, CustomRangePanel as p, formatDateForInput as r, getDefaultPreset as s, toApiTimeRange as t, getPresetRange as u, getDefaultTimezoneOptions as v, zonedDateToUtcString as w, localInputStringToUtc as x, getShortTimezoneDisplay as y };