feat: add cn utility to shared/lib

src/shared/lib/cn.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { cn } from './cn'
+
+describe('cn', () => {
+  describe('basic merging', () => {
+    it('returns single class unchanged', () => {
+      expect(cn('foo')).toBe('foo')
+    })
+
+    it('joins multiple classes', () => {
+      expect(cn('foo', 'bar')).toBe('foo bar')
+    })
+  })
+
+  describe('conditional classes', () => {
+    it('includes truthy conditional', () => {
+      expect(cn('foo', true && 'bar')).toBe('foo bar')
+    })
+
+    it('excludes falsy conditional', () => {
+      expect(cn('foo', false && 'bar')).toBe('foo')
+    })
+  })
+
+  describe('tailwind conflict resolution', () => {
+    it('last padding wins', () => {
+      expect(cn('px-2', 'px-4')).toBe('px-4')
+    })
+
+    it('last text color wins', () => {
+      expect(cn('text-red-500', 'text-blue-500')).toBe('text-blue-500')
+    })
+  })
+})

src/shared/lib/cn.ts

@@ -0,0 +1,9 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Merges Tailwind classes, resolving conflicts in favor of the last value.
+ */
+export function cn(...inputs: ClassValue[]): string {
+    return twMerge(clsx(inputs))
+}

src/shared/lib/index.ts

@@ -0,0 +1 @@
+export { cn } from './cn'