update: finish button styling and variants

src/styles.css

@@ -13,4 +13,30 @@
 	* {
 		@apply font-geist;
 	}
+	.button-hover {
+		box-shadow: 0px 0px 0px 2px rgba(5, 5, 5, 0.05);
+	}
+
+	.button-loading-animate {
+		animation: loading-rotate 1s steps(1) infinite;
+	  }
+
+	  @keyframes loading-rotate {
+		0% {
+		  transform: rotate(0deg);
+		}
+		25% {
+		  transform: rotate(90deg);
+		}
+		50% {
+		  transform: rotate(180deg);
+		}
+		75% {
+		  transform: rotate(270deg);
+		}
+		100% {
+		  transform: rotate(360deg);
+		}
+	  }
+
 }

src/ui/button.tsx

@@ -1,54 +1,68 @@
-import {Slot} from '@radix-ui/react-slot'
-import {cva, type VariantProps} from 'class-variance-authority'
-import clsx from 'clsx'
-import * as React from 'react'
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import clsx from "clsx";
+import * as React from "react";
 
 const buttonVariants = cva(
-	'inline-flex items-center border-[1px] justify-center dark:border-[#050505] border-[#050505] leading-[120%] dark:text-[#fcfcfc] text-[#050505] dark:bg-[#050505] bg-[#fcfcfc] focus:ring-2 focus:ring-offset-2 focus:ring-zinc-800 disabled:opacity-80 disabled:pointer-events-none',
+	"inline-flex items-center shrink-0 border-[1px] gap-[10px] justify-center hover:button-hover dark:border-[#050505] border-[#050505] leading-[130%] dark:text-[#fcfcfc] text-[#050505] dark:bg-[#050505] bg-[#fcfcfc] focus:ring-2 focus:ring-offset-2 focus:ring-zinc-800 disabled:opacity-70 disabled:pointer-events-none",
 	{
 		variants: {
 			variant: {
-				default: '',
-				destructive: '',
-				outline: '',
-				secondary: '',
-				ghost: '',
-				loading: 'dark:border-[#050505] border-[#050505]'
+				default: "",
+				loading: "dark:border-[#050505] border-[#050505]",
 			},
 			size: {
-				sm: 'rounded-[2px] py-[3px] px-[6px] text-[12px]',
-				md: 'rounded-[3px] py-[4px] px-[8px] text-[16px]',
-				lg: 'rounded-[4px] py-[6px] px-[14px] text-[18px]'
-			}
+				sm: "rounded-[2px] py-[3px] px-[6px] text-[10px] h-[20px]",
+				md: "rounded-[3px] py-[4px] px-[8px] text-[16px] h-[28px]",
+				lg: "rounded-[4px] py-[6px] px-[14px] text-[18px] h-[36px]",
+			},
 		},
 		defaultVariants: {
-			variant: 'default',
-			size: 'md'
-		}
-	}
-)
+			variant: "default",
+			size: "md",
+		},
+	},
+);
 
 export interface ButtonProps
 	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
 		VariantProps<typeof buttonVariants> {
-	asChild?: boolean
+	asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({className, variant, size, asChild = false, ...props}, ref) => {
-		const Comp = asChild ? Slot : 'button'
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button";
 		return (
 			<>
 				<Comp
-					className={clsx(buttonVariants({variant, size, className}))}
+					className={clsx(buttonVariants({ variant, size, className }))}
 					ref={ref}
-					{...props}>
-					{variant == 'loading' ? '' : props.children}
+					{...props}
+				>
+					{variant === "loading" ? (
+						<div
+							className={clsx("button-loading-animate", {
+								"size-2 mx-4": size === "sm",
+								"size-3 mx-5": size === "md",
+								"size-4 mx-6": size === "lg",
+							})}
+						>
+							<div className="grid grid-cols-2 gap-[20%] size-full">
+								<span className="h-full w-full bg-gray-300 rounded-[0.5px]" />
+								<span className="h-full w-full bg-gray-400 rounded-[0.5px]" />
+								<span className="h-full w-full bg-gray-500 rounded-[0.5px]" />
+								<span className="h-full w-full bg-gray-600 rounded-[0.5px]" />
+							</div>
+						</div>
+					) : (
+						props.children
+					)}
 				</Comp>
 			</>
-		)
-	}
-)
-Button.displayName = 'Button'
+		);
+	},
+);
+Button.displayName = "Button";
 
-export {Button, buttonVariants}
+export { Button, buttonVariants };