From 5d94466d4020f0119aa794dc07378143df28ce59 Mon Sep 17 00:00:00 2001
From: Csongor Czezar <csongor.czezar@gmail.com>
Date: Wed, 31 Dec 2025 14:39:09 -0800
Subject: [PATCH] fix: use cva from catalog instead of class-variance-authority

---
 package.json                                  |  1 -
 pnpm-lock.yaml                                | 10 ------
 .../ui/toggle-group/ToggleGroup.vue           |  2 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |  2 +-
 src/components/ui/toggle-group/index.ts       |  2 --
 src/components/ui/toggle/index.ts             | 36 +++++++++----------
 .../components/WidgetToggleSwitch.test.ts     |  3 +-
 .../widgets/components/WidgetToggleSwitch.vue |  3 +-
 8 files changed, 23 insertions(+), 36 deletions(-)
 delete mode 100644 src/components/ui/toggle-group/index.ts

diff --git a/package.json b/package.json
index f7556c9dad..6dcf03f5b4 100644
--- a/package.json
+++ b/package.json
@@ -163,7 +163,6 @@
     "algoliasearch": "catalog:",
     "axios": "catalog:",
     "chart.js": "^4.5.0",
-    "class-variance-authority": "0.7.1",
     "cva": "catalog:",
     "dompurify": "^3.2.5",
     "dotenv": "catalog:",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 46fc4378d6..be1ee1aebf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -428,9 +428,6 @@ importers:
       chart.js:
         specifier: ^4.5.0
         version: 4.5.0
-      class-variance-authority:
-        specifier: 0.7.1
-        version: 0.7.1
       cva:
         specifier: 'catalog:'
         version: 1.0.0-beta.4(typescript@5.9.3)
@@ -4506,9 +4503,6 @@ packages:
     resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
     engines: {node: '>=18'}
 
-  class-variance-authority@0.7.1:
-    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
-
   clean-css@5.3.3:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
     engines: {node: '>= 10.0'}
@@ -12550,10 +12544,6 @@ snapshots:
 
   chownr@3.0.0: {}
 
-  class-variance-authority@0.7.1:
-    dependencies:
-      clsx: 2.1.1
-
   clean-css@5.3.3:
     dependencies:
       source-map: 0.6.1
diff --git a/src/components/ui/toggle-group/ToggleGroup.vue b/src/components/ui/toggle-group/ToggleGroup.vue
index 572ffacf81..1b789b2f9b 100644
--- a/src/components/ui/toggle-group/ToggleGroup.vue
+++ b/src/components/ui/toggle-group/ToggleGroup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /* eslint-disable vue/no-unused-properties */
 import { reactiveOmit } from '@vueuse/core'
-import type { VariantProps } from 'class-variance-authority'
+import type { VariantProps } from 'cva'
 import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'reka-ui'
 import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
diff --git a/src/components/ui/toggle-group/ToggleGroupItem.vue b/src/components/ui/toggle-group/ToggleGroupItem.vue
index c3e7c36f74..f2aac65822 100644
--- a/src/components/ui/toggle-group/ToggleGroupItem.vue
+++ b/src/components/ui/toggle-group/ToggleGroupItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /* eslint-disable vue/no-unused-properties */
 import { reactiveOmit } from '@vueuse/core'
-import type { VariantProps } from 'class-variance-authority'
+import type { VariantProps } from 'cva'
 import type { ToggleGroupItemProps } from 'reka-ui'
 import { ToggleGroupItem, useForwardProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
diff --git a/src/components/ui/toggle-group/index.ts b/src/components/ui/toggle-group/index.ts
deleted file mode 100644
index 9f89ad775d..0000000000
--- a/src/components/ui/toggle-group/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as ToggleGroup } from './ToggleGroup.vue'
-export { default as ToggleGroupItem } from './ToggleGroupItem.vue'
diff --git a/src/components/ui/toggle/index.ts b/src/components/ui/toggle/index.ts
index 4dcab3d9dc..95b6c9f1bc 100644
--- a/src/components/ui/toggle/index.ts
+++ b/src/components/ui/toggle/index.ts
@@ -1,23 +1,21 @@
-import { cva } from 'class-variance-authority'
+import { cva } from 'cva'
 
-export const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline:
-          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground'
-      },
-      size: {
-        default: 'h-9 px-2 min-w-9',
-        sm: 'h-8 px-1.5 min-w-8',
-        lg: 'h-10 px-2.5 min-w-10'
-      }
+export const toggleVariants = cva({
+  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  variants: {
+    variant: {
+      default: 'bg-transparent',
+      outline:
+        'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground'
     },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default'
+    size: {
+      default: 'h-9 px-2 min-w-9',
+      sm: 'h-8 px-1.5 min-w-8',
+      lg: 'h-10 px-2.5 min-w-10'
     }
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default'
   }
-)
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts
index eb96ef51d7..de91c436ed 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts
@@ -3,7 +3,8 @@ import PrimeVue from 'primevue/config'
 import ToggleSwitch from 'primevue/toggleswitch'
 import { describe, expect, it, vi } from 'vitest'
 
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import ToggleGroup from '@/components/ui/toggle-group/ToggleGroup.vue'
+import ToggleGroupItem from '@/components/ui/toggle-group/ToggleGroupItem.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetToggleSwitch from './WidgetToggleSwitch.vue'
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
index 2cb0ffac3e..be13e29d0b 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
@@ -40,7 +40,8 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import ToggleGroup from '@/components/ui/toggle-group/ToggleGroup.vue'
+import ToggleGroupItem from '@/components/ui/toggle-group/ToggleGroupItem.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
   STANDARD_EXCLUDED_PROPS,