button

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import { cn } from "@/lib/utils"
4
5type SlotProps = React.HTMLAttributes<HTMLElement> & {
6    children?: React.ReactNode
7}
8
9const Slot = React.forwardRef<HTMLElement, SlotProps>(
10    ({ children, ...props }, ref) => {
11        if (React.isValidElement<Record<string, unknown>>(children)) {
12            const childProps = children.props as Record<string, unknown>
13            return React.cloneElement(children, {
14                ...props,
15                ...childProps,
16                ref,
17                className: cn(props.className as string, childProps.className as string),
18            })
19        }
20        return null
21    }
22)
23Slot.displayName = "Slot"
24
25const buttonVariants = cva(
26    "inline-flex items-center justify-center whitespace-nowrap rounded-base text-sm font-bold transition-brutal focus-brutal disabled:pointer-events-none disabled:opacity-50 border-2 border-black cursor-pointer",
27    {
28        variants: {
29            variant: {
30                default: "bg-main text-black shadow-brutal hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-none",
31                noShadow: "bg-main text-black border-2 border-black",
32                neutral: "bg-white text-black shadow-brutal hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-none",
33            },
34            size: {
35                default: "h-10 px-4 py-2",
36                sm: "h-9 px-3",
37                lg: "h-11 px-8",
38                icon: "h-10 w-10",
39            },
40        },
41        defaultVariants: {
42            variant: "default",
43            size: "default",
44        },
45    }
46)
47
48export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
49    VariantProps<typeof buttonVariants> & {
50        asChild?: boolean
51    }
52
53const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
54    ({ className, variant, size, asChild = false, ...props }, ref) => {
55        const Comp = asChild ? Slot : "button"
56        return (
57            <Comp
58                className={cn(buttonVariants({ variant, size, className }))}
59                ref={ref}
60                {...props}
61            />
62        )
63    }
64)
65Button.displayName = "Button"
66
67export { Button, buttonVariants }