@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/event-calendar/event-calendar.js

@@ -0,0 +1,795 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Button as n } from "../button/button.js";
+import { useMediaQuery as r } from "../lib/use-media-query.js";
+import { PopoverContent as i } from "../popover/popover.js";
+import { Glyph as a } from "../lib/glyphs.js";
+import { DropdownMenu as o, DropdownMenuContent as s, DropdownMenuItem as c, DropdownMenuLabel as l, DropdownMenuTrigger as u } from "../menu/dropdown-menu.js";
+import { SegmentedControl as d } from "../segmented-control/segmented-control.js";
+import { addDays as f, dayLabel as p, minutesOf as m, rangeLabel as h, shiftAnchor as g, timeOf as _, toDate as v, visibleDays as y, weekday as ee, weekdayName as b } from "./dates.js";
+import { isAllDay as x, packRow as S, placeDay as te, sortItems as ne, touches as C } from "./layout.js";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { useEffect as E, useMemo as re, useRef as ie, useState as D } from "react";
+import * as ae from "@radix-ui/react-popover";
+//#region src/event-calendar/event-calendar.tsx
+var O = {
+	today: "Today",
+	previous: "Previous",
+	next: "Next",
+	views: {
+		day: "Day",
+		week: "Week",
+		month: "Month"
+	},
+	viewsLabel: "Calendar view",
+	allDay: "All day",
+	pending: "Pending",
+	busy: "Busy",
+	more: (e) => `+${e} more`,
+	togglePanel: "Side panel",
+	grid: "Days",
+	help: "Double-click a day or drag across days to add something. Shortcuts: T today, D / W / M views, ← → move.",
+	helpTouch: "Double-tap a day to add something.",
+	empty: "Nothing on these dates",
+	todaySuffix: "today"
+}, k = 22, A = 44, j = 30;
+function M(e) {
+	return e.busy ? "var(--kf-fg-muted)" : e.color ? `var(--kf-category-${e.color})` : "var(--kf-primary)";
+}
+function N(e, t = 14) {
+	let n = M(e), r = e.status === "pending";
+	return {
+		background: `color-mix(in srgb, ${n} ${r ? Math.round(t / 2) : t}%, var(--kf-surface))`,
+		borderInlineStart: `3px ${r ? "dashed" : "solid"} ${n}`
+	};
+}
+var oe = (e) => !x(e) && e.startTime ? `${e.startTime}${e.endTime ? ` – ${e.endTime}` : ""}` : "";
+function se({ item: e, labels: t }) {
+	let n = [e.status === "pending" && t.pending, e.busy && t.busy].filter(Boolean);
+	return n.length ? /* @__PURE__ */ T("span", {
+		className: "sr-only",
+		children: [", ", n.join(", ")]
+	}) : null;
+}
+var ce = (e, t) => !!t && e >= t.start && e <= t.end, P = (e, t) => e <= t ? {
+	start: e,
+	end: t
+} : {
+	start: t,
+	end: e
+}, F = (e, t) => new DOMRect(e, t, 0, 0);
+function le(e, t, n) {
+	let [r, i] = D(t);
+	return [e ?? r, (t) => {
+		e === void 0 && i(t), n?.(t);
+	}];
+}
+function ue({ glyph: t, label: n, pressed: r, onClick: i }) {
+	return /* @__PURE__ */ w("button", {
+		type: "button",
+		"aria-label": n,
+		title: n,
+		"aria-pressed": r,
+		onClick: i,
+		className: e("inline-grid size-9 shrink-0 cursor-pointer place-items-center rounded-full border-0 text-fg transition-colors duration-150 pointer-coarse:size-11", "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus", r ? "bg-surface-muted" : "bg-transparent hover:bg-surface-muted"),
+		children: /* @__PURE__ */ w(a, {
+			name: t,
+			size: 18
+		})
+	});
+}
+function de({ item: n, labels: r, className: i, style: a, onOpen: o }) {
+	let s = x(n) ? void 0 : n.startTime;
+	return /* @__PURE__ */ T("button", {
+		type: "button",
+		title: [
+			n.title,
+			oe(n),
+			n.status === "pending" && r.pending
+		].filter(Boolean).join(" · "),
+		onPointerDown: (e) => e.stopPropagation(),
+		onDoubleClick: (e) => e.stopPropagation(),
+		onClick: (e) => o(n, e.currentTarget),
+		className: e("flex h-[19px] min-w-0 cursor-pointer items-center gap-1 overflow-hidden rounded-xs border-0 px-1.5 text-left font-sans text-[11px] leading-none font-medium text-fg", "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus", n.status === "pending" && "italic", i),
+		style: {
+			...N(n),
+			...a
+		},
+		children: [
+			(n.busy || n.icon) && /* @__PURE__ */ w(t, {
+				name: n.busy ? "lock" : n.icon,
+				size: 12,
+				className: "shrink-0",
+				style: { color: M(n) }
+			}),
+			s && /* @__PURE__ */ T("span", {
+				className: "shrink-0 tabular-nums",
+				children: [s, " "]
+			}),
+			/* @__PURE__ */ w("span", {
+				className: "truncate",
+				children: n.title
+			}),
+			/* @__PURE__ */ w(se, {
+				item: n,
+				labels: r
+			})
+		]
+	});
+}
+function fe({ weeks: t, items: n, lanes: r, top: i, minHeight: a, showNumbers: o, month: s, today: c, workDays: l, highlight: u, focusDay: d, locale: f, labels: m, onCellPointerDown: h, onCellPointerEnter: g, onCellDoubleClick: _, onGridKeyDown: y, onFocusDay: b, onOpenItem: te, onOpenDay: ne, ariaLabel: C }) {
+	let E = re(() => o ? n : n.filter(x), [n, o]);
+	return /* @__PURE__ */ w("div", {
+		role: "grid",
+		"aria-label": C,
+		onKeyDown: y,
+		className: "grid",
+		children: t.map((t) => {
+			let n = S(E, t), y = Math.max(0, ...n.map((e) => e.lane + 1)), x = Math.min(y, r), C = t.map((e, t) => n.filter((e) => e.lane >= r && e.from <= t && e.to >= t).length), re = Math.max(a, i + x * k + (C.some(Boolean) ? k : 0) + 4);
+			return /* @__PURE__ */ w("div", {
+				role: "row",
+				className: "grid border-b border-border last:border-b-0",
+				style: { gridTemplateColumns: `repeat(${t.length}, minmax(0, 1fr))` },
+				children: t.map((t, a) => {
+					let y = t === c, x = s !== void 0 && t.slice(0, 7) !== s, S = ce(t, u), E = !l.includes(ee(t));
+					return /* @__PURE__ */ T("div", {
+						role: "gridcell",
+						"data-day": t,
+						tabIndex: t === d ? 0 : -1,
+						"aria-selected": S,
+						"aria-current": y ? "date" : void 0,
+						onFocus: () => b(t),
+						onPointerDown: (e) => h(t, e),
+						onPointerEnter: () => g(t),
+						onDoubleClick: (e) => _(t, e),
+						className: e("relative border-r border-border last:border-r-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus", S ? "bg-primary/12" : E ? "bg-surface-muted/50" : "bg-transparent"),
+						style: { height: re },
+						children: [
+							o ? /* @__PURE__ */ T("span", {
+								className: e("absolute top-1 right-1 grid h-6 min-w-6 place-items-center rounded-full px-1 font-sans text-xs font-semibold tabular-nums", y ? "bg-primary text-on-primary" : x ? "text-fg-muted" : "text-fg"),
+								children: [v(t).getUTCDate(), /* @__PURE__ */ T("span", {
+									className: "sr-only",
+									children: [
+										" ",
+										"– ",
+										p(t, f),
+										y && `, ${m.todaySuffix}`
+									]
+								})]
+							}) : /* @__PURE__ */ T("span", {
+								className: "sr-only",
+								children: [p(t, f), y && `, ${m.todaySuffix}`]
+							}),
+							n.filter((e) => e.from === a && e.lane < r).map((e) => /* @__PURE__ */ w(pe, {
+								bar: e,
+								top: i,
+								labels: m,
+								onOpen: te
+							}, e.item.id)),
+							C[a] > 0 && /* @__PURE__ */ w("button", {
+								type: "button",
+								"aria-label": `${m.more(C[a])}, ${p(t, f)}`,
+								onPointerDown: (e) => e.stopPropagation(),
+								onDoubleClick: (e) => e.stopPropagation(),
+								onClick: (e) => ne(t, e.currentTarget),
+								className: "absolute right-0.5 left-0.5 z-[1] h-[19px] cursor-pointer rounded-xs border-0 bg-transparent px-1.5 text-left font-sans text-[11px] font-semibold text-link hover:bg-surface-muted focus-visible:outline-2 focus-visible:outline-focus",
+								style: { top: i + r * k },
+								children: m.more(C[a])
+							})
+						]
+					}, t);
+				})
+			}, t[0]);
+		})
+	});
+}
+function pe({ bar: t, top: n, labels: r, onOpen: i }) {
+	let a = t.to - t.from + 1;
+	return /* @__PURE__ */ w(de, {
+		item: t.item,
+		labels: r,
+		onOpen: i,
+		className: e("absolute z-[1]", t.continuesBefore ? "rounded-l-none" : "", t.continuesAfter ? "rounded-r-none" : ""),
+		style: {
+			top: n + t.lane * k,
+			left: t.continuesBefore ? 0 : 2,
+			width: `calc(${a * 100}% - ${(t.continuesBefore ? 0 : 2) + (t.continuesAfter ? 0 : 2)}px)`
+		}
+	});
+}
+function I(e) {
+	let t = Math.min(e.a, e.b) * j, n = (Math.max(e.a, e.b) + 1) * j;
+	return {
+		start: e.day,
+		end: e.day,
+		startTime: _(t),
+		endTime: _(n)
+	};
+}
+function me({ days: n, items: r, today: i, now: a, workDays: o, highlight: s, startHour: c, labels: l, onOpenItem: u, onSelect: d }) {
+	let f = ie(null), [p, h] = D(null), g = n.join();
+	E(() => {
+		f.current && (f.current.scrollTop = c * A - 8);
+	}, [n.length, c]);
+	let v = (e) => {
+		let t = e.currentTarget.getBoundingClientRect();
+		return Math.min(47, Math.max(0, Math.floor((e.clientY - t.top) / (A / 2))));
+	}, y = a ? m(a) : null, b = p ? I(p) : s?.startTime ? s : null;
+	return /* @__PURE__ */ w("div", {
+		ref: f,
+		className: "max-h-[560px] overflow-y-auto [scrollbar-gutter:stable]",
+		children: /* @__PURE__ */ T("div", {
+			className: "relative flex",
+			style: { height: 1056 },
+			children: [/* @__PURE__ */ T("div", {
+				"aria-hidden": "true",
+				className: "relative w-14 shrink-0",
+				children: [Array.from({ length: 23 }, (e, t) => /* @__PURE__ */ w("span", {
+					className: "absolute right-2 -translate-y-1/2 font-sans text-[11px] text-fg-muted tabular-nums",
+					style: { top: (t + 1) * A },
+					children: _((t + 1) * 60)
+				}, t)), y !== null && n.includes(i) && /* @__PURE__ */ w("span", {
+					className: "absolute right-1 z-[2] -translate-y-1/2 rounded-xs bg-danger-solid px-1 font-sans text-[10px] font-semibold text-on-danger-solid tabular-nums",
+					style: { top: y / 60 * A },
+					children: a
+				})]
+			}), /* @__PURE__ */ w("div", {
+				className: "grid flex-1",
+				style: { gridTemplateColumns: `repeat(${n.length}, minmax(0, 1fr))` },
+				children: n.map((n) => {
+					let a = te(r, n), s = !o.includes(ee(n)), c = b && b.start === n ? b : null;
+					return /* @__PURE__ */ T("div", {
+						"data-testid": `hours-${n}`,
+						className: e("relative border-l border-border select-none", n === i ? "bg-primary/5" : s ? "bg-surface-muted/50" : "bg-transparent"),
+						style: { backgroundImage: `repeating-linear-gradient(to bottom, transparent 0 43px, var(--kf-border) 43px ${A}px)` },
+						onPointerDown: (e) => {
+							if (e.button !== 0 || e.pointerType === "touch") return;
+							e.currentTarget.setPointerCapture(e.pointerId);
+							let t = v(e);
+							h({
+								day: n,
+								a: t,
+								b: t
+							});
+						},
+						onPointerMove: (e) => {
+							p?.day === n && h({
+								...p,
+								b: v(e)
+							});
+						},
+						onPointerUp: (e) => {
+							if (!p) return;
+							let t = p.a !== p.b;
+							h(null), t && d(I(p), F(e.clientX, e.clientY));
+						},
+						onPointerCancel: () => h(null),
+						onDoubleClick: (e) => {
+							let t = v(e) - v(e) % 2;
+							h(null), d(I({
+								day: n,
+								a: t,
+								b: t + 1
+							}), F(e.clientX, e.clientY));
+						},
+						children: [
+							c && /* @__PURE__ */ T("div", {
+								"aria-hidden": "true",
+								className: "absolute inset-x-0.5 z-[1] rounded-sm bg-primary/20 px-1.5 py-0.5 font-sans text-[11px] font-semibold text-fg ring-1 ring-primary tabular-nums",
+								style: {
+									top: m(c.startTime) / 60 * A,
+									height: (m(c.endTime) - m(c.startTime)) / 60 * A
+								},
+								children: [
+									c.startTime,
+									" – ",
+									c.endTime
+								]
+							}),
+							a.map((n) => {
+								let r = Math.max((n.to - n.from) / 60 * A - 2, 18), i = _(n.from), a = _(n.to);
+								return /* @__PURE__ */ T("button", {
+									type: "button",
+									onPointerDown: (e) => e.stopPropagation(),
+									onDoubleClick: (e) => e.stopPropagation(),
+									onClick: (e) => u(n.item, e.currentTarget),
+									className: e("absolute z-[1] flex cursor-pointer flex-col items-start overflow-hidden rounded-md border-0 px-1.5 py-0.5 text-left font-sans text-[11px] leading-tight text-fg shadow-sm", "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus", n.item.status === "pending" && "italic"),
+									style: {
+										...N(n.item, 22),
+										top: n.from / 60 * A + 1,
+										height: r,
+										left: `calc(${n.column / n.columns * 100}% + 2px)`,
+										width: `calc(${100 / n.columns}% - 4px)`
+									},
+									children: [
+										/* @__PURE__ */ T("span", {
+											className: r >= 34 ? "max-w-full truncate tabular-nums text-fg-muted" : "sr-only",
+											children: [
+												i,
+												" – ",
+												a,
+												" "
+											]
+										}),
+										/* @__PURE__ */ T("span", {
+											className: "flex max-w-full items-center gap-1 font-semibold",
+											children: [
+												n.item.busy && /* @__PURE__ */ w(t, {
+													name: "lock",
+													size: 11,
+													className: "shrink-0"
+												}),
+												/* @__PURE__ */ w("span", {
+													className: "truncate",
+													children: n.item.title
+												}),
+												/* @__PURE__ */ w(se, {
+													item: n.item,
+													labels: l
+												})
+											]
+										}),
+										r >= 52 && n.item.location && /* @__PURE__ */ T("span", {
+											className: "truncate text-fg-muted",
+											children: [" ", n.item.location]
+										})
+									]
+								}, n.item.id);
+							}),
+							y !== null && n === i && /* @__PURE__ */ w("div", {
+								"aria-hidden": "true",
+								className: "absolute inset-x-0 z-[2] h-px bg-danger-solid",
+								style: { top: y / 60 * A },
+								children: /* @__PURE__ */ w("span", { className: "absolute -top-[3px] -left-[4px] size-[7px] rounded-full bg-danger-solid" })
+							})
+						]
+					}, n);
+				})
+			})]
+		})
+	}, g);
+}
+function he({ days: n, today: r, items: i, locale: a = "en-US", labels: o, onOpenItem: s, onSelectRange: c, className: l }) {
+	let u = {
+		...O,
+		...o
+	}, d = n.map((e) => ({
+		day: e,
+		list: ne(i.filter((t) => C(t, e, e)))
+	})).filter((e) => e.list.length > 0 || e.day === r);
+	return d.length === 0 ? /* @__PURE__ */ w("p", {
+		className: e("m-0 p-4 font-sans text-sm text-fg-muted", l),
+		children: u.empty
+	}) : /* @__PURE__ */ w("ul", {
+		className: e("m-0 grid list-none gap-0 p-0 font-sans", l),
+		children: d.map(({ day: n, list: i }) => /* @__PURE__ */ T("li", {
+			className: "flex gap-3 border-b border-border px-3 py-2.5 last:border-b-0",
+			onDoubleClick: (e) => c?.({
+				start: n,
+				end: n
+			}, F(e.clientX, e.clientY)),
+			children: [/* @__PURE__ */ T("div", {
+				className: "grid w-10 shrink-0 content-start justify-items-center gap-0.5 pt-0.5",
+				children: [/* @__PURE__ */ w("span", {
+					className: "text-[11px] font-semibold text-fg-muted uppercase",
+					children: b(n, a)
+				}), /* @__PURE__ */ w("span", {
+					className: e("grid size-7 place-items-center rounded-full text-sm font-bold tabular-nums", n === r ? "bg-primary text-on-primary" : "text-fg"),
+					children: v(n).getUTCDate()
+				})]
+			}), /* @__PURE__ */ w("div", {
+				className: "grid min-w-0 flex-1 content-start gap-1",
+				children: i.length === 0 ? /* @__PURE__ */ w("span", {
+					className: "py-1 text-sm text-fg-muted",
+					children: u.empty
+				}) : i.map((n) => /* @__PURE__ */ T("button", {
+					type: "button",
+					onClick: (e) => s?.(n, e.currentTarget),
+					className: e("flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-sm border-0 px-2 py-1 text-left text-sm text-fg pointer-coarse:min-h-11", "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus", n.status === "pending" && "italic"),
+					style: N(n),
+					children: [
+						(n.busy || n.icon) && /* @__PURE__ */ w(t, {
+							name: n.busy ? "lock" : n.icon,
+							size: 14,
+							className: "shrink-0",
+							style: { color: M(n) }
+						}),
+						!x(n) && n.startTime && /* @__PURE__ */ T("span", {
+							className: "shrink-0 text-xs tabular-nums",
+							children: [n.startTime, " "]
+						}),
+						/* @__PURE__ */ w("span", {
+							className: "min-w-0 flex-1 truncate font-medium",
+							children: n.title
+						}),
+						n.status === "pending" && /* @__PURE__ */ T("span", {
+							className: "shrink-0 text-xs text-fg-muted",
+							children: [", ", u.pending]
+						}),
+						n.busy && /* @__PURE__ */ T("span", {
+							className: "sr-only",
+							children: [", ", u.busy]
+						})
+					]
+				}, n.id))
+			})]
+		}, n))
+	});
+}
+var ge = (e) => e instanceof HTMLElement && (e.isContentEditable || [
+	"INPUT",
+	"TEXTAREA",
+	"SELECT"
+].includes(e.tagName) || !!e.closest("[role=\"radiogroup\"],[role=\"menu\"]"));
+function _e({ items: t, today: a, now: m, view: ee, defaultView: x = "week", onViewChange: S, anchor: te, onAnchorChange: re, workDays: k = [
+	1,
+	2,
+	3,
+	4,
+	5
+], weekStartsOn: A = 1, locale: j = "en-US", labels: M, selection: N = null, loading: oe = !1, onSelectRange: se, quickActions: ce, onOpenItem: pe, renderItemPopover: I, toolbarEnd: _e, aside: L, asideOpen: ve, defaultAsideOpen: ye = !0, onAsideOpenChange: be, startHour: xe = 8, monthLanes: Se = 3, shortcuts: Ce = !0, showHelp: we = !0, headingLevel: Te = 2, className: Ee }) {
+	let R = {
+		...O,
+		...M,
+		views: {
+			...O.views,
+			...M?.views
+		}
+	}, [z, De] = le(ee, x, S), [B, Oe] = le(te, a, re), [ke, Ae] = le(ve, ye, be), je = r("(min-width: 48rem)"), Me = r("(min-width: 64rem)"), V = y(z, B, A), Ne = z === "month" ? B.slice(0, 7) : void 0, [Pe, Fe] = D();
+	E(() => {
+		if (m !== void 0) return;
+		let e = () => {
+			let e = /* @__PURE__ */ new Date();
+			Fe(_(e.getHours() * 60 + e.getMinutes()));
+		};
+		e();
+		let t = window.setInterval(e, 6e4);
+		return () => window.clearInterval(t);
+	}, [m]);
+	let Ie = m ?? Pe, [H, U] = D(null), [W, G] = D(null), [K, q] = D(null), [Le, Re] = D(B), ze = ie(!1), Be = ie(null), J = V.includes(Le) ? Le : V.includes(B) ? B : V[0];
+	E(() => {
+		ze.current && (ze.current = !1, Be.current?.querySelector(`[role="gridcell"][data-day="${J}"]`)?.focus());
+	});
+	let Y = W && P(W.start, W.end) || K && P(K.start, K.end) || (H?.type === "menu" ? H.range : null) || N, X = (e, t, n) => {
+		se?.(e);
+		let r = ce?.(e) ?? [];
+		r.length && U({
+			type: "menu",
+			range: e,
+			actions: r,
+			rect: t,
+			returnTo: n
+		});
+	}, Ve = (e, t) => {
+		pe?.(e), I && U({
+			type: "item",
+			item: e,
+			rect: t.getBoundingClientRect(),
+			returnTo: t
+		});
+	};
+	E(() => {
+		if (!W) return;
+		let e = (e) => {
+			G(null), W.start !== W.end && X(P(W.start, W.end), F(e.clientX, e.clientY), null);
+		}, t = () => G(null);
+		return window.addEventListener("pointerup", e), window.addEventListener("blur", t), () => {
+			window.removeEventListener("pointerup", e), window.removeEventListener("blur", t);
+		};
+	});
+	let Z = (e) => Oe(e), Q = (e) => De(e), He = (e) => {
+		if (!Ce || e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || H || ge(e.target)) return;
+		let t = e.key.toLowerCase();
+		if (t === "t") Z(a);
+		else if (t === "d") Q("day");
+		else if (t === "w") Q("week");
+		else if (t === "m") Q("month");
+		else if (e.key === "ArrowLeft") Z(g(z, B, -1));
+		else if (e.key === "ArrowRight") Z(g(z, B, 1));
+		else return;
+		e.preventDefault();
+	}, Ue = (e) => {
+		if (e.target instanceof HTMLElement && e.target.getAttribute("role") !== "gridcell") return;
+		let t = {
+			ArrowLeft: -1,
+			ArrowRight: 1
+		};
+		if (z === "month" && Object.assign(t, {
+			ArrowUp: -7,
+			ArrowDown: 7
+		}), e.key in t) {
+			e.preventDefault(), e.stopPropagation();
+			let n = f(J, t[e.key]);
+			q(e.shiftKey ? {
+				start: K?.start ?? J,
+				end: n
+			} : null), V.includes(n) || Z(z === "month" ? n : g(z, B, Math.sign(t[e.key]))), ze.current = !0, Re(n);
+		} else if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault(), e.stopPropagation();
+			let t = e.target;
+			X(K ? P(K.start, K.end) : {
+				start: J,
+				end: J
+			}, t.getBoundingClientRect(), t), q(null);
+		} else e.key === "Escape" && K && q(null);
+	}, We = {
+		onCellPointerDown: (e, t) => {
+			t.button === 0 && t.pointerType !== "touch" && (q(null), G({
+				start: e,
+				end: e
+			}));
+		},
+		onCellPointerEnter: (e) => {
+			W && W.end !== e && G({
+				...W,
+				end: e
+			});
+		},
+		onCellDoubleClick: (e, t) => {
+			G(null), X({
+				start: e,
+				end: e
+			}, F(t.clientX, t.clientY), t.currentTarget);
+		},
+		onFocusDay: (e) => Re(e),
+		onOpenItem: Ve,
+		onOpenDay: (e, t) => U({
+			type: "day",
+			day: e,
+			rect: t.getBoundingClientRect(),
+			returnTo: t
+		})
+	}, $ = () => U(null), Ge = (e) => {
+		e.preventDefault();
+		let t = H?.returnTo;
+		t?.isConnected && t.focus();
+	}, Ke = z === "week" ? V[3] : B, qe = new Intl.DateTimeFormat(j, {
+		timeZone: "UTC",
+		month: "long",
+		year: "numeric"
+	}).formatToParts(v(Ke)), Je = `h${Te}`, Ye = je ? z === "month" ? /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("div", {
+		"aria-hidden": "true",
+		className: "grid grid-cols-7 border-b border-border",
+		children: V.slice(0, 7).map((e) => /* @__PURE__ */ w("span", {
+			className: "px-2 py-1.5 text-right font-sans text-xs font-semibold text-fg-muted",
+			children: b(e, j)
+		}, e))
+	}), /* @__PURE__ */ w(fe, {
+		weeks: Array.from({ length: 6 }, (e, t) => V.slice(t * 7, t * 7 + 7)),
+		items: t,
+		lanes: Se,
+		top: 30,
+		minHeight: 112,
+		showNumbers: !0,
+		month: Ne,
+		today: a,
+		workDays: k,
+		highlight: Y,
+		focusDay: J,
+		locale: j,
+		labels: R,
+		onGridKeyDown: Ue,
+		ariaLabel: R.grid,
+		...We
+	})] }) : /* @__PURE__ */ T("div", { children: [
+		/* @__PURE__ */ T("div", {
+			className: "flex border-b border-border [scrollbar-gutter:stable] overflow-hidden",
+			children: [/* @__PURE__ */ w("div", { className: "w-14 shrink-0" }), /* @__PURE__ */ w("div", {
+				"aria-hidden": "true",
+				className: "grid flex-1",
+				style: { gridTemplateColumns: `repeat(${V.length}, minmax(0, 1fr))` },
+				children: V.map((t) => z === "day" ? /* @__PURE__ */ w("span", {
+					className: e("px-2 py-2 font-sans text-sm font-semibold", t === a ? "text-primary" : "text-fg"),
+					children: p(t, j)
+				}, t) : /* @__PURE__ */ T("span", {
+					className: "flex items-center justify-center gap-1.5 py-2 font-sans text-xs font-semibold text-fg-muted",
+					children: [b(t, j), /* @__PURE__ */ w("span", {
+						className: e("grid size-7 place-items-center rounded-full text-sm tabular-nums", t === a ? "bg-primary text-on-primary" : "text-fg"),
+						children: v(t).getUTCDate()
+					})]
+				}, t))
+			})]
+		}),
+		/* @__PURE__ */ T("div", {
+			className: "flex border-b border-border [scrollbar-gutter:stable] overflow-hidden",
+			children: [/* @__PURE__ */ w("span", {
+				className: "w-14 shrink-0 pt-1.5 pr-2 text-right font-sans text-[11px] text-fg-muted",
+				children: R.allDay
+			}), /* @__PURE__ */ w("div", {
+				className: "flex-1",
+				children: /* @__PURE__ */ w(fe, {
+					weeks: [V],
+					items: t,
+					lanes: z === "day" ? 8 : 4,
+					top: 4,
+					minHeight: 32,
+					showNumbers: !1,
+					today: a,
+					workDays: k,
+					highlight: Y?.startTime ? null : Y,
+					focusDay: J,
+					locale: j,
+					labels: R,
+					onGridKeyDown: Ue,
+					ariaLabel: `${R.grid}, ${R.allDay}`,
+					...We
+				})
+			})]
+		}),
+		/* @__PURE__ */ w(me, {
+			days: V,
+			items: t,
+			today: a,
+			now: Ie,
+			workDays: k,
+			highlight: Y,
+			startHour: xe,
+			labels: R,
+			onOpenItem: Ve,
+			onSelect: (e, t) => X(e, t, null)
+		})
+	] }) : /* @__PURE__ */ w(he, {
+		days: V,
+		today: a,
+		items: t,
+		locale: j,
+		labels: R,
+		onOpenItem: Ve,
+		onSelectRange: (e, t) => X(e, t, null)
+	}), Xe = !!L && ke && Me;
+	return /* @__PURE__ */ T("div", {
+		ref: Be,
+		onKeyDown: He,
+		className: e("grid gap-4 font-sans", Xe && "lg:grid-cols-[minmax(0,1fr)_17.5rem]", Ee),
+		children: [
+			/* @__PURE__ */ T("div", {
+				className: "min-w-0 overflow-hidden rounded-lg border border-border bg-surface",
+				children: [
+					/* @__PURE__ */ T("div", {
+						className: "flex flex-wrap items-center gap-2 border-b border-border px-3 py-2.5",
+						children: [
+							/* @__PURE__ */ w(Je, {
+								className: "m-0 mr-auto font-display text-lg font-bold text-fg capitalize",
+								children: qe.map((e, t) => e.type === "year" ? /* @__PURE__ */ w("span", {
+									className: "font-normal text-fg-muted",
+									children: e.value
+								}, t) : e.value)
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "flex items-center gap-1",
+								children: [
+									/* @__PURE__ */ w(ue, {
+										glyph: "chevron-left",
+										label: R.previous,
+										onClick: () => Z(g(z, B, -1))
+									}),
+									/* @__PURE__ */ w(n, {
+										variant: "secondary",
+										size: "sm",
+										title: "T",
+										onClick: () => Z(a),
+										children: R.today
+									}),
+									/* @__PURE__ */ w(ue, {
+										glyph: "chevron-right",
+										label: R.next,
+										onClick: () => Z(g(z, B, 1))
+									})
+								]
+							}),
+							/* @__PURE__ */ w(d, {
+								size: "sm",
+								"aria-label": R.viewsLabel,
+								value: z,
+								onValueChange: (e) => Q(e),
+								options: [
+									"day",
+									"week",
+									"month"
+								].map((e) => ({
+									value: e,
+									label: R.views[e]
+								}))
+							}),
+							_e,
+							L && Me && /* @__PURE__ */ w(ue, {
+								glyph: "sidebar",
+								label: R.togglePanel,
+								pressed: ke,
+								onClick: () => Ae(!ke)
+							})
+						]
+					}),
+					/* @__PURE__ */ w("div", {
+						"aria-busy": oe || void 0,
+						className: e("select-none transition-opacity duration-150", oe && "pointer-events-none opacity-60"),
+						children: Ye
+					}),
+					we && /* @__PURE__ */ w("p", {
+						className: "m-0 border-t border-border px-3 py-2 text-xs text-fg-muted",
+						children: je ? R.help : R.helpTouch
+					})
+				]
+			}),
+			Xe && /* @__PURE__ */ w("aside", {
+				className: "grid content-start gap-5 rounded-lg border border-border bg-surface p-4",
+				children: L
+			}),
+			/* @__PURE__ */ T(ae.Root, {
+				open: H?.type === "item" || H?.type === "day",
+				onOpenChange: (e) => !e && $(),
+				children: [
+					/* @__PURE__ */ w(ae.Anchor, { virtualRef: { current: { getBoundingClientRect: () => H?.rect ?? F(0, 0) } } }),
+					H?.type === "item" && /* @__PURE__ */ w(i, {
+						"aria-label": H.item.title,
+						side: "right",
+						align: "start",
+						className: "w-[21.25rem] p-0",
+						onCloseAutoFocus: Ge,
+						children: I?.(H.item, $)
+					}),
+					H?.type === "day" && /* @__PURE__ */ w(i, {
+						title: p(H.day, j),
+						size: "sm",
+						side: "bottom",
+						align: "start",
+						onCloseAutoFocus: Ge,
+						children: /* @__PURE__ */ w("div", {
+							className: "grid max-h-80 gap-1 overflow-y-auto",
+							children: ne(t.filter((e) => C(e, H.day, H.day))).map((e) => /* @__PURE__ */ w(de, {
+								item: e,
+								labels: R,
+								className: "h-7! text-xs",
+								onOpen: (e) => {
+									pe?.(e), I && U({
+										type: "item",
+										item: e,
+										rect: H.rect,
+										returnTo: H.returnTo
+									});
+								}
+							}, e.id))
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ T(o, {
+				open: H?.type === "menu",
+				onOpenChange: (e) => !e && $(),
+				children: [/* @__PURE__ */ w(u, {
+					asChild: !0,
+					children: /* @__PURE__ */ w("span", {
+						"aria-hidden": "true",
+						tabIndex: -1,
+						className: "pointer-events-none fixed",
+						style: {
+							left: H?.rect.left ?? 0,
+							top: H?.rect.top ?? 0,
+							width: H?.rect.width ?? 0,
+							height: H?.rect.height ?? 0
+						}
+					})
+				}), H?.type === "menu" && /* @__PURE__ */ T(s, {
+					onCloseAutoFocus: Ge,
+					className: "min-w-64",
+					children: [/* @__PURE__ */ T(l, { children: [h(H.range.start, H.range.end, j), H.range.startTime && ` · ${H.range.startTime} – ${H.range.endTime}`] }), H.actions.map((e) => /* @__PURE__ */ w(c, {
+						icon: e.icon,
+						onSelect: e.onSelect,
+						children: /* @__PURE__ */ T("span", {
+							className: "grid",
+							children: [/* @__PURE__ */ w("span", { children: e.label }), e.hint && /* @__PURE__ */ w("span", {
+								className: "text-xs font-normal text-fg-muted",
+								children: e.hint
+							})]
+						})
+					}, e.key))]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { he as CalendarAgenda, O as DEFAULT_CALENDAR_LABELS, _e as EventCalendar, M as itemColor };
+
+//# sourceMappingURL=event-calendar.js.map