themelia-react-ui 0.0.0-stage → 1.0.1

package/dist/features/event-calendar.js

@@ -0,0 +1,711 @@
+"use client";
+import { o as e } from "../ui-provider-CftIB6TY.js";
+import { useStrings as t } from "../lib/strings.js";
+import { t as n } from "../utils-C2EKeIw3.js";
+import { n as r } from "../buttons-Co6GavvM.js";
+import { a as i, i as a } from "../typography-Cv8MT-82.js";
+import { r as o, t as s } from "../date-BFNMnrS5.js";
+import { t as c } from "../date-pickers-BPIKLdsD.js";
+import { c as l } from "../choice-inputs-CC7XqPQO.js";
+import { useCallback as u, useMemo as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Calendar as g, ChevronLeft as _, ChevronRight as v, ExternalLink as y, User as b, Users as x } from "lucide-react";
+import { addMonths as S, addWeeks as C, eachDayOfInterval as w, endOfMonth as T, endOfWeek as E, format as D, isSameDay as O, isSameMonth as k, isToday as A, isWeekend as j, startOfDay as M, startOfMonth as N, startOfWeek as P, subMonths as F, subWeeks as I } from "date-fns";
+//#region src/components/features/event-calendar/event-calendar.types.ts
+var L = {
+	gray: "bg-muted-foreground",
+	red: "bg-destructive",
+	orange: "bg-warning",
+	amber: "bg-warning",
+	yellow: "bg-warning",
+	green: "bg-success",
+	blue: "bg-info",
+	purple: "bg-primary"
+};
+function R(e) {
+	return e?.colorToken ?? "gray";
+}
+var z = {
+	today: "Today",
+	previous: "Previous",
+	next: "Next",
+	loading: "Loading…",
+	booking: "booking",
+	bookings: "bookings",
+	viewMode: {
+		label: "Calendar view",
+		month: "Month",
+		week: "Week",
+		agenda: "Agenda"
+	},
+	weekdaysShort: [
+		"Sun",
+		"Mon",
+		"Tue",
+		"Wed",
+		"Thu",
+		"Fri",
+		"Sat"
+	]
+};
+//#endregion
+//#region src/components/features/event-calendar/event-calendar-event-badge.tsx
+function B({ event: e, category: t, compact: a = !1, onClick: o }) {
+	let s = L[R(t)], c = e.allDay ? null : D(e.startDate, "HH:mm"), l = e.metadata?.calendar_cell_title, u = typeof l == "string" && l.trim() !== "" ? l : e.title, d = c ? `${u} at ${c}` : u;
+	return /* @__PURE__ */ h(r, {
+		type: "button",
+		tone: "secondary",
+		buttonStyle: "ghost",
+		size: a ? "sm" : "md",
+		onClick: (e) => {
+			e.stopPropagation(), o?.();
+		},
+		className: n("event-calendar-event-badge--component", "group/event flex w-full min-w-0 items-center gap-space-xs rounded-radius-md border border-border/60 bg-card px-1.5", "justify-start text-left shadow-none transition-colors hover:bg-accent/50", "max-sm:h-3 max-sm:justify-center max-sm:gap-0 max-sm:border-transparent max-sm:bg-transparent max-sm:px-0", a ? "h-5" : "h-6"),
+		"aria-label": d,
+		title: typeof u == "string" ? u : void 0,
+		children: [
+			/* @__PURE__ */ m("span", {
+				"aria-hidden": "true",
+				className: n("size-1.5 shrink-0 rounded-full", s)
+			}),
+			/* @__PURE__ */ m(i, {
+				tag: "span",
+				size: "xs",
+				weight: "medium",
+				className: "min-w-0 flex-1 truncate max-sm:hidden",
+				children: u
+			}),
+			!!c && /* @__PURE__ */ m(i, {
+				tag: "span",
+				size: "xs",
+				type: "secondary",
+				className: "shrink-0 whitespace-nowrap tabular-nums max-sm:hidden",
+				children: c
+			})
+		]
+	});
+}
+B.displayName = "EventCalendarEventBadge";
+//#endregion
+//#region src/components/features/event-calendar/use-event-calendar-data.tsx
+function V(e, t, n, r = {}) {
+	let { weekStartsOn: i = 1, showWeekends: a = !0, visibleCategories: o } = r;
+	return d(() => {
+		let r = N(t), s = T(t), c, l;
+		n === "month" ? (c = P(r, { weekStartsOn: i }), l = E(s, { weekStartsOn: i })) : n === "week" ? (c = P(t, { weekStartsOn: i }), l = E(t, { weekStartsOn: i })) : (c = r, l = s);
+		let u = w({
+			start: c,
+			end: l
+		}), d = o && o.length > 0 ? e.filter((e) => o.includes(e.category)) : e, f = /* @__PURE__ */ new Map();
+		return d.forEach((e) => {
+			let t = M(e.startDate);
+			if (Number.isNaN(t.getTime())) return;
+			let n = t;
+			if (e.endDate && !Number.isNaN(e.endDate.getTime())) {
+				let r = M(e.endDate);
+				!Number.isNaN(r.getTime()) && r.getTime() >= t.getTime() && (n = r);
+			}
+			w({
+				start: t,
+				end: n
+			}).forEach((t) => {
+				let n = t.toISOString().split("T")[0];
+				f.has(n) || f.set(n, []), f.get(n).push(e);
+			});
+		}), u.filter((e) => a || !j(e)).map((e) => {
+			let n = e.toISOString().split("T")[0], r = [...f.get(n) || []].sort((e, t) => e.allDay && !t.allDay ? -1 : !e.allDay && t.allDay ? 1 : e.startDate.getTime() - t.startDate.getTime());
+			return {
+				date: e,
+				isCurrentMonth: k(e, t),
+				isToday: A(e),
+				isWeekend: j(e),
+				events: r,
+				eventCount: r.length,
+				hasMultipleEvents: r.length > 1
+			};
+		});
+	}, [
+		e,
+		t,
+		n,
+		i,
+		a,
+		o
+	]);
+}
+function H(e, t) {
+	return e.filter((e) => {
+		let n = M(e.startDate), r = e.endDate ? M(e.endDate) : n, i = M(t);
+		return O(i, n) || O(i, r) || i > n && i < r;
+	}).sort((e, t) => e.allDay && !t.allDay ? -1 : !e.allDay && t.allDay ? 1 : e.startDate.getTime() - t.startDate.getTime());
+}
+function U(e, t) {
+	return e.find((e) => e.id === t);
+}
+//#endregion
+//#region src/components/features/event-calendar/event-calendar-day-cell.tsx
+function W({ data: e, categories: t, maxEvents: a = 3, onClick: o, onEventClick: s, compact: c = !1, strings: l, renderEvent: u }) {
+	let d = {
+		booking: l?.booking ?? z.booking,
+		bookings: l?.bookings ?? z.bookings
+	}, { date: f, isCurrentMonth: p, isToday: g, isWeekend: _, events: v, eventCount: y } = e, b = v.slice(0, a), x = Math.max(0, y - a);
+	return /* @__PURE__ */ m("div", {
+		className: n("event-calendar-day-cell--component", "p-0 relative w-full border-r border-b border-border last:border-r-0 [&:nth-child(7n)]:border-r-0"),
+		children: /* @__PURE__ */ h("div", {
+			onClick: o,
+			className: n("event-calendar-day-cell--surface", "relative w-full min-h-24 p-space-md transition-colors", "hover:bg-accent", "flex flex-col items-start gap-space-xs", g && "h-full bg-accent text-accent-foreground", c && "min-h-20 p-space-xs"),
+			"data-date": f.toISOString(),
+			"data-today": g,
+			"data-weekend": _,
+			"data-current-month": p,
+			children: [/* @__PURE__ */ m(r, {
+				type: "button",
+				tone: "secondary",
+				buttonStyle: "ghost",
+				onClick: (e) => {
+					e.stopPropagation(), o();
+				},
+				className: n("event-calendar-day-cell--date", "h-auto px-0 py-0 hover:bg-transparent", "rounded-radius-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:z-10"),
+				"aria-label": f.toDateString(),
+				children: /* @__PURE__ */ m(i, {
+					className: n("font-normal leading-none", g && "font-semibold", !p && "text-muted-foreground", c && "text-xs"),
+					children: f.getDate()
+				})
+			}), /* @__PURE__ */ h("div", {
+				className: "w-full space-y-space-2xs",
+				children: [b.map((n) => {
+					let r = U(t, n.category);
+					return u ? /* @__PURE__ */ m("div", { children: u(n, r) }, n.id) : /* @__PURE__ */ m(B, {
+						event: n,
+						category: r,
+						compact: c || e.hasMultipleEvents,
+						onClick: () => {
+							s ? s(n) : o();
+						}
+					}, n.id);
+				}), x > 0 && /* @__PURE__ */ h("div", {
+					className: "flex items-center gap-space-xs py-space-2xs px-space-md",
+					children: [/* @__PURE__ */ m("div", {
+						className: "flex items-center -space-x-1",
+						children: t.slice(0, 3).map((e, t) => /* @__PURE__ */ m("span", { className: n("h-1.5 w-1.5 rounded-full border border-background", L[R(e)]) }, e.id || t))
+					}), /* @__PURE__ */ h(i, {
+						size: "xs",
+						type: "secondary",
+						className: "font-medium text-xs",
+						children: [
+							x,
+							" ",
+							x === 1 ? d.booking : d.bookings
+						]
+					})]
+				})]
+			})]
+		})
+	});
+}
+W.displayName = "EventCalendarDayCell";
+//#endregion
+//#region src/components/features/event-calendar/event-calendar-header.tsx
+var G = (e, t) => {
+	if (!e) return null;
+	if (e.element) return /* @__PURE__ */ m("div", {
+		className: "event-calendar-header--action-slot",
+		children: e.element
+	}, e.id || t);
+	let i = e.icon, a = e.id || `action-${t}`, o = () => {
+		e.onClick?.();
+	}, s = e.buttonStyle === "link" ? "ghost" : e.buttonStyle ?? "solid";
+	return /* @__PURE__ */ h(r, {
+		tone: e.tone ?? "primary",
+		buttonStyle: s,
+		onClick: o,
+		className: n("gap-space-md", e.buttonStyle === "link" && "underline underline-offset-4"),
+		disabled: !!e.disabled,
+		children: [!!i && /* @__PURE__ */ m(i, { className: "size-icon" }), e.label]
+	}, a);
+};
+function K({ currentDate: e, viewMode: n, displayLabel: i, onPrevious: o, onNext: s, onToday: u, onViewModeChange: f, onDateChange: g, locale: y, actions: b, strings: x, rangeMode: S = "date", minDate: C, maxDate: w, prevDisabled: T = !1, nextDisabled: E = !1 }) {
+	let D = t(z, x), O = d(() => (b || []).filter((e) => e.visible !== !1), [b]), k = d(() => [
+		{
+			value: "month",
+			label: D.viewMode.month
+		},
+		{
+			value: "week",
+			label: D.viewMode.week
+		},
+		{
+			value: "agenda",
+			label: D.viewMode.agenda
+		}
+	], [
+		D.viewMode.month,
+		D.viewMode.week,
+		D.viewMode.agenda
+	]);
+	return /* @__PURE__ */ m("div", {
+		className: "event-calendar-header--component @container/event-calendar-header mb-space-xl min-w-0",
+		children: /* @__PURE__ */ h("div", {
+			className: "event-calendar-header--layout flex min-w-0 flex-col items-stretch gap-space-lg @2xl/event-calendar-header:flex-row @2xl/event-calendar-header:items-center @2xl/event-calendar-header:justify-between @2xl/event-calendar-header:gap-space-xl",
+			children: [/* @__PURE__ */ h("div", {
+				className: "event-calendar-header--title flex min-w-0 flex-wrap items-center gap-space-lg @2xl/event-calendar-header:flex-none",
+				children: [/* @__PURE__ */ m(a, {
+					tag: "h3",
+					className: "min-w-0 break-words",
+					children: i
+				}), /* @__PURE__ */ m(c, {
+					iconOnly: !0,
+					className: "min-w-0 max-w-full",
+					value: {
+						month: e.getMonth(),
+						year: e.getFullYear()
+					},
+					onValueChange: (e) => {
+						e.date && g?.(e.date);
+					},
+					fromYear: C?.getFullYear(),
+					toYear: w?.getFullYear(),
+					locale: y,
+					strings: D.monthYearPicker
+				})]
+			}), /* @__PURE__ */ h("div", {
+				className: "event-calendar-header--controls flex w-full min-w-0 flex-wrap items-center gap-space-md @2xl/event-calendar-header:w-auto @2xl/event-calendar-header:flex-1 @2xl/event-calendar-header:justify-end",
+				children: [
+					O.length > 0 && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
+						className: "event-calendar-header--actions flex min-w-0 flex-wrap items-center gap-space-md",
+						children: O.map((e, t) => G(e, t))
+					}), /* @__PURE__ */ m("div", { className: "event-calendar-header--separator mx-space-sm hidden h-6 w-px bg-border @sm/event-calendar-header:block" })] }),
+					/* @__PURE__ */ m(r, {
+						tone: "secondary",
+						buttonStyle: "outline",
+						onClick: u,
+						className: "hidden @md/event-calendar-header:inline-flex",
+						children: D.today
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "flex items-center rounded-radius border border-border",
+						children: [/* @__PURE__ */ m(r, {
+							tone: "secondary",
+							buttonStyle: "ghost",
+							size: "md",
+							iconOnly: !0,
+							onClick: o,
+							disabled: T,
+							className: "border-border rounded-r-none border-r",
+							"aria-label": D.previous,
+							children: /* @__PURE__ */ m(_, { className: "size-icon" })
+						}), /* @__PURE__ */ m(r, {
+							tone: "secondary",
+							buttonStyle: "ghost",
+							size: "md",
+							iconOnly: !0,
+							onClick: s,
+							disabled: E,
+							className: "rounded-l-none",
+							"aria-label": D.next,
+							children: /* @__PURE__ */ m(v, { className: "size-icon" })
+						})]
+					}),
+					!!f && /* @__PURE__ */ m(l, {
+						"aria-label": D.viewMode.label,
+						value: n,
+						options: k,
+						onValueChange: (e) => {
+							e && f(e);
+						},
+						className: "w-full max-w-full @sm/event-calendar-header:w-28"
+					})
+				]
+			})]
+		})
+	});
+}
+K.displayName = "EventCalendarHeader";
+//#endregion
+//#region src/components/features/event-calendar/colors.ts
+var ee = {
+	gray: {
+		badgeBg: "bg-muted",
+		border: "border-border",
+		swatch: "bg-muted-foreground"
+	},
+	red: {
+		badgeBg: "bg-destructive/10",
+		border: "border-destructive/40",
+		swatch: "bg-destructive"
+	},
+	orange: {
+		badgeBg: "bg-warning/10",
+		border: "border-warning/40",
+		swatch: "bg-warning"
+	},
+	amber: {
+		badgeBg: "bg-warning/10",
+		border: "border-warning/40",
+		swatch: "bg-warning"
+	},
+	yellow: {
+		badgeBg: "bg-warning/10",
+		border: "border-warning/40",
+		swatch: "bg-warning"
+	},
+	green: {
+		badgeBg: "bg-success/10",
+		border: "border-success/40",
+		swatch: "bg-success"
+	},
+	blue: {
+		badgeBg: "bg-info/10",
+		border: "border-info/40",
+		swatch: "bg-info"
+	},
+	purple: {
+		badgeBg: "bg-primary/10",
+		border: "border-primary/40",
+		swatch: "bg-primary"
+	}
+};
+function q(e) {
+	let t = R(e);
+	return {
+		dot: L[t],
+		...ee[t]
+	};
+}
+function J(e) {
+	return L[R(e)];
+}
+//#endregion
+//#region src/components/features/event-calendar/event-calendar-legend.tsx
+function Y({ categories: e, visibleCategories: t, onToggleCategory: a, enableFiltering: o = !1 }) {
+	let s = !t || t.length === 0, c = (e) => !o || s || t?.includes(e), l = (e) => {
+		o && a && a(e);
+	};
+	return e.length === 0 ? null : /* @__PURE__ */ m("div", {
+		role: o ? "group" : void 0,
+		"aria-label": o ? "Filter event categories" : void 0,
+		className: n("event-calendar-legend--component", "flex flex-wrap items-center gap-space-sm py-space-xs"),
+		children: e.map((e) => {
+			let t = c(e.id), a = q(e), s = e.icon, u = "group inline-flex items-center gap-space-sm rounded-full border px-space-sm py-space-xs transition-colors", d = /* @__PURE__ */ h(p, { children: [
+				/* @__PURE__ */ m("span", {
+					className: n("inline-block size-2 rounded-full", t ? a.swatch : "bg-muted-foreground/40"),
+					"aria-hidden": "true"
+				}),
+				!!s && /* @__PURE__ */ m(s, {
+					className: n("size-icon-sm", t ? "text-foreground" : "text-muted-foreground"),
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ m(i, {
+					tag: "span",
+					size: "xs",
+					weight: "medium",
+					type: t ? "main" : "secondary",
+					children: e.label
+				})
+			] });
+			return o ? /* @__PURE__ */ m(r, {
+				type: "button",
+				tone: "secondary",
+				buttonStyle: "ghost",
+				size: "sm",
+				"aria-pressed": t,
+				onClick: () => l(e.id),
+				className: n(u, "h-auto cursor-pointer shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40", t ? "border-border bg-card hover:bg-muted/40" : "border-dashed border-border/60 bg-transparent text-muted-foreground hover:bg-muted/30"),
+				children: d
+			}, e.id) : /* @__PURE__ */ m("span", {
+				className: n(u, "border-border bg-card cursor-default"),
+				children: d
+			}, e.id);
+		})
+	});
+}
+Y.displayName = "EventCalendarLegend";
+//#endregion
+//#region src/components/features/event-calendar/use-event-calendar.tsx
+function te({ events: e, locale: t, date: n, defaultDate: r = /* @__PURE__ */ new Date(), viewMode: i, defaultViewMode: a = "month", onDateChange: o, onViewModeChange: s, dataOptions: c = {} }) {
+	let [l, p] = f(r), [m, h] = f(a), g = n ?? l, _ = i ?? m, v = u((e) => {
+		n === void 0 && p(e), o?.(e);
+	}, [n, o]), y = u((e) => {
+		i === void 0 && h(e), s?.(e);
+	}, [s, i]), b = V(e, g, _, c), x = d(() => c.visibleCategories && c.visibleCategories.length > 0 ? e.filter((e) => c.visibleCategories.includes(e.category)) : e, [e, c.visibleCategories]);
+	return {
+		currentDate: g,
+		viewMode: _,
+		calendarDays: b,
+		visibleEvents: x,
+		goToToday: u(() => {
+			v(/* @__PURE__ */ new Date());
+		}, [v]),
+		goToNextPeriod: u(() => {
+			let e = _ === "month" ? S(g, 1) : C(g, 1);
+			v(e);
+		}, [
+			v,
+			g,
+			_
+		]),
+		goToPreviousPeriod: u(() => {
+			let e = _ === "month" ? F(g, 1) : I(g, 1);
+			v(e);
+		}, [
+			v,
+			g,
+			_
+		]),
+		setDate: u((e) => {
+			v(e);
+		}, [v]),
+		setViewMode: u((e) => {
+			y(e);
+		}, [y]),
+		displayLabel: d(() => {
+			if (_ === "month") return D(g, "MMMM yyyy", { locale: t });
+			if (_ === "week") {
+				let e = b[0]?.date, n = b[b.length - 1]?.date;
+				return e && n ? `${D(e, "MMM d", { locale: t })} - ${D(n, "MMM d, yyyy", { locale: t })}` : D(g, "MMMM yyyy", { locale: t });
+			}
+			return D(g, "MMMM yyyy", { locale: t });
+		}, [
+			g,
+			_,
+			b,
+			t
+		]),
+		hasEvents: d(() => x.length > 0, [x])
+	};
+}
+//#endregion
+//#region src/components/features/event-calendar/event-calendar.tsx
+function ne(e, t) {
+	if (!e) return !1;
+	if (Array.isArray(e)) return e.some((e) => e.toDateString() === t.toDateString());
+	if (typeof e == "function") return e(t);
+	let n = e.dates?.some((e) => e.toDateString() === t.toDateString()) ?? !1, r = e.predicate?.(t) ?? !1;
+	return n || r;
+}
+function X({ events: r, categories: a, viewMode: o, defaultViewMode: s, onViewModeChange: c, date: l, defaultDate: u, onDateChange: p, onEventClick: g, onDayClick: _, maxEventsPerDay: v = 3, showLegend: y = !0, showHeader: b = !0, showWeekends: x = !0, weekStartsOn: S, locale: C, enableCategoryFilter: w = !1, visibleCategories: T, onVisibleCategoriesChange: E, loading: D = !1, emptyStateMessage: O, className: k, compact: A = !1, actions: j, strings: M, dayHeadingVariant: N = "default", dayHeadingClassName: P, renderDayHeading: F, rangeMode: I = "date", minDate: L, maxDate: R, disabledDates: B, filterEvent: V, renderEvent: H, renderDayCell: U }) {
+	let G = t(z, M), [ee, q] = f([]), J = T ?? ee, { weekStartsOn: X, locale: Z } = e(), Q = S ?? X ?? 1, re = C ?? Z, ie = (e) => {
+		let t = J.includes(e) ? J.filter((t) => t !== e) : [...J, e];
+		E ? E(t) : q(t);
+	}, $ = te({
+		events: r,
+		locale: re,
+		date: l,
+		defaultDate: u,
+		viewMode: o,
+		defaultViewMode: s,
+		onDateChange: p,
+		onViewModeChange: c,
+		dataOptions: {
+			weekStartsOn: Q,
+			showWeekends: x,
+			visibleCategories: J.length > 0 ? J : void 0
+		}
+	}), ae = d(() => {
+		let e = G.weekdaysShort;
+		return Q === 1 ? [...e.slice(1), e[0]] : e;
+	}, [G.weekdaysShort, Q]), oe = (e) => {
+		ne(B, e.date) || L && e.date < L || R && e.date > R || _?.(e.date, e.events);
+	}, se = d(() => V ? $.calendarDays.map((e) => ({
+		...e,
+		events: e.events.filter(V),
+		eventCount: e.events.filter(V).length,
+		hasMultipleEvents: e.events.filter(V).length > 1
+	})) : $.calendarDays, [$.calendarDays, V]);
+	function ce(e) {
+		return !!(ne(B, e) || L && e < L || R && e > R);
+	}
+	let le = d(() => {
+		let e = $.calendarDays;
+		if (e.length === 0) return {
+			prev: !1,
+			next: !1
+		};
+		let t = e[0].date, n = e[e.length - 1].date;
+		return {
+			prev: !!L && t <= L,
+			next: !!R && n >= R
+		};
+	}, [
+		$.calendarDays,
+		L,
+		R
+	]);
+	if (D) return /* @__PURE__ */ m("div", {
+		className: n("event-calendar--component", "flex items-center justify-center py-12"),
+		children: /* @__PURE__ */ m(i, {
+			type: "secondary",
+			children: G.loading
+		})
+	});
+	let ue = o ? c : void 0, de = w ? ie : void 0;
+	return /* @__PURE__ */ h("div", {
+		className: n("event-calendar--component w-full space-y-space-xl", k),
+		children: [
+			!!b && /* @__PURE__ */ m(K, {
+				currentDate: $.currentDate,
+				viewMode: $.viewMode,
+				displayLabel: $.displayLabel,
+				onPrevious: $.goToPreviousPeriod,
+				onNext: $.goToNextPeriod,
+				onToday: $.goToToday,
+				onViewModeChange: ue,
+				onDateChange: $.setDate,
+				locale: re,
+				actions: j,
+				rangeMode: I,
+				minDate: L,
+				maxDate: R,
+				prevDisabled: le.prev,
+				nextDisabled: le.next,
+				strings: {
+					today: G.today,
+					previous: G.previous,
+					next: G.next,
+					viewMode: G.viewMode,
+					monthYearPicker: G.monthYearPicker
+				}
+			}),
+			!!y && a.length > 0 && /* @__PURE__ */ m(Y, {
+				categories: a,
+				visibleCategories: J,
+				onToggleCategory: de,
+				enableFiltering: w
+			}),
+			!$.hasEvents && O ? /* @__PURE__ */ m("div", {
+				className: "flex items-center justify-center rounded-radius border border-dashed border-border p-surface",
+				children: /* @__PURE__ */ m(i, {
+					type: "secondary",
+					children: O
+				})
+			}) : /* @__PURE__ */ h("div", {
+				className: "bg-background rounded-radius border border-border",
+				children: [/* @__PURE__ */ m("div", {
+					className: n("grid grid-cols-7", N === "bordered" && "border-b border-border mb-0", N === "tinted" && "bg-muted/40 rounded-t-radius mb-0 overflow-hidden", N === "accent" && "bg-primary/8 rounded-t-radius mb-0 overflow-hidden", N === "default" && "mb-space-md"),
+					children: ae.map((e, t) => F ? /* @__PURE__ */ m("div", { children: F(e, t) }, e) : /* @__PURE__ */ m("div", {
+						className: n("text-center h-8 flex items-center justify-center", P),
+						children: /* @__PURE__ */ m(i, {
+							size: "xs",
+							weight: N === "accent" ? "medium" : "regular",
+							className: n(N === "default" && "text-muted-foreground", N === "tinted" && "text-muted-foreground", N === "bordered" && "text-foreground", N === "accent" && "text-primary-accent"),
+							children: e
+						})
+					}, e))
+				}), /* @__PURE__ */ m("div", {
+					className: "grid grid-cols-7",
+					children: se.map((e) => {
+						let t = ce(e.date), r = () => /* @__PURE__ */ m(W, {
+							data: e,
+							categories: a,
+							maxEvents: v,
+							onClick: () => oe(e),
+							onEventClick: g ? (t) => {
+								ce(e.date) || g(t);
+							} : void 0,
+							compact: A,
+							strings: {
+								booking: G.booking,
+								bookings: G.bookings
+							},
+							renderEvent: H
+						});
+						return /* @__PURE__ */ m("div", {
+							className: n(t && "pointer-events-none opacity-40"),
+							"aria-disabled": t || void 0,
+							children: U ? U(e, r) : r()
+						}, e.date.toISOString());
+					})
+				})]
+			})
+		]
+	});
+}
+X.displayName = "EventCalendar";
+//#endregion
+//#region src/components/features/event-calendar/event-calendar-event-card.tsx
+var Z = {
+	guest: "guest",
+	guests: "guests"
+};
+function Q({ event: e, category: c, onClick: l, strings: u }) {
+	let d = t(Z, u), f = !!l, _ = () => {
+		l && l();
+	}, v = e.metadata || {}, S = v.customer_name, C = v.guest_count, w = v.service_name, T = J(c), E = /* @__PURE__ */ h(p, { children: [
+		/* @__PURE__ */ h("div", {
+			className: "event-calendar-event-card--header mb-space-lg flex min-w-0 items-start justify-between gap-space-lg",
+			children: [/* @__PURE__ */ h("div", {
+				className: "flex min-w-0 flex-1 flex-col items-start gap-space-xs sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-space-md",
+				children: [/* @__PURE__ */ m(a, {
+					tag: "h5",
+					containerClassName: "event-calendar-event-card--heading min-w-0 max-w-full sm:w-auto",
+					className: "break-words",
+					children: e.title
+				}), !!c && /* @__PURE__ */ h("div", {
+					className: "event-calendar-event-card--category inline-flex min-w-0 max-w-full items-center gap-space-xs",
+					children: [/* @__PURE__ */ m("span", {
+						"aria-hidden": "true",
+						className: n("event-calendar-event-card--category-dot size-1.5 shrink-0 rounded-full", T)
+					}), /* @__PURE__ */ m(i, {
+						tag: "span",
+						size: "xs",
+						weight: "medium",
+						className: "min-w-0 break-words",
+						children: c.label
+					})]
+				})]
+			}), !!f && !!e.url && /* @__PURE__ */ m(y, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" })]
+		}),
+		/* @__PURE__ */ h("div", {
+			className: "grid grid-cols-1 sm:grid-cols-2 gap-space-md mb-space-lg",
+			children: [!!S && /* @__PURE__ */ h("div", {
+				className: "flex items-center gap-space-sm",
+				children: [/* @__PURE__ */ m(b, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }), /* @__PURE__ */ m(i, {
+					className: "truncate",
+					children: S
+				})]
+			}), C !== void 0 && C > 0 && /* @__PURE__ */ h("div", {
+				className: "flex items-center gap-space-sm",
+				children: [/* @__PURE__ */ m(x, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }), /* @__PURE__ */ h(i, { children: [
+					C,
+					" ",
+					C === 1 ? d.guest : d.guests
+				] })]
+			})]
+		}),
+		!!w && /* @__PURE__ */ m(i, {
+			type: "secondary",
+			className: "mb-space-md line-clamp-1",
+			children: w
+		}),
+		/* @__PURE__ */ h("div", {
+			className: "flex items-center gap-space-sm pt-space-md border-t border-border/50",
+			children: [/* @__PURE__ */ m(g, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }), e.allDay ? /* @__PURE__ */ m(s, {
+				value: e.startDate,
+				preset: "long",
+				size: "xs",
+				type: "secondary"
+			}) : /* @__PURE__ */ m(o, {
+				value: e.startDate,
+				preset: "long",
+				size: "xs",
+				type: "secondary"
+			})]
+		})
+	] }), D = n("w-full min-w-0 text-left p-surface border border-border rounded-radius bg-card transition-none", f ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" : "");
+	return f ? /* @__PURE__ */ m(r, {
+		type: "button",
+		tone: "secondary",
+		buttonStyle: "ghost",
+		onClick: _,
+		className: n("event-calendar-event-card--component", "h-auto flex-col items-stretch justify-start whitespace-normal shadow-none", D),
+		children: E
+	}) : /* @__PURE__ */ m("div", {
+		className: n("event-calendar-event-card--component", D),
+		children: E
+	});
+}
+Q.displayName = "EventCalendarEventCard";
+//#endregion
+export { X as EventCalendar, W as EventCalendarDayCell, B as EventCalendarEventBadge, Q as EventCalendarEventCard, K as EventCalendarHeader, Y as EventCalendarLegend, L as calendarTokenDot, Z as defaultEventCalendarEventCardStrings, z as defaultEventCalendarStrings, q as getCalendarColorClasses, J as getCalendarDotClass, U as getCategoryById, H as getEventsForDay, R as resolveCategoryColorToken, te as useEventCalendar, V as useEventCalendarData };
+
+//# sourceMappingURL=event-calendar.js.map