@moontra/moonui-pro 2.24.9 → 2.24.11

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, Pin, Sun, Moon, Monitor, Bell, CheckCheck, Settings2, LogOut, Edit3, LayoutGrid, Share2, Save, Github, Activity, Server, MemoryStick, HardDrive, Network, Columns, Send, Tag, Flag, BellOff, CalendarIcon, DollarSign, Map as Map$1, Trophy, ArrowDownRight, ArrowUpRight, Grip, Unlock, 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';
@@ -64890,1011 +64890,398 @@ function TimeRangePicker({
     )
   ] });
 }
-var SearchInput = t__default.memo(({
-  searchInputRef,
-  searchPlaceholder,
-  initialValue,
-  onSearchChange,
-  keyboardShortcuts
-}) => {
-  const [localValue, setLocalValue] = useState(initialValue || "");
-  const timeoutRef = useRef(void 0);
-  useEffect(() => {
-    setLocalValue(initialValue);
-  }, [initialValue]);
-  const handleChange = useCallback((e) => {
-    const newValue = e.target.value;
-    setLocalValue(newValue);
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(() => {
-      onSearchChange(newValue);
-      if (searchInputRef.current) {
-        searchInputRef.current.focus();
-      }
-    }, 150);
-  }, [onSearchChange, searchInputRef]);
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" }),
-    /* @__PURE__ */ jsx(
-      "input",
+var DASHBOARD_TEMPLATES = [
+  {
+    id: "analytics",
+    name: "Analytics Dashboard",
+    description: "Comprehensive analytics with metrics and charts",
+    category: "analytics",
+    theme: "analytics",
+    widgets: [
       {
-        ref: searchInputRef,
-        type: "text",
-        placeholder: searchPlaceholder,
-        value: localValue,
-        onChange: handleChange,
-        autoComplete: "off",
-        autoCorrect: "off",
-        autoCapitalize: "off",
-        spellCheck: "false",
-        className: "w-full h-10 pl-9 pr-9 text-sm bg-background border border-input rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        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" }
+            }
+          ]
+        }
       }
-    ),
-    keyboardShortcuts && /* @__PURE__ */ jsxs("kbd", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 hidden sm:flex", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
-      "K"
-    ] })
-  ] }) });
-});
-SearchInput.displayName = "SearchInput";
-function SidebarInternal({
-  sections,
-  footer,
-  showSearch = true,
-  searchPlaceholder = "Search...",
-  searchQuery = "",
-  onSearchChange,
-  showThemeToggle = false,
-  theme = "system",
-  onThemeChange,
-  branding,
-  collapsible = true,
-  defaultCollapsed = false,
-  floatingActionButton = true,
-  floatingActionButtonPosition = { bottom: "1rem", left: "1rem" },
-  floatingActionButtonClassName,
-  glassmorphism = false,
-  animatedBackground = false,
-  keyboardShortcuts = true,
-  persistState = true,
-  persistKey = "moonui-sidebar-state",
-  onStateChange,
-  customStyles,
-  fullWidthItems = true,
+    ]
+  },
+  {
+    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 formatRelativeTime(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1e3);
+  if (diffInSeconds < 60)
+    return "just now";
+  if (diffInSeconds < 3600)
+    return `${Math.floor(diffInSeconds / 60)}m ago`;
+  if (diffInSeconds < 86400)
+    return `${Math.floor(diffInSeconds / 3600)}h ago`;
+  if (diffInSeconds < 604800)
+    return `${Math.floor(diffInSeconds / 86400)}d ago`;
+  return date.toLocaleDateString();
+}
+function DashboardInternal({
+  config,
+  widgets: initialWidgets = [],
+  templates = DASHBOARD_TEMPLATES,
+  onConfigChange,
+  onWidgetAdd,
+  onWidgetRemove,
+  onWidgetUpdate,
+  onExport,
+  onImport,
   className,
-  activePath,
-  onNavigate
+  showHeader = true,
+  title = "Dashboard",
+  description = "Real-time analytics and insights",
+  editable = true,
+  realtime = false,
+  glassmorphism = true,
+  children,
+  mode = "widgets",
+  contentClassName,
+  sidebarPosition = "none",
+  sidebarContent,
+  notifications = [],
+  onNotificationClick,
+  onNotificationMarkAsRead,
+  onNotificationMarkAllAsRead,
+  onNotificationClear,
+  onNotificationClearAll,
+  user,
+  userMenuItems,
+  onUserMenuClick,
+  onProfileClick,
+  onLogout,
+  onSearch,
+  onThemeChange,
+  onMenuClick,
+  onRefresh,
+  headerActions,
+  timeRange: propTimeRange,
+  onTimeRangeChange,
+  logo,
+  brandName
 }) {
-  const [isMobile, setIsMobile] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
-  const [expandedSections, setExpandedSections] = useState([]);
-  const [currentSearchQuery, setCurrentSearchQuery] = useState(searchQuery);
-  const [pinnedItems, setPinnedItems] = useState([]);
-  const searchInputRef = useRef(null);
-  const mouseX = useMotionValue(0);
-  const mouseY = useMotionValue(0);
-  const springX = useSpring(mouseX, { stiffness: 300, damping: 30 });
-  const springY = useSpring(mouseY, { stiffness: 300, damping: 30 });
-  useEffect(() => {
-    if (persistState && typeof window !== "undefined") {
-      const savedState = localStorage.getItem(persistKey);
-      if (savedState) {
-        const state = JSON.parse(savedState);
-        setCollapsed(state.collapsed);
-        setExpandedSections(state.expandedSections);
-        setPinnedItems(state.pinnedItems || []);
-      }
+  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(() => 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(() => {
+    if (prevInitialWidgetsRef.current !== initialWidgets) {
+      prevInitialWidgetsRef.current = initialWidgets;
+      setWidgets(initialWidgets);
     }
-  }, [persistState, persistKey]);
-  useEffect(() => {
-    if (persistState && typeof window !== "undefined") {
-      const state = {
-        collapsed,
-        expandedSections,
-        searchQuery: currentSearchQuery,
-        pinnedItems,
-        recentItems: []
-      };
-      localStorage.setItem(persistKey, JSON.stringify(state));
-      onStateChange?.(state);
+  }, [initialWidgets]);
+  t__default.useEffect(() => {
+    if (propTimeRange && prevTimeRangeRef.current !== propTimeRange) {
+      prevTimeRangeRef.current = propTimeRange;
+      setTimeRange(propTimeRange);
     }
-  }, [collapsed, expandedSections, currentSearchQuery, pinnedItems, persistState, persistKey, onStateChange]);
-  useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < 768);
-    };
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return () => window.removeEventListener("resize", checkMobile);
-  }, []);
-  useEffect(() => {
-    const sectionsToExpand = sections.filter((section) => section.defaultExpanded !== false).map((section) => section.id);
-    setExpandedSections(sectionsToExpand);
-  }, [sections]);
-  useEffect(() => {
-    if (!keyboardShortcuts)
-      return;
-    const handleKeyDown3 = (e) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-        e.preventDefault();
-        searchInputRef.current?.focus();
-      }
-      if ((e.metaKey || e.ctrlKey) && e.key === "b") {
-        e.preventDefault();
-        if (isMobile) {
-          setIsOpen(!isOpen);
-        } else {
-          setCollapsed(!collapsed);
-        }
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown3);
-    return () => document.removeEventListener("keydown", handleKeyDown3);
-  }, [keyboardShortcuts, isMobile, isOpen, collapsed]);
-  useEffect(() => {
-    if (!animatedBackground)
+  }, [propTimeRange]);
+  t__default.useEffect(() => {
+    if (!realtime || mode !== "widgets")
       return;
-    const handleMouseMove2 = (e) => {
-      const rect = document.querySelector(".sidebar-container")?.getBoundingClientRect();
-      if (rect) {
-        mouseX.set(e.clientX - rect.left);
-        mouseY.set(e.clientY - rect.top);
-      }
-    };
-    document.addEventListener("mousemove", handleMouseMove2);
-    return () => document.removeEventListener("mousemove", handleMouseMove2);
-  }, [animatedBackground, mouseX, mouseY]);
-  const toggleSection = useCallback((sectionId) => {
-    setExpandedSections(
-      (prev) => prev.includes(sectionId) ? prev.filter((id) => id !== sectionId) : [...prev, sectionId]
-    );
-  }, []);
-  useCallback((itemId) => {
-    setPinnedItems(
-      (prev) => prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]
-    );
-  }, []);
-  const handleItemClick = useCallback((item) => {
-    if (item.action) {
-      item.action();
-    } else if (item.href && onNavigate) {
-      onNavigate(item.href);
-      if (isMobile) {
-        setIsOpen(false);
-      }
+    const interval = setInterval(() => {
+      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, mode]);
+  const generateDefaultData = t__default.useCallback((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 {};
     }
-  }, [onNavigate, isMobile]);
-  useEffect(() => {
-    setCurrentSearchQuery(searchQuery);
-  }, [searchQuery]);
-  const handleSearch = useCallback((value) => {
-    setCurrentSearchQuery(value);
-    onSearchChange?.(value);
-  }, [onSearchChange]);
-  const filterItems = useCallback((items, query) => {
-    if (!query)
-      return items;
-    return items.filter((item) => {
-      const matchesTitle = item.title.toLowerCase().includes(query.toLowerCase());
-      const hasMatchingChildren = item.items?.some(
-        (child) => child.title.toLowerCase().includes(query.toLowerCase())
-      );
-      return matchesTitle || hasMatchingChildren;
-    });
   }, []);
-  const filteredSections = useMemo(() => {
-    if (!currentSearchQuery) {
-      return sections.map((section) => ({
-        ...section,
-        filteredItems: section.items.map((item) => ({
-          ...item,
-          filteredChildren: item.items
-        }))
-      }));
-    }
-    return sections.map((section) => ({
-      ...section,
-      filteredItems: filterItems(section.items, currentSearchQuery).map((item) => ({
-        ...item,
-        filteredChildren: item.items ? filterItems(item.items, currentSearchQuery) : void 0
-      }))
-    })).filter((section) => section.filteredItems.length > 0);
-  }, [sections, currentSearchQuery, filterItems]);
-  const renderCollapsedHoverContent = useCallback((item) => {
-    const hasChildren = item.items && item.items.length > 0;
-    if (!hasChildren && !item.title)
+  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__ */ jsxs("div", { className: cn(
-      "min-w-[200px] p-2",
-      glassmorphism && "bg-background/95 backdrop-blur-sm"
+    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__ */ jsx("div", { className: "font-medium px-2 py-1 text-sm", children: item.title }),
-      hasChildren && /* @__PURE__ */ jsx("div", { className: "mt-1 space-y-0.5", children: item.items?.map((childItem) => {
-        const isChildActive = childItem.href === activePath;
-        const hasGrandChildren = childItem.items && childItem.items.length > 0;
-        return /* @__PURE__ */ jsx("div", { className: "relative", children: hasGrandChildren ? /* @__PURE__ */ jsxs(HoverCard2, { openDelay: 200, closeDelay: 100, children: [
-          /* @__PURE__ */ jsx(HoverCardTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
-            "button",
+      /* @__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,
             {
-              onClick: () => handleItemClick(childItem),
-              disabled: childItem.disabled,
-              className: cn(
-                "w-full flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
-                "hover:bg-accent hover:text-accent-foreground",
-                isChildActive && "bg-primary/10 text-primary font-medium",
-                childItem.disabled && "opacity-50 cursor-not-allowed"
-              ),
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  childItem.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: childItem.icon }),
-                  /* @__PURE__ */ jsx("span", { className: "truncate", children: childItem.title })
-                ] }),
-                /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 flex-shrink-0" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            HoverCardContent2,
-            {
-              side: "right",
-              align: "start",
-              sideOffset: 10,
-              className: cn(
-                "p-2",
-                glassmorphism && "bg-background/95 backdrop-blur-sm"
-              ),
-              children: /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: childItem.items?.map((grandChild) => {
-                const isGrandChildActive = grandChild.href === activePath;
-                return /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => handleItemClick(grandChild),
-                    disabled: grandChild.disabled,
-                    className: cn(
-                      "w-full flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
-                      "hover:bg-accent hover:text-accent-foreground",
-                      isGrandChildActive && "bg-primary/10 text-primary font-medium",
-                      grandChild.disabled && "opacity-50 cursor-not-allowed"
-                    ),
-                    children: [
-                      grandChild.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: grandChild.icon }),
-                      /* @__PURE__ */ jsx("span", { className: "truncate", children: grandChild.title }),
-                      grandChild.badge && /* @__PURE__ */ jsx(
-                        MoonUIBadgePro,
-                        {
-                          variant: grandChild.badgeVariant || "secondary",
-                          className: "ml-auto flex-shrink-0 text-[10px] px-1.5 py-0 h-5",
-                          children: grandChild.badge
-                        }
-                      )
-                    ]
-                  },
-                  grandChild.id
-                );
-              }) })
+              placeholder: "Search widgets...",
+              value: searchQuery,
+              onChange: (e) => {
+                setSearchQuery(e.target.value);
+                onSearch?.(e.target.value);
+              },
+              className: "pl-10"
             }
           )
-        ] }) : /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => handleItemClick(childItem),
-            disabled: childItem.disabled,
-            className: cn(
-              "w-full flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
-              "hover:bg-accent hover:text-accent-foreground",
-              isChildActive && "bg-primary/10 text-primary font-medium",
-              childItem.disabled && "opacity-50 cursor-not-allowed"
-            ),
-            children: [
-              childItem.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: childItem.icon }),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: childItem.title }),
-              childItem.badge && /* @__PURE__ */ jsx(
-                MoonUIBadgePro,
-                {
-                  variant: childItem.badgeVariant || "secondary",
-                  className: "ml-auto flex-shrink-0 text-[10px] px-1.5 py-0 h-5",
-                  children: childItem.badge
-                }
-              )
-            ]
-          }
-        ) }, childItem.id);
-      }) })
-    ] });
-  }, [activePath, glassmorphism, handleItemClick]);
-  const renderItem = useCallback((item, depth = 0, filteredChildren) => {
-    const isActive2 = item.href === activePath;
-    const isPinned = pinnedItems.includes(item.id);
-    const hasChildren = item.items && item.items.length > 0;
-    const isExpanded = expandedSections.includes(item.id);
-    const shouldShowHoverMenu = collapsed && !isMobile && depth === 0 && (hasChildren || item.title);
-    const shouldShowTooltip = item.tooltip && !collapsed && !shouldShowHoverMenu;
-    const itemContent = /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => {
-          if (hasChildren) {
-            toggleSection(item.id);
-          } else {
-            handleItemClick(item);
-          }
-        },
-        className: cn(
-          "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all",
-          fullWidthItems ? "w-[calc(100%-1.5rem)] mx-3" : "w-full",
-          "hover:bg-accent hover:text-accent-foreground",
-          isActive2 && "bg-primary/10 text-primary font-medium",
-          item.disabled && "opacity-50 cursor-not-allowed",
-          depth > 0 && "ml-6 text-xs",
-          collapsed && depth === 0 && "justify-center px-2",
-          customStyles?.hover
-        ),
-        disabled: item.disabled,
-        children: [
-          item.icon && /* @__PURE__ */ jsx("span", { className: cn(
-            "flex-shrink-0",
-            collapsed && depth === 0 && "mx-auto"
-          ), children: item.icon }),
-          (!collapsed || depth > 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "flex-1 text-left truncate", children: item.title }),
-            item.badge && /* @__PURE__ */ jsx(
-              MoonUIBadgePro,
-              {
-                variant: item.badgeVariant || "secondary",
-                className: "ml-auto flex-shrink-0 text-[10px] px-1.5 py-0 h-5",
-                children: item.badge
-              }
-            ),
-            hasChildren && depth === 0 && /* @__PURE__ */ jsx(
-              ChevronDown,
-              {
-                className: cn(
-                  "h-4 w-4 flex-shrink-0 transition-transform",
-                  isExpanded && "rotate-180"
-                )
-              }
-            ),
-            isPinned && /* @__PURE__ */ jsx(Pin, { className: "h-3 w-3 flex-shrink-0" })
-          ] })
-        ]
-      }
-    );
-    if (shouldShowHoverMenu) {
-      return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(HoverCard2, { openDelay: 200, closeDelay: 100, children: [
-        /* @__PURE__ */ jsx(HoverCardTrigger2, { asChild: true, children: itemContent }),
-        /* @__PURE__ */ jsx(
-          HoverCardContent2,
+        ] }),
+        /* @__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,
           {
-            side: "right",
-            align: "start",
-            sideOffset: 10,
-            className: cn(
-              "p-0 w-auto",
-              glassmorphism && "bg-background/95 backdrop-blur-sm",
-              "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"
-            ),
-            children: /* @__PURE__ */ jsx(
-              motion.div,
+            whileHover: { scale: 1.02 },
+            whileTap: { scale: 0.98 },
+            children: /* @__PURE__ */ jsxs(
+              MoonUIButtonPro,
               {
-                initial: { opacity: 0, x: -10 },
-                animate: { opacity: 1, x: 0 },
-                exit: { opacity: 0, x: -10 },
-                transition: { duration: 0.15 },
-                children: renderCollapsedHoverContent(item)
+                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 })
+                ]
               }
             )
-          }
-        )
-      ] }) }, item.id);
-    }
-    return /* @__PURE__ */ jsxs("div", { children: [
-      shouldShowTooltip ? /* @__PURE__ */ jsx(MoonUITooltipProviderPro, { children: /* @__PURE__ */ jsxs(MoonUITooltipPro, { children: [
-        /* @__PURE__ */ jsx(MoonUITooltipTriggerPro, { asChild: true, children: itemContent }),
-        /* @__PURE__ */ jsx(MoonUITooltipContentPro, { side: "right", children: /* @__PURE__ */ jsx("p", { children: item.tooltip }) })
-      ] }) }) : itemContent,
-      hasChildren && !collapsed && filteredChildren && /* @__PURE__ */ jsx(AnimatePresence, { children: isExpanded && /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          initial: { height: 0, opacity: 0 },
-          animate: { height: "auto", opacity: 1 },
-          exit: { height: 0, opacity: 0 },
-          transition: { duration: 0.2 },
-          className: "overflow-hidden",
-          children: /* @__PURE__ */ jsx("div", { className: "pt-1 space-y-1", children: filteredChildren.map(
-            (child) => renderItem(child, depth + 1)
-          ) })
-        }
-      ) })
-    ] }, item.id);
-  }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection, isMobile, glassmorphism, renderCollapsedHoverContent, fullWidthItems]);
-  const SidebarHeader = t__default.memo(() => {
-    return /* @__PURE__ */ jsxs("div", { className: cn(
-      "flex items-center gap-3 p-4 border-b",
-      collapsed && !isMobile && "justify-center px-2"
+          },
+          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: [
-      branding && /* @__PURE__ */ jsxs(Fragment, { children: [
-        branding.logo,
-        (!collapsed || isMobile) && branding.title && /* @__PURE__ */ jsx("span", { className: "font-semibold text-lg", children: branding.title })
-      ] }),
-      isMobile && /* @__PURE__ */ jsx(
-        MoonUIButtonPro,
-        {
-          variant: "ghost",
-          size: "sm",
-          className: "ml-auto h-8 w-8 p-0",
-          onClick: () => setIsOpen(false),
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-        }
-      ),
-      !isMobile && collapsible && /* @__PURE__ */ jsx(
-        MoonUIButtonPro,
-        {
-          variant: "ghost",
-          size: "sm",
-          className: cn(
-            "h-8 w-8 p-0",
-            !collapsed && "ml-auto"
-          ),
-          onClick: () => setCollapsed(!collapsed),
-          children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
-        }
-      )
-    ] });
-  });
-  const SidebarMenuContent = t__default.memo(() => {
-    return /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-6", children: [
-      pinnedItems.length > 0 && (!collapsed || isMobile) && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Pinned" }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-1", children: sections.flatMap(
-          (section) => section.items.filter((item) => pinnedItems.includes(item.id))
-        ).map((item) => renderItem(item)) }),
-        /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mt-4" })
+      /* @__PURE__ */ jsxs(MoonUIDialogHeaderPro, { children: [
+        /* @__PURE__ */ jsx(MoonUIDialogTitlePro, { children: "Dashboard Templates" }),
+        /* @__PURE__ */ jsx(MoonUIDialogDescriptionPro, { children: "Start with a pre-built template or create your own" })
       ] }),
-      filteredSections.map((section, index2) => /* @__PURE__ */ jsxs("div", { children: [
-        section.title && (!collapsed || isMobile) && /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: section.title }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-1", children: section.filteredItems.map((item) => renderItem(item, 0, item.filteredChildren)) }),
-        section.showDivider && index2 < filteredSections.length - 1 && /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mt-4" })
-      ] }, section.id))
-    ] }) });
-  });
-  const SidebarFooter = t__default.memo(() => {
-    return footer ? /* @__PURE__ */ jsxs("div", { className: "border-t p-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: footer.items.map((item) => renderItem(item)) }),
-      showThemeToggle && (!collapsed || isMobile) && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Theme" }),
-        /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
-          /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "h-7 px-2", children: [
-            theme === "light" && /* @__PURE__ */ jsx(Sun, { className: "h-3 w-3" }),
-            theme === "dark" && /* @__PURE__ */ jsx(Moon, { className: "h-3 w-3" }),
-            theme === "system" && /* @__PURE__ */ jsx(Monitor, { className: "h-3 w-3" })
-          ] }) }),
-          /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
-            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onThemeChange?.("light"), children: [
-              /* @__PURE__ */ jsx(Sun, { className: "mr-2 h-4 w-4" }),
-              "Light"
-            ] }),
-            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onThemeChange?.("dark"), children: [
-              /* @__PURE__ */ jsx(Moon, { className: "mr-2 h-4 w-4" }),
-              "Dark"
-            ] }),
-            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onThemeChange?.("system"), children: [
-              /* @__PURE__ */ jsx(Monitor, { className: "mr-2 h-4 w-4" }),
-              "System"
+      /* @__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 })
+              ] })
             ] })
-          ] })
-        ] })
-      ] })
-    ] }) : null;
-  });
-  const SidebarContent = t__default.memo(() => {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(SidebarMenuContent, {}),
-      /* @__PURE__ */ jsx(SidebarFooter, {})
-    ] });
-  });
-  const sidebarClasses = cn(
-    "moonui-pro flex h-full flex-col bg-background border-r",
-    glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
-    collapsed && !isMobile && "w-16",
-    !collapsed && !isMobile && "w-64",
-    customStyles?.background,
-    customStyles?.border,
-    className
-  );
-  if (isMobile) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      floatingActionButton && /* @__PURE__ */ jsx(
-        MoonUIButtonPro,
-        {
-          onClick: () => setIsOpen(true),
-          className: cn(
-            "fixed z-40 h-12 w-12 rounded-full shadow-lg md:hidden",
-            floatingActionButtonClassName
-          ),
-          size: "icon",
-          style: {
-            bottom: floatingActionButtonPosition?.bottom,
-            left: floatingActionButtonPosition?.left,
-            right: floatingActionButtonPosition?.right,
-            top: floatingActionButtonPosition?.top
           },
-          children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
-        }
+          template.id
+        )) }) })
+      ] })
+    ] }) });
+  }, [showTemplates, glassmorphism, templates, applyTemplate]);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: cn(
+        "w-full min-h-screen",
+        glassmorphism && "bg-gradient-to-br",
+        glassmorphism && THEME_COLORS[selectedTheme],
+        className
       ),
-      /* @__PURE__ */ jsx(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "w-80 p-0", children: /* @__PURE__ */ jsxs("div", { className: cn(sidebarClasses, "sidebar-container flex flex-col"), children: [
-        animatedBackground && /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "absolute inset-0 opacity-30",
-            style: {
-              background: `radial-gradient(circle at ${springX}px ${springY}px, rgba(var(--primary-rgb), 0.15), transparent 50%)`
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(SidebarHeader, {}),
-        showSearch && (!collapsed || isMobile) && /* @__PURE__ */ jsx(
-          SearchInput,
-          {
-            searchInputRef,
-            searchPlaceholder,
-            initialValue: currentSearchQuery,
-            onSearchChange: handleSearch,
-            keyboardShortcuts
-          },
-          "sidebar-search-mobile"
-        ),
-        /* @__PURE__ */ jsx(SidebarContent, {})
-      ] }) }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("aside", { className: cn(sidebarClasses, "sidebar-container hidden md:flex flex-col"), children: [
-    animatedBackground && /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        className: "absolute inset-0 opacity-30",
-        style: {
-          background: `radial-gradient(circle at ${springX}px ${springY}px, rgba(var(--primary-rgb), 0.15), transparent 50%)`
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(SidebarHeader, {}),
-    showSearch && (!collapsed || isMobile) && /* @__PURE__ */ jsx(
-      SearchInput,
-      {
-        searchInputRef,
-        searchPlaceholder,
-        initialValue: currentSearchQuery,
-        onSearchChange: handleSearch,
-        keyboardShortcuts
-      },
-      "sidebar-search-desktop"
-    ),
-    /* @__PURE__ */ jsx(SidebarContent, {})
-  ] });
-}
-function Sidebar(props) {
-  const { hasProAccess, isLoading } = useSubscription();
-  if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full max-w-xs", props.className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Advanced Sidebar is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { size: "sm", children: [
-          /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
-          "Upgrade to Pro"
-        ] }) })
-      ] })
-    ] }) }) });
-  }
-  return /* @__PURE__ */ jsx(SidebarInternal, { ...props });
-}
-var MoonUISidebarPro = Sidebar;
-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 formatRelativeTime(date) {
-  const now = /* @__PURE__ */ new Date();
-  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1e3);
-  if (diffInSeconds < 60)
-    return "just now";
-  if (diffInSeconds < 3600)
-    return `${Math.floor(diffInSeconds / 60)}m ago`;
-  if (diffInSeconds < 86400)
-    return `${Math.floor(diffInSeconds / 3600)}h ago`;
-  if (diffInSeconds < 604800)
-    return `${Math.floor(diffInSeconds / 86400)}d ago`;
-  return date.toLocaleDateString();
-}
-function DashboardInternal({
-  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,
-  children,
-  mode = "widgets",
-  contentClassName,
-  sidebarPosition = "none",
-  sidebarContent,
-  sidebarSections,
-  sidebarCollapsible = true,
-  sidebarDefaultCollapsed = false,
-  notifications = [],
-  onNotificationClick,
-  onNotificationMarkAsRead,
-  onNotificationMarkAllAsRead,
-  onNotificationClear,
-  onNotificationClearAll,
-  user,
-  userMenuItems,
-  onUserMenuClick,
-  onProfileClick,
-  onLogout,
-  onSearch,
-  onThemeChange,
-  onMenuClick,
-  onRefresh,
-  headerActions,
-  timeRange: propTimeRange,
-  onTimeRangeChange,
-  logo,
-  brandName
-}) {
-  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(() => 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(() => {
-    if (prevInitialWidgetsRef.current !== initialWidgets) {
-      prevInitialWidgetsRef.current = initialWidgets;
-      setWidgets(initialWidgets);
-    }
-  }, [initialWidgets]);
-  t__default.useEffect(() => {
-    if (propTimeRange && prevTimeRangeRef.current !== propTimeRange) {
-      prevTimeRangeRef.current = propTimeRange;
-      setTimeRange(propTimeRange);
-    }
-  }, [propTimeRange]);
-  t__default.useEffect(() => {
-    if (!realtime || mode !== "widgets")
-      return;
-    const interval = setInterval(() => {
-      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, mode]);
-  const generateDefaultData = t__default.useCallback((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 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__ */ 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"
-            }
-          )
-        ] }),
-        /* @__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__ */ 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
-        )) }) })
-      ] })
-    ] }) });
-  }, [showTemplates, glassmorphism, templates, applyTemplate]);
-  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(
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: 0.5 },
+      children: [
+        showHeader && /* @__PURE__ */ jsxs(
           motion.div,
           {
             className: cn(
@@ -66221,66 +65608,28 @@ function DashboardInternal({
         mode === "children" ? (
           // Children mode - use as layout wrapper
           /* @__PURE__ */ jsxs("div", { className: cn("flex flex-1", contentClassName), children: [
-            sidebarPosition === "left" && (sidebarSections || sidebarContent) && /* @__PURE__ */ jsx("div", { className: cn(
+            sidebarPosition === "left" && sidebarContent && /* @__PURE__ */ jsx("div", { className: cn(
               "min-h-full",
               glassmorphism ? "bg-background/60 backdrop-blur-md" : "bg-background"
-            ), children: sidebarSections ? /* @__PURE__ */ jsx(
-              Sidebar,
-              {
-                sections: sidebarSections,
-                collapsible: sidebarCollapsible,
-                defaultCollapsed: sidebarDefaultCollapsed,
-                className: "h-full"
-              }
-            ) : (
-              /* Aksi halde custom sidebarContent'i render et */
-              sidebarContent
-            ) }),
+            ), children: sidebarContent }),
             /* @__PURE__ */ jsx("div", { className: "flex-1 p-6", children }),
-            sidebarPosition === "right" && (sidebarSections || sidebarContent) && /* @__PURE__ */ jsx("div", { className: cn(
+            sidebarPosition === "right" && sidebarContent && /* @__PURE__ */ jsx("div", { className: cn(
               "min-h-full",
               glassmorphism ? "bg-background/60 backdrop-blur-md" : "bg-background"
-            ), children: sidebarSections ? /* @__PURE__ */ jsx(
-              Sidebar,
-              {
-                sections: sidebarSections,
-                collapsible: sidebarCollapsible,
-                defaultCollapsed: sidebarDefaultCollapsed,
-                className: "h-full"
-              }
-            ) : (
-              /* Aksi halde custom sidebarContent'i render et */
-              sidebarContent
-            ) })
+            ), children: sidebarContent })
           ] })
         ) : mode === "hybrid" ? (
           // Hybrid mode - both children and widgets
           /* @__PURE__ */ jsxs("div", { className: "flex flex-1", children: [
-            sidebarPosition === "left" && (sidebarSections || sidebarContent) && /* @__PURE__ */ jsx("div", { className: cn(
+            sidebarPosition === "left" && sidebarContent && /* @__PURE__ */ jsx("div", { className: cn(
               "min-h-full",
               glassmorphism ? "bg-background/60 backdrop-blur-md" : "bg-background"
-            ), children: sidebarSections ? /* @__PURE__ */ jsx(
-              Sidebar,
-              {
-                sections: sidebarSections,
-                collapsible: sidebarCollapsible,
-                defaultCollapsed: sidebarDefaultCollapsed,
-                className: "h-full"
-              }
-            ) : sidebarContent }),
+            ), children: sidebarContent }),
             /* @__PURE__ */ jsx("div", { className: "flex-1 p-6", children }),
-            sidebarPosition === "right" && (sidebarSections || sidebarContent) && /* @__PURE__ */ jsx("div", { className: cn(
+            sidebarPosition === "right" && sidebarContent && /* @__PURE__ */ jsx("div", { className: cn(
               "min-h-full",
               glassmorphism ? "bg-background/60 backdrop-blur-md" : "bg-background"
-            ), children: sidebarSections ? /* @__PURE__ */ jsx(
-              Sidebar,
-              {
-                sections: sidebarSections,
-                collapsible: sidebarCollapsible,
-                defaultCollapsed: sidebarDefaultCollapsed,
-                className: "h-full"
-              }
-            ) : sidebarContent }),
+            ), children: sidebarContent }),
             /* @__PURE__ */ jsx("div", { className: cn(
               "w-80 border-l p-6",
               glassmorphism ? "bg-background/60 backdrop-blur-md" : "bg-background"
@@ -72533,1062 +71882,1672 @@ function DataTableBulkActions({
   onClearSelection,
   className
 }) {
-  const [isLoading, setIsLoading] = t__default.useState(false);
-  const [pendingAction, setPendingAction] = t__default.useState(null);
-  const selectedCount = selectedRows.length;
-  const handleAction = async (action) => {
-    if (action.confirmMessage) {
-      setPendingAction(action);
+  const [isLoading, setIsLoading] = t__default.useState(false);
+  const [pendingAction, setPendingAction] = t__default.useState(null);
+  const selectedCount = selectedRows.length;
+  const handleAction = async (action) => {
+    if (action.confirmMessage) {
+      setPendingAction(action);
+      return;
+    }
+    await executeAction(action);
+  };
+  const executeAction = async (action) => {
+    setIsLoading(true);
+    try {
+      await action.action(selectedRows);
+      if (onClearSelection) {
+        onClearSelection();
+      }
+    } catch (error) {
+      console.error("Bulk action failed:", error);
+    } finally {
+      setIsLoading(false);
+      setPendingAction(null);
+    }
+  };
+  const handleConfirm = async () => {
+    if (pendingAction) {
+      await executeAction(pendingAction);
+    }
+  };
+  if (selectedCount === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+      /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "secondary", className: "gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold", children: selectedCount }),
+        /* @__PURE__ */ jsx("span", { children: "selected" })
+      ] }),
+      /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+        /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
+          MoonUIButtonPro,
+          {
+            variant: "outline",
+            size: "sm",
+            disabled: isLoading,
+            className: "gap-2",
+            children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+              "Processing..."
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
+              "Bulk Actions"
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", className: "w-48", children: [
+          actions.map((action, index2) => {
+            const isDisabled = typeof action.disabled === "function" ? action.disabled(selectedRows) : action.disabled;
+            return /* @__PURE__ */ jsxs(
+              MoonUIDropdownMenuItemPro,
+              {
+                disabled: isDisabled || isLoading,
+                onSelect: () => handleAction(action),
+                className: cn(
+                  "cursor-pointer",
+                  action.variant === "destructive" && "text-destructive focus:text-destructive"
+                ),
+                children: [
+                  action.icon && /* @__PURE__ */ jsx("span", { className: "mr-2 h-4 w-4", children: action.icon }),
+                  action.label
+                ]
+              },
+              index2
+            );
+          }),
+          onClearSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+            /* @__PURE__ */ jsx(
+              MoonUIDropdownMenuItemPro,
+              {
+                onSelect: onClearSelection,
+                className: "cursor-pointer text-muted-foreground",
+                children: "Clear selection"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      AlertDialog2,
+      {
+        open: !!pendingAction,
+        onOpenChange: (open) => !open && setPendingAction(null),
+        children: /* @__PURE__ */ jsxs(AlertDialogContent2, { children: [
+          /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+            /* @__PURE__ */ jsxs(AlertDialogTitle2, { className: "flex items-center gap-2", children: [
+              pendingAction?.variant === "destructive" && /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-destructive" }),
+              pendingAction?.confirmTitle || "Confirm Action"
+            ] }),
+            /* @__PURE__ */ jsx(AlertDialogDescription2, { children: pendingAction?.confirmMessage || `This action will affect ${selectedCount} selected item${selectedCount > 1 ? "s" : ""}. This action cannot be undone.` })
+          ] }),
+          /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsx(AlertDialogCancel2, { disabled: isLoading, children: "Cancel" }),
+            /* @__PURE__ */ jsx(
+              AlertDialogAction2,
+              {
+                onClick: handleConfirm,
+                disabled: isLoading,
+                className: cn(
+                  pendingAction?.variant === "destructive" && "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                ),
+                children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+                  "Processing..."
+                ] }) : "Confirm"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/components/data-table/data-table-export.ts
+function dataToCSV(data, columns, includeHeaders = true) {
+  if (data.length === 0)
+    return "";
+  const cols = columns || Object.keys(data[0]);
+  const rows = [];
+  if (includeHeaders) {
+    const headers = cols.map((col) => {
+      const value = String(col);
+      return value.includes(",") || value.includes('"') || value.includes("\n") ? `"${value.replace(/"/g, '""')}"` : value;
+    });
+    rows.push(headers.join(","));
+  }
+  data.forEach((item) => {
+    const row = cols.map((col) => {
+      const value = item[col];
+      if (value === null || value === void 0)
+        return "";
+      if (value instanceof Date)
+        return value.toISOString();
+      if (typeof value === "object")
+        return JSON.stringify(value);
+      const stringValue = String(value);
+      return stringValue.includes(",") || stringValue.includes('"') || stringValue.includes("\n") ? `"${stringValue.replace(/"/g, '""')}"` : stringValue;
+    });
+    rows.push(row.join(","));
+  });
+  return rows.join("\n");
+}
+function dataToJSON(data, columns) {
+  if (!columns || columns.length === 0) {
+    return JSON.stringify(data, null, 2);
+  }
+  const filteredData = data.map((item) => {
+    const filtered = {};
+    columns.forEach((col) => {
+      if (col in item) {
+        filtered[col] = item[col];
+      }
+    });
+    return filtered;
+  });
+  return JSON.stringify(filteredData, null, 2);
+}
+function downloadFile(content, filename, mimeType) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+async function exportData2(data, options) {
+  const { format: format8, filename = "data-export", columns, includeHeaders = true } = options;
+  let content;
+  let mimeType;
+  let extension;
+  switch (format8) {
+    case "csv":
+      content = dataToCSV(data, columns, includeHeaders);
+      mimeType = "text/csv;charset=utf-8;";
+      extension = "csv";
+      break;
+    case "json":
+      content = dataToJSON(data, columns);
+      mimeType = "application/json;charset=utf-8;";
+      extension = "json";
+      break;
+    case "xlsx":
+      throw new Error("XLSX export requires additional dependencies. Use CSV format instead.");
+    default:
+      throw new Error(`Unsupported export format: ${format8}`);
+  }
+  const finalFilename = `${filename}-${( new Date()).toISOString().split("T")[0]}.${extension}`;
+  downloadFile(content, finalFilename, mimeType);
+}
+function getVisibleColumns(columns, columnVisibility) {
+  return columns.filter((col) => {
+    const key = col.id || col.accessorKey;
+    return key && columnVisibility[key] !== false;
+  }).map((col) => col.id || col.accessorKey).filter(Boolean);
+}
+var operatorLabels = {
+  equals: "Equals",
+  notEquals: "Not equals",
+  contains: "Contains",
+  notContains: "Not contains",
+  startsWith: "Starts with",
+  endsWith: "Ends with",
+  greaterThan: "Greater than",
+  lessThan: "Less than",
+  greaterThanOrEqual: "Greater than or equal",
+  lessThanOrEqual: "Less than or equal",
+  between: "Between",
+  in: "In",
+  notIn: "Not in",
+  isNull: "Is empty",
+  isNotNull: "Is not empty"
+};
+function getOperatorsForColumnType(columnType) {
+  switch (columnType) {
+    case "number":
+      return ["equals", "notEquals", "greaterThan", "lessThan", "greaterThanOrEqual", "lessThanOrEqual", "between", "isNull", "isNotNull"];
+    case "date":
+      return ["equals", "notEquals", "greaterThan", "lessThan", "greaterThanOrEqual", "lessThanOrEqual", "between", "isNull", "isNotNull"];
+    case "boolean":
+      return ["equals", "notEquals", "isNull", "isNotNull"];
+    case "select":
+      return ["equals", "notEquals", "in", "notIn", "isNull", "isNotNull"];
+    default:
+      return ["equals", "notEquals", "contains", "notContains", "startsWith", "endsWith", "isNull", "isNotNull"];
+  }
+}
+function DataTableFilterDrawer({
+  table,
+  open,
+  onOpenChange,
+  position = "right",
+  width = "400px",
+  filters: externalFilters,
+  onFiltersChange,
+  customFilters,
+  matchAll: externalMatchAll,
+  onMatchAllChange
+}) {
+  const [internalFilters, setInternalFilters] = useState([]);
+  const [internalMatchAll, setInternalMatchAll] = useState(true);
+  const filters = externalFilters || internalFilters;
+  const setFilters = onFiltersChange || setInternalFilters;
+  const matchAll = externalMatchAll !== void 0 ? externalMatchAll : internalMatchAll;
+  const setMatchAll = onMatchAllChange || setInternalMatchAll;
+  const filterableColumns = useMemo(() => {
+    return table.getAllColumns().filter((column) => {
+      if (column.id === "select" || column.id === "actions" || column.id === "expander") {
+        return false;
+      }
+      return column.getCanFilter();
+    });
+  }, [table]);
+  const addFilter = () => {
+    const firstColumn = filterableColumns[0];
+    if (!firstColumn)
+      return;
+    const newFilter = {
+      column: firstColumn.id,
+      operator: "contains",
+      value: ""
+    };
+    setFilters([...filters, newFilter]);
+  };
+  const updateFilter = (index2, updates) => {
+    const newFilters = [...filters];
+    newFilters[index2] = { ...newFilters[index2], ...updates };
+    setFilters(newFilters);
+  };
+  const removeFilter = (index2) => {
+    setFilters(filters.filter((_, i) => i !== index2));
+  };
+  const clearAllFilters = () => {
+    setFilters([]);
+    table.resetColumnFilters();
+  };
+  const applyFilters = () => {
+    table.resetColumnFilters();
+    const columnsWithFilters = [...new Set(filters.map((f) => f.column))];
+    columnsWithFilters.forEach((columnId) => {
+      const column = table.getColumn(columnId);
+      if (!column)
+        return;
+      column.setFilterValue({ custom: true, filters, matchAll });
+    });
+    if (filters.length === 0) {
+      table.resetColumnFilters();
+    }
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 bg-black/20 z-40",
+        onClick: () => onOpenChange(false)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { x: position === "right" ? "100%" : "-100%" },
+        animate: { x: 0 },
+        exit: { x: position === "right" ? "100%" : "-100%" },
+        transition: { type: "spring", damping: 30, stiffness: 300 },
+        className: cn(
+          "fixed top-0 bottom-0 z-50 bg-background border-l shadow-xl",
+          position === "right" ? "right-0" : "left-0"
+        ),
+        style: { width },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Filter, { className: "h-5 w-5" }),
+              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Filters" }),
+              filters.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                "(",
+                filters.length,
+                " active)"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              MoonUIButtonPro,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: () => onOpenChange(false),
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+              /* @__PURE__ */ jsx(MoonUILabelPro, { className: "text-sm font-medium mb-2 block", children: "Match conditions" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: matchAll ? "primary" : "outline",
+                    size: "sm",
+                    onClick: () => setMatchAll(true),
+                    className: "flex-1",
+                    children: "Match all"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: !matchAll ? "primary" : "outline",
+                    size: "sm",
+                    onClick: () => setMatchAll(false),
+                    className: "flex-1",
+                    children: "Match any"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mb-6" }),
+            customFilters && /* @__PURE__ */ jsxs(Fragment, { children: [
+              customFilters,
+              /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "my-6" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-4", children: filters.map((filter, index2) => /* @__PURE__ */ jsx(
+              FilterConditionRow,
+              {
+                filter,
+                columns: filterableColumns,
+                onUpdate: (updates) => updateFilter(index2, updates),
+                onRemove: () => removeFilter(index2)
+              },
+              index2
+            )) }),
+            /* @__PURE__ */ jsxs(
+              MoonUIButtonPro,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: addFilter,
+                className: "w-full mt-4",
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
+                  "Add filter"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "p-4 border-t space-y-2", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              MoonUIButtonPro,
+              {
+                variant: "outline",
+                onClick: clearAllFilters,
+                disabled: filters.length === 0,
+                className: "flex-1",
+                children: [
+                  /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2" }),
+                  "Clear all"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(MoonUIButtonPro, { onClick: applyFilters, className: "flex-1", children: "Apply filters" })
+          ] }) })
+        ] })
+      }
+    ) })
+  ] });
+}
+function FilterConditionRow({
+  filter,
+  columns,
+  onUpdate,
+  onRemove
+}) {
+  const selectedColumn = columns.find((col) => col.id === filter.column);
+  const columnDef = selectedColumn?.columnDef;
+  const columnType = columnDef?.meta?.filterType || "string";
+  const availableOperators = getOperatorsForColumnType(columnType);
+  const needsValue = filter.operator !== "isNull" && filter.operator !== "isNotNull";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-3 border rounded-lg bg-muted/30", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        MoonUISelectPro,
+        {
+          value: filter.column,
+          onValueChange: (value) => onUpdate({ column: value }),
+          children: [
+            /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { className: "flex-1", children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
+            /* @__PURE__ */ jsx(MoonUISelectContentPro, { children: columns.map((column) => {
+              const header = column.columnDef.header;
+              const label = typeof header === "function" ? column.id : header || column.id;
+              return /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: column.id, children: label }, column.id);
+            }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MoonUIButtonPro,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: onRemove,
+          className: "h-8 w-8",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      MoonUISelectPro,
+      {
+        value: filter.operator,
+        onValueChange: (value) => onUpdate({ operator: value }),
+        children: [
+          /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
+          /* @__PURE__ */ jsx(MoonUISelectContentPro, { children: availableOperators.map((operator2) => /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: operator2, children: operatorLabels[operator2] }, operator2)) })
+        ]
+      }
+    ),
+    needsValue && /* @__PURE__ */ jsx("div", { children: columnType === "boolean" ? /* @__PURE__ */ jsxs(
+      MoonUISelectPro,
+      {
+        value: String(filter.value),
+        onValueChange: (value) => onUpdate({ value: value === "true" }),
+        children: [
+          /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
+          /* @__PURE__ */ jsxs(MoonUISelectContentPro, { children: [
+            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "true", children: "True" }),
+            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "false", children: "False" })
+          ] })
+        ]
+      }
+    ) : columnType === "number" ? /* @__PURE__ */ jsx(
+      MoonUIInputPro,
+      {
+        type: "number",
+        value: filter.value || "",
+        onChange: (e) => onUpdate({ value: e.target.value }),
+        placeholder: "Enter value..."
+      }
+    ) : /* @__PURE__ */ jsx(
+      MoonUIInputPro,
+      {
+        value: filter.value || "",
+        onChange: (e) => onUpdate({ value: e.target.value }),
+        placeholder: "Enter value..."
+      }
+    ) })
+  ] });
+}
+function DataTable({
+  columns: originalColumns,
+  data,
+  searchable = true,
+  filterable = true,
+  exportable = true,
+  selectable = false,
+  pagination = true,
+  pageSize = 10,
+  className,
+  onRowSelect,
+  onExport,
+  enableExpandable = false,
+  renderSubComponent,
+  expandedRows: controlledExpandedRows,
+  onRowExpandChange,
+  bulkActions = [],
+  features = {},
+  theme = {},
+  texts = {},
+  // Additional props
+  enableSorting = true,
+  enableFiltering = true,
+  enablePagination = true,
+  enableColumnVisibility = true,
+  enableRowSelection,
+  filterPlaceholder = "Search all columns...",
+  defaultPageSize,
+  manualPagination = false,
+  pageCount,
+  onPaginationChange,
+  onSortingChange,
+  onColumnFiltersChange,
+  state: externalState
+}) {
+  const columns = t__default.useMemo(() => {
+    return originalColumns.map((col) => {
+      const { enableHiding, ...restCol } = col;
+      return {
+        ...restCol,
+        enableHiding: true,
+        // Force all columns to be hideable
+        filterFn: "custom"
+        // Use our custom filter function
+      };
+    });
+  }, [originalColumns]);
+  const { hasProAccess, isLoading } = useSubscription();
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Data Table is available exclusively to MoonUI Pro subscribers." }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { size: "sm", children: [
+          /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
+          "Upgrade to Pro"
+        ] }) }) })
+      ] })
+    ] }) }) });
+  }
+  const [sorting, setSorting] = t__default.useState([]);
+  const [columnFilters, setColumnFilters] = t__default.useState([]);
+  const [columnVisibility, setColumnVisibility] = t__default.useState({});
+  const [rowSelection, setRowSelection] = t__default.useState({});
+  const [globalFilter, setGlobalFilter] = t__default.useState("");
+  const [isPaginationLoading, setIsPaginationLoading] = t__default.useState(false);
+  const [internalExpandedRows, setInternalExpandedRows] = t__default.useState(/* @__PURE__ */ new Set());
+  const [filterDrawerOpen, setFilterDrawerOpen] = t__default.useState(false);
+  const expandedRows = controlledExpandedRows || internalExpandedRows;
+  const actualPageSize = defaultPageSize || pageSize;
+  const stableData = t__default.useMemo(() => data, [data]);
+  const table = useReactTable({
+    data: stableData,
+    columns,
+    onSortingChange: onSortingChange !== void 0 ? onSortingChange : setSorting,
+    onColumnFiltersChange: onColumnFiltersChange !== void 0 ? onColumnFiltersChange : setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: "includesString",
+    filterFns: {
+      custom: (row, columnId, filterValue) => {
+        if (!filterValue?.custom || !filterValue?.filters)
+          return true;
+        const filters = filterValue.filters;
+        const matchAll = filterValue.matchAll !== void 0 ? filterValue.matchAll : true;
+        const allFilterResults = filters.map((filterCondition) => {
+          const cellValue = row.getValue(filterCondition.column);
+          const filterVal = filterCondition.value;
+          switch (filterCondition.operator) {
+            case "equals":
+              return cellValue === filterVal;
+            case "notEquals":
+              return cellValue !== filterVal;
+            case "contains":
+              return String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase());
+            case "notContains":
+              return !String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase());
+            case "startsWith":
+              return String(cellValue).toLowerCase().startsWith(String(filterVal).toLowerCase());
+            case "endsWith":
+              return String(cellValue).toLowerCase().endsWith(String(filterVal).toLowerCase());
+            case "greaterThan":
+              return Number(cellValue) > Number(filterVal);
+            case "lessThan":
+              return Number(cellValue) < Number(filterVal);
+            case "greaterThanOrEqual":
+              return Number(cellValue) >= Number(filterVal);
+            case "lessThanOrEqual":
+              return Number(cellValue) <= Number(filterVal);
+            case "isNull":
+              return cellValue == null || cellValue === "";
+            case "isNotNull":
+              return cellValue != null && cellValue !== "";
+            default:
+              return true;
+          }
+        });
+        if (matchAll) {
+          return allFilterResults.every((result) => result);
+        } else {
+          return allFilterResults.some((result) => result);
+        }
+      }
+    },
+    manualPagination,
+    pageCount,
+    state: {
+      sorting: externalState?.sorting ?? sorting,
+      columnFilters: externalState?.columnFilters ?? columnFilters,
+      columnVisibility: externalState?.columnVisibility ?? columnVisibility,
+      rowSelection: externalState?.rowSelection ?? rowSelection,
+      globalFilter: externalState?.globalFilter ?? globalFilter,
+      ...externalState || {}
+    },
+    initialState: {
+      pagination: {
+        pageSize: actualPageSize
+      }
+    },
+    // Prevent re-renders on state changes
+    autoResetAll: false,
+    autoResetPageIndex: false,
+    autoResetExpanded: false,
+    getRowId: (row) => row.id || row.orderId || Math.random().toString()
+  });
+  t__default.useEffect(() => {
+    if (onRowSelect && selectable) {
+      const selectedRows = table.getFilteredSelectedRowModel().rows.map((row) => row.original);
+      onRowSelect(selectedRows);
+    }
+  }, [rowSelection, onRowSelect, selectable, table]);
+  table.getState();
+  const rowModel = table.getRowModel();
+  const rowsRef = t__default.useRef(rowModel.rows);
+  t__default.useMemo(() => {
+    const changed = rowsRef.current !== rowModel.rows;
+    if (changed) {
+      rowsRef.current = rowModel.rows;
+    }
+    return changed;
+  }, [rowModel.rows]);
+  const rows = rowsRef.current;
+  ({
+    sorting: features.sorting !== false,
+    filtering: features.filtering !== false || filterable,
+    pagination: features.pagination !== false || pagination,
+    search: features.search !== false || searchable,
+    columnVisibility: features.columnVisibility !== false,
+    rowSelection: features.rowSelection !== false || selectable,
+    export: features.export !== false || exportable
+  });
+  const handleExport = async (format8) => {
+    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, format8);
       return;
     }
-    await executeAction(action);
-  };
-  const executeAction = async (action) => {
-    setIsLoading(true);
-    try {
-      await action.action(selectedRows);
-      if (onClearSelection) {
-        onClearSelection();
-      }
-    } catch (error) {
-      console.error("Bulk action failed:", error);
-    } finally {
-      setIsLoading(false);
-      setPendingAction(null);
+    if (onExport) {
+      onExport(dataToExport);
+      return;
     }
+    const filename = typeof exportable === "object" && exportable.filename ? exportable.filename : "data-export";
+    const visibleColumns = getVisibleColumns(columns, columnVisibility);
+    await exportData2(dataToExport, {
+      format: format8,
+      filename,
+      columns: visibleColumns,
+      includeHeaders: true
+    });
   };
-  const handleConfirm = async () => {
-    if (pendingAction) {
-      await executeAction(pendingAction);
+  const exportFormats = t__default.useMemo(() => {
+    if (!exportable)
+      return [];
+    if (exportable === true)
+      return ["csv", "json"];
+    if (typeof exportable === "object" && exportable.formats) {
+      return exportable.formats;
     }
+    return ["csv", "json"];
+  }, [exportable]);
+  const clearRowSelection = () => {
+    table.resetRowSelection();
   };
-  if (selectedCount === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
-      /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "secondary", className: "gap-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "font-semibold", children: selectedCount }),
-        /* @__PURE__ */ jsx("span", { children: "selected" })
-      ] }),
-      /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
-        /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-pro-datatable-container flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "moonui-pro-datatable-toolbar flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        searchable && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsx(
+            MoonUIInputPro,
+            {
+              placeholder: filterPlaceholder,
+              value: globalFilter,
+              onChange: (e) => setGlobalFilter(e.target.value),
+              className: "pl-8 w-64"
+            }
+          )
+        ] }),
+        filterable && /* @__PURE__ */ jsxs(
           MoonUIButtonPro,
           {
             variant: "outline",
             size: "sm",
-            disabled: isLoading,
-            className: "gap-2",
-            children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
-              "Processing..."
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
-              "Bulk Actions"
-            ] })
+            onClick: () => setFilterDrawerOpen(true),
+            children: [
+              /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }) }),
+              "Filters",
+              columnFilters.length > 0 && /* @__PURE__ */ jsx("span", { className: "ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground", children: columnFilters.length })
+            ]
           }
-        ) }),
-        /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", className: "w-48", children: [
-          actions.map((action, index2) => {
-            const isDisabled = typeof action.disabled === "function" ? action.disabled(selectedRows) : action.disabled;
-            return /* @__PURE__ */ jsxs(
-              MoonUIDropdownMenuItemPro,
-              {
-                disabled: isDisabled || isLoading,
-                onSelect: () => handleAction(action),
-                className: cn(
-                  "cursor-pointer",
-                  action.variant === "destructive" && "text-destructive focus:text-destructive"
-                ),
-                children: [
-                  action.icon && /* @__PURE__ */ jsx("span", { className: "mr-2 h-4 w-4", children: action.icon }),
-                  action.label
-                ]
-              },
-              index2
-            );
-          }),
-          onClearSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
-            /* @__PURE__ */ jsx(
-              MoonUIDropdownMenuItemPro,
-              {
-                onSelect: onClearSelection,
-                className: "cursor-pointer text-muted-foreground",
-                children: "Clear selection"
-              }
-            )
+        ),
+        selectable && bulkActions.length > 0 && /* @__PURE__ */ jsx(
+          DataTableBulkActions,
+          {
+            selectedRows: table.getFilteredSelectedRowModel().rows.map((row) => row.original),
+            actions: bulkActions,
+            onClearSelection: clearRowSelection
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        exportable && exportFormats.length > 0 && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+          /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
+            /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }) }),
+            "Export"
+          ] }) }),
+          /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
+            exportFormats.includes("csv") && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("csv"), children: [
+              /* @__PURE__ */ jsx(FileSpreadsheet, { className: "mr-2 h-4 w-4" }),
+              "Export as CSV"
+            ] }),
+            exportFormats.includes("json") && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("json"), children: [
+              /* @__PURE__ */ jsx(FileJson, { className: "mr-2 h-4 w-4" }),
+              "Export as JSON"
+            ] }),
+            exportFormats.includes("xlsx") && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("xlsx"), children: [
+              /* @__PURE__ */ jsx(FileDown, { className: "mr-2 h-4 w-4" }),
+              "Export as Excel"
+            ] })
           ] })
+        ] }),
+        /* @__PURE__ */ jsx(DataTableColumnToggle, { table })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "moonui-pro-datatable-wrapper rounded-md border overflow-hidden", style: { contain: "layout style" }, children: /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { className: "moonui-pro-datatable", style: { width: "100%", tableLayout: "auto" }, children: [
+      /* @__PURE__ */ jsx("thead", { className: "moonui-data-table-header", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "moonui-data-table-row border-b", children: headerGroup.headers.filter((header) => header.column.getIsVisible()).map((header) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: "moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground",
+          children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center space-x-2",
+                header.column.getCanSort() && "cursor-pointer select-none"
+              ),
+              onClick: header.column.getToggleSortingHandler(),
+              children: [
+                flexRender(header.column.columnDef.header, header.getContext()),
+                header.column.getCanSort() && /* @__PURE__ */ jsx("div", { className: "ml-2", children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" }) }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" }) }) : /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" }) }) })
+              ]
+            }
+          )
+        },
+        header.id
+      )) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx("tbody", { className: "moonui-data-table-body", children: isPaginationLoading ? /* @__PURE__ */ jsx(
+        motion.tr,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.2 },
+          children: /* @__PURE__ */ jsx("td", { colSpan: table.getAllLeafColumns().filter((col) => col.getIsVisible()).length, className: "h-24 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-2", children: [
+            /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
+          ] }) })
+        },
+        "loading"
+      ) : rows?.length ? /* @__PURE__ */ jsx(Fragment, { children: rows.map((row, index2) => {
+        const rowId = row.original.id || row.id;
+        const isExpanded = enableExpandable && expandedRows.has(rowId);
+        return /* @__PURE__ */ jsx(
+          TableRow2,
+          {
+            row,
+            columns,
+            isExpanded,
+            enableExpandable,
+            renderSubComponent,
+            visibilityState: table.getState().columnVisibility
+          },
+          rowId
+        );
+      }) }) : /* @__PURE__ */ jsx(
+        motion.tr,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.2 },
+          children: /* @__PURE__ */ jsx("td", { colSpan: table.getAllLeafColumns().filter((col) => col.getIsVisible()).length, className: "h-24 text-center", children: "No results found." })
+        },
+        "no-results"
+      ) })
+    ] }) }) }),
+    pagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 text-sm text-muted-foreground", children: selectable && table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
+        table.getFilteredSelectedRowModel().rows.length,
+        " of",
+        " ",
+        table.getFilteredRowModel().rows.length,
+        " row(s) selected."
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Rows per page" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: table.getState().pagination.pageSize,
+              onChange: async (e) => {
+                setIsPaginationLoading(true);
+                await new Promise((resolve) => setTimeout(resolve, 300));
+                table.setPageSize(Number(e.target.value));
+                setIsPaginationLoading(false);
+              },
+              className: "h-8 w-[70px] rounded border border-input bg-background px-3 py-1 text-sm",
+              disabled: isPaginationLoading,
+              children: [10, 20, 30, 40, 50].map((pageSize2) => /* @__PURE__ */ jsx("option", { value: pageSize2, children: pageSize2 }, pageSize2))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
+          "Page ",
+          table.getState().pagination.pageIndex + 1,
+          " of",
+          " ",
+          table.getPageCount()
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx(
+            MoonUIButtonPro,
+            {
+              variant: "outline",
+              className: "hidden h-8 w-8 p-0 lg:flex",
+              onClick: async () => {
+                if (onPaginationChange) {
+                  onPaginationChange({ pageIndex: 0, pageSize: table.getState().pagination.pageSize });
+                } else {
+                  setIsPaginationLoading(true);
+                  await new Promise((resolve) => setTimeout(resolve, 300));
+                  table.setPageIndex(0);
+                  setIsPaginationLoading(false);
+                }
+              },
+              disabled: !table.getCanPreviousPage() || isPaginationLoading,
+              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MoonUIButtonPro,
+            {
+              variant: "outline",
+              className: "h-8 w-8 p-0",
+              onClick: async () => {
+                if (onPaginationChange) {
+                  const currentIndex = table.getState().pagination.pageIndex;
+                  onPaginationChange({ pageIndex: currentIndex - 1, pageSize: table.getState().pagination.pageSize });
+                } else {
+                  setIsPaginationLoading(true);
+                  await new Promise((resolve) => setTimeout(resolve, 300));
+                  table.previousPage();
+                  setIsPaginationLoading(false);
+                }
+              },
+              disabled: !table.getCanPreviousPage() || isPaginationLoading,
+              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MoonUIButtonPro,
+            {
+              variant: "outline",
+              className: "h-8 w-8 p-0",
+              onClick: async () => {
+                setIsPaginationLoading(true);
+                await new Promise((resolve) => setTimeout(resolve, 300));
+                table.nextPage();
+                setIsPaginationLoading(false);
+              },
+              disabled: !table.getCanNextPage() || isPaginationLoading,
+              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MoonUIButtonPro,
+            {
+              variant: "outline",
+              className: "hidden h-8 w-8 p-0 lg:flex",
+              onClick: async () => {
+                setIsPaginationLoading(true);
+                await new Promise((resolve) => setTimeout(resolve, 300));
+                table.setPageIndex(table.getPageCount() - 1);
+                setIsPaginationLoading(false);
+              },
+              disabled: !table.getCanNextPage() || isPaginationLoading,
+              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
+            }
+          )
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(
-      AlertDialog2,
+    filterable && /* @__PURE__ */ jsx(
+      DataTableFilterDrawer,
       {
-        open: !!pendingAction,
-        onOpenChange: (open) => !open && setPendingAction(null),
-        children: /* @__PURE__ */ jsxs(AlertDialogContent2, { children: [
-          /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-            /* @__PURE__ */ jsxs(AlertDialogTitle2, { className: "flex items-center gap-2", children: [
-              pendingAction?.variant === "destructive" && /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-destructive" }),
-              pendingAction?.confirmTitle || "Confirm Action"
-            ] }),
-            /* @__PURE__ */ jsx(AlertDialogDescription2, { children: pendingAction?.confirmMessage || `This action will affect ${selectedCount} selected item${selectedCount > 1 ? "s" : ""}. This action cannot be undone.` })
-          ] }),
-          /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
-            /* @__PURE__ */ jsx(AlertDialogCancel2, { disabled: isLoading, children: "Cancel" }),
-            /* @__PURE__ */ jsx(
-              AlertDialogAction2,
-              {
-                onClick: handleConfirm,
-                disabled: isLoading,
-                className: cn(
-                  pendingAction?.variant === "destructive" && "bg-destructive text-destructive-foreground hover:bg-destructive/90"
-                ),
-                children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
-                  "Processing..."
-                ] }) : "Confirm"
-              }
-            )
-          ] })
-        ] })
+        table,
+        open: filterDrawerOpen,
+        onOpenChange: setFilterDrawerOpen
       }
     )
   ] });
 }
-
-// src/components/data-table/data-table-export.ts
-function dataToCSV(data, columns, includeHeaders = true) {
-  if (data.length === 0)
-    return "";
-  const cols = columns || Object.keys(data[0]);
-  const rows = [];
-  if (includeHeaders) {
-    const headers = cols.map((col) => {
-      const value = String(col);
-      return value.includes(",") || value.includes('"') || value.includes("\n") ? `"${value.replace(/"/g, '""')}"` : value;
-    });
-    rows.push(headers.join(","));
-  }
-  data.forEach((item) => {
-    const row = cols.map((col) => {
-      const value = item[col];
-      if (value === null || value === void 0)
-        return "";
-      if (value instanceof Date)
-        return value.toISOString();
-      if (typeof value === "object")
-        return JSON.stringify(value);
-      const stringValue = String(value);
-      return stringValue.includes(",") || stringValue.includes('"') || stringValue.includes("\n") ? `"${stringValue.replace(/"/g, '""')}"` : stringValue;
-    });
-    rows.push(row.join(","));
-  });
-  return rows.join("\n");
-}
-function dataToJSON(data, columns) {
-  if (!columns || columns.length === 0) {
-    return JSON.stringify(data, null, 2);
-  }
-  const filteredData = data.map((item) => {
-    const filtered = {};
-    columns.forEach((col) => {
-      if (col in item) {
-        filtered[col] = item[col];
-      }
-    });
-    return filtered;
-  });
-  return JSON.stringify(filteredData, null, 2);
-}
-function downloadFile(content, filename, mimeType) {
-  const blob = new Blob([content], { type: mimeType });
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = filename;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-  URL.revokeObjectURL(url);
-}
-async function exportData2(data, options) {
-  const { format: format8, filename = "data-export", columns, includeHeaders = true } = options;
-  let content;
-  let mimeType;
-  let extension;
-  switch (format8) {
-    case "csv":
-      content = dataToCSV(data, columns, includeHeaders);
-      mimeType = "text/csv;charset=utf-8;";
-      extension = "csv";
-      break;
-    case "json":
-      content = dataToJSON(data, columns);
-      mimeType = "application/json;charset=utf-8;";
-      extension = "json";
-      break;
-    case "xlsx":
-      throw new Error("XLSX export requires additional dependencies. Use CSV format instead.");
-    default:
-      throw new Error(`Unsupported export format: ${format8}`);
-  }
-  const finalFilename = `${filename}-${( new Date()).toISOString().split("T")[0]}.${extension}`;
-  downloadFile(content, finalFilename, mimeType);
-}
-function getVisibleColumns(columns, columnVisibility) {
-  return columns.filter((col) => {
-    const key = col.id || col.accessorKey;
-    return key && columnVisibility[key] !== false;
-  }).map((col) => col.id || col.accessorKey).filter(Boolean);
-}
-var operatorLabels = {
-  equals: "Equals",
-  notEquals: "Not equals",
-  contains: "Contains",
-  notContains: "Not contains",
-  startsWith: "Starts with",
-  endsWith: "Ends with",
-  greaterThan: "Greater than",
-  lessThan: "Less than",
-  greaterThanOrEqual: "Greater than or equal",
-  lessThanOrEqual: "Less than or equal",
-  between: "Between",
-  in: "In",
-  notIn: "Not in",
-  isNull: "Is empty",
-  isNotNull: "Is not empty"
-};
-function getOperatorsForColumnType(columnType) {
-  switch (columnType) {
-    case "number":
-      return ["equals", "notEquals", "greaterThan", "lessThan", "greaterThanOrEqual", "lessThanOrEqual", "between", "isNull", "isNotNull"];
-    case "date":
-      return ["equals", "notEquals", "greaterThan", "lessThan", "greaterThanOrEqual", "lessThanOrEqual", "between", "isNull", "isNotNull"];
-    case "boolean":
-      return ["equals", "notEquals", "isNull", "isNotNull"];
-    case "select":
-      return ["equals", "notEquals", "in", "notIn", "isNull", "isNotNull"];
-    default:
-      return ["equals", "notEquals", "contains", "notContains", "startsWith", "endsWith", "isNull", "isNotNull"];
-  }
+function getExpandableColumn(expandedRows, onToggle) {
+  return {
+    id: "expander",
+    header: () => null,
+    size: 50,
+    cell: ({ row }) => {
+      const rowId = row.original.id || row.id;
+      const isExpanded = expandedRows.has(rowId);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onToggle(rowId);
+          },
+          className: "p-2 hover:bg-muted rounded-md transition-colors",
+          "aria-label": isExpanded ? "Collapse row" : "Expand row",
+          children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" }) })
+        }
+      );
+    }
+  };
 }
-function DataTableFilterDrawer({
-  table,
-  open,
-  onOpenChange,
-  position = "right",
-  width = "400px",
-  filters: externalFilters,
-  onFiltersChange,
-  customFilters,
-  matchAll: externalMatchAll,
-  onMatchAllChange
-}) {
-  const [internalFilters, setInternalFilters] = useState([]);
-  const [internalMatchAll, setInternalMatchAll] = useState(true);
-  const filters = externalFilters || internalFilters;
-  const setFilters = onFiltersChange || setInternalFilters;
-  const matchAll = externalMatchAll !== void 0 ? externalMatchAll : internalMatchAll;
-  const setMatchAll = onMatchAllChange || setInternalMatchAll;
-  const filterableColumns = useMemo(() => {
-    return table.getAllColumns().filter((column) => {
-      if (column.id === "select" || column.id === "actions" || column.id === "expander") {
-        return false;
+function useExpandableRows(initialExpanded = /* @__PURE__ */ new Set()) {
+  const [expandedRows, setExpandedRows] = t__default.useState(initialExpanded);
+  const toggleRow = t__default.useCallback((id) => {
+    setExpandedRows((prev) => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(id)) {
+        newExpanded.delete(id);
+      } else {
+        newExpanded.add(id);
       }
-      return column.getCanFilter();
-    });
-  }, [table]);
-  const addFilter = () => {
-    const firstColumn = filterableColumns[0];
-    if (!firstColumn)
-      return;
-    const newFilter = {
-      column: firstColumn.id,
-      operator: "contains",
-      value: ""
-    };
-    setFilters([...filters, newFilter]);
-  };
-  const updateFilter = (index2, updates) => {
-    const newFilters = [...filters];
-    newFilters[index2] = { ...newFilters[index2], ...updates };
-    setFilters(newFilters);
-  };
-  const removeFilter = (index2) => {
-    setFilters(filters.filter((_, i) => i !== index2));
-  };
-  const clearAllFilters = () => {
-    setFilters([]);
-    table.resetColumnFilters();
-  };
-  const applyFilters = () => {
-    table.resetColumnFilters();
-    const columnsWithFilters = [...new Set(filters.map((f) => f.column))];
-    columnsWithFilters.forEach((columnId) => {
-      const column = table.getColumn(columnId);
-      if (!column)
-        return;
-      column.setFilterValue({ custom: true, filters, matchAll });
+      return newExpanded;
     });
-    if (filters.length === 0) {
-      table.resetColumnFilters();
-    }
-    onOpenChange(false);
+  }, []);
+  const expandAll = t__default.useCallback((rowIds) => {
+    setExpandedRows(new Set(rowIds));
+  }, []);
+  const collapseAll = t__default.useCallback(() => {
+    setExpandedRows(/* @__PURE__ */ new Set());
+  }, []);
+  return {
+    expandedRows,
+    setExpandedRows,
+    toggleRow,
+    expandAll,
+    collapseAll
   };
+}
+var TableRow2 = t__default.memo(({
+  row,
+  columns,
+  isExpanded,
+  enableExpandable,
+  renderSubComponent,
+  visibilityState
+}) => {
+  const rowId = row.original.id || row.id;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        className: "fixed inset-0 bg-black/20 z-40",
-        onClick: () => onOpenChange(false)
-      }
-    ) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
-      motion.div,
+    /* @__PURE__ */ jsx(
+      "tr",
       {
-        initial: { x: position === "right" ? "100%" : "-100%" },
-        animate: { x: 0 },
-        exit: { x: position === "right" ? "100%" : "-100%" },
-        transition: { type: "spring", damping: 30, stiffness: 300 },
         className: cn(
-          "fixed top-0 bottom-0 z-50 bg-background border-l shadow-xl",
-          position === "right" ? "right-0" : "left-0"
+          "border-b transition-colors hover:bg-muted/50",
+          row.getIsSelected() && "bg-muted",
+          isExpanded && "border-b-0"
         ),
-        style: { width },
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Filter, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Filters" }),
-              filters.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
-                "(",
-                filters.length,
-                " active)"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(
-              MoonUIButtonPro,
-              {
-                variant: "ghost",
-                size: "icon",
-                onClick: () => onOpenChange(false),
-                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
-              /* @__PURE__ */ jsx(MoonUILabelPro, { className: "text-sm font-medium mb-2 block", children: "Match conditions" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  MoonUIButtonPro,
-                  {
-                    variant: matchAll ? "primary" : "outline",
-                    size: "sm",
-                    onClick: () => setMatchAll(true),
-                    className: "flex-1",
-                    children: "Match all"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  MoonUIButtonPro,
-                  {
-                    variant: !matchAll ? "primary" : "outline",
-                    size: "sm",
-                    onClick: () => setMatchAll(false),
-                    className: "flex-1",
-                    children: "Match any"
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mb-6" }),
-            customFilters && /* @__PURE__ */ jsxs(Fragment, { children: [
-              customFilters,
-              /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "my-6" })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "space-y-4", children: filters.map((filter, index2) => /* @__PURE__ */ jsx(
-              FilterConditionRow,
-              {
-                filter,
-                columns: filterableColumns,
-                onUpdate: (updates) => updateFilter(index2, updates),
-                onRemove: () => removeFilter(index2)
-              },
-              index2
-            )) }),
-            /* @__PURE__ */ jsxs(
-              MoonUIButtonPro,
-              {
-                variant: "outline",
-                size: "sm",
-                onClick: addFilter,
-                className: "w-full mt-4",
-                children: [
-                  /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
-                  "Add filter"
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "p-4 border-t space-y-2", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsxs(
-              MoonUIButtonPro,
-              {
-                variant: "outline",
-                onClick: clearAllFilters,
-                disabled: filters.length === 0,
-                className: "flex-1",
-                children: [
-                  /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2" }),
-                  "Clear all"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(MoonUIButtonPro, { onClick: applyFilters, className: "flex-1", children: "Apply filters" })
-          ] }) })
-        ] })
-      }
-    ) })
-  ] });
-}
-function FilterConditionRow({
-  filter,
-  columns,
-  onUpdate,
-  onRemove
-}) {
-  const selectedColumn = columns.find((col) => col.id === filter.column);
-  const columnDef = selectedColumn?.columnDef;
-  const columnType = columnDef?.meta?.filterType || "string";
-  const availableOperators = getOperatorsForColumnType(columnType);
-  const needsValue = filter.operator !== "isNull" && filter.operator !== "isNotNull";
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-3 border rounded-lg bg-muted/30", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs(
-        MoonUISelectPro,
-        {
-          value: filter.column,
-          onValueChange: (value) => onUpdate({ column: value }),
-          children: [
-            /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { className: "flex-1", children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
-            /* @__PURE__ */ jsx(MoonUISelectContentPro, { children: columns.map((column) => {
-              const header = column.columnDef.header;
-              const label = typeof header === "function" ? column.id : header || column.id;
-              return /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: column.id, children: label }, column.id);
-            }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        MoonUIButtonPro,
-        {
-          variant: "ghost",
-          size: "icon",
-          onClick: onRemove,
-          className: "h-8 w-8",
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(
-      MoonUISelectPro,
-      {
-        value: filter.operator,
-        onValueChange: (value) => onUpdate({ operator: value }),
-        children: [
-          /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
-          /* @__PURE__ */ jsx(MoonUISelectContentPro, { children: availableOperators.map((operator2) => /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: operator2, children: operatorLabels[operator2] }, operator2)) })
-        ]
+        children: row.getAllCells().filter((cell) => {
+          const isVisible = visibilityState[cell.column.id] !== false;
+          return isVisible;
+        }).map((cell) => {
+          return /* @__PURE__ */ jsx("td", { className: "moonui-data-table-td p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+        })
       }
     ),
-    needsValue && /* @__PURE__ */ jsx("div", { children: columnType === "boolean" ? /* @__PURE__ */ jsxs(
-      MoonUISelectPro,
+    isExpanded && renderSubComponent && /* @__PURE__ */ jsx("tr", { className: "border-b", children: /* @__PURE__ */ jsx("td", { colSpan: row.getAllCells().filter(
+      (cell) => visibilityState[cell.column.id] !== false
+    ).length || 1, className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
       {
-        value: String(filter.value),
-        onValueChange: (value) => onUpdate({ value: value === "true" }),
-        children: [
-          /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
-          /* @__PURE__ */ jsxs(MoonUISelectContentPro, { children: [
-            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "true", children: "True" }),
-            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "false", children: "False" })
-          ] })
-        ]
+        className: "transition-all duration-300 ease-out",
+        style: {
+          maxHeight: isExpanded ? "1000px" : "0",
+          opacity: isExpanded ? 1 : 0
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "border-t border-border/50", children: renderSubComponent({ row: { original: row.original, id: rowId } }) })
       }
-    ) : columnType === "number" ? /* @__PURE__ */ jsx(
-      MoonUIInputPro,
-      {
-        type: "number",
-        value: filter.value || "",
-        onChange: (e) => onUpdate({ value: e.target.value }),
-        placeholder: "Enter value..."
+    ) }) })
+  ] });
+}, (prevProps, nextProps) => {
+  const prevRowId = prevProps.row.original.id || prevProps.row.id;
+  const nextRowId = nextProps.row.original.id || nextProps.row.id;
+  const prevVisibilityKeys = Object.keys(prevProps.visibilityState).sort().join(",");
+  const nextVisibilityKeys = Object.keys(nextProps.visibilityState).sort().join(",");
+  const prevVisibilityValues = Object.values(prevProps.visibilityState).join(",");
+  const nextVisibilityValues = Object.values(nextProps.visibilityState).join(",");
+  return prevRowId === nextRowId && prevProps.isExpanded === nextProps.isExpanded && prevProps.row.getIsSelected() === nextProps.row.getIsSelected() && prevVisibilityKeys === nextVisibilityKeys && prevVisibilityValues === nextVisibilityValues;
+});
+TableRow2.displayName = "TableRow";
+var MoonUIDataTablePro = DataTable;
+var SearchInput = t__default.memo(({
+  searchInputRef,
+  searchPlaceholder,
+  initialValue,
+  onSearchChange,
+  keyboardShortcuts
+}) => {
+  const [localValue, setLocalValue] = useState(initialValue || "");
+  const timeoutRef = useRef(void 0);
+  useEffect(() => {
+    setLocalValue(initialValue);
+  }, [initialValue]);
+  const handleChange = useCallback((e) => {
+    const newValue = e.target.value;
+    setLocalValue(newValue);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      onSearchChange(newValue);
+      if (searchInputRef.current) {
+        searchInputRef.current.focus();
       }
-    ) : /* @__PURE__ */ jsx(
-      MoonUIInputPro,
+    }, 150);
+  }, [onSearchChange, searchInputRef]);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" }),
+    /* @__PURE__ */ jsx(
+      "input",
       {
-        value: filter.value || "",
-        onChange: (e) => onUpdate({ value: e.target.value }),
-        placeholder: "Enter value..."
+        ref: searchInputRef,
+        type: "text",
+        placeholder: searchPlaceholder,
+        value: localValue,
+        onChange: handleChange,
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "off",
+        spellCheck: "false",
+        className: "w-full h-10 pl-9 pr-9 text-sm bg-background border border-input rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
       }
-    ) })
-  ] });
-}
-function DataTable({
-  columns: originalColumns,
-  data,
-  searchable = true,
-  filterable = true,
-  exportable = true,
-  selectable = false,
-  pagination = true,
-  pageSize = 10,
+    ),
+    keyboardShortcuts && /* @__PURE__ */ jsxs("kbd", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 hidden sm:flex", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
+      "K"
+    ] })
+  ] }) });
+});
+SearchInput.displayName = "SearchInput";
+function SidebarInternal({
+  sections,
+  footer,
+  showSearch = true,
+  searchPlaceholder = "Search...",
+  searchQuery = "",
+  onSearchChange,
+  showThemeToggle = false,
+  theme = "system",
+  onThemeChange,
+  branding,
+  collapsible = true,
+  defaultCollapsed = false,
+  floatingActionButton = true,
+  floatingActionButtonPosition = { bottom: "1rem", left: "1rem" },
+  floatingActionButtonClassName,
+  glassmorphism = false,
+  animatedBackground = false,
+  keyboardShortcuts = true,
+  persistState = true,
+  persistKey = "moonui-sidebar-state",
+  onStateChange,
+  customStyles,
+  fullWidthItems = true,
   className,
-  onRowSelect,
-  onExport,
-  enableExpandable = false,
-  renderSubComponent,
-  expandedRows: controlledExpandedRows,
-  onRowExpandChange,
-  bulkActions = [],
-  features = {},
-  theme = {},
-  texts = {},
-  // Additional props
-  enableSorting = true,
-  enableFiltering = true,
-  enablePagination = true,
-  enableColumnVisibility = true,
-  enableRowSelection,
-  filterPlaceholder = "Search all columns...",
-  defaultPageSize,
-  manualPagination = false,
-  pageCount,
-  onPaginationChange,
-  onSortingChange,
-  onColumnFiltersChange,
-  state: externalState
+  activePath,
+  onNavigate
 }) {
-  const columns = t__default.useMemo(() => {
-    return originalColumns.map((col) => {
-      const { enableHiding, ...restCol } = col;
-      return {
-        ...restCol,
-        enableHiding: true,
-        // Force all columns to be hideable
-        filterFn: "custom"
-        // Use our custom filter function
-      };
-    });
-  }, [originalColumns]);
-  const { hasProAccess, isLoading } = useSubscription();
-  if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Data Table is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { size: "sm", children: [
-          /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
-          "Upgrade to Pro"
-        ] }) }) })
-      ] })
-    ] }) }) });
-  }
-  const [sorting, setSorting] = t__default.useState([]);
-  const [columnFilters, setColumnFilters] = t__default.useState([]);
-  const [columnVisibility, setColumnVisibility] = t__default.useState({});
-  const [rowSelection, setRowSelection] = t__default.useState({});
-  const [globalFilter, setGlobalFilter] = t__default.useState("");
-  const [isPaginationLoading, setIsPaginationLoading] = t__default.useState(false);
-  const [internalExpandedRows, setInternalExpandedRows] = t__default.useState(/* @__PURE__ */ new Set());
-  const [filterDrawerOpen, setFilterDrawerOpen] = t__default.useState(false);
-  const expandedRows = controlledExpandedRows || internalExpandedRows;
-  const actualPageSize = defaultPageSize || pageSize;
-  const stableData = t__default.useMemo(() => data, [data]);
-  const table = useReactTable({
-    data: stableData,
-    columns,
-    onSortingChange: onSortingChange !== void 0 ? onSortingChange : setSorting,
-    onColumnFiltersChange: onColumnFiltersChange !== void 0 ? onColumnFiltersChange : setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    onGlobalFilterChange: setGlobalFilter,
-    globalFilterFn: "includesString",
-    filterFns: {
-      custom: (row, columnId, filterValue) => {
-        if (!filterValue?.custom || !filterValue?.filters)
-          return true;
-        const filters = filterValue.filters;
-        const matchAll = filterValue.matchAll !== void 0 ? filterValue.matchAll : true;
-        const allFilterResults = filters.map((filterCondition) => {
-          const cellValue = row.getValue(filterCondition.column);
-          const filterVal = filterCondition.value;
-          switch (filterCondition.operator) {
-            case "equals":
-              return cellValue === filterVal;
-            case "notEquals":
-              return cellValue !== filterVal;
-            case "contains":
-              return String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase());
-            case "notContains":
-              return !String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase());
-            case "startsWith":
-              return String(cellValue).toLowerCase().startsWith(String(filterVal).toLowerCase());
-            case "endsWith":
-              return String(cellValue).toLowerCase().endsWith(String(filterVal).toLowerCase());
-            case "greaterThan":
-              return Number(cellValue) > Number(filterVal);
-            case "lessThan":
-              return Number(cellValue) < Number(filterVal);
-            case "greaterThanOrEqual":
-              return Number(cellValue) >= Number(filterVal);
-            case "lessThanOrEqual":
-              return Number(cellValue) <= Number(filterVal);
-            case "isNull":
-              return cellValue == null || cellValue === "";
-            case "isNotNull":
-              return cellValue != null && cellValue !== "";
-            default:
-              return true;
-          }
-        });
-        if (matchAll) {
-          return allFilterResults.every((result) => result);
-        } else {
-          return allFilterResults.some((result) => result);
-        }
-      }
-    },
-    manualPagination,
-    pageCount,
-    state: {
-      sorting: externalState?.sorting ?? sorting,
-      columnFilters: externalState?.columnFilters ?? columnFilters,
-      columnVisibility: externalState?.columnVisibility ?? columnVisibility,
-      rowSelection: externalState?.rowSelection ?? rowSelection,
-      globalFilter: externalState?.globalFilter ?? globalFilter,
-      ...externalState || {}
-    },
-    initialState: {
-      pagination: {
-        pageSize: actualPageSize
+  const [isMobile, setIsMobile] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const [expandedSections, setExpandedSections] = useState([]);
+  const [currentSearchQuery, setCurrentSearchQuery] = useState(searchQuery);
+  const [pinnedItems, setPinnedItems] = useState([]);
+  const searchInputRef = useRef(null);
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+  const springX = useSpring(mouseX, { stiffness: 300, damping: 30 });
+  const springY = useSpring(mouseY, { stiffness: 300, damping: 30 });
+  useEffect(() => {
+    if (persistState && typeof window !== "undefined") {
+      const savedState = localStorage.getItem(persistKey);
+      if (savedState) {
+        const state = JSON.parse(savedState);
+        setCollapsed(state.collapsed);
+        setExpandedSections(state.expandedSections);
+        setPinnedItems(state.pinnedItems || []);
       }
-    },
-    // Prevent re-renders on state changes
-    autoResetAll: false,
-    autoResetPageIndex: false,
-    autoResetExpanded: false,
-    getRowId: (row) => row.id || row.orderId || Math.random().toString()
-  });
-  t__default.useEffect(() => {
-    if (onRowSelect && selectable) {
-      const selectedRows = table.getFilteredSelectedRowModel().rows.map((row) => row.original);
-      onRowSelect(selectedRows);
     }
-  }, [rowSelection, onRowSelect, selectable, table]);
-  table.getState();
-  const rowModel = table.getRowModel();
-  const rowsRef = t__default.useRef(rowModel.rows);
-  t__default.useMemo(() => {
-    const changed = rowsRef.current !== rowModel.rows;
-    if (changed) {
-      rowsRef.current = rowModel.rows;
+  }, [persistState, persistKey]);
+  useEffect(() => {
+    if (persistState && typeof window !== "undefined") {
+      const state = {
+        collapsed,
+        expandedSections,
+        searchQuery: currentSearchQuery,
+        pinnedItems,
+        recentItems: []
+      };
+      localStorage.setItem(persistKey, JSON.stringify(state));
+      onStateChange?.(state);
     }
-    return changed;
-  }, [rowModel.rows]);
-  const rows = rowsRef.current;
-  ({
-    sorting: features.sorting !== false,
-    filtering: features.filtering !== false || filterable,
-    pagination: features.pagination !== false || pagination,
-    search: features.search !== false || searchable,
-    columnVisibility: features.columnVisibility !== false,
-    rowSelection: features.rowSelection !== false || selectable,
-    export: features.export !== false || exportable
-  });
-  const handleExport = async (format8) => {
-    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, format8);
+  }, [collapsed, expandedSections, currentSearchQuery, pinnedItems, persistState, persistKey, onStateChange]);
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  useEffect(() => {
+    const sectionsToExpand = sections.filter((section) => section.defaultExpanded !== false).map((section) => section.id);
+    setExpandedSections(sectionsToExpand);
+  }, [sections]);
+  useEffect(() => {
+    if (!keyboardShortcuts)
       return;
-    }
-    if (onExport) {
-      onExport(dataToExport);
+    const handleKeyDown3 = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        searchInputRef.current?.focus();
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === "b") {
+        e.preventDefault();
+        if (isMobile) {
+          setIsOpen(!isOpen);
+        } else {
+          setCollapsed(!collapsed);
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown3);
+    return () => document.removeEventListener("keydown", handleKeyDown3);
+  }, [keyboardShortcuts, isMobile, isOpen, collapsed]);
+  useEffect(() => {
+    if (!animatedBackground)
       return;
+    const handleMouseMove2 = (e) => {
+      const rect = document.querySelector(".sidebar-container")?.getBoundingClientRect();
+      if (rect) {
+        mouseX.set(e.clientX - rect.left);
+        mouseY.set(e.clientY - rect.top);
+      }
+    };
+    document.addEventListener("mousemove", handleMouseMove2);
+    return () => document.removeEventListener("mousemove", handleMouseMove2);
+  }, [animatedBackground, mouseX, mouseY]);
+  const toggleSection = useCallback((sectionId) => {
+    setExpandedSections(
+      (prev) => prev.includes(sectionId) ? prev.filter((id) => id !== sectionId) : [...prev, sectionId]
+    );
+  }, []);
+  useCallback((itemId) => {
+    setPinnedItems(
+      (prev) => prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]
+    );
+  }, []);
+  const handleItemClick = useCallback((item) => {
+    if (item.action) {
+      item.action();
+    } else if (item.href && onNavigate) {
+      onNavigate(item.href);
+      if (isMobile) {
+        setIsOpen(false);
+      }
     }
-    const filename = typeof exportable === "object" && exportable.filename ? exportable.filename : "data-export";
-    const visibleColumns = getVisibleColumns(columns, columnVisibility);
-    await exportData2(dataToExport, {
-      format: format8,
-      filename,
-      columns: visibleColumns,
-      includeHeaders: true
+  }, [onNavigate, isMobile]);
+  useEffect(() => {
+    setCurrentSearchQuery(searchQuery);
+  }, [searchQuery]);
+  const handleSearch = useCallback((value) => {
+    setCurrentSearchQuery(value);
+    onSearchChange?.(value);
+  }, [onSearchChange]);
+  const filterItems = useCallback((items, query) => {
+    if (!query)
+      return items;
+    return items.filter((item) => {
+      const matchesTitle = item.title.toLowerCase().includes(query.toLowerCase());
+      const hasMatchingChildren = item.items?.some(
+        (child) => child.title.toLowerCase().includes(query.toLowerCase())
+      );
+      return matchesTitle || hasMatchingChildren;
     });
-  };
-  const exportFormats = t__default.useMemo(() => {
-    if (!exportable)
-      return [];
-    if (exportable === true)
-      return ["csv", "json"];
-    if (typeof exportable === "object" && exportable.formats) {
-      return exportable.formats;
+  }, []);
+  const filteredSections = useMemo(() => {
+    if (!currentSearchQuery) {
+      return sections.map((section) => ({
+        ...section,
+        filteredItems: section.items.map((item) => ({
+          ...item,
+          filteredChildren: item.items
+        }))
+      }));
     }
-    return ["csv", "json"];
-  }, [exportable]);
-  const clearRowSelection = () => {
-    table.resetRowSelection();
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-pro-datatable-container flex flex-col gap-4", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "moonui-pro-datatable-toolbar flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-        searchable && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }) }),
+    return sections.map((section) => ({
+      ...section,
+      filteredItems: filterItems(section.items, currentSearchQuery).map((item) => ({
+        ...item,
+        filteredChildren: item.items ? filterItems(item.items, currentSearchQuery) : void 0
+      }))
+    })).filter((section) => section.filteredItems.length > 0);
+  }, [sections, currentSearchQuery, filterItems]);
+  const renderCollapsedHoverContent = useCallback((item) => {
+    const hasChildren = item.items && item.items.length > 0;
+    if (!hasChildren && !item.title)
+      return null;
+    return /* @__PURE__ */ jsxs("div", { className: cn(
+      "min-w-[200px] p-2",
+      glassmorphism && "bg-background/95 backdrop-blur-sm"
+    ), children: [
+      /* @__PURE__ */ jsx("div", { className: "font-medium px-2 py-1 text-sm", children: item.title }),
+      hasChildren && /* @__PURE__ */ jsx("div", { className: "mt-1 space-y-0.5", children: item.items?.map((childItem) => {
+        const isChildActive = childItem.href === activePath;
+        const hasGrandChildren = childItem.items && childItem.items.length > 0;
+        return /* @__PURE__ */ jsx("div", { className: "relative", children: hasGrandChildren ? /* @__PURE__ */ jsxs(HoverCard2, { openDelay: 200, closeDelay: 100, children: [
+          /* @__PURE__ */ jsx(HoverCardTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => handleItemClick(childItem),
+              disabled: childItem.disabled,
+              className: cn(
+                "w-full flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+                "hover:bg-accent hover:text-accent-foreground",
+                isChildActive && "bg-primary/10 text-primary font-medium",
+                childItem.disabled && "opacity-50 cursor-not-allowed"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  childItem.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: childItem.icon }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: childItem.title })
+                ] }),
+                /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 flex-shrink-0" })
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsx(
-            MoonUIInputPro,
+            HoverCardContent2,
             {
-              placeholder: filterPlaceholder,
-              value: globalFilter,
-              onChange: (e) => setGlobalFilter(e.target.value),
-              className: "pl-8 w-64"
+              side: "right",
+              align: "start",
+              sideOffset: 10,
+              className: cn(
+                "p-2",
+                glassmorphism && "bg-background/95 backdrop-blur-sm"
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: childItem.items?.map((grandChild) => {
+                const isGrandChildActive = grandChild.href === activePath;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => handleItemClick(grandChild),
+                    disabled: grandChild.disabled,
+                    className: cn(
+                      "w-full flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+                      "hover:bg-accent hover:text-accent-foreground",
+                      isGrandChildActive && "bg-primary/10 text-primary font-medium",
+                      grandChild.disabled && "opacity-50 cursor-not-allowed"
+                    ),
+                    children: [
+                      grandChild.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: grandChild.icon }),
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: grandChild.title }),
+                      grandChild.badge && /* @__PURE__ */ jsx(
+                        MoonUIBadgePro,
+                        {
+                          variant: grandChild.badgeVariant || "secondary",
+                          className: "ml-auto flex-shrink-0 text-[10px] px-1.5 py-0 h-5",
+                          children: grandChild.badge
+                        }
+                      )
+                    ]
+                  },
+                  grandChild.id
+                );
+              }) })
             }
           )
-        ] }),
-        filterable && /* @__PURE__ */ jsxs(
-          MoonUIButtonPro,
+        ] }) : /* @__PURE__ */ jsxs(
+          "button",
           {
-            variant: "outline",
-            size: "sm",
-            onClick: () => setFilterDrawerOpen(true),
+            onClick: () => handleItemClick(childItem),
+            disabled: childItem.disabled,
+            className: cn(
+              "w-full flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+              "hover:bg-accent hover:text-accent-foreground",
+              isChildActive && "bg-primary/10 text-primary font-medium",
+              childItem.disabled && "opacity-50 cursor-not-allowed"
+            ),
             children: [
-              /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }) }),
-              "Filters",
-              columnFilters.length > 0 && /* @__PURE__ */ jsx("span", { className: "ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground", children: columnFilters.length })
+              childItem.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: childItem.icon }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: childItem.title }),
+              childItem.badge && /* @__PURE__ */ jsx(
+                MoonUIBadgePro,
+                {
+                  variant: childItem.badgeVariant || "secondary",
+                  className: "ml-auto flex-shrink-0 text-[10px] px-1.5 py-0 h-5",
+                  children: childItem.badge
+                }
+              )
             ]
           }
+        ) }, childItem.id);
+      }) })
+    ] });
+  }, [activePath, glassmorphism, handleItemClick]);
+  const renderItem = useCallback((item, depth = 0, filteredChildren) => {
+    const isActive2 = item.href === activePath;
+    const isPinned = pinnedItems.includes(item.id);
+    const hasChildren = item.items && item.items.length > 0;
+    const isExpanded = expandedSections.includes(item.id);
+    const shouldShowHoverMenu = collapsed && !isMobile && depth === 0 && (hasChildren || item.title);
+    const shouldShowTooltip = item.tooltip && !collapsed && !shouldShowHoverMenu;
+    const itemContent = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => {
+          if (hasChildren) {
+            toggleSection(item.id);
+          } else {
+            handleItemClick(item);
+          }
+        },
+        className: cn(
+          "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all",
+          fullWidthItems ? "w-[calc(100%-1.5rem)] mx-3" : "w-full",
+          "hover:bg-accent hover:text-accent-foreground",
+          isActive2 && "bg-primary/10 text-primary font-medium",
+          item.disabled && "opacity-50 cursor-not-allowed",
+          depth > 0 && "ml-6 text-xs",
+          collapsed && depth === 0 && "justify-center px-2",
+          customStyles?.hover
         ),
-        selectable && bulkActions.length > 0 && /* @__PURE__ */ jsx(
-          DataTableBulkActions,
+        disabled: item.disabled,
+        children: [
+          item.icon && /* @__PURE__ */ jsx("span", { className: cn(
+            "flex-shrink-0",
+            collapsed && depth === 0 && "mx-auto"
+          ), children: item.icon }),
+          (!collapsed || depth > 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-left truncate", children: item.title }),
+            item.badge && /* @__PURE__ */ jsx(
+              MoonUIBadgePro,
+              {
+                variant: item.badgeVariant || "secondary",
+                className: "ml-auto flex-shrink-0 text-[10px] px-1.5 py-0 h-5",
+                children: item.badge
+              }
+            ),
+            hasChildren && depth === 0 && /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn(
+                  "h-4 w-4 flex-shrink-0 transition-transform",
+                  isExpanded && "rotate-180"
+                )
+              }
+            ),
+            isPinned && /* @__PURE__ */ jsx(Pin, { className: "h-3 w-3 flex-shrink-0" })
+          ] })
+        ]
+      }
+    );
+    if (shouldShowHoverMenu) {
+      return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(HoverCard2, { openDelay: 200, closeDelay: 100, children: [
+        /* @__PURE__ */ jsx(HoverCardTrigger2, { asChild: true, children: itemContent }),
+        /* @__PURE__ */ jsx(
+          HoverCardContent2,
           {
-            selectedRows: table.getFilteredSelectedRowModel().rows.map((row) => row.original),
-            actions: bulkActions,
-            onClearSelection: clearRowSelection
+            side: "right",
+            align: "start",
+            sideOffset: 10,
+            className: cn(
+              "p-0 w-auto",
+              glassmorphism && "bg-background/95 backdrop-blur-sm",
+              "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"
+            ),
+            children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, x: -10 },
+                animate: { opacity: 1, x: 0 },
+                exit: { opacity: 0, x: -10 },
+                transition: { duration: 0.15 },
+                children: renderCollapsedHoverContent(item)
+              }
+            )
           }
         )
+      ] }) }, item.id);
+    }
+    return /* @__PURE__ */ jsxs("div", { children: [
+      shouldShowTooltip ? /* @__PURE__ */ jsx(MoonUITooltipProviderPro, { children: /* @__PURE__ */ jsxs(MoonUITooltipPro, { children: [
+        /* @__PURE__ */ jsx(MoonUITooltipTriggerPro, { asChild: true, children: itemContent }),
+        /* @__PURE__ */ jsx(MoonUITooltipContentPro, { side: "right", children: /* @__PURE__ */ jsx("p", { children: item.tooltip }) })
+      ] }) }) : itemContent,
+      hasChildren && !collapsed && filteredChildren && /* @__PURE__ */ jsx(AnimatePresence, { children: isExpanded && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { height: 0, opacity: 0 },
+          animate: { height: "auto", opacity: 1 },
+          exit: { height: 0, opacity: 0 },
+          transition: { duration: 0.2 },
+          className: "overflow-hidden",
+          children: /* @__PURE__ */ jsx("div", { className: "pt-1 space-y-1", children: filteredChildren.map(
+            (child) => renderItem(child, depth + 1)
+          ) })
+        }
+      ) })
+    ] }, item.id);
+  }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection, isMobile, glassmorphism, renderCollapsedHoverContent, fullWidthItems]);
+  const SidebarHeader = t__default.memo(() => {
+    return /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex items-center gap-3 p-4 border-b",
+      collapsed && !isMobile && "justify-center px-2"
+    ), children: [
+      branding && /* @__PURE__ */ jsxs(Fragment, { children: [
+        branding.logo,
+        (!collapsed || isMobile) && branding.title && /* @__PURE__ */ jsx("span", { className: "font-semibold text-lg", children: branding.title })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-        exportable && exportFormats.length > 0 && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
-          /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-            /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }) }),
-            "Export"
+      isMobile && /* @__PURE__ */ jsx(
+        MoonUIButtonPro,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "ml-auto h-8 w-8 p-0",
+          onClick: () => setIsOpen(false),
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      ),
+      !isMobile && collapsible && /* @__PURE__ */ jsx(
+        MoonUIButtonPro,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: cn(
+            "h-8 w-8 p-0",
+            !collapsed && "ml-auto"
+          ),
+          onClick: () => setCollapsed(!collapsed),
+          children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+        }
+      )
+    ] });
+  });
+  const SidebarMenuContent = t__default.memo(() => {
+    return /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-6", children: [
+      pinnedItems.length > 0 && (!collapsed || isMobile) && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Pinned" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1", children: sections.flatMap(
+          (section) => section.items.filter((item) => pinnedItems.includes(item.id))
+        ).map((item) => renderItem(item)) }),
+        /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mt-4" })
+      ] }),
+      filteredSections.map((section, index2) => /* @__PURE__ */ jsxs("div", { children: [
+        section.title && (!collapsed || isMobile) && /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: section.title }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1", children: section.filteredItems.map((item) => renderItem(item, 0, item.filteredChildren)) }),
+        section.showDivider && index2 < filteredSections.length - 1 && /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mt-4" })
+      ] }, section.id))
+    ] }) });
+  });
+  const SidebarFooter = t__default.memo(() => {
+    return footer ? /* @__PURE__ */ jsxs("div", { className: "border-t p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: footer.items.map((item) => renderItem(item)) }),
+      showThemeToggle && (!collapsed || isMobile) && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Theme" }),
+        /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+          /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "h-7 px-2", children: [
+            theme === "light" && /* @__PURE__ */ jsx(Sun, { className: "h-3 w-3" }),
+            theme === "dark" && /* @__PURE__ */ jsx(Moon, { className: "h-3 w-3" }),
+            theme === "system" && /* @__PURE__ */ jsx(Monitor, { className: "h-3 w-3" })
           ] }) }),
           /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
-            exportFormats.includes("csv") && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("csv"), children: [
-              /* @__PURE__ */ jsx(FileSpreadsheet, { className: "mr-2 h-4 w-4" }),
-              "Export as CSV"
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onThemeChange?.("light"), children: [
+              /* @__PURE__ */ jsx(Sun, { className: "mr-2 h-4 w-4" }),
+              "Light"
             ] }),
-            exportFormats.includes("json") && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("json"), children: [
-              /* @__PURE__ */ jsx(FileJson, { className: "mr-2 h-4 w-4" }),
-              "Export as JSON"
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onThemeChange?.("dark"), children: [
+              /* @__PURE__ */ jsx(Moon, { className: "mr-2 h-4 w-4" }),
+              "Dark"
             ] }),
-            exportFormats.includes("xlsx") && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("xlsx"), children: [
-              /* @__PURE__ */ jsx(FileDown, { className: "mr-2 h-4 w-4" }),
-              "Export as Excel"
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onThemeChange?.("system"), children: [
+              /* @__PURE__ */ jsx(Monitor, { className: "mr-2 h-4 w-4" }),
+              "System"
             ] })
           ] })
-        ] }),
-        /* @__PURE__ */ jsx(DataTableColumnToggle, { table })
+        ] })
       ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "moonui-pro-datatable-wrapper rounded-md border overflow-hidden", style: { contain: "layout style" }, children: /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { className: "moonui-pro-datatable", style: { width: "100%", tableLayout: "auto" }, children: [
-      /* @__PURE__ */ jsx("thead", { className: "moonui-data-table-header", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "moonui-data-table-row border-b", children: headerGroup.headers.filter((header) => header.column.getIsVisible()).map((header) => /* @__PURE__ */ jsx(
-        "th",
+    ] }) : null;
+  });
+  const SidebarContent = t__default.memo(() => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SidebarMenuContent, {}),
+      /* @__PURE__ */ jsx(SidebarFooter, {})
+    ] });
+  });
+  const sidebarClasses = cn(
+    "moonui-pro flex h-full flex-col bg-background border-r",
+    glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
+    collapsed && !isMobile && "w-16",
+    !collapsed && !isMobile && "w-64",
+    customStyles?.background,
+    customStyles?.border,
+    className
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      floatingActionButton && /* @__PURE__ */ jsx(
+        MoonUIButtonPro,
         {
-          className: "moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground",
-          children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex items-center space-x-2",
-                header.column.getCanSort() && "cursor-pointer select-none"
-              ),
-              onClick: header.column.getToggleSortingHandler(),
-              children: [
-                flexRender(header.column.columnDef.header, header.getContext()),
-                header.column.getCanSort() && /* @__PURE__ */ jsx("div", { className: "ml-2", children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" }) }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" }) }) : /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" }) }) })
-              ]
+          onClick: () => setIsOpen(true),
+          className: cn(
+            "fixed z-40 h-12 w-12 rounded-full shadow-lg md:hidden",
+            floatingActionButtonClassName
+          ),
+          size: "icon",
+          style: {
+            bottom: floatingActionButtonPosition?.bottom,
+            left: floatingActionButtonPosition?.left,
+            right: floatingActionButtonPosition?.right,
+            top: floatingActionButtonPosition?.top
+          },
+          children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "w-80 p-0", children: /* @__PURE__ */ jsxs("div", { className: cn(sidebarClasses, "sidebar-container flex flex-col"), children: [
+        animatedBackground && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "absolute inset-0 opacity-30",
+            style: {
+              background: `radial-gradient(circle at ${springX}px ${springY}px, rgba(var(--primary-rgb), 0.15), transparent 50%)`
             }
-          )
-        },
-        header.id
-      )) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx("tbody", { className: "moonui-data-table-body", children: isPaginationLoading ? /* @__PURE__ */ jsx(
-        motion.tr,
-        {
-          initial: { opacity: 0 },
-          animate: { opacity: 1 },
-          exit: { opacity: 0 },
-          transition: { duration: 0.2 },
-          children: /* @__PURE__ */ jsx("td", { colSpan: table.getAllLeafColumns().filter((col) => col.getIsVisible()).length, className: "h-24 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-2", children: [
-            /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
-          ] }) })
-        },
-        "loading"
-      ) : rows?.length ? /* @__PURE__ */ jsx(Fragment, { children: rows.map((row, index2) => {
-        const rowId = row.original.id || row.id;
-        const isExpanded = enableExpandable && expandedRows.has(rowId);
-        return /* @__PURE__ */ jsx(
-          TableRow2,
+          }
+        ),
+        /* @__PURE__ */ jsx(SidebarHeader, {}),
+        showSearch && (!collapsed || isMobile) && /* @__PURE__ */ jsx(
+          SearchInput,
           {
-            row,
-            columns,
-            isExpanded,
-            enableExpandable,
-            renderSubComponent,
-            visibilityState: table.getState().columnVisibility
+            searchInputRef,
+            searchPlaceholder,
+            initialValue: currentSearchQuery,
+            onSearchChange: handleSearch,
+            keyboardShortcuts
           },
-          rowId
-        );
-      }) }) : /* @__PURE__ */ jsx(
-        motion.tr,
-        {
-          initial: { opacity: 0 },
-          animate: { opacity: 1 },
-          exit: { opacity: 0 },
-          transition: { duration: 0.2 },
-          children: /* @__PURE__ */ jsx("td", { colSpan: table.getAllLeafColumns().filter((col) => col.getIsVisible()).length, className: "h-24 text-center", children: "No results found." })
-        },
-        "no-results"
-      ) })
-    ] }) }) }),
-    pagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-1 text-sm text-muted-foreground", children: selectable && table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
-        table.getFilteredSelectedRowModel().rows.length,
-        " of",
-        " ",
-        table.getFilteredRowModel().rows.length,
-        " row(s) selected."
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Rows per page" }),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              value: table.getState().pagination.pageSize,
-              onChange: async (e) => {
-                setIsPaginationLoading(true);
-                await new Promise((resolve) => setTimeout(resolve, 300));
-                table.setPageSize(Number(e.target.value));
-                setIsPaginationLoading(false);
-              },
-              className: "h-8 w-[70px] rounded border border-input bg-background px-3 py-1 text-sm",
-              disabled: isPaginationLoading,
-              children: [10, 20, 30, 40, 50].map((pageSize2) => /* @__PURE__ */ jsx("option", { value: pageSize2, children: pageSize2 }, pageSize2))
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
-          "Page ",
-          table.getState().pagination.pageIndex + 1,
-          " of",
-          " ",
-          table.getPageCount()
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ jsx(
-            MoonUIButtonPro,
-            {
-              variant: "outline",
-              className: "hidden h-8 w-8 p-0 lg:flex",
-              onClick: async () => {
-                if (onPaginationChange) {
-                  onPaginationChange({ pageIndex: 0, pageSize: table.getState().pagination.pageSize });
-                } else {
-                  setIsPaginationLoading(true);
-                  await new Promise((resolve) => setTimeout(resolve, 300));
-                  table.setPageIndex(0);
-                  setIsPaginationLoading(false);
-                }
-              },
-              disabled: !table.getCanPreviousPage() || isPaginationLoading,
-              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            MoonUIButtonPro,
-            {
-              variant: "outline",
-              className: "h-8 w-8 p-0",
-              onClick: async () => {
-                if (onPaginationChange) {
-                  const currentIndex = table.getState().pagination.pageIndex;
-                  onPaginationChange({ pageIndex: currentIndex - 1, pageSize: table.getState().pagination.pageSize });
-                } else {
-                  setIsPaginationLoading(true);
-                  await new Promise((resolve) => setTimeout(resolve, 300));
-                  table.previousPage();
-                  setIsPaginationLoading(false);
-                }
-              },
-              disabled: !table.getCanPreviousPage() || isPaginationLoading,
-              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            MoonUIButtonPro,
-            {
-              variant: "outline",
-              className: "h-8 w-8 p-0",
-              onClick: async () => {
-                setIsPaginationLoading(true);
-                await new Promise((resolve) => setTimeout(resolve, 300));
-                table.nextPage();
-                setIsPaginationLoading(false);
-              },
-              disabled: !table.getCanNextPage() || isPaginationLoading,
-              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            MoonUIButtonPro,
-            {
-              variant: "outline",
-              className: "hidden h-8 w-8 p-0 lg:flex",
-              onClick: async () => {
-                setIsPaginationLoading(true);
-                await new Promise((resolve) => setTimeout(resolve, 300));
-                table.setPageIndex(table.getPageCount() - 1);
-                setIsPaginationLoading(false);
-              },
-              disabled: !table.getCanNextPage() || isPaginationLoading,
-              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    filterable && /* @__PURE__ */ jsx(
-      DataTableFilterDrawer,
+          "sidebar-search-mobile"
+        ),
+        /* @__PURE__ */ jsx(SidebarContent, {})
+      ] }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("aside", { className: cn(sidebarClasses, "sidebar-container hidden md:flex flex-col"), children: [
+    animatedBackground && /* @__PURE__ */ jsx(
+      motion.div,
       {
-        table,
-        open: filterDrawerOpen,
-        onOpenChange: setFilterDrawerOpen
-      }
-    )
-  ] });
-}
-function getExpandableColumn(expandedRows, onToggle) {
-  return {
-    id: "expander",
-    header: () => null,
-    size: 50,
-    cell: ({ row }) => {
-      const rowId = row.original.id || row.id;
-      const isExpanded = expandedRows.has(rowId);
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            onToggle(rowId);
-          },
-          className: "p-2 hover:bg-muted rounded-md transition-colors",
-          "aria-label": isExpanded ? "Collapse row" : "Expand row",
-          children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" }) })
+        className: "absolute inset-0 opacity-30",
+        style: {
+          background: `radial-gradient(circle at ${springX}px ${springY}px, rgba(var(--primary-rgb), 0.15), transparent 50%)`
         }
-      );
-    }
-  };
-}
-function useExpandableRows(initialExpanded = /* @__PURE__ */ new Set()) {
-  const [expandedRows, setExpandedRows] = t__default.useState(initialExpanded);
-  const toggleRow = t__default.useCallback((id) => {
-    setExpandedRows((prev) => {
-      const newExpanded = new Set(prev);
-      if (newExpanded.has(id)) {
-        newExpanded.delete(id);
-      } else {
-        newExpanded.add(id);
-      }
-      return newExpanded;
-    });
-  }, []);
-  const expandAll = t__default.useCallback((rowIds) => {
-    setExpandedRows(new Set(rowIds));
-  }, []);
-  const collapseAll = t__default.useCallback(() => {
-    setExpandedRows(/* @__PURE__ */ new Set());
-  }, []);
-  return {
-    expandedRows,
-    setExpandedRows,
-    toggleRow,
-    expandAll,
-    collapseAll
-  };
-}
-var TableRow2 = t__default.memo(({
-  row,
-  columns,
-  isExpanded,
-  enableExpandable,
-  renderSubComponent,
-  visibilityState
-}) => {
-  const rowId = row.original.id || row.id;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "tr",
-      {
-        className: cn(
-          "border-b transition-colors hover:bg-muted/50",
-          row.getIsSelected() && "bg-muted",
-          isExpanded && "border-b-0"
-        ),
-        children: row.getAllCells().filter((cell) => {
-          const isVisible = visibilityState[cell.column.id] !== false;
-          return isVisible;
-        }).map((cell) => {
-          return /* @__PURE__ */ jsx("td", { className: "moonui-data-table-td p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
-        })
       }
     ),
-    isExpanded && renderSubComponent && /* @__PURE__ */ jsx("tr", { className: "border-b", children: /* @__PURE__ */ jsx("td", { colSpan: row.getAllCells().filter(
-      (cell) => visibilityState[cell.column.id] !== false
-    ).length || 1, className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsx(
-      "div",
+    /* @__PURE__ */ jsx(SidebarHeader, {}),
+    showSearch && (!collapsed || isMobile) && /* @__PURE__ */ jsx(
+      SearchInput,
       {
-        className: "transition-all duration-300 ease-out",
-        style: {
-          maxHeight: isExpanded ? "1000px" : "0",
-          opacity: isExpanded ? 1 : 0
-        },
-        children: /* @__PURE__ */ jsx("div", { className: "border-t border-border/50", children: renderSubComponent({ row: { original: row.original, id: rowId } }) })
-      }
-    ) }) })
+        searchInputRef,
+        searchPlaceholder,
+        initialValue: currentSearchQuery,
+        onSearchChange: handleSearch,
+        keyboardShortcuts
+      },
+      "sidebar-search-desktop"
+    ),
+    /* @__PURE__ */ jsx(SidebarContent, {})
   ] });
-}, (prevProps, nextProps) => {
-  const prevRowId = prevProps.row.original.id || prevProps.row.id;
-  const nextRowId = nextProps.row.original.id || nextProps.row.id;
-  const prevVisibilityKeys = Object.keys(prevProps.visibilityState).sort().join(",");
-  const nextVisibilityKeys = Object.keys(nextProps.visibilityState).sort().join(",");
-  const prevVisibilityValues = Object.values(prevProps.visibilityState).join(",");
-  const nextVisibilityValues = Object.values(nextProps.visibilityState).join(",");
-  return prevRowId === nextRowId && prevProps.isExpanded === nextProps.isExpanded && prevProps.row.getIsSelected() === nextProps.row.getIsSelected() && prevVisibilityKeys === nextVisibilityKeys && prevVisibilityValues === nextVisibilityValues;
-});
-TableRow2.displayName = "TableRow";
-var MoonUIDataTablePro = DataTable;
+}
+function Sidebar(props) {
+  const { hasProAccess, isLoading } = useSubscription();
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full max-w-xs", props.className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Advanced Sidebar is available exclusively to MoonUI Pro subscribers." }),
+        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { size: "sm", children: [
+          /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
+          "Upgrade to Pro"
+        ] }) })
+      ] })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx(SidebarInternal, { ...props });
+}
+var MoonUISidebarPro = Sidebar;
 function NavbarInternal({
   sections,
   branding,