import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/shared/lib/utils"; const buttonVariants = cva( "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow,scale] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive not-disabled:active:scale-[0.95] ", { variants: { variant: { default: "bg-primary text-foreground hover:bg-primary/80", destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40", outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground", secondary: "bg-card text-secondary-foreground hover:bg-card/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-11 px-4 text-base font-semibold rounded-xl", lg: "h-12 px-5 py-3 has-[>svg]:px-3 text-lg font-semibold", sm: "h-10 rounded-xl gap-1.5 px-5 has-[>svg]:px-2.5", icon: "size-9", }, }, defaultVariants: { variant: "default", size: "default", }, }, ); function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean; }) { const Comp = asChild ? Slot : "button"; return ( ); } export { Button, buttonVariants };