erp-pro-ui 0.2.5 → 0.2.7

package/dist/chunks/event-calendar-CO2doGJW.mjs

@@ -0,0 +1,1191 @@
+import { n as mergeClassNames } from "./utils-Dc7j29ec.mjs";
+import { t as TruncatedText } from "./truncated-text-DIkg-8Vo.mjs";
+import { t as Button } from "./button-CAU9ej3h.mjs";
+import { t as Select } from "./select-DnSSxddm.mjs";
+import { t as Tooltip } from "./Tooltip-CEj-I4JO.mjs";
+import { t as Drawer } from "./Drawer-BhTTQV8Q.mjs";
+import { t as Checkbox } from "./checkbox-D7EJQbqC.mjs";
+import { t as Input } from "./input-B-XSdnfh.mjs";
+import { t as Switch } from "./switch-DUnNe4xP.mjs";
+import { t as Textarea } from "./textarea-CfeKo5HA.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function isSameDay(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isToday(date) {
+	return isSameDay(date, /* @__PURE__ */ new Date());
+}
+function addDays(date, n) {
+	const d = new Date(date);
+	d.setDate(d.getDate() + n);
+	return d;
+}
+function addMonths(date, n) {
+	const d = new Date(date);
+	d.setMonth(d.getMonth() + n);
+	return d;
+}
+function addWeeks(date, n) {
+	return addDays(date, n * 7);
+}
+function startOfWeek(date) {
+	const d = new Date(date);
+	d.setDate(d.getDate() - d.getDay());
+	d.setHours(0, 0, 0, 0);
+	return d;
+}
+function startOfMonth(date) {
+	return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function endOfMonth(date) {
+	return new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59, 999);
+}
+function getMonthGridDays(date) {
+	const gridStart = startOfWeek(startOfMonth(date));
+	return Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+}
+function getWeekDays(date) {
+	const sunday = startOfWeek(date);
+	return Array.from({ length: 7 }, (_, i) => addDays(sunday, i));
+}
+function getEventsForDay(events, day) {
+	const dayStart = new Date(day);
+	dayStart.setHours(0, 0, 0, 0);
+	const dayEnd = new Date(day);
+	dayEnd.setHours(23, 59, 59, 999);
+	return events.filter((e) => e.start <= dayEnd && e.end >= dayStart);
+}
+function formatMonthYear(date) {
+	return date.toLocaleDateString("en-US", {
+		month: "long",
+		year: "numeric"
+	});
+}
+function formatWeekRange(date) {
+	const days = getWeekDays(date);
+	const start = days[0];
+	const end = days[6];
+	return `${start.toLocaleDateString("en-US", {
+		month: "long",
+		day: "numeric"
+	})}–${start.getMonth() === end.getMonth() ? end.getDate().toString() : end.toLocaleDateString("en-US", {
+		month: "long",
+		day: "numeric"
+	})}, ${end.getFullYear()}`;
+}
+function formatDayFull(date) {
+	return date.toLocaleDateString("en-US", {
+		month: "long",
+		day: "numeric",
+		year: "numeric"
+	});
+}
+function formatShortDate(date) {
+	return `${date.getMonth() + 1}/${date.getDate()}`;
+}
+function formatHour(h) {
+	if (h === 0) return "12AM";
+	if (h === 12) return "12PM";
+	return h < 12 ? `${h}AM` : `${h - 12}PM`;
+}
+function formatTime(date) {
+	let h = date.getHours();
+	const m = date.getMinutes();
+	const ampm = h >= 12 ? "pm" : "am";
+	h = h % 12 || 12;
+	const mm = m.toString().padStart(2, "0");
+	return `${h}:${mm}${ampm}`;
+}
+function formatListDate(date) {
+	return date.toLocaleDateString("en-US", {
+		month: "long",
+		day: "numeric",
+		year: "numeric"
+	});
+}
+function formatListDayName(date) {
+	return date.toLocaleDateString("en-US", { weekday: "long" });
+}
+function generateId() {
+	return Math.random().toString(36).slice(2) + Date.now().toString(36);
+}
+function getEventTopPx(event) {
+	return (event.start.getHours() + event.start.getMinutes() / 60 - 6) * 80;
+}
+function getEventHeightPx(event) {
+	const startH = event.start.getHours() + event.start.getMinutes() / 60;
+	const endH = event.end.getHours() + event.end.getMinutes() / 60;
+	return Math.max((Math.min(endH, 22) - Math.max(startH, 6)) * 80, 20);
+}
+//#endregion
+//#region src/components/data-display/event-calendar/MiniCalendarPicker.tsx
+var DAY_CHARS = [
+	"S",
+	"M",
+	"T",
+	"W",
+	"T",
+	"F",
+	"S"
+];
+var ChevronLeft$1 = () => /* @__PURE__ */ jsx("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" })
+});
+var ChevronRight$1 = () => /* @__PURE__ */ jsx("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
+});
+var MiniCalendarPicker = ({ currentDate, onDateChange, onMonthChange }) => {
+	const days = getMonthGridDays(currentDate);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "select-none",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs font-semibold text-ds-1",
+					children: currentDate.toLocaleDateString("en-US", {
+						month: "long",
+						year: "numeric"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-0.5",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "tertiary",
+						size: "small",
+						className: "h-6 w-6 p-0! hover:opacity-100",
+						"aria-label": "Previous month",
+						onClick: () => onMonthChange(addMonths(currentDate, -1)),
+						children: /* @__PURE__ */ jsx(ChevronLeft$1, {})
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "tertiary",
+						size: "small",
+						className: "h-6 w-6 p-0! hover:opacity-100",
+						"aria-label": "Next month",
+						onClick: () => onMonthChange(addMonths(currentDate, 1)),
+						children: /* @__PURE__ */ jsx(ChevronRight$1, {})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-1 grid grid-cols-7",
+				children: DAY_CHARS.map((c, i) => /* @__PURE__ */ jsx("div", {
+					className: "py-0.5 text-center text-[10px] font-medium text-ds-3",
+					children: c
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-7 gap-y-0.5",
+				children: days.map((day, i) => {
+					const isCurrentMonth = day.getMonth() === currentDate.getMonth();
+					const today = isToday(day);
+					const selected = isSameDay(day, currentDate);
+					return /* @__PURE__ */ jsx(Button, {
+						variant: "tertiary",
+						"aria-label": day.toDateString(),
+						onClick: () => onDateChange(day),
+						className: mergeClassNames("mx-auto h-6 w-6 rounded-full p-0! text-[10px] hover:opacity-100", today ? "bg-ds-accent! text-ds-on-accent! font-bold" : "", !today && selected ? "bg-ds-surface-3! text-ds-1! font-medium" : "", !today && !selected && isCurrentMonth ? "text-ds-2 hover:bg-ds-surface-3" : "", !today && !selected && !isCurrentMonth ? "text-ds-3 opacity-50" : ""),
+						children: day.getDate()
+					}, i);
+				})
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/data-display/event-calendar/types.ts
+var EVENT_LABEL_CONFIG = {
+	personal: {
+		display: "Personal",
+		color: "var(--ds-color-danger)",
+		bg: "var(--ds-color-danger-subtle)"
+	},
+	business: {
+		display: "Business",
+		color: "var(--ds-color-accent)",
+		bg: "var(--ds-color-accent-subtle)"
+	},
+	family: {
+		display: "Family",
+		color: "var(--ds-color-warning)",
+		bg: "var(--ds-color-warning-subtle)"
+	},
+	holiday: {
+		display: "Holiday",
+		color: "var(--ds-color-success)",
+		bg: "var(--ds-color-success-subtle)"
+	},
+	etc: {
+		display: "ETC",
+		color: "var(--ds-color-info)",
+		bg: "var(--ds-color-info-subtle)"
+	}
+};
+var ALL_LABELS = [
+	"personal",
+	"business",
+	"family",
+	"holiday",
+	"etc"
+];
+//#endregion
+//#region src/components/data-display/event-calendar/EventFilterList.tsx
+var LABEL_COLOR = {
+	personal: "red",
+	business: "primary",
+	family: "yellow",
+	holiday: "green",
+	etc: "teal"
+};
+var EventFilterList = ({ activeLabels, onChange }) => {
+	const allActive = activeLabels.length === ALL_LABELS.length;
+	const toggleAll = () => {
+		onChange(allActive ? [] : [...ALL_LABELS]);
+	};
+	const toggleLabel = (label) => {
+		if (activeLabels.includes(label)) onChange(activeLabels.filter((l) => l !== label));
+		else onChange([...activeLabels, label]);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2.5",
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			checked: allActive,
+			onChange: toggleAll,
+			label: "View all",
+			color: "primary"
+		}), ALL_LABELS.map((label) => {
+			const cfg = EVENT_LABEL_CONFIG[label];
+			return /* @__PURE__ */ jsx(Checkbox, {
+				checked: activeLabels.includes(label),
+				onChange: () => toggleLabel(label),
+				label: cfg.display,
+				color: LABEL_COLOR[label]
+			}, label);
+		})]
+	});
+};
+//#endregion
+//#region src/components/data-display/event-calendar/CalendarSidebar.tsx
+var CalendarSidebarContent = ({ currentDate, onDateChange, onMonthChange, activeLabels, onFiltersChange, onAddEvent }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col gap-5",
+	children: [
+		/* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			className: "w-full",
+			onClick: onAddEvent,
+			"aria-label": "Add new event",
+			children: "+ Add Event"
+		}),
+		/* @__PURE__ */ jsx(MiniCalendarPicker, {
+			currentDate,
+			onDateChange,
+			onMonthChange
+		}),
+		/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+			className: "mb-3 text-xs font-semibold uppercase tracking-wider text-ds-3",
+			children: "Event Filters"
+		}), /* @__PURE__ */ jsx(EventFilterList, {
+			activeLabels,
+			onChange: onFiltersChange
+		})] })
+	]
+});
+var CalendarSidebar = (props) => /* @__PURE__ */ jsx("aside", {
+	className: "hidden w-[280px] shrink-0 flex-col border-e border-ds-border-3 bg-ds-surface-1 p-4 lg:flex",
+	children: /* @__PURE__ */ jsx(CalendarSidebarContent, { ...props })
+});
+//#endregion
+//#region src/components/data-display/event-calendar/CalendarHeader.tsx
+var VIEWS = [
+	{
+		value: "month",
+		label: "Month"
+	},
+	{
+		value: "week",
+		label: "Week"
+	},
+	{
+		value: "day",
+		label: "Day"
+	},
+	{
+		value: "list",
+		label: "List"
+	}
+];
+function getTitle(view, date) {
+	if (view === "month" || view === "list") return formatMonthYear(date);
+	if (view === "week") return formatWeekRange(date);
+	return formatDayFull(date);
+}
+var ChevronLeft = () => /* @__PURE__ */ jsx("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" })
+});
+var ChevronRight = () => /* @__PURE__ */ jsx("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
+});
+var MenuIcon = () => /* @__PURE__ */ jsxs("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: [
+		/* @__PURE__ */ jsx("line", {
+			x1: "3",
+			y1: "6",
+			x2: "21",
+			y2: "6"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "3",
+			y1: "12",
+			x2: "21",
+			y2: "12"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "3",
+			y1: "18",
+			x2: "21",
+			y2: "18"
+		})
+	]
+});
+var CalendarHeader = ({ view, currentDate, onPrev, onNext, onViewChange, onSidebarToggle }) => /* @__PURE__ */ jsxs("header", {
+	className: "flex items-center justify-between border-b border-ds-border-3 bg-ds-surface-1 px-4 py-3",
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [
+			onSidebarToggle && /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "small",
+				className: "h-8 w-8 p-0! hover:opacity-100 lg:hidden",
+				"aria-label": "Toggle calendar sidebar",
+				onClick: onSidebarToggle,
+				children: /* @__PURE__ */ jsx(MenuIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "small",
+				className: "h-8 w-8 p-0! hover:opacity-100",
+				"aria-label": "Previous period",
+				onClick: onPrev,
+				children: /* @__PURE__ */ jsx(ChevronLeft, {})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "small",
+				className: "h-8 w-8 p-0! hover:opacity-100",
+				"aria-label": "Next period",
+				onClick: onNext,
+				children: /* @__PURE__ */ jsx(ChevronRight, {})
+			}),
+			/* @__PURE__ */ jsx("h2", {
+				className: "ms-1 text-base font-semibold text-ds-1",
+				children: getTitle(view, currentDate)
+			})
+		]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "flex rounded-lg border border-ds-border-2 bg-ds-surface-2 p-0.5",
+		role: "tablist",
+		"aria-label": "Calendar view",
+		children: VIEWS.map(({ value, label }) => /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			size: "small",
+			role: "tab",
+			"aria-selected": view === value,
+			onClick: () => onViewChange(value),
+			className: mergeClassNames("rounded-md px-3 py-1.5 text-xs font-medium hover:opacity-100", view === value ? "bg-ds-surface-1 text-ds-1 shadow-1" : "text-ds-3 hover:text-ds-2"),
+			children: label
+		}, value))
+	})]
+});
+//#endregion
+//#region src/components/data-display/event-calendar/EventPill.tsx
+var EventPill = ({ event, compact = false, onDoubleClick }) => {
+	const cfg = EVENT_LABEL_CONFIG[event.label];
+	const timeStr = event.allDay ? "All day" : `${formatTime(event.start)} – ${formatTime(event.end)}`;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "font-semibold leading-snug text-ds-1",
+					children: event.title
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "h-2 w-2 shrink-0 rounded-full",
+						style: { backgroundColor: cfg.color },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-ds-2",
+						children: cfg.display
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-ds-3",
+					children: formatDayFull(event.start)
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-ds-3",
+					children: timeStr
+				}),
+				event.location && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-ds-3",
+					children: event.location
+				})
+			]
+		}),
+		position: "top",
+		delayShow: 500,
+		wrapperClassName: "w-full min-w-0",
+		children: /* @__PURE__ */ jsx("div", {
+			className: `w-full min-w-0 cursor-pointer select-none rounded font-medium leading-none ${compact ? "px-1.5 py-1 text-[11px]" : "px-2 py-1.5 text-xs"}`,
+			style: {
+				backgroundColor: cfg.bg,
+				color: cfg.color
+			},
+			role: "button",
+			tabIndex: 0,
+			"aria-label": `${event.title} – ${cfg.display}`,
+			onClick: (e) => e.stopPropagation(),
+			onDoubleClick: (e) => {
+				e.stopPropagation();
+				onDoubleClick?.(event);
+			},
+			onKeyDown: (e) => {
+				if (e.key === "Enter") onDoubleClick?.(event);
+			},
+			children: /* @__PURE__ */ jsx(TruncatedText, {
+				showTitleOnHover: false,
+				children: event.title
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/data-display/event-calendar/views/MonthView.tsx
+var DAY_NAMES = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+var MonthView = ({ currentDate, events, onDayClick, onEventDoubleClick }) => {
+	const days = getMonthGridDays(currentDate);
+	const currentMonth = currentDate.getMonth();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 flex-col overflow-auto",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-7 border-b border-ds-border-3",
+			children: DAY_NAMES.map((name) => /* @__PURE__ */ jsx("div", {
+				className: "py-2 text-center text-xs font-medium uppercase tracking-wide text-ds-3",
+				children: name
+			}, name))
+		}), /* @__PURE__ */ jsx("div", {
+			className: "grid flex-1 grid-cols-7 grid-rows-6",
+			children: days.map((day, i) => {
+				const inMonth = day.getMonth() === currentMonth;
+				const today = isToday(day);
+				const dayEvents = getEventsForDay(events, day);
+				const visible = dayEvents.slice(0, 2);
+				const overflow = dayEvents.length - visible.length;
+				return /* @__PURE__ */ jsxs(Button, {
+					variant: "tertiary",
+					"aria-label": day.toDateString(),
+					onClick: () => onDayClick(day),
+					className: mergeClassNames("flex flex-col items-start gap-1 rounded-none border-b border-e border-ds-border-3 p-1.5 text-start hover:bg-ds-surface-2 hover:opacity-100", today ? "bg-ds-surface-2" : ""),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: mergeClassNames("self-end flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium leading-none", today ? "bg-ds-accent text-ds-on-accent font-bold" : inMonth ? "text-ds-2" : "text-ds-3 opacity-50"),
+						children: day.getDate()
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex w-full min-h-0 flex-col gap-0.5",
+						children: [visible.map((event) => /* @__PURE__ */ jsx(EventPill, {
+							event,
+							compact: true,
+							onDoubleClick: onEventDoubleClick
+						}, event.id)), overflow > 0 && /* @__PURE__ */ jsxs("span", {
+							className: "px-1 text-[10px] text-ds-3",
+							children: [
+								"+",
+								overflow,
+								" more"
+							]
+						})]
+					})]
+				}, i);
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/components/data-display/event-calendar/views/WeekView.tsx
+var HOURS$1 = Array.from({ length: 16 }, (_, i) => 6 + i);
+var DAY_ABBR = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+var WeekView = ({ currentDate, events, onEventDoubleClick }) => {
+	const weekDays = getWeekDays(currentDate);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col flex-1 overflow-hidden",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid border-b border-ds-border-3",
+				style: { gridTemplateColumns: "56px repeat(7, 1fr)" },
+				children: [/* @__PURE__ */ jsx("div", { className: "border-e border-ds-border-3" }), weekDays.map((day) => {
+					const today = isToday(day);
+					return /* @__PURE__ */ jsxs("div", {
+						className: mergeClassNames("flex flex-col items-center py-2 text-xs font-medium border-e border-ds-border-3 last:border-e-0", today ? "bg-ds-accent-subtle/30 text-ds-accent" : "text-ds-3"),
+						children: [/* @__PURE__ */ jsx("span", { children: DAY_ABBR[day.getDay()] }), /* @__PURE__ */ jsx("span", {
+							className: mergeClassNames("mt-0.5 flex h-6 w-6 items-center justify-center rounded-full font-semibold", today ? "bg-ds-accent text-ds-on-accent" : "text-ds-2"),
+							children: formatShortDate(day).split("/")[1]
+						})]
+					}, day.toISOString());
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid border-b border-ds-border-3",
+				style: {
+					gridTemplateColumns: "56px repeat(7, 1fr)",
+					minHeight: 40
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-end pe-2 text-[10px] text-ds-3 border-e border-ds-border-3",
+					children: "All-day"
+				}), weekDays.map((day) => {
+					return /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-0.5 p-0.5 border-e border-ds-border-3 last:border-e-0",
+						children: getEventsForDay(events, day).filter((e) => e.allDay).map((e) => /* @__PURE__ */ jsx(EventPill, {
+							event: e,
+							compact: true,
+							onDoubleClick: onEventDoubleClick
+						}, e.id))
+					}, day.toISOString());
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "grid relative",
+					style: {
+						gridTemplateColumns: "56px repeat(7, 1fr)",
+						height: HOURS$1.length * 80
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "relative border-e border-ds-border-3",
+						children: HOURS$1.map((h) => /* @__PURE__ */ jsx("div", {
+							className: "absolute w-full flex justify-end pe-2",
+							style: { top: (h - 6) * 80 - 8 },
+							children: /* @__PURE__ */ jsx("span", {
+								className: "text-[10px] text-ds-3",
+								children: formatHour(h)
+							})
+						}, h))
+					}), weekDays.map((day) => {
+						const today = isToday(day);
+						const timedEvents = getEventsForDay(events, day).filter((e) => !e.allDay);
+						return /* @__PURE__ */ jsxs("div", {
+							className: mergeClassNames("relative border-e border-ds-border-3 last:border-e-0", today ? "bg-ds-accent-subtle/20" : ""),
+							children: [HOURS$1.map((h) => /* @__PURE__ */ jsx("div", {
+								className: "border-t border-ds-border-3/50",
+								style: { height: 80 }
+							}, h)), timedEvents.map((event) => {
+								const cfg = EVENT_LABEL_CONFIG[event.label];
+								return /* @__PURE__ */ jsx("div", {
+									className: "absolute inset-x-0.5 cursor-pointer overflow-hidden rounded px-1.5 py-1 text-xs font-medium leading-tight select-none",
+									style: {
+										top: getEventTopPx(event),
+										height: getEventHeightPx(event),
+										backgroundColor: cfg.bg,
+										color: cfg.color
+									},
+									title: event.title,
+									onDoubleClick: () => onEventDoubleClick?.(event),
+									children: event.title
+								}, event.id);
+							})]
+						}, day.toISOString());
+					})]
+				})
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/data-display/event-calendar/views/DayView.tsx
+var HOURS = Array.from({ length: 16 }, (_, i) => 6 + i);
+var DayView = ({ currentDate, events, onEventDoubleClick }) => {
+	const dayName = currentDate.toLocaleDateString("en-US", { weekday: "long" });
+	const allDayEvents = getEventsForDay(events, currentDate).filter((e) => e.allDay);
+	const timedEvents = getEventsForDay(events, currentDate).filter((e) => !e.allDay);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col flex-1 overflow-hidden",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid border-b border-ds-border-3",
+				style: { gridTemplateColumns: "56px 1fr" },
+				children: [/* @__PURE__ */ jsx("div", { className: "border-e border-ds-border-3" }), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center py-2 text-xs font-medium text-ds-accent bg-ds-accent-subtle/30",
+					children: [/* @__PURE__ */ jsx("span", { children: dayName }), /* @__PURE__ */ jsx("span", {
+						className: "mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-ds-accent text-ds-on-accent font-semibold",
+						children: currentDate.getDate()
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid border-b border-ds-border-3",
+				style: {
+					gridTemplateColumns: "56px 1fr",
+					minHeight: 40
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-end pe-2 text-[10px] text-ds-3 border-e border-ds-border-3",
+					children: "All-day"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-0.5 p-1",
+					children: allDayEvents.map((e) => /* @__PURE__ */ jsx("div", {
+						className: "cursor-pointer truncate rounded px-2 py-1 text-xs font-medium select-none",
+						style: {
+							backgroundColor: EVENT_LABEL_CONFIG[e.label].bg,
+							color: EVENT_LABEL_CONFIG[e.label].color
+						},
+						title: e.title,
+						onDoubleClick: () => onEventDoubleClick?.(e),
+						children: e.title
+					}, e.id))
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "grid relative",
+					style: {
+						gridTemplateColumns: "56px 1fr",
+						height: HOURS.length * 80
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "relative border-e border-ds-border-3",
+						children: HOURS.map((h) => /* @__PURE__ */ jsx("div", {
+							className: "absolute w-full flex justify-end pe-2",
+							style: { top: (h - 6) * 80 - 8 },
+							children: /* @__PURE__ */ jsx("span", {
+								className: "text-[10px] text-ds-3",
+								children: formatHour(h)
+							})
+						}, h))
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "relative bg-ds-accent-subtle/20",
+						children: [HOURS.map((h) => /* @__PURE__ */ jsx("div", {
+							className: "border-t border-ds-border-3/50",
+							style: { height: 80 }
+						}, h)), timedEvents.map((event) => {
+							const cfg = EVENT_LABEL_CONFIG[event.label];
+							return /* @__PURE__ */ jsx("div", {
+								className: "absolute inset-x-1 cursor-pointer overflow-hidden rounded px-2 py-1 text-xs font-medium leading-tight select-none",
+								style: {
+									top: getEventTopPx(event),
+									height: getEventHeightPx(event),
+									backgroundColor: cfg.bg,
+									color: cfg.color
+								},
+								title: event.title,
+								onDoubleClick: () => onEventDoubleClick?.(event),
+								children: event.title
+							}, event.id);
+						})]
+					})]
+				})
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/data-display/event-calendar/views/ListView.tsx
+var ListView = ({ currentDate, events, onEventDoubleClick }) => {
+	const monthStart = startOfMonth(currentDate);
+	const monthEnd = endOfMonth(currentDate);
+	const monthEvents = events.filter((e) => e.start <= monthEnd && e.end >= monthStart).sort((a, b) => a.start.getTime() - b.start.getTime());
+	const groups = [];
+	for (const event of monthEvents) {
+		const existing = groups.find((g) => isSameDay(g.day, event.start));
+		if (existing) existing.events.push(event);
+		else groups.push({
+			day: event.start,
+			events: [event]
+		});
+	}
+	if (groups.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-1 items-center justify-center text-sm text-ds-3",
+		children: "No events this month"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex-1 overflow-y-auto",
+		children: groups.map(({ day, events: dayEvents }) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between bg-ds-surface-2 px-4 py-2 border-b border-ds-border-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-semibold text-ds-1",
+				children: formatListDate(day)
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium text-ds-3",
+				children: formatListDayName(day)
+			})]
+		}), dayEvents.map((event) => {
+			const cfg = EVENT_LABEL_CONFIG[event.label];
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex cursor-pointer select-none items-center gap-3 border-b border-ds-border-3 px-4 py-3 transition-colors hover:bg-ds-surface-2",
+				onDoubleClick: () => onEventDoubleClick?.(event),
+				title: "Double-click to view details",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "w-28 shrink-0 text-xs text-ds-3",
+						children: event.allDay ? "all-day" : `${formatTime(event.start)}–${formatTime(event.end)}`
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "h-2 w-2 shrink-0 rounded-full",
+						style: { backgroundColor: cfg.color },
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate text-sm text-ds-1",
+						children: event.title
+					})
+				]
+			}, event.id);
+		})] }, day.toISOString()))
+	});
+};
+//#endregion
+//#region src/components/data-display/event-calendar/AddEventPanel.tsx
+function toDateInput(d) {
+	return d.toISOString().split("T")[0] ?? "";
+}
+var labelOptions = ALL_LABELS.map((l) => ({
+	value: l,
+	label: EVENT_LABEL_CONFIG[l].display
+}));
+var AddEventPanel = ({ isOpen, onClose, onSubmit, initialDate }) => {
+	const [title, setTitle] = useState("");
+	const [label, setLabel] = useState("personal");
+	const [startDate, setStartDate] = useState("");
+	const [endDate, setEndDate] = useState("");
+	const [allDay, setAllDay] = useState(true);
+	const [url, setUrl] = useState("");
+	const [guests, setGuests] = useState("");
+	const [location, setLocation] = useState("");
+	const [description, setDescription] = useState("");
+	useEffect(() => {
+		if (isOpen) {
+			const today = initialDate ?? /* @__PURE__ */ new Date();
+			setTitle("");
+			setLabel("personal");
+			setStartDate(toDateInput(today));
+			setEndDate(toDateInput(today));
+			setAllDay(true);
+			setUrl("");
+			setGuests("");
+			setLocation("");
+			setDescription("");
+		}
+	}, [isOpen, initialDate]);
+	const handleSubmit = () => {
+		if (!title.trim()) return;
+		const start = new Date(startDate);
+		const end = new Date(endDate);
+		end.setHours(23, 59, 59, 999);
+		onSubmit({
+			id: generateId(),
+			title: title.trim(),
+			start,
+			end,
+			allDay,
+			label,
+			url: url.trim() || void 0,
+			guests: guests.trim() || void 0,
+			location: location.trim() || void 0,
+			description: description.trim() || void 0
+		});
+	};
+	return /* @__PURE__ */ jsx(Drawer, {
+		open: isOpen,
+		onOpenChange: (o) => {
+			if (!o) onClose();
+		},
+		title: "Add Event",
+		position: "right",
+		footer: /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				className: "flex-1",
+				onClick: handleSubmit,
+				disabled: !title.trim(),
+				children: "Submit"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				onClick: onClose,
+				children: "Cancel"
+			})]
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-xs font-medium text-ds-2",
+						children: "Title"
+					}), /* @__PURE__ */ jsx(Input, {
+						placeholder: "Meeting with Jane",
+						value: title,
+						onChange: (e) => setTitle(e.target.value)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-xs font-medium text-ds-2",
+						children: "Label"
+					}), /* @__PURE__ */ jsx(Select, {
+						options: labelOptions,
+						value: label,
+						onChange: (e) => setLabel(e.target.value),
+						placeholder: "Select Event Label"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 gap-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1.5",
+						children: [/* @__PURE__ */ jsx("label", {
+							className: "text-xs font-medium text-ds-2",
+							children: "Start date"
+						}), /* @__PURE__ */ jsx(Input, {
+							type: "date",
+							value: startDate,
+							onChange: (e) => setStartDate(e.target.value)
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1.5",
+						children: [/* @__PURE__ */ jsx("label", {
+							className: "text-xs font-medium text-ds-2",
+							children: "End date"
+						}), /* @__PURE__ */ jsx(Input, {
+							type: "date",
+							value: endDate,
+							onChange: (e) => setEndDate(e.target.value)
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-xs font-medium text-ds-2",
+						children: "All day"
+					}), /* @__PURE__ */ jsx(Switch, {
+						checked: allDay,
+						onChange: (e) => setAllDay(e.target.checked),
+						"aria-label": "All day event"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-xs font-medium text-ds-2",
+						children: "Event URL"
+					}), /* @__PURE__ */ jsx(Input, {
+						placeholder: "https://event.com/meeting",
+						value: url,
+						onChange: (e) => setUrl(e.target.value)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-xs font-medium text-ds-2",
+						children: "Guests"
+					}), /* @__PURE__ */ jsx(Input, {
+						placeholder: "Select guests",
+						value: guests,
+						onChange: (e) => setGuests(e.target.value)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-xs font-medium text-ds-2",
+						children: "Location"
+					}), /* @__PURE__ */ jsx(Input, {
+						placeholder: "Meeting room",
+						value: location,
+						onChange: (e) => setLocation(e.target.value)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-xs font-medium text-ds-2",
+						children: "Description"
+					}), /* @__PURE__ */ jsx(Textarea, {
+						placeholder: "Add description",
+						value: description,
+						onChange: (e) => setDescription(e.target.value),
+						className: "h-24 resize-none"
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+//#region src/components/data-display/event-calendar/EventDetailDrawer.tsx
+var EventDetailDrawer = ({ event, open, onClose }) => {
+	if (!event) return null;
+	const cfg = EVENT_LABEL_CONFIG[event.label];
+	const timeStr = event.allDay ? "All day" : `${formatTime(event.start)} – ${formatTime(event.end)}`;
+	return /* @__PURE__ */ jsx(Drawer, {
+		open,
+		onOpenChange: (o) => {
+			if (!o) onClose();
+		},
+		title: event.title,
+		position: "right",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-5",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "inline-flex w-fit items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",
+					style: {
+						backgroundColor: cfg.bg,
+						color: cfg.color
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "h-1.5 w-1.5 rounded-full",
+						style: { backgroundColor: cfg.color },
+						"aria-hidden": "true"
+					}), cfg.display]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-semibold uppercase tracking-wider text-ds-3",
+						children: "Date"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-ds-1",
+						children: formatDayFull(event.start)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-semibold uppercase tracking-wider text-ds-3",
+						children: "Time"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-ds-1",
+						children: timeStr
+					})]
+				}),
+				event.location && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-semibold uppercase tracking-wider text-ds-3",
+						children: "Location"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-ds-1",
+						children: event.location
+					})]
+				}),
+				event.guests && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-semibold uppercase tracking-wider text-ds-3",
+						children: "Guests"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-ds-1",
+						children: event.guests
+					})]
+				}),
+				event.url && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-semibold uppercase tracking-wider text-ds-3",
+						children: "Event URL"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "break-all text-sm text-ds-accent",
+						children: event.url
+					})]
+				}),
+				event.description && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-semibold uppercase tracking-wider text-ds-3",
+						children: "Description"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm leading-relaxed text-ds-2",
+						children: event.description
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+//#region src/components/data-display/event-calendar/EventCalendar.tsx
+var EventCalendar = ({ initialEvents = [], initialView = "month", initialDate, onEventAdd, className }) => {
+	const [view, setView] = useState(initialView);
+	const [currentDate, setCurrentDate] = useState(initialDate ?? /* @__PURE__ */ new Date());
+	const [events, setEvents] = useState(initialEvents);
+	const [activeLabels, setActiveLabels] = useState([...ALL_LABELS]);
+	const [isAddPanelOpen, setIsAddPanelOpen] = useState(false);
+	const [isSidebarDrawerOpen, setIsSidebarDrawerOpen] = useState(false);
+	const [selectedEvent, setSelectedEvent] = useState(null);
+	const [isEventDrawerOpen, setIsEventDrawerOpen] = useState(false);
+	const handlePrev = () => {
+		if (view === "month" || view === "list") setCurrentDate((d) => addMonths(d, -1));
+		else if (view === "week") setCurrentDate((d) => addWeeks(d, -1));
+		else setCurrentDate((d) => addDays(d, -1));
+	};
+	const handleNext = () => {
+		if (view === "month" || view === "list") setCurrentDate((d) => addMonths(d, 1));
+		else if (view === "week") setCurrentDate((d) => addWeeks(d, 1));
+		else setCurrentDate((d) => addDays(d, 1));
+	};
+	const handleEventSubmit = (event) => {
+		setEvents((prev) => [...prev, event]);
+		onEventAdd?.(event);
+		setIsAddPanelOpen(false);
+	};
+	const handleEventDoubleClick = (event) => {
+		setSelectedEvent(event);
+		setIsEventDrawerOpen(true);
+	};
+	const filteredEvents = events.filter((e) => activeLabels.includes(e.label));
+	const handleDayClick = (day) => {
+		setCurrentDate(day);
+		setView("day");
+	};
+	const sidebarProps = {
+		currentDate,
+		onDateChange: (d) => setCurrentDate(d),
+		onMonthChange: (d) => setCurrentDate(d),
+		activeLabels,
+		onFiltersChange: setActiveLabels,
+		onAddEvent: () => {
+			setIsSidebarDrawerOpen(false);
+			setIsAddPanelOpen(true);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeClassNames("flex h-full overflow-hidden rounded-xl border border-ds-border-3 bg-ds-surface-1", className),
+		children: [
+			/* @__PURE__ */ jsx(CalendarSidebar, { ...sidebarProps }),
+			/* @__PURE__ */ jsx(Drawer, {
+				open: isSidebarDrawerOpen,
+				onOpenChange: setIsSidebarDrawerOpen,
+				title: "Calendar",
+				position: "left",
+				children: /* @__PURE__ */ jsx(CalendarSidebarContent, { ...sidebarProps })
+			}),
+			/* @__PURE__ */ jsxs("main", {
+				className: "flex flex-1 flex-col overflow-hidden",
+				children: [
+					/* @__PURE__ */ jsx(CalendarHeader, {
+						view,
+						currentDate,
+						onPrev: handlePrev,
+						onNext: handleNext,
+						onViewChange: setView,
+						onSidebarToggle: () => setIsSidebarDrawerOpen(true)
+					}),
+					view === "month" && /* @__PURE__ */ jsx(MonthView, {
+						currentDate,
+						events: filteredEvents,
+						onDayClick: handleDayClick,
+						onEventDoubleClick: handleEventDoubleClick
+					}),
+					view === "week" && /* @__PURE__ */ jsx(WeekView, {
+						currentDate,
+						events: filteredEvents,
+						onEventDoubleClick: handleEventDoubleClick
+					}),
+					view === "day" && /* @__PURE__ */ jsx(DayView, {
+						currentDate,
+						events: filteredEvents,
+						onEventDoubleClick: handleEventDoubleClick
+					}),
+					view === "list" && /* @__PURE__ */ jsx(ListView, {
+						currentDate,
+						events: filteredEvents,
+						onEventDoubleClick: handleEventDoubleClick
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(AddEventPanel, {
+				isOpen: isAddPanelOpen,
+				onClose: () => setIsAddPanelOpen(false),
+				onSubmit: handleEventSubmit,
+				initialDate: currentDate
+			}),
+			/* @__PURE__ */ jsx(EventDetailDrawer, {
+				event: selectedEvent,
+				open: isEventDrawerOpen,
+				onClose: () => setIsEventDrawerOpen(false)
+			})
+		]
+	});
+};
+//#endregion
+export { ALL_LABELS as n, EVENT_LABEL_CONFIG as r, EventCalendar as t };
+
+//# sourceMappingURL=event-calendar-CO2doGJW.mjs.map