@sanguo-dev/calendar-ui 0.0.0-stage → 0.0.2

package/dist/index.cjs

@@ -0,0 +1,1079 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+// src/utils/dom.ts
+/** 简单建节点：文本一律走 textContent，避免节假日名里的特殊字符被当成 HTML */
+const node = function(tag, className, text) {
+	const el = document.createElement(tag);
+	if (className) el.className = className;
+	if (text !== void 0) el.textContent = text;
+	return el;
+};
+// src/utils/motion.ts
+/** 是否开启了「减少动态效果」；jsdom 等环境没有 matchMedia 时当作未开启 */
+const prefersReducedMotion = function() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+/** 把 CSS 里的时长读成毫秒，支持 `200ms` / `0.2s` / 纯数字；非法值回退 */
+const parseCssDuration = function(value, fallback) {
+	const match = /^\s*(-?\d*\.?\d+)\s*(ms|s)?\s*$/i.exec(value);
+	if (match === null) return fallback;
+	const amount = Number(match[1]);
+	if (!Number.isFinite(amount) || amount < 0) return fallback;
+	return match[2]?.toLowerCase() === "s" ? amount * 1e3 : amount;
+};
+/** 当前元素上的 CSS 变量优先，CSS 变量没有声明时用 JS 选项 */
+const readCssDuration = function(style, name, fallback) {
+	const value = style.getPropertyValue(name).trim();
+	return value === "" ? fallback : parseCssDuration(value, fallback);
+};
+const readCssEasing = function(style, name, fallback) {
+	const value = style.getPropertyValue(name).trim();
+	return value === "" ? fallback : value;
+};
+/** WAAPI 的 easing 不认非法值会抛错，这里退回到 ease */
+const normalizeEasing = function(easing) {
+	if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return easing;
+	return CSS.supports("animation-timing-function", easing) ? easing : "ease";
+};
+// src/components/day.ts
+/** 周末判断：只看公历星期，与节日 / 调休数据无关 */
+const isWeekend = function(year, month, day) {
+	const weekday = new Date(Date.UTC(year, month - 1, day)).getUTCDay();
+	return weekday === 0 || weekday === 6;
+};
+/**
+* 建一个空的日期格
+*
+* 节点只建一次，之后靠 setDay / setDayState 更新，换月不再分配新节点。
+*/
+const createDayCell = function() {
+	const cell = node("button", "cui__day");
+	cell.type = "button";
+	const tag = node("span", "cui__day-tag");
+	tag.hidden = true;
+	tag.setAttribute("aria-hidden", "true");
+	cell.append(tag, node("span", "cui__day-num"), node("span", "cui__day-sub"));
+	return cell;
+};
+/** 更新格子的日期内容；同一日期不重复写文本，只刷新状态 */
+const setDay = function(cell, day) {
+	const key = `${day.year}-${day.month}-${day.day}`;
+	if (cell.dataset.date !== key) {
+		cell.dataset.date = key;
+		const tag = cell.firstElementChild;
+		const num = tag.nextElementSibling;
+		const sub = num.nextElementSibling;
+		const badge = day.badge;
+		tag.textContent = badge?.text ?? "";
+		tag.hidden = badge === null;
+		if (badge?.tone !== void 0) {
+			tag.dataset.tone = badge.tone;
+			cell.dataset.tone = badge.tone;
+		} else {
+			delete tag.dataset.tone;
+			delete cell.dataset.tone;
+		}
+		num.textContent = String(day.day);
+		sub.textContent = day.subtitle;
+		cell.classList.toggle("is-weekend", isWeekend(day.year, day.month, day.day));
+	}
+	setDayState(cell, day);
+};
+/** 只更新状态类，不动文本；选中、hover 预览这类高频操作走这里 */
+const setDayState = function(cell, day) {
+	cell.classList.toggle("is-outside", !day.inCurrentMonth);
+	cell.classList.toggle("is-today", day.isToday);
+	cell.classList.toggle("is-selected", day.isSelected);
+	cell.classList.toggle("is-range-start", day.isRangeStart);
+	cell.classList.toggle("is-range-end", day.isRangeEnd);
+	cell.classList.toggle("is-in-range", day.isInRange);
+	cell.classList.toggle("is-disabled", day.isDisabled);
+	cell.disabled = day.isDisabled;
+	cell.tabIndex = day.inCurrentMonth && !day.isDisabled ? 0 : -1;
+	cell.setAttribute("aria-label", day.ariaLabel);
+	if (day.isDisabled) cell.setAttribute("aria-disabled", "true");
+	else cell.removeAttribute("aria-disabled");
+	if (day.isSelected) cell.setAttribute("aria-pressed", "true");
+	else cell.removeAttribute("aria-pressed");
+};
+// src/components/grid.ts
+/** 固定 6 行 × 7 列 */
+const CELL_COUNT = 42;
+const ROW_COUNT = 6;
+/** 读一行当前的视觉尺寸（动画进行中时读到的是动画值） */
+const readRowMetrics = function(row) {
+	const rect = row.getBoundingClientRect();
+	const style = getComputedStyle(row);
+	const margin = Number.parseFloat(style.marginBottom);
+	return {
+		height: rect.height,
+		opacity: Number.parseFloat(style.opacity) || 0,
+		marginBottom: Number.isFinite(margin) ? margin : 0
+	};
+};
+/**
+* 日期网格：42 个格子只建一次，之后按索引复用
+*
+* - render：换月时更新日期/副标题 + 状态
+* - updateState：只切选中/今天等状态类，不动文本
+* - setVisibleRows：折叠时按行动画高度，其余行收起
+*
+* 行高动画必须按真实像素走：CSS 的 max-height 过渡从 200px 收到 0，
+* 真正可见的变化只落在缓动的最后 20%，看起来就是「先不动、再突然合上」。
+*
+* 没有做“按日期复用 + DOM 重排”：42 个节点的移动比 42 次文本写入更贵，
+* 实测换月反而从 0.60ms 退化到 0.93ms。
+*/
+const createGrid = function(options) {
+	const el = node("div", "cui__grid");
+	const rowEls = Array.from({ length: ROW_COUNT }, () => node("div", "cui__week"));
+	const cells = Array.from({ length: CELL_COUNT }, () => createDayCell());
+	rowEls.forEach((row, index) => {
+		row.append(...cells.slice(index * 7, index * 7 + 7));
+	});
+	el.append(...rowEls);
+	let days = [];
+	/** 上一次应用的行集合，重复渲染时直接跳过 */
+	let visibleKey = null;
+	/** 每一行正在跑的高度动画；再次切换时从当前可见高度接着走 */
+	const rowAnimations = /* @__PURE__ */ new Map();
+	const onClick = (event) => {
+		const cell = event.target.closest(".cui__day");
+		if (!cell) return;
+		const picked = days[cells.indexOf(cell)];
+		if (picked && !picked.isDisabled) options.onSelect(picked);
+	};
+	const applyRowState = (row, visible) => {
+		row.classList.toggle("is-collapsed-hidden", !visible);
+		row.toggleAttribute("inert", !visible);
+		if (visible) row.removeAttribute("aria-hidden");
+		else row.setAttribute("aria-hidden", "true");
+	};
+	const cancelRowAnimations = () => {
+		rowAnimations.forEach((animation) => {
+			try {
+				animation.cancel();
+			} catch {}
+		});
+		rowAnimations.clear();
+	};
+	const applyInstant = (visible) => {
+		rowEls.forEach((row, index) => {
+			applyRowState(row, visible === null || visible.has(index));
+		});
+	};
+	const animateRows = (visible) => {
+		const firstRow = rowEls[0];
+		const gridStyle = getComputedStyle(el);
+		const duration = readCssDuration(gridStyle, "--cui-collapse-duration", 200);
+		const easing = readCssEasing(gridStyle, "--cui-collapse-easing", "ease");
+		if (typeof firstRow.animate !== "function" || prefersReducedMotion() || duration === 0) {
+			cancelRowAnimations();
+			applyInstant(visible);
+			return;
+		}
+		const before = rowEls.map(readRowMetrics);
+		cancelRowAnimations();
+		applyInstant(visible);
+		const after = rowEls.map(readRowMetrics);
+		rowEls.forEach((row, index) => {
+			const from = before[index];
+			const to = after[index];
+			if (Math.abs(from.height - to.height) < .5) return;
+			const animation = row.animate([{
+				height: `${from.height}px`,
+				opacity: from.opacity,
+				marginBottom: `${from.marginBottom}px`
+			}, {
+				height: `${to.height}px`,
+				opacity: to.opacity,
+				marginBottom: `${to.marginBottom}px`
+			}], {
+				duration,
+				easing,
+				fill: "none"
+			});
+			rowAnimations.set(row, animation);
+			animation.finished.then(() => {
+				if (rowAnimations.get(row) === animation) rowAnimations.delete(row);
+			}).catch(() => {});
+		});
+	};
+	el.addEventListener("click", onClick);
+	return {
+		el,
+		render: (next) => {
+			days = next;
+			for (let i = 0; i < CELL_COUNT; i++) {
+				const day = next[i];
+				if (day) setDay(cells[i], day);
+			}
+		},
+		updateState: (next) => {
+			days = next;
+			for (let i = 0; i < CELL_COUNT; i++) {
+				const day = next[i];
+				if (day) setDayState(cells[i], day);
+			}
+		},
+		setVisibleRows: (rows, animate = true) => {
+			const visible = rows === null ? null : new Set(rows);
+			const key = visible === null ? "*" : [...visible].sort((a, b) => a - b).join(",");
+			if (!animate) {
+				cancelRowAnimations();
+				applyInstant(visible);
+				visibleKey = key;
+				return;
+			}
+			if (key === visibleKey) return;
+			visibleKey = key;
+			animateRows(visible);
+		},
+		destroy: () => {
+			cancelRowAnimations();
+			el.removeEventListener("click", onClick);
+		}
+	};
+};
+// src/components/nav.ts
+/** 头部左右切换按钮 */
+const createNav = function(options) {
+	const el = node("button", "cui__nav", options.label);
+	el.type = "button";
+	el.setAttribute("aria-label", options.ariaLabel);
+	el.addEventListener("click", options.onClick);
+	return {
+		el,
+		setDisabled: (disabled) => {
+			el.disabled = disabled;
+			if (disabled) el.setAttribute("aria-disabled", "true");
+			else el.removeAttribute("aria-disabled");
+		},
+		destroy: () => el.removeEventListener("click", options.onClick)
+	};
+};
+// src/components/header.ts
+/** 头部：默认是 ‹ 年月 ›，也可以交给 renderer 完全自定义 */
+const createHeader = function(options) {
+	const el = node("div", "cui__header");
+	const title = node("div", "cui__title");
+	const prev = createNav({
+		label: "‹",
+		ariaLabel: options.locale.prevMonth,
+		onClick: options.onPrev
+	});
+	const next = createNav({
+		label: "›",
+		ariaLabel: options.locale.nextMonth,
+		onClick: options.onNext
+	});
+	let year = options.year;
+	let month = options.month;
+	const titleText = () => options.title ? options.title(year, month) : options.locale.monthTitle(year, month);
+	const renderDefault = () => {
+		if (el.childElementCount === 0) el.append(prev.el, title, next.el);
+		const nextTitle = titleText();
+		if (title.textContent !== nextTitle) title.textContent = nextTitle;
+	};
+	const renderCustom = () => {
+		el.replaceChildren(options.renderer({
+			year,
+			month,
+			locale: options.locale,
+			prevMonth: options.onPrev,
+			nextMonth: options.onNext
+		}));
+	};
+	const render = () => {
+		if (options.renderer) renderCustom();
+		else renderDefault();
+	};
+	render();
+	return {
+		el,
+		update: (nextYear, nextMonth) => {
+			year = nextYear;
+			month = nextMonth;
+			render();
+		},
+		setNavDisabled: (prevDisabled, nextDisabled) => {
+			prev.setDisabled(prevDisabled);
+			next.setDisabled(nextDisabled);
+		},
+		destroy: () => {
+			prev.destroy();
+			next.destroy();
+		}
+	};
+};
+// src/components/weekdays.ts
+/** 星期表头，按一周起始日轮转 */
+const createWeekdays = function(weekStartsOn, locale) {
+	const el = node("div", "cui__weekdays");
+	for (let i = 0; i < 7; i++) {
+		const weekday = (weekStartsOn + i) % 7;
+		const cell = node("div", "cui__weekday", locale.weekdays[weekday]);
+		cell.title = locale.weekdaysLong[weekday];
+		el.appendChild(cell);
+	}
+	return { el };
+};
+// src/locales/en-US.ts
+const MONTHS = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+/** 英文 */
+const enUS = {
+	name: "en-US",
+	weekdays: [
+		"Sun",
+		"Mon",
+		"Tue",
+		"Wed",
+		"Thu",
+		"Fri",
+		"Sat"
+	],
+	weekdaysLong: [
+		"Sunday",
+		"Monday",
+		"Tuesday",
+		"Wednesday",
+		"Thursday",
+		"Friday",
+		"Saturday"
+	],
+	monthTitle: (year, month) => `${MONTHS[month - 1] ?? month} ${year}`,
+	prevMonth: "Previous month",
+	nextMonth: "Next month",
+	collapse: "Collapse calendar",
+	expand: "Expand calendar"
+};
+// src/locales/zh-CN.ts
+/** 简体中文：默认语言 */
+const zhCN = {
+	name: "zh-CN",
+	weekdays: [
+		"日",
+		"一",
+		"二",
+		"三",
+		"四",
+		"五",
+		"六"
+	],
+	weekdaysLong: [
+		"星期日",
+		"星期一",
+		"星期二",
+		"星期三",
+		"星期四",
+		"星期五",
+		"星期六"
+	],
+	monthTitle: (year, month) => `${year} 年 ${month} 月`,
+	prevMonth: "上个月",
+	nextMonth: "下个月",
+	collapse: "收起日历",
+	expand: "展开日历"
+};
+// src/locales/index.ts
+/** 内置语言包，key 可直接传给 createCalendarUI 的 locale 选项 */
+const locales = {
+	"zh-CN": zhCN,
+	"en-US": enUS
+};
+/** 把 "zh-CN" 这类名称或自定义语言包，统一解析成语言包对象 */
+const resolveLocale = function(locale = "zh-CN") {
+	if (typeof locale !== "string") return locale;
+	return locales[locale];
+};
+// src/utils/date.ts
+/** 日期字符串：YYYY-M-D，分隔符必须一致 */
+const DATE_INPUT_PATTERN = /^(\d{4})([-/])(\d{1,2})\2(\d{1,2})$/;
+/** 去掉时分秒，只保留本地年月日 */
+const toDateOnly = function(date) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+};
+/**
+* 解析用户传入的日期
+*
+* 支持 Date，以及 `2026-10-01`、`2026-10-1`、`2026/10/01`、`2026/10/1`。
+* 不交给 `new Date(string)`，避免时区/格式歧义。
+*/
+const parseDateInput = function(value, path = "date") {
+	if (value instanceof Date) {
+		if (Number.isNaN(value.getTime())) throw new TypeError(`[calendar-ui] ${path} 必须是有效的 Date`);
+		return toDateOnly(value);
+	}
+	if (typeof value !== "string") throw new TypeError(`[calendar-ui] ${path} 必须是 Date 或 YYYY-MM-DD / YYYY/MM/DD 字符串`);
+	const match = DATE_INPUT_PATTERN.exec(value.trim());
+	if (!match) throw new TypeError(`[calendar-ui] ${path} 必须是 Date 或 YYYY-MM-DD / YYYY/MM/DD 字符串，收到 ${JSON.stringify(value)}`);
+	const year = Number(match[1]);
+	const month = Number(match[3]);
+	const day = Number(match[4]);
+	if (month < 1 || month > 12) throw new RangeError(`[calendar-ui] ${path} 月份必须在 1-12 之间`);
+	const date = /* @__PURE__ */ new Date(0);
+	date.setHours(0, 0, 0, 0);
+	date.setFullYear(year, month - 1, day);
+	if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) throw new RangeError(`[calendar-ui] ${path} 不是有效日期: ${value}`);
+	return date;
+};
+/** 把日期转成可比较的数字 key：YYYYMMDD */
+const dateKey = function(date) {
+	return date.getFullYear() * 1e4 + (date.getMonth() + 1) * 100 + date.getDate();
+};
+/** 加减天数，按本地日历计算 */
+const addDays = function(date, amount) {
+	const next = toDateOnly(date);
+	next.setDate(next.getDate() + amount);
+	return next;
+};
+/** 比较两个日期，只比年月日 */
+const compareDay = function(a, b) {
+	return dateKey(a) - dateKey(b);
+};
+/** 同一天（只比年月日，忽略时分秒） */
+const sameDay = function(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+};
+/** 把年月规范成合法值，月份越界时自动进位/退位 */
+const normalizeMonth = function(year, month) {
+	const date = new Date(year, month - 1, 1);
+	return {
+		year: date.getFullYear(),
+		month: date.getMonth() + 1
+	};
+};
+// src/utils/days.ts
+/** 某个年月 1 号是星期几（0 为周日） */
+const firstWeekdayOf = function(year, month) {
+	return new Date(year, month - 1, 1).getDay();
+};
+/** 生成 6 行 × 7 列共 42 个公历日期，包含上下月补位格 */
+const buildMonthDates = function(year, month, weekStartsOn) {
+	const offset = (firstWeekdayOf(year, month) - weekStartsOn + 7) % 7;
+	const days = [];
+	for (let i = 0; i < 42; i++) {
+		const date = new Date(year, month - 1, i - offset + 1);
+		days.push({
+			year: date.getFullYear(),
+			month: date.getMonth() + 1,
+			day: date.getDate(),
+			date,
+			inCurrentMonth: date.getMonth() + 1 === month && date.getFullYear() === year
+		});
+	}
+	return days;
+};
+/** 生成 42 个格子的数据；今天/选中每次现算，适配器只负责装饰 */
+const buildDays = function(options) {
+	const dates = buildMonthDates(options.year, options.month, options.weekStartsOn);
+	const decorations = options.adapter ? options.adapter.decorateMonth({
+		year: options.year,
+		month: options.month,
+		weekStartsOn: options.weekStartsOn,
+		today: options.today,
+		locale: options.locale,
+		days: dates
+	}) : [];
+	return dates.map((date, index) => {
+		const decoration = decorations[index] ?? null;
+		const badge = decoration?.badge ?? null;
+		const adapterSubtitle = decoration?.subtitle ?? "";
+		const customSubtitle = options.subtitle?.(date);
+		const subtitle = customSubtitle === null || customSubtitle === void 0 ? adapterSubtitle : customSubtitle;
+		const key = `${date.year}-${date.month}-${date.day}`;
+		const isDisabled = options.isDisabled?.(date.date) ?? false;
+		const rangeStart = options.rangeStart ?? null;
+		const rangeEnd = options.rangeEnd ?? null;
+		const isRangeStart = rangeStart !== null && sameDay(date.date, rangeStart);
+		const isRangeEnd = rangeEnd !== null && sameDay(date.date, rangeEnd);
+		const isInRange = rangeStart !== null && rangeEnd !== null && compareDay(date.date, rangeStart) >= 0 && compareDay(date.date, rangeEnd) <= 0;
+		return {
+			...date,
+			isToday: sameDay(date.date, options.today),
+			isSelected: options.selected !== null && sameDay(date.date, options.selected) || isRangeStart || isRangeEnd,
+			isDisabled,
+			isRangeStart,
+			isRangeEnd,
+			isInRange,
+			subtitle,
+			badge,
+			data: decoration?.data ?? null,
+			ariaLabel: decoration?.ariaLabel ?? [
+				key,
+				badge?.text ?? "",
+				subtitle,
+				isDisabled ? "不可选" : ""
+			].filter((part) => part !== "").join(" ")
+		};
+	});
+};
+// src/calendar.ts
+/** 没有显式 min/max 时，搜索可选日期的兜底范围 */
+const SEARCH_MIN = new Date(1900, 0, 1);
+const SEARCH_MAX = new Date(2100, 11, 31);
+const readDate = function(value, path) {
+	if (value === null || value === void 0) return null;
+	return parseDateInput(value, path);
+};
+const monthIndexOf = function(year, month) {
+	return year * 12 + (month - 1);
+};
+const monthFromIndex = function(index) {
+	return {
+		year: Math.floor(index / 12),
+		month: index % 12 + 1
+	};
+};
+/** 在 [min, max] 内找离 desired 最近的可选日期 */
+const findSelectable = function(desired, minDate, maxDate, disabled) {
+	const blocked = function(date) {
+		const key = dateKey(date);
+		return minDate !== null && compareDay(date, minDate) < 0 || maxDate !== null && compareDay(date, maxDate) > 0 || disabled.has(key);
+	};
+	let candidate = toDateOnly(desired);
+	if (minDate !== null && compareDay(candidate, minDate) < 0) candidate = minDate;
+	if (maxDate !== null && compareDay(candidate, maxDate) > 0) candidate = maxDate;
+	if (!blocked(candidate)) return candidate;
+	const lower = minDate ?? SEARCH_MIN;
+	const upper = maxDate ?? SEARCH_MAX;
+	const maxOffset = Math.max(0, compareDay(upper, lower));
+	for (let offset = 1; offset <= maxOffset; offset++) {
+		const forward = addDays(candidate, offset);
+		if (compareDay(forward, upper) <= 0 && !blocked(forward)) return forward;
+		const backward = addDays(candidate, -offset);
+		if (compareDay(backward, lower) >= 0 && !blocked(backward)) return backward;
+	}
+	throw new RangeError("[calendar-ui] 当前日期约束下没有可选日期");
+};
+/**
+* 在容器里创建一个日历
+*
+* 只依赖 DOM，不依赖任何框架；重复调用 createCalendarUI 会各自独立。
+* 不传 adapter 时就是纯公历，适配器负责提供副标题、标记和透传数据。
+*/
+function createCalendarUI(container, options = {}) {
+	const weekStartsOn = options.weekStartsOn ?? 1;
+	const locale = resolveLocale(options.locale);
+	const adapter = options.adapter;
+	let theme = options.theme ?? "auto";
+	const today = /* @__PURE__ */ new Date();
+	const readDuration = function(value, fallback, path) {
+		const duration = value ?? fallback;
+		if (!Number.isFinite(duration) || duration < 0) throw new TypeError(`[calendar-ui] ${path} 必须是大于等于 0 的数字`);
+		return duration;
+	};
+	const readEasing = function(value, path) {
+		const easing = value ?? "ease";
+		if (typeof easing !== "string" || easing.trim() === "") throw new TypeError(`[calendar-ui] ${path} 必须是非空字符串`);
+		return easing;
+	};
+	const animation = options.animation;
+	if (animation !== void 0 && (animation === null || typeof animation !== "object")) throw new TypeError("[calendar-ui] animation 必须是对象");
+	const slide = animation?.slide ?? null;
+	const collapseOptions = animation?.collapse ?? null;
+	const monthTransition = slide === null ? "none" : "slide";
+	const monthDuration = readDuration(slide?.duration, 220, "animation.slide.duration");
+	const monthEasing = readEasing(slide?.easing, "animation.slide.easing");
+	const collapsible = collapseOptions !== null;
+	const collapseDuration = readDuration(collapseOptions?.duration, 200, "animation.collapse.duration");
+	const collapseEasing = readEasing(collapseOptions?.easing, "animation.collapse.easing");
+	const mode = options.mode ?? "single";
+	if (mode !== "single" && mode !== "range") throw new TypeError("[calendar-ui] mode 必须是 single 或 range");
+	const requestedMonths = options.months ?? 1;
+	if (requestedMonths !== 1 && requestedMonths !== 2) throw new RangeError("[calendar-ui] months 只能是 1 或 2");
+	let minDate = readDate(options.minDate, "minDate");
+	let maxDate = readDate(options.maxDate, "maxDate");
+	if (minDate !== null && maxDate !== null && compareDay(minDate, maxDate) > 0) throw new RangeError("[calendar-ui] minDate 不能晚于 maxDate");
+	const disabledDates = options.disabledDates ?? [];
+	if (!Array.isArray(disabledDates)) throw new TypeError("[calendar-ui] disabledDates 必须是 Date 数组");
+	const disabledSet = /* @__PURE__ */ new Set();
+	disabledDates.forEach((value, index) => {
+		const date = readDate(value, `disabledDates[${index}]`);
+		if (date !== null) disabledSet.add(dateKey(date));
+	});
+	const isDisabled = function(date) {
+		const key = dateKey(date);
+		return minDate !== null && key < dateKey(minDate) || maxDate !== null && key > dateKey(maxDate) || disabledSet.has(key);
+	};
+	const initial = findSelectable(readDate(options.initialDate ?? today, "initialDate"), minDate, maxDate, disabledSet);
+	let monthCount = mode === "range" ? requestedMonths : 1;
+	if (monthCount === 2 && minDate !== null && maxDate !== null && monthIndexOf(maxDate.getFullYear(), maxDate.getMonth() + 1) - monthIndexOf(minDate.getFullYear(), minDate.getMonth() + 1) < 1) monthCount = 1;
+	let firstYear = initial.getFullYear();
+	let firstMonth = initial.getMonth() + 1;
+	if (monthCount === 2 && maxDate !== null) {
+		const maxFirst = monthIndexOf(maxDate.getFullYear(), maxDate.getMonth() + 1) - 1;
+		if (monthIndexOf(firstYear, firstMonth) > maxFirst) {
+			const clamped = monthFromIndex(maxFirst);
+			firstYear = clamped.year;
+			firstMonth = clamped.month;
+		}
+	}
+	const state = {
+		year: firstYear,
+		month: firstMonth,
+		selected: initial
+	};
+	let rangeStart = null;
+	let rangeEnd = null;
+	let collapsed = collapsible && collapseOptions?.defaultCollapsed === true;
+	let collapseButton = null;
+	const root = node("div", "cui");
+	root.dataset.theme = theme;
+	root.style.setProperty("--cui-month-duration", `${monthDuration}ms`);
+	root.style.setProperty("--cui-month-easing", monthEasing);
+	root.style.setProperty("--cui-collapse-duration", `${collapseDuration}ms`);
+	root.style.setProperty("--cui-collapse-easing", collapseEasing);
+	if (monthCount === 2) root.classList.add("cui--range");
+	const monthOf = function(offset = 0) {
+		return normalizeMonth(state.year, state.month + offset);
+	};
+	/** 按当前 state 生成某一列的 42 个格子 */
+	const currentDays = function(offset = 0) {
+		const month = monthOf(offset);
+		return buildDays({
+			year: month.year,
+			month: month.month,
+			weekStartsOn,
+			today,
+			selected: mode === "single" ? state.selected : null,
+			rangeStart,
+			rangeEnd,
+			locale,
+			adapter,
+			isDisabled,
+			subtitle: options.subtitle
+		});
+	};
+	const rangeCopy = function() {
+		return {
+			start: rangeStart === null ? null : new Date(rangeStart),
+			end: rangeEnd === null ? null : new Date(rangeEnd)
+		};
+	};
+	const withRangeFields = function(day) {
+		const isStart = rangeStart !== null && sameDay(day.date, rangeStart);
+		const isEnd = rangeEnd !== null && sameDay(day.date, rangeEnd);
+		return {
+			...day,
+			isSelected: isStart || isEnd,
+			isRangeStart: isStart,
+			isRangeEnd: isEnd,
+			isInRange: rangeStart !== null && rangeEnd !== null && compareDay(day.date, rangeStart) >= 0 && compareDay(day.date, rangeEnd) <= 0
+		};
+	};
+	const updateCollapseButton = function() {
+		if (collapseButton === null) return;
+		collapseButton.textContent = collapsed ? "⌄" : "⌃";
+		collapseButton.setAttribute("aria-expanded", String(!collapsed));
+		collapseButton.setAttribute("aria-label", collapsed ? locale.expand ?? "展开日历" : locale.collapse ?? "收起日历");
+	};
+	const updateCollapsedRows = function(dayLists, animate) {
+		if (!collapsed) {
+			panels.forEach((panel) => panel.grid.setVisibleRows(null, animate));
+			return;
+		}
+		const targets = mode === "range" ? [rangeStart, rangeEnd].filter((date) => date !== null) : [state.selected];
+		if (targets.length === 0) targets.push(state.selected);
+		panels.forEach((panel, index) => {
+			const rows = /* @__PURE__ */ new Set();
+			const days = dayLists[index] ?? [];
+			targets.forEach((target) => {
+				const dayIndex = days.findIndex((day) => sameDay(day.date, target) && (monthCount === 1 || day.inCurrentMonth));
+				if (dayIndex >= 0) rows.add(Math.floor(dayIndex / 7));
+			});
+			if (rows.size === 0) {
+				const first = days.findIndex((day) => day.inCurrentMonth);
+				rows.add(first >= 0 ? Math.floor(first / 7) : 0);
+			}
+			panel.grid.setVisibleRows([...rows].sort((a, b) => a - b), animate);
+		});
+	};
+	function applyCollapse(next) {
+		if (!collapsible) return;
+		collapsed = next;
+		updateCollapseButton();
+		render();
+	}
+	function toggleCollapsed() {
+		applyCollapse(!collapsed);
+	}
+	function updatePanelLabels() {
+		panelEls.forEach((el, index) => {
+			const month = monthOf(index);
+			el.setAttribute("aria-label", locale.monthTitle(month.year, month.month));
+		});
+	}
+	function updateNav() {
+		const first = monthIndexOf(state.year, state.month);
+		const last = first + monthCount - 1;
+		const min = minDate === null ? Number.NEGATIVE_INFINITY : monthIndexOf(minDate.getFullYear(), minDate.getMonth() + 1);
+		const max = maxDate === null ? Number.POSITIVE_INFINITY : monthIndexOf(maxDate.getFullYear(), maxDate.getMonth() + 1);
+		header.setNavDisabled(first <= min, last >= max);
+	}
+	function render(animateRows = true) {
+		header.update(state.year, state.month);
+		const dayLists = panels.map((_, index) => currentDays(index));
+		panels.forEach((panel, index) => panel.grid.render(dayLists[index]));
+		updatePanelLabels();
+		updateNav();
+		updateCollapsedRows(dayLists, animateRows);
+		updateCollapseButton();
+	}
+	function applyRangeClick(target) {
+		const date = toDateOnly(target);
+		if (rangeStart === null || rangeEnd !== null) {
+			rangeStart = date;
+			rangeEnd = null;
+		} else if (compareDay(date, rangeStart) < 0) {
+			rangeEnd = rangeStart;
+			rangeStart = date;
+		} else rangeEnd = date;
+		render();
+		options.onRangeChange?.(rangeCopy());
+	}
+	/** 处理点选：补位格只改选中，不切换展示月份 */
+	function handleSelect(day) {
+		if (day.isDisabled) return;
+		if (mode === "range") {
+			applyRangeClick(day.date);
+			options.onSelect?.(withRangeFields(day));
+			return;
+		}
+		state.selected = toDateOnly(day.date);
+		if (day.inCurrentMonth) {
+			state.year = day.year;
+			state.month = day.month;
+		}
+		if (collapsed) {
+			render();
+			const days = currentDays();
+			options.onSelect?.(days.find((item) => sameDay(item.date, day.date)) ?? day);
+			return;
+		}
+		const days = currentDays();
+		panels[0]?.grid.updateState(days);
+		options.onSelect?.(days.find((item) => sameDay(item.date, day.date)) ?? day);
+	}
+	let monthAnimationToken = 0;
+	let monthAnimation = null;
+	/** 结束翻月动画：各层留在终点，并移除旧月份的克隆层 */
+	function stopMonthAnimation() {
+		const active = monthAnimation;
+		if (active === null) return;
+		monthAnimation = null;
+		clearTimeout(active.timer);
+		active.animations.forEach((animation) => {
+			try {
+				animation.cancel();
+			} catch {}
+		});
+		active.layers.forEach((layer) => layer.remove());
+		panels.forEach((panel) => {
+			panel.grid.el.classList.remove("is-month-in-next", "is-month-in-prev", "is-month-out-next", "is-month-out-prev");
+		});
+	}
+	/** 克隆旧月份作为离场层；折叠行在换月后由 syncLayerRows 对齐 */
+	function captureMonthSnapshot() {
+		return panels.map((panel) => {
+			const clone = panel.grid.el.cloneNode(true);
+			clone.classList.add("is-month-clone");
+			clone.classList.remove("is-month-in-next", "is-month-in-prev", "is-month-out-next", "is-month-out-prev");
+			clone.setAttribute("aria-hidden", "true");
+			clone.querySelectorAll("button").forEach((button) => {
+				button.tabIndex = -1;
+			});
+			panel.viewport.append(clone);
+			return clone;
+		});
+	}
+	/** 离场层和新月份用同一套折叠行，两层高度一致，滑动时不会露出空隙 */
+	function syncLayerRows(layers) {
+		layers.forEach((layer, index) => {
+			const sourceRows = panels[index]?.grid.el.querySelectorAll(".cui__week");
+			const layerRows = layer.querySelectorAll(".cui__week");
+			sourceRows?.forEach((source, rowIndex) => {
+				const target = layerRows[rowIndex];
+				if (target === void 0) return;
+				const hidden = source.classList.contains("is-collapsed-hidden");
+				target.classList.toggle("is-collapsed-hidden", hidden);
+				target.toggleAttribute("inert", hidden);
+				if (hidden) target.setAttribute("aria-hidden", "true");
+				else target.removeAttribute("aria-hidden");
+			});
+		});
+	}
+	/**
+	* 用 Web Animations 驱动翻月
+	*
+	* 不靠切换类名重启动画，也就不需要在点击处理里强制同步一次布局；
+	* 快速连点时上一段会被 stopMonthAnimation 直接停到终点，不会叠加克隆层。
+	*/
+	function startMonthAnimation(direction, layers, duration, easing) {
+		const enter = `translateX(${direction * 100}%)`;
+		const leave = `translateX(${-direction * 100}%)`;
+		const inClass = direction === 1 ? "is-month-in-next" : "is-month-in-prev";
+		const outClass = direction === 1 ? "is-month-out-next" : "is-month-out-prev";
+		const animations = [];
+		panels.forEach((panel, index) => {
+			const grid = panel.grid.el;
+			const oldLayer = layers[index] ?? null;
+			grid.classList.add(inClass);
+			oldLayer?.classList.add(outClass);
+			if (typeof grid.animate !== "function") return;
+			animations.push(grid.animate([{ transform: enter }, { transform: "translateX(0)" }], {
+				duration,
+				easing,
+				fill: "both"
+			}));
+			if (oldLayer !== null) animations.push(oldLayer.animate([{ transform: "translateX(0)" }, { transform: leave }], {
+				duration,
+				easing,
+				fill: "both"
+			}));
+		});
+		const token = ++monthAnimationToken;
+		const timer = setTimeout(() => {
+			if (monthAnimation?.token === token) stopMonthAnimation();
+		}, duration + 80);
+		monthAnimation = {
+			token,
+			layers: [...layers],
+			animations,
+			timer
+		};
+	}
+	function goTo(year, month) {
+		let next = normalizeMonth(year, month);
+		if (minDate !== null) {
+			const min = monthIndexOf(minDate.getFullYear(), minDate.getMonth() + 1);
+			if (monthIndexOf(next.year, next.month) < min) next = monthFromIndex(min);
+		}
+		if (maxDate !== null) {
+			const maxFirst = monthIndexOf(maxDate.getFullYear(), maxDate.getMonth() + 1) - (monthCount - 1);
+			if (monthIndexOf(next.year, next.month) > maxFirst) next = monthFromIndex(maxFirst);
+		}
+		const currentIndex = monthIndexOf(state.year, state.month);
+		const nextIndex = monthIndexOf(next.year, next.month);
+		if (nextIndex === currentIndex) return;
+		const direction = nextIndex > currentIndex ? 1 : -1;
+		const rootStyle = getComputedStyle(root);
+		const duration = readCssDuration(rootStyle, "--cui-month-duration", monthDuration);
+		const easing = normalizeEasing(readCssEasing(rootStyle, "--cui-month-easing", monthEasing));
+		const shouldAnimate = monthTransition === "slide" && duration > 0 && !prefersReducedMotion();
+		stopMonthAnimation();
+		const layers = shouldAnimate ? captureMonthSnapshot() : [];
+		state.year = next.year;
+		state.month = next.month;
+		render(false);
+		syncLayerRows(layers);
+		if (shouldAnimate) startMonthAnimation(direction, layers, duration, easing);
+		options.onMonthChange?.(state.year, state.month);
+	}
+	function applyBounds(nextMin, nextMax) {
+		if (nextMin !== null && nextMax !== null && compareDay(nextMin, nextMax) > 0) throw new RangeError("[calendar-ui] minDate 不能晚于 maxDate");
+		const nextSelected = findSelectable(state.selected, nextMin, nextMax, disabledSet);
+		minDate = nextMin;
+		maxDate = nextMax;
+		state.selected = nextSelected;
+		state.year = nextSelected.getFullYear();
+		state.month = nextSelected.getMonth() + 1;
+		if (monthCount === 2 && maxDate !== null) {
+			const maxFirst = monthIndexOf(maxDate.getFullYear(), maxDate.getMonth() + 1) - 1;
+			if (monthIndexOf(state.year, state.month) > maxFirst) {
+				const clamped = monthFromIndex(maxFirst);
+				state.year = clamped.year;
+				state.month = clamped.month;
+			}
+		}
+		render();
+	}
+	const panelEls = [];
+	const panels = Array.from({ length: monthCount }, () => {
+		const viewport = node("div", "cui__viewport");
+		const grid = createGrid({ onSelect: handleSelect });
+		viewport.append(grid.el);
+		return {
+			weekdays: createWeekdays(weekStartsOn, locale),
+			viewport,
+			grid
+		};
+	});
+	const header = createHeader({
+		year: state.year,
+		month: state.month,
+		locale,
+		title: monthCount === 2 ? (year, month) => {
+			const next = normalizeMonth(year, month + 1);
+			return `${locale.monthTitle(year, month)} – ${locale.monthTitle(next.year, next.month)}`;
+		} : void 0,
+		onPrev: () => goTo(state.year, state.month - 1),
+		onNext: () => goTo(state.year, state.month + 1),
+		renderer: options.renderHeader
+	});
+	header.el.hidden = options.header === false;
+	if (monthCount === 1) root.append(header.el, panels[0].weekdays.el, panels[0].viewport);
+	else {
+		const monthsEl = node("div", "cui__months");
+		panels.forEach((panel) => {
+			const monthEl = node("div", "cui__month");
+			monthEl.setAttribute("role", "group");
+			monthEl.append(panel.weekdays.el, panel.viewport);
+			monthsEl.append(monthEl);
+			panelEls.push(monthEl);
+		});
+		root.append(header.el, monthsEl);
+	}
+	if (collapsible) {
+		collapseButton = node("button", "cui__collapse");
+		collapseButton.type = "button";
+		collapseButton.addEventListener("click", toggleCollapsed);
+		root.append(collapseButton);
+	}
+	root.classList.add("cui--no-animation");
+	container.appendChild(root);
+	render(false);
+	root.classList.remove("cui--no-animation");
+	return {
+		el: root,
+		setMonth: goTo,
+		getMonth: () => ({
+			year: state.year,
+			month: state.month
+		}),
+		prevMonth: () => goTo(state.year, state.month - 1),
+		nextMonth: () => goTo(state.year, state.month + 1),
+		select: (date) => {
+			const target = readDate(date, "select(date)");
+			if (target === null || isDisabled(target)) return;
+			if (mode === "range") {
+				const targetIndex = monthIndexOf(target.getFullYear(), target.getMonth() + 1);
+				const first = monthIndexOf(state.year, state.month);
+				if (targetIndex < first || targetIndex > first + monthCount - 1) {
+					state.year = target.getFullYear();
+					state.month = target.getMonth() + 1;
+				}
+				if (monthCount === 2 && maxDate !== null) {
+					const maxFirst = monthIndexOf(maxDate.getFullYear(), maxDate.getMonth() + 1) - 1;
+					if (monthIndexOf(state.year, state.month) > maxFirst) {
+						const clamped = monthFromIndex(maxFirst);
+						state.year = clamped.year;
+						state.month = clamped.month;
+					}
+				}
+				applyRangeClick(target);
+				const day = buildDays({
+					year: target.getFullYear(),
+					month: target.getMonth() + 1,
+					weekStartsOn,
+					today,
+					selected: null,
+					rangeStart,
+					rangeEnd,
+					locale,
+					adapter,
+					isDisabled,
+					subtitle: options.subtitle
+				}).find((item) => sameDay(item.date, target));
+				if (day) options.onSelect?.(withRangeFields(day));
+				return;
+			}
+			state.selected = target;
+			state.year = target.getFullYear();
+			state.month = target.getMonth() + 1;
+			render();
+			const day = currentDays().find((item) => sameDay(item.date, target));
+			if (day) options.onSelect?.(day);
+		},
+		getSelected: () => {
+			if (mode === "range") return rangeStart === null ? null : new Date(rangeStart);
+			return new Date(state.selected);
+		},
+		getRange: rangeCopy,
+		setRange: (start, end) => {
+			const nextStart = readDate(start, "setRange(start)");
+			const nextEnd = end === void 0 ? null : readDate(end, "setRange(end)");
+			if (nextStart === null) {
+				rangeStart = null;
+				rangeEnd = null;
+			} else {
+				if (isDisabled(nextStart) || nextEnd !== null && isDisabled(nextEnd)) return;
+				if (nextEnd === null) {
+					rangeStart = nextStart;
+					rangeEnd = null;
+				} else if (compareDay(nextStart, nextEnd) <= 0) {
+					rangeStart = nextStart;
+					rangeEnd = nextEnd;
+				} else {
+					rangeStart = nextEnd;
+					rangeEnd = nextStart;
+				}
+			}
+			render();
+			options.onRangeChange?.(rangeCopy());
+		},
+		clearRange: () => {
+			rangeStart = null;
+			rangeEnd = null;
+			render();
+			options.onRangeChange?.(rangeCopy());
+		},
+		show: () => {
+			root.hidden = false;
+		},
+		hide: () => {
+			root.hidden = true;
+		},
+		toggle: () => {
+			root.hidden = !root.hidden;
+		},
+		isVisible: () => !root.hidden,
+		showHeader: () => {
+			header.el.hidden = false;
+		},
+		hideHeader: () => {
+			header.el.hidden = true;
+		},
+		toggleHeader: () => {
+			header.el.hidden = !header.el.hidden;
+		},
+		isHeaderVisible: () => !header.el.hidden,
+		getMinDate: () => minDate === null ? null : new Date(minDate),
+		setMinDate: (date) => {
+			applyBounds(readDate(date, "setMinDate(date)"), maxDate);
+		},
+		getMaxDate: () => maxDate === null ? null : new Date(maxDate),
+		setMaxDate: (date) => {
+			applyBounds(minDate, readDate(date, "setMaxDate(date)"));
+		},
+		getTheme: () => theme,
+		setTheme: (next) => {
+			theme = next;
+			root.dataset.theme = next;
+		},
+		destroy: () => {
+			stopMonthAnimation();
+			collapseButton?.removeEventListener("click", toggleCollapsed);
+			header.destroy();
+			panels.forEach((panel) => panel.grid.destroy());
+			root.remove();
+		}
+	};
+}
+exports.createCalendarUI = createCalendarUI;
+exports.enUS = enUS;
+exports.locales = locales;
+exports.resolveLocale = resolveLocale;
+exports.zhCN = zhCN;