@moontra/moonui-pro 2.1.3 → 2.1.4

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import * as React from 'react';
 import React__default, { ReactNode, ErrorInfo } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ColumnDef } from '@tanstack/react-table';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
 declare const animatedButtonVariants: (props?: ({
@@ -670,6 +671,65 @@ interface PerformanceMonitorProps {
 }
 declare const PerformanceMonitor: React__default.FC<PerformanceMonitorProps>;
 
+interface FileUploadProps {
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    onUpload?: (files: File[]) => Promise<void>;
+    onRemove?: (file: File) => void;
+    className?: string;
+    disabled?: boolean;
+    showPreview?: boolean;
+    allowedTypes?: string[];
+}
+declare function FileUpload({ accept, multiple, maxSize, // 10MB default
+maxFiles, onUpload, onRemove, className, disabled, showPreview, allowedTypes }: FileUploadProps): react_jsx_runtime.JSX.Element;
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    searchable?: boolean;
+    filterable?: boolean;
+    exportable?: boolean;
+    selectable?: boolean;
+    pagination?: boolean;
+    pageSize?: number;
+    className?: string;
+    onRowSelect?: (rows: TData[]) => void;
+    onExport?: (data: TData[]) => void;
+    features?: {
+        sorting?: boolean;
+        filtering?: boolean;
+        pagination?: boolean;
+        search?: boolean;
+        columnVisibility?: boolean;
+        rowSelection?: boolean;
+        export?: boolean | string[];
+        density?: boolean;
+        fullscreen?: boolean;
+        print?: boolean;
+    };
+    theme?: {
+        headerBg?: string;
+        headerText?: string;
+        borderColor?: string;
+        rowHoverBg?: string;
+        selectedRowBg?: string;
+    };
+    texts?: {
+        searchPlaceholder?: string;
+        noResults?: string;
+        rowsPerPage?: string;
+        selectedRows?: string;
+        exportButton?: string;
+        columnsButton?: string;
+        densityButton?: string;
+        filterButton?: string;
+    };
+}
+declare function DataTable<TData, TValue>({ columns, data, searchable, filterable, exportable, selectable, pagination, pageSize, className, onRowSelect, onExport, features, theme, texts, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+
 declare const enhancedButtonVariants: (props?: ({
     variant?: "default" | "glow" | "outline" | "gradient" | "link" | "secondary" | "ghost" | "destructive" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
@@ -787,4 +847,4 @@ declare namespace index {
   };
 }
 
-export { AdvancedChart, AdvancedFormField, AdvancedForms, AdvancedFormsProps, AnimatedButton, AnimatedButtonProps, Calendar, CalendarEvent, ChartType, ColorPicker, ColorPickerProps, Dashboard, DraggableList, DraggableListProps, index as Enhanced, ErrorBoundary, FloatingActionButton, FloatingActionButtonProps, GitHubRepository, GitHubStars, GitHubStarsProps, HealthCheck, HealthCheckEndpoint, HealthCheckProps, HealthCheckResult, HoverCard3D, HoverCard3DProps, Kanban, LazyComponent, LazyImage, LazyImageProps, LazyList, LazyListProps, MagneticButton, MagneticButtonProps, MemoryAnalytics, MemoryAnalyticsProps, MemoryConfig, MemoryEfficientData, MemoryEfficientDataProps, MemoryStats, OptimizedImage, OptimizedImageProps, PerformanceAlert, PerformanceDebugger, PerformanceDebuggerProps, PerformanceEntry, PerformanceMetric, PerformanceMetrics, PerformanceMonitor, PerformanceMonitorProps, PinchZoom, RichTextEditor, SelectableVirtualList, SelectableVirtualListProps, SpotlightCard, SpotlightCardProps, SwipeableCard, Timeline, VirtualList, VirtualListProps, animatedButtonVariants, useStreamingData, useVirtualList };
+export { AdvancedChart, AdvancedFormField, AdvancedForms, AdvancedFormsProps, AnimatedButton, AnimatedButtonProps, Calendar, CalendarEvent, ChartType, ColorPicker, ColorPickerProps, Dashboard, DataTable, DraggableList, DraggableListProps, index as Enhanced, ErrorBoundary, FileUpload, FloatingActionButton, FloatingActionButtonProps, GitHubRepository, GitHubStars, GitHubStarsProps, HealthCheck, HealthCheckEndpoint, HealthCheckProps, HealthCheckResult, HoverCard3D, HoverCard3DProps, Kanban, LazyComponent, LazyImage, LazyImageProps, LazyList, LazyListProps, MagneticButton, MagneticButtonProps, MemoryAnalytics, MemoryAnalyticsProps, MemoryConfig, MemoryEfficientData, MemoryEfficientDataProps, MemoryStats, OptimizedImage, OptimizedImageProps, PerformanceAlert, PerformanceDebugger, PerformanceDebuggerProps, PerformanceEntry, PerformanceMetric, PerformanceMetrics, PerformanceMonitor, PerformanceMonitorProps, PinchZoom, RichTextEditor, SelectableVirtualList, SelectableVirtualListProps, SpotlightCard, SpotlightCardProps, SwipeableCard, Timeline, VirtualList, VirtualListProps, animatedButtonVariants, useStreamingData, useVirtualList };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import * as React16 from 'react';
 import React16__default, { useState, useRef, useCallback, forwardRef, createContext, useContext, useMemo, useEffect, useDebugValue, Component, useLayoutEffect } from 'react';
 import { motion, AnimatePresence, useMotionValue, useSpring, useTransform, animate } from 'framer-motion';
-import { Loader2, Lock, Sparkles, Plus, ChevronDown, ChevronUp, Check, X, ChevronRight, Circle, Minus, Calendar, ChevronLeft, Edit, Trash2, Clock, MapPin, User, MoreHorizontal, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, Download, Maximize2, Activity, Star, ExternalLink, BarChart3, Users, DollarSign, Copy, RotateCcw, Github, GitFork, Server, EyeOff, ZoomOut, ZoomIn, RotateCw, Zap, Monitor, Timer, AlertTriangle, Cpu, MemoryStick, HardDrive, Network, CheckCircle, CheckCircle2, AlertCircle, XCircle, ArrowDownRight, ArrowUpRight, Upload } from 'lucide-react';
+import { Loader2, Lock, Sparkles, Plus, ChevronDown, ChevronUp, Check, X, ChevronRight, Circle, Minus, Calendar, ChevronLeft, Edit, Trash2, Clock, MapPin, User, MoreHorizontal, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, Download, Maximize2, Activity, Star, Upload, CheckCircle2, AlertCircle, Search, Filter, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, ExternalLink, BarChart3, Users, DollarSign, Copy, RotateCcw, Github, GitFork, Server, EyeOff, ZoomOut, ZoomIn, RotateCw, Zap, Monitor, Timer, AlertTriangle, Cpu, MemoryStick, HardDrive, Network, CheckCircle, Video, Music, Archive, File, XCircle, ArrowDownRight, ArrowUpRight } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -25,6 +25,7 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { createSlot } from '@radix-ui/react-slot';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
 
 /**
  * @moontra/moonui-pro v2.0.9
@@ -49684,7 +49685,7 @@ var PerformanceMonitorInternal = ({
     }
     if (newAlerts.length > 0) {
       setAlerts((prev) => [...newAlerts, ...prev].slice(0, 20));
-      newAlerts.forEach((alert) => onAlert?.(alert));
+      newAlerts.forEach((alert2) => onAlert?.(alert2));
     }
   }, [alertThresholds, onAlert]);
   const updateMetrics = useCallback(async () => {
@@ -50068,7 +50069,7 @@ var PerformanceMonitorInternal = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-96 overflow-y-auto", children: /* @__PURE__ */ jsx(AnimatePresence, { children: alerts.map((alert, index) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-96 overflow-y-auto", children: /* @__PURE__ */ jsx(AnimatePresence, { children: alerts.map((alert2, index) => /* @__PURE__ */ jsx(
           motion.div,
           {
             initial: { opacity: 0, x: -20 },
@@ -50077,22 +50078,22 @@ var PerformanceMonitorInternal = ({
             transition: { delay: index * 0.05 },
             children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                alert.type === "critical" ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500" }) : alert.type === "warning" ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-yellow-500" }) : /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-blue-500" }),
+                alert2.type === "critical" ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500" }) : alert2.type === "warning" ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-yellow-500" }) : /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-blue-500" }),
                 /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("div", { className: "font-medium text-sm", children: alert.metric }),
-                  /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: alert.message })
+                  /* @__PURE__ */ jsx("div", { className: "font-medium text-sm", children: alert2.metric }),
+                  /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: alert2.message })
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "text-right text-sm", children: [
                 /* @__PURE__ */ jsxs("div", { className: "font-medium", children: [
-                  alert.value.toFixed(1),
-                  alert.metric === "Network" ? "ms" : "%"
+                  alert2.value.toFixed(1),
+                  alert2.metric === "Network" ? "ms" : "%"
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: alert.timestamp.toLocaleTimeString() })
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: alert2.timestamp.toLocaleTimeString() })
               ] })
             ] }) }) })
           },
-          alert.id
+          alert2.id
         )) }) }),
         alerts.length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
           /* @__PURE__ */ jsx(CheckCircle, { className: "h-12 w-12 mx-auto mb-4 text-green-500" }),
@@ -50162,6 +50163,472 @@ var PerformanceMonitor = ({ className, ...props }) => {
   }
   return /* @__PURE__ */ jsx(PerformanceMonitorInternal, { className, ...props });
 };
+var getFileIcon = (type) => {
+  if (type.startsWith("image/"))
+    return /* @__PURE__ */ jsx(Image$1, { className: "h-4 w-4" });
+  if (type.startsWith("video/"))
+    return /* @__PURE__ */ jsx(Video, { className: "h-4 w-4" });
+  if (type.startsWith("audio/"))
+    return /* @__PURE__ */ jsx(Music, { className: "h-4 w-4" });
+  if (type.includes("pdf"))
+    return /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" });
+  if (type.includes("zip") || type.includes("rar"))
+    return /* @__PURE__ */ jsx(Archive, { className: "h-4 w-4" });
+  return /* @__PURE__ */ jsx(File, { className: "h-4 w-4" });
+};
+var formatFileSize = (bytes) => {
+  if (bytes === 0)
+    return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+};
+function FileUpload({
+  accept = "*",
+  multiple = false,
+  maxSize = 10,
+  // 10MB default
+  maxFiles = 5,
+  onUpload,
+  onRemove,
+  className,
+  disabled = false,
+  showPreview = true,
+  allowedTypes = []
+}) {
+  const { hasProAccess, isLoading } = useSubscription();
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(Card, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { 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: "File Upload 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(Button, { size: "sm", children: [
+          /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
+          "Upgrade to Pro"
+        ] }) }) })
+      ] })
+    ] }) }) });
+  }
+  const [files, setFiles] = React16__default.useState([]);
+  const [isDragOver, setIsDragOver] = React16__default.useState(false);
+  const [isUploading, setIsUploading] = React16__default.useState(false);
+  const fileInputRef = React16__default.useRef(null);
+  const validateFile = (file) => {
+    if (file.size > maxSize * 1024 * 1024) {
+      return `File size must be less than ${maxSize}MB`;
+    }
+    if (allowedTypes.length > 0 && !allowedTypes.includes(file.type)) {
+      return `File type ${file.type} is not allowed`;
+    }
+    return null;
+  };
+  const handleFileSelect = async (selectedFiles) => {
+    if (!selectedFiles || disabled)
+      return;
+    const fileArray = Array.from(selectedFiles);
+    if (files.length + fileArray.length > maxFiles) {
+      alert(`Maximum ${maxFiles} files allowed`);
+      return;
+    }
+    const validFiles = [];
+    const invalidFiles = [];
+    fileArray.forEach((file) => {
+      const error = validateFile(file);
+      if (error) {
+        invalidFiles.push(`${file.name}: ${error}`);
+      } else {
+        validFiles.push({
+          file,
+          id: Math.random().toString(36).substr(2, 9),
+          status: "uploading",
+          progress: 0
+        });
+      }
+    });
+    if (invalidFiles.length > 0) {
+      alert(invalidFiles.join("\n"));
+    }
+    if (validFiles.length === 0)
+      return;
+    setFiles((prev) => [...prev, ...validFiles]);
+    setIsUploading(true);
+    if (onUpload) {
+      try {
+        await onUpload(validFiles.map((f) => f.file));
+        setFiles((prev) => prev.map(
+          (f) => validFiles.find((vf) => vf.id === f.id) ? { ...f, status: "success", progress: 100 } : f
+        ));
+      } catch (error) {
+        setFiles((prev) => prev.map(
+          (f) => validFiles.find((vf) => vf.id === f.id) ? { ...f, status: "error", error: "Upload failed" } : f
+        ));
+      }
+    } else {
+      for (const validFile of validFiles) {
+        const interval = setInterval(() => {
+          setFiles((prev) => prev.map(
+            (f) => f.id === validFile.id && f.progress < 100 ? { ...f, progress: f.progress + 10 } : f
+          ));
+        }, 100);
+        setTimeout(() => {
+          clearInterval(interval);
+          setFiles((prev) => prev.map(
+            (f) => f.id === validFile.id ? { ...f, status: "success", progress: 100 } : f
+          ));
+        }, 1e3);
+      }
+    }
+    setIsUploading(false);
+  };
+  const handleRemove = (fileToRemove) => {
+    setFiles((prev) => prev.filter((f) => f.id !== fileToRemove.id));
+    if (onRemove) {
+      onRemove(fileToRemove.file);
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    handleFileSelect(e.dataTransfer.files);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  };
+  const handleClick2 = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Upload, { className: "h-5 w-5" }),
+        "File Upload"
+      ] }),
+      /* @__PURE__ */ jsxs(CardDescription, { children: [
+        multiple ? `Upload up to ${maxFiles} files` : "Upload a file",
+        " (max ",
+        maxSize,
+        "MB each)"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors",
+            isDragOver ? "border-primary bg-primary/5" : "border-muted-foreground/25",
+            disabled && "cursor-not-allowed opacity-50"
+          ),
+          onDrop: handleDrop,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onClick: handleClick2,
+          children: [
+            /* @__PURE__ */ jsx(Upload, { className: "h-10 w-10 mx-auto mb-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "Drag and drop files here, or click to select" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: accept === "*" ? "Any file type" : `Accepted types: ${accept}` })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept,
+          multiple,
+          onChange: (e) => handleFileSelect(e.target.files),
+          className: "hidden",
+          disabled
+        }
+      ),
+      files.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium", children: [
+          "Uploaded Files (",
+          files.length,
+          ")"
+        ] }),
+        files.map((uploadedFile) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 border rounded-lg", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: getFileIcon(uploadedFile.file.type) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: uploadedFile.file.name }),
+              /* @__PURE__ */ jsxs(Badge, { variant: uploadedFile.status === "success" ? "success" : uploadedFile.status === "error" ? "destructive" : "secondary", children: [
+                uploadedFile.status === "uploading" && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 mr-1 animate-spin" }),
+                uploadedFile.status === "success" && /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3 w-3 mr-1" }),
+                uploadedFile.status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 mr-1" }),
+                uploadedFile.status
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: formatFileSize(uploadedFile.file.size) }),
+              uploadedFile.status === "uploading" && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                uploadedFile.progress,
+                "%"
+              ] })
+            ] }),
+            uploadedFile.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "mt-2 h-2 bg-secondary rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-primary transition-all duration-300 ease-out",
+                style: { width: `${uploadedFile.progress}%` }
+              }
+            ) }),
+            uploadedFile.error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-1", children: uploadedFile.error })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            uploadedFile.status === "success" && showPreview && uploadedFile.file.type.startsWith("image/") && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: () => handleRemove(uploadedFile),
+                disabled: uploadedFile.status === "uploading",
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] }, uploadedFile.id))
+      ] }),
+      isUploading && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+        "Uploading files..."
+      ] })
+    ] })
+  ] });
+}
+function DataTable({
+  columns,
+  data,
+  searchable = true,
+  filterable = true,
+  exportable = true,
+  selectable = false,
+  pagination = true,
+  pageSize = 10,
+  className,
+  onRowSelect,
+  onExport,
+  features = {},
+  theme = {},
+  texts = {}
+}) {
+  const { hasProAccess, isLoading } = useSubscription();
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(Card, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(CardContent, { 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(Button, { size: "sm", children: [
+          /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
+          "Upgrade to Pro"
+        ] }) }) })
+      ] })
+    ] }) }) });
+  }
+  const [sorting, setSorting] = React16__default.useState([]);
+  const [columnFilters, setColumnFilters] = React16__default.useState([]);
+  const [columnVisibility, setColumnVisibility] = React16__default.useState({});
+  const [rowSelection, setRowSelection] = React16__default.useState({});
+  const [globalFilter, setGlobalFilter] = React16__default.useState("");
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: "includesString",
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      globalFilter
+    },
+    initialState: {
+      pagination: {
+        pageSize
+      }
+    }
+  });
+  React16__default.useEffect(() => {
+    if (onRowSelect && selectable) {
+      const selectedRows = table.getFilteredSelectedRowModel().rows.map((row) => row.original);
+      onRowSelect(selectedRows);
+    }
+  }, [rowSelection, onRowSelect, selectable, table]);
+  ({
+    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 = () => {
+    if (onExport) {
+      const selectedRows = table.getFilteredSelectedRowModel().rows;
+      const dataToExport = selectedRows.length > 0 ? selectedRows.map((row) => row.original) : table.getFilteredRowModel().rows.map((row) => row.original);
+      onExport(dataToExport);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "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(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: "Search all columns...",
+              value: globalFilter,
+              onChange: (e) => setGlobalFilter(e.target.value),
+              className: "pl-8 w-64"
+            }
+          )
+        ] }),
+        filterable && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+          /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }),
+          "Filters"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        exportable && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: handleExport, children: [
+          /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }),
+          "Export"
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+          /* @__PURE__ */ jsx(Settings, { className: "mr-2 h-4 w-4" }),
+          "Columns"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+      /* @__PURE__ */ jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "border-b", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: "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(ArrowUp, { className: "h-4 w-4" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" }) })
+              ]
+            }
+          )
+        },
+        header.id
+      )) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx("tbody", { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          className: cn(
+            "border-b transition-colors hover:bg-muted/50",
+            row.getIsSelected() && "bg-muted"
+          ),
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+        },
+        row.id
+      )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "h-24 text-center", children: "No results found." }) }) })
+    ] }) }),
+    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: (e) => table.setPageSize(Number(e.target.value)),
+              className: "h-8 w-[70px] rounded border border-input bg-background px-3 py-1 text-sm",
+              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(
+            Button,
+            {
+              variant: "outline",
+              className: "hidden h-8 w-8 p-0 lg:flex",
+              onClick: () => table.setPageIndex(0),
+              disabled: !table.getCanPreviousPage(),
+              children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              className: "h-8 w-8 p-0",
+              onClick: () => table.previousPage(),
+              disabled: !table.getCanPreviousPage(),
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              className: "h-8 w-8 p-0",
+              onClick: () => table.nextPage(),
+              disabled: !table.getCanNextPage(),
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              className: "hidden h-8 w-8 p-0 lg:flex",
+              onClick: () => table.setPageIndex(table.getPageCount() - 1),
+              disabled: !table.getCanNextPage(),
+              children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
 
 // src/components/enhanced/index.ts
 var enhanced_exports = {};
@@ -51061,4 +51528,4 @@ var BadgePro = React16__default.forwardRef(({
 });
 BadgePro.displayName = "BadgePro";
 
-export { AdvancedChart, AdvancedForms, AnimatedButton, Calendar2 as Calendar, ColorPicker2 as ColorPicker, Dashboard, DraggableList, enhanced_exports as Enhanced, ErrorBoundary, FloatingActionButton, GitHubStars, HealthCheck, HoverCard3D, Kanban, LazyComponent, LazyImage, LazyList, MagneticButton, MemoryAnalytics, MemoryEfficientData, OptimizedImage, PerformanceDebugger, PerformanceMonitor, PinchZoom, RichTextEditor, SelectableVirtualList, SpotlightCard, SwipeableCard, Timeline, VirtualList, animatedButtonVariants, useStreamingData, useVirtualList };
+export { AdvancedChart, AdvancedForms, AnimatedButton, Calendar2 as Calendar, ColorPicker2 as ColorPicker, Dashboard, DataTable, DraggableList, enhanced_exports as Enhanced, ErrorBoundary, FileUpload, FloatingActionButton, GitHubStars, HealthCheck, HoverCard3D, Kanban, LazyComponent, LazyImage, LazyList, MagneticButton, MemoryAnalytics, MemoryEfficientData, OptimizedImage, PerformanceDebugger, PerformanceMonitor, PinchZoom, RichTextEditor, SelectableVirtualList, SpotlightCard, SwipeableCard, Timeline, VirtualList, animatedButtonVariants, useStreamingData, useVirtualList };

package/package.json

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

package/src/components/file-upload/index.tsx

@@ -1,10 +1,9 @@
 "use client"
 
 import React from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Button } from './button'
-import { Progress } from './progress'
-import { Badge } from './badge'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
+import { Button } from '../ui/button'
+import { Badge } from '../ui/badge'
 import { 
   Upload, 
   File, 
@@ -22,7 +21,6 @@ import {
   Sparkles
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
-import { useDocsProAccess } from '@/components/docs/docs-pro-provider'
 import { useSubscription } from '../../hooks/use-subscription'
 
 interface FileUploadProps {
@@ -316,7 +314,12 @@ export function FileUpload({
                   </div>
                   
                   {uploadedFile.status === 'uploading' && (
-                    <Progress value={uploadedFile.progress} className="mt-2" />
+                    <div className="mt-2 h-2 bg-secondary rounded-full overflow-hidden">
+                      <div 
+                        className="h-full bg-primary transition-all duration-300 ease-out"
+                        style={{ width: `${uploadedFile.progress}%` }}
+                      />
+                    </div>
                   )}
                   
                   {uploadedFile.error && (

package/src/components/index.ts

@@ -73,4 +73,10 @@ export * from "./optimized-image"
 export * from "./performance-debugger"
 
 // Performance Monitor
-export * from "./performance-monitor"
+export * from "./performance-monitor"
+
+// File Upload
+export * from "./file-upload"
+
+// Data Table
+export * from "./data-table"