gridular 2.0.0 → 2.1.0

package/dist/index.js

@@ -93,6 +93,7 @@ __export(index_exports, {
   DropdownMenuSubContent: () => DropdownMenuSubContent,
   DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
+  ExpandableRow: () => ExpandableRow,
   FilterMenu: () => FilterMenu,
   Input: () => Input,
   Pagination: () => Pagination,
@@ -135,7 +136,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // components/data-grid/data-grid.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // lib/utils.ts
 var import_clsx = require("clsx");
@@ -166,57 +167,64 @@ var import_react = __toESM(require("react"));
 var import_tss_react = require("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) => {
@@ -435,11 +443,11 @@ var FilterMenu = ({
   if (!isOpen) {
     return /* @__PURE__ */ import_react2.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react2.default.createElement("div", { onClick: () => onOpenChange(true) }, trigger), isActive && /* @__PURE__ */ import_react2.default.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__ */ import_react2.default.createElement("div", { className: cn("p-3", theme.classes.filterMenuContent) }, /* @__PURE__ */ import_react2.default.createElement(
+  const menuContent = /* @__PURE__ */ import_react2.default.createElement("div", { className: cn("p-4", theme.classes.filterMenuContent) }, /* @__PURE__ */ import_react2.default.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
       )
@@ -448,22 +456,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__ */ import_react2.default.createElement("div", { className: "mb-2" }, renderCurrentFilter ? renderCurrentFilter(filterValue) : /* @__PURE__ */ import_react2.default.createElement(
+  ), isActive && filterValue && /* @__PURE__ */ import_react2.default.createElement("div", { className: "mb-3" }, renderCurrentFilter ? renderCurrentFilter(filterValue) : /* @__PURE__ */ import_react2.default.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__ */ import_react2.default.createElement("strong", null, filterValue)
+    "Current: ",
+    /* @__PURE__ */ import_react2.default.createElement("strong", { className: "font-semibold" }, filterValue)
   )), renderInput ? renderInput({
     value: localFilterValue,
     onChange: setLocalFilterValue,
@@ -477,7 +485,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
       ),
@@ -492,7 +503,7 @@ var FilterMenu = ({
     "div",
     {
       className: cn(
-        "flex justify-between mt-2 gap-2",
+        "flex justify-end mt-3 gap-2",
         classes.buttonContainer
       )
     },
@@ -501,7 +512,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
         )
@@ -513,7 +527,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
         )
@@ -527,7 +543,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"
@@ -548,7 +568,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"
@@ -636,17 +660,17 @@ function TableHeader({
     if (!sortDirection) return null;
     if (sortIconVariant === "none") return null;
     if (sortIconVariant === "chevrons") {
-      return sortDirection === "asc" ? /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.ChevronUp, { className: "ml-2 h-4 w-4 text-primary" }) : /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.ChevronDown, { className: "ml-2 h-4 w-4 text-primary" });
+      return sortDirection === "asc" ? /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.ChevronUp, { className: "ml-1 h-3 w-3 text-primary" }) : /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.ChevronDown, { className: "ml-1 h-3 w-3 text-primary" });
     }
-    return sortDirection === "asc" ? /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.ArrowUp, { className: "ml-2 h-4 w-4 text-primary" }) : /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.ArrowDown, { className: "ml-2 h-4 w-4 text-primary" });
+    return sortDirection === "asc" ? /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.ArrowUp, { className: "ml-1 h-3 w-3 text-primary" }) : /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.ArrowDown, { className: "ml-1 h-3 w-3 text-primary" });
   };
   const defaultFilterIcon = (column, isActive) => {
     return /* @__PURE__ */ import_react3.default.createElement(
       import_lucide_react.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"
         )
       }
     );
@@ -727,7 +751,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)
             )
@@ -746,7 +770,7 @@ function TableHeader({
 }
 
 // components/data-grid/table-body.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // components/data-grid/group-row.tsx
 var import_react4 = __toESM(require("react"));
@@ -1071,10 +1095,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__ */ import_react5.default.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__ */ import_react5.default.createElement("div", { className: "relative z-0 flex items-center gap-2" }, enableExpandableRows && /* @__PURE__ */ import_react5.default.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__ */ import_react5.default.createElement("span", { className: "flex-1" }, cellContent));
   const cell = contextMenuContent ? /* @__PURE__ */ import_react5.default.createElement(
     ContextMenu,
     {
@@ -1149,14 +1190,19 @@ function TableRow({
   onCellSelect,
   selectedCellClassName,
   preventRowSelection,
-  contextMenuContent
+  contextMenuContent,
+  enableExpandableRows = false,
+  isExpanded = false,
+  onToggleExpand,
+  expandIcon,
+  collapseIcon
 }) {
   return /* @__PURE__ */ import_react6.default.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: () => {
@@ -1171,7 +1217,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__ */ import_react6.default.createElement(
         TableCell,
@@ -1194,13 +1240,35 @@ function TableRow({
             }
           },
           preventRowSelection,
-          contextMenuContent
+          contextMenuContent,
+          enableExpandableRows: enableExpandableRows && index === 0,
+          isExpanded,
+          onToggleExpand,
+          expandIcon,
+          collapseIcon
         }
       );
     })
   );
 }
 
+// components/data-grid/expandable-row.tsx
+var import_react7 = __toESM(require("react"));
+function ExpandableRow({
+  row,
+  rowId,
+  columns,
+  isExpanded,
+  onToggleExpand,
+  renderExpandedContent,
+  expandIcon,
+  collapseIcon,
+  expandButtonClassName
+}) {
+  if (!isExpanded) return null;
+  return /* @__PURE__ */ import_react7.default.createElement("tr", { key: `${rowId}-expanded`, className: "border-b bg-gray-50 dark:bg-gray-900" }, /* @__PURE__ */ import_react7.default.createElement("td", { colSpan: columns.length, className: "p-0" }, /* @__PURE__ */ import_react7.default.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,
@@ -1218,18 +1286,25 @@ var TableBody = ({
   groupingState,
   toggleGroupExpanded,
   renderGroupRow,
-  groupExpandIcon = /* @__PURE__ */ import_react7.default.createElement(import_lucide_react4.ChevronDown, { className: "h-4 w-4" }),
-  groupCollapseIcon = /* @__PURE__ */ import_react7.default.createElement(import_lucide_react4.ChevronRight, { className: "h-4 w-4" }),
+  groupExpandIcon = /* @__PURE__ */ import_react8.default.createElement(import_lucide_react4.ChevronDown, { className: "h-4 w-4" }),
+  groupCollapseIcon = /* @__PURE__ */ import_react8.default.createElement(import_lucide_react4.ChevronRight, { 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__ */ import_react8.default.createElement(import_lucide_react4.ChevronDown, { className: "h-4 w-4" }),
+  collapseIcon = /* @__PURE__ */ import_react8.default.createElement(import_lucide_react4.ChevronRight, { className: "h-4 w-4" }),
+  getRowId = (row, index) => row.id || `row-${index}`
 }) => {
-  return /* @__PURE__ */ import_react7.default.createElement("tbody", { className: theme.classes.tbody }, paginatedData.map((row, rowIndex) => {
+  return /* @__PURE__ */ import_react8.default.createElement("tbody", { className: theme.classes.tbody }, paginatedData.map((row, rowIndex) => {
     if (enableGrouping && row.isGroupRow) {
-      return /* @__PURE__ */ import_react7.default.createElement(
+      return /* @__PURE__ */ import_react8.default.createElement(
         GroupRow,
         __spreadValues({
           key: row.groupKey,
@@ -1247,12 +1322,12 @@ var TableBody = ({
         }, groupRowProps)
       );
     }
-    const rowId = row.id || `row-${rowIndex}`;
+    const rowId = getRowId(row, rowIndex);
     const isSelected = selectedRows[rowId];
-    return /* @__PURE__ */ import_react7.default.createElement(
+    const isExpanded = expandedRows[rowId] || false;
+    return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, { key: rowId }, /* @__PURE__ */ import_react8.default.createElement(
       TableRow,
       {
-        key: rowId,
         row,
         rowId,
         columns,
@@ -1267,14 +1342,31 @@ var TableBody = ({
         onCellSelect,
         selectedCellClassName,
         preventRowSelection,
-        contextMenuContent
+        contextMenuContent,
+        enableExpandableRows,
+        isExpanded,
+        onToggleExpand: enableExpandableRows && onToggleRowExpand ? () => onToggleRowExpand(rowId) : void 0,
+        expandIcon,
+        collapseIcon
       }
-    );
+    ), enableExpandableRows && isExpanded && renderExpandedRow && /* @__PURE__ */ import_react8.default.createElement(
+      ExpandableRow,
+      {
+        row,
+        rowId,
+        columns,
+        isExpanded,
+        onToggleExpand: () => onToggleRowExpand == null ? void 0 : onToggleRowExpand(rowId),
+        renderExpandedContent: renderExpandedRow,
+        expandIcon,
+        collapseIcon
+      }
+    ));
   }));
 };
 
 // components/data-grid/pagination.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var Pagination = ({
   pageIndex,
   pageCount,
@@ -1312,92 +1404,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__ */ import_react8.default.createElement("div", { className: cn("p-2 flex items-center justify-between", className) }, showPageSizeSelector && /* @__PURE__ */ import_react8.default.createElement("div", { className: cn("flex items-center gap-2", pageSizeClassName) }, renderPageSizeSelector ? renderPageSizeSelector({
+  return /* @__PURE__ */ import_react9.default.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__ */ import_react9.default.createElement("div", { className: cn("flex items-center gap-3", pageSizeClassName) }, renderPageSizeSelector ? renderPageSizeSelector({
     pageSize,
     options: pageSizeOptions,
     onChange: handlePageSizeChange
-  }) : /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-sm text-muted-foreground" }, "Rows per page:"), /* @__PURE__ */ import_react8.default.createElement(
+  }) : /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement("span", { className: "text-sm text-gray-600 dark:text-gray-400 font-medium" }, "Rows per page:"), /* @__PURE__ */ import_react9.default.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__ */ import_react8.default.createElement("option", { key: option, value: option }, option))
-  ))), /* @__PURE__ */ import_react8.default.createElement(
+    pageSizeOptions.map((option) => /* @__PURE__ */ import_react9.default.createElement("option", { key: option, value: option }, option))
+  ))), /* @__PURE__ */ import_react9.default.createElement(
     "div",
     {
-      className: cn("flex items-center justify-between", buttonsClassName)
+      className: cn("flex items-center gap-4", buttonsClassName)
     },
-    showPageInfo && /* @__PURE__ */ import_react8.default.createElement("div", { className: cn("mr-2", pageInfoClassName) }, renderPageInfo ? renderPageInfo({ start, end, total: totalRows }) : /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-sm text-muted-foreground" }, start, "-", end, " of ", totalRows)),
-    showFirstLastButtons && (renderFirstPageButton ? renderFirstPageButton({
+    showPageInfo && /* @__PURE__ */ import_react9.default.createElement("div", { className: cn("text-sm text-gray-600 dark:text-gray-400", pageInfoClassName) }, renderPageInfo ? renderPageInfo({ start, end, total: totalRows }) : /* @__PURE__ */ import_react9.default.createElement("span", null, start, "\u2013", end, " of ", totalRows)),
+    /* @__PURE__ */ import_react9.default.createElement("div", { className: "flex items-center gap-1" }, showFirstLastButtons && (renderFirstPageButton ? renderFirstPageButton({
       onClick: goToFirstPage,
       disabled: isFirstPage
-    }) : /* @__PURE__ */ import_react8.default.createElement(
+    }) : /* @__PURE__ */ import_react9.default.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__ */ import_react8.default.createElement(
+    }) : /* @__PURE__ */ import_react9.default.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__ */ import_react8.default.createElement(
+    }) : /* @__PURE__ */ import_react9.default.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__ */ import_react8.default.createElement(
+    }) : /* @__PURE__ */ import_react9.default.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
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // components/ui/dropdown-menu.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_lucide_react5 = require("lucide-react");
 var DropdownMenu = DropdownMenuPrimitive.Root;
@@ -1406,9 +1519,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,
@@ -1419,13 +1532,13 @@ var DropdownMenuSubTrigger = React10.forwardRef((_a, ref) => {
       )
     }, props),
     children,
-    /* @__PURE__ */ React10.createElement(import_lucide_react5.ChevronRight, { className: "ml-auto" })
+    /* @__PURE__ */ React11.createElement(import_lucide_react5.ChevronRight, { 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,
@@ -1437,9 +1550,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,
@@ -1453,9 +1566,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,
@@ -1468,9 +1581,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,
@@ -1480,14 +1593,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(import_lucide_react5.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(import_lucide_react5.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,
@@ -1496,14 +1609,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(import_lucide_react5.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(import_lucide_react5.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,
@@ -1516,9 +1629,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,
@@ -1533,7 +1646,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)
@@ -1543,26 +1656,26 @@ var DropdownMenuShortcut = (_a) => {
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // components/ui/button.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
 var buttonVariants = (0, import_class_variance_authority.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: {
@@ -1571,11 +1684,11 @@ var buttonVariants = (0, import_class_variance_authority.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 ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement(
       Comp,
       __spreadValues({
         className: cn(buttonVariants({ variant, size, className })),
@@ -1604,20 +1717,20 @@ function ColumnManager({
   itemClassName,
   resetClassName
 }) {
-  return /* @__PURE__ */ import_react9.default.createElement(DropdownMenu, null, /* @__PURE__ */ import_react9.default.createElement(DropdownMenuTrigger, { asChild: true, className }, renderTrigger ? renderTrigger({ onClick: () => {
-  } }) : /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(DropdownMenu, null, /* @__PURE__ */ import_react10.default.createElement(DropdownMenuTrigger, { asChild: true, className }, renderTrigger ? renderTrigger({ onClick: () => {
+  } }) : /* @__PURE__ */ import_react10.default.createElement(
     Button,
     {
       variant: "outline",
       size: "sm",
       className: cn("ml-auto", triggerClassName)
     },
-    /* @__PURE__ */ import_react9.default.createElement(import_lucide_react6.Settings, { className: "h-4 w-4 mr-2" }),
-    /* @__PURE__ */ import_react9.default.createElement("span", null, "Columns")
-  )), /* @__PURE__ */ import_react9.default.createElement(DropdownMenuContent, { align, className: contentClassName }, columns.map((column) => {
+    /* @__PURE__ */ import_react10.default.createElement(import_lucide_react6.Settings, { className: "h-3 w-3 mr-1.5" }),
+    /* @__PURE__ */ import_react10.default.createElement("span", null, "Columns")
+  )), /* @__PURE__ */ import_react10.default.createElement(DropdownMenuContent, { align, className: contentClassName }, columns.map((column) => {
     const isVisible = visibleColumns.includes(column.id);
     const handleToggle = (checked) => toggleColumnVisibility(column.id, checked);
-    return renderColumnItem ? /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, { key: column.id }, renderColumnItem({ column, isVisible, onToggle: handleToggle })) : /* @__PURE__ */ import_react9.default.createElement(
+    return renderColumnItem ? /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, { key: column.id }, renderColumnItem({ column, isVisible, onToggle: handleToggle })) : /* @__PURE__ */ import_react10.default.createElement(
       DropdownMenuCheckboxItem,
       {
         key: column.id,
@@ -1627,7 +1740,7 @@ function ColumnManager({
       },
       column.header
     );
-  }), showResetButton && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(DropdownMenuSeparator, null), renderResetButton ? renderResetButton({ onClick: resetGridPreferences }) : /* @__PURE__ */ import_react9.default.createElement(
+  }), showResetButton && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(DropdownMenuSeparator, null), renderResetButton ? renderResetButton({ onClick: resetGridPreferences }) : /* @__PURE__ */ import_react10.default.createElement(
     DropdownMenuItem,
     {
       onClick: resetGridPreferences,
@@ -1636,13 +1749,13 @@ function ColumnManager({
         resetClassName
       )
     },
-    /* @__PURE__ */ import_react9.default.createElement(import_lucide_react6.RotateCcw, { className: "h-4 w-4 mr-2" }),
+    /* @__PURE__ */ import_react10.default.createElement(import_lucide_react6.RotateCcw, { className: "h-3 w-3 mr-1.5" }),
     "Reset all columns"
   ))));
 }
 
 // components/data-grid/group-manager.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_lucide_react7 = require("lucide-react");
 function GroupManager({
   columns,
@@ -1669,29 +1782,29 @@ function GroupManager({
       updateGroupByColumns([...groupByColumns, columnId]);
     }
   };
-  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex flex-col" }, groupByColumns.length > 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: cn("flex flex-wrap gap-1 mb-2", activeGroupsClassName) }, groupByColumns.map((columnId) => {
+  return /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex flex-col" }, groupByColumns.length > 0 && /* @__PURE__ */ import_react11.default.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__ */ import_react10.default.createElement(import_react10.default.Fragment, { key: columnId }, renderActiveGroup({
+    return renderActiveGroup ? /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, { key: columnId }, renderActiveGroup({
       column,
       onRemove: () => removeGroupByColumn(columnId)
-    })) : /* @__PURE__ */ import_react10.default.createElement(
+    })) : /* @__PURE__ */ import_react11.default.createElement(
       "div",
       {
         key: columnId,
         className: "bg-primary/10 rounded-md px-2 py-1 text-xs flex items-center"
       },
-      /* @__PURE__ */ import_react10.default.createElement("span", { className: "mr-1" }, column.header),
-      /* @__PURE__ */ import_react10.default.createElement(
+      /* @__PURE__ */ import_react11.default.createElement("span", { className: "mr-1" }, column.header),
+      /* @__PURE__ */ import_react11.default.createElement(
         "button",
         {
           onClick: () => removeGroupByColumn(columnId),
           className: "hover:text-destructive focus:outline-none"
         },
-        /* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.X, { className: "h-3 w-3" })
+        /* @__PURE__ */ import_react11.default.createElement(import_lucide_react7.X, { className: "h-3 w-3" })
       )
     );
-  }), /* @__PURE__ */ import_react10.default.createElement(
+  }), /* @__PURE__ */ import_react11.default.createElement(
     Button,
     {
       variant: "ghost",
@@ -1700,19 +1813,19 @@ function GroupManager({
       className: "text-xs h-6"
     },
     "Clear All"
-  )), /* @__PURE__ */ import_react10.default.createElement(DropdownMenu, null, /* @__PURE__ */ import_react10.default.createElement(DropdownMenuTrigger, { asChild: true, className }, renderTrigger ? renderTrigger({ onClick: () => {
-  } }) : /* @__PURE__ */ import_react10.default.createElement(
+  )), /* @__PURE__ */ import_react11.default.createElement(DropdownMenu, null, /* @__PURE__ */ import_react11.default.createElement(DropdownMenuTrigger, { asChild: true, className }, renderTrigger ? renderTrigger({ onClick: () => {
+  } }) : /* @__PURE__ */ import_react11.default.createElement(
     Button,
     {
       variant: "outline",
       size: "sm",
       className: cn(triggerClassName)
     },
-    /* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.Layers, { className: "h-4 w-4 mr-2" }),
-    /* @__PURE__ */ import_react10.default.createElement("span", null, "Group by")
-  )), /* @__PURE__ */ import_react10.default.createElement(DropdownMenuContent, { align, className: contentClassName }, groupableColumns.length > 0 ? groupableColumns.map((column) => {
+    /* @__PURE__ */ import_react11.default.createElement(import_lucide_react7.Layers, { className: "h-3 w-3 mr-1.5" }),
+    /* @__PURE__ */ import_react11.default.createElement("span", null, "Group by")
+  )), /* @__PURE__ */ import_react11.default.createElement(DropdownMenuContent, { align, className: contentClassName }, groupableColumns.length > 0 ? groupableColumns.map((column) => {
     const isGrouped = groupByColumns.includes(column.id);
-    return /* @__PURE__ */ import_react10.default.createElement(
+    return /* @__PURE__ */ import_react11.default.createElement(
       DropdownMenuCheckboxItem,
       {
         key: column.id,
@@ -1722,11 +1835,11 @@ function GroupManager({
       },
       column.header
     );
-  }) : /* @__PURE__ */ import_react10.default.createElement(DropdownMenuItem, { disabled: true }, "No groupable columns"), groupByColumns.length > 0 && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(DropdownMenuSeparator, null), /* @__PURE__ */ import_react10.default.createElement(DropdownMenuItem, { onClick: clearGrouping }, "Clear all groups")))));
+  }) : /* @__PURE__ */ import_react11.default.createElement(DropdownMenuItem, { disabled: true }, "No groupable columns"), groupByColumns.length > 0 && /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(DropdownMenuSeparator, null), /* @__PURE__ */ import_react11.default.createElement(DropdownMenuItem, { onClick: clearGrouping }, "Clear all groups")))));
 }
 
 // components/data-grid/use-grid-persistence.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useGridPersistence(gridId, columns, defaultColumnWidth = 150) {
   const storageKey = `gridular-preferences-${gridId}`;
   const getDefaultPreferences = () => ({
@@ -1766,10 +1879,10 @@ function useGridPersistence(gridId, columns, defaultColumnWidth = 150) {
       return getDefaultPreferences();
     }
   };
-  const [preferences, setPreferences] = (0, import_react11.useState)(
+  const [preferences, setPreferences] = (0, import_react12.useState)(
     getDefaultPreferences()
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     setPreferences(loadPreferences());
   }, []);
   const savePreferences = (newPreferences) => {
@@ -1834,10 +1947,10 @@ function useGridPersistence(gridId, columns, defaultColumnWidth = 150) {
 }
 
 // components/data-grid/use-data-grouping.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useDataGrouping(data, groupingState, idAccessor) {
   const { groupByColumns, expandedGroups } = groupingState;
-  const groupedData = (0, import_react12.useMemo)(() => {
+  const groupedData = (0, import_react13.useMemo)(() => {
     if (!groupByColumns.length) return { rows: data, flattenedRows: data };
     const createGroupingStructure = (rows, groupBy, depth = 0) => {
       if (depth >= groupBy.length || groupBy.length === 0) {
@@ -1896,16 +2009,16 @@ function useDataGrouping(data, groupingState, idAccessor) {
 }
 
 // components/data-grid/use-select-cell.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useSelectCell() {
-  const [selectedCell, setSelectedCell] = (0, import_react13.useState)(null);
-  const selectCell = (0, import_react13.useCallback)((rowId, columnId) => {
+  const [selectedCell, setSelectedCell] = (0, import_react14.useState)(null);
+  const selectCell = (0, import_react14.useCallback)((rowId, columnId) => {
     setSelectedCell({ rowId, columnId });
   }, []);
-  const clearSelection = (0, import_react13.useCallback)(() => {
+  const clearSelection = (0, import_react14.useCallback)(() => {
     setSelectedCell(null);
   }, []);
-  const isCellSelected = (0, import_react13.useCallback)(
+  const isCellSelected = (0, import_react14.useCallback)(
     (rowId, columnId) => {
       return selectedCell !== null && selectedCell.rowId === rowId && selectedCell.columnId === columnId;
     },
@@ -1941,6 +2054,7 @@ function DataGrid({
   enableRowSelection = false,
   enablePagination = true,
   enableGrouping = false,
+  enableExpandableRows = false,
   hideGroupControls = false,
   hideColumnManager = false,
   pageSizeOptions = [5, 10, 20, 50, 100],
@@ -1970,13 +2084,19 @@ function DataGrid({
   enableCellSelection = false,
   onCellSelect,
   preventRowSelection,
-  contextMenuContent
+  contextMenuContent,
+  expandedRows = {},
+  onExpandedRowsChange,
+  renderExpandedRow,
+  expandIcon,
+  collapseIcon,
+  getRowId
 }) {
   const { theme } = useTheme();
-  const filterValueRefs = (0, import_react14.useRef)(filterState || {});
-  const [filterMenuOpen, setFilterMenuOpen] = (0, import_react14.useState)(null);
-  const [activeFilterColumn, setActiveFilterColumn] = (0, import_react14.useState)(null);
-  const filterMenuRef = (0, import_react14.useRef)(null);
+  const filterValueRefs = (0, import_react15.useRef)(filterState || {});
+  const [filterMenuOpen, setFilterMenuOpen] = (0, import_react15.useState)(null);
+  const [activeFilterColumn, setActiveFilterColumn] = (0, import_react15.useState)(null);
+  const filterMenuRef = (0, import_react15.useRef)(null);
   const effectiveEnablePagination = enableGrouping ? false : enablePagination;
   const {
     preferences,
@@ -1996,12 +2116,12 @@ function DataGrid({
       }
     }
   };
-  const [internalGroupingState, setInternalGroupingState] = (0, import_react14.useState)({
+  const [internalGroupingState, setInternalGroupingState] = (0, import_react15.useState)({
     groupByColumns: (groupingState == null ? void 0 : groupingState.groupByColumns) || preferences.groupByColumns || [],
     expandedGroups: (groupingState == null ? void 0 : groupingState.expandedGroups) || preferences.expandedGroups || {}
   });
   const effectiveGroupingState = groupingState || internalGroupingState;
-  const visibleColumns = (0, import_react14.useMemo)(() => {
+  const visibleColumns = (0, import_react15.useMemo)(() => {
     const hiddenIds = new Set(preferences.hiddenColumns);
     const visible = columns.filter((col) => !hiddenIds.has(col.id)).map((col) => col.id);
     const orderedIds = preferences.columnOrder.filter(
@@ -2014,16 +2134,16 @@ function DataGrid({
     });
     return orderedIds;
   }, [columns, preferences.hiddenColumns, preferences.columnOrder]);
-  const orderedColumns = (0, import_react14.useMemo)(() => {
+  const orderedColumns = (0, import_react15.useMemo)(() => {
     const colMap = new Map(columns.map((col) => [col.id, col]));
     return visibleColumns.map((id) => colMap.get(id)).filter(Boolean);
   }, [columns, visibleColumns]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (filterState) {
       filterValueRefs.current = __spreadValues({}, filterState);
     }
   }, [filterState]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     function handleClickOutside(event) {
       if (filterMenuRef.current && !filterMenuRef.current.contains(event.target)) {
         setFilterMenuOpen(null);
@@ -2039,7 +2159,7 @@ function DataGrid({
     enableGrouping ? effectiveGroupingState : { groupByColumns: [], expandedGroups: {} },
     (row) => row.id || `row-${Math.random()}`
   );
-  const paginatedData = (0, import_react14.useMemo)(() => {
+  const paginatedData = (0, import_react15.useMemo)(() => {
     const displayData = enableGrouping ? flattenedRows : data;
     if (!effectiveEnablePagination || !pageSize) {
       return displayData;
@@ -2155,7 +2275,7 @@ function DataGrid({
     });
   };
   if (!isLoading && (!data || data.length === 0)) {
-    return /* @__PURE__ */ import_react14.default.createElement(
+    return /* @__PURE__ */ import_react15.default.createElement(
       "div",
       {
         className: cn(
@@ -2168,7 +2288,7 @@ function DataGrid({
     );
   }
   if (isLoading) {
-    return /* @__PURE__ */ import_react14.default.createElement(
+    return /* @__PURE__ */ import_react15.default.createElement(
       "div",
       {
         className: cn(
@@ -2181,7 +2301,7 @@ function DataGrid({
     );
   }
   const showToolbar = enableGrouping && !hideGroupControls || !hideColumnManager;
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement(
     "div",
     {
       className: cn(
@@ -2191,7 +2311,7 @@ function DataGrid({
         classes.container
       )
     },
-    showToolbar ? /* @__PURE__ */ import_react14.default.createElement(
+    showToolbar ? /* @__PURE__ */ import_react15.default.createElement(
       "div",
       {
         className: cn(
@@ -2199,7 +2319,7 @@ function DataGrid({
           classes.columnManager
         )
       },
-      enableGrouping && !hideGroupControls ? /* @__PURE__ */ import_react14.default.createElement(
+      enableGrouping && !hideGroupControls ? /* @__PURE__ */ import_react15.default.createElement(
         GroupManager,
         __spreadValues({
           columns,
@@ -2209,7 +2329,7 @@ function DataGrid({
           clearGrouping: handleClearGrouping
         }, groupManagerProps)
       ) : null,
-      !hideColumnManager ? /* @__PURE__ */ import_react14.default.createElement(
+      !hideColumnManager ? /* @__PURE__ */ import_react15.default.createElement(
         ColumnManager,
         __spreadValues({
           columns,
@@ -2219,7 +2339,7 @@ function DataGrid({
         }, columnManagerProps)
       ) : null
     ) : null,
-    /* @__PURE__ */ import_react14.default.createElement("div", { className: "w-full overflow-auto" }, /* @__PURE__ */ import_react14.default.createElement("table", { className: "w-full border-collapse" }, /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react15.default.createElement("div", { className: "w-full overflow-auto" }, /* @__PURE__ */ import_react15.default.createElement("table", { className: "w-full border-separate border-spacing-0" }, /* @__PURE__ */ import_react15.default.createElement(
       TableHeader,
       {
         columns: orderedColumns,
@@ -2257,7 +2377,7 @@ function DataGrid({
         filterMenu,
         filterMenuRef
       }
-    ), /* @__PURE__ */ import_react14.default.createElement(
+    ), /* @__PURE__ */ import_react15.default.createElement(
       TableBody,
       {
         paginatedData,
@@ -2293,10 +2413,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__ */ import_react14.default.createElement(
+    effectiveEnablePagination ? /* @__PURE__ */ import_react15.default.createElement(
       Pagination,
       __spreadValues({
         pageIndex: pageIndex != null ? pageIndex : 0,
@@ -2321,11 +2454,11 @@ function DataGrid({
 }
 
 // components/data-grid/use-column-resize.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var useColumnResize = (enableColumnResize) => {
-  const [columnResizeState, setColumnResizeState] = (0, import_react15.useState)({});
-  const [isResizing, setIsResizing] = (0, import_react15.useState)(false);
-  const handleColumnResizeStart = (0, import_react15.useCallback)(
+  const [columnResizeState, setColumnResizeState] = (0, import_react16.useState)({});
+  const [isResizing, setIsResizing] = (0, import_react16.useState)(false);
+  const handleColumnResizeStart = (0, import_react16.useCallback)(
     (columnId, startWidth, e) => {
       if (!enableColumnResize) return;
       setIsResizing(true);
@@ -2355,7 +2488,7 @@ var useColumnResize = (enableColumnResize) => {
 };
 
 // components/theme-provider/theme-switcher.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_lucide_react8 = require("lucide-react");
 var ThemeSwitcher = ({ className }) => {
   const { theme, setTssTheme, setTailwindTheme } = useTheme();
@@ -2399,7 +2532,7 @@ var ThemeSwitcher = ({ className }) => {
       });
     }
   };
-  return /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement(
     Button,
     {
       onClick: toggleTheme,
@@ -2408,27 +2541,27 @@ var ThemeSwitcher = ({ className }) => {
       className,
       title: isDarkMode ? "Switch to light mode" : "Switch to dark mode"
     },
-    isDarkMode ? /* @__PURE__ */ import_react16.default.createElement(import_lucide_react8.Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ import_react16.default.createElement(import_lucide_react8.Moon, { className: "h-4 w-4" })
+    isDarkMode ? /* @__PURE__ */ import_react17.default.createElement(import_lucide_react8.Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ import_react17.default.createElement(import_lucide_react8.Moon, { className: "h-4 w-4" })
   );
 };
 
 // components/theme-provider/theme-wrapper.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var ThemeWrapper = ({
   children,
   customTheme
 }) => {
-  return /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(
     ThemeProvider,
     {
       initialTssTheme: __spreadValues({}, customTheme || {})
     },
-    /* @__PURE__ */ import_react17.default.createElement("div", null, children)
+    /* @__PURE__ */ import_react18.default.createElement("div", null, children)
   );
 };
 
 // components/ui/badge.tsx
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_react_slot2 = require("@radix-ui/react-slot");
 var import_class_variance_authority2 = require("class-variance-authority");
 var badgeVariants = (0, import_class_variance_authority2.cva)(
@@ -2458,7 +2591,7 @@ function Badge(_a) {
     "asChild"
   ]);
   const Comp = asChild ? import_react_slot2.Slot : "span";
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     Comp,
     __spreadValues({
       "data-slot": "badge",
@@ -2468,42 +2601,42 @@ function Badge(_a) {
 }
 
 // components/ui/checkbox.tsx
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_lucide_react9 = require("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(import_lucide_react9.Check, { className: "h-4 w-4" })
+      /* @__PURE__ */ React19.createElement(import_lucide_react9.Check, { className: "h-3 w-3", strokeWidth: 3 })
     )
   );
 });
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 // components/ui/input.tsx
-var React19 = __toESM(require("react"));
-var Input = React19.forwardRef(
+var React20 = __toESM(require("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
@@ -2514,21 +2647,21 @@ var Input = React19.forwardRef(
 Input.displayName = "Input";
 
 // components/ui/popover.tsx
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var PopoverPrimitive = __toESM(require("@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)
@@ -2537,15 +2670,15 @@ var PopoverContent = React20.forwardRef((_a, ref) => {
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // components/ui/select.tsx
-var React21 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
 var import_lucide_react10 = require("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,
@@ -2555,13 +2688,13 @@ var SelectTrigger = React21.forwardRef((_a, ref) => {
       )
     }, props),
     children,
-    /* @__PURE__ */ React21.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React21.createElement(import_lucide_react10.ChevronDown, { className: "h-4 w-4 opacity-50" }))
+    /* @__PURE__ */ React22.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React22.createElement(import_lucide_react10.ChevronDown, { 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,
@@ -2570,13 +2703,13 @@ var SelectScrollUpButton = React21.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React21.createElement(import_lucide_react10.ChevronUp, { className: "h-4 w-4" })
+    /* @__PURE__ */ React22.createElement(import_lucide_react10.ChevronUp, { 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,
@@ -2585,13 +2718,13 @@ var SelectScrollDownButton = React21.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React21.createElement(import_lucide_react10.ChevronDown, { className: "h-4 w-4" })
+    /* @__PURE__ */ React22.createElement(import_lucide_react10.ChevronDown, { 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,
@@ -2602,8 +2735,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(
@@ -2613,13 +2746,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,
@@ -2628,9 +2761,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,
@@ -2639,14 +2772,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(import_lucide_react10.Check, { 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(import_lucide_react10.Check, { 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,
@@ -2691,6 +2824,7 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  ExpandableRow,
   FilterMenu,
   Input,
   Pagination,