themelia-react-ui 2.0.1 → 2.0.3

package/dist/features/appointment-calendar.js

@@ -0,0 +1,683 @@
+"use client";
+import { c as e, o as t } from "../ui-provider-C_U0Xma4.js";
+import { useStrings as n } from "../lib/strings.js";
+import { t as r } from "../utils-BRhFDwuU.js";
+import { n as i } from "../buttons-DPZekJFu.js";
+import { c as a, s as o } from "../typography-UTnveOEy.js";
+import { t as s } from "../focus-recipes-B653VaLq.js";
+import { t as c } from "../structure-BmisBK-3.js";
+import { i as l, t as u } from "../tone-recipes-BPsRAvhu.js";
+import { h as d, m as f, p, t as m, v as h } from "../smart-card-DiC5aac3.js";
+import { t as g } from "../feedback-BYIhtitP.js";
+import { n as _ } from "../action-menu-CllU52Mm.js";
+import { r as v } from "../skeleton-Byjnt7qr.js";
+import { t as y } from "../interaction-recipes-XR9ZpVYL.js";
+import { t as b } from "../initials-format-CDoQEOd_.js";
+import { i as x, n as S, s as C } from "../avatar-DAPlDvhJ.js";
+import { t as w } from "../badge-HpFqoqSY.js";
+import { l as T } from "../choice-inputs-CNHvARCJ.js";
+import { o as E } from "../display-hAc1HjpI.js";
+import { t as ee } from "../scroll-area-DcI-M1UT.js";
+import { i as D, n as O, r as te, t as ne, u as re } from "../item-K5_ghvze.js";
+import { i as ie, r as ae, t as oe } from "../tabs-CDocW5D1.js";
+import { s as se } from "../data-display-DT_khPl_.js";
+import { isValidElement as ce, useEffect as k, useId as le, useLayoutEffect as ue, useMemo as A, useRef as j, useState as M } from "react";
+import { Fragment as de, jsx as N, jsxs as P } from "react/jsx-runtime";
+import { ChevronLeft as fe, ChevronRight as pe, Plus as me, TriangleAlert as he } from "lucide-react";
+//#region src/components/features/appointment-calendar/appointment-calendar.types.ts
+var ge = {
+	formatBooked: (e) => `${e} booked`,
+	formatConflicts: (e) => e === 1 ? "1 conflict" : `${e} conflicts`,
+	viewLabel: "View",
+	day: "Day",
+	week: "Week",
+	staffLabel: "Staff",
+	allStaff: "All staff",
+	newAppointment: "New appointment",
+	conflictTitle: "Double-booked",
+	formatConflict: (e, t, n) => `${e} has ${t} overlapping bookings at ${n}.`,
+	dismiss: "Dismiss",
+	previousMonth: "Previous month",
+	nextMonth: "Next month",
+	monthLabel: "Month",
+	yearLabel: "Year",
+	categoriesLabel: "Categories",
+	allCategories: "All",
+	formatCount: (e) => e === 1 ? "1 appointment" : `${e} appointments`,
+	formatTimeRange: (e, t) => `${e} to ${t}`,
+	formatDayLabel: (e, t) => t === 0 ? e : `${e}, ${t === 1 ? "1 appointment" : `${t} appointments`}`,
+	formatWeekRange: (e, t) => `${e} to ${t}`,
+	status: {
+		confirmed: "Confirmed",
+		pending: "Pending",
+		completed: "Completed",
+		cancelled: "Cancelled",
+		noShow: "No-show"
+	},
+	conflict: "Conflict",
+	empty: "No appointments",
+	loading: "Loading appointments",
+	errorTitle: "Appointments unavailable",
+	errorDescription: "The appointments could not be loaded.",
+	retry: "Retry",
+	formatActionsLabel: (e) => `Actions for ${e}`
+}, F = [
+	"chart-1",
+	"chart-2",
+	"chart-3",
+	"chart-4",
+	"chart-5"
+], I = {
+	"chart-1": "bg-chart-1",
+	"chart-2": "bg-chart-2",
+	"chart-3": "bg-chart-3",
+	"chart-4": "bg-chart-4",
+	"chart-5": "bg-chart-5"
+};
+function L(e, t) {
+	let n = e.findIndex((e) => e.id === t);
+	return n < 0 ? "chart-1" : e[n]?.color ?? F[n % F.length] ?? "chart-1";
+}
+function R(e) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate());
+}
+function z(e, t) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t);
+}
+function B(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function V(e, t) {
+	let n = new Date(e.getFullYear(), e.getMonth() + t, 1), r = new Date(n.getFullYear(), n.getMonth() + 1, 0).getDate();
+	return new Date(n.getFullYear(), n.getMonth(), Math.min(e.getDate(), r));
+}
+function H(e, t) {
+	let n = R(e);
+	return z(n, -((n.getDay() - t + 7) % 7));
+}
+function _e(e, t) {
+	let n = H(e, t);
+	return Array.from({ length: 7 }, (e, t) => z(n, t));
+}
+function ve(e, t) {
+	let n = H(new Date(e.getFullYear(), e.getMonth(), 1), t);
+	return Array.from({ length: 6 }, (e, t) => Array.from({ length: 7 }, (e, r) => z(n, t * 7 + r)));
+}
+function ye(e, t) {
+	let n = R(t).getTime(), r = z(t, 1).getTime();
+	return e.start.getTime() < r && e.end.getTime() > n;
+}
+function U(e, t) {
+	return e.filter((e) => ye(e, t)).sort((e, t) => e.start.getTime() - t.start.getTime() || e.end.getTime() - t.end.getTime());
+}
+function be(e, t, n) {
+	return e.filter((e) => (t === "all" || e.category === t) && (n === "all" || e.staff?.id === n));
+}
+function xe(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		if (!n.staff || n.status === "cancelled") continue;
+		let e = t.get(n.staff.id) ?? [];
+		e.push(n), t.set(n.staff.id, e);
+	}
+	let n = [];
+	for (let e of t.values()) {
+		let t = [...e].sort((e, t) => e.start.getTime() - t.start.getTime()), r = [], i = -Infinity, a = () => {
+			let e = r[0];
+			r.length > 1 && e?.staff && n.push({
+				staff: e.staff,
+				appointments: r,
+				start: e.start
+			});
+		};
+		for (let e of t) e.start.getTime() < i ? (r.push(e), i = Math.max(i, e.end.getTime())) : (a(), r = [e], i = e.end.getTime());
+		a();
+	}
+	return n.sort((e, t) => e.start.getTime() - t.start.getTime());
+}
+function Se(e) {
+	return new Set(e.flatMap((e) => e.appointments.map((e) => e.id)));
+}
+function Ce(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) n.staff && !t.has(n.staff.id) && t.set(n.staff.id, n.staff);
+	return [...t.values()];
+}
+function we(e, t) {
+	let { hour12: n } = new Intl.DateTimeFormat(t, { hour: "numeric" }).resolvedOptions();
+	if (!n) return new Intl.DateTimeFormat(t, {
+		hour: "2-digit",
+		minute: "2-digit"
+	}).format(e);
+	let r = e.getMinutes() === 0 ? { hour: "numeric" } : {
+		hour: "numeric",
+		minute: "2-digit"
+	};
+	return new Intl.DateTimeFormat(t, r).format(e);
+}
+function Te(e) {
+	return typeof e == "string" ? e : e?.name;
+}
+//#endregion
+//#region src/components/features/appointment-calendar/partials/appointment-agenda.tsx
+var W = {
+	confirmed: "success",
+	pending: "warning",
+	completed: "neutral",
+	cancelled: "neutral",
+	noShow: "destructive"
+};
+function G({ appointment: e, context: t }) {
+	let n = le(), i = Te(e.client), o = e.staff, { open: c, conflict: u } = t, d = t.actions.length > 0, f = [
+		`${n}-title`,
+		`${n}-status`,
+		`${n}-detail`,
+		o && `${n}-staff`
+	].filter(Boolean).join(" "), p = j(null), m = j(!1);
+	return ue(() => {
+		!d && m.current && (m.current = !1, (!document.activeElement || document.activeElement === document.body) && p.current?.focus());
+	}, [d]), /* @__PURE__ */ P(ne, {
+		variant: "outline",
+		size: "sm",
+		padding: "default",
+		"data-status": e.status,
+		"data-conflict": u ? "" : void 0,
+		className: r("appointment-agenda--row relative w-full flex-nowrap", !!c && y.rowHover, u && r(l.destructive.wash, l.destructive.edge)),
+		children: [
+			!!c && /* @__PURE__ */ N("button", {
+				ref: p,
+				type: "button",
+				"aria-labelledby": f,
+				onClick: c,
+				className: r("appointment-agenda--open absolute inset-0 z-0 cursor-pointer rounded-inner focus-visible:outline-none", y.nativeButtonReset, s.inset)
+			}),
+			/* @__PURE__ */ N("span", {
+				"aria-hidden": "true",
+				className: r("appointment-agenda--stripe w-1 shrink-0 self-stretch rounded-full", t.categoryColorClass)
+			}),
+			/* @__PURE__ */ P(te, {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ P(re, {
+					className: "flex-wrap",
+					children: [/* @__PURE__ */ N(a, {
+						type: "inherit",
+						id: `${n}-title`,
+						tag: "span",
+						weight: "medium",
+						className: "truncate",
+						children: e.title
+					}), /* @__PURE__ */ N(w, {
+						id: `${n}-status`,
+						tone: t.statusTone,
+						size: "sm",
+						children: t.statusLabel
+					})]
+				}), /* @__PURE__ */ N(D, {
+					id: `${n}-detail`,
+					clamp: 1,
+					children: i ? `${t.time} · ${i}` : t.time
+				})]
+			}),
+			(!!o || d) && /* @__PURE__ */ P(O, {
+				onFocus: () => {
+					m.current = !0;
+				},
+				onBlur: (e) => {
+					e.relatedTarget instanceof Node && !e.currentTarget.contains(e.relatedTarget) && (m.current = !1);
+				},
+				children: [!!o && /* @__PURE__ */ P(de, { children: [/* @__PURE__ */ N(E, { children: /* @__PURE__ */ N("span", {
+					id: `${n}-staff`,
+					children: o.name
+				}) }), /* @__PURE__ */ P(S, {
+					size: "sm",
+					"aria-hidden": "true",
+					children: [!!o.avatarUrl && /* @__PURE__ */ N(C, {
+						src: o.avatarUrl,
+						alt: ""
+					}), /* @__PURE__ */ N(x, { children: b(o.name) })]
+				})] }), t.actionsMenu]
+			})
+		]
+	});
+}
+function Ee({ days: e, appointments: t, categories: n, conflicts: r, heading: i, loading: s, error: l, onRetry: u, locale: d, onAppointmentClick: f, appointmentActions: p, renderAppointment: h, strings: y }) {
+	let b = e.map((e) => ({
+		day: e,
+		items: U(t, e)
+	})), x = b.reduce((e, t) => e + t.items.length, 0), S = new Intl.DateTimeFormat(d, {
+		weekday: "long",
+		month: "long",
+		day: "numeric"
+	}), C = e.length > 1, w = (e) => {
+		let t = r.has(e.id), i = (p?.(e) ?? []).filter((e) => e.visible !== !1), a = {
+			category: n.find((t) => t.id === e.category),
+			categoryColorClass: I[L(n, e.category)],
+			conflict: t,
+			statusLabel: t ? y.conflict : y.status[e.status],
+			statusTone: t ? "destructive" : W[e.status],
+			time: y.formatTimeRange(we(e.start, d), we(e.end, d)),
+			open: f ? () => f(e) : void 0,
+			actions: i,
+			actionsMenu: i.length > 0 ? /* @__PURE__ */ N(_, {
+				actions: i,
+				srText: y.formatActionsLabel(e.title),
+				buttonProps: {
+					size: "sm",
+					className: "appointment-agenda--actions relative z-10"
+				}
+			}) : null
+		};
+		return {
+			...a,
+			defaultRender: () => /* @__PURE__ */ N(G, {
+				appointment: e,
+				context: a
+			})
+		};
+	}, T = (e) => /* @__PURE__ */ N(c, {
+		render: /* @__PURE__ */ N("ul", {}),
+		gap: "sm",
+		className: "appointment-agenda--list m-0 list-none p-0",
+		children: e.map((e) => {
+			let t = w(e);
+			return /* @__PURE__ */ N("li", {
+				className: "min-w-0",
+				children: h ? h(e, t) : t.defaultRender()
+			}, e.id);
+		})
+	}), D;
+	return D = s ? /* @__PURE__ */ P(c, {
+		gap: "sm",
+		"aria-busy": "true",
+		className: "appointment-agenda--loading",
+		children: [/* @__PURE__ */ N(E, { children: y.loading }), Array.from({ length: 4 }, (e, t) => /* @__PURE__ */ N(v, { className: "h-control-lg w-full rounded-inner" }, t))]
+	}) : l ? ce(l) ? l : /* @__PURE__ */ N(g, {
+		variant: "inline",
+		title: y.errorTitle,
+		description: l instanceof Error ? l.message : typeof l == "string" || typeof l == "number" ? String(l) : y.errorDescription,
+		onRetry: u,
+		retryLabel: y.retry,
+		className: "appointment-agenda--error"
+	}) : x === 0 ? /* @__PURE__ */ N(se, {
+		padding: "sm",
+		title: y.empty,
+		description: !1,
+		ariaLabel: y.empty,
+		className: "appointment-agenda--empty"
+	}) : C ? /* @__PURE__ */ N(c, {
+		gap: "xl",
+		children: b.filter((e) => e.items.length > 0).map((e) => /* @__PURE__ */ P(c, {
+			render: /* @__PURE__ */ N("section", {}),
+			gap: "sm",
+			"aria-label": S.format(e.day),
+			className: "appointment-agenda--day",
+			children: [/* @__PURE__ */ N(o, {
+				className: "text-inherit",
+				tag: "h3",
+				size: "sm",
+				children: S.format(e.day)
+			}), T(e.items)]
+		}, e.day.toISOString()))
+	}) : T(b[0]?.items ?? []), /* @__PURE__ */ N(m, {
+		surface: "card",
+		title: i,
+		headerEnd: /* @__PURE__ */ N(a, {
+			size: "xs",
+			type: "secondary",
+			className: "tabular-nums",
+			children: y.formatCount(x)
+		}),
+		className: "appointment-agenda--component h-full min-h-0",
+		contentClassName: "min-h-0 flex-1",
+		children: /* @__PURE__ */ N(ee, {
+			className: "appointment-agenda--scroll h-full min-h-0",
+			children: D
+		})
+	});
+}
+//#endregion
+//#region src/components/features/appointment-calendar/partials/appointment-month.tsx
+var De = 3;
+function Oe({ selected: e, onSelect: t, onVisibleMonthChange: n, appointments: o, categories: l, weekStartsOn: d, locale: f, strings: p }) {
+	let [m, h] = M(e), g = j(null), _ = j(!1), v = A(() => /* @__PURE__ */ new Date(), []);
+	k(() => h(e), [e]);
+	let b = m.getFullYear() * 12 + m.getMonth();
+	k(() => {
+		n?.(new Date(Math.floor(b / 12), b % 12, 1));
+	}, [b, n]), k(() => {
+		_.current && (_.current = !1, g.current?.querySelector("[data-focus-target]")?.focus());
+	}, [m]);
+	let x = A(() => ve(m, d), [m, d]), S = A(() => new Intl.DateTimeFormat(f, { month: "long" }), [f]), C = A(() => new Intl.DateTimeFormat(f, { weekday: "short" }), [f]), w = A(() => new Intl.DateTimeFormat(f, {
+		weekday: "long",
+		month: "long",
+		day: "numeric",
+		year: "numeric"
+	}), [f]), E = A(() => Array.from({ length: 12 }, (e, t) => ({
+		value: String(t),
+		label: S.format(new Date(2e3, t, 1))
+	})), [S]), ee = A(() => {
+		let e = /* @__PURE__ */ new Set([v.getFullYear(), m.getFullYear()]);
+		for (let t of o) e.add(t.start.getFullYear());
+		let t = Math.min(...e) - 1, n = Math.max(...e) + 1;
+		return Array.from({ length: n - t + 1 }, (e, n) => ({
+			value: String(t + n),
+			label: String(t + n)
+		}));
+	}, [
+		o,
+		m,
+		v
+	]), D = (e, n = !1) => {
+		_.current = !0, h(e), n && t(e);
+	}, O = (n) => {
+		let r = V(e, n);
+		h(r), t(r);
+	};
+	return /* @__PURE__ */ P(c, {
+		gap: "lg",
+		className: "appointment-month--component min-w-0",
+		children: [/* @__PURE__ */ P("div", {
+			className: "appointment-month--header flex min-w-0 items-center gap-space-xs",
+			children: [
+				/* @__PURE__ */ N(i, {
+					type: "button",
+					tone: "secondary",
+					buttonStyle: "ghost",
+					size: "sm",
+					iconOnly: !0,
+					"aria-label": p.previousMonth,
+					onClick: () => O(-1),
+					children: /* @__PURE__ */ N(fe, {
+						"aria-hidden": "true",
+						className: "size-icon"
+					})
+				}),
+				/* @__PURE__ */ N(T, {
+					size: "sm",
+					"aria-label": p.monthLabel,
+					options: E,
+					value: String(e.getMonth()),
+					onValueChange: (t) => t !== void 0 && O(Number(t) - e.getMonth()),
+					className: "min-w-0 flex-1"
+				}),
+				/* @__PURE__ */ N(T, {
+					size: "sm",
+					"aria-label": p.yearLabel,
+					options: ee,
+					value: String(e.getFullYear()),
+					onValueChange: (t) => t !== void 0 && O((Number(t) - e.getFullYear()) * 12),
+					className: "min-w-0 flex-1"
+				}),
+				/* @__PURE__ */ N(i, {
+					type: "button",
+					tone: "secondary",
+					buttonStyle: "ghost",
+					size: "sm",
+					iconOnly: !0,
+					"aria-label": p.nextMonth,
+					onClick: () => O(1),
+					children: /* @__PURE__ */ N(pe, {
+						"aria-hidden": "true",
+						className: "size-icon"
+					})
+				})
+			]
+		}), /* @__PURE__ */ P("div", {
+			ref: g,
+			role: "grid",
+			"aria-label": `${S.format(m)} ${m.getFullYear()}`,
+			onKeyDown: (e) => {
+				let t = {
+					ArrowLeft: () => z(m, -1),
+					ArrowRight: () => z(m, 1),
+					ArrowUp: () => z(m, -7),
+					ArrowDown: () => z(m, 7),
+					Home: () => H(m, d),
+					End: () => z(H(m, d), 6),
+					PageUp: () => V(m, -1),
+					PageDown: () => V(m, 1)
+				}[e.key];
+				t && (e.preventDefault(), D(t()));
+			},
+			className: "appointment-month--grid grid min-w-0 grid-cols-7 gap-space-2xs",
+			children: [/* @__PURE__ */ N("div", {
+				role: "row",
+				className: "contents",
+				children: x[0]?.map((e) => /* @__PURE__ */ N(a, {
+					tag: "div",
+					role: "columnheader",
+					size: "xs",
+					type: "secondary",
+					weight: "medium",
+					align: "center",
+					className: "appointment-month--weekday py-space-xs",
+					children: C.format(e)
+				}, e.getDay()))
+			}), x.map((t) => /* @__PURE__ */ N("div", {
+				role: "row",
+				className: "contents",
+				children: t.map((t) => {
+					let n = U(o, t), i = [...new Set(n.map((e) => e.category))], a = B(t, e), c = B(t, m), d = t.getMonth() !== m.getMonth();
+					return /* @__PURE__ */ N("div", {
+						role: "gridcell",
+						"aria-selected": a,
+						className: "flex min-w-0 justify-center",
+						children: /* @__PURE__ */ P("button", {
+							type: "button",
+							tabIndex: c ? 0 : -1,
+							"data-focus-target": c ? "" : void 0,
+							"data-selected": a ? "" : void 0,
+							"data-outside": d ? "" : void 0,
+							"aria-current": B(t, v) ? "date" : void 0,
+							"aria-label": p.formatDayLabel(w.format(t), n.length),
+							onClick: () => D(t, !0),
+							className: r(y.nativeButtonReset, "appointment-month--day relative flex size-action flex-col items-center justify-center rounded-inner text-sm tabular-nums outline-none", s.edge, a ? "bg-primary font-semibold text-primary-foreground" : r(y.rowHover, d ? "text-muted-foreground" : "text-foreground"), !a && B(t, v) && "font-semibold"),
+							children: [t.getDate(), i.length > 0 && /* @__PURE__ */ N("span", {
+								"aria-hidden": "true",
+								className: "appointment-month--dots absolute inset-x-0 bottom-space-2xs flex justify-center gap-space-2xs",
+								children: i.slice(0, De).map((e) => /* @__PURE__ */ N("span", { className: r(u.inline, I[L(l, e)]) }, e))
+							})]
+						})
+					}, t.toISOString());
+				})
+			}, t[0]?.toISOString()))]
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/appointment-calendar/appointment-calendar.tsx
+function K(e, t, n) {
+	let [r, i] = M(t);
+	return [e ?? r, (t) => {
+		e === void 0 && i(t), n?.(t);
+	}];
+}
+function q({ appointments: s, categories: l, staff: g, title: _, date: v, defaultDate: y, onDateChange: b, view: x, defaultView: S = "day", onViewChange: C, category: w, defaultCategory: E = "all", onCategoryChange: ee, staffId: D, defaultStaffId: O = "all", onStaffChange: te, onAppointmentClick: ne, appointmentActions: re, renderAppointment: se, onRangeChange: ce, onCreateAppointment: le, onConflictsDismiss: ue, loading: de = !1, error: fe, onRetry: pe, weekStartsOn: F, strings: B, className: V }) {
+	let H = n(ge, B), { locale: U } = e(), Te = t(), W = F ?? Te.weekStartsOn ?? 0, [G, De] = K(v, y ?? R(/* @__PURE__ */ new Date()), b), [q, ke] = K(x, S, C), [J, Ae] = K(w, E, ee), [Y, je] = K(D, O, te), [Me, Ne] = M(""), [Pe, Fe] = M(() => new Date(G.getFullYear(), G.getMonth(), 1)), Ie = A(() => g ?? Ce(s), [g, s]), X = A(() => q === "week" ? _e(G, W) : [R(G)], [
+		q,
+		G,
+		W
+	]), Z = A(() => be(s, J, Y), [
+		s,
+		J,
+		Y
+	]), Q = A(() => {
+		let e = [...ve(Pe, W).flat(), ...X].map((e) => e.getTime());
+		return {
+			start: new Date(Math.min(...e)),
+			end: z(new Date(Math.max(...e)), 1)
+		};
+	}, [
+		Pe,
+		W,
+		X
+	]), Le = j("");
+	k(() => {
+		let e = `${Q.start.getTime()}:${Q.end.getTime()}`;
+		e !== Le.current && (Le.current = e, ce?.(Q));
+	}, [Q, ce]);
+	let Re = A(() => Z.filter((e) => X.some((t) => ye(e, t))), [Z, X]), $ = A(() => xe(be(s, "all", Y).filter((e) => X.some((t) => ye(e, t)))), [
+		s,
+		Y,
+		X
+	]), ze = A(() => Se($), [$]), Be = Re.filter((e) => ze.has(e.id)).length, Ve = Re.filter((e) => e.status !== "cancelled").length, He = [...ze].sort().join("|"), Ue = $.length > 0 && Me !== He, We = new Intl.DateTimeFormat(U, {
+		weekday: "long",
+		month: "long",
+		day: "numeric"
+	}), Ge = new Intl.DateTimeFormat(U, {
+		month: "long",
+		day: "numeric"
+	}), Ke = q === "week" ? H.formatWeekRange(Ge.format(X[0] ?? G), Ge.format(X[X.length - 1] ?? G)) : We.format(G), qe = (e) => {
+		Ne(He), ue?.(e);
+	};
+	return /* @__PURE__ */ P(c, {
+		gap: "xl",
+		"data-slot": "appointment-calendar",
+		"data-view": q,
+		className: r("appointment-calendar--component @container/appointment-calendar min-h-0 min-w-0", V),
+		children: [
+			/* @__PURE__ */ P("div", {
+				className: "appointment-calendar--header flex min-w-0 flex-wrap items-start justify-between gap-space-lg",
+				children: [/* @__PURE__ */ P(c, {
+					gap: "xs",
+					className: "min-w-0",
+					children: [!!_ && /* @__PURE__ */ N(o, {
+						className: "text-inherit",
+						tag: "h2",
+						size: "lg",
+						children: _
+					}), /* @__PURE__ */ P(a, {
+						size: "xs",
+						type: "secondary",
+						className: "appointment-calendar--counts tabular-nums",
+						children: [H.formatBooked(Ve), Be > 0 && ` · ${H.formatConflicts(Be)}`]
+					})]
+				}), /* @__PURE__ */ P("div", {
+					className: "appointment-calendar--actions flex min-w-0 flex-wrap items-center gap-space-sm",
+					children: [
+						/* @__PURE__ */ N(oe, {
+							value: q,
+							onValueChange: (e) => (e === "day" || e === "week") && ke(e),
+							children: /* @__PURE__ */ N(ae, {
+								role: "group",
+								"aria-label": H.viewLabel,
+								"aria-orientation": void 0,
+								activateOnFocus: !0,
+								children: ["day", "week"].map((e) => /* @__PURE__ */ N(ie, {
+									value: e,
+									role: "button",
+									"aria-selected": void 0,
+									"aria-controls": void 0,
+									"aria-pressed": q === e,
+									children: H[e]
+								}, e))
+							})
+						}),
+						Ie.length > 0 && /* @__PURE__ */ N(T, {
+							"aria-label": H.staffLabel,
+							options: [{
+								value: "all",
+								label: H.allStaff
+							}, ...Ie.map((e) => ({
+								value: e.id,
+								label: e.name
+							}))],
+							value: Y,
+							onValueChange: (e) => je(e ?? "all"),
+							className: "appointment-calendar--staff w-44"
+						}),
+						!!le && /* @__PURE__ */ P(i, {
+							type: "button",
+							tone: "primary",
+							onClick: () => le(G),
+							className: "appointment-calendar--create",
+							children: [/* @__PURE__ */ N(me, {
+								"aria-hidden": "true",
+								className: "size-icon"
+							}), H.newAppointment]
+						})
+					]
+				})]
+			}),
+			Ue && /* @__PURE__ */ P(p, {
+				tone: "destructive",
+				className: "appointment-calendar--alert",
+				children: [
+					/* @__PURE__ */ N(he, { "aria-hidden": "true" }),
+					/* @__PURE__ */ N(h, { children: H.conflictTitle }),
+					/* @__PURE__ */ N(d, { children: $.map((e) => H.formatConflict(e.staff.name, e.appointments.length, we(e.start, U))).join(" ") }),
+					/* @__PURE__ */ N(f, { children: /* @__PURE__ */ N(i, {
+						type: "button",
+						size: "sm",
+						onClick: () => qe($),
+						children: H.dismiss
+					}) })
+				]
+			}),
+			/* @__PURE__ */ P("div", {
+				className: "appointment-calendar--body grid min-h-0 min-w-0 flex-1 gap-space-xl @3xl/appointment-calendar:grid-cols-[minmax(17rem,20rem)_minmax(0,1fr)]",
+				children: [/* @__PURE__ */ N(m, {
+					surface: "card",
+					className: "appointment-calendar--aside min-w-0 self-start",
+					children: /* @__PURE__ */ P(c, {
+						gap: "xl",
+						children: [/* @__PURE__ */ N(Oe, {
+							selected: G,
+							onSelect: De,
+							onVisibleMonthChange: Fe,
+							appointments: Z,
+							categories: l,
+							weekStartsOn: W,
+							locale: U,
+							strings: H
+						}), l.length > 0 && /* @__PURE__ */ N(oe, {
+							value: J,
+							onValueChange: (e) => typeof e == "string" && Ae(e),
+							children: /* @__PURE__ */ N(ae, {
+								variant: "chips",
+								role: "group",
+								"aria-label": H.categoriesLabel,
+								"aria-orientation": void 0,
+								activateOnFocus: !0,
+								children: [{
+									id: "all",
+									label: H.allCategories
+								}, ...l].map((e) => /* @__PURE__ */ P(ie, {
+									value: e.id,
+									role: "button",
+									"aria-selected": void 0,
+									"aria-controls": void 0,
+									"aria-pressed": J === e.id,
+									className: "appointment-calendar--category gap-space-xs",
+									children: [e.id !== "all" && /* @__PURE__ */ N("span", {
+										"aria-hidden": "true",
+										className: r(u.inline, I[L(l, e.id)])
+									}), e.label]
+								}, e.id))
+							})
+						})]
+					})
+				}), /* @__PURE__ */ N(Ee, {
+					days: X,
+					appointments: Z,
+					categories: l,
+					conflicts: ze,
+					heading: Ke,
+					loading: de,
+					error: fe,
+					onRetry: pe,
+					locale: U,
+					onAppointmentClick: ne,
+					appointmentActions: re,
+					renderAppointment: se,
+					strings: H
+				})]
+			})
+		]
+	});
+}
+q.displayName = "AppointmentCalendar";
+//#endregion
+export { q as AppointmentCalendar, U as appointmentsOn, ge as defaultAppointmentCalendarStrings, be as filterAppointments, xe as findConflicts };
+
+//# sourceMappingURL=appointment-calendar.js.map