docs: add cva to benchmarks

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) {

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",