bolt-table 0.1.2 → 0.1.4

package/README.md

@@ -1,8 +1,6 @@
 # bolt-table
 
-A high-performance, zero-dependency\* React table component built on [TanStack Virtual](https://tanstack.com/virtual). Only the rows visible in the viewport are ever in the DOM — making it fast for datasets of any size.
-
-\*Only peer dependency is `@tanstack/react-virtual` (+ React). No Tailwind, no CSS framework, no icon library required.
+A high-performance, zero-dependency\* React table component. Only the rows visible in the viewport are ever in the DOM — making it fast for datasets of any size uisng [TanStack Virtual](https://tanstack.com/virtual).
 
 [![npm version](https://img.shields.io/npm/v/bolt-table)](https://www.npmjs.com/package/bolt-table)
 [![license](https://img.shields.io/npm/l/bolt-table)](./LICENSE)

package/dist/index.js

@@ -206,12 +206,12 @@ var DraggableHeader = import_react.default.memo(
       ...column.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
       ...column.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
       ...isPinned ? {
-        backgroundColor: styles?.pinnedBg ?? "Canvas",
+        backgroundColor: styles?.pinnedBg ?? "color-mix(in srgb, currentColor 4%, Canvas)",
         ...styles?.pinnedHeader
       } : {},
       ...column.style,
       ...styles?.header,
-      backgroundColor: styles?.pinnedBg && isPinned ? styles.pinnedBg : isPinned ? "Canvas" : "rgba(128,128,128,0.06)",
+      backgroundColor: styles?.pinnedBg && isPinned ? styles.pinnedBg : isPinned ? "color-mix(in srgb, currentColor 4%, Canvas)" : "rgba(128,128,128,0.06)",
       display: "flex",
       height: 36,
       alignItems: "center",
@@ -1057,7 +1057,7 @@ var TableBody = ({
       else if (col.pinned === "right" && stickyOffset !== void 0)
         style.right = `${stickyOffset}px`;
       if (isPinned) {
-        style.backgroundColor = styles?.pinnedBg ?? "Canvas";
+        style.backgroundColor = styles?.pinnedBg ?? "color-mix(in srgb, currentColor 4%, Canvas)";
         if (styles?.pinnedCell) Object.assign(style, styles.pinnedCell);
       }
       return { key: col.key, style, isPinned };
@@ -1934,7 +1934,7 @@ function BoltTable({
             50% { opacity: 0.5; }
           }
           [data-row-key][data-hover] > div {
-            background-color: ${styles.rowHover?.backgroundColor ?? "rgba(0, 0, 0, 0.04)"};
+            background-color: ${styles.rowHover?.backgroundColor ?? "rgba(128, 128, 128, 0.1)"};
           }
           [data-row-key][data-selected] > div {
             background-color: ${styles.rowSelected?.backgroundColor ?? `${accentColor}15`};
@@ -1949,7 +1949,7 @@ function BoltTable({
             opacity: 1 !important;
           }
           [data-bt-ctx-item]:not(:disabled):hover {
-            background-color: rgba(0, 0, 0, 0.06);
+            background-color: rgba(128, 128, 128, 0.15);
           }
           [data-column-key][data-dragging] {
             opacity: 0.3 !important;
@@ -2132,7 +2132,7 @@ function BoltTable({
                                       textOverflow: "ellipsis",
                                       whiteSpace: "nowrap",
                                       borderBottom: "1px solid rgba(128,128,128,0.2)",
-                                      backgroundColor: "Canvas",
+                                      backgroundColor: styles?.pinnedBg,
                                       position: "sticky",
                                       left: columnOffsets.get("__select__") ?? 0,
                                       top: 0,
@@ -2192,7 +2192,7 @@ function BoltTable({
                                       textOverflow: "ellipsis",
                                       whiteSpace: "nowrap",
                                       borderBottom: "1px solid rgba(128,128,128,0.2)",
-                                      backgroundColor: "Canvas",
+                                      backgroundColor: styles?.pinnedBg ?? "color-mix(in srgb, currentColor 4%, Canvas)",
                                       position: "sticky",
                                       left: columnOffsets.get("__expand__") ?? 0,
                                       top: 0,
@@ -2272,7 +2272,7 @@ function BoltTable({
                                             gap: 8,
                                             paddingTop: 32,
                                             paddingBottom: 32,
-                                            color: "#6b7280"
+                                            color: "GrayText"
                                           },
                                           children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: 14 }, children: "No data" })
                                         }
@@ -2337,7 +2337,7 @@ function BoltTable({
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flex: "1 1 0%", alignItems: "center" }, children: (() => {
                   const rangeStart = total > 0 ? (currentPage - 1) * pageSize + 1 : 0;
                   const rangeEnd = Math.min(currentPage * pageSize, total);
-                  return pagination?.showTotal ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "#6b7280", fontSize: 12 }, children: [
+                  return pagination?.showTotal ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "GrayText", fontSize: 12 }, children: [
                     "Showing",
                     " ",
                     pagination.showTotal(total, [rangeStart, rangeEnd]),
@@ -2345,7 +2345,7 @@ function BoltTable({
                     " ",
                     total,
                     " items"
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "#6b7280", fontSize: 12 }, children: [
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "GrayText", fontSize: 12 }, children: [
                     rangeStart,
                     "\u2013",
                     rangeEnd,
@@ -2416,7 +2416,7 @@ function BoltTable({
                             "span",
                             {
                               style: {
-                                color: "#6b7280",
+                                color: "GrayText",
                                 paddingLeft: 4,
                                 paddingRight: 4,
                                 fontSize: 12,