60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import { Slot } from '@radix-ui/react-slot';
|
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
import * as React from 'react';
|
|
import { cn } from '@crux-kit/utils';
|
|
|
|
const buttonVariants = cva(
|
|
'inline-flex cursor-pointer items-center justify-center rounded-full border font-bold whitespace-nowrap transition duration-150 hover:-translate-y-px focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#99d900] disabled:pointer-events-none disabled:opacity-45 motion-reduce:transform-none motion-reduce:transition-none',
|
|
{
|
|
variants: {
|
|
size: {
|
|
sm: 'min-h-9 gap-1.5 px-3.5 py-2 text-xs leading-none',
|
|
md: 'min-h-11 gap-2 px-[1.05rem] py-[0.7rem] text-sm leading-none',
|
|
lg: 'min-h-13 gap-2 px-6 py-3.5 text-base leading-none'
|
|
},
|
|
variant: {
|
|
primary:
|
|
'border-[#172019] bg-[#172019] text-white hover:border-[#29382c] hover:bg-[#29382c]',
|
|
secondary: 'border-[#c7ff3f] bg-[#c7ff3f] text-[#172019] hover:bg-[#b8f51f]',
|
|
outline:
|
|
'border-[#172019]/35 bg-transparent text-[#172019] hover:border-[#172019] hover:bg-white/40',
|
|
ghost:
|
|
'min-h-0 justify-start rounded-none border-transparent px-0 py-1.5 text-inherit hover:text-[#517000]',
|
|
inline:
|
|
'min-h-0 justify-start rounded-none border-transparent px-0 py-1.5 text-[#517000] underline-offset-4 hover:text-[#3f5700] hover:underline'
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
variant: 'primary',
|
|
size: 'md'
|
|
}
|
|
}
|
|
);
|
|
|
|
type ButtonProps = React.ComponentProps<'button'> &
|
|
VariantProps<typeof buttonVariants> & {
|
|
asChild?: boolean;
|
|
};
|
|
|
|
function Button({
|
|
className,
|
|
variant,
|
|
size,
|
|
asChild = false,
|
|
type = 'button',
|
|
...props
|
|
}: ButtonProps) {
|
|
const Comp = asChild ? Slot : 'button';
|
|
|
|
return (
|
|
<Comp
|
|
data-slot="button"
|
|
type={asChild ? undefined : type}
|
|
className={cn(buttonVariants({ size, variant }), className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export { Button, buttonVariants, type ButtonProps };
|