@seekalfred/primitives 0.5.1 → 0.6.0

package/dist/date-picker/date-range-picker.js

@@ -0,0 +1,1015 @@
+"use client";
+import { cnAll } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { Button as Button$1 } from "../button/button.js";
+import { SwapText } from "../lib/swap-text.js";
+import { calendarCellVariants, calendarGridVariants, calendarHeaderCellVariants, calendarNavVariants } from "../calendar/calendar.js";
+import { CalendarGlyph, Chevron, TypedDate, datePickerLabelVariants, datePickerVariants, descriptionClass, errorClass, useDayFormat, useValue } from "./picker-parts.js";
+import { Fragment, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Button, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarHeading, RangeCalendar, RangeCalendarStateContext, useLocale } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getLocalTimeZone, today } from "@internationalized/date";
+//#region src/date-picker/date-range-picker.tsx
+const defaultMessages = {
+	presets: "Presets",
+	apply: "Apply",
+	cancel: "Cancel",
+	clear: "Clear",
+	previousMonth: "Previous month",
+	nextMonth: "Next month",
+	noDates: "No dates",
+	pickEnd: "Pick an end date",
+	days: (count) => `${count} ${count === 1 ? "day" : "days"}`,
+	startChosen: (start) => `Start ${start}. Choose an end date.`
+};
+/** Shortcuts for the rail: today back to the start of the year. */
+const defaultDateRangePresets = [
+	{
+		label: "Today",
+		range: (today) => ({
+			start: today,
+			end: today
+		})
+	},
+	{
+		label: "Yesterday",
+		range: (today) => ({
+			start: today.subtract({ days: 1 }),
+			end: today.subtract({ days: 1 })
+		})
+	},
+	{
+		label: "Last 7 days",
+		range: (today) => ({
+			start: today.subtract({ days: 6 }),
+			end: today
+		})
+	},
+	{
+		label: "Last 30 days",
+		range: (today) => ({
+			start: today.subtract({ days: 29 }),
+			end: today
+		})
+	},
+	{
+		label: "This month",
+		range: (today) => ({
+			start: today.set({ day: 1 }),
+			end: today
+		})
+	},
+	{
+		label: "Last month",
+		range: (today) => {
+			const first = today.subtract({ months: 1 }).set({ day: 1 });
+			return {
+				start: first,
+				end: first.set({ day: first.calendar.getDaysInMonth(first) })
+			};
+		}
+	},
+	{
+		label: "This quarter",
+		range: (today) => ({
+			start: today.set({
+				month: Math.floor((today.month - 1) / 3) * 3 + 1,
+				day: 1
+			}),
+			end: today
+		})
+	},
+	{
+		label: "Year to date",
+		range: (today) => ({
+			start: today.set({
+				month: 1,
+				day: 1
+			}),
+			end: today
+		})
+	}
+];
+const NO_RANGE = {
+	start: null,
+	end: null
+};
+const WIDE_MIN = 712;
+const WIDE_CELL = 36;
+const EDGE = 8;
+const RADIUS_CLOSED = "var(--radius-md)";
+const RADIUS_OPEN = "var(--radius-xl)";
+const triggerSize = {
+	sm: "h-(--density-control-h-sm) px-(--density-control-pad-sm)",
+	md: "h-(--density-control-h-md) px-(--density-control-pad-md)",
+	lg: "h-(--density-control-h-lg) px-(--density-control-pad-lg)"
+};
+const rootSize = {
+	sm: "h-(--density-control-h-sm)",
+	md: "h-(--density-control-h-md)",
+	lg: "h-(--density-control-h-lg)"
+};
+/** A stamp that grows with time, so a range can be compared and given a direction. */
+const stamp = (value) => value ? value.toDate("UTC").getTime() : 0;
+const rangeStamp = (range) => range && range.start && range.end ? stamp(range.start) * 2 + stamp(range.end) : null;
+const sameRange = (a, b) => Boolean(a?.start && a.end && b?.start && b.end && a.start.compare(b.start) === 0 && a.end.compare(b.end) === 0);
+/** Which way a range moved in time, so its words roll in that direction. */
+function useDirection(range) {
+	const stampNow = rangeStamp(range);
+	const [previous, setPrevious] = useState(stampNow);
+	const [direction, setDirection] = useState(1);
+	if (stampNow !== previous) {
+		setPrevious(stampNow);
+		setDirection(stampNow === null || previous === null || stampNow >= previous ? 1 : -1);
+	}
+	return direction;
+}
+/**
+* Words roll one by one: a later date rises from below, an earlier one drops from
+* above, and a word that stays the same holds still. The copy is `aria-hidden`; the
+* caller keeps the plain text for screen readers.
+*/
+function RollingWords({ text, direction }) {
+	const words = text.split(/\s+/).filter(Boolean);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "inline-flex gap-1 whitespace-nowrap",
+		children: words.map((word, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? " " : null, /* @__PURE__ */ jsx(SwapText, {
+			swapKey: word,
+			dir: direction,
+			motion: "word",
+			className: "inline-block",
+			children: word
+		})] }, index))
+	});
+}
+/** Moves an element from where it was to where it is now, on a spring: a value that flies between the trigger and the footer. */
+function flyFrom(el, from, spring) {
+	const to = el.getBoundingClientRect();
+	const dx = from.left - to.left;
+	const dy = from.top - to.top;
+	if (Math.abs(dx) < 1 && Math.abs(dy) < 1) return;
+	el.style.transition = "none";
+	el.style.translate = `${dx}px ${dy}px`;
+	el.offsetWidth;
+	el.style.transition = `translate var(--duration-${spring}) var(--ease-${spring})`;
+	el.style.translate = "";
+	el.addEventListener("transitionend", () => {
+		el.style.transition = "";
+	}, { once: true });
+}
+/** Hands the calendar's anchor and highlighted range to the picker, which owns the footer. */
+function CalendarBridge({ onSnapshot }) {
+	const state = useContext(RangeCalendarStateContext);
+	const anchor = state?.anchorDate ?? null;
+	const highlighted = state?.highlightedRange ?? null;
+	const key = `${anchor?.toString() ?? ""}|${highlighted?.start.toString() ?? ""}|${highlighted?.end.toString() ?? ""}`;
+	const latest = useRef(key);
+	useIsomorphicLayoutEffect(() => {
+		if (latest.current === key && latest.current !== "||") return;
+		latest.current = key;
+		onSnapshot({
+			anchor,
+			highlighted: highlighted ? {
+				start: highlighted.start,
+				end: highlighted.end
+			} : null
+		});
+	}, [key]);
+	return null;
+}
+/**
+* Places the range's highlight under the days: one bar per week, which stretches
+* and slides on its spring from the edge the range arrives from, and a solid end at
+* each side, which glides from day to day and only fades when its end leaves the
+* month. Everything is measured from the cells React Aria rendered, so it follows
+* the real layout. Nothing animates until a bar or an end has been shown once.
+*/
+function RangeDriver() {
+	const marker = useRef(null);
+	useContext(RangeCalendarStateContext);
+	useIsomorphicLayoutEffect(() => {
+		const root = marker.current?.parentElement;
+		if (!root) return;
+		for (const block of root.querySelectorAll("[data-slot=\"range-month\"]")) {
+			const layer = block.querySelector("[data-slot=\"range-layer\"]");
+			const rows = block.querySelector("tbody")?.rows;
+			if (!layer || !rows) continue;
+			const layerBox = layer.getBoundingClientRect();
+			const bars = [...layer.querySelectorAll("[data-slot=\"range-bar\"]")];
+			const thumbs = [...layer.querySelectorAll("[data-slot=\"range-thumb\"]")];
+			const inMonth = (row) => [...row.querySelectorAll("[data-slot=\"calendar-cell\"]")].filter((cell) => !cell.hasAttribute("data-outside-month"));
+			const selected = [...rows].map((row) => inMonth(row).filter((cell) => cell.hasAttribute("data-selected")));
+			const firstRow = selected.findIndex((cells) => cells.length > 0);
+			const fresh = block.dataset.driven === void 0;
+			block.dataset.driven = "";
+			const place = (el, x, y, width, height) => {
+				const hidden = el.dataset.visible === void 0;
+				if (width !== void 0) el.style.width = `${width}px`;
+				if (height !== void 0) el.style.height = `${height}px`;
+				if (hidden) {
+					el.style.transition = "none";
+					el.style.translate = `${x}px ${y}px`;
+					if (fresh) el.dataset.visible = "";
+					el.offsetWidth;
+					el.style.transition = "";
+					el.dataset.visible = "";
+				} else el.style.translate = `${x}px ${y}px`;
+			};
+			const hide = (el) => {
+				delete el.dataset.visible;
+			};
+			bars.forEach((bar, index) => {
+				const row = rows[index];
+				const cells = row ? inMonth(row) : [];
+				if (firstRow < 0 || !row || cells.length === 0) return hide(bar);
+				const rowBox = cells[0].getBoundingClientRect();
+				const top = rowBox.top - layerBox.top + 3;
+				const height = rowBox.height - 6;
+				const span = selected[index];
+				if (span.length > 0) {
+					const a = span[0].getBoundingClientRect();
+					const b = span[span.length - 1].getBoundingClientRect();
+					bar.style.top = `${top}px`;
+					bar.style.height = `${height}px`;
+					place(bar, a.left - layerBox.left, 0, b.right - a.left);
+				} else {
+					const edge = index < firstRow ? cells[cells.length - 1].getBoundingClientRect().right : cells[0].getBoundingClientRect().left;
+					bar.style.top = `${top}px`;
+					bar.style.height = `${height}px`;
+					place(bar, edge - layerBox.left, 0, 0);
+				}
+			});
+			const start = block.querySelector("[data-slot=\"calendar-cell\"][data-selection-start]:not([data-outside-month])");
+			const end = block.querySelector("[data-slot=\"calendar-cell\"][data-selection-end]:not([data-outside-month])");
+			const ends = [start, end && end !== start ? end : null];
+			thumbs.forEach((thumb, index) => {
+				const cell = ends[index];
+				if (!cell) return hide(thumb);
+				const box = cell.getBoundingClientRect();
+				const x = box.left - layerBox.left - (box.width - cell.offsetWidth) / 2;
+				const y = box.top - layerBox.top - (box.height - cell.offsetHeight) / 2;
+				place(thumb, x + 3, y + 3, cell.offsetWidth - 6, cell.offsetHeight - 6);
+			});
+		}
+	});
+	return /* @__PURE__ */ jsx("span", {
+		ref: marker,
+		hidden: true,
+		"data-slot": "range-driver"
+	});
+}
+/** One month: its title, a grid, and the layer of bars and ends under the days. */
+function RangeMonth({ offset }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "range-month",
+		className: "w-[calc(var(--cell)*7)]",
+		children: [/* @__PURE__ */ jsx(CalendarHeading, {
+			offset: { months: offset },
+			className: "m-0 h-8 text-center text-sm font-medium leading-8 whitespace-nowrap text-foreground"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				"data-slot": "range-layer",
+				className: "pointer-events-none absolute inset-0",
+				children: [
+					[
+						0,
+						1,
+						2,
+						3,
+						4,
+						5
+					].map((row) => /* @__PURE__ */ jsx("span", {
+						"data-slot": "range-bar",
+						className: "range-bar"
+					}, row)),
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "range-thumb",
+						className: "range-thumb"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "range-thumb",
+						className: "range-thumb"
+					})
+				]
+			}), /* @__PURE__ */ jsxs(CalendarGrid, {
+				offset: { months: offset },
+				className: cnAll(calendarGridVariants(), "relative"),
+				children: [/* @__PURE__ */ jsx(CalendarGridHeader, { children: (weekday) => /* @__PURE__ */ jsx(CalendarHeaderCell, {
+					className: calendarHeaderCellVariants(),
+					children: weekday
+				}) }), /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, {
+					date,
+					"data-slot": "calendar-cell",
+					className: calendarCellVariants({ selection: "band" })
+				}) })]
+			})]
+		})]
+	});
+}
+/**
+* The visible months travel together. The set in view arrives from the side the
+* calendar travels to while the old set, kept where it stood, slides away the other
+* way; the leaving set is inert so focus and queries only find the current one.
+*/
+function MonthSets({ count, onNavigate }) {
+	const start = useContext(RangeCalendarStateContext)?.visibleRange.start;
+	const key = start ? `${start.era}-${start.year}-${start.month}-${count}` : "";
+	const [shown, setShown] = useState(start);
+	const [shownKey, setShownKey] = useState(key);
+	const [dir, setDir] = useState(0);
+	const [leaving, setLeaving] = useState([]);
+	const nextId = useRef(0);
+	if (start && shown && key !== shownKey) {
+		const months = (shown.year - start.year) * 12 + (shown.month - start.month);
+		setLeaving((list) => [...list, {
+			id: nextId.current++,
+			offset: months,
+			dir: months < 0 ? 1 : -1
+		}]);
+		setDir(months < 0 ? 1 : -1);
+		setShown(start);
+		setShownKey(key);
+	}
+	const remove = useCallback((id) => setLeaving((list) => list.filter((set) => set.id !== id)), []);
+	useEffect(() => {
+		onNavigate?.();
+	}, [key, onNavigate]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative overflow-clip [overflow-clip-margin:2px]",
+		children: [leaving.map((set) => /* @__PURE__ */ jsx(LeavingMonths, {
+			set,
+			count,
+			onDone: remove
+		}, set.id)), /* @__PURE__ */ jsx("div", {
+			"data-slot": "range-months",
+			"data-current": "",
+			style: { "--dir": dir },
+			className: cnAll("flex gap-6", dir !== 0 && "motion-safe:animate-range-slide-in motion-reduce:animate-range-face-fade-in"),
+			children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(RangeMonth, { offset: index }, index))
+		}, key)]
+	});
+}
+function LeavingMonths({ set, count, onDone }) {
+	const remove = useCallback(() => onDone(set.id), [onDone, set.id]);
+	useExitBackstop(true, remove, 900);
+	useIsomorphicLayoutEffect(() => {
+		if (prefersReducedMotion()) {
+			const timer = window.setTimeout(remove, 80);
+			return () => window.clearTimeout(timer);
+		}
+	}, [remove]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: (node) => node?.setAttribute("inert", ""),
+		"aria-hidden": "true",
+		"data-slot": "range-months-leaving",
+		style: { "--dir": set.dir },
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget && event.animationName === "range-slide-x-out") remove();
+		},
+		className: "pointer-events-none absolute inset-0 flex gap-6 motion-safe:animate-range-slide-out motion-reduce:animate-range-word-fade-out",
+		children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(RangeMonth, { offset: index + set.offset }, index))
+	});
+}
+/** The rail of shortcuts, with one highlight that glides to the active one. */
+function PresetRail({ presets, active, compact, label, onChoose }) {
+	const rail = useRef(null);
+	const highlight = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		const el = rail.current;
+		const mark = highlight.current;
+		const node = active < 0 ? null : el?.querySelector(`[data-preset="${active}"]`);
+		if (!el || !mark) return;
+		if (!node) {
+			delete mark.dataset.visible;
+			return;
+		}
+		mark.style.width = `${node.offsetWidth}px`;
+		mark.style.height = `${node.offsetHeight}px`;
+		if (mark.dataset.visible === void 0) {
+			mark.style.transition = "none";
+			mark.style.translate = `${node.offsetLeft}px ${node.offsetTop}px`;
+			mark.offsetWidth;
+			mark.style.transition = "";
+			mark.dataset.visible = "";
+		} else mark.style.translate = `${node.offsetLeft}px ${node.offsetTop}px`;
+		if (compact && (node.offsetLeft < el.scrollLeft || node.offsetLeft + node.offsetWidth > el.scrollLeft + el.clientWidth)) el.scrollTo({
+			left: node.offsetLeft - 12,
+			behavior: prefersReducedMotion() ? "auto" : "smooth"
+		});
+	}, [
+		active,
+		compact,
+		presets
+	]);
+	const onKeyDown = (event) => {
+		const keys = compact ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+		if (!keys.includes(event.key)) return;
+		const buttons = [...event.currentTarget.querySelectorAll("[data-preset]")];
+		const at = buttons.indexOf(document.activeElement);
+		if (at < 0) return;
+		event.preventDefault();
+		buttons[(at + (event.key === keys[1] ? 1 : -1) + buttons.length) % buttons.length]?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rail,
+		role: "group",
+		"aria-label": label,
+		"data-slot": "range-rail",
+		onKeyDown,
+		className: cnAll("relative flex flex-none gap-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", compact ? "-mx-2 flex-row overflow-x-auto overscroll-x-contain border-b-(length:--border-width) border-border px-2 pb-2" : "w-37 flex-col border-e-(length:--border-width) border-border pe-2.5"),
+		children: [/* @__PURE__ */ jsx("span", {
+			ref: highlight,
+			"aria-hidden": "true",
+			"data-slot": "range-highlight",
+			className: "range-highlight"
+		}), presets.map((preset, index) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-preset": index,
+			"aria-pressed": index === active,
+			onClick: () => onChoose(preset),
+			className: cnAll("relative flex h-8 flex-none cursor-pointer items-center rounded-md border-0 bg-transparent px-3 text-start text-sm whitespace-nowrap outline-none", "motion-safe:transition-colors motion-safe:duration-(--duration-quick) motion-safe:ease-settle", "text-muted-foreground hover:text-foreground aria-pressed:font-medium aria-pressed:text-foreground", "focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-(--color-ring)"),
+			children: preset.label
+		}, preset.label))]
+	});
+}
+const DateRangePicker = forwardRef(function DateRangePicker({ value, defaultValue = NO_RANGE, onChange, startLabel = "From", endLabel = "To", presets = defaultDateRangePresets, months = "auto", boundary, messages: messageOverrides, ...props }, ref) {
+	const messages = useMemo(() => ({
+		...defaultMessages,
+		...messageOverrides
+	}), [messageOverrides]);
+	const { locale } = useLocale();
+	const uid = useId();
+	const labelId = `${uid}-label`;
+	const valueId = `${uid}-value`;
+	const panelId = `${uid}-panel`;
+	const descriptionId = `${uid}-description`;
+	const errorId = `${uid}-error`;
+	const [committed, setCommitted] = useValue(value, defaultValue, onChange);
+	const [open, setOpen] = useState(false);
+	const [mounted, setMounted] = useState(false);
+	const [compact, setCompact] = useState(false);
+	const [panelWidth, setPanelWidth] = useState(0);
+	const [draft, setDraft] = useState(committed);
+	const [focus, setFocus] = useState(null);
+	const [snapshot, setSnapshot] = useState({
+		anchor: null,
+		highlighted: null
+	});
+	if (open && !mounted) setMounted(true);
+	const closing = mounted && !open;
+	const unmount = useCallback(() => setMounted(false), []);
+	useExitBackstop(closing, unmount, 140);
+	useIsomorphicLayoutEffect(() => {
+		if (closing && prefersReducedMotion()) unmount();
+	}, [closing, unmount]);
+	const rootRef = useRef(null);
+	const triggerRef = useRef(null);
+	const surfaceRef = useRef(null);
+	const panelRef = useRef(null);
+	const restingRef = useRef(null);
+	const summaryRef = useRef(null);
+	const summaryRect = useRef(null);
+	const pendingFocus = useRef(null);
+	const mergedRef = useCallback((node) => {
+		triggerRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const [todayValue, setTodayValue] = useState(() => today(getLocalTimeZone()));
+	const dayFormat = useDayFormat();
+	const format = props.formatValue ?? dayFormat;
+	const rangeFormat = useMemo(() => new Intl.DateTimeFormat(locale, {
+		month: "short",
+		day: "numeric",
+		year: "numeric",
+		timeZone: "UTC"
+	}), [locale]);
+	const describe = useCallback((range) => {
+		const start = range?.start ?? null;
+		const end = range?.end ?? null;
+		if (start && end) {
+			if (start.compare(end) === 0) return props.formatValue ? format(start) : rangeFormat.format(start.toDate("UTC"));
+			return props.formatValue ? `${format(start)} – ${format(end)}` : rangeFormat.formatRange(start.toDate("UTC"), end.toDate("UTC"));
+		}
+		if (start) return `${startLabel} ${format(start)}`;
+		if (end) return `${endLabel} ${format(end)}`;
+		return "";
+	}, [
+		endLabel,
+		format,
+		props.formatValue,
+		rangeFormat,
+		startLabel
+	]);
+	const placeholder = props.placeholder ?? "Select dates";
+	const committedText = describe(committed) || placeholder;
+	const complete = draft.start && draft.end ? {
+		start: draft.start,
+		end: draft.end
+	} : null;
+	const shown = snapshot.highlighted ?? (draft.start || draft.end ? draft : null);
+	const shownComplete = shown?.start && shown.end ? shown : null;
+	const days = shownComplete ? Math.round((stamp(shownComplete.end) - stamp(shownComplete.start)) / 864e5) + 1 : 0;
+	const shownText = shown ? describe(shown) : messages.noDates;
+	const countText = shownComplete ? snapshot.anchor && snapshot.highlighted?.start && snapshot.highlighted.end && snapshot.highlighted.start.compare(snapshot.highlighted.end) === 0 ? messages.pickEnd : messages.days(days) : "";
+	const status = !open ? "" : snapshot.anchor ? messages.startChosen(rangeFormat.format(snapshot.anchor.toDate("UTC"))) : shownComplete ? `${shownText}, ${countText}` : "";
+	const committedDirection = useDirection(committed);
+	const shownDirection = useDirection(shownComplete);
+	const activePreset = open && !snapshot.anchor ? presets.findIndex((preset) => sameRange(preset.range(todayValue), draft)) : -1;
+	const sizes = useRef({
+		trigger: {
+			w: 0,
+			h: 0
+		},
+		panel: null
+	});
+	const live = useRef({ open: false });
+	const boundaryRef = useRef(boundary);
+	useLayoutEffect(() => {
+		boundaryRef.current = boundary;
+	}, [boundary]);
+	const bounds = useCallback(() => {
+		const viewport = {
+			left: 0,
+			right: document.documentElement.clientWidth
+		};
+		const element = boundaryRef.current?.();
+		if (!element) return viewport;
+		const rect = element.getBoundingClientRect();
+		return {
+			left: Math.max(viewport.left, rect.left),
+			right: Math.min(viewport.right, rect.right)
+		};
+	}, []);
+	const update = useCallback(() => {
+		const surface = surfaceRef.current;
+		const { trigger, panel } = sizes.current;
+		if (!surface || !trigger.w) return;
+		const target = live.current.open && panel ? panel : trigger;
+		let offset = 0;
+		if (live.current.open && panel && rootRef.current) {
+			const rect = rootRef.current.getBoundingClientRect();
+			const box = bounds();
+			offset = Math.min(0, box.right - EDGE - (rect.left + panel.w));
+			offset = Math.max(offset, box.left + EDGE - rect.left);
+		}
+		const first = surface.dataset.ready === void 0;
+		surface.style.width = `${target.w}px`;
+		surface.style.height = `${target.h}px`;
+		surface.style.borderRadius = live.current.open && panel ? RADIUS_OPEN : RADIUS_CLOSED;
+		surface.style.translate = `${offset}px 0`;
+		if (first) {
+			surface.offsetWidth;
+			surface.dataset.ready = "";
+		}
+	}, [bounds]);
+	const queued = useRef(false);
+	const schedule = useCallback(() => {
+		if (queued.current) return;
+		queued.current = true;
+		queueMicrotask(() => {
+			queued.current = false;
+			update();
+		});
+	}, [update]);
+	useLayoutEffect(() => {
+		live.current.open = open;
+		if (!open) sizes.current.panel = null;
+		schedule();
+	}, [open, schedule]);
+	useLayoutEffect(() => {
+		const node = triggerRef.current;
+		if (!node) return;
+		const read = () => {
+			sizes.current.trigger = {
+				w: node.offsetWidth,
+				h: node.offsetHeight
+			};
+			schedule();
+		};
+		read();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(read);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [schedule]);
+	useLayoutEffect(() => {
+		const node = panelRef.current;
+		if (!open || !node) return;
+		const read = () => {
+			sizes.current.panel = {
+				w: node.offsetWidth,
+				h: node.offsetHeight
+			};
+			schedule();
+		};
+		read();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(read);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [
+		open,
+		mounted,
+		schedule
+	]);
+	useEffect(() => {
+		if (!open) return;
+		const frame = requestAnimationFrame(() => {
+			const node = panelRef.current;
+			if (!node) return;
+			const rect = node.getBoundingClientRect();
+			const overflow = rect.bottom - (window.innerHeight - EDGE);
+			if (overflow <= 0) return;
+			window.scrollBy({
+				top: Math.min(overflow, Math.max(0, rect.top - EDGE)),
+				behavior: prefersReducedMotion() ? "instant" : "smooth"
+			});
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [open]);
+	useEffect(() => {
+		if (open) return;
+		const trigger = triggerRef.current;
+		if (!trigger) return;
+		const rect = trigger.getBoundingClientRect();
+		if (rect.bottom < 0 || rect.top > window.innerHeight) trigger.scrollIntoView({
+			block: "center",
+			behavior: prefersReducedMotion() ? "instant" : "smooth"
+		});
+	}, [open]);
+	const measureLayout = useCallback(() => {
+		const box = bounds();
+		const available = Math.max(0, box.right - box.left - 16);
+		return {
+			single: months === 1 || months === "auto" && available < WIDE_MIN,
+			width: Math.min(352, available)
+		};
+	}, [bounds, months]);
+	useEffect(() => {
+		if (!open) return;
+		const onResize = () => {
+			const next = measureLayout();
+			setCompact(next.single);
+			setPanelWidth(next.width);
+			schedule();
+		};
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, [
+		measureLayout,
+		open,
+		schedule
+	]);
+	const count = compact ? 1 : 2;
+	const cellSize = compact && panelWidth ? Math.max(32, Math.min(42, Math.floor((panelWidth - 24) / 7))) : WIDE_CELL;
+	/** The month the calendar opens on: the range's end, with the month before it beside it when two show. */
+	const viewFor = (range, single) => {
+		const end = (range.end ?? range.start ?? today(getLocalTimeZone())).set({ day: 1 });
+		return single ? end : end.subtract({ months: 1 });
+	};
+	const openPanel = () => {
+		setTodayValue(today(getLocalTimeZone()));
+		const layout = measureLayout();
+		setCompact(layout.single);
+		setPanelWidth(layout.width);
+		setDraft(committed);
+		setSnapshot({
+			anchor: null,
+			highlighted: null
+		});
+		setFocus(viewFor(committed, layout.single));
+		setOpen(true);
+	};
+	const close = useCallback((focusTrigger) => {
+		if (focusTrigger) pendingFocus.current = "trigger";
+		summaryRect.current = summaryRef.current?.getBoundingClientRect() ?? null;
+		setOpen(false);
+		setSnapshot({
+			anchor: null,
+			highlighted: null
+		});
+	}, []);
+	const apply = () => {
+		const next = snapshot.anchor ? {
+			start: snapshot.anchor,
+			end: snapshot.anchor
+		} : draft;
+		if (!next.start && !next.end && !props.clearable) return;
+		setCommitted(next);
+		close(true);
+	};
+	useLayoutEffect(() => {
+		if (prefersReducedMotion()) return;
+		if (open && summaryRef.current && restingRef.current) flyFrom(summaryRef.current, restingRef.current.getBoundingClientRect(), "grow");
+	}, [open, mounted]);
+	useLayoutEffect(() => {
+		if (!open && summaryRect.current && restingRef.current && !prefersReducedMotion()) {
+			flyFrom(restingRef.current, summaryRect.current, "shrink");
+			summaryRect.current = null;
+		}
+	}, [open]);
+	useLayoutEffect(() => {
+		if (pendingFocus.current === "trigger" && !open) {
+			pendingFocus.current = null;
+			triggerRef.current?.focus({ preventScroll: true });
+		}
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const down = (event) => {
+			if (!rootRef.current?.contains(event.target)) close(false);
+		};
+		document.addEventListener("pointerdown", down);
+		return () => document.removeEventListener("pointerdown", down);
+	}, [close, open]);
+	useEffect(() => {
+		if (!open || !mounted) return;
+		const frame = requestAnimationFrame(() => {
+			const panel = panelRef.current;
+			if (!panel || panel.contains(document.activeElement)) return;
+			(panel.querySelector("[data-slot=\"calendar-cell\"][data-selection-start]:not([data-outside-month])") ?? panel.querySelector("[data-slot=\"calendar-cell\"][data-selection-end]:not([data-outside-month])") ?? panel.querySelector("[data-slot=\"calendar-cell\"]:not([data-outside-month]):not([data-disabled])"))?.focus({ preventScroll: true });
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [open, mounted]);
+	const choosePreset = (preset) => {
+		const range = preset.range(todayValue);
+		setDraft(range);
+		setSnapshot({
+			anchor: null,
+			highlighted: null
+		});
+		setFocus(viewFor(range, compact));
+	};
+	const invalid = props.errorMessage != null;
+	const describedBy = [props.description != null && descriptionId, invalid && errorId].filter(Boolean).join(" ");
+	const size = props.size ?? "md";
+	const disabled = Boolean(props.isDisabled);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "date-range-picker",
+		"data-invalid": invalid || void 0,
+		className: cnAll(datePickerVariants(), props.className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: cnAll(datePickerLabelVariants(), props.labelHidden && "sr-only"),
+				children: props.label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: rootRef,
+				"data-open": open || void 0,
+				"data-disabled": disabled || void 0,
+				"data-invalid": invalid || void 0,
+				className: cnAll("range-root", rootSize[size]),
+				onKeyDown: (event) => {
+					if (event.key === "Escape" && open) {
+						event.preventDefault();
+						event.stopPropagation();
+						close(true);
+					}
+				},
+				onBlur: (event) => {
+					const next = event.relatedTarget;
+					if (open && next && !event.currentTarget.contains(next)) close(false);
+				},
+				children: [/* @__PURE__ */ jsxs("button", {
+					ref: (node) => {
+						mergedRef(node);
+						if (!node) return;
+						if (open) node.setAttribute("inert", "");
+						else node.removeAttribute("inert");
+					},
+					type: "button",
+					"data-slot": "range-trigger",
+					disabled,
+					"aria-haspopup": "dialog",
+					"aria-expanded": open,
+					"aria-controls": open ? panelId : void 0,
+					"aria-labelledby": `${labelId} ${valueId}`,
+					"aria-describedby": describedBy || void 0,
+					onClick: openPanel,
+					className: cnAll("relative z-10 flex w-full cursor-pointer items-center gap-2 border-0 bg-transparent text-start text-base leading-(--leading-normal) text-foreground outline-none", "disabled:cursor-not-allowed", triggerSize[size]),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "range-quiet flex flex-none text-muted-foreground [&_svg]:size-(--icon-sm)",
+							children: /* @__PURE__ */ jsx(CalendarGlyph, {})
+						}),
+						/* @__PURE__ */ jsx("span", {
+							id: valueId,
+							className: "sr-only",
+							children: committedText
+						}),
+						/* @__PURE__ */ jsx("span", {
+							ref: restingRef,
+							"data-slot": "range-value",
+							className: cnAll("range-quiet flex min-w-0 flex-1 overflow-hidden tabular-nums", !(committed.start || committed.end) && "text-muted-foreground"),
+							children: /* @__PURE__ */ jsx(RollingWords, {
+								text: committedText,
+								direction: committedDirection
+							})
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "range-quiet flex flex-none text-muted-foreground [&_svg]:size-(--icon-sm)",
+							children: /* @__PURE__ */ jsx(Chevron, {})
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					ref: surfaceRef,
+					"data-slot": "range-surface",
+					className: cnAll("range-surface", disabled && "bg-muted opacity-(--opacity-disabled)", invalid && "border-destructive-strong"),
+					style: { borderRadius: RADIUS_CLOSED },
+					children: mounted ? /* @__PURE__ */ jsxs("div", {
+						ref: panelRef,
+						id: panelId,
+						role: "dialog",
+						"aria-label": props.label,
+						"data-slot": "range-panel",
+						"data-compact": compact || void 0,
+						style: {
+							"--cell": `${cellSize}px`,
+							width: compact && panelWidth ? panelWidth : void 0
+						},
+						className: cnAll("absolute top-0 start-0 box-border w-[max-content] text-sm leading-(--leading-normal) text-foreground", compact ? "p-2" : "p-2.5"),
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								"data-slot": "range-body",
+								className: cnAll("flex", compact ? "flex-col gap-2" : "gap-2.5", closing ? "motion-safe:animate-range-face-out motion-reduce:animate-range-face-fade-out" : "motion-safe:animate-range-face-in motion-reduce:animate-range-face-fade-in"),
+								children: [/* @__PURE__ */ jsx(PresetRail, {
+									presets,
+									active: activePreset,
+									compact,
+									label: messages.presets,
+									onChoose: choosePreset
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex min-w-0 flex-col gap-3",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "flex gap-2",
+										children: [/* @__PURE__ */ jsx(TypedDate, {
+											label: startLabel,
+											value: draft.start,
+											minValue: props.minValue,
+											maxValue: props.maxValue,
+											onChange: (next) => {
+												if (next || props.clearable) setDraft({
+													start: next,
+													end: draft.end
+												});
+											}
+										}), /* @__PURE__ */ jsx(TypedDate, {
+											label: endLabel,
+											value: draft.end,
+											minValue: props.minValue,
+											maxValue: props.maxValue,
+											onChange: (next) => {
+												if (next || props.clearable) setDraft({
+													start: draft.start,
+													end: next
+												});
+											}
+										})]
+									}), /* @__PURE__ */ jsxs(RangeCalendar, {
+										"aria-label": props.label,
+										value: complete,
+										onChange: (next) => setDraft({
+											start: next.start,
+											end: next.end
+										}),
+										focusedValue: focus ?? void 0,
+										onFocusChange: setFocus,
+										minValue: props.minValue,
+										maxValue: props.maxValue,
+										visibleDuration: { months: count },
+										pageBehavior: "single",
+										selectionAlignment: "start",
+										"data-slot": "range-calendar",
+										style: { "--density-control-h-sm": "var(--cell)" },
+										className: cnAll("relative flex flex-col font-sans", compact && "self-center"),
+										children: [
+											/* @__PURE__ */ jsx(CalendarBridge, { onSnapshot: setSnapshot }),
+											/* @__PURE__ */ jsx(RangeDriver, {}),
+											/* @__PURE__ */ jsxs("div", {
+												className: "relative",
+												children: [
+													/* @__PURE__ */ jsx(Button, {
+														slot: "previous",
+														"aria-label": messages.previousMonth,
+														className: cnAll(calendarNavVariants(), "absolute start-0 top-0 z-20 size-8"),
+														children: /* @__PURE__ */ jsx("svg", {
+															viewBox: "0 0 24 24",
+															fill: "none",
+															stroke: "currentColor",
+															strokeWidth: "2",
+															"aria-hidden": "true",
+															children: /* @__PURE__ */ jsx("path", {
+																d: "m15 18-6-6 6-6",
+																strokeLinecap: "round",
+																strokeLinejoin: "round"
+															})
+														})
+													}),
+													/* @__PURE__ */ jsx(Button, {
+														slot: "next",
+														"aria-label": messages.nextMonth,
+														className: cnAll(calendarNavVariants(), "absolute end-0 top-0 z-20 size-8"),
+														children: /* @__PURE__ */ jsx("svg", {
+															viewBox: "0 0 24 24",
+															fill: "none",
+															stroke: "currentColor",
+															strokeWidth: "2",
+															"aria-hidden": "true",
+															children: /* @__PURE__ */ jsx("path", {
+																d: "m9 18 6-6-6-6",
+																strokeLinecap: "round",
+																strokeLinejoin: "round"
+															})
+														})
+													}),
+													/* @__PURE__ */ jsx(MonthSets, { count })
+												]
+											})
+										]
+									})]
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								"data-slot": "range-footer",
+								className: cnAll("mt-2.5 flex items-center justify-between gap-3 border-t-(length:--border-width) border-border pt-2.5 ps-3", compact && "flex-wrap"),
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: cnAll("grid min-w-0 gap-px", compact && "flex-[1_1_8rem]"),
+									children: [/* @__PURE__ */ jsx("span", {
+										ref: summaryRef,
+										"data-slot": "range-summary",
+										className: "inline-flex w-[max-content] font-medium tabular-nums",
+										children: /* @__PURE__ */ jsx(RollingWords, {
+											text: shownText,
+											direction: shownDirection
+										})
+									}), /* @__PURE__ */ jsx("span", {
+										className: "inline-flex min-h-4.5 text-xs text-muted-foreground tabular-nums",
+										children: countText ? /* @__PURE__ */ jsx(RollingWords, {
+											text: countText,
+											direction: shownDirection
+										}) : null
+									})]
+								}), /* @__PURE__ */ jsxs("div", {
+									className: cnAll("flex flex-none items-center gap-1.5", compact && "ms-auto"),
+									children: [
+										props.clearable ? /* @__PURE__ */ jsx(Button$1, {
+											variant: "ghost",
+											size: "sm",
+											onPress: () => {
+												setDraft(NO_RANGE);
+												setSnapshot({
+													anchor: null,
+													highlighted: null
+												});
+											},
+											children: messages.clear
+										}) : null,
+										/* @__PURE__ */ jsx(Button$1, {
+											variant: "ghost",
+											size: "sm",
+											onPress: () => close(true),
+											children: messages.cancel
+										}),
+										/* @__PURE__ */ jsx(Button$1, {
+											variant: "primary",
+											size: "sm",
+											onPress: apply,
+											isDisabled: !shown && !(props.clearable && (committed.start || committed.end)),
+											children: messages.apply
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "sr-only",
+								"aria-live": "polite",
+								children: status
+							})
+						]
+					}) : null
+				})]
+			}),
+			props.description == null ? null : /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				"data-slot": "date-range-picker-description",
+				className: descriptionClass,
+				children: props.description
+			}),
+			invalid ? /* @__PURE__ */ jsx("span", {
+				id: errorId,
+				"data-slot": "date-range-picker-error",
+				className: errorClass,
+				children: props.errorMessage
+			}) : null
+		]
+	});
+});
+//#endregion
+export { DateRangePicker, defaultDateRangePresets };
+
+//# sourceMappingURL=date-range-picker.js.map