@moontra/moonui-pro 2.24.4 → 2.24.7

package/dist/index.mjs

@@ -4,11 +4,11 @@ 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, CalendarIcon, DollarSign, Trophy, Grip, Unlock, Map as Map$1, GitFork, Package, BellOff, ArrowUpRight, ArrowDownRight } 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, Trophy, ArrowDownRight, ArrowUpRight, Grip, Unlock, Map as Map$1, 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';
-import { format, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterval, getDay, startOfWeek, endOfWeek, isSameMonth, isToday, isSameDay, startOfDay, endOfDay, subDays, formatDistanceToNow } from 'date-fns';
+import { format, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterval, getDay, startOfWeek, endOfWeek, isSameMonth, isToday, isSameDay, formatDistanceToNow, startOfDay, endOfDay, subDays } from 'date-fns';
 import { motion, AnimatePresence, useAnimation, useMotionValue, animate, useSpring, useTransform, Reorder, useDragControls } from 'framer-motion';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as ReactDOM2 from 'react-dom';
@@ -65043,6 +65043,11 @@ function DashboardInternal({
   editable = true,
   realtime = false,
   glassmorphism = true,
+  children,
+  mode = "widgets",
+  contentClassName,
+  sidebarPosition = "none",
+  sidebarContent,
   notifications = [],
   onNotificationClick,
   onNotificationMarkAsRead,
@@ -65065,19 +65070,25 @@ 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]);
@@ -65582,66 +65593,146 @@ function DashboardInternal({
             ]
           }
         ),
-        /* @__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 }
-                    };
+        mode === "children" ? (
+          // Children mode - use as layout wrapper
+          /* @__PURE__ */ jsxs("div", { className: cn("flex-1", contentClassName), children: [
+            sidebarPosition !== "none" && sidebarContent && /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+              sidebarPosition === "left" && /* @__PURE__ */ jsx("div", { className: cn(
+                "w-64 border-r",
+                glassmorphism ? "bg-background/60 backdrop-blur-md" : "bg-background"
+              ), children: /* @__PURE__ */ jsx("div", { className: "p-6", children: sidebarContent }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 p-6", children }),
+              sidebarPosition === "right" && /* @__PURE__ */ jsx("div", { className: cn(
+                "w-64 border-l",
+                glassmorphism ? "bg-background/60 backdrop-blur-md" : "bg-background"
+              ), children: /* @__PURE__ */ jsx("div", { className: "p-6", children: sidebarContent }) })
+            ] }),
+            sidebarPosition === "none" && /* @__PURE__ */ jsx("div", { className: "p-6", children })
+          ] })
+        ) : mode === "hybrid" ? (
+          // Hybrid mode - both children and widgets
+          /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 p-6", children }),
+            /* @__PURE__ */ jsx("div", { className: cn(
+              "w-80 border-l p-6",
+              glassmorphism ? "bg-background/60 backdrop-blur-md" : "bg-background"
+            ), children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+                /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: "Widgets" }),
+                editable && /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: () => setShowWidgetLibrary(true),
+                    children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
                   }
-                  return widget;
-                });
-                setWidgets(updatedWidgets);
-              },
-              onWidgetRemove: (widgetId) => {
-                setWidgets((prev) => prev.filter((w) => w.id !== widgetId));
-                onWidgetRemove?.(widgetId);
-              },
-              onWidgetAction: (widgetId, action, data) => {
-                console.log("Widget action:", widgetId, action, data);
-              },
-              editMode,
-              glassmorphism
-            }
-          )
-        ) }),
+                )
+              ] }),
+              widgets.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center text-muted-foreground py-8", children: [
+                /* @__PURE__ */ jsx(LayoutGrid, { className: "h-8 w-8 mx-auto mb-2 opacity-20" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No widgets" }),
+                editable && /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "mt-2",
+                    onClick: () => setShowWidgetLibrary(true),
+                    children: "Add Widget"
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-4", children: widgets.map((widget) => /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4", children: [
+                widget.type === "metric" && widget.data && /* @__PURE__ */ jsx(
+                  MetricCard,
+                  {
+                    data: widget.data,
+                    glassmorphism
+                  }
+                ),
+                widget.type === "chart" && widget.data && /* @__PURE__ */ jsx(
+                  ChartWidget,
+                  {
+                    id: widget.id,
+                    title: widget.title,
+                    data: widget.data,
+                    glassmorphism
+                  }
+                ),
+                widget.type === "activity" && widget.data && /* @__PURE__ */ jsx(
+                  ActivityFeed,
+                  {
+                    items: widget.data.items || [],
+                    title: widget.title,
+                    glassmorphism
+                  }
+                )
+              ] }, widget.id)) })
+            ] }) })
+          ] })
+        ) : (
+          // Default widgets mode
+          /* @__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((w) => w.id !== widgetId));
+                  onWidgetRemove?.(widgetId);
+                },
+                onWidgetAction: (widgetId, action, data) => {
+                  console.log("Widget action:", widgetId, action, data);
+                },
+                editMode,
+                glassmorphism
+              }
+            )
+          ) })
+        ),
         /* @__PURE__ */ jsx(WidgetLibrary, {}),
         /* @__PURE__ */ jsx(TemplateGallery, {})
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "2.24.4",
+    "version": "2.24.7",
     "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",