@moontra/moonui-pro 2.3.8 → 2.4.1

package/dist/index.mjs

@@ -3,15 +3,16 @@ import { twMerge } from 'tailwind-merge';
 import * as t from 'react';
 import t__default, { useState, useRef, useCallback, forwardRef, createContext, useContext, useMemo, useEffect, useDebugValue, Component, useLayoutEffect } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, ChevronLeft, Calendar, Edit, Trash2, Clock, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, Download, Maximize2, Activity, Star, Upload, CheckCircle2, Filter, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, ExternalLink, BarChart3, Users, DollarSign, Github, GitFork, Server, EyeOff, ZoomOut, ZoomIn, RotateCw, Zap, Monitor, Timer, Cpu, MemoryStick, HardDrive, Network, CheckCircle, Video, Music, Archive, File, XCircle, ArrowDownRight, ArrowUpRight } from 'lucide-react';
+import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, ChevronLeft, Calendar, Edit, Trash2, Clock, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, Download, Maximize2, Activity, Star, Upload, CheckCircle2, Filter, FileSpreadsheet, FileJson, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, ExternalLink, BarChart3, Users, DollarSign, Github, GitFork, Server, EyeOff, ZoomOut, ZoomIn, RotateCw, Zap, Monitor, Timer, Cpu, MemoryStick, HardDrive, Network, CheckCircle, Video, Music, Archive, File, Columns, XCircle, ArrowDownRight, ArrowUpRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { motion, AnimatePresence, useMotionValue, useSpring, useTransform, animate } from 'framer-motion';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import ReactDOM3 from 'react-dom';
-import { createSlot } from '@radix-ui/react-slot';
+import { createSlot, createSlottable } from '@radix-ui/react-slot';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { createDialogScope } from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -26,7 +27,7 @@ import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/w
 import { ResponsiveContainer, ScatterChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Scatter, PieChart, Pie, Cell, AreaChart, Area, ReferenceLine, Brush, BarChart, Bar, LineChart, Line, ReferenceArea } from 'recharts';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { useForm } from 'react-hook-form';
-import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
+import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel } from '@tanstack/react-table';
 
 /**
  * @moontra/moonui-pro v2.0.9
@@ -3790,7 +3791,7 @@ var me = t.forwardRef((r2, o) => {
     var e;
     return Array.from(((e = I.current) == null ? void 0 : e.querySelectorAll(ce)) || []);
   }
-  function X12(e) {
+  function X13(e) {
     let s = V()[e];
     s && E.setState("value", s.getAttribute(T));
   }
@@ -3805,10 +3806,10 @@ var me = t.forwardRef((r2, o) => {
       s = e > 0 ? we(s, N) : De(s, N), i = s == null ? void 0 : s.querySelector(ce);
     i ? E.setState("value", i.getAttribute(T)) : Q(e);
   }
-  let oe = () => X12(V().length - 1), ie3 = (e) => {
+  let oe = () => X13(V().length - 1), ie3 = (e) => {
     e.preventDefault(), e.metaKey ? oe() : e.altKey ? re(1) : Q(1);
   }, se = (e) => {
-    e.preventDefault(), e.metaKey ? X12(0) : e.altKey ? re(-1) : Q(-1);
+    e.preventDefault(), e.metaKey ? X13(0) : e.altKey ? re(-1) : Q(-1);
   };
   return t.createElement(Primitive2.div, { ref: o, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e) => {
     var s;
@@ -3835,7 +3836,7 @@ var me = t.forwardRef((r2, o) => {
           break;
         }
         case "Home": {
-          e.preventDefault(), X12(0);
+          e.preventDefault(), X13(0);
           break;
         }
         case "End": {
@@ -51095,7 +51096,7 @@ var PerformanceDebuggerInternal = ({
         return /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4 text-muted-foreground" });
     }
   };
-  const exportData = () => {
+  const exportData2 = () => {
     const data = {
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       entries,
@@ -51173,7 +51174,7 @@ var PerformanceDebuggerInternal = ({
           {
             variant: "outline",
             size: "sm",
-            onClick: exportData,
+            onClick: exportData2,
             children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" })
           }
         ),
@@ -52153,6 +52154,894 @@ function FileUpload({
     ] })
   ] });
 }
+function DataTableColumnToggle({ table, trigger }) {
+  const [search, setSearch] = t__default.useState("");
+  const columns = table.getAllColumns().filter((column) => column.getCanHide());
+  const filteredColumns = t__default.useMemo(() => {
+    if (!search)
+      return columns;
+    return columns.filter((column) => {
+      const header = column.columnDef.header;
+      const headerText = typeof header === "string" ? header : column.id;
+      return headerText.toLowerCase().includes(search.toLowerCase());
+    });
+  }, [columns, search]);
+  const visibleCount = columns.filter((col) => col.getIsVisible()).length;
+  const handleToggleAll = (visible) => {
+    columns.forEach((column) => {
+      column.toggleVisibility(visible);
+    });
+  };
+  return /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+    /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: trigger || /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", className: "gap-2", children: [
+      /* @__PURE__ */ jsx(Columns, { className: "h-4 w-4" }),
+      "Columns",
+      visibleCount < columns.length && /* @__PURE__ */ jsxs("span", { className: "ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs", children: [
+        visibleCount,
+        "/",
+        columns.length
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", className: "w-56", children: [
+      /* @__PURE__ */ jsx(MoonUIDropdownMenuLabelPro, { children: "Toggle Columns" }),
+      columns.length > 5 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-3 w-3 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(
+            MoonUIInputPro,
+            {
+              placeholder: "Search columns...",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              className: "h-8 pl-7 text-xs"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {})
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-1.5", children: [
+        /* @__PURE__ */ jsx(
+          MoonUIButtonPro,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 text-xs",
+            onClick: () => handleToggleAll(true),
+            children: "Show all"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MoonUIButtonPro,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 text-xs",
+            onClick: () => handleToggleAll(false),
+            children: "Hide all"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+      /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto", children: filteredColumns.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "No columns found" }) : filteredColumns.map((column) => {
+        const isVisible = column.getIsVisible();
+        const header = column.columnDef.header;
+        const headerText = typeof header === "string" ? header : column.id;
+        return /* @__PURE__ */ jsx(
+          MoonUIDropdownMenuItemPro,
+          {
+            className: cn(
+              "cursor-pointer",
+              !isVisible && "text-muted-foreground"
+            ),
+            onSelect: (e) => {
+              e.preventDefault();
+              column.toggleVisibility();
+            },
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: cn(
+                "flex h-4 w-4 items-center justify-center rounded-sm border",
+                isVisible ? "border-primary bg-primary text-primary-foreground" : "border-muted-foreground"
+              ), children: isVisible && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: headerText })
+            ] })
+          },
+          column.id
+        );
+      }) }),
+      columns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+        /* @__PURE__ */ jsxs("div", { className: "px-2 py-1.5 text-xs text-muted-foreground text-center", children: [
+          visibleCount,
+          " of ",
+          columns.length,
+          " columns visible"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+var ROOT_NAME = "AlertDialog";
+var [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [
+  createDialogScope
+]);
+var useDialogScope = createDialogScope();
+var AlertDialog = (props) => {
+  const { __scopeAlertDialog, ...alertDialogProps } = props;
+  const dialogScope = useDialogScope(__scopeAlertDialog);
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...dialogScope, ...alertDialogProps, modal: true });
+};
+AlertDialog.displayName = ROOT_NAME;
+var TRIGGER_NAME2 = "AlertDialogTrigger";
+var AlertDialogTrigger = t.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeAlertDialog, ...triggerProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ...dialogScope, ...triggerProps, ref: forwardedRef });
+  }
+);
+AlertDialogTrigger.displayName = TRIGGER_NAME2;
+var PORTAL_NAME = "AlertDialogPortal";
+var AlertDialogPortal = (props) => {
+  const { __scopeAlertDialog, ...portalProps } = props;
+  const dialogScope = useDialogScope(__scopeAlertDialog);
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { ...dialogScope, ...portalProps });
+};
+AlertDialogPortal.displayName = PORTAL_NAME;
+var OVERLAY_NAME = "AlertDialogOverlay";
+var AlertDialogOverlay = t.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeAlertDialog, ...overlayProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { ...dialogScope, ...overlayProps, ref: forwardedRef });
+  }
+);
+AlertDialogOverlay.displayName = OVERLAY_NAME;
+var CONTENT_NAME2 = "AlertDialogContent";
+var [AlertDialogContentProvider, useAlertDialogContentContext] = createAlertDialogContext(CONTENT_NAME2);
+var Slottable = createSlottable("AlertDialogContent");
+var AlertDialogContent = t.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeAlertDialog, children, ...contentProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    const contentRef = t.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, contentRef);
+    const cancelRef = t.useRef(null);
+    return /* @__PURE__ */ jsx(
+      DialogPrimitive.WarningProvider,
+      {
+        contentName: CONTENT_NAME2,
+        titleName: TITLE_NAME,
+        docsSlug: "alert-dialog",
+        children: /* @__PURE__ */ jsx(AlertDialogContentProvider, { scope: __scopeAlertDialog, cancelRef, children: /* @__PURE__ */ jsxs(
+          DialogPrimitive.Content,
+          {
+            role: "alertdialog",
+            ...dialogScope,
+            ...contentProps,
+            ref: composedRefs,
+            onOpenAutoFocus: composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {
+              event.preventDefault();
+              cancelRef.current?.focus({ preventScroll: true });
+            }),
+            onPointerDownOutside: (event) => event.preventDefault(),
+            onInteractOutside: (event) => event.preventDefault(),
+            children: [
+              /* @__PURE__ */ jsx(Slottable, { children }),
+              /* @__PURE__ */ jsx(DescriptionWarning, { contentRef })
+            ]
+          }
+        ) })
+      }
+    );
+  }
+);
+AlertDialogContent.displayName = CONTENT_NAME2;
+var TITLE_NAME = "AlertDialogTitle";
+var AlertDialogTitle = t.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeAlertDialog, ...titleProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    return /* @__PURE__ */ jsx(DialogPrimitive.Title, { ...dialogScope, ...titleProps, ref: forwardedRef });
+  }
+);
+AlertDialogTitle.displayName = TITLE_NAME;
+var DESCRIPTION_NAME = "AlertDialogDescription";
+var AlertDialogDescription = t.forwardRef((props, forwardedRef) => {
+  const { __scopeAlertDialog, ...descriptionProps } = props;
+  const dialogScope = useDialogScope(__scopeAlertDialog);
+  return /* @__PURE__ */ jsx(DialogPrimitive.Description, { ...dialogScope, ...descriptionProps, ref: forwardedRef });
+});
+AlertDialogDescription.displayName = DESCRIPTION_NAME;
+var ACTION_NAME = "AlertDialogAction";
+var AlertDialogAction = t.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeAlertDialog, ...actionProps } = props;
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    return /* @__PURE__ */ jsx(DialogPrimitive.Close, { ...dialogScope, ...actionProps, ref: forwardedRef });
+  }
+);
+AlertDialogAction.displayName = ACTION_NAME;
+var CANCEL_NAME = "AlertDialogCancel";
+var AlertDialogCancel = t.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeAlertDialog, ...cancelProps } = props;
+    const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
+    const dialogScope = useDialogScope(__scopeAlertDialog);
+    const ref = useComposedRefs(forwardedRef, cancelRef);
+    return /* @__PURE__ */ jsx(DialogPrimitive.Close, { ...dialogScope, ...cancelProps, ref });
+  }
+);
+AlertDialogCancel.displayName = CANCEL_NAME;
+var DescriptionWarning = ({ contentRef }) => {
+  const MESSAGE = `\`${CONTENT_NAME2}\` requires a description for the component to be accessible for screen reader users.
+
+You can add a description to the \`${CONTENT_NAME2}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
+
+Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME2}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
+
+For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
+  t.useEffect(() => {
+    const hasDescription = document.getElementById(
+      contentRef.current?.getAttribute("aria-describedby")
+    );
+    if (!hasDescription)
+      console.warn(MESSAGE);
+  }, [MESSAGE, contentRef]);
+  return null;
+};
+var Root22 = AlertDialog;
+var Portal22 = AlertDialogPortal;
+var Overlay22 = AlertDialogOverlay;
+var Content22 = AlertDialogContent;
+var Action2 = AlertDialogAction;
+var Cancel = AlertDialogCancel;
+var Title22 = AlertDialogTitle;
+var Description22 = AlertDialogDescription;
+var AlertDialog2 = Root22;
+var AlertDialogPortal2 = Portal22;
+var AlertDialogOverlay2 = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Overlay22,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+AlertDialogOverlay2.displayName = Overlay22.displayName;
+var AlertDialogContent2 = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal2, { children: [
+  /* @__PURE__ */ jsx(AlertDialogOverlay2, {}),
+  /* @__PURE__ */ jsx(
+    Content22,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+AlertDialogContent2.displayName = Content22.displayName;
+var AlertDialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle2 = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Title22,
+  {
+    ref,
+    className: cn("text-lg font-semibold", className),
+    ...props
+  }
+));
+AlertDialogTitle2.displayName = Title22.displayName;
+var AlertDialogDescription2 = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Description22,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+AlertDialogDescription2.displayName = Description22.displayName;
+var AlertDialogAction2 = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Action2,
+  {
+    ref,
+    className: cn(moonUIButtonProVariants(), className),
+    ...props
+  }
+));
+AlertDialogAction2.displayName = Action2.displayName;
+var AlertDialogCancel2 = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Cancel,
+  {
+    ref,
+    className: cn(
+      moonUIButtonProVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogCancel2.displayName = Cancel.displayName;
+function DataTableBulkActions({
+  selectedRows,
+  actions,
+  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);
+      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, index) => {
+            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
+                ]
+              },
+              index
+            );
+          }),
+          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 exportData(data, options) {
+  const { format, filename = "data-export", columns, includeHeaders = true } = options;
+  let content;
+  let mimeType;
+  let extension;
+  switch (format) {
+    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: ${format}`);
+  }
+  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
+}) {
+  const [internalFilters, setInternalFilters] = useState([]);
+  const [matchAll, setMatchAll] = useState(true);
+  const filters = externalFilters || internalFilters;
+  const setFilters = onFiltersChange || setInternalFilters;
+  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 = (index, updates) => {
+    const newFilters = [...filters];
+    newFilters[index] = { ...newFilters[index], ...updates };
+    setFilters(newFilters);
+  };
+  const removeFilter = (index) => {
+    setFilters(filters.filter((_, i) => i !== index));
+  };
+  const clearAllFilters = () => {
+    setFilters([]);
+    table.resetColumnFilters();
+  };
+  const applyFilters = () => {
+    table.resetColumnFilters();
+    filters.forEach((filter) => {
+      const column = table.getColumn(filter.column);
+      if (!column)
+        return;
+      switch (filter.operator) {
+        case "equals":
+          column.setFilterValue(filter.value);
+          break;
+        case "notEquals":
+          column.setFilterValue((value) => value !== filter.value);
+          break;
+        case "contains":
+          column.setFilterValue(
+            (value) => String(value).toLowerCase().includes(String(filter.value).toLowerCase())
+          );
+          break;
+        case "notContains":
+          column.setFilterValue(
+            (value) => !String(value).toLowerCase().includes(String(filter.value).toLowerCase())
+          );
+          break;
+        case "startsWith":
+          column.setFilterValue(
+            (value) => String(value).toLowerCase().startsWith(String(filter.value).toLowerCase())
+          );
+          break;
+        case "endsWith":
+          column.setFilterValue(
+            (value) => String(value).toLowerCase().endsWith(String(filter.value).toLowerCase())
+          );
+          break;
+        case "greaterThan":
+          column.setFilterValue((value) => Number(value) > Number(filter.value));
+          break;
+        case "lessThan":
+          column.setFilterValue((value) => Number(value) < Number(filter.value));
+          break;
+        case "greaterThanOrEqual":
+          column.setFilterValue((value) => Number(value) >= Number(filter.value));
+          break;
+        case "lessThanOrEqual":
+          column.setFilterValue((value) => Number(value) <= Number(filter.value));
+          break;
+        case "isNull":
+          column.setFilterValue((value) => value == null || value === "");
+          break;
+        case "isNotNull":
+          column.setFilterValue((value) => value != null && value !== "");
+          break;
+      }
+    });
+    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, index) => /* @__PURE__ */ jsx(
+              FilterConditionRow,
+              {
+                filter,
+                columns: filterableColumns,
+                onUpdate: (updates) => updateFilter(index, updates),
+                onRemove: () => removeFilter(index)
+              },
+              index
+            )) }),
+            /* @__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,
   data,
@@ -52169,6 +53058,7 @@ function DataTable({
   renderSubComponent,
   expandedRows: controlledExpandedRows,
   onRowExpandChange,
+  bulkActions = [],
   features = {},
   theme = {},
   texts = {},
@@ -52208,6 +53098,7 @@ function DataTable({
   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]);
@@ -52237,7 +53128,12 @@ function DataTable({
       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) {
@@ -52245,12 +53141,17 @@ function DataTable({
       onRowSelect(selectedRows);
     }
   }, [rowSelection, onRowSelect, selectable, table]);
-  const tableState = table.getState();
-  const rows = t__default.useMemo(
-    () => table.getRowModel().rows,
-    // Only recalculate when data or filtering/sorting changes, not on expand/collapse
-    [stableData, tableState.sorting, tableState.columnFilters, tableState.globalFilter, tableState.pagination.pageIndex, tableState.pagination.pageSize]
-  );
+  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,
@@ -52260,12 +53161,38 @@ function DataTable({
     rowSelection: features.rowSelection !== false || selectable,
     export: features.export !== false || exportable
   });
-  const handleExport = () => {
+  const handleExport = async (format) => {
+    const selectedRows = table.getFilteredSelectedRowModel().rows;
+    const dataToExport = selectedRows.length > 0 ? selectedRows.map((row) => row.original) : table.getFilteredRowModel().rows.map((row) => row.original);
+    if (typeof exportable === "object" && exportable.onExport) {
+      exportable.onExport(dataToExport, format);
+      return;
+    }
     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;
     }
+    const filename = typeof exportable === "object" && exportable.filename ? exportable.filename : "data-export";
+    const visibleColumns = getVisibleColumns(columns, columnVisibility);
+    await exportData(dataToExport, {
+      format,
+      filename,
+      columns: visibleColumns,
+      includeHeaders: true
+    });
+  };
+  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();
   };
   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: [
@@ -52282,20 +53209,50 @@ function DataTable({
             }
           )
         ] }),
-        filterable && /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-          /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }) }),
-          "Filters"
-        ] })
+        filterable && /* @__PURE__ */ jsxs(
+          MoonUIButtonPro,
+          {
+            variant: "outline",
+            size: "sm",
+            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 })
+            ]
+          }
+        ),
+        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 && /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", onClick: handleExport, children: [
-          /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }) }),
-          "Export"
+        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__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-          /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Settings, { className: "mr-2 h-4 w-4" }) }),
-          "Columns"
-        ] })
+        /* @__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: [
@@ -52336,66 +53293,17 @@ function DataTable({
       ) : rows?.length ? /* @__PURE__ */ jsx(Fragment, { children: rows.map((row, index) => {
         const rowId = row.original.id || row.id;
         const isExpanded = enableExpandable && expandedRows.has(rowId);
-        return /* @__PURE__ */ jsxs(t__default.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.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "moonui-data-table-td p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
-            }
-          ),
-          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isExpanded && renderSubComponent && /* @__PURE__ */ jsx(
-            motion.tr,
-            {
-              initial: { height: 0, opacity: 0 },
-              animate: {
-                height: "auto",
-                opacity: 1,
-                transition: {
-                  height: {
-                    duration: 0.3,
-                    ease: "easeOut"
-                  },
-                  opacity: {
-                    duration: 0.2,
-                    delay: 0.1
-                  }
-                }
-              },
-              exit: {
-                height: 0,
-                opacity: 0,
-                transition: {
-                  height: {
-                    duration: 0.3,
-                    ease: "easeIn"
-                  },
-                  opacity: {
-                    duration: 0.2
-                  }
-                }
-              },
-              style: { overflow: "hidden" },
-              className: "border-b",
-              children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "p-0", children: /* @__PURE__ */ jsx(
-                motion.div,
-                {
-                  initial: { y: -10 },
-                  animate: { y: 0 },
-                  exit: { y: -10 },
-                  transition: { duration: 0.2 },
-                  className: "border-t border-border/50",
-                  children: renderSubComponent({ row: { original: row.original, id: rowId } })
-                }
-              ) })
-            },
-            `${row.id}-expanded`
-          ) })
-        ] }, rowId);
+        return /* @__PURE__ */ jsx(
+          TableRow2,
+          {
+            row,
+            columns,
+            isExpanded,
+            enableExpandable,
+            renderSubComponent
+          },
+          rowId
+        );
       }) }) : /* @__PURE__ */ jsx(
         motion.tr,
         {
@@ -52514,7 +53422,15 @@ function DataTable({
           )
         ] })
       ] })
-    ] })
+    ] }),
+    filterable && /* @__PURE__ */ jsx(
+      DataTableFilterDrawer,
+      {
+        table,
+        open: filterDrawerOpen,
+        onOpenChange: setFilterDrawerOpen
+      }
+    )
   ] });
 }
 function getExpandableColumn(expandedRows, onToggle) {
@@ -52567,6 +53483,44 @@ function useExpandableRows(initialExpanded = /* @__PURE__ */ new Set()) {
     collapseAll
   };
 }
+var TableRow2 = t__default.memo(({
+  row,
+  columns,
+  isExpanded,
+  enableExpandable,
+  renderSubComponent
+}) => {
+  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.getVisibleCells().map((cell) => /* @__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: columns.length, className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        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 } }) })
+      }
+    ) }) })
+  ] });
+}, (prevProps, nextProps) => {
+  const prevRowId = prevProps.row.original.id || prevProps.row.id;
+  const nextRowId = nextProps.row.original.id || nextProps.row.id;
+  return prevRowId === nextRowId && prevProps.isExpanded === nextProps.isExpanded && prevProps.row.getIsSelected() === nextProps.row.getIsSelected();
+});
+TableRow2.displayName = "TableRow";
 
 // src/components/enhanced/index.ts
 var enhanced_exports = {};