| import * as React from "react" | |
| import { Slot } from "@radix-ui/react-slot" | |
| import { cva, type VariantProps } from "class-variance-authority" | |
| import { cn } from "@/lib/utils" | |
| const buttonVariants = cva( | |
| "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-none text-sm font-bold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-2 border-foreground shadow-[2px_2px_0px_hsl(var(--foreground))] hover:shadow-none active:translate-x-[2px] active:translate-y-[2px] active:shadow-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", | |
| { | |
| variants: { | |
| variant: { | |
| default: "bg-primary text-primary-foreground hover:bg-primary/90", | |
| destructive: | |
| "bg-destructive text-destructive-foreground hover:bg-destructive/90", | |
| outline: | |
| "border-foreground bg-background hover:bg-accent hover:text-accent-foreground", | |
| secondary: | |
| "bg-secondary text-secondary-foreground hover:bg-secondary/80", | |
| ghost: "border-none shadow-none", | |
| link: "text-primary underline-offset-4 hover:underline border-none shadow-none", | |
| }, | |
| size: { | |
| default: "h-10 px-4 py-2", | |
| sm: "h-9 px-3", | |
| lg: "h-11 px-8", | |
| icon: "h-10 w-10", | |
| }, | |
| }, | |
| defaultVariants: { | |
| variant: "default", | |
| size: "default", | |
| }, | |
| } | |
| ) | |
| export interface ButtonProps | |
| extends React.ButtonHTMLAttributes<HTMLButtonElement>, | |
| VariantProps<typeof buttonVariants> { | |
| asChild?: boolean | |
| } | |
| const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( | |
| ({ className, variant, size, asChild = false, ...props }, ref) => { | |
| const Comp = asChild ? Slot : "button" | |
| return ( | |
| <Comp | |
| className={cn(buttonVariants({ variant, size, className }))} | |
| ref={ref} | |
| {...props} | |
| /> | |
| ) | |
| } | |
| ) | |
| Button.displayName = "Button" | |
| export { Button, buttonVariants } | |