45 lines
2.2 KiB
TypeScript
45 lines
2.2 KiB
TypeScript
import { cva } from "../lib/cva";
|
|
import { getMotionRecipeClassNames } from "../lib/motion";
|
|
|
|
export const buttonVariants = cva(
|
|
[
|
|
"relative isolate inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden whitespace-nowrap",
|
|
"rounded-[var(--ui-button-radius)] [border-width:var(--ui-button-border-width)] font-medium select-none",
|
|
"[transition-duration:var(--ui-button-transition-duration,var(--dur-fast))]",
|
|
"outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)]",
|
|
"focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
|
|
"disabled:pointer-events-none disabled:opacity-55",
|
|
getMotionRecipeClassNames("pressable", "ring")
|
|
],
|
|
{
|
|
variants: {
|
|
size: {
|
|
sm: "h-9 px-3 text-sm",
|
|
md: "h-10 px-4 text-sm",
|
|
lg: "h-12 px-5 text-base",
|
|
icon: "h-10 w-10 text-sm"
|
|
},
|
|
variant: {
|
|
primary:
|
|
"border-[var(--ui-button-primary-border)] bg-[var(--ui-button-primary-bg)] text-[var(--ui-button-primary-fg)] shadow-[var(--ui-button-primary-shadow)] hover:bg-[var(--ui-button-primary-hover-bg)]",
|
|
secondary:
|
|
"border-[var(--ui-button-secondary-border)] bg-[var(--ui-button-secondary-bg)] text-[var(--ui-button-secondary-fg)] shadow-[var(--ui-button-secondary-shadow)] hover:bg-[var(--ui-button-secondary-hover-bg)]",
|
|
ghost:
|
|
"border-[var(--ui-button-ghost-border)] bg-[var(--ui-button-ghost-bg)] text-[var(--ui-button-ghost-fg)] shadow-[var(--ui-button-ghost-shadow)] hover:bg-[var(--ui-button-ghost-hover-bg)]",
|
|
subtle:
|
|
"border-[var(--ui-button-subtle-border)] bg-[var(--ui-button-subtle-bg)] text-[var(--ui-button-subtle-fg)] shadow-[var(--ui-button-subtle-shadow)] hover:bg-[var(--ui-button-subtle-hover-bg)]",
|
|
destructive:
|
|
"border-[var(--ui-button-destructive-border)] bg-[var(--ui-button-destructive-bg)] text-[var(--ui-button-destructive-fg)] shadow-[var(--ui-button-destructive-shadow)] hover:bg-[var(--ui-button-destructive-hover-bg)]"
|
|
},
|
|
loading: {
|
|
false: "",
|
|
true: "cursor-wait"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
size: "md",
|
|
variant: "primary"
|
|
}
|
|
}
|
|
);
|