erp-pro-ui 0.2.5 → 0.2.7

package/dist/chunks/date-picker-BJQdFyqr.cjs

@@ -0,0 +1,592 @@
+const require_utils = require("./utils-CoA0q63n.cjs");
+const require_icons = require("./icons-Ci8yEvvF.cjs");
+const require_calendar = require("./calendar-CdKKhdx5.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+let react_dom = require("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] = (0, react.useState)(false);
+	const [visible, setVisible] = (0, react.useState)(false);
+	const [isMobile, setIsMobile] = (0, react.useState)(false);
+	const [hoverDate, setHoverDate] = (0, react.useState)(null);
+	const [startInput, setStartInput] = (0, react.useState)("");
+	const [endInput, setEndInput] = (0, react.useState)("");
+	const todayDate = (0, react.useMemo)(() => /* @__PURE__ */ new Date(), []);
+	const [leftMonth, setLeftMonth] = (0, react.useState)(todayDate.getMonth());
+	const [leftYear, setLeftYear] = (0, react.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] = (0, react.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 = (0, react.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);
+	};
+	(0, react.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);
+	}, []);
+	(0, react.useEffect)(() => {
+		setStartInput(rangeValue.start ? formatDate(rangeValue.start) : "");
+		setEndInput(rangeValue.end ? formatDate(rangeValue.end) : "");
+	}, [rangeValue.start, rangeValue.end]);
+	const containerRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const panelRef = (0, react.useRef)(null);
+	(0, react.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] = (0, react.useState)({
+		top: 0,
+		left: 0,
+		minWidth: 320
+	});
+	(0, react.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 = (0, framer_motion.useMotionValue)(0);
+	const mouseY = (0, framer_motion.useMotionValue)(0);
+	const motionBg = framer_motion.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__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick: () => handlePreset(p),
+		className: require_utils.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: containerRef,
+			className: require_utils.mergeClassNames("w-full space-y-2", className),
+			children: [
+				label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm font-medium text-ds-1",
+					children: label
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "relative",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "relative",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								ref: triggerRef,
+								type: "button",
+								className: require_utils.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__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: displayValue ? "text-ds-1" : "text-ds-2",
+									children: displayValue || placeholder
+								})
+							}), hasSelection && !disabled ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
+									className: "h-3.5 w-3.5",
+									"aria-hidden": "true"
+								})
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-xs text-ds-2",
+					children: helperText
+				})
+			]
+		}),
+		isMobile && open && mode === "range" && !disabled && typeof document !== "undefined" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "fixed inset-0 z-50 flex flex-col",
+			role: "dialog",
+			"aria-modal": "true",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex-1 bg-black/40",
+				onClick: () => setOpen(false)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center justify-between px-5 pb-3 pt-5",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-base font-semibold text-ds-1",
+							children: "Select date range"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, { className: "h-4 w-4" })
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex flex-wrap gap-2 px-5 pb-3",
+						children: RANGE_PRESETS.map((p) => presetBtn(p, false))
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "mb-4",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+									className: "mb-2 text-sm font-semibold text-ds-1",
+									children: [
+										SHORT_MONTHS[m],
+										" ",
+										y
+									]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_calendar.Calendar, {
+									className: INNER_CAL,
+									showNav: false,
+									selectionMode: "range",
+									month: m,
+									year: y,
+									range: rangeValue,
+									onRangeSelect: handleRangeSelect,
+									hoverDate,
+									onHoverDate: setHoverDate
+								})]
+							}, `${m}-${y}`);
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex gap-3 border-t border-ds-border-2 px-5 py-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "fixed inset-0 z-60",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute inset-0",
+				"aria-hidden": "true",
+				onPointerDown: () => setOpen(false)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex w-36 flex-col gap-0.5 border-r border-ds-border-2 p-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "p-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mb-3 flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-xs text-ds-3",
+									children: "→"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mb-2 flex items-center justify-between",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex flex-1 justify-around px-2",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "text-sm font-semibold text-ds-1",
+										children: [
+											SHORT_MONTHS[leftMonth],
+											" ",
+											leftYear
+										]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "text-sm font-semibold text-ds-1",
+										children: [
+											SHORT_MONTHS[rightMonth],
+											" ",
+											rightYear
+										]
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex gap-5",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_calendar.Calendar, {
+									className: INNER_CAL,
+									showNav: false,
+									selectionMode: "range",
+									month: leftMonth,
+									year: leftYear,
+									range: rangeValue,
+									onRangeSelect: handleRangeSelect,
+									hoverDate,
+									onHoverDate: setHoverDate
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-px self-stretch bg-ds-border-2" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_calendar.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" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "fixed inset-0 z-60",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute inset-0",
+				"aria-hidden": "true",
+				onPointerDown: () => setOpen(false)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_calendar.Calendar, {
+					value: singleValue ?? null,
+					selectionMode: "single",
+					onSelect: (date) => {
+						updateValue(date);
+						setOpen(false);
+					}
+				}), presets?.length ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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
+Object.defineProperty(exports, "DatePicker", {
+	enumerable: true,
+	get: function() {
+		return DatePicker;
+	}
+});
+
+//# sourceMappingURL=date-picker-BJQdFyqr.cjs.map