@texturehq/edges 1.5.1 → 1.5.3

package/dist/styles/animations.css

@@ -103,6 +103,46 @@
   }
 }
 
+@keyframes zoom-in-97 {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-out-97 {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+}
+
+@keyframes slide-in-from-top-2 {
+  from {
+    transform: translateY(-0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-to-top-2 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-0.5rem);
+  }
+}
+
 /* ============================================
    Animation Utility Classes
    ============================================ */

package/dist/styles.css

@@ -93,6 +93,7 @@
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
   --radius-full: 9999px;
   --font-weight-light: 300;
   --font-weight-normal: 400;
@@ -220,6 +221,7 @@
   --text-4xl--line-height: calc(2.5 / 2.25);
   --tracking-tight: -0.025em;
   --tracking-wider: 0.05em;
+  --leading-tight: 1.25;
   --leading-relaxed: 1.625;
   --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
@@ -800,6 +802,42 @@
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 }
+@keyframes zoom-in-97 {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes zoom-out-97 {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+}
+@keyframes slide-in-from-top-2 {
+  from {
+    transform: translateY(-0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes slide-out-to-top-2 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-0.5rem);
+  }
+}
 .slide-in-from-right {
   animation: slide-in-from-right 0.3s ease-out;
 }
@@ -1233,6 +1271,9 @@
   .-my-2 {
     margin-block: calc(var(--spacing-2) * -1);
   }
+  .my-1 {
+    margin-block: var(--spacing-1);
+  }
   .my-2 {
     margin-block: var(--spacing-2);
   }
@@ -1461,9 +1502,6 @@
   .h-\[var\(--control-xl-height\)\] {
     height: var(--control-xl-height);
   }
-  .h-auto {
-    height: auto;
-  }
   .h-full {
     height: 100%;
   }
@@ -1476,12 +1514,12 @@
   .max-h-48 {
     max-height: var(--spacing-48);
   }
+  .max-h-\[90vh\] {
+    max-height: 90vh;
+  }
   .max-h-\[300px\] {
     max-height: 300px;
   }
-  .max-h-\[inherit\] {
-    max-height: inherit;
-  }
   .min-h-0 {
     min-height: var(--spacing-0);
   }
@@ -1633,6 +1671,19 @@
   .max-w-\[250px\] {
     max-width: 250px;
   }
+  .max-w-\[300px\] {
+    max-width: 300px;
+  }
+  .max-w-\[350px\] {
+    max-width: 350px;
+  }
+  .max-w-\[400px\] {
+    max-width: 400px;
+  }
+  .max-w-fit {
+    max-width: -moz-fit-content;
+    max-width: fit-content;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1675,6 +1726,9 @@
   .min-w-\[100px\] {
     min-width: 100px;
   }
+  .min-w-\[120px\] {
+    min-width: 120px;
+  }
   .min-w-\[150px\] {
     min-width: 150px;
   }
@@ -1713,6 +1767,12 @@
     --tw-border-spacing-y: var(--spacing-0);
     border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
   }
+  .origin-top-left {
+    transform-origin: 0 0;
+  }
+  .origin-top-right {
+    transform-origin: 100% 0;
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2119,9 +2179,6 @@
       border-color: var(--color-border-muted);
     }
   }
-  .self-center {
-    align-self: center;
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -2181,6 +2238,10 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-t-2xl {
+    border-top-left-radius: var(--radius-2xl);
+    border-top-right-radius: var(--radius-2xl);
+  }
   .rounded-t-none {
     border-top-left-radius: var(--radius-none);
     border-top-right-radius: var(--radius-none);
@@ -2301,6 +2362,12 @@
   .border-border-default {
     border-color: var(--color-border-default);
   }
+  .border-border-default\/50 {
+    border-color: color-mix(in srgb, #e5e7eb 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-border-default) 50%, transparent);
+    }
+  }
   .border-border-input {
     border-color: var(--color-border-input);
   }
@@ -2632,6 +2699,13 @@
     --tw-gradient-from: var(--color-action-primary);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-black\/60 {
+    --tw-gradient-from: color-mix(in srgb, #000000 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-blue-100 {
     --tw-gradient-from: var(--color-blue-100);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2649,10 +2723,25 @@
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
+  .via-black\/50 {
+    --tw-gradient-via: color-mix(in srgb, #000000 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-via: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
   .to-\[var\(--skeleton-base\)\] {
     --tw-gradient-to: var(--skeleton-base);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-black\/60 {
+    --tw-gradient-to: color-mix(in srgb, #000000 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-to: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .to-blue-200 {
     --tw-gradient-to: var(--color-blue-200);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2848,12 +2937,18 @@
   .pr-9 {
     padding-right: var(--spacing-9);
   }
+  .pb-0 {
+    padding-bottom: var(--spacing-0);
+  }
   .pb-1\.5 {
     padding-bottom: calc(var(--spacing) * 1.5);
   }
   .pb-2 {
     padding-bottom: var(--spacing-2);
   }
+  .pb-3 {
+    padding-bottom: var(--spacing-3);
+  }
   .pb-4 {
     padding-bottom: var(--spacing-4);
   }
@@ -2977,6 +3072,10 @@
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
   .font-\[500\] {
     --tw-font-weight: 500;
     font-weight: 500;
@@ -3242,6 +3341,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[inset_0_1px_0_0_theme\(colors\.gray\.600\)\] {
     --tw-shadow: inset 0 1px 0 0 var(--tw-shadow-color, #4b5563);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3282,6 +3385,12 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-black\/20 {
+    --tw-shadow-color: color-mix(in srgb, #000000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
   .ring-background-surface {
     --tw-ring-color: var(--color-background-surface);
   }
@@ -3689,6 +3798,12 @@
       border-width: 0px;
     }
   }
+  .last\:border-b-0 {
+    &:last-child {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+  }
   .visited\:text-action-primary {
     &:visited {
       color: var(--color-action-primary);
@@ -3834,6 +3949,13 @@
       }
     }
   }
+  .hover\:bg-red-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-50);
+      }
+    }
+  }
   .hover\:bg-red-700 {
     &:hover {
       @media (hover: hover) {
@@ -4127,6 +4249,24 @@
       opacity: 50%;
     }
   }
+  .data-\[exiting\]\:duration-150 {
+    &[data-exiting] {
+      --tw-duration: 150ms;
+      transition-duration: 150ms;
+    }
+  }
+  .data-\[exiting\]\:duration-200 {
+    &[data-exiting] {
+      --tw-duration: 200ms;
+      transition-duration: 200ms;
+    }
+  }
+  .data-\[exiting\]\:ease-in {
+    &[data-exiting] {
+      --tw-ease: var(--ease-in);
+      transition-timing-function: var(--ease-in);
+    }
+  }
   .data-\[focused\]\:bg-background-hover {
     &[data-focused] {
       background-color: var(--color-background-hover);
@@ -4179,6 +4319,14 @@
       background-color: var(--color-gray-100);
     }
   }
+  .supports-\[backdrop-filter\]\:bg-black\/40 {
+    @supports (backdrop-filter: var(--tw)) {
+      background-color: color-mix(in srgb, #000000 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+      }
+    }
+  }
   .sm\:col-auto {
     @media (width >= 40rem) {
       grid-column: auto;
@@ -4484,6 +4632,11 @@
       height: 100%;
     }
   }
+  .md\:max-h-\[85vh\] {
+    @media (width >= 48rem) {
+      max-height: 85vh;
+    }
+  }
   .md\:w-64 {
     @media (width >= 48rem) {
       width: var(--spacing-64);
@@ -4570,11 +4723,26 @@
       grid-template-columns: none;
     }
   }
+  .md\:items-center {
+    @media (width >= 48rem) {
+      align-items: center;
+    }
+  }
   .md\:gap-6 {
     @media (width >= 48rem) {
       gap: var(--spacing-6);
     }
   }
+  .md\:rounded-xl {
+    @media (width >= 48rem) {
+      border-radius: var(--radius-xl);
+    }
+  }
+  .md\:p-4 {
+    @media (width >= 48rem) {
+      padding: var(--spacing-4);
+    }
+  }
   .md\:px-6 {
     @media (width >= 48rem) {
       padding-inline: var(--spacing-6);
@@ -5890,11 +6058,6 @@
       display: block;
     }
   }
-  .\[\[data-placement\]\>\&\]\:p-4 {
-    [data-placement]>& {
-      padding: var(--spacing-4);
-    }
-  }
   .\[td\:first-child_\&\]\:rounded-s-full {
     td:first-child & {
       border-start-start-radius: var(--radius-full);

package/dist/utilities.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.5.1",
-  "generatedAt": "2025-10-10T17:36:16.957Z",
+  "version": "1.5.3",
+  "generatedAt": "2025-10-12T13:19:01.260Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like debouncing, local storage, and time controls",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -59,8 +59,8 @@
   },
   "peerDependencies": {
     "next": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.7",
@@ -106,14 +106,14 @@
     "@tailwindcss/postcss": "^4.1.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/file-saver": "^2.0.7",
     "@types/luxon": "^3.7.1",
     "@types/node": "^20.11.30",
     "@types/papaparse": "^5.3.16",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^3.1.1",
     "@vitest/ui": "^3.1.1",
@@ -123,8 +123,8 @@
     "jsdom": "^24.0.0",
     "postcss": "^8.4.35",
     "postcss-cli": "^11.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "storybook": "^8.6.14",
     "style-dictionary": "^5.0.4",
     "tailwindcss": "^4.1.3",

package/scripts/generate-components-manifest.js

@@ -39,7 +39,7 @@ function findComponentFile(relPath) {
   // Components can be in directories like Button/Button.tsx or charts/ChartAxis/ChartAxis.tsx
   const base = path.join(SRC_DIR, "components", relPath);
   // Get the component name (last part of the path)
-  const componentName = relPath.split('/').pop();
+  const componentName = relPath.split("/").pop();
   const candidates = [
     path.join(base, `${componentName}.tsx`),
     path.join(base, `${componentName}.ts`),
@@ -127,7 +127,7 @@ function run() {
       // Description: JSDoc above various export patterns
       let idx = -1;
       let description = "";
-      
+
       // Try multiple patterns to find the component export
       const patterns = [
         `export function ${name}`,
@@ -137,11 +137,11 @@ function run() {
         new RegExp(`export\\s+const\\s+${name}\\s*[:=]`),
         new RegExp(`export\\s+function\\s+${name}\\s*[(<]`),
         new RegExp(`export\\s+class\\s+${name}\\s*[{<]`),
-        new RegExp(`export\\s+(interface|type)\\s+${name}Props\\b`)
+        new RegExp(`export\\s+(interface|type)\\s+${name}Props\\b`),
       ];
-      
+
       for (const pattern of patterns) {
-        if (typeof pattern === 'string') {
+        if (typeof pattern === "string") {
           idx = content.indexOf(pattern);
         } else {
           const match = content.search(pattern);
@@ -149,7 +149,7 @@ function run() {
         }
         if (idx !== -1) break;
       }
-      
+
       // If we found an export, get the JSDoc above it
       if (idx !== -1) {
         description = getJsdocAbove(content, idx);