@datum-cloud/datum-ui 0.6.0 → 0.7.0

package/dist/{calendar-date-picker-CDT-8Ha8.mjs → calendar-date-picker-BaykEs6j.mjs}

@@ -1,15 +1,16 @@
 import { t as cn } from "./cn-D2KYQ917.mjs";
 import { t as Button } from "./button-D3RrsMfQ.mjs";
-import { t as Calendar$1 } from "./calendar-DEkCw7I1.mjs";
-import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-FJAcbYoH.mjs";
-import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-CiLR_DiQ.mjs";
+import { t as Calendar$1 } from "./calendar-C-Hbf74r.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-D-t9bxSN.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-zxwykvQn.mjs";
+import { t as useDateConstraints } from "./use-date-constraints-R3H4lIoT.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
+//#region src/components/features/calendar-date-picker/types.ts
 const months = [
 	"January",
 	"February",
@@ -35,7 +36,196 @@ const multiSelectVariants = cva("flex font-normal shadow-none items-center justi
 	} },
 	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, disabled, modal = false, ...props }) {
+//#endregion
+//#region src/components/features/calendar-date-picker/calendar-header.tsx
+function CalendarHeader({ monthFrom, yearFrom, monthTo, yearTo, years, numberOfMonths, onMonthChange, onYearChange }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-4 px-3 py-2 sm:px-4 sm:py-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsxs(Select, {
+				onValueChange: (value) => {
+					onMonthChange(months.indexOf(value), "from");
+				},
+				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) => {
+					onYearChange(Number(value), "from");
+				},
+				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) => {
+					onMonthChange(months.indexOf(value), "to");
+				},
+				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) => {
+					onYearChange(Number(value), "to");
+				},
+				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)) })]
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/calendar-date-picker/calendar-presets.tsx
+function CalendarPresets({ dateRanges, selectedRange, onSelect }) {
+	return /* @__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: () => onSelect(start, end, label),
+			children: label
+		}, key))
+	});
+}
+//#endregion
+//#region src/components/features/calendar-date-picker/date-trigger.tsx
+function DateTrigger({ ref, id, date, placeholder, disabled, numberOfMonths, highlightedPart, handleMouseOver, handleMouseLeave, handleClear, handleTogglePopover, formatWithTz, variant, className, triggerClassName, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		id: "date",
+		ref,
+		...props,
+		disabled,
+		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"
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/features/calendar-date-picker/use-calendar-date-picker.ts
+function useCalendarDatePicker(props) {
+	const { id = "calendar-date-picker", date, closeOnSelect = false, numberOfMonths = 2, yearsRange = 10, onDateSelect, 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);
@@ -46,35 +236,12 @@ function CalendarDatePicker({ ref, id = "calendar-date-picker", className, trigg
 	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;
-	}, [
+	const { effectiveMinDate, effectiveMaxDate, isDateDisabled } = useDateConstraints({
 		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]);
+		disablePast,
+		disableFuture
+	});
 	const getDaysDifference = React$1.useCallback((from, to) => {
 		const timeDiff = Math.abs(to.getTime() - from.getTime());
 		return Math.ceil(timeDiff / (1e3 * 60 * 60 * 24));
@@ -123,7 +290,6 @@ function CalendarDatePicker({ ref, id = "calendar-date-picker", className, trigg
 	React$1.useEffect(() => {
 		setPendingDate(date);
 	}, [date]);
-	const handleClose = () => setIsPopoverOpen(false);
 	const handleTogglePopover = () => setIsPopoverOpen((prev) => !prev);
 	const handleClear = (e) => {
 		e.stopPropagation();
@@ -414,229 +580,147 @@ function CalendarDatePicker({ ref, id = "calendar-date-picker", className, trigg
 		};
 	}, [highlightedPart, pendingDate]);
 	const formatWithTz = (date, fmt) => formatInTimeZone(date, timeZone, fmt);
+	return {
+		isPopoverOpen,
+		setIsPopoverOpen,
+		selectedRange,
+		setSelectedRange,
+		monthFrom,
+		setMonthFrom,
+		yearFrom,
+		setYearFrom,
+		monthTo,
+		setMonthTo,
+		yearTo,
+		setYearTo,
+		highlightedPart,
+		pendingDate,
+		timeZone,
+		today,
+		effectiveMinDate,
+		effectiveMaxDate,
+		years,
+		dateRanges,
+		isDateDisabled,
+		getDaysDifference,
+		isRangeValid,
+		adjustRangeToMaxRange,
+		handleTogglePopover,
+		handleClear,
+		handleApply,
+		handleReset,
+		selectDateRange,
+		handleDateSelect,
+		handleMonthChange,
+		handleYearChange,
+		handleMouseOver,
+		handleMouseLeave,
+		handleWheel,
+		formatWithTz
+	};
+}
+//#endregion
+//#region src/components/features/calendar-date-picker/calendar-date-picker.tsx
+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, disabled, modal = false, responsive, sheetTitle, ...props }) {
+	const picker = useCalendarDatePicker({
+		id,
+		date,
+		closeOnSelect,
+		numberOfMonths,
+		yearsRange,
+		onDateSelect,
+		excludePresets,
+		customPresets,
+		minDate,
+		maxDate,
+		disableFuture,
+		disablePast,
+		maxRange
+	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("style", { children: `
             .date-part {
               touch-action: none;
             }
-          ` }), /* @__PURE__ */ jsxs(Popover, {
-		open: isPopoverOpen,
-		onOpenChange: setIsPopoverOpen,
+          ` }), /* @__PURE__ */ jsx(ResponsivePopover, {
+		open: picker.isPopoverOpen,
+		onOpenChange: picker.setIsPopoverOpen,
+		responsive,
+		sheetTitle: sheetTitle ?? placeholder ?? "Pick a date",
+		align: "center",
+		avoidCollisions: false,
+		contentClassName: cn("w-full sm:w-auto popover-content-width-full", popoverClassName),
 		modal,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx(Button, {
-				id: "date",
-				ref,
-				...props,
-				disabled,
-				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,
+		onInteractOutside: () => picker.setIsPopoverOpen(false),
+		onEscapeKeyDown: () => picker.setIsPopoverOpen(false),
+		trigger: /* @__PURE__ */ jsx(DateTrigger, {
+			ref,
+			id,
+			date,
+			placeholder,
+			disabled,
+			numberOfMonths,
+			highlightedPart: picker.highlightedPart,
+			handleMouseOver: picker.handleMouseOver,
+			handleMouseLeave: picker.handleMouseLeave,
+			handleClear: picker.handleClear,
+			handleTogglePopover: picker.handleTogglePopover,
+			formatWithTz: picker.formatWithTz,
+			variant,
+			className,
+			triggerClassName,
+			...props
+		}),
+		children: picker.isPopoverOpen && /* @__PURE__ */ jsx("div", {
 			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))
+				children: [numberOfMonths === 2 && /* @__PURE__ */ jsx(CalendarPresets, {
+					dateRanges: picker.dateRanges,
+					selectedRange: picker.selectedRange,
+					onSelect: (start, end, label) => {
+						picker.selectDateRange(start, end, label);
+						picker.setMonthFrom(start);
+						picker.setYearFrom(start.getFullYear());
+						picker.setMonthTo(end);
+						picker.setYearTo(end.getFullYear());
+					}
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col",
+					className: "flex w-full 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(CalendarHeader, {
+							monthFrom: picker.monthFrom,
+							yearFrom: picker.yearFrom,
+							monthTo: picker.monthTo,
+							yearTo: picker.yearTo,
+							years: picker.years,
+							numberOfMonths,
+							onMonthChange: (month, target) => {
+								picker.handleMonthChange(month, target);
+								picker.setSelectedRange(null);
+							},
+							onYearChange: (year, target) => {
+								picker.handleYearChange(year, target);
+								picker.setSelectedRange(null);
+							}
 						}),
 						/* @__PURE__ */ jsx("div", {
-							className: "flex",
+							className: "flex w-full justify-center",
 							children: /* @__PURE__ */ jsx(Calendar$1, {
 								mode: "range",
-								defaultMonth: monthFrom,
-								month: monthFrom,
-								onMonthChange: setMonthFrom,
-								selected: pendingDate,
-								onSelect: handleDateSelect,
+								defaultMonth: picker.monthFrom,
+								month: picker.monthFrom,
+								onMonthChange: picker.setMonthFrom,
+								selected: picker.pendingDate,
+								onSelect: picker.handleDateSelect,
 								numberOfMonths,
 								showOutsideDays: false,
-								disabled: isDateDisabled,
-								fromDate: effectiveMinDate,
-								toDate: effectiveMaxDate,
-								className
+								disabled: picker.isDateDisabled,
+								fromDate: picker.effectiveMinDate,
+								toDate: picker.effectiveMaxDate,
+								className: cn("w-full sm:w-auto", className)
 							})
 						}),
 						!closeOnSelect && /* @__PURE__ */ jsxs("div", {
@@ -644,12 +728,12 @@ function CalendarDatePicker({ ref, id = "calendar-date-picker", className, trigg
 							children: [/* @__PURE__ */ jsx(Button, {
 								variant: "outline",
 								size: "sm",
-								onClick: handleReset,
+								onClick: picker.handleReset,
 								type: "button",
 								children: "Reset"
 							}), /* @__PURE__ */ jsx(Button, {
 								size: "sm",
-								onClick: handleApply,
+								onClick: picker.handleApply,
 								type: "button",
 								children: "Apply"
 							})]
@@ -657,7 +741,7 @@ function CalendarDatePicker({ ref, id = "calendar-date-picker", className, trigg
 					]
 				})]
 			})
-		})]
+		})
 	})] });
 }
 CalendarDatePicker.displayName = "CalendarDatePicker";

package/dist/code-editor/index.mjs

@@ -1,2 +1,2 @@
-import { a as formatJson, c as isValidYaml, d as CodeEditor, i as CodeEditorTabs, l as jsonToYaml, n as jsonSchema, o as formatYaml, r as yamlSchema, s as isValidJson, t as createCodeEditorSchema, u as yamlToJson } from "../types-BZNk3q65.mjs";
+import { a as formatJson, c as isValidYaml, d as CodeEditor, i as CodeEditorTabs, l as jsonToYaml, n as jsonSchema, o as formatYaml, r as yamlSchema, s as isValidJson, t as createCodeEditorSchema, u as yamlToJson } from "../types-CKIe2WlV.mjs";
 export { CodeEditor, CodeEditorTabs, createCodeEditorSchema, formatJson, formatYaml, isValidJson, isValidYaml, jsonSchema, jsonToYaml, yamlSchema, yamlToJson };

package/dist/components/base/date-picker/index.d.ts

@@ -0,0 +1,4 @@
+export type { DateConstraints } from './types';
+export { useDateConstraints } from './use-date-constraints';
+export type { UseDateConstraintsReturn } from './use-date-constraints';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/base/date-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/base/date-picker/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/components/base/date-picker/types.d.ts

@@ -0,0 +1,7 @@
+export interface DateConstraints {
+    minDate?: Date;
+    maxDate?: Date;
+    disableFuture?: boolean;
+    disablePast?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/base/date-picker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/date-picker/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB"}