@moontra/moonui-pro 2.3.8 → 2.4.0

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
@@ -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,562 @@ 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);
+}
 function DataTable({
   columns,
   data,
@@ -52169,6 +52726,7 @@ function DataTable({
   renderSubComponent,
   expandedRows: controlledExpandedRows,
   onRowExpandChange,
+  bulkActions = [],
   features = {},
   theme = {},
   texts = {},
@@ -52237,7 +52795,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 +52808,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 +52828,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: [
@@ -52285,17 +52879,38 @@ 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"
-        ] })
+        ] }),
+        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 +52951,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,
         {
@@ -52567,6 +53133,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 = {};