@moontra/moonui-pro 2.24.6 → 2.24.8

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge';
 import * as t from 'react';
 import t__default, { useState, useMemo, useCallback, useRef, useEffect, forwardRef, createContext, useContext, useLayoutEffect, useDebugValue, Component } from 'react';
 import * as AccordionPrimitive2 from '@radix-ui/react-accordion';
-import { Loader2, Play, ExternalLink, ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Minus, Clock, ChevronUp, Search, Mic, MicOff, Settings, RefreshCw, Zap, ChevronRight, Crown, Circle, ChevronLeft, Plus, Lock, Sparkles, ZoomOut, ZoomIn, Pause, VolumeX, Volume2, Download, Maximize2, Filter, Image as Image$1, Video, RotateCw, Minimize2, Phone, Globe, Upload, Eye, CheckCircle2, RotateCcw, Copy, Share, Trash2, CreditCard, XCircle, HelpCircle, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Code as Code$1, Link as Link$1, Palette, Undo, Redo, Edit, GripVertical, Type, Heading1, Heading2, Heading3, CheckSquare, Highlighter, Link2, Table as Table$1, Wand2, Maximize, FileText, Briefcase, MessageSquare, Heart, GraduationCap, Languages, Lightbulb, BarChart3, Music, Archive, File, FileSpreadsheet, FileJson, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, CheckCircle, Star, Shield, Award, Gem, Flame, Menu, Calendar as Calendar$1, Repeat, MapPin, Users, User, Move, EyeOff, Timer, Square, Cpu, Target, GitBranch, ArrowRight, MoreVertical, Trash, TrendingUp, MessageCircle, Paperclip, Printer, TrendingDown, Bell, CheckCheck, Settings2, LogOut, Edit3, LayoutGrid, Share2, Save, Github, Activity, Server, Monitor, MemoryStick, HardDrive, Network, Columns, Pin, Sun, Moon, Send, Tag, Flag, BellOff, CalendarIcon, DollarSign, Trophy, ArrowDownRight, ArrowUpRight, Grip, Unlock, Map as Map$1, GitFork, Package } from 'lucide-react';
+import { Loader2, Play, ExternalLink, ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Minus, Clock, ChevronUp, Search, Mic, MicOff, Settings, RefreshCw, Zap, ChevronRight, Crown, Circle, ChevronLeft, Plus, Lock, Sparkles, ZoomOut, ZoomIn, Pause, VolumeX, Volume2, Download, Maximize2, Filter, Image as Image$1, Video, RotateCw, Minimize2, Phone, Globe, Upload, Eye, CheckCircle2, RotateCcw, Copy, Share, Trash2, CreditCard, XCircle, HelpCircle, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Code as Code$1, Link as Link$1, Palette, Undo, Redo, Edit, GripVertical, Type, Heading1, Heading2, Heading3, CheckSquare, Highlighter, Link2, Table as Table$1, Wand2, Maximize, FileText, Briefcase, MessageSquare, Heart, GraduationCap, Languages, Lightbulb, BarChart3, Music, Archive, File, FileSpreadsheet, FileJson, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, CheckCircle, Star, Shield, Award, Gem, Flame, Menu, Calendar as Calendar$1, Repeat, MapPin, Users, User, Move, EyeOff, Timer, Square, Cpu, Target, GitBranch, ArrowRight, MoreVertical, Trash, TrendingUp, MessageCircle, Paperclip, Printer, TrendingDown, Bell, CheckCheck, Settings2, LogOut, Edit3, LayoutGrid, Share2, Save, Github, Activity, Server, Monitor, MemoryStick, HardDrive, Network, Columns, Pin, Sun, Moon, Send, Tag, Flag, BellOff, CalendarIcon, DollarSign, Map as Map$1, Trophy, ArrowDownRight, ArrowUpRight, Grip, Unlock, GitFork, Package } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -65070,68 +65070,54 @@ function DashboardInternal({
   brandName
 }) {
   const [editMode, setEditMode] = t__default.useState(false);
-  const [widgets, setWidgets] = t__default.useState(initialWidgets);
+  const [widgets, setWidgets] = t__default.useState(() => initialWidgets);
   const [selectedTheme, setSelectedTheme] = t__default.useState("analytics");
-  const [timeRange, setTimeRange] = t__default.useState(propTimeRange);
+  const [timeRange, setTimeRange] = t__default.useState(() => propTimeRange);
   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 [showNotifications, setShowNotifications] = t__default.useState(false);
+  const prevInitialWidgetsRef = t__default.useRef(initialWidgets);
+  const prevTimeRangeRef = t__default.useRef(propTimeRange);
   t__default.useEffect(() => {
-    setWidgets(initialWidgets);
+    if (prevInitialWidgetsRef.current !== initialWidgets) {
+      prevInitialWidgetsRef.current = initialWidgets;
+      setWidgets(initialWidgets);
+    }
   }, [initialWidgets]);
   t__default.useEffect(() => {
-    if (propTimeRange) {
+    if (propTimeRange && prevTimeRangeRef.current !== propTimeRange) {
+      prevTimeRangeRef.current = propTimeRange;
       setTimeRange(propTimeRange);
     }
   }, [propTimeRange]);
   t__default.useEffect(() => {
-    if (!realtime)
+    if (!realtime || mode !== "widgets")
       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;
-      }));
+      setWidgets((prev) => {
+        if (!prev || prev.length === 0)
+          return prev;
+        return 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((w, index2) => ({
-      ...w,
-      id: `widget-${Date.now()}-${index2}`,
-      position: w.position || { x: index2 * 3 % 12, y: Math.floor(index2 * 3 / 12) * 3 },
-      size: w.size || { w: 3, h: 3 }
-    }));
-    setWidgets(newWidgets);
-    setSelectedTheme(template.theme);
-    setShowTemplates(false);
-  };
-  const generateDefaultData = (type) => {
+  }, [realtime, mode]);
+  const generateDefaultData = t__default.useCallback((type) => {
     switch (type) {
       case "metric":
         return {
@@ -65160,96 +65146,128 @@ function DashboardInternal({
       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__ */ 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);
-              onSearch?.(e.target.value);
-            },
-            className: "pl-10"
-          }
-        )
+  }, []);
+  const handleAddWidget = t__default.useCallback((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);
+  }, [onWidgetAdd, generateDefaultData]);
+  const applyTemplate = t__default.useCallback((template) => {
+    const newWidgets = template.widgets.map((w, index2) => ({
+      ...w,
+      id: `widget-${Date.now()}-${index2}`,
+      position: w.position || { x: index2 * 3 % 12, y: Math.floor(index2 * 3 / 12) * 3 },
+      size: w.size || { w: 3, h: 3 }
+    }));
+    setWidgets(newWidgets);
+    setSelectedTheme(template.theme);
+    setShowTemplates(false);
+  }, []);
+  const WidgetLibrary = t__default.useCallback(() => {
+    if (!showWidgetLibrary)
+      return null;
+    return /* @__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(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,
+      /* @__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,
             {
-              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 })
-              ]
+              placeholder: "Search widgets...",
+              value: searchQuery,
+              onChange: (e) => {
+                setSearchQuery(e.target.value);
+                onSearch?.(e.target.value);
+              },
+              className: "pl-10"
             }
           )
-        },
-        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(Tabs, { defaultValue: "all", className: "mt-4", children: [
-      /* @__PURE__ */ jsxs(TabsList, { children: [
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "all", children: "All Templates" }),
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "analytics", children: "Analytics" }),
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "sales", children: "Sales" }),
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "operations", children: "Operations" })
+        ] }),
+        /* @__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
+        )) }) })
+      ] })
+    ] }) });
+  }, [showWidgetLibrary, searchQuery, glassmorphism, onSearch, handleAddWidget]);
+  const TemplateGallery = t__default.useCallback(() => {
+    if (!showTemplates)
+      return null;
+    return /* @__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__ */ jsx(TabsContent, { 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 })
+      /* @__PURE__ */ jsxs(Tabs, { defaultValue: "all", className: "mt-4", children: [
+        /* @__PURE__ */ jsxs(TabsList, { children: [
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "all", children: "All Templates" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "analytics", children: "Analytics" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "sales", children: "Sales" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "operations", children: "Operations" })
+        ] }),
+        /* @__PURE__ */ jsx(TabsContent, { 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
-      )) }) })
-    ] })
-  ] }) });
+          },
+          template.id
+        )) }) })
+      ] })
+    ] }) });
+  }, [showTemplates, glassmorphism, templates, applyTemplate]);
   return /* @__PURE__ */ jsxs(
     motion.div,
     {
@@ -65727,8 +65745,8 @@ function DashboardInternal({
             )
           ) })
         ),
-        /* @__PURE__ */ jsx(WidgetLibrary, {}),
-        /* @__PURE__ */ jsx(TemplateGallery, {})
+        showWidgetLibrary && /* @__PURE__ */ jsx(WidgetLibrary, {}),
+        showTemplates && /* @__PURE__ */ jsx(TemplateGallery, {})
       ]
     }
   );

package/package.json

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