@texturehq/edges 1.7.3 → 1.7.6

package/dist/styles/animations.css

@@ -105,22 +105,18 @@
 
 @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);
   }
 }
@@ -143,6 +139,103 @@
   }
 }
 
+@keyframes slide-in-from-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-to-bottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes slide-in-from-bottom-with-scale {
+  from {
+    opacity: 0;
+    transform: translateY(100%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes slide-out-to-bottom-with-scale {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%) scale(0.95);
+  }
+}
+
+@keyframes tray-enter {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes tray-enter-scale {
+  from {
+    opacity: 0;
+    transform: translateY(100%) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes tray-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+@keyframes tray-exit-scale {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%) scale(0.97);
+  }
+}
+
+@keyframes handle-wiggle {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-2px);
+  }
+  75% {
+    transform: translateX(2px);
+  }
+}
+
 /* ============================================
    Animation Utility Classes
    ============================================ */
@@ -170,3 +263,11 @@
 .fade-out {
   animation: fade-out 0.15s ease-in;
 }
+
+.slide-in-from-bottom {
+  animation: slide-in-from-bottom 0.3s ease-out;
+}
+
+.slide-out-to-bottom {
+  animation: slide-out-to-bottom 0.2s ease-in;
+}

package/dist/styles.css

@@ -804,21 +804,17 @@
 }
 @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);
   }
 }
@@ -838,6 +834,93 @@
     transform: translateY(-0.5rem);
   }
 }
+@keyframes slide-in-from-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes slide-out-to-bottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes slide-in-from-bottom-with-scale {
+  from {
+    opacity: 0;
+    transform: translateY(100%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes slide-out-to-bottom-with-scale {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%) scale(0.95);
+  }
+}
+@keyframes tray-enter {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes tray-enter-scale {
+  from {
+    opacity: 0;
+    transform: translateY(100%) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes tray-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+@keyframes tray-exit-scale {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%) scale(0.97);
+  }
+}
+@keyframes handle-wiggle {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-2px);
+  }
+  75% {
+    transform: translateX(2px);
+  }
+}
 .slide-in-from-right {
   animation: slide-in-from-right 0.3s ease-out;
 }
@@ -856,6 +939,12 @@
 .fade-out {
   animation: fade-out 0.15s ease-in;
 }
+.slide-in-from-bottom {
+  animation: slide-in-from-bottom 0.3s ease-out;
+}
+.slide-out-to-bottom {
+  animation: slide-out-to-bottom 0.2s ease-in;
+}
 .scrollbar-hide {
   scrollbar-width: none;
   &::-webkit-scrollbar {
@@ -1779,6 +1868,9 @@
     --tw-border-spacing-y: var(--spacing-0);
     border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
   }
+  .origin-bottom {
+    transform-origin: bottom;
+  }
   .origin-top-left {
     transform-origin: 0 0;
   }
@@ -1818,9 +1910,18 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-\[handle-wiggle_0\.6s_ease-in-out\] {
+    animation: handle-wiggle 0.6s ease-in-out;
+  }
   .animate-\[ping_2s_ease-in-out_infinite\] {
     animation: ping 2s ease-in-out infinite;
   }
+  .animate-\[tray-enter-scale_400ms_cubic-bezier\(0\.32\,0\.72\,0\,1\)\] {
+    animation: tray-enter-scale 400ms cubic-bezier(0.32,0.72,0,1);
+  }
+  .animate-\[tray-enter_400ms_cubic-bezier\(0\.32\,0\.72\,0\,1\)\] {
+    animation: tray-enter 400ms cubic-bezier(0.32,0.72,0,1);
+  }
   .animate-bounce {
     animation: var(--animate-bounce);
   }
@@ -2300,6 +2401,10 @@
     border-style: var(--tw-border-style);
     border-width: 7px;
   }
+  .border-x {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
   .border-y {
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
@@ -2381,6 +2486,12 @@
   .border-border-default {
     border-color: var(--color-border-default);
   }
+  .border-border-default\/40 {
+    border-color: color-mix(in srgb, #e5e7eb 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-border-default) 40%, transparent);
+    }
+  }
   .border-border-default\/50 {
     border-color: color-mix(in srgb, #e5e7eb 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2956,6 +3067,9 @@
   .pt-1 {
     padding-top: var(--spacing-1);
   }
+  .pt-2 {
+    padding-top: var(--spacing-2);
+  }
   .pt-4 {
     padding-top: var(--spacing-4);
   }
@@ -2986,6 +3100,9 @@
   .pb-0 {
     padding-bottom: var(--spacing-0);
   }
+  .pb-1 {
+    padding-bottom: var(--spacing-1);
+  }
   .pb-1\.5 {
     padding-bottom: calc(var(--spacing) * 1.5);
   }
@@ -2998,6 +3115,9 @@
   .pb-4 {
     padding-bottom: var(--spacing-4);
   }
+  .pb-6 {
+    padding-bottom: var(--spacing-6);
+  }
   .pb-28 {
     padding-bottom: var(--spacing-28);
   }
@@ -3440,6 +3560,12 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
+  .shadow-black\/30 {
+    --tw-shadow-color: color-mix(in srgb, #000000 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 30%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
   .ring-background-surface {
     --tw-ring-color: var(--color-background-surface);
   }
@@ -3884,6 +4010,13 @@
       outline-color: var(--color-feedback-error-border);
     }
   }
+  .hover\:w-16 {
+    &:hover {
+      @media (hover: hover) {
+        width: var(--spacing-16);
+      }
+    }
+  }
   .hover\:scale-110 {
     &:hover {
       @media (hover: hover) {
@@ -3977,6 +4110,13 @@
       }
     }
   }
+  .hover\:bg-border-default {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-border-default);
+      }
+    }
+  }
   .hover\:bg-feedback-error-background {
     &:hover {
       @media (hover: hover) {
@@ -4293,6 +4433,16 @@
       opacity: 50%;
     }
   }
+  .data-\[exiting\]\:animate-\[tray-exit-scale_250ms_cubic-bezier\(0\.32\,0\,0\.67\,0\)\] {
+    &[data-exiting] {
+      animation: tray-exit-scale 250ms cubic-bezier(0.32,0,0.67,0);
+    }
+  }
+  .data-\[exiting\]\:animate-\[tray-exit_250ms_cubic-bezier\(0\.32\,0\,0\.67\,0\)\] {
+    &[data-exiting] {
+      animation: tray-exit 250ms cubic-bezier(0.32,0,0.67,0);
+    }
+  }
   .data-\[exiting\]\:duration-150 {
     &[data-exiting] {
       --tw-duration: 150ms;
@@ -4536,6 +4686,16 @@
       justify-content: space-between;
     }
   }
+  .sm\:p-2 {
+    @media (width >= 40rem) {
+      padding: var(--spacing-2);
+    }
+  }
+  .sm\:p-4 {
+    @media (width >= 40rem) {
+      padding: var(--spacing-4);
+    }
+  }
   .md\:relative {
     @media (width >= 48rem) {
       position: relative;
@@ -4651,6 +4811,11 @@
       display: none;
     }
   }
+  .md\:h-10 {
+    @media (width >= 48rem) {
+      height: var(--spacing-10);
+    }
+  }
   .md\:h-96 {
     @media (width >= 48rem) {
       height: var(--spacing-96);
@@ -4671,6 +4836,11 @@
       max-height: 85vh;
     }
   }
+  .md\:w-10 {
+    @media (width >= 48rem) {
+      width: var(--spacing-10);
+    }
+  }
   .md\:w-64 {
     @media (width >= 48rem) {
       width: var(--spacing-64);
@@ -5446,6 +5616,14 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .dark\:shadow-black\/60 {
+    @media (prefers-color-scheme: dark) {
+      --tw-shadow-color: color-mix(in srgb, #000000 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 60%, transparent) var(--tw-shadow-alpha), transparent);
+      }
+    }
+  }
   .dark\:ring-gray-700 {
     @media (prefers-color-scheme: dark) {
       --tw-ring-color: var(--color-gray-700);

package/dist/utilities.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.7.3",
-  "generatedAt": "2025-10-16T14:43:20.652Z",
+  "version": "1.7.6",
+  "generatedAt": "2025-10-19T15:36:30.017Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like breakpoints, debouncing, local storage, and media queries",

package/package.json

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

package/scripts/generate-edges-docs.js

@@ -22,6 +22,9 @@ const DIST_DIR = path.join(ROOT, "dist");
 const MONO_ROOT = path.join(ROOT, "../..");
 const DOCS_AI_EDGES = path.join(MONO_ROOT, "docs/ai/edges");
 
+const PACKAGE_JSON_PATH = path.join(ROOT, "package.json");
+const PACKAGE_VERSION = JSON.parse(fs.readFileSync(PACKAGE_JSON_PATH, "utf8")).version;
+
 // ============================================================================
 // UTILITIES
 // ============================================================================
@@ -278,7 +281,7 @@ function generateComponentsManifest() {
   }
 
   const manifest = {
-    version: process.env.npm_package_version || "unknown",
+    version: PACKAGE_VERSION,
     generatedAt: new Date().toISOString(),
     components: components,
     categories: categories,
@@ -390,7 +393,7 @@ function generateUtilitiesManifest() {
   console.log("\n🔧 Generating utilities manifest...");
 
   const manifest = {
-    version: process.env.npm_package_version || "unknown",
+    version: PACKAGE_VERSION,
     generatedAt: new Date().toISOString(),
     categories: {},
   };
@@ -463,21 +466,52 @@ function generateUtilitiesManifest() {
 function parseThemeColors() {
   console.log("\n🎨 Parsing theme colors...");
 
-  const themePath = path.join(DIST_DIR, "theme.css");
-  if (!fs.existsSync(themePath)) {
-    console.log("  ⚠️  theme.css not found, skipping color extraction");
+  const distThemePath = path.join(DIST_DIR, "theme.css");
+  const sources = [];
+
+  if (fs.existsSync(distThemePath)) {
+    sources.push(distThemePath);
+  } else {
+    const generatedDir = path.join(SRC_DIR, "generated");
+    const fallbackFiles = [
+      path.join(generatedDir, "tailwind-tokens-light.css"),
+      path.join(generatedDir, "tailwind-tokens-dark.css"),
+      path.join(generatedDir, "viz-runtime.css"),
+    ];
+
+    for (const file of fallbackFiles) {
+      if (fs.existsSync(file)) {
+        sources.push(file);
+      }
+    }
+
+    if (sources.length > 0) {
+      console.log("  ℹ️  Using generated token CSS as fallback (dist/theme.css missing)");
+    }
+  }
+
+  if (sources.length === 0) {
+    console.log("  ⚠️  No theme CSS sources found, skipping color extraction");
     return {};
   }
 
-  const themeContent = read(themePath);
   const colorVars = {};
-  const colorRegex = /--color-([a-z-]+):\s*([^;]+);/g;
-  let match;
+  const seen = new Set();
+  const colorRegex = /--color-([a-zA-Z0-9-]+):\s*([^;]+);/g;
+
+  for (const source of sources) {
+    const themeContent = read(source);
+    let match;
 
-  while ((match = colorRegex.exec(themeContent))) {
-    const varName = match[1];
-    const value = match[2].trim();
-    colorVars[varName] = value;
+    while ((match = colorRegex.exec(themeContent))) {
+      const varName = match[1];
+      const value = match[2].trim();
+
+      if (!seen.has(varName)) {
+        seen.add(varName);
+        colorVars[varName] = value;
+      }
+    }
   }
 
   console.log(`  Found ${Object.keys(colorVars).length} color variables`);
@@ -495,7 +529,7 @@ function generateComponentsReference(componentsManifest) {
 
   let content = `# Edges Components Reference
 
-> **Auto-generated** - Do not edit manually. Run \`yarn generate:edges-docs\` to regenerate.
+> **Auto-generated** - Do not edit manually. Run \`node scripts/generate-edges-docs.js\` to regenerate.
 
 This document provides a complete reference of all ${components.length} components in the @texturehq/edges design system, organized by functional category.
 
@@ -571,7 +605,7 @@ function generateHooksReference(utilitiesManifest) {
 
   let content = `# Edges Hooks Reference
 
-> **Auto-generated** - Do not edit manually. Run \`yarn generate:edges-docs\` to regenerate.
+> **Auto-generated** - Do not edit manually. Run \`node scripts/generate-edges-docs.js\` to regenerate.
 
 This document provides a complete reference of all ${hooks.length} React hooks in the @texturehq/edges design system.
 
@@ -611,7 +645,7 @@ function generateUtilitiesReference(utilitiesManifest) {
 
   let content = `# Edges Utilities Reference
 
-> **Auto-generated** - Do not edit manually. Run \`yarn generate:edges-docs\` to regenerate.
+> **Auto-generated** - Do not edit manually. Run \`node scripts/generate-edges-docs.js\` to regenerate.
 
 This document provides a complete reference of all utility functions in the @texturehq/edges design system.
 
@@ -657,7 +691,7 @@ function generateThemeSystemDoc(colorVars) {
 
   let content = `# Edges Theme System
 
-> **Auto-generated** - Do not edit manually. Run \`yarn generate:edges-docs\` to regenerate.
+> **Auto-generated** - Do not edit manually. Run \`node scripts/generate-edges-docs.js\` to regenerate.
 
 ## Overview
 
@@ -781,7 +815,7 @@ function generateEdgesReadme(componentsManifest, utilitiesManifest) {
 
   let content = `# Edges Design System - AI Context
 
-> **Auto-generated** - Do not edit manually. Run \`yarn generate:edges-docs\` to regenerate.
+> **Auto-generated** - Do not edit manually. Run \`node scripts/generate-edges-docs.js\` to regenerate.
 
 👋 **AI Agents: Start here!**