@texturehq/edges 1.3.1 → 1.5.0

package/dist/styles.css

@@ -62,8 +62,6 @@
   --color-brand-light: #f7f7ff;
   --color-brand-dark: #363ccb;
   --color-brand-background: #f6f7ff;
-  --color-skeleton-base: #e5e7eb;
-  --color-skeleton-highlight: #f3f4f6;
   --color-neutral-white: #ffffff;
   --color-neutral-black: #000000;
   --color-viz-default: #444ae1;
@@ -2346,6 +2344,9 @@
   .border-green-200 {
     border-color: var(--color-green-200);
   }
+  .border-green-600 {
+    border-color: var(--color-green-600);
+  }
   .border-orange-200 {
     border-color: var(--color-orange-200);
   }
@@ -2445,6 +2446,12 @@
       background-color: color-mix(in oklab, var(--color-background-surface) 80%, transparent);
     }
   }
+  .bg-background-surface\/90 {
+    background-color: color-mix(in srgb, #ffffff 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-background-surface) 90%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2535,6 +2542,9 @@
   .bg-green-500 {
     background-color: var(--color-green-500);
   }
+  .bg-green-600 {
+    background-color: var(--color-green-600);
+  }
   .bg-inherit {
     background-color: inherit;
   }
@@ -2789,6 +2799,9 @@
   .py-12 {
     padding-block: var(--spacing-12);
   }
+  .pt-1 {
+    padding-top: var(--spacing-1);
+  }
   .pt-3 {
     padding-top: var(--spacing-3);
   }
@@ -3071,6 +3084,9 @@
   .text-green-800 {
     color: var(--color-green-800);
   }
+  .text-green-900 {
+    color: var(--color-green-900);
+  }
   .text-inherit {
     color: inherit;
   }
@@ -3796,6 +3812,13 @@
       }
     }
   }
+  .hover\:bg-gray-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-50);
+      }
+    }
+  }
   .hover\:bg-gray-100 {
     &:hover {
       @media (hover: hover) {
@@ -3939,13 +3962,6 @@
       }
     }
   }
-  .hover\:opacity-90 {
-    &:hover {
-      @media (hover: hover) {
-        opacity: 90%;
-      }
-    }
-  }
   .hover\:opacity-100 {
     &:hover {
       @media (hover: hover) {

package/dist/utilities.manifest.json

@@ -1,10 +1,36 @@
 {
-  "version": "1.3.1",
-  "generatedAt": "2025-10-09T16:15:03.889Z",
+  "version": "1.5.0",
+  "generatedAt": "2025-10-09T19:04:07.680Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like debouncing, local storage, and time controls",
       "utilities": [
+        {
+          "name": "Breakpoint",
+          "type": "type",
+          "description": "",
+          "example": null,
+          "category": "hooks",
+          "file": "hooks/useBreakpoint.ts"
+        },
+        {
+          "name": "BREAKPOINTS",
+          "type": "constant",
+          "description": "Tailwind CSS default breakpoints These match the standard Tailwind breakpoints used in your CSS",
+          "params": [],
+          "returns": null,
+          "example": null,
+          "category": "hooks",
+          "file": "hooks/useBreakpoint.ts"
+        },
+        {
+          "name": "BreakpointState",
+          "type": "type",
+          "description": "",
+          "example": null,
+          "category": "hooks",
+          "file": "hooks/useBreakpoint.ts"
+        },
         {
           "name": "handleChartExport",
           "type": "function",
@@ -23,6 +49,33 @@
           "category": "hooks",
           "file": "hooks/useTimeControls.ts"
         },
+        {
+          "name": "useBreakpoint",
+          "type": "function",
+          "description": "Hook to detect which Tailwind breakpoint is currently active Returns an object with boolean flags for each breakpoint and convenience helpers. All breakpoints use min-width queries to match Tailwind's mobile-first approach. ```tsx const { isMobile, isDesktop, current } = useBreakpoint(); // Conditional rendering based on screen size return isMobile ? <MobileNav /> : <DesktopNav />; // Check specific breakpoint if (isLg) { // Show expanded view on large screens } // Use current breakpoint console.log(`Current breakpoint: ${current}`); // \"md\", \"lg\", etc. ```",
+          "params": [
+            {
+              "name": "defaultBreakpoint",
+              "type": "unknown",
+              "description": "The breakpoint to assume during SSR or before first render (defaults to \"base\" for mobile-first)"
+            }
+          ],
+          "returns": {
+            "type": "unknown",
+            "description": "An object containing breakpoint state information"
+          },
+          "example": "const { isMobile, isDesktop, current } = useBreakpoint();\n\n// Conditional rendering based on screen size\nreturn isMobile ? <MobileNav /> : <DesktopNav />;\n\n// Check specific breakpoint\nif (isLg) {\n  // Show expanded view on large screens\n}\n\n// Use current breakpoint\nconsole.log(`Current breakpoint: ${current}`); // \"md\", \"lg\", etc.",
+          "category": "hooks",
+          "file": "hooks/useBreakpoint.ts"
+        },
+        {
+          "name": "UseBreakpointReturn",
+          "type": "type",
+          "description": "Public return type alias for useBreakpoint hook Provides a stable public API for barrel re-exports",
+          "example": null,
+          "category": "hooks",
+          "file": "hooks/useBreakpoint.ts"
+        },
         {
           "name": "useDebounce",
           "type": "function",
@@ -57,6 +110,30 @@
           "category": "hooks",
           "file": "hooks/useLocalStorage.ts"
         },
+        {
+          "name": "useMediaQuery",
+          "type": "function",
+          "description": "Hook to check if a media query matches the current viewport ```tsx const isMobile = useMediaQuery('(max-width: 767px)'); const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)'); const isLandscape = useMediaQuery('(orientation: landscape)'); ```",
+          "params": [
+            {
+              "name": "query",
+              "type": "unknown",
+              "description": "A CSS media query string (e.g., \"(min-width: 768px)\")"
+            },
+            {
+              "name": "defaultValue",
+              "type": "unknown",
+              "description": "The default value to return during SSR or before the first render"
+            }
+          ],
+          "returns": {
+            "type": "unknown",
+            "description": "A boolean indicating whether the media query matches"
+          },
+          "example": "const isMobile = useMediaQuery('(max-width: 767px)');\nconst prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\nconst isLandscape = useMediaQuery('(orientation: landscape)');",
+          "category": "hooks",
+          "file": "hooks/useMediaQuery.ts"
+        },
         {
           "name": "useTimeControls",
           "type": "function",
@@ -1984,6 +2061,14 @@
           "category": "colors",
           "file": "utils/colors.ts"
         },
+        {
+          "name": "MapboxExpression",
+          "type": "type",
+          "description": "Type for Mapbox GL JS expressions Represents nested array structures used by Mapbox for data-driven styling",
+          "example": null,
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
         {
           "name": "mapValuesToCategoricalColors",
           "type": "constant",
@@ -2033,12 +2118,12 @@
     }
   },
   "summary": {
-    "totalUtilities": 201,
+    "totalUtilities": 208,
     "totalCategories": 5,
     "categories": [
       {
         "name": "hooks",
-        "count": 5
+        "count": 11
       },
       {
         "name": "formatting",
@@ -2050,7 +2135,7 @@
       },
       {
         "name": "colors",
-        "count": 20
+        "count": 21
       },
       {
         "name": "general",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",