@soulbatical/tetra-ui 0.4.2 → 0.5.0

package/dist/components/__tests__/appshell-tokens.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Verify tokens.css defines all shadcn CSS vars needed by tetra-ui components.
+ *
+ * Run: npx tsx packages/ui/src/components/__tests__/appshell-tokens.test.ts
+ */
+export {};
+//# sourceMappingURL=appshell-tokens.test.d.ts.map

package/dist/components/__tests__/appshell-tokens.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appshell-tokens.test.d.ts","sourceRoot":"","sources":["../../../src/components/__tests__/appshell-tokens.test.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}

package/dist/components/__tests__/appshell-tokens.test.js

@@ -0,0 +1,52 @@
+/**
+ * Verify tokens.css defines all shadcn CSS vars needed by tetra-ui components.
+ *
+ * Run: npx tsx packages/ui/src/components/__tests__/appshell-tokens.test.ts
+ */
+import { readFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TOKENS_PATH = resolve(__dirname, "../../styles/tokens.css");
+const tokens = readFileSync(TOKENS_PATH, "utf-8");
+const REQUIRED_TOKENS = [
+    "--color-background",
+    "--color-foreground",
+    "--color-border",
+    "--color-input",
+    "--color-ring",
+    "--color-primary",
+    "--color-primary-foreground",
+    "--color-secondary",
+    "--color-secondary-foreground",
+    "--color-muted",
+    "--color-muted-foreground",
+    "--color-accent",
+    "--color-accent-foreground",
+    "--color-destructive",
+    "--color-destructive-foreground",
+    "--color-card",
+    "--color-card-foreground",
+    "--color-popover",
+    "--color-popover-foreground",
+];
+let missing = [];
+for (const token of REQUIRED_TOKENS) {
+    if (!tokens.includes(token + ":")) {
+        missing.push(token);
+    }
+}
+console.log("\n=== tokens.css shadcn completeness ===\n");
+console.log(`Checked: ${REQUIRED_TOKENS.length} tokens`);
+console.log(`Defined: ${REQUIRED_TOKENS.length - missing.length}`);
+console.log(`Missing: ${missing.length}`);
+if (missing.length > 0) {
+    console.log("\nMISSING:\n");
+    for (const m of missing)
+        console.log(`  ${m}`);
+    process.exit(1);
+}
+else {
+    console.log("\nAll shadcn tokens defined in tokens.css\n");
+}
+//# sourceMappingURL=appshell-tokens.test.js.map

package/dist/components/__tests__/appshell-tokens.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appshell-tokens.test.js","sourceRoot":"","sources":["../../../src/components/__tests__/appshell-tokens.test.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AAEpC,MAAM,SAAS,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1D,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,EAAE,yBAAyB,CAAC,CAAC;AAClE,MAAM,MAAM,GAAG,YAAY,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;AAElD,MAAM,eAAe,GAAG;IACtB,oBAAoB;IACpB,oBAAoB;IACpB,gBAAgB;IAChB,eAAe;IACf,cAAc;IACd,iBAAiB;IACjB,4BAA4B;IAC5B,mBAAmB;IACnB,8BAA8B;IAC9B,eAAe;IACf,0BAA0B;IAC1B,gBAAgB;IAChB,2BAA2B;IAC3B,qBAAqB;IACrB,gCAAgC;IAChC,cAAc;IACd,yBAAyB;IACzB,iBAAiB;IACjB,4BAA4B;CAC7B,CAAC;AAEF,IAAI,OAAO,GAAa,EAAE,CAAC;AAC3B,KAAK,MAAM,KAAK,IAAI,eAAe,EAAE,CAAC;IACpC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,GAAG,GAAG,CAAC,EAAE,CAAC;QAClC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;AACH,CAAC;AAED,OAAO,CAAC,GAAG,CAAC,4CAA4C,CAAC,CAAC;AAC1D,OAAO,CAAC,GAAG,CAAC,YAAY,eAAe,CAAC,MAAM,SAAS,CAAC,CAAC;AACzD,OAAO,CAAC,GAAG,CAAC,YAAY,eAAe,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;AACnE,OAAO,CAAC,GAAG,CAAC,YAAY,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;AAE1C,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;IACvB,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC5B,KAAK,MAAM,CAAC,IAAI,OAAO;QAAE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC/C,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC;KAAM,CAAC;IACN,OAAO,CAAC,GAAG,CAAC,6CAA6C,CAAC,CAAC;AAC7D,CAAC"}

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Shared React frontend framework for Tetra platform projects (Soulbatical BV) — config-driven components, hooks, providers, and styling",
   "type": "module",
   "main": "dist/index.js",

package/src/styles/tokens.css

@@ -51,3 +51,53 @@
   --tetra-font:           inherit;
   --tetra-font-mono:      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
+
+/*
+ * shadcn/ui compatibility — Tailwind v4 @theme tokens
+ *
+ * Maps shadcn utility classes (bg-background, text-foreground, border-border, etc.)
+ * to the existing --tetra-* tokens above. This means:
+ *   - All shadcn/ui primitives work out of the box
+ *   - All tetra-ui components work without project-specific CSS
+ *   - Projects can override by redefining --color-* in their own @theme block
+ *   - Dark mode works automatically via dark-mode.css overriding --tetra-* vars
+ */
+@theme {
+  /* Core */
+  --color-background:           var(--tetra-bg);
+  --color-foreground:           var(--tetra-text);
+  --color-border:               var(--tetra-border);
+  --color-input:                var(--tetra-border);
+  --color-ring:                 var(--tetra-accent);
+
+  /* Primary (buttons, badges, links) */
+  --color-primary:              var(--tetra-accent);
+  --color-primary-foreground:   var(--tetra-text-inverted);
+
+  /* Secondary */
+  --color-secondary:            var(--tetra-bg-muted);
+  --color-secondary-foreground: var(--tetra-text);
+
+  /* Muted (labels, placeholders, disabled) */
+  --color-muted:                var(--tetra-bg-muted);
+  --color-muted-foreground:     var(--tetra-text-muted);
+
+  /* Accent (hover states, active nav items) */
+  --color-accent:               var(--tetra-accent-subtle);
+  --color-accent-foreground:    var(--tetra-text);
+
+  /* Destructive (delete, errors) */
+  --color-destructive:          var(--tetra-danger);
+  --color-destructive-foreground: var(--tetra-text-inverted);
+
+  /* Card */
+  --color-card:                 var(--tetra-bg);
+  --color-card-foreground:      var(--tetra-text);
+
+  /* Popover */
+  --color-popover:              var(--tetra-bg);
+  --color-popover-foreground:   var(--tetra-text);
+
+  /* Radius */
+  --radius:                     var(--tetra-radius);
+}