@forgedevstack/grid-table 1.0.2 → 1.0.3

package/dist/index.mjs

@@ -1,5 +1,8 @@
+// src/index.ts
+import "@forgedevstack/bear/styles.css";
+
 // src/components/GridTable/GridTable.tsx
-import { useMemo as useMemo12, useCallback as useCallback13 } from "react";
+import { useMemo as useMemo11, useCallback as useCallback13, useState as useState8, useEffect as useEffect6 } from "react";
 
 // src/context/TableContext.tsx
 import {
@@ -175,6 +178,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":
@@ -212,9 +219,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 = useMemo(
+    () => ({
+      showOverflowTooltip,
+      enableCellAutoSizeOnDoubleClick,
+      subCellExpandTrigger,
+      expandRowOnDoubleClick,
+      globalFilterColumns
+    }),
+    [showOverflowTooltip, enableCellAutoSizeOnDoubleClick, subCellExpandTrigger, expandRowOnDoubleClick, globalFilterColumns]
+  );
   const initialColumnStates = columns.map((col, index) => ({
     id: col.id,
     visible: !col.hidden,
@@ -243,6 +265,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,
@@ -369,6 +393,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);
@@ -407,6 +450,8 @@ function TableProvider({
           page: ONE,
           selectedIds: /* @__PURE__ */ new Set(),
           expandedIds: /* @__PURE__ */ new Set(),
+          expandedCellIds: /* @__PURE__ */ new Set(),
+          autoSizedColumnIds: /* @__PURE__ */ new Set(),
           columnStates: initialColumnStates
         }
       })
@@ -417,11 +462,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);
@@ -507,10 +556,11 @@ function TableProvider({
       isTablet,
       isDesktop
     };
-  }, [state, columns]);
+  }, [state, columns, tableOptions]);
   const contextValue = {
     state,
     actions,
+    tableOptions,
     computed
   };
   return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children });
@@ -999,6 +1049,7 @@ function useTable() {
 
 // src/components/GridHeader/GridHeader.tsx
 import { useMemo as useMemo8, useCallback as useCallback7, useState as useState4, useRef as useRef3 } from "react";
+import { Checkbox } from "@forgedevstack/bear";
 
 // src/components/FilterPopup/FilterPopup.tsx
 import { useState as useState3, useCallback as useCallback6, useEffect as useEffect3, useRef as useRef2 } from "react";
@@ -1214,6 +1265,7 @@ function HeaderCell({
   hasFilter = false,
   isDragging = false,
   isDragOver = false,
+  isColumnAutoSized = false,
   onSort,
   onFilterOpen,
   onResizeStart,
@@ -1258,23 +1310,33 @@ function HeaderCell({
     }
     return classes.join(" ");
   }, [column.align, isSortable, isDragging, isDragOver]);
+  const cellStyle = useMemo8(() => {
+    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__ */ jsxs2(
     "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,
@@ -1317,6 +1379,7 @@ function GridHeader({
   enableDragDrop = true,
   enableResize = true,
   enableSelection = false,
+  enableExpansion = false,
   allSelected = false,
   someSelected = false,
   onSelectAll,
@@ -1389,18 +1452,16 @@ function GridHeader({
   }, [sticky]);
   return /* @__PURE__ */ jsxs2("div", { className: `${headerClasses} ${className}`, style, role: "row", children: [
     enableSelection && /* @__PURE__ */ jsx3("div", { className: "grid-header-select", children: /* @__PURE__ */ jsx3(
-      "input",
+      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__ */ jsx3("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,
@@ -1430,6 +1491,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),
@@ -1460,11 +1522,59 @@ function GridHeader({
 import { useCallback as useCallback10 } from "react";
 
 // src/components/GridRow/GridRow.tsx
-import { useCallback as useCallback9, useMemo as useMemo10, useState as useState5 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo10, useState as useState6 } from "react";
+import { Checkbox as Checkbox2 } from "@forgedevstack/bear";
+
+// src/components/GridCell/GridCell.tsx
+import { useMemo as useMemo9, useCallback as useCallback8, useRef as useRef4, useEffect as useEffect4, useState as useState5 } from "react";
+import { Tooltip, Typography } from "@forgedevstack/bear";
+
+// src/utils/highlight.utils.tsx
+import { jsx as jsx4 } from "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__ */ jsx4("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
-import { useMemo as useMemo9, useCallback as useCallback8 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var ALIGN_CLASSES2 = {
   left: "text-left justify-start",
   center: "text-center justify-center",
@@ -1474,6 +1584,7 @@ function GridCell({
   column,
   row,
   rowIndex,
+  rowId,
   value,
   width,
   align = "left",
@@ -1485,20 +1596,18 @@ function GridCell({
   stickyOffset = 0,
   onClick
 }) {
-  const handleClick = useCallback8(
-    (e) => {
-      if (onClick) {
-        e.stopPropagation();
-        onClick({
-          row,
-          rowIndex,
-          columnId: column.id,
-          value
-        });
-      }
-    },
-    [onClick, row, rowIndex, column.id, value]
-  );
+  var _a, _b, _c;
+  const valueRef = useRef4(null);
+  const [overflowTitle, setOverflowTitle] = useState5(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 = useMemo9(() => {
     if (column.render) {
       return column.render(value, row, rowIndex);
@@ -1514,9 +1623,53 @@ function GridCell({
     }
     return String(value);
   }, [column, row, rowIndex, value]);
+  useEffect4(() => {
+    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 = useCallback8(
+    (e) => {
+      if (onClick) {
+        e.stopPropagation();
+        onClick({
+          row,
+          rowIndex,
+          columnId: column.id,
+          value
+        });
+      }
+    },
+    [onClick, row, rowIndex, column.id, value]
+  );
+  const handleDoubleClick = useCallback8(
+    (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 = useCallback8(
+    (e) => {
+      e.stopPropagation();
+      actions.toggleCellExpansion(rowId, column.id);
+    },
+    [actions, rowId, column.id]
+  );
   const cellStyle = useMemo9(() => {
     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;
@@ -1524,7 +1677,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") {
@@ -1532,9 +1685,11 @@ function GridCell({
       }
     }
     return baseStyle;
-  }, [style, width, sticky, stickyOffset]);
+  }, [style, width, sticky, stickyOffset, isAutoSized]);
   const alignClass = ALIGN_CLASSES2[align];
   const stickyClass = sticky ? `sticky-${sticky}` : "";
+  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__ */ jsxs3(
     "div",
     {
@@ -1543,25 +1698,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__ */ jsxs3("span", { className: "grid-cell-label", children: [
-          labelText,
-          ":"
+        /* @__PURE__ */ jsxs3("div", { className: "grid-cell-inner", children: [
+          showLabel && labelText && /* @__PURE__ */ jsxs3(Typography, { component: "span", variant: "body2", color: "secondary", className: "grid-cell-label", children: [
+            labelText,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: "grid-cell-value-wrapper", style: { minWidth: 0, overflow: "hidden" }, children: overflowTitle ? /* @__PURE__ */ jsx5(Tooltip, { content: overflowTitle, placement: "top", delay: 200, children: /* @__PURE__ */ jsx5(
+            "span",
+            {
+              ref: valueRef,
+              className: `grid-cell-value ${isAutoSized ? "" : "grid-cell-value--truncate"}`,
+              children: /* @__PURE__ */ jsx5(Typography, { component: "span", variant: "body2", className: "grid-cell-value-text", children: cellContent })
+            }
+          ) }) : /* @__PURE__ */ jsx5(
+            "span",
+            {
+              ref: valueRef,
+              className: `grid-cell-value ${isAutoSized ? "" : "grid-cell-value--truncate"}`,
+              children: /* @__PURE__ */ jsx5(Typography, { component: "span", variant: "body2", children: cellContent })
+            }
+          ) }),
+          showArrow && /* @__PURE__ */ jsx5(
+            "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__ */ jsx4("span", { className: "grid-cell-value truncate", children: formattedValue })
+        hasSubCell && isSubCellExpanded && column.renderSubCell && /* @__PURE__ */ jsx5("div", { className: "grid-cell-subcell", children: column.renderSubCell(row) })
       ]
     }
   );
 }
 
 // src/components/GridRow/GridRow.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function GridRow({
   row,
   rowIndex,
@@ -1585,7 +1770,7 @@ function GridRow({
   renderExpansion,
   getRowId
 }) {
-  const [isHovered, setIsHovered] = useState5(false);
+  const [isHovered, setIsHovered] = useState6(false);
   const handleClick = useCallback9(() => {
     if (isDisabled) return;
     onClick == null ? void 0 : onClick(row, rowIndex);
@@ -1601,10 +1786,13 @@ function GridRow({
     },
     [onContextMenu, row, rowIndex, isDisabled]
   );
-  const handleSelectChange = useCallback9(() => {
-    if (isDisabled) return;
-    onSelect == null ? void 0 : onSelect(!isSelected);
-  }, [onSelect, isSelected, isDisabled]);
+  const handleSelectChange = useCallback9(
+    (selected) => {
+      if (isDisabled) return;
+      onSelect == null ? void 0 : onSelect(selected);
+    },
+    [onSelect, isDisabled]
+  );
   const handleExpandToggle = useCallback9(() => {
     if (isDisabled) return;
     onExpand == null ? void 0 : onExpand(!isExpanded);
@@ -1673,18 +1861,17 @@ function GridRow({
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          enableSelection && /* @__PURE__ */ jsx5("div", { className: "grid-row-select", children: /* @__PURE__ */ jsx5(
-            "input",
+          enableSelection && /* @__PURE__ */ jsx6("div", { className: "grid-row-select", children: /* @__PURE__ */ jsx6(
+            Checkbox2,
             {
-              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__ */ jsx5("div", { className: "grid-row-expand", children: /* @__PURE__ */ jsx5(
+          enableExpansion && renderExpansion && /* @__PURE__ */ jsx6("div", { className: "grid-row-expand", children: /* @__PURE__ */ jsx6(
             "button",
             {
               onClick: handleExpandToggle,
@@ -1692,7 +1879,7 @@ function GridRow({
               className: "grid-row-expand-button",
               "aria-label": isExpanded ? "Collapse row" : "Expand row",
               "aria-expanded": isExpanded,
-              children: /* @__PURE__ */ jsx5(
+              children: /* @__PURE__ */ jsx6(
                 "span",
                 {
                   className: `transform transition-transform duration-200 ${isExpanded ? "rotate-90" : ""}`,
@@ -1724,12 +1911,13 @@ function GridRow({
                 }
               }
             }
-            return /* @__PURE__ */ jsx5(
+            return /* @__PURE__ */ jsx6(
               GridCell,
               {
                 column: col,
                 row,
                 rowIndex,
+                rowId: getRowId(row),
                 value: getCellValue(col),
                 width,
                 align: col.align,
@@ -1746,12 +1934,12 @@ function GridRow({
         ]
       }
     ),
-    isExpanded && renderExpansion && /* @__PURE__ */ jsx5("div", { className: "grid-row-expansion", children: renderExpansion(row) })
+    isExpanded && renderExpansion && /* @__PURE__ */ jsx6("div", { className: "grid-row-expansion", children: renderExpansion(row, getRowId(row)) })
   ] });
 }
 
 // src/components/GridBody/GridBody.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function GridBody({
   data,
   columns,
@@ -1792,7 +1980,7 @@ function GridBody({
   if (data.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx6("div", { className: `grid-body ${className}`, style, role: "rowgroup", children: data.map((row, index) => {
+  return /* @__PURE__ */ jsx7("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);
@@ -1800,7 +1988,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__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       GridRow,
       {
         row,
@@ -1829,181 +2017,11 @@ function GridBody({
   }) });
 }
 
-// src/components/Pagination/Pagination.tsx
-import { useMemo as useMemo11, useCallback as useCallback11 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "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 = useCallback11(() => {
-    onPageChange(ONE);
-  }, [onPageChange]);
-  const handlePreviousPage = useCallback11(() => {
-    if (canGoPrevious) {
-      onPageChange(page - ONE);
-    }
-  }, [canGoPrevious, page, onPageChange]);
-  const handleNextPage = useCallback11(() => {
-    if (canGoNext) {
-      onPageChange(page + ONE);
-    }
-  }, [canGoNext, page, onPageChange]);
-  const handleLastPage = useCallback11(() => {
-    onPageChange(totalPages);
-  }, [onPageChange, totalPages]);
-  const handlePageSizeChange = useCallback11(
-    (event) => {
-      onPageSizeChange(Number(event.target.value));
-    },
-    [onPageSizeChange]
-  );
-  const pageNumbers = useMemo11(() => {
-    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__ */ jsxs5(
-    "div",
-    {
-      className: `grid-pagination ${className}`,
-      style,
-      role: "navigation",
-      "aria-label": "Pagination",
-      children: [
-        /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-info", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-range", children: [
-            startItem,
-            "-",
-            endItem,
-            " ",
-            translations.of,
-            " ",
-            totalItems
-          ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-size", children: [
-            /* @__PURE__ */ jsxs5("label", { htmlFor: "page-size", children: [
-              translations.rowsPerPage,
-              ":"
-            ] }),
-            /* @__PURE__ */ jsx7(
-              "select",
-              {
-                id: "page-size",
-                value: pageSize,
-                onChange: handlePageSizeChange,
-                className: "px-2 py-1 text-sm rounded",
-                children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx7("option", { value: size, children: size }, size))
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-controls", children: [
-          showFirstLast && /* @__PURE__ */ jsx7(
-            "button",
-            {
-              onClick: handleFirstPage,
-              disabled: !canGoPrevious,
-              className: "p-2 rounded text-theme-secondary",
-              "aria-label": translations.first,
-              children: "<<"
-            }
-          ),
-          /* @__PURE__ */ jsx7(
-            "button",
-            {
-              onClick: handlePreviousPage,
-              disabled: !canGoPrevious,
-              className: "p-2 rounded text-theme-secondary",
-              "aria-label": translations.previous,
-              children: "<"
-            }
-          ),
-          showPageNumbers && /* @__PURE__ */ jsx7("div", { className: "grid-pagination-pages", children: pageNumbers.map(
-            (pageNum, index) => pageNum === "ellipsis" ? /* @__PURE__ */ jsx7("span", { className: "px-2 text-theme-muted", children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx7(
-              "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__ */ jsx7(
-            "button",
-            {
-              onClick: handleNextPage,
-              disabled: !canGoNext,
-              className: "p-2 rounded text-theme-secondary",
-              "aria-label": translations.next,
-              children: ">"
-            }
-          ),
-          showFirstLast && /* @__PURE__ */ jsx7(
-            "button",
-            {
-              onClick: handleLastPage,
-              disabled: !canGoNext,
-              className: "p-2 rounded text-theme-secondary",
-              "aria-label": translations.last,
-              children: ">>"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
+// src/components/GridTable/GridTable.tsx
+import { Pagination as BearPagination, Typography as Typography3, Select, BearProvider } from "@forgedevstack/bear";
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function SkeletonCell({ width = DEFAULT_COLUMN_WIDTH, height = 16, animate = true }) {
   const widthStyle = typeof width === "number" ? `${width}px` : width;
   return /* @__PURE__ */ jsx8(
@@ -2045,7 +2063,7 @@ function Skeleton({
   showHeader = true,
   animate = true
 }) {
-  return /* @__PURE__ */ jsxs6("div", { className: `grid-skeleton ${className}`, style, role: "status", "aria-label": "Loading", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: `grid-skeleton ${className}`, style, role: "status", "aria-label": "Loading", children: [
     showHeader && /* @__PURE__ */ jsx8("div", { className: "grid-skeleton-header", children: Array.from({ length: columns }).map((_, index) => {
       var _a;
       return /* @__PURE__ */ jsx8(
@@ -2077,8 +2095,203 @@ function Skeleton({
   ] });
 }
 
+// src/components/TableStudioPanel/TableStudioPanel.tsx
+import { useState as useState7, useCallback as useCallback11 } from "react";
+import { Typography as Typography2 } from "@forgedevstack/bear";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_ROW_COUNT = 10;
+function TableStudioPanel({
+  data,
+  columns,
+  propsSnapshot,
+  onDataChange,
+  open = true,
+  onOpenChange
+}) {
+  const [activeTab, setActiveTab] = useState7("data");
+  const [generateCount, setGenerateCount] = useState7(DEFAULT_ROW_COUNT);
+  const handleGenerate = useCallback11(() => {
+    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__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx9(
+      "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__ */ jsx9(
+          "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__ */ jsxs6("div", { style: { flex: 1, overflow: "auto", padding: "0.75rem" }, children: [
+      activeTab === "data" && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsxs6(Typography2, { variant: "subtitle2", component: "h3", style: { marginBottom: "0.5rem" }, children: [
+          "Data (",
+          data.length,
+          " rows)"
+        ] }),
+        /* @__PURE__ */ jsx9(
+          "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__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsx9(Typography2, { variant: "subtitle2", component: "h3", style: { marginBottom: "0.5rem" }, children: "Props" }),
+        /* @__PURE__ */ jsx9("dl", { style: { margin: 0, fontSize: 13, color: "var(--gt-text-primary)" }, children: Object.entries(propsSnapshot).map(([key, value]) => /* @__PURE__ */ jsxs6("div", { style: { marginBottom: "0.5rem" }, children: [
+          /* @__PURE__ */ jsx9("dt", { style: { fontWeight: 600, marginBottom: 2 }, children: key }),
+          /* @__PURE__ */ jsx9("dd", { style: { margin: 0, color: "var(--gt-text-secondary)" }, children: typeof value === "object" && value !== null ? JSON.stringify(value) : String(value) })
+        ] }, key)) })
+      ] }),
+      activeTab === "generate" && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsx9(Typography2, { variant: "subtitle2", component: "h3", style: { marginBottom: "0.5rem" }, children: "Generate sample data" }),
+        /* @__PURE__ */ jsx9("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__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ jsxs6("label", { style: { fontSize: 12, fontWeight: 500 }, children: [
+            "Rows",
+            /* @__PURE__ */ jsx9(
+              "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__ */ jsx9(
+            "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__ */ jsx9("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__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx9(
+      "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__ */ jsx9(
+      "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
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function EmptyState({
   title,
   description,
@@ -2098,15 +2311,15 @@ function EmptyState({
       style,
       role: "status",
       children: [
-        icon && /* @__PURE__ */ jsx9("div", { className: "grid-empty-icon", children: icon }),
-        !icon && /* @__PURE__ */ jsx9("div", { className: "grid-empty-icon", children: /* @__PURE__ */ jsx9(
+        icon && /* @__PURE__ */ jsx10("div", { className: "grid-empty-icon", children: icon }),
+        !icon && /* @__PURE__ */ jsx10("div", { className: "grid-empty-icon", children: /* @__PURE__ */ jsx10(
           "svg",
           {
             className: "icon-lg",
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
-            children: /* @__PURE__ */ jsx9(
+            children: /* @__PURE__ */ jsx10(
               "path",
               {
                 strokeLinecap: "round",
@@ -2117,21 +2330,21 @@ function EmptyState({
             )
           }
         ) }),
-        /* @__PURE__ */ jsx9("h3", { className: "grid-empty-title", children: displayTitle }),
-        displayDescription && /* @__PURE__ */ jsx9("p", { className: "grid-empty-description", children: displayDescription }),
-        action && /* @__PURE__ */ jsx9("div", { className: "grid-empty-action", children: action })
+        /* @__PURE__ */ jsx10("h3", { className: "grid-empty-title", children: displayTitle }),
+        displayDescription && /* @__PURE__ */ jsx10("p", { className: "grid-empty-description", children: displayDescription }),
+        action && /* @__PURE__ */ jsx10("div", { className: "grid-empty-action", children: action })
       ]
     }
   );
 }
 
 // src/components/MobileDrawer/MobileDrawer.tsx
-import { useEffect as useEffect4, useCallback as useCallback12 } from "react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useCallback as useCallback12 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function DrawerHeader({ title, onClose }) {
   return /* @__PURE__ */ jsxs8("div", { className: "drawer-header", children: [
-    /* @__PURE__ */ jsx10("h3", { children: title }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11("h3", { children: title }),
+    /* @__PURE__ */ jsx11(
       "button",
       {
         onClick: onClose,
@@ -2156,7 +2369,7 @@ function FilterContent() {
         translations.filter,
         "(s) active"
       ] }),
-      filters.length > 0 && /* @__PURE__ */ jsx10(
+      filters.length > 0 && /* @__PURE__ */ jsx11(
         "button",
         {
           onClick: handleClearAll,
@@ -2165,13 +2378,13 @@ function FilterContent() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx10("div", { className: "space-y-3", children: columns.filter((col) => col.filterable !== false).map((col) => {
+    /* @__PURE__ */ jsx11("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__ */ jsxs8("div", { className: "filter-item", children: [
-        /* @__PURE__ */ jsx10("label", { className: "block text-sm font-medium text-theme-secondary mb-1", children: headerText }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11("label", { className: "block text-sm font-medium text-theme-secondary mb-1", children: headerText }),
+        /* @__PURE__ */ jsx11(
           "input",
           {
             type: "text",
@@ -2205,7 +2418,7 @@ function SortContent() {
         translations.sort,
         "(s) active"
       ] }),
-      sorting.length > 0 && /* @__PURE__ */ jsx10(
+      sorting.length > 0 && /* @__PURE__ */ jsx11(
         "button",
         {
           onClick: handleClearAll,
@@ -2214,7 +2427,7 @@ function SortContent() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx10("div", { className: "space-y-2", children: columns.filter((col) => col.sortable !== false).map((col) => {
+    /* @__PURE__ */ jsx11("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__ */ jsxs8(
@@ -2223,8 +2436,8 @@ function SortContent() {
           onClick: () => actions.toggleSorting(col.id),
           className: `w-full px-3 py-2 rounded ${sortItem ? "active" : ""}`,
           children: [
-            /* @__PURE__ */ jsx10("span", { className: "text-sm text-theme-primary", children: headerText }),
-            /* @__PURE__ */ jsx10("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__ */ jsx11("span", { className: "text-sm text-theme-primary", children: headerText }),
+            /* @__PURE__ */ jsx11("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
@@ -2237,8 +2450,8 @@ function ColumnsContent() {
   const { translations, columns, columnStates } = state;
   return /* @__PURE__ */ jsxs8("div", { className: "drawer-columns-content", children: [
     /* @__PURE__ */ jsxs8("div", { children: [
-      /* @__PURE__ */ jsx10("span", { className: "text-sm text-theme-muted", children: translations.showColumns }),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11("span", { className: "text-sm text-theme-muted", children: translations.showColumns }),
+      /* @__PURE__ */ jsx11(
         "button",
         {
           onClick: actions.resetColumns,
@@ -2247,7 +2460,7 @@ function ColumnsContent() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx10("div", { className: "space-y-2", children: columns.map((col) => {
+    /* @__PURE__ */ jsx11("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;
@@ -2256,7 +2469,7 @@ function ColumnsContent() {
         {
           className: "px-3 py-2 rounded cursor-pointer",
           children: [
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "input",
               {
                 type: "checkbox",
@@ -2265,7 +2478,7 @@ function ColumnsContent() {
                 className: "w-4 h-4 rounded"
               }
             ),
-            /* @__PURE__ */ jsx10("span", { className: "text-sm text-theme-primary", children: headerText })
+            /* @__PURE__ */ jsx11("span", { className: "text-sm text-theme-primary", children: headerText })
           ]
         },
         col.id
@@ -2285,7 +2498,7 @@ function MobileDrawer({
   className = "",
   style
 }) {
-  useEffect4(() => {
+  useEffect5(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
     } else {
@@ -2295,7 +2508,7 @@ function MobileDrawer({
       document.body.style.overflow = "";
     };
   }, [isOpen]);
-  useEffect4(() => {
+  useEffect5(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         onClose();
@@ -2308,7 +2521,7 @@ function MobileDrawer({
     return null;
   }
   return /* @__PURE__ */ jsxs8("div", { className: `mobile-drawer-container ${className}`, style, children: [
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       "div",
       {
         className: "mobile-drawer-overlay",
@@ -2331,11 +2544,11 @@ function MobileDrawer({
         "aria-modal": "true",
         "aria-labelledby": "drawer-title",
         children: [
-          /* @__PURE__ */ jsx10(DrawerHeader, { title: DRAWER_TITLES[content], onClose }),
+          /* @__PURE__ */ jsx11(DrawerHeader, { title: DRAWER_TITLES[content], onClose }),
           /* @__PURE__ */ jsxs8("div", { className: "drawer-content", children: [
-            content === "filter" && /* @__PURE__ */ jsx10(FilterContent, {}),
-            content === "sort" && /* @__PURE__ */ jsx10(SortContent, {}),
-            content === "columns" && /* @__PURE__ */ jsx10(ColumnsContent, {})
+            content === "filter" && /* @__PURE__ */ jsx11(FilterContent, {}),
+            content === "sort" && /* @__PURE__ */ jsx11(SortContent, {}),
+            content === "columns" && /* @__PURE__ */ jsx11(ColumnsContent, {})
           ] })
         ]
       }
@@ -2344,7 +2557,7 @@ function MobileDrawer({
 }
 
 // src/components/GridTable/GridTable.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function GridTableContent({
   data,
   columns,
@@ -2382,10 +2595,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 = useCallback13(
     (row) => {
       if (getRowId) return getRowId(row);
@@ -2414,6 +2635,22 @@ function GridTableContent({
     },
     [actions]
   );
+  const handleRowDoubleClick = useCallback13(
+    (row, index) => {
+      if (expandRowOnDoubleClick) {
+        actions.toggleRowExpansion(getRowIdFn(row));
+      }
+      onRowDoubleClick == null ? void 0 : onRowDoubleClick(row, index);
+    },
+    [expandRowOnDoubleClick, actions, getRowIdFn, onRowDoubleClick]
+  );
+  const handleSelectAll = useCallback13(() => {
+    if (computed.allSelected) {
+      actions.deselectAll();
+    } else {
+      actions.selectAll();
+    }
+  }, [computed.allSelected, actions]);
   const handleFilterOpen = useCallback13(
     (columnId) => {
       if (shouldShowMobileView) {
@@ -2424,7 +2661,7 @@ function GridTableContent({
     },
     [shouldShowMobileView, actions]
   );
-  const containerStyle = useMemo12(() => {
+  const containerStyle = useMemo11(() => {
     const baseStyle = { ...style, ...styles.root };
     if (dimensions == null ? void 0 : dimensions.width) {
       baseStyle.width = breakpointValue(dimensions.width, "auto");
@@ -2437,20 +2674,20 @@ function GridTableContent({
     }
     return baseStyle;
   }, [style, styles.root, dimensions, breakpointValue]);
-  const columnWidths = useMemo12(() => {
+  const columnWidths = useMemo11(() => {
     return state.columnStates.map((cs) => cs.width);
   }, [state.columnStates]);
   if (error) {
     const errorMessage = typeof error === "string" ? error : error.message;
     if (errorContent) {
-      return /* @__PURE__ */ jsx11("div", { className: `grid-table-error ${classNames.root || ""} ${className}`, style: containerStyle, children: typeof errorContent === "function" ? errorContent(error) : errorContent });
+      return /* @__PURE__ */ jsx12("div", { className: `grid-table-error ${classNames.root || ""} ${className}`, style: containerStyle, children: typeof errorContent === "function" ? errorContent(error) : errorContent });
     }
-    return /* @__PURE__ */ jsx11("div", { className: `grid-table-error ${classNames.root || ""} ${className}`, style: containerStyle, children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12("div", { className: `grid-table-error ${classNames.root || ""} ${className}`, style: containerStyle, children: /* @__PURE__ */ jsx12(
       EmptyState,
       {
         title: state.translations.errorLoading,
         description: errorMessage,
-        action: onRetry && /* @__PURE__ */ jsx11(
+        action: onRetry && /* @__PURE__ */ jsx12(
           "button",
           {
             onClick: onRetry,
@@ -2463,9 +2700,9 @@ function GridTableContent({
   }
   if (loading) {
     if (loadingContent) {
-      return /* @__PURE__ */ jsx11("div", { className: `grid-table-loading ${classNames.root || ""} ${className}`, style: containerStyle, children: loadingContent });
+      return /* @__PURE__ */ jsx12("div", { className: `grid-table-loading ${classNames.root || ""} ${className}`, style: containerStyle, children: loadingContent });
     }
-    return /* @__PURE__ */ jsx11("div", { className: `grid-table-loading ${classNames.root || ""} ${className}`, style: containerStyle, children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12("div", { className: `grid-table-loading ${classNames.root || ""} ${className}`, style: containerStyle, children: /* @__PURE__ */ jsx12(
       Skeleton,
       {
         rows: 5,
@@ -2479,17 +2716,17 @@ function GridTableContent({
     ) });
   }
   const isEmpty = computed.paginatedData.length === 0;
-  return /* @__PURE__ */ jsxs9(
+  const tableContent = /* @__PURE__ */ jsxs9(
     "div",
     {
       className: `grid-table rounded-lg border overflow-hidden ${classNames.root || ""} ${className}`,
       style: containerStyle,
       role: "table",
       children: [
-        renderHeader && /* @__PURE__ */ jsx11("div", { className: "grid-table-custom-header", children: renderHeader() }),
+        renderHeader && /* @__PURE__ */ jsx12("div", { className: "grid-table-custom-header", children: renderHeader() }),
         showGlobalFilter && /* @__PURE__ */ jsxs9("div", { className: "grid-table-toolbar", children: [
           /* @__PURE__ */ jsxs9("div", { className: "toolbar-search-wrapper", children: [
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               "svg",
               {
                 className: "search-icon",
@@ -2497,10 +2734,10 @@ function GridTableContent({
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
                 strokeWidth: 2,
-                children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" })
+                children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" })
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               "input",
               {
                 type: "text",
@@ -2510,13 +2747,13 @@ function GridTableContent({
                 className: "w-full pl-10 pr-3 py-2 text-sm rounded"
               }
             ),
-            state.globalFilter && /* @__PURE__ */ jsx11(
+            state.globalFilter && /* @__PURE__ */ jsx12(
               "button",
               {
                 onClick: () => actions.setGlobalFilter(""),
                 className: "clear-button",
                 "aria-label": "Clear search",
-                children: /* @__PURE__ */ jsx11("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx12("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
@@ -2526,7 +2763,7 @@ function GridTableContent({
               onClick: () => actions.clearFilters(),
               className: "filter-badge",
               children: [
-                /* @__PURE__ */ jsx11("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }),
+                /* @__PURE__ */ jsx12("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }),
                 /* @__PURE__ */ jsxs9("span", { children: [
                   state.filters.length,
                   " filter",
@@ -2536,37 +2773,37 @@ function GridTableContent({
             }
           ),
           shouldShowMobileView && /* @__PURE__ */ jsxs9("div", { className: "toolbar-actions", children: [
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               "button",
               {
                 onClick: () => actions.openMobileDrawer("filter"),
                 className: "toolbar-action-button",
                 "aria-label": state.translations.filter,
-                children: /* @__PURE__ */ jsx11("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx11("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__ */ jsx12("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx12("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__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               "button",
               {
                 onClick: () => actions.openMobileDrawer("sort"),
                 className: "toolbar-action-button",
                 "aria-label": state.translations.sort,
-                children: /* @__PURE__ */ jsx11("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) })
+                children: /* @__PURE__ */ jsx12("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) })
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               "button",
               {
                 onClick: () => actions.openMobileDrawer("columns"),
                 className: "toolbar-action-button",
                 "aria-label": state.translations.columns,
-                children: /* @__PURE__ */ jsx11("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx11("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__ */ jsx12("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx12("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__ */ jsxs9("div", { className: "grid-table-container overflow-auto", children: [
-          !shouldShowMobileView && /* @__PURE__ */ jsx11(
+          !shouldShowMobileView && /* @__PURE__ */ jsx12(
             GridHeader,
             {
               columns,
@@ -2579,24 +2816,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__ */ jsx11(
+          isEmpty ? emptyContent || /* @__PURE__ */ jsx12(
             EmptyState,
             {
               className: classNames.empty,
               style: styles.empty
             }
-          ) : /* @__PURE__ */ jsx11(
+          ) : /* @__PURE__ */ jsx12(
             GridBody,
             {
               data: computed.paginatedData,
@@ -2611,7 +2849,7 @@ function GridTableContent({
               selectedIds: state.selectedIds,
               expandedIds: state.expandedIds,
               onRowClick,
-              onRowDoubleClick,
+              onRowDoubleClick: handleRowDoubleClick,
               onCellClick,
               onRowSelect: handleRowSelect,
               onRowExpand: handleRowExpand,
@@ -2623,27 +2861,50 @@ function GridTableContent({
             }
           )
         ] }),
-        showPagination && !isEmpty && /* @__PURE__ */ jsx11(
-          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__ */ jsxs9("div", { className: `grid-pagination ${(_a = classNames.pagination) != null ? _a : ""}`, style: styles.pagination, role: "navigation", "aria-label": "Pagination", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "grid-pagination-info", children: [
+            /* @__PURE__ */ jsxs9(Typography3, { 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__ */ jsx12(Typography3, { component: "span", variant: "caption", color: "secondary", className: "bear-sr-only", children: state.translations.rowsPerPage }),
+            /* @__PURE__ */ jsx12(
+              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__ */ jsx12("div", { className: "grid-pagination-controls", children: /* @__PURE__ */ jsx12(
+            BearPagination,
+            {
+              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__ */ jsx11("div", { className: "grid-table-custom-footer", children: renderFooter() }),
-        /* @__PURE__ */ jsx11(
+          ) })
+        ] }),
+        renderFooter && /* @__PURE__ */ jsx12("div", { className: "grid-table-custom-footer", children: renderFooter() }),
+        /* @__PURE__ */ jsx12(
           MobileDrawer,
           {
             isOpen: state.showMobileDrawer,
@@ -2656,6 +2917,10 @@ function GridTableContent({
       ]
     }
   );
+  if (themeClass) {
+    return /* @__PURE__ */ jsx12("div", { className: themeClass, children: tableContent });
+  }
+  return tableContent;
 }
 function GridTable({
   data,
@@ -2670,12 +2935,26 @@ function GridTable({
   sortConfig,
   enableMultiSelect = false,
   getRowId,
+  showOverflowTooltip,
+  enableCellAutoSizeOnDoubleClick,
+  subCellExpandTrigger,
+  expandRowOnDoubleClick,
+  themeMode,
+  themeOverride,
+  studio = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(
+  var _a, _b;
+  const [studioData, setStudioData] = useState8(data);
+  const [studioOpen, setStudioOpen] = useState8(true);
+  useEffect6(() => {
+    if (studio) setStudioData(data);
+  }, [data, studio]);
+  const effectiveData = studio ? studioData : data;
+  const tableContent = /* @__PURE__ */ jsx12(
     TableProvider,
     {
-      data,
+      data: effectiveData,
       columns,
       loading,
       error,
@@ -2688,19 +2967,223 @@ function GridTable({
       enableMultiSort: sortConfig == null ? void 0 : sortConfig.multiSort,
       enableMultiSelect,
       getRowId,
-      children: /* @__PURE__ */ jsx11(
+      showOverflowTooltip,
+      enableCellAutoSizeOnDoubleClick,
+      subCellExpandTrigger,
+      expandRowOnDoubleClick,
+      children: /* @__PURE__ */ jsx12(
         GridTableContent,
         {
-          data,
+          data: effectiveData,
           columns,
           loading,
           error,
           getRowId,
+          themeMode,
+          paginationConfig,
           ...props
         }
       )
     }
   );
+  const withTheme = themeOverride && Object.keys(themeOverride).length > 0 ? /* @__PURE__ */ jsx12(BearProvider, { theme: themeOverride, defaultMode: themeMode === "dark" ? "dark" : "light", children: tableContent }) : tableContent;
+  if (studio) {
+    return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+      /* @__PURE__ */ jsx12("div", { className: "grid-table-studio-main", style: { width: "100%" }, children: withTheme }),
+      /* @__PURE__ */ jsx12(
+        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
+import { useMemo as useMemo12, useCallback as useCallback14 } from "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "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 = useCallback14(() => {
+    onPageChange(ONE);
+  }, [onPageChange]);
+  const handlePreviousPage = useCallback14(() => {
+    if (canGoPrevious) {
+      onPageChange(page - ONE);
+    }
+  }, [canGoPrevious, page, onPageChange]);
+  const handleNextPage = useCallback14(() => {
+    if (canGoNext) {
+      onPageChange(page + ONE);
+    }
+  }, [canGoNext, page, onPageChange]);
+  const handleLastPage = useCallback14(() => {
+    onPageChange(totalPages);
+  }, [onPageChange, totalPages]);
+  const handlePageSizeChange = useCallback14(
+    (event) => {
+      onPageSizeChange(Number(event.target.value));
+    },
+    [onPageSizeChange]
+  );
+  const pageNumbers = useMemo12(() => {
+    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__ */ jsxs10(
+    "div",
+    {
+      className: `grid-pagination ${className}`,
+      style,
+      role: "navigation",
+      "aria-label": "Pagination",
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: "grid-pagination-info", children: [
+          /* @__PURE__ */ jsxs10("div", { className: "grid-pagination-range", children: [
+            startItem,
+            "-",
+            endItem,
+            " ",
+            translations.of,
+            " ",
+            totalItems
+          ] }),
+          /* @__PURE__ */ jsxs10("div", { className: "grid-pagination-size", children: [
+            /* @__PURE__ */ jsxs10("label", { htmlFor: "page-size", children: [
+              translations.rowsPerPage,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx13(
+              "select",
+              {
+                id: "page-size",
+                value: pageSize,
+                onChange: handlePageSizeChange,
+                className: "px-2 py-1 text-sm rounded",
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx13("option", { value: size, children: size }, size))
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "grid-pagination-controls", children: [
+          showFirstLast && /* @__PURE__ */ jsx13(
+            "button",
+            {
+              onClick: handleFirstPage,
+              disabled: !canGoPrevious,
+              className: "p-2 rounded text-theme-secondary",
+              "aria-label": translations.first,
+              children: "<<"
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              onClick: handlePreviousPage,
+              disabled: !canGoPrevious,
+              className: "p-2 rounded text-theme-secondary",
+              "aria-label": translations.previous,
+              children: "<"
+            }
+          ),
+          showPageNumbers && /* @__PURE__ */ jsx13("div", { className: "grid-pagination-pages", children: pageNumbers.map(
+            (pageNum, index) => pageNum === "ellipsis" ? /* @__PURE__ */ jsx13("span", { className: "px-2 text-theme-muted", children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx13(
+              "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__ */ jsx13(
+            "button",
+            {
+              onClick: handleNextPage,
+              disabled: !canGoNext,
+              className: "p-2 rounded text-theme-secondary",
+              "aria-label": translations.next,
+              children: ">"
+            }
+          ),
+          showFirstLast && /* @__PURE__ */ jsx13(
+            "button",
+            {
+              onClick: handleLastPage,
+              disabled: !canGoNext,
+              className: "p-2 rounded text-theme-secondary",
+              "aria-label": translations.last,
+              children: ">>"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 export {
   BREAKPOINTS,