Spaces:
Running
Running
| import * as React from "react" | |
| import { cva } from "class-variance-authority"; | |
| import { Slot } from "radix-ui" | |
| import { cn } from "@/lib/utils" | |
| const buttonVariants = cva( | |
| "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", | |
| { | |
| variants: { | |
| variant: { | |
| default: "bg-primary text-primary-foreground hover:bg-primary/80", | |
| outline: | |
| "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50", | |
| secondary: | |
| "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", | |
| ghost: | |
| "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50", | |
| "destructive-subtle": | |
| "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40", | |
| destructive: | |
| "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:border-destructive focus-visible:ring-destructive/30", | |
| link: "text-primary underline-offset-4 hover:underline", | |
| }, | |
| size: { | |
| default: | |
| "h-11 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3", | |
| xs: "h-7 gap-1 px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", | |
| sm: "h-9 gap-1 px-3 text-sm has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5", | |
| lg: "h-12 gap-2 px-5 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4", | |
| icon: "size-11", | |
| "icon-xs": | |
| "size-7 [&_svg:not([class*='size-'])]:size-3", | |
| "icon-sm": | |
| "size-9", | |
| "icon-lg": "size-12", | |
| "icon-xl": "size-14", | |
| }, | |
| }, | |
| defaultVariants: { | |
| variant: "default", | |
| size: "default", | |
| }, | |
| } | |
| ) | |
| const Button = React.forwardRef(function Button({ | |
| className, | |
| variant = "default", | |
| size = "default", | |
| asChild = false, | |
| type, | |
| ...props | |
| }, ref) { | |
| const Comp = asChild ? Slot.Root : "button" | |
| return ( | |
| <Comp | |
| data-slot="button" | |
| data-variant={variant} | |
| data-size={size} | |
| className={cn(buttonVariants({ variant, size, className }))} | |
| type={asChild ? type : type ?? "button"} | |
| ref={ref} | |
| {...props} /> | |
| ) | |
| }) | |
| export { Button, buttonVariants } | |