@texturehq/edges 1.18.0 → 1.19.0

package/dist/styles.css

@@ -240,6 +240,7 @@
   --color-zinc-700: oklch(37% 0.013 285.805);
   --color-zinc-900: oklch(21% 0.006 285.885);
   --spacing: 0.25rem;
+  --breakpoint-lg: 64rem;
   --container-xs: 20rem;
   --container-sm: 24rem;
   --container-md: 28rem;
@@ -471,6 +472,7 @@
   --theme-background-canvas: linear-gradient(to bottom right, rgb(24 28 48), rgb(30 26 45), rgb(35 26 38));
   --color-text-body: #ededef;
   --color-text-heading: #ffffff;
+  --theme-text-label: #ffffff;
   --color-text-muted: #9ca3af;
   --color-text-caption: #d1d5db;
   --color-text-subtle: #8e8e93;
@@ -1297,6 +1299,9 @@
   .inset-0 {
     inset: var(--spacing-0);
   }
+  .inset-x-0 {
+    inset-inline: var(--spacing-0);
+  }
   .inset-y-\[2px\] {
     inset-block: 2px;
   }
@@ -1321,6 +1326,9 @@
   .top-4 {
     top: var(--spacing-4);
   }
+  .top-5 {
+    top: var(--spacing-5);
+  }
   .top-12 {
     top: var(--spacing-12);
   }
@@ -1393,6 +1401,9 @@
   .left-4 {
     left: var(--spacing-4);
   }
+  .left-6 {
+    left: var(--spacing-6);
+  }
   .left-full {
     left: 100%;
   }
@@ -1498,9 +1509,6 @@
   .mx-auto {
     margin-inline: auto;
   }
-  .-my-0\.5 {
-    margin-block: calc(var(--spacing) * -0.5);
-  }
   .-my-1 {
     margin-block: calc(var(--spacing-1) * -1);
   }
@@ -1588,6 +1596,9 @@
   .mb-8 {
     margin-bottom: var(--spacing-8);
   }
+  .mb-20 {
+    margin-bottom: var(--spacing-20);
+  }
   .-ml-px {
     margin-left: -1px;
   }
@@ -1798,6 +1809,9 @@
   .min-h-0 {
     min-height: var(--spacing-0);
   }
+  .min-h-\[20px\] {
+    min-height: 20px;
+  }
   .min-h-\[44px\] {
     min-height: 44px;
   }
@@ -1816,6 +1830,9 @@
   .min-h-\[320px\] {
     min-height: 320px;
   }
+  .min-h-\[400px\] {
+    min-height: 400px;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -2013,6 +2030,9 @@
   .max-w-none {
     max-width: none;
   }
+  .max-w-screen-lg {
+    max-width: var(--breakpoint-lg);
+  }
   .max-w-sm {
     max-width: var(--container-sm);
   }
@@ -2981,6 +3001,12 @@
       background-color: color-mix(in oklab, var(--color-background-surface) 90%, transparent);
     }
   }
+  .bg-background-surface\/95 {
+    background-color: color-mix(in srgb, #ffffff 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-background-surface) 95%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3514,6 +3540,9 @@
   .pr-9 {
     padding-right: var(--spacing-9);
   }
+  .pr-10 {
+    padding-right: var(--spacing-10);
+  }
   .pr-12 {
     padding-right: var(--spacing-12);
   }
@@ -3547,6 +3576,9 @@
   .pl-4 {
     padding-left: var(--spacing-4);
   }
+  .pl-5 {
+    padding-left: var(--spacing-5);
+  }
   .pl-7 {
     padding-left: var(--spacing-7);
   }
@@ -3731,9 +3763,6 @@
   .\!text-action-brand {
     color: var(--color-action-brand) !important;
   }
-  .\!text-text-caption {
-    color: var(--color-text-caption) !important;
-  }
   .text-\[\#111827\] {
     color: #111827;
   }
@@ -3970,6 +3999,9 @@
   .decoration-1 {
     text-decoration-thickness: 1px;
   }
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
@@ -4062,6 +4094,10 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
   }
+  .ring-0 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
+  }
   .ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
@@ -4157,6 +4193,10 @@
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur {
+    --tw-backdrop-blur: blur(8px);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .backdrop-blur-\[2px\] {
     --tw-backdrop-blur: blur(2px);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -4531,9 +4571,9 @@
       color: var(--color-text-muted);
     }
   }
-  .invalid\:bg-red-600 {
+  .invalid\:bg-feedback-error-border {
     &:invalid {
-      background-color: var(--color-red-600);
+      background-color: var(--color-feedback-error-border);
     }
   }
   .invalid\:outline-2 {
@@ -4639,6 +4679,16 @@
       }
     }
   }
+  .hover\:bg-action-default\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #333333 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-action-default) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-background-hover {
     &:hover {
       @media (hover: hover) {
@@ -4899,6 +4949,12 @@
       left: var(--spacing-4);
     }
   }
+  .focus\:shadow-none {
+    &:focus {
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .focus\:ring-0 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -4954,6 +5010,12 @@
       outline-style: none;
     }
   }
+  .focus-visible\:ring-0 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
+    }
+  }
   .focus-visible\:outline {
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -4981,6 +5043,12 @@
       outline-color: var(--color-action-default);
     }
   }
+  .focus-visible\:outline-none {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
@@ -5055,30 +5123,24 @@
       background-color: var(--color-background-hover);
     }
   }
-  .data-\[focused\]\:bg-feedback-error-background {
-    &[data-focused] {
-      background-color: var(--color-feedback-error-background);
-    }
-  }
-  .data-\[focused\]\:opacity-100 {
+  .data-\[focused\]\:bg-background-selected {
     &[data-focused] {
-      opacity: 100%;
+      background-color: var(--color-background-selected);
     }
   }
-  .data-\[focused\]\:\!outline-\[1\.5px\] {
+  .data-\[focused\]\:bg-feedback-error-background {
     &[data-focused] {
-      outline-style: var(--tw-outline-style) !important;
-      outline-width: 1.5px !important;
+      background-color: var(--color-feedback-error-background);
     }
   }
-  .data-\[focused\]\:\!outline-\[var\(--control-focus-ring-color\)\] {
+  .data-\[focused\]\:text-text-body {
     &[data-focused] {
-      outline-color: var(--control-focus-ring-color) !important;
+      color: var(--color-text-body);
     }
   }
-  .data-\[focused\]\:\!\[--tw-outline-style\:solid\] {
+  .data-\[focused\]\:opacity-100 {
     &[data-focused] {
-      --tw-outline-style: solid !important;
+      opacity: 100%;
     }
   }
   .data-\[placeholder\]\:text-text-placeholder {
@@ -5107,6 +5169,14 @@
       background-color: var(--color-gray-100);
     }
   }
+  .supports-\[backdrop-filter\]\:bg-background-surface\/70 {
+    @supports (backdrop-filter: var(--tw)) {
+      background-color: color-mix(in srgb, #ffffff 70%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-background-surface) 70%, transparent);
+      }
+    }
+  }
   .supports-\[backdrop-filter\]\:bg-black\/15 {
     @supports (backdrop-filter: var(--tw)) {
       background-color: color-mix(in srgb, #000000 15%, transparent);
@@ -5551,11 +5621,6 @@
       align-items: center;
     }
   }
-  .md\:items-start {
-    @media (width >= 48rem) {
-      align-items: flex-start;
-    }
-  }
   .md\:justify-between {
     @media (width >= 48rem) {
       justify-content: space-between;

package/dist/utilities.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.18.0",
-  "generatedAt": "2025-11-10T02:40:34.291Z",
+  "version": "1.19.0",
+  "generatedAt": "2025-11-13T03:24:57.454Z",
   "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.18.0",
+  "version": "1.19.0",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -25,6 +25,16 @@
       "import": "./dist/server.js",
       "default": "./dist/server.js"
     },
+    "./rhf": {
+      "types": "./dist/rhf/index.d.ts",
+      "import": "./dist/rhf/index.js",
+      "default": "./dist/rhf/index.js"
+    },
+    "./form": {
+      "types": "./dist/form/index.d.ts",
+      "import": "./dist/form/index.js",
+      "default": "./dist/form/index.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./dist/styles.css": "./dist/styles.css",
     "./theme.css": "./dist/theme.css",
@@ -58,9 +68,23 @@
     "postinstall": "node scripts/setup-cursor-rules.js || echo \"! setup-cursor-rules: non-fatal error\""
   },
   "peerDependencies": {
+    "@hookform/resolvers": "^3.x",
     "next": "*",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.x",
+    "zod": "^3.x"
+  },
+  "peerDependenciesMeta": {
+    "@hookform/resolvers": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.7",
@@ -104,6 +128,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.4",
+    "@hookform/resolvers": "^3.9.0",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-styling-webpack": "^1.0.1",
@@ -134,6 +159,7 @@
     "postcss-cli": "^11.0.0",
     "react": "19.2.0",
     "react-dom": "19.2.0",
+    "react-hook-form": "^7.53.0",
     "storybook": "^8.6.14",
     "style-dictionary": "^5.0.4",
     "tailwindcss": "^4.1.14",
@@ -142,6 +168,7 @@
     "vite": "^5.1.6",
     "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.1.1",
-    "yalc": "^1.0.0-pre.53"
+    "yalc": "^1.0.0-pre.53",
+    "zod": "^3.23.8"
   }
 }

package/scripts/generate-edges-docs.js

@@ -850,6 +850,7 @@ Complete documentation for the @texturehq/edges design system.
 - **${hookCount} React Hooks** for common functionality
 - **${utilityCount} Utility Functions** for formatting, charts, colors, and more
 - **Complete Theme System** with Tailwind 4 + CSS variables
+- **Integrations** (Optional) like React Hook Form support
 
 ## Quick Links
 
@@ -865,6 +866,9 @@ Complete documentation for the @texturehq/edges design system.
 - [Theme System](theme-system.md) - Colors, spacing, typography with Tailwind 4
 - [Patterns](patterns.md) - Common UI patterns and best practices
 
+### Integrations (Optional)
+- [React Hook Form (RHF)](integrations-rhf.md) - Opt-in adapters and utilities for fast form building
+
 ## Component Categories
 
 `;
@@ -892,6 +896,18 @@ yarn add @texturehq/edges
 import { Button, TextField, DataTable } from "@texturehq/edges";
 \`\`\`
 
+## Integrations
+
+React Hook Form integration is available as an optional subpath and tree-shakes when unused.
+
+\`\`\`bash
+yarn add react-hook-form @hookform/resolvers zod
+\`\`\`
+
+\`\`\`typescript
+import { RHFForm, RHFTextField } from "@texturehq/edges/rhf";
+\`\`\`
+
 ## For Dashboard Development
 
 When building UI in \`apps/dashboard\`, reference:
@@ -900,6 +916,7 @@ When building UI in \`apps/dashboard\`, reference:
 - **Utilities**: \`docs/ai/edges/utilities-reference.md\`
 - **Theme**: \`docs/ai/edges/theme-system.md\`
 - **Patterns**: \`docs/ai/edges/patterns.md\`
+ - **Integrations (Optional)**: \`docs/ai/edges/integrations-rhf.md\`
 
 ---
 
@@ -941,6 +958,15 @@ The @texturehq/edges design system provides ${componentCount} React components,
 3. Review \`docs/ai/edges/patterns.md\` for common UI patterns and best practices
 4. Check \`docs/ai/edges/theme-system.md\` for Tailwind 4 color tokens and styling
 
+### Forms + RHF (Optional)
+
+- Import adapters from \`@texturehq/edges/rhf\`; install optional peers: \`react-hook-form @hookform/resolvers zod\`
+- Quickstart:
+  \`\`\`tsx
+  import { RHFForm, RHFTextField, SubmitButton, ErrorSummary } from "@texturehq/edges/rhf";
+  \`\`\`
+- Full guide: \`docs/ai/edges/integrations-rhf.md\`
+
 ### Additional Resources
 
 - Hooks: \`docs/ai/edges/hooks-reference.md\`
@@ -967,6 +993,22 @@ The @texturehq/edges design system provides ${componentCount} React components,
   writeFile(path.join(fragmentsDir, "edges.md"), content);
 }
 
+// ============================================================================
+// INTEGRATIONS DOCS
+// ============================================================================
+
+function generateIntegrationsDocs() {
+  console.log("\n🔗 Generating integrations docs...");
+  const rhfReadmeSrc = path.join(SRC_DIR, "integrations", "rhf", "README.md");
+  const rhfDocDest = path.join(DOCS_AI_EDGES, "integrations-rhf.md");
+  const content = read(rhfReadmeSrc);
+  if (content) {
+    writeFile(rhfDocDest, content);
+  } else {
+    console.log("  ℹ️  RHF README not found, skipping integrations-rhf.md");
+  }
+}
+
 // ============================================================================
 // MAIN
 // ============================================================================
@@ -991,6 +1033,7 @@ async function main() {
   generateUtilitiesReference(utilitiesManifest);
   generateThemeSystemDoc(colorVars);
   generateEdgesReadme(componentsManifest, utilitiesManifest);
+  generateIntegrationsDocs();
 
   // Generate agent instruction fragment
   generateEdgesFragment(componentsManifest, utilitiesManifest);