@texturehq/edges 1.22.3 → 1.23.0

package/dist/styles.css

@@ -157,39 +157,51 @@
   --color-action-default-hover: #4b5563;
   --color-action-default-text: #ffffff;
   --color-state-charging: #f3e8ff;
+  --color-state-charging-data: #d9b6fd;
   --color-state-charging-border: #c084fc;
   --color-state-charging-text: #6b21a8;
   --color-state-discharging: #fffbeb;
+  --color-state-discharging-data: #fce380;
   --color-state-discharging-border: #facc15;
   --color-state-discharging-text: #78350f;
   --color-state-heat: #fee2e2;
+  --color-state-heat-data: #fba9a9;
   --color-state-heat-border: #f87171;
   --color-state-heat-text: #920000;
   --color-state-cool: #dbeafe;
+  --color-state-cool-data: #9dc7fc;
   --color-state-cool-border: #60a5fa;
   --color-state-cool-text: #0334be;
   --color-state-eco: #ddfff1;
+  --color-state-eco-data: #88e9c5;
   --color-state-eco-border: #34d399;
   --color-state-eco-text: #065f46;
   --color-state-auto: #ffedd5;
+  --color-state-auto-data: #fed3a4;
   --color-state-auto-border: #fdba74;
   --color-state-auto-text: #7c2d12;
   --color-state-on: #ccfbf1;
+  --color-state-on-data: #7ce7d8;
   --color-state-on-border: #2dd4bf;
   --color-state-on-text: #0f766e;
   --color-state-idle: #e5e7eb;
+  --color-state-idle-data: #c0c5cd;
   --color-state-idle-border: #9ca3af;
   --color-state-idle-text: #374151;
   --color-state-off: #e5e7eb;
+  --color-state-off-data: #c0c5cd;
   --color-state-off-border: #9ca3af;
   --color-state-off-text: #374151;
   --color-state-unknown: #f8f8f8;
+  --color-state-unknown-data: #e4e6e9;
   --color-state-unknown-border: #d1d5db;
   --color-state-unknown-text: #000000;
   --color-state-importing: #dbeafe;
+  --color-state-importing-data: #8bb6fa;
   --color-state-importing-border: #3b82f6;
   --color-state-importing-text: #1e40af;
   --color-state-exporting: #fef3c7;
+  --color-state-exporting-data: #f9c869;
   --color-state-exporting-border: #f59e0b;
   --color-state-exporting-text: #92400e;
   --color-viz-default: #0082ff;
@@ -536,39 +548,51 @@
   --color-action-default-hover: #ffffff;
   --color-action-default-text: #111827;
   --color-state-charging: #581c87;
+  --color-state-charging-data: #8038bf;
   --color-state-charging-border: #a855f7;
   --color-state-charging-text: #e9d5ff;
   --color-state-discharging: #78350f;
+  --color-state-discharging-data: #b1740b;
   --color-state-discharging-border: #eab308;
   --color-state-discharging-text: #fef3c7;
   --color-state-heat: #7f1d1d;
+  --color-state-heat-data: #b73030;
   --color-state-heat-border: #ef4444;
   --color-state-heat-text: #fee2e2;
   --color-state-cool: #1e3a8a;
+  --color-state-cool-data: #2c5ec0;
   --color-state-cool-border: #3b82f6;
   --color-state-cool-text: #dbeafe;
   --color-state-eco: #064e3b;
+  --color-state-eco-data: #0b835e;
   --color-state-eco-border: #10b981;
   --color-state-eco-text: #d1fae5;
   --color-state-auto: #7c2d12;
+  --color-state-auto-data: #bb5f27;
   --color-state-auto-border: #fb923c;
   --color-state-auto-text: #ffedd5;
   --color-state-on: #134e4a;
+  --color-state-on-data: #138378;
   --color-state-on-border: #14b8a6;
   --color-state-on-text: #ccfbf1;
   --color-state-idle: #374151;
+  --color-state-idle-data: #515968;
   --color-state-idle-border: #6b7280;
   --color-state-idle-text: #e5e7eb;
   --color-state-off: #374151;
+  --color-state-off-data: #515968;
   --color-state-off-border: #6b7280;
   --color-state-off-text: #e5e7eb;
   --color-state-unknown: #1f2937;
+  --color-state-unknown-data: #454d5b;
   --color-state-unknown-border: #6b7280;
   --color-state-unknown-text: #ffffff;
   --color-state-importing: #1e3a8a;
+  --color-state-importing-data: #3f6fc2;
   --color-state-importing-border: #60a5fa;
   --color-state-importing-text: #dbeafe;
   --color-state-exporting: #78350f;
+  --color-state-exporting-data: #b97a19;
   --color-state-exporting-border: #fbbf24;
   --color-state-exporting-text: #fef3c7;
   --color-map-streets-border: #ffffff;
@@ -773,6 +797,18 @@
   --color-viz-diverging-red-blue-8: #7080b5;
   --color-viz-diverging-red-blue-9: #4d5e99;
   --color-viz-diverging-red-blue-10: #2b3d70;
+  --color-state-charging-data: #d9b6fd;
+  --color-state-discharging-data: #fce380;
+  --color-state-heat-data: #fba9a9;
+  --color-state-cool-data: #9dc7fc;
+  --color-state-eco-data: #88e9c5;
+  --color-state-auto-data: #fed3a4;
+  --color-state-on-data: #7ce7d8;
+  --color-state-idle-data: #c0c5cd;
+  --color-state-off-data: #c0c5cd;
+  --color-state-unknown-data: #e4e6e9;
+  --color-state-importing-data: #8bb6fa;
+  --color-state-exporting-data: #f9c869;
 }
 .theme-dark {
   --color-viz-default: #4da6ff;
@@ -872,6 +908,18 @@
   --color-viz-diverging-red-blue-8: #8494ca;
   --color-viz-diverging-red-blue-9: #5d6fb0;
   --color-viz-diverging-red-blue-10: #374f88;
+  --color-state-charging-data: #8038bf;
+  --color-state-discharging-data: #b1740b;
+  --color-state-heat-data: #b73030;
+  --color-state-cool-data: #2c5ec0;
+  --color-state-eco-data: #0b835e;
+  --color-state-auto-data: #bb5f27;
+  --color-state-on-data: #138378;
+  --color-state-idle-data: #515968;
+  --color-state-off-data: #515968;
+  --color-state-unknown-data: #454d5b;
+  --color-state-importing-data: #3f6fc2;
+  --color-state-exporting-data: #b97a19;
 }
 @keyframes wave {
   0% {
@@ -1607,6 +1655,9 @@
   .mr-2 {
     margin-right: var(--spacing-2);
   }
+  .mr-3 {
+    margin-right: var(--spacing-3);
+  }
   .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
@@ -1640,6 +1691,9 @@
   .ml-2 {
     margin-left: var(--spacing-2);
   }
+  .ml-3 {
+    margin-left: var(--spacing-3);
+  }
   .ml-4 {
     margin-left: var(--spacing-4);
   }
@@ -1874,6 +1928,9 @@
   .min-h-\[400px\] {
     min-height: 400px;
   }
+  .min-h-\[500px\] {
+    min-height: 500px;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -2043,27 +2100,18 @@
   .max-w-\[200px\] {
     max-width: 200px;
   }
-  .max-w-\[220px\] {
-    max-width: 220px;
-  }
-  .max-w-\[240px\] {
-    max-width: 240px;
-  }
   .max-w-\[250px\] {
     max-width: 250px;
   }
-  .max-w-\[260px\] {
-    max-width: 260px;
-  }
-  .max-w-\[280px\] {
-    max-width: 280px;
-  }
   .max-w-\[300px\] {
     max-width: 300px;
   }
   .max-w-\[350px\] {
     max-width: 350px;
   }
+  .max-w-\[360px\] {
+    max-width: 360px;
+  }
   .max-w-\[400px\] {
     max-width: 400px;
   }
@@ -2143,6 +2191,9 @@
   .min-w-\[208px\] {
     min-width: 208px;
   }
+  .min-w-\[260px\] {
+    min-width: 260px;
+  }
   .min-w-\[400px\] {
     min-width: 400px;
   }
@@ -2467,6 +2518,9 @@
   .gap-16 {
     gap: var(--spacing-16);
   }
+  .gap-24 {
+    gap: var(--spacing-24);
+  }
   .gap-\[var\(--control-gap-lg\)\] {
     gap: var(--control-gap-lg);
   }
@@ -3070,12 +3124,6 @@
       background-color: color-mix(in oklab, var(--color-background-muted) 30%, transparent);
     }
   }
-  .bg-background-muted\/60 {
-    background-color: color-mix(in srgb, #f3f4f6 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-background-muted) 60%, transparent);
-    }
-  }
   .bg-background-selected {
     background-color: var(--color-background-selected);
   }
@@ -5234,22 +5282,6 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
-  .focus\:outline-2 {
-    &:focus {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-    }
-  }
-  .focus\:outline-offset-0 {
-    &:focus {
-      outline-offset: 0px;
-    }
-  }
-  .focus\:outline-action-default {
-    &:focus {
-      outline-color: var(--color-action-default);
-    }
-  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -5364,6 +5396,28 @@
       --tw-ring-color: var(--color-feedback-error-border);
     }
   }
+  .data-\[focus-visible\]\:outline {
+    &[data-focus-visible] {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .data-\[focus-visible\]\:outline-2 {
+    &[data-focus-visible] {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .data-\[focus-visible\]\:outline-offset-0 {
+    &[data-focus-visible] {
+      outline-offset: 0px;
+    }
+  }
+  .data-\[focus-visible\]\:outline-action-default {
+    &[data-focus-visible] {
+      outline-color: var(--color-action-default);
+    }
+  }
   .data-\[focus-visible\]\:ring-inset {
     &[data-focus-visible] {
       --tw-ring-inset: inset;
@@ -5917,9 +5971,9 @@
       flex-direction: row;
     }
   }
-  .md\:items-center {
+  .md\:items-start {
     @media (width >= 48rem) {
-      align-items: center;
+      align-items: flex-start;
     }
   }
   .md\:justify-between {

package/dist/utilities.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.22.3",
-  "generatedAt": "2025-11-19T02:20:12.491Z",
+  "version": "1.23.0",
+  "generatedAt": "2025-11-24T01:13:46.627Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like breakpoints, debouncing, local storage, and media queries",
@@ -1016,13 +1016,6 @@
           "category": "charts",
           "file": "utils/chartExport.ts"
         },
-        {
-          "name": "getResolvedColor",
-          "type": "function",
-          "description": "",
-          "category": "charts",
-          "file": "utils/charts.ts"
-        },
         {
           "name": "getYFormatSettings",
           "type": "function",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.22.3",
+  "version": "1.23.0",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -57,6 +57,7 @@
     "lint": "biome check src/",
     "lint:quiet": "biome check --reporter=github src/",
     "lint:fix": "biome check --write src/",
+    "typecheck": "tsc --noEmit -p tsconfig.prod.json",
     "format": "biome format --write src/",
     "format:check": "biome format src/",
     "test": "vitest run",

package/scripts/generate-viz-runtime.js

@@ -18,9 +18,11 @@ const OUTPUT_FILE = path.join(GENERATED_DIR, "viz-runtime.css");
 
 /**
  * Extract viz color variables from a CSS file
+ * Includes both --color-viz-* and --color-state-*-data variables
  */
 function extractVizColors(cssContent) {
   const vizColorRegex = /^\s*(--color-viz-[^:]+:\s*[^;]+;)\s*$/gm;
+  const stateDataColorRegex = /^\s*(--color-state-[^:]*-data:\s*[^;]+;)\s*$/gm;
   const matches = [];
   let match;
 
@@ -28,6 +30,13 @@ function extractVizColors(cssContent) {
     matches.push(match[1]);
   }
 
+  // Reset regex state
+  stateDataColorRegex.lastIndex = 0;
+
+  while ((match = stateDataColorRegex.exec(cssContent)) !== null) {
+    matches.push(match[1]);
+  }
+
   return matches;
 }
 
@@ -60,6 +69,10 @@ function generateVizRuntime() {
  * WORKAROUND: These variables are defined here instead of in tailwind-tokens-*.css
  * because Tailwind 4's @theme directive filters them out (similar issue as data-* prefix).
  *
+ * Includes:
+ * - Generic viz colors (--color-viz-*)
+ * - Device state data viz colors (--color-state-*-data)
+ *
  * AUTO-GENERATED by scripts/generate-viz-runtime.js
  * DO NOT EDIT MANUALLY - Edit theme-specific viz colors in:
  *   - tokens/themes/light.json (light mode viz colors)