gridular 2.0.0 → 2.2.0

package/dist/index.mjs

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 
 // components/data-grid/data-grid.tsx
-import React14, { useState as useState6, useRef, useEffect as useEffect3, useMemo as useMemo3 } from "react";
+import React15, { useState as useState6, useRef, useEffect as useEffect3, useMemo as useMemo3 } from "react";
 
 // lib/utils.ts
 import { clsx } from "clsx";
@@ -62,57 +62,64 @@ import React, { createContext, useContext, useMemo, useState } from "react";
 import { createMakeStyles } from "tss-react";
 var lightTheme = {
   colors: {
-    primary: "#2563eb",
-    // blue-600
-    secondary: "#6b7280",
-    // gray-500
-    background: "#ffffff",
-    foreground: "#1e1e21",
-    // slate-950
-    muted: "#f1f5f9",
-    // slate-100
-    mutedForeground: "#64748b",
-    // slate-500
-    border: "#e2e8f0",
-    // slate-200
-    popover: "#ffffff"
+    primary: "#536976",
+    // Logo slate - sophisticated primary
+    secondary: "#BBD2C5",
+    // Logo sage - elegant accent
+    background: "#fafbfc",
+    // Slightly off-white
+    foreground: "#292E49",
+    // Logo navy - strong text
+    muted: "rgba(187, 210, 197, 0.08)",
+    // Subtle sage tint
+    mutedForeground: "#536976",
+    // Logo slate for muted text
+    border: "rgba(83, 105, 118, 0.2)",
+    // Transparent slate
+    popover: "#ffffff",
+    accent: "#BBD2C5"
+    // Logo sage
   }
 };
 var darkTheme = {
   colors: {
-    primary: "#3b82f6",
-    // blue-500
-    secondary: "#9ca3af",
-    // gray-400
-    background: "#121314",
-    foreground: "#f8fafc",
-    // slate-50
-    muted: "#1e293b",
-    // slate-800
-    mutedForeground: "#94a3b8",
-    // slate-400
-    border: "#334155",
-    // slate-700
-    popover: "#1a1c1e"
+    primary: "#BBD2C5",
+    // Logo sage - glowing primary in dark
+    secondary: "#536976",
+    // Logo slate
+    background: "#0a0b0d",
+    // Deep technical black
+    foreground: "#e8eaed",
+    // Technical pearl
+    muted: "rgba(41, 46, 73, 0.3)",
+    // Logo navy transparency
+    mutedForeground: "#a8abb2",
+    // Technical silver
+    border: "rgba(83, 105, 118, 0.25)",
+    // Transparent slate
+    popover: "rgba(26, 28, 32, 0.95)",
+    // Semi-transparent charcoal
+    accent: "#BBD2C5"
+    // Logo sage
   }
 };
 var defaultTailwindTheme = {
-  container: "bg-background border border-border rounded-md overflow-hidden",
-  header: "bg-muted/50 border-b border-border",
-  headerCell: "text-muted-foreground font-medium px-4 py-3",
-  row: "border-b border-border hover:bg-muted/30 transition-colors",
-  cell: "px-4 py-2 text-sm",
-  pagination: "bg-background border-t border-border p-2 flex justify-between items-center",
-  filterMenu: "bg-popover border border-border shadow-md rounded-md",
-  filterMenuContent: "p-3",
-  filterMenuHeader: "font-medium mb-2",
-  filterMenuInput: "",
-  filterMenuClearButton: "",
-  filterMenuApplyButton: "",
-  columnResizeHandle: "w-1 bg-border hover:bg-primary cursor-col-resize h-full absolute right-0 top-0",
-  columnResizeHandleActive: "bg-primary",
-  sortIcon: "text-muted-foreground",
-  sortIconActive: "text-foreground"
+  container: "bg-background border border-border/30 rounded-lg overflow-hidden shadow-sm",
+  header: "bg-muted/50 border-b border-border/40 backdrop-blur-sm",
+  headerCell: "text-foreground font-semibold px-4 py-3.5 text-sm font-sans tracking-tight border-r border-border/20 last:border-r-0 relative",
+  row: "border-b border-border/30 hover:bg-primary/5 transition-colors duration-200 group",
+  cell: "px-4 py-3 text-sm font-sans text-foreground/90",
+  pagination: "bg-background/50 border-t border-border/30 px-4 py-3 flex justify-between items-center font-sans text-sm",
+  filterMenu: "bg-popover border border-border/40 shadow-lg rounded-lg backdrop-blur-xl",
+  filterMenuContent: "p-4 space-y-3",
+  filterMenuHeader: "font-semibold mb-3 text-sm font-sans border-b border-border/30 pb-2",
+  filterMenuInput: "font-sans text-sm",
+  filterMenuClearButton: "font-sans text-sm font-medium",
+  filterMenuApplyButton: "font-sans text-sm font-semibold",
+  columnResizeHandle: "w-[3px] bg-border/40 hover:bg-primary cursor-col-resize h-full absolute right-0 top-0 transition-all duration-200 opacity-0 group-hover:opacity-100",
+  columnResizeHandleActive: "bg-primary opacity-100 w-[3px]",
+  sortIcon: "text-muted-foreground transition-all duration-200",
+  sortIconActive: "text-primary"
 };
 var createSpacingFunction = (baseSpacing = 4) => {
   const spacingFn = (...args) => {
@@ -331,11 +338,11 @@ var FilterMenu = ({
   if (!isOpen) {
     return /* @__PURE__ */ React2.createElement("div", { className: "relative" }, /* @__PURE__ */ React2.createElement("div", { onClick: () => onOpenChange(true) }, trigger), isActive && /* @__PURE__ */ React2.createElement("div", { className: "absolute -top-1 -right-1 w-3 h-3 bg-primary rounded-full text-[10px] flex items-center justify-center text-primary-foreground" }, "\u2022"));
   }
-  const menuContent = /* @__PURE__ */ React2.createElement("div", { className: cn("p-3", theme.classes.filterMenuContent) }, /* @__PURE__ */ React2.createElement(
+  const menuContent = /* @__PURE__ */ React2.createElement("div", { className: cn("p-4", theme.classes.filterMenuContent) }, /* @__PURE__ */ React2.createElement(
     "div",
     {
       className: cn(
-        "font-medium mb-2",
+        "font-semibold mb-3 text-sm text-gray-700 dark:text-gray-200",
         theme.classes.filterMenuHeader,
         classes.header
       )
@@ -344,22 +351,22 @@ var FilterMenu = ({
       "span",
       {
         className: cn(
-          "ml-2 text-xs px-1 rounded bg-primary/20 text-primary",
+          "ml-2 text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200",
           classes.activeIndicator
         )
       },
       "Active"
     ))
-  ), isActive && filterValue && /* @__PURE__ */ React2.createElement("div", { className: "mb-2" }, renderCurrentFilter ? renderCurrentFilter(filterValue) : /* @__PURE__ */ React2.createElement(
+  ), isActive && filterValue && /* @__PURE__ */ React2.createElement("div", { className: "mb-3" }, renderCurrentFilter ? renderCurrentFilter(filterValue) : /* @__PURE__ */ React2.createElement(
     "div",
     {
       className: cn(
-        "text-xs bg-muted p-1 rounded",
+        "text-xs bg-gray-50 dark:bg-gray-800 p-2 rounded border border-gray-200 dark:border-gray-700",
         classes.currentFilter
       )
     },
-    "Current filter: ",
-    /* @__PURE__ */ React2.createElement("strong", null, filterValue)
+    "Current: ",
+    /* @__PURE__ */ React2.createElement("strong", { className: "font-semibold" }, filterValue)
   )), renderInput ? renderInput({
     value: localFilterValue,
     onChange: setLocalFilterValue,
@@ -373,7 +380,10 @@ var FilterMenu = ({
       onChange: (e) => setLocalFilterValue(e.target.value),
       onKeyDown: handleKeyDown,
       className: cn(
-        "w-full p-2 border rounded-md",
+        "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md",
+        "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+        "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100",
+        "placeholder-gray-400 dark:placeholder-gray-500",
         theme.classes.filterMenuInput,
         classes.input
       ),
@@ -388,7 +398,7 @@ var FilterMenu = ({
     "div",
     {
       className: cn(
-        "flex justify-between mt-2 gap-2",
+        "flex justify-end mt-3 gap-2",
         classes.buttonContainer
       )
     },
@@ -397,7 +407,10 @@ var FilterMenu = ({
       {
         onClick: handleClearFilter,
         className: cn(
-          "px-3 py-1 text-sm rounded-md border",
+          "px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600",
+          "hover:bg-gray-50 dark:hover:bg-gray-800",
+          "text-gray-700 dark:text-gray-200",
+          "transition-colors",
           theme.classes.filterMenuClearButton,
           classes.clearButton
         )
@@ -409,7 +422,9 @@ var FilterMenu = ({
       {
         onClick: handleApplyFilter,
         className: cn(
-          "px-3 py-1 text-sm bg-primary text-primary-foreground rounded-md",
+          "px-4 py-2 text-sm font-medium rounded-md",
+          "bg-blue-600 hover:bg-blue-700 text-white",
+          "transition-colors",
           theme.classes.filterMenuApplyButton,
           classes.applyButton
         )
@@ -423,7 +438,11 @@ var FilterMenu = ({
       {
         ref: menuRef,
         className: cn(
-          "absolute top-full left-0 z-50 mt-1 min-w-[200px] bg-popover border rounded-md shadow-md",
+          "absolute top-full left-0 z-50 mt-2 min-w-[280px]",
+          "bg-white dark:bg-gray-900",
+          "border border-gray-200 dark:border-gray-700",
+          "rounded-lg shadow-xl",
+          "backdrop-blur-sm",
           theme.classes.filterMenu,
           classes.container,
           column.index === totalColumns - 1 && "right-0 left-auto"
@@ -444,7 +463,11 @@ var FilterMenu = ({
     {
       ref: menuRef,
       className: cn(
-        "absolute top-full left-0 z-50 mt-1 min-w-[200px] bg-popover border rounded-md shadow-md",
+        "absolute top-full left-0 z-50 mt-2 min-w-[280px]",
+        "bg-white dark:bg-gray-900",
+        "border border-gray-200 dark:border-gray-700",
+        "rounded-lg shadow-xl",
+        "backdrop-blur-sm",
         theme.classes.filterMenu,
         classes.container,
         column.index === totalColumns - 1 && "right-0 left-auto"
@@ -538,17 +561,17 @@ function TableHeader({
     if (!sortDirection) return null;
     if (sortIconVariant === "none") return null;
     if (sortIconVariant === "chevrons") {
-      return sortDirection === "asc" ? /* @__PURE__ */ React3.createElement(ChevronUp, { className: "ml-2 h-4 w-4 text-primary" }) : /* @__PURE__ */ React3.createElement(ChevronDown, { className: "ml-2 h-4 w-4 text-primary" });
+      return sortDirection === "asc" ? /* @__PURE__ */ React3.createElement(ChevronUp, { className: "ml-1 h-3 w-3 text-primary" }) : /* @__PURE__ */ React3.createElement(ChevronDown, { className: "ml-1 h-3 w-3 text-primary" });
     }
-    return sortDirection === "asc" ? /* @__PURE__ */ React3.createElement(ArrowUp, { className: "ml-2 h-4 w-4 text-primary" }) : /* @__PURE__ */ React3.createElement(ArrowDown, { className: "ml-2 h-4 w-4 text-primary" });
+    return sortDirection === "asc" ? /* @__PURE__ */ React3.createElement(ArrowUp, { className: "ml-1 h-3 w-3 text-primary" }) : /* @__PURE__ */ React3.createElement(ArrowDown, { className: "ml-1 h-3 w-3 text-primary" });
   };
   const defaultFilterIcon = (column, isActive) => {
     return /* @__PURE__ */ React3.createElement(
       Filter,
       {
         className: cn(
-          "h-4 w-4 ml-1",
-          isActive ? theme.classes.sortIconActive : theme.classes.sortIcon
+          "h-3.5 w-3.5 transition-colors",
+          isActive ? "text-blue-500 fill-blue-100" : "text-gray-400 hover:text-gray-600"
         )
       }
     );
@@ -629,7 +652,7 @@ function TableHeader({
                     filterMenuOpen === column.id ? null : column.id
                   );
                 },
-                className: "focus:outline-none"
+                className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
               },
               renderFilterIcon ? renderFilterIcon(column, hasActiveFilter) : defaultFilterIcon(column, hasActiveFilter)
             )
@@ -648,7 +671,7 @@ function TableHeader({
 }
 
 // components/data-grid/table-body.tsx
-import React8 from "react";
+import React9 from "react";
 
 // components/data-grid/group-row.tsx
 import React4 from "react";
@@ -973,10 +996,27 @@ var TableCell = ({
   onSelect,
   contextMenuContent,
   selectedCellClassName = "ring-2 ring-primary ring-inset",
-  preventRowSelection = true
+  preventRowSelection = true,
+  enableExpandableRows = false,
+  isExpanded = false,
+  onToggleExpand,
+  expandIcon,
+  collapseIcon
 }) => {
   const themeClasses = useTailwindTheme();
-  const content = /* @__PURE__ */ React6.createElement("div", { className: "relative z-0" }, column.renderCell ? column.renderCell(row) : column.cell ? column.cell(row) : row[column.id]);
+  const cellContent = column.renderCell ? column.renderCell(row) : column.cell ? column.cell(row) : row[column.id];
+  const content = /* @__PURE__ */ React6.createElement("div", { className: "relative z-0 flex items-center gap-2" }, enableExpandableRows && /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        onToggleExpand == null ? void 0 : onToggleExpand();
+      },
+      className: "p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors",
+      "aria-label": isExpanded ? "Collapse row" : "Expand row"
+    },
+    isExpanded ? expandIcon : collapseIcon
+  ), /* @__PURE__ */ React6.createElement("span", { className: "flex-1" }, cellContent));
   const cell = contextMenuContent ? /* @__PURE__ */ React6.createElement(
     ContextMenu,
     {
@@ -1051,14 +1091,19 @@ function TableRow({
   onCellSelect,
   selectedCellClassName,
   preventRowSelection,
-  contextMenuContent
+  contextMenuContent,
+  enableExpandableRows = false,
+  isExpanded = false,
+  onToggleExpand,
+  expandIcon,
+  collapseIcon
 }) {
   return /* @__PURE__ */ React7.createElement(
     "tr",
     {
       className: cn(
-        "hover:bg-muted/50 transition-colors",
-        isSelected && selectedRowClassName,
+        "border-b border-border/30 hover:bg-primary/5 transition-colors duration-200 group",
+        isSelected && (selectedRowClassName || "bg-primary/10"),
         rowClassName
       ),
       onClick: () => {
@@ -1073,7 +1118,7 @@ function TableRow({
         cursor: onRowSelect || onRowClick ? "pointer" : "default"
       }
     },
-    columns.map((column) => {
+    columns.map((column, index) => {
       const isCellSelected = selectedCell && selectedCell.rowId === rowId && selectedCell.columnId === column.id;
       return /* @__PURE__ */ React7.createElement(
         TableCell,
@@ -1096,13 +1141,35 @@ function TableRow({
             }
           },
           preventRowSelection,
-          contextMenuContent
+          contextMenuContent,
+          enableExpandableRows: enableExpandableRows && index === 0,
+          isExpanded,
+          onToggleExpand,
+          expandIcon,
+          collapseIcon
         }
       );
     })
   );
 }
 
+// components/data-grid/expandable-row.tsx
+import React8 from "react";
+function ExpandableRow({
+  row,
+  rowId,
+  columns,
+  isExpanded,
+  onToggleExpand,
+  renderExpandedContent,
+  expandIcon,
+  collapseIcon,
+  expandButtonClassName
+}) {
+  if (!isExpanded) return null;
+  return /* @__PURE__ */ React8.createElement("tr", { key: `${rowId}-expanded`, className: "border-b bg-gray-50 dark:bg-gray-900" }, /* @__PURE__ */ React8.createElement("td", { colSpan: columns.length, className: "p-0" }, /* @__PURE__ */ React8.createElement("div", { className: "px-4 py-3 bg-white dark:bg-gray-950 border-t" }, renderExpandedContent(row))));
+}
+
 // components/data-grid/table-body.tsx
 var TableBody = ({
   paginatedData,
@@ -1120,18 +1187,25 @@ var TableBody = ({
   groupingState,
   toggleGroupExpanded,
   renderGroupRow,
-  groupExpandIcon = /* @__PURE__ */ React8.createElement(ChevronDown3, { className: "h-4 w-4" }),
-  groupCollapseIcon = /* @__PURE__ */ React8.createElement(ChevronRight2, { className: "h-4 w-4" }),
+  groupExpandIcon = /* @__PURE__ */ React9.createElement(ChevronDown3, { className: "h-4 w-4" }),
+  groupCollapseIcon = /* @__PURE__ */ React9.createElement(ChevronRight2, { className: "h-4 w-4" }),
   groupRowProps = {},
   selectedCell = null,
   onCellSelect,
   selectedCellClassName = "ring-2 ring-primary ring-inset",
   preventRowSelection,
-  contextMenuContent
+  contextMenuContent,
+  enableExpandableRows = false,
+  expandedRows = {},
+  onToggleRowExpand,
+  renderExpandedRow,
+  expandIcon = /* @__PURE__ */ React9.createElement(ChevronDown3, { className: "h-4 w-4" }),
+  collapseIcon = /* @__PURE__ */ React9.createElement(ChevronRight2, { className: "h-4 w-4" }),
+  getRowId = (row, index) => row.id || `row-${index}`
 }) => {
-  return /* @__PURE__ */ React8.createElement("tbody", { className: theme.classes.tbody }, paginatedData.map((row, rowIndex) => {
+  return /* @__PURE__ */ React9.createElement("tbody", { className: theme.classes.tbody }, paginatedData.map((row, rowIndex) => {
     if (enableGrouping && row.isGroupRow) {
-      return /* @__PURE__ */ React8.createElement(
+      return /* @__PURE__ */ React9.createElement(
         GroupRow,
         __spreadValues({
           key: row.groupKey,
@@ -1149,12 +1223,12 @@ var TableBody = ({
         }, groupRowProps)
       );
     }
-    const rowId = row.id || `row-${rowIndex}`;
+    const rowId = getRowId(row, rowIndex);
     const isSelected = selectedRows[rowId];
-    return /* @__PURE__ */ React8.createElement(
+    const isExpanded = expandedRows[rowId] || false;
+    return /* @__PURE__ */ React9.createElement(React9.Fragment, { key: rowId }, /* @__PURE__ */ React9.createElement(
       TableRow,
       {
-        key: rowId,
         row,
         rowId,
         columns,
@@ -1169,14 +1243,31 @@ var TableBody = ({
         onCellSelect,
         selectedCellClassName,
         preventRowSelection,
-        contextMenuContent
+        contextMenuContent,
+        enableExpandableRows,
+        isExpanded,
+        onToggleExpand: enableExpandableRows && onToggleRowExpand ? () => onToggleRowExpand(rowId) : void 0,
+        expandIcon,
+        collapseIcon
       }
-    );
+    ), enableExpandableRows && isExpanded && renderExpandedRow && /* @__PURE__ */ React9.createElement(
+      ExpandableRow,
+      {
+        row,
+        rowId,
+        columns,
+        isExpanded,
+        onToggleExpand: () => onToggleRowExpand == null ? void 0 : onToggleRowExpand(rowId),
+        renderExpandedContent: renderExpandedRow,
+        expandIcon,
+        collapseIcon
+      }
+    ));
   }));
 };
 
 // components/data-grid/pagination.tsx
-import React9 from "react";
+import React10 from "react";
 var Pagination = ({
   pageIndex,
   pageCount,
@@ -1214,92 +1305,113 @@ var Pagination = ({
   const goToPrevPage = () => setPageIndex(Math.max(0, pageIndex - 1));
   const goToNextPage = () => setPageIndex(Math.min(pageCount - 1, pageIndex + 1));
   const goToLastPage = () => setPageIndex(pageCount - 1);
-  return /* @__PURE__ */ React9.createElement("div", { className: cn("p-2 flex items-center justify-between", className) }, showPageSizeSelector && /* @__PURE__ */ React9.createElement("div", { className: cn("flex items-center gap-2", pageSizeClassName) }, renderPageSizeSelector ? renderPageSizeSelector({
+  return /* @__PURE__ */ React10.createElement("div", { className: cn("px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700", className) }, showPageSizeSelector && /* @__PURE__ */ React10.createElement("div", { className: cn("flex items-center gap-3", pageSizeClassName) }, renderPageSizeSelector ? renderPageSizeSelector({
     pageSize,
     options: pageSizeOptions,
     onChange: handlePageSizeChange
-  }) : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", { className: "text-sm text-muted-foreground" }, "Rows per page:"), /* @__PURE__ */ React9.createElement(
+  }) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("span", { className: "text-sm text-gray-600 dark:text-gray-400 font-medium" }, "Rows per page:"), /* @__PURE__ */ React10.createElement(
     "select",
     {
       value: pageSize,
       onChange: (e) => handlePageSizeChange(Number(e.target.value)),
-      className: "border rounded px-2 py-1 text-sm bg-background"
+      className: "border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-1.5 text-sm rounded-md hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors cursor-pointer"
     },
-    pageSizeOptions.map((option) => /* @__PURE__ */ React9.createElement("option", { key: option, value: option }, option))
-  ))), /* @__PURE__ */ React9.createElement(
+    pageSizeOptions.map((option) => /* @__PURE__ */ React10.createElement("option", { key: option, value: option }, option))
+  ))), /* @__PURE__ */ React10.createElement(
     "div",
     {
-      className: cn("flex items-center justify-between", buttonsClassName)
+      className: cn("flex items-center gap-4", buttonsClassName)
     },
-    showPageInfo && /* @__PURE__ */ React9.createElement("div", { className: cn("mr-2", pageInfoClassName) }, renderPageInfo ? renderPageInfo({ start, end, total: totalRows }) : /* @__PURE__ */ React9.createElement("span", { className: "text-sm text-muted-foreground" }, start, "-", end, " of ", totalRows)),
-    showFirstLastButtons && (renderFirstPageButton ? renderFirstPageButton({
+    showPageInfo && /* @__PURE__ */ React10.createElement("div", { className: cn("text-sm text-gray-600 dark:text-gray-400", pageInfoClassName) }, renderPageInfo ? renderPageInfo({ start, end, total: totalRows }) : /* @__PURE__ */ React10.createElement("span", null, start, "\u2013", end, " of ", totalRows)),
+    /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-1" }, showFirstLastButtons && (renderFirstPageButton ? renderFirstPageButton({
       onClick: goToFirstPage,
       disabled: isFirstPage
-    }) : /* @__PURE__ */ React9.createElement(
+    }) : /* @__PURE__ */ React10.createElement(
       "button",
       {
         onClick: goToFirstPage,
         disabled: isFirstPage,
         className: cn(
-          "p-1 rounded hover:bg-muted disabled:opacity-50 disabled:pointer-events-none",
+          "h-8 w-8 rounded-md border border-gray-300 dark:border-gray-600",
+          "bg-white dark:bg-gray-800",
+          "hover:bg-gray-50 dark:hover:bg-gray-700",
+          "text-gray-700 dark:text-gray-300",
+          "disabled:opacity-40 disabled:cursor-not-allowed",
+          "transition-colors",
+          "flex items-center justify-center text-sm",
           buttonClassName
         )
       },
       "<<"
-    )),
-    renderPrevPageButton ? renderPrevPageButton({
+    )), renderPrevPageButton ? renderPrevPageButton({
       onClick: goToPrevPage,
       disabled: isFirstPage
-    }) : /* @__PURE__ */ React9.createElement(
+    }) : /* @__PURE__ */ React10.createElement(
       "button",
       {
         onClick: goToPrevPage,
         disabled: isFirstPage,
         className: cn(
-          "p-1 rounded hover:bg-muted disabled:opacity-50 disabled:pointer-events-none",
+          "h-8 w-8 rounded-md border border-gray-300 dark:border-gray-600",
+          "bg-white dark:bg-gray-800",
+          "hover:bg-gray-50 dark:hover:bg-gray-700",
+          "text-gray-700 dark:text-gray-300",
+          "disabled:opacity-40 disabled:cursor-not-allowed",
+          "transition-colors",
+          "flex items-center justify-center text-sm",
           buttonClassName
         )
       },
       "<"
-    ),
-    renderNextPageButton ? renderNextPageButton({
+    ), renderNextPageButton ? renderNextPageButton({
       onClick: goToNextPage,
       disabled: isLastPage
-    }) : /* @__PURE__ */ React9.createElement(
+    }) : /* @__PURE__ */ React10.createElement(
       "button",
       {
         onClick: goToNextPage,
         disabled: isLastPage,
         className: cn(
-          "p-1 rounded hover:bg-muted disabled:opacity-50 disabled:pointer-events-none",
+          "h-8 w-8 rounded-md border border-gray-300 dark:border-gray-600",
+          "bg-white dark:bg-gray-800",
+          "hover:bg-gray-50 dark:hover:bg-gray-700",
+          "text-gray-700 dark:text-gray-300",
+          "disabled:opacity-40 disabled:cursor-not-allowed",
+          "transition-colors",
+          "flex items-center justify-center text-sm",
           buttonClassName
         )
       },
       ">"
-    ),
-    showFirstLastButtons && (renderLastPageButton ? renderLastPageButton({
+    ), showFirstLastButtons && (renderLastPageButton ? renderLastPageButton({
       onClick: goToLastPage,
       disabled: isLastPage
-    }) : /* @__PURE__ */ React9.createElement(
+    }) : /* @__PURE__ */ React10.createElement(
       "button",
       {
         onClick: goToLastPage,
         disabled: isLastPage,
         className: cn(
-          "p-1 rounded hover:bg-muted disabled:opacity-50 disabled:pointer-events-none",
+          "h-8 w-8 rounded-md border border-gray-300 dark:border-gray-600",
+          "bg-white dark:bg-gray-800",
+          "hover:bg-gray-50 dark:hover:bg-gray-700",
+          "text-gray-700 dark:text-gray-300",
+          "disabled:opacity-40 disabled:cursor-not-allowed",
+          "transition-colors",
+          "flex items-center justify-center text-sm",
           buttonClassName
         )
       },
       ">>"
-    ))
+    )))
   ));
 };
 
 // components/data-grid/column-manager.tsx
-import React12 from "react";
+import React13 from "react";
 
 // components/ui/dropdown-menu.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight as ChevronRight3, Circle } from "lucide-react";
 var DropdownMenu = DropdownMenuPrimitive.Root;
@@ -1308,9 +1420,9 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React10.forwardRef((_a, ref) => {
+var DropdownMenuSubTrigger = React11.forwardRef((_a, ref) => {
   var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     DropdownMenuPrimitive.SubTrigger,
     __spreadValues({
       ref,
@@ -1321,13 +1433,13 @@ var DropdownMenuSubTrigger = React10.forwardRef((_a, ref) => {
       )
     }, props),
     children,
-    /* @__PURE__ */ React10.createElement(ChevronRight3, { className: "ml-auto" })
+    /* @__PURE__ */ React11.createElement(ChevronRight3, { className: "ml-auto" })
   );
 });
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React10.forwardRef((_a, ref) => {
+var DropdownMenuSubContent = React11.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     DropdownMenuPrimitive.SubContent,
     __spreadValues({
       ref,
@@ -1339,9 +1451,9 @@ var DropdownMenuSubContent = React10.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React10.forwardRef((_a, ref) => {
+var DropdownMenuContent = React11.forwardRef((_a, ref) => {
   var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
-  return /* @__PURE__ */ React10.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React11.createElement(
     DropdownMenuPrimitive.Content,
     __spreadValues({
       ref,
@@ -1355,9 +1467,9 @@ var DropdownMenuContent = React10.forwardRef((_a, ref) => {
   ));
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React10.forwardRef((_a, ref) => {
+var DropdownMenuItem = React11.forwardRef((_a, ref) => {
   var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     DropdownMenuPrimitive.Item,
     __spreadValues({
       ref,
@@ -1370,9 +1482,9 @@ var DropdownMenuItem = React10.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React10.forwardRef((_a, ref) => {
+var DropdownMenuCheckboxItem = React11.forwardRef((_a, ref) => {
   var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     DropdownMenuPrimitive.CheckboxItem,
     __spreadValues({
       ref,
@@ -1382,14 +1494,14 @@ var DropdownMenuCheckboxItem = React10.forwardRef((_a, ref) => {
       ),
       checked
     }, props),
-    /* @__PURE__ */ React10.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React10.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React10.createElement(Check, { className: "h-4 w-4" }))),
+    /* @__PURE__ */ React11.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React11.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React11.createElement(Check, { className: "h-4 w-4" }))),
     children
   );
 });
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React10.forwardRef((_a, ref) => {
+var DropdownMenuRadioItem = React11.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     DropdownMenuPrimitive.RadioItem,
     __spreadValues({
       ref,
@@ -1398,14 +1510,14 @@ var DropdownMenuRadioItem = React10.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React10.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React10.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React10.createElement(Circle, { className: "h-2 w-2 fill-current" }))),
+    /* @__PURE__ */ React11.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React11.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React11.createElement(Circle, { className: "h-2 w-2 fill-current" }))),
     children
   );
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React10.forwardRef((_a, ref) => {
+var DropdownMenuLabel = React11.forwardRef((_a, ref) => {
   var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     DropdownMenuPrimitive.Label,
     __spreadValues({
       ref,
@@ -1418,9 +1530,9 @@ var DropdownMenuLabel = React10.forwardRef((_a, ref) => {
   );
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React10.forwardRef((_a, ref) => {
+var DropdownMenuSeparator = React11.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     DropdownMenuPrimitive.Separator,
     __spreadValues({
       ref,
@@ -1435,7 +1547,7 @@ var DropdownMenuShortcut = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "span",
     __spreadValues({
       className: cn("ml-auto text-xs tracking-widest opacity-60", className)
@@ -1445,26 +1557,26 @@ var DropdownMenuShortcut = (_a) => {
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // components/ui/button.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-mono font-bold uppercase tracking-[0.08em] transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0 relative overflow-hidden",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
+        default: "bg-primary text-primary-foreground border-2 border-foreground hover:bg-foreground hover:text-background active:translate-y-[1px] shadow-[3px_3px_0_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_0_rgba(255,255,255,0.2)] hover:shadow-[1px_1px_0_0_rgba(0,0,0,1)] dark:hover:shadow-[1px_1px_0_0_rgba(255,255,255,0.2)]",
+        destructive: "bg-destructive text-destructive-foreground border-2 border-foreground hover:bg-destructive/90 active:translate-y-[1px] shadow-[3px_3px_0_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_0_rgba(255,255,255,0.2)] hover:shadow-[1px_1px_0_0_rgba(0,0,0,1)] dark:hover:shadow-[1px_1px_0_0_rgba(255,255,255,0.2)]",
+        outline: "border-2 border-foreground bg-background hover:bg-foreground hover:text-background active:translate-y-[1px] shadow-[3px_3px_0_0_rgba(0,0,0,1)] dark:shadow-[3px_3px_0_0_rgba(255,255,255,0.2)] hover:shadow-[1px_1px_0_0_rgba(0,0,0,1)] dark:hover:shadow-[1px_1px_0_0_rgba(255,255,255,0.2)]",
+        secondary: "bg-secondary text-secondary-foreground border-2 border-border hover:bg-secondary/80 active:translate-y-[1px] shadow-[2px_2px_0_0_rgba(0,0,0,0.3)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,0.1)] hover:shadow-[1px_1px_0_0_rgba(0,0,0,0.3)] dark:hover:shadow-[1px_1px_0_0_rgba(255,255,255,0.1)]",
+        ghost: "hover:bg-accent hover:text-accent-foreground border-2 border-transparent hover:border-border",
+        link: "text-primary underline-offset-4 hover:underline border-0 shadow-none"
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
+        default: "h-10 px-5 py-2.5 text-xs",
+        sm: "h-8 px-4 text-[10px]",
+        lg: "h-12 px-7 text-sm",
+        icon: "h-10 w-10"
       }
     },
     defaultVariants: {
@@ -1473,11 +1585,11 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React11.forwardRef(
+var Button = React12.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement(
       Comp,
       __spreadValues({
         className: cn(buttonVariants({ variant, size, className })),
@@ -1506,20 +1618,20 @@ function ColumnManager({
   itemClassName,
   resetClassName
 }) {
-  return /* @__PURE__ */ React12.createElement(DropdownMenu, null, /* @__PURE__ */ React12.createElement(DropdownMenuTrigger, { asChild: true, className }, renderTrigger ? renderTrigger({ onClick: () => {
-  } }) : /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(DropdownMenu, null, /* @__PURE__ */ React13.createElement(DropdownMenuTrigger, { asChild: true, className }, renderTrigger ? renderTrigger({ onClick: () => {
+  } }) : /* @__PURE__ */ React13.createElement(
     Button,
     {
       variant: "outline",
       size: "sm",
       className: cn("ml-auto", triggerClassName)
     },
-    /* @__PURE__ */ React12.createElement(Settings, { className: "h-4 w-4 mr-2" }),
-    /* @__PURE__ */ React12.createElement("span", null, "Columns")
-  )), /* @__PURE__ */ React12.createElement(DropdownMenuContent, { align, className: contentClassName }, columns.map((column) => {
+    /* @__PURE__ */ React13.createElement(Settings, { className: "h-3 w-3 mr-1.5" }),
+    /* @__PURE__ */ React13.createElement("span", null, "Columns")
+  )), /* @__PURE__ */ React13.createElement(DropdownMenuContent, { align, className: contentClassName }, columns.map((column) => {
     const isVisible = visibleColumns.includes(column.id);
     const handleToggle = (checked) => toggleColumnVisibility(column.id, checked);
-    return renderColumnItem ? /* @__PURE__ */ React12.createElement(React12.Fragment, { key: column.id }, renderColumnItem({ column, isVisible, onToggle: handleToggle })) : /* @__PURE__ */ React12.createElement(
+    return renderColumnItem ? /* @__PURE__ */ React13.createElement(React13.Fragment, { key: column.id }, renderColumnItem({ column, isVisible, onToggle: handleToggle })) : /* @__PURE__ */ React13.createElement(
       DropdownMenuCheckboxItem,
       {
         key: column.id,
@@ -1529,7 +1641,7 @@ function ColumnManager({
       },
       column.header
     );
-  }), showResetButton && /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(DropdownMenuSeparator, null), renderResetButton ? renderResetButton({ onClick: resetGridPreferences }) : /* @__PURE__ */ React12.createElement(
+  }), showResetButton && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(DropdownMenuSeparator, null), renderResetButton ? renderResetButton({ onClick: resetGridPreferences }) : /* @__PURE__ */ React13.createElement(
     DropdownMenuItem,
     {
       onClick: resetGridPreferences,
@@ -1538,13 +1650,13 @@ function ColumnManager({
         resetClassName
       )
     },
-    /* @__PURE__ */ React12.createElement(RotateCcw, { className: "h-4 w-4 mr-2" }),
+    /* @__PURE__ */ React13.createElement(RotateCcw, { className: "h-3 w-3 mr-1.5" }),
     "Reset all columns"
   ))));
 }
 
 // components/data-grid/group-manager.tsx
-import React13 from "react";
+import React14 from "react";
 import { Layers, X } from "lucide-react";
 function GroupManager({
   columns,
@@ -1571,29 +1683,29 @@ function GroupManager({
       updateGroupByColumns([...groupByColumns, columnId]);
     }
   };
-  return /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col" }, groupByColumns.length > 0 && /* @__PURE__ */ React13.createElement("div", { className: cn("flex flex-wrap gap-1 mb-2", activeGroupsClassName) }, groupByColumns.map((columnId) => {
+  return /* @__PURE__ */ React14.createElement("div", { className: "flex flex-col" }, groupByColumns.length > 0 && /* @__PURE__ */ React14.createElement("div", { className: cn("flex flex-wrap gap-1 mb-2", activeGroupsClassName) }, groupByColumns.map((columnId) => {
     const column = columns.find((col) => col.id === columnId);
     if (!column) return null;
-    return renderActiveGroup ? /* @__PURE__ */ React13.createElement(React13.Fragment, { key: columnId }, renderActiveGroup({
+    return renderActiveGroup ? /* @__PURE__ */ React14.createElement(React14.Fragment, { key: columnId }, renderActiveGroup({
       column,
       onRemove: () => removeGroupByColumn(columnId)
-    })) : /* @__PURE__ */ React13.createElement(
+    })) : /* @__PURE__ */ React14.createElement(
       "div",
       {
         key: columnId,
         className: "bg-primary/10 rounded-md px-2 py-1 text-xs flex items-center"
       },
-      /* @__PURE__ */ React13.createElement("span", { className: "mr-1" }, column.header),
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React14.createElement("span", { className: "mr-1" }, column.header),
+      /* @__PURE__ */ React14.createElement(
         "button",
         {
           onClick: () => removeGroupByColumn(columnId),
           className: "hover:text-destructive focus:outline-none"
         },
-        /* @__PURE__ */ React13.createElement(X, { className: "h-3 w-3" })
+        /* @__PURE__ */ React14.createElement(X, { className: "h-3 w-3" })
       )
     );
-  }), /* @__PURE__ */ React13.createElement(
+  }), /* @__PURE__ */ React14.createElement(
     Button,
     {
       variant: "ghost",
@@ -1602,19 +1714,19 @@ function GroupManager({
       className: "text-xs h-6"
     },
     "Clear All"
-  )), /* @__PURE__ */ React13.createElement(DropdownMenu, null, /* @__PURE__ */ React13.createElement(DropdownMenuTrigger, { asChild: true, className }, renderTrigger ? renderTrigger({ onClick: () => {
-  } }) : /* @__PURE__ */ React13.createElement(
+  )), /* @__PURE__ */ React14.createElement(DropdownMenu, null, /* @__PURE__ */ React14.createElement(DropdownMenuTrigger, { asChild: true, className }, renderTrigger ? renderTrigger({ onClick: () => {
+  } }) : /* @__PURE__ */ React14.createElement(
     Button,
     {
       variant: "outline",
       size: "sm",
       className: cn(triggerClassName)
     },
-    /* @__PURE__ */ React13.createElement(Layers, { className: "h-4 w-4 mr-2" }),
-    /* @__PURE__ */ React13.createElement("span", null, "Group by")
-  )), /* @__PURE__ */ React13.createElement(DropdownMenuContent, { align, className: contentClassName }, groupableColumns.length > 0 ? groupableColumns.map((column) => {
+    /* @__PURE__ */ React14.createElement(Layers, { className: "h-3 w-3 mr-1.5" }),
+    /* @__PURE__ */ React14.createElement("span", null, "Group by")
+  )), /* @__PURE__ */ React14.createElement(DropdownMenuContent, { align, className: contentClassName }, groupableColumns.length > 0 ? groupableColumns.map((column) => {
     const isGrouped = groupByColumns.includes(column.id);
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React14.createElement(
       DropdownMenuCheckboxItem,
       {
         key: column.id,
@@ -1624,7 +1736,7 @@ function GroupManager({
       },
       column.header
     );
-  }) : /* @__PURE__ */ React13.createElement(DropdownMenuItem, { disabled: true }, "No groupable columns"), groupByColumns.length > 0 && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(DropdownMenuSeparator, null), /* @__PURE__ */ React13.createElement(DropdownMenuItem, { onClick: clearGrouping }, "Clear all groups")))));
+  }) : /* @__PURE__ */ React14.createElement(DropdownMenuItem, { disabled: true }, "No groupable columns"), groupByColumns.length > 0 && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(DropdownMenuSeparator, null), /* @__PURE__ */ React14.createElement(DropdownMenuItem, { onClick: clearGrouping }, "Clear all groups")))));
 }
 
 // components/data-grid/use-grid-persistence.ts
@@ -1843,6 +1955,7 @@ function DataGrid({
   enableRowSelection = false,
   enablePagination = true,
   enableGrouping = false,
+  enableExpandableRows = false,
   hideGroupControls = false,
   hideColumnManager = false,
   pageSizeOptions = [5, 10, 20, 50, 100],
@@ -1872,7 +1985,13 @@ function DataGrid({
   enableCellSelection = false,
   onCellSelect,
   preventRowSelection,
-  contextMenuContent
+  contextMenuContent,
+  expandedRows = {},
+  onExpandedRowsChange,
+  renderExpandedRow,
+  expandIcon,
+  collapseIcon,
+  getRowId
 }) {
   const { theme } = useTheme();
   const filterValueRefs = useRef(filterState || {});
@@ -2057,7 +2176,7 @@ function DataGrid({
     });
   };
   if (!isLoading && (!data || data.length === 0)) {
-    return /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React15.createElement(
       "div",
       {
         className: cn(
@@ -2070,7 +2189,7 @@ function DataGrid({
     );
   }
   if (isLoading) {
-    return /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React15.createElement(
       "div",
       {
         className: cn(
@@ -2083,7 +2202,7 @@ function DataGrid({
     );
   }
   const showToolbar = enableGrouping && !hideGroupControls || !hideColumnManager;
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "div",
     {
       className: cn(
@@ -2093,7 +2212,7 @@ function DataGrid({
         classes.container
       )
     },
-    showToolbar ? /* @__PURE__ */ React14.createElement(
+    showToolbar ? /* @__PURE__ */ React15.createElement(
       "div",
       {
         className: cn(
@@ -2101,7 +2220,7 @@ function DataGrid({
           classes.columnManager
         )
       },
-      enableGrouping && !hideGroupControls ? /* @__PURE__ */ React14.createElement(
+      enableGrouping && !hideGroupControls ? /* @__PURE__ */ React15.createElement(
         GroupManager,
         __spreadValues({
           columns,
@@ -2111,7 +2230,7 @@ function DataGrid({
           clearGrouping: handleClearGrouping
         }, groupManagerProps)
       ) : null,
-      !hideColumnManager ? /* @__PURE__ */ React14.createElement(
+      !hideColumnManager ? /* @__PURE__ */ React15.createElement(
         ColumnManager,
         __spreadValues({
           columns,
@@ -2121,7 +2240,7 @@ function DataGrid({
         }, columnManagerProps)
       ) : null
     ) : null,
-    /* @__PURE__ */ React14.createElement("div", { className: "w-full overflow-auto" }, /* @__PURE__ */ React14.createElement("table", { className: "w-full border-collapse" }, /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React15.createElement("div", { className: "w-full overflow-auto" }, /* @__PURE__ */ React15.createElement("table", { className: "w-full border-separate border-spacing-0" }, /* @__PURE__ */ React15.createElement(
       TableHeader,
       {
         columns: orderedColumns,
@@ -2159,7 +2278,7 @@ function DataGrid({
         filterMenu,
         filterMenuRef
       }
-    ), /* @__PURE__ */ React14.createElement(
+    ), /* @__PURE__ */ React15.createElement(
       TableBody,
       {
         paginatedData,
@@ -2195,10 +2314,23 @@ function DataGrid({
         groupCollapseIcon,
         groupRowProps,
         preventRowSelection,
-        contextMenuContent
+        contextMenuContent,
+        enableExpandableRows,
+        expandedRows,
+        onToggleRowExpand: (rowId) => {
+          if (onExpandedRowsChange) {
+            const newExpandedRows = __spreadValues({}, expandedRows);
+            newExpandedRows[rowId] = !newExpandedRows[rowId];
+            onExpandedRowsChange(newExpandedRows);
+          }
+        },
+        renderExpandedRow,
+        expandIcon,
+        collapseIcon,
+        getRowId
       }
     ))),
-    effectiveEnablePagination ? /* @__PURE__ */ React14.createElement(
+    effectiveEnablePagination ? /* @__PURE__ */ React15.createElement(
       Pagination,
       __spreadValues({
         pageIndex: pageIndex != null ? pageIndex : 0,
@@ -2257,7 +2389,7 @@ var useColumnResize = (enableColumnResize) => {
 };
 
 // components/theme-provider/theme-switcher.tsx
-import React15 from "react";
+import React16 from "react";
 import { Moon, Sun } from "lucide-react";
 var ThemeSwitcher = ({ className }) => {
   const { theme, setTssTheme, setTailwindTheme } = useTheme();
@@ -2301,7 +2433,7 @@ var ThemeSwitcher = ({ className }) => {
       });
     }
   };
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     Button,
     {
       onClick: toggleTheme,
@@ -2310,27 +2442,27 @@ var ThemeSwitcher = ({ className }) => {
       className,
       title: isDarkMode ? "Switch to light mode" : "Switch to dark mode"
     },
-    isDarkMode ? /* @__PURE__ */ React15.createElement(Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ React15.createElement(Moon, { className: "h-4 w-4" })
+    isDarkMode ? /* @__PURE__ */ React16.createElement(Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ React16.createElement(Moon, { className: "h-4 w-4" })
   );
 };
 
 // components/theme-provider/theme-wrapper.tsx
-import React16 from "react";
+import React17 from "react";
 var ThemeWrapper = ({
   children,
   customTheme
 }) => {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(
     ThemeProvider,
     {
       initialTssTheme: __spreadValues({}, customTheme || {})
     },
-    /* @__PURE__ */ React16.createElement("div", null, children)
+    /* @__PURE__ */ React17.createElement("div", null, children)
   );
 };
 
 // components/ui/badge.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { cva as cva2 } from "class-variance-authority";
 var badgeVariants = cva2(
@@ -2360,7 +2492,7 @@ function Badge(_a) {
     "asChild"
   ]);
   const Comp = asChild ? Slot2 : "span";
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     Comp,
     __spreadValues({
       "data-slot": "badge",
@@ -2370,42 +2502,42 @@ function Badge(_a) {
 }
 
 // components/ui/checkbox.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check as Check2 } from "lucide-react";
-var Checkbox = React18.forwardRef((_a, ref) => {
+var Checkbox = React19.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     CheckboxPrimitive.Root,
     __spreadValues({
       ref,
       className: cn(
-        "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        "peer h-3.5 w-3.5 shrink-0 border-2 border-border shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-foreground",
         className
       )
     }, props),
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement(
       CheckboxPrimitive.Indicator,
       {
         className: cn("flex items-center justify-center text-current")
       },
-      /* @__PURE__ */ React18.createElement(Check2, { className: "h-4 w-4" })
+      /* @__PURE__ */ React19.createElement(Check2, { className: "h-3 w-3", strokeWidth: 3 })
     )
   );
 });
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 // components/ui/input.tsx
-import * as React19 from "react";
-var Input = React19.forwardRef(
+import * as React20 from "react";
+var Input = React20.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       "input",
       __spreadValues({
         type,
         className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full border-2 border-border bg-background px-3 py-2 text-sm font-mono font-medium transition-all duration-150 file:border-0 file:bg-transparent file:text-sm file:font-mono file:font-bold file:text-foreground placeholder:text-muted-foreground placeholder:text-xs placeholder:uppercase placeholder:tracking-[0.08em] placeholder:font-bold focus-visible:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 hover:border-foreground disabled:cursor-not-allowed disabled:opacity-30 disabled:bg-muted shadow-[inset_2px_2px_0_0_rgba(0,0,0,0.1)] dark:shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.05)] focus-visible:shadow-[inset_0_0_0_0_rgba(0,0,0,0)]",
           className
         ),
         ref
@@ -2416,21 +2548,21 @@ var Input = React19.forwardRef(
 Input.displayName = "Input";
 
 // components/ui/popover.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React20.forwardRef((_a, ref) => {
+var PopoverContent = React21.forwardRef((_a, ref) => {
   var _b = _a, { className, align = "center", sideOffset = 4 } = _b, props = __objRest(_b, ["className", "align", "sideOffset"]);
-  return /* @__PURE__ */ React20.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React21.createElement(
     PopoverPrimitive.Content,
     __spreadValues({
       ref,
       align,
       sideOffset,
       className: cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 border-2 border-foreground bg-popover p-4 text-popover-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] outline-none 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-98 data-[state=open]:zoom-in-98",
         className
       )
     }, props)
@@ -2439,15 +2571,15 @@ var PopoverContent = React20.forwardRef((_a, ref) => {
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // components/ui/select.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check as Check3, ChevronDown as ChevronDown4, ChevronUp as ChevronUp2 } from "lucide-react";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React21.forwardRef((_a, ref) => {
+var SelectTrigger = React22.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     SelectPrimitive.Trigger,
     __spreadValues({
       ref,
@@ -2457,13 +2589,13 @@ var SelectTrigger = React21.forwardRef((_a, ref) => {
       )
     }, props),
     children,
-    /* @__PURE__ */ React21.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React21.createElement(ChevronDown4, { className: "h-4 w-4 opacity-50" }))
+    /* @__PURE__ */ React22.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React22.createElement(ChevronDown4, { className: "h-4 w-4 opacity-50" }))
   );
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React21.forwardRef((_a, ref) => {
+var SelectScrollUpButton = React22.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     SelectPrimitive.ScrollUpButton,
     __spreadValues({
       ref,
@@ -2472,13 +2604,13 @@ var SelectScrollUpButton = React21.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React21.createElement(ChevronUp2, { className: "h-4 w-4" })
+    /* @__PURE__ */ React22.createElement(ChevronUp2, { className: "h-4 w-4" })
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React21.forwardRef((_a, ref) => {
+var SelectScrollDownButton = React22.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     SelectPrimitive.ScrollDownButton,
     __spreadValues({
       ref,
@@ -2487,13 +2619,13 @@ var SelectScrollDownButton = React21.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React21.createElement(ChevronDown4, { className: "h-4 w-4" })
+    /* @__PURE__ */ React22.createElement(ChevronDown4, { className: "h-4 w-4" })
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React21.forwardRef((_a, ref) => {
+var SelectContent = React22.forwardRef((_a, ref) => {
   var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
-  return /* @__PURE__ */ React21.createElement(SelectPrimitive.Portal, null, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(SelectPrimitive.Portal, null, /* @__PURE__ */ React22.createElement(
     SelectPrimitive.Content,
     __spreadValues({
       ref,
@@ -2504,8 +2636,8 @@ var SelectContent = React21.forwardRef((_a, ref) => {
       ),
       position
     }, props),
-    /* @__PURE__ */ React21.createElement(SelectScrollUpButton, null),
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React22.createElement(SelectScrollUpButton, null),
+    /* @__PURE__ */ React22.createElement(
       SelectPrimitive.Viewport,
       {
         className: cn(
@@ -2515,13 +2647,13 @@ var SelectContent = React21.forwardRef((_a, ref) => {
       },
       children
     ),
-    /* @__PURE__ */ React21.createElement(SelectScrollDownButton, null)
+    /* @__PURE__ */ React22.createElement(SelectScrollDownButton, null)
   ));
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React21.forwardRef((_a, ref) => {
+var SelectLabel = React22.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     SelectPrimitive.Label,
     __spreadValues({
       ref,
@@ -2530,9 +2662,9 @@ var SelectLabel = React21.forwardRef((_a, ref) => {
   );
 });
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React21.forwardRef((_a, ref) => {
+var SelectItem = React22.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     SelectPrimitive.Item,
     __spreadValues({
       ref,
@@ -2541,14 +2673,14 @@ var SelectItem = React21.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React21.createElement("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React21.createElement(SelectPrimitive.ItemIndicator, null, /* @__PURE__ */ React21.createElement(Check3, { className: "h-4 w-4" }))),
-    /* @__PURE__ */ React21.createElement(SelectPrimitive.ItemText, null, children)
+    /* @__PURE__ */ React22.createElement("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React22.createElement(SelectPrimitive.ItemIndicator, null, /* @__PURE__ */ React22.createElement(Check3, { className: "h-4 w-4" }))),
+    /* @__PURE__ */ React22.createElement(SelectPrimitive.ItemText, null, children)
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React21.forwardRef((_a, ref) => {
+var SelectSeparator = React22.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     SelectPrimitive.Separator,
     __spreadValues({
       ref,
@@ -2592,6 +2724,7 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  ExpandableRow,
   FilterMenu,
   Input,
   Pagination,