fix: Remove cva (#208)

covalenthq · Oct 3, 2024 · ceb0f98 · ceb0f98
1 parent 3f62dcc
commit ceb0f98
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 34 deletions.
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
@@ -2,27 +2,30 @@ import { cn } from "@/utils/functions";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-const badgeVariants = cva(
-    "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-    {
-        variants: {
-            variant: {
-                default:
-                    "border-transparent bg-primary-light dark:bg-primary-dark text-foreground-light dark:text-foreground-dark shadow hover:bg-opacity-80",
-                secondary:
-                    "border-transparent bg-secondary-light dark:bg-secondary-dark text-foreground-light dark:text-foreground-dark hover:bg-opacity-80",
-                danger: "border-transparent bg-danger text-white shadow hover:bg-opacity-80",
-                success:
-                    "border-transparent bg-success text-white shadow hover:bg-opacity-80",
+const badgeVariants = ({
+    variant = "default",
+    className = "",
+}: {
+    variant?: "default" | "secondary" | "danger" | "success" | "outline";
+    className?: string;
+}): string => {
+    const variants: Record<string, string> = {
+        default:
+            "border-transparent bg-primary-light dark:bg-primary-dark text-foreground-light dark:text-foreground-dark shadow hover:bg-opacity-80",
+        secondary:
+            "border-transparent bg-secondary-light dark:bg-secondary-dark text-foreground-light dark:text-foreground-dark hover:bg-opacity-80",
+        danger: "border-transparent bg-danger text-white shadow hover:bg-opacity-80",
+        success:
+            "border-transparent bg-success text-white shadow hover:bg-opacity-80",
+        outline: "text-foreground-light dark:text-foreground-dark",
+    };
 
-                outline: "text-foreground-light dark:text-foreground-dark",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-        },
-    },
-);
+    return cn(
+        "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        variants[variant],
+        className,
+    );
+};
 
 export interface BadgeProps
     extends React.HTMLAttributes<HTMLDivElement>,

diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
@@ -21,20 +21,24 @@ const ToastViewport = React.forwardRef<
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
-const toastVariants = cva(
-    "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-    {
-        variants: {
-            variant: {
-                default:
-                    "border bg-background-light dark:bg-background-dark text-foreground-light dark:text-foreground-dark",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-        },
-    },
-);
+const toastVariants = ({
+    variant = "default",
+    className = "",
+}: {
+    variant?: "default";
+    className?: string;
+}): string => {
+    const variants: Record<string, string> = {
+        default:
+            "border bg-background-light dark:bg-background-dark text-foreground-light dark:text-foreground-dark",
+    };
+
+    return cn(
+        "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+        variants[variant],
+        className,
+    );
+};
 
 const Toast = React.forwardRef<
     React.ElementRef<typeof ToastPrimitives.Root>,