46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import { vcn, VariantProps } from "../shared";
|
|
|
|
const [buttonVariants, resolveVariants] = vcn({
|
|
base: "flex flex-row items-center justify-between rounded-md",
|
|
variants: {
|
|
variant: {
|
|
default:
|
|
"bg-white border border-gray-300 dark:bg-black dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors",
|
|
ghost:
|
|
"bg-black/0 hover:bg-black/10 dark:bg-white/0 dark:hover:bg-white/20 transition-colors",
|
|
outline:
|
|
"bg-transparent border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors",
|
|
link: "bg-transparent hover:underline transition-colors",
|
|
},
|
|
size: {
|
|
sm: "px-2 py-1 text-sm",
|
|
md: "px-4 py-2 text-base",
|
|
lg: "px-5 py-3 text-lg",
|
|
},
|
|
},
|
|
defaults: {
|
|
variant: "default",
|
|
size: "md",
|
|
},
|
|
});
|
|
|
|
export interface ButtonProps
|
|
extends Omit<React.ComponentPropsWithoutRef<"button">, "className">,
|
|
VariantProps<typeof buttonVariants> {}
|
|
|
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
(props, ref) => {
|
|
const [variantProps, otherProps] = resolveVariants(props);
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
{...otherProps}
|
|
className={buttonVariants(variantProps)}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
export { Button };
|