refactor(ui): Update button component styles and variants

renlabs-dev · Oct 3, 2024 · 354bc0e · 354bc0e
1 parent d80219a
commit 354bc0e
Showing 1 changed file with 23 additions and 15 deletions.
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
@@ -3,40 +3,48 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 
-import { cn } from "@commune-ts/ui";
+import { cn } from ".";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium backdrop-blur-md transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        base: "border border-white/20 bg-[#898989]/5 text-white hover:border-green-500 hover:bg-green-500/15 hover:text-green-500 active:bg-green-500/40",
-        green:
+        base: "border",
+        default:
+          "border border-white/20 bg-[#898989]/5 text-white hover:border-green-500 hover:bg-green-500/15 hover:text-green-500 active:bg-green-500/40",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "underline-offset-4 hover:underline",
+        // Custom Variants
+        "default-green":
           "border border-green-500/50 bg-green-500/10 text-green-500 hover:border-green-500/70 hover:bg-green-500/15 active:bg-green-500/40",
-        red: "border border-red-500/50 bg-red-500/10 text-red-500 hover:border-red-500/70 hover:bg-red-500/15 active:bg-red-500/40",
-        amber:
+        "default-red":
+          "border border-red-500/50 bg-red-500/10 text-red-500 hover:border-red-500/70 hover:bg-red-500/15 active:bg-red-500/40",
+        "default-amber":
           "border border-amber-500/50 bg-amber-500/10 text-amber-500 hover:border-amber-500/70 hover:bg-amber-500/15 active:bg-amber-500/40",
-        purple:
+        "default-purple":
           "border border-purple-500/50 bg-purple-500/10 text-purple-500 hover:border-purple-500/70 hover:bg-purple-500/15 active:bg-purple-500/40",
-        cyan: "border border-cyan-500/50 bg-cyan-500/10 text-cyan-500 hover:border-cyan-500/70 hover:bg-cyan-500/15 active:bg-cyan-500/40",
-        link: "underline-offset-4 hover:underline",
+        "default-cyan":
+          "border border-cyan-500/50 bg-cyan-500/10 text-cyan-500 hover:border-cyan-500/70 hover:bg-cyan-500/15 active:bg-cyan-500/40",
       },
       size: {
-        icon: "p-2",
+        default: "h-9 px-4 py-2",
         sm: "h-8 px-3 text-xs",
-        md: "h-9 px-4 py-2",
-        lg: "h-10 px-6",
-        xl: "font-lg h-10 px-10",
+        lg: "h-10 px-8",
+        xl: "h-12 px-10",
+        icon: "h-9 w-9",
       },
     },
     defaultVariants: {
-      variant: "base",
-      size: "md",
+      variant: "default",
+      size: "default",
     },
   },
 );
 
-interface ButtonProps
+export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;