@moontra/moonui-pro 2.14.2 → 2.15.0

package/dist/index.mjs

@@ -3,12 +3,12 @@ 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, TrendingUp, 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, MessageCircle, Tag, MoreVertical, Paperclip, ExternalLink, CalendarIcon, DollarSign, Users, Github, GitFork, Server, RotateCw, Cpu, MemoryStick, HardDrive, Network, BarChart3, Columns, Flag, Grip, Unlock, Minimize2, Map as Map$1, Target, 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, 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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { format, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterval, getDay, startOfWeek, endOfWeek, isSameMonth, isToday, isSameDay, startOfDay, endOfDay, subDays, formatDistanceToNow } from 'date-fns';
-import { motion, AnimatePresence, useMotionValue, useSpring, useTransform, animate, useDragControls } from 'framer-motion';
+import { motion, AnimatePresence, useMotionValue, useSpring, useTransform, animate, Reorder, useDragControls } from 'framer-motion';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
@@ -54766,57 +54766,187 @@ var SwipeableCard = t__default.forwardRef(
   }
 );
 SwipeableCard.displayName = "SwipeableCard";
-var EVENT_COLORS2 = {
+var timelineVariants = cva("w-full", {
+  variants: {
+    theme: {
+      default: "",
+      minimal: "border-0 shadow-none",
+      detailed: "border-2",
+      compact: "p-0"
+    }
+  },
+  defaultVariants: {
+    theme: "default"
+  }
+});
+var DEFAULT_COLORS = {
   success: "bg-green-500 border-green-500",
   warning: "bg-yellow-500 border-yellow-500",
   error: "bg-red-500 border-red-500",
   info: "bg-blue-500 border-blue-500",
-  pending: "bg-gray-400 border-gray-400"
+  pending: "bg-gray-400 border-gray-400",
+  milestone: "bg-purple-500 border-purple-500",
+  custom: "bg-slate-500 border-slate-500"
 };
-var EVENT_ICONS = {
+var DEFAULT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-white" }),
   warning: /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4 text-white" }),
   error: /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4 text-white" }),
   info: /* @__PURE__ */ jsx(Circle, { className: "h-4 w-4 text-white" }),
-  pending: /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-white" })
+  pending: /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-white" }),
+  milestone: /* @__PURE__ */ jsx(Flag, { className: "h-4 w-4 text-white" }),
+  custom: /* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4 text-white" })
 };
-var EVENT_TEXT_COLORS = {
-  success: "text-green-700",
-  warning: "text-yellow-700",
-  error: "text-red-700",
-  info: "text-blue-700",
-  pending: "text-gray-700"
+var TEXT_COLORS = {
+  success: "text-green-700 dark:text-green-400",
+  warning: "text-yellow-700 dark:text-yellow-400",
+  error: "text-red-700 dark:text-red-400",
+  info: "text-blue-700 dark:text-blue-400",
+  pending: "text-gray-700 dark:text-gray-400",
+  milestone: "text-purple-700 dark:text-purple-400",
+  custom: "text-slate-700 dark:text-slate-400"
+};
+var animationVariants = {
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  },
+  slide: {
+    initial: { opacity: 0, x: -20 },
+    animate: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: 20 }
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.8 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.8 }
+  }
 };
 function Timeline({
-  events,
+  events: initialEvents,
   onEventClick,
+  onEventEdit,
+  onEventDelete,
+  onEventsReorder,
   className,
+  layout = "vertical",
+  theme = "default",
+  animation = "fade",
+  groupBy = "none",
   showUserInfo = true,
   showMetadata = true,
   showRelativeTime = true,
-  groupByDate = false,
-  orientation = "vertical",
-  compact = false,
-  interactive = true
+  showSearch = true,
+  showFilter = true,
+  showExport = true,
+  eventRenderer,
+  connectorRenderer,
+  iconRenderer,
+  colorScheme = DEFAULT_COLORS,
+  draggable = false,
+  expandable = true,
+  editable = false,
+  selectable = false,
+  virtualScroll = false,
+  maxEventsPerGroup = 20,
+  printMode = false,
+  compactMode = false,
+  parallaxEffect = false,
+  gradientConnectors = false,
+  animatedProgress = false,
+  ariaLabel = "Timeline of events",
+  keyboardNavigation = true,
+  ...props
 }) {
-  const sortedEvents = [...events].sort((a, b) => b.date.getTime() - a.date.getTime());
-  const formatDate2 = (date) => {
+  const [events, setEvents] = useState(initialEvents);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterType, setFilterType] = useState("all");
+  const [selectedEvents, setSelectedEvents] = useState(/* @__PURE__ */ new Set());
+  const [expandedEvents, setExpandedEvents] = useState(/* @__PURE__ */ new Set());
+  const [focusedEventId, setFocusedEventId] = useState(null);
+  const timelineRef = useRef(null);
+  const eventRefs = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    setEvents(initialEvents);
+  }, [initialEvents]);
+  useEffect(() => {
+    if (!keyboardNavigation)
+      return;
+    const handleKeyDown3 = (e) => {
+      const currentIndex = events.findIndex((event) => event.id === focusedEventId);
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          e.preventDefault();
+          if (currentIndex < events.length - 1) {
+            const nextEvent = events[currentIndex + 1];
+            setFocusedEventId(nextEvent.id);
+            eventRefs.current.get(nextEvent.id)?.focus();
+          }
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          e.preventDefault();
+          if (currentIndex > 0) {
+            const prevEvent = events[currentIndex - 1];
+            setFocusedEventId(prevEvent.id);
+            eventRefs.current.get(prevEvent.id)?.focus();
+          }
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (focusedEventId) {
+            const event = events.find((e2) => e2.id === focusedEventId);
+            if (event && onEventClick) {
+              onEventClick(event);
+            }
+          }
+          break;
+        case "Delete":
+          if (editable && focusedEventId && onEventDelete) {
+            const event = events.find((e2) => e2.id === focusedEventId);
+            if (event) {
+              onEventDelete(event);
+            }
+          }
+          break;
+      }
+    };
+    timelineRef.current?.addEventListener("keydown", handleKeyDown3);
+    return () => timelineRef.current?.removeEventListener("keydown", handleKeyDown3);
+  }, [keyboardNavigation, events, focusedEventId, onEventClick, onEventDelete, editable]);
+  const formatDate2 = useCallback((date) => {
     return date.toLocaleDateString("en-US", {
       year: "numeric",
       month: "long",
       day: "numeric"
     });
-  };
-  const formatTime2 = (date) => {
+  }, []);
+  const formatTime2 = useCallback((date) => {
     return date.toLocaleTimeString("en-US", {
       hour: "2-digit",
       minute: "2-digit",
       hour12: true
     });
-  };
-  const getRelativeTime = (date) => {
+  }, []);
+  const getRelativeTime = useCallback((date) => {
     const now = /* @__PURE__ */ new Date();
     const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1e3);
+    if (diffInSeconds < 0) {
+      const futureDiff = Math.abs(diffInSeconds);
+      if (futureDiff < 3600) {
+        const minutes = Math.floor(futureDiff / 60);
+        return `In ${minutes} minute${minutes !== 1 ? "s" : ""}`;
+      } else if (futureDiff < 86400) {
+        const hours = Math.floor(futureDiff / 3600);
+        return `In ${hours} hour${hours !== 1 ? "s" : ""}`;
+      } else {
+        const days = Math.floor(futureDiff / 86400);
+        return `In ${days} day${days !== 1 ? "s" : ""}`;
+      }
+    }
     if (diffInSeconds < 60) {
       return "Just now";
     } else if (diffInSeconds < 3600) {
@@ -54825,76 +54955,291 @@ function Timeline({
     } else if (diffInSeconds < 86400) {
       const hours = Math.floor(diffInSeconds / 3600);
       return `${hours} hour${hours > 1 ? "s" : ""} ago`;
-    } else if (diffInSeconds < 2592e3) {
+    } else if (diffInSeconds < 604800) {
       const days = Math.floor(diffInSeconds / 86400);
       return `${days} day${days > 1 ? "s" : ""} ago`;
     } else {
       return formatDate2(date);
     }
-  };
-  const getInitials4 = (name) => {
-    return name.split(" ").map((n) => n[0]).join("").toUpperCase();
-  };
-  const groupEventsByDate = (events2) => {
+  }, [formatDate2]);
+  const getInitials4 = useCallback((name) => {
+    return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  }, []);
+  const groupEventsByDate = useCallback((events2) => {
     const groups = {};
     events2.forEach((event) => {
-      const dateKey = formatDate2(event.date);
+      let dateKey;
+      switch (groupBy) {
+        case "week":
+          const weekStart = new Date(event.date);
+          weekStart.setDate(weekStart.getDate() - weekStart.getDay());
+          dateKey = `Week of ${formatDate2(weekStart)}`;
+          break;
+        case "month":
+          dateKey = event.date.toLocaleDateString("en-US", { year: "numeric", month: "long" });
+          break;
+        case "year":
+          dateKey = event.date.getFullYear().toString();
+          break;
+        case "date":
+        default:
+          dateKey = formatDate2(event.date);
+      }
       if (!groups[dateKey]) {
         groups[dateKey] = [];
       }
       groups[dateKey].push(event);
     });
     return groups;
-  };
-  const handleEventClick = (event) => {
-    if (interactive && onEventClick) {
-      onEventClick(event);
+  }, [groupBy, formatDate2]);
+  const filteredAndSortedEvents = useMemo(() => {
+    let filtered = [...events];
+    if (searchQuery) {
+      filtered = filtered.filter(
+        (event) => event.title.toLowerCase().includes(searchQuery.toLowerCase()) || event.description?.toLowerCase().includes(searchQuery.toLowerCase()) || event.metadata?.tags?.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))
+      );
     }
-  };
-  const renderEvent = (event, index2, isLast) => {
-    const eventColor = event.color || EVENT_COLORS2[event.type];
-    const eventIcon = event.icon || EVENT_ICONS[event.type];
-    const textColor = EVENT_TEXT_COLORS[event.type];
-    return /* @__PURE__ */ jsxs(
+    if (filterType !== "all") {
+      filtered = filtered.filter((event) => event.type === filterType);
+    }
+    return filtered.sort((a, b) => b.date.getTime() - a.date.getTime());
+  }, [events, searchQuery, filterType]);
+  const handleEventClick = useCallback((event) => {
+    if (selectable) {
+      setSelectedEvents((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(event.id)) {
+          newSet.delete(event.id);
+        } else {
+          newSet.add(event.id);
+        }
+        return newSet;
+      });
+    }
+    if (expandable && "subEvents" in event) {
+      setExpandedEvents((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(event.id)) {
+          newSet.delete(event.id);
+        } else {
+          newSet.add(event.id);
+        }
+        return newSet;
+      });
+    }
+    onEventClick?.(event);
+  }, [selectable, expandable, onEventClick]);
+  const handleExport = useCallback(() => {
+    const dataStr = JSON.stringify(filteredAndSortedEvents, null, 2);
+    const dataUri = "data:application/json;charset=utf-8," + encodeURIComponent(dataStr);
+    const exportFileDefaultName = `timeline-export-${( new Date()).toISOString()}.json`;
+    const linkElement = document.createElement("a");
+    linkElement.setAttribute("href", dataUri);
+    linkElement.setAttribute("download", exportFileDefaultName);
+    linkElement.click();
+  }, [filteredAndSortedEvents]);
+  const handlePrint = useCallback(() => {
+    window.print();
+  }, []);
+  const renderEventIcon = useCallback((event) => {
+    if (iconRenderer) {
+      return iconRenderer(event);
+    }
+    if (event.icon) {
+      return event.icon;
+    }
+    if ("milestone" in event) {
+      return /* @__PURE__ */ jsx(Target, { className: "h-4 w-4 text-white" });
+    }
+    if ("recurrence" in event) {
+      return /* @__PURE__ */ jsx(Repeat, { className: "h-4 w-4 text-white" });
+    }
+    if ("subEvents" in event) {
+      return /* @__PURE__ */ jsx(GitBranch, { className: "h-4 w-4 text-white" });
+    }
+    return DEFAULT_ICONS[event.type] || DEFAULT_ICONS.custom;
+  }, [iconRenderer]);
+  const renderConnector = useCallback((fromEvent, toEvent, isLast) => {
+    if (connectorRenderer) {
+      return connectorRenderer(fromEvent, toEvent);
+    }
+    if (isLast)
+      return null;
+    const baseClasses = cn(
+      "absolute",
+      layout === "horizontal" ? "h-0.5 top-4" : "w-0.5 left-4 -ml-px",
+      gradientConnectors && "bg-gradient-to-b from-border to-transparent"
+    );
+    if (layout === "horizontal") {
+      return /* @__PURE__ */ jsx("div", { className: cn(baseClasses, "bg-border"), style: { width: "100px" } });
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          baseClasses,
+          "bg-border",
+          layout === "alternating" && "hidden"
+        ),
+        style: {
+          height: "calc(100% + 2rem)",
+          top: "2rem"
+        }
+      }
+    );
+  }, [connectorRenderer, layout, gradientConnectors]);
+  const renderEvent = useCallback((event, index2, isLast = false) => {
+    const eventColor = event.color || colorScheme[event.type] || DEFAULT_COLORS[event.type];
+    TEXT_COLORS[event.type] || TEXT_COLORS.custom;
+    const isSelected = selectedEvents.has(event.id);
+    const isExpanded = expandedEvents.has(event.id);
+    const isFocused = focusedEventId === event.id;
+    if (eventRenderer) {
+      return eventRenderer(event, index2);
+    }
+    const isRangeEvent = "endDate" in event;
+    const isNestedEvent = "subEvents" in event;
+    const isMilestoneEvent = "milestone" in event;
+    const eventContent = /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: (el) => {
+          if (el)
+            eventRefs.current.set(event.id, el);
+        },
+        tabIndex: keyboardNavigation ? 0 : -1,
         className: cn(
           "relative flex gap-4",
-          compact ? "pb-4" : "pb-8",
-          interactive && "cursor-pointer hover:bg-muted/50 rounded-lg p-2 -m-2 transition-colors"
+          compactMode ? "pb-2" : "pb-8",
+          layout === "alternating" && index2 % 2 === 0 && "flex-row-reverse",
+          layout === "horizontal" && "flex-col items-center",
+          "cursor-pointer rounded-lg p-3 -m-1 transition-all duration-200",
+          "hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-ring",
+          isSelected && "bg-muted/70",
+          isFocused && "ring-2 ring-ring",
+          printMode && "print:break-inside-avoid"
         ),
         onClick: () => handleEventClick(event),
+        onFocus: () => setFocusedEventId(event.id),
+        role: "button",
+        "aria-label": `Event: ${event.title}`,
+        "aria-expanded": isNestedEvent ? isExpanded : void 0,
         children: [
-          orientation === "vertical" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-            /* @__PURE__ */ jsx("div", { className: cn(
-              "flex items-center justify-center w-8 h-8 rounded-full border-2 bg-background",
-              eventColor
-            ), children: eventIcon }),
-            !isLast && /* @__PURE__ */ jsx("div", { className: "w-0.5 h-full bg-border mt-2" })
+          /* @__PURE__ */ jsxs("div", { className: cn(
+            "flex flex-col items-center",
+            layout === "horizontal" && "flex-row"
+          ), children: [
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: cn(
+                  "flex items-center justify-center rounded-full border-2 bg-background z-10",
+                  isMilestoneEvent ? "w-10 h-10" : "w-8 h-8",
+                  eventColor,
+                  isSelected && "ring-2 ring-ring ring-offset-2"
+                ),
+                whileHover: { scale: 1.1 },
+                whileTap: { scale: 0.95 },
+                children: renderEventIcon(event)
+              }
+            ),
+            !isLast && renderConnector(event, events[index2 + 1], isLast)
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(
+            "flex-1 min-w-0",
+            layout === "alternating" && index2 % 2 === 0 && "text-right"
+          ), children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2 mb-2", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx("h4", { className: cn(
-                  "font-medium text-sm",
-                  compact ? "mb-1" : "mb-2"
-                ), children: event.title }),
-                event.description && /* @__PURE__ */ jsx("p", { className: cn(
-                  "text-muted-foreground text-sm",
-                  compact ? "mb-1" : "mb-2"
-                ), children: event.description })
+                /* @__PURE__ */ jsxs("h4", { className: cn(
+                  "font-semibold",
+                  compactMode ? "text-sm" : "text-base",
+                  isMilestoneEvent && "text-lg"
+                ), children: [
+                  event.title,
+                  isMilestoneEvent && /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "ml-2 bg-purple-500", children: "Milestone" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+                  showRelativeTime ? /* @__PURE__ */ jsx("span", { children: getRelativeTime(event.date) }) : /* @__PURE__ */ jsx("span", { children: formatTime2(event.date) }),
+                  isRangeEvent && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3" }),
+                    /* @__PURE__ */ jsx("span", { children: formatTime2(event.endDate) })
+                  ] })
+                ] })
+              ] }),
+              (editable || event.metadata?.externalLink) && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" }) }) }),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
+                  editable && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onEventEdit?.(event), children: [
+                      /* @__PURE__ */ jsx(Edit, { className: "mr-2 h-4 w-4" }),
+                      "Edit"
+                    ] }),
+                    /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onEventDelete?.(event), children: [
+                      /* @__PURE__ */ jsx(Trash, { className: "mr-2 h-4 w-4" }),
+                      "Delete"
+                    ] }),
+                    /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {})
+                  ] }),
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => navigator.clipboard.writeText(event.title), children: [
+                    /* @__PURE__ */ jsx(Copy, { className: "mr-2 h-4 w-4" }),
+                    "Copy"
+                  ] }),
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { children: [
+                    /* @__PURE__ */ jsx(Share, { className: "mr-2 h-4 w-4" }),
+                    "Share"
+                  ] }),
+                  event.metadata?.externalLink && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => window.open(event.metadata?.externalLink, "_blank"), children: [
+                    /* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }),
+                    "View Details"
+                  ] })
+                ] })
+              ] })
+            ] }),
+            event.description && /* @__PURE__ */ jsx("p", { className: cn(
+              "text-muted-foreground mb-2",
+              compactMode ? "text-xs" : "text-sm"
+            ), children: event.description }),
+            isMilestoneEvent && event.milestone && /* @__PURE__ */ jsxs("div", { className: "bg-purple-50 dark:bg-purple-950/20 rounded-md p-3 mb-2", children: [
+              event.milestone.target && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+                /* @__PURE__ */ jsx(Target, { className: "h-4 w-4 text-purple-600" }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Target:" }),
+                /* @__PURE__ */ jsx("span", { children: event.milestone.target })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
-                showRelativeTime ? /* @__PURE__ */ jsx("span", { children: getRelativeTime(event.date) }) : /* @__PURE__ */ jsx("span", { children: formatTime2(event.date) }),
-                /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "outline", className: cn("text-xs", textColor), children: event.type })
+              event.milestone.achievement && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm mt-1", children: [
+                /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-purple-600" }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Achievement:" }),
+                /* @__PURE__ */ jsx("span", { children: event.milestone.achievement })
               ] })
             ] }),
+            event.metadata?.progress !== void 0 && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs mb-1", children: [
+                /* @__PURE__ */ jsx("span", { children: "Progress" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  event.metadata.progress,
+                  "%"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "w-full bg-muted rounded-full h-2 overflow-hidden", children: /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  className: "h-full bg-primary",
+                  initial: { width: 0 },
+                  animate: { width: `${event.metadata.progress}%` },
+                  transition: { duration: 0.5, ease: "easeOut" }
+                }
+              ) })
+            ] }),
             showUserInfo && event.user && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
               /* @__PURE__ */ jsxs(MoonUIAvatarPro, { className: "h-6 w-6", children: [
                 /* @__PURE__ */ jsx(MoonUIAvatarImagePro, { src: event.user.avatar }),
                 /* @__PURE__ */ jsx(MoonUIAvatarFallbackPro, { className: "text-xs", children: getInitials4(event.user.name) })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: event.user.name })
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: event.user.name }),
+                event.user.role && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: event.user.role })
+              ] })
             ] }),
             showMetadata && event.metadata && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 text-xs text-muted-foreground", children: [
               event.metadata.duration && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
@@ -54905,56 +55250,292 @@ function Timeline({
                 /* @__PURE__ */ jsx(Calendar$1, { className: "h-3 w-3" }),
                 /* @__PURE__ */ jsx("span", { children: event.metadata.location })
               ] }),
-              event.metadata.comments && event.metadata.comments > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              event.metadata.comments !== void 0 && event.metadata.comments > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                 /* @__PURE__ */ jsx(MessageCircle, { className: "h-3 w-3" }),
                 /* @__PURE__ */ jsx("span", { children: event.metadata.comments })
               ] }),
-              event.metadata.attachments && event.metadata.attachments > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              event.metadata.attachments !== void 0 && event.metadata.attachments > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                 /* @__PURE__ */ jsx(Paperclip, { className: "h-3 w-3" }),
                 /* @__PURE__ */ jsx("span", { children: event.metadata.attachments })
               ] }),
-              event.metadata.externalLink && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" }),
-                /* @__PURE__ */ jsx("span", { children: "View details" })
-              ] })
+              event.metadata.priority && /* @__PURE__ */ jsx(
+                MoonUIBadgePro,
+                {
+                  variant: event.metadata.priority === "high" ? "destructive" : event.metadata.priority === "medium" ? "outline" : "secondary",
+                  className: "text-xs",
+                  children: event.metadata.priority
+                }
+              )
             ] }),
-            event.metadata?.tags && event.metadata.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-2", children: event.metadata.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "text-xs", children: tag }, tagIndex)) })
+            event.metadata?.tags && event.metadata.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-2", children: event.metadata.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "outline", className: "text-xs", children: tag }, tagIndex)) }),
+            isNestedEvent && isExpanded && event.subEvents && /* @__PURE__ */ jsx("div", { className: "mt-3 ml-4 pl-4 border-l-2 border-muted", children: event.subEvents.map((subEvent, subIndex) => /* @__PURE__ */ jsx("div", { className: "mb-2 last:mb-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: cn(
+                "w-2 h-2 rounded-full mt-1.5",
+                colorScheme[subEvent.type] || DEFAULT_COLORS[subEvent.type]
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx("h5", { className: "text-sm font-medium", children: subEvent.title }),
+                subEvent.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subEvent.description }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: getRelativeTime(subEvent.date) })
+              ] })
+            ] }) }, subEvent.id)) }),
+            isNestedEvent && event.subEvents && event.subEvents.length > 0 && /* @__PURE__ */ jsx(
+              MoonUIButtonPro,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "mt-2 h-6 text-xs",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setExpandedEvents((prev) => {
+                    const newSet = new Set(prev);
+                    if (newSet.has(event.id)) {
+                      newSet.delete(event.id);
+                    } else {
+                      newSet.add(event.id);
+                    }
+                    return newSet;
+                  });
+                },
+                children: isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(ChevronDown, { className: "mr-1 h-3 w-3" }),
+                  "Hide ",
+                  event.subEvents.length,
+                  " sub-events"
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(ChevronRight, { className: "mr-1 h-3 w-3" }),
+                  "Show ",
+                  event.subEvents.length,
+                  " sub-events"
+                ] })
+              }
+            )
           ] })
         ]
+      }
+    );
+    if (draggable && onEventsReorder) {
+      return /* @__PURE__ */ jsx(
+        Reorder.Item,
+        {
+          value: event,
+          dragListener: false,
+          dragControls: void 0,
+          children: eventContent
+        },
+        event.id
+      );
+    }
+    const variants = animation !== "none" ? animationVariants[animation] : void 0;
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        variants,
+        initial: variants?.initial,
+        animate: variants?.animate,
+        exit: variants?.exit,
+        transition: { duration: 0.3, delay: index2 * 0.05 },
+        children: eventContent
       },
       event.id
     );
-  };
-  const renderGroupedEvents = () => {
-    const groups = groupEventsByDate(sortedEvents);
-    return Object.entries(groups).map(([date, events2], groupIndex) => /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
-      /* @__PURE__ */ jsx("div", { className: "sticky top-0 bg-background/80 backdrop-blur-sm border-b p-2 mb-4", children: /* @__PURE__ */ jsx("h3", { className: "font-medium text-sm text-muted-foreground", children: date }) }),
-      events2.map((event, index2) => renderEvent(event, index2, index2 === events2.length - 1))
-    ] }, date));
-  };
-  return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { children: [
-      /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Clock, { className: "h-5 w-5" }),
-        "Timeline"
-      ] }),
-      /* @__PURE__ */ jsxs(MoonUICardDescriptionPro, { children: [
-        sortedEvents.length,
-        " event",
-        sortedEvents.length !== 1 ? "s" : "",
-        " tracked"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(MoonUICardContentPro, { children: sortedEvents.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn(
+  }, [
+    eventRenderer,
+    colorScheme,
+    selectedEvents,
+    expandedEvents,
+    focusedEventId,
+    keyboardNavigation,
+    layout,
+    compactMode,
+    printMode,
+    handleEventClick,
+    renderEventIcon,
+    renderConnector,
+    events,
+    showRelativeTime,
+    getRelativeTime,
+    formatTime2,
+    editable,
+    onEventEdit,
+    onEventDelete,
+    showUserInfo,
+    getInitials4,
+    showMetadata,
+    draggable,
+    onEventsReorder,
+    animation
+  ]);
+  const renderGroupedEvents = useCallback(() => {
+    const groups = groupEventsByDate(filteredAndSortedEvents);
+    return Object.entries(groups).map(([dateGroup, groupEvents], groupIndex) => {
+      const displayEvents = maxEventsPerGroup ? groupEvents.slice(0, maxEventsPerGroup) : groupEvents;
+      const remainingCount = groupEvents.length - displayEvents.length;
+      return /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+        /* @__PURE__ */ jsx("div", { className: cn(
+          "sticky top-0 z-20 bg-background/80 backdrop-blur-sm border-b p-3 mb-4 -mx-6 px-6",
+          printMode && "print:relative print:bg-transparent"
+        ), children: /* @__PURE__ */ jsxs("h3", { className: "font-semibold text-sm text-muted-foreground flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { children: dateGroup }),
+          /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "secondary", className: "text-xs", children: [
+            groupEvents.length,
+            " event",
+            groupEvents.length !== 1 ? "s" : ""
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: displayEvents.map(
+          (event, index2) => renderEvent(event, index2, index2 === displayEvents.length - 1)
+        ) }),
+        remainingCount > 0 && /* @__PURE__ */ jsxs(
+          MoonUIButtonPro,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "w-full mt-2",
+            onClick: () => {
+              console.log(`Show ${remainingCount} more events`);
+            },
+            children: [
+              "Show ",
+              remainingCount,
+              " more event",
+              remainingCount !== 1 ? "s" : ""
+            ]
+          }
+        )
+      ] }, dateGroup);
+    });
+  }, [groupEventsByDate, filteredAndSortedEvents, maxEventsPerGroup, printMode, renderEvent]);
+  const renderTimeline = () => {
+    const content = groupBy !== "none" ? renderGroupedEvents() : /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: draggable && onEventsReorder ? /* @__PURE__ */ jsx(
+      Reorder.Group,
+      {
+        axis: layout === "horizontal" ? "x" : "y",
+        values: filteredAndSortedEvents,
+        onReorder: (newOrder) => {
+          setEvents(newOrder);
+          onEventsReorder(newOrder);
+        },
+        className: cn(
+          "space-y-0",
+          layout === "horizontal" && "flex overflow-x-auto gap-6 pb-4"
+        ),
+        children: filteredAndSortedEvents.map(
+          (event, index2) => renderEvent(event, index2, index2 === filteredAndSortedEvents.length - 1)
+        )
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: cn(
       "space-y-0",
-      orientation === "horizontal" && "flex overflow-x-auto gap-6"
-    ), children: groupByDate ? renderGroupedEvents() : sortedEvents.map(
-      (event, index2) => renderEvent(event, index2, index2 === sortedEvents.length - 1)
-    ) }) : /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
-      /* @__PURE__ */ jsx(Clock, { className: "h-12 w-12 mx-auto mb-4 text-muted-foreground" }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No events to display" })
-    ] }) })
-  ] });
+      layout === "horizontal" && "flex overflow-x-auto gap-6 pb-4",
+      layout === "alternating" && "relative"
+    ), children: filteredAndSortedEvents.map(
+      (event, index2) => renderEvent(event, index2, index2 === filteredAndSortedEvents.length - 1)
+    ) }) });
+    if (virtualScroll && filteredAndSortedEvents.length > 50) {
+      return /* @__PURE__ */ jsx("div", { className: "h-[600px] overflow-y-auto", children: content });
+    }
+    return content;
+  };
+  return /* @__PURE__ */ jsxs(
+    MoonUICardPro,
+    {
+      className: cn(
+        timelineVariants({ theme }),
+        "relative",
+        printMode && "print:shadow-none print:border-0",
+        className
+      ),
+      ref: timelineRef,
+      role: "region",
+      "aria-label": ariaLabel,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: cn(
+          compactMode && "pb-3",
+          printMode && "print:pb-2"
+        ), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Clock, { className: "h-5 w-5" }),
+                "Timeline",
+                /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "pro", className: "ml-2", children: [
+                  /* @__PURE__ */ jsx(Sparkles, { className: "mr-1 h-3 w-3" }),
+                  "Pro"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(MoonUICardDescriptionPro, { children: [
+                filteredAndSortedEvents.length,
+                " event",
+                filteredAndSortedEvents.length !== 1 ? "s" : "",
+                searchQuery && ` matching "${searchQuery}"`,
+                filterType !== "all" && ` of type ${filterType}`
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              showExport && /* @__PURE__ */ jsx(
+                MoonUIButtonPro,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: handleExport,
+                  className: "print:hidden",
+                  children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MoonUIButtonPro,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: handlePrint,
+                  className: "print:hidden",
+                  children: /* @__PURE__ */ jsx(Printer, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] }),
+          (showSearch || showFilter) && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-4 print:hidden", children: [
+            showSearch && /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+              /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+              /* @__PURE__ */ jsx(
+                MoonUIInputPro,
+                {
+                  type: "search",
+                  placeholder: "Search events...",
+                  value: searchQuery,
+                  onChange: (e) => setSearchQuery(e.target.value),
+                  className: "pl-9"
+                }
+              )
+            ] }),
+            showFilter && /* @__PURE__ */ jsxs(MoonUISelectPro, { value: filterType, onValueChange: (value) => setFilterType(value), children: [
+              /* @__PURE__ */ jsxs(MoonUISelectTriggerPro, { className: "w-[150px]", children: [
+                /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }),
+                /* @__PURE__ */ jsx(MoonUISelectValuePro, { placeholder: "Filter by type" })
+              ] }),
+              /* @__PURE__ */ jsxs(MoonUISelectContentPro, { children: [
+                /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "all", children: "All Types" }),
+                /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "success", children: "Success" }),
+                /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "warning", children: "Warning" }),
+                /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "error", children: "Error" }),
+                /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "info", children: "Info" }),
+                /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "pending", children: "Pending" }),
+                /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "milestone", children: "Milestone" })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(MoonUICardContentPro, { className: cn(
+          compactMode && "pt-0",
+          "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" }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: searchQuery || filterType !== "all" ? "No events match your filters" : "No events to display" })
+        ] }) })
+      ]
+    }
+  );
 }
 var COLOR_THEMES = {
   default: [
@@ -55018,7 +55599,7 @@ var COLOR_THEMES = {
     "#FFE400"
   ]
 };
-var DEFAULT_COLORS = COLOR_THEMES.default;
+var DEFAULT_COLORS2 = COLOR_THEMES.default;
 var CustomTooltip = ({ active, payload, label }) => {
   if (!active || !payload || !payload.length)
     return null;
@@ -55128,7 +55709,7 @@ function AdvancedChart({
   showReference = false,
   referenceLines = [],
   referenceAreas = [],
-  colors = DEFAULT_COLORS,
+  colors = DEFAULT_COLORS2,
   className,
   onDataPointClick,
   onExport,
@@ -55160,7 +55741,7 @@ function AdvancedChart({
   const chartRef = t__default.useRef(null);
   const containerRef = t__default.useRef(null);
   const themeColors = t__default.useMemo(() => {
-    return COLOR_THEMES[selectedTheme] || DEFAULT_COLORS;
+    return COLOR_THEMES[selectedTheme] || DEFAULT_COLORS2;
   }, [selectedTheme]);
   const gradientId = t__default.useId();
   const trend = t__default.useMemo(() => {
@@ -66348,7 +66929,7 @@ var DialogProContent = t.forwardRef(({
   overlayProps = {},
   ...props
 }, ref) => {
-  const animationVariants = {
+  const animationVariants2 = {
     fade: {
       initial: { opacity: 0 },
       animate: { opacity: 1 },
@@ -66415,7 +66996,7 @@ var DialogProContent = t.forwardRef(({
             children: /* @__PURE__ */ jsxs(
               motion.div,
               {
-                variants: animationVariants[animation],
+                variants: animationVariants2[animation],
                 initial: "initial",
                 animate: "animate",
                 exit: "exit",