feat: add cn utility (#4)

Author: Cahllagerfeld

package.json

@@ -16,6 +16,16 @@
 				"types": "./dist/index.d.cts",
 				"default": "./dist/index.cjs"
 			}
+		},
+		"./utilities": {
+			"import": {
+				"types": "./dist/utilities.d.ts",
+				"default": "./dist/utilities.js"
+			},
+			"require": {
+				"types": "./dist/utilities.d.cts",
+				"default": "./dist/utilities.cjs"
+			}
 		}
 	},
 	"main": "./dist/index.cjs",
@@ -24,6 +34,7 @@
 		"dist"
 	],
 	"scripts": {
+		"build": "tsup",
 		"build-storybook": "storybook build",
 		"format": "prettier -w src",
 		"prepare": "husky install",
@@ -33,6 +44,10 @@
 	"lint-staged": {
 		"*.{css,js,md,ts,jsx,tsx,ts}": "prettier --write"
 	},
+	"dependencies": {
+		"clsx": "^2.0.0",
+		"tailwind-merge": "^1.14.0"
+	},
 	"devDependencies": {
 		"@storybook/addon-essentials": "^7.3.1",
 		"@storybook/addon-interactions": "^7.3.1",

pnpm-lock.yaml

@@ -0,0 +1 @@
+export { cn } from "./utilities";

src/index.ts

@@ -0,0 +1,11 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * 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));
+}

src/utilities.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from "tsup";
 
-const pureCalls = [
+const reactPureCalls = [
 	"cloneElement",
 	"createContext",
 	"createElement",
@@ -13,10 +13,11 @@ const pureCalls = [
 ];
 
 export default defineConfig({
-	entry: ["src/index.ts"],
+	entry: ["src/index.ts", "src/utilities.ts"],
 	treeshake: true,
 	external: ["react"],
 	format: ["cjs", "esm"],
 	dts: true,
-	pure: pureCalls
+	pure: reactPureCalls,
+	clean: true
 });