Swap class-variance-authority and clsx for tailwind-variants.

Author: nedtwigg

browser-extension/package.json

@@ -2,18 +2,16 @@
   "author": "DiffPlug",
   "dependencies": {
     "@primer/octicons-react": "^19.18.0",
-    "@radix-ui/react-slot": "^1.2.3",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
     "@wxt-dev/webextension-polyfill": "^1.0.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "highlight.js": "^11.11.1",
     "lucide-react": "^0.543.0",
     "overtype": "workspace:*",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^3.1.1",
     "webextension-polyfill": "^0.12.0"
   },
   "description": "Syntax highlighting and autosave for comments on GitHub (and other other markdown-friendly websites).",

browser-extension/src/components/Badge.tsx

@@ -1,5 +1,5 @@
-import type { VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
+import type { VariantProps } from 'tailwind-variants'
 import { badgeCVA, typeIcons } from '@/components/design'
 
 export type BadgeProps = VariantProps<typeof badgeCVA> & {

browser-extension/src/components/design.tsx

@@ -1,4 +1,3 @@
-import { cva } from 'class-variance-authority'
 import {
   Clock,
   Code,
@@ -12,40 +11,39 @@ import {
   TextSelect,
   Trash2,
 } from 'lucide-react'
+import { tv } from 'tailwind-variants'
 
-// CVA configuration for stat badges
-export const badgeCVA = cva(
-  'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-normal h-5',
-  {
-    defaultVariants: {
-      clickable: false,
+// TV configuration for stat badges
+export const badgeCVA = tv({
+  base: 'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-normal h-5',
+  defaultVariants: {
+    clickable: false,
+  },
+  variants: {
+    clickable: {
+      false: '',
+      true: 'cursor-pointer border border-transparent hover:border-current border-dashed',
+    },
+    selected: {
+      false: '',
+      true: '!border-solid !border-current',
     },
-    variants: {
-      clickable: {
-        false: '',
-        true: 'cursor-pointer border border-transparent hover:border-current border-dashed',
-      },
-      selected: {
-        false: '',
-        true: '!border-solid !border-current',
-      },
-      type: {
-        blank: 'bg-transparent text-gray-700',
-        code: 'bg-pink-50 text-pink-700',
-        hideTrashed: 'bg-transparent text-gray-700',
-        image: 'bg-purple-50 text-purple-700',
-        link: 'bg-blue-50 text-blue-700',
-        open: 'bg-cyan-50 text-cyan-700',
-        sent: 'bg-green-50 text-green-700',
-        settings: 'bg-gray-50 text-gray-700',
-        text: 'bg-gray-50 text-gray-700',
-        time: 'bg-gray-50 text-gray-700',
-        trashed: 'bg-gray-50 text-yellow-700',
-        unsent: 'bg-amber-100 text-amber-700',
-      },
+    type: {
+      blank: 'bg-transparent text-gray-700',
+      code: 'bg-pink-50 text-pink-700',
+      hideTrashed: 'bg-transparent text-gray-700',
+      image: 'bg-purple-50 text-purple-700',
+      link: 'bg-blue-50 text-blue-700',
+      open: 'bg-cyan-50 text-cyan-700',
+      sent: 'bg-green-50 text-green-700',
+      settings: 'bg-gray-50 text-gray-700',
+      text: 'bg-gray-50 text-gray-700',
+      time: 'bg-gray-50 text-gray-700',
+      trashed: 'bg-gray-50 text-yellow-700',
+      unsent: 'bg-amber-100 text-amber-700',
     },
   },
-)
+})
 
 // Map types to their icons
 export const typeIcons = {