@smallwebco/tinypivot-react 1.0.29 → 1.0.31

package/dist/style.css

@@ -2333,3 +2333,302 @@
 .vpg-theme-dark .vpg-skeleton-footer .vpg-stat-value { color: #34d399; }
 .vpg-theme-dark .vpg-skeleton-footer .vpg-stat-divider { color: #475569; }
 
+/* ============================================
+   Numeric Range Filter Styles
+   ============================================ */
+
+/* Filter mode tabs */
+.vpg-filter-tabs {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.375rem 0.5rem;
+  background: #f8fafc;
+}
+
+.vpg-tab-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: #64748b;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.vpg-tab-btn:hover {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.vpg-tab-btn.active {
+  background: #4f46e5;
+  color: white;
+  border-color: #4f46e5;
+}
+
+.vpg-tab-btn.active:hover {
+  background: #4338ca;
+}
+
+/* Range filter container */
+.vpg-range-filter {
+  padding: 0.5rem;
+}
+
+.vpg-range-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+  font-size: 0.6875rem;
+}
+
+.vpg-range-label {
+  color: #64748b;
+}
+
+.vpg-range-bounds {
+  font-weight: 500;
+  color: #334155;
+  background: #f1f5f9;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+}
+
+/* Slider container with dual handles */
+.vpg-slider-container {
+  position: relative;
+  height: 24px;
+  margin: 0.75rem 0;
+}
+
+.vpg-slider-track {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: #e2e8f0;
+  border-radius: 2px;
+  transform: translateY(-50%);
+}
+
+.vpg-slider-fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, #6366f1, #8b5cf6);
+  border-radius: 2px;
+  transition: left 0.1s, right 0.1s;
+}
+
+.vpg-slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  pointer-events: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+  margin: 0;
+}
+
+.vpg-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  pointer-events: auto;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid #6366f1;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  -webkit-transition: transform 0.15s, box-shadow 0.15s;
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.vpg-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
+}
+
+.vpg-slider::-webkit-slider-thumb:active {
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5);
+}
+
+.vpg-slider::-moz-range-thumb {
+  pointer-events: auto;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid #6366f1;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  -moz-transition: transform 0.15s, box-shadow 0.15s;
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.vpg-slider::-moz-range-thumb:hover {
+  transform: scale(1.15);
+}
+
+.vpg-slider-min {
+  z-index: 1;
+}
+
+.vpg-slider-max {
+  z-index: 2;
+}
+
+/* Input fields */
+.vpg-range-inputs {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.vpg-input-group {
+  flex: 1;
+}
+
+.vpg-input-label {
+  display: block;
+  font-size: 0.625rem;
+  font-weight: 500;
+  color: #64748b;
+  margin-bottom: 0.125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.vpg-range-input {
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 0.25rem;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.vpg-range-input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+}
+
+.vpg-range-input::-moz-placeholder {
+  color: #94a3b8;
+}
+
+.vpg-range-input::placeholder {
+  color: #94a3b8;
+}
+
+/* Hide number input spinners */
+.vpg-range-input::-webkit-outer-spin-button,
+.vpg-range-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.vpg-range-input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.vpg-input-separator {
+  color: #94a3b8;
+  font-size: 0.6875rem;
+  padding-top: 1rem;
+}
+
+/* Action buttons */
+.vpg-range-actions {
+  display: flex;
+  gap: 0.375rem;
+  margin-bottom: 0.5rem;
+}
+
+.vpg-range-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: #475569;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.vpg-range-btn:hover:not(:disabled) {
+  background: #f1f5f9;
+  border-color: #cbd5e1;
+  color: #334155;
+}
+
+.vpg-range-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.vpg-icon-xs {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* Filter summary */
+.vpg-filter-summary {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  background: #eef2ff;
+  border-radius: 0.25rem;
+  font-size: 0.6875rem;
+  color: #4338ca;
+}
+
+.vpg-filter-summary strong {
+  font-weight: 600;
+}
+
+/* Dark mode - Filter Tabs */
+.vpg-theme-dark .vpg-filter-tabs { background: #0f172a; }
+.vpg-theme-dark .vpg-tab-btn { background: #1e293b; color: #94a3b8; border-color: #334155; }
+.vpg-theme-dark .vpg-tab-btn:hover { background: #334155; color: #e2e8f0; }
+.vpg-theme-dark .vpg-tab-btn.active { background: #6366f1; color: white; border-color: #6366f1; }
+
+/* Dark mode - Range Filter */
+.vpg-theme-dark .vpg-range-filter { background: #1e293b; }
+.vpg-theme-dark .vpg-range-label { color: #94a3b8; }
+.vpg-theme-dark .vpg-range-bounds { background: #334155; color: #e2e8f0; }
+.vpg-theme-dark .vpg-slider-track { background: #334155; }
+.vpg-theme-dark .vpg-slider::-webkit-slider-thumb { background: #1e293b; border-color: #818cf8; }
+.vpg-theme-dark .vpg-slider::-moz-range-thumb { background: #1e293b; border-color: #818cf8; }
+.vpg-theme-dark .vpg-input-label { color: #94a3b8; }
+.vpg-theme-dark .vpg-range-input { background: #0f172a; border-color: #334155; color: #f1f5f9; }
+.vpg-theme-dark .vpg-range-input:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); }
+.vpg-theme-dark .vpg-range-input::-moz-placeholder { color: #64748b; }
+.vpg-theme-dark .vpg-range-input::placeholder { color: #64748b; }
+.vpg-theme-dark .vpg-input-separator { color: #64748b; }
+.vpg-theme-dark .vpg-range-btn { background: #334155; color: #e2e8f0; border-color: #475569; }
+.vpg-theme-dark .vpg-range-btn:hover:not(:disabled) { background: #475569; border-color: #64748b; }
+.vpg-theme-dark .vpg-filter-summary { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smallwebco/tinypivot-react",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "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.29"
+    "@smallwebco/tinypivot-core": "1.0.31"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",