feat: custom twMerge utility (#16)

Author: Cahllagerfeld

.changeset/tasty-walls-float.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": patch
+---
+
+provide custom `twMerge` utility

src/utilities.ts

@@ -1,11 +1,28 @@
 import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const customTwMerge = extendTailwindMerge({
+	classGroups: {
+		fontSize: [
+			"text-text-xs",
+			"text-text-sm",
+			"text-text-md",
+			"text-text-lg",
+			"text-text-xl",
+			"text-display-xs",
+			"text-display-sm",
+			"text-display-md",
+			"text-display-lg",
+			"text-display-xl"
+		]
+	}
+});
 
 /**
  * Merges tailwind utilities, and allows the usage of the clsx syntax in addition
  * @param inputs list of class names
  * @returns
  */
 export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
+	return customTwMerge(clsx(inputs));
 }