@optimum-intelligence/opti-ui 0.0.0-stage → 0.3.0

package/dist/components/calendar/Calendar.js

@@ -0,0 +1,709 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../icons/index.js";
+import { addDays, addMonths, clampDate, datePart, formatDate, formatDateLong, monthGrid, pad, startOfMonth, toRange, toUtcDate, todayIso, weekday } from "./date-utils.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/calendar/Calendar.tsx
+var defaultLabels = {
+	previousMonth: "Previous month",
+	nextMonth: "Next month",
+	previousYear: "Previous year",
+	nextYear: "Next year",
+	previousYears: "Previous years",
+	nextYears: "Next years",
+	chooseMonth: "Choose month",
+	chooseYear: "Choose year"
+};
+/** Years listed per page, in rows of three like the months. */
+var YEARS = 12;
+var yearOf = (date) => Number(date.slice(0, 4));
+var monthNumber = (date) => yearOf(date) * 12 + Number(date.slice(5, 7));
+/** The first visible month after moving `view` just enough to show `date`. */
+function reveal(view, date, count) {
+	const month = startOfMonth(date);
+	if (month < view) return month;
+	return month > addMonths(view, count - 1) ? addMonths(month, 1 - count) : view;
+}
+/** The months of the cursor's year, or the page of years around it. */
+function chooserItems({ mode, cursor }) {
+	const year = yearOf(cursor);
+	if (mode === "months") return Array.from({ length: 12 }, (_, month) => `${cursor.slice(0, 5)}${pad(month + 1)}-01`);
+	const start = Math.floor((year - 1) / YEARS) * YEARS + 1;
+	return Array.from({ length: YEARS }, (_, offset) => start + offset).filter((item) => item <= 9999).map((item) => `${pad(item, 4)}${cursor.slice(4, 8)}01`);
+}
+/** Month grids, navigation and keyboard handling shared by Calendar and RangeCalendar. */
+function CalendarView(t0) {
+	const $ = c(76);
+	let autoFocus;
+	let className;
+	let dayState;
+	let defaultMonth;
+	let isDateDisabled;
+	let labels;
+	let locale;
+	let max;
+	let min;
+	let multiselectable;
+	let onPick;
+	let onPreview;
+	let props;
+	let ref;
+	let t1;
+	let t2;
+	let target;
+	if ($[0] !== t0) {
+		({target, dayState, onPick, onPreview, multiselectable, min, max, isDateDisabled, defaultMonth, locale, weekStartsOn: t1, numberOfMonths: t2, autoFocus, labels, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = autoFocus;
+		$[2] = className;
+		$[3] = dayState;
+		$[4] = defaultMonth;
+		$[5] = isDateDisabled;
+		$[6] = labels;
+		$[7] = locale;
+		$[8] = max;
+		$[9] = min;
+		$[10] = multiselectable;
+		$[11] = onPick;
+		$[12] = onPreview;
+		$[13] = props;
+		$[14] = ref;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = target;
+	} else {
+		autoFocus = $[1];
+		className = $[2];
+		dayState = $[3];
+		defaultMonth = $[4];
+		isDateDisabled = $[5];
+		labels = $[6];
+		locale = $[7];
+		max = $[8];
+		min = $[9];
+		multiselectable = $[10];
+		onPick = $[11];
+		onPreview = $[12];
+		props = $[13];
+		ref = $[14];
+		t1 = $[15];
+		t2 = $[16];
+		target = $[17];
+	}
+	const weekStartsOn = t1 === void 0 ? 1 : t1;
+	const numberOfMonths = t2 === void 0 ? 1 : t2;
+	let t3;
+	if ($[18] !== labels) {
+		t3 = {
+			...defaultLabels,
+			...labels
+		};
+		$[18] = labels;
+		$[19] = t3;
+	} else t3 = $[19];
+	const text = t3;
+	const count = Math.max(1, Math.floor(numberOfMonths));
+	const [today] = React.useState(todayIso);
+	let t4;
+	if ($[20] !== defaultMonth || $[21] !== max || $[22] !== min || $[23] !== target || $[24] !== today) {
+		t4 = () => clampDate(target ?? datePart(defaultMonth) ?? today, min, max);
+		$[20] = defaultMonth;
+		$[21] = max;
+		$[22] = min;
+		$[23] = target;
+		$[24] = today;
+		$[25] = t4;
+	} else t4 = $[25];
+	const [focused, setFocused] = React.useState(t4);
+	let t5;
+	if ($[26] !== focused) {
+		t5 = () => startOfMonth(focused);
+		$[26] = focused;
+		$[27] = t5;
+	} else t5 = $[27];
+	const [view, setView] = React.useState(t5);
+	const monthsRef = React.useRef(null);
+	const moveFocus = React.useRef(Boolean(autoFocus));
+	const titleId = React.useId();
+	const [chooser, setChooser] = React.useState(null);
+	const [seen, setSeen] = React.useState(target);
+	if (target !== seen) {
+		setSeen(target);
+		if (target) {
+			setFocused(target);
+			setView(reveal(view, target, count));
+		}
+	}
+	let t6;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => {
+			if (!moveFocus.current) return;
+			moveFocus.current = false;
+			const months = monthsRef.current;
+			(months?.querySelector(".oui-calendar__choice[tabindex=\"0\"]") ?? months?.querySelector("[tabindex=\"0\"]"))?.focus();
+		};
+		$[28] = t6;
+	} else t6 = $[28];
+	let t7;
+	if ($[29] !== chooser || $[30] !== focused) {
+		t7 = [focused, chooser];
+		$[29] = chooser;
+		$[30] = focused;
+		$[31] = t7;
+	} else t7 = $[31];
+	React.useEffect(t6, t7);
+	let t8;
+	if ($[32] !== isDateDisabled || $[33] !== max || $[34] !== min) {
+		t8 = (date) => Boolean(min && date < min || max && date > max || isDateDisabled?.(date));
+		$[32] = isDateDisabled;
+		$[33] = max;
+		$[34] = min;
+		$[35] = t8;
+	} else t8 = $[35];
+	const disabled = t8;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t15;
+	let t9;
+	if ($[36] !== chooser || $[37] !== className || $[38] !== count || $[39] !== dayState || $[40] !== disabled || $[41] !== focused || $[42] !== locale || $[43] !== max || $[44] !== min || $[45] !== multiselectable || $[46] !== onPick || $[47] !== onPreview || $[48] !== props || $[49] !== ref || $[50] !== text || $[51] !== titleId || $[52] !== today || $[53] !== view || $[54] !== weekStartsOn) {
+		const formats = {
+			monthLong: new Intl.DateTimeFormat(locale, {
+				month: "long",
+				timeZone: "UTC"
+			}),
+			month: new Intl.DateTimeFormat(locale, {
+				month: "short",
+				timeZone: "UTC"
+			}),
+			weekdayShort: new Intl.DateTimeFormat(locale, {
+				weekday: "short",
+				timeZone: "UTC"
+			}),
+			weekdayLong: new Intl.DateTimeFormat(locale, {
+				weekday: "long",
+				timeZone: "UTC"
+			})
+		};
+		const yearText = _temp;
+		const go = (date_1) => {
+			const next = clampDate(date_1, min, max);
+			moveFocus.current = true;
+			setFocused(next);
+			setView(reveal(view, next, count));
+			return next;
+		};
+		const page = (amount) => {
+			const next_0 = clampDate(addMonths(focused, amount), min, max);
+			setFocused(next_0);
+			setView(reveal(addMonths(view, amount), next_0, count));
+		};
+		const select = (date_2) => {
+			if (disabled(date_2)) return;
+			go(date_2);
+			onPick(date_2);
+		};
+		const onKeyDown = (event) => {
+			const offset = (weekday(focused) - weekStartsOn + 7) % 7;
+			const move = {
+				ArrowLeft: () => addDays(focused, -1),
+				ArrowRight: () => addDays(focused, 1),
+				ArrowUp: () => addDays(focused, -7),
+				ArrowDown: () => addDays(focused, 7),
+				Home: () => addDays(focused, -offset),
+				End: () => addDays(focused, 6 - offset),
+				PageUp: () => addMonths(focused, event.shiftKey ? -12 : -1),
+				PageDown: () => addMonths(focused, event.shiftKey ? 12 : 1)
+			}[event.key];
+			if (!move) return;
+			event.preventDefault();
+			const day = go(move());
+			onPreview?.(day);
+		};
+		const earliest = startOfMonth(min ?? "0001-01-01");
+		const latest = startOfMonth(max ?? "9999-12-01");
+		const openChooser = (index, mode, cursor) => {
+			moveFocus.current = true;
+			setChooser({
+				index,
+				mode,
+				cursor: clampDate(cursor, earliest, latest)
+			});
+		};
+		const closeChooser = () => {
+			moveFocus.current = true;
+			setChooser(null);
+		};
+		const moveChooser = (current, amount_0, focus) => {
+			const step = current.mode === "months" ? amount_0 : amount_0 * 12;
+			if (monthNumber(current.cursor) + step < 13 || monthNumber(current.cursor) + step > 12e4) return;
+			moveFocus.current = focus;
+			setChooser({
+				...current,
+				cursor: clampDate(addMonths(current.cursor, step), earliest, latest)
+			});
+		};
+		const choose = (current_0, date_3) => {
+			if (current_0.mode === "years") {
+				openChooser(current_0.index, "months", date_3);
+				return;
+			}
+			const next_2 = clampDate(addMonths(focused, monthNumber(date_3) - monthNumber(focused)), min, max);
+			moveFocus.current = true;
+			setFocused(next_2);
+			setView(reveal(addMonths(date_3, -current_0.index), next_2, count));
+			setChooser(null);
+		};
+		const onChooserKeyDown = (current_1) => (event_0) => {
+			if (event_0.key === "Escape") {
+				event_0.preventDefault();
+				event_0.stopPropagation();
+				closeChooser();
+				return;
+			}
+			const amount_1 = {
+				ArrowLeft: -1,
+				ArrowRight: 1,
+				ArrowUp: -3,
+				ArrowDown: 3,
+				PageUp: -12,
+				PageDown: YEARS
+			}[event_0.key];
+			if (!amount_1) return;
+			event_0.preventDefault();
+			moveChooser(current_1, amount_1, true);
+		};
+		const months_0 = Array.from({ length: count }, (_, index_0) => addMonths(view, index_0));
+		const previous = addDays(view, -1);
+		const following = addMonths(view, count);
+		t13 = ref;
+		if ($[62] !== className) {
+			t14 = cx("oui-calendar", className);
+			$[62] = className;
+			$[63] = t14;
+		} else t14 = $[63];
+		t15 = props;
+		t9 = monthsRef;
+		t10 = "oui-calendar__months";
+		if ($[64] !== onPreview) {
+			t11 = onPreview ? () => onPreview(null) : void 0;
+			$[64] = onPreview;
+			$[65] = t11;
+		} else t11 = $[65];
+		t12 = months_0.map((first, index_1) => {
+			const days = monthGrid(first, weekStartsOn);
+			const month = first.slice(0, 7);
+			const weeks = Array.from({ length: 6 }, (__0, week) => days.slice(week * 7, week * 7 + 7));
+			const choosing = chooser?.index === index_1 ? chooser : null;
+			const choices = choosing ? chooserItems(choosing) : [];
+			return /* @__PURE__ */ jsxs("div", {
+				className: "oui-calendar__month",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "oui-calendar__header",
+					children: [
+						choosing ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "oui-calendar__nav",
+							"aria-label": choosing.mode === "months" ? text.previousYear : text.previousYears,
+							disabled: choices[0].slice(0, 4) <= earliest.slice(0, 4),
+							onClick: () => moveChooser(choosing, -12, false),
+							children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+						}) : index_1 === 0 ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "oui-calendar__nav",
+							"aria-label": text.previousMonth,
+							disabled: Boolean(min && previous < min),
+							onClick: () => page(-1),
+							children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+						}) : /* @__PURE__ */ jsx("span", { className: "oui-calendar__nav-spacer" }),
+						/* @__PURE__ */ jsx("div", {
+							id: `${titleId}-${index_1}`,
+							className: "oui-calendar__title",
+							"aria-live": "polite",
+							children: !choosing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "oui-calendar__title-button",
+									title: text.chooseYear,
+									onClick: () => openChooser(index_1, "years", first),
+									children: yearText(first)
+								}),
+								". ",
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "oui-calendar__title-button",
+									title: text.chooseMonth,
+									onClick: () => openChooser(index_1, "months", first),
+									children: formats.monthLong.format(toUtcDate(first))
+								})
+							] }) : choosing.mode === "months" ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "oui-calendar__title-button",
+								title: text.chooseYear,
+								onClick: () => openChooser(index_1, "years", choosing.cursor),
+								children: yearText(choosing.cursor)
+							}) : `${yearText(choices[0])} – ${yearText(choices[choices.length - 1])}`
+						}),
+						choosing ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "oui-calendar__nav",
+							"aria-label": choosing.mode === "months" ? text.nextYear : text.nextYears,
+							disabled: choices[choices.length - 1].slice(0, 4) >= latest.slice(0, 4),
+							onClick: () => moveChooser(choosing, YEARS, false),
+							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+						}) : index_1 === count - 1 ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "oui-calendar__nav",
+							"aria-label": text.nextMonth,
+							disabled: Boolean(max && following > max),
+							onClick: () => page(1),
+							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+						}) : /* @__PURE__ */ jsx("span", { className: "oui-calendar__nav-spacer" })
+					]
+				}), choosing ? /* @__PURE__ */ jsx("div", {
+					role: "group",
+					"aria-labelledby": `${titleId}-${index_1}`,
+					className: "oui-calendar__choices",
+					onKeyDown: onChooserKeyDown(choosing),
+					children: choices.map((date_4) => {
+						const unit = choosing.mode === "months" ? 7 : 4;
+						const key = date_4.slice(0, unit);
+						const unavailable = key < earliest.slice(0, unit) || key > latest.slice(0, unit);
+						const shown = key === first.slice(0, unit);
+						return /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "oui-calendar__choice",
+							tabIndex: key === choosing.cursor.slice(0, unit) ? 0 : -1,
+							"aria-pressed": shown,
+							"aria-disabled": unavailable || void 0,
+							"data-selected": shown ? "" : void 0,
+							"data-today": key === today.slice(0, unit) ? "" : void 0,
+							"data-disabled": unavailable ? "" : void 0,
+							onClick: unavailable ? void 0 : () => choose(choosing, date_4),
+							children: choosing.mode === "months" ? formats.month.format(toUtcDate(date_4)) : yearText(date_4)
+						}, date_4);
+					})
+				}) : /* @__PURE__ */ jsxs("div", {
+					role: "grid",
+					"aria-labelledby": `${titleId}-${index_1}`,
+					"aria-multiselectable": multiselectable || void 0,
+					className: "oui-calendar__grid",
+					onKeyDown,
+					children: [/* @__PURE__ */ jsx("div", {
+						role: "row",
+						className: "oui-calendar__row",
+						children: days.slice(0, 7).map((date_5) => /* @__PURE__ */ jsx("span", {
+							role: "columnheader",
+							className: "oui-calendar__weekday",
+							"aria-label": formats.weekdayLong.format(toUtcDate(date_5)),
+							children: formats.weekdayShort.format(toUtcDate(date_5))
+						}, date_5))
+					}), weeks.map((week_0) => /* @__PURE__ */ jsx("div", {
+						role: "row",
+						className: "oui-calendar__row",
+						children: week_0.map((date_6) => {
+							const outside = date_6.slice(0, 7) !== month;
+							if (outside && count > 1) return /* @__PURE__ */ jsx("span", {
+								role: "gridcell",
+								className: "oui-calendar__blank"
+							}, date_6);
+							const state = dayState(date_6);
+							return /* @__PURE__ */ jsx("button", {
+								type: "button",
+								role: "gridcell",
+								className: "oui-calendar__day",
+								tabIndex: date_6 === focused ? 0 : -1,
+								"aria-label": `${formatDateLong(date_6, locale)}, ${formats.weekdayLong.format(toUtcDate(date_6))}`,
+								"aria-selected": Boolean(state.selected || state.inRange),
+								"aria-current": date_6 === today ? "date" : void 0,
+								"aria-disabled": disabled(date_6) || void 0,
+								"data-selected": state.selected ? "" : void 0,
+								"data-in-range": state.inRange ? "" : void 0,
+								"data-range-start": state.rangeStart ? "" : void 0,
+								"data-range-end": state.rangeEnd ? "" : void 0,
+								"data-today": date_6 === today ? "" : void 0,
+								"data-outside": outside ? "" : void 0,
+								"data-disabled": disabled(date_6) ? "" : void 0,
+								onClick: () => select(date_6),
+								onPointerEnter: onPreview ? () => onPreview(date_6) : void 0,
+								children: Number(date_6.slice(8))
+							}, date_6);
+						})
+					}, week_0[0]))]
+				})]
+			}, month);
+		});
+		$[36] = chooser;
+		$[37] = className;
+		$[38] = count;
+		$[39] = dayState;
+		$[40] = disabled;
+		$[41] = focused;
+		$[42] = locale;
+		$[43] = max;
+		$[44] = min;
+		$[45] = multiselectable;
+		$[46] = onPick;
+		$[47] = onPreview;
+		$[48] = props;
+		$[49] = ref;
+		$[50] = text;
+		$[51] = titleId;
+		$[52] = today;
+		$[53] = view;
+		$[54] = weekStartsOn;
+		$[55] = t10;
+		$[56] = t11;
+		$[57] = t12;
+		$[58] = t13;
+		$[59] = t14;
+		$[60] = t15;
+		$[61] = t9;
+	} else {
+		t10 = $[55];
+		t11 = $[56];
+		t12 = $[57];
+		t13 = $[58];
+		t14 = $[59];
+		t15 = $[60];
+		t9 = $[61];
+	}
+	let t16;
+	if ($[66] !== t10 || $[67] !== t11 || $[68] !== t12 || $[69] !== t9) {
+		t16 = /* @__PURE__ */ jsx("div", {
+			ref: t9,
+			className: t10,
+			onPointerLeave: t11,
+			children: t12
+		});
+		$[66] = t10;
+		$[67] = t11;
+		$[68] = t12;
+		$[69] = t9;
+		$[70] = t16;
+	} else t16 = $[70];
+	let t17;
+	if ($[71] !== t13 || $[72] !== t14 || $[73] !== t15 || $[74] !== t16) {
+		t17 = /* @__PURE__ */ jsx("div", {
+			ref: t13,
+			className: t14,
+			...t15,
+			children: t16
+		});
+		$[71] = t13;
+		$[72] = t14;
+		$[73] = t15;
+		$[74] = t16;
+		$[75] = t17;
+	} else t17 = $[75];
+	return t17;
+}
+function _temp(date_0) {
+	return String(yearOf(date_0));
+}
+/**
+* Month grid for picking one day. Keyboard: arrows move by day / week,
+* Home / End jump within the week, PageUp / PageDown change month (with Shift: year).
+* The month and year in the title open a list to jump straight to another one.
+*/
+function Calendar(t0) {
+	const $ = c(19);
+	let onValueChange;
+	let props;
+	let t1;
+	let value;
+	if ($[0] !== t0) {
+		({value, defaultValue: t1, onValueChange, ...props} = t0);
+		$[0] = t0;
+		$[1] = onValueChange;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = value;
+	} else {
+		onValueChange = $[1];
+		props = $[2];
+		t1 = $[3];
+		value = $[4];
+	}
+	const defaultValue = t1 === void 0 ? null : t1;
+	let t2;
+	if ($[5] !== defaultValue) {
+		t2 = () => datePart(defaultValue);
+		$[5] = defaultValue;
+		$[6] = t2;
+	} else t2 = $[6];
+	const [inner, setInner] = React.useState(t2);
+	let t3;
+	if ($[7] !== inner || $[8] !== value) {
+		t3 = value === void 0 ? inner : datePart(value);
+		$[7] = inner;
+		$[8] = value;
+		$[9] = t3;
+	} else t3 = $[9];
+	const selected = t3;
+	let t4;
+	if ($[10] !== selected) {
+		t4 = (date) => ({ selected: date === selected });
+		$[10] = selected;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== onValueChange) {
+		t5 = (date_0) => {
+			setInner(date_0);
+			onValueChange?.(date_0);
+		};
+		$[12] = onValueChange;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== props || $[15] !== selected || $[16] !== t4 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsx(CalendarView, {
+			target: selected,
+			dayState: t4,
+			...props,
+			onPick: t5
+		});
+		$[14] = props;
+		$[15] = selected;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	return t6;
+}
+var rangeKey = (range) => range ? `${range.start}/${range.end}` : "";
+/**
+* Month grid for picking a range of days: the first pick sets one end, the
+* second completes the range (in either order). Same keyboard as Calendar.
+* Disabled days cannot be picked as an end but may fall inside a range.
+*/
+function RangeCalendar(t0) {
+	const $ = c(31);
+	let onValueChange;
+	let props;
+	let t1;
+	let value;
+	if ($[0] !== t0) {
+		({value, defaultValue: t1, onValueChange, ...props} = t0);
+		$[0] = t0;
+		$[1] = onValueChange;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = value;
+	} else {
+		onValueChange = $[1];
+		props = $[2];
+		t1 = $[3];
+		value = $[4];
+	}
+	const defaultValue = t1 === void 0 ? null : t1;
+	let t2;
+	if ($[5] !== defaultValue?.end || $[6] !== defaultValue?.start) {
+		t2 = () => toRange(defaultValue?.start, defaultValue?.end);
+		$[5] = defaultValue?.end;
+		$[6] = defaultValue?.start;
+		$[7] = t2;
+	} else t2 = $[7];
+	const [inner, setInner] = React.useState(t2);
+	let t3;
+	if ($[8] !== inner || $[9] !== value) {
+		t3 = value === void 0 ? inner : toRange(value?.start, value?.end);
+		$[8] = inner;
+		$[9] = value;
+		$[10] = t3;
+	} else t3 = $[10];
+	const range = t3;
+	const [anchor, setAnchor] = React.useState(null);
+	const [preview, setPreview] = React.useState(null);
+	let t4;
+	if ($[11] !== anchor || $[12] !== preview || $[13] !== range) {
+		t4 = anchor ? toRange(anchor, preview ?? anchor) : range;
+		$[11] = anchor;
+		$[12] = preview;
+		$[13] = range;
+		$[14] = t4;
+	} else t4 = $[14];
+	const shown = t4;
+	let t5;
+	if ($[15] !== range) {
+		t5 = () => rangeKey(range);
+		$[15] = range;
+		$[16] = t5;
+	} else t5 = $[16];
+	const [seen, setSeen] = React.useState(t5);
+	const [target, setTarget] = React.useState(range?.start ?? null);
+	if (rangeKey(range) !== seen) {
+		setSeen(rangeKey(range));
+		setTarget(range?.start ?? null);
+	}
+	let t6;
+	if ($[17] !== anchor || $[18] !== onValueChange) {
+		t6 = (date) => {
+			if (!anchor) {
+				setAnchor(date);
+				setPreview(date);
+				return;
+			}
+			const next = toRange(anchor, date);
+			setAnchor(null);
+			setPreview(null);
+			if (!next) return;
+			setInner(next);
+			setSeen(rangeKey(next));
+			onValueChange?.(next);
+		};
+		$[17] = anchor;
+		$[18] = onValueChange;
+		$[19] = t6;
+	} else t6 = $[19];
+	const select = t6;
+	const t7 = anchor ? "" : void 0;
+	let t8;
+	if ($[20] !== shown) {
+		t8 = (date_0) => shown ? {
+			selected: date_0 === shown.start || date_0 === shown.end,
+			inRange: date_0 >= shown.start && date_0 <= shown.end,
+			rangeStart: date_0 === shown.start,
+			rangeEnd: date_0 === shown.end
+		} : {};
+		$[20] = shown;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== anchor) {
+		t9 = (date_1) => {
+			if (anchor) setPreview(date_1);
+		};
+		$[22] = anchor;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== props || $[25] !== select || $[26] !== t7 || $[27] !== t8 || $[28] !== t9 || $[29] !== target) {
+		t10 = /* @__PURE__ */ jsx(CalendarView, {
+			multiselectable: true,
+			"data-selecting": t7,
+			target,
+			dayState: t8,
+			...props,
+			onPick: select,
+			onPreview: t9
+		});
+		$[24] = props;
+		$[25] = select;
+		$[26] = t7;
+		$[27] = t8;
+		$[28] = t9;
+		$[29] = target;
+		$[30] = t10;
+	} else t10 = $[30];
+	return t10;
+}
+//#endregion
+export { Calendar, RangeCalendar, formatDate, formatDateLong };
+
+//# sourceMappingURL=Calendar.js.map