@moontra/moonui-pro 2.15.2 → 2.16.0

package/dist/index.d.ts

@@ -993,7 +993,27 @@ interface CalendarEvent {
     location?: string;
     attendees?: string[];
     color?: string;
-    type?: 'meeting' | 'task' | 'reminder' | 'event';
+    type?: 'meeting' | 'task' | 'reminder' | 'event' | 'birthday' | 'holiday' | 'conference';
+    recurring?: {
+        pattern: 'daily' | 'weekly' | 'monthly' | 'yearly';
+        interval: number;
+        endDate?: Date;
+        daysOfWeek?: number[];
+        dayOfMonth?: number;
+    };
+    reminder?: {
+        type: 'email' | 'notification' | 'sms';
+        before: number;
+    };
+    priority?: 'low' | 'medium' | 'high';
+    status?: 'confirmed' | 'tentative' | 'cancelled';
+    attachments?: string[];
+    tags?: string[];
+    isAllDay?: boolean;
+    isPrivate?: boolean;
+    meetingLink?: string;
+    phoneNumber?: string;
+    timeZone?: string;
 }
 interface CalendarProps {
     events?: CalendarEvent[];
@@ -1005,6 +1025,9 @@ interface CalendarProps {
         id: string;
     }) => void;
     onEventDelete?: (eventId: string) => void;
+    onDateChange?: (date: Date) => void;
+    onViewChange?: (view: 'month' | 'week' | 'day' | 'year' | 'agenda') => void;
+    onEventDrop?: (event: CalendarEvent, newDate: Date) => void;
     className?: string;
     showWeekends?: boolean;
     showEventDetails?: boolean;
@@ -1013,9 +1036,42 @@ interface CalendarProps {
     maxDate?: Date;
     highlightToday?: boolean;
     height?: number;
+    defaultView?: 'month' | 'week' | 'day' | 'year' | 'agenda';
+    enableDragDrop?: boolean;
+    enableSearch?: boolean;
+    enableFilters?: boolean;
+    enableExport?: boolean;
+    enableImport?: boolean;
+    enableRecurringEvents?: boolean;
+    enableReminders?: boolean;
+    eventCategories?: Array<{
+        value: string;
+        label: string;
+        color: string;
+    }>;
+    workingHours?: {
+        start: string;
+        end: string;
+    };
+    holidays?: Array<{
+        date: Date;
+        name: string;
+    }>;
+    locale?: string;
+    timeFormat?: '12h' | '24h';
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    theme?: 'light' | 'dark' | 'auto' | 'custom';
+    customTheme?: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        background: string;
+        foreground: string;
+    };
+    compactMode?: boolean;
     showProUpgrade?: boolean;
 }
-declare function Calendar({ events, onEventClick, onEventAdd, onEventEdit, onEventDelete, className, showWeekends, showEventDetails, disabled, minDate, maxDate, highlightToday, height, showProUpgrade }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ events, onEventClick, onEventAdd, onEventEdit, onEventDelete, onDateChange, onViewChange, onEventDrop, className, showWeekends, showEventDetails, disabled, minDate, maxDate, highlightToday, height, defaultView, enableDragDrop, enableSearch, enableFilters, enableExport, enableImport, enableRecurringEvents, enableReminders, eventCategories, workingHours, holidays, locale, timeFormat, firstDayOfWeek, theme, customTheme, compactMode, showProUpgrade }: CalendarProps): react_jsx_runtime.JSX.Element;
 
 interface KanbanAssignee {
     id: string;

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import * as t from 'react';
 import t__default, { useState, useRef, useCallback, forwardRef, createContext, useEffect, useMemo, useContext, useLayoutEffect, useDebugValue, Component } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, Upload, Play, Eye, CheckCircle2, Pause, RotateCcw, Download, Copy, Share, Trash2, CreditCard, Globe, XCircle, Clock, HelpCircle, ChevronLeft, Calendar as Calendar$1, Edit, MapPin, User, Filter, Move, Archive, EyeOff, Settings, Timer, Palette, ArrowUpDown, FileText, Star, Square, CheckSquare, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Highlighter, Link2, Image as Image$1, Table as Table$1, Undo, Redo, RefreshCw, Wand2, Maximize, Briefcase, MessageSquare, Heart, GraduationCap, Zap, Languages, Lightbulb, Target, Repeat, GitBranch, ArrowRight, MoreVertical, Trash, ExternalLink, TrendingUp, MessageCircle, Paperclip, Printer, TrendingDown, ZoomOut, ZoomIn, FileSpreadsheet, FileJson, Maximize2, Menu, Bell, CheckCheck, CheckCircle, Settings2, LogOut, Edit3, LayoutGrid, Share2, Save, Video, Music, File, FileDown, ArrowUp, ArrowDown, ChevronsLeft, ChevronsRight, Pin, Sun, Moon, Monitor, Activity, Send, Tag, Flag, CalendarIcon, DollarSign, Users, Github, GitFork, Server, RotateCw, Cpu, MemoryStick, HardDrive, Network, BarChart3, Columns, Grip, Unlock, Minimize2, Map as Map$1, BellOff, ArrowDownRight, ArrowUpRight } from 'lucide-react';
+import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, Upload, Play, Eye, CheckCircle2, Pause, RotateCcw, Download, Copy, Share, Trash2, CreditCard, Globe, XCircle, Clock, HelpCircle, ChevronLeft, Calendar as Calendar$1, Repeat, Edit, MapPin, Users, User, Filter, Move, Archive, EyeOff, Settings, Timer, Palette, ArrowUpDown, FileText, Star, Square, CheckSquare, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Highlighter, Link2, Image as Image$1, Table as Table$1, Undo, Redo, RefreshCw, Wand2, Maximize, Briefcase, MessageSquare, Heart, GraduationCap, Zap, Languages, Lightbulb, Target, GitBranch, ArrowRight, MoreVertical, Trash, ExternalLink, TrendingUp, MessageCircle, Paperclip, Printer, TrendingDown, ZoomOut, ZoomIn, FileSpreadsheet, FileJson, Maximize2, Menu, Bell, CheckCheck, CheckCircle, Settings2, LogOut, Edit3, LayoutGrid, Share2, Save, Video, Music, File, FileDown, ArrowUp, ArrowDown, ChevronsLeft, ChevronsRight, Pin, Sun, Moon, Monitor, Activity, Send, Tag, Flag, CalendarIcon, DollarSign, Github, GitFork, Server, RotateCw, Cpu, MemoryStick, HardDrive, Network, BarChart3, Columns, Grip, Unlock, Minimize2, Map as Map$1, BellOff, ArrowDownRight, ArrowUpRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -10726,7 +10726,20 @@ var EVENT_COLORS = {
   meeting: "bg-blue-500",
   task: "bg-green-500",
   reminder: "bg-yellow-500",
-  event: "bg-purple-500"
+  event: "bg-purple-500",
+  birthday: "bg-pink-500",
+  holiday: "bg-orange-500",
+  conference: "bg-indigo-500"
+};
+var PRIORITY_COLORS = {
+  low: "border-l-4 border-l-gray-400",
+  medium: "border-l-4 border-l-yellow-500",
+  high: "border-l-4 border-l-red-500"
+};
+var STATUS_STYLES = {
+  confirmed: "",
+  tentative: "opacity-70 border-dashed",
+  cancelled: "opacity-50 line-through"
 };
 function Calendar3({
   events = [],
@@ -10734,6 +10747,9 @@ function Calendar3({
   onEventAdd,
   onEventEdit,
   onEventDelete,
+  onDateChange,
+  onViewChange,
+  onEventDrop,
   className,
   showWeekends = true,
   showEventDetails = true,
@@ -10742,6 +10758,23 @@ function Calendar3({
   maxDate,
   highlightToday = true,
   height,
+  defaultView = "month",
+  enableDragDrop = true,
+  enableSearch = true,
+  enableFilters = true,
+  enableExport = true,
+  enableImport = false,
+  enableRecurringEvents = true,
+  enableReminders = true,
+  eventCategories,
+  workingHours = { start: "09:00", end: "18:00" },
+  holidays = [],
+  locale = "en-US",
+  timeFormat = "12h",
+  firstDayOfWeek = 0,
+  theme = "auto",
+  customTheme,
+  compactMode = false,
   showProUpgrade = false
 }) {
   if (showProUpgrade) {
@@ -10759,33 +10792,104 @@ function Calendar3({
   }
   const [currentDate, setCurrentDate] = t__default.useState(/* @__PURE__ */ new Date());
   const [selectedDate, setSelectedDate] = t__default.useState(null);
-  t__default.useState("month");
+  const [view, setView] = t__default.useState(defaultView);
   const [eventDialogOpen, setEventDialogOpen] = t__default.useState(false);
   const [eventDialogMode, setEventDialogMode] = t__default.useState("create");
   const [selectedEvent, setSelectedEvent] = t__default.useState(null);
   const [draggedEvent, setDraggedEvent] = t__default.useState(null);
   const [dragTargetDate, setDragTargetDate] = t__default.useState(null);
+  const [searchQuery, setSearchQuery] = t__default.useState("");
+  const [filterType, setFilterType] = t__default.useState("all");
+  const [filterPriority, setFilterPriority] = t__default.useState("all");
+  t__default.useState(false);
+  const [selectedTags, setSelectedTags] = t__default.useState([]);
+  t__default.useState(/* @__PURE__ */ new Date());
   const today = /* @__PURE__ */ new Date();
   const currentMonth = currentDate.getMonth();
   const currentYear = currentDate.getFullYear();
   const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
   const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0);
   const startDate = new Date(firstDayOfMonth);
-  startDate.setDate(startDate.getDate() - startDate.getDay());
+  const daysToSubtract = (startDate.getDay() - firstDayOfWeek + 7) % 7;
+  startDate.setDate(startDate.getDate() - daysToSubtract);
   const endDate = new Date(lastDayOfMonth);
-  endDate.setDate(endDate.getDate() + (6 - endDate.getDay()));
+  const daysToAdd = (6 - endDate.getDay() + firstDayOfWeek) % 7;
+  endDate.setDate(endDate.getDate() + daysToAdd);
   const calendarDays = [];
   const currentDateIterator = new Date(startDate);
   while (currentDateIterator <= endDate) {
     calendarDays.push(new Date(currentDateIterator));
     currentDateIterator.setDate(currentDateIterator.getDate() + 1);
   }
-  const getEventsForDate = (date) => {
+  t__default.useMemo(() => {
+    const tags = /* @__PURE__ */ new Set();
+    events.forEach((event) => {
+      event.tags?.forEach((tag) => tags.add(tag));
+    });
+    return Array.from(tags);
+  }, [events]);
+  const filteredEvents = t__default.useMemo(() => {
     return events.filter((event) => {
+      if (searchQuery && !event.title.toLowerCase().includes(searchQuery.toLowerCase()) && !event.description?.toLowerCase().includes(searchQuery.toLowerCase())) {
+        return false;
+      }
+      if (filterType !== "all" && event.type !== filterType) {
+        return false;
+      }
+      if (filterPriority !== "all" && event.priority !== filterPriority) {
+        return false;
+      }
+      if (selectedTags.length > 0 && (!event.tags || !event.tags.some((tag) => selectedTags.includes(tag)))) {
+        return false;
+      }
+      return true;
+    });
+  }, [events, searchQuery, filterType, filterPriority, selectedTags]);
+  const getEventsForDate = (date) => {
+    return filteredEvents.filter((event) => {
       const eventDate = new Date(event.date);
+      if (event.recurring) {
+        return isDateInRecurringPattern(date, event);
+      }
       return eventDate.toDateString() === date.toDateString();
     });
   };
+  const isDateInRecurringPattern = (date, event) => {
+    if (!event.recurring)
+      return false;
+    const eventDate = new Date(event.date);
+    const daysDiff = Math.floor((date.getTime() - eventDate.getTime()) / (1e3 * 60 * 60 * 24));
+    if (daysDiff < 0)
+      return false;
+    if (event.recurring.endDate && date > event.recurring.endDate)
+      return false;
+    switch (event.recurring.pattern) {
+      case "daily":
+        return daysDiff % event.recurring.interval === 0;
+      case "weekly":
+        if (daysDiff % (event.recurring.interval * 7) !== 0)
+          return false;
+        if (event.recurring.daysOfWeek) {
+          return event.recurring.daysOfWeek.includes(date.getDay());
+        }
+        return date.getDay() === eventDate.getDay();
+      case "monthly":
+        const monthsDiff = (date.getFullYear() - eventDate.getFullYear()) * 12 + (date.getMonth() - eventDate.getMonth());
+        if (monthsDiff % event.recurring.interval !== 0)
+          return false;
+        if (event.recurring.dayOfMonth) {
+          return date.getDate() === event.recurring.dayOfMonth;
+        }
+        return date.getDate() === eventDate.getDate();
+      case "yearly":
+        const yearsDiff = date.getFullYear() - eventDate.getFullYear();
+        if (yearsDiff % event.recurring.interval !== 0)
+          return false;
+        return date.getMonth() === eventDate.getMonth() && date.getDate() === eventDate.getDate();
+      default:
+        return false;
+    }
+  };
   const isToday2 = (date) => {
     return date.toDateString() === today.toDateString();
   };
@@ -10812,6 +10916,7 @@ function Calendar3({
       newDate.setMonth(currentMonth + 1);
     }
     setCurrentDate(newDate);
+    onDateChange?.(newDate);
   };
   const handleDateClick = (date) => {
     if (isDisabled(date))
@@ -10885,14 +10990,44 @@ function Calendar3({
     onEventDelete?.(eventId);
   };
   const goToToday = () => {
-    setCurrentDate(/* @__PURE__ */ new Date());
-    setSelectedDate(/* @__PURE__ */ new Date());
+    const today2 = /* @__PURE__ */ new Date();
+    setCurrentDate(today2);
+    setSelectedDate(today2);
+    onDateChange?.(today2);
+  };
+  const isHoliday = (date) => {
+    return holidays.some((holiday) => {
+      const holidayDate = new Date(holiday.date);
+      return holidayDate.toDateString() === date.toDateString();
+    });
+  };
+  const getHolidayName = (date) => {
+    const holiday = holidays.find((h2) => {
+      const holidayDate = new Date(h2.date);
+      return holidayDate.toDateString() === date.toDateString();
+    });
+    return holiday?.name;
+  };
+  const formatTime2 = (time) => {
+    if (!time)
+      return "";
+    if (timeFormat === "24h")
+      return time;
+    const [hours, minutes] = time.split(":");
+    const h2 = parseInt(hours);
+    const period = h2 >= 12 ? "PM" : "AM";
+    const displayHours = h2 === 0 ? 12 : h2 > 12 ? h2 - 12 : h2;
+    return `${displayHours}:${minutes} ${period}`;
   };
   const filteredDays = showWeekends ? calendarDays : calendarDays.filter((day) => {
     const dayOfWeek = day.getDay();
     return dayOfWeek !== 0 && dayOfWeek !== 6;
   });
-  const visibleDaysOfWeek = showWeekends ? DAYS_OF_WEEK : DAYS_OF_WEEK.slice(1, 6);
+  const orderedDaysOfWeek = [...DAYS_OF_WEEK.slice(firstDayOfWeek), ...DAYS_OF_WEEK.slice(0, firstDayOfWeek)];
+  const visibleDaysOfWeek = showWeekends ? orderedDaysOfWeek : orderedDaysOfWeek.filter((_, index2) => {
+    const actualDay = (index2 + firstDayOfWeek) % 7;
+    return actualDay !== 0 && actualDay !== 6;
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("w-full max-w-full overflow-hidden", className), style: { height: height ? `${height}px` : void 0 }, children: [
       /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -10932,7 +11067,7 @@ function Calendar3({
         ] })
       ] }) }),
       /* @__PURE__ */ jsx(MoonUICardContentPro, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-1 w-full", children: [
+        view === "month" && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-1 w-full", children: [
           visibleDaysOfWeek.map((day) => /* @__PURE__ */ jsx("div", { className: "p-1 text-center text-xs font-medium text-muted-foreground", children: day }, day)),
           filteredDays.map((date, index2) => {
             const dayEvents = getEventsForDate(date);
@@ -10956,10 +11091,14 @@ function Calendar3({
                 onDrop: (e) => handleDateDrop(date, e),
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
-                    /* @__PURE__ */ jsx("span", { className: cn(
-                      "text-sm font-medium",
-                      isTodayDate && "text-primary font-bold"
-                    ), children: date.getDate() }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { className: cn(
+                        "text-sm font-medium",
+                        isTodayDate && "text-primary font-bold",
+                        isHoliday(date) && "text-orange-600 dark:text-orange-400"
+                      ), children: date.getDate() }),
+                      isHoliday(date) && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-orange-600 dark:text-orange-400 truncate", children: getHolidayName(date) })
+                    ] }),
                     dayEvents.length > 0 && /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "text-xs px-1", children: dayEvents.length })
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1 overflow-hidden", children: [
@@ -10968,9 +11107,11 @@ function Calendar3({
                       {
                         className: cn(
                           "text-xs p-1 mb-1 rounded text-white cursor-move group relative select-none block w-full truncate",
-                          event.color || EVENT_COLORS[event.type || "event"]
+                          event.color || EVENT_COLORS[event.type || "event"],
+                          event.priority && PRIORITY_COLORS[event.priority],
+                          event.status && STATUS_STYLES[event.status]
                         ),
-                        draggable: !disabled,
+                        draggable: !disabled && enableDragDrop,
                         onClick: (e) => handleEventClick(event, e),
                         onDragStart: (e) => handleEventDragStart(event, e),
                         onDragEnd: handleEventDragEnd,
@@ -10979,7 +11120,11 @@ function Calendar3({
                         },
                         children: [
                           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                            /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: event.title }),
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-1 min-w-0", children: [
+                              event.isPrivate && /* @__PURE__ */ jsx(Lock, { className: "h-3 w-3 flex-shrink-0" }),
+                              event.recurring && /* @__PURE__ */ jsx(Repeat, { className: "h-3 w-3 flex-shrink-0" }),
+                              /* @__PURE__ */ jsx("span", { className: "truncate", children: event.title })
+                            ] }),
                             showEventDetails && /* @__PURE__ */ jsxs("div", { className: "hidden group-hover:flex items-center gap-1 ml-1", children: [
                               /* @__PURE__ */ jsx(
                                 MoonUIButtonPro,
@@ -11003,9 +11148,9 @@ function Calendar3({
                               )
                             ] })
                           ] }),
-                          event.startTime && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mt-1", children: [
+                          event.startTime && !compactMode && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mt-1", children: [
                             /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
-                            /* @__PURE__ */ jsx("span", { children: event.startTime })
+                            /* @__PURE__ */ jsx("span", { className: "text-[10px]", children: formatTime2(event.startTime) })
                           ] })
                         ]
                       },
@@ -11023,7 +11168,206 @@ function Calendar3({
             );
           })
         ] }),
-        selectedDate && /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4 bg-muted/50", children: [
+        view === "week" && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-8 gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Time" }),
+            Array.from({ length: 7 }, (_, i) => {
+              const date = new Date(currentDate);
+              date.setDate(date.getDate() - date.getDay() + i);
+              return /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: DAYS_OF_WEEK[i] }),
+                /* @__PURE__ */ jsx("div", { className: cn(
+                  "text-sm font-medium",
+                  isToday2(date) && "text-primary"
+                ), children: date.getDate() })
+              ] }, i);
+            })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "max-h-[500px] overflow-y-auto", children: Array.from({ length: 24 }, (_, hour) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-8 border-b last:border-b-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "p-2 text-xs text-muted-foreground border-r", children: formatTime2(`${hour.toString().padStart(2, "0")}:00`) }),
+            Array.from({ length: 7 }, (_2, dayIndex) => {
+              const date = new Date(currentDate);
+              date.setDate(date.getDate() - date.getDay() + dayIndex);
+              const hourEvents = getEventsForDate(date).filter((event) => {
+                if (!event.startTime)
+                  return false;
+                const eventHour = parseInt(event.startTime.split(":")[0]);
+                return eventHour === hour;
+              });
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "p-1 min-h-[60px] border-r last:border-r-0 hover:bg-muted/50 transition-colors",
+                    isToday2(date) && "bg-primary/5"
+                  ),
+                  onClick: () => handleDateClick(date),
+                  children: hourEvents.map((event) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "text-xs p-1 rounded text-white mb-1 cursor-pointer",
+                        event.color || EVENT_COLORS[event.type || "event"]
+                      ),
+                      onClick: (e) => handleEventClick(event, e),
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "font-medium truncate", children: event.title }),
+                        event.location && /* @__PURE__ */ jsx("div", { className: "text-[10px] opacity-80 truncate", children: event.location })
+                      ]
+                    },
+                    event.id
+                  ))
+                },
+                dayIndex
+              );
+            })
+          ] }, hour)) }) })
+        ] }),
+        view === "day" && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: currentDate.toLocaleDateString(locale, {
+            weekday: "long",
+            year: "numeric",
+            month: "long",
+            day: "numeric"
+          }) }) }),
+          /* @__PURE__ */ jsx("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "max-h-[500px] overflow-y-auto", children: Array.from({ length: 24 }, (_, hour) => {
+            const hourEvents = getEventsForDate(currentDate).filter((event) => {
+              if (!event.startTime)
+                return false;
+              const eventHour = parseInt(event.startTime.split(":")[0]);
+              return eventHour === hour;
+            });
+            return /* @__PURE__ */ jsxs("div", { className: "flex border-b last:border-b-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-20 p-3 text-sm text-muted-foreground border-r", children: formatTime2(`${hour.toString().padStart(2, "0")}:00`) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 p-2 min-h-[80px]", children: hourEvents.map((event) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "p-2 rounded text-white mb-2 cursor-pointer",
+                    event.color || EVENT_COLORS[event.type || "event"]
+                  ),
+                  onClick: (e) => handleEventClick(event, e),
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("div", { className: "font-medium", children: event.title }),
+                      event.description && /* @__PURE__ */ jsx("div", { className: "text-sm opacity-80", children: event.description }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs mt-1", children: [
+                        event.startTime && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                          /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+                          formatTime2(event.startTime),
+                          " - ",
+                          formatTime2(event.endTime || event.startTime)
+                        ] }),
+                        event.location && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                          /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3" }),
+                          event.location
+                        ] })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+                      /* @__PURE__ */ jsx(
+                        MoonUIButtonPro,
+                        {
+                          variant: "ghost",
+                          size: "sm",
+                          className: "h-6 w-6 p-0 text-white/80 hover:text-white",
+                          onClick: (e) => handleEventEdit(event, e),
+                          children: /* @__PURE__ */ jsx(Edit, { className: "h-3 w-3" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        MoonUIButtonPro,
+                        {
+                          variant: "ghost",
+                          size: "sm",
+                          className: "h-6 w-6 p-0 text-white/80 hover:text-white",
+                          onClick: (e) => handleEventDelete(event, e),
+                          children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+                        }
+                      )
+                    ] })
+                  ] })
+                },
+                event.id
+              )) })
+            ] }, hour);
+          }) }) })
+        ] }),
+        view === "agenda" && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx("div", { className: "max-h-[500px] overflow-y-auto space-y-4", children: Array.from({ length: 30 }, (_, i) => {
+          const date = new Date(currentDate);
+          date.setDate(date.getDate() + i);
+          const dayEvents = getEventsForDate(date);
+          if (dayEvents.length === 0)
+            return null;
+          return /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4", children: [
+            /* @__PURE__ */ jsx("h4", { className: "font-medium mb-3", children: date.toLocaleDateString(locale, {
+              weekday: "long",
+              year: "numeric",
+              month: "long",
+              day: "numeric"
+            }) }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-2", children: dayEvents.map((event) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-start gap-3 p-3 rounded-lg border hover:bg-muted/50 transition-colors cursor-pointer",
+                onClick: () => onEventClick?.(event),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: cn(
+                    "w-3 h-3 rounded-full mt-1 flex-shrink-0",
+                    event.color || EVENT_COLORS[event.type || "event"]
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                      /* @__PURE__ */ jsx("h5", { className: "font-medium", children: event.title }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+                        /* @__PURE__ */ jsx(
+                          MoonUIButtonPro,
+                          {
+                            variant: "ghost",
+                            size: "sm",
+                            className: "h-7 w-7 p-0",
+                            onClick: (e) => handleEventEdit(event, e),
+                            children: /* @__PURE__ */ jsx(Edit, { className: "h-3 w-3" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          MoonUIButtonPro,
+                          {
+                            variant: "ghost",
+                            size: "sm",
+                            className: "h-7 w-7 p-0",
+                            onClick: (e) => handleEventDelete(event, e),
+                            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+                          }
+                        )
+                      ] })
+                    ] }),
+                    event.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: event.description }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-xs text-muted-foreground mt-2", children: [
+                      event.startTime && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+                        formatTime2(event.startTime),
+                        " - ",
+                        formatTime2(event.endTime || event.startTime)
+                      ] }),
+                      event.location && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx(MapPin, { className: "h-3 w-3" }),
+                        event.location
+                      ] }),
+                      event.attendees && event.attendees.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx(Users, { className: "h-3 w-3" }),
+                        event.attendees.length,
+                        " attendees"
+                      ] })
+                    ] })
+                  ] })
+                ]
+              },
+              event.id
+            )) })
+          ] }, i);
+        }).filter(Boolean) }) }),
+        selectedDate && view === "month" && /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4 bg-muted/50", children: [
           /* @__PURE__ */ jsx("h4", { className: "font-medium mb-2", children: selectedDate.toLocaleDateString("en-US", {
             weekday: "long",
             year: "numeric",
@@ -30383,11 +30727,11 @@ var ReactNodeViewContext = createContext({
 var useReactNodeView = () => useContext(ReactNodeViewContext);
 t__default.forwardRef((props, ref) => {
   const { onDragStart } = useReactNodeView();
-  const Tag4 = props.as || "div";
+  const Tag5 = props.as || "div";
   return (
     // @ts-ignore
     /* @__PURE__ */ jsx(
-      Tag4,
+      Tag5,
       {
         ...props,
         ref,
@@ -55523,7 +55867,7 @@ function Timeline({
           ] })
         ] }),
         /* @__PURE__ */ jsx(MoonUICardContentPro, { className: cn(
-          compactMode && "pt-0",
+          compactMode ? "pt-2" : "pt-6",
           "relative"
         ), children: filteredAndSortedEvents.length > 0 ? renderTimeline() : /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
           /* @__PURE__ */ jsx(Clock, { className: "h-12 w-12 mx-auto mb-4 text-muted-foreground" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.15.2",
+  "version": "2.16.0",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",