@forgedevstack/grid-table 1.0.2 → 1.0.3

package/dist/index.js

@@ -55,6 +55,7 @@ __export(index_exports, {
   useTableContext: () => useTableContext
 });
 module.exports = __toCommonJS(index_exports);
+var import_styles = require("@forgedevstack/bear/styles.css");
 
 // src/components/GridTable/GridTable.tsx
 var import_react15 = require("react");
@@ -226,6 +227,10 @@ function reducer(state, action) {
       return { ...state, selectedIds: action.payload };
     case "SET_EXPANDED_IDS":
       return { ...state, expandedIds: action.payload };
+    case "SET_EXPANDED_CELL_IDS":
+      return { ...state, expandedCellIds: action.payload };
+    case "SET_AUTO_SIZED_COLUMN_IDS":
+      return { ...state, autoSizedColumnIds: action.payload };
     case "SET_COLUMN_STATES":
       return { ...state, columnStates: action.payload };
     case "SET_DRAGGING_COLUMN":
@@ -263,9 +268,24 @@ function TableProvider({
   sortConfig: _sortConfig,
   enableMultiSort = false,
   getRowId,
-  onStateChange
+  onStateChange,
+  showOverflowTooltip = true,
+  enableCellAutoSizeOnDoubleClick = false,
+  subCellExpandTrigger = "both",
+  expandRowOnDoubleClick = false,
+  globalFilterColumns = void 0
 }) {
   var _a, _b;
+  const tableOptions = (0, import_react.useMemo)(
+    () => ({
+      showOverflowTooltip,
+      enableCellAutoSizeOnDoubleClick,
+      subCellExpandTrigger,
+      expandRowOnDoubleClick,
+      globalFilterColumns
+    }),
+    [showOverflowTooltip, enableCellAutoSizeOnDoubleClick, subCellExpandTrigger, expandRowOnDoubleClick, globalFilterColumns]
+  );
   const initialColumnStates = columns.map((col, index) => ({
     id: col.id,
     visible: !col.hidden,
@@ -294,6 +314,8 @@ function TableProvider({
     totalItems: data.length,
     selectedIds: /* @__PURE__ */ new Set(),
     expandedIds: /* @__PURE__ */ new Set(),
+    expandedCellIds: /* @__PURE__ */ new Set(),
+    autoSizedColumnIds: /* @__PURE__ */ new Set(),
     loading,
     error,
     theme: mergedTheme,
@@ -420,6 +442,25 @@ function TableProvider({
           actions.expandRow(id);
         }
       },
+      toggleCellExpansion: (rowId, columnId) => {
+        const key = `${String(rowId)}-${columnId}`;
+        const next = new Set(state.expandedCellIds);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.add(key);
+        }
+        dispatch({ type: "SET_EXPANDED_CELL_IDS", payload: next });
+      },
+      toggleColumnAutoSize: (columnId) => {
+        const next = new Set(state.autoSizedColumnIds);
+        if (next.has(columnId)) {
+          next.delete(columnId);
+        } else {
+          next.add(columnId);
+        }
+        dispatch({ type: "SET_AUTO_SIZED_COLUMN_IDS", payload: next });
+      },
       reorderColumn: (sourceId, targetId) => {
         const newStates = [...state.columnStates];
         const sourceIndex = newStates.findIndex((c) => c.id === sourceId);
@@ -458,6 +499,8 @@ function TableProvider({
           page: ONE,
           selectedIds: /* @__PURE__ */ new Set(),
           expandedIds: /* @__PURE__ */ new Set(),
+          expandedCellIds: /* @__PURE__ */ new Set(),
+          autoSizedColumnIds: /* @__PURE__ */ new Set(),
           columnStates: initialColumnStates
         }
       })
@@ -468,11 +511,15 @@ function TableProvider({
     let filteredData = [...state.data];
     if (state.globalFilter) {
       const searchLower = state.globalFilter.toLowerCase();
-      filteredData = filteredData.filter(
-        (row) => Object.values(row).some(
-          (val) => String(val).toLowerCase().includes(searchLower)
-        )
-      );
+      const columnIds = tableOptions.globalFilterColumns;
+      filteredData = filteredData.filter((row) => {
+        const colsToSearch = columnIds && columnIds.length > 0 ? state.columns.filter((c) => columnIds.includes(c.id)) : state.columns;
+        return colsToSearch.some((col) => {
+          const accessor = col.accessor;
+          const value = typeof accessor === "function" ? accessor(row) : row[accessor];
+          return String(value != null ? value : "").toLowerCase().includes(searchLower);
+        });
+      });
     }
     state.filters.forEach((filter) => {
       const column = columns.find((c) => c.id === filter.columnId);
@@ -558,10 +605,11 @@ function TableProvider({
       isTablet,
       isDesktop
     };
-  }, [state, columns]);
+  }, [state, columns, tableOptions]);
   const contextValue = {
     state,
     actions,
+    tableOptions,
     computed
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableContext.Provider, { value: contextValue, children });
@@ -1050,6 +1098,7 @@ function useTable() {
 
 // src/components/GridHeader/GridHeader.tsx
 var import_react9 = require("react");
+var import_bear = require("@forgedevstack/bear");
 
 // src/components/FilterPopup/FilterPopup.tsx
 var import_react8 = require("react");
@@ -1265,6 +1314,7 @@ function HeaderCell({
   hasFilter = false,
   isDragging = false,
   isDragOver = false,
+  isColumnAutoSized = false,
   onSort,
   onFilterOpen,
   onResizeStart,
@@ -1309,23 +1359,33 @@ function HeaderCell({
     }
     return classes.join(" ");
   }, [column.align, isSortable, isDragging, isDragOver]);
+  const cellStyle = (0, import_react9.useMemo)(() => {
+    const base = {
+      flexShrink: 0,
+      ...column.sticky && {
+        position: "sticky",
+        [column.sticky]: 0,
+        zIndex: 2,
+        backgroundColor: "var(--gt-bg-secondary, #2b2b2b)"
+      },
+      ...column.headerStyle
+    };
+    if (isColumnAutoSized) {
+      base.width = "auto";
+      base.minWidth = "max-content";
+      base.maxWidth = "none";
+    } else {
+      base.width = typeof columnState.width === "number" ? `${columnState.width}px` : columnState.width;
+      base.minWidth = column.minWidth || MIN_COLUMN_WIDTH;
+      base.maxWidth = column.maxWidth || MAX_COLUMN_WIDTH;
+    }
+    return base;
+  }, [column, columnState.width, isColumnAutoSized]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: `${cellClasses} ${column.headerClassName || ""} ${column.sticky ? `sticky-${column.sticky}` : ""}`,
-      style: {
-        width: columnState.width,
-        minWidth: column.minWidth || MIN_COLUMN_WIDTH,
-        maxWidth: column.maxWidth || MAX_COLUMN_WIDTH,
-        flexShrink: 0,
-        ...column.sticky && {
-          position: "sticky",
-          [column.sticky]: 0,
-          zIndex: 2,
-          backgroundColor: "var(--bg-secondary, #2b2b2b)"
-        },
-        ...column.headerStyle
-      },
+      style: cellStyle,
       role: "columnheader",
       "aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none",
       onClick: handleClick,
@@ -1368,6 +1428,7 @@ function GridHeader({
   enableDragDrop = true,
   enableResize = true,
   enableSelection = false,
+  enableExpansion = false,
   allSelected = false,
   someSelected = false,
   onSelectAll,
@@ -1440,18 +1501,16 @@ function GridHeader({
   }, [sticky]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `${headerClasses} ${className}`, style, role: "row", children: [
     enableSelection && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid-header-select", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "input",
+      import_bear.Checkbox,
       {
-        type: "checkbox",
         checked: allSelected,
-        ref: (el) => {
-          if (el) el.indeterminate = someSelected && !allSelected;
-        },
-        onChange: onSelectAll,
-        className: "grid-header-checkbox",
+        indeterminate: someSelected && !allSelected,
+        onChange: () => onSelectAll == null ? void 0 : onSelectAll(),
+        size: "sm",
         "aria-label": "Select all rows"
       }
     ) }),
+    enableExpansion && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid-header-expand-spacer", "aria-hidden": true }),
     visibleColumns.map((col, index) => {
       const colState = columnStates.find((cs) => cs.id === col.id) || {
         id: col.id,
@@ -1481,6 +1540,7 @@ function GridHeader({
             hasFilter,
             isDragging: dragDrop.draggingColumnId === col.id,
             isDragOver: dragDrop.dragOverColumnId === col.id,
+            isColumnAutoSized: state.autoSizedColumnIds.has(col.id),
             onSort: () => actions.toggleSorting(col.id),
             onFilterOpen: () => handleFilterClick(col.id),
             onResizeStart: handleResizeStart(col.id, colState.width),
@@ -1512,10 +1572,58 @@ var import_react12 = require("react");
 
 // src/components/GridRow/GridRow.tsx
 var import_react11 = require("react");
+var import_bear3 = require("@forgedevstack/bear");
 
 // src/components/GridCell/GridCell.tsx
 var import_react10 = require("react");
+var import_bear2 = require("@forgedevstack/bear");
+
+// src/utils/highlight.utils.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function highlightMatch(text, term) {
+  if (!term.trim()) return text;
+  const parts = text.split(new RegExp(`(${escapeRegex(term)})`, "gi"));
+  return parts.map(
+    (part, i) => part.toLowerCase() === term.toLowerCase() ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("mark", { className: "grid-cell-highlight", children: part }, i) : part
+  );
+}
+function escapeRegex(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// src/utils/generateSampleData.ts
+function generateSampleData(columns, rowCount) {
+  const ids = columns.map((c) => c.id);
+  return Array.from({ length: rowCount }, (_, i) => {
+    const row = {};
+    ids.forEach((key) => {
+      if (key === "id" || key === "idNumber") {
+        row[key] = i + 1;
+      } else if (key === "email") {
+        row[key] = `user${i + 1}@example.com`;
+      } else if (key === "name" || key === "firstName" || key === "title") {
+        row[key] = `Sample ${i + 1}`;
+      } else if (key === "status" || key === "role") {
+        row[key] = ["active", "inactive", "pending"][i % 3];
+      } else if (key === "date" || key === "joinDate" || key === "createdAt") {
+        row[key] = new Date(2020 + i % 4, i % 12, i % 28 + 1).toISOString().slice(0, 10);
+      } else if (key === "salary" || key === "amount" || key === "count") {
+        row[key] = 1e3 * (i + 1) + i % 100;
+      } else if (key === "department") {
+        row[key] = ["Engineering", "Design", "Marketing", "Sales", "HR"][i % 5];
+      } else {
+        row[key] = `Value ${i + 1}`;
+      }
+    });
+    if (!("id" in row) && ids.length > 0) {
+      row.id = i + 1;
+    }
+    return row;
+  });
+}
+
+// src/components/GridCell/GridCell.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ALIGN_CLASSES2 = {
   left: "text-left justify-start",
   center: "text-center justify-center",
@@ -1525,6 +1633,7 @@ function GridCell({
   column,
   row,
   rowIndex,
+  rowId,
   value,
   width,
   align = "left",
@@ -1536,20 +1645,18 @@ function GridCell({
   stickyOffset = 0,
   onClick
 }) {
-  const handleClick = (0, import_react10.useCallback)(
-    (e) => {
-      if (onClick) {
-        e.stopPropagation();
-        onClick({
-          row,
-          rowIndex,
-          columnId: column.id,
-          value
-        });
-      }
-    },
-    [onClick, row, rowIndex, column.id, value]
-  );
+  var _a, _b, _c;
+  const valueRef = (0, import_react10.useRef)(null);
+  const [overflowTitle, setOverflowTitle] = (0, import_react10.useState)(void 0);
+  const { state, actions, tableOptions } = useTableContext();
+  const showOverflowTooltip = ((_a = column.showOverflowTooltip) != null ? _a : tableOptions.showOverflowTooltip) !== false;
+  const hasSubCell = Boolean(column.renderSubCell);
+  const trigger = (_c = (_b = column.subCellExpandTrigger) != null ? _b : tableOptions.subCellExpandTrigger) != null ? _c : "both";
+  const showArrow = hasSubCell && (trigger === "arrow" || trigger === "both");
+  const enableCellAutoSize = tableOptions.enableCellAutoSizeOnDoubleClick === true;
+  const cellKey = `${String(rowId)}-${column.id}`;
+  const isSubCellExpanded = state.expandedCellIds.has(cellKey);
+  const isAutoSized = state.autoSizedColumnIds.has(column.id);
   const formattedValue = (0, import_react10.useMemo)(() => {
     if (column.render) {
       return column.render(value, row, rowIndex);
@@ -1565,9 +1672,53 @@ function GridCell({
     }
     return String(value);
   }, [column, row, rowIndex, value]);
+  (0, import_react10.useEffect)(() => {
+    var _a2;
+    if (!showOverflowTooltip || !valueRef.current) return;
+    const el = valueRef.current;
+    const truncated = el.scrollWidth > el.clientWidth;
+    const raw = (_a2 = el.textContent) != null ? _a2 : "";
+    setOverflowTitle(truncated && raw ? raw : void 0);
+  }, [showOverflowTooltip, formattedValue]);
+  const handleClick = (0, import_react10.useCallback)(
+    (e) => {
+      if (onClick) {
+        e.stopPropagation();
+        onClick({
+          row,
+          rowIndex,
+          columnId: column.id,
+          value
+        });
+      }
+    },
+    [onClick, row, rowIndex, column.id, value]
+  );
+  const handleDoubleClick = (0, import_react10.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      if (hasSubCell && (trigger === "doubleClick" || trigger === "both")) {
+        actions.toggleCellExpansion(rowId, column.id);
+      } else if (enableCellAutoSize) {
+        actions.toggleColumnAutoSize(column.id);
+      }
+    },
+    [hasSubCell, trigger, enableCellAutoSize, actions, rowId, column.id]
+  );
+  const handleExpandClick = (0, import_react10.useCallback)(
+    (e) => {
+      e.stopPropagation();
+      actions.toggleCellExpansion(rowId, column.id);
+    },
+    [actions, rowId, column.id]
+  );
   const cellStyle = (0, import_react10.useMemo)(() => {
     const baseStyle = { ...style };
-    if (width !== void 0) {
+    if (isAutoSized) {
+      baseStyle.width = "auto";
+      baseStyle.minWidth = "max-content";
+      baseStyle.maxWidth = "none";
+    } else if (width !== void 0) {
       baseStyle.width = typeof width === "number" ? `${width}px` : width;
       baseStyle.minWidth = baseStyle.width;
       baseStyle.maxWidth = baseStyle.width;
@@ -1575,7 +1726,7 @@ function GridCell({
     if (sticky) {
       baseStyle.position = "sticky";
       baseStyle.zIndex = 1;
-      baseStyle.backgroundColor = "var(--bg-primary, #1e1e1e)";
+      baseStyle.backgroundColor = "var(--gt-bg-primary, #1e1e1e)";
       if (sticky === "left") {
         baseStyle.left = stickyOffset;
       } else if (sticky === "right") {
@@ -1583,10 +1734,12 @@ function GridCell({
       }
     }
     return baseStyle;
-  }, [style, width, sticky, stickyOffset]);
+  }, [style, width, sticky, stickyOffset, isAutoSized]);
   const alignClass = ALIGN_CLASSES2[align];
   const stickyClass = sticky ? `sticky-${sticky}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  const shouldHighlight = state.globalFilter && typeof formattedValue === "string" && (!tableOptions.globalFilterColumns || tableOptions.globalFilterColumns.length === 0 || tableOptions.globalFilterColumns.includes(column.id));
+  const cellContent = shouldHighlight ? highlightMatch(String(formattedValue), state.globalFilter) : formattedValue;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: `
@@ -1594,25 +1747,55 @@ function GridCell({
         ${alignClass}
         ${stickyClass}
         ${onClick ? "cursor-pointer" : ""}
+        ${hasSubCell ? "grid-cell--has-sub" : ""}
+        ${isAutoSized ? "grid-cell--auto-sized" : ""}
         ${column.cellClassName || ""}
         ${className}
       `.trim(),
       style: { ...cellStyle, ...column.cellStyle },
       role: "cell",
       onClick: onClick ? handleClick : void 0,
+      onDoubleClick: handleDoubleClick,
       children: [
-        showLabel && labelText && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "grid-cell-label", children: [
-          labelText,
-          ":"
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid-cell-inner", children: [
+          showLabel && labelText && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_bear2.Typography, { component: "span", variant: "body2", color: "secondary", className: "grid-cell-label", children: [
+            labelText,
+            ":"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid-cell-value-wrapper", style: { minWidth: 0, overflow: "hidden" }, children: overflowTitle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_bear2.Tooltip, { content: overflowTitle, placement: "top", delay: 200, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "span",
+            {
+              ref: valueRef,
+              className: `grid-cell-value ${isAutoSized ? "" : "grid-cell-value--truncate"}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_bear2.Typography, { component: "span", variant: "body2", className: "grid-cell-value-text", children: cellContent })
+            }
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "span",
+            {
+              ref: valueRef,
+              className: `grid-cell-value ${isAutoSized ? "" : "grid-cell-value--truncate"}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_bear2.Typography, { component: "span", variant: "body2", children: cellContent })
+            }
+          ) }),
+          showArrow && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              className: `grid-cell-expand-trigger ${isSubCellExpanded ? "grid-cell-expand-trigger--expanded" : ""}`,
+              onClick: handleExpandClick,
+              "aria-label": isSubCellExpanded ? "Collapse" : "Expand",
+              "aria-expanded": isSubCellExpanded
+            }
+          )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "grid-cell-value truncate", children: formattedValue })
+        hasSubCell && isSubCellExpanded && column.renderSubCell && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid-cell-subcell", children: column.renderSubCell(row) })
       ]
     }
   );
 }
 
 // src/components/GridRow/GridRow.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function GridRow({
   row,
   rowIndex,
@@ -1652,10 +1835,13 @@ function GridRow({
     },
     [onContextMenu, row, rowIndex, isDisabled]
   );
-  const handleSelectChange = (0, import_react11.useCallback)(() => {
-    if (isDisabled) return;
-    onSelect == null ? void 0 : onSelect(!isSelected);
-  }, [onSelect, isSelected, isDisabled]);
+  const handleSelectChange = (0, import_react11.useCallback)(
+    (selected) => {
+      if (isDisabled) return;
+      onSelect == null ? void 0 : onSelect(selected);
+    },
+    [onSelect, isDisabled]
+  );
   const handleExpandToggle = (0, import_react11.useCallback)(() => {
     if (isDisabled) return;
     onExpand == null ? void 0 : onExpand(!isExpanded);
@@ -1709,8 +1895,8 @@ function GridRow({
     }
     return classes.join(" ");
   }, [isHovered, isSelected, isDisabled, onClick, isMobile]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
         className: `${rowClasses} ${className}`,
@@ -1724,18 +1910,17 @@ function GridRow({
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          enableSelection && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid-row-select", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "input",
+          enableSelection && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "grid-row-select", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_bear3.Checkbox,
             {
-              type: "checkbox",
-              checked: isSelected,
-              onChange: handleSelectChange,
+              checked: isSelected != null ? isSelected : false,
+              onChange: (e) => handleSelectChange(e.target.checked),
               disabled: isDisabled,
-              className: "grid-row-checkbox",
+              size: "sm",
               "aria-label": "Select row"
             }
           ) }),
-          enableExpansion && renderExpansion && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid-row-expand", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          enableExpansion && renderExpansion && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "grid-row-expand", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               onClick: handleExpandToggle,
@@ -1743,7 +1928,7 @@ function GridRow({
               className: "grid-row-expand-button",
               "aria-label": isExpanded ? "Collapse row" : "Expand row",
               "aria-expanded": isExpanded,
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "span",
                 {
                   className: `transform transition-transform duration-200 ${isExpanded ? "rotate-90" : ""}`,
@@ -1775,12 +1960,13 @@ function GridRow({
                 }
               }
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               GridCell,
               {
                 column: col,
                 row,
                 rowIndex,
+                rowId: getRowId(row),
                 value: getCellValue(col),
                 width,
                 align: col.align,
@@ -1797,12 +1983,12 @@ function GridRow({
         ]
       }
     ),
-    isExpanded && renderExpansion && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid-row-expansion", children: renderExpansion(row) })
+    isExpanded && renderExpansion && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "grid-row-expansion", children: renderExpansion(row, getRowId(row)) })
   ] });
 }
 
 // src/components/GridBody/GridBody.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function GridBody({
   data,
   columns,
@@ -1843,7 +2029,7 @@ function GridBody({
   if (data.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `grid-body ${className}`, style, role: "rowgroup", children: data.map((row, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `grid-body ${className}`, style, role: "rowgroup", children: data.map((row, index) => {
     var _a, _b;
     const rowId = getRowId(row);
     const isSelected = selectedIds.has(rowId);
@@ -1851,7 +2037,7 @@ function GridBody({
     const isDisabled = (_a = isRowDisabled == null ? void 0 : isRowDisabled(row)) != null ? _a : false;
     const rowClassName = (_b = getRowClassName == null ? void 0 : getRowClassName(row, index)) != null ? _b : "";
     const rowStyle = getRowStyle == null ? void 0 : getRowStyle(row, index);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       GridRow,
       {
         row,
@@ -1880,178 +2066,8 @@ function GridBody({
   }) });
 }
 
-// src/components/Pagination/Pagination.tsx
-var import_react13 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function Pagination({
-  page,
-  pageSize,
-  totalItems,
-  totalPages,
-  pageSizeOptions = [10, 20, 50, 100],
-  showFirstLast = true,
-  showPageNumbers = true,
-  maxPageButtons = FIVE,
-  className = "",
-  style,
-  onPageChange,
-  onPageSizeChange
-}) {
-  const { state } = useTableContext();
-  const { translations } = state;
-  const canGoPrevious = page > ONE;
-  const canGoNext = page < totalPages;
-  const startItem = (page - ONE) * pageSize + ONE;
-  const endItem = Math.min(page * pageSize, totalItems);
-  const handleFirstPage = (0, import_react13.useCallback)(() => {
-    onPageChange(ONE);
-  }, [onPageChange]);
-  const handlePreviousPage = (0, import_react13.useCallback)(() => {
-    if (canGoPrevious) {
-      onPageChange(page - ONE);
-    }
-  }, [canGoPrevious, page, onPageChange]);
-  const handleNextPage = (0, import_react13.useCallback)(() => {
-    if (canGoNext) {
-      onPageChange(page + ONE);
-    }
-  }, [canGoNext, page, onPageChange]);
-  const handleLastPage = (0, import_react13.useCallback)(() => {
-    onPageChange(totalPages);
-  }, [onPageChange, totalPages]);
-  const handlePageSizeChange = (0, import_react13.useCallback)(
-    (event) => {
-      onPageSizeChange(Number(event.target.value));
-    },
-    [onPageSizeChange]
-  );
-  const pageNumbers = (0, import_react13.useMemo)(() => {
-    if (!showPageNumbers || totalPages <= ONE) return [];
-    const pages = [];
-    const halfMax = Math.floor(maxPageButtons / 2);
-    let start = Math.max(ONE, page - halfMax);
-    let end = Math.min(totalPages, page + halfMax);
-    if (page <= halfMax) {
-      end = Math.min(totalPages, maxPageButtons);
-    }
-    if (page > totalPages - halfMax) {
-      start = Math.max(ONE, totalPages - maxPageButtons + ONE);
-    }
-    if (start > ONE) {
-      pages.push(ONE);
-      if (start > 2) {
-        pages.push("ellipsis");
-      }
-    }
-    for (let i = start; i <= end; i++) {
-      if (!pages.includes(i)) {
-        pages.push(i);
-      }
-    }
-    if (end < totalPages) {
-      if (end < totalPages - ONE) {
-        pages.push("ellipsis");
-      }
-      pages.push(totalPages);
-    }
-    return pages;
-  }, [page, totalPages, showPageNumbers, maxPageButtons]);
-  if (totalItems === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    "div",
-    {
-      className: `grid-pagination ${className}`,
-      style,
-      role: "navigation",
-      "aria-label": "Pagination",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid-pagination-info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid-pagination-range", children: [
-            startItem,
-            "-",
-            endItem,
-            " ",
-            translations.of,
-            " ",
-            totalItems
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid-pagination-size", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor: "page-size", children: [
-              translations.rowsPerPage,
-              ":"
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "select",
-              {
-                id: "page-size",
-                value: pageSize,
-                onChange: handlePageSizeChange,
-                className: "px-2 py-1 text-sm rounded",
-                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: size, children: size }, size))
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid-pagination-controls", children: [
-          showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "button",
-            {
-              onClick: handleFirstPage,
-              disabled: !canGoPrevious,
-              className: "p-2 rounded text-theme-secondary",
-              "aria-label": translations.first,
-              children: "<<"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "button",
-            {
-              onClick: handlePreviousPage,
-              disabled: !canGoPrevious,
-              className: "p-2 rounded text-theme-secondary",
-              "aria-label": translations.previous,
-              children: "<"
-            }
-          ),
-          showPageNumbers && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid-pagination-pages", children: pageNumbers.map(
-            (pageNum, index) => pageNum === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "px-2 text-theme-muted", children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "button",
-              {
-                onClick: () => onPageChange(pageNum),
-                className: `min-w-[32px] h-8 px-2 rounded text-sm ${pageNum === page ? "active" : ""}`,
-                "aria-current": pageNum === page ? "page" : void 0,
-                children: pageNum
-              },
-              pageNum
-            )
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "button",
-            {
-              onClick: handleNextPage,
-              disabled: !canGoNext,
-              className: "p-2 rounded text-theme-secondary",
-              "aria-label": translations.next,
-              children: ">"
-            }
-          ),
-          showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "button",
-            {
-              onClick: handleLastPage,
-              disabled: !canGoNext,
-              className: "p-2 rounded text-theme-secondary",
-              "aria-label": translations.last,
-              children: ">>"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
+// src/components/GridTable/GridTable.tsx
+var import_bear5 = require("@forgedevstack/bear");
 
 // src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -2128,8 +2144,203 @@ function Skeleton({
   ] });
 }
 
-// src/components/EmptyState/EmptyState.tsx
+// src/components/TableStudioPanel/TableStudioPanel.tsx
+var import_react13 = require("react");
+var import_bear4 = require("@forgedevstack/bear");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var DEFAULT_ROW_COUNT = 10;
+function TableStudioPanel({
+  data,
+  columns,
+  propsSnapshot,
+  onDataChange,
+  open = true,
+  onOpenChange
+}) {
+  const [activeTab, setActiveTab] = (0, import_react13.useState)("data");
+  const [generateCount, setGenerateCount] = (0, import_react13.useState)(DEFAULT_ROW_COUNT);
+  const handleGenerate = (0, import_react13.useCallback)(() => {
+    if (!onDataChange) return;
+    const count = Math.min(100, Math.max(1, generateCount));
+    const generated = generateSampleData(columns, count);
+    onDataChange(generated);
+    setActiveTab("data");
+  }, [columns, generateCount, onDataChange]);
+  const panelContent = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          borderBottom: "1px solid var(--gt-border-color, rgba(0,0,0,0.08))",
+          padding: "0.25rem 0",
+          gap: 2
+        },
+        children: ["data", "props", "generate"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveTab(tab),
+            style: {
+              flex: 1,
+              padding: "0.5rem 0.5rem",
+              border: "none",
+              borderRadius: 4,
+              background: activeTab === tab ? "var(--gt-bg-tertiary)" : "transparent",
+              color: "var(--gt-text-primary)",
+              cursor: "pointer",
+              fontWeight: activeTab === tab ? 600 : 400,
+              fontSize: 12,
+              textTransform: "capitalize"
+            },
+            children: tab
+          },
+          tab
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flex: 1, overflow: "auto", padding: "0.75rem" }, children: [
+      activeTab === "data" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_bear4.Typography, { variant: "subtitle2", component: "h3", style: { marginBottom: "0.5rem" }, children: [
+          "Data (",
+          data.length,
+          " rows)"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "pre",
+          {
+            style: {
+              margin: 0,
+              fontSize: 11,
+              fontFamily: "monospace",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              color: "var(--gt-text-primary)"
+            },
+            children: JSON.stringify(data, null, 2)
+          }
+        )
+      ] }),
+      activeTab === "props" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_bear4.Typography, { variant: "subtitle2", component: "h3", style: { marginBottom: "0.5rem" }, children: "Props" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dl", { style: { margin: 0, fontSize: 13, color: "var(--gt-text-primary)" }, children: Object.entries(propsSnapshot).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { marginBottom: "0.5rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dt", { style: { fontWeight: 600, marginBottom: 2 }, children: key }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dd", { style: { margin: 0, color: "var(--gt-text-secondary)" }, children: typeof value === "object" && value !== null ? JSON.stringify(value) : String(value) })
+        ] }, key)) })
+      ] }),
+      activeTab === "generate" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_bear4.Typography, { variant: "subtitle2", component: "h3", style: { marginBottom: "0.5rem" }, children: "Generate sample data" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: { fontSize: 12, color: "var(--gt-text-secondary)", marginBottom: "0.75rem" }, children: "Create rows from column definitions. Uses placeholders for common fields (name, email, id, etc.)." }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: { fontSize: 12, fontWeight: 500 }, children: [
+            "Rows",
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: 100,
+                value: generateCount,
+                onChange: (e) => setGenerateCount(Number(e.target.value) || 1),
+                style: {
+                  display: "block",
+                  marginTop: 4,
+                  width: "100%",
+                  padding: "6px 8px",
+                  borderRadius: 4,
+                  border: "1px solid var(--gt-border-color)",
+                  background: "var(--gt-bg-primary)",
+                  color: "var(--gt-text-primary)"
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleGenerate,
+              disabled: !onDataChange,
+              style: {
+                padding: "8px 12px",
+                borderRadius: 6,
+                border: "none",
+                background: onDataChange ? "var(--gt-accent-primary)" : "var(--gt-bg-tertiary)",
+                color: onDataChange ? "#fff" : "var(--gt-text-muted)",
+                cursor: onDataChange ? "pointer" : "not-allowed",
+                fontWeight: 500,
+                fontSize: 13
+              },
+              children: "Generate data"
+            }
+          ),
+          !onDataChange && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: 11, color: "var(--gt-text-muted)" }, children: "Table must use studio with controllable data to generate." })
+        ] })
+      ] })
+    ] })
+  ] });
+  const width = 320;
+  const isCollapsed = !open;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onOpenChange == null ? void 0 : onOpenChange(!open),
+        className: "grid-table-studio-toggle",
+        style: {
+          position: "fixed",
+          right: open ? width : 0,
+          top: "50%",
+          transform: "translateY(-50%)",
+          zIndex: 10001,
+          width: 24,
+          height: 48,
+          border: "1px solid var(--gt-border-color, rgba(0,0,0,0.08))",
+          borderRight: "none",
+          borderRadius: "8px 0 0 8px",
+          background: "var(--gt-bg-secondary, #f5f5f5)",
+          color: "var(--gt-text-primary)",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 14,
+          boxShadow: " -2px 0 8px rgba(0,0,0,0.08)"
+        },
+        "aria-label": open ? "Close studio panel" : "Open studio panel",
+        children: open ? "\u203A" : "\u2039"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "aside",
+      {
+        className: "grid-table-studio-panel",
+        style: {
+          position: "fixed",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          width: isCollapsed ? 0 : width,
+          minWidth: isCollapsed ? 0 : 280,
+          borderLeft: "1px solid var(--gt-border-color, rgba(0,0,0,0.08))",
+          backgroundColor: "var(--gt-bg-secondary, #f5f5f5)",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          zIndex: 1e4,
+          boxShadow: isCollapsed ? "none" : "-4px 0 12px rgba(0,0,0,0.08)",
+          transition: "width 0.2s ease, box-shadow 0.2s ease"
+        },
+        "aria-label": "Table studio panel",
+        children: !isCollapsed && panelContent
+      }
+    )
+  ] });
+}
+
+// src/components/EmptyState/EmptyState.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function EmptyState({
   title,
   description,
@@ -2142,22 +2353,22 @@ function EmptyState({
   const { translations } = state;
   const displayTitle = title != null ? title : translations.empty;
   const displayDescription = description != null ? description : translations.noResults;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: `grid-empty-state ${className}`,
       style,
       role: "status",
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid-empty-icon", children: icon }),
-        !icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid-empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "grid-empty-icon", children: icon }),
+        !icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "grid-empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "svg",
           {
             className: "icon-lg",
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "path",
               {
                 strokeLinecap: "round",
@@ -2168,9 +2379,9 @@ function EmptyState({
             )
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "grid-empty-title", children: displayTitle }),
-        displayDescription && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "grid-empty-description", children: displayDescription }),
-        action && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid-empty-action", children: action })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "grid-empty-title", children: displayTitle }),
+        displayDescription && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "grid-empty-description", children: displayDescription }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "grid-empty-action", children: action })
       ]
     }
   );
@@ -2178,11 +2389,11 @@ function EmptyState({
 
 // src/components/MobileDrawer/MobileDrawer.tsx
 var import_react14 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function DrawerHeader({ title, onClose }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-header", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "drawer-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "button",
       {
         onClick: onClose,
@@ -2199,15 +2410,15 @@ function FilterContent() {
   const handleClearAll = (0, import_react14.useCallback)(() => {
     actions.clearFilters();
   }, [actions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-filter-content", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-sm text-theme-muted", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "drawer-filter-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-sm text-theme-muted", children: [
         filters.length,
         " ",
         translations.filter,
         "(s) active"
       ] }),
-      filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           onClick: handleClearAll,
@@ -2216,13 +2427,13 @@ function FilterContent() {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-3", children: columns.filter((col) => col.filterable !== false).map((col) => {
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-3", children: columns.filter((col) => col.filterable !== false).map((col) => {
       var _a;
       const existingFilter = filters.find((f) => f.columnId === col.id);
       const headerText = typeof col.header === "string" ? col.header : col.id;
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "filter-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "block text-sm font-medium text-theme-secondary mb-1", children: headerText }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "filter-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "block text-sm font-medium text-theme-secondary mb-1", children: headerText }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "input",
           {
             type: "text",
@@ -2248,15 +2459,15 @@ function SortContent() {
   const handleClearAll = (0, import_react14.useCallback)(() => {
     actions.clearSorting();
   }, [actions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-sort-content", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-sm text-theme-muted", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "drawer-sort-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-sm text-theme-muted", children: [
         sorting.length,
         " ",
         translations.sort,
         "(s) active"
       ] }),
-      sorting.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      sorting.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           onClick: handleClearAll,
@@ -2265,17 +2476,17 @@ function SortContent() {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-2", children: columns.filter((col) => col.sortable !== false).map((col) => {
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-2", children: columns.filter((col) => col.sortable !== false).map((col) => {
       const sortItem = sorting.find((s) => s.columnId === col.id);
       const headerText = typeof col.header === "string" ? col.header : col.id;
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "button",
         {
           onClick: () => actions.toggleSorting(col.id),
           className: `w-full px-3 py-2 rounded ${sortItem ? "active" : ""}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm text-theme-primary", children: headerText }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs text-theme-muted", children: (sortItem == null ? void 0 : sortItem.direction) === "asc" ? translations.sortAsc : (sortItem == null ? void 0 : sortItem.direction) === "desc" ? translations.sortDesc : "-" })
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm text-theme-primary", children: headerText }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs text-theme-muted", children: (sortItem == null ? void 0 : sortItem.direction) === "asc" ? translations.sortAsc : (sortItem == null ? void 0 : sortItem.direction) === "desc" ? translations.sortDesc : "-" })
           ]
         },
         col.id
@@ -2286,10 +2497,10 @@ function SortContent() {
 function ColumnsContent() {
   const { state, actions } = useTableContext();
   const { translations, columns, columnStates } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-columns-content", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm text-theme-muted", children: translations.showColumns }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "drawer-columns-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm text-theme-muted", children: translations.showColumns }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           onClick: actions.resetColumns,
@@ -2298,16 +2509,16 @@ function ColumnsContent() {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-2", children: columns.map((col) => {
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-2", children: columns.map((col) => {
       const colState = columnStates.find((cs) => cs.id === col.id);
       const isVisible = (colState == null ? void 0 : colState.visible) !== false;
       const headerText = typeof col.header === "string" ? col.header : col.id;
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "label",
         {
           className: "px-3 py-2 rounded cursor-pointer",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "input",
               {
                 type: "checkbox",
@@ -2316,7 +2527,7 @@ function ColumnsContent() {
                 className: "w-4 h-4 rounded"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm text-theme-primary", children: headerText })
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm text-theme-primary", children: headerText })
           ]
         },
         col.id
@@ -2358,8 +2569,8 @@ function MobileDrawer({
   if (!isOpen || !content) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `mobile-drawer-container ${className}`, style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `mobile-drawer-container ${className}`, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       {
         className: "mobile-drawer-overlay",
@@ -2371,7 +2582,7 @@ function MobileDrawer({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         className: "mobile-drawer",
@@ -2382,11 +2593,11 @@ function MobileDrawer({
         "aria-modal": "true",
         "aria-labelledby": "drawer-title",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DrawerHeader, { title: DRAWER_TITLES[content], onClose }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-content", children: [
-            content === "filter" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FilterContent, {}),
-            content === "sort" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SortContent, {}),
-            content === "columns" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColumnsContent, {})
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DrawerHeader, { title: DRAWER_TITLES[content], onClose }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "drawer-content", children: [
+            content === "filter" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FilterContent, {}),
+            content === "sort" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SortContent, {}),
+            content === "columns" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColumnsContent, {})
           ] })
         ]
       }
@@ -2395,7 +2606,7 @@ function MobileDrawer({
 }
 
 // src/components/GridTable/GridTable.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function GridTableContent({
   data,
   columns,
@@ -2433,10 +2644,18 @@ function GridTableContent({
   renderHeader,
   renderFooter,
   className = "",
-  style
+  style,
+  showOverflowTooltip,
+  enableCellAutoSizeOnDoubleClick,
+  subCellExpandTrigger,
+  expandRowOnDoubleClick,
+  themeMode,
+  paginationConfig
 }) {
+  var _a, _b;
   const { state, actions, computed } = useTableContext();
   const { shouldShowMobileView, breakpointValue } = useBreakpoint();
+  const themeClass = themeMode === "dark" ? "dark" : themeMode === "light" ? "light" : void 0;
   const getRowIdFn = (0, import_react15.useCallback)(
     (row) => {
       if (getRowId) return getRowId(row);
@@ -2465,6 +2684,22 @@ function GridTableContent({
     },
     [actions]
   );
+  const handleRowDoubleClick = (0, import_react15.useCallback)(
+    (row, index) => {
+      if (expandRowOnDoubleClick) {
+        actions.toggleRowExpansion(getRowIdFn(row));
+      }
+      onRowDoubleClick == null ? void 0 : onRowDoubleClick(row, index);
+    },
+    [expandRowOnDoubleClick, actions, getRowIdFn, onRowDoubleClick]
+  );
+  const handleSelectAll = (0, import_react15.useCallback)(() => {
+    if (computed.allSelected) {
+      actions.deselectAll();
+    } else {
+      actions.selectAll();
+    }
+  }, [computed.allSelected, actions]);
   const handleFilterOpen = (0, import_react15.useCallback)(
     (columnId) => {
       if (shouldShowMobileView) {
@@ -2494,14 +2729,14 @@ function GridTableContent({
   if (error) {
     const errorMessage = typeof error === "string" ? error : error.message;
     if (errorContent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `grid-table-error ${classNames.root || ""} ${className}`, style: containerStyle, children: typeof errorContent === "function" ? errorContent(error) : errorContent });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `grid-table-error ${classNames.root || ""} ${className}`, style: containerStyle, children: typeof errorContent === "function" ? errorContent(error) : errorContent });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `grid-table-error ${classNames.root || ""} ${className}`, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `grid-table-error ${classNames.root || ""} ${className}`, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       EmptyState,
       {
         title: state.translations.errorLoading,
         description: errorMessage,
-        action: onRetry && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        action: onRetry && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
             onClick: onRetry,
@@ -2514,9 +2749,9 @@ function GridTableContent({
   }
   if (loading) {
     if (loadingContent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `grid-table-loading ${classNames.root || ""} ${className}`, style: containerStyle, children: loadingContent });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `grid-table-loading ${classNames.root || ""} ${className}`, style: containerStyle, children: loadingContent });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `grid-table-loading ${classNames.root || ""} ${className}`, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `grid-table-loading ${classNames.root || ""} ${className}`, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Skeleton,
       {
         rows: 5,
@@ -2530,17 +2765,17 @@ function GridTableContent({
     ) });
   }
   const isEmpty = computed.paginatedData.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  const tableContent = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       className: `grid-table rounded-lg border overflow-hidden ${classNames.root || ""} ${className}`,
       style: containerStyle,
       role: "table",
       children: [
-        renderHeader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "grid-table-custom-header", children: renderHeader() }),
-        showGlobalFilter && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "grid-table-toolbar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "toolbar-search-wrapper", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        renderHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid-table-custom-header", children: renderHeader() }),
+        showGlobalFilter && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid-table-toolbar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "toolbar-search-wrapper", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "svg",
               {
                 className: "search-icon",
@@ -2548,10 +2783,10 @@ function GridTableContent({
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
                 strokeWidth: 2,
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "input",
               {
                 type: "text",
@@ -2561,24 +2796,24 @@ function GridTableContent({
                 className: "w-full pl-10 pr-3 py-2 text-sm rounded"
               }
             ),
-            state.globalFilter && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            state.globalFilter && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {
                 onClick: () => actions.setGlobalFilter(""),
                 className: "clear-button",
                 "aria-label": "Clear search",
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
-          state.filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          state.filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "button",
             {
               onClick: () => actions.clearFilters(),
               className: "filter-badge",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
                   state.filters.length,
                   " filter",
                   state.filters.length > 1 ? "s" : ""
@@ -2586,38 +2821,38 @@ function GridTableContent({
               ]
             }
           ),
-          shouldShowMobileView && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "toolbar-actions", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          shouldShowMobileView && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "toolbar-actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {
                 onClick: () => actions.openMobileDrawer("filter"),
                 className: "toolbar-action-button",
                 "aria-label": state.translations.filter,
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" }) })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {
                 onClick: () => actions.openMobileDrawer("sort"),
                 className: "toolbar-action-button",
                 "aria-label": state.translations.sort,
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "button",
               {
                 onClick: () => actions.openMobileDrawer("columns"),
                 className: "toolbar-action-button",
                 "aria-label": state.translations.columns,
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" }) })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "grid-table-container overflow-auto", children: [
-          !shouldShowMobileView && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid-table-container overflow-auto", children: [
+          !shouldShowMobileView && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             GridHeader,
             {
               columns,
@@ -2630,24 +2865,25 @@ function GridTableContent({
               enableDragDrop,
               enableResize: enableColumnResize,
               enableSelection: enableRowSelection,
+              enableExpansion: enableRowExpansion,
               allSelected: computed.allSelected,
               someSelected: computed.someSelected,
-              onSelectAll: actions.selectAll,
+              onSelectAll: handleSelectAll,
               onFilterOpen: handleFilterOpen,
               getSortDirection: (colId) => {
-                var _a;
+                var _a2;
                 const sort = state.sorting.find((s) => s.columnId === colId);
-                return (_a = sort == null ? void 0 : sort.direction) != null ? _a : null;
+                return (_a2 = sort == null ? void 0 : sort.direction) != null ? _a2 : null;
               }
             }
           ),
-          isEmpty ? emptyContent || /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          isEmpty ? emptyContent || /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             EmptyState,
             {
               className: classNames.empty,
               style: styles.empty
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             GridBody,
             {
               data: computed.paginatedData,
@@ -2662,7 +2898,7 @@ function GridTableContent({
               selectedIds: state.selectedIds,
               expandedIds: state.expandedIds,
               onRowClick,
-              onRowDoubleClick,
+              onRowDoubleClick: handleRowDoubleClick,
               onCellClick,
               onRowSelect: handleRowSelect,
               onRowExpand: handleRowExpand,
@@ -2674,27 +2910,50 @@ function GridTableContent({
             }
           )
         ] }),
-        showPagination && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          Pagination,
-          {
-            page: state.page,
-            pageSize: state.pageSize,
-            totalItems: computed.sortedData.length,
-            totalPages: computed.totalPages,
-            className: classNames.pagination,
-            style: styles.pagination,
-            onPageChange: (page) => {
-              actions.setPage(page);
-              onPageChange == null ? void 0 : onPageChange(page, state.pageSize);
-            },
-            onPageSizeChange: (pageSize) => {
-              actions.setPageSize(pageSize);
-              onPageChange == null ? void 0 : onPageChange(1, pageSize);
+        showPagination && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `grid-pagination ${(_a = classNames.pagination) != null ? _a : ""}`, style: styles.pagination, role: "navigation", "aria-label": "Pagination", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid-pagination-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_bear5.Typography, { component: "span", variant: "body2", color: "secondary", children: [
+              (state.page - 1) * state.pageSize + 1,
+              "-",
+              Math.min(state.page * state.pageSize, computed.sortedData.length),
+              " ",
+              state.translations.of,
+              " ",
+              computed.sortedData.length
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_bear5.Typography, { component: "span", variant: "caption", color: "secondary", className: "bear-sr-only", children: state.translations.rowsPerPage }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              import_bear5.Select,
+              {
+                value: String(state.pageSize),
+                onChange: (value) => {
+                  const pageSize = Number(value);
+                  actions.setPageSize(pageSize);
+                  onPageChange == null ? void 0 : onPageChange(1, pageSize);
+                },
+                options: ((_b = paginationConfig == null ? void 0 : paginationConfig.pageSizeOptions) != null ? _b : [10, 20, 50, 100]).map((size) => ({ value: String(size), label: String(size) })),
+                size: "sm"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid-pagination-controls", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_bear5.Pagination,
+            {
+              count: Math.max(1, computed.totalPages),
+              page: state.page,
+              onChange: (page) => {
+                actions.setPage(page);
+                onPageChange == null ? void 0 : onPageChange(page, state.pageSize);
+              },
+              showFirstLast: true,
+              showPrevNext: true,
+              size: "sm",
+              variant: "outlined"
             }
-          }
-        ),
-        renderFooter && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "grid-table-custom-footer", children: renderFooter() }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ) })
+        ] }),
+        renderFooter && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid-table-custom-footer", children: renderFooter() }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           MobileDrawer,
           {
             isOpen: state.showMobileDrawer,
@@ -2707,6 +2966,10 @@ function GridTableContent({
       ]
     }
   );
+  if (themeClass) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: themeClass, children: tableContent });
+  }
+  return tableContent;
 }
 function GridTable({
   data,
@@ -2721,12 +2984,26 @@ function GridTable({
   sortConfig,
   enableMultiSelect = false,
   getRowId,
+  showOverflowTooltip,
+  enableCellAutoSizeOnDoubleClick,
+  subCellExpandTrigger,
+  expandRowOnDoubleClick,
+  themeMode,
+  themeOverride,
+  studio = false,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  var _a, _b;
+  const [studioData, setStudioData] = (0, import_react15.useState)(data);
+  const [studioOpen, setStudioOpen] = (0, import_react15.useState)(true);
+  (0, import_react15.useEffect)(() => {
+    if (studio) setStudioData(data);
+  }, [data, studio]);
+  const effectiveData = studio ? studioData : data;
+  const tableContent = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     TableProvider,
     {
-      data,
+      data: effectiveData,
       columns,
       loading,
       error,
@@ -2739,19 +3016,223 @@ function GridTable({
       enableMultiSort: sortConfig == null ? void 0 : sortConfig.multiSort,
       enableMultiSelect,
       getRowId,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      showOverflowTooltip,
+      enableCellAutoSizeOnDoubleClick,
+      subCellExpandTrigger,
+      expandRowOnDoubleClick,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         GridTableContent,
         {
-          data,
+          data: effectiveData,
           columns,
           loading,
           error,
           getRowId,
+          themeMode,
+          paginationConfig,
           ...props
         }
       )
     }
   );
+  const withTheme = themeOverride && Object.keys(themeOverride).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_bear5.BearProvider, { theme: themeOverride, defaultMode: themeMode === "dark" ? "dark" : "light", children: tableContent }) : tableContent;
+  if (studio) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid-table-studio-main", style: { width: "100%" }, children: withTheme }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        TableStudioPanel,
+        {
+          data: studioData,
+          columns,
+          propsSnapshot: {
+            themeMode,
+            themeOverride,
+            showPagination: (_a = props.showPagination) != null ? _a : true,
+            showGlobalFilter: (_b = props.showGlobalFilter) != null ? _b : true,
+            enableRowSelection: props.enableRowSelection,
+            enableRowExpansion: props.enableRowExpansion
+          },
+          onDataChange: setStudioData,
+          open: studioOpen,
+          onOpenChange: setStudioOpen
+        }
+      )
+    ] });
+  }
+  return withTheme;
+}
+
+// src/components/Pagination/Pagination.tsx
+var import_react16 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Pagination({
+  page,
+  pageSize,
+  totalItems,
+  totalPages,
+  pageSizeOptions = [10, 20, 50, 100],
+  showFirstLast = true,
+  showPageNumbers = true,
+  maxPageButtons = FIVE,
+  className = "",
+  style,
+  onPageChange,
+  onPageSizeChange
+}) {
+  const { state } = useTableContext();
+  const { translations } = state;
+  const canGoPrevious = page > ONE;
+  const canGoNext = page < totalPages;
+  const startItem = (page - ONE) * pageSize + ONE;
+  const endItem = Math.min(page * pageSize, totalItems);
+  const handleFirstPage = (0, import_react16.useCallback)(() => {
+    onPageChange(ONE);
+  }, [onPageChange]);
+  const handlePreviousPage = (0, import_react16.useCallback)(() => {
+    if (canGoPrevious) {
+      onPageChange(page - ONE);
+    }
+  }, [canGoPrevious, page, onPageChange]);
+  const handleNextPage = (0, import_react16.useCallback)(() => {
+    if (canGoNext) {
+      onPageChange(page + ONE);
+    }
+  }, [canGoNext, page, onPageChange]);
+  const handleLastPage = (0, import_react16.useCallback)(() => {
+    onPageChange(totalPages);
+  }, [onPageChange, totalPages]);
+  const handlePageSizeChange = (0, import_react16.useCallback)(
+    (event) => {
+      onPageSizeChange(Number(event.target.value));
+    },
+    [onPageSizeChange]
+  );
+  const pageNumbers = (0, import_react16.useMemo)(() => {
+    if (!showPageNumbers || totalPages <= ONE) return [];
+    const pages = [];
+    const halfMax = Math.floor(maxPageButtons / 2);
+    let start = Math.max(ONE, page - halfMax);
+    let end = Math.min(totalPages, page + halfMax);
+    if (page <= halfMax) {
+      end = Math.min(totalPages, maxPageButtons);
+    }
+    if (page > totalPages - halfMax) {
+      start = Math.max(ONE, totalPages - maxPageButtons + ONE);
+    }
+    if (start > ONE) {
+      pages.push(ONE);
+      if (start > 2) {
+        pages.push("ellipsis");
+      }
+    }
+    for (let i = start; i <= end; i++) {
+      if (!pages.includes(i)) {
+        pages.push(i);
+      }
+    }
+    if (end < totalPages) {
+      if (end < totalPages - ONE) {
+        pages.push("ellipsis");
+      }
+      pages.push(totalPages);
+    }
+    return pages;
+  }, [page, totalPages, showPageNumbers, maxPageButtons]);
+  if (totalItems === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: `grid-pagination ${className}`,
+      style,
+      role: "navigation",
+      "aria-label": "Pagination",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid-pagination-info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid-pagination-range", children: [
+            startItem,
+            "-",
+            endItem,
+            " ",
+            translations.of,
+            " ",
+            totalItems
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid-pagination-size", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { htmlFor: "page-size", children: [
+              translations.rowsPerPage,
+              ":"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "select",
+              {
+                id: "page-size",
+                value: pageSize,
+                onChange: handlePageSizeChange,
+                className: "px-2 py-1 text-sm rounded",
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: size, children: size }, size))
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid-pagination-controls", children: [
+          showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              onClick: handleFirstPage,
+              disabled: !canGoPrevious,
+              className: "p-2 rounded text-theme-secondary",
+              "aria-label": translations.first,
+              children: "<<"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              onClick: handlePreviousPage,
+              disabled: !canGoPrevious,
+              className: "p-2 rounded text-theme-secondary",
+              "aria-label": translations.previous,
+              children: "<"
+            }
+          ),
+          showPageNumbers && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "grid-pagination-pages", children: pageNumbers.map(
+            (pageNum, index) => pageNum === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "px-2 text-theme-muted", children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                onClick: () => onPageChange(pageNum),
+                className: `min-w-[32px] h-8 px-2 rounded text-sm ${pageNum === page ? "active" : ""}`,
+                "aria-current": pageNum === page ? "page" : void 0,
+                children: pageNum
+              },
+              pageNum
+            )
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              onClick: handleNextPage,
+              disabled: !canGoNext,
+              className: "p-2 rounded text-theme-secondary",
+              "aria-label": translations.next,
+              children: ">"
+            }
+          ),
+          showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              onClick: handleLastPage,
+              disabled: !canGoNext,
+              className: "p-2 rounded text-theme-secondary",
+              "aria-label": translations.last,
+              children: ">>"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {