38 lines
2.2 KiB
TypeScript
38 lines
2.2 KiB
TypeScript
import type { VariantProps } from "class-variance-authority";
|
|
import { cva } from "class-variance-authority";
|
|
|
|
export { default as Button } from "./Button.vue";
|
|
|
|
export const buttonVariants = cva(
|
|
"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-body font-semibold transition-[background-color,border-color,color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[loading]:cursor-wait data-[loading]:opacity-80 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-2 focus-visible:ring-offset-background [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default:
|
|
"border border-transparent bg-brand text-brand-foreground shadow-xs hover:brightness-95",
|
|
destructive:
|
|
"border border-transparent bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/35",
|
|
outline:
|
|
"border border-input bg-card text-foreground shadow-xs hover:border-primary/45 hover:bg-accent hover:text-accent-foreground",
|
|
secondary:
|
|
"border border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
ghost: "border border-transparent hover:bg-accent hover:text-accent-foreground",
|
|
link: "min-h-0 border-0 px-0 text-primary underline-offset-4 shadow-none hover:underline",
|
|
},
|
|
size: {
|
|
default: "min-h-control px-4 py-2 has-[>svg]:px-3",
|
|
sm: "min-h-9 gap-1.5 px-3 py-1.5 has-[>svg]:px-2.5",
|
|
lg: "min-h-12 px-6 py-3 has-[>svg]:px-4",
|
|
icon: "size-control",
|
|
"icon-sm": "size-9",
|
|
"icon-lg": "size-12",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
size: "default",
|
|
},
|
|
},
|
|
);
|
|
export type ButtonVariants = VariantProps<typeof buttonVariants>;
|