@texturehq/edges 1.0.0 → 1.0.2

package/dist/styles.css

@@ -26,12 +26,14 @@
   --color-green-500: oklch(0.627 0.194 130.331);
   --color-green-600: oklch(0.527 0.19 131.688);
   --color-green-800: oklch(0.366 0.121 132.109);
+  --color-green-900: oklch(0.314 0.095 133.748);
   --color-blue-50: oklch(0.97 0.014 237.69);
   --color-blue-100: oklch(0.932 0.032 241.935);
   --color-blue-200: oklch(0.882 0.059 243.157);
   --color-blue-500: oklch(0.623 0.214 250.546);
   --color-blue-600: oklch(0.546 0.245 253.739);
   --color-blue-800: oklch(0.424 0.199 255.585);
+  --color-blue-900: oklch(0.368 0.146 254.128);
   --color-yellow-50: oklch(0.987 0.024 102.851);
   --color-yellow-100: oklch(0.973 0.071 103.193);
   --color-yellow-200: oklch(0.945 0.129 101.54);
@@ -77,6 +79,7 @@
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
+  --color-background-body: #ffffff;
   --color-background-surface: #ffffff;
   --color-background-muted: #f3f4f6;
   --color-background-hover: #f3f4f6;
@@ -109,6 +112,7 @@
   --color-feedback-info-border: #93c5fd;
   --color-action-primary: #444ae1;
   --color-action-primary-hover: #383ccb;
+  --color-action-primary-light: rgba(68, 74, 225, 0.1);
   --color-action-secondary: #333333;
   --control-sm: 0.75rem;
   --control-md: 0.875rem;
@@ -165,6 +169,7 @@
   --container-xl: 36rem;
   --container-4xl: 56rem;
   --container-6xl: 72rem;
+  --container-7xl: 80rem;
   --text-xs: 0.75rem;
   --text-xs--line-height: calc(1 / 0.75);
   --text-sm: 0.875rem;
@@ -198,7 +203,7 @@
   --default-font-family: var(--font-sans);
   --default-mono-font-family: var(--font-mono);
 }
-.dark {
+.theme-dark {
   --color-white: #ffffff;
   --color-black: #000000;
   --color-gray-50: #f9fafb;
@@ -374,6 +379,7 @@
   --color-action-primary: #7a8ee1;
   --color-action-primary-hover: #6a6fcc;
   --color-action-primary-text: #ffffff;
+  --color-action-primary-light: rgba(122, 142, 225, 0.15);
   --color-action-secondary: #e5e7eb;
   --color-action-secondary-hover: #f3f4f6;
   --color-action-secondary-text: #111827;
@@ -770,6 +776,9 @@
   .isolate {
     isolation: isolate;
   }
+  .-z-10 {
+    z-index: calc(10 * -1);
+  }
   .z-0 {
     z-index: 0;
   }
@@ -782,9 +791,15 @@
   .z-30 {
     z-index: 30;
   }
+  .z-40 {
+    z-index: 40;
+  }
   .z-50 {
     z-index: 50;
   }
+  .z-\[60\] {
+    z-index: 60;
+  }
   .col-span-full {
     grid-column: 1 / -1;
   }
@@ -842,6 +857,9 @@
   .mt-6 {
     margin-top: var(--spacing-6);
   }
+  .mt-8 {
+    margin-top: var(--spacing-8);
+  }
   .mr-1 {
     margin-right: var(--spacing-1);
   }
@@ -863,12 +881,18 @@
   .mb-4 {
     margin-bottom: var(--spacing-4);
   }
+  .mb-6 {
+    margin-bottom: var(--spacing-6);
+  }
   .-ml-px {
     margin-left: -1px;
   }
   .ml-2 {
     margin-left: var(--spacing-2);
   }
+  .ml-6 {
+    margin-left: var(--spacing-6);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -971,12 +995,18 @@
   .h-\[28px\] {
     height: 28px;
   }
+  .h-\[60px\] {
+    height: 60px;
+  }
   .h-\[120px\] {
     height: 120px;
   }
   .h-\[400px\] {
     height: 400px;
   }
+  .h-\[calc\(100vh-60px\)\] {
+    height: calc(100vh - 60px);
+  }
   .h-\[var\(--control-lg-height\)\] {
     height: var(--control-lg-height);
   }
@@ -998,6 +1028,9 @@
   .h-px {
     height: 1px;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .max-h-48 {
     max-height: var(--spacing-48);
   }
@@ -1019,6 +1052,9 @@
   .min-h-\[200px\] {
     min-height: 200px;
   }
+  .min-h-screen {
+    min-height: 100vh;
+  }
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
@@ -1064,6 +1100,9 @@
   .w-12 {
     width: var(--spacing-12);
   }
+  .w-14 {
+    width: var(--spacing-14);
+  }
   .w-16 {
     width: var(--spacing-16);
   }
@@ -1122,6 +1161,9 @@
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
   .max-w-\[200px\] {
     max-width: 200px;
   }
@@ -1203,6 +1245,10 @@
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-x-full {
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-0 {
     --tw-translate-x: var(--spacing-0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1554,6 +1600,10 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .\!border-r-0 {
+    border-right-style: var(--tw-border-style) !important;
+    border-right-width: 0px !important;
+  }
   .border-r {
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
@@ -1574,6 +1624,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .border-l-4 {
     border-left-style: var(--tw-border-style);
     border-left-width: 4px;
@@ -1704,6 +1758,9 @@
   .bg-action-primary {
     background-color: var(--color-action-primary);
   }
+  .bg-action-primary-light {
+    background-color: var(--color-action-primary-light);
+  }
   .bg-action-primary\/5 {
     background-color: color-mix(in srgb, #444ae1 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1722,6 +1779,9 @@
       background-color: color-mix(in oklab, var(--color-action-secondary) 10%, transparent);
     }
   }
+  .bg-background-body {
+    background-color: var(--color-background-body);
+  }
   .bg-background-hover {
     background-color: var(--color-background-hover);
   }
@@ -1904,9 +1964,6 @@
   .bg-clip-padding {
     background-clip: padding-box;
   }
-  .fill-\[\#333333\] {
-    fill: #333333;
-  }
   .fill-brand-primary {
     fill: var(--color-brand-primary);
   }
@@ -1969,6 +2026,9 @@
   .p-\[1rem\] {
     padding: 1rem;
   }
+  .\!px-1 {
+    padding-inline: var(--spacing-1) !important;
+  }
   .\!px-2 {
     padding-inline: var(--spacing-2) !important;
   }
@@ -1999,6 +2059,9 @@
   .px-5 {
     padding-inline: var(--spacing-5);
   }
+  .px-6 {
+    padding-inline: var(--spacing-6);
+  }
   .px-\[var\(--control-padding-lg\)\] {
     padding-inline: var(--control-padding-lg);
   }
@@ -2044,6 +2107,9 @@
   .py-12 {
     padding-block: var(--spacing-12);
   }
+  .pt-\[60px\] {
+    padding-top: 60px;
+  }
   .pr-0 {
     padding-right: var(--spacing-0);
   }
@@ -2053,6 +2119,9 @@
   .pr-3 {
     padding-right: var(--spacing-3);
   }
+  .pr-6 {
+    padding-right: var(--spacing-6);
+  }
   .pr-8 {
     padding-right: var(--spacing-8);
   }
@@ -2250,6 +2319,9 @@
   .text-blue-800 {
     color: var(--color-blue-800);
   }
+  .text-blue-900 {
+    color: var(--color-blue-900);
+  }
   .text-brand-dark {
     color: var(--color-brand-dark);
   }
@@ -2677,6 +2749,32 @@
       color: var(--color-text-disabled);
     }
   }
+  .peer-checked\/category\:block {
+    &:is(:where(.peer\/category):checked ~ *) {
+      display: block;
+    }
+  }
+  .peer-checked\/category\:rotate-180 {
+    &:is(:where(.peer\/category):checked ~ *) {
+      rotate: 180deg;
+    }
+  }
+  .peer-checked\/mobile\:pointer-events-auto {
+    &:is(:where(.peer\/mobile):checked ~ *) {
+      pointer-events: auto;
+    }
+  }
+  .peer-checked\/mobile\:translate-x-0 {
+    &:is(:where(.peer\/mobile):checked ~ *) {
+      --tw-translate-x: var(--spacing-0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .peer-checked\/mobile\:opacity-100 {
+    &:is(:where(.peer\/mobile):checked ~ *) {
+      opacity: 100%;
+    }
+  }
   .placeholder\:text-text-placeholder {
     &::-moz-placeholder {
       color: var(--color-text-placeholder);
@@ -2949,6 +3047,13 @@
       }
     }
   }
+  .hover\:bg-transparent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+  }
   .hover\:font-semibold {
     &:hover {
       @media (hover: hover) {
@@ -2988,6 +3093,13 @@
       }
     }
   }
+  .hover\:text-text-heading {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-text-heading);
+      }
+    }
+  }
   .hover\:text-text-link-hover {
     &:hover {
       @media (hover: hover) {
@@ -3067,6 +3179,33 @@
       }
     }
   }
+  .focus\:not-sr-only {
+    &:focus {
+      position: static;
+      width: auto;
+      height: auto;
+      padding: 0;
+      margin: 0;
+      overflow: visible;
+      clip: auto;
+      white-space: normal;
+    }
+  }
+  .focus\:absolute {
+    &:focus {
+      position: absolute;
+    }
+  }
+  .focus\:top-4 {
+    &:focus {
+      top: var(--spacing-4);
+    }
+  }
+  .focus\:left-4 {
+    &:focus {
+      left: var(--spacing-4);
+    }
+  }
   .focus\:bg-background-hover {
     &:focus {
       background-color: var(--color-background-hover);
@@ -3088,6 +3227,12 @@
       --tw-ring-color: var(--color-border-focus);
     }
   }
+  .focus\:ring-offset-2 {
+    &:focus {
+      --tw-ring-offset-width: 2px;
+      --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);
@@ -3214,6 +3359,21 @@
       display: none;
     }
   }
+  .md\:relative {
+    @media (width >= 48rem) {
+      position: relative;
+    }
+  }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
+  .md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
   .md\:grid {
     @media (width >= 48rem) {
       display: grid;
@@ -3224,6 +3384,11 @@
       display: none;
     }
   }
+  .md\:h-screen {
+    @media (width >= 48rem) {
+      height: 100vh;
+    }
+  }
   .md\:w-\[50\%\] {
     @media (width >= 48rem) {
       width: 50%;
@@ -3234,6 +3399,12 @@
       width: 456px;
     }
   }
+  .md\:translate-x-0 {
+    @media (width >= 48rem) {
+      --tw-translate-x: var(--spacing-0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .md\:border-x {
     @media (width >= 48rem) {
       border-inline-style: var(--tw-border-style);
@@ -3246,6 +3417,16 @@
       border-inline-width: 0px;
     }
   }
+  .md\:px-6 {
+    @media (width >= 48rem) {
+      padding-inline: var(--spacing-6);
+    }
+  }
+  .md\:py-6 {
+    @media (width >= 48rem) {
+      padding-block: var(--spacing-6);
+    }
+  }
   .lg\:grid {
     @media (width >= 64rem) {
       display: grid;
@@ -3271,6 +3452,11 @@
       display: none;
     }
   }
+  .dark\:border-blue-800 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-blue-800);
+    }
+  }
   .dark\:border-gray-700 {
     @media (prefers-color-scheme: dark) {
       border-color: var(--color-gray-700);
@@ -3302,11 +3488,32 @@
       background-color: var(--color-blue-500);
     }
   }
+  .dark\:bg-blue-900\/20 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(0.368 0.146 254.128) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
+      }
+    }
+  }
   .dark\:bg-gray-800 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-800);
     }
   }
+  .dark\:bg-gray-900 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-900);
+    }
+  }
+  .dark\:bg-green-900\/20 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(0.314 0.095 133.748) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);
+      }
+    }
+  }
   .dark\:bg-slate-600 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-slate-600);
@@ -3371,6 +3578,16 @@
       stroke: var(--color-zinc-600);
     }
   }
+  .dark\:text-blue-100 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-blue-100);
+    }
+  }
+  .dark\:text-blue-200 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-blue-200);
+    }
+  }
   .dark\:text-gray-100 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-gray-100);
@@ -3466,6 +3683,15 @@
       }
     }
   }
+  .dark\:hover\:bg-gray-800 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-800);
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-zinc-700 {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -4109,6 +4335,19 @@
     }
   }
 }
+@layer base {
+  :root {
+    --default-border-color: var(--color-border-default);
+  }
+  .theme-dark {
+    --default-border-color: var(--color-border-default);
+  }
+  *,
+  ::after,
+  ::before {
+    border-color: var(--default-border-color);
+  }
+}
 @property --tw-border-spacing-x {
   syntax: "<length>";
   inherits: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -16,9 +16,15 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "react-server": "./dist/server.js",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js",
+      "default": "./dist/server.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./dist/styles.css": "./dist/styles.css",
     "./theme.css": "./dist/theme.css",
@@ -27,7 +33,8 @@
   "scripts": {
     "dev": "yarn watch",
     "watch": "tsup --watch",
-    "build": "yarn tokens:build && tsup",
+    "build": "yarn tokens:build && tsup && yarn build:post",
+    "build:post": "postcss src/styles.css -o dist/styles.css && node scripts/copy-assets.js && node scripts/generate-components-manifest.js",
     "tokens:build": "node style-dictionary.config.mjs",
     "tokens:build:tailwind": "node style-dictionary.config.mjs",
     "tokens:watch": "nodemon --watch tokens --ext json --exec 'yarn tokens:build'",
@@ -51,6 +58,7 @@
     "postinstall": "node scripts/setup-cursor-rules.js || echo \"! setup-cursor-rules: non-fatal error\""
   },
   "peerDependencies": {
+    "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -101,6 +109,7 @@
     "@testing-library/react": "^14.2.1",
     "@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",

package/scripts/copy-assets.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+
+console.log("📁 Copying assets to dist...");
+
+try {
+  // Copy theme.css to dist
+  fs.copyFileSync("src/theme.css", "dist/theme.css");
+  console.log("✅ Theme CSS copied to dist");
+
+  // Copy style layer files to dist
+  const styleFiles = ["src/styles/animations.css", "src/styles/computed.css", "src/styles/utilities.css"];
+
+  // Create styles directory in dist
+  if (!fs.existsSync("dist/styles")) {
+    fs.mkdirSync("dist/styles", { recursive: true });
+  }
+
+  styleFiles.forEach((file) => {
+    if (fs.existsSync(file)) {
+      const filename = file.split("/").pop();
+      fs.copyFileSync(file, `dist/styles/${filename}`);
+      console.log(`✅ Style file ${filename} copied to dist/styles`);
+    }
+  });
+
+  // Copy generated token CSS to dist (if they exist)
+  const tokenFiles = ["src/generated/tailwind-tokens-light.css", "src/generated/tailwind-tokens-dark.css"];
+
+  // Create generated directory in dist
+  if (!fs.existsSync("dist/generated")) {
+    fs.mkdirSync("dist/generated", { recursive: true });
+  }
+
+  tokenFiles.forEach((file) => {
+    if (fs.existsSync(file)) {
+      const filename = file.split("/").pop();
+      fs.copyFileSync(file, `dist/generated/${filename}`);
+      console.log(`✅ Token CSS ${filename} copied to dist/generated`);
+    }
+  });
+
+  console.log("🎉 All assets copied successfully!");
+} catch (error) {
+  console.error("❌ Failed to copy assets:", error.message);
+  process.exitCode = 1;
+}

package/scripts/validate-tokens.js

@@ -175,3 +175,4 @@ function main() {
 
 // Run validation
 main();
+

package/templates/claude-rules/claude.md

@@ -53,7 +53,7 @@ The theme is imported via CSS:
 
 ## Dark Mode
 
-All colors automatically adapt to dark mode when `.dark` class is present.
+All colors automatically adapt to dark mode when `.theme-dark` class is present.
 
 ## Available Variables
 

package/templates/cursor-rules/edges-usage.mdc

@@ -52,7 +52,7 @@ The theme is imported via CSS:
 ```
 
 ## Dark Mode
-All colors automatically adapt to dark mode when `.dark` class is present.
+All colors automatically adapt to dark mode when `.theme-dark` class is present.
 
 ## Available Variables
 All CSS variables from the theme file are automatically available. The theme includes: