From 157811b2c2a0374b6d6453fd7e39d01cfb1db5f4 Mon Sep 17 00:00:00 2001
From: Mark Skelton <mdskelton99@gmail.com>
Date: Sat, 6 Apr 2024 07:26:14 -0500
Subject: [PATCH] docs: add `cva` to benchmarks

---
 benchmark.js   | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json   |  1 +
 pnpm-lock.yaml | 14 +++++++++++
 3 files changed, 78 insertions(+)

diff --git a/benchmark.js b/benchmark.js
index 3cc3d0a..c751ca8 100644
--- a/benchmark.js
+++ b/benchmark.js
@@ -1,5 +1,7 @@
 /* eslint-disable no-console */
 import Benchmark from "benchmark";
+import {cva} from "class-variance-authority";
+import {extendTailwindMerge} from "tailwind-merge";
 
 import {tv} from "./src/index.js";
 
@@ -322,6 +324,57 @@ export const avatarWithCustomConfig = tv(
   },
 );
 
+// CVA without tw-merge config
+const cvaNoMerge = {
+  avatar: cva("relative flex shrink-0 overflow-hidden rounded-full", {
+    variants: {
+      size: {
+        xs: "h-6 w-6",
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12",
+        xl: "h-14 w-14",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+    compoundVariants: [
+      {
+        size: ["xs", "sm"],
+        class: "ring-1",
+      },
+      {
+        size: ["md", "lg", "xl", "2xl"],
+        class: "ring-2",
+      },
+    ],
+  }),
+  image: cva("aspect-square h-full w-full", {
+    variants: {
+      withBorder: {
+        true: "border-1.5 border-white",
+      },
+    },
+  }),
+  fallback: cva("flex h-full w-full items-center justify-center rounded-full bg-muted", {
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }),
+};
+
+const cvaMerge = extendTailwindMerge({extend: twMergeConfig});
+
 // add tests
 suite
   .add("TV without slots & tw-merge (enabled)", function () {
@@ -360,6 +413,16 @@ suite
     fallback();
     image();
   })
+  .add("CVA without slots & tw-merge (enabled)", function () {
+    cvaMerge(cvaNoMerge.avatar({size: "md"}));
+    cvaMerge(cvaNoMerge.fallback());
+    cvaMerge(cvaNoMerge.image());
+  })
+  .add("CVA without slots & tw-merge (disabled)", function () {
+    cvaNoMerge.avatar({size: "md"});
+    cvaNoMerge.fallback();
+    cvaNoMerge.image();
+  })
 
   // add listeners
   .on("cycle", function (event) {
diff --git a/package.json b/package.json
index 5becbea..3e6c103 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
     "benchmark": "2.1.4",
+    "class-variance-authority": "^0.7.0",
     "clean-package": "2.1.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aa3fdbf..5c7a926 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -46,6 +46,9 @@ devDependencies:
   benchmark:
     specifier: 2.1.4
     version: 2.1.4
+  class-variance-authority:
+    specifier: ^0.7.0
+    version: 0.7.0
   clean-package:
     specifier: 2.1.1
     version: 2.1.1
@@ -2607,6 +2610,12 @@ packages:
     resolution: {integrity: sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==}
     dev: true
 
+  /class-variance-authority@0.7.0:
+    resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
+    dependencies:
+      clsx: 2.0.0
+    dev: true
+
   /clean-package@2.1.1:
     resolution: {integrity: sha512-+svGAs1RfjguW3Yi0uk1F2gu56jt0nkpFW6Gd9BDK0w7xcIokFwrQOWuRn5NO5pfTDkLCVP1ttIjvJwXaSvRsA==}
     hasBin: true
@@ -2623,6 +2632,11 @@ packages:
       wrap-ansi: 7.0.0
     dev: true
 
+  /clsx@2.0.0:
+    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
+    engines: {node: '>=6'}
+    dev: true
+
   /co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}