admin-ui-starter-kit 0.1.3 → 0.4.2

package/dist/components/base/event-calendar/index.js

@@ -1,25 +1,24 @@
 import { useStrings as e } from "../../../lib/strings.js";
-import { a as t } from "../../../_shared/ui-provider-4qKSKMPd.js";
+import { a as t } from "../../../_shared/ui-provider-C8Ot88lS.js";
 import { cn as n } from "../../../lib/utils.js";
-import { t as r } from "../../../_shared/text-DIxMTECE.js";
-import { t as i } from "../../../_shared/heading-BprqyzDs.js";
-import { t as a } from "../../../_shared/button-ChCkwoOD.js";
-import { a as o, i as s, n as c, o as l, t as u } from "../../../_shared/select-07RRiTWc.js";
-import { t as d } from "../../../_shared/date-pickers-Cas9cPlj.js";
+import { n as r, t as i } from "../../../_shared/heading-HeP06nXG.js";
+import { t as a } from "../../../_shared/button-SuocMQFT.js";
+import { a as o, i as s, n as c, o as l, t as u } from "../../../_shared/select-BwUUXpsb.js";
+import { t as d } from "../../../_shared/date-pickers-BI4xLjHR.js";
 import { useCallback as f, useMemo as p, useState as m } from "react";
-import { addMonths as h, addWeeks as g, eachDayOfInterval as _, endOfMonth as v, endOfWeek as y, format as b, isSameDay as x, isSameMonth as S, isToday as C, isWeekend as w, startOfDay as T, startOfMonth as E, startOfWeek as D, subMonths as O, subWeeks as ee } from "date-fns";
+import { addMonths as h, addWeeks as g, eachDayOfInterval as _, endOfMonth as v, endOfWeek as y, format as b, isSameDay as x, isSameMonth as S, isToday as C, isWeekend as w, startOfDay as T, startOfMonth as E, startOfWeek as D, subMonths as ee, subWeeks as O } from "date-fns";
 import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
 import { Calendar as M, ChevronLeft as N, ChevronRight as P, ExternalLink as F, User as I, Users as L } from "lucide-react";
 //#region src/components/base/event-calendar/event-calendar.types.ts
 var R = {
-	gray: "bg-gray-500",
-	red: "bg-red-500",
-	orange: "bg-orange-500",
-	amber: "bg-amber-500",
-	yellow: "bg-yellow-500",
-	green: "bg-green-500",
-	blue: "bg-blue-500",
-	purple: "bg-purple-500"
+	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 z(e) {
 	if (!e) return "gray";
@@ -51,35 +50,38 @@ var B = {
 };
 //#endregion
 //#region src/components/base/event-calendar/event-calendar-event-badge.tsx
-function V({ event: e, category: t, compact: i = !1, onClick: a }) {
-	let o = R[z(t)], s = e.allDay ? null : b(e.startDate, "HH:mm"), c = e.metadata?.calendar_cell_title, l = typeof c == "string" && c.trim() !== "" ? c : e.title;
-	return /* @__PURE__ */ j("button", {
+function V({ event: e, category: t, compact: i = !1, onClick: o }) {
+	let s = R[z(t)], c = e.allDay ? null : b(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__ */ j(a, {
 		type: "button",
+		variant: "secondary",
+		buttonStyle: "ghost",
+		size: i ? "xs" : "sm",
 		onClick: (e) => {
-			e.stopPropagation(), a?.();
+			e.stopPropagation(), o?.();
 		},
-		className: n("event-calendar-event-badge--component", "group/event flex w-full min-w-0 items-center gap-1 rounded-md border border-border/60 bg-card px-1.5", "text-left transition-colors hover:bg-accent/50", i ? "h-5" : "h-6"),
-		title: typeof l == "string" ? l : void 0,
+		className: n("event-calendar-event-badge--component", "group/event flex w-full min-w-0 items-center gap-1 rounded-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", i ? "h-5" : "h-6"),
+		"aria-label": d,
+		title: typeof u == "string" ? u : void 0,
 		children: [
 			/* @__PURE__ */ A("span", {
 				"aria-hidden": "true",
-				className: n("size-1.5 shrink-0 rounded-full", o)
+				className: n("size-1.5 shrink-0 rounded-full", s)
 			}),
 			/* @__PURE__ */ A(r, {
 				tag: "span",
 				size: "xxs",
 				weight: "medium",
-				className: "min-w-0 flex-1 truncate",
-				children: l
+				className: "min-w-0 flex-1 truncate max-sm:hidden",
+				children: u
 			}),
-			!!s && /* @__PURE__ */ A(r, {
+			!!c && /* @__PURE__ */ A(r, {
 				tag: "span",
 				size: "xxs",
 				type: "secondary",
-				className: "shrink-0 whitespace-nowrap tabular-nums",
-				children: s
-			}),
-			void 0
+				className: "shrink-0 whitespace-nowrap tabular-nums max-sm:hidden",
+				children: c
+			})
 		]
 	});
 }
@@ -222,7 +224,7 @@ function K(e) {
 		};
 	}
 }
-var te = (e, t) => {
+var q = (e, t) => {
 	if (!e) return null;
 	if (e.element) return /* @__PURE__ */ A("div", {
 		className: "event-calendar-header--component",
@@ -240,16 +242,8 @@ var te = (e, t) => {
 		children: [!!r && /* @__PURE__ */ A(r, { className: "h-4 w-4" }), e.label]
 	}, i);
 };
-function q({ currentDate: e, viewMode: t, displayLabel: n, onPrevious: r, onNext: f, onToday: m, onViewModeChange: h, onDateChange: g, locale: _, actions: v, strings: y, rangeMode: b = "date", minDate: x, maxDate: S, prevDisabled: C = !1, nextDisabled: w = !1 }) {
-	let T = {
-		today: y?.today ?? B.today,
-		previous: y?.previous ?? B.previous,
-		next: y?.next ?? B.next,
-		viewMode: {
-			...B.viewMode,
-			...y?.viewMode ?? {}
-		}
-	}, E = p(() => (v || []).filter((e) => e.isVisible !== !1), [v]);
+function J({ currentDate: t, viewMode: n, displayLabel: r, onPrevious: f, onNext: m, onToday: h, onViewModeChange: g, onDateChange: _, locale: v, actions: y, strings: b, rangeMode: x = "date", minDate: S, maxDate: C, prevDisabled: w = !1, nextDisabled: T = !1 }) {
+	let E = e(B, b), D = p(() => (y || []).filter((e) => e.isVisible !== !1), [y]);
 	return /* @__PURE__ */ j("div", {
 		className: "flex items-center justify-between gap-4 mb-4",
 		children: [/* @__PURE__ */ j("div", {
@@ -257,29 +251,29 @@ function q({ currentDate: e, viewMode: t, displayLabel: n, onPrevious: r, onNext
 			children: [/* @__PURE__ */ A(i, {
 				tag: "h3",
 				className: "text-lg font-semibold",
-				children: n
+				children: r
 			}), /* @__PURE__ */ A(d, {
 				value: {
-					month: e.getMonth(),
-					year: e.getFullYear()
+					month: t.getMonth(),
+					year: t.getFullYear()
 				},
 				onChange: (e) => {
-					e.date && g?.(e.date);
+					e.date && _?.(e.date);
 				},
-				fromYear: x?.getFullYear(),
-				toYear: S?.getFullYear(),
-				locale: _
+				fromYear: S?.getFullYear(),
+				toYear: C?.getFullYear(),
+				locale: v
 			})]
 		}), /* @__PURE__ */ j("div", {
 			className: "flex items-center gap-2",
 			children: [
-				E.length > 0 && /* @__PURE__ */ j(k, { children: [E.map((e, t) => te(e, t)), /* @__PURE__ */ A("div", { className: "h-6 w-px bg-border mx-1" })] }),
+				D.length > 0 && /* @__PURE__ */ j(k, { children: [D.map((e, t) => q(e, t)), /* @__PURE__ */ A("div", { className: "h-6 w-px bg-border mx-1" })] }),
 				/* @__PURE__ */ A(a, {
 					variant: "secondary",
 					buttonStyle: "outline",
-					onClick: m,
+					onClick: h,
 					className: "hidden sm:inline-flex",
-					children: T.today
+					children: E.today
 				}),
 				/* @__PURE__ */ j("div", {
 					className: "flex items-center border border-border rounded-md",
@@ -287,26 +281,26 @@ function q({ currentDate: e, viewMode: t, displayLabel: n, onPrevious: r, onNext
 						variant: "secondary",
 						buttonStyle: "ghost",
 						size: "icon",
-						onClick: r,
-						disabled: C,
+						onClick: f,
+						disabled: w,
 						className: "h-8 w-8 rounded-r-none border-r",
-						"aria-label": T.previous,
+						"aria-label": E.previous,
 						children: /* @__PURE__ */ A(N, { className: "h-4 w-4" })
 					}), /* @__PURE__ */ A(a, {
 						variant: "secondary",
 						buttonStyle: "ghost",
 						size: "icon",
-						onClick: f,
-						disabled: w,
+						onClick: m,
+						disabled: T,
 						className: "h-8 w-8 rounded-l-none",
-						"aria-label": T.next,
+						"aria-label": E.next,
 						children: /* @__PURE__ */ A(P, { className: "h-4 w-4" })
 					})]
 				}),
-				!!h && /* @__PURE__ */ j(u, {
-					value: t,
+				!!g && /* @__PURE__ */ j(u, {
+					value: n,
 					onValueChange: (e) => {
-						e && h(e);
+						e && g(e);
 					},
 					children: [/* @__PURE__ */ A(o, {
 						className: "w-28 h-8",
@@ -314,15 +308,15 @@ function q({ currentDate: e, viewMode: t, displayLabel: n, onPrevious: r, onNext
 					}), /* @__PURE__ */ j(c, { children: [
 						/* @__PURE__ */ A(s, {
 							value: "month",
-							children: T.viewMode.month
+							children: E.viewMode.month
 						}),
 						/* @__PURE__ */ A(s, {
 							value: "week",
-							children: T.viewMode.week
+							children: E.viewMode.week
 						}),
 						/* @__PURE__ */ A(s, {
 							value: "agenda",
-							children: T.viewMode.agenda
+							children: E.viewMode.agenda
 						})
 					] })]
 				})
@@ -330,56 +324,56 @@ function q({ currentDate: e, viewMode: t, displayLabel: n, onPrevious: r, onNext
 		})]
 	});
 }
-q.displayName = "EventCalendarHeader";
+J.displayName = "EventCalendarHeader";
 //#endregion
 //#region src/components/base/event-calendar/colors.ts
-var J = {
+var te = {
 	gray: {
-		badgeBg: "bg-gray-500/10",
-		border: "border-gray-500/40",
-		swatch: "bg-gray-500"
+		badgeBg: "bg-muted",
+		border: "border-border",
+		swatch: "bg-muted-foreground"
 	},
 	red: {
-		badgeBg: "bg-red-500/10",
-		border: "border-red-500/40",
-		swatch: "bg-red-500"
+		badgeBg: "bg-destructive/10",
+		border: "border-destructive/40",
+		swatch: "bg-destructive"
 	},
 	orange: {
-		badgeBg: "bg-orange-500/10",
-		border: "border-orange-500/40",
-		swatch: "bg-orange-500"
+		badgeBg: "bg-warning/10",
+		border: "border-warning/40",
+		swatch: "bg-warning"
 	},
 	amber: {
-		badgeBg: "bg-amber-500/10",
-		border: "border-amber-500/40",
-		swatch: "bg-amber-500"
+		badgeBg: "bg-warning/10",
+		border: "border-warning/40",
+		swatch: "bg-warning"
 	},
 	yellow: {
-		badgeBg: "bg-yellow-500/10",
-		border: "border-yellow-500/40",
-		swatch: "bg-yellow-500"
+		badgeBg: "bg-warning/10",
+		border: "border-warning/40",
+		swatch: "bg-warning"
 	},
 	green: {
-		badgeBg: "bg-green-500/10",
-		border: "border-green-500/40",
-		swatch: "bg-green-500"
+		badgeBg: "bg-success/10",
+		border: "border-success/40",
+		swatch: "bg-success"
 	},
 	blue: {
-		badgeBg: "bg-blue-500/10",
-		border: "border-blue-500/40",
-		swatch: "bg-blue-500"
+		badgeBg: "bg-info/10",
+		border: "border-info/40",
+		swatch: "bg-info"
 	},
 	purple: {
-		badgeBg: "bg-purple-500/10",
-		border: "border-purple-500/40",
-		swatch: "bg-purple-500"
+		badgeBg: "bg-primary/10",
+		border: "border-primary/40",
+		swatch: "bg-primary"
 	}
 };
 function Y(e) {
 	let t = z(e);
 	return {
 		dot: R[t],
-		...J[t]
+		...te[t]
 	};
 }
 function ne(e) {
@@ -387,21 +381,21 @@ function ne(e) {
 }
 //#endregion
 //#region src/components/base/event-calendar/event-calendar-legend.tsx
-function X({ categories: e, visibleCategories: t, onToggleCategory: i, enableFiltering: a = !1 }) {
-	let o = !t || t.length === 0, s = (e) => a ? o || t?.includes(e) : !0, c = (e) => {
-		!a || !i || i(e);
+function X({ categories: e, visibleCategories: t, onToggleCategory: i, enableFiltering: o = !1 }) {
+	let s = !t || t.length === 0, c = (e) => o ? s || t?.includes(e) : !0, l = (e) => {
+		!o || !i || i(e);
 	};
 	return e.length === 0 ? null : /* @__PURE__ */ A("div", {
-		role: a ? "group" : void 0,
-		"aria-label": a ? "Filter event categories" : void 0,
+		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-1.5 py-1"),
 		children: e.map((e) => {
-			let t = s(e.id), i = Y(e), o = e.icon, l = "group inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors", u = /* @__PURE__ */ j(k, { children: [
+			let t = c(e.id), i = Y(e), s = e.icon, u = "group inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors", d = /* @__PURE__ */ j(k, { children: [
 				/* @__PURE__ */ A("span", {
 					className: n("inline-block size-2 rounded-full", t ? i.swatch : "bg-muted-foreground/40"),
 					"aria-hidden": "true"
 				}),
-				!!o && /* @__PURE__ */ A(o, {
+				!!s && /* @__PURE__ */ A(s, {
 					className: n("size-3", t ? "text-foreground" : "text-muted-foreground"),
 					"aria-hidden": "true"
 				}),
@@ -413,15 +407,18 @@ function X({ categories: e, visibleCategories: t, onToggleCategory: i, enableFil
 					children: e.label
 				})
 			] });
-			return a ? /* @__PURE__ */ A("button", {
+			return o ? /* @__PURE__ */ A(a, {
 				type: "button",
+				variant: "secondary",
+				buttonStyle: "ghost",
+				size: "xs",
 				"aria-pressed": t,
-				onClick: () => c(e.id),
-				className: n(l, "cursor-pointer 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: u
+				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__ */ A("span", {
-				className: n(l, "border-border bg-card cursor-default"),
-				children: u
+				className: n(u, "border-border bg-card cursor-default"),
+				children: d
 			}, e.id);
 		})
 	});
@@ -449,7 +446,7 @@ function re({ events: e, defaultDate: t = /* @__PURE__ */ new Date(), defaultVie
 			r
 		]),
 		goToPreviousPeriod: f(() => {
-			let e = c === "month" ? O(o, 1) : ee(o, 1);
+			let e = c === "month" ? ee(o, 1) : O(o, 1);
 			s(e), r?.(e);
 		}, [
 			o,
@@ -486,111 +483,103 @@ function ie(e, t) {
 	let n = e.dates?.some((e) => e.toDateString() === t.toDateString()) ?? !1, r = e.predicate?.(t) ?? !1;
 	return n || r;
 }
-function Z({ events: e, categories: i, viewMode: a, onViewModeChange: o, defaultDate: s, onDateChange: c, onEventClick: l, onDayClick: u, maxEventsPerDay: d = 3, showLegend: f = !0, showHeader: h = !0, showWeekends: g = !0, weekStartsOn: _, locale: v, enableCategoryFilter: y = !1, visibleCategories: b, onVisibleCategoriesChange: x, isLoading: S = !1, emptyStateMessage: C, className: w, compact: T = !1, actions: E, strings: D, dayHeadingVariant: O = "default", dayHeadingClassName: ee, renderDayHeading: k, rangeMode: M = "date", minDate: N, maxDate: P, disabledDates: F, filterEvent: I, renderEvent: L, renderDayCell: R }) {
-	let z = p(() => ({
-		...B,
-		...D,
-		viewMode: {
-			...B.viewMode,
-			...D?.viewMode ?? {}
-		},
-		weekdaysShort: D?.weekdaysShort ?? B.weekdaysShort
-	}), [D]), [V, H] = m([]), U = b ?? V, { weekStartsOn: W } = t(), K = _ ?? W ?? 1, te = (e) => {
-		let t = U.includes(e) ? U.filter((t) => t !== e) : [...U, e];
-		x ? x(t) : H(t);
-	}, J = re({
-		events: e,
-		defaultDate: s,
-		defaultViewMode: a || "month",
-		onDateChange: c,
-		onViewModeChange: o,
+function Z({ events: i, categories: a, viewMode: o, onViewModeChange: s, defaultDate: c, onDateChange: l, onEventClick: u, onDayClick: d, maxEventsPerDay: f = 3, showLegend: h = !0, showHeader: g = !0, showWeekends: _ = !0, weekStartsOn: v, locale: y, enableCategoryFilter: b = !1, visibleCategories: x, onVisibleCategoriesChange: S, isLoading: C = !1, emptyStateMessage: w, className: T, compact: E = !1, actions: D, strings: ee, dayHeadingVariant: O = "default", dayHeadingClassName: k, renderDayHeading: M, rangeMode: N = "date", minDate: P, maxDate: F, disabledDates: I, filterEvent: L, renderEvent: R, renderDayCell: z }) {
+	let V = e(B, ee), [H, U] = m([]), W = x ?? H, { weekStartsOn: K } = t(), q = v ?? K ?? 1, te = (e) => {
+		let t = W.includes(e) ? W.filter((t) => t !== e) : [...W, e];
+		S ? S(t) : U(t);
+	}, Y = re({
+		events: i,
+		defaultDate: c,
+		defaultViewMode: o || "month",
+		onDateChange: l,
+		onViewModeChange: s,
 		dataOptions: {
-			weekStartsOn: K,
-			showWeekends: g,
-			visibleCategories: U.length > 0 ? U : void 0
+			weekStartsOn: q,
+			showWeekends: _,
+			visibleCategories: W.length > 0 ? W : void 0
 		}
-	}), Y = p(() => {
-		let e = z.weekdaysShort;
-		return K === 1 ? [...e.slice(1), e[0]] : e;
-	}, [z.weekdaysShort, K]), ne = (e) => {
-		ie(F, e.date) || N && e.date < N || P && e.date > P || u?.(e.date, e.events);
-	}, Z = p(() => I ? J.calendarDays.map((e) => ({
+	}), ne = p(() => {
+		let e = V.weekdaysShort;
+		return q === 1 ? [...e.slice(1), e[0]] : e;
+	}, [V.weekdaysShort, q]), Z = (e) => {
+		ie(I, e.date) || P && e.date < P || F && e.date > F || d?.(e.date, e.events);
+	}, Q = p(() => L ? Y.calendarDays.map((e) => ({
 		...e,
-		events: e.events.filter(I),
-		eventCount: e.events.filter(I).length,
-		hasMultipleEvents: e.events.filter(I).length > 1
-	})) : J.calendarDays, [J.calendarDays, I]);
-	function Q(e) {
-		return !!(ie(F, e) || N && e < N || P && e > P);
+		events: e.events.filter(L),
+		eventCount: e.events.filter(L).length,
+		hasMultipleEvents: e.events.filter(L).length > 1
+	})) : Y.calendarDays, [Y.calendarDays, L]);
+	function $(e) {
+		return !!(ie(I, e) || P && e < P || F && e > F);
 	}
-	let $ = p(() => {
-		let e = J.calendarDays;
+	let ae = p(() => {
+		let e = Y.calendarDays;
 		if (e.length === 0) return {
 			prev: !1,
 			next: !1
 		};
 		let t = e[0].date, n = e[e.length - 1].date;
 		return {
-			prev: !!N && t <= N,
-			next: !!P && n >= P
+			prev: !!P && t <= P,
+			next: !!F && n >= F
 		};
 	}, [
-		J.calendarDays,
-		N,
-		P
+		Y.calendarDays,
+		P,
+		F
 	]);
-	if (S) return /* @__PURE__ */ A("div", {
+	if (C) return /* @__PURE__ */ A("div", {
 		className: n("event-calendar--component", "flex items-center justify-center py-12"),
 		children: /* @__PURE__ */ A(r, {
 			type: "secondary",
-			children: z.loading
+			children: V.loading
 		})
 	});
-	let ae = a ? o : void 0, oe = y ? te : void 0;
+	let oe = o ? s : void 0, se = b ? te : void 0;
 	return /* @__PURE__ */ j("div", {
-		className: n("w-full space-y-4", w),
+		className: n("w-full space-y-4", T),
 		children: [
-			!!h && /* @__PURE__ */ A(q, {
-				currentDate: J.currentDate,
-				viewMode: J.viewMode,
-				displayLabel: J.displayLabel,
-				onPrevious: J.goToPreviousPeriod,
-				onNext: J.goToNextPeriod,
-				onToday: J.goToToday,
-				onViewModeChange: ae,
-				onDateChange: J.setDate,
-				locale: v,
-				actions: E,
-				rangeMode: M,
-				minDate: N,
-				maxDate: P,
-				prevDisabled: $.prev,
-				nextDisabled: $.next,
+			!!g && /* @__PURE__ */ A(J, {
+				currentDate: Y.currentDate,
+				viewMode: Y.viewMode,
+				displayLabel: Y.displayLabel,
+				onPrevious: Y.goToPreviousPeriod,
+				onNext: Y.goToNextPeriod,
+				onToday: Y.goToToday,
+				onViewModeChange: oe,
+				onDateChange: Y.setDate,
+				locale: y,
+				actions: D,
+				rangeMode: N,
+				minDate: P,
+				maxDate: F,
+				prevDisabled: ae.prev,
+				nextDisabled: ae.next,
 				strings: {
-					today: z.today,
-					previous: z.previous,
-					next: z.next,
-					viewMode: z.viewMode
+					today: V.today,
+					previous: V.previous,
+					next: V.next,
+					viewMode: V.viewMode
 				}
 			}),
-			!!f && i.length > 0 && /* @__PURE__ */ A(X, {
-				categories: i,
-				visibleCategories: U,
-				onToggleCategory: oe,
-				enableFiltering: y
+			!!h && a.length > 0 && /* @__PURE__ */ A(X, {
+				categories: a,
+				visibleCategories: W,
+				onToggleCategory: se,
+				enableFiltering: b
 			}),
-			!J.hasEvents && C ? /* @__PURE__ */ A("div", {
+			!Y.hasEvents && w ? /* @__PURE__ */ A("div", {
 				className: "flex items-center justify-center py-12 border border-dashed border-border rounded-lg",
 				children: /* @__PURE__ */ A(r, {
 					type: "secondary",
-					children: C
+					children: w
 				})
 			}) : /* @__PURE__ */ j("div", {
 				className: "bg-background rounded-lg border border-border",
 				children: [/* @__PURE__ */ A("div", {
 					className: n("grid grid-cols-7", O === "bordered" && "border-b border-border mb-0", O === "tinted" && "bg-muted/40 rounded-t-lg mb-0 overflow-hidden", O === "accent" && "bg-primary/8 rounded-t-lg mb-0 overflow-hidden", O === "default" && "mb-2"),
-					children: Y.map((e, t) => k ? /* @__PURE__ */ A("div", { children: k(e, t) }, e) : /* @__PURE__ */ A("div", {
-						className: n("text-center h-8 flex items-center justify-center", ee),
+					children: ne.map((e, t) => M ? /* @__PURE__ */ A("div", { children: M(e, t) }, e) : /* @__PURE__ */ A("div", {
+						className: n("text-center h-8 flex items-center justify-center", k),
 						children: /* @__PURE__ */ A(r, {
 							size: "xs",
 							weight: O === "accent" ? "medium" : "regular",
@@ -600,23 +589,23 @@ function Z({ events: e, categories: i, viewMode: a, onViewModeChange: o, default
 					}, e))
 				}), /* @__PURE__ */ A("div", {
 					className: "grid grid-cols-7",
-					children: Z.map((e) => {
-						let t = Q(e.date), r = () => /* @__PURE__ */ A(G, {
+					children: Q.map((e) => {
+						let t = $(e.date), r = () => /* @__PURE__ */ A(G, {
 							data: e,
-							categories: i,
-							maxEvents: d,
-							onClick: () => ne(e),
-							compact: T,
+							categories: a,
+							maxEvents: f,
+							onClick: () => Z(e),
+							compact: E,
 							strings: {
-								booking: z.booking,
-								bookings: z.bookings
+								booking: V.booking,
+								bookings: V.bookings
 							},
-							renderEvent: L
+							renderEvent: R
 						});
 						return /* @__PURE__ */ A("div", {
 							className: n(t && "pointer-events-none opacity-40"),
 							"aria-disabled": t || void 0,
-							children: R ? R(e, r) : r()
+							children: z ? z(e, r) : r()
 						}, e.date.toISOString());
 					})
 				})]
@@ -631,10 +620,10 @@ var Q = {
 	guest: "guest",
 	guests: "guests"
 };
-function $({ event: t, category: a, onClick: o, strings: s }) {
-	let c = e(Q, s), l = !!o, u = () => {
-		o && o();
-	}, d = t.metadata || {}, f = d.customer_name, p = d.guest_count, m = d.service_name, h = /* @__PURE__ */ j(k, { children: [
+function $({ event: t, category: o, onClick: s, strings: c }) {
+	let l = e(Q, c), u = !!s, d = () => {
+		s && s();
+	}, f = t.metadata || {}, p = f.customer_name, m = f.guest_count, h = f.service_name, g = /* @__PURE__ */ j(k, { children: [
 		/* @__PURE__ */ j("div", {
 			className: "flex items-start justify-between gap-3 mb-3",
 			children: [/* @__PURE__ */ j("div", {
@@ -642,37 +631,37 @@ function $({ event: t, category: a, onClick: o, strings: s }) {
 				children: [/* @__PURE__ */ A(i, {
 					tag: "h5",
 					children: t.title
-				}), !!a && /* @__PURE__ */ j("div", {
+				}), !!o && /* @__PURE__ */ j("div", {
 					className: "inline-flex items-center gap-1",
-					children: [/* @__PURE__ */ A("span", { className: n("h-1.5 w-1.5 rounded-full", a.color.replace("border-", "bg-")) }), /* @__PURE__ */ A(r, {
+					children: [/* @__PURE__ */ A("span", { className: n("h-1.5 w-1.5 rounded-full", o.color.replace("border-", "bg-")) }), /* @__PURE__ */ A(r, {
 						size: "xs",
 						weight: "medium",
-						children: a.label
+						children: o.label
 					})]
 				})]
-			}), !!l && !!t.url && /* @__PURE__ */ A(F, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" })]
+			}), !!u && !!t.url && /* @__PURE__ */ A(F, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" })]
 		}),
 		/* @__PURE__ */ j("div", {
 			className: "grid grid-cols-1 sm:grid-cols-2 gap-2 mb-3",
-			children: [!!f && /* @__PURE__ */ j("div", {
+			children: [!!p && /* @__PURE__ */ j("div", {
 				className: "flex items-center gap-1.5",
 				children: [/* @__PURE__ */ A(I, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }), /* @__PURE__ */ A(r, {
 					className: "truncate",
-					children: f
+					children: p
 				})]
-			}), p !== void 0 && p > 0 && /* @__PURE__ */ j("div", {
+			}), m !== void 0 && m > 0 && /* @__PURE__ */ j("div", {
 				className: "flex items-center gap-1.5",
 				children: [/* @__PURE__ */ A(L, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }), /* @__PURE__ */ j(r, { children: [
-					p,
+					m,
 					" ",
-					p === 1 ? c.guest : c.guests
+					m === 1 ? l.guest : l.guests
 				] })]
 			})]
 		}),
-		!!m && /* @__PURE__ */ A(r, {
+		!!h && /* @__PURE__ */ A(r, {
 			type: "secondary",
 			className: "mb-2 line-clamp-1",
-			children: m
+			children: h
 		}),
 		/* @__PURE__ */ j("div", {
 			className: "flex items-center gap-1.5 pt-2 border-t border-border/50",
@@ -682,19 +671,21 @@ function $({ event: t, category: a, onClick: o, strings: s }) {
 				children: !!t.allDay && b(t.startDate, "EEEE, MMM d, yyyy")
 			})]
 		})
-	] }), g = n("w-full text-left p-4 border border-border rounded-lg bg-card transition-none", l ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" : "");
-	return l ? /* @__PURE__ */ A("button", {
+	] }), _ = n("w-full text-left p-4 border border-border rounded-lg bg-card transition-none", u ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" : "");
+	return u ? /* @__PURE__ */ A(a, {
 		type: "button",
-		onClick: u,
-		className: n("event-calendar-event-card--component", g),
-		children: h
+		variant: "secondary",
+		buttonStyle: "ghost",
+		onClick: d,
+		className: n("event-calendar-event-card--component", "h-auto flex-col items-stretch justify-start whitespace-normal shadow-none", _),
+		children: g
 	}) : /* @__PURE__ */ A("div", {
-		className: g,
-		children: h
+		className: n("event-calendar-event-card--component", _),
+		children: g
 	});
 }
 $.displayName = "EventCalendarEventCard";
 //#endregion
-export { Z as EventCalendar, G as EventCalendarDayCell, V as EventCalendarEventBadge, $ as EventCalendarEventCard, q as EventCalendarHeader, X as EventCalendarLegend, R as calendarTokenDot, Q as defaultEventCalendarEventCardStrings, B as defaultEventCalendarStrings, Y as getCalendarColorClasses, ne as getCalendarDotClass, W as getCategoryById, U as getEventsForDay, z as resolveCategoryColorToken, re as useEventCalendar, H as useEventCalendarData };
+export { Z as EventCalendar, G as EventCalendarDayCell, V as EventCalendarEventBadge, $ as EventCalendarEventCard, J as EventCalendarHeader, X as EventCalendarLegend, R as calendarTokenDot, Q as defaultEventCalendarEventCardStrings, B as defaultEventCalendarStrings, Y as getCalendarColorClasses, ne as getCalendarDotClass, W as getCategoryById, U as getEventsForDay, z as resolveCategoryColorToken, re as useEventCalendar, H as useEventCalendarData };
 
 //# sourceMappingURL=index.js.map