erp-pro-ui 0.2.6 → 0.2.7

package/dist/chunks/date-picker--cqsgsIV.mjs

@@ -0,0 +1,587 @@
+import { n as mergeClassNames } from "./utils-Dc7j29ec.mjs";
+import { q as CloseIcon } from "./icons-CkVHNbbN.mjs";
+import { t as Calendar } from "./calendar-BlUhssD4.mjs";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
+import { createPortal } from "react-dom";
+//#region src/components/forms/date-picker/DatePicker.tsx
+function startOfDay(d) {
+	return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+var SHORT_MONTHS = Array.from({ length: 12 }, (_, i) => new Date(2026, i, 1).toLocaleString(void 0, { month: "short" }));
+function formatDate(d) {
+	return d?.toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	}) ?? "";
+}
+function parseDate(str) {
+	const trimmed = str.trim();
+	if (!trimmed) return null;
+	const d = new Date(trimmed);
+	return isNaN(d.getTime()) ? null : startOfDay(d);
+}
+var isRangeValue = (v) => typeof v === "object" && v !== null && "start" in v && "end" in v;
+var emptyRange = {
+	start: null,
+	end: null
+};
+var RANGE_PRESETS = [
+	{
+		label: "Today",
+		getValue() {
+			const t = startOfDay(/* @__PURE__ */ new Date());
+			return {
+				start: t,
+				end: t
+			};
+		}
+	},
+	{
+		label: "Yesterday",
+		getValue() {
+			const d = startOfDay(/* @__PURE__ */ new Date());
+			d.setDate(d.getDate() - 1);
+			return {
+				start: d,
+				end: d
+			};
+		}
+	},
+	{
+		label: "Last 7 days",
+		getValue() {
+			const end = startOfDay(/* @__PURE__ */ new Date());
+			const start = new Date(end);
+			start.setDate(start.getDate() - 6);
+			return {
+				start,
+				end
+			};
+		}
+	},
+	{
+		label: "Last 30 days",
+		getValue() {
+			const end = startOfDay(/* @__PURE__ */ new Date());
+			const start = new Date(end);
+			start.setDate(start.getDate() - 29);
+			return {
+				start,
+				end
+			};
+		}
+	},
+	{
+		label: "Last quarter",
+		getValue() {
+			const now = /* @__PURE__ */ new Date();
+			const q = Math.floor(now.getMonth() / 3);
+			const pq = q === 0 ? 3 : q - 1;
+			const pqYear = q === 0 ? now.getFullYear() - 1 : now.getFullYear();
+			return {
+				start: new Date(pqYear, pq * 3, 1),
+				end: new Date(pqYear, pq * 3 + 3, 0)
+			};
+		}
+	}
+];
+var INNER_CAL = "w-auto max-w-none rounded-none border-0 bg-transparent p-0 shadow-none backdrop-blur-none";
+var PANEL_GAP = 8;
+var VMARGIN = 12;
+var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick a date", helperText, disabled = false, className = "", presets }) => {
+	const [open, setOpen] = useState(false);
+	const [visible, setVisible] = useState(false);
+	const [isMobile, setIsMobile] = useState(false);
+	const [hoverDate, setHoverDate] = useState(null);
+	const [startInput, setStartInput] = useState("");
+	const [endInput, setEndInput] = useState("");
+	const todayDate = useMemo(() => /* @__PURE__ */ new Date(), []);
+	const [leftMonth, setLeftMonth] = useState(todayDate.getMonth());
+	const [leftYear, setLeftYear] = useState(todayDate.getFullYear());
+	const rightDate = new Date(leftYear, leftMonth + 1, 1);
+	const rightMonth = rightDate.getMonth();
+	const rightYear = rightDate.getFullYear();
+	const isControlled = value !== void 0;
+	const [internal, setInternal] = useState(value ?? (mode === "range" ? emptyRange : null));
+	const current = isControlled ? value : internal;
+	const singleValue = mode === "range" ? null : current;
+	const rangeValue = mode === "range" && isRangeValue(current) ? current : { ...emptyRange };
+	const displayValue = useMemo(() => {
+		if (mode === "range") {
+			if (rangeValue.start && rangeValue.end) return `${formatDate(rangeValue.start)} — ${formatDate(rangeValue.end)}`;
+			if (rangeValue.start) return `${formatDate(rangeValue.start)} — …`;
+			return "";
+		}
+		return formatDate(singleValue);
+	}, [
+		mode,
+		rangeValue.start,
+		rangeValue.end,
+		singleValue
+	]);
+	const hasSelection = mode === "range" ? Boolean(rangeValue.start || rangeValue.end) : Boolean(singleValue);
+	const updateValue = (next) => {
+		if (!isControlled) setInternal(next);
+		onChange?.(next);
+	};
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const mq = window.matchMedia("(max-width: 640px)");
+		setIsMobile(mq.matches);
+		const handler = (e) => setIsMobile(e.matches);
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, []);
+	useEffect(() => {
+		setStartInput(rangeValue.start ? formatDate(rangeValue.start) : "");
+		setEndInput(rangeValue.end ? formatDate(rangeValue.end) : "");
+	}, [rangeValue.start, rangeValue.end]);
+	const containerRef = useRef(null);
+	const triggerRef = useRef(null);
+	const panelRef = useRef(null);
+	useEffect(() => {
+		const inside = (event) => {
+			return (typeof event.composedPath === "function" ? event.composedPath() : []).some((t) => t instanceof Node && (containerRef.current?.contains(t) || panelRef.current?.contains(t)));
+		};
+		const onPointer = (e) => {
+			if (e.target instanceof Node && (containerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) || inside(e)) return;
+			setOpen(false);
+		};
+		const onFocus = (e) => {
+			if (e.target instanceof Node && (containerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) || inside(e)) return;
+			setOpen(false);
+		};
+		if (open) {
+			document.addEventListener("pointerdown", onPointer, true);
+			document.addEventListener("focusin", onFocus, true);
+		}
+		return () => {
+			document.removeEventListener("pointerdown", onPointer, true);
+			document.removeEventListener("focusin", onFocus, true);
+		};
+	}, [open]);
+	const [panelPos, setPanelPos] = useState({
+		top: 0,
+		left: 0,
+		minWidth: 320
+	});
+	useEffect(() => {
+		if (!open) return;
+		const update = () => {
+			const tRect = triggerRef.current?.getBoundingClientRect();
+			if (!tRect) return;
+			const panelH = panelRef.current?.offsetHeight ?? 400;
+			const panelW = panelRef.current?.offsetWidth ?? 320;
+			const openAbove = window.innerHeight - tRect.bottom < panelH + PANEL_GAP && tRect.top > panelH + PANEL_GAP;
+			const maxLeft = Math.max(VMARGIN, window.innerWidth - panelW - VMARGIN);
+			const left = Math.min(Math.max(tRect.left, VMARGIN), maxLeft);
+			setPanelPos({
+				top: openAbove ? Math.max(VMARGIN, tRect.top - panelH - PANEL_GAP) : Math.min(tRect.bottom + PANEL_GAP, window.innerHeight - panelH - VMARGIN),
+				left,
+				minWidth: Math.max(tRect.width, 320)
+			});
+		};
+		update();
+		const id = requestAnimationFrame(update);
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		return () => {
+			cancelAnimationFrame(id);
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+		};
+	}, [open]);
+	const mouseX = useMotionValue(0);
+	const mouseY = useMotionValue(0);
+	const motionBg = useMotionTemplate`radial-gradient(${visible ? "100px" : "0px"} circle at ${mouseX}px ${mouseY}px, var(--ds-color-accent), transparent 90%)`;
+	const handleMouseMove = (e) => {
+		const { left, top } = e.currentTarget.getBoundingClientRect();
+		mouseX.set(e.clientX - left);
+		mouseY.set(e.clientY - top);
+	};
+	const handleClear = () => {
+		if (disabled) return;
+		updateValue(mode === "range" ? { ...emptyRange } : null);
+		setOpen(false);
+	};
+	const handleRangeSelect = (next) => {
+		updateValue(next);
+		if (next.start && next.end) {
+			setOpen(false);
+			setHoverDate(null);
+		}
+	};
+	const handlePreset = (p) => {
+		updateValue(p.getValue());
+		setOpen(false);
+	};
+	const commitStartInput = () => {
+		const d = parseDate(startInput);
+		if (d) updateValue({
+			start: d,
+			end: rangeValue.end
+		});
+		else setStartInput(rangeValue.start ? formatDate(rangeValue.start) : "");
+	};
+	const commitEndInput = () => {
+		const d = parseDate(endInput);
+		if (d) {
+			updateValue({
+				start: rangeValue.start,
+				end: d
+			});
+			if (rangeValue.start && d) setOpen(false);
+		} else setEndInput(rangeValue.end ? formatDate(rangeValue.end) : "");
+	};
+	const panelKeyDown = (e) => {
+		if (e.key === "Escape") {
+			setOpen(false);
+			triggerRef.current?.focus();
+		}
+		if (e.key === "Enter" && mode === "range" && rangeValue.start && rangeValue.end) {
+			setOpen(false);
+			triggerRef.current?.focus();
+		}
+	};
+	const isPresetActive = (p) => {
+		const r = p.getValue();
+		return rangeValue.start?.toDateString() === r.start?.toDateString() && rangeValue.end?.toDateString() === r.end?.toDateString();
+	};
+	const presetBtn = (p, compact = false) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: () => handlePreset(p),
+		className: mergeClassNames("rounded-md text-left text-xs font-medium transition-colors", compact ? "px-2 py-1.5" : "rounded-full border px-3 py-1", isPresetActive(p) ? "bg-ds-accent-subtle text-ds-accent" + (compact ? "" : " border-ds-accent") : compact ? "text-ds-2 hover:bg-ds-surface-2 hover:text-ds-1" : "border-ds-border-2 bg-ds-surface-2 text-ds-2 hover:border-ds-border-accent hover:text-ds-1"),
+		children: p.label
+	}, p.label);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
+			className: mergeClassNames("w-full space-y-2", className),
+			children: [
+				label && /* @__PURE__ */ jsx("p", {
+					className: "text-sm font-medium text-ds-1",
+					children: label
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "relative",
+					children: /* @__PURE__ */ jsx(motion.div, {
+						style: { backgroundImage: disabled ? "none" : motionBg },
+						onMouseMove: !disabled ? handleMouseMove : void 0,
+						onMouseEnter: !disabled ? () => setVisible(true) : void 0,
+						onMouseLeave: !disabled ? () => setVisible(false) : void 0,
+						className: disabled ? "group/date-picker rounded-lg border-none bg-ds-surface-1 p-[2px]" : "group/date-picker rounded-lg border-ds-border-2 p-[2px]",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "relative",
+							children: [/* @__PURE__ */ jsx("button", {
+								ref: triggerRef,
+								type: "button",
+								className: mergeClassNames("flex w-full items-center justify-between rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm transition duration-400 ease-in-out", disabled && "cursor-not-allowed opacity-50"),
+								style: { paddingInlineEnd: "2.5rem" },
+								onClick: () => !disabled && setOpen((p) => !p),
+								"aria-haspopup": "dialog",
+								"aria-expanded": open,
+								disabled,
+								children: /* @__PURE__ */ jsx("span", {
+									className: displayValue ? "text-ds-1" : "text-ds-2",
+									children: displayValue || placeholder
+								})
+							}), hasSelection && !disabled ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "absolute top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-full text-ds-2 transition-colors hover:bg-ds-accent-subtle hover:text-ds-1",
+								style: { insetInlineEnd: "0.75rem" },
+								onClick: handleClear,
+								"aria-label": mode === "range" ? "Clear selected date range" : "Clear selected date",
+								children: /* @__PURE__ */ jsx(CloseIcon, {
+									className: "h-3.5 w-3.5",
+									"aria-hidden": "true"
+								})
+							}) : /* @__PURE__ */ jsx("span", {
+								className: "pointer-events-none absolute top-1/2 -translate-y-1/2 text-ds-2",
+								style: { insetInlineEnd: "0.75rem" },
+								"aria-hidden": "true",
+								children: "📅"
+							})]
+						})
+					})
+				}),
+				helperText && /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-ds-2",
+					children: helperText
+				})
+			]
+		}),
+		isMobile && open && mode === "range" && !disabled && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsxs("div", {
+			className: "fixed inset-0 z-50 flex flex-col",
+			role: "dialog",
+			"aria-modal": "true",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex-1 bg-black/40",
+				onClick: () => setOpen(false)
+			}), /* @__PURE__ */ jsxs(motion.div, {
+				initial: { y: "100%" },
+				animate: { y: 0 },
+				exit: { y: "100%" },
+				transition: {
+					type: "spring",
+					damping: 30,
+					stiffness: 300
+				},
+				className: "flex max-h-[90vh] flex-col rounded-t-2xl bg-ds-surface-1 shadow-2xl",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between px-5 pb-3 pt-5",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-base font-semibold text-ds-1",
+							children: "Select date range"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setOpen(false),
+							className: "flex h-7 w-7 items-center justify-center rounded-full text-ds-3 hover:bg-ds-surface-2 hover:text-ds-1",
+							"aria-label": "Close",
+							children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-4 w-4" })
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-2 px-5 pb-3",
+						children: RANGE_PRESETS.map((p) => presetBtn(p, false))
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex-1 overflow-y-auto px-5 pb-4",
+						children: [
+							0,
+							1,
+							2
+						].map((offset) => {
+							const d = new Date(todayDate.getFullYear(), todayDate.getMonth() + offset, 1);
+							const m = d.getMonth();
+							const y = d.getFullYear();
+							return /* @__PURE__ */ jsxs("div", {
+								className: "mb-4",
+								children: [/* @__PURE__ */ jsxs("p", {
+									className: "mb-2 text-sm font-semibold text-ds-1",
+									children: [
+										SHORT_MONTHS[m],
+										" ",
+										y
+									]
+								}), /* @__PURE__ */ jsx(Calendar, {
+									className: INNER_CAL,
+									showNav: false,
+									selectionMode: "range",
+									month: m,
+									year: y,
+									range: rangeValue,
+									onRangeSelect: handleRangeSelect,
+									hoverDate,
+									onHoverDate: setHoverDate
+								})]
+							}, `${m}-${y}`);
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-3 border-t border-ds-border-2 px-5 py-4",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => updateValue({ ...emptyRange }),
+							className: "flex-1 rounded-lg border border-ds-border-2 bg-ds-surface-2 py-2.5 text-sm font-medium text-ds-2 transition-colors hover:bg-ds-surface-3 hover:text-ds-1",
+							children: "Clear"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setOpen(false),
+							className: "flex-1 rounded-lg bg-ds-accent py-2.5 text-sm font-semibold text-ds-on-accent transition-opacity hover:opacity-90",
+							children: "Apply"
+						})]
+					})
+				]
+			})]
+		}), document.body) : null,
+		!isMobile && open && mode === "range" && !disabled && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsxs("div", {
+			className: "fixed inset-0 z-60",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0",
+				"aria-hidden": "true",
+				onPointerDown: () => setOpen(false)
+			}), /* @__PURE__ */ jsx("div", {
+				ref: panelRef,
+				className: "dropdown-panel absolute z-10 overflow-hidden rounded-xl border border-ds-border-2 bg-ds-surface-1/95 shadow-xl backdrop-blur-xl",
+				style: {
+					top: panelPos.top,
+					left: panelPos.left
+				},
+				role: "dialog",
+				"aria-modal": "false",
+				onKeyDown: panelKeyDown,
+				tabIndex: -1,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex w-36 flex-col gap-0.5 border-r border-ds-border-2 p-2",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "mb-1 px-2 text-[10px] font-semibold uppercase tracking-wider text-ds-3",
+							children: "Quick select"
+						}), RANGE_PRESETS.map((p) => presetBtn(p, true))]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "p-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "mb-3 flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ jsx("input", {
+									type: "text",
+									value: startInput,
+									onChange: (e) => setStartInput(e.target.value),
+									onBlur: commitStartInput,
+									onKeyDown: (e) => {
+										if (e.key === "Enter") {
+											e.stopPropagation();
+											commitStartInput();
+										}
+										if (e.key === "Escape") setOpen(false);
+									},
+									placeholder: "Start date",
+									"aria-label": "Start date",
+									className: "w-32 rounded-md border border-ds-border-field bg-ds-surface-1 px-2.5 py-1.5 text-xs text-ds-1 placeholder:text-ds-3 transition-colors focus:border-ds-border-accent focus:outline-none"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-xs text-ds-3",
+									children: "→"
+								}),
+								/* @__PURE__ */ jsx("input", {
+									type: "text",
+									value: endInput,
+									onChange: (e) => setEndInput(e.target.value),
+									onBlur: commitEndInput,
+									onKeyDown: (e) => {
+										if (e.key === "Enter") {
+											e.stopPropagation();
+											commitEndInput();
+										}
+										if (e.key === "Escape") setOpen(false);
+									},
+									placeholder: "End date",
+									"aria-label": "End date",
+									className: "w-32 rounded-md border border-ds-border-field bg-ds-surface-1 px-2.5 py-1.5 text-xs text-ds-1 placeholder:text-ds-3 transition-colors focus:border-ds-border-accent focus:outline-none"
+								})
+							]
+						}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+							className: "mb-2 flex items-center justify-between",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => {
+										const d = new Date(leftYear, leftMonth - 1, 1);
+										setLeftMonth(d.getMonth());
+										setLeftYear(d.getFullYear());
+									},
+									className: "inline-flex h-7 w-7 items-center justify-center rounded-md border border-ds-border-field bg-ds-surface-1 text-sm text-ds-2 transition-colors hover:border-ds-border-accent hover:text-ds-1",
+									"aria-label": "Previous month",
+									children: "←"
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex flex-1 justify-around px-2",
+									children: [/* @__PURE__ */ jsxs("span", {
+										className: "text-sm font-semibold text-ds-1",
+										children: [
+											SHORT_MONTHS[leftMonth],
+											" ",
+											leftYear
+										]
+									}), /* @__PURE__ */ jsxs("span", {
+										className: "text-sm font-semibold text-ds-1",
+										children: [
+											SHORT_MONTHS[rightMonth],
+											" ",
+											rightYear
+										]
+									})]
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => {
+										const d = new Date(leftYear, leftMonth + 1, 1);
+										setLeftMonth(d.getMonth());
+										setLeftYear(d.getFullYear());
+									},
+									className: "inline-flex h-7 w-7 items-center justify-center rounded-md border border-ds-border-field bg-ds-surface-1 text-sm text-ds-2 transition-colors hover:border-ds-border-accent hover:text-ds-1",
+									"aria-label": "Next month",
+									children: "→"
+								})
+							]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex gap-5",
+							children: [
+								/* @__PURE__ */ jsx(Calendar, {
+									className: INNER_CAL,
+									showNav: false,
+									selectionMode: "range",
+									month: leftMonth,
+									year: leftYear,
+									range: rangeValue,
+									onRangeSelect: handleRangeSelect,
+									hoverDate,
+									onHoverDate: setHoverDate
+								}),
+								/* @__PURE__ */ jsx("div", { className: "w-px self-stretch bg-ds-border-2" }),
+								/* @__PURE__ */ jsx(Calendar, {
+									className: INNER_CAL,
+									showNav: false,
+									selectionMode: "range",
+									month: rightMonth,
+									year: rightYear,
+									range: rangeValue,
+									onRangeSelect: handleRangeSelect,
+									hoverDate,
+									onHoverDate: setHoverDate
+								})
+							]
+						})] })]
+					})]
+				})
+			})]
+		}), document.body) : null,
+		open && mode === "single" && !disabled && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsxs("div", {
+			className: "fixed inset-0 z-60",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0",
+				"aria-hidden": "true",
+				onPointerDown: () => setOpen(false)
+			}), /* @__PURE__ */ jsxs("div", {
+				ref: panelRef,
+				className: "dropdown-panel absolute z-10",
+				style: {
+					top: panelPos.top,
+					left: panelPos.left,
+					minWidth: panelPos.minWidth
+				},
+				role: "dialog",
+				"aria-modal": "false",
+				onKeyDown: panelKeyDown,
+				children: [/* @__PURE__ */ jsx(Calendar, {
+					value: singleValue ?? null,
+					selectionMode: "single",
+					onSelect: (date) => {
+						updateValue(date);
+						setOpen(false);
+					}
+				}), presets?.length ? /* @__PURE__ */ jsx("div", {
+					className: "mt-3 flex flex-wrap gap-2 rounded-lg border border-ds-border-2 bg-ds-surface-1/95 p-3 shadow-xl backdrop-blur-xl",
+					children: presets.map((p) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "rounded-full border border-ds-border-field px-3 py-1 text-xs text-ds-2 transition-colors hover:border-ds-border-accent hover:bg-ds-accent-subtle hover:text-ds-1",
+						onClick: () => {
+							updateValue(p.value());
+							setOpen(false);
+						},
+						children: p.label
+					}, p.label))
+				}) : null]
+			})]
+		}), document.body) : null
+	] });
+};
+//#endregion
+export { DatePicker as t };
+
+//# sourceMappingURL=date-picker--cqsgsIV.mjs.map

package/dist/chunks/date-picker--cqsgsIV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker--cqsgsIV.mjs","names":[],"sources":["../../src/components/forms/date-picker/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { Calendar } from \"../calendar\";\nimport { CloseIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\n\nimport type { DatePickerProps, DatePickerValue, DateRangeValue } from \"./types\";\n\n// ── Utilities ─────────────────────────────────────────────────────────────────\n\nfunction startOfDay(d: Date): Date {\n  return new Date(d.getFullYear(), d.getMonth(), d.getDate());\n}\n\nconst SHORT_MONTHS = Array.from({ length: 12 }, (_, i) =>\n  new Date(2026, i, 1).toLocaleString(undefined, { month: \"short\" }),\n);\n\nfunction formatDate(d: Date | null) {\n  return d?.toLocaleDateString(undefined, { month: \"short\", day: \"numeric\", year: \"numeric\" }) ?? \"\";\n}\n\nfunction parseDate(str: string): Date | null {\n  const trimmed = str.trim();\n  if (!trimmed) return null;\n  const d = new Date(trimmed);\n  return isNaN(d.getTime()) ? null : startOfDay(d);\n}\n\nconst isRangeValue = (v: DatePickerValue): v is DateRangeValue =>\n  typeof v === \"object\" && v !== null && \"start\" in v && \"end\" in v;\n\nconst emptyRange: DateRangeValue = { start: null, end: null };\n\n// ── Built-in range presets ────────────────────────────────────────────────────\n\ninterface BuiltInPreset {\n  label: string;\n  getValue: () => DateRangeValue;\n}\n\nconst RANGE_PRESETS: BuiltInPreset[] = [\n  {\n    label: \"Today\",\n    getValue() { const t = startOfDay(new Date()); return { start: t, end: t }; },\n  },\n  {\n    label: \"Yesterday\",\n    getValue() {\n      const d = startOfDay(new Date()); d.setDate(d.getDate() - 1);\n      return { start: d, end: d };\n    },\n  },\n  {\n    label: \"Last 7 days\",\n    getValue() {\n      const end = startOfDay(new Date());\n      const start = new Date(end); start.setDate(start.getDate() - 6);\n      return { start, end };\n    },\n  },\n  {\n    label: \"Last 30 days\",\n    getValue() {\n      const end = startOfDay(new Date());\n      const start = new Date(end); start.setDate(start.getDate() - 29);\n      return { start, end };\n    },\n  },\n  {\n    label: \"Last quarter\",\n    getValue() {\n      const now = new Date();\n      const q = Math.floor(now.getMonth() / 3);\n      const pq = q === 0 ? 3 : q - 1;\n      const pqYear = q === 0 ? now.getFullYear() - 1 : now.getFullYear();\n      return {\n        start: new Date(pqYear, pq * 3, 1),\n        end:   new Date(pqYear, pq * 3 + 3, 0),\n      };\n    },\n  },\n];\n\n// ── Class constant for Calendar rendered inside a panel (no own border/bg) ───\n\nconst INNER_CAL = \"w-auto max-w-none rounded-none border-0 bg-transparent p-0 shadow-none backdrop-blur-none\";\n\n// ── Panel positioning constants ───────────────────────────────────────────────\n\nconst PANEL_GAP = 8;\nconst VMARGIN   = 12;\n\n// ── DatePicker ────────────────────────────────────────────────────────────────\n\nexport const DatePicker = ({\n  mode = \"single\",\n  value,\n  onChange,\n  label,\n  placeholder = \"Pick a date\",\n  helperText,\n  disabled = false,\n  className = \"\",\n  presets,\n}: DatePickerProps) => {\n  const [open,      setOpen]      = useState(false);\n  const [visible,   setVisible]   = useState(false);\n  const [isMobile,  setIsMobile]  = useState(false);\n  const [hoverDate, setHoverDate] = useState<Date | null>(null);\n\n  // Text inputs for direct date entry (range mode only)\n  const [startInput, setStartInput] = useState(\"\");\n  const [endInput,   setEndInput]   = useState(\"\");\n\n  // Dual-month nav state — left calendar, right = left+1\n  const todayDate = useMemo(() => new Date(), []);\n  const [leftMonth, setLeftMonth] = useState(todayDate.getMonth());\n  const [leftYear,  setLeftYear]  = useState(todayDate.getFullYear());\n\n  const rightDate  = new Date(leftYear, leftMonth + 1, 1);\n  const rightMonth = rightDate.getMonth();\n  const rightYear  = rightDate.getFullYear();\n\n  // Value state\n  const isControlled = value !== undefined;\n  const [internal, setInternal] = useState<DatePickerValue>(\n    value ?? (mode === \"range\" ? emptyRange : null),\n  );\n  const current     = isControlled ? value : internal;\n  const singleValue = mode === \"range\" ? null : (current as Date | null);\n  const rangeValue  = mode === \"range\" && isRangeValue(current) ? current : { ...emptyRange };\n\n  const displayValue = useMemo(() => {\n    if (mode === \"range\") {\n      if (rangeValue.start && rangeValue.end)\n        return `${formatDate(rangeValue.start)} — ${formatDate(rangeValue.end)}`;\n      if (rangeValue.start) return `${formatDate(rangeValue.start)} — …`;\n      return \"\";\n    }\n    return formatDate(singleValue);\n  }, [mode, rangeValue.start, rangeValue.end, singleValue]);\n\n  const hasSelection = mode === \"range\"\n    ? Boolean(rangeValue.start || rangeValue.end)\n    : Boolean(singleValue);\n\n  const updateValue = (next: DatePickerValue) => {\n    if (!isControlled) setInternal(next);\n    onChange?.(next);\n  };\n\n  // ── Side effects ─────────────────────────────────────────────────────────────\n\n  // Mobile detection\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const mq = window.matchMedia(\"(max-width: 640px)\");\n    setIsMobile(mq.matches);\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n    mq.addEventListener(\"change\", handler);\n    return () => mq.removeEventListener(\"change\", handler);\n  }, []);\n\n  // Sync text inputs with range value\n  useEffect(() => {\n    setStartInput(rangeValue.start ? formatDate(rangeValue.start) : \"\");\n    setEndInput(rangeValue.end   ? formatDate(rangeValue.end)   : \"\");\n  }, [rangeValue.start, rangeValue.end]);\n\n  // Close on outside click / focus\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef   = useRef<HTMLButtonElement>(null);\n  const panelRef     = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const inside = (event: Event) => {\n      const path = typeof event.composedPath === \"function\" ? event.composedPath() : [];\n      return path.some(\n        (t) => t instanceof Node && (containerRef.current?.contains(t) || panelRef.current?.contains(t)),\n      );\n    };\n\n    const onPointer = (e: PointerEvent) => {\n      if ((e.target instanceof Node && (containerRef.current?.contains(e.target) || panelRef.current?.contains(e.target))) || inside(e)) return;\n      setOpen(false);\n    };\n    const onFocus = (e: FocusEvent) => {\n      if ((e.target instanceof Node && (containerRef.current?.contains(e.target) || panelRef.current?.contains(e.target))) || inside(e)) return;\n      setOpen(false);\n    };\n\n    if (open) {\n      document.addEventListener(\"pointerdown\", onPointer, true);\n      document.addEventListener(\"focusin\",     onFocus,   true);\n    }\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointer, true);\n      document.removeEventListener(\"focusin\",     onFocus,   true);\n    };\n  }, [open]);\n\n  // Panel positioning\n  const [panelPos, setPanelPos] = useState({ top: 0, left: 0, minWidth: 320 });\n\n  useEffect(() => {\n    if (!open) return;\n\n    const update = () => {\n      const tRect = triggerRef.current?.getBoundingClientRect();\n      if (!tRect) return;\n\n      const panelH = panelRef.current?.offsetHeight ?? 400;\n      const panelW = panelRef.current?.offsetWidth  ?? 320;\n      const spaceBelow = window.innerHeight - tRect.bottom;\n      const openAbove  = spaceBelow < panelH + PANEL_GAP && tRect.top > panelH + PANEL_GAP;\n\n      const maxLeft = Math.max(VMARGIN, window.innerWidth - panelW - VMARGIN);\n      const left    = Math.min(Math.max(tRect.left, VMARGIN), maxLeft);\n\n      setPanelPos({\n        top: openAbove\n          ? Math.max(VMARGIN, tRect.top - panelH - PANEL_GAP)\n          : Math.min(tRect.bottom + PANEL_GAP, window.innerHeight - panelH - VMARGIN),\n        left,\n        minWidth: Math.max(tRect.width, 320),\n      });\n    };\n\n    update();\n    const id = requestAnimationFrame(update);\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    return () => {\n      cancelAnimationFrame(id);\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n    };\n  }, [open]);\n\n  // ── Motion ────────────────────────────────────────────────────────────────────\n\n  const mouseX  = useMotionValue(0);\n  const mouseY  = useMotionValue(0);\n  const motionBg = useMotionTemplate`radial-gradient(${visible ? \"100px\" : \"0px\"} circle at ${mouseX}px ${mouseY}px, var(--ds-color-accent), transparent 90%)`;\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    const { left, top } = e.currentTarget.getBoundingClientRect();\n    mouseX.set(e.clientX - left);\n    mouseY.set(e.clientY - top);\n  };\n\n  // ── Handlers ─────────────────────────────────────────────────────────────────\n\n  const handleClear = () => {\n    if (disabled) return;\n    updateValue(mode === \"range\" ? { ...emptyRange } : null);\n    setOpen(false);\n  };\n\n  const handleRangeSelect = (next: DateRangeValue) => {\n    updateValue(next);\n    if (next.start && next.end) { setOpen(false); setHoverDate(null); }\n  };\n\n  const handlePreset = (p: BuiltInPreset) => {\n    updateValue(p.getValue());\n    setOpen(false);\n  };\n\n  const commitStartInput = () => {\n    const d = parseDate(startInput);\n    if (d) updateValue({ start: d, end: rangeValue.end });\n    else setStartInput(rangeValue.start ? formatDate(rangeValue.start) : \"\");\n  };\n\n  const commitEndInput = () => {\n    const d = parseDate(endInput);\n    if (d) {\n      updateValue({ start: rangeValue.start, end: d });\n      if (rangeValue.start && d) setOpen(false);\n    } else {\n      setEndInput(rangeValue.end ? formatDate(rangeValue.end) : \"\");\n    }\n  };\n\n  const panelKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"Escape\") { setOpen(false); triggerRef.current?.focus(); }\n    if (e.key === \"Enter\" && mode === \"range\" && rangeValue.start && rangeValue.end) {\n      setOpen(false); triggerRef.current?.focus();\n    }\n  };\n\n  const isPresetActive = (p: BuiltInPreset) => {\n    const r = p.getValue();\n    return (\n      rangeValue.start?.toDateString() === r.start?.toDateString() &&\n      rangeValue.end?.toDateString()   === r.end?.toDateString()\n    );\n  };\n\n  const presetBtn = (p: BuiltInPreset, compact = false) => (\n    <button\n      key={p.label}\n      type=\"button\"\n      onClick={() => handlePreset(p)}\n      className={mergeClassNames(\n        \"rounded-md text-left text-xs font-medium transition-colors\",\n        compact ? \"px-2 py-1.5\" : \"rounded-full border px-3 py-1\",\n        isPresetActive(p)\n          ? \"bg-ds-accent-subtle text-ds-accent\" + (compact ? \"\" : \" border-ds-accent\")\n          : compact\n            ? \"text-ds-2 hover:bg-ds-surface-2 hover:text-ds-1\"\n            : \"border-ds-border-2 bg-ds-surface-2 text-ds-2 hover:border-ds-border-accent hover:text-ds-1\",\n      )}\n    >\n      {p.label}\n    </button>\n  );\n\n  // ── Trigger ───────────────────────────────────────────────────────────────────\n\n  const trigger = (\n    <div ref={containerRef} className={mergeClassNames(\"w-full space-y-2\", className)}>\n      {label && <p className=\"text-sm font-medium text-ds-1\">{label}</p>}\n      <div className=\"relative\">\n        <motion.div\n          style={{ backgroundImage: disabled ? \"none\" : motionBg }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true)  : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={\n            disabled\n              ? \"group/date-picker rounded-lg border-none bg-ds-surface-1 p-[2px]\"\n              : \"group/date-picker rounded-lg border-ds-border-2 p-[2px]\"\n          }\n        >\n          <div className=\"relative\">\n            <button\n              ref={triggerRef}\n              type=\"button\"\n              className={mergeClassNames(\n                \"flex w-full items-center justify-between rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm transition duration-400 ease-in-out\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n              style={{ paddingInlineEnd: \"2.5rem\" }}\n              onClick={() => !disabled && setOpen((p) => !p)}\n              aria-haspopup=\"dialog\"\n              aria-expanded={open}\n              disabled={disabled}\n            >\n              <span className={displayValue ? \"text-ds-1\" : \"text-ds-2\"}>\n                {displayValue || placeholder}\n              </span>\n            </button>\n\n            {hasSelection && !disabled ? (\n              <button\n                type=\"button\"\n                className=\"absolute top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-full text-ds-2 transition-colors hover:bg-ds-accent-subtle hover:text-ds-1\"\n                style={{ insetInlineEnd: \"0.75rem\" }}\n                onClick={handleClear}\n                aria-label={mode === \"range\" ? \"Clear selected date range\" : \"Clear selected date\"}\n              >\n                <CloseIcon className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n              </button>\n            ) : (\n              <span\n                className=\"pointer-events-none absolute top-1/2 -translate-y-1/2 text-ds-2\"\n                style={{ insetInlineEnd: \"0.75rem\" }}\n                aria-hidden=\"true\"\n              >\n                📅\n              </span>\n            )}\n          </div>\n        </motion.div>\n      </div>\n      {helperText && <p className=\"text-xs text-ds-2\">{helperText}</p>}\n    </div>\n  );\n\n  // ── Mobile bottom sheet (range mode) ─────────────────────────────────────────\n\n  const mobileSheet =\n    isMobile && open && mode === \"range\" && !disabled && typeof document !== \"undefined\"\n      ? createPortal(\n          <div className=\"fixed inset-0 z-50 flex flex-col\" role=\"dialog\" aria-modal=\"true\">\n            <div className=\"flex-1 bg-black/40\" onClick={() => setOpen(false)} />\n            <motion.div\n              initial={{ y: \"100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"100%\" }}\n              transition={{ type: \"spring\", damping: 30, stiffness: 300 }}\n              className=\"flex max-h-[90vh] flex-col rounded-t-2xl bg-ds-surface-1 shadow-2xl\"\n            >\n              {/* Header */}\n              <div className=\"flex items-center justify-between px-5 pb-3 pt-5\">\n                <p className=\"text-base font-semibold text-ds-1\">Select date range</p>\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(false)}\n                  className=\"flex h-7 w-7 items-center justify-center rounded-full text-ds-3 hover:bg-ds-surface-2 hover:text-ds-1\"\n                  aria-label=\"Close\"\n                >\n                  <CloseIcon className=\"h-4 w-4\" />\n                </button>\n              </div>\n\n              {/* Preset chips */}\n              <div className=\"flex flex-wrap gap-2 px-5 pb-3\">\n                {RANGE_PRESETS.map((p) => presetBtn(p, false))}\n              </div>\n\n              {/* Scrollable months */}\n              <div className=\"flex-1 overflow-y-auto px-5 pb-4\">\n                {[0, 1, 2].map((offset) => {\n                  const d = new Date(todayDate.getFullYear(), todayDate.getMonth() + offset, 1);\n                  const m = d.getMonth();\n                  const y = d.getFullYear();\n                  return (\n                    <div key={`${m}-${y}`} className=\"mb-4\">\n                      <p className=\"mb-2 text-sm font-semibold text-ds-1\">\n                        {SHORT_MONTHS[m]} {y}\n                      </p>\n                      <Calendar\n                        className={INNER_CAL}\n                        showNav={false}\n                        selectionMode=\"range\"\n                        month={m}\n                        year={y}\n                        range={rangeValue}\n                        onRangeSelect={handleRangeSelect}\n                        hoverDate={hoverDate}\n                        onHoverDate={setHoverDate}\n                      />\n                    </div>\n                  );\n                })}\n              </div>\n\n              {/* Footer buttons */}\n              <div className=\"flex gap-3 border-t border-ds-border-2 px-5 py-4\">\n                <button\n                  type=\"button\"\n                  onClick={() => updateValue({ ...emptyRange })}\n                  className=\"flex-1 rounded-lg border border-ds-border-2 bg-ds-surface-2 py-2.5 text-sm font-medium text-ds-2 transition-colors hover:bg-ds-surface-3 hover:text-ds-1\"\n                >\n                  Clear\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(false)}\n                  className=\"flex-1 rounded-lg bg-ds-accent py-2.5 text-sm font-semibold text-ds-on-accent transition-opacity hover:opacity-90\"\n                >\n                  Apply\n                </button>\n              </div>\n            </motion.div>\n          </div>,\n          document.body,\n        )\n      : null;\n\n  // ── Desktop range panel ───────────────────────────────────────────────────────\n\n  const desktopRangePanel =\n    !isMobile && open && mode === \"range\" && !disabled && typeof document !== \"undefined\"\n      ? createPortal(\n          <div className=\"fixed inset-0 z-60\">\n            <div className=\"absolute inset-0\" aria-hidden=\"true\" onPointerDown={() => setOpen(false)} />\n            <div\n              ref={panelRef}\n              className=\"dropdown-panel absolute z-10 overflow-hidden rounded-xl border border-ds-border-2 bg-ds-surface-1/95 shadow-xl backdrop-blur-xl\"\n              style={{ top: panelPos.top, left: panelPos.left }}\n              role=\"dialog\"\n              aria-modal=\"false\"\n              onKeyDown={panelKeyDown}\n              tabIndex={-1}\n            >\n              <div className=\"flex\">\n                {/* Preset sidebar */}\n                <div className=\"flex w-36 flex-col gap-0.5 border-r border-ds-border-2 p-2\">\n                  <p className=\"mb-1 px-2 text-[10px] font-semibold uppercase tracking-wider text-ds-3\">\n                    Quick select\n                  </p>\n                  {RANGE_PRESETS.map((p) => presetBtn(p, true))}\n                </div>\n\n                {/* Calendar area */}\n                <div className=\"p-4\">\n                  {/* Text inputs */}\n                  <div className=\"mb-3 flex items-center gap-2\">\n                    <input\n                      type=\"text\"\n                      value={startInput}\n                      onChange={(e) => setStartInput(e.target.value)}\n                      onBlur={commitStartInput}\n                      onKeyDown={(e) => {\n                        if (e.key === \"Enter\")  { e.stopPropagation(); commitStartInput(); }\n                        if (e.key === \"Escape\") setOpen(false);\n                      }}\n                      placeholder=\"Start date\"\n                      aria-label=\"Start date\"\n                      className=\"w-32 rounded-md border border-ds-border-field bg-ds-surface-1 px-2.5 py-1.5 text-xs text-ds-1 placeholder:text-ds-3 transition-colors focus:border-ds-border-accent focus:outline-none\"\n                    />\n                    <span className=\"text-xs text-ds-3\">→</span>\n                    <input\n                      type=\"text\"\n                      value={endInput}\n                      onChange={(e) => setEndInput(e.target.value)}\n                      onBlur={commitEndInput}\n                      onKeyDown={(e) => {\n                        if (e.key === \"Enter\")  { e.stopPropagation(); commitEndInput(); }\n                        if (e.key === \"Escape\") setOpen(false);\n                      }}\n                      placeholder=\"End date\"\n                      aria-label=\"End date\"\n                      className=\"w-32 rounded-md border border-ds-border-field bg-ds-surface-1 px-2.5 py-1.5 text-xs text-ds-1 placeholder:text-ds-3 transition-colors focus:border-ds-border-accent focus:outline-none\"\n                    />\n                  </div>\n\n                  {/* Dual calendar */}\n                  <div>\n                    {/* Shared nav row */}\n                    <div className=\"mb-2 flex items-center justify-between\">\n                      <button\n                        type=\"button\"\n                        onClick={() => { const d = new Date(leftYear, leftMonth - 1, 1); setLeftMonth(d.getMonth()); setLeftYear(d.getFullYear()); }}\n                        className=\"inline-flex h-7 w-7 items-center justify-center rounded-md border border-ds-border-field bg-ds-surface-1 text-sm text-ds-2 transition-colors hover:border-ds-border-accent hover:text-ds-1\"\n                        aria-label=\"Previous month\"\n                      >\n                        ←\n                      </button>\n                      <div className=\"flex flex-1 justify-around px-2\">\n                        <span className=\"text-sm font-semibold text-ds-1\">\n                          {SHORT_MONTHS[leftMonth]} {leftYear}\n                        </span>\n                        <span className=\"text-sm font-semibold text-ds-1\">\n                          {SHORT_MONTHS[rightMonth]} {rightYear}\n                        </span>\n                      </div>\n                      <button\n                        type=\"button\"\n                        onClick={() => { const d = new Date(leftYear, leftMonth + 1, 1); setLeftMonth(d.getMonth()); setLeftYear(d.getFullYear()); }}\n                        className=\"inline-flex h-7 w-7 items-center justify-center rounded-md border border-ds-border-field bg-ds-surface-1 text-sm text-ds-2 transition-colors hover:border-ds-border-accent hover:text-ds-1\"\n                        aria-label=\"Next month\"\n                      >\n                        →\n                      </button>\n                    </div>\n\n                    {/* Two months side by side */}\n                    <div className=\"flex gap-5\">\n                      <Calendar\n                        className={INNER_CAL}\n                        showNav={false}\n                        selectionMode=\"range\"\n                        month={leftMonth}\n                        year={leftYear}\n                        range={rangeValue}\n                        onRangeSelect={handleRangeSelect}\n                        hoverDate={hoverDate}\n                        onHoverDate={setHoverDate}\n                      />\n                      <div className=\"w-px self-stretch bg-ds-border-2\" />\n                      <Calendar\n                        className={INNER_CAL}\n                        showNav={false}\n                        selectionMode=\"range\"\n                        month={rightMonth}\n                        year={rightYear}\n                        range={rangeValue}\n                        onRangeSelect={handleRangeSelect}\n                        hoverDate={hoverDate}\n                        onHoverDate={setHoverDate}\n                      />\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>,\n          document.body,\n        )\n      : null;\n\n  // ── Single-date panel (& mobile single) ──────────────────────────────────────\n\n  const singlePanel =\n    open && mode === \"single\" && !disabled && typeof document !== \"undefined\"\n      ? createPortal(\n          <div className=\"fixed inset-0 z-60\">\n            <div className=\"absolute inset-0\" aria-hidden=\"true\" onPointerDown={() => setOpen(false)} />\n            <div\n              ref={panelRef}\n              className=\"dropdown-panel absolute z-10\"\n              style={{ top: panelPos.top, left: panelPos.left, minWidth: panelPos.minWidth }}\n              role=\"dialog\"\n              aria-modal=\"false\"\n              onKeyDown={panelKeyDown}\n            >\n              <Calendar\n                value={singleValue ?? null}\n                selectionMode=\"single\"\n                onSelect={(date) => { updateValue(date); setOpen(false); }}\n              />\n              {presets?.length ? (\n                <div className=\"mt-3 flex flex-wrap gap-2 rounded-lg border border-ds-border-2 bg-ds-surface-1/95 p-3 shadow-xl backdrop-blur-xl\">\n                  {presets.map((p) => (\n                    <button\n                      key={p.label}\n                      type=\"button\"\n                      className=\"rounded-full border border-ds-border-field px-3 py-1 text-xs text-ds-2 transition-colors hover:border-ds-border-accent hover:bg-ds-accent-subtle hover:text-ds-1\"\n                      onClick={() => { updateValue(p.value()); setOpen(false); }}\n                    >\n                      {p.label}\n                    </button>\n                  ))}\n                </div>\n              ) : null}\n            </div>\n          </div>,\n          document.body,\n        )\n      : null;\n\n  // ── Render ────────────────────────────────────────────────────────────────────\n\n  return (\n    <>\n      {trigger}\n      {mobileSheet}\n      {desktopRangePanel}\n      {singlePanel}\n    </>\n  );\n};\n"],"mappings":"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"}