| 1 | import * as React from 'react';
|
| 2 | import { cva, type VariantProps } from 'class-variance-authority';
|
| 3 | import { Slot } from 'radix-ui';
|
| 4 |
|
| 5 | import { cn } from '@/lib/utils';
|
| 6 |
|
| 7 | const buttonVariants = cva(
|
| 8 | "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
| 9 | {
|
| 10 | variants: {
|
| 11 | variant: {
|
| 12 | default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
| 13 | destructive:
|
| 14 | 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
|
| 15 | outline:
|
| 16 | 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
|
| 17 | secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
| 18 | ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
| 19 | link: 'text-primary underline-offset-4 hover:underline',
|
| 20 | },
|
| 21 | size: {
|
| 22 | default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
| 23 | xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
|
| 24 | sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
|
| 25 | lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
|
| 26 | icon: 'size-9',
|
| 27 | 'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
|
| 28 | 'icon-sm': 'size-8',
|
| 29 | 'icon-lg': 'size-10',
|
| 30 | },
|
| 31 | },
|
| 32 | defaultVariants: {
|
| 33 | variant: 'default',
|
| 34 | size: 'default',
|
| 35 | },
|
| 36 | },
|
| 37 | );
|
| 38 |
|
| 39 | function Button({
|
| 40 | className,
|
| 41 | variant = 'default',
|
| 42 | size = 'default',
|
| 43 | asChild = false,
|
| 44 | ...props
|
| 45 | }: React.ComponentProps<'button'> &
|
| 46 | VariantProps<typeof buttonVariants> & {
|
| 47 | asChild?: boolean;
|
| 48 | }) {
|
| 49 | const Comp = asChild ? Slot.Root : 'button';
|
| 50 |
|
| 51 | return (
|
| 52 | <Comp
|
| 53 | data-slot="button"
|
| 54 | data-variant={variant}
|
| 55 | data-size={size}
|
| 56 | className={cn(buttonVariants({ variant, size, className }))}
|
| 57 | {...props}
|
| 58 | />
|
| 59 | );
|
| 60 | }
|
| 61 |
|
| 62 | export { Button, buttonVariants };
|