1- import * as React from " react"
2- import { Slot } from "@radix-ui/react-slot"
3- import { cva , type VariantProps } from "class-variance-authority"
4- import { cn } from " ../utils"
1+ import { Slot } from '@radix-ui/ react-slot' ;
2+ import { type VariantProps , cva } from 'class-variance-authority' ;
3+ import * as React from 'react' ;
4+ import { cn } from ' ../utils' ;
55
66const buttonVariants = cva (
7- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0" ,
8- {
9- variants : {
10- variant : {
11- default : "bg-primary text-primary-foreground hover:bg-primary/90" ,
12- destructive : "bg-destructive text-destructive-foreground hover:bg-destructive/90" ,
13- outline : "border border-input bg-background hover:bg-accent hover:text-accent-foreground" ,
14- secondary : "bg-secondary text-secondary-foreground hover:bg-secondary/80" ,
15- ghost : "hover:bg-accent hover:text-accent-foreground" ,
16- link : "text-primary underline-offset-4 hover:underline" ,
17- blue : [
18- 'font-semibold' ,
19- 'bg-transparent' ,
20- 'border' ,
21- 'border-blue-500' ,
22- 'text-blue-800' ,
23- 'hover:bg-blue-500' ,
24- 'hover:text-white' ,
25- 'hover:border-transparent' ,
26- ] ,
27- } ,
28- size : {
29- default : "h-10 px-4 py-2" ,
30- sm : "h-9 rounded-md px-3" ,
31- lg : "h-11 rounded-md px-8" ,
32- icon : "h-10 w-10" ,
33- s : [ 'px-4' , 'py-2' , 'text-base' ] ,
34- m : [ 'px-6' , 'py-3' , 'text-lg' ] ,
35- l : [ 'px-8' , 'py-4' , 'text-xl' ] ,
36- } ,
7+ 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0' ,
8+ {
9+ variants : {
10+ variant : {
11+ default :
12+ 'bg-primary text-primary-foreground hover:bg-primary/90' ,
13+ destructive :
14+ 'bg-destructive text-destructive-foreground hover:bg-destructive/90' ,
15+ outline :
16+ 'border border-input bg-background hover:bg-accent hover:text-accent-foreground' ,
17+ secondary :
18+ 'bg-secondary text-secondary-foreground hover:bg-secondary/80' ,
19+ ghost : 'hover:bg-accent hover:text-accent-foreground' ,
20+ link : 'text-primary underline-offset-4 hover:underline' ,
21+ blue : [
22+ 'font-semibold' ,
23+ 'bg-transparent' ,
24+ 'border' ,
25+ 'border-blue-500' ,
26+ 'text-blue-800' ,
27+ 'hover:bg-blue-500' ,
28+ 'hover:text-white' ,
29+ 'hover:border-transparent' ,
30+ ] ,
31+ } ,
32+ size : {
33+ default : 'h-10 px-4 py-2' ,
34+ sm : 'h-9 rounded-md px-3' ,
35+ lg : 'h-11 rounded-md px-8' ,
36+ icon : 'h-10 w-10' ,
37+ s : [ 'px-4' , 'py-2' , 'text-base' ] ,
38+ m : [ 'px-6' , 'py-3' , 'text-lg' ] ,
39+ l : [ 'px-8' , 'py-4' , 'text-xl' ] ,
40+ } ,
41+ } ,
42+ defaultVariants : {
43+ variant : 'default' ,
44+ size : 'default' ,
45+ } ,
3746 } ,
38- defaultVariants : {
39- variant : "default" ,
40- size : "default" ,
41- } ,
42- }
43- )
47+ ) ;
4448
4549export interface ButtonProps
46- extends React . ButtonHTMLAttributes < HTMLButtonElement > ,
47- VariantProps < typeof buttonVariants > {
48- asChild ?: boolean
50+ extends React . ButtonHTMLAttributes < HTMLButtonElement > ,
51+ VariantProps < typeof buttonVariants > {
52+ asChild ?: boolean ;
4953}
5054
5155const Button = React . forwardRef < HTMLButtonElement , ButtonProps > (
52- ( { className, variant, size, asChild = false , ...props } , ref ) => {
53- const Comp = asChild ? Slot : " button"
54- return (
55- < Comp
56- className = { cn ( buttonVariants ( { variant, size, className } ) ) }
57- ref = { ref }
58- { ...props }
59- />
60- )
61- }
62- )
63- Button . displayName = " Button"
56+ ( { className, variant, size, asChild = false , ...props } , ref ) => {
57+ const Comp = asChild ? Slot : ' button' ;
58+ return (
59+ < Comp
60+ className = { cn ( buttonVariants ( { variant, size, className } ) ) }
61+ ref = { ref }
62+ { ...props }
63+ />
64+ ) ;
65+ } ,
66+ ) ;
67+ Button . displayName = ' Button' ;
6468
65- export { Button , buttonVariants }
69+ export { Button , buttonVariants } ;
0 commit comments