@brightweblabs/ui 1.4.5 → 1.4.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@brightweblabs/ui",
   "private": false,
-  "version": "1.4.5",
+  "version": "1.4.6",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -76,7 +76,7 @@
     "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
-    "@brightweblabs/theme": "0.7.3"
+    "@brightweblabs/theme": "0.7.4"
   },
   "peerDependencies": {
     "lucide-react": "^1.8.0",

package/src/lib/utils.test.ts

@@ -0,0 +1,41 @@
+import assert from "node:assert/strict"
+import test from "node:test"
+
+import { cn } from "./utils.ts"
+
+test("canonical typography utilities do not remove semantic foreground colors", () => {
+  const typographyUtilities = [
+    "text-heading-1",
+    "text-heading-2",
+    "text-heading-3",
+    "text-heading-4",
+    "text-title",
+    "text-body-lg",
+    "text-body",
+    "text-meta",
+    "text-label",
+    "text-micro",
+    "text-kpi",
+    "text-kpi-lg",
+    "text-data-sm",
+  ]
+
+  for (const typography of typographyUtilities) {
+    const result = cn("text-destructive-foreground", typography).split(" ")
+
+    assert.ok(result.includes(typography), `${typography} must remain a font-size utility`)
+    assert.ok(
+      result.includes("text-destructive-foreground"),
+      `${typography} must not remove semantic foreground colors`,
+    )
+  }
+})
+
+test("canonical typography utilities preserve intentional consumer colors", () => {
+  const result = cn("text-label text-muted-foreground", "text-body text-destructive").split(" ")
+
+  assert.ok(result.includes("text-body"))
+  assert.ok(result.includes("text-destructive"))
+  assert.ok(!result.includes("text-label"))
+  assert.ok(!result.includes("text-muted-foreground"))
+})

package/src/lib/utils.ts

@@ -1,5 +1,27 @@
 import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { extendTailwindMerge } from "tailwind-merge"
+
+const twMerge = extendTailwindMerge<"canonical-typography">({
+  extend: {
+    classGroups: {
+      "canonical-typography": [
+        "text-heading-1",
+        "text-heading-2",
+        "text-heading-3",
+        "text-heading-4",
+        "text-title",
+        "text-body-lg",
+        "text-body",
+        "text-meta",
+        "text-label",
+        "text-micro",
+        "text-kpi",
+        "text-kpi-lg",
+        "text-data-sm",
+      ],
+    },
+  },
+})
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))