@smallwebco/tinypivot-react 1.0.27 → 1.0.29

package/dist/style.css

@@ -515,12 +515,13 @@
 
 .vpg-cell:last-child { border-right: none; }
 
+.vpg-cell:hover {
+  box-shadow: inset 0 0 0 2px rgba(129, 140, 248, 0.4);
+}
+
 .vpg-cell.vpg-selected {
   background: rgba(224, 231, 255, 0.8);
-  outline: 2px solid #818cf8;
-  outline-offset: -2px;
-  position: relative;
-  z-index: 1;
+  box-shadow: inset 0 0 0 2px #818cf8;
 }
 
 .vpg-cell.vpg-is-number {
@@ -570,16 +571,16 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.25rem 0.75rem;
-  background: #eef2ff;
-  border-radius: 0.375rem;
-  border: 1px solid #c7d2fe;
+  padding: 0.125rem 0.5rem;
+  background: rgba(99, 102, 241, 0.08);
+  border-radius: 0.25rem;
+  border: 1px solid rgba(99, 102, 241, 0.15);
 }
 
-.vpg-stat { display: flex; align-items: center; gap: 0.375rem; }
-.vpg-stat-label { font-size: 0.75rem; color: #4f46e5; font-weight: 500; }
-.vpg-stat-value { font-size: 0.75rem; color: #1e1b4b; font-weight: 600; font-variant-numeric: tabular-nums; }
-.vpg-stat-divider { color: #c7d2fe; }
+.vpg-stat { display: flex; align-items: center; gap: 0.25rem; }
+.vpg-stat-label { font-size: 0.6875rem; color: #64748b; font-weight: 400; }
+.vpg-stat-value { font-size: 0.6875rem; color: #6366f1; font-weight: 500; font-variant-numeric: tabular-nums; }
+.vpg-stat-divider { color: #cbd5e1; }
 
 /* Watermark */
 .vpg-watermark-inline a {
@@ -1759,12 +1760,13 @@
   white-space: nowrap;
 }
 
+.vpg-data-cell:hover {
+  box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.4);
+}
+
 .vpg-data-cell.selected {
   background: #d1fae5;
-  outline: 2px solid #10b981;
-  outline-offset: -2px;
-  position: relative;
-  z-index: 1;
+  box-shadow: inset 0 0 0 2px #10b981;
 }
 
 .vpg-data-cell.vpg-is-null { color: #cbd5e1; }
@@ -1786,6 +1788,7 @@
 .vpg-skeleton-footer {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
   font-size: 0.75rem;
@@ -1795,6 +1798,72 @@
   flex-shrink: 0;
 }
 
+.vpg-skeleton-footer .vpg-footer-info {
+  color: #94a3b8;
+}
+
+.vpg-skeleton-footer .vpg-selection-stats {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.125rem 0.5rem;
+  background: rgba(16, 185, 129, 0.08);
+  border: 1px solid rgba(16, 185, 129, 0.15);
+  border-radius: 0.25rem;
+  font-size: 0.6875rem;
+}
+
+.vpg-skeleton-footer .vpg-stat {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.vpg-skeleton-footer .vpg-stat-label {
+  color: #64748b;
+  font-weight: 400;
+}
+
+.vpg-skeleton-footer .vpg-stat-value {
+  color: #10b981;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.vpg-skeleton-footer .vpg-stat-divider {
+  color: #cbd5e1;
+}
+
+/* Pivot toast notification */
+.vpg-pivot-skeleton .vpg-toast {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: #10b981;
+  color: white;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  z-index: 100;
+  animation: vpg-toast-enter 0.2s ease;
+}
+
+@keyframes vpg-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* Skeleton Watermark */
 .vpg-pivot-skeleton .vpg-watermark {
   padding: 0.375rem 1rem;
@@ -2240,3 +2309,27 @@
 .vpg-theme-dark .vpg-calc-btn { background: rgba(168, 85, 247, 0.15); color: #c084fc; border-color: rgba(168, 85, 247, 0.3); }
 .vpg-theme-dark .vpg-calc-btn:hover { background: rgba(168, 85, 247, 0.25); border-color: rgba(168, 85, 247, 0.5); }
 
+/* Dark mode - Selection stats */
+.vpg-theme-dark .vpg-selection-stats {
+  background: rgba(99, 102, 241, 0.1);
+  border-color: rgba(99, 102, 241, 0.2);
+}
+.vpg-theme-dark .vpg-stat-label { color: #94a3b8; }
+.vpg-theme-dark .vpg-stat-value { color: #a5b4fc; }
+.vpg-theme-dark .vpg-stat-divider { color: #475569; }
+
+/* Dark mode - Pivot skeleton footer */
+.vpg-theme-dark .vpg-skeleton-footer {
+  background: #0f172a;
+  border-color: #334155;
+  color: #94a3b8;
+}
+.vpg-theme-dark .vpg-skeleton-footer .vpg-footer-info { color: #64748b; }
+.vpg-theme-dark .vpg-skeleton-footer .vpg-selection-stats {
+  background: rgba(16, 185, 129, 0.1);
+  border-color: rgba(16, 185, 129, 0.2);
+}
+.vpg-theme-dark .vpg-skeleton-footer .vpg-stat-label { color: #94a3b8; }
+.vpg-theme-dark .vpg-skeleton-footer .vpg-stat-value { color: #34d399; }
+.vpg-theme-dark .vpg-skeleton-footer .vpg-stat-divider { color: #475569; }
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smallwebco/tinypivot-react",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "TinyPivot React - Excel-like data grid and pivot table components",
   "type": "module",
   "main": "./dist/index.js",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@tanstack/react-table": "^8.20.0",
-    "@smallwebco/tinypivot-core": "1.0.27"
+    "@smallwebco/tinypivot-core": "1.0.29"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",