@moontra/moonui-pro 2.4.5 → 2.5.0

package/dist/index.mjs

@@ -3,10 +3,11 @@ import { twMerge } from 'tailwind-merge';
 import * as t from 'react';
 import t__default, { useState, useRef, useCallback, forwardRef, createContext, useContext, useMemo, useEffect, useDebugValue, Component, useLayoutEffect } 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, ChevronLeft, Calendar, Edit, Trash2, Clock, MapPin, User, 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 as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, ZoomOut, ZoomIn, Download, FileSpreadsheet, FileJson, Maximize2, Move, Activity, Star, Upload, CheckCircle2, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, ExternalLink, BarChart3, Users, DollarSign, Github, GitFork, Server, EyeOff, RotateCw, Zap, Monitor, Timer, Cpu, MemoryStick, HardDrive, Network, CheckCircle, Video, Music, Archive, File, Columns, XCircle, ArrowDownRight, ArrowUpRight } from 'lucide-react';
+import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, ChevronLeft, Calendar as Calendar$1, Edit, Trash2, Clock, MapPin, User, 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 as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, ZoomOut, ZoomIn, Download, FileSpreadsheet, FileJson, Maximize2, Move, Menu, Bell, Edit3, LayoutGrid, Upload, Share2, Save, CheckCircle2, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, ExternalLink, CalendarIcon, DollarSign, Users, Github, Star, GitFork, Activity, Server, EyeOff, RotateCw, Zap, Monitor, Timer, Cpu, MemoryStick, HardDrive, Network, CheckCircle, BarChart3, Video, Music, Archive, File, Columns, XCircle, Grip, Unlock, Minimize2, Map as Map$1, Target, MoreVertical, 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 { DayPicker } from 'react-day-picker';
 import { motion, AnimatePresence, useMotionValue, useSpring, useTransform, animate } from 'framer-motion';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import ReactDOM3 from 'react-dom';
@@ -16,6 +17,7 @@ import { createDialogScope } from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -25,6 +27,9 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector.js';
 import { ResponsiveContainer, LineChart, Line, RadialBarChart, Tooltip, Legend, RadialBar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, ScatterChart, CartesianGrid, XAxis, YAxis, Scatter, PieChart, Pie, Cell, AreaChart, Area, ReferenceLine, Brush, BarChart, Bar, ReferenceArea } from 'recharts';
+import { startOfDay, endOfDay, subDays, startOfWeek, endOfWeek, startOfMonth, endOfMonth, format, formatDistanceToNow } from 'date-fns';
+import GridLayout from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { useForm } from 'react-hook-form';
 import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel } from '@tanstack/react-table';
@@ -2535,6 +2540,56 @@ var MoonUIButtonPro = t.forwardRef(
   }
 );
 MoonUIButtonPro.displayName = "MoonUIButtonPro";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          moonUIButtonProVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          moonUIButtonProVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        // IconLeft: () => <ChevronLeft className="h-4 w-4" />,
+        // IconRight: () => <ChevronRight className="h-4 w-4" />,
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
 cva("", {
   variants: {
     hover: {
@@ -3791,7 +3846,7 @@ var me = t.forwardRef((r2, o) => {
     var e;
     return Array.from(((e = I.current) == null ? void 0 : e.querySelectorAll(ce)) || []);
   }
-  function X14(e) {
+  function X17(e) {
     let s = V()[e];
     s && E.setState("value", s.getAttribute(T));
   }
@@ -3806,10 +3861,10 @@ var me = t.forwardRef((r2, o) => {
       s = e > 0 ? we(s, N) : De(s, N), i = s == null ? void 0 : s.querySelector(ce);
     i ? E.setState("value", i.getAttribute(T)) : Q(e);
   }
-  let oe = () => X14(V().length - 1), ie3 = (e) => {
+  let oe = () => X17(V().length - 1), ie3 = (e) => {
     e.preventDefault(), e.metaKey ? oe() : e.altKey ? re(1) : Q(1);
   }, se = (e) => {
-    e.preventDefault(), e.metaKey ? X14(0) : e.altKey ? re(-1) : Q(-1);
+    e.preventDefault(), e.metaKey ? X17(0) : e.altKey ? re(-1) : Q(-1);
   };
   return t.createElement(Primitive2.div, { ref: o, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e) => {
     var s;
@@ -3836,7 +3891,7 @@ var me = t.forwardRef((r2, o) => {
           break;
         }
         case "Home": {
-          e.preventDefault(), X14(0);
+          e.preventDefault(), X17(0);
           break;
         }
         case "End": {
@@ -5105,6 +5160,36 @@ var MoonUIRadioItemWithLabelPro = t.forwardRef(({
   ] });
 });
 MoonUIRadioItemWithLabelPro.displayName = "RadioItemWithLabelPro";
+var ScrollArea = t.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = t.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 var MoonUISelectPro = SelectPrimitive.Root;
 MoonUISelectPro.displayName = "MoonUISelectPro";
 var MoonUISelectGroupPro = SelectPrimitive.Group;
@@ -5379,6 +5464,103 @@ var MoonUISeparatorPro = t.forwardRef(
   )
 );
 MoonUISeparatorPro.displayName = SeparatorPrimitive.Root.displayName;
+var Sheet = DialogPrimitive.Root;
+var SheetTrigger = DialogPrimitive.Trigger;
+var SheetClose = DialogPrimitive.Close;
+var SheetPortal = DialogPrimitive.Portal;
+var SheetOverlay = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = t.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+  /* @__PURE__ */ jsx(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(sheetVariants({ side }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+var SheetHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+var SheetDescription = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
 function MoonUISkeletonPro({
   className,
   ...props
@@ -6296,7 +6478,7 @@ var Toggle = t.forwardRef((props, forwardedRef) => {
   );
 });
 Toggle.displayName = NAME;
-var Root16 = Toggle;
+var Root18 = Toggle;
 var MoonUItoggleVariantsPro = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
@@ -6318,14 +6500,14 @@ var MoonUItoggleVariantsPro = cva(
   }
 );
 var MoonUITogglePro = t.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
-  Root16,
+  Root18,
   {
     ref,
     className: cn(MoonUItoggleVariantsPro({ variant, size, className })),
     ...props
   }
 ));
-MoonUITogglePro.displayName = Root16.displayName;
+MoonUITogglePro.displayName = Root18.displayName;
 var MoonUITooltipProviderPro = TooltipPrimitive.Provider;
 var tooltipVariants = cva(
   "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -7457,7 +7639,7 @@ function EventDialog({
   return /* @__PURE__ */ jsx(MoonUIDialogPro, { open, onOpenChange, children: /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: "sm:max-w-[500px]", children: [
     /* @__PURE__ */ jsxs(MoonUIDialogHeaderPro, { children: [
       /* @__PURE__ */ jsxs(MoonUIDialogTitlePro, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Calendar, { className: "w-5 h-5" }),
+        /* @__PURE__ */ jsx(Calendar$1, { className: "w-5 h-5" }),
         mode === "create" ? "Create Event" : "Edit Event"
       ] }),
       /* @__PURE__ */ jsx(MoonUIDialogDescriptionPro, { children: mode === "create" ? "Add a new event to your calendar." : "Edit the event details." })
@@ -7659,7 +7841,7 @@ var EVENT_COLORS = {
   reminder: "bg-yellow-500",
   event: "bg-purple-500"
 };
-function Calendar2({
+function Calendar3({
   events = [],
   onEventClick,
   onEventAdd,
@@ -7829,7 +8011,7 @@ function Calendar2({
       /* @__PURE__ */ jsx(MoonUICardHeaderPro, { 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(Calendar, { className: "h-5 w-5" }),
+            /* @__PURE__ */ jsx(Calendar$1, { className: "h-5 w-5" }),
             "Calendar"
           ] }),
           /* @__PURE__ */ jsxs(MoonUICardDescriptionPro, { children: [
@@ -8265,7 +8447,7 @@ function Kanban({
                           "flex items-center gap-1",
                           isOverdue(card.dueDate) && "text-destructive"
                         ), children: [
-                          /* @__PURE__ */ jsx(Calendar, { className: "h-3 w-3" }),
+                          /* @__PURE__ */ jsx(Calendar$1, { className: "h-3 w-3" }),
                           /* @__PURE__ */ jsx("span", { children: formatDate(card.dueDate) })
                         ] })
                       ] }),
@@ -48887,7 +49069,7 @@ function Timeline({
                 /* @__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(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: [
@@ -49149,14 +49331,18 @@ function AdvancedChart({
   }, [selectedTheme]);
   const gradientId = t__default.useId();
   const trend = t__default.useMemo(() => {
-    if (!data.length || !series.length)
+    if (!data || !Array.isArray(data) || !data.length || !series || !Array.isArray(series) || !series.length)
       return null;
     const firstSeries = series[0];
+    if (!firstSeries || !firstSeries.dataKey)
+      return null;
     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];
+    if (first2 === 0)
+      return null;
     const change = (last - first2) / first2 * 100;
     return {
       direction: change > 0 ? "up" : change < 0 ? "down" : "neutral",
@@ -49179,9 +49365,9 @@ function AdvancedChart({
       toggleSeriesVisibility(entry.dataKey);
     }
   };
-  const handleExport = (format) => {
+  const handleExport = (format2) => {
     if (onExport) {
-      onExport(format);
+      onExport(format2);
     }
   };
   const handleZoom = (direction) => {
@@ -49210,6 +49396,9 @@ function AdvancedChart({
     );
   }) });
   const renderChart = () => {
+    if (!data || !Array.isArray(data) || !series || !Array.isArray(series)) {
+      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "No data available" });
+    }
     const commonProps = {
       data,
       width: typeof width === "string" ? void 0 : width,
@@ -49998,43 +50187,147 @@ function AdvancedChart({
     }
   );
 }
-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,
+function MetricCard({
+  data,
+  onClick,
+  onAction,
   className,
-  showHeader = true,
-  title = "Dashboard",
-  description = "Overview of your key metrics and performance",
-  refreshable = true,
-  onRefresh,
-  loading = false
+  showSparkline = true,
+  showForecast = false,
+  interactive = true,
+  glassmorphism = false
 }) {
-  const [refreshing, setRefreshing] = t__default.useState(false);
-  const handleRefresh = async () => {
-    if (onRefresh) {
-      setRefreshing(true);
-      try {
-        await onRefresh();
-      } finally {
-        setRefreshing(false);
-      }
+  const [isHovered, setIsHovered] = t__default.useState(false);
+  const colorClasses = {
+    primary: "text-blue-600 dark:text-blue-400",
+    success: "text-green-600 dark:text-green-400",
+    warning: "text-yellow-600 dark:text-yellow-400",
+    danger: "text-red-600 dark:text-red-400",
+    info: "text-purple-600 dark:text-purple-400"
+  };
+  const getChangeColor = (type) => {
+    switch (type) {
+      case "increase":
+        return "text-green-600 dark:text-green-400";
+      case "decrease":
+        return "text-red-600 dark:text-red-400";
+      default:
+        return "text-gray-600 dark:text-gray-400";
+    }
+  };
+  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" });
+      default:
+        return /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" });
     }
   };
+  const renderSparkline = () => {
+    if (!data.sparkline || data.sparkline.length < 2)
+      return null;
+    const max = Math.max(...data.sparkline);
+    const min = Math.min(...data.sparkline);
+    const range = max - min || 1;
+    const points = data.sparkline.map((value, index) => {
+      const x = index / (data.sparkline.length - 1) * 100;
+      const y = 100 - (value - min) / range * 100;
+      return `${x},${y}`;
+    }).join(" ");
+    const gradientId = `gradient-${data.id}`;
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "absolute bottom-0 left-0 right-0 h-16 overflow-hidden rounded-b-lg opacity-20",
+        initial: { opacity: 0 },
+        animate: { opacity: isHovered ? 0.3 : 0.2 },
+        transition: { duration: 0.2 },
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "w-full h-full",
+            viewBox: "0 0 100 100",
+            preserveAspectRatio: "none",
+            children: [
+              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.3" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                "polyline",
+                {
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  points,
+                  className: colorClasses[data.color || "primary"]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "polygon",
+                {
+                  fill: `url(#${gradientId})`,
+                  points: `0,100 ${points} 100,100`,
+                  className: colorClasses[data.color || "primary"]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  };
+  const renderProgress = () => {
+    if (!data.target)
+      return null;
+    const currentValue = typeof data.value === "number" ? data.value : parseFloat(data.value);
+    const progress = currentValue / data.target * 100;
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "mt-3",
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        transition: { delay: 0.1 },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-muted-foreground mb-1", children: [
+            /* @__PURE__ */ jsx("span", { children: "Progress to target" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              progress.toFixed(1),
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "h-1.5 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: cn(
+                "h-full rounded-full",
+                progress >= 100 ? "bg-green-500" : "bg-primary"
+              ),
+              initial: { width: 0 },
+              animate: { width: `${Math.min(progress, 100)}%` },
+              transition: { duration: 0.5, ease: "easeOut" }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-muted-foreground mt-1", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              currentValue,
+              " ",
+              data.unit
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Target: ",
+              data.target,
+              " ",
+              data.unit
+            ] })
+          ] })
+        ]
+      }
+    );
+  };
   const formatValue = (value) => {
     if (typeof value === "number") {
       if (value >= 1e6) {
@@ -50046,159 +50339,1703 @@ function Dashboard({
     }
     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 cardVariants = {
+    initial: { opacity: 0, y: 20 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.3, ease: "easeOut" }
+    },
+    hover: interactive ? {
+      y: -2,
+      transition: { duration: 0.2 }
+    } : {}
   };
-  const getChangeColor = (type) => {
-    switch (type) {
-      case "increase":
-        return "text-green-600";
-      case "decrease":
-        return "text-red-600";
-      case "neutral":
-        return "text-gray-600";
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      variants: cardVariants,
+      initial: "initial",
+      animate: "animate",
+      whileHover: "hover",
+      onHoverStart: () => setIsHovered(true),
+      onHoverEnd: () => setIsHovered(false),
+      children: /* @__PURE__ */ jsxs(
+        MoonUICardPro,
+        {
+          className: cn(
+            "relative overflow-hidden cursor-pointer transition-all duration-300",
+            interactive && "hover:shadow-lg hover:shadow-primary/5",
+            glassmorphism && "bg-background/60 backdrop-blur-md border-white/10",
+            className
+          ),
+          onClick,
+          children: [
+            glassmorphism && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 pb-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    className: cn(
+                      "p-2 rounded-lg",
+                      glassmorphism ? "bg-white/10 backdrop-blur" : "bg-muted"
+                    ),
+                    whileHover: { scale: 1.05 },
+                    whileTap: { scale: 0.95 },
+                    children: /* @__PURE__ */ jsx("div", { className: cn("h-5 w-5", colorClasses[data.color || "primary"]), children: data.icon })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-muted-foreground", children: data.title }) })
+              ] }),
+              interactive && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-8 w-8 p-0",
+                    onClick: (e) => e.stopPropagation(),
+                    children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("fullscreen"), children: [
+                    /* @__PURE__ */ jsx(Maximize2, { className: "mr-2 h-4 w-4" }),
+                    "Fullscreen"
+                  ] }),
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("export"), children: [
+                    /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }),
+                    "Export Data"
+                  ] }),
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("share"), children: [
+                    /* @__PURE__ */ jsx(Share2, { className: "mr-2 h-4 w-4" }),
+                    "Share"
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4", children: [
+              /* @__PURE__ */ jsx(MoonUITooltipProviderPro, { children: /* @__PURE__ */ jsxs(MoonUITooltipPro, { children: [
+                /* @__PURE__ */ jsx(MoonUITooltipTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    className: "text-3xl font-bold tracking-tight",
+                    animate: {
+                      scale: isHovered ? 1.02 : 1
+                    },
+                    transition: { duration: 0.2 },
+                    children: [
+                      formatValue(data.value),
+                      data.unit && /* @__PURE__ */ jsx("span", { className: "text-lg ml-1 text-muted-foreground", children: data.unit })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(MoonUITooltipContentPro, { children: /* @__PURE__ */ jsxs("p", { children: [
+                  "Exact value: ",
+                  data.value,
+                  " ",
+                  data.unit
+                ] }) })
+              ] }) }),
+              data.change && /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  className: cn(
+                    "flex items-center gap-1 text-sm mt-2",
+                    getChangeColor(data.change.type)
+                  ),
+                  initial: { opacity: 0, x: -10 },
+                  animate: { opacity: 1, x: 0 },
+                  transition: { delay: 0.1 },
+                  children: [
+                    getChangeIcon(data.change.type),
+                    /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+                      data.change.type === "neutral" ? "" : data.change.type === "increase" ? "+" : "-",
+                      Math.abs(data.change.value),
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                      "from ",
+                      data.change.period
+                    ] })
+                  ]
+                }
+              ),
+              showForecast && data.forecast && /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  className: "flex items-center gap-1 text-xs text-muted-foreground mt-1",
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  transition: { delay: 0.2 },
+                  children: [
+                    /* @__PURE__ */ jsx(TrendingUp, { className: "h-3 w-3" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      "Forecast: ",
+                      formatValue(data.forecast),
+                      " ",
+                      data.unit
+                    ] })
+                  ]
+                }
+              ),
+              renderProgress()
+            ] }),
+            showSparkline && renderSparkline()
+          ]
+        }
+      )
     }
-  };
-  const renderMetricCard = (metric) => {
-    const colorClass = metric.color ? METRIC_COLORS[metric.color] : "text-foreground";
+  );
+}
+var CHART_COLORS = {
+  default: ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"],
+  pastel: ["#93c5fd", "#86efac", "#fcd34d", "#fca5a5", "#c4b5fd", "#fbcfe8"],
+  vibrant: ["#2563eb", "#059669", "#d97706", "#dc2626", "#7c3aed", "#db2777"],
+  monochrome: ["#1f2937", "#374151", "#4b5563", "#6b7280", "#9ca3af", "#d1d5db"]
+};
+function ChartWidget({
+  id,
+  title,
+  description,
+  data,
+  className,
+  height = 300,
+  onAction,
+  loading = false,
+  refreshing = false,
+  glassmorphism = false,
+  interactive = true
+}) {
+  const [colorScheme, setColorScheme] = t__default.useState("default");
+  const [isFullscreen, setIsFullscreen] = t__default.useState(false);
+  const colors = CHART_COLORS[colorScheme];
+  const CustomTooltip2 = ({ active, payload, label }) => {
+    if (!active || !payload)
+      return null;
     return /* @__PURE__ */ jsxs(
-      MoonUICardPro,
+      motion.div,
       {
+        initial: { opacity: 0, scale: 0.9 },
+        animate: { opacity: 1, scale: 1 },
         className: cn(
-          "cursor-pointer hover:shadow-md transition-shadow",
-          onMetricClick && "hover:bg-muted/50"
+          "p-3 rounded-lg shadow-lg",
+          glassmorphism ? "bg-background/80 backdrop-blur-md border border-white/10" : "bg-background border"
         ),
-        onClick: () => onMetricClick?.(metric),
         children: [
-          /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-            /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-sm font-medium", children: metric.title }),
-            /* @__PURE__ */ jsx("div", { className: cn("h-4 w-4", colorClass), children: metric.icon })
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: label }),
+          payload.map((entry, index) => /* @__PURE__ */ jsxs("p", { className: "text-sm mt-1", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-block w-3 h-3 rounded-full mr-2",
+                style: { backgroundColor: entry.color }
+              }
+            ),
+            entry.name,
+            ": ",
+            entry.value
+          ] }, index))
+        ]
+      }
+    );
+  };
+  const renderChart = () => {
+    if (!data.data || data.data.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "No data available" });
+    }
+    const chartProps = {
+      data: data.data,
+      margin: { top: 5, right: 30, left: 20, bottom: 5 }
+    };
+    switch (data.type) {
+      case "line":
+        return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(LineChart, { ...chartProps, children: [
+          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", className: "opacity-30" }),
+          /* @__PURE__ */ jsx(XAxis, { dataKey: "name" }),
+          /* @__PURE__ */ jsx(YAxis, {}),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}) }),
+          interactive && /* @__PURE__ */ jsx(Legend, {}),
+          Object.keys(data.data[0]).filter((key) => key !== "name").map((key, index) => /* @__PURE__ */ jsx(
+            Line,
+            {
+              type: "monotone",
+              dataKey: key,
+              stroke: colors[index % colors.length],
+              strokeWidth: 2,
+              dot: { r: 4 },
+              activeDot: { r: 6 }
+            },
+            key
+          ))
+        ] }) });
+      case "bar":
+        return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(BarChart, { ...chartProps, children: [
+          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", className: "opacity-30" }),
+          /* @__PURE__ */ jsx(XAxis, { dataKey: "name" }),
+          /* @__PURE__ */ jsx(YAxis, {}),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}) }),
+          interactive && /* @__PURE__ */ jsx(Legend, {}),
+          Object.keys(data.data[0]).filter((key) => key !== "name").map((key, index) => /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: key,
+              fill: colors[index % colors.length],
+              radius: [4, 4, 0, 0]
+            },
+            key
+          ))
+        ] }) });
+      case "area":
+        return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart, { ...chartProps, children: [
+          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", className: "opacity-30" }),
+          /* @__PURE__ */ jsx(XAxis, { dataKey: "name" }),
+          /* @__PURE__ */ jsx(YAxis, {}),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}) }),
+          interactive && /* @__PURE__ */ jsx(Legend, {}),
+          Object.keys(data.data[0]).filter((key) => key !== "name").map((key, index) => /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: "monotone",
+              dataKey: key,
+              stroke: colors[index % colors.length],
+              fill: colors[index % colors.length],
+              fillOpacity: 0.2
+            },
+            key
+          ))
+        ] }) });
+      case "pie":
+      case "donut":
+        return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(PieChart, { children: [
+          /* @__PURE__ */ jsx(
+            Pie,
+            {
+              data: data.data,
+              cx: "50%",
+              cy: "50%",
+              labelLine: false,
+              label: interactive,
+              outerRadius: data.type === "donut" ? 80 : 100,
+              innerRadius: data.type === "donut" ? 50 : 0,
+              fill: "#8884d8",
+              dataKey: "value",
+              children: data.data.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: colors[index % colors.length] }, `cell-${index}`))
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}) }),
+          interactive && /* @__PURE__ */ jsx(Legend, {})
+        ] }) });
+      case "radar":
+        return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(RadarChart, { data: data.data, children: [
+          /* @__PURE__ */ jsx(PolarGrid, {}),
+          /* @__PURE__ */ jsx(PolarAngleAxis, { dataKey: "subject" }),
+          /* @__PURE__ */ jsx(PolarRadiusAxis, {}),
+          Object.keys(data.data[0]).filter((key) => key !== "subject").map((key, index) => /* @__PURE__ */ jsx(
+            Radar,
+            {
+              name: key,
+              dataKey: key,
+              stroke: colors[index % colors.length],
+              fill: colors[index % colors.length],
+              fillOpacity: 0.3
+            },
+            key
+          )),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}) }),
+          interactive && /* @__PURE__ */ jsx(Legend, {})
+        ] }) });
+      default:
+        return null;
+    }
+  };
+  const cardVariants = {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: {
+      opacity: 1,
+      scale: 1,
+      transition: { duration: 0.3, ease: "easeOut" }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      variants: cardVariants,
+      initial: "initial",
+      animate: "animate",
+      className: cn(isFullscreen && "fixed inset-4 z-50"),
+      children: /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn(
+        "relative overflow-hidden transition-all duration-300",
+        glassmorphism && "bg-background/60 backdrop-blur-md border-white/10",
+        isFullscreen && "h-full",
+        className
+      ), children: [
+        /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base font-semibold", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: description })
           ] }),
-          /* @__PURE__ */ jsxs(MoonUICardContentPro, { children: [
-            /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: formatValue(metric.value) }),
-            metric.change && /* @__PURE__ */ jsxs("div", { className: cn(
-              "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
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            refreshing && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                animate: { rotate: 360 },
+                transition: { duration: 1, repeat: Infinity, ease: "linear" },
+                children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 text-muted-foreground" })
+              }
+            ),
+            interactive && /* @__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", className: "w-48", children: [
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => {
+                  setIsFullscreen(!isFullscreen);
+                  onAction?.("fullscreen", { fullscreen: !isFullscreen });
+                }, children: [
+                  /* @__PURE__ */ jsx(Maximize2, { className: "mr-2 h-4 w-4" }),
+                  isFullscreen ? "Exit Fullscreen" : "Fullscreen"
+                ] }),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubPro, { children: [
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubTriggerPro, { children: [
+                    /* @__PURE__ */ jsx(Palette, { className: "mr-2 h-4 w-4" }),
+                    "Color Scheme"
+                  ] }),
+                  /* @__PURE__ */ jsx(MoonUIDropdownMenuSubContentPro, { children: Object.keys(CHART_COLORS).map((scheme2) => /* @__PURE__ */ jsx(
+                    MoonUIDropdownMenuItemPro,
+                    {
+                      onClick: () => setColorScheme(scheme2),
+                      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: CHART_COLORS[scheme2].slice(0, 3).map((color, i) => /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "w-3 h-3 rounded-full",
+                            style: { backgroundColor: color }
+                          },
+                          i
+                        )) }),
+                        /* @__PURE__ */ jsx("span", { className: "capitalize", children: scheme2 })
+                      ] })
+                    },
+                    scheme2
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("export", { format: "png" }), children: [
+                  /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }),
+                  "Export as PNG"
+                ] }),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("export", { format: "csv" }), children: [
+                  /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }),
+                  "Export Data"
+                ] }),
+                /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("filter"), children: [
+                  /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }),
+                  "Filter Data"
+                ] }),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("settings"), children: [
+                  /* @__PURE__ */ jsx(Settings, { className: "mr-2 h-4 w-4" }),
+                  "Chart Settings"
+                ] })
               ] })
-            ] }),
-            metric.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: metric.description })
+            ] })
           ] })
-        ]
-      },
-      metric.id
-    );
+        ] }),
+        /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-0 px-4 pb-4", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: loading ? /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            className: "flex items-center justify-center",
+            style: { height },
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "animate-pulse bg-muted h-4 w-32 rounded" }),
+              /* @__PURE__ */ jsx("div", { className: "animate-pulse bg-muted h-4 w-24 rounded" }),
+              /* @__PURE__ */ jsx("div", { className: "animate-pulse bg-muted h-4 w-28 rounded" })
+            ] })
+          },
+          "loading"
+        ) : /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 10 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: -10 },
+            transition: { duration: 0.3 },
+            children: renderChart()
+          },
+          "chart"
+        ) }) })
+      ] })
+    }
+  );
+}
+function ActivityFeed({
+  items,
+  title = "Activity Feed",
+  className,
+  height = 400,
+  onItemClick,
+  onAction,
+  loading = false,
+  showFilters = true,
+  showNotifications = true,
+  glassmorphism = false,
+  realtime = false
+}) {
+  const [filter, setFilter] = t__default.useState("all");
+  const [notificationsEnabled, setNotificationsEnabled] = t__default.useState(true);
+  const [newItems, setNewItems] = t__default.useState([]);
+  t__default.useEffect(() => {
+    if (!realtime)
+      return;
+    const interval = setInterval(() => {
+      const randomItem = {
+        id: `new-${Date.now()}`,
+        type: ["info", "success", "warning", "error"][Math.floor(Math.random() * 4)],
+        title: "New activity",
+        description: "Something happened just now",
+        timestamp: /* @__PURE__ */ new Date(),
+        user: {
+          name: "System",
+          avatar: void 0
+        }
+      };
+      setNewItems((prev) => [randomItem, ...prev].slice(0, 3));
+      setTimeout(() => {
+        setNewItems((prev) => prev.filter((item) => item.id !== randomItem.id));
+      }, 5e3);
+    }, 1e4);
+    return () => clearInterval(interval);
+  }, [realtime]);
+  const getTypeIcon = (type) => {
+    switch (type) {
+      case "info":
+        return /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" });
+      case "success":
+        return /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" });
+      case "warning":
+        return /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" });
+      case "error":
+        return /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4" });
+    }
   };
-  const renderWidget = (widget) => {
-    const sizeClass = WIDGET_SIZES[widget.size || "md"];
-    return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("h-fit", sizeClass), children: [
-      /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base", children: widget.title }),
-          widget.description && /* @__PURE__ */ jsx(MoonUICardDescriptionPro, { className: "mt-1", children: widget.description })
+  const getTypeColor = (type) => {
+    switch (type) {
+      case "info":
+        return "text-blue-500 bg-blue-100 dark:bg-blue-900/20";
+      case "success":
+        return "text-green-500 bg-green-100 dark:bg-green-900/20";
+      case "warning":
+        return "text-yellow-500 bg-yellow-100 dark:bg-yellow-900/20";
+      case "error":
+        return "text-red-500 bg-red-100 dark:bg-red-900/20";
+    }
+  };
+  const filteredItems = [...newItems, ...items].filter(
+    (item) => filter === "all" || item.type === filter
+  );
+  const renderActivityItem = (item, isNew = false) => /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      layout: true,
+      initial: { opacity: 0, x: -20 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: 20 },
+      whileHover: { x: 4 },
+      transition: { duration: 0.2 },
+      className: cn(
+        "group relative flex gap-3 p-3 rounded-lg cursor-pointer transition-colors",
+        "hover:bg-muted/50",
+        isNew && "bg-primary/5 border-l-2 border-primary"
+      ),
+      onClick: () => onItemClick?.(item),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute left-7 top-12 bottom-0 w-px bg-border" }),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 flex-shrink-0", children: item.user?.avatar ? /* @__PURE__ */ jsxs(MoonUIAvatarPro, { className: "h-8 w-8", children: [
+          /* @__PURE__ */ jsx(MoonUIAvatarImagePro, { src: item.user.avatar }),
+          /* @__PURE__ */ jsx(MoonUIAvatarFallbackPro, { children: item.user.name[0] })
+        ] }) : /* @__PURE__ */ jsx("div", { className: cn(
+          "h-8 w-8 rounded-full flex items-center justify-center",
+          getTypeColor(item.type)
+        ), children: item.icon || getTypeIcon(item.type) }) }),
+        /* @__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 min-w-0", children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium leading-tight", children: [
+                item.user?.name && /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
+                  item.user.name,
+                  " "
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: item.title })
+              ] }),
+              item.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-0.5 line-clamp-2", children: item.description })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground whitespace-nowrap", children: [
+              /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+              formatDistanceToNow(item.timestamp, { addSuffix: true })
+            ] })
+          ] }),
+          isNew && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { scale: 0 },
+              animate: { scale: 1 },
+              className: "inline-block mt-1",
+              children: /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "default", className: "text-xs", children: "New" })
+            }
+          )
         ] }),
+        /* @__PURE__ */ jsx("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(
+          MoonUIButtonPro,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-6 w-6 p-0",
+            onClick: (e) => {
+              e.stopPropagation();
+              onAction?.("more", item);
+            },
+            children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-3 w-3" })
+          }
+        ) })
+      ]
+    },
+    item.id
+  );
+  return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn(
+    "relative overflow-hidden",
+    glassmorphism && "bg-background/60 backdrop-blur-md border-white/10",
+    className
+  ), children: [
+    /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base font-semibold", children: title }),
+        realtime && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "secondary", className: "text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: "mr-1 h-1.5 w-1.5 rounded-full bg-green-500 animate-pulse" }),
+          "Live"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        showFilters && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+          /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+            /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4 mr-1" }),
+            filter !== "all" && /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "ml-1", children: filter })
+          ] }) }),
+          /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
+            /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => setFilter("all"), children: "All Activities" }),
+            /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setFilter("info"), children: [
+              /* @__PURE__ */ jsx(Info, { className: "mr-2 h-4 w-4 text-blue-500" }),
+              "Information"
+            ] }),
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setFilter("success"), children: [
+              /* @__PURE__ */ jsx(CheckCircle, { className: "mr-2 h-4 w-4 text-green-500" }),
+              "Success"
+            ] }),
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setFilter("warning"), children: [
+              /* @__PURE__ */ jsx(AlertCircle, { className: "mr-2 h-4 w-4 text-yellow-500" }),
+              "Warning"
+            ] }),
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setFilter("error"), children: [
+              /* @__PURE__ */ jsx(XCircle, { className: "mr-2 h-4 w-4 text-red-500" }),
+              "Error"
+            ] })
+          ] })
+        ] }),
+        showNotifications && /* @__PURE__ */ jsx(
+          MoonUIButtonPro,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-8 w-8 p-0",
+            onClick: () => {
+              setNotificationsEnabled(!notificationsEnabled);
+              onAction?.("notifications", { enabled: !notificationsEnabled });
+            },
+            children: notificationsEnabled ? /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(BellOff, { className: "h-4 w-4 text-muted-foreground" })
+          }
+        ),
         /* @__PURE__ */ jsx(
           MoonUIButtonPro,
           {
             variant: "ghost",
             size: "sm",
-            onClick: () => onWidgetAction?.(widget.id, "menu"),
-            children: /* @__PURE__ */ jsx(BarChart3, { className: "h-4 w-4" })
+            className: "h-8 w-8 p-0",
+            onClick: () => onAction?.("refresh"),
+            children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" })
           }
         )
-      ] }) }),
-      /* @__PURE__ */ jsx(MoonUICardContentPro, { 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);
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-0", children: /* @__PURE__ */ jsx(ScrollArea, { className: "px-4 pb-4", style: { height }, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: loading ? /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "space-y-3",
+        children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-muted animate-pulse" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted rounded w-3/4 animate-pulse" })
+          ] })
+        ] }, i))
+      },
+      "loading"
+    ) : filteredItems.length === 0 ? /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        className: "flex flex-col items-center justify-center py-12 text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx(Activity, { className: "h-8 w-8 mb-2" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No activities to show" })
+        ]
+      },
+      "empty"
+    ) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: filteredItems.map(
+      (item) => renderActivityItem(item, newItems.some((newItem) => newItem.id === item.id))
+    ) }) }) }) })
+  ] });
+}
+
+// node_modules/react-resizable/css/styles.css
+styleInject(".react-resizable {\n  position: relative;\n}\n.react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-repeat: no-repeat;\n  background-origin: content-box;\n  box-sizing: border-box;\n  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);\n  background-position: bottom right;\n  padding: 0 3px 3px 0;\n}\n.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-resizable-handle-w,\n.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-resizable-handle-n,\n.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n");
+function DashboardGrid({
+  widgets,
+  onLayoutChange,
+  onWidgetRemove,
+  onWidgetAction,
+  editMode = false,
+  className,
+  glassmorphism = false,
+  breakpoints = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
+  cols = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
+  rowHeight = 60,
+  margin = [16, 16],
+  containerPadding = [0, 0]
+}) {
+  t__default.useState({});
+  const [currentBreakpoint, setCurrentBreakpoint] = t__default.useState("lg");
+  const [lockedWidgets, setLockedWidgets] = t__default.useState(/* @__PURE__ */ new Set());
+  const [fullscreenWidget, setFullscreenWidget] = t__default.useState(null);
+  const generateLayout = () => {
+    return widgets.map((widget) => ({
+      i: widget.id,
+      x: widget.position.x,
+      y: widget.position.y,
+      w: widget.size.w,
+      h: widget.size.h,
+      minW: widget.size.minW || 2,
+      maxW: widget.size.maxW || 12,
+      minH: widget.size.minH || 2,
+      maxH: widget.size.maxH || 8,
+      isDraggable: editMode && !lockedWidgets.has(widget.id) && widget.permissions?.canMove !== false,
+      isResizable: editMode && !lockedWidgets.has(widget.id) && widget.permissions?.canResize !== false
+    }));
   };
-  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 toggleWidgetLock = (widgetId) => {
+    setLockedWidgets((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(widgetId)) {
+        newSet.delete(widgetId);
+      } else {
+        newSet.add(widgetId);
+      }
+      return newSet;
+    });
+  };
+  const toggleFullscreen = (widgetId) => {
+    if (fullscreenWidget === widgetId) {
+      setFullscreenWidget(null);
+    } else {
+      setFullscreenWidget(widgetId);
     }
-  ];
-  const displayMetrics = metrics.length > 0 ? metrics : defaultMetrics;
-  if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: cn("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("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(
-        MoonUIButtonPro,
+  };
+  const renderWidget = (widget) => {
+    const isLocked = lockedWidgets.has(widget.id);
+    const isFullscreen = fullscreenWidget === widget.id;
+    const widgetContent = () => {
+      switch (widget.type) {
+        case "metric":
+          return /* @__PURE__ */ jsx(
+            MetricCard,
+            {
+              data: widget.data,
+              onAction: (action) => onWidgetAction?.(widget.id, action),
+              glassmorphism
+            }
+          );
+        case "chart":
+          return /* @__PURE__ */ jsx(
+            ChartWidget,
+            {
+              id: widget.id,
+              title: widget.title,
+              description: widget.description,
+              data: widget.data,
+              loading: widget.loading,
+              glassmorphism,
+              onAction: (action, data) => onWidgetAction?.(widget.id, action, data)
+            }
+          );
+        case "activity":
+          return /* @__PURE__ */ jsx(
+            ActivityFeed,
+            {
+              items: widget.data?.items || [],
+              title: widget.title,
+              loading: widget.loading,
+              glassmorphism,
+              realtime: widget.data?.realtime,
+              onAction: (action, data) => onWidgetAction?.(widget.id, action, data)
+            }
+          );
+        default:
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: [
+            "Widget type not supported: ",
+            widget.type
+          ] });
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: cn(
+          "relative group h-full",
+          isFullscreen && "!fixed !inset-4 !z-50 !h-auto !w-auto"
+        ),
+        layout: !isFullscreen,
+        transition: { duration: 0.2 },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "h-full", children: widgetContent() }),
+          editMode && !isFullscreen && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              className: "absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity",
+              children: /* @__PURE__ */ jsxs("div", { className: cn(
+                "flex items-center gap-1 p-1 rounded-lg",
+                glassmorphism ? "bg-background/80 backdrop-blur-sm" : "bg-background/95",
+                "border shadow-sm"
+              ), children: [
+                !isLocked && /* @__PURE__ */ jsx("div", { className: "drag-handle cursor-move p-1 hover:bg-muted rounded", children: /* @__PURE__ */ jsx(Grip, { className: "h-4 w-4" }) }),
+                /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-6 w-6 p-0",
+                    onClick: () => toggleWidgetLock(widget.id),
+                    children: isLocked ? /* @__PURE__ */ jsx(Lock, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Unlock, { className: "h-3 w-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-6 w-6 p-0",
+                    onClick: () => toggleFullscreen(widget.id),
+                    children: /* @__PURE__ */ jsx(Maximize2, { className: "h-3 w-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-6 w-6 p-0",
+                    onClick: () => onWidgetAction?.(widget.id, "settings"),
+                    children: /* @__PURE__ */ jsx(Settings, { className: "h-3 w-3" })
+                  }
+                ),
+                widget.permissions?.canDelete !== false && /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-6 w-6 p-0 text-destructive hover:text-destructive",
+                    onClick: () => onWidgetRemove?.(widget.id),
+                    children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                  }
+                )
+              ] })
+            }
+          ),
+          isFullscreen && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, y: -10 },
+              animate: { opacity: 1, y: 0 },
+              className: "absolute top-4 right-4 z-10",
+              children: /* @__PURE__ */ jsxs(
+                MoonUIButtonPro,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => toggleFullscreen(widget.id),
+                  children: [
+                    /* @__PURE__ */ jsx(Minimize2, { className: "h-4 w-4 mr-2" }),
+                    "Exit Fullscreen"
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      },
+      widget.id
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: fullscreenWidget ? (
+      // Fullscreen widget
+      /* @__PURE__ */ jsx(
+        motion.div,
         {
-          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"
-          ]
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          className: "fixed inset-0 z-40 bg-background",
+          children: widgets.filter((w2) => w2.id === fullscreenWidget).map(renderWidget)
         }
       )
+    ) : (
+      // Grid layout
+      /* @__PURE__ */ jsx(
+        GridLayout,
+        {
+          className: "layout",
+          layout: generateLayout(),
+          cols: cols[currentBreakpoint] || cols.lg,
+          rowHeight,
+          width: 1200,
+          margin,
+          containerPadding,
+          onLayoutChange: (layout) => {
+            onLayoutChange?.(layout);
+          },
+          onBreakpointChange: (breakpoint) => {
+            setCurrentBreakpoint(breakpoint);
+          },
+          draggableHandle: ".drag-handle",
+          isDraggable: editMode,
+          isResizable: editMode,
+          compactType: "vertical",
+          preventCollision: false,
+          children: widgets.map((widget) => /* @__PURE__ */ jsx("div", { children: renderWidget(widget) }, widget.id))
+        }
+      )
+    ) }),
+    editMode && !fullscreenWidget && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 0.1 },
+        className: "absolute inset-0 pointer-events-none",
+        style: {
+          backgroundImage: `
+              repeating-linear-gradient(
+                0deg,
+                var(--border) 0px,
+                transparent 1px,
+                transparent ${rowHeight + margin[1]}px,
+                var(--border) ${rowHeight + margin[1]}px
+              ),
+              repeating-linear-gradient(
+                90deg,
+                var(--border) 0px,
+                transparent 1px,
+                transparent ${100 / cols[currentBreakpoint]}%,
+                var(--border) ${100 / cols[currentBreakpoint]}%
+              )
+            `
+        }
+      }
+    )
+  ] });
+}
+var PRESET_RANGES = [
+  {
+    label: "Today",
+    value: "today",
+    getRange: () => ({
+      start: startOfDay(/* @__PURE__ */ new Date()),
+      end: endOfDay(/* @__PURE__ */ new Date()),
+      label: "Today",
+      preset: "today"
+    })
+  },
+  {
+    label: "Yesterday",
+    value: "yesterday",
+    getRange: () => ({
+      start: startOfDay(subDays(/* @__PURE__ */ new Date(), 1)),
+      end: endOfDay(subDays(/* @__PURE__ */ new Date(), 1)),
+      label: "Yesterday",
+      preset: "yesterday"
+    })
+  },
+  {
+    label: "Last 7 days",
+    value: "last7days",
+    getRange: () => ({
+      start: startOfDay(subDays(/* @__PURE__ */ new Date(), 6)),
+      end: endOfDay(/* @__PURE__ */ new Date()),
+      label: "Last 7 days",
+      preset: "last7days"
+    })
+  },
+  {
+    label: "Last 30 days",
+    value: "last30days",
+    getRange: () => ({
+      start: startOfDay(subDays(/* @__PURE__ */ new Date(), 29)),
+      end: endOfDay(/* @__PURE__ */ new Date()),
+      label: "Last 30 days",
+      preset: "last30days"
+    })
+  },
+  {
+    label: "This week",
+    value: "thisWeek",
+    getRange: () => ({
+      start: startOfWeek(/* @__PURE__ */ new Date()),
+      end: endOfWeek(/* @__PURE__ */ new Date()),
+      label: "This week",
+      preset: "custom"
+    })
+  },
+  {
+    label: "This month",
+    value: "thisMonth",
+    getRange: () => ({
+      start: startOfMonth(/* @__PURE__ */ new Date()),
+      end: endOfMonth(/* @__PURE__ */ new Date()),
+      label: "This month",
+      preset: "thisMonth"
+    })
+  },
+  {
+    label: "Last month",
+    value: "lastMonth",
+    getRange: () => {
+      const lastMonth = subDays(startOfMonth(/* @__PURE__ */ new Date()), 1);
+      return {
+        start: startOfMonth(lastMonth),
+        end: endOfMonth(lastMonth),
+        label: "Last month",
+        preset: "lastMonth"
+      };
+    }
+  }
+];
+function TimeRangePicker({
+  value,
+  onChange,
+  className,
+  showPresets = true,
+  showComparison = false,
+  glassmorphism = false
+}) {
+  const [isOpen, setIsOpen] = t__default.useState(false);
+  const [customRange, setCustomRange] = t__default.useState({});
+  const [comparisonEnabled, setComparisonEnabled] = t__default.useState(false);
+  const currentRange = value || PRESET_RANGES[2].getRange();
+  const formatRange = (range) => {
+    if (range.preset && range.preset !== "custom") {
+      return range.label;
+    }
+    return `${format(range.start, "MMM d")} - ${format(range.end, "MMM d, yyyy")}`;
+  };
+  const handlePresetSelect = (preset) => {
+    const range = preset.getRange();
+    onChange?.(range);
+    setIsOpen(false);
+  };
+  const handleCustomRangeSelect = () => {
+    if (customRange.from && customRange.to) {
+      onChange?.({
+        start: startOfDay(customRange.from),
+        end: endOfDay(customRange.to),
+        label: `${format(customRange.from, "MMM d")} - ${format(customRange.to, "MMM d, yyyy")}`,
+        preset: "custom"
+      });
+      setIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(MoonUIPopoverPro, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx(MoonUIPopoverTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
+      MoonUIButtonPro,
+      {
+        variant: "outline",
+        className: cn(
+          "justify-start text-left font-normal",
+          glassmorphism && "bg-background/60 backdrop-blur-sm border-white/10",
+          !value && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+          formatRange(currentRange),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto h-4 w-4 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      MoonUIPopoverContentPro,
+      {
+        className: cn(
+          "w-auto p-0",
+          glassmorphism && "bg-background/95 backdrop-blur-md border-white/10"
+        ),
+        align: "start",
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, y: -10 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.2 },
+            children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+              showPresets && /* @__PURE__ */ jsxs("div", { className: "border-r p-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 pb-2", children: [
+                  /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Quick Select" })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "space-y-1", children: PRESET_RANGES.map((preset) => /* @__PURE__ */ jsx(
+                  motion.button,
+                  {
+                    whileHover: { x: 2 },
+                    whileTap: { scale: 0.98 },
+                    onClick: () => handlePresetSelect(preset),
+                    className: cn(
+                      "w-full text-left px-2 py-1.5 text-sm rounded-md transition-colors",
+                      "hover:bg-muted",
+                      currentRange.preset === preset.value && "bg-primary text-primary-foreground"
+                    ),
+                    children: preset.label
+                  },
+                  preset.value
+                )) }),
+                showComparison && /* @__PURE__ */ jsx("div", { className: "mt-4 pt-4 border-t", children: /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 px-2 cursor-pointer", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: comparisonEnabled,
+                      onChange: (e) => setComparisonEnabled(e.target.checked),
+                      className: "rounded"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Compare to previous period" })
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 pb-2", children: [
+                  /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Custom Range" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Calendar,
+                  {
+                    mode: "range",
+                    selected: {
+                      from: customRange.from,
+                      to: customRange.to
+                    },
+                    onSelect: (range) => setCustomRange(range || {}),
+                    numberOfMonths: 2,
+                    className: "rounded-md"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-3 px-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: customRange.from && customRange.to && /* @__PURE__ */ jsxs("span", { children: [
+                    Math.ceil((customRange.to.getTime() - customRange.from.getTime()) / (1e3 * 60 * 60 * 24)),
+                    " days selected"
+                  ] }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      MoonUIButtonPro,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: () => {
+                          setCustomRange({});
+                          setIsOpen(false);
+                        },
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      MoonUIButtonPro,
+                      {
+                        size: "sm",
+                        onClick: handleCustomRangeSelect,
+                        disabled: !customRange.from || !customRange.to,
+                        children: "Apply"
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+}
+var DASHBOARD_TEMPLATES = [
+  {
+    id: "analytics",
+    name: "Analytics Dashboard",
+    description: "Comprehensive analytics with metrics and charts",
+    category: "analytics",
+    theme: "analytics",
+    widgets: [
+      {
+        type: "metric",
+        title: "Total Revenue",
+        size: { w: 3, h: 2 },
+        position: { x: 0, y: 0 },
+        data: {
+          id: "revenue",
+          title: "Total Revenue",
+          value: 125430,
+          change: { value: 12, type: "increase", period: "last month" },
+          color: "success",
+          icon: /* @__PURE__ */ jsx(DollarSign, { className: "h-4 w-4" }),
+          sparkline: [100, 120, 115, 125, 130, 128, 132],
+          unit: "$"
+        }
+      },
+      {
+        type: "metric",
+        title: "Active Users",
+        size: { w: 3, h: 2 },
+        position: { x: 3, y: 0 },
+        data: {
+          id: "users",
+          title: "Active Users",
+          value: 2543,
+          change: { value: 8, type: "increase", period: "last week" },
+          color: "primary",
+          icon: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" }),
+          sparkline: [200, 220, 210, 230, 225, 240, 254]
+        }
+      },
+      {
+        type: "chart",
+        title: "Revenue Trend",
+        size: { w: 6, h: 4 },
+        position: { x: 0, y: 2 },
+        data: {
+          type: "area",
+          data: [
+            { name: "Jan", revenue: 4e3, profit: 2400 },
+            { name: "Feb", revenue: 3e3, profit: 1398 },
+            { name: "Mar", revenue: 5e3, profit: 3200 },
+            { name: "Apr", revenue: 4500, profit: 2900 },
+            { name: "May", revenue: 6e3, profit: 3800 },
+            { name: "Jun", revenue: 5500, profit: 3400 }
+          ]
+        }
+      },
+      {
+        type: "activity",
+        title: "Recent Activity",
+        size: { w: 3, h: 6 },
+        position: { x: 9, y: 0 },
+        data: {
+          realtime: true,
+          items: [
+            {
+              id: "1",
+              type: "success",
+              title: "completed a purchase",
+              description: "Order #12345 - $250.00",
+              timestamp: new Date(Date.now() - 1e3 * 60 * 5),
+              user: { name: "John Doe" }
+            },
+            {
+              id: "2",
+              type: "info",
+              title: "signed up",
+              description: "New user registration",
+              timestamp: new Date(Date.now() - 1e3 * 60 * 15),
+              user: { name: "Jane Smith" }
+            }
+          ]
+        }
+      }
+    ]
+  },
+  {
+    id: "sales",
+    name: "Sales Dashboard",
+    description: "Track sales performance and targets",
+    category: "sales",
+    theme: "sales",
+    widgets: [
+      // Sales-specific widgets
+    ]
+  },
+  {
+    id: "monitoring",
+    name: "System Monitoring",
+    description: "Monitor system health and performance",
+    category: "operations",
+    theme: "monitoring",
+    widgets: [
+      // Monitoring widgets
+    ]
+  }
+];
+var WIDGET_TYPE_ICONS = {
+  metric: /* @__PURE__ */ jsx(BarChart3, { className: "h-4 w-4" }),
+  chart: /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4" }),
+  table: /* @__PURE__ */ jsx(Table$1, { className: "h-4 w-4" }),
+  map: /* @__PURE__ */ jsx(Map$1, { className: "h-4 w-4" }),
+  activity: /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" }),
+  calendar: /* @__PURE__ */ jsx(Calendar$1, { className: "h-4 w-4" }),
+  progress: /* @__PURE__ */ jsx(Target, { className: "h-4 w-4" }),
+  comparison: /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4" })
+};
+var THEME_COLORS = {
+  analytics: "from-blue-500/10 to-purple-500/10",
+  sales: "from-green-500/10 to-emerald-500/10",
+  monitoring: "from-orange-500/10 to-red-500/10",
+  finance: "from-indigo-500/10 to-blue-500/10",
+  custom: "from-gray-500/10 to-gray-600/10"
+};
+function Dashboard({
+  config,
+  widgets: initialWidgets = [],
+  templates = DASHBOARD_TEMPLATES,
+  onConfigChange,
+  onWidgetAdd,
+  onWidgetRemove,
+  onWidgetUpdate,
+  onExport,
+  onImport,
+  className,
+  showHeader = true,
+  title = "Dashboard",
+  description = "Real-time analytics and insights",
+  editable = true,
+  realtime = false,
+  glassmorphism = true
+}) {
+  const [editMode, setEditMode] = t__default.useState(false);
+  const [widgets, setWidgets] = t__default.useState(initialWidgets);
+  const [selectedTheme, setSelectedTheme] = t__default.useState("analytics");
+  const [timeRange, setTimeRange] = t__default.useState();
+  const [searchQuery, setSearchQuery] = t__default.useState("");
+  const [showWidgetLibrary, setShowWidgetLibrary] = t__default.useState(false);
+  const [showTemplates, setShowTemplates] = t__default.useState(false);
+  const [refreshing, setRefreshing] = t__default.useState(false);
+  const [notifications, setNotifications] = t__default.useState(3);
+  t__default.useEffect(() => {
+    if (!realtime)
+      return;
+    const interval = setInterval(() => {
+      setWidgets((prev) => prev.map((widget) => {
+        if (widget.type === "metric" && widget.data) {
+          const newValue = typeof widget.data.value === "number" ? widget.data.value + Math.floor(Math.random() * 10 - 5) : widget.data.value;
+          return {
+            ...widget,
+            data: {
+              ...widget.data,
+              value: newValue,
+              lastUpdated: /* @__PURE__ */ new Date()
+            }
+          };
+        }
+        return widget;
+      }));
+    }, 5e3);
+    return () => clearInterval(interval);
+  }, [realtime]);
+  const handleAddWidget = (type) => {
+    const newWidget = {
+      id: `widget-${Date.now()}`,
+      type,
+      title: `New ${type} Widget`,
+      size: { w: 3, h: 3 },
+      position: { x: 0, y: 0 },
+      data: generateDefaultData(type)
+    };
+    setWidgets((prev) => [...prev, newWidget]);
+    onWidgetAdd?.(newWidget);
+    setShowWidgetLibrary(false);
+  };
+  const applyTemplate = (template) => {
+    const newWidgets = template.widgets.map((w2, index) => ({
+      ...w2,
+      id: `widget-${Date.now()}-${index}`
+    }));
+    setWidgets(newWidgets);
+    setSelectedTheme(template.theme);
+    setShowTemplates(false);
+  };
+  const generateDefaultData = (type) => {
+    switch (type) {
+      case "metric":
+        return {
+          id: "new-metric",
+          title: "New Metric",
+          value: 0,
+          icon: /* @__PURE__ */ jsx(BarChart3, { className: "h-4 w-4" }),
+          color: "primary"
+        };
+      case "chart":
+        return {
+          type: "line",
+          data: [
+            { name: "Mon", value: 100 },
+            { name: "Tue", value: 120 },
+            { name: "Wed", value: 110 },
+            { name: "Thu", value: 130 },
+            { name: "Fri", value: 125 }
+          ]
+        };
+      case "activity":
+        return {
+          items: [],
+          realtime: true
+        };
+      default:
+        return {};
+    }
+  };
+  const WidgetLibrary = () => /* @__PURE__ */ jsx(Sheet, { open: showWidgetLibrary, onOpenChange: setShowWidgetLibrary, children: /* @__PURE__ */ jsxs(SheetContent, { className: cn(
+    "w-[400px] sm:w-[540px]",
+    glassmorphism && "bg-background/95 backdrop-blur-md"
+  ), children: [
+    /* @__PURE__ */ jsxs(SheetHeader, { children: [
+      /* @__PURE__ */ jsx(SheetTitle, { children: "Widget Library" }),
+      /* @__PURE__ */ jsx(SheetDescription, { children: "Add widgets to customize your dashboard" })
     ] }),
-    /* @__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(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-        /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-2" }),
-        "Export Data"
+    /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-3 h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          MoonUIInputPro,
+          {
+            placeholder: "Search widgets...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "pl-10"
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-        /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4 mr-2" }),
-        "Schedule Report"
+      /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-200px)]", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4", children: Object.entries(WIDGET_TYPE_ICONS).filter(([type]) => type.toLowerCase().includes(searchQuery.toLowerCase())).map(([type, icon]) => /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          whileHover: { scale: 1.02 },
+          whileTap: { scale: 0.98 },
+          children: /* @__PURE__ */ jsxs(
+            MoonUIButtonPro,
+            {
+              variant: "outline",
+              className: "w-full h-24 flex-col gap-2",
+              onClick: () => handleAddWidget(type),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "p-2 rounded-lg bg-muted", children: icon }),
+                /* @__PURE__ */ jsx("span", { className: "capitalize text-sm", children: type })
+              ]
+            }
+          )
+        },
+        type
+      )) }) })
+    ] })
+  ] }) });
+  const TemplateGallery = () => /* @__PURE__ */ jsx(MoonUIDialogPro, { open: showTemplates, onOpenChange: setShowTemplates, children: /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: cn(
+    "max-w-4xl",
+    glassmorphism && "bg-background/95 backdrop-blur-md"
+  ), children: [
+    /* @__PURE__ */ jsxs(MoonUIDialogHeaderPro, { children: [
+      /* @__PURE__ */ jsx(MoonUIDialogTitlePro, { children: "Dashboard Templates" }),
+      /* @__PURE__ */ jsx(MoonUIDialogDescriptionPro, { children: "Start with a pre-built template or create your own" })
+    ] }),
+    /* @__PURE__ */ jsxs(MoonUITabsPro, { defaultValue: "all", className: "mt-4", children: [
+      /* @__PURE__ */ jsxs(MoonUITabsListPro, { children: [
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "all", children: "All Templates" }),
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "analytics", children: "Analytics" }),
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "sales", children: "Sales" }),
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "operations", children: "Operations" })
       ] }),
-      /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-        /* @__PURE__ */ jsx(Star, { className: "h-4 w-4 mr-2" }),
-        "Save View"
-      ] })
+      /* @__PURE__ */ jsx(MoonUITabsContentPro, { value: "all", className: "mt-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4", children: templates.map((template) => /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          whileHover: { y: -4 },
+          className: "cursor-pointer",
+          onClick: () => applyTemplate(template),
+          children: /* @__PURE__ */ jsxs("div", { className: cn(
+            "relative overflow-hidden rounded-lg border p-4 hover:shadow-lg transition-all",
+            "bg-gradient-to-br",
+            THEME_COLORS[template.theme]
+          ), children: [
+            template.isPro && /* @__PURE__ */ jsx(MoonUIBadgePro, { className: "absolute top-2 right-2", variant: "secondary", children: "PRO" }),
+            /* @__PURE__ */ jsx("h3", { className: "font-semibold mb-1", children: template.name }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: template.description }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                template.widgets.length,
+                " widgets"
+              ] }),
+              /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+              /* @__PURE__ */ jsx("span", { className: "capitalize", children: template.category })
+            ] })
+          ] })
+        },
+        template.id
+      )) }) })
     ] })
-  ] });
+  ] }) });
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: cn(
+        "w-full min-h-screen",
+        glassmorphism && "bg-gradient-to-br",
+        glassmorphism && THEME_COLORS[selectedTheme],
+        className
+      ),
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: 0.5 },
+      children: [
+        showHeader && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: cn(
+              "sticky top-0 z-30 border-b",
+              glassmorphism ? "bg-background/80 backdrop-blur-md" : "bg-background"
+            ),
+            initial: { y: -50 },
+            animate: { y: 0 },
+            transition: { type: "spring", stiffness: 300, damping: 30 },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      whileHover: { scale: 1.05 },
+                      whileTap: { scale: 0.95 },
+                      children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "lg:hidden", children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+                      realtime && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "secondary", className: "animate-pulse", children: [
+                        /* @__PURE__ */ jsx("span", { className: "mr-1 h-1.5 w-1.5 rounded-full bg-green-500" }),
+                        "Real-time"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    TimeRangePicker,
+                    {
+                      value: timeRange,
+                      onChange: setTimeRange,
+                      glassmorphism
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "relative", children: [
+                    /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4" }),
+                    notifications > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 h-4 w-4 rounded-full bg-destructive text-[10px] font-medium text-destructive-foreground flex items-center justify-center", children: notifications })
+                  ] }) }),
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                    /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Palette, { className: "h-4 w-4" }) }) }),
+                    /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
+                      /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => setSelectedTheme("analytics"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded bg-gradient-to-br from-blue-500 to-purple-500" }),
+                        "Analytics"
+                      ] }) }),
+                      /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => setSelectedTheme("sales"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded bg-gradient-to-br from-green-500 to-emerald-500" }),
+                        "Sales"
+                      ] }) }),
+                      /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => setSelectedTheme("monitoring"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded bg-gradient-to-br from-orange-500 to-red-500" }),
+                        "Monitoring"
+                      ] }) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                    /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
+                      /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4 mr-2" }),
+                      "Actions"
+                    ] }) }),
+                    /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", className: "w-48", children: [
+                      editable && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setEditMode(!editMode), children: [
+                          /* @__PURE__ */ jsx(Edit3, { className: "mr-2 h-4 w-4" }),
+                          editMode ? "Exit Edit Mode" : "Edit Layout"
+                        ] }),
+                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setShowWidgetLibrary(true), children: [
+                          /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+                          "Add Widget"
+                        ] }),
+                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setShowTemplates(true), children: [
+                          /* @__PURE__ */ jsx(LayoutGrid, { className: "mr-2 h-4 w-4" }),
+                          "Templates"
+                        ] }),
+                        /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {})
+                      ] }),
+                      /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubPro, { children: [
+                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubTriggerPro, { children: [
+                          /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }),
+                          "Export"
+                        ] }),
+                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubContentPro, { children: [
+                          /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => onExport?.("json"), children: "As JSON" }),
+                          /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => onExport?.("pdf"), children: "As PDF" }),
+                          /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => onExport?.("png"), children: "As Image" })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { children: [
+                        /* @__PURE__ */ jsx(Upload, { className: "mr-2 h-4 w-4" }),
+                        "Import"
+                      ] }),
+                      /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+                      /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setRefreshing(true), children: [
+                        /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
+                        "Refresh Data"
+                      ] }),
+                      /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { children: [
+                        /* @__PURE__ */ jsx(Share2, { className: "mr-2 h-4 w-4" }),
+                        "Share Dashboard"
+                      ] })
+                    ] })
+                  ] })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx(AnimatePresence, { children: editMode && /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { height: 0, opacity: 0 },
+                  animate: { height: "auto", opacity: 1 },
+                  exit: { height: 0, opacity: 0 },
+                  className: "bg-primary/10 border-t border-primary/20",
+                  children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-2 flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+                      /* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4 text-primary" }),
+                      /* @__PURE__ */ jsx("span", { children: "Edit mode enabled - Drag widgets to rearrange" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxs(
+                        MoonUIButtonPro,
+                        {
+                          variant: "ghost",
+                          size: "sm",
+                          onClick: () => setEditMode(false),
+                          children: [
+                            /* @__PURE__ */ jsx(X, { className: "h-4 w-4 mr-1" }),
+                            "Cancel"
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        MoonUIButtonPro,
+                        {
+                          variant: "primary",
+                          size: "sm",
+                          onClick: () => {
+                            setEditMode(false);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(Save, { className: "h-4 w-4 mr-1" }),
+                            "Save Changes"
+                          ]
+                        }
+                      )
+                    ] })
+                  ] })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "p-6", children: widgets.length === 0 ? (
+          // Empty state
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.9 },
+              animate: { opacity: 1, scale: 1 },
+              className: "flex flex-col items-center justify-center min-h-[400px] text-center",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: cn(
+                  "p-4 rounded-full mb-4",
+                  glassmorphism ? "bg-background/60 backdrop-blur-sm" : "bg-muted"
+                ), children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-8 w-8 text-muted-foreground" }) }),
+                /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "No widgets added yet" }),
+                /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-4", children: "Start by adding widgets or choosing a template" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsxs(MoonUIButtonPro, { onClick: () => setShowWidgetLibrary(true), children: [
+                    /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
+                    "Add Widget"
+                  ] }),
+                  /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", onClick: () => setShowTemplates(true), children: [
+                    /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4 mr-2" }),
+                    "Browse Templates"
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ) : (
+          // Dashboard grid
+          /* @__PURE__ */ jsx(
+            DashboardGrid,
+            {
+              widgets,
+              onLayoutChange: (layout) => {
+                const updatedWidgets = widgets.map((widget) => {
+                  const layoutItem = layout.find((l) => l.i === widget.id);
+                  if (layoutItem) {
+                    return {
+                      ...widget,
+                      position: { x: layoutItem.x, y: layoutItem.y },
+                      size: { ...widget.size, w: layoutItem.w, h: layoutItem.h }
+                    };
+                  }
+                  return widget;
+                });
+                setWidgets(updatedWidgets);
+              },
+              onWidgetRemove: (widgetId) => {
+                setWidgets((prev) => prev.filter((w2) => w2.id !== widgetId));
+                onWidgetRemove?.(widgetId);
+              },
+              onWidgetAction: (widgetId, action, data) => {
+                console.log("Widget action:", widgetId, action, data);
+              },
+              editMode,
+              glassmorphism
+            }
+          )
+        ) }),
+        /* @__PURE__ */ jsx(WidgetLibrary, {}),
+        /* @__PURE__ */ jsx(TemplateGallery, {})
+      ]
+    }
+  );
 }
 function DraggableList({
   items,
@@ -51371,7 +53208,7 @@ var OptimizedImageInternal = ({
   width,
   height,
   quality = 75,
-  format = "auto",
+  format: format2 = "auto",
   lazy = true,
   blur: blur2 = true,
   priority = false,
@@ -51410,7 +53247,7 @@ var OptimizedImageInternal = ({
       params.set("f", options.format);
     return optimizedUrl;
   };
-  const optimizedSrc = getOptimizedSrc(src, { width, height, quality, format });
+  const optimizedSrc = getOptimizedSrc(src, { width, height, quality, format: format2 });
   const handleImageLoad = () => {
     setIsLoaded(true);
     setIsLoading(false);
@@ -51574,7 +53411,7 @@ var OptimizedImageInternal = ({
                   ] }),
                   /* @__PURE__ */ jsxs("div", { children: [
                     "Format: ",
-                    format
+                    format2
                   ] })
                 ]
               }
@@ -53475,11 +55312,11 @@ function downloadFile(content, filename, mimeType) {
   URL.revokeObjectURL(url);
 }
 async function exportData(data, options) {
-  const { format, filename = "data-export", columns, includeHeaders = true } = options;
+  const { format: format2, filename = "data-export", columns, includeHeaders = true } = options;
   let content;
   let mimeType;
   let extension;
-  switch (format) {
+  switch (format2) {
     case "csv":
       content = dataToCSV(data, columns, includeHeaders);
       mimeType = "text/csv;charset=utf-8;";
@@ -53493,7 +55330,7 @@ async function exportData(data, options) {
     case "xlsx":
       throw new Error("XLSX export requires additional dependencies. Use CSV format instead.");
     default:
-      throw new Error(`Unsupported export format: ${format}`);
+      throw new Error(`Unsupported export format: ${format2}`);
   }
   const finalFilename = `${filename}-${( new Date()).toISOString().split("T")[0]}.${extension}`;
   downloadFile(content, finalFilename, mimeType);
@@ -53976,11 +55813,11 @@ function DataTable({
     rowSelection: features.rowSelection !== false || selectable,
     export: features.export !== false || exportable
   });
-  const handleExport = async (format) => {
+  const handleExport = async (format2) => {
     const selectedRows = table.getFilteredSelectedRowModel().rows;
     const dataToExport = selectedRows.length > 0 ? selectedRows.map((row) => row.original) : table.getFilteredRowModel().rows.map((row) => row.original);
     if (typeof exportable === "object" && exportable.onExport) {
-      exportable.onExport(dataToExport, format);
+      exportable.onExport(dataToExport, format2);
       return;
     }
     if (onExport) {
@@ -53990,7 +55827,7 @@ function DataTable({
     const filename = typeof exportable === "object" && exportable.filename ? exportable.filename : "data-export";
     const visibleColumns = getVisibleColumns(columns, columnVisibility);
     await exportData(dataToExport, {
-      format,
+      format: format2,
       filename,
       columns: visibleColumns,
       includeHeaders: true
@@ -54366,7 +56203,7 @@ __export(enhanced_exports, {
   DialogProFooter: () => DialogProFooter,
   DialogProHeader: () => DialogProHeader,
   DialogProTitle: () => DialogProTitle,
-  DialogProTrigger: () => DialogTrigger,
+  DialogProTrigger: () => DialogTrigger2,
   EnhancedCardDescription: () => EnhancedCardDescription,
   EnhancedCardTitle: () => EnhancedCardTitle,
   badgeVariants: () => badgeVariants,
@@ -54899,7 +56736,7 @@ var CardProFooter = t__default.forwardRef(({ className, ...props }, ref) => /* @
 ));
 CardProFooter.displayName = "CardProFooter";
 var Dialog = DialogPrimitive.Root;
-var DialogTrigger = DialogPrimitive.Trigger;
+var DialogTrigger2 = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
 var DialogProOverlay = t.forwardRef(({ className, blur: blur2 = "md", variant = "default", ...props }, ref) => {
@@ -55248,4 +57085,4 @@ var BadgePro = t__default.forwardRef(({
 });
 BadgePro.displayName = "BadgePro";
 
-export { MoonUIAccordionPro as Accordion, MoonUIAccordionContentPro as AccordionContent, MoonUIAccordionItemPro as AccordionItem, MoonUIAccordionTriggerPro as AccordionTrigger, AdvancedChart, AdvancedForms, MoonUIAlertPro as Alert, MoonUIAlertDescriptionPro as AlertDescription, MoonUIAlertTitlePro as AlertTitle, AnimatedButton, MoonUIAspectRatioPro as AspectRatio, MoonUIAvatarPro as Avatar, MoonUIAvatarFallbackPro as AvatarFallback, MoonUIAvatarImagePro as AvatarImage, MoonUIBadgePro as Badge, MoonUIBreadcrumbPro as Breadcrumb, MoonUIBreadcrumbEllipsisPro as BreadcrumbEllipsis, MoonUIBreadcrumbItemPro as BreadcrumbItem, MoonUIBreadcrumbLinkPro as BreadcrumbLink, MoonUIBreadcrumbListPro as BreadcrumbList, MoonUIBreadcrumbPagePro as BreadcrumbPage, MoonUIBreadcrumbSeparatorPro as BreadcrumbSeparator, MoonUIButtonPro as Button, Calendar2 as Calendar, MoonUICardPro as Card, MoonUICardContentPro as CardContent, MoonUICardDescriptionPro as CardDescription, MoonUICardFooterPro as CardFooter, MoonUICardHeaderPro as CardHeader, MoonUICardTitlePro as CardTitle, MoonUICheckboxPro as Checkbox, MoonUICollapsiblePro as Collapsible, MoonUICollapsibleContentPro as CollapsibleContent, MoonUICollapsibleTriggerPro as CollapsibleTrigger, MoonUIColorPickerPro as ColorPicker, MoonUICommandPro as Command, MoonUICommandDialogPro as CommandDialog, MoonUICommandEmptyPro as CommandEmpty, MoonUICommandGroupPro as CommandGroup, MoonUICommandInputPro as CommandInput, MoonUICommandItemPro as CommandItem, MoonUICommandListPro as CommandList, MoonUICommandSeparatorPro as CommandSeparator, MoonUICommandShortcutPro as CommandShortcut, Dashboard, DataTable, MoonUIDialogPro as Dialog, MoonUIDialogClosePro as DialogClose, MoonUIDialogContentPro as DialogContent, MoonUIDialogDescriptionPro as DialogDescription, MoonUIDialogFooterPro as DialogFooter, MoonUIDialogHeaderPro as DialogHeader, MoonUIDialogTitlePro as DialogTitle, MoonUIDialogTriggerPro as DialogTrigger, DraggableList, MoonUIDropdownMenuPro as DropdownMenu, MoonUIDropdownMenuCheckboxItemPro as DropdownMenuCheckboxItem, MoonUIDropdownMenuContentPro as DropdownMenuContent, MoonUIDropdownMenuGroupPro as DropdownMenuGroup, MoonUIDropdownMenuItemPro as DropdownMenuItem, MoonUIDropdownMenuLabelPro as DropdownMenuLabel, MoonUIDropdownMenuPortalPro as DropdownMenuPortal, MoonUIDropdownMenuRadioGroupPro as DropdownMenuRadioGroup, MoonUIDropdownMenuRadioItemPro as DropdownMenuRadioItem, MoonUIDropdownMenuSeparatorPro as DropdownMenuSeparator, MoonUIDropdownMenuShortcutPro as DropdownMenuShortcut, MoonUIDropdownMenuSubPro as DropdownMenuSub, MoonUIDropdownMenuSubContentPro as DropdownMenuSubContent, MoonUIDropdownMenuSubTriggerPro as DropdownMenuSubTrigger, MoonUIDropdownMenuTriggerPro as DropdownMenuTrigger, enhanced_exports as Enhanced, ErrorBoundary, FileUpload, FloatingActionButton, GitHubStars, HealthCheck, HoverCard3D, MoonUIInputPro as Input, Kanban, MoonUILabelPro as Label, LazyComponent, LazyImage, LazyList, MagneticButton, MemoryAnalytics, MemoryEfficientData, MoonUIAccordionContentPro, MoonUIAccordionItemPro, MoonUIAccordionPro, MoonUIAccordionTriggerPro, MoonUIAlertDescriptionPro, MoonUIAlertPro, MoonUIAlertTitlePro, MoonUIAspectRatioPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, MoonUIAvatarPro, MoonUIBadgePro, MoonUIBreadcrumbEllipsisPro, MoonUIBreadcrumbItemPro, MoonUIBreadcrumbLinkPro, MoonUIBreadcrumbListPro, MoonUIBreadcrumbPagePro, MoonUIBreadcrumbPro, MoonUIBreadcrumbSeparatorPro, MoonUIButtonPro, MoonUICardContentPro, MoonUICardDescriptionPro, MoonUICardFooterPro, MoonUICardHeaderPro, MoonUICardPro, MoonUICardTitlePro, MoonUICheckboxPro, MoonUICollapsibleContentPro, MoonUICollapsiblePro, MoonUICollapsibleTriggerPro, MoonUIColorPickerPro, MoonUICommandDialogPro, MoonUICommandEmptyPro, MoonUICommandGroupPro, MoonUICommandInputPro, MoonUICommandItemPro, MoonUICommandListPro, MoonUICommandPro, MoonUICommandSeparatorPro, MoonUICommandShortcutPro, MoonUIDialogClosePro, MoonUIDialogContentPro, MoonUIDialogDescriptionPro, MoonUIDialogFooterPro, MoonUIDialogHeaderPro, MoonUIDialogPro, MoonUIDialogTitlePro, MoonUIDialogTriggerPro, MoonUIDropdownMenuCheckboxItemPro, MoonUIDropdownMenuContentPro, MoonUIDropdownMenuGroupPro, MoonUIDropdownMenuItemPro, MoonUIDropdownMenuLabelPro, MoonUIDropdownMenuPortalPro, MoonUIDropdownMenuPro, MoonUIDropdownMenuRadioGroupPro, MoonUIDropdownMenuRadioItemPro, MoonUIDropdownMenuSeparatorPro, MoonUIDropdownMenuShortcutPro, MoonUIDropdownMenuSubContentPro, MoonUIDropdownMenuSubPro, MoonUIDropdownMenuSubTriggerPro, MoonUIDropdownMenuTriggerPro, MoonUIInputPro, MoonUILabelPro, MoonUIPaginationContentPro, MoonUIPaginationEllipsisPro, MoonUIPaginationItemPro, MoonUIPaginationLinkPro, MoonUIPaginationNextPro, MoonUIPaginationPreviousPro, MoonUIPaginationPro, MoonUIPopoverContentPro, MoonUIPopoverPro, MoonUIPopoverTriggerPro, MoonUIProgressPro, MoonUIRadioGroupContextPro, MoonUIRadioGroupItemPro, MoonUIRadioGroupPro, MoonUIRadioItemWithLabelPro, MoonUIRadioLabelPro, MoonUISelectContentPro, MoonUISelectGroupPro, MoonUISelectItemPro, MoonUISelectLabelPro, MoonUISelectPro, MoonUISelectSeparatorPro, MoonUISelectTriggerPro, MoonUISelectValuePro, MoonUISeparatorPro, MoonUISkeletonPro, MoonUISliderPro, MoonUISwitchPro, MoonUITableBodyPro, MoonUITableCaptionPro, MoonUITableCellPro, MoonUITableFooterPro, MoonUITableHeadPro, MoonUITableHeaderPro, MoonUITablePro, MoonUITableRowPro, MoonUITabsContentPro, MoonUITabsListPro, MoonUITabsPro, MoonUITabsTriggerPro, MoonUITextareaPro, MoonUIToastPro, MoonUITogglePro, MoonUITooltipContentPro, MoonUITooltipPro, MoonUITooltipProviderPro, MoonUITooltipTriggerPro, MoonUIalertVariantsPro, MoonUIaspectRatioVariantsPro, MoonUIbreadcrumbVariantsPro, MoonUIcollapsibleContentVariantsPro, MoonUIcollapsibleTriggerVariantsPro, MoonUIcommandVariantsPro, MoonUIradioGroupItemVariantsPro, MoonUItableVariantsPro, MoonUItoggleVariantsPro, OptimizedImage, MoonUIPaginationPro as Pagination, MoonUIPaginationContentPro as PaginationContent, MoonUIPaginationEllipsisPro as PaginationEllipsis, MoonUIPaginationItemPro as PaginationItem, MoonUIPaginationLinkPro as PaginationLink, MoonUIPaginationNextPro as PaginationNext, MoonUIPaginationPreviousPro as PaginationPrevious, PerformanceDebugger, PerformanceMonitor, PinchZoom, MoonUIPopoverPro as Popover, MoonUIPopoverContentPro as PopoverContent, MoonUIPopoverTriggerPro as PopoverTrigger, MoonUIProgressPro as Progress, MoonUIRadioGroupPro as RadioGroup, MoonUIRadioGroupContextPro as RadioGroupContext, MoonUIRadioGroupItemPro as RadioGroupItem, MoonUIRadioItemWithLabelPro as RadioItemWithLabel, MoonUIRadioLabelPro as RadioLabel, RichTextEditor, MoonUISelectPro as Select, MoonUISelectContentPro as SelectContent, MoonUISelectGroupPro as SelectGroup, MoonUISelectItemPro as SelectItem, MoonUISelectLabelPro as SelectLabel, MoonUISelectSeparatorPro as SelectSeparator, MoonUISelectTriggerPro as SelectTrigger, MoonUISelectValuePro as SelectValue, SelectableVirtualList, MoonUISeparatorPro as Separator, MoonUISkeletonPro as Skeleton, MoonUISliderPro as Slider, SpotlightCard, SwipeableCard, MoonUISwitchPro as Switch, MoonUITablePro as Table, MoonUITableBodyPro as TableBody, MoonUITableCaptionPro as TableCaption, MoonUITableCellPro as TableCell, MoonUITableFooterPro as TableFooter, MoonUITableHeadPro as TableHead, MoonUITableHeaderPro as TableHeader, MoonUITableRowPro as TableRow, MoonUITabsPro as Tabs, MoonUITabsContentPro as TabsContent, MoonUITabsListPro as TabsList, MoonUITabsTriggerPro as TabsTrigger, MoonUITextareaPro as Textarea, Timeline, MoonUIToastPro as Toast, MoonUITogglePro as Toggle, MoonUITooltipPro as Tooltip, MoonUITooltipContentPro as TooltipContent, MoonUITooltipProviderPro as TooltipProvider, MoonUITooltipTriggerPro as TooltipTrigger, VirtualList, MoonUIalertVariantsPro as alertVariants, animatedButtonVariants, MoonUIaspectRatioVariantsPro as aspectRatioVariants, moonUIBadgeVariantsPro as badgeVariants, MoonUIbreadcrumbVariantsPro as breadcrumbVariants, moonUIButtonProVariants as buttonVariants, cn, MoonUIcollapsibleContentVariantsPro as collapsibleContentVariants, MoonUIcollapsibleTriggerVariantsPro as collapsibleTriggerVariants, MoonUIcommandVariantsPro as commandVariants, getExpandableColumn, moonUIBadgeVariantsPro, moonUIButtonProVariants, moonUISeparatorVariantsPro, MoonUIradioGroupItemVariantsPro as radioGroupItemVariants, moonUISeparatorVariantsPro as separatorVariants, MoonUItableVariantsPro as tableVariants, MoonUItoggleVariantsPro as toggleVariants, useExpandableRows, useStreamingData, useVirtualList };
+export { MoonUIAccordionPro as Accordion, MoonUIAccordionContentPro as AccordionContent, MoonUIAccordionItemPro as AccordionItem, MoonUIAccordionTriggerPro as AccordionTrigger, Calendar3 as AdvancedCalendar, AdvancedChart, AdvancedForms, MoonUIAlertPro as Alert, MoonUIAlertDescriptionPro as AlertDescription, MoonUIAlertTitlePro as AlertTitle, AnimatedButton, MoonUIAspectRatioPro as AspectRatio, MoonUIAvatarPro as Avatar, MoonUIAvatarFallbackPro as AvatarFallback, MoonUIAvatarImagePro as AvatarImage, MoonUIBadgePro as Badge, MoonUIBreadcrumbPro as Breadcrumb, MoonUIBreadcrumbEllipsisPro as BreadcrumbEllipsis, MoonUIBreadcrumbItemPro as BreadcrumbItem, MoonUIBreadcrumbLinkPro as BreadcrumbLink, MoonUIBreadcrumbListPro as BreadcrumbList, MoonUIBreadcrumbPagePro as BreadcrumbPage, MoonUIBreadcrumbSeparatorPro as BreadcrumbSeparator, MoonUIButtonPro as Button, Calendar, MoonUICardPro as Card, MoonUICardContentPro as CardContent, MoonUICardDescriptionPro as CardDescription, MoonUICardFooterPro as CardFooter, MoonUICardHeaderPro as CardHeader, MoonUICardTitlePro as CardTitle, MoonUICheckboxPro as Checkbox, MoonUICollapsiblePro as Collapsible, MoonUICollapsibleContentPro as CollapsibleContent, MoonUICollapsibleTriggerPro as CollapsibleTrigger, MoonUIColorPickerPro as ColorPicker, MoonUICommandPro as Command, MoonUICommandDialogPro as CommandDialog, MoonUICommandEmptyPro as CommandEmpty, MoonUICommandGroupPro as CommandGroup, MoonUICommandInputPro as CommandInput, MoonUICommandItemPro as CommandItem, MoonUICommandListPro as CommandList, MoonUICommandSeparatorPro as CommandSeparator, MoonUICommandShortcutPro as CommandShortcut, Dashboard, DataTable, MoonUIDialogPro as Dialog, MoonUIDialogClosePro as DialogClose, MoonUIDialogContentPro as DialogContent, MoonUIDialogDescriptionPro as DialogDescription, MoonUIDialogFooterPro as DialogFooter, MoonUIDialogHeaderPro as DialogHeader, MoonUIDialogTitlePro as DialogTitle, MoonUIDialogTriggerPro as DialogTrigger, DraggableList, MoonUIDropdownMenuPro as DropdownMenu, MoonUIDropdownMenuCheckboxItemPro as DropdownMenuCheckboxItem, MoonUIDropdownMenuContentPro as DropdownMenuContent, MoonUIDropdownMenuGroupPro as DropdownMenuGroup, MoonUIDropdownMenuItemPro as DropdownMenuItem, MoonUIDropdownMenuLabelPro as DropdownMenuLabel, MoonUIDropdownMenuPortalPro as DropdownMenuPortal, MoonUIDropdownMenuRadioGroupPro as DropdownMenuRadioGroup, MoonUIDropdownMenuRadioItemPro as DropdownMenuRadioItem, MoonUIDropdownMenuSeparatorPro as DropdownMenuSeparator, MoonUIDropdownMenuShortcutPro as DropdownMenuShortcut, MoonUIDropdownMenuSubPro as DropdownMenuSub, MoonUIDropdownMenuSubContentPro as DropdownMenuSubContent, MoonUIDropdownMenuSubTriggerPro as DropdownMenuSubTrigger, MoonUIDropdownMenuTriggerPro as DropdownMenuTrigger, enhanced_exports as Enhanced, ErrorBoundary, FileUpload, FloatingActionButton, GitHubStars, HealthCheck, HoverCard3D, MoonUIInputPro as Input, Kanban, MoonUILabelPro as Label, LazyComponent, LazyImage, LazyList, MagneticButton, MemoryAnalytics, MemoryEfficientData, MoonUIAccordionContentPro, MoonUIAccordionItemPro, MoonUIAccordionPro, MoonUIAccordionTriggerPro, MoonUIAlertDescriptionPro, MoonUIAlertPro, MoonUIAlertTitlePro, MoonUIAspectRatioPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, MoonUIAvatarPro, MoonUIBadgePro, MoonUIBreadcrumbEllipsisPro, MoonUIBreadcrumbItemPro, MoonUIBreadcrumbLinkPro, MoonUIBreadcrumbListPro, MoonUIBreadcrumbPagePro, MoonUIBreadcrumbPro, MoonUIBreadcrumbSeparatorPro, MoonUIButtonPro, MoonUICardContentPro, MoonUICardDescriptionPro, MoonUICardFooterPro, MoonUICardHeaderPro, MoonUICardPro, MoonUICardTitlePro, MoonUICheckboxPro, MoonUICollapsibleContentPro, MoonUICollapsiblePro, MoonUICollapsibleTriggerPro, MoonUIColorPickerPro, MoonUICommandDialogPro, MoonUICommandEmptyPro, MoonUICommandGroupPro, MoonUICommandInputPro, MoonUICommandItemPro, MoonUICommandListPro, MoonUICommandPro, MoonUICommandSeparatorPro, MoonUICommandShortcutPro, MoonUIDialogClosePro, MoonUIDialogContentPro, MoonUIDialogDescriptionPro, MoonUIDialogFooterPro, MoonUIDialogHeaderPro, MoonUIDialogPro, MoonUIDialogTitlePro, MoonUIDialogTriggerPro, MoonUIDropdownMenuCheckboxItemPro, MoonUIDropdownMenuContentPro, MoonUIDropdownMenuGroupPro, MoonUIDropdownMenuItemPro, MoonUIDropdownMenuLabelPro, MoonUIDropdownMenuPortalPro, MoonUIDropdownMenuPro, MoonUIDropdownMenuRadioGroupPro, MoonUIDropdownMenuRadioItemPro, MoonUIDropdownMenuSeparatorPro, MoonUIDropdownMenuShortcutPro, MoonUIDropdownMenuSubContentPro, MoonUIDropdownMenuSubPro, MoonUIDropdownMenuSubTriggerPro, MoonUIDropdownMenuTriggerPro, MoonUIInputPro, MoonUILabelPro, MoonUIPaginationContentPro, MoonUIPaginationEllipsisPro, MoonUIPaginationItemPro, MoonUIPaginationLinkPro, MoonUIPaginationNextPro, MoonUIPaginationPreviousPro, MoonUIPaginationPro, MoonUIPopoverContentPro, MoonUIPopoverPro, MoonUIPopoverTriggerPro, MoonUIProgressPro, MoonUIRadioGroupContextPro, MoonUIRadioGroupItemPro, MoonUIRadioGroupPro, MoonUIRadioItemWithLabelPro, MoonUIRadioLabelPro, MoonUISelectContentPro, MoonUISelectGroupPro, MoonUISelectItemPro, MoonUISelectLabelPro, MoonUISelectPro, MoonUISelectSeparatorPro, MoonUISelectTriggerPro, MoonUISelectValuePro, MoonUISeparatorPro, MoonUISkeletonPro, MoonUISliderPro, MoonUISwitchPro, MoonUITableBodyPro, MoonUITableCaptionPro, MoonUITableCellPro, MoonUITableFooterPro, MoonUITableHeadPro, MoonUITableHeaderPro, MoonUITablePro, MoonUITableRowPro, MoonUITabsContentPro, MoonUITabsListPro, MoonUITabsPro, MoonUITabsTriggerPro, MoonUITextareaPro, MoonUIToastPro, MoonUITogglePro, MoonUITooltipContentPro, MoonUITooltipPro, MoonUITooltipProviderPro, MoonUITooltipTriggerPro, MoonUIalertVariantsPro, MoonUIaspectRatioVariantsPro, MoonUIbreadcrumbVariantsPro, MoonUIcollapsibleContentVariantsPro, MoonUIcollapsibleTriggerVariantsPro, MoonUIcommandVariantsPro, MoonUIradioGroupItemVariantsPro, MoonUItableVariantsPro, MoonUItoggleVariantsPro, OptimizedImage, MoonUIPaginationPro as Pagination, MoonUIPaginationContentPro as PaginationContent, MoonUIPaginationEllipsisPro as PaginationEllipsis, MoonUIPaginationItemPro as PaginationItem, MoonUIPaginationLinkPro as PaginationLink, MoonUIPaginationNextPro as PaginationNext, MoonUIPaginationPreviousPro as PaginationPrevious, PerformanceDebugger, PerformanceMonitor, PinchZoom, MoonUIPopoverPro as Popover, MoonUIPopoverContentPro as PopoverContent, MoonUIPopoverTriggerPro as PopoverTrigger, MoonUIProgressPro as Progress, MoonUIRadioGroupPro as RadioGroup, MoonUIRadioGroupContextPro as RadioGroupContext, MoonUIRadioGroupItemPro as RadioGroupItem, MoonUIRadioItemWithLabelPro as RadioItemWithLabel, MoonUIRadioLabelPro as RadioLabel, RichTextEditor, ScrollArea, ScrollBar, MoonUISelectPro as Select, MoonUISelectContentPro as SelectContent, MoonUISelectGroupPro as SelectGroup, MoonUISelectItemPro as SelectItem, MoonUISelectLabelPro as SelectLabel, MoonUISelectSeparatorPro as SelectSeparator, MoonUISelectTriggerPro as SelectTrigger, MoonUISelectValuePro as SelectValue, SelectableVirtualList, MoonUISeparatorPro as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, MoonUISkeletonPro as Skeleton, MoonUISliderPro as Slider, SpotlightCard, SwipeableCard, MoonUISwitchPro as Switch, MoonUITablePro as Table, MoonUITableBodyPro as TableBody, MoonUITableCaptionPro as TableCaption, MoonUITableCellPro as TableCell, MoonUITableFooterPro as TableFooter, MoonUITableHeadPro as TableHead, MoonUITableHeaderPro as TableHeader, MoonUITableRowPro as TableRow, MoonUITabsPro as Tabs, MoonUITabsContentPro as TabsContent, MoonUITabsListPro as TabsList, MoonUITabsTriggerPro as TabsTrigger, MoonUITextareaPro as Textarea, Timeline, MoonUIToastPro as Toast, MoonUITogglePro as Toggle, MoonUITooltipPro as Tooltip, MoonUITooltipContentPro as TooltipContent, MoonUITooltipProviderPro as TooltipProvider, MoonUITooltipTriggerPro as TooltipTrigger, VirtualList, MoonUIalertVariantsPro as alertVariants, animatedButtonVariants, MoonUIaspectRatioVariantsPro as aspectRatioVariants, moonUIBadgeVariantsPro as badgeVariants, MoonUIbreadcrumbVariantsPro as breadcrumbVariants, moonUIButtonProVariants as buttonVariants, cn, MoonUIcollapsibleContentVariantsPro as collapsibleContentVariants, MoonUIcollapsibleTriggerVariantsPro as collapsibleTriggerVariants, MoonUIcommandVariantsPro as commandVariants, getExpandableColumn, moonUIBadgeVariantsPro, moonUIButtonProVariants, moonUISeparatorVariantsPro, MoonUIradioGroupItemVariantsPro as radioGroupItemVariants, moonUISeparatorVariantsPro as separatorVariants, MoonUItableVariantsPro as tableVariants, MoonUItoggleVariantsPro as toggleVariants, useExpandableRows, useStreamingData, useVirtualList };