"use client";
import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { Popover, PopoverPopup, PopoverTrigger } from "./index79.js";
import { Calendar, ChevronLeft, ChevronRight, Clock } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { format } from "date-fns";
import { DayPicker, getDefaultClassNames } from "react-day-picker";
//#region src/components/molecules/data/DatePicker/DatePicker.tsx
var defaultDayPickerClassNames = getDefaultClassNames();
var activeDayClasses = "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground";
var navButtonClasses = "size-[26px] flex items-center justify-center rounded-[10px] shadow-sm hover:bg-accent p-0 select-none transition-[color,background-color,transform] duration-200 ease-smooth motion-reduce:transition-none active:scale-[0.90] motion-reduce:active:scale-100";
var triggerBaseClasses = "inline-flex items-center gap-2 h-9 rounded-xl border border-input bg-background text-sm font-normal shadow-xs transition-[color,background-color,border-color,box-shadow,transform] duration-200 ease-smooth motion-reduce:transition-none active:scale-[0.98] motion-reduce:active:scale-100";
var triggerInteractionClasses = "hover:bg-accent focus-visible:outline-none focus-visible:bg-background focus-visible:border-ring focus-visible:shadow-[0px_0px_0px_3px_rgba(161,161,170,0.5)]";
var timeItemClasses = "w-full min-h-[44px] py-2.5 px-3 text-sm font-normal rounded-md transition-[color,background-color,transform] duration-200 ease-smooth motion-reduce:transition-none active:scale-[0.97] motion-reduce:active:scale-100";
function DatePickerChevron({ orientation }) {
	if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" });
	return /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" });
}
DatePickerChevron.displayName = "DatePickerChevron";
var calendarFormatters = { formatWeekdayName: (date) => format(date, "EEEEEE") };
function useDisabledMatcher(minDate, maxDate, disabledDates) {
	return React.useMemo(() => {
		const matchers = [];
		if (minDate) matchers.push((date) => date < minDate);
		if (maxDate) matchers.push((date) => date > maxDate);
		if (disabledDates) if (typeof disabledDates === "function") matchers.push(disabledDates);
		else matchers.push((date) => disabledDates.some((d) => d.toDateString() === date.toDateString()));
		if (matchers.length === 0) return void 0;
		return (date) => matchers.some((m) => m(date));
	}, [
		minDate,
		maxDate,
		disabledDates
	]);
}
function parseTime(time) {
	if (!time) return {
		hours: 12,
		minutes: 0
	};
	const [h, m] = time.split(":").map(Number);
	return {
		hours: h,
		minutes: m
	};
}
function DatePickerDayButton({ className, day, modifiers, ...props }) {
	const ref = React.useRef(null);
	React.useEffect(() => {
		if (modifiers.focused) ref.current?.focus();
	}, [modifiers.focused]);
	const isSelected = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle;
	const isRangeStart = modifiers.range_start;
	const isRangeEnd = modifiers.range_end;
	const isRangeMiddle = modifiers.range_middle;
	const isToday = modifiers.today;
	const isOutside = modifiers.outside;
	const isDisabled = modifiers.disabled;
	return /* @__PURE__ */ jsx("span", {
		className: cn("relative flex items-center justify-center size-8", isRangeMiddle && "bg-accent", isRangeStart && !isRangeEnd && "bg-linear-to-l from-accent to-transparent", isRangeEnd && !isRangeStart && "bg-linear-to-r from-accent to-transparent", isRangeStart && isRangeEnd && "bg-transparent"),
		children: /* @__PURE__ */ jsx("button", {
			ref,
			type: "button",
			"data-day": day.date.toLocaleDateString(),
			"data-selected": isSelected,
			"data-range-start": isRangeStart,
			"data-range-end": isRangeEnd,
			"data-range-middle": isRangeMiddle,
			disabled: isDisabled,
			className: cn("relative flex items-center justify-center size-8 rounded-md text-sm font-normal transition-[color,background-color,transform] duration-200 ease-smooth motion-reduce:transition-none select-none active:scale-[0.92] motion-reduce:active:scale-100", "text-card-foreground hover:bg-accent hover:text-accent-foreground", isOutside && "text-muted-foreground", isToday && !isSelected && !isRangeStart && !isRangeEnd && !isRangeMiddle && activeDayClasses, isSelected && activeDayClasses, (isRangeStart || isRangeEnd) && activeDayClasses, isRangeMiddle && "bg-transparent text-accent-foreground rounded-none hover:bg-accent/80", isDisabled && "text-muted-foreground cursor-not-allowed hover:bg-transparent", defaultDayPickerClassNames.day, className),
			...props
		})
	});
}
function buildCalendarClassNames({ showNav = false, isRange = false } = {}) {
	return {
		root: cn("w-fit", defaultDayPickerClassNames.root),
		months: cn(isRange ? "flex gap-2 flex-row relative" : "flex flex-col relative", defaultDayPickerClassNames.months),
		month: cn("flex flex-col w-full gap-4", defaultDayPickerClassNames.month),
		nav: showNav ? cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultDayPickerClassNames.nav) : cn("hidden", defaultDayPickerClassNames.nav),
		button_previous: showNav ? cn(navButtonClasses, defaultDayPickerClassNames.button_previous) : void 0,
		button_next: showNav ? cn(navButtonClasses, defaultDayPickerClassNames.button_next) : void 0,
		month_caption: showNav ? cn("flex items-center justify-center h-[26px] pt-1", defaultDayPickerClassNames.month_caption) : cn("hidden", defaultDayPickerClassNames.month_caption),
		caption_label: showNav ? cn("text-sm font-medium select-none text-foreground", defaultDayPickerClassNames.caption_label) : void 0,
		table: "w-full border-collapse",
		weekdays: cn("flex", defaultDayPickerClassNames.weekdays),
		weekday: cn("text-muted-foreground font-normal text-xs w-8 flex items-center justify-center py-0.5", defaultDayPickerClassNames.weekday),
		week: cn("flex w-full mt-2", defaultDayPickerClassNames.week),
		day: cn("relative p-0 text-center select-none", defaultDayPickerClassNames.day),
		outside: cn("text-muted-foreground", defaultDayPickerClassNames.outside),
		disabled: cn("text-muted-foreground cursor-not-allowed", defaultDayPickerClassNames.disabled),
		hidden: cn("invisible", defaultDayPickerClassNames.hidden),
		range_start: "rounded-l-md",
		range_middle: "rounded-none",
		range_end: "rounded-r-md"
	};
}
var calendarClassNames = buildCalendarClassNames();
var calendarClassNamesWithNav = buildCalendarClassNames({ showNav: true });
var calendarClassNamesWithNavRange = buildCalendarClassNames({
	showNav: true,
	isRange: true
});
var calendarComponentsWithNav = {
	DayButton: DatePickerDayButton,
	Chevron: DatePickerChevron
};
var calendarComponentsBase = { DayButton: DatePickerDayButton };
/**
* DatePicker - A date picker component with a popover calendar
* Matches the HumainOS design system
*/
function DatePicker({ value, onChange, placeholder = "Pick a date", disabled = false, className, dateFormat = "MMM d, yyyy", minDate, maxDate, disabledDates, dir = "ltr" }) {
	const [open, setOpen] = React.useState(false);
	const [month, setMonth] = React.useState(value || /* @__PURE__ */ new Date());
	React.useEffect(() => {
		if (open) setMonth(value || /* @__PURE__ */ new Date());
	}, [open, value]);
	const handleSelect = (date) => {
		onChange?.(date);
		setOpen(false);
	};
	const disabledMatcher = useDisabledMatcher(minDate, maxDate, disabledDates);
	return /* @__PURE__ */ jsxs(Popover, {
		open,
		onOpenChange: setOpen,
		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
			disabled,
			className: cn(triggerBaseClasses, "px-3", triggerInteractionClasses, !!value ? "text-foreground" : "text-muted-foreground", disabled && "opacity-50 cursor-not-allowed", className),
			children: [/* @__PURE__ */ jsx(Calendar, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
				className: "truncate leading-5",
				children: value ? format(value, dateFormat) : placeholder
			})]
		}), /* @__PURE__ */ jsx(PopoverPopup, {
			align: dir === "rtl" ? "end" : "start",
			sideOffset: 4,
			className: "w-auto p-0 rounded-xl border-0 shadow-sm",
			children: /* @__PURE__ */ jsx(DayPicker, {
				mode: "single",
				selected: value,
				onSelect: handleSelect,
				month,
				onMonthChange: setMonth,
				disabled: disabledMatcher,
				showOutsideDays: true,
				weekStartsOn: 0,
				dir,
				className: "p-3",
				classNames: calendarClassNamesWithNav,
				formatters: calendarFormatters,
				components: calendarComponentsWithNav
			})
		})]
	});
}
/**
* DateRangePicker - A date range picker component with a two-month popover calendar
* Matches the HumainOS design system
*/
function DateRangePicker({ value, onChange, placeholder = "Pick a date", disabled = false, className, dateFormat = "MMM d, yyyy", minDate, maxDate, disabledDates, dir = "ltr" }) {
	const [open, setOpen] = React.useState(false);
	const [month, setMonth] = React.useState(value?.from || /* @__PURE__ */ new Date());
	React.useEffect(() => {
		if (open) setMonth(value?.from || /* @__PURE__ */ new Date());
	}, [open, value]);
	const handleSelect = (range) => {
		onChange?.(range);
		if (range?.from && range?.to) setOpen(false);
	};
	const disabledMatcher = useDisabledMatcher(minDate, maxDate, disabledDates);
	const hasValue = value?.from || value?.to;
	const formatRangeDisplay = () => {
		if (!value?.from) return placeholder;
		if (!value?.to) return format(value.from, dateFormat);
		return `${format(value.from, dateFormat)} - ${format(value.to, dateFormat)}`;
	};
	return /* @__PURE__ */ jsxs(Popover, {
		open,
		onOpenChange: setOpen,
		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
			disabled,
			className: cn(triggerBaseClasses, "px-4", triggerInteractionClasses, hasValue ? "text-foreground" : "text-muted-foreground", disabled && "opacity-50 cursor-not-allowed", className),
			children: [/* @__PURE__ */ jsx(Calendar, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
				className: "truncate leading-5",
				children: formatRangeDisplay()
			})]
		}), /* @__PURE__ */ jsx(PopoverPopup, {
			align: dir === "rtl" ? "end" : "start",
			sideOffset: 4,
			className: "w-auto p-0 rounded-xl border-0 shadow-sm",
			children: /* @__PURE__ */ jsx(DayPicker, {
				mode: "range",
				selected: value,
				onSelect: handleSelect,
				month,
				onMonthChange: setMonth,
				numberOfMonths: 2,
				disabled: disabledMatcher,
				showOutsideDays: true,
				weekStartsOn: 0,
				dir,
				className: "p-3",
				classNames: calendarClassNamesWithNavRange,
				formatters: calendarFormatters,
				components: calendarComponentsWithNav
			})
		})]
	});
}
/**
* TimePicker - A time picker component with hour and minute selection
* Matches the HumainOS design system
*/
function TimePicker({ value, onChange, placeholder = "Select time", disabled = false, className, minTime, maxTime, minuteStep = 5, dir = "ltr", use24Hour = true }) {
	const [open, setOpen] = React.useState(false);
	const [tempTime, setTempTime] = React.useState(value);
	const isRtl = dir === "rtl";
	const { hours: selectedHours, minutes: selectedMinutes } = parseTime(tempTime);
	React.useEffect(() => {
		if (open) setTempTime(value);
	}, [open, value]);
	const hours = React.useMemo(() => {
		if (use24Hour) return Array.from({ length: 24 }, (_, i) => i);
		return Array.from({ length: 12 }, (_, i) => i + 1);
	}, [use24Hour]);
	const minutes = React.useMemo(() => {
		return Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
	}, [minuteStep]);
	const isTimeDisabled = React.useCallback((h, m) => {
		const timeValue = h * 60 + m;
		if (minTime) {
			const [minH, minM] = minTime.split(":").map(Number);
			if (timeValue < minH * 60 + minM) return true;
		}
		if (maxTime) {
			const [maxH, maxM] = maxTime.split(":").map(Number);
			if (timeValue > maxH * 60 + maxM) return true;
		}
		return false;
	}, [minTime, maxTime]);
	const handleHourSelect = (hour) => {
		setTempTime(`${hour.toString().padStart(2, "0")}:${selectedMinutes.toString().padStart(2, "0")}`);
	};
	const handleMinuteSelect = (minute) => {
		setTempTime(`${selectedHours.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`);
	};
	const handleApply = () => {
		onChange?.(tempTime);
		setOpen(false);
	};
	const handleCancel = () => {
		setTempTime(value);
		setOpen(false);
	};
	const handleNow = () => {
		const now = /* @__PURE__ */ new Date();
		const h = now.getHours();
		const m = Math.floor(now.getMinutes() / minuteStep) * minuteStep;
		setTempTime(`${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`);
	};
	const formatDisplayTime = (time) => {
		if (!time) return placeholder;
		if (use24Hour) return time;
		const { hours: h, minutes: m } = parseTime(time);
		const period = h >= 12 ? "PM" : "AM";
		return `${h % 12 || 12}:${m.toString().padStart(2, "0")} ${period}`;
	};
	const hasValue = !!value;
	const hoursRef = React.useRef(null);
	const minutesRef = React.useRef(null);
	React.useEffect(() => {
		if (open) {
			const timeToScroll = tempTime || value;
			const { hours: h, minutes: m } = timeToScroll ? parseTime(timeToScroll) : {
				hours: 12,
				minutes: 0
			};
			setTimeout(() => {
				if (hoursRef.current) {
					const hourIndex = use24Hour ? h : (h % 12 || 12) - 1;
					const hourElement = hoursRef.current.children[hourIndex];
					if (hourElement) hourElement.scrollIntoView({
						block: "center",
						behavior: "instant"
					});
				}
				if (minutesRef.current) {
					const minuteIndex = Math.floor(m / minuteStep);
					const minuteElement = minutesRef.current.children[minuteIndex];
					if (minuteElement) minuteElement.scrollIntoView({
						block: "center",
						behavior: "instant"
					});
				}
			}, 0);
		}
	}, [
		open,
		tempTime,
		value,
		use24Hour,
		minuteStep
	]);
	return /* @__PURE__ */ jsxs(Popover, {
		open,
		onOpenChange: setOpen,
		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
			disabled,
			className: cn(triggerBaseClasses, "px-3", triggerInteractionClasses, hasValue ? "text-foreground" : "text-muted-foreground", disabled && "opacity-50 cursor-not-allowed", className),
			children: [/* @__PURE__ */ jsx(Clock, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
				className: "truncate leading-5",
				children: formatDisplayTime(value)
			})]
		}), /* @__PURE__ */ jsx(PopoverPopup, {
			align: isRtl ? "end" : "start",
			sideOffset: 4,
			className: "w-[280px] max-w-[calc(100vw-2rem)] p-0 rounded-xl border-0 shadow-sm",
			children: /* @__PURE__ */ jsxs("div", {
				className: "flex flex-col",
				dir,
				children: [/* @__PURE__ */ jsxs("div", {
					className: "px-4 py-4 flex flex-col gap-3",
					children: [/* @__PURE__ */ jsxs("div", {
						className: "flex items-start gap-3",
						children: [/* @__PURE__ */ jsx("div", {
							className: "flex-1",
							children: /* @__PURE__ */ jsx("div", {
								role: "status",
								"aria-live": "polite",
								className: "flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground shadow-xs items-center justify-center font-medium",
								children: tempTime ? formatDisplayTime(tempTime) : "Select time"
							})
						}), /* @__PURE__ */ jsx(Button, {
							variant: "secondary",
							className: "shrink-0",
							onClick: handleNow,
							children: "Now"
						})]
					}), /* @__PURE__ */ jsxs("div", {
						className: "flex gap-2",
						children: [
							/* @__PURE__ */ jsxs("div", {
								className: "flex-1 flex flex-col",
								children: [/* @__PURE__ */ jsx("div", {
									className: "text-xs font-normal text-muted-foreground text-center mb-2",
									children: isRtl ? "ساعة" : "Hour"
								}), /* @__PURE__ */ jsx("div", {
									ref: hoursRef,
									role: "listbox",
									"aria-label": isRtl ? "ساعة" : "Hour",
									className: "h-[200px] overflow-y-auto scrollbar-thin scrollbar-thumb-border-tertiary scrollbar-track-transparent",
									children: hours.map((hour) => {
										const isSelected = use24Hour ? hour === selectedHours : hour === (selectedHours % 12 || 12);
										const isDisabled = isTimeDisabled(hour, selectedMinutes);
										return /* @__PURE__ */ jsx("button", {
											type: "button",
											role: "option",
											"aria-selected": isSelected,
											disabled: isDisabled,
											onClick: () => handleHourSelect(hour),
											className: cn(timeItemClasses, "hover:bg-accent hover:text-accent-foreground", isSelected && activeDayClasses, isDisabled && "text-muted-foreground cursor-not-allowed hover:bg-transparent"),
											children: hour.toString().padStart(2, "0")
										}, hour);
									})
								})]
							}),
							/* @__PURE__ */ jsx("div", {
								className: "flex items-center justify-center text-2xl font-bold text-muted-foreground pt-6",
								children: ":"
							}),
							/* @__PURE__ */ jsxs("div", {
								className: "flex-1 flex flex-col",
								children: [/* @__PURE__ */ jsx("div", {
									className: "text-xs font-normal text-muted-foreground text-center mb-2",
									children: isRtl ? "دقيقة" : "Min"
								}), /* @__PURE__ */ jsx("div", {
									ref: minutesRef,
									role: "listbox",
									"aria-label": isRtl ? "دقيقة" : "Minutes",
									className: "h-[200px] overflow-y-auto scrollbar-thin scrollbar-thumb-border-tertiary scrollbar-track-transparent",
									children: minutes.map((minute) => {
										const isSelected = minute === selectedMinutes;
										const isDisabled = isTimeDisabled(selectedHours, minute);
										return /* @__PURE__ */ jsx("button", {
											type: "button",
											role: "option",
											"aria-selected": isSelected,
											disabled: isDisabled,
											onClick: () => handleMinuteSelect(minute),
											className: cn(timeItemClasses, "hover:bg-accent hover:text-accent-foreground", isSelected && activeDayClasses, isDisabled && "text-muted-foreground cursor-not-allowed hover:bg-transparent"),
											children: minute.toString().padStart(2, "0")
										}, minute);
									})
								})]
							})
						]
					})]
				}), /* @__PURE__ */ jsxs("div", {
					className: "flex gap-3 p-4 border-t border-border",
					children: [/* @__PURE__ */ jsx(Button, {
						variant: "secondary",
						className: "flex-1",
						onClick: handleCancel,
						children: isRtl ? "إلغاء" : "Cancel"
					}), /* @__PURE__ */ jsx(Button, {
						variant: "primary",
						className: "flex-1",
						onClick: handleApply,
						children: isRtl ? "تطبيق" : "Apply"
					})]
				})]
			})
		})]
	});
}
/**
* Shared popover layout for DateFilterButton and DateRangeFilterButton.
* Encapsulates trigger styling, month navigation, Today button row, and Apply/Cancel footer.
*/
function DateFilterPopoverBase({ open, onOpenChange, disabled = false, className, dir = "ltr", triggerLabel, month, onMonthChange, displayContent, onToday, onApply, onCancel, children }) {
	const isRtl = dir === "rtl";
	const goToPreviousMonth = () => onMonthChange((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
	const goToNextMonth = () => onMonthChange((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
	return /* @__PURE__ */ jsxs(Popover, {
		open,
		onOpenChange,
		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
			disabled,
			className: cn("inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-muted text-sm font-medium transition-colors duration-200 ease-smooth motion-reduce:transition-none", "hover:bg-surface-1 focus-visible:outline-none", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border", "text-foreground", disabled && "opacity-50 cursor-not-allowed", open && "ring-2 ring-offset-2 ring-border", className),
			children: [/* @__PURE__ */ jsx("span", {
				className: "px-0.5",
				children: triggerLabel
			}), /* @__PURE__ */ jsx(Calendar, { className: "size-3.5 text-foreground" })]
		}), /* @__PURE__ */ jsx(PopoverPopup, {
			align: isRtl ? "end" : "start",
			sideOffset: 8,
			className: "w-[328px] max-w-[calc(100vw-2rem)] p-0 rounded-xl border border-border shadow-xl",
			children: /* @__PURE__ */ jsxs("div", {
				className: "flex flex-col",
				dir,
				children: [/* @__PURE__ */ jsxs("div", {
					className: "px-6 py-5 flex flex-col gap-3",
					children: [
						/* @__PURE__ */ jsxs("div", {
							className: "flex items-center justify-between pb-1",
							children: [
								/* @__PURE__ */ jsx("button", {
									type: "button",
									onClick: goToPreviousMonth,
									"aria-label": "Previous month",
									className: "p-1.5 rounded-md hover:bg-muted text-muted-foreground transition-colors duration-200 ease-smooth motion-reduce:transition-none",
									children: isRtl ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-5" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" })
								}),
								/* @__PURE__ */ jsxs("div", {
									className: "flex items-center gap-2",
									children: [/* @__PURE__ */ jsx("span", {
										className: "text-base font-semibold text-secondary-foreground",
										children: format(month, "MMMM")
									}), /* @__PURE__ */ jsx("span", {
										className: "text-base font-semibold text-secondary-foreground",
										children: format(month, "yyyy")
									})]
								}),
								/* @__PURE__ */ jsx("button", {
									type: "button",
									onClick: goToNextMonth,
									"aria-label": "Next month",
									className: "p-1.5 rounded-md hover:bg-muted text-muted-foreground transition-colors duration-200 ease-smooth motion-reduce:transition-none",
									children: isRtl ? /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-5" })
								})
							]
						}),
						/* @__PURE__ */ jsxs("div", {
							className: "flex items-start gap-3",
							children: [/* @__PURE__ */ jsx("div", {
								className: "flex h-10 w-full flex-1 rounded-lg border border-border bg-background px-3 py-2 text-base text-foreground shadow-sm",
								children: displayContent
							}), /* @__PURE__ */ jsx(Button, {
								variant: "secondary",
								className: "shrink-0",
								onClick: onToday,
								children: "Today"
							})]
						}),
						children
					]
				}), /* @__PURE__ */ jsxs("div", {
					className: "flex gap-3 p-4 border-t border-border",
					children: [/* @__PURE__ */ jsx(Button, {
						variant: "secondary",
						className: "flex-1",
						onClick: onCancel,
						children: "Cancel"
					}), /* @__PURE__ */ jsx(Button, {
						appearance: "gradient",
						variant: "primary",
						className: "flex-1",
						onClick: onApply,
						children: "Apply"
					})]
				})]
			})
		})]
	});
}
DateFilterPopoverBase.displayName = "DateFilterPopoverBase";
/**
* DateFilterButton - A compact date filter button matching Figma filter button design
* Gray background, rounded corners, compact padding with calendar icon
*/
function DateFilterButton({ value, onChange, placeholder = "Select date", disabled = false, className, dateFormat = "d/M/yyyy", minDate, maxDate, disabledDates, dir = "ltr" }) {
	const [open, setOpen] = React.useState(false);
	const [month, setMonth] = React.useState(value || /* @__PURE__ */ new Date());
	const [tempDate, setTempDate] = React.useState(value);
	React.useEffect(() => {
		if (open) {
			setTempDate(value);
			setMonth(value || /* @__PURE__ */ new Date());
		}
	}, [open, value]);
	const disabledMatcher = useDisabledMatcher(minDate, maxDate, disabledDates);
	return /* @__PURE__ */ jsx(DateFilterPopoverBase, {
		open,
		onOpenChange: setOpen,
		disabled,
		className,
		dir,
		triggerLabel: value ? format(value, dateFormat) : placeholder,
		month,
		onMonthChange: setMonth,
		displayContent: tempDate ? format(tempDate, dateFormat) : /* @__PURE__ */ jsx("span", {
			className: "text-muted-foreground",
			children: "Select date"
		}),
		onToday: () => {
			const today = /* @__PURE__ */ new Date();
			setTempDate(today);
			setMonth(today);
		},
		onApply: () => {
			onChange?.(tempDate);
			setOpen(false);
		},
		onCancel: () => {
			setTempDate(value);
			setOpen(false);
		},
		children: /* @__PURE__ */ jsx(DayPicker, {
			mode: "single",
			selected: tempDate,
			onSelect: setTempDate,
			month,
			onMonthChange: setMonth,
			disabled: disabledMatcher,
			showOutsideDays: true,
			weekStartsOn: 1,
			dir,
			className: "p-0",
			classNames: calendarClassNames,
			formatters: calendarFormatters,
			components: calendarComponentsBase
		})
	});
}
/**
* DateRangeFilterButton - A compact date range filter button matching Figma filter button design
* Gray background, rounded corners, compact padding with calendar icon
*/
function DateRangeFilterButton({ value, onChange, placeholder = "Select dates", disabled = false, className, dateFormat = "d/M/yyyy", minDate, maxDate, disabledDates, dir = "ltr" }) {
	const [open, setOpen] = React.useState(false);
	const [month, setMonth] = React.useState(value?.from || /* @__PURE__ */ new Date());
	const [tempRange, setTempRange] = React.useState(value);
	React.useEffect(() => {
		if (open) {
			setTempRange(value);
			setMonth(value?.from || /* @__PURE__ */ new Date());
		}
	}, [open, value]);
	const disabledMatcher = useDisabledMatcher(minDate, maxDate, disabledDates);
	const formatRangeDisplay = () => {
		if (!value?.from) return placeholder;
		if (!value?.to) return format(value.from, dateFormat);
		return `${format(value.from, dateFormat)} - ${format(value.to, dateFormat)}`;
	};
	const formatTempRangeDisplay = () => {
		if (!tempRange?.from) return "Select dates";
		if (!tempRange?.to) return format(tempRange.from, dateFormat);
		return `${format(tempRange.from, dateFormat)} - ${format(tempRange.to, dateFormat)}`;
	};
	return /* @__PURE__ */ jsx(DateFilterPopoverBase, {
		open,
		onOpenChange: setOpen,
		disabled,
		className,
		dir,
		triggerLabel: formatRangeDisplay(),
		month,
		onMonthChange: setMonth,
		displayContent: tempRange?.from ? formatTempRangeDisplay() : /* @__PURE__ */ jsx("span", {
			className: "text-muted-foreground",
			children: "Select dates"
		}),
		onToday: () => {
			const today = /* @__PURE__ */ new Date();
			setTempRange({
				from: today,
				to: today
			});
			setMonth(today);
		},
		onApply: () => {
			onChange?.(tempRange);
			setOpen(false);
		},
		onCancel: () => {
			setTempRange(value);
			setOpen(false);
		},
		children: /* @__PURE__ */ jsx(DayPicker, {
			mode: "range",
			selected: tempRange,
			onSelect: setTempRange,
			month,
			onMonthChange: setMonth,
			disabled: disabledMatcher,
			showOutsideDays: true,
			weekStartsOn: 1,
			dir,
			className: "p-0",
			classNames: calendarClassNames,
			formatters: calendarFormatters,
			components: calendarComponentsBase
		})
	});
}
DatePicker.displayName = "DatePicker";
DateRangePicker.displayName = "DateRangePicker";
TimePicker.displayName = "TimePicker";
DateFilterButton.displayName = "DateFilterButton";
DateRangeFilterButton.displayName = "DateRangeFilterButton";
//#endregion
export { DateFilterButton, DatePicker, DateRangeFilterButton, DateRangePicker, TimePicker };

//# sourceMappingURL=index80.js.map