mirror of
https://github.com/memohai/Memoh.git
synced 2026-04-27 07:16:19 +09:00
38 lines
1.6 KiB
TypeScript
38 lines
1.6 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 items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default:
|
|
'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
|
destructive: 'bg-destructive text-white shadow hover:bg-destructive/90',
|
|
outline:
|
|
'border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700',
|
|
secondary:
|
|
'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm hover:bg-gray-200 dark:hover:bg-gray-600',
|
|
ghost:
|
|
'hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100',
|
|
link: 'text-primary underline-offset-4 hover:underline',
|
|
},
|
|
size: {
|
|
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
|
sm: 'h-8 rounded-lg gap-1.5 px-3 has-[>svg]:px-2.5',
|
|
lg: 'h-10 rounded-lg px-6 has-[>svg]:px-4',
|
|
icon: 'size-9',
|
|
'icon-sm': 'size-8',
|
|
'icon-lg': 'size-10',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
size: 'default',
|
|
},
|
|
},
|
|
)
|
|
export type ButtonVariants = VariantProps<typeof buttonVariants>
|