themelia-react-ui 2.0.5 → 2.0.6

package/dist/features/event-calendar.js

@@ -1,25 +1,25 @@
 "use client";
 import { S as e, d as t, u as n } from "../ui-provider-C-74NVLc.js";
 import { useStrings as r } from "../lib/strings.js";
-import { t as i } from "../utils-B6kKb8jB.js";
-import { n as a } from "../buttons-BedGfygC.js";
-import { c as o, s } from "../typography-BQnine1k.js";
+import { t as i } from "../utils-DhuoqFy4.js";
+import { n as a } from "../buttons-DeW0bQeK.js";
+import { c as o, s } from "../typography-C7-YMW1S.js";
 import { t as c } from "../focus-recipes-B653VaLq.js";
-import { t as l } from "../structure-DuxKl954.js";
+import { t as l } from "../structure-DZJ2wbAU.js";
 import { i as u, t as d } from "../tone-recipes-BPsRAvhu.js";
 import { t as f } from "../composition.recipes-COdiFhxB.js";
-import { t as p } from "../interaction-recipes-XR9ZpVYL.js";
-import { r as m, t as h } from "../date-Cq8ioE4o.js";
-import { n as g } from "../field-affordance-recipes-DWcNcOjh.js";
-import { l as _ } from "../choice-inputs-zUgBZfE4.js";
-import { t as v } from "../date-pickers-DY-CpXS1.js";
+import { t as p } from "../interaction-recipes-4wZ2tvfb.js";
+import { r as m, t as h } from "../date-Br0FicVv.js";
+import { n as g } from "../field-affordance-recipes-D6H7tVJi.js";
+import { l as _ } from "../choice-inputs-DHGtx0QV.js";
+import { t as v } from "../date-pickers-tj2MXmXd.js";
 import { r as y, t as b } from "../control-group-recipes-fMuFo0H7.js";
 import { useCallback as x, useMemo as S, useState as C } from "react";
 import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
 import { ChevronLeft as D, ChevronRight as ee, ExternalLink as O } from "lucide-react";
-import { addMonths as k, addWeeks as A, eachDayOfInterval as j, endOfMonth as te, endOfWeek as M, format as N, isSameDay as P, isSameMonth as F, isToday as I, isWeekend as L, startOfDay as R, startOfMonth as z, startOfWeek as B, subMonths as V, subWeeks as H } from "date-fns";
+import { addMonths as k, addWeeks as A, eachDayOfInterval as j, endOfMonth as te, endOfWeek as M, format as N, formatISO as P, isSameDay as F, isSameMonth as I, isToday as L, isWeekend as R, startOfDay as z, startOfMonth as ne, startOfWeek as B, subMonths as V, subWeeks as re } from "date-fns";
 //#region src/components/features/event-calendar/event-calendar.types.ts
-var U = {
+var H = {
 	gray: "bg-muted-foreground",
 	red: "bg-chart-4",
 	orange: "bg-chart-5",
@@ -29,10 +29,10 @@ var U = {
 	blue: "bg-chart-2",
 	purple: "bg-chart-3"
 };
-function W(e) {
+function U(e) {
 	return e?.colorToken ?? "gray";
 }
-var G = {
+var W = {
 	today: "Today",
 	previous: "Previous",
 	next: "Next",
@@ -57,8 +57,8 @@ var G = {
 };
 //#endregion
 //#region src/components/features/event-calendar/event-calendar-event-badge.tsx
-function K({ event: e, category: t, compact: n = !1, onClick: r }) {
-	let a = U[W(t)], s = e.allDay ? null : N(e.startDate, "HH:mm"), c = e.metadata?.calendar_cell_title, l = typeof c == "string" && c.trim() !== "" ? c : e.title, u = s ? `${l} at ${s}` : l;
+function G({ event: e, category: t, compact: n = !1, onClick: r }) {
+	let a = H[U(t)], s = e.allDay ? null : N(e.startDate, "HH:mm"), c = e.metadata?.calendar_cell_title, l = typeof c == "string" && c.trim() !== "" ? c : e.title, u = s ? `${l} at ${s}` : l;
 	return /* @__PURE__ */ T("button", {
 		type: "button",
 		onClick: (e) => {
@@ -92,40 +92,43 @@ function K({ event: e, category: t, compact: n = !1, onClick: r }) {
 		})
 	});
 }
-K.displayName = "EventCalendarEventBadge";
+G.displayName = "EventCalendarEventBadge";
 //#endregion
 //#region src/components/features/event-calendar/use-event-calendar-data.tsx
+function K(e) {
+	return P(e, { representation: "date" });
+}
 function q(e, t, n, r = {}) {
 	let { weekStartsOn: i = 1, showWeekends: a = !0, visibleCategories: o } = r;
 	return S(() => {
-		let r = z(t), s = te(t), c, l;
+		let r = ne(t), s = te(t), c, l;
 		n === "month" ? (c = B(r, { weekStartsOn: i }), l = M(s, { weekStartsOn: i })) : n === "week" ? (c = B(t, { weekStartsOn: i }), l = M(t, { weekStartsOn: i })) : (c = r, l = s);
 		let u = j({
 			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 = R(e.startDate);
+			let t = z(e.startDate);
 			if (Number.isNaN(t.getTime())) return;
 			let n = t;
 			if (e.endDate && !Number.isNaN(e.endDate.getTime())) {
-				let r = R(e.endDate);
+				let r = z(e.endDate);
 				!Number.isNaN(r.getTime()) && r.getTime() >= t.getTime() && (n = r);
 			}
 			j({
 				start: t,
 				end: n
 			}).forEach((t) => {
-				let n = t.toISOString().split("T")[0];
+				let n = K(t);
 				f.has(n) || f.set(n, []), f.get(n).push(e);
 			});
-		}), u.filter((e) => a || !L(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());
+		}), u.filter((e) => a || !R(e)).map((e) => {
+			let n = K(e), 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: F(e, t),
-				isToday: I(e),
-				isWeekend: L(e),
+				isCurrentMonth: I(e, t),
+				isToday: L(e),
+				isWeekend: R(e),
 				events: r,
 				eventCount: r.length,
 				hasMultipleEvents: r.length > 1
@@ -140,21 +143,21 @@ function q(e, t, n, r = {}) {
 		o
 	]);
 }
-function ne(e, t) {
+function J(e, t) {
 	return e.filter((e) => {
-		let n = R(e.startDate), r = e.endDate ? R(e.endDate) : n, i = R(t);
-		return P(i, n) || P(i, r) || i > n && i < r;
+		let n = z(e.startDate), r = e.endDate ? z(e.endDate) : n, i = z(t);
+		return F(i, n) || F(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 J(e, t) {
+function ie(e, t) {
 	return e.find((e) => e.id === t);
 }
 //#endregion
 //#region src/components/features/event-calendar/event-calendar-day-cell.tsx
-function Y({ data: e, categories: t, maxEvents: n = 3, onClick: r, onEventClick: a, compact: s = !1, strings: c, renderEvent: l }) {
+function ae({ data: e, categories: t, maxEvents: n = 3, onClick: r, onEventClick: a, compact: s = !1, strings: c, renderEvent: l }) {
 	let u = {
-		booking: c?.booking ?? G.booking,
-		bookings: c?.bookings ?? G.bookings
+		booking: c?.booking ?? W.booking,
+		bookings: c?.bookings ?? W.bookings
 	}, { date: d, isCurrentMonth: f, isToday: p, isWeekend: m, events: h, eventCount: _ } = e, v = h.slice(0, n), y = Math.max(0, _ - n);
 	return /* @__PURE__ */ T("div", {
 		className: i("event-calendar-day-cell--component", "box-border h-full p-0 relative w-full border-r border-b border-border last:border-r-0 [&:nth-child(7n)]:border-r-0"),
@@ -182,8 +185,8 @@ function Y({ data: e, categories: t, maxEvents: n = 3, onClick: r, onEventClick:
 			}), /* @__PURE__ */ E("div", {
 				className: "w-full space-y-space-2xs",
 				children: [v.map((n) => {
-					let i = J(t, n.category);
-					return l ? /* @__PURE__ */ T("div", { children: l(n, i) }, n.id) : /* @__PURE__ */ T(K, {
+					let i = ie(t, n.category);
+					return l ? /* @__PURE__ */ T("div", { children: l(n, i) }, n.id) : /* @__PURE__ */ T(G, {
 						event: n,
 						category: i,
 						compact: s || e.hasMultipleEvents,
@@ -195,7 +198,7 @@ function Y({ data: e, categories: t, maxEvents: n = 3, onClick: r, onEventClick:
 					className: "flex items-center gap-space-xs py-space-2xs px-space-md",
 					children: [/* @__PURE__ */ T("div", {
 						className: "flex items-center -space-x-1",
-						children: t.slice(0, 3).map((e, t) => /* @__PURE__ */ T("span", { className: i("h-1.5 w-1.5 rounded-full border border-background", U[W(e)]) }, e.id || t))
+						children: t.slice(0, 3).map((e, t) => /* @__PURE__ */ T("span", { className: i("h-1.5 w-1.5 rounded-full border border-background", H[U(e)]) }, e.id || t))
 					}), /* @__PURE__ */ E(o, {
 						size: "xs",
 						type: "secondary",
@@ -211,10 +214,10 @@ function Y({ data: e, categories: t, maxEvents: n = 3, onClick: r, onEventClick:
 		})
 	});
 }
-Y.displayName = "EventCalendarDayCell";
+ae.displayName = "EventCalendarDayCell";
 //#endregion
 //#region src/components/features/event-calendar/event-calendar-header.tsx
-var re = (e, t) => {
+var Y = (e, t) => {
 	if (!e) return null;
 	if (e.element) return /* @__PURE__ */ T("div", {
 		className: "event-calendar-header--action-slot",
@@ -222,9 +225,9 @@ var re = (e, t) => {
 	}, e.id || t);
 	let n = e.icon, r = e.id || `action-${t}`, o = () => {
 		e.onClick?.();
-	}, s = e.buttonStyle === "link" ? "ghost" : e.buttonStyle ?? "solid";
+	}, s = e.buttonStyle === "link" ? "ghost" : e.buttonStyle ?? "outline";
 	return /* @__PURE__ */ E(a, {
-		tone: e.tone ?? "primary",
+		tone: e.tone ?? "secondary",
 		buttonStyle: s,
 		onClick: o,
 		className: i("gap-space-md", e.buttonStyle === "link" && "underline underline-offset-[0.2em]"),
@@ -232,8 +235,8 @@ var re = (e, t) => {
 		children: [!!n && /* @__PURE__ */ T(n, { className: "size-icon" }), e.label]
 	}, r);
 };
-function ie({ currentDate: n, viewMode: o, displayLabel: c, onPrevious: l, onNext: u, onToday: d, onViewModeChange: p, onDateChange: m, locale: h, actions: g, strings: x, rangeMode: C = "date", minDate: O, maxDate: k, prevDisabled: A = !1, nextDisabled: j = !1 }) {
-	let { defaultScale: te } = t(), M = e(void 0, te), N = r(G, x), P = S(() => (g || []).filter((e) => e.visible !== !1), [g]), F = S(() => [
+function oe({ currentDate: n, viewMode: o, displayLabel: c, onPrevious: l, onNext: u, onToday: d, onViewModeChange: p, onDateChange: m, locale: h, actions: g, strings: x, rangeMode: C = "date", minDate: O, maxDate: k, prevDisabled: A = !1, nextDisabled: j = !1 }) {
+	let { defaultScale: te } = t(), M = e(void 0, te), N = r(W, x), P = S(() => (g || []).filter((e) => e.visible !== !1), [g]), F = S(() => [
 		{
 			value: "month",
 			label: N.viewMode.month
@@ -281,7 +284,7 @@ function ie({ currentDate: n, viewMode: o, displayLabel: c, onPrevious: l, onNex
 				children: [
 					P.length > 0 && /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("div", {
 						className: i("event-calendar-header--actions flex min-w-0 flex-wrap items-center", f.commands),
-						children: P.map((e, t) => re(e, t))
+						children: P.map((e, t) => Y(e, t))
 					}), /* @__PURE__ */ T("div", { className: "event-calendar-header--separator mx-space-sm hidden h-6 w-px bg-border @sm/event-calendar-header:block" })] }),
 					/* @__PURE__ */ T(a, {
 						tone: "secondary",
@@ -327,59 +330,59 @@ function ie({ currentDate: n, viewMode: o, displayLabel: c, onPrevious: l, onNex
 		})
 	});
 }
-ie.displayName = "EventCalendarHeader";
+oe.displayName = "EventCalendarHeader";
 //#endregion
 //#region src/components/features/event-calendar/colors.ts
 var X = {
 	badgeBg: "bg-muted",
 	border: "border-border"
-}, Z = {
+}, se = {
 	gray: {
 		...X,
-		swatch: U.gray
+		swatch: H.gray
 	},
 	red: {
 		...X,
-		swatch: U.red
+		swatch: H.red
 	},
 	orange: {
 		...X,
-		swatch: U.orange
+		swatch: H.orange
 	},
 	amber: {
 		...X,
-		swatch: U.amber
+		swatch: H.amber
 	},
 	yellow: {
 		...X,
-		swatch: U.yellow
+		swatch: H.yellow
 	},
 	green: {
 		...X,
-		swatch: U.green
+		swatch: H.green
 	},
 	blue: {
 		...X,
-		swatch: U.blue
+		swatch: H.blue
 	},
 	purple: {
 		...X,
-		swatch: U.purple
+		swatch: H.purple
 	}
 };
-function ae(e) {
-	let t = W(e);
+function ce(e) {
+	let t = U(e);
 	return {
-		dot: U[t],
-		...Z[t]
+		dot: H[t],
+		...se[t]
 	};
 }
-function oe(e) {
-	return U[W(e)];
+function Z(e) {
+	return H[U(e)];
 }
 //#endregion
 //#region src/components/features/event-calendar/event-calendar-legend.tsx
-function se({ categories: e, visibleCategories: t, onToggleCategory: n, enableFiltering: r = !1 }) {
+function le({ categories: e, visibleCategories: t, onToggleCategory: n, enableFiltering: r = !1 }) {
 	let s = !t || t.length === 0, c = (e) => !r || s || t?.includes(e), l = (e) => {
 		r && n && n(e);
 	};
@@ -388,7 +391,7 @@ function se({ categories: e, visibleCategories: t, onToggleCategory: n, enableFi
 		"aria-label": r ? "Filter event categories" : void 0,
 		className: i("event-calendar-legend--component", "flex flex-wrap items-center gap-space-sm py-space-xs"),
 		children: e.map((e) => {
-			let t = c(e.id), n = ae(e), s = e.icon, u = "group inline-flex items-center gap-space-sm rounded-radius border px-space-sm py-space-xs transition-colors", d = /* @__PURE__ */ E(w, { children: [
+			let t = c(e.id), n = ce(e), s = e.icon, u = "group inline-flex items-center gap-space-sm rounded-radius border px-space-sm py-space-xs transition-colors", d = /* @__PURE__ */ E(w, { children: [
 				/* @__PURE__ */ T("span", {
 					className: i("inline-block size-2 rounded-radius", t ? n.swatch : "bg-muted-foreground/40"),
 					"aria-hidden": "true"
@@ -421,10 +424,10 @@ function se({ categories: e, visibleCategories: t, onToggleCategory: n, enableFi
 		})
 	});
 }
-se.displayName = "EventCalendarLegend";
+le.displayName = "EventCalendarLegend";
 //#endregion
 //#region src/components/features/event-calendar/use-event-calendar.tsx
-function ce({ events: e, locale: t, date: n, defaultDate: r = /* @__PURE__ */ new Date(), viewMode: i, defaultViewMode: a = "month", onDateChange: o, onViewModeChange: s, dataOptions: c = {} }) {
+function ue({ events: e, locale: t, date: n, defaultDate: r = /* @__PURE__ */ new Date(), viewMode: i, defaultViewMode: a = "month", onDateChange: o, onViewModeChange: s, dataOptions: c = {} }) {
 	let [l, u] = C(r), [d, f] = C(a), p = n ?? l, m = i ?? d, h = x((e) => {
 		n === void 0 && u(e), o?.(e);
 	}, [n, o]), g = x((e) => {
@@ -439,7 +442,7 @@ function ce({ events: e, locale: t, date: n, defaultDate: r = /* @__PURE__ */ ne
 			h(/* @__PURE__ */ new Date());
 		}, [h]),
 		goToNextPeriod: x(() => {
-			let e = m === "month" ? k(p, 1) : A(p, 1);
+			let e = m === "week" ? A(p, 1) : k(p, 1);
 			h(e);
 		}, [
 			h,
@@ -447,7 +450,7 @@ function ce({ events: e, locale: t, date: n, defaultDate: r = /* @__PURE__ */ ne
 			m
 		]),
 		goToPreviousPeriod: x(() => {
-			let e = m === "month" ? V(p, 1) : H(p, 1);
+			let e = m === "week" ? re(p, 1) : V(p, 1);
 			h(e);
 		}, [
 			h,
@@ -478,20 +481,20 @@ function ce({ events: e, locale: t, date: n, defaultDate: r = /* @__PURE__ */ ne
 }
 //#endregion
 //#region src/components/features/event-calendar/event-calendar.tsx
-function le(e, t) {
+function de(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 ue({ events: e, categories: t, viewMode: a, defaultViewMode: s, onViewModeChange: c, date: l, defaultDate: d, onDateChange: f, onEventClick: p, onDayClick: m, maxEventsPerDay: h = 3, showLegend: g = !0, showHeader: _ = !0, showWeekends: v = !0, weekStartsOn: y, locale: b, enableCategoryFilter: x = !1, visibleCategories: w, onVisibleCategoriesChange: D, loading: ee = !1, emptyStateMessage: O, className: k, compact: A = !1, actions: j, strings: te, dayHeadingVariant: M = "default", dayHeadingClassName: N, renderDayHeading: P, rangeMode: F = "date", minDate: I, maxDate: L, disabledDates: R, filterEvent: z, renderEvent: B, renderDayCell: V }) {
-	let H = r(G, te), [U, W] = C([]), K = w ?? U, { weekStartsOn: q, locale: ne } = n(), J = y ?? q ?? 1, re = b ?? ne, X = (e) => {
-		let t = K.includes(e) ? K.filter((t) => t !== e) : [...K, e];
-		D ? D(t) : W(t);
-	}, Z = ce({
+function fe({ events: e, categories: t, viewMode: a, defaultViewMode: s, onViewModeChange: c, date: l, defaultDate: d, onDateChange: f, onEventClick: p, onDayClick: m, maxEventsPerDay: h = 3, showLegend: g = !0, showHeader: _ = !0, showWeekends: v = !0, weekStartsOn: y, locale: b, enableCategoryFilter: x = !1, visibleCategories: w, onVisibleCategoriesChange: D, loading: ee = !1, emptyStateMessage: O, className: k, compact: A = !1, actions: j, strings: te, dayHeadingVariant: M = "default", dayHeadingClassName: N, renderDayHeading: P, rangeMode: F = "date", minDate: I, maxDate: L, disabledDates: R, filterEvent: z, renderEvent: ne, renderDayCell: B }) {
+	let V = r(W, te), [re, H] = C([]), U = w ?? re, { weekStartsOn: G, locale: K } = n(), q = y ?? G ?? 1, J = b ?? K, ie = (e) => {
+		let t = U.includes(e) ? U.filter((t) => t !== e) : [...U, e];
+		D ? D(t) : H(t);
+	}, Y = ue({
 		events: e,
-		locale: re,
+		locale: J,
 		date: l,
 		defaultDate: d,
 		viewMode: a,
@@ -499,26 +502,23 @@ function ue({ events: e, categories: t, viewMode: a, defaultViewMode: s, onViewM
 		onDateChange: f,
 		onViewModeChange: c,
 		dataOptions: {
-			weekStartsOn: J,
+			weekStartsOn: q,
 			showWeekends: v,
-			visibleCategories: K.length > 0 ? K : void 0
+			visibleCategories: U.length > 0 ? U : void 0
 		}
-	}), ae = S(() => {
-		let e = H.weekdaysShort;
-		return J === 1 ? [...e.slice(1), e[0]] : e;
-	}, [H.weekdaysShort, J]), oe = (e) => {
-		le(R, e.date) || I && e.date < I || L && e.date > L || m?.(e.date, e.events);
-	}, ue = S(() => z ? Z.calendarDays.map((e) => ({
+	}), X = S(() => Array.from({ length: 7 }, (e, t) => (q + t) % 7).filter((e) => v || e !== 0 && e !== 6), [q, v]), se = v ? "grid-cols-7" : "grid-cols-5", ce = (e) => {
+		de(R, e.date) || I && e.date < I || L && e.date > L || m?.(e.date, e.events);
+	}, Z = S(() => z ? Y.calendarDays.map((e) => ({
 		...e,
 		events: e.events.filter(z),
 		eventCount: e.events.filter(z).length,
 		hasMultipleEvents: e.events.filter(z).length > 1
-	})) : Z.calendarDays, [Z.calendarDays, z]);
+	})) : Y.calendarDays, [Y.calendarDays, z]), fe = Z.some((e) => e.events.length > 0);
 	function Q(e) {
-		return !!(le(R, e) || I && e < I || L && e > L);
+		return !!(de(R, e) || I && e < I || L && e > L);
 	}
 	let $ = S(() => {
-		let e = Z.calendarDays;
+		let e = Y.calendarDays;
 		if (e.length === 0) return {
 			prev: !1,
 			next: !1
@@ -529,7 +529,7 @@ function ue({ events: e, categories: t, viewMode: a, defaultViewMode: s, onViewM
 			next: !!L && n >= L
 		};
 	}, [
-		Z.calendarDays,
+		Y.calendarDays,
 		I,
 		L
 	]);
@@ -538,23 +538,23 @@ function ue({ events: e, categories: t, viewMode: a, defaultViewMode: s, onViewM
 		role: "status",
 		children: /* @__PURE__ */ T(o, {
 			type: "secondary",
-			children: H.loading
+			children: V.loading
 		})
 	});
-	let de = a ? c : void 0, fe = x ? X : void 0;
+	let pe = a ? c : void 0, me = x ? ie : void 0;
 	return /* @__PURE__ */ E("div", {
 		className: i("event-calendar--component w-full space-y-space-xl", k),
 		children: [
-			!!_ && /* @__PURE__ */ T(ie, {
-				currentDate: Z.currentDate,
-				viewMode: Z.viewMode,
-				displayLabel: Z.displayLabel,
-				onPrevious: Z.goToPreviousPeriod,
-				onNext: Z.goToNextPeriod,
-				onToday: Z.goToToday,
-				onViewModeChange: de,
-				onDateChange: Z.setDate,
-				locale: re,
+			!!_ && /* @__PURE__ */ T(oe, {
+				currentDate: Y.currentDate,
+				viewMode: Y.viewMode,
+				displayLabel: Y.displayLabel,
+				onPrevious: Y.goToPreviousPeriod,
+				onNext: Y.goToNextPeriod,
+				onToday: Y.goToToday,
+				onViewModeChange: pe,
+				onDateChange: Y.setDate,
+				locale: J,
 				actions: j,
 				rangeMode: F,
 				minDate: I,
@@ -562,20 +562,20 @@ function ue({ events: e, categories: t, viewMode: a, defaultViewMode: s, onViewM
 				prevDisabled: $.prev,
 				nextDisabled: $.next,
 				strings: {
-					today: H.today,
-					previous: H.previous,
-					next: H.next,
-					viewMode: H.viewMode,
-					monthYearPicker: H.monthYearPicker
+					today: V.today,
+					previous: V.previous,
+					next: V.next,
+					viewMode: V.viewMode,
+					monthYearPicker: V.monthYearPicker
 				}
 			}),
-			!!g && t.length > 0 && /* @__PURE__ */ T(se, {
+			!!g && t.length > 0 && /* @__PURE__ */ T(le, {
 				categories: t,
-				visibleCategories: K,
-				onToggleCategory: fe,
+				visibleCategories: U,
+				onToggleCategory: me,
 				enableFiltering: x
 			}),
-			!Z.hasEvents && O ? /* @__PURE__ */ T("div", {
+			!fe && O ? /* @__PURE__ */ T("div", {
 				className: "flex items-center justify-center rounded-radius border border-dashed border-border p-surface",
 				children: /* @__PURE__ */ T(o, {
 					type: "secondary",
@@ -584,38 +584,42 @@ function ue({ events: e, categories: t, viewMode: a, defaultViewMode: s, onViewM
 			}) : /* @__PURE__ */ E("div", {
 				className: "box-border bg-background text-foreground rounded-surface border border-border",
 				children: [/* @__PURE__ */ T("div", {
-					className: i("grid grid-cols-7", M === "bordered" && "border-b border-border mb-0", M === "tinted" && "bg-muted/50 rounded-t-surface mb-0 overflow-hidden", M === "accent" && i(u.primary.wash, "rounded-t-surface mb-0 overflow-hidden"), M === "default" && "mb-space-md"),
-					children: ae.map((e, t) => P ? /* @__PURE__ */ T("div", { children: P(e, t) }, e) : /* @__PURE__ */ T("div", {
-						className: i("text-center h-8 flex items-center justify-center", N),
-						children: /* @__PURE__ */ T(o, {
-							size: "xs",
-							weight: M === "accent" ? "medium" : "regular",
-							className: i(M === "default" && "text-muted-foreground", M === "tinted" && "text-muted-foreground", M === "bordered" && "text-foreground", M === "accent" && "text-primary-accent"),
-							children: e
-						})
-					}, e))
+					className: i("grid", se, M === "bordered" && "border-b border-border mb-0", M === "tinted" && "bg-muted/50 rounded-t-surface mb-0 overflow-hidden", M === "accent" && i(u.primary.wash, "rounded-t-surface mb-0 overflow-hidden"), M === "default" && "mb-space-md"),
+					children: X.map((e, t) => {
+						let n = V.weekdaysShort[e];
+						return P ? /* @__PURE__ */ T("div", { children: P(n, t) }, n) : /* @__PURE__ */ T("div", {
+							className: i("text-center h-8 flex items-center justify-center", N),
+							children: /* @__PURE__ */ T(o, {
+								size: "xs",
+								weight: M === "accent" ? "medium" : "regular",
+								className: i(M === "default" && "text-muted-foreground", M === "tinted" && "text-muted-foreground", M === "bordered" && "text-foreground", M === "accent" && "text-primary-accent"),
+								children: n
+							})
+						}, n);
+					})
 				}), /* @__PURE__ */ T("div", {
-					className: "grid grid-cols-7",
-					children: ue.map((e) => {
-						let n = Q(e.date), r = () => /* @__PURE__ */ T(Y, {
+					className: i("grid", se),
+					children: Z.map((e) => {
+						let n = Q(e.date), r = () => /* @__PURE__ */ T(ae, {
 							data: e,
 							categories: t,
 							maxEvents: h,
-							onClick: () => oe(e),
+							onClick: () => ce(e),
 							onEventClick: p ? (t) => {
 								Q(e.date) || p(t);
 							} : void 0,
 							compact: A,
 							strings: {
-								booking: H.booking,
-								bookings: H.bookings
+								booking: V.booking,
+								bookings: V.bookings
 							},
-							renderEvent: B
+							renderEvent: ne
 						});
 						return /* @__PURE__ */ T("div", {
+							style: { gridColumnStart: X.indexOf(e.date.getDay()) + 1 },
 							className: i(n && "pointer-events-none opacity-50"),
 							"aria-disabled": n || void 0,
-							children: V ? V(e, r) : r()
+							children: B ? B(e, r) : r()
 						}, e.date.toISOString());
 					})
 				})]
@@ -623,7 +627,7 @@ function ue({ events: e, categories: t, viewMode: a, defaultViewMode: s, onViewM
 		]
 	});
 }
-ue.displayName = "EventCalendar";
+fe.displayName = "EventCalendar";
 //#endregion
 //#region src/components/features/event-calendar/event-calendar-event-card.tsx
 var Q = {
@@ -633,7 +637,7 @@ var Q = {
 function $({ event: e, category: t, onClick: n, strings: a }) {
 	let u = r(Q, a), f = !!n, g = () => {
 		n && n();
-	}, _ = e.metadata || {}, v = _.customer_name, y = _.guest_count, b = _.service_name, x = oe(t), S = [v, y !== void 0 && y > 0 ? `${y} ${y === 1 ? u.guest : u.guests}` : void 0].filter(Boolean).join(" · "), C = /* @__PURE__ */ E(l, {
+	}, _ = e.metadata || {}, v = _.customer_name, y = _.guest_count, b = _.service_name, x = Z(t), S = [v, y !== void 0 && y > 0 ? `${y} ${y === 1 ? u.guest : u.guests}` : void 0].filter(Boolean).join(" · "), C = /* @__PURE__ */ E(l, {
 		gap: "lg",
 		children: [
 			/* @__PURE__ */ E("div", {
@@ -702,6 +706,6 @@ function $({ event: e, category: t, onClick: n, strings: a }) {
 }
 $.displayName = "EventCalendarEventCard";
 //#endregion
-export { ue as EventCalendar, Y as EventCalendarDayCell, K as EventCalendarEventBadge, $ as EventCalendarEventCard, ie as EventCalendarHeader, se as EventCalendarLegend, U as calendarTokenDot, Q as defaultEventCalendarEventCardStrings, G as defaultEventCalendarStrings, ae as getCalendarColorClasses, oe as getCalendarDotClass, J as getCategoryById, ne as getEventsForDay, W as resolveCategoryColorToken, ce as useEventCalendar, q as useEventCalendarData };
+export { fe as EventCalendar, ae as EventCalendarDayCell, G as EventCalendarEventBadge, $ as EventCalendarEventCard, oe as EventCalendarHeader, le as EventCalendarLegend, H as calendarTokenDot, Q as defaultEventCalendarEventCardStrings, W as defaultEventCalendarStrings, ce as getCalendarColorClasses, Z as getCalendarDotClass, ie as getCategoryById, J as getEventsForDay, U as resolveCategoryColorToken, ue as useEventCalendar, q as useEventCalendarData };
 
 //# sourceMappingURL=event-calendar.js.map