@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/date-picker.d.mts

@@ -0,0 +1,111 @@
+import * as React from "react";
+//#region src/date-picker.d.ts
+/**
+ * Shared by every picker here: where the calendar popover is portalled, and whether it is its own
+ * modal layer. Both default to the right thing — the popover renders inside the enclosing
+ * `DialogContent` when there is one, which is what keeps the calendar clickable inside a dialog
+ * (issue #294) — so these exist for the host that needs to override it.
+ */
+export interface DatePickerPopoverProps {
+  /** Portal target. Defaults to the enclosing `DialogContent`, else `document.body`. `null` forces `document.body`. */
+  container?: HTMLElement | null;
+  /** Makes the popover its own modal layer (takes pointer events from below and traps focus). */
+  modal?: boolean;
+}
+export interface DatePickerProps extends DatePickerPopoverProps {
+  date?: Date;
+  onDateChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+/** Date picker with multiple variants including presets, date-time, and range selection. */
+declare function DatePicker({ date, onDateChange, placeholder, className, disabled, container, modal }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export interface DatePickerWithPresetsProps extends DatePickerPopoverProps {
+  date?: Date;
+  onDateChange?: (date: Date | undefined) => void;
+  className?: string;
+}
+declare function DatePickerWithPresets({ date, onDateChange, className, container, modal }: DatePickerWithPresetsProps): import("react/jsx-runtime").JSX.Element;
+export interface DatePickerFormProps extends DatePickerPopoverProps {
+  date?: Date;
+  onDateChange?: (date: Date | undefined) => void;
+  label?: string;
+  description?: string;
+  className?: string;
+}
+declare function DatePickerForm({ date, onDateChange, label, description, className, container, modal }: DatePickerFormProps): import("react/jsx-runtime").JSX.Element;
+export interface DatePickerWithInputProps extends DatePickerPopoverProps {
+  date?: Date;
+  onDateChange?: (date: Date | undefined) => void;
+  className?: string;
+}
+declare function DatePickerWithInput({ date, onDateChange, className, container, modal }: DatePickerWithInputProps): import("react/jsx-runtime").JSX.Element;
+export interface DateTimePickerProps extends DatePickerPopoverProps {
+  date?: Date;
+  onDateChange?: (date: Date | undefined) => void;
+  /**
+   * `"split"` (default) renders a date button beside a separate time select — two controls.
+   * `"unified"` renders a single trigger whose popover holds the calendar, the time row, and
+   * Cancel/Apply, mirroring `DateRangeTimePicker`. Prefer `"unified"` inside forms, where two
+   * side-by-side controls under one label read as two fields.
+   */
+  variant?: "split" | "unified";
+  /** Trigger text before a date is picked. Unified variant only. */
+  placeholder?: string;
+  className?: string;
+}
+declare function DateTimePicker({ date, onDateChange, variant, placeholder, className, container, modal }: DateTimePickerProps): import("react/jsx-runtime").JSX.Element;
+export interface DateRangePickerProps extends DatePickerPopoverProps {
+  dateRange?: {
+    from: Date | undefined;
+    to: Date | undefined;
+  };
+  onDateRangeChange?: (range: {
+    from: Date | undefined;
+    to: Date | undefined;
+  }) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+declare function DateRangePicker({ dateRange, onDateRangeChange, placeholder, className, disabled, container, modal }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export interface DateRangeTimePickerProps extends DatePickerPopoverProps {
+  dateRange?: {
+    from: Date | undefined;
+    to: Date | undefined;
+  };
+  onDateRangeChange?: (range: {
+    from: Date | undefined;
+    to: Date | undefined;
+  }) => void;
+  placeholder?: string;
+  className?: string;
+  /** Render as a square icon-only trigger (for toolbars sitting next to other icon buttons). */
+  iconOnly?: boolean;
+  /** Accessible name for the icon-only trigger. Defaults to the placeholder. */
+  "aria-label"?: string;
+  /** Hover/focus hint on the icon-only trigger. Defaults to the aria-label; pass `null` to suppress. */
+  tooltip?: React.ReactNode;
+}
+export interface TimePickerProps {
+  /** 12-hour time string, e.g. `"06:30 PM"`. Empty string means nothing picked yet. */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  /** Minutes between options. 15 by default; use 5 or 1 for finer control. */
+  step?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  id?: string;
+  "aria-label"?: string;
+  className?: string;
+}
+/**
+ * Time-of-day dropdown. Use this instead of `<input type="time">`, whose picker is rendered by the
+ * OS and so ignores the design system entirely.
+ */
+declare function TimePicker({ value, onValueChange, step, placeholder, disabled, id, "aria-label": ariaLabel, className }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+declare function DateRangeTimePicker({ dateRange, onDateRangeChange, placeholder, className, iconOnly, "aria-label": ariaLabel, tooltip, container, modal }: DateRangeTimePickerProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { DatePicker, DatePickerForm, DatePickerWithInput, DatePickerWithPresets, DateRangePicker, DateRangeTimePicker, DateTimePicker, TimePicker };
+//# sourceMappingURL=date-picker.d.mts.map

package/dist/date-picker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.mts","names":[],"sources":["../src/date-picker.tsx"],"mappings":";;;;;;;;iBAmBiB;;EAEhB,YAAY;;EAEZ;;iBAGgB,wBAAwB;EACxC,OAAO;EACP,gBAAgB,MAAM;EACtB;EACA;EACA;;;iBAIQ,aACR,MACA,cACA,aACA,WACA,UACA,WACA,SACE,8CAAe,IAAA;iBAyBD,mCAAmC;EACnD,OAAO;EACP,gBAAgB,MAAM;EACtB;;iBAGQ,wBAAuB,MAAM,cAAc,WAAW,WAAW,SAAQ,yDAA0B,IAAA;iBAqC3F,4BAA4B;EAC5C,OAAO;EACP,gBAAgB,MAAM;EACtB;EACA;EACA;;iBAGQ,iBACR,MACA,cACA,OACA,aACA,WACA,WACA,SACE,kDAAmB,IAAA;iBAmCL,iCAAiC;EACjD,OAAO;EACP,gBAAgB,MAAM;EACtB;;iBAGQ,sBAAqB,MAAM,cAAc,WAAW,WAAW,SAAQ,uDAAwB,IAAA;iBAuDvF,4BAA4B;EAC5C,OAAO;EACP,gBAAgB,MAAM;;;;;;;EAOtB;;EAEA;EACA;;iBAGQ,iBACR,MACA,cACA,SACA,aACA,WACA,WACA,SACE,kDAAmB,IAAA;iBA4LL,6BAA6B;EAC7C;IAAa,MAAM;IAAkB,IAAI;;EACzC,qBAAqB;IAAQ,MAAM;IAAkB,IAAI;;EACzD;EACA;EACA;;iBAGQ,kBACR,WACA,mBACA,aACA,WACA,UACA,WACA,SACE,mDAAoB,IAAA;iBA0CN,iCAAiC;EACjD;IAAa,MAAM;IAAkB,IAAI;;EACzC,qBAAqB;IAAQ,MAAM;IAAkB,IAAI;;EACzD;EACA;;EAEA;;EAEA;;EAEA,UAAU,MAAM;;iBAGA;;EAEhB;EACA,iBAAiB;;EAEjB;EACA;EACA;EACA;EACA;EACA;;;;;;iBAqBQ,aACR,OACA,eACA,MACA,aACA,UACA,kBACc,WACd,aACE,8CAAe,IAAA;iBAkCT,sBACR,WACA,mBACA,aACA,WACA,wBACc,WACd,SACA,WACA,SACE,uDAAwB,IAAA"}

package/dist/date-picker.mjs

@@ -0,0 +1,546 @@
+import { HoverTooltip } from "./tooltip.mjs";
+import { Button } from "./button.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.mjs";
+import { Calendar as Calendar$1 } from "./calendar.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.mjs";
+import { Label } from "./label.mjs";
+import { Input } from "./input.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Calendar } from "lucide-react";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { addDays, format } from "date-fns";
+//#region src/date-picker.tsx
+/** Date picker with multiple variants including presets, date-time, and range selection. */
+function DatePicker({ date, onDateChange, placeholder = "Pick a date", className, disabled = false, container, modal }) {
+	return /* @__PURE__ */ jsxs(Popover, {
+		modal,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				className: cn("wwc:h-9 wwc:w-[280px] wwc:justify-start wwc:text-left wwc:font-normal", !date && "wwc:text-muted-foreground", className),
+				disabled,
+				children: [/* @__PURE__ */ jsx(Calendar, {}), date ? format(date, "PPP") : /* @__PURE__ */ jsx("span", { children: placeholder })]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			container,
+			className: "wwc:w-auto wwc:p-0",
+			children: /* @__PURE__ */ jsx(Calendar$1, {
+				mode: "single",
+				selected: date,
+				onSelect: onDateChange,
+				initialFocus: true
+			})
+		})]
+	});
+}
+function DatePickerWithPresets({ date, onDateChange, className, container, modal }) {
+	return /* @__PURE__ */ jsxs(Popover, {
+		modal,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				className: cn("wwc:h-9 wwc:w-[280px] wwc:justify-start wwc:text-left wwc:font-normal", !date && "wwc:text-muted-foreground", className),
+				children: [/* @__PURE__ */ jsx(Calendar, {}), date ? format(date, "PPP") : /* @__PURE__ */ jsx("span", { children: "Pick a date" })]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			container,
+			className: "wwc:flex wwc:w-auto wwc:flex-col wwc:space-y-2 wwc:p-2",
+			children: [/* @__PURE__ */ jsxs(Select, {
+				onValueChange: (value) => onDateChange?.(addDays(/* @__PURE__ */ new Date(), Number.parseInt(value))),
+				children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select" }) }), /* @__PURE__ */ jsxs(SelectContent, {
+					position: "popper",
+					children: [
+						/* @__PURE__ */ jsx(SelectItem, {
+							value: "0",
+							children: "Today"
+						}),
+						/* @__PURE__ */ jsx(SelectItem, {
+							value: "1",
+							children: "Tomorrow"
+						}),
+						/* @__PURE__ */ jsx(SelectItem, {
+							value: "3",
+							children: "In 3 days"
+						}),
+						/* @__PURE__ */ jsx(SelectItem, {
+							value: "7",
+							children: "In a week"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "wwc:rounded-md wwc:border",
+				children: /* @__PURE__ */ jsx(Calendar$1, {
+					mode: "single",
+					selected: date,
+					onSelect: onDateChange
+				})
+			})]
+		})]
+	});
+}
+function DatePickerForm({ date, onDateChange, label = "Date of birth", description, className, container, modal }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:space-y-2", className),
+		children: [
+			/* @__PURE__ */ jsx(Label, { children: label }),
+			/* @__PURE__ */ jsxs(Popover, {
+				modal,
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						className: cn("wwc:h-9 wwc:w-[280px] wwc:justify-start wwc:text-left wwc:font-normal", !date && "wwc:text-muted-foreground"),
+						children: [/* @__PURE__ */ jsx(Calendar, {}), date ? format(date, "PPP") : /* @__PURE__ */ jsx("span", { children: "Pick a date" })]
+					})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					container,
+					className: "wwc:w-auto wwc:p-0",
+					align: "start",
+					children: /* @__PURE__ */ jsx(Calendar$1, {
+						mode: "single",
+						selected: date,
+						onSelect: onDateChange,
+						captionLayout: "dropdown",
+						startMonth: new Date(1900, 0),
+						endMonth: /* @__PURE__ */ new Date(),
+						initialFocus: true
+					})
+				})]
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "wwc:text-sm wwc:text-muted-foreground",
+				children: description
+			})
+		]
+	});
+}
+function DatePickerWithInput({ date, onDateChange, className, container, modal }) {
+	const [inputValue, setInputValue] = React.useState("");
+	React.useEffect(() => {
+		if (date) setInputValue(format(date, "MM/dd/yyyy"));
+	}, [date]);
+	const handleInputChange = (e) => {
+		const value = e.target.value;
+		setInputValue(value);
+		const parsed = new Date(value);
+		if (!Number.isNaN(parsed.getTime())) onDateChange?.(parsed);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:gap-2", className),
+		children: [/* @__PURE__ */ jsx(Input, {
+			type: "text",
+			placeholder: "MM/DD/YYYY",
+			value: inputValue,
+			onChange: handleInputChange,
+			className: "wwc:w-[150px]"
+		}), /* @__PURE__ */ jsxs(Popover, {
+			modal,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					icon: true,
+					className: "wwc:h-9 wwc:w-9",
+					children: /* @__PURE__ */ jsx(Calendar, { className: "wwc:h-4 wwc:w-4" })
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				container,
+				className: "wwc:w-auto wwc:p-0",
+				align: "start",
+				children: /* @__PURE__ */ jsx(Calendar$1, {
+					mode: "single",
+					selected: date,
+					onSelect: (newDate) => {
+						onDateChange?.(newDate);
+						if (newDate) setInputValue(format(newDate, "MM/dd/yyyy"));
+					},
+					initialFocus: true
+				})
+			})]
+		})]
+	});
+}
+function DateTimePicker({ date, onDateChange, variant = "split", placeholder, className, container, modal }) {
+	if (variant === "unified") return /* @__PURE__ */ jsx(UnifiedDateTimePicker, {
+		date,
+		onDateChange,
+		placeholder,
+		className,
+		container,
+		modal
+	});
+	return /* @__PURE__ */ jsx(SplitDateTimePicker, {
+		date,
+		onDateChange,
+		className,
+		container,
+		modal
+	});
+}
+/**
+* Single trigger + popover (calendar, time row, Cancel/Apply). Edits are staged locally and only
+* committed on Apply, matching DateRangeTimePicker — so dismissing the popover discards.
+*/
+function UnifiedDateTimePicker({ date, onDateChange, placeholder = "Pick date & time", className, container, modal }) {
+	const [open, setOpen] = React.useState(false);
+	const [localDate, setLocalDate] = React.useState(date);
+	const [timeValue, setTimeValue] = React.useState(date ? format(date, "hh:mm a") : "12:00 AM");
+	React.useEffect(() => {
+		if (date) {
+			setLocalDate(date);
+			setTimeValue(format(date, "hh:mm a"));
+		}
+	}, [date]);
+	const handleApply = () => {
+		onDateChange?.(applyTimeToDate(localDate, timeValue));
+		setOpen(false);
+	};
+	const handleCancel = () => {
+		setLocalDate(date);
+		setTimeValue(date ? format(date, "hh:mm a") : "12:00 AM");
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		modal,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				className: cn("wwc:h-9 wwc:w-full wwc:justify-start wwc:text-left wwc:font-normal", !date && "wwc:text-muted-foreground", className),
+				children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsx("span", {
+					className: "wwc:truncate",
+					children: date ? format(date, "PPP p") : placeholder
+				})]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			container,
+			className: "wwc:w-auto wwc:p-0",
+			align: "start",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "wwc:px-3 wwc:pt-3 wwc:pb-1",
+					children: /* @__PURE__ */ jsx(Calendar$1, {
+						initialFocus: true,
+						mode: "single",
+						defaultMonth: localDate,
+						selected: localDate,
+						onSelect: setLocalDate,
+						className: "wwc:p-0"
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "wwc:border-t wwc:border-border wwc:px-3 wwc:py-3",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-3",
+						children: [/* @__PURE__ */ jsx(Label, {
+							className: "wwc:w-10 wwc:text-[11px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+							children: "Time"
+						}), /* @__PURE__ */ jsx(TimeSelect, {
+							value: timeValue,
+							onChange: setTimeValue
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:justify-end wwc:gap-2 wwc:border-t wwc:border-border wwc:px-3 wwc:py-3",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: handleCancel,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onClick: handleApply,
+						disabled: !localDate,
+						children: "Apply"
+					})]
+				})
+			]
+		})]
+	});
+}
+function SplitDateTimePicker({ date, onDateChange, className, container, modal }) {
+	const [timeValue, setTimeValue] = React.useState("12:00 AM");
+	const parseTime = (val) => {
+		const [time, period] = val.split(" ");
+		const [h, m] = time.split(":").map(Number);
+		let hours = h;
+		if (period === "PM" && hours !== 12) hours += 12;
+		if (period === "AM" && hours === 12) hours = 0;
+		return {
+			hours,
+			minutes: m
+		};
+	};
+	const handleDateSelect = (newDate) => {
+		if (newDate) {
+			const { hours, minutes } = parseTime(timeValue);
+			newDate.setHours(hours, minutes);
+			onDateChange?.(newDate);
+		} else onDateChange?.(void 0);
+	};
+	const handleTimeSelect = (value) => {
+		setTimeValue(value);
+		if (date) {
+			const { hours, minutes } = parseTime(value);
+			const newDate = new Date(date);
+			newDate.setHours(hours, minutes);
+			onDateChange?.(newDate);
+		}
+	};
+	const timeOptions = [];
+	for (const period of ["AM", "PM"]) for (let h = 12; h < 24; h++) {
+		const displayH = h === 12 ? 12 : h - 12;
+		for (let m = 0; m < 60; m += 15) timeOptions.push(`${String(displayH).padStart(2, "0")}:${String(m).padStart(2, "0")} ${period}`);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:gap-2", className),
+		children: [/* @__PURE__ */ jsxs(Popover, {
+			modal,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					className: cn("wwc:h-9 wwc:w-[200px] wwc:justify-start wwc:text-left wwc:font-normal", !date && "wwc:text-muted-foreground"),
+					children: [/* @__PURE__ */ jsx(Calendar, {}), date ? format(date, "PPP") : /* @__PURE__ */ jsx("span", { children: "Pick a date" })]
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				container,
+				className: "wwc:w-auto wwc:p-0",
+				children: /* @__PURE__ */ jsx(Calendar$1, {
+					mode: "single",
+					selected: date,
+					onSelect: handleDateSelect,
+					initialFocus: true
+				})
+			})]
+		}), /* @__PURE__ */ jsxs(Select, {
+			value: timeValue,
+			onValueChange: handleTimeSelect,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				className: "wwc:w-[130px]",
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select time" })
+			}), /* @__PURE__ */ jsx(SelectContent, { children: timeOptions.map((t) => /* @__PURE__ */ jsx(SelectItem, {
+				value: t,
+				children: t
+			}, t)) })]
+		})]
+	});
+}
+function DateRangePicker({ dateRange, onDateRangeChange, placeholder = "Pick a date range", className, disabled = false, container, modal }) {
+	return /* @__PURE__ */ jsxs(Popover, {
+		modal,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				className: cn("wwc:w-[300px] wwc:justify-start wwc:text-left wwc:font-normal", !dateRange?.from && "wwc:text-muted-foreground", className),
+				disabled,
+				children: [/* @__PURE__ */ jsx(Calendar, {}), dateRange?.from ? dateRange.to ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					format(dateRange.from, "LLL dd, y"),
+					" - ",
+					format(dateRange.to, "LLL dd, y")
+				] }) : format(dateRange.from, "LLL dd, y") : /* @__PURE__ */ jsx("span", { children: placeholder })]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			container,
+			className: "wwc:w-auto wwc:p-0",
+			align: "start",
+			children: /* @__PURE__ */ jsx(Calendar$1, {
+				initialFocus: true,
+				mode: "range",
+				defaultMonth: dateRange?.from,
+				selected: dateRange,
+				onSelect: (range) => onDateRangeChange?.({
+					from: range?.from,
+					to: range?.to
+				}),
+				numberOfMonths: 2
+			})
+		})]
+	});
+}
+/** Builds `hh:mm AM/PM` options across the full day at `step`-minute intervals. */
+function buildTimeOptions(step) {
+	const options = [];
+	for (const period of ["AM", "PM"]) for (let h = 12; h < 24; h++) {
+		const displayH = h === 12 ? 12 : h - 12;
+		for (let m = 0; m < 60; m += step) options.push(`${String(displayH).padStart(2, "0")}:${String(m).padStart(2, "0")} ${period}`);
+	}
+	return options;
+}
+/**
+* Time-of-day dropdown. Use this instead of `<input type="time">`, whose picker is rendered by the
+* OS and so ignores the design system entirely.
+*/
+function TimePicker({ value, onValueChange, step = 15, placeholder = "Select time", disabled, id, "aria-label": ariaLabel, className }) {
+	const timeOptions = React.useMemo(() => buildTimeOptions(step), [step]);
+	return /* @__PURE__ */ jsxs(Select, {
+		value,
+		onValueChange,
+		disabled,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			id,
+			"aria-label": ariaLabel,
+			className: cn("wwc:h-9 wwc:w-[130px]", className),
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: timeOptions.map((t) => /* @__PURE__ */ jsx(SelectItem, {
+			value: t,
+			children: t
+		}, t)) })]
+	});
+}
+function TimeSelect({ value, onChange }) {
+	return /* @__PURE__ */ jsx(TimePicker, {
+		value,
+		onValueChange: onChange
+	});
+}
+function applyTimeToDate(d, timeStr) {
+	if (!d) return void 0;
+	const [time, period] = timeStr.split(" ");
+	const [h, m] = time.split(":").map(Number);
+	let hours = h;
+	if (period === "PM" && hours !== 12) hours += 12;
+	if (period === "AM" && hours === 12) hours = 0;
+	const newDate = new Date(d);
+	newDate.setHours(hours, m, 0, 0);
+	return newDate;
+}
+function DateRangeTimePicker({ dateRange, onDateRangeChange, placeholder = "Pick date & time range", className, iconOnly = false, "aria-label": ariaLabel, tooltip, container, modal }) {
+	const [fromTime, setFromTime] = React.useState("12:00 AM");
+	const [toTime, setToTime] = React.useState("12:00 AM");
+	const [open, setOpen] = React.useState(false);
+	const [localRange, setLocalRange] = React.useState(dateRange ?? {
+		from: void 0,
+		to: void 0
+	});
+	React.useEffect(() => {
+		if (dateRange) setLocalRange(dateRange);
+	}, [dateRange]);
+	const handleApply = () => {
+		const from = applyTimeToDate(localRange.from, fromTime);
+		const to = applyTimeToDate(localRange.to, toTime);
+		onDateRangeChange?.({
+			from,
+			to
+		});
+		setOpen(false);
+	};
+	const handleCancel = () => {
+		setLocalRange(dateRange ?? {
+			from: void 0,
+			to: void 0
+		});
+		setOpen(false);
+	};
+	const formatDisplay = () => {
+		if (!dateRange?.from) return placeholder;
+		const fromStr = `${format(dateRange.from, "MMM dd")} ${fromTime}`;
+		if (!dateRange.to) return fromStr;
+		return `${fromStr} — ${format(dateRange.to, "MMM dd")} ${toTime}`;
+	};
+	const hint = tooltip === void 0 ? ariaLabel ?? placeholder : tooltip;
+	const trigger = /* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "outline",
+			icon: iconOnly,
+			"aria-label": iconOnly ? ariaLabel ?? placeholder : ariaLabel,
+			className: cn(!iconOnly && "wwc:h-9 wwc:w-[380px] wwc:justify-start wwc:text-left wwc:font-normal", !dateRange?.from && "wwc:text-muted-foreground", className),
+			children: [/* @__PURE__ */ jsx(Calendar, {}), !iconOnly && /* @__PURE__ */ jsx("span", {
+				className: "wwc:truncate",
+				children: formatDisplay()
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		modal,
+		children: [iconOnly && hint !== null ? /* @__PURE__ */ jsx(HoverTooltip, {
+			content: hint,
+			children: trigger
+		}) : trigger, /* @__PURE__ */ jsxs(PopoverContent, {
+			container,
+			className: "wwc:w-auto wwc:p-0",
+			align: "start",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "wwc:px-3 wwc:pt-3 wwc:pb-1",
+					children: /* @__PURE__ */ jsx(Calendar$1, {
+						initialFocus: true,
+						mode: "range",
+						defaultMonth: localRange?.from,
+						selected: localRange,
+						onSelect: (range) => setLocalRange({
+							from: range?.from,
+							to: range?.to
+						}),
+						numberOfMonths: 1,
+						className: "wwc:p-0"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:border-t wwc:border-border wwc:px-3 wwc:py-3 wwc:space-y-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-3",
+						children: [/* @__PURE__ */ jsx(Label, {
+							className: "wwc:text-[11px] wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground wwc:font-semibold wwc:w-10",
+							children: "From"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:items-center wwc:gap-2 wwc:flex-1",
+							children: [/* @__PURE__ */ jsx(Input, {
+								readOnly: true,
+								value: localRange.from ? format(localRange.from, "MM/dd") : "— —",
+								className: "wwc:w-[70px] wwc:h-9 wwc:text-center wwc:text-[13px]"
+							}), /* @__PURE__ */ jsx(TimeSelect, {
+								value: fromTime,
+								onChange: setFromTime
+							})]
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-3",
+						children: [/* @__PURE__ */ jsx(Label, {
+							className: "wwc:text-[11px] wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground wwc:font-semibold wwc:w-10",
+							children: "To"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:items-center wwc:gap-2 wwc:flex-1",
+							children: [/* @__PURE__ */ jsx(Input, {
+								readOnly: true,
+								value: localRange.to ? format(localRange.to, "MM/dd") : "— —",
+								className: "wwc:w-[70px] wwc:h-9 wwc:text-center wwc:text-[13px]"
+							}), /* @__PURE__ */ jsx(TimeSelect, {
+								value: toTime,
+								onChange: setToTime
+							})]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:border-t wwc:border-border wwc:px-3 wwc:py-3 wwc:flex wwc:justify-end wwc:gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: handleCancel,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onClick: handleApply,
+						children: "Apply"
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { DatePicker, DatePickerForm, DatePickerWithInput, DatePickerWithPresets, DateRangePicker, DateRangeTimePicker, DateTimePicker, TimePicker };
+
+//# sourceMappingURL=date-picker.mjs.map