@forgedevstack/grid-table 1.0.1 → 1.0.2

package/dist/index.mjs

@@ -1082,7 +1082,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,
@@ -1090,44 +1090,44 @@ function FilterPopup({
         ...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("div", { className: "filter-popup-header", children: /* @__PURE__ */ jsxs("div", { className: "header-content", children: [
+          /* @__PURE__ */ jsx2("span", { className: "header-title", children: columnHeader }),
           /* @__PURE__ */ jsx2(
             "button",
             {
               onClick: onClose,
-              className: "p-1 rounded hover:bg-theme-hover text-theme-muted",
+              className: "header-close",
               "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" }) })
+              children: /* @__PURE__ */ jsx2("svg", { className: "icon-md", 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(
+        /* @__PURE__ */ jsx2("div", { className: "filter-popup-body", 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",
+            className: "w-full px-3 py-2 text-sm rounded",
             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__ */ jsxs("div", { className: "filter-field", children: [
+            /* @__PURE__ */ jsx2("label", { 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",
+                className: "w-full px-3 py-2 text-sm rounded",
                 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__ */ jsxs("div", { className: "filter-field", children: [
+            /* @__PURE__ */ jsx2("label", { children: "Value" }),
             /* @__PURE__ */ jsx2(
               "input",
               {
@@ -1136,18 +1136,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__ */ jsxs("div", { className: "filter-popup-footer px-4 py-3 border-t border-theme-border flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "filter-popup-footer", children: [
           /* @__PURE__ */ jsx2(
             "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
             }
           ),
@@ -1155,7 +1155,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
             }
           )
@@ -1170,7 +1170,7 @@ 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"}`,
+    className: `icon-sm ${active ? "text-accent-primary" : "text-theme-muted"}`,
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor",
@@ -1188,7 +1188,7 @@ var FilterIcon = ({ active = false }) => /* @__PURE__ */ jsx3(
 var SortIcon = ({ direction }) => /* @__PURE__ */ jsx3(
   "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",
@@ -1245,36 +1245,23 @@ function HeaderCell({
   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");
+      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__ */ jsxs2(
     "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,
@@ -1293,8 +1280,8 @@ function HeaderCell({
       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("span", { className: "grid-header-content", children: headerContent }),
+        isSortable && /* @__PURE__ */ jsxs2("span", { className: "grid-header-sort", 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 })
         ] }),
@@ -1302,7 +1289,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__ */ jsx3(FilterIcon, { active: hasFilter })
           }
@@ -1310,7 +1297,7 @@ function HeaderCell({
         isResizable && /* @__PURE__ */ jsx3(
           "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()
           }
@@ -1401,7 +1388,7 @@ function GridHeader({
     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(
+    enableSelection && /* @__PURE__ */ jsx3("div", { className: "grid-header-select", children: /* @__PURE__ */ jsx3(
       "input",
       {
         type: "checkbox",
@@ -1410,7 +1397,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"
       }
     ) }),
@@ -1427,7 +1414,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__ */ jsxs2("div", { className: "relative", children: [
+      return /* @__PURE__ */ jsxs2("div", { className: "relative", style: { position: "relative" }, children: [
         /* @__PURE__ */ jsx3(
           HeaderCell,
           {
@@ -1547,17 +1534,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__ */ jsxs3(
     "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(),
@@ -1565,7 +1550,7 @@ function GridCell({
       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: [
+        showLabel && labelText && /* @__PURE__ */ jsxs3("span", { className: "grid-cell-label", children: [
           labelText,
           ":"
         ] }),
@@ -1688,23 +1673,23 @@ function GridRow({
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          enableSelection && /* @__PURE__ */ jsx5("div", { className: "grid-row-select flex items-center px-2", children: /* @__PURE__ */ jsx5(
+          enableSelection && /* @__PURE__ */ jsx5("div", { className: "grid-row-select", children: /* @__PURE__ */ jsx5(
             "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__ */ jsx5("div", { className: "grid-row-expand flex items-center px-2", children: /* @__PURE__ */ jsx5(
+          enableExpansion && renderExpansion && /* @__PURE__ */ jsx5("div", { className: "grid-row-expand", children: /* @__PURE__ */ jsx5(
             "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__ */ jsx5(
@@ -1750,7 +1735,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
@@ -1761,7 +1746,7 @@ function GridRow({
         ]
       }
     ),
-    isExpanded && renderExpansion && /* @__PURE__ */ jsx5("div", { className: "grid-row-expansion border-b border-theme-border bg-theme-secondary p-4", children: renderExpansion(row) })
+    isExpanded && renderExpansion && /* @__PURE__ */ jsx5("div", { className: "grid-row-expansion", children: renderExpansion(row) })
   ] });
 }
 
@@ -1926,13 +1911,13 @@ function Pagination({
   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}`,
+      className: `grid-pagination ${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: [
+        /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-info", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-range", children: [
             startItem,
             "-",
             endItem,
@@ -1941,8 +1926,8 @@ function Pagination({
             " ",
             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: [
+          /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-size", children: [
+            /* @__PURE__ */ jsxs5("label", { htmlFor: "page-size", children: [
               translations.rowsPerPage,
               ":"
             ] }),
@@ -1952,19 +1937,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__ */ jsx7("option", { value: size, children: size }, size))
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-controls flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "grid-pagination-controls", 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",
+              className: "p-2 rounded text-theme-secondary",
               "aria-label": translations.first,
               children: "<<"
             }
@@ -1974,17 +1959,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__ */ jsx7("div", { className: "grid-pagination-pages flex items-center gap-1", children: pageNumbers.map(
+          showPageNumbers && /* @__PURE__ */ jsx7("div", { className: "grid-pagination-pages", children: pageNumbers.map(
             (pageNum, index) => pageNum === "ellipsis" ? /* @__PURE__ */ jsx7("span", { className: "px-2 text-theme-muted", children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx7(
               "button",
               {
                 onClick: () => onPageChange(pageNum),
-                className: `min-w-[32px] h-8 px-2 rounded text-sm 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
               },
@@ -1996,7 +1981,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: ">"
             }
@@ -2006,7 +1991,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: ">>"
             }
@@ -2029,7 +2014,7 @@ function SkeletonCell({ width = DEFAULT_COLUMN_WIDTH, height = 16, animate = tru
       children: /* @__PURE__ */ jsx8(
         "div",
         {
-          className: `rounded bg-theme-tertiary ${animate ? "animate-pulse" : ""}`,
+          className: `rounded ${animate ? "animate-pulse" : ""}`,
           style: { height: `${height}px`, width: "80%" }
         }
       )
@@ -2037,7 +2022,7 @@ function SkeletonCell({ width = DEFAULT_COLUMN_WIDTH, height = 16, animate = tru
   );
 }
 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) => {
+  return /* @__PURE__ */ jsx8("div", { className: "grid-skeleton-row", children: Array.from({ length: columns }).map((_, index) => {
     var _a;
     return /* @__PURE__ */ jsx8(
       SkeletonCell,
@@ -2061,7 +2046,7 @@ function Skeleton({
   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) => {
+    showHeader && /* @__PURE__ */ jsx8("div", { className: "grid-skeleton-header", children: Array.from({ length: columns }).map((_, index) => {
       var _a;
       return /* @__PURE__ */ jsx8(
         "div",
@@ -2071,7 +2056,7 @@ function Skeleton({
           children: /* @__PURE__ */ jsx8(
             "div",
             {
-              className: `rounded bg-theme-tertiary ${animate ? "animate-pulse" : ""}`,
+              className: `rounded ${animate ? "animate-pulse" : ""}`,
               style: { height: "12px", width: "60%" }
             }
           )
@@ -2109,15 +2094,15 @@ function EmptyState({
   return /* @__PURE__ */ jsxs7(
     "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__ */ 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(
+        icon && /* @__PURE__ */ jsx9("div", { className: "grid-empty-icon", children: icon }),
+        !icon && /* @__PURE__ */ jsx9("div", { className: "grid-empty-icon", children: /* @__PURE__ */ jsx9(
           "svg",
           {
-            className: "w-16 h-16",
+            className: "icon-lg",
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
@@ -2132,8 +2117,8 @@ function EmptyState({
             )
           }
         ) }),
-        /* @__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 }),
+        /* @__PURE__ */ jsx9("h3", { className: "grid-empty-title", children: displayTitle }),
+        displayDescription && /* @__PURE__ */ jsx9("p", { className: "grid-empty-description", children: displayDescription }),
         action && /* @__PURE__ */ jsx9("div", { className: "grid-empty-action", children: action })
       ]
     }
@@ -2144,13 +2129,13 @@ function EmptyState({
 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 }),
+  return /* @__PURE__ */ jsxs8("div", { className: "drawer-header", children: [
+    /* @__PURE__ */ jsx10("h3", { children: title }),
     /* @__PURE__ */ jsx10(
       "button",
       {
         onClick: onClose,
-        className: "p-2 rounded hover:bg-theme-hover text-theme-secondary",
+        className: "p-2 rounded",
         "aria-label": "Close",
         children: "X"
       }
@@ -2163,8 +2148,8 @@ function FilterContent() {
   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: [
+  return /* @__PURE__ */ jsxs8("div", { className: "drawer-filter-content", children: [
+    /* @__PURE__ */ jsxs8("div", { children: [
       /* @__PURE__ */ jsxs8("span", { className: "text-sm text-theme-muted", children: [
         filters.length,
         " ",
@@ -2175,7 +2160,7 @@ function FilterContent() {
         "button",
         {
           onClick: handleClearAll,
-          className: "text-sm text-accent-primary hover:underline",
+          className: "text-sm",
           children: translations.clearAll
         }
       )
@@ -2199,7 +2184,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);
@@ -2212,8 +2197,8 @@ function SortContent() {
   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: [
+  return /* @__PURE__ */ jsxs8("div", { className: "drawer-sort-content", children: [
+    /* @__PURE__ */ jsxs8("div", { children: [
       /* @__PURE__ */ jsxs8("span", { className: "text-sm text-theme-muted", children: [
         sorting.length,
         " ",
@@ -2224,7 +2209,7 @@ function SortContent() {
         "button",
         {
           onClick: handleClearAll,
-          className: "text-sm text-accent-primary hover:underline",
+          className: "text-sm",
           children: translations.clearAll
         }
       )
@@ -2236,7 +2221,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__ */ 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 : "-" })
@@ -2250,14 +2235,14 @@ function SortContent() {
 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: [
+  return /* @__PURE__ */ jsxs8("div", { className: "drawer-columns-content", children: [
+    /* @__PURE__ */ jsxs8("div", { children: [
       /* @__PURE__ */ jsx10("span", { className: "text-sm text-theme-muted", children: translations.showColumns }),
       /* @__PURE__ */ jsx10(
         "button",
         {
           onClick: actions.resetColumns,
-          className: "text-sm text-accent-primary hover:underline",
+          className: "text-sm",
           children: translations.resetColumns
         }
       )
@@ -2269,7 +2254,7 @@ function ColumnsContent() {
       return /* @__PURE__ */ jsxs8(
         "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__ */ jsx10(
               "input",
@@ -2277,7 +2262,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__ */ jsx10("span", { className: "text-sm text-theme-primary", children: headerText })
@@ -2322,11 +2307,11 @@ function MobileDrawer({
   if (!isOpen || !content) {
     return null;
   }
-  return /* @__PURE__ */ jsxs8("div", { className: `mobile-drawer-container fixed inset-0 z-50 ${className}`, style, children: [
+  return /* @__PURE__ */ jsxs8("div", { className: `mobile-drawer-container ${className}`, style, children: [
     /* @__PURE__ */ jsx10(
       "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`
@@ -2338,7 +2323,7 @@ function MobileDrawer({
     /* @__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",
+        className: "mobile-drawer",
         style: {
           transitionDuration: `${DRAWER_ANIMATION_DURATION}ms`
         },
@@ -2347,7 +2332,7 @@ function MobileDrawer({
         "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: [
+          /* @__PURE__ */ jsxs8("div", { className: "drawer-content", children: [
             content === "filter" && /* @__PURE__ */ jsx10(FilterContent, {}),
             content === "sort" && /* @__PURE__ */ jsx10(SortContent, {}),
             content === "columns" && /* @__PURE__ */ jsx10(ColumnsContent, {})
@@ -2469,7 +2454,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
           }
         )
@@ -2497,17 +2482,17 @@ function GridTableContent({
   return /* @__PURE__ */ jsxs9(
     "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__ */ 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: [
+        showGlobalFilter && /* @__PURE__ */ jsxs9("div", { className: "grid-table-toolbar", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "toolbar-search-wrapper", children: [
             /* @__PURE__ */ jsx11(
               "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",
@@ -2522,16 +2507,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__ */ jsx11(
               "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__ */ 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" }) })
+                children: /* @__PURE__ */ jsx11("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
@@ -2539,9 +2524,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__ */ 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__ */ jsx11("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }),
                 /* @__PURE__ */ jsxs9("span", { children: [
                   state.filters.length,
                   " filter",
@@ -2550,32 +2535,32 @@ function GridTableContent({
               ]
             }
           ),
-          shouldShowMobileView && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+          shouldShowMobileView && /* @__PURE__ */ jsxs9("div", { className: "toolbar-actions", children: [
             /* @__PURE__ */ jsx11(
               "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__ */ 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" }) })
+                children: /* @__PURE__ */ jsx11("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" }) })
               }
             ),
             /* @__PURE__ */ jsx11(
               "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__ */ 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" }) })
+                children: /* @__PURE__ */ jsx11("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) })
               }
             ),
             /* @__PURE__ */ jsx11(
               "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__ */ 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" }) })
+                children: /* @__PURE__ */ jsx11("svg", { className: "icon-md", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" }) })
               }
             )
           ] })