@moontra/moonui-pro 2.0.10 → 2.0.12

package/dist/index.mjs

@@ -5,13 +5,16 @@ import { motion, useMotionValue, useTransform, animate } from 'framer-motion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Loader2, ChevronDown, ChevronUp, Check, X, ChevronRight, Circle, Lock, Sparkles, Calendar, ChevronLeft, Edit, Trash2, Clock, MapPin, User, Plus, MoreHorizontal, GripVertical, MessageCircle, Paperclip, 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, CheckSquare, Quote, Palette, Highlighter, Link2, Image, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages } from 'lucide-react';
+import { Loader2, ChevronDown, ChevronUp, Check, X, ChevronRight, Circle, Lock, Sparkles, Calendar, ChevronLeft, Edit, Trash2, Clock, MapPin, User, Plus, MoreHorizontal, GripVertical, MessageCircle, Paperclip, 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, CheckSquare, Quote, Palette, Highlighter, Link2, Image, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, Minus, Download, Maximize2, Activity, Star, ExternalLink, BarChart3, Users, DollarSign, CheckCircle2, AlertCircle, XCircle, ArrowDownRight, ArrowUpRight } from 'lucide-react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal, flushSync } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector.js';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn as cn$1 } from '@moontra/moonui';
+import { ResponsiveContainer, ScatterChart, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Legend, Scatter, PieChart, Pie, Cell, AreaChart, Area, ReferenceLine, Brush, BarChart, Bar, LineChart, Line, ReferenceArea } from 'recharts';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 
 /**
  * @moontra/moonui-pro v2.0.9
@@ -54340,5 +54343,736 @@ var SwipeableCard = React50__default.forwardRef(
   }
 );
 SwipeableCard.displayName = "SwipeableCard";
+var EVENT_COLORS2 = {
+  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"
+};
+var EVENT_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" })
+};
+var EVENT_TEXT_COLORS = {
+  success: "text-green-700",
+  warning: "text-yellow-700",
+  error: "text-red-700",
+  info: "text-blue-700",
+  pending: "text-gray-700"
+};
+function Timeline({
+  events,
+  onEventClick,
+  className,
+  showUserInfo = true,
+  showMetadata = true,
+  showRelativeTime = true,
+  groupByDate = false,
+  orientation = "vertical",
+  compact = false,
+  interactive = true
+}) {
+  const sortedEvents = [...events].sort((a, b) => b.date.getTime() - a.date.getTime());
+  const formatDate = (date) => {
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+  };
+  const formatTime = (date) => {
+    return date.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: true
+    });
+  };
+  const getRelativeTime = (date) => {
+    const now = /* @__PURE__ */ new Date();
+    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1e3);
+    if (diffInSeconds < 60) {
+      return "Just now";
+    } else if (diffInSeconds < 3600) {
+      const minutes = Math.floor(diffInSeconds / 60);
+      return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
+    } else if (diffInSeconds < 86400) {
+      const hours = Math.floor(diffInSeconds / 3600);
+      return `${hours} hour${hours > 1 ? "s" : ""} ago`;
+    } else if (diffInSeconds < 2592e3) {
+      const days = Math.floor(diffInSeconds / 86400);
+      return `${days} day${days > 1 ? "s" : ""} ago`;
+    } else {
+      return formatDate(date);
+    }
+  };
+  const getInitials = (name) => {
+    return name.split(" ").map((n) => n[0]).join("").toUpperCase();
+  };
+  const groupEventsByDate = (events2) => {
+    const groups = {};
+    events2.forEach((event) => {
+      const dateKey = formatDate(event.date);
+      if (!groups[dateKey]) {
+        groups[dateKey] = [];
+      }
+      groups[dateKey].push(event);
+    });
+    return groups;
+  };
+  const handleEventClick = (event) => {
+    if (interactive && onEventClick) {
+      onEventClick(event);
+    }
+  };
+  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(
+      "div",
+      {
+        className: cn$1(
+          "relative flex gap-4",
+          compact ? "pb-4" : "pb-8",
+          interactive && "cursor-pointer hover:bg-muted/50 rounded-lg p-2 -m-2 transition-colors"
+        ),
+        onClick: () => handleEventClick(event),
+        children: [
+          orientation === "vertical" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: cn$1(
+              "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: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx("h4", { className: cn$1(
+                  "font-medium text-sm",
+                  compact ? "mb-1" : "mb-2"
+                ), children: event.title }),
+                event.description && /* @__PURE__ */ jsx("p", { className: cn$1(
+                  "text-muted-foreground text-sm",
+                  compact ? "mb-1" : "mb-2"
+                ), children: event.description })
+              ] }),
+              /* @__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: formatTime(event.date) }),
+                /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn$1("text-xs", textColor), children: event.type })
+              ] })
+            ] }),
+            showUserInfo && event.user && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+              /* @__PURE__ */ jsxs(Avatar, { className: "h-6 w-6", children: [
+                /* @__PURE__ */ jsx(AvatarImage, { src: event.user.avatar }),
+                /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getInitials(event.user.name) })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: event.user.name })
+            ] }),
+            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: [
+                /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx("span", { children: event.metadata.duration })
+              ] }),
+              event.metadata.location && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(Calendar, { 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: [
+                /* @__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: [
+                /* @__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?.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(Badge, { variant: "secondary", className: "text-xs", children: tag }, tagIndex)) })
+          ] })
+        ]
+      },
+      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(Card, { className: cn$1("w-full", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Clock, { className: "h-5 w-5" }),
+        "Timeline"
+      ] }),
+      /* @__PURE__ */ jsxs(CardDescription, { children: [
+        sortedEvents.length,
+        " event",
+        sortedEvents.length !== 1 ? "s" : "",
+        " tracked"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: sortedEvents.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn$1(
+      "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" })
+    ] }) })
+  ] });
+}
+var DEFAULT_COLORS = [
+  "#3b82f6",
+  "#ef4444",
+  "#10b981",
+  "#f59e0b",
+  "#8b5cf6",
+  "#06b6d4",
+  "#f97316",
+  "#84cc16",
+  "#ec4899",
+  "#6366f1"
+];
+function AdvancedChart({
+  data,
+  type,
+  series,
+  title,
+  subtitle,
+  height = 400,
+  width = "100%",
+  xAxisKey = "name",
+  yAxisKey,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  showBrush = false,
+  showReference = false,
+  referenceLines = [],
+  referenceAreas = [],
+  colors = DEFAULT_COLORS,
+  className,
+  onDataPointClick,
+  onExport,
+  onRefresh,
+  customTooltip,
+  customLegend,
+  loading = false,
+  error = null,
+  animated = true,
+  responsive = true
+}) {
+  const [isFullscreen, setIsFullscreen] = React50__default.useState(false);
+  const chartRef = React50__default.useRef(null);
+  const trend = React50__default.useMemo(() => {
+    if (!data.length || !series.length)
+      return null;
+    const firstSeries = series[0];
+    const values = data.map((d) => Number(d[firstSeries.dataKey])).filter((v) => !isNaN(v));
+    if (values.length < 2)
+      return null;
+    const first2 = values[0];
+    const last = values[values.length - 1];
+    const change = (last - first2) / first2 * 100;
+    return {
+      direction: change > 0 ? "up" : change < 0 ? "down" : "neutral",
+      percentage: Math.abs(change).toFixed(1)
+    };
+  }, [data, series]);
+  const handleExport = (format) => {
+    if (onExport) {
+      onExport(format);
+    }
+  };
+  const renderChart = () => {
+    const commonProps = {
+      data,
+      width: typeof width === "string" ? void 0 : width,
+      height,
+      margin: { top: 20, right: 30, left: 20, bottom: 20 }
+      // onClick: onDataPointClick,
+    };
+    const visibleSeries = series.filter((s) => !s.hide);
+    switch (type) {
+      case "line":
+        return /* @__PURE__ */ jsxs(LineChart, { ...commonProps, children: [
+          showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+          /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey }),
+          /* @__PURE__ */ jsx(YAxis, {}),
+          showTooltip && /* @__PURE__ */ jsx(Tooltip$1, {}),
+          showLegend && /* @__PURE__ */ jsx(Legend, {}),
+          visibleSeries.map((s, index2) => /* @__PURE__ */ jsx(
+            Line,
+            {
+              type: s.type || "monotone",
+              dataKey: s.dataKey,
+              stroke: s.color || colors[index2 % colors.length],
+              strokeWidth: s.strokeWidth || 2,
+              name: s.name,
+              animationDuration: animated ? 1e3 : 0
+            },
+            s.dataKey
+          )),
+          showReference && referenceLines.map((ref, index2) => /* @__PURE__ */ jsx(
+            ReferenceLine,
+            {
+              y: ref.value,
+              stroke: ref.color || "#666",
+              strokeDasharray: "5 5",
+              label: ref.label
+            },
+            index2
+          )),
+          showReference && referenceAreas.map((ref, index2) => /* @__PURE__ */ jsx(
+            ReferenceArea,
+            {
+              x1: ref.x1,
+              x2: ref.x2,
+              fill: ref.color || "#f0f0f0",
+              fillOpacity: 0.3,
+              label: ref.label
+            },
+            index2
+          )),
+          showBrush && /* @__PURE__ */ jsx(Brush, {})
+        ] });
+      case "bar":
+        return /* @__PURE__ */ jsxs(BarChart, { ...commonProps, children: [
+          showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+          /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey }),
+          /* @__PURE__ */ jsx(YAxis, {}),
+          showTooltip && /* @__PURE__ */ jsx(Tooltip$1, {}),
+          showLegend && /* @__PURE__ */ jsx(Legend, {}),
+          visibleSeries.map((s, index2) => /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: s.dataKey,
+              fill: s.color || colors[index2 % colors.length],
+              name: s.name,
+              animationDuration: animated ? 1e3 : 0
+            },
+            s.dataKey
+          )),
+          showReference && referenceLines.map((ref, index2) => /* @__PURE__ */ jsx(
+            ReferenceLine,
+            {
+              y: ref.value,
+              stroke: ref.color || "#666",
+              strokeDasharray: "5 5",
+              label: ref.label
+            },
+            index2
+          )),
+          showBrush && /* @__PURE__ */ jsx(Brush, {})
+        ] });
+      case "area":
+        return /* @__PURE__ */ jsxs(AreaChart, { ...commonProps, children: [
+          showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+          /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey }),
+          /* @__PURE__ */ jsx(YAxis, {}),
+          showTooltip && /* @__PURE__ */ jsx(Tooltip$1, {}),
+          showLegend && /* @__PURE__ */ jsx(Legend, {}),
+          visibleSeries.map((s, index2) => /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: s.type || "monotone",
+              dataKey: s.dataKey,
+              stroke: s.color || colors[index2 % colors.length],
+              fill: s.color || colors[index2 % colors.length],
+              fillOpacity: s.fillOpacity || 0.3,
+              name: s.name,
+              animationDuration: animated ? 1e3 : 0
+            },
+            s.dataKey
+          )),
+          showReference && referenceLines.map((ref, index2) => /* @__PURE__ */ jsx(
+            ReferenceLine,
+            {
+              y: ref.value,
+              stroke: ref.color || "#666",
+              strokeDasharray: "5 5",
+              label: ref.label
+            },
+            index2
+          )),
+          showBrush && /* @__PURE__ */ jsx(Brush, {})
+        ] });
+      case "pie":
+        return /* @__PURE__ */ jsxs(PieChart, { ...commonProps, children: [
+          showTooltip && /* @__PURE__ */ jsx(Tooltip$1, {}),
+          showLegend && /* @__PURE__ */ jsx(Legend, {}),
+          /* @__PURE__ */ jsx(
+            Pie,
+            {
+              data,
+              dataKey: series[0]?.dataKey || "value",
+              nameKey: xAxisKey,
+              cx: "50%",
+              cy: "50%",
+              outerRadius: Math.min(height, typeof width === "number" ? width : 400) / 3,
+              animationDuration: animated ? 1e3 : 0,
+              children: data.map((entry, index2) => /* @__PURE__ */ jsx(Cell, { fill: colors[index2 % colors.length] }, `cell-${index2}`))
+            }
+          )
+        ] });
+      case "scatter":
+        return /* @__PURE__ */ jsxs(ScatterChart, { ...commonProps, children: [
+          showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+          /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey }),
+          /* @__PURE__ */ jsx(YAxis, { dataKey: yAxisKey }),
+          showTooltip && /* @__PURE__ */ jsx(Tooltip$1, {}),
+          showLegend && /* @__PURE__ */ jsx(Legend, {}),
+          visibleSeries.map((s, index2) => /* @__PURE__ */ jsx(
+            Scatter,
+            {
+              dataKey: s.dataKey,
+              fill: s.color || colors[index2 % colors.length],
+              name: s.name,
+              animationDuration: animated ? 1e3 : 0
+            },
+            s.dataKey
+          ))
+        ] });
+      default:
+        return /* @__PURE__ */ jsx("div", { children: "Unsupported chart type" });
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(Card, { className: cn$1("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { className: "flex items-center justify-center", style: { height }, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 animate-spin" }),
+      /* @__PURE__ */ jsx("span", { children: "Loading chart..." })
+    ] }) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Card, { className: cn$1("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { className: "flex items-center justify-center", style: { height }, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-destructive mb-2", children: error }),
+      onRefresh && /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onRefresh, children: [
+        /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
+        "Retry"
+      ] })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsxs(Card, { className: cn$1("w-full", className), ref: chartRef, children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs(CardTitle, { className: "text-base font-medium", children: [
+          title,
+          trend && /* @__PURE__ */ jsxs("span", { className: "ml-2 inline-flex items-center", children: [
+            trend.direction === "up" && /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-green-500" }),
+            trend.direction === "down" && /* @__PURE__ */ jsx(TrendingDown, { className: "h-4 w-4 text-red-500" }),
+            trend.direction === "neutral" && /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4 text-gray-500" }),
+            /* @__PURE__ */ jsxs("span", { className: cn$1(
+              "ml-1 text-sm",
+              trend.direction === "up" && "text-green-500",
+              trend.direction === "down" && "text-red-500",
+              trend.direction === "neutral" && "text-gray-500"
+            ), children: [
+              trend.percentage,
+              "%"
+            ] })
+          ] })
+        ] }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
+        onRefresh && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onRefresh, children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }) }),
+        onExport && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleExport("png"), children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsFullscreen(!isFullscreen), children: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: responsive ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: renderChart() }) : /* @__PURE__ */ jsx("div", { style: { width: "100%", height: `${height}px` }, children: renderChart() }) })
+  ] });
+}
+var METRIC_COLORS = {
+  primary: "text-blue-600",
+  success: "text-green-600",
+  warning: "text-yellow-600",
+  danger: "text-red-600",
+  info: "text-purple-600"
+};
+var WIDGET_SIZES = {
+  sm: "col-span-1",
+  md: "col-span-2",
+  lg: "col-span-3",
+  xl: "col-span-4"
+};
+function Dashboard({
+  metrics = [],
+  widgets = [],
+  onMetricClick,
+  onWidgetAction,
+  className,
+  showHeader = true,
+  title = "Dashboard",
+  description = "Overview of your key metrics and performance",
+  refreshable = true,
+  onRefresh,
+  loading = false
+}) {
+  const [refreshing, setRefreshing] = React50__default.useState(false);
+  const handleRefresh = async () => {
+    if (onRefresh) {
+      setRefreshing(true);
+      try {
+        await onRefresh();
+      } finally {
+        setRefreshing(false);
+      }
+    }
+  };
+  const formatValue = (value) => {
+    if (typeof value === "number") {
+      if (value >= 1e6) {
+        return (value / 1e6).toFixed(1) + "M";
+      } else if (value >= 1e3) {
+        return (value / 1e3).toFixed(1) + "K";
+      }
+      return value.toLocaleString();
+    }
+    return value.toString();
+  };
+  const getChangeIcon = (type) => {
+    switch (type) {
+      case "increase":
+        return /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-4 w-4" });
+      case "decrease":
+        return /* @__PURE__ */ jsx(ArrowDownRight, { className: "h-4 w-4" });
+      case "neutral":
+        return /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" });
+    }
+  };
+  const getChangeColor = (type) => {
+    switch (type) {
+      case "increase":
+        return "text-green-600";
+      case "decrease":
+        return "text-red-600";
+      case "neutral":
+        return "text-gray-600";
+    }
+  };
+  const renderMetricCard = (metric) => {
+    const colorClass = metric.color ? METRIC_COLORS[metric.color] : "text-foreground";
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: cn$1(
+          "cursor-pointer hover:shadow-md transition-shadow",
+          onMetricClick && "hover:bg-muted/50"
+        ),
+        onClick: () => onMetricClick?.(metric),
+        children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+            /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: metric.title }),
+            /* @__PURE__ */ jsx("div", { className: cn$1("h-4 w-4", colorClass), children: metric.icon })
+          ] }),
+          /* @__PURE__ */ jsxs(CardContent, { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: formatValue(metric.value) }),
+            metric.change && /* @__PURE__ */ jsxs("div", { className: cn$1(
+              "flex items-center text-xs mt-1",
+              getChangeColor(metric.change.type)
+            ), children: [
+              getChangeIcon(metric.change.type),
+              /* @__PURE__ */ jsxs("span", { className: "ml-1", children: [
+                Math.abs(metric.change.value),
+                "% from ",
+                metric.change.period
+              ] })
+            ] }),
+            metric.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: metric.description })
+          ] })
+        ]
+      },
+      metric.id
+    );
+  };
+  const renderWidget = (widget) => {
+    const sizeClass = WIDGET_SIZES[widget.size || "md"];
+    return /* @__PURE__ */ jsxs(Card, { className: cn$1("h-fit", sizeClass), children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: widget.title }),
+          widget.description && /* @__PURE__ */ jsx(CardDescription, { className: "mt-1", children: widget.description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => onWidgetAction?.(widget.id, "menu"),
+            children: /* @__PURE__ */ jsx(BarChart3, { className: "h-4 w-4" })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: widget.loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary" }) }) : widget.error ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32 text-destructive", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: widget.error }) }) : widget.content })
+    ] }, widget.id);
+  };
+  const defaultMetrics = [
+    {
+      id: "total-users",
+      title: "Total Users",
+      value: 2543,
+      change: { value: 12, type: "increase", period: "last month" },
+      icon: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" }),
+      color: "primary"
+    },
+    {
+      id: "revenue",
+      title: "Revenue",
+      value: "$12,345",
+      change: { value: 8, type: "increase", period: "last month" },
+      icon: /* @__PURE__ */ jsx(DollarSign, { className: "h-4 w-4" }),
+      color: "success"
+    },
+    {
+      id: "active-sessions",
+      title: "Active Sessions",
+      value: 1234,
+      change: { value: 2, type: "decrease", period: "last hour" },
+      icon: /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4" }),
+      color: "warning"
+    },
+    {
+      id: "conversion-rate",
+      title: "Conversion Rate",
+      value: "3.2%",
+      change: { value: 0.3, type: "increase", period: "last week" },
+      icon: /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4" }),
+      color: "info"
+    }
+  ];
+  const displayMetrics = metrics.length > 0 ? metrics : defaultMetrics;
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: cn$1("w-full", className), children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 bg-muted rounded w-1/4" }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-32 bg-muted rounded" }, i)) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn$1("w-full space-y-6", className), children: [
+    showHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description })
+      ] }),
+      refreshable && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          onClick: handleRefresh,
+          disabled: refreshing,
+          children: [
+            refreshing ? /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary mr-2" }) : /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4 mr-2" }),
+            "Refresh"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: displayMetrics.map(renderMetricCard) }),
+    widgets.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: widgets.map(renderWidget) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-4 border-t", children: [
+      /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+        /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-2" }),
+        "Export Data"
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4 mr-2" }),
+        "Schedule Report"
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+        /* @__PURE__ */ jsx(Star, { className: "h-4 w-4 mr-2" }),
+        "Save View"
+      ] })
+    ] })
+  ] });
+}
+function DraggableList({
+  items,
+  onReorder,
+  renderItem,
+  keyExtractor,
+  direction = "vertical",
+  className,
+  droppableId = "draggable-list",
+  disabled = false
+}) {
+  const handleDragEnd = (result) => {
+    if (!result.destination || disabled) {
+      return;
+    }
+    const sourceIndex = result.source.index;
+    const destinationIndex = result.destination.index;
+    if (sourceIndex === destinationIndex) {
+      return;
+    }
+    const newItems = Array.from(items);
+    const [reorderedItem] = newItems.splice(sourceIndex, 1);
+    newItems.splice(destinationIndex, 0, reorderedItem);
+    onReorder(newItems);
+  };
+  return /* @__PURE__ */ jsx(DragDropContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(
+    Droppable,
+    {
+      droppableId,
+      direction,
+      isDropDisabled: disabled,
+      children: (provided, snapshot) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...provided.droppableProps,
+          ref: provided.innerRef,
+          className: cn$1(
+            "space-y-2",
+            direction === "horizontal" && "flex space-y-0 space-x-2",
+            snapshot.isDraggingOver && "bg-muted/50 rounded-lg",
+            className
+          ),
+          children: [
+            items.map((item, index2) => /* @__PURE__ */ jsx(
+              Draggable,
+              {
+                draggableId: keyExtractor(item),
+                index: index2,
+                isDragDisabled: disabled,
+                children: (provided2, snapshot2) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: provided2.innerRef,
+                    ...provided2.draggableProps,
+                    ...provided2.dragHandleProps,
+                    className: cn$1(
+                      "transition-all duration-200",
+                      snapshot2.isDragging && "rotate-2 scale-105 shadow-lg z-50",
+                      disabled && "cursor-not-allowed opacity-50"
+                    ),
+                    style: {
+                      ...provided2.draggableProps.style,
+                      transform: snapshot2.isDragging ? provided2.draggableProps.style?.transform : "none"
+                    },
+                    children: renderItem(item, index2)
+                  }
+                )
+              },
+              keyExtractor(item)
+            )),
+            provided.placeholder
+          ]
+        }
+      )
+    }
+  ) });
+}
 
-export { Calendar2 as Calendar, Kanban, MemoryAnalytics, MemoryEfficientData, RichTextEditor, SelectableVirtualList, SwipeableCard, VirtualList, useStreamingData, useVirtualList };
+export { AdvancedChart, Calendar2 as Calendar, Dashboard, DraggableList, Kanban, MemoryAnalytics, MemoryEfficientData, RichTextEditor, SelectableVirtualList, SwipeableCard, Timeline, VirtualList, useStreamingData, useVirtualList };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "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",
@@ -70,11 +70,12 @@
   },
   "homepage": "https://moonui.dev",
   "peerDependencies": {
-    "@moontra/moonui": ">=2.0.0",
+    "@moontra/moonui": "^2.0.6",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
+    "@moontra/moonui-pro": "^2.0.9",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",