beautify-event 1.0.0

package/dist/index.mjs

@@ -0,0 +1,2130 @@
+import * as React2 from 'react';
+import { createContext, useContext, useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Calendar, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Loader2Icon } from 'lucide-react';
+import { DndContext, pointerWithin, useDraggable, useDroppable, DragOverlay } from '@dnd-kit/core';
+import { format, startOfWeek, startOfMonth, endOfWeek, endOfMonth, eachDayOfInterval, startOfDay, endOfDay, isWithinInterval, isSameDay, addDays, subDays, addWeeks, subWeeks, addMonths, subMonths, setMinutes, setHours, isSameMonth, getHours, getMinutes, differenceInMinutes, addMinutes } from 'date-fns';
+import { enUS, ar, fr } from 'date-fns/locale';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import '@radix-ui/react-toggle';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Card(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )
+    }, props)
+  );
+}
+function Spinner(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    Loader2Icon,
+    __spreadValues({
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className)
+    }, props)
+  );
+}
+function useSystemTheme() {
+  const [systemTheme, setSystemTheme] = React2.useState("light");
+  React2.useEffect(() => {
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => setSystemTheme(mq.matches ? "dark" : "light");
+    handler();
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return systemTheme;
+}
+function normalizeThemeVars(vars) {
+  if (!vars || Object.keys(vars).length === 0) return {};
+  return Object.fromEntries(
+    Object.entries(vars).map(([key, value]) => [
+      key.startsWith("--") ? key : `--${key}`,
+      value
+    ])
+  );
+}
+function EventCalendarThemeProvider({
+  theme = "system",
+  themeVars,
+  children
+}) {
+  const systemTheme = useSystemTheme();
+  const resolvedTheme = theme === "system" ? systemTheme : theme;
+  const isDark = resolvedTheme === "dark";
+  const customStyle = normalizeThemeVars(themeVars);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `event-calendar-root ${isDark ? "dark" : ""}`,
+      "data-event-calendar-theme": resolvedTheme,
+      style: customStyle,
+      children
+    }
+  );
+}
+var LOCALE_MAP = {
+  en: enUS,
+  "en-US": enUS,
+  fr,
+  ar
+};
+function getDateFnsLocale(localeCode) {
+  var _a;
+  return (_a = LOCALE_MAP[localeCode]) != null ? _a : enUS;
+}
+function formatDate(date, formatStr, localeCode = "en-US") {
+  const locale = getDateFnsLocale(localeCode);
+  return format(date, formatStr, { locale });
+}
+function getMonthDays(date, weekStartsOn = 0) {
+  const start = startOfWeek(startOfMonth(date), { weekStartsOn });
+  const end = endOfWeek(endOfMonth(date), { weekStartsOn });
+  return eachDayOfInterval({ start, end });
+}
+function getWeekDays(date, weekStartsOn = 0) {
+  const start = startOfWeek(date, { weekStartsOn });
+  const end = endOfWeek(date, { weekStartsOn });
+  return eachDayOfInterval({ start, end });
+}
+function getTwoDays(date, _weekStartsOn = 0) {
+  const start = startOfDay(date);
+  return [start, addDays(start, 1)];
+}
+function getEventsForDay(events, day) {
+  return events.filter((event) => {
+    const eventStart = startOfDay(event.start);
+    const eventEnd = endOfDay(event.end);
+    return isWithinInterval(day, { start: eventStart, end: eventEnd }) || isSameDay(event.start, day) || isSameDay(event.end, day);
+  });
+}
+function navigateDate(date, view, direction) {
+  switch (view) {
+    case "month":
+      return direction === "next" ? addMonths(date, 1) : subMonths(date, 1);
+    case "week":
+    case "resource":
+      return direction === "next" ? addWeeks(date, 1) : subWeeks(date, 1);
+    case "day":
+      return direction === "next" ? addDays(date, 1) : subDays(date, 1);
+    case "2day":
+      return direction === "next" ? addDays(date, 2) : subDays(date, 2);
+    default:
+      return date;
+  }
+}
+function getViewTitle(date, view, weekStartsOn = 0, localeCode = "en-US") {
+  const locale = getDateFnsLocale(localeCode);
+  const fmt = (d, str) => format(d, str, { locale });
+  switch (view) {
+    case "month":
+      return fmt(date, "MMMM yyyy");
+    case "week":
+    case "resource": {
+      const weekStart = startOfWeek(date, { weekStartsOn });
+      const weekEnd = endOfWeek(date, { weekStartsOn });
+      return `${fmt(weekStart, "MMM d")} - ${fmt(weekEnd, "MMM d, yyyy")}`;
+    }
+    case "day":
+      return fmt(date, "EEEE, MMMM d, yyyy");
+    case "2day": {
+      const days = getTwoDays(date, weekStartsOn);
+      return `${fmt(days[0], "MMM d")} \u2013 ${fmt(days[1], "MMM d, yyyy")}`;
+    }
+    default:
+      return fmt(date, "MMMM yyyy");
+  }
+}
+function getViewDateRange(date, view, weekStartsOn = 0) {
+  switch (view) {
+    case "month":
+      return {
+        start: startOfWeek(startOfMonth(date), { weekStartsOn }),
+        end: endOfWeek(endOfMonth(date), { weekStartsOn })
+      };
+    case "week":
+    case "resource":
+      return {
+        start: startOfWeek(date, { weekStartsOn }),
+        end: endOfWeek(date, { weekStartsOn })
+      };
+    case "day":
+      return {
+        start: startOfDay(date),
+        end: endOfDay(date)
+      };
+    case "2day": {
+      const days = getTwoDays(date, weekStartsOn);
+      return {
+        start: startOfDay(days[0]),
+        end: endOfDay(days[1])
+      };
+    }
+    default:
+      return {
+        start: startOfMonth(date),
+        end: endOfMonth(date)
+      };
+  }
+}
+function getEventPosition(event, hourHeight = 64, startHour = 0) {
+  const eventStartHour = getHours(event.start);
+  const eventStartMinutes = getMinutes(event.start);
+  const startMinutes = (eventStartHour - startHour) * 60 + eventStartMinutes;
+  const duration = differenceInMinutes(event.end, event.start);
+  const top = startMinutes / 60 * hourHeight;
+  const height = Math.max(duration / 60 * hourHeight, 24);
+  return { top: Math.max(top, 0), height };
+}
+function createSlotDate(day, hour, minute = 0) {
+  return setMinutes(setHours(day, hour), minute);
+}
+function getWeekdayNames(weekStartsOn = 0, short = true, localeCode = "en-US") {
+  const locale = getDateFnsLocale(localeCode);
+  const baseDate = new Date(2024, 0, 7);
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const dayIndex = (weekStartsOn + i) % 7;
+    const date = addDays(baseDate, dayIndex);
+    days.push(format(date, short ? "EEE" : "EEEE", { locale }));
+  }
+  return days;
+}
+function getHoursArray(startHour = 0, endHour = 24) {
+  const hours = [];
+  for (let i = startHour; i < endHour; i++) {
+    hours.push(i);
+  }
+  return hours;
+}
+function getCurrentTimeLineTop(now, startHour, endHour, hourHeight, topPadding = 16) {
+  const currentHour = getHours(now);
+  const currentMinute = getMinutes(now);
+  const currentTimeInHours = currentHour + currentMinute / 60;
+  if (currentTimeInHours < startHour || currentTimeInHours >= endHour) return null;
+  const top = topPadding + (currentTimeInHours - startHour) * hourHeight;
+  return top;
+}
+function formatHour(hour, timeFormat = "12h", localeCode = "en-US") {
+  if (timeFormat === "24h") {
+    return `${hour.toString().padStart(2, "0")}:00`;
+  }
+  const locale = getDateFnsLocale(localeCode);
+  const d = new Date(2e3, 0, 1, hour, 0, 0);
+  return format(d, "h a", { locale });
+}
+var defaultConfig = {
+  weekStartsOn: 0,
+  startHour: 0,
+  // 12:00 AM - full day start
+  endHour: 24,
+  // 11:59 PM - full day end
+  hourHeight: 64,
+  timeSeriesMaxHeight: 400,
+  showCurrentTimeLine: true,
+  maxEventsPerDay: 3,
+  defaultEventColor: "#3b82f6",
+  defaultResourceColor: "#6366f1",
+  locale: "en-US",
+  timeFormat: "12h"
+};
+
+// components/event-calendar/dnd/helpers.ts
+function slotDataToSlotInfo(data, endHour) {
+  switch (data.view) {
+    case "day":
+    case "week": {
+      const start = createSlotDate(data.day, data.hour);
+      const end = createSlotDate(data.day, data.hour + 1);
+      return { start, end };
+    }
+    case "month": {
+      const start = startOfDay(data.day);
+      const end = endOfDay(data.day);
+      return { start, end };
+    }
+    case "resource": {
+      const start = createSlotDate(data.day, data.hour);
+      const end = createSlotDate(data.day, data.hour + 1);
+      return { start, end, resourceId: data.resourceId };
+    }
+  }
+}
+function computeCreateSlotInfo(from, to) {
+  if (from.view === "month" && to.view === "month") {
+    const start = startOfDay(to.day);
+    const end = endOfDay(to.day);
+    return { start, end };
+  }
+  if ((from.view === "day" || from.view === "week") && (to.view === "day" || to.view === "week")) {
+    const startDate = from.day.getTime() < to.day.getTime() ? from.day : to.day;
+    const endDate = from.day.getTime() < to.day.getTime() ? to.day : from.day;
+    const startHour = from.day.getTime() === startDate.getTime() ? from.hour : to.hour;
+    const endHour = from.day.getTime() === endDate.getTime() ? from.hour : to.hour;
+    const start = createSlotDate(startDate, Math.min(startHour, endHour));
+    const end = createSlotDate(endDate, Math.max(startHour, endHour) + 1);
+    return { start, end };
+  }
+  if (from.view === "resource" && to.view === "resource" && from.resourceId === to.resourceId) {
+    const startDate = from.day.getTime() < to.day.getTime() ? from.day : to.day;
+    const endDate = from.day.getTime() < to.day.getTime() ? to.day : from.day;
+    const startHour = from.day.getTime() === startDate.getTime() ? from.hour : to.hour;
+    const endHour = from.day.getTime() === endDate.getTime() ? from.hour : to.hour;
+    const start = createSlotDate(startDate, Math.min(startHour, endHour));
+    const end = createSlotDate(endDate, Math.max(startHour, endHour) + 1);
+    return { start, end, resourceId: from.resourceId };
+  }
+  return slotDataToSlotInfo(to);
+}
+function computeMoveEvent(event, dropData) {
+  const duration = differenceInMinutes(event.end, event.start);
+  switch (dropData.view) {
+    case "day":
+    case "week": {
+      const newStart = createSlotDate(dropData.day, dropData.hour);
+      const newEnd = addMinutes(newStart, duration);
+      return { newStart, newEnd };
+    }
+    case "month": {
+      const newStart = setMinutes(
+        setHours(dropData.day, event.start.getHours()),
+        event.start.getMinutes()
+      );
+      const newEnd = addMinutes(newStart, duration);
+      return { newStart, newEnd };
+    }
+    case "resource": {
+      const newStart = createSlotDate(dropData.day, dropData.hour);
+      const newEnd = addMinutes(newStart, duration);
+      return { newStart, newEnd, resourceId: dropData.resourceId };
+    }
+  }
+}
+function CalendarDragOverlay({
+  activeEvent,
+  activeCreateSlotInfo,
+  defaultEventColor,
+  locale = "en-US",
+  renderEvent
+}) {
+  return /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: activeEvent ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border bg-card px-3 py-2 shadow-lg opacity-90", children: renderEvent ? renderEvent(activeEvent, "day") : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "font-semibold text-sm",
+        style: {
+          color: activeEvent.color || defaultEventColor
+        },
+        children: activeEvent.title
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground mt-0.5", children: [
+      formatDate(activeEvent.start, "h:mm a", locale),
+      " -",
+      " ",
+      formatDate(activeEvent.end, "h:mm a", locale)
+    ] })
+  ] }) }) : activeCreateSlotInfo ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border-2 border-dashed border-primary/50 bg-primary/10 px-3 py-2 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-primary", children: [
+    formatDate(activeCreateSlotInfo.start, "h:mm a", locale),
+    " -",
+    " ",
+    formatDate(activeCreateSlotInfo.end, "h:mm a", locale)
+  ] }) }) : null });
+}
+function EventCalendarDndProvider({
+  enableDragToCreate = false,
+  enableDragToMove = false,
+  onEventCreate,
+  onEventMove,
+  defaultEventColor,
+  locale = "en-US",
+  renderEvent,
+  children
+}) {
+  const [activeEvent, setActiveEvent] = React2.useState(null);
+  const [activeCreateSlotInfo, setActiveCreateSlotInfo] = React2.useState(null);
+  const handleDragStart = React2.useCallback(
+    (event) => {
+      const data = event.active.data.current;
+      if (!data) return;
+      if (typeof data !== "object" || data === null) return;
+      if ("event" in data && data.event) {
+        setActiveEvent(data.event);
+      } else if ("slotData" in data && data.slotData) {
+        const slotData = data.slotData;
+        const info = slotDataToSlotInfo(slotData);
+        setActiveCreateSlotInfo({ start: info.start, end: info.end });
+      }
+    },
+    []
+  );
+  const handleDragEnd = React2.useCallback(
+    (event) => {
+      var _a;
+      const activeData = event.active.data.current;
+      const overData = (_a = event.over) == null ? void 0 : _a.data.current;
+      setActiveEvent(null);
+      setActiveCreateSlotInfo(null);
+      if (!overData || typeof overData !== "object") return;
+      const overSlot = overData;
+      if (activeData && typeof activeData === "object" && "event" in activeData && enableDragToMove && onEventMove) {
+        const eventData = activeData.event;
+        const { newStart, newEnd, resourceId } = computeMoveEvent(
+          eventData,
+          overSlot
+        );
+        onEventMove({ event: eventData, newStart, newEnd, resourceId });
+      } else if (activeData && typeof activeData === "object" && "slotData" in activeData && enableDragToCreate && onEventCreate) {
+        const fromSlot = activeData.slotData;
+        const slotInfo = computeCreateSlotInfo(fromSlot, overSlot);
+        onEventCreate(slotInfo);
+      }
+    },
+    [enableDragToCreate, enableDragToMove, onEventCreate, onEventMove]
+  );
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      collisionDetection: pointerWithin,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          CalendarDragOverlay,
+          {
+            activeEvent,
+            activeCreateSlotInfo,
+            defaultEventColor,
+            locale,
+            renderEvent
+          }
+        )
+      ]
+    }
+  );
+}
+var BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024
+};
+function useMediaQuery(breakpoint) {
+  const query = `(max-width: ${BREAKPOINTS[breakpoint] - 1}px)`;
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+    const listener = (e) => setMatches(e.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+  return matches;
+}
+var CalendarContext = createContext(null);
+function useCalendar() {
+  const context = useContext(CalendarContext);
+  if (!context) {
+    throw new Error("useCalendar must be used within an EventCalendar");
+  }
+  return context;
+}
+function CalendarProvider({
+  children,
+  value
+}) {
+  return /* @__PURE__ */ jsx(CalendarContext.Provider, { value, children });
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        icon: "size-9",
+        "icon-sm": "size-8"
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "default"
+    }
+  }
+);
+function Button(_a) {
+  var _b = _a, {
+    className,
+    variant,
+    size,
+    asChild = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant",
+    "size",
+    "asChild"
+  ]);
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    __spreadValues({
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className }))
+    }, props)
+  );
+}
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var ToggleGroupContext = React2.createContext({
+  size: "default",
+  variant: "default"
+});
+function ToggleGroup(_a) {
+  var _b = _a, {
+    className,
+    variant,
+    size,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant",
+    "size",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    __spreadProps(__spreadValues({
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    })
+  );
+}
+function ToggleGroupItem(_a) {
+  var _b = _a, {
+    className,
+    children,
+    variant,
+    size
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "variant",
+    "size"
+  ]);
+  var _a2, _b2, _c, _d;
+  const context = React2.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    __spreadProps(__spreadValues({
+      "data-slot": "toggle-group-item",
+      "data-variant": (_a2 = context.variant) != null ? _a2 : variant,
+      "data-size": (_b2 = context.size) != null ? _b2 : size,
+      className: cn(
+        toggleVariants({
+          variant: (_c = context.variant) != null ? _c : variant,
+          size: (_d = context.size) != null ? _d : size
+        }),
+        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+}
+function MobileWeekStrip({
+  selectedDate,
+  onDaySelect,
+  onPrevWeek,
+  onNextWeek,
+  weekStartsOn = 0,
+  locale = "en-US",
+  className
+}) {
+  const days = getWeekDays(selectedDate, weekStartsOn);
+  const today = /* @__PURE__ */ new Date();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-0.5", className), children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        onClick: onPrevWeek,
+        className: "h-7 w-7 shrink-0",
+        "aria-label": "Previous week",
+        children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-between gap-0 min-w-0 overflow-visible", children: days.map((day) => {
+      const isToday = isSameDay(day, today);
+      const isSelected = isSameDay(day, selectedDate);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onDaySelect(day),
+          className: cn(
+            "flex flex-col items-center justify-center min-w-[32px] flex-1 py-1 px-0.5 text-[11px] font-medium transition-colors overflow-visible",
+            !isToday && !isSelected && "text-muted-foreground hover:text-foreground",
+            isToday && !isSelected && "text-primary font-semibold",
+            isSelected && "text-primary-foreground font-semibold"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-[9px] uppercase leading-tight",
+                  isSelected ? "text-primary-foreground" : "text-inherit opacity-80"
+                ),
+                children: formatDate(day, "EEE", locale)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "mt-0.5 w-6 h-6 shrink-0 flex items-center justify-center rounded-full text-[11px] font-semibold tabular-nums",
+                  isSelected && "bg-primary text-primary-foreground",
+                  isToday && !isSelected && "bg-primary/15 text-primary",
+                  !isSelected && !isToday && "text-foreground"
+                ),
+                children: formatDate(day, "d", locale)
+              }
+            )
+          ]
+        },
+        day.toISOString()
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        onClick: onNextWeek,
+        className: "h-7 w-7 shrink-0",
+        "aria-label": "Next week",
+        children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+function MobileMonthPicker({
+  selectedDate,
+  onDaySelect,
+  weekStartsOn = 0,
+  locale = "en-US",
+  className
+}) {
+  const [viewMonth, setViewMonth] = useState(() => startOfMonth(selectedDate));
+  useEffect(() => {
+    setViewMonth((prev) => {
+      const target = startOfMonth(selectedDate);
+      return isSameMonth(prev, target) ? prev : target;
+    });
+  }, [selectedDate]);
+  const days = getMonthDays(viewMonth, weekStartsOn);
+  const weekdays = getWeekdayNames(weekStartsOn, true, locale);
+  const today = /* @__PURE__ */ new Date();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: () => setViewMonth((m) => subMonths(m, 1)),
+          className: "h-8 w-8 shrink-0",
+          "aria-label": "Previous month",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: formatDate(viewMonth, "MMMM yyyy", locale) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: () => setViewMonth((m) => addMonths(m, 1)),
+          className: "h-8 w-8 shrink-0",
+          "aria-label": "Next month",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0.5", children: weekdays.map((day) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "py-1 text-center text-[10px] font-medium text-muted-foreground uppercase",
+        children: day
+      },
+      day
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0.5", children: days.map((day) => {
+      const isCurrentMonth = isSameMonth(day, viewMonth);
+      const isToday = isSameDay(day, today);
+      const isSelected = isSameDay(day, selectedDate);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onDaySelect(day),
+          className: cn(
+            "aspect-square flex items-center justify-center rounded-full text-xs font-medium transition-colors",
+            !isCurrentMonth && "text-muted-foreground/50",
+            isCurrentMonth && !isToday && !isSelected && "text-foreground hover:bg-muted",
+            isToday && !isSelected && "bg-primary/20 text-primary font-semibold",
+            isSelected && "bg-primary text-primary-foreground font-semibold"
+          ),
+          children: formatDate(day, "d", locale)
+        },
+        day.toISOString()
+      );
+    }) })
+  ] });
+}
+var VIEW_LABELS = {
+  month: "Month",
+  week: "Week",
+  day: "Day",
+  "2day": "2 Day",
+  resource: "Resource"
+};
+function CalendarHeader({
+  currentDate,
+  view,
+  views,
+  title,
+  showNavigation = true,
+  showViewSwitcher = true,
+  showTodayButton = true,
+  isMobile = false,
+  showMobileMonthPicker = true,
+  weekStartsOn = 0,
+  locale = "en-US",
+  onNavigate,
+  onViewChange,
+  onToday,
+  onDateSelect,
+  onWeekNavigate,
+  renderHeader
+}) {
+  const [monthPickerExpanded, setMonthPickerExpanded] = useState(false);
+  if (renderHeader) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderHeader({
+      date: currentDate,
+      view,
+      views,
+      title,
+      onNavigate,
+      onViewChange,
+      onToday
+    }) });
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4 text-primary shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 flex-1 min-w-0", children: [
+          showMobileMonthPicker && onDateSelect && onWeekNavigate ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setMonthPickerExpanded((v) => !v),
+              className: "text-base font-semibold text-foreground truncate text-left hover:underline",
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground truncate", children: title }),
+          showMobileMonthPicker && onDateSelect && onWeekNavigate && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              onClick: () => setMonthPickerExpanded((v) => !v),
+              className: "h-7 w-7 shrink-0",
+              "aria-expanded": monthPickerExpanded,
+              "aria-label": monthPickerExpanded ? "Collapse month view" : "Expand month view",
+              children: monthPickerExpanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })
+            }
+          )
+        ] })
+      ] }),
+      showMobileMonthPicker && onDateSelect && onWeekNavigate && /* @__PURE__ */ jsxs("div", { className: "flex flex-col overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center rounded-lg px-1.5 py-1 bg-muted/30",
+              monthPickerExpanded && "rounded-b-none"
+            ),
+            children: /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: !monthPickerExpanded && /* @__PURE__ */ jsx(
+              MobileWeekStrip,
+              {
+                selectedDate: currentDate,
+                onDaySelect: onDateSelect,
+                onPrevWeek: () => onWeekNavigate("prev"),
+                onNextWeek: () => onWeekNavigate("next"),
+                weekStartsOn,
+                locale
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "overflow-hidden transition-[max-height] duration-300 ease-in-out",
+            style: { maxHeight: monthPickerExpanded ? 400 : 0 },
+            children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "rounded-b-lg bg-muted/30 px-2 pt-1 pb-2 border-t border-border/50", children: /* @__PURE__ */ jsx(
+              MobileMonthPicker,
+              {
+                selectedDate: currentDate,
+                onDaySelect: onDateSelect,
+                weekStartsOn,
+                locale
+              }
+            ) }) })
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Calendar, { className: "h-5 w-5 text-primary" }),
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-foreground", children: title })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-4", children: [
+      showNavigation && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            onClick: () => onNavigate("prev"),
+            className: "h-8 w-8",
+            children: [
+              /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous" })
+            ]
+          }
+        ),
+        showTodayButton && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: onToday,
+            className: "h-8 px-3 text-xs font-medium",
+            children: "Today"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            onClick: () => onNavigate("next"),
+            className: "h-8 w-8",
+            children: [
+              /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next" })
+            ]
+          }
+        )
+      ] }),
+      showViewSwitcher && views.length > 1 && /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          type: "single",
+          value: view,
+          onValueChange: (value) => value && onViewChange(value),
+          className: "border border-border rounded-lg p-0.5",
+          children: views.map((v) => /* @__PURE__ */ jsx(
+            ToggleGroupItem,
+            {
+              value: v,
+              className: "h-7 px-3 text-xs data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+              children: VIEW_LABELS[v]
+            },
+            v
+          ))
+        }
+      )
+    ] })
+  ] });
+}
+
+// components/event-calendar/dnd/types.ts
+function createEventId(event) {
+  return `event-${event.id}`;
+}
+function createSlotId(data) {
+  switch (data.view) {
+    case "day":
+      return `slot-day-${data.day.getTime()}-${data.hour}`;
+    case "week":
+      return `slot-week-${data.day.getTime()}-${data.hour}`;
+    case "month":
+      return `slot-month-${data.day.getTime()}`;
+    case "resource":
+      return `slot-resource-${data.resourceId}-${data.day.getTime()}-${data.hour}`;
+  }
+}
+function DroppableSlot({
+  data,
+  children,
+  className,
+  style
+}) {
+  const id = createSlotId(data);
+  const { setNodeRef, isOver } = useDroppable({
+    id,
+    data
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      className,
+      style: __spreadValues(__spreadValues({}, style), isOver ? { backgroundColor: "var(--accent)" } : {}),
+      children
+    }
+  );
+}
+function DraggableCreateSlot({
+  data,
+  children,
+  disabled = false,
+  className,
+  style
+}) {
+  const id = `create-${createSlotId(data)}`;
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id,
+    data: { type: "create", slotData: data },
+    disabled
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({
+      ref: setNodeRef
+    }, listeners), attributes), {
+      className,
+      style: __spreadProps(__spreadValues({}, style), {
+        opacity: isDragging ? 0.5 : 1,
+        cursor: disabled ? "default" : "crosshair"
+      }),
+      children
+    })
+  );
+}
+function DraggableEvent({
+  event,
+  children,
+  disabled = false,
+  className,
+  style
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: createEventId(event),
+    data: { type: "event", event },
+    disabled
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({
+      ref: setNodeRef
+    }, listeners), attributes), {
+      className,
+      style: __spreadProps(__spreadValues({}, style), {
+        opacity: isDragging ? 0.5 : 1,
+        cursor: disabled ? "default" : "grab",
+        position: "absolute"
+      }),
+      children
+    })
+  );
+}
+function MonthView({ currentDate, events }) {
+  const {
+    config,
+    onEventClick,
+    onEventDoubleClick,
+    onSlotClick,
+    onSlotDoubleClick,
+    onDayClick,
+    renderEvent,
+    enableDragToCreate = false,
+    enableDragToMove = false
+  } = useCalendar();
+  const days = getMonthDays(currentDate, config.weekStartsOn);
+  const weekdays = getWeekdayNames(config.weekStartsOn, true, config.locale);
+  const today = /* @__PURE__ */ new Date();
+  const handleSlotClick = (day) => {
+    if (onDayClick) {
+      onDayClick(day);
+    }
+    if (onSlotClick) {
+      const slotInfo = {
+        start: startOfDay(day),
+        end: endOfDay(day)
+      };
+      onSlotClick(slotInfo);
+    }
+  };
+  const handleSlotDoubleClick = (day) => {
+    if (onSlotDoubleClick) {
+      const slotInfo = {
+        start: startOfDay(day),
+        end: endOfDay(day)
+      };
+      onSlotDoubleClick(slotInfo);
+    }
+  };
+  const handleEventClick = (e, event) => {
+    e.stopPropagation();
+    onEventClick == null ? void 0 : onEventClick(event);
+  };
+  const handleEventDoubleClick = (e, event) => {
+    e.stopPropagation();
+    onEventDoubleClick == null ? void 0 : onEventDoubleClick(event);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 border-b border-border", children: weekdays.map((day) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "py-3 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider",
+        children: day
+      },
+      day
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 flex-1 auto-rows-fr", children: days.map((day, index) => {
+      const dayEvents = getEventsForDay(events, day);
+      const isCurrentMonth = isSameMonth(day, currentDate);
+      const isToday = isSameDay(day, today);
+      const slotData = { view: "month", day };
+      const cellContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-1", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center justify-center w-7 h-7 text-sm font-medium rounded-full",
+              isToday && "bg-primary text-primary-foreground",
+              !isToday && isCurrentMonth && "text-foreground",
+              !isToday && !isCurrentMonth && "text-muted-foreground"
+            ),
+            children: formatDate(day, "d", config.locale)
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 overflow-hidden", children: [
+          dayEvents.slice(0, config.maxEventsPerDay).map((event) => {
+            const eventColor = event.color || config.defaultEventColor;
+            const eventContent = renderEvent ? renderEvent(event, "month") : /* @__PURE__ */ jsx("span", { children: event.title });
+            const eventEl = /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "px-1.5 py-0.5 text-xs font-medium rounded truncate transition-opacity hover:opacity-80",
+                  !enableDragToMove && "cursor-pointer"
+                ),
+                style: {
+                  backgroundColor: `${eventColor}20`,
+                  color: eventColor,
+                  borderLeft: `2px solid ${eventColor}`
+                },
+                title: event.title,
+                onClick: (e) => handleEventClick(e, event),
+                onDoubleClick: (e) => handleEventDoubleClick(e, event),
+                children: eventContent
+              }
+            );
+            return enableDragToMove ? /* @__PURE__ */ jsx(DraggableEvent, { event, children: eventEl }, event.id) : /* @__PURE__ */ jsx("div", { children: eventEl }, event.id);
+          }),
+          dayEvents.length > config.maxEventsPerDay && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground pl-1.5 font-medium", children: [
+            "+",
+            dayEvents.length - config.maxEventsPerDay,
+            " more"
+          ] })
+        ] })
+      ] });
+      const cell = /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "min-h-[100px] border-b border-r border-border p-1.5 transition-colors hover:bg-muted/50 cursor-pointer h-full",
+            !isCurrentMonth && "bg-muted/30",
+            index % 7 === 0 && "border-l-0",
+            index < 7 && "border-t-0"
+          ),
+          onClick: () => handleSlotClick(day),
+          onDoubleClick: () => handleSlotDoubleClick(day),
+          children: cellContent
+        }
+      );
+      return enableDragToCreate || enableDragToMove ? /* @__PURE__ */ jsx(DroppableSlot, { data: slotData, className: "min-h-[100px]", children: enableDragToCreate ? /* @__PURE__ */ jsx(DraggableCreateSlot, { data: slotData, className: "h-full", children: cell }) : cell }, index) : /* @__PURE__ */ jsx("div", { children: cell }, index);
+    }) })
+  ] });
+}
+function WeekView({ currentDate, events, dayCount, isMobile = false }) {
+  var _a;
+  const {
+    config,
+    onEventClick,
+    onEventDoubleClick,
+    onSlotClick,
+    onSlotDoubleClick,
+    renderEvent,
+    enableDragToCreate = false,
+    enableDragToMove = false
+  } = useCalendar();
+  const days = dayCount === 2 ? getTwoDays(currentDate, config.weekStartsOn) : getWeekDays(currentDate, config.weekStartsOn);
+  const hours = getHoursArray(config.startHour, config.endHour);
+  const today = /* @__PURE__ */ new Date();
+  const totalHours = hours.length;
+  const showCurrentTimeLine = (_a = config.showCurrentTimeLine) != null ? _a : true;
+  const includesToday = days.some((d) => isSameDay(d, today));
+  const [now, setNow] = useState(() => /* @__PURE__ */ new Date());
+  const columnRefs = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (!showCurrentTimeLine || !includesToday) return;
+    const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
+    return () => clearInterval(id);
+  }, [showCurrentTimeLine, includesToday]);
+  useEffect(() => {
+    const key = currentDate.toISOString().slice(0, 10);
+    const el = columnRefs.current.get(key);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+    }
+  }, [currentDate]);
+  const currentTimeLineTop = showCurrentTimeLine && includesToday ? getCurrentTimeLineTop(now, config.startHour, config.endHour, config.hourHeight, 0) : null;
+  const dayColumnMinWidth = isMobile && dayCount !== 2 ? "min(45vw, 200px)" : "140px";
+  const handleSlotClick = (day, hour) => {
+    if (onSlotClick) {
+      const slotInfo = {
+        start: createSlotDate(day, hour),
+        end: createSlotDate(day, hour + 1)
+      };
+      onSlotClick(slotInfo);
+    }
+  };
+  const handleSlotDoubleClick = (day, hour) => {
+    if (onSlotDoubleClick) {
+      const slotInfo = {
+        start: createSlotDate(day, hour),
+        end: createSlotDate(day, hour + 1)
+      };
+      onSlotDoubleClick(slotInfo);
+    }
+  };
+  const handleEventClick = (e, event) => {
+    e.stopPropagation();
+    onEventClick == null ? void 0 : onEventClick(event);
+  };
+  const handleEventDoubleClick = (e, event) => {
+    e.stopPropagation();
+    onEventDoubleClick == null ? void 0 : onEventDoubleClick(event);
+  };
+  const maxHeightStyle = config.timeSeriesMaxHeight != null ? typeof config.timeSeriesMaxHeight === "number" ? `${config.timeSeriesMaxHeight}px` : config.timeSeriesMaxHeight : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-full overflow-auto",
+      style: { maxHeight: maxHeightStyle },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-max flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex border-b border-border shrink-0 bg-background z-10 sticky top-0 shadow-[0_4px_12px_-2px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_12px_-2px_rgba(0,0,0,0.2)]", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-16 shrink-0 border-r border-border sticky left-0 z-10 bg-background shadow-[4px_0_12px_-2px_rgba(0,0,0,0.08),6px_0_16px_-4px_rgba(0,0,0,0.06)] dark:shadow-[4px_0_16px_-2px_rgba(0,0,0,0.25),6px_0_24px_-4px_rgba(0,0,0,0.2)]" }),
+          days.map((day, index) => {
+            const isToday = isSameDay(day, today);
+            const dayKey = day.toISOString().slice(0, 10);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: (el) => {
+                  if (el) columnRefs.current.set(dayKey, el);
+                },
+                className: cn(
+                  "flex-1 py-3 text-center border-r border-border last:border-r-0",
+                  isToday && "bg-primary/5"
+                ),
+                style: { minWidth: dayColumnMinWidth },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground uppercase", children: formatDate(day, "EEE", config.locale) }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mt-1 inline-flex items-center justify-center w-8 h-8 text-lg font-semibold rounded-full",
+                        isToday && "bg-primary text-primary-foreground",
+                        !isToday && "text-foreground"
+                      ),
+                      children: formatDate(day, "d", config.locale)
+                    }
+                  )
+                ]
+              },
+              index
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-1 relative",
+            style: { minHeight: totalHours * config.hourHeight },
+            children: [
+              currentTimeLineTop != null && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute left-16 right-0 h-0.5 bg-sky-300 z-20 pointer-events-none",
+                  style: { top: currentTimeLineTop },
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsx("span", { className: "absolute -left-1 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-sky-300" })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "w-16 shrink-0 border-r border-border sticky left-0 z-10 bg-background shadow-[4px_0_12px_-2px_rgba(0,0,0,0.08),6px_0_16px_-4px_rgba(0,0,0,0.06)] dark:shadow-[4px_0_16px_-2px_rgba(0,0,0,0.25),6px_0_24px_-4px_rgba(0,0,0,0.2)]", children: hours.map((hour) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "pr-2 flex items-start justify-end",
+                  style: { height: `${config.hourHeight}px` },
+                  children: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground -mt-2", children: formatHour(hour, config.timeFormat, config.locale) })
+                },
+                hour
+              )) }),
+              days.map((day, dayIndex) => {
+                const dayEvents = getEventsForDay(events, day);
+                const isToday = isSameDay(day, today);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex-1 border-r border-border last:border-r-0 relative",
+                      isToday && "bg-primary/5"
+                    ),
+                    style: { minWidth: dayColumnMinWidth },
+                    children: [
+                      hours.map((hour, index) => {
+                        const slotData = { view: "week", day, hour };
+                        const slotContent = /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "cursor-pointer hover:bg-muted/30 transition-colors h-full w-full",
+                              index < totalHours - 1 && "border-b border-border"
+                            ),
+                            style: { height: `${config.hourHeight}px` },
+                            onClick: () => handleSlotClick(day, hour),
+                            onDoubleClick: () => handleSlotDoubleClick(day, hour)
+                          }
+                        );
+                        return enableDragToCreate || enableDragToMove ? /* @__PURE__ */ jsx(
+                          DroppableSlot,
+                          {
+                            data: slotData,
+                            style: { height: `${config.hourHeight}px` },
+                            className: cn(index < totalHours - 1 && "border-b border-border"),
+                            children: enableDragToCreate ? /* @__PURE__ */ jsx(DraggableCreateSlot, { data: slotData, className: "h-full w-full", children: slotContent }) : slotContent
+                          },
+                          hour
+                        ) : /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "cursor-pointer hover:bg-muted/30 transition-colors",
+                              index < totalHours - 1 && "border-b border-border"
+                            ),
+                            style: { height: `${config.hourHeight}px` },
+                            onClick: () => handleSlotClick(day, hour),
+                            onDoubleClick: () => handleSlotDoubleClick(day, hour)
+                          },
+                          hour
+                        );
+                      }),
+                      /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-px bg-border" }),
+                      dayEvents.map((event) => {
+                        if (!isSameDay(event.start, day)) return null;
+                        const { top, height } = getEventPosition(event, config.hourHeight, config.startHour);
+                        const eventColor = event.color || config.defaultEventColor;
+                        const eventContent = renderEvent ? renderEvent(event, "week") : /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx("div", { className: "font-semibold truncate", children: event.title }),
+                          /* @__PURE__ */ jsxs("div", { className: "text-[10px] opacity-80", children: [
+                            formatDate(event.start, "h:mm a", config.locale),
+                            " - ",
+                            formatDate(event.end, "h:mm a", config.locale)
+                          ] })
+                        ] });
+                        const eventEl = /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "px-1.5 py-1 rounded text-xs font-medium overflow-hidden transition-opacity hover:opacity-90 h-full w-full",
+                              !enableDragToMove && "cursor-pointer"
+                            ),
+                            style: {
+                              backgroundColor: `${eventColor}15`,
+                              borderLeft: `3px solid ${eventColor}`,
+                              color: eventColor
+                            },
+                            title: event.title,
+                            onClick: (e) => handleEventClick(e, event),
+                            onDoubleClick: (e) => handleEventDoubleClick(e, event),
+                            children: eventContent
+                          }
+                        );
+                        return enableDragToMove ? /* @__PURE__ */ jsx(
+                          DraggableEvent,
+                          {
+                            event,
+                            className: "absolute left-0.5 right-0.5",
+                            style: { top: `${top}px`, height: `${height}px` },
+                            children: eventEl
+                          },
+                          event.id
+                        ) : /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "absolute left-0.5 right-0.5",
+                            style: { top: `${top}px`, height: `${height}px` },
+                            children: eventEl
+                          },
+                          event.id
+                        );
+                      })
+                    ]
+                  },
+                  dayIndex
+                );
+              })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function DayView({ currentDate, events }) {
+  var _a;
+  const {
+    config,
+    onEventClick,
+    onEventDoubleClick,
+    onSlotClick,
+    onSlotDoubleClick,
+    renderEvent,
+    enableDragToCreate = false,
+    enableDragToMove = false
+  } = useCalendar();
+  const dayEvents = getEventsForDay(events, currentDate);
+  const hours = getHoursArray(config.startHour, config.endHour);
+  const today = /* @__PURE__ */ new Date();
+  const isToday = isSameDay(currentDate, today);
+  const totalHours = hours.length;
+  const showCurrentTimeLine = (_a = config.showCurrentTimeLine) != null ? _a : true;
+  const [now, setNow] = useState(() => /* @__PURE__ */ new Date());
+  useEffect(() => {
+    if (!showCurrentTimeLine || !isToday) return;
+    const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
+    return () => clearInterval(id);
+  }, [showCurrentTimeLine, isToday]);
+  const currentTimeLineTop = showCurrentTimeLine && isToday ? getCurrentTimeLineTop(now, config.startHour, config.endHour, config.hourHeight, 0) : null;
+  const handleSlotClick = (hour) => {
+    if (onSlotClick) {
+      const slotInfo = {
+        start: createSlotDate(currentDate, hour),
+        end: createSlotDate(currentDate, hour + 1)
+      };
+      onSlotClick(slotInfo);
+    }
+  };
+  const handleSlotDoubleClick = (hour) => {
+    if (onSlotDoubleClick) {
+      const slotInfo = {
+        start: createSlotDate(currentDate, hour),
+        end: createSlotDate(currentDate, hour + 1)
+      };
+      onSlotDoubleClick(slotInfo);
+    }
+  };
+  const handleEventClick = (e, event) => {
+    e.stopPropagation();
+    onEventClick == null ? void 0 : onEventClick(event);
+  };
+  const handleEventDoubleClick = (e, event) => {
+    e.stopPropagation();
+    onEventDoubleClick == null ? void 0 : onEventDoubleClick(event);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex border-b border-border shrink-0 bg-background z-10 shadow-[0_4px_12px_-2px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_12px_-2px_rgba(0,0,0,0.2)]", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0 border-r border-border" }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex-1 py-4 text-center border-r border-border",
+            isToday && "bg-primary/5"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground uppercase", children: formatDate(currentDate, "EEEE", config.locale) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "mt-1 inline-flex items-center justify-center w-10 h-10 text-xl font-semibold rounded-full",
+                  isToday && "bg-primary text-primary-foreground",
+                  !isToday && "text-foreground"
+                ),
+                children: formatDate(currentDate, "d", config.locale)
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex flex-1 overflow-auto min-h-0",
+        style: {
+          maxHeight: config.timeSeriesMaxHeight != null ? typeof config.timeSeriesMaxHeight === "number" ? `${config.timeSeriesMaxHeight}px` : config.timeSeriesMaxHeight : void 0
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex min-w-full relative",
+            style: { minHeight: totalHours * config.hourHeight },
+            children: [
+              currentTimeLineTop != null && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute left-20 right-0 h-0.5 bg-sky-300 z-20 pointer-events-none",
+                  style: { top: currentTimeLineTop },
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsx("span", { className: "absolute -left-1 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-sky-300" })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0 border-r border-border relative", children: hours.map((hour) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "pr-3 flex items-start justify-end",
+                  style: { height: `${config.hourHeight}px` },
+                  children: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground -mt-2", children: formatHour(hour, config.timeFormat, config.locale) })
+                },
+                hour
+              )) }),
+              /* @__PURE__ */ jsxs("div", { className: cn("flex-1 relative border-r border-border", isToday && "bg-primary/5"), children: [
+                hours.map((hour, index) => {
+                  const slotData = { view: "day", day: currentDate, hour };
+                  const slotContent = /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "cursor-pointer hover:bg-muted/30 transition-colors h-full w-full",
+                        index < totalHours - 1 && "border-b border-border"
+                      ),
+                      style: { height: `${config.hourHeight}px` },
+                      onClick: () => handleSlotClick(hour),
+                      onDoubleClick: () => handleSlotDoubleClick(hour)
+                    }
+                  );
+                  return enableDragToCreate || enableDragToMove ? /* @__PURE__ */ jsx(
+                    DroppableSlot,
+                    {
+                      data: slotData,
+                      style: { height: `${config.hourHeight}px` },
+                      className: cn(index < totalHours - 1 && "border-b border-border"),
+                      children: enableDragToCreate ? /* @__PURE__ */ jsx(DraggableCreateSlot, { data: slotData, className: "h-full w-full", children: slotContent }) : slotContent
+                    },
+                    hour
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "cursor-pointer hover:bg-muted/30 transition-colors",
+                        index < totalHours - 1 && "border-b border-border"
+                      ),
+                      style: { height: `${config.hourHeight}px` },
+                      onClick: () => handleSlotClick(hour),
+                      onDoubleClick: () => handleSlotDoubleClick(hour)
+                    },
+                    hour
+                  );
+                }),
+                /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-px bg-border" }),
+                dayEvents.map((event) => {
+                  if (!isSameDay(event.start, currentDate)) return null;
+                  const { top, height } = getEventPosition(event, config.hourHeight, config.startHour);
+                  const eventColor = event.color || config.defaultEventColor;
+                  const eventContent = renderEvent ? renderEvent(event, "day") : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("div", { className: "font-semibold text-sm", style: { color: eventColor }, children: event.title }),
+                    /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground mt-0.5", children: [
+                      formatDate(event.start, "h:mm a", config.locale),
+                      " - ",
+                      formatDate(event.end, "h:mm a", config.locale)
+                    ] }),
+                    event.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-1 line-clamp-2", children: event.description })
+                  ] });
+                  const eventEl = /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "px-3 py-2 rounded-lg overflow-hidden transition-all hover:shadow-md h-full w-full",
+                        !enableDragToMove && "cursor-pointer"
+                      ),
+                      style: {
+                        backgroundColor: `${eventColor}15`,
+                        borderLeft: `4px solid ${eventColor}`
+                      },
+                      title: event.title,
+                      onClick: (e) => handleEventClick(e, event),
+                      onDoubleClick: (e) => handleEventDoubleClick(e, event),
+                      children: eventContent
+                    }
+                  );
+                  return enableDragToMove ? /* @__PURE__ */ jsx(
+                    DraggableEvent,
+                    {
+                      event,
+                      className: "absolute left-2 right-2",
+                      style: { top: `${top}px`, height: `${height}px` },
+                      children: eventEl
+                    },
+                    event.id
+                  ) : /* @__PURE__ */ jsx("div", { className: "absolute left-2 right-2", style: { top: `${top}px`, height: `${height}px` }, children: eventEl }, event.id);
+                })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function ResourceView({ currentDate, events, resources }) {
+  const {
+    config,
+    onEventClick,
+    onEventDoubleClick,
+    onSlotClick,
+    onSlotDoubleClick,
+    renderEvent,
+    enableDragToCreate = false,
+    enableDragToMove = false
+  } = useCalendar();
+  const days = getWeekDays(currentDate, config.weekStartsOn);
+  const hours = getHoursArray(config.startHour, config.endHour);
+  const today = /* @__PURE__ */ new Date();
+  const hourHeight = 56;
+  const totalHours = hours.length;
+  const getResourceDayEvents = (resourceId, day) => {
+    return events.filter(
+      (event) => event.resourceId === resourceId && isSameDay(event.start, day)
+    );
+  };
+  const handleSlotClick = (day, hour, resourceId) => {
+    if (onSlotClick) {
+      const slotInfo = {
+        start: createSlotDate(day, hour),
+        end: createSlotDate(day, hour + 1),
+        resourceId
+      };
+      onSlotClick(slotInfo);
+    }
+  };
+  const handleSlotDoubleClick = (day, hour, resourceId) => {
+    if (onSlotDoubleClick) {
+      const slotInfo = {
+        start: createSlotDate(day, hour),
+        end: createSlotDate(day, hour + 1),
+        resourceId
+      };
+      onSlotDoubleClick(slotInfo);
+    }
+  };
+  const handleEventClick = (e, event) => {
+    e.stopPropagation();
+    onEventClick == null ? void 0 : onEventClick(event);
+  };
+  const handleEventDoubleClick = (e, event) => {
+    e.stopPropagation();
+    onEventDoubleClick == null ? void 0 : onEventDoubleClick(event);
+  };
+  if (resources.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "No resources available. Add resources to use the resource view." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex border-b border-border shrink-0 bg-background z-10", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 shrink-0 border-r border-border" }),
+      resources.map((resource) => {
+        const resourceColor = resource.color || config.defaultResourceColor;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex-1 py-3 px-2 text-center border-r border-border last:border-r-0",
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-3 h-3 rounded-full shrink-0",
+                  style: { backgroundColor: resourceColor }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground truncate", children: resource.name })
+            ] })
+          },
+          resource.id
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex border-b border-border shrink-0 bg-muted/50 z-10", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 shrink-0 border-r border-border py-2 px-2 text-xs font-medium text-muted-foreground", children: "Week View" }),
+      resources.map((resource) => /* @__PURE__ */ jsx("div", { className: "flex-1 flex border-r border-border last:border-r-0", children: days.map((day, dayIndex) => {
+        const isToday = isSameDay(day, today);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex-1 py-2 text-center border-r border-border/50 last:border-r-0",
+              isToday && "bg-primary/5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground uppercase", children: formatDate(day, "EEE", config.locale) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xs font-medium",
+                    isToday && "text-primary",
+                    !isToday && "text-foreground"
+                  ),
+                  children: formatDate(day, "d", config.locale)
+                }
+              )
+            ]
+          },
+          dayIndex
+        );
+      }) }, resource.id))
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-1 overflow-y-auto min-h-0", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex min-w-full",
+        style: { minHeight: totalHours * hourHeight },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "w-16 shrink-0 border-r border-border relative", children: [
+            hours.map((hour, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "pr-2 flex items-start justify-end",
+                  index < totalHours - 1 && "border-b border-border"
+                ),
+                style: { height: `${hourHeight}px` },
+                children: /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground -mt-1.5", children: formatHour(hour, config.timeFormat, config.locale) })
+              },
+              hour
+            )),
+            /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-px bg-border" })
+          ] }),
+          resources.map((resource) => {
+            const resourceColor = resource.color || config.defaultResourceColor;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex-1 flex border-r border-border last:border-r-0",
+                children: days.map((day, dayIndex) => {
+                  const dayEvents = getResourceDayEvents(resource.id, day);
+                  const isToday = isSameDay(day, today);
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "flex-1 border-r border-border/50 last:border-r-0 relative",
+                        isToday && "bg-primary/5"
+                      ),
+                      children: [
+                        hours.map((hour, index) => {
+                          const slotData = {
+                            view: "resource",
+                            day,
+                            hour,
+                            resourceId: resource.id
+                          };
+                          const slotContent = /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: cn(
+                                "cursor-pointer hover:bg-muted/30 transition-colors h-full w-full",
+                                index < totalHours - 1 && "border-b border-border"
+                              ),
+                              style: { height: `${hourHeight}px` },
+                              onClick: () => handleSlotClick(day, hour, resource.id),
+                              onDoubleClick: () => handleSlotDoubleClick(day, hour, resource.id)
+                            }
+                          );
+                          return enableDragToCreate || enableDragToMove ? /* @__PURE__ */ jsx(
+                            DroppableSlot,
+                            {
+                              data: slotData,
+                              style: { height: `${hourHeight}px` },
+                              className: cn(index < totalHours - 1 && "border-b border-border"),
+                              children: enableDragToCreate ? /* @__PURE__ */ jsx(DraggableCreateSlot, { data: slotData, className: "h-full w-full", children: slotContent }) : slotContent
+                            },
+                            hour
+                          ) : /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: cn(
+                                "cursor-pointer hover:bg-muted/30 transition-colors",
+                                index < totalHours - 1 && "border-b border-border"
+                              ),
+                              style: { height: `${hourHeight}px` },
+                              onClick: () => handleSlotClick(day, hour, resource.id),
+                              onDoubleClick: () => handleSlotDoubleClick(day, hour, resource.id)
+                            },
+                            hour
+                          );
+                        }),
+                        /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-px bg-border" }),
+                        dayEvents.map((event) => {
+                          const { top, height } = getEventPosition(event, config.hourHeight, config.startHour);
+                          const scaledTop = top / config.hourHeight * hourHeight;
+                          const scaledHeight = height / config.hourHeight * hourHeight;
+                          const eventColor = event.color || resourceColor;
+                          const eventContent = renderEvent ? renderEvent(event, "resource") : /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx("div", { className: "truncate font-semibold", children: event.title }),
+                            /* @__PURE__ */ jsx("div", { className: "truncate opacity-80", children: formatDate(event.start, "h:mm", config.locale) })
+                          ] });
+                          const eventEl = /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: cn(
+                                "px-1 py-0.5 rounded text-[10px] font-medium overflow-hidden transition-opacity hover:opacity-90 h-full w-full",
+                                !enableDragToMove && "cursor-pointer"
+                              ),
+                              style: {
+                                backgroundColor: `${eventColor}20`,
+                                borderLeft: `2px solid ${eventColor}`,
+                                color: eventColor
+                              },
+                              title: `${event.title} - ${resource.name}`,
+                              onClick: (e) => handleEventClick(e, event),
+                              onDoubleClick: (e) => handleEventDoubleClick(e, event),
+                              children: eventContent
+                            }
+                          );
+                          return enableDragToMove ? /* @__PURE__ */ jsx(
+                            DraggableEvent,
+                            {
+                              event,
+                              className: "absolute left-0.5 right-0.5",
+                              style: { top: `${scaledTop}px`, height: `${scaledHeight}px` },
+                              children: eventEl
+                            },
+                            event.id
+                          ) : /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: "absolute left-0.5 right-0.5",
+                              style: { top: `${scaledTop}px`, height: `${scaledHeight}px` },
+                              children: eventEl
+                            },
+                            event.id
+                          );
+                        })
+                      ]
+                    },
+                    dayIndex
+                  );
+                })
+              },
+              resource.id
+            );
+          })
+        ]
+      }
+    ) })
+  ] });
+}
+function EventCalendar({
+  events,
+  resources = [],
+  date,
+  defaultDate = /* @__PURE__ */ new Date(),
+  view,
+  defaultView = "month",
+  views = ["month", "week", "day", "resource"],
+  calendarOptions = {},
+  showNavigation = true,
+  showViewSwitcher = true,
+  showTodayButton = true,
+  className,
+  loading = false,
+  theme = "system",
+  themeVars,
+  enableDragToCreate = false,
+  enableDragToMove = false,
+  mobileBreakpoint = "md",
+  showMobileMonthPicker = true,
+  onEventClick,
+  onEventDoubleClick,
+  onSlotClick,
+  onSlotDoubleClick,
+  onDateChange,
+  onViewChange,
+  onNavigate,
+  onRangeChange,
+  onDayClick,
+  onEventCreate,
+  onEventMove,
+  renderEvent,
+  renderDayCell,
+  renderHeader,
+  renderResourceHeader,
+  renderTimeSlot,
+  renderEmpty,
+  renderSelectedEvent,
+  renderSelectedSlot
+}) {
+  const [internalDate, setInternalDate] = useState(defaultDate);
+  const [selectedEvent, setSelectedEvent] = useState(null);
+  const [selectedSlot, setSelectedSlot] = useState(null);
+  const currentDate = date != null ? date : internalDate;
+  const isMobile = useMediaQuery(mobileBreakpoint);
+  const [internalView, setInternalView] = useState(defaultView);
+  const currentView = view != null ? view : internalView;
+  const config = useMemo(
+    () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+      return {
+        weekStartsOn: (_a = calendarOptions.weekStartsOn) != null ? _a : defaultConfig.weekStartsOn,
+        startHour: (_b = calendarOptions.startHour) != null ? _b : defaultConfig.startHour,
+        endHour: (_c = calendarOptions.endHour) != null ? _c : defaultConfig.endHour,
+        hourHeight: (_d = calendarOptions.hourHeight) != null ? _d : defaultConfig.hourHeight,
+        maxEventsPerDay: (_e = calendarOptions.maxEventsPerDay) != null ? _e : defaultConfig.maxEventsPerDay,
+        timeSeriesMaxHeight: (_f = calendarOptions.timeSeriesMaxHeight) != null ? _f : defaultConfig.timeSeriesMaxHeight,
+        showCurrentTimeLine: (_g = calendarOptions.showCurrentTimeLine) != null ? _g : defaultConfig.showCurrentTimeLine,
+        defaultEventColor: (_h = calendarOptions.defaultEventColor) != null ? _h : defaultConfig.defaultEventColor,
+        defaultResourceColor: (_i = calendarOptions.defaultResourceColor) != null ? _i : defaultConfig.defaultResourceColor,
+        locale: (_j = calendarOptions.locale) != null ? _j : defaultConfig.locale,
+        timeFormat: (_k = calendarOptions.timeFormat) != null ? _k : defaultConfig.timeFormat
+      };
+    },
+    [calendarOptions]
+  );
+  const effectiveView = isMobile ? ["week", "day", "2day"].includes(currentView) ? currentView : "week" : currentView;
+  const handleNavigate = useCallback(
+    (direction) => {
+      const newDate = navigateDate(currentDate, effectiveView, direction);
+      if (date === void 0) {
+        setInternalDate(newDate);
+      }
+      onDateChange == null ? void 0 : onDateChange(newDate);
+      onNavigate == null ? void 0 : onNavigate(newDate, direction);
+    },
+    [currentDate, effectiveView, date, onDateChange, onNavigate]
+  );
+  const handleWeekNavigate = useCallback(
+    (direction) => {
+      const newDate = direction === "next" ? addWeeks(currentDate, 1) : subWeeks(currentDate, 1);
+      if (date === void 0) {
+        setInternalDate(newDate);
+      }
+      onDateChange == null ? void 0 : onDateChange(newDate);
+    },
+    [currentDate, date, onDateChange]
+  );
+  const handleDateSelect = useCallback(
+    (newDate) => {
+      if (date === void 0) {
+        setInternalDate(newDate);
+      }
+      onDateChange == null ? void 0 : onDateChange(newDate);
+    },
+    [date, onDateChange]
+  );
+  const handleToday = useCallback(() => {
+    const today = /* @__PURE__ */ new Date();
+    if (date === void 0) {
+      setInternalDate(today);
+    }
+    onDateChange == null ? void 0 : onDateChange(today);
+    onNavigate == null ? void 0 : onNavigate(today, "today");
+  }, [date, onDateChange, onNavigate]);
+  const handleViewChange = useCallback(
+    (newView) => {
+      if (view === void 0) {
+        setInternalView(newView);
+      }
+      onViewChange == null ? void 0 : onViewChange(newView);
+    },
+    [view, onViewChange]
+  );
+  const handleEventClick = useCallback(
+    (event) => {
+      onEventClick == null ? void 0 : onEventClick(event);
+      if (renderSelectedEvent) {
+        setSelectedEvent(event);
+        setSelectedSlot(null);
+      }
+    },
+    [onEventClick, renderSelectedEvent]
+  );
+  const handleSlotClick = useCallback(
+    (slot) => {
+      onSlotClick == null ? void 0 : onSlotClick(slot);
+      if (renderSelectedSlot) {
+        setSelectedSlot(slot);
+        setSelectedEvent(null);
+      }
+    },
+    [onSlotClick, renderSelectedSlot]
+  );
+  const handleCloseSelected = useCallback(() => {
+    setSelectedEvent(null);
+    setSelectedSlot(null);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      currentDate,
+      view: currentView,
+      events,
+      resources,
+      config,
+      onEventClick: renderSelectedEvent ? handleEventClick : onEventClick,
+      onEventDoubleClick,
+      onSlotClick: renderSelectedSlot ? handleSlotClick : onSlotClick,
+      onSlotDoubleClick,
+      onDayClick,
+      renderEvent,
+      enableDragToCreate,
+      enableDragToMove,
+      onEventCreate,
+      onEventMove
+    }),
+    [
+      currentDate,
+      currentView,
+      events,
+      resources,
+      config,
+      renderSelectedEvent,
+      renderSelectedSlot,
+      handleEventClick,
+      handleSlotClick,
+      onEventClick,
+      onEventDoubleClick,
+      onSlotClick,
+      onSlotDoubleClick,
+      onDayClick,
+      renderEvent,
+      enableDragToCreate,
+      enableDragToMove,
+      onEventCreate,
+      onEventMove
+    ]
+  );
+  const mobileViews = ["week", "day", "2day"];
+  const title = getViewTitle(currentDate, effectiveView, config.weekStartsOn, config.locale);
+  useEffect(() => {
+    if (onRangeChange) {
+      const range = getViewDateRange(currentDate, effectiveView, config.weekStartsOn);
+      onRangeChange(range);
+    }
+  }, [currentDate, effectiveView, config.weekStartsOn, onRangeChange]);
+  const availableViews = (isMobile ? mobileViews : views).filter((v) => {
+    if (v === "resource" && resources.length === 0) return false;
+    return true;
+  });
+  const calendarContent = /* @__PURE__ */ jsx(CalendarProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "flex flex-col h-full overflow-hidden border-border",
+        isMobile && "gap-0 py-0",
+        className
+      ),
+      children: [
+        (showNavigation || showViewSwitcher) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-card",
+              isMobile ? "px-3 py-2 border-b border-border relative z-10 rounded-t-xl shadow-[0_4px_24px_rgba(0,0,0,0.12),0_8px_40px_rgba(0,0,0,0.1),0_12px_48px_rgba(0,0,0,0.08)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.35),0_8px_40px_rgba(0,0,0,0.3),0_12px_48px_rgba(0,0,0,0.2)]" : "p-4 border-b border-border"
+            ),
+            children: /* @__PURE__ */ jsx(
+              CalendarHeader,
+              {
+                currentDate,
+                view: effectiveView,
+                views: availableViews,
+                title,
+                showNavigation,
+                showViewSwitcher,
+                showTodayButton,
+                isMobile,
+                showMobileMonthPicker,
+                weekStartsOn: config.weekStartsOn,
+                locale: config.locale,
+                onNavigate: handleNavigate,
+                onViewChange: handleViewChange,
+                onToday: handleToday,
+                onDateSelect: isMobile ? handleDateSelect : void 0,
+                onWeekNavigate: isMobile ? handleWeekNavigate : void 0,
+                renderHeader
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex-1 overflow-hidden relative",
+              isMobile && "rounded-b-xl bg-background shadow-[inset_0_8px_12px_-6px_rgba(0,0,0,0.1),0_2px_8px_rgba(0,0,0,0.06)] dark:shadow-[inset_0_8px_12px_-6px_rgba(0,0,0,0.25),0_2px_8px_rgba(0,0,0,0.15)]"
+            ),
+            children: [
+              loading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/50 flex items-center justify-center z-20", children: /* @__PURE__ */ jsx(Spinner, { className: "h-8 w-8" }) }),
+              events.length === 0 && renderEmpty ? renderEmpty() : /* @__PURE__ */ jsxs(Fragment, { children: [
+                effectiveView === "month" && /* @__PURE__ */ jsx(MonthView, { currentDate, events }),
+                (effectiveView === "week" || effectiveView === "2day") && /* @__PURE__ */ jsx(
+                  WeekView,
+                  {
+                    currentDate,
+                    events,
+                    dayCount: effectiveView === "2day" ? 2 : void 0,
+                    isMobile
+                  }
+                ),
+                effectiveView === "day" && /* @__PURE__ */ jsx(DayView, { currentDate, events }),
+                effectiveView === "resource" && /* @__PURE__ */ jsx(
+                  ResourceView,
+                  {
+                    currentDate,
+                    events,
+                    resources
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        renderSelectedEvent && /* @__PURE__ */ jsx(Fragment, { children: renderSelectedEvent({
+          event: selectedEvent,
+          onClose: handleCloseSelected
+        }) }),
+        renderSelectedSlot && /* @__PURE__ */ jsx(Fragment, { children: renderSelectedSlot({
+          slot: selectedSlot,
+          onClose: handleCloseSelected
+        }) })
+      ]
+    }
+  ) });
+  const wrappedContent = enableDragToCreate || enableDragToMove ? /* @__PURE__ */ jsx(
+    EventCalendarDndProvider,
+    {
+      enableDragToCreate,
+      enableDragToMove,
+      onEventCreate,
+      onEventMove,
+      defaultEventColor: config.defaultEventColor,
+      locale: config.locale,
+      renderEvent,
+      children: calendarContent
+    }
+  ) : calendarContent;
+  if (theme || themeVars) {
+    return /* @__PURE__ */ jsx(
+      EventCalendarThemeProvider,
+      {
+        theme: theme != null ? theme : "system",
+        themeVars,
+        children: wrappedContent
+      }
+    );
+  }
+  return wrappedContent;
+}
+
+export { EventCalendar, EventCalendarThemeProvider, createSlotDate, formatDate, formatHour, getDateFnsLocale, getEventsForDay, getHoursArray, getMonthDays, getViewDateRange, getViewTitle, getWeekDays, navigateDate, useCalendar };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map