@forgedevstack/grid-table 1.0.0

package/dist/index.mjs

@@ -0,0 +1,2754 @@
+// src/components/GridTable/GridTable.tsx
+import { useMemo as useMemo12, useCallback as useCallback13 } from "react";
+
+// src/context/TableContext.tsx
+import {
+  createContext,
+  useContext,
+  useReducer,
+  useCallback,
+  useMemo,
+  useEffect
+} from "react";
+
+// src/constants/numbers.const.ts
+var ZERO = 0;
+var ONE = 1;
+var FIVE = 5;
+var TEN = 10;
+var TWENTY = 20;
+var FIFTY = 50;
+var HUNDRED = 100;
+var DEFAULT_PAGE_SIZE = TEN;
+var DEFAULT_PAGE_SIZES = [TEN, TWENTY, FIFTY, HUNDRED];
+var MIN_COLUMN_WIDTH = 50;
+var DEFAULT_COLUMN_WIDTH = 150;
+var MAX_COLUMN_WIDTH = 500;
+var SKELETON_ROWS = FIVE;
+var DEBOUNCE_DELAY = 300;
+var DRAG_THRESHOLD = FIVE;
+var MOBILE_BREAKPOINT = 640;
+var TABLET_BREAKPOINT = 768;
+var DESKTOP_BREAKPOINT = 1024;
+var DRAWER_ANIMATION_DURATION = 300;
+var DRAWER_OVERLAY_OPACITY = 0.5;
+
+// src/constants/breakpoints.const.ts
+var BREAKPOINTS = {
+  mobile: MOBILE_BREAKPOINT,
+  tablet: TABLET_BREAKPOINT,
+  desktop: DESKTOP_BREAKPOINT
+};
+var BREAKPOINT_KEYS = ["mobile", "tablet", "desktop"];
+var RESPONSIVE_MODES = {
+  stack: "stack",
+  scroll: "scroll",
+  hide: "hide"
+};
+var DEFAULT_MOBILE_BREAKPOINT = "tablet";
+
+// src/constants/defaults.const.ts
+var DEFAULT_TRANSLATIONS = {
+  empty: "No data available",
+  loading: "Loading...",
+  search: "Search...",
+  filter: "Filter",
+  sort: "Sort",
+  sortAsc: "Sort ascending",
+  sortDesc: "Sort descending",
+  clearSort: "Clear sort",
+  clearFilter: "Clear filter",
+  clearAll: "Clear all",
+  apply: "Apply",
+  cancel: "Cancel",
+  columns: "Columns",
+  showColumns: "Show columns",
+  hideColumn: "Hide column",
+  resetColumns: "Reset columns",
+  rowsPerPage: "Rows per page",
+  of: "of",
+  page: "Page",
+  first: "First",
+  previous: "Previous",
+  next: "Next",
+  last: "Last",
+  selected: "selected",
+  dragToReorder: "Drag to reorder",
+  noResults: "No results found",
+  errorLoading: "Error loading data",
+  retry: "Retry"
+};
+var DEFAULT_THEME = {
+  mode: "dark",
+  colors: {
+    background: {
+      primary: "#1e1e1e",
+      secondary: "#2b2b2b",
+      tertiary: "#3c3c3c",
+      hover: "#4e4e4e"
+    },
+    text: {
+      primary: "#a9b7c6",
+      secondary: "#808080",
+      muted: "#606060"
+    },
+    border: {
+      default: "rgba(255, 255, 255, 0.08)",
+      hover: "rgba(255, 255, 255, 0.15)"
+    },
+    accent: {
+      primary: "#1890ff",
+      success: "#52c41a",
+      warning: "#faad14",
+      error: "#ff4d4f"
+    }
+  }
+};
+var DEFAULT_LIGHT_THEME = {
+  mode: "light",
+  colors: {
+    background: {
+      primary: "#ffffff",
+      secondary: "#f5f5f5",
+      tertiary: "#ebebeb",
+      hover: "#e0e0e0"
+    },
+    text: {
+      primary: "#262626",
+      secondary: "#595959",
+      muted: "#8c8c8c"
+    },
+    border: {
+      default: "rgba(0, 0, 0, 0.06)",
+      hover: "rgba(0, 0, 0, 0.1)"
+    },
+    accent: {
+      primary: "#1890ff",
+      success: "#52c41a",
+      warning: "#faad14",
+      error: "#ff4d4f"
+    }
+  }
+};
+var DEFAULT_TABLE_CONFIG = {
+  pageSize: DEFAULT_PAGE_SIZE,
+  pageSizes: DEFAULT_PAGE_SIZES,
+  columnWidth: DEFAULT_COLUMN_WIDTH,
+  mobileBreakpoint: DEFAULT_MOBILE_BREAKPOINT,
+  stickyHeader: true,
+  showPagination: true,
+  showFilter: true,
+  showSort: true,
+  enableDragDrop: true,
+  enableColumnResize: true,
+  enableRowSelection: false,
+  enableMultiSelect: false,
+  showColumnToggle: true,
+  showEmptyState: true,
+  showSkeleton: true,
+  skeletonRows: 5,
+  virtualize: false,
+  virtualizeThreshold: 100
+};
+
+// src/context/TableContext.tsx
+import { jsx } from "react/jsx-runtime";
+function reducer(state, action) {
+  switch (action.type) {
+    case "SET_DATA":
+      return { ...state, data: action.payload, originalData: action.payload };
+    case "SET_LOADING":
+      return { ...state, loading: action.payload };
+    case "SET_ERROR":
+      return { ...state, error: action.payload };
+    case "SET_SORTING":
+      return { ...state, sorting: action.payload };
+    case "SET_FILTERS":
+      return { ...state, filters: action.payload };
+    case "SET_GLOBAL_FILTER":
+      return { ...state, globalFilter: action.payload };
+    case "SET_PAGE":
+      return { ...state, page: action.payload };
+    case "SET_PAGE_SIZE":
+      return { ...state, pageSize: action.payload, page: ONE };
+    case "SET_SELECTED_IDS":
+      return { ...state, selectedIds: action.payload };
+    case "SET_EXPANDED_IDS":
+      return { ...state, expandedIds: action.payload };
+    case "SET_COLUMN_STATES":
+      return { ...state, columnStates: action.payload };
+    case "SET_DRAGGING_COLUMN":
+      return { ...state, draggingColumnId: action.payload };
+    case "SET_RESIZING_COLUMN":
+      return { ...state, resizingColumnId: action.payload };
+    case "SET_ACTIVE_FILTER_COLUMN":
+      return { ...state, activeFilterColumnId: action.payload };
+    case "SET_CURRENT_BREAKPOINT":
+      return { ...state, currentBreakpoint: action.payload };
+    case "SET_MOBILE_DRAWER":
+      return {
+        ...state,
+        showMobileDrawer: action.payload.show,
+        mobileDrawerContent: action.payload.content
+      };
+    case "RESET":
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+}
+var TableContext = createContext(null);
+function TableProvider({
+  children,
+  data,
+  columns,
+  loading = false,
+  error = null,
+  theme,
+  translations,
+  mobileBreakpoint = "tablet",
+  paginationConfig,
+  filterConfig: _filterConfig,
+  sortConfig: _sortConfig,
+  enableMultiSort = false,
+  getRowId,
+  onStateChange
+}) {
+  var _a, _b;
+  const initialColumnStates = columns.map((col, index) => ({
+    id: col.id,
+    visible: !col.hidden,
+    width: typeof col.width === "number" ? col.width : DEFAULT_TABLE_CONFIG.columnWidth,
+    order: index,
+    pinned: col.sticky || null
+  }));
+  const mergedTheme = useMemo(
+    () => ({ ...DEFAULT_THEME, ...theme, colors: { ...DEFAULT_THEME.colors, ...theme == null ? void 0 : theme.colors } }),
+    [theme]
+  );
+  const mergedTranslations = useMemo(
+    () => ({ ...DEFAULT_TRANSLATIONS, ...translations }),
+    [translations]
+  );
+  const initialState = {
+    data,
+    originalData: data,
+    columns,
+    columnStates: initialColumnStates,
+    sorting: [],
+    filters: [],
+    globalFilter: "",
+    page: (_a = paginationConfig == null ? void 0 : paginationConfig.initialPage) != null ? _a : ONE,
+    pageSize: (_b = paginationConfig == null ? void 0 : paginationConfig.initialPageSize) != null ? _b : DEFAULT_TABLE_CONFIG.pageSize,
+    totalItems: data.length,
+    selectedIds: /* @__PURE__ */ new Set(),
+    expandedIds: /* @__PURE__ */ new Set(),
+    loading,
+    error,
+    theme: mergedTheme,
+    translations: mergedTranslations,
+    currentBreakpoint: "desktop",
+    mobileBreakpoint,
+    draggingColumnId: null,
+    resizingColumnId: null,
+    activeFilterColumnId: null,
+    showMobileDrawer: false,
+    mobileDrawerContent: null
+  };
+  const [state, dispatch] = useReducer(reducer, initialState);
+  useEffect(() => {
+    dispatch({ type: "SET_DATA", payload: data });
+  }, [data]);
+  useEffect(() => {
+    dispatch({ type: "SET_LOADING", payload: loading });
+  }, [loading]);
+  useEffect(() => {
+    dispatch({ type: "SET_ERROR", payload: error });
+  }, [error]);
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      let breakpoint = "desktop";
+      if (width < MOBILE_BREAKPOINT) {
+        breakpoint = "mobile";
+      } else if (width < TABLET_BREAKPOINT) {
+        breakpoint = "tablet";
+      }
+      dispatch({ type: "SET_CURRENT_BREAKPOINT", payload: breakpoint });
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  useEffect(() => {
+    onStateChange == null ? void 0 : onStateChange(state);
+  }, [state, onStateChange]);
+  const getRowIdFn = useCallback(
+    (row) => {
+      if (getRowId) return getRowId(row);
+      if ("id" in row) return row.id;
+      return data.indexOf(row);
+    },
+    [getRowId, data]
+  );
+  const actions = useMemo(
+    () => ({
+      setData: (newData) => dispatch({ type: "SET_DATA", payload: newData }),
+      setLoading: (value) => dispatch({ type: "SET_LOADING", payload: value }),
+      setError: (value) => dispatch({ type: "SET_ERROR", payload: value }),
+      setSorting: (columnId, direction) => {
+        const newSorting = enableMultiSort ? [...state.sorting.filter((s) => s.columnId !== columnId), { columnId, direction }] : direction ? [{ columnId, direction }] : [];
+        dispatch({ type: "SET_SORTING", payload: newSorting.filter((s) => s.direction !== null) });
+      },
+      toggleSorting: (columnId) => {
+        const current = state.sorting.find((s) => s.columnId === columnId);
+        let newDirection = "asc";
+        if ((current == null ? void 0 : current.direction) === "asc") newDirection = "desc";
+        else if ((current == null ? void 0 : current.direction) === "desc") newDirection = null;
+        actions.setSorting(columnId, newDirection);
+      },
+      clearSorting: () => dispatch({ type: "SET_SORTING", payload: [] }),
+      setFilter: (columnId, value, operator = "contains") => {
+        const newFilters = [
+          ...state.filters.filter((f) => f.columnId !== columnId),
+          { columnId, value, operator }
+        ];
+        dispatch({ type: "SET_FILTERS", payload: newFilters });
+        dispatch({ type: "SET_PAGE", payload: ONE });
+      },
+      removeFilter: (columnId) => {
+        const newFilters = state.filters.filter((f) => f.columnId !== columnId);
+        dispatch({ type: "SET_FILTERS", payload: newFilters });
+      },
+      clearFilters: () => {
+        dispatch({ type: "SET_FILTERS", payload: [] });
+        dispatch({ type: "SET_GLOBAL_FILTER", payload: "" });
+      },
+      setGlobalFilter: (value) => {
+        dispatch({ type: "SET_GLOBAL_FILTER", payload: value });
+        dispatch({ type: "SET_PAGE", payload: ONE });
+      },
+      setPage: (page) => dispatch({ type: "SET_PAGE", payload: page }),
+      setPageSize: (pageSize) => dispatch({ type: "SET_PAGE_SIZE", payload: pageSize }),
+      selectRow: (id) => {
+        const newSet = new Set(state.selectedIds);
+        newSet.add(id);
+        dispatch({ type: "SET_SELECTED_IDS", payload: newSet });
+      },
+      deselectRow: (id) => {
+        const newSet = new Set(state.selectedIds);
+        newSet.delete(id);
+        dispatch({ type: "SET_SELECTED_IDS", payload: newSet });
+      },
+      toggleRow: (id) => {
+        if (state.selectedIds.has(id)) {
+          actions.deselectRow(id);
+        } else {
+          actions.selectRow(id);
+        }
+      },
+      selectAll: () => {
+        const allIds = new Set(state.data.map(getRowIdFn));
+        dispatch({ type: "SET_SELECTED_IDS", payload: allIds });
+      },
+      deselectAll: () => dispatch({ type: "SET_SELECTED_IDS", payload: /* @__PURE__ */ new Set() }),
+      expandRow: (id) => {
+        const newSet = new Set(state.expandedIds);
+        newSet.add(id);
+        dispatch({ type: "SET_EXPANDED_IDS", payload: newSet });
+      },
+      collapseRow: (id) => {
+        const newSet = new Set(state.expandedIds);
+        newSet.delete(id);
+        dispatch({ type: "SET_EXPANDED_IDS", payload: newSet });
+      },
+      toggleRowExpansion: (id) => {
+        if (state.expandedIds.has(id)) {
+          actions.collapseRow(id);
+        } else {
+          actions.expandRow(id);
+        }
+      },
+      reorderColumn: (sourceId, targetId) => {
+        const newStates = [...state.columnStates];
+        const sourceIndex = newStates.findIndex((c) => c.id === sourceId);
+        const targetIndex = newStates.findIndex((c) => c.id === targetId);
+        if (sourceIndex === -ONE || targetIndex === -ONE) return;
+        const [removed] = newStates.splice(sourceIndex, ONE);
+        newStates.splice(targetIndex, ZERO, removed);
+        newStates.forEach((col, i) => col.order = i);
+        dispatch({ type: "SET_COLUMN_STATES", payload: newStates });
+      },
+      resizeColumn: (columnId, width) => {
+        const newStates = state.columnStates.map(
+          (col) => col.id === columnId ? { ...col, width } : col
+        );
+        dispatch({ type: "SET_COLUMN_STATES", payload: newStates });
+      },
+      toggleColumnVisibility: (columnId) => {
+        const newStates = state.columnStates.map(
+          (col) => col.id === columnId ? { ...col, visible: !col.visible } : col
+        );
+        dispatch({ type: "SET_COLUMN_STATES", payload: newStates });
+      },
+      resetColumns: () => dispatch({ type: "SET_COLUMN_STATES", payload: initialColumnStates }),
+      setDraggingColumn: (columnId) => dispatch({ type: "SET_DRAGGING_COLUMN", payload: columnId }),
+      setResizingColumn: (columnId) => dispatch({ type: "SET_RESIZING_COLUMN", payload: columnId }),
+      setActiveFilterColumn: (columnId) => dispatch({ type: "SET_ACTIVE_FILTER_COLUMN", payload: columnId }),
+      openMobileDrawer: (content) => dispatch({ type: "SET_MOBILE_DRAWER", payload: { show: true, content } }),
+      closeMobileDrawer: () => dispatch({ type: "SET_MOBILE_DRAWER", payload: { show: false, content: null } }),
+      refresh: () => dispatch({ type: "SET_DATA", payload: state.originalData }),
+      reset: () => dispatch({
+        type: "RESET",
+        payload: {
+          sorting: [],
+          filters: [],
+          globalFilter: "",
+          page: ONE,
+          selectedIds: /* @__PURE__ */ new Set(),
+          expandedIds: /* @__PURE__ */ new Set(),
+          columnStates: initialColumnStates
+        }
+      })
+    }),
+    [state, enableMultiSort, getRowIdFn, initialColumnStates]
+  );
+  const computed = useMemo(() => {
+    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)
+        )
+      );
+    }
+    state.filters.forEach((filter) => {
+      const column = columns.find((c) => c.id === filter.columnId);
+      if (!column) return;
+      filteredData = filteredData.filter((row) => {
+        const accessor = column.accessor;
+        const value = typeof accessor === "function" ? accessor(row) : row[accessor];
+        const filterValue = filter.value;
+        if (column.filterFn) {
+          return column.filterFn(value, filterValue, filter.operator);
+        }
+        const strValue = String(value != null ? value : "").toLowerCase();
+        const strFilter = String(filterValue != null ? filterValue : "").toLowerCase();
+        switch (filter.operator) {
+          case "equals":
+            return strValue === strFilter;
+          case "notEquals":
+            return strValue !== strFilter;
+          case "contains":
+            return strValue.includes(strFilter);
+          case "notContains":
+            return !strValue.includes(strFilter);
+          case "startsWith":
+            return strValue.startsWith(strFilter);
+          case "endsWith":
+            return strValue.endsWith(strFilter);
+          case "isEmpty":
+            return !value || strValue === "";
+          case "isNotEmpty":
+            return value && strValue !== "";
+          default:
+            return strValue.includes(strFilter);
+        }
+      });
+    });
+    let sortedData = [...filteredData];
+    if (state.sorting.length > ZERO) {
+      sortedData.sort((a, b) => {
+        for (const sort of state.sorting) {
+          const column = columns.find((c) => c.id === sort.columnId);
+          if (!column) continue;
+          const accessor = column.accessor;
+          const aVal = typeof accessor === "function" ? accessor(a) : a[accessor];
+          const bVal = typeof accessor === "function" ? accessor(b) : b[accessor];
+          if (column.sortFn) {
+            const result2 = column.sortFn(aVal, bVal, sort.direction);
+            if (result2 !== ZERO) return result2;
+            continue;
+          }
+          if (aVal === bVal) continue;
+          if (aVal == null) return ONE;
+          if (bVal == null) return -ONE;
+          const comparison = aVal < bVal ? -ONE : ONE;
+          const result = sort.direction === "desc" ? -comparison : comparison;
+          if (result !== ZERO) return result;
+        }
+        return ZERO;
+      });
+    }
+    const totalPages = Math.ceil(sortedData.length / state.pageSize) || ONE;
+    const startIndex = (state.page - ONE) * state.pageSize;
+    const paginatedData = sortedData.slice(startIndex, startIndex + state.pageSize);
+    const visibleColumns = columns.filter((col) => {
+      const colState = state.columnStates.find((cs) => cs.id === col.id);
+      return (colState == null ? void 0 : colState.visible) !== false;
+    });
+    const allSelected = state.data.length > ZERO && state.selectedIds.size === state.data.length;
+    const someSelected = state.selectedIds.size > ZERO && !allSelected;
+    const isMobile = state.currentBreakpoint === "mobile";
+    const isTablet = state.currentBreakpoint === "tablet";
+    const isDesktop = state.currentBreakpoint === "desktop";
+    return {
+      filteredData,
+      sortedData,
+      paginatedData,
+      visibleColumns,
+      totalPages,
+      canGoNext: state.page < totalPages,
+      canGoPrevious: state.page > ONE,
+      allSelected,
+      someSelected,
+      isMobile,
+      isTablet,
+      isDesktop
+    };
+  }, [state, columns]);
+  const contextValue = {
+    state,
+    actions,
+    computed
+  };
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children });
+}
+function useTableContext() {
+  const context = useContext(TableContext);
+  if (!context) {
+    throw new Error("useTableContext must be used within a TableProvider");
+  }
+  return context;
+}
+
+// src/hooks/useTable.ts
+import { useMemo as useMemo7 } from "react";
+
+// src/hooks/useSort.ts
+import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+function useSort() {
+  const { state, actions } = useTableContext();
+  const getSortDirection = useCallback2(
+    (columnId) => {
+      var _a;
+      const sort = state.sorting.find((s) => s.columnId === columnId);
+      return (_a = sort == null ? void 0 : sort.direction) != null ? _a : null;
+    },
+    [state.sorting]
+  );
+  const getSortIndex = useCallback2(
+    (columnId) => {
+      return state.sorting.findIndex((s) => s.columnId === columnId);
+    },
+    [state.sorting]
+  );
+  const isSorted = useCallback2(
+    (columnId) => {
+      return state.sorting.some((s) => s.columnId === columnId);
+    },
+    [state.sorting]
+  );
+  const clearColumnSorting = useCallback2(
+    (columnId) => {
+      actions.setSorting(columnId, null);
+    },
+    [actions]
+  );
+  return useMemo2(
+    () => ({
+      sorting: state.sorting,
+      getSortDirection,
+      getSortIndex,
+      isSorted,
+      setSorting: actions.setSorting,
+      toggleSorting: actions.toggleSorting,
+      clearSorting: actions.clearSorting,
+      clearColumnSorting
+    }),
+    [state.sorting, getSortDirection, getSortIndex, isSorted, actions, clearColumnSorting]
+  );
+}
+
+// src/hooks/useFilter.ts
+import { useCallback as useCallback3, useMemo as useMemo3, useState, useEffect as useEffect2 } from "react";
+function useFilter(options = {}) {
+  const { debounceMs = DEBOUNCE_DELAY } = options;
+  const { state, actions } = useTableContext();
+  const [debouncedGlobalFilter, setDebouncedGlobalFilter] = useState(state.globalFilter);
+  useEffect2(() => {
+    const timer = setTimeout(() => {
+      if (debouncedGlobalFilter !== state.globalFilter) {
+        actions.setGlobalFilter(debouncedGlobalFilter);
+      }
+    }, debounceMs);
+    return () => clearTimeout(timer);
+  }, [debouncedGlobalFilter, debounceMs, actions, state.globalFilter]);
+  const hasAnyFilter = useCallback3(() => {
+    return state.filters.length > 0 || state.globalFilter.length > 0;
+  }, [state.filters, state.globalFilter]);
+  const hasFilter = useCallback3(
+    (columnId) => {
+      return state.filters.some((f) => f.columnId === columnId);
+    },
+    [state.filters]
+  );
+  const getFilterValue = useCallback3(
+    (columnId) => {
+      return state.filters.find((f) => f.columnId === columnId);
+    },
+    [state.filters]
+  );
+  const setFilter = useCallback3(
+    (columnId, value, operator = "contains") => {
+      actions.setFilter(columnId, value, operator);
+    },
+    [actions]
+  );
+  const clearGlobalFilter = useCallback3(() => {
+    setDebouncedGlobalFilter("");
+    actions.setGlobalFilter("");
+  }, [actions]);
+  const setGlobalFilterDebounced = useCallback3((value) => {
+    setDebouncedGlobalFilter(value);
+  }, []);
+  const openFilterPanel = useCallback3(
+    (columnId) => {
+      actions.setActiveFilterColumn(columnId);
+    },
+    [actions]
+  );
+  const closeFilterPanel = useCallback3(() => {
+    actions.setActiveFilterColumn(null);
+  }, [actions]);
+  return useMemo3(
+    () => ({
+      filters: state.filters,
+      globalFilter: debouncedGlobalFilter,
+      activeFilterColumnId: state.activeFilterColumnId,
+      hasAnyFilter,
+      hasFilter,
+      getFilterValue,
+      setFilter,
+      removeFilter: actions.removeFilter,
+      clearFilters: actions.clearFilters,
+      setGlobalFilter: setGlobalFilterDebounced,
+      clearGlobalFilter,
+      openFilterPanel,
+      closeFilterPanel
+    }),
+    [
+      state.filters,
+      state.activeFilterColumnId,
+      debouncedGlobalFilter,
+      hasAnyFilter,
+      hasFilter,
+      getFilterValue,
+      setFilter,
+      actions,
+      setGlobalFilterDebounced,
+      clearGlobalFilter,
+      openFilterPanel,
+      closeFilterPanel
+    ]
+  );
+}
+
+// src/hooks/usePagination.ts
+import { useCallback as useCallback4, useMemo as useMemo4 } from "react";
+function usePagination(options = {}) {
+  const { pageSizeOptions = [10, 20, 50, 100] } = options;
+  const { state, actions, computed } = useTableContext();
+  const setPage = useCallback4(
+    (page) => {
+      const validPage = Math.max(ONE, Math.min(page, computed.totalPages));
+      actions.setPage(validPage);
+    },
+    [actions, computed.totalPages]
+  );
+  const setPageSize = useCallback4(
+    (pageSize) => {
+      actions.setPageSize(pageSize);
+    },
+    [actions]
+  );
+  const goToFirstPage = useCallback4(() => {
+    actions.setPage(ONE);
+  }, [actions]);
+  const goToLastPage = useCallback4(() => {
+    actions.setPage(computed.totalPages);
+  }, [actions, computed.totalPages]);
+  const goToNextPage = useCallback4(() => {
+    if (computed.canGoNext) {
+      actions.setPage(state.page + ONE);
+    }
+  }, [actions, computed.canGoNext, state.page]);
+  const goToPreviousPage = useCallback4(() => {
+    if (computed.canGoPrevious) {
+      actions.setPage(state.page - ONE);
+    }
+  }, [actions, computed.canGoPrevious, state.page]);
+  const canGoToNextPage = useCallback4(() => {
+    return computed.canGoNext;
+  }, [computed.canGoNext]);
+  const canGoToPreviousPage = useCallback4(() => {
+    return computed.canGoPrevious;
+  }, [computed.canGoPrevious]);
+  const getPageRange = useCallback4(() => {
+    const start = (state.page - ONE) * state.pageSize + ONE;
+    const end = Math.min(state.page * state.pageSize, computed.sortedData.length);
+    return { start, end };
+  }, [state.page, state.pageSize, computed.sortedData.length]);
+  const paginationInfo = useMemo4(() => {
+    const { start, end } = getPageRange();
+    return {
+      page: state.page,
+      pageSize: state.pageSize,
+      totalItems: computed.sortedData.length,
+      totalPages: computed.totalPages,
+      startIndex: start,
+      endIndex: end,
+      isFirstPage: state.page === ONE,
+      isLastPage: state.page === computed.totalPages
+    };
+  }, [state.page, state.pageSize, computed.sortedData.length, computed.totalPages, getPageRange]);
+  return useMemo4(
+    () => ({
+      ...paginationInfo,
+      pageSizeOptions,
+      setPage,
+      setPageSize,
+      goToFirstPage,
+      goToLastPage,
+      goToNextPage,
+      goToPreviousPage,
+      canGoToNextPage,
+      canGoToPreviousPage,
+      getPageRange
+    }),
+    [
+      paginationInfo,
+      pageSizeOptions,
+      setPage,
+      setPageSize,
+      goToFirstPage,
+      goToLastPage,
+      goToNextPage,
+      goToPreviousPage,
+      canGoToNextPage,
+      canGoToPreviousPage,
+      getPageRange
+    ]
+  );
+}
+
+// src/hooks/useDragDrop.ts
+import { useCallback as useCallback5, useRef, useState as useState2, useMemo as useMemo5 } from "react";
+function useDragDrop(options = {}) {
+  const { onReorder, enabled = true } = options;
+  const { state, actions } = useTableContext();
+  const [dragOverColumnId, setDragOverColumnId] = useState2(null);
+  const dragStartPosition = useRef(null);
+  const isDragValid = useRef(false);
+  const handleDragStart = useCallback5(
+    (columnId) => (event) => {
+      if (!enabled) {
+        event.preventDefault();
+        return;
+      }
+      dragStartPosition.current = { x: event.clientX, y: event.clientY };
+      isDragValid.current = false;
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", columnId);
+      requestAnimationFrame(() => {
+        actions.setDraggingColumn(columnId);
+      });
+    },
+    [enabled, actions]
+  );
+  const handleDragOver = useCallback5(
+    (columnId) => (event) => {
+      if (!enabled || !state.draggingColumnId) return;
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "move";
+      if (dragStartPosition.current) {
+        const dx = Math.abs(event.clientX - dragStartPosition.current.x);
+        const dy = Math.abs(event.clientY - dragStartPosition.current.y);
+        if (dx > DRAG_THRESHOLD || dy > DRAG_THRESHOLD) {
+          isDragValid.current = true;
+        }
+      }
+      if (columnId !== state.draggingColumnId && columnId !== dragOverColumnId) {
+        setDragOverColumnId(columnId);
+      }
+    },
+    [enabled, state.draggingColumnId, dragOverColumnId]
+  );
+  const handleDragLeave = useCallback5(() => {
+    setDragOverColumnId(null);
+  }, []);
+  const handleDrop = useCallback5(
+    (targetColumnId) => (event) => {
+      event.preventDefault();
+      if (!enabled || !state.draggingColumnId || !isDragValid.current) return;
+      if (state.draggingColumnId === targetColumnId) return;
+      const sourceIndex = state.columnStates.findIndex((c) => c.id === state.draggingColumnId);
+      const targetIndex = state.columnStates.findIndex((c) => c.id === targetColumnId);
+      if (sourceIndex !== -1 && targetIndex !== -1) {
+        actions.reorderColumn(state.draggingColumnId, targetColumnId);
+        onReorder == null ? void 0 : onReorder({
+          sourceId: state.draggingColumnId,
+          targetId: targetColumnId,
+          sourceIndex,
+          targetIndex
+        });
+      }
+      setDragOverColumnId(null);
+    },
+    [enabled, state.draggingColumnId, state.columnStates, actions, onReorder]
+  );
+  const handleDragEnd = useCallback5(() => {
+    actions.setDraggingColumn(null);
+    setDragOverColumnId(null);
+    dragStartPosition.current = null;
+    isDragValid.current = false;
+  }, [actions]);
+  const getDragHandleProps = useCallback5(
+    (columnId) => ({
+      draggable: enabled,
+      onDragStart: handleDragStart(columnId),
+      onDragEnd: handleDragEnd
+    }),
+    [enabled, handleDragStart, handleDragEnd]
+  );
+  const getDropTargetProps = useCallback5(
+    (columnId) => ({
+      onDragOver: handleDragOver(columnId),
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop(columnId)
+    }),
+    [handleDragOver, handleDragLeave, handleDrop]
+  );
+  return useMemo5(
+    () => ({
+      isDragging: !!state.draggingColumnId,
+      draggingColumnId: state.draggingColumnId,
+      dragOverColumnId,
+      handleDragStart,
+      handleDragOver,
+      handleDragEnd,
+      handleDrop,
+      handleDragLeave,
+      getDragHandleProps,
+      getDropTargetProps
+    }),
+    [
+      state.draggingColumnId,
+      dragOverColumnId,
+      handleDragStart,
+      handleDragOver,
+      handleDragEnd,
+      handleDrop,
+      handleDragLeave,
+      getDragHandleProps,
+      getDropTargetProps
+    ]
+  );
+}
+
+// src/hooks/useBreakpoint.ts
+import { useMemo as useMemo6 } from "react";
+function useBreakpoint() {
+  const { state, computed } = useTableContext();
+  const breakpointValue = useMemo6(
+    () => (value, fallback) => {
+      if (value === null || value === void 0) return fallback;
+      if (typeof value !== "object" || !("mobile" in value || "tablet" in value || "desktop" in value)) {
+        return value;
+      }
+      const responsiveValue = value;
+      const breakpointOrder = ["mobile", "tablet", "desktop"];
+      const currentIndex = breakpointOrder.indexOf(state.currentBreakpoint);
+      for (let i = currentIndex; i >= 0; i--) {
+        const bp = breakpointOrder[i];
+        if (responsiveValue[bp] !== void 0) {
+          return responsiveValue[bp];
+        }
+      }
+      for (let i = currentIndex + 1; i < breakpointOrder.length; i++) {
+        const bp = breakpointOrder[i];
+        if (responsiveValue[bp] !== void 0) {
+          return responsiveValue[bp];
+        }
+      }
+      return fallback;
+    },
+    [state.currentBreakpoint]
+  );
+  const shouldShowMobileView = useMemo6(() => {
+    const mobileBreakpoints = ["mobile"];
+    if (state.mobileBreakpoint === "tablet") {
+      mobileBreakpoints.push("tablet");
+    }
+    return mobileBreakpoints.includes(state.currentBreakpoint);
+  }, [state.currentBreakpoint, state.mobileBreakpoint]);
+  return useMemo6(
+    () => ({
+      currentBreakpoint: state.currentBreakpoint,
+      isMobile: computed.isMobile,
+      isTablet: computed.isTablet,
+      isDesktop: computed.isDesktop,
+      isMobileOrTablet: computed.isMobile || computed.isTablet,
+      isTabletOrDesktop: computed.isTablet || computed.isDesktop,
+      breakpointValue,
+      shouldShowMobileView
+    }),
+    [state.currentBreakpoint, computed, breakpointValue, shouldShowMobileView]
+  );
+}
+
+// src/hooks/useTable.ts
+function useTable() {
+  const { state, actions, computed } = useTableContext();
+  const sort = useSort();
+  const filter = useFilter();
+  const pagination = usePagination();
+  const dragDrop = useDragDrop();
+  const breakpoint = useBreakpoint();
+  const selection = useMemo7(
+    () => ({
+      selectedIds: state.selectedIds,
+      allSelected: computed.allSelected,
+      someSelected: computed.someSelected,
+      selectRow: actions.selectRow,
+      deselectRow: actions.deselectRow,
+      toggleRow: actions.toggleRow,
+      selectAll: actions.selectAll,
+      deselectAll: actions.deselectAll,
+      isSelected: (id) => state.selectedIds.has(id)
+    }),
+    [state.selectedIds, computed.allSelected, computed.someSelected, actions]
+  );
+  const expansion = useMemo7(
+    () => ({
+      expandedIds: state.expandedIds,
+      expandRow: actions.expandRow,
+      collapseRow: actions.collapseRow,
+      toggleRow: actions.toggleRowExpansion,
+      isExpanded: (id) => state.expandedIds.has(id)
+    }),
+    [state.expandedIds, actions]
+  );
+  const columnsApi = useMemo7(
+    () => ({
+      states: state.columnStates,
+      reorder: actions.reorderColumn,
+      resize: actions.resizeColumn,
+      toggleVisibility: actions.toggleColumnVisibility,
+      reset: actions.resetColumns,
+      getWidth: (columnId) => {
+        var _a;
+        const colState = state.columnStates.find((c) => c.id === columnId);
+        return (_a = colState == null ? void 0 : colState.width) != null ? _a : 150;
+      },
+      isVisible: (columnId) => {
+        const colState = state.columnStates.find((c) => c.id === columnId);
+        return (colState == null ? void 0 : colState.visible) !== false;
+      }
+    }),
+    [state.columnStates, actions]
+  );
+  const mobile = useMemo7(
+    () => ({
+      showDrawer: state.showMobileDrawer,
+      drawerContent: state.mobileDrawerContent,
+      openDrawer: actions.openMobileDrawer,
+      closeDrawer: actions.closeMobileDrawer
+    }),
+    [state.showMobileDrawer, state.mobileDrawerContent, actions]
+  );
+  return useMemo7(
+    () => ({
+      data: state.data,
+      filteredData: computed.filteredData,
+      sortedData: computed.sortedData,
+      paginatedData: computed.paginatedData,
+      columns: state.columns,
+      visibleColumns: computed.visibleColumns,
+      loading: state.loading,
+      error: state.error,
+      isEmpty: computed.paginatedData.length === 0 && !state.loading,
+      sort,
+      filter,
+      pagination,
+      dragDrop,
+      breakpoint,
+      selection,
+      expansion,
+      columnApi: columnsApi,
+      mobile,
+      theme: state.theme,
+      translations: state.translations,
+      refresh: actions.refresh,
+      reset: actions.reset
+    }),
+    [state, computed, sort, filter, pagination, dragDrop, breakpoint, selection, expansion, columnsApi, mobile, actions]
+  );
+}
+
+// src/components/GridHeader/GridHeader.tsx
+import { useMemo as useMemo8, useCallback as useCallback7, useState as useState4, useRef as useRef3 } from "react";
+
+// src/components/FilterPopup/FilterPopup.tsx
+import { useState as useState3, useCallback as useCallback6, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var TEXT_OPERATORS = ["contains", "equals", "startsWith", "endsWith", "notContains", "notEquals"];
+var NUMBER_OPERATORS = ["equals", "notEquals", "greaterThan", "lessThan", "greaterThanOrEqual", "lessThanOrEqual"];
+var OPERATOR_LABELS = {
+  equals: "Equals",
+  notEquals: "Not equals",
+  contains: "Contains",
+  notContains: "Not contains",
+  startsWith: "Starts with",
+  endsWith: "Ends with",
+  greaterThan: "Greater than",
+  lessThan: "Less than",
+  greaterThanOrEqual: "Greater or equal",
+  lessThanOrEqual: "Less or equal",
+  between: "Between",
+  isEmpty: "Is empty",
+  isNotEmpty: "Is not empty"
+};
+function FilterPopup({
+  columnId,
+  columnHeader,
+  filterType = "text",
+  filterOptions,
+  currentValue,
+  currentOperator = "contains",
+  position,
+  onApply,
+  onClear,
+  onClose,
+  className = "",
+  style
+}) {
+  var _a, _b;
+  const { state } = useTableContext();
+  const { translations } = state;
+  const popupRef = useRef2(null);
+  const [value, setValue] = useState3(currentValue ? String(currentValue) : "");
+  const [operator, setOperator] = useState3(currentOperator);
+  const operators = filterType === "number" ? NUMBER_OPERATORS : TEXT_OPERATORS;
+  useEffect3(() => {
+    const handleClickOutside = (event) => {
+      if (popupRef.current && !popupRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose]);
+  const handleApply = useCallback6(() => {
+    if (value.trim()) {
+      onApply(filterType === "number" ? Number(value) : value, operator);
+    }
+    onClose();
+  }, [value, operator, filterType, onApply, onClose]);
+  const handleClear = useCallback6(() => {
+    setValue("");
+    onClear();
+    onClose();
+  }, [onClear, onClose]);
+  const handleKeyDown = useCallback6(
+    (e) => {
+      if (e.key === "Enter") {
+        handleApply();
+      }
+    },
+    [handleApply]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: popupRef,
+      className: `filter-popup absolute z-50 bg-theme-primary border border-theme-border rounded-lg shadow-xl min-w-[280px] ${className}`,
+      style: {
+        top: (_a = position == null ? void 0 : position.top) != null ? _a : "100%",
+        left: (_b = position == null ? void 0 : position.left) != null ? _b : 0,
+        marginTop: 4,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "filter-popup-header px-4 py-3 border-b border-theme-border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx2("span", { className: "font-medium text-theme-primary", children: columnHeader }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 rounded hover:bg-theme-hover text-theme-muted",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx2("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx2("div", { className: "filter-popup-body p-4 space-y-4", children: filterType === "select" && filterOptions ? /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: String(value),
+            onChange: (e) => setValue(e.target.value),
+            className: "w-full px-3 py-2 text-sm rounded border border-theme-border bg-theme-secondary text-theme-primary focus:outline-none focus:ring-2 focus:ring-accent-primary",
+            children: [
+              /* @__PURE__ */ jsx2("option", { value: "", children: "Select..." }),
+              filterOptions.map((opt) => /* @__PURE__ */ jsx2("option", { value: String(opt.value), children: opt.label }, String(opt.value)))
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "block text-xs text-theme-muted mb-1", children: "Operator" }),
+            /* @__PURE__ */ jsx2(
+              "select",
+              {
+                value: operator,
+                onChange: (e) => setOperator(e.target.value),
+                className: "w-full px-3 py-2 text-sm rounded border border-theme-border bg-theme-secondary text-theme-primary focus:outline-none focus:ring-2 focus:ring-accent-primary",
+                children: operators.map((op) => /* @__PURE__ */ jsx2("option", { value: op, children: OPERATOR_LABELS[op] }, op))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "block text-xs text-theme-muted mb-1", children: "Value" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: filterType === "number" ? "number" : "text",
+                value,
+                onChange: (e) => setValue(e.target.value),
+                onKeyDown: handleKeyDown,
+                placeholder: `Filter ${columnHeader}...`,
+                className: "w-full px-3 py-2 text-sm rounded border border-theme-border bg-theme-secondary text-theme-primary focus:outline-none focus:ring-2 focus:ring-accent-primary",
+                autoFocus: true
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "filter-popup-footer px-4 py-3 border-t border-theme-border flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: handleClear,
+              className: "px-3 py-1.5 text-sm text-theme-muted hover:text-theme-primary transition-colors",
+              children: translations.clearFilter
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: handleApply,
+              className: "px-4 py-1.5 text-sm bg-accent-primary text-white rounded hover:opacity-90 transition-opacity",
+              children: translations.apply
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/GridHeader/GridHeader.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var FilterIcon = ({ active = false }) => /* @__PURE__ */ jsx3(
+  "svg",
+  {
+    className: `w-3.5 h-3.5 ${active ? "text-accent-primary" : "text-theme-muted"}`,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    children: /* @__PURE__ */ jsx3(
+      "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"
+      }
+    )
+  }
+);
+var SortIcon = ({ direction }) => /* @__PURE__ */ jsx3(
+  "svg",
+  {
+    className: `w-3.5 h-3.5 ${direction ? "text-accent-primary" : "text-theme-muted"}`,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    children: direction === "asc" ? /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" }) : direction === "desc" ? /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) : /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" })
+  }
+);
+var ALIGN_CLASSES = {
+  left: "text-left justify-start",
+  center: "text-center justify-center",
+  right: "text-right justify-end"
+};
+function HeaderCell({
+  column,
+  columnState,
+  sortDirection,
+  sortIndex,
+  isMultiSort = false,
+  enableSort = true,
+  enableFilter = true,
+  enableDragDrop = true,
+  enableResize = true,
+  hasFilter = false,
+  isDragging = false,
+  isDragOver = false,
+  onSort,
+  onFilterOpen,
+  onResizeStart,
+  dragHandleProps,
+  dropTargetProps
+}) {
+  const isSortable = enableSort && column.sortable !== false;
+  const isFilterable = enableFilter && column.filterable !== false;
+  const isDraggable = enableDragDrop && column.draggable !== false;
+  const isResizable = enableResize && column.resizable !== false;
+  const headerContent = useMemo8(() => {
+    if (typeof column.header === "function") {
+      return column.header();
+    }
+    return column.header;
+  }, [column.header]);
+  const handleClick = useCallback7(() => {
+    if (isSortable) {
+      onSort == null ? void 0 : onSort();
+    }
+  }, [isSortable, onSort]);
+  const handleFilterClick = useCallback7(
+    (e) => {
+      e.stopPropagation();
+      onFilterOpen == null ? void 0 : onFilterOpen();
+    },
+    [onFilterOpen]
+  );
+  const cellClasses = useMemo8(() => {
+    const classes = [
+      "grid-header-cell",
+      "relative",
+      "flex",
+      "items-center",
+      "gap-2",
+      "px-4",
+      "py-3",
+      "font-medium",
+      "text-sm",
+      "text-theme-secondary",
+      "select-none",
+      "border-b",
+      "border-theme-border",
+      "transition-colors",
+      ALIGN_CLASSES[column.align || "left"]
+    ];
+    if (isSortable) {
+      classes.push("cursor-pointer", "hover:text-theme-primary", "hover:bg-theme-hover");
+    }
+    if (isDragging) {
+      classes.push("opacity-50");
+    }
+    if (isDragOver) {
+      classes.push("bg-accent-primary/10", "border-l-2", "border-l-accent-primary");
+    }
+    return classes.join(" ");
+  }, [column.align, isSortable, isDragging, isDragOver]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `${cellClasses} ${column.headerClassName || ""} ${column.sticky ? "shadow-[2px_0_4px_-2px_rgba(0,0,0,0.2)]" : ""}`,
+      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
+      },
+      role: "columnheader",
+      "aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none",
+      onClick: handleClick,
+      ...isDraggable ? { ...dragHandleProps, ...dropTargetProps } : {},
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "grid-header-content truncate flex-1", children: headerContent }),
+        isSortable && /* @__PURE__ */ jsxs2("span", { className: "grid-header-sort flex items-center gap-0.5", children: [
+          /* @__PURE__ */ jsx3(SortIcon, { direction: sortDirection != null ? sortDirection : null }),
+          isMultiSort && sortIndex !== void 0 && sortIndex >= 0 && sortDirection && /* @__PURE__ */ jsx3("span", { className: "text-xs text-theme-muted", children: sortIndex + 1 })
+        ] }),
+        isFilterable && /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: handleFilterClick,
+            className: "grid-header-filter p-1 rounded hover:bg-theme-tertiary",
+            "aria-label": "Filter column",
+            children: /* @__PURE__ */ jsx3(FilterIcon, { active: hasFilter })
+          }
+        ),
+        isResizable && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "grid-header-resize absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-accent-primary",
+            onMouseDown: onResizeStart,
+            onClick: (e) => e.stopPropagation()
+          }
+        )
+      ]
+    }
+  );
+}
+function GridHeader({
+  columns,
+  columnStates,
+  className = "",
+  style,
+  sticky = true,
+  enableSort = true,
+  enableFilter = true,
+  enableDragDrop = true,
+  enableResize = true,
+  enableSelection = false,
+  allSelected = false,
+  someSelected = false,
+  onSelectAll,
+  onSort,
+  onFilterOpen,
+  getSortDirection
+}) {
+  const { state, actions } = useTableContext();
+  const dragDrop = useDragDrop();
+  const [resizingColumn, setResizingColumn] = useState4(null);
+  const [activeFilterColumn, setActiveFilterColumn] = useState4(null);
+  const filterButtonRefs = useRef3(/* @__PURE__ */ new Map());
+  const resizeStartX = useRef3(0);
+  const resizeStartWidth = useRef3(0);
+  const handleFilterClick = useCallback7((columnId) => {
+    setActiveFilterColumn(activeFilterColumn === columnId ? null : columnId);
+  }, [activeFilterColumn]);
+  const handleFilterApply = useCallback7((columnId, value, operator) => {
+    actions.setFilter(columnId, value, operator);
+    setActiveFilterColumn(null);
+  }, [actions]);
+  const handleFilterClear = useCallback7((columnId) => {
+    actions.removeFilter(columnId);
+    setActiveFilterColumn(null);
+  }, [actions]);
+  const handleFilterClose = useCallback7(() => {
+    setActiveFilterColumn(null);
+  }, []);
+  const visibleColumns = useMemo8(() => {
+    return columns.filter((col) => {
+      const colState = columnStates.find((cs) => cs.id === col.id);
+      return (colState == null ? void 0 : colState.visible) !== false;
+    }).sort((a, b) => {
+      var _a, _b;
+      const aState = columnStates.find((cs) => cs.id === a.id);
+      const bState = columnStates.find((cs) => cs.id === b.id);
+      return ((_a = aState == null ? void 0 : aState.order) != null ? _a : 0) - ((_b = bState == null ? void 0 : bState.order) != null ? _b : 0);
+    });
+  }, [columns, columnStates]);
+  const handleResizeStart = useCallback7(
+    (columnId, currentWidth) => (event) => {
+      event.preventDefault();
+      setResizingColumn(columnId);
+      resizeStartX.current = event.clientX;
+      resizeStartWidth.current = currentWidth;
+      const handleMouseMove = (e) => {
+        const delta = e.clientX - resizeStartX.current;
+        const newWidth = Math.max(
+          MIN_COLUMN_WIDTH,
+          Math.min(MAX_COLUMN_WIDTH, resizeStartWidth.current + delta)
+        );
+        actions.resizeColumn(columnId, newWidth);
+      };
+      const handleMouseUp = () => {
+        setResizingColumn(null);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [actions]
+  );
+  const headerClasses = useMemo8(() => {
+    const classes = ["grid-header", "flex", "bg-theme-secondary"];
+    if (sticky) {
+      classes.push("sticky", "top-0", "z-10");
+    }
+    return classes.join(" ");
+  }, [sticky]);
+  return /* @__PURE__ */ jsxs2("div", { className: `${headerClasses} ${className}`, style, role: "row", children: [
+    enableSelection && /* @__PURE__ */ jsx3("div", { className: "grid-header-select flex items-center px-2 border-b border-theme-border", children: /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "checkbox",
+        checked: allSelected,
+        ref: (el) => {
+          if (el) el.indeterminate = someSelected && !allSelected;
+        },
+        onChange: onSelectAll,
+        className: "w-4 h-4 rounded border-theme-border",
+        "aria-label": "Select all rows"
+      }
+    ) }),
+    visibleColumns.map((col, index) => {
+      const colState = columnStates.find((cs) => cs.id === col.id) || {
+        id: col.id,
+        visible: true,
+        width: 150,
+        order: index,
+        pinned: null
+      };
+      const sortDir = getSortDirection ? getSortDirection(col.id) : null;
+      const sortIdx = state.sorting.findIndex((s) => s.columnId === col.id);
+      const hasFilter = state.filters.some((f) => f.columnId === col.id);
+      const existingFilter = state.filters.find((f) => f.columnId === col.id);
+      const headerText = typeof col.header === "string" ? col.header : col.id;
+      return /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx3(
+          HeaderCell,
+          {
+            column: col,
+            columnState: colState,
+            sortDirection: sortDir,
+            sortIndex: sortIdx,
+            isMultiSort: state.sorting.length > 1,
+            enableSort,
+            enableFilter,
+            enableDragDrop,
+            enableResize,
+            hasFilter,
+            isDragging: dragDrop.draggingColumnId === col.id,
+            isDragOver: dragDrop.dragOverColumnId === col.id,
+            onSort: () => actions.toggleSorting(col.id),
+            onFilterOpen: () => handleFilterClick(col.id),
+            onResizeStart: handleResizeStart(col.id, colState.width),
+            dragHandleProps: dragDrop.getDragHandleProps(col.id),
+            dropTargetProps: dragDrop.getDropTargetProps(col.id)
+          }
+        ),
+        activeFilterColumn === col.id && /* @__PURE__ */ jsx3(
+          FilterPopup,
+          {
+            columnId: col.id,
+            columnHeader: headerText,
+            filterType: col.filterType || "text",
+            filterOptions: col.filterOptions,
+            currentValue: existingFilter == null ? void 0 : existingFilter.value,
+            currentOperator: existingFilter == null ? void 0 : existingFilter.operator,
+            onApply: (value, operator) => handleFilterApply(col.id, value, operator),
+            onClear: () => handleFilterClear(col.id),
+            onClose: handleFilterClose
+          }
+        )
+      ] }, col.id);
+    })
+  ] });
+}
+
+// src/components/GridBody/GridBody.tsx
+import { useCallback as useCallback10 } from "react";
+
+// src/components/GridRow/GridRow.tsx
+import { useCallback as useCallback9, useMemo as useMemo10, useState as useState5 } from "react";
+
+// 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";
+var ALIGN_CLASSES2 = {
+  left: "text-left justify-start",
+  center: "text-center justify-center",
+  right: "text-right justify-end"
+};
+function GridCell({
+  column,
+  row,
+  rowIndex,
+  value,
+  width,
+  align = "left",
+  className = "",
+  style,
+  showLabel = false,
+  labelText,
+  sticky,
+  stickyOffset = 0,
+  onClick
+}) {
+  const handleClick = useCallback8(
+    (e) => {
+      if (onClick) {
+        e.stopPropagation();
+        onClick({
+          row,
+          rowIndex,
+          columnId: column.id,
+          value
+        });
+      }
+    },
+    [onClick, row, rowIndex, column.id, value]
+  );
+  const formattedValue = useMemo9(() => {
+    if (column.render) {
+      return column.render(value, row, rowIndex);
+    }
+    if (value === null || value === void 0) {
+      return "-";
+    }
+    if (typeof value === "boolean") {
+      return value ? "Yes" : "No";
+    }
+    if (value instanceof Date) {
+      return value.toLocaleDateString();
+    }
+    return String(value);
+  }, [column, row, rowIndex, value]);
+  const cellStyle = useMemo9(() => {
+    const baseStyle = { ...style };
+    if (width !== void 0) {
+      baseStyle.width = typeof width === "number" ? `${width}px` : width;
+      baseStyle.minWidth = baseStyle.width;
+      baseStyle.maxWidth = baseStyle.width;
+    }
+    if (sticky) {
+      baseStyle.position = "sticky";
+      baseStyle.zIndex = 1;
+      baseStyle.backgroundColor = "var(--bg-primary, #1e1e1e)";
+      if (sticky === "left") {
+        baseStyle.left = stickyOffset;
+      } else if (sticky === "right") {
+        baseStyle.right = stickyOffset;
+      }
+    }
+    return baseStyle;
+  }, [style, width, sticky, stickyOffset]);
+  const alignClass = ALIGN_CLASSES2[align];
+  const stickyClasses = sticky ? "shadow-[2px_0_4px_-2px_rgba(0,0,0,0.2)]" : "";
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `
+        grid-cell
+        px-4 py-3
+        flex items-center
+        ${alignClass}
+        ${stickyClasses}
+        ${onClick ? "cursor-pointer hover:bg-theme-hover" : ""}
+        ${column.cellClassName || ""}
+        ${className}
+      `.trim(),
+      style: { ...cellStyle, ...column.cellStyle },
+      role: "cell",
+      onClick: onClick ? handleClick : void 0,
+      children: [
+        showLabel && labelText && /* @__PURE__ */ jsxs3("span", { className: "grid-cell-label font-medium text-theme-muted mr-2 text-sm", children: [
+          labelText,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx4("span", { className: "grid-cell-value truncate", children: formattedValue })
+      ]
+    }
+  );
+}
+
+// src/components/GridRow/GridRow.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function GridRow({
+  row,
+  rowIndex,
+  columns,
+  columnStates,
+  isSelected = false,
+  isExpanded = false,
+  isDisabled = false,
+  isMobile = false,
+  showMobileLabels = true,
+  className = "",
+  style,
+  onClick,
+  onDoubleClick,
+  onContextMenu,
+  onCellClick,
+  onSelect,
+  onExpand,
+  enableSelection = false,
+  enableExpansion = false,
+  renderExpansion,
+  getRowId
+}) {
+  const [isHovered, setIsHovered] = useState5(false);
+  const handleClick = useCallback9(() => {
+    if (isDisabled) return;
+    onClick == null ? void 0 : onClick(row, rowIndex);
+  }, [onClick, row, rowIndex, isDisabled]);
+  const handleDoubleClick = useCallback9(() => {
+    if (isDisabled) return;
+    onDoubleClick == null ? void 0 : onDoubleClick(row, rowIndex);
+  }, [onDoubleClick, row, rowIndex, isDisabled]);
+  const handleContextMenu = useCallback9(
+    (event) => {
+      if (isDisabled) return;
+      onContextMenu == null ? void 0 : onContextMenu(row, rowIndex, event);
+    },
+    [onContextMenu, row, rowIndex, isDisabled]
+  );
+  const handleSelectChange = useCallback9(() => {
+    if (isDisabled) return;
+    onSelect == null ? void 0 : onSelect(!isSelected);
+  }, [onSelect, isSelected, isDisabled]);
+  const handleExpandToggle = useCallback9(() => {
+    if (isDisabled) return;
+    onExpand == null ? void 0 : onExpand(!isExpanded);
+  }, [onExpand, isExpanded, isDisabled]);
+  const visibleColumns = useMemo10(() => {
+    return columns.filter((col) => {
+      const state = columnStates.find((cs) => cs.id === col.id);
+      if ((state == null ? void 0 : state.visible) === false) return false;
+      if (isMobile && col.hiddenOnMobile) return false;
+      return true;
+    }).sort((a, b) => {
+      var _a, _b;
+      const aState = columnStates.find((cs) => cs.id === a.id);
+      const bState = columnStates.find((cs) => cs.id === b.id);
+      return ((_a = aState == null ? void 0 : aState.order) != null ? _a : 0) - ((_b = bState == null ? void 0 : bState.order) != null ? _b : 0);
+    });
+  }, [columns, columnStates, isMobile]);
+  const getCellValue = useCallback9(
+    (col) => {
+      const accessor = col.accessor;
+      if (typeof accessor === "function") {
+        return accessor(row);
+      }
+      return row[accessor];
+    },
+    [row]
+  );
+  const rowClasses = useMemo10(() => {
+    const classes = [
+      "grid-row",
+      "border-b",
+      "border-theme-border",
+      "transition-colors",
+      "duration-150"
+    ];
+    if (isHovered && !isDisabled) {
+      classes.push("bg-theme-hover");
+    }
+    if (isSelected) {
+      classes.push("bg-accent-primary/10");
+    }
+    if (isDisabled) {
+      classes.push("opacity-50", "cursor-not-allowed");
+    } else if (onClick) {
+      classes.push("cursor-pointer");
+    }
+    if (isMobile) {
+      classes.push("flex", "flex-wrap", "gap-2", "p-4");
+    } else {
+      classes.push("flex", "items-stretch");
+    }
+    return classes.join(" ");
+  }, [isHovered, isSelected, isDisabled, onClick, isMobile]);
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: `${rowClasses} ${className}`,
+        style,
+        role: "row",
+        "aria-selected": isSelected,
+        "aria-disabled": isDisabled,
+        onClick: handleClick,
+        onDoubleClick: handleDoubleClick,
+        onContextMenu: handleContextMenu,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          enableSelection && /* @__PURE__ */ jsx5("div", { className: "grid-row-select flex items-center px-2", children: /* @__PURE__ */ jsx5(
+            "input",
+            {
+              type: "checkbox",
+              checked: isSelected,
+              onChange: handleSelectChange,
+              disabled: isDisabled,
+              className: "w-4 h-4 rounded border-theme-border",
+              "aria-label": "Select row"
+            }
+          ) }),
+          enableExpansion && renderExpansion && /* @__PURE__ */ jsx5("div", { className: "grid-row-expand flex items-center px-2", children: /* @__PURE__ */ jsx5(
+            "button",
+            {
+              onClick: handleExpandToggle,
+              disabled: isDisabled,
+              className: "w-6 h-6 flex items-center justify-center rounded hover:bg-theme-tertiary",
+              "aria-label": isExpanded ? "Collapse row" : "Expand row",
+              "aria-expanded": isExpanded,
+              children: /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  className: `transform transition-transform duration-200 ${isExpanded ? "rotate-90" : ""}`,
+                  children: ">"
+                }
+              )
+            }
+          ) }),
+          visibleColumns.map((col, colIndex) => {
+            var _a, _b;
+            const colState = columnStates.find((cs) => cs.id === col.id);
+            const width = isMobile ? "100%" : colState == null ? void 0 : colState.width;
+            let stickyOffset = 0;
+            if (col.sticky === "left") {
+              for (let i = 0; i < colIndex; i++) {
+                const prevCol = visibleColumns[i];
+                if (prevCol.sticky === "left") {
+                  const prevState = columnStates.find((cs) => cs.id === prevCol.id);
+                  stickyOffset += (_a = prevState == null ? void 0 : prevState.width) != null ? _a : 150;
+                }
+              }
+            }
+            if (col.sticky === "right") {
+              for (let i = visibleColumns.length - 1; i > colIndex; i--) {
+                const nextCol = visibleColumns[i];
+                if (nextCol.sticky === "right") {
+                  const nextState = columnStates.find((cs) => cs.id === nextCol.id);
+                  stickyOffset += (_b = nextState == null ? void 0 : nextState.width) != null ? _b : 150;
+                }
+              }
+            }
+            return /* @__PURE__ */ jsx5(
+              GridCell,
+              {
+                column: col,
+                row,
+                rowIndex,
+                value: getCellValue(col),
+                width,
+                align: col.align,
+                showLabel: isMobile && showMobileLabels && col.showLabelOnMobile !== false,
+                labelText: typeof col.header === "string" ? col.header : col.id,
+                className: isMobile ? "w-full sm:w-auto flex-shrink-0" : "flex-shrink-0",
+                sticky: col.sticky,
+                stickyOffset,
+                onClick: onCellClick
+              },
+              col.id
+            );
+          })
+        ]
+      }
+    ),
+    isExpanded && renderExpansion && /* @__PURE__ */ jsx5("div", { className: "grid-row-expansion border-b border-theme-border bg-theme-secondary p-4", children: renderExpansion(row) })
+  ] });
+}
+
+// src/components/GridBody/GridBody.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function GridBody({
+  data,
+  columns,
+  columnStates,
+  className = "",
+  style,
+  isMobile = false,
+  showMobileLabels = true,
+  enableSelection = false,
+  enableExpansion = false,
+  selectedIds = /* @__PURE__ */ new Set(),
+  expandedIds = /* @__PURE__ */ new Set(),
+  onRowClick,
+  onRowDoubleClick,
+  onCellClick,
+  onRowSelect,
+  onRowExpand,
+  getRowId,
+  getRowClassName,
+  getRowStyle,
+  isRowDisabled,
+  renderRowExpansion
+}) {
+  const handleRowSelect = useCallback10(
+    (row) => (selected) => {
+      const id = getRowId(row);
+      onRowSelect == null ? void 0 : onRowSelect(id, selected);
+    },
+    [getRowId, onRowSelect]
+  );
+  const handleRowExpand = useCallback10(
+    (row) => (expanded) => {
+      const id = getRowId(row);
+      onRowExpand == null ? void 0 : onRowExpand(id, expanded);
+    },
+    [getRowId, onRowExpand]
+  );
+  if (data.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6("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);
+    const isExpanded = expandedIds.has(rowId);
+    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(
+      GridRow,
+      {
+        row,
+        rowIndex: index,
+        columns,
+        columnStates,
+        isSelected,
+        isExpanded,
+        isDisabled,
+        isMobile,
+        showMobileLabels,
+        className: rowClassName,
+        style: rowStyle,
+        onClick: onRowClick,
+        onDoubleClick: onRowDoubleClick,
+        onCellClick,
+        onSelect: handleRowSelect(row),
+        onExpand: handleRowExpand(row),
+        enableSelection,
+        enableExpansion: enableExpansion && !!renderRowExpansion,
+        renderExpansion: renderRowExpansion,
+        getRowId
+      },
+      rowId
+    );
+  }) });
+}
+
+// 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 flex flex-wrap items-center justify-between gap-4 px-4 py-3 border-t border-theme-border ${className}`,
+      style,
+      role: "navigation",
+      "aria-label": "Pagination",
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-info flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-range text-sm text-theme-secondary", children: [
+            startItem,
+            "-",
+            endItem,
+            " ",
+            translations.of,
+            " ",
+            totalItems
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-size flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs5("label", { htmlFor: "page-size", className: "text-sm text-theme-muted", children: [
+              translations.rowsPerPage,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx7(
+              "select",
+              {
+                id: "page-size",
+                value: pageSize,
+                onChange: handlePageSizeChange,
+                className: "px-2 py-1 text-sm rounded border border-theme-border bg-theme-primary text-theme-primary focus:outline-none focus:ring-2 focus:ring-accent-primary",
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx7("option", { value: size, children: size }, size))
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-controls flex items-center gap-1", children: [
+          showFirstLast && /* @__PURE__ */ jsx7(
+            "button",
+            {
+              onClick: handleFirstPage,
+              disabled: !canGoPrevious,
+              className: "p-2 rounded hover:bg-theme-hover disabled:opacity-50 disabled:cursor-not-allowed text-theme-secondary",
+              "aria-label": translations.first,
+              children: "<<"
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              onClick: handlePreviousPage,
+              disabled: !canGoPrevious,
+              className: "p-2 rounded hover:bg-theme-hover disabled:opacity-50 disabled:cursor-not-allowed text-theme-secondary",
+              "aria-label": translations.previous,
+              children: "<"
+            }
+          ),
+          showPageNumbers && /* @__PURE__ */ jsx7("div", { className: "grid-pagination-pages flex items-center gap-1", 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 transition-colors ${pageNum === page ? "bg-accent-primary text-white" : "hover:bg-theme-hover text-theme-secondary"}`,
+                "aria-current": pageNum === page ? "page" : void 0,
+                children: pageNum
+              },
+              pageNum
+            )
+          ) }),
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              onClick: handleNextPage,
+              disabled: !canGoNext,
+              className: "p-2 rounded hover:bg-theme-hover disabled:opacity-50 disabled:cursor-not-allowed text-theme-secondary",
+              "aria-label": translations.next,
+              children: ">"
+            }
+          ),
+          showFirstLast && /* @__PURE__ */ jsx7(
+            "button",
+            {
+              onClick: handleLastPage,
+              disabled: !canGoNext,
+              className: "p-2 rounded hover:bg-theme-hover disabled:opacity-50 disabled:cursor-not-allowed text-theme-secondary",
+              "aria-label": translations.last,
+              children: ">>"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/Skeleton/Skeleton.tsx
+import { jsx as jsx8, jsxs as jsxs6 } 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(
+    "div",
+    {
+      className: "grid-skeleton-cell px-4 py-3 flex-shrink-0",
+      style: { width: widthStyle },
+      children: /* @__PURE__ */ jsx8(
+        "div",
+        {
+          className: `rounded bg-theme-tertiary ${animate ? "animate-pulse" : ""}`,
+          style: { height: `${height}px`, width: "80%" }
+        }
+      )
+    }
+  );
+}
+function SkeletonRow({ columns, columnWidths, height = 16, animate = true }) {
+  return /* @__PURE__ */ jsx8("div", { className: "grid-skeleton-row flex border-b border-theme-border", children: Array.from({ length: columns }).map((_, index) => {
+    var _a;
+    return /* @__PURE__ */ jsx8(
+      SkeletonCell,
+      {
+        width: (_a = columnWidths == null ? void 0 : columnWidths[index]) != null ? _a : DEFAULT_COLUMN_WIDTH,
+        height,
+        animate
+      },
+      index
+    );
+  }) });
+}
+function Skeleton({
+  rows = SKELETON_ROWS,
+  columns = 4,
+  columnWidths,
+  rowHeight = 16,
+  className = "",
+  style,
+  showHeader = true,
+  animate = true
+}) {
+  return /* @__PURE__ */ jsxs6("div", { className: `grid-skeleton ${className}`, style, role: "status", "aria-label": "Loading", children: [
+    showHeader && /* @__PURE__ */ jsx8("div", { className: "grid-skeleton-header flex border-b border-theme-border bg-theme-secondary", children: Array.from({ length: columns }).map((_, index) => {
+      var _a;
+      return /* @__PURE__ */ jsx8(
+        "div",
+        {
+          className: "px-4 py-3 flex-shrink-0",
+          style: { width: (_a = columnWidths == null ? void 0 : columnWidths[index]) != null ? _a : DEFAULT_COLUMN_WIDTH },
+          children: /* @__PURE__ */ jsx8(
+            "div",
+            {
+              className: `rounded bg-theme-tertiary ${animate ? "animate-pulse" : ""}`,
+              style: { height: "12px", width: "60%" }
+            }
+          )
+        },
+        index
+      );
+    }) }),
+    /* @__PURE__ */ jsx8("div", { className: "grid-skeleton-body", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx8(
+      SkeletonRow,
+      {
+        columns,
+        columnWidths,
+        height: rowHeight,
+        animate
+      },
+      index
+    )) })
+  ] });
+}
+
+// src/components/EmptyState/EmptyState.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function EmptyState({
+  title,
+  description,
+  icon,
+  action,
+  className = "",
+  style
+}) {
+  const { state } = useTableContext();
+  const { translations } = state;
+  const displayTitle = title != null ? title : translations.empty;
+  const displayDescription = description != null ? description : translations.noResults;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: `grid-empty-state flex flex-col items-center justify-center py-16 px-8 text-center ${className}`,
+      style,
+      role: "status",
+      children: [
+        icon && /* @__PURE__ */ jsx9("div", { className: "grid-empty-icon mb-4 text-theme-muted text-4xl", children: icon }),
+        !icon && /* @__PURE__ */ jsx9("div", { className: "grid-empty-icon mb-4 text-theme-muted", children: /* @__PURE__ */ jsx9(
+          "svg",
+          {
+            className: "w-16 h-16",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ jsx9(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 1,
+                d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx9("h3", { className: "grid-empty-title text-lg font-medium text-theme-primary mb-2", children: displayTitle }),
+        displayDescription && /* @__PURE__ */ jsx9("p", { className: "grid-empty-description text-sm text-theme-muted max-w-sm mb-4", children: displayDescription }),
+        action && /* @__PURE__ */ jsx9("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";
+function DrawerHeader({ title, onClose }) {
+  return /* @__PURE__ */ jsxs8("div", { className: "drawer-header flex items-center justify-between px-4 py-3 border-b border-theme-border", children: [
+    /* @__PURE__ */ jsx10("h3", { className: "text-lg font-medium text-theme-primary", children: title }),
+    /* @__PURE__ */ jsx10(
+      "button",
+      {
+        onClick: onClose,
+        className: "p-2 rounded hover:bg-theme-hover text-theme-secondary",
+        "aria-label": "Close",
+        children: "X"
+      }
+    )
+  ] });
+}
+function FilterContent() {
+  const { state, actions } = useTableContext();
+  const { translations, columns, filters } = state;
+  const handleClearAll = useCallback12(() => {
+    actions.clearFilters();
+  }, [actions]);
+  return /* @__PURE__ */ jsxs8("div", { className: "drawer-filter-content p-4 space-y-4", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxs8("span", { className: "text-sm text-theme-muted", children: [
+        filters.length,
+        " ",
+        translations.filter,
+        "(s) active"
+      ] }),
+      filters.length > 0 && /* @__PURE__ */ jsx10(
+        "button",
+        {
+          onClick: handleClearAll,
+          className: "text-sm text-accent-primary hover:underline",
+          children: translations.clearAll
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10("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(
+          "input",
+          {
+            type: "text",
+            value: (_a = existingFilter == null ? void 0 : existingFilter.value) != null ? _a : "",
+            onChange: (e) => {
+              if (e.target.value) {
+                actions.setFilter(col.id, e.target.value);
+              } else {
+                actions.removeFilter(col.id);
+              }
+            },
+            placeholder: `${translations.filter} ${headerText}...`,
+            className: "w-full px-3 py-2 text-sm rounded border border-theme-border bg-theme-primary text-theme-primary focus:outline-none focus:ring-2 focus:ring-accent-primary"
+          }
+        )
+      ] }, col.id);
+    }) })
+  ] });
+}
+function SortContent() {
+  const { state, actions } = useTableContext();
+  const { translations, columns, sorting } = state;
+  const handleClearAll = useCallback12(() => {
+    actions.clearSorting();
+  }, [actions]);
+  return /* @__PURE__ */ jsxs8("div", { className: "drawer-sort-content p-4 space-y-4", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxs8("span", { className: "text-sm text-theme-muted", children: [
+        sorting.length,
+        " ",
+        translations.sort,
+        "(s) active"
+      ] }),
+      sorting.length > 0 && /* @__PURE__ */ jsx10(
+        "button",
+        {
+          onClick: handleClearAll,
+          className: "text-sm text-accent-primary hover:underline",
+          children: translations.clearAll
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10("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(
+        "button",
+        {
+          onClick: () => actions.toggleSorting(col.id),
+          className: `w-full flex items-center justify-between px-3 py-2 rounded border transition-colors ${sortItem ? "border-accent-primary bg-accent-primary/10" : "border-theme-border hover:bg-theme-hover"}`,
+          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 : "-" })
+          ]
+        },
+        col.id
+      );
+    }) })
+  ] });
+}
+function ColumnsContent() {
+  const { state, actions } = useTableContext();
+  const { translations, columns, columnStates } = state;
+  return /* @__PURE__ */ jsxs8("div", { className: "drawer-columns-content p-4 space-y-4", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx10("span", { className: "text-sm text-theme-muted", children: translations.showColumns }),
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          onClick: actions.resetColumns,
+          className: "text-sm text-accent-primary hover:underline",
+          children: translations.resetColumns
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10("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__ */ jsxs8(
+        "label",
+        {
+          className: "flex items-center gap-3 px-3 py-2 rounded hover:bg-theme-hover cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsx10(
+              "input",
+              {
+                type: "checkbox",
+                checked: isVisible,
+                onChange: () => actions.toggleColumnVisibility(col.id),
+                className: "w-4 h-4 rounded border-theme-border"
+              }
+            ),
+            /* @__PURE__ */ jsx10("span", { className: "text-sm text-theme-primary", children: headerText })
+          ]
+        },
+        col.id
+      );
+    }) })
+  ] });
+}
+var DRAWER_TITLES = {
+  filter: "Filters",
+  sort: "Sort",
+  columns: "Columns"
+};
+function MobileDrawer({
+  isOpen,
+  content,
+  onClose,
+  className = "",
+  style
+}) {
+  useEffect4(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  useEffect4(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+  if (!isOpen || !content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs8("div", { className: `mobile-drawer-container fixed inset-0 z-50 ${className}`, style, children: [
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: "mobile-drawer-overlay absolute inset-0 bg-black transition-opacity",
+        style: {
+          opacity: DRAWER_OVERLAY_OPACITY,
+          transitionDuration: `${DRAWER_ANIMATION_DURATION}ms`
+        },
+        onClick: onClose,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: "mobile-drawer absolute bottom-0 left-0 right-0 bg-theme-primary rounded-t-2xl shadow-2xl max-h-[80vh] overflow-hidden flex flex-col",
+        style: {
+          transitionDuration: `${DRAWER_ANIMATION_DURATION}ms`
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "drawer-title",
+        children: [
+          /* @__PURE__ */ jsx10(DrawerHeader, { title: DRAWER_TITLES[content], onClose }),
+          /* @__PURE__ */ jsxs8("div", { className: "drawer-content flex-1 overflow-y-auto", children: [
+            content === "filter" && /* @__PURE__ */ jsx10(FilterContent, {}),
+            content === "sort" && /* @__PURE__ */ jsx10(SortContent, {}),
+            content === "columns" && /* @__PURE__ */ jsx10(ColumnsContent, {})
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/GridTable/GridTable.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function GridTableContent({
+  data,
+  columns,
+  loading = false,
+  error = null,
+  emptyContent,
+  loadingContent,
+  errorContent,
+  dimensions,
+  classNames = {},
+  styles = {},
+  showMobileLabels = true,
+  enableDragDrop = true,
+  enableColumnResize = true,
+  enableRowSelection = false,
+  enableRowExpansion = false,
+  stickyHeader = true,
+  showPagination = true,
+  showFilter = true,
+  showGlobalFilter = true,
+  onRowClick,
+  onRowDoubleClick,
+  onCellClick,
+  onRowSelect,
+  onSort,
+  onFilter: _onFilter,
+  onPageChange,
+  onError: _onError,
+  onRetry,
+  getRowId,
+  getRowClassName,
+  getRowStyle,
+  isRowDisabled,
+  renderRowExpansion,
+  renderHeader,
+  renderFooter,
+  className = "",
+  style
+}) {
+  const { state, actions, computed } = useTableContext();
+  const { shouldShowMobileView, breakpointValue } = useBreakpoint();
+  const getRowIdFn = useCallback13(
+    (row) => {
+      if (getRowId) return getRowId(row);
+      if ("id" in row) return row.id;
+      return data.indexOf(row);
+    },
+    [getRowId, data]
+  );
+  const handleRowSelect = useCallback13(
+    (id, selected) => {
+      if (selected) {
+        actions.selectRow(id);
+      } else {
+        actions.deselectRow(id);
+      }
+    },
+    [actions]
+  );
+  const handleRowExpand = useCallback13(
+    (id, expanded) => {
+      if (expanded) {
+        actions.expandRow(id);
+      } else {
+        actions.collapseRow(id);
+      }
+    },
+    [actions]
+  );
+  const handleFilterOpen = useCallback13(
+    (columnId) => {
+      if (shouldShowMobileView) {
+        actions.openMobileDrawer("filter");
+      } else {
+        actions.setActiveFilterColumn(columnId);
+      }
+    },
+    [shouldShowMobileView, actions]
+  );
+  const containerStyle = useMemo12(() => {
+    const baseStyle = { ...style, ...styles.root };
+    if (dimensions == null ? void 0 : dimensions.width) {
+      baseStyle.width = breakpointValue(dimensions.width, "auto");
+    }
+    if (dimensions == null ? void 0 : dimensions.height) {
+      baseStyle.height = breakpointValue(dimensions.height, "auto");
+    }
+    if (dimensions == null ? void 0 : dimensions.maxHeight) {
+      baseStyle.maxHeight = breakpointValue(dimensions.maxHeight, "none");
+    }
+    return baseStyle;
+  }, [style, styles.root, dimensions, breakpointValue]);
+  const columnWidths = useMemo12(() => {
+    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__ */ jsx11("div", { className: `grid-table-error ${classNames.root || ""} ${className}`, style: containerStyle, children: /* @__PURE__ */ jsx11(
+      EmptyState,
+      {
+        title: state.translations.errorLoading,
+        description: errorMessage,
+        action: onRetry && /* @__PURE__ */ jsx11(
+          "button",
+          {
+            onClick: onRetry,
+            className: "px-4 py-2 bg-accent-primary text-white rounded hover:bg-accent-primary/90",
+            children: state.translations.retry
+          }
+        )
+      }
+    ) });
+  }
+  if (loading) {
+    if (loadingContent) {
+      return /* @__PURE__ */ jsx11("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(
+      Skeleton,
+      {
+        rows: 5,
+        columns: columns.length,
+        columnWidths,
+        showHeader: true,
+        animate: true,
+        className: classNames.skeleton,
+        style: styles.skeleton
+      }
+    ) });
+  }
+  const isEmpty = computed.paginatedData.length === 0;
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: `grid-table bg-theme-primary rounded-lg border border-theme-border overflow-hidden ${classNames.root || ""} ${className}`,
+      style: containerStyle,
+      role: "table",
+      children: [
+        renderHeader && /* @__PURE__ */ jsx11("div", { className: "grid-table-custom-header", children: renderHeader() }),
+        showGlobalFilter && /* @__PURE__ */ jsxs9("div", { className: "grid-table-toolbar flex items-center gap-4 px-4 py-3 border-b border-theme-border", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex-1 relative", children: [
+            /* @__PURE__ */ jsx11(
+              "svg",
+              {
+                className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-muted",
+                fill: "none",
+                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" })
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              "input",
+              {
+                type: "text",
+                value: state.globalFilter,
+                onChange: (e) => actions.setGlobalFilter(e.target.value),
+                placeholder: state.translations.search,
+                className: "w-full pl-10 pr-3 py-2 text-sm rounded border border-theme-border bg-theme-secondary text-theme-primary focus:outline-none focus:ring-2 focus:ring-accent-primary"
+              }
+            ),
+            state.globalFilter && /* @__PURE__ */ jsx11(
+              "button",
+              {
+                onClick: () => actions.setGlobalFilter(""),
+                className: "absolute right-3 top-1/2 -translate-y-1/2 text-theme-muted hover:text-theme-primary",
+                "aria-label": "Clear search",
+                children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", 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" }) })
+              }
+            )
+          ] }),
+          state.filters.length > 0 && /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              onClick: () => actions.clearFilters(),
+              className: "flex items-center gap-2 px-3 py-2 text-sm rounded border border-theme-border hover:bg-theme-hover text-theme-secondary",
+              children: [
+                /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", 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__ */ jsxs9("span", { children: [
+                  state.filters.length,
+                  " filter",
+                  state.filters.length > 1 ? "s" : ""
+                ] })
+              ]
+            }
+          ),
+          shouldShowMobileView && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx11(
+              "button",
+              {
+                onClick: () => actions.openMobileDrawer("filter"),
+                className: "p-2 rounded border border-theme-border hover:bg-theme-hover",
+                "aria-label": state.translations.filter,
+                children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", 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" }) })
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              "button",
+              {
+                onClick: () => actions.openMobileDrawer("sort"),
+                className: "p-2 rounded border border-theme-border hover:bg-theme-hover",
+                "aria-label": state.translations.sort,
+                children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", 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" }) })
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              "button",
+              {
+                onClick: () => actions.openMobileDrawer("columns"),
+                className: "p-2 rounded border border-theme-border hover:bg-theme-hover",
+                "aria-label": state.translations.columns,
+                children: /* @__PURE__ */ jsx11("svg", { className: "w-4 h-4", 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" }) })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "grid-table-container overflow-auto", children: [
+          !shouldShowMobileView && /* @__PURE__ */ jsx11(
+            GridHeader,
+            {
+              columns,
+              columnStates: state.columnStates,
+              className: classNames.header,
+              style: styles.header,
+              sticky: stickyHeader,
+              enableSort: true,
+              enableFilter: showFilter,
+              enableDragDrop,
+              enableResize: enableColumnResize,
+              enableSelection: enableRowSelection,
+              allSelected: computed.allSelected,
+              someSelected: computed.someSelected,
+              onSelectAll: actions.selectAll,
+              onFilterOpen: handleFilterOpen,
+              getSortDirection: (colId) => {
+                var _a;
+                const sort = state.sorting.find((s) => s.columnId === colId);
+                return (_a = sort == null ? void 0 : sort.direction) != null ? _a : null;
+              }
+            }
+          ),
+          isEmpty ? emptyContent || /* @__PURE__ */ jsx11(
+            EmptyState,
+            {
+              className: classNames.empty,
+              style: styles.empty
+            }
+          ) : /* @__PURE__ */ jsx11(
+            GridBody,
+            {
+              data: computed.paginatedData,
+              columns,
+              columnStates: state.columnStates,
+              className: classNames.body,
+              style: styles.body,
+              isMobile: shouldShowMobileView,
+              showMobileLabels,
+              enableSelection: enableRowSelection,
+              enableExpansion: enableRowExpansion,
+              selectedIds: state.selectedIds,
+              expandedIds: state.expandedIds,
+              onRowClick,
+              onRowDoubleClick,
+              onCellClick,
+              onRowSelect: handleRowSelect,
+              onRowExpand: handleRowExpand,
+              getRowId: getRowIdFn,
+              getRowClassName,
+              getRowStyle,
+              isRowDisabled,
+              renderRowExpansion
+            }
+          )
+        ] }),
+        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);
+            }
+          }
+        ),
+        renderFooter && /* @__PURE__ */ jsx11("div", { className: "grid-table-custom-footer", children: renderFooter() }),
+        /* @__PURE__ */ jsx11(
+          MobileDrawer,
+          {
+            isOpen: state.showMobileDrawer,
+            content: state.mobileDrawerContent,
+            onClose: actions.closeMobileDrawer,
+            className: classNames.drawer,
+            style: styles.drawer
+          }
+        )
+      ]
+    }
+  );
+}
+function GridTable({
+  data,
+  columns,
+  loading = false,
+  error = null,
+  theme,
+  translations,
+  mobileBreakpoint = "tablet",
+  paginationConfig,
+  filterConfig,
+  sortConfig,
+  enableMultiSelect = false,
+  getRowId,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(
+    TableProvider,
+    {
+      data,
+      columns,
+      loading,
+      error,
+      theme,
+      translations,
+      mobileBreakpoint,
+      paginationConfig,
+      filterConfig,
+      sortConfig,
+      enableMultiSort: sortConfig == null ? void 0 : sortConfig.multiSort,
+      enableMultiSelect,
+      getRowId,
+      children: /* @__PURE__ */ jsx11(
+        GridTableContent,
+        {
+          data,
+          columns,
+          loading,
+          error,
+          getRowId,
+          ...props
+        }
+      )
+    }
+  );
+}
+export {
+  BREAKPOINTS,
+  BREAKPOINT_KEYS,
+  DEFAULT_COLUMN_WIDTH,
+  DEFAULT_LIGHT_THEME,
+  DEFAULT_PAGE_SIZE,
+  DEFAULT_PAGE_SIZES,
+  DEFAULT_TABLE_CONFIG,
+  DEFAULT_THEME,
+  DEFAULT_TRANSLATIONS,
+  DESKTOP_BREAKPOINT,
+  EmptyState,
+  GridBody,
+  GridCell,
+  GridHeader,
+  GridRow,
+  GridTable,
+  MAX_COLUMN_WIDTH,
+  MIN_COLUMN_WIDTH,
+  MOBILE_BREAKPOINT,
+  MobileDrawer,
+  Pagination,
+  RESPONSIVE_MODES,
+  Skeleton,
+  TABLET_BREAKPOINT,
+  TableContext,
+  TableProvider,
+  useBreakpoint,
+  useDragDrop,
+  useFilter,
+  usePagination,
+  useSort,
+  useTable,
+  useTableContext
+};