@forgedevstack/grid-table 1.0.0 → 1.0.2

package/dist/index.js

@@ -1133,7 +1133,7 @@ function FilterPopup({
     "div",
     {
       ref: popupRef,
-      className: `filter-popup absolute z-50 bg-theme-primary border border-theme-border rounded-lg shadow-xl min-w-[280px] ${className}`,
+      className: `filter-popup ${className}`,
       style: {
         top: (_a = position == null ? void 0 : position.top) != null ? _a : "100%",
         left: (_b = position == null ? void 0 : position.left) != null ? _b : 0,
@@ -1141,44 +1141,44 @@ function FilterPopup({
         ...style
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "filter-popup-header px-4 py-3 border-b border-theme-border", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium text-theme-primary", children: columnHeader }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "filter-popup-header", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "header-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "header-title", children: columnHeader }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "button",
             {
               onClick: onClose,
-              className: "p-1 rounded hover:bg-theme-hover text-theme-muted",
+              className: "header-close",
               "aria-label": "Close",
-              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "filter-popup-body p-4 space-y-4", children: filterType === "select" && filterOptions ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "filter-popup-body", children: filterType === "select" && filterOptions ? /* @__PURE__ */ (0, import_jsx_runtime2.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",
+            className: "w-full px-3 py-2 text-sm rounded",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: "Select..." }),
               filterOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: String(opt.value), children: opt.label }, String(opt.value)))
             ]
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs text-theme-muted mb-1", children: "Operator" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "filter-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Operator" }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "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",
+                className: "w-full px-3 py-2 text-sm rounded",
                 children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: op, children: OPERATOR_LABELS[op] }, op))
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs text-theme-muted mb-1", children: "Value" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "filter-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Value" }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "input",
               {
@@ -1187,18 +1187,18 @@ function FilterPopup({
                 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",
+                className: "w-full px-3 py-2 text-sm rounded",
                 autoFocus: true
               }
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "filter-popup-footer px-4 py-3 border-t border-theme-border flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "filter-popup-footer", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "button",
             {
               onClick: handleClear,
-              className: "px-3 py-1.5 text-sm text-theme-muted hover:text-theme-primary transition-colors",
+              className: "filter-clear",
               children: translations.clearFilter
             }
           ),
@@ -1206,7 +1206,7 @@ function FilterPopup({
             "button",
             {
               onClick: handleApply,
-              className: "px-4 py-1.5 text-sm bg-accent-primary text-white rounded hover:opacity-90 transition-opacity",
+              className: "filter-apply",
               children: translations.apply
             }
           )
@@ -1221,7 +1221,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var FilterIcon = ({ active = false }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "svg",
   {
-    className: `w-3.5 h-3.5 ${active ? "text-accent-primary" : "text-theme-muted"}`,
+    className: `icon-sm ${active ? "text-accent-primary" : "text-theme-muted"}`,
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor",
@@ -1239,7 +1239,7 @@ var FilterIcon = ({ active = false }) => /* @__PURE__ */ (0, import_jsx_runtime3
 var SortIcon = ({ direction }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "svg",
   {
-    className: `w-3.5 h-3.5 ${direction ? "text-accent-primary" : "text-theme-muted"}`,
+    className: `icon-sm ${direction ? "text-accent-primary" : "text-theme-muted"}`,
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor",
@@ -1296,36 +1296,23 @@ function HeaderCell({
   const cellClasses = (0, import_react9.useMemo)(() => {
     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");
+      classes.push("cursor-pointer");
     }
     if (isDragging) {
       classes.push("opacity-50");
     }
     if (isDragOver) {
-      classes.push("bg-accent-primary/10", "border-l-2", "border-l-accent-primary");
+      classes.push("bg-accent-primary/10");
     }
     return classes.join(" ");
   }, [column.align, isSortable, isDragging, isDragOver]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
-      className: `${cellClasses} ${column.headerClassName || ""} ${column.sticky ? "shadow-[2px_0_4px_-2px_rgba(0,0,0,0.2)]" : ""}`,
+      className: `${cellClasses} ${column.headerClassName || ""} ${column.sticky ? `sticky-${column.sticky}` : ""}`,
       style: {
         width: columnState.width,
         minWidth: column.minWidth || MIN_COLUMN_WIDTH,
@@ -1344,8 +1331,8 @@ function HeaderCell({
       onClick: handleClick,
       ...isDraggable ? { ...dragHandleProps, ...dropTargetProps } : {},
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "grid-header-content truncate flex-1", children: headerContent }),
-        isSortable && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "grid-header-sort flex items-center gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "grid-header-content", children: headerContent }),
+        isSortable && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "grid-header-sort", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SortIcon, { direction: sortDirection != null ? sortDirection : null }),
           isMultiSort && sortIndex !== void 0 && sortIndex >= 0 && sortDirection && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-theme-muted", children: sortIndex + 1 })
         ] }),
@@ -1353,7 +1340,7 @@ function HeaderCell({
           "button",
           {
             onClick: handleFilterClick,
-            className: "grid-header-filter p-1 rounded hover:bg-theme-tertiary",
+            className: "grid-header-filter",
             "aria-label": "Filter column",
             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FilterIcon, { active: hasFilter })
           }
@@ -1361,7 +1348,7 @@ function HeaderCell({
         isResizable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
-            className: "grid-header-resize absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-accent-primary",
+            className: "grid-header-resize",
             onMouseDown: onResizeStart,
             onClick: (e) => e.stopPropagation()
           }
@@ -1452,7 +1439,7 @@ function GridHeader({
     return classes.join(" ");
   }, [sticky]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `${headerClasses} ${className}`, style, role: "row", children: [
-    enableSelection && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid-header-select flex items-center px-2 border-b border-theme-border", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    enableSelection && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "grid-header-select", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "input",
       {
         type: "checkbox",
@@ -1461,7 +1448,7 @@ function GridHeader({
           if (el) el.indeterminate = someSelected && !allSelected;
         },
         onChange: onSelectAll,
-        className: "w-4 h-4 rounded border-theme-border",
+        className: "grid-header-checkbox",
         "aria-label": "Select all rows"
       }
     ) }),
@@ -1478,7 +1465,7 @@ function GridHeader({
       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__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", style: { position: "relative" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           HeaderCell,
           {
@@ -1598,17 +1585,15 @@ function GridCell({
     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)]" : "";
+  const stickyClass = sticky ? `sticky-${sticky}` : "";
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       className: `
         grid-cell
-        px-4 py-3
-        flex items-center
         ${alignClass}
-        ${stickyClasses}
-        ${onClick ? "cursor-pointer hover:bg-theme-hover" : ""}
+        ${stickyClass}
+        ${onClick ? "cursor-pointer" : ""}
         ${column.cellClassName || ""}
         ${className}
       `.trim(),
@@ -1616,7 +1601,7 @@ function GridCell({
       role: "cell",
       onClick: onClick ? handleClick : void 0,
       children: [
-        showLabel && labelText && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "grid-cell-label font-medium text-theme-muted mr-2 text-sm", children: [
+        showLabel && labelText && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "grid-cell-label", children: [
           labelText,
           ":"
         ] }),
@@ -1739,23 +1724,23 @@ function GridRow({
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          enableSelection && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid-row-select flex items-center px-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          enableSelection && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid-row-select", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
               type: "checkbox",
               checked: isSelected,
               onChange: handleSelectChange,
               disabled: isDisabled,
-              className: "w-4 h-4 rounded border-theme-border",
+              className: "grid-row-checkbox",
               "aria-label": "Select row"
             }
           ) }),
-          enableExpansion && renderExpansion && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid-row-expand flex items-center px-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          enableExpansion && renderExpansion && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid-row-expand", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               onClick: handleExpandToggle,
               disabled: isDisabled,
-              className: "w-6 h-6 flex items-center justify-center rounded hover:bg-theme-tertiary",
+              className: "grid-row-expand-button",
               "aria-label": isExpanded ? "Collapse row" : "Expand row",
               "aria-expanded": isExpanded,
               children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1801,7 +1786,7 @@ function GridRow({
                 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",
+                className: isMobile ? "w-full-sm flex-shrink-0" : "flex-shrink-0",
                 sticky: col.sticky,
                 stickyOffset,
                 onClick: onCellClick
@@ -1812,7 +1797,7 @@ function GridRow({
         ]
       }
     ),
-    isExpanded && renderExpansion && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid-row-expansion border-b border-theme-border bg-theme-secondary p-4", children: renderExpansion(row) })
+    isExpanded && renderExpansion && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid-row-expansion", children: renderExpansion(row) })
   ] });
 }
 
@@ -1977,13 +1962,13 @@ function Pagination({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
-      className: `grid-pagination flex flex-wrap items-center justify-between gap-4 px-4 py-3 border-t border-theme-border ${className}`,
+      className: `grid-pagination ${className}`,
       style,
       role: "navigation",
       "aria-label": "Pagination",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid-pagination-info flex items-center gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid-pagination-range text-sm text-theme-secondary", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid-pagination-info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid-pagination-range", children: [
             startItem,
             "-",
             endItem,
@@ -1992,8 +1977,8 @@ function Pagination({
             " ",
             totalItems
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid-pagination-size flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor: "page-size", className: "text-sm text-theme-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid-pagination-size", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor: "page-size", children: [
               translations.rowsPerPage,
               ":"
             ] }),
@@ -2003,19 +1988,19 @@ function Pagination({
                 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",
+                className: "px-2 py-1 text-sm rounded",
                 children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: size, children: size }, size))
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid-pagination-controls flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid-pagination-controls", children: [
           showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               onClick: handleFirstPage,
               disabled: !canGoPrevious,
-              className: "p-2 rounded hover:bg-theme-hover disabled:opacity-50 disabled:cursor-not-allowed text-theme-secondary",
+              className: "p-2 rounded text-theme-secondary",
               "aria-label": translations.first,
               children: "<<"
             }
@@ -2025,17 +2010,17 @@ function Pagination({
             {
               onClick: handlePreviousPage,
               disabled: !canGoPrevious,
-              className: "p-2 rounded hover:bg-theme-hover disabled:opacity-50 disabled:cursor-not-allowed text-theme-secondary",
+              className: "p-2 rounded text-theme-secondary",
               "aria-label": translations.previous,
               children: "<"
             }
           ),
-          showPageNumbers && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid-pagination-pages flex items-center gap-1", children: pageNumbers.map(
+          showPageNumbers && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid-pagination-pages", children: pageNumbers.map(
             (pageNum, index) => pageNum === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "px-2 text-theme-muted", children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 onClick: () => onPageChange(pageNum),
-                className: `min-w-[32px] h-8 px-2 rounded text-sm transition-colors ${pageNum === page ? "bg-accent-primary text-white" : "hover:bg-theme-hover text-theme-secondary"}`,
+                className: `min-w-[32px] h-8 px-2 rounded text-sm ${pageNum === page ? "active" : ""}`,
                 "aria-current": pageNum === page ? "page" : void 0,
                 children: pageNum
               },
@@ -2047,7 +2032,7 @@ function Pagination({
             {
               onClick: handleNextPage,
               disabled: !canGoNext,
-              className: "p-2 rounded hover:bg-theme-hover disabled:opacity-50 disabled:cursor-not-allowed text-theme-secondary",
+              className: "p-2 rounded text-theme-secondary",
               "aria-label": translations.next,
               children: ">"
             }
@@ -2057,7 +2042,7 @@ function Pagination({
             {
               onClick: handleLastPage,
               disabled: !canGoNext,
-              className: "p-2 rounded hover:bg-theme-hover disabled:opacity-50 disabled:cursor-not-allowed text-theme-secondary",
+              className: "p-2 rounded text-theme-secondary",
               "aria-label": translations.last,
               children: ">>"
             }
@@ -2080,7 +2065,7 @@ function SkeletonCell({ width = DEFAULT_COLUMN_WIDTH, height = 16, animate = tru
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
-          className: `rounded bg-theme-tertiary ${animate ? "animate-pulse" : ""}`,
+          className: `rounded ${animate ? "animate-pulse" : ""}`,
           style: { height: `${height}px`, width: "80%" }
         }
       )
@@ -2088,7 +2073,7 @@ function SkeletonCell({ width = DEFAULT_COLUMN_WIDTH, height = 16, animate = tru
   );
 }
 function SkeletonRow({ columns, columnWidths, height = 16, animate = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid-skeleton-row flex border-b border-theme-border", children: Array.from({ length: columns }).map((_, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid-skeleton-row", children: Array.from({ length: columns }).map((_, index) => {
     var _a;
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       SkeletonCell,
@@ -2112,7 +2097,7 @@ function Skeleton({
   animate = true
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `grid-skeleton ${className}`, style, role: "status", "aria-label": "Loading", children: [
-    showHeader && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid-skeleton-header flex border-b border-theme-border bg-theme-secondary", children: Array.from({ length: columns }).map((_, index) => {
+    showHeader && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid-skeleton-header", children: Array.from({ length: columns }).map((_, index) => {
       var _a;
       return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
@@ -2122,7 +2107,7 @@ function Skeleton({
           children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
-              className: `rounded bg-theme-tertiary ${animate ? "animate-pulse" : ""}`,
+              className: `rounded ${animate ? "animate-pulse" : ""}`,
               style: { height: "12px", width: "60%" }
             }
           )
@@ -2160,15 +2145,15 @@ function EmptyState({
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
-      className: `grid-empty-state flex flex-col items-center justify-center py-16 px-8 text-center ${className}`,
+      className: `grid-empty-state ${className}`,
       style,
       role: "status",
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid-empty-icon mb-4 text-theme-muted text-4xl", children: icon }),
-        !icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid-empty-icon mb-4 text-theme-muted", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid-empty-icon", children: icon }),
+        !icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid-empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "svg",
           {
-            className: "w-16 h-16",
+            className: "icon-lg",
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
@@ -2183,8 +2168,8 @@ function EmptyState({
             )
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "grid-empty-title text-lg font-medium text-theme-primary mb-2", children: displayTitle }),
-        displayDescription && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "grid-empty-description text-sm text-theme-muted max-w-sm mb-4", children: displayDescription }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "grid-empty-title", children: displayTitle }),
+        displayDescription && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "grid-empty-description", children: displayDescription }),
         action && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid-empty-action", children: action })
       ]
     }
@@ -2195,13 +2180,13 @@ function EmptyState({
 var import_react14 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function DrawerHeader({ title, onClose }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-header flex items-center justify-between px-4 py-3 border-b border-theme-border", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-lg font-medium text-theme-primary", children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         onClick: onClose,
-        className: "p-2 rounded hover:bg-theme-hover text-theme-secondary",
+        className: "p-2 rounded",
         "aria-label": "Close",
         children: "X"
       }
@@ -2214,8 +2199,8 @@ function FilterContent() {
   const handleClearAll = (0, import_react14.useCallback)(() => {
     actions.clearFilters();
   }, [actions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-filter-content p-4 space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-filter-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-sm text-theme-muted", children: [
         filters.length,
         " ",
@@ -2226,7 +2211,7 @@ function FilterContent() {
         "button",
         {
           onClick: handleClearAll,
-          className: "text-sm text-accent-primary hover:underline",
+          className: "text-sm",
           children: translations.clearAll
         }
       )
@@ -2250,7 +2235,7 @@ function FilterContent() {
               }
             },
             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"
+            className: "w-full px-3 py-2 text-sm rounded"
           }
         )
       ] }, col.id);
@@ -2263,8 +2248,8 @@ function SortContent() {
   const handleClearAll = (0, import_react14.useCallback)(() => {
     actions.clearSorting();
   }, [actions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-sort-content p-4 space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-sort-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-sm text-theme-muted", children: [
         sorting.length,
         " ",
@@ -2275,7 +2260,7 @@ function SortContent() {
         "button",
         {
           onClick: handleClearAll,
-          className: "text-sm text-accent-primary hover:underline",
+          className: "text-sm",
           children: translations.clearAll
         }
       )
@@ -2287,7 +2272,7 @@ function SortContent() {
         "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"}`,
+          className: `w-full px-3 py-2 rounded ${sortItem ? "active" : ""}`,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm text-theme-primary", children: headerText }),
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs text-theme-muted", children: (sortItem == null ? void 0 : sortItem.direction) === "asc" ? translations.sortAsc : (sortItem == null ? void 0 : sortItem.direction) === "desc" ? translations.sortDesc : "-" })
@@ -2301,14 +2286,14 @@ function SortContent() {
 function ColumnsContent() {
   const { state, actions } = useTableContext();
   const { translations, columns, columnStates } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-columns-content p-4 space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-columns-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm text-theme-muted", children: translations.showColumns }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           onClick: actions.resetColumns,
-          className: "text-sm text-accent-primary hover:underline",
+          className: "text-sm",
           children: translations.resetColumns
         }
       )
@@ -2320,7 +2305,7 @@ function ColumnsContent() {
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "label",
         {
-          className: "flex items-center gap-3 px-3 py-2 rounded hover:bg-theme-hover cursor-pointer",
+          className: "px-3 py-2 rounded cursor-pointer",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "input",
@@ -2328,7 +2313,7 @@ function ColumnsContent() {
                 type: "checkbox",
                 checked: isVisible,
                 onChange: () => actions.toggleColumnVisibility(col.id),
-                className: "w-4 h-4 rounded border-theme-border"
+                className: "w-4 h-4 rounded"
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm text-theme-primary", children: headerText })
@@ -2373,11 +2358,11 @@ function MobileDrawer({
   if (!isOpen || !content) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `mobile-drawer-container fixed inset-0 z-50 ${className}`, style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `mobile-drawer-container ${className}`, style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
-        className: "mobile-drawer-overlay absolute inset-0 bg-black transition-opacity",
+        className: "mobile-drawer-overlay",
         style: {
           opacity: DRAWER_OVERLAY_OPACITY,
           transitionDuration: `${DRAWER_ANIMATION_DURATION}ms`
@@ -2389,7 +2374,7 @@ function MobileDrawer({
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "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",
+        className: "mobile-drawer",
         style: {
           transitionDuration: `${DRAWER_ANIMATION_DURATION}ms`
         },
@@ -2398,7 +2383,7 @@ function MobileDrawer({
         "aria-labelledby": "drawer-title",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DrawerHeader, { title: DRAWER_TITLES[content], onClose }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-content flex-1 overflow-y-auto", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "drawer-content", children: [
             content === "filter" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FilterContent, {}),
             content === "sort" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SortContent, {}),
             content === "columns" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColumnsContent, {})
@@ -2520,7 +2505,7 @@ function GridTableContent({
           "button",
           {
             onClick: onRetry,
-            className: "px-4 py-2 bg-accent-primary text-white rounded hover:bg-accent-primary/90",
+            className: "px-4 py-2 bg-accent-primary text-white rounded hover:opacity-90 cursor-pointer",
             children: state.translations.retry
           }
         )
@@ -2548,17 +2533,17 @@ function GridTableContent({
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
-      className: `grid-table bg-theme-primary rounded-lg border border-theme-border overflow-hidden ${classNames.root || ""} ${className}`,
+      className: `grid-table rounded-lg border overflow-hidden ${classNames.root || ""} ${className}`,
       style: containerStyle,
       role: "table",
       children: [
         renderHeader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "grid-table-custom-header", children: renderHeader() }),
-        showGlobalFilter && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "grid-table-toolbar flex items-center gap-4 px-4 py-3 border-b border-theme-border", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex-1 relative", children: [
+        showGlobalFilter && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "grid-table-toolbar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "toolbar-search-wrapper", children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "svg",
               {
-                className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-muted",
+                className: "search-icon",
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
@@ -2573,16 +2558,16 @@ function GridTableContent({
                 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"
+                className: "w-full pl-10 pr-3 py-2 text-sm rounded"
               }
             ),
             state.globalFilter && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "button",
               {
                 onClick: () => actions.setGlobalFilter(""),
-                className: "absolute right-3 top-1/2 -translate-y-1/2 text-theme-muted hover:text-theme-primary",
+                className: "clear-button",
                 "aria-label": "Clear search",
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
@@ -2590,9 +2575,9 @@ function GridTableContent({
             "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",
+              className: "filter-badge",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
                   state.filters.length,
                   " filter",
@@ -2601,32 +2586,32 @@ function GridTableContent({
               ]
             }
           ),
-          shouldShowMobileView && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
+          shouldShowMobileView && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "toolbar-actions", children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "button",
               {
                 onClick: () => actions.openMobileDrawer("filter"),
-                className: "p-2 rounded border border-theme-border hover:bg-theme-hover",
+                className: "toolbar-action-button",
                 "aria-label": state.translations.filter,
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" }) })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "button",
               {
                 onClick: () => actions.openMobileDrawer("sort"),
-                className: "p-2 rounded border border-theme-border hover:bg-theme-hover",
+                className: "toolbar-action-button",
                 "aria-label": state.translations.sort,
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "button",
               {
                 onClick: () => actions.openMobileDrawer("columns"),
-                className: "p-2 rounded border border-theme-border hover:bg-theme-hover",
+                className: "toolbar-action-button",
                 "aria-label": state.translations.columns,
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" }) })
               }
             )
           ] })