99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
import * as React from 'react'
|
|
import {merge} from '@/lib/utils'
|
|
import {cva, VariantProps} from 'class-variance-authority'
|
|
|
|
export const buttonVariants = cva(
|
|
[
|
|
`transition-all duration-200 ease-in-out`, // 过渡动画
|
|
`h-10 px-4 rounded-md cursor-pointer whitespace-nowrap`, // 样式
|
|
'outline-none focus-visible:ring-4 ring-blue-200', // 焦点样式
|
|
'disabled:pointer-events-none disabled:opacity-50 ', // 禁用样式
|
|
'aria-invalid:ring-fail/20 dark:aria-invalid:ring-fail/40 aria-invalid:border-fail', // 无效状态样式
|
|
'inline-flex items-center justify-center gap-2', // 布局
|
|
'[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 ',
|
|
'cursor-pointer',
|
|
],
|
|
{
|
|
variants: {
|
|
theme: {
|
|
gradient: 'bg-gradient-to-r from-blue-400 to-cyan-300 text-white ring-offset-2 hover:from-blue-500 hover:to-cyan-400',
|
|
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
|
outline: 'border bg-background hover:bg-secondary hover:text-secondary-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
|
|
ghost: 'text-foreground bg-transparent',
|
|
text: '',
|
|
accent: 'bg-accent text-accent-foreground hover:bg-accent/90',
|
|
fail: 'bg-fail text-white hover:bg-fail/90',
|
|
warn: '',
|
|
done: '',
|
|
},
|
|
color: {
|
|
plain: '',
|
|
primary: '',
|
|
secondary: '',
|
|
accent: '',
|
|
done: '',
|
|
warn: '',
|
|
fail: '',
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
theme: 'ghost',
|
|
color: 'plain',
|
|
className: 'hover:bg-plain/10',
|
|
},
|
|
{
|
|
theme: 'ghost',
|
|
color: 'primary',
|
|
className: 'hover:bg-primary/10 text-primary',
|
|
},
|
|
{
|
|
theme: 'ghost',
|
|
color: 'secondary',
|
|
className: 'hover:bg-secondary/10 text-secondary',
|
|
},
|
|
{
|
|
theme: 'ghost',
|
|
color: 'accent',
|
|
className: 'hover:bg-accent/10 text-accent',
|
|
},
|
|
{
|
|
theme: 'ghost',
|
|
color: 'done',
|
|
className: 'hover:bg-done/10 text-done',
|
|
},
|
|
{
|
|
theme: 'ghost',
|
|
color: 'warn',
|
|
className: 'hover:bg-warn/10 text-warn',
|
|
},
|
|
{
|
|
theme: 'ghost',
|
|
color: 'fail',
|
|
className: 'hover:bg-fail/10 text-fail',
|
|
},
|
|
{
|
|
theme: 'text',
|
|
color: 'primary',
|
|
className: 'hover:text-primary',
|
|
},
|
|
],
|
|
defaultVariants: {
|
|
theme: 'default',
|
|
color: 'plain',
|
|
},
|
|
},
|
|
)
|
|
|
|
type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants>
|
|
|
|
export function Button(rawProps: ButtonProps) {
|
|
const {className, theme, color, ...props} = rawProps
|
|
return (
|
|
<button
|
|
{...props}
|
|
className={merge(buttonVariants({theme, color}), className)}
|
|
/>
|
|
)
|
|
}
|