button

1import { Slot } from "@radix-ui/react-slot";
2import { cva, type VariantProps } from "class-variance-authority";
3import { motion, useMotionTemplate, useMotionValue } from "motion/react";
4import * as React from "react";
5 
6const buttonVariants = cva(
7  "group relative inline-flex items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-xl font-semibold text-sm transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
8  {
9    variants: {
10      variant: {
11        default:
12          "bg-gradient-to-br from-primary via-primary to-primary/80 text-primary-foreground shadow-lg shadow-primary/25 before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/20 before:to-transparent before:opacity-0 before:transition-opacity hover:scale-[1.02] hover:shadow-primary/30 hover:shadow-xl hover:before:opacity-100 active:scale-[0.98]",
13        destructive:
14          "bg-gradient-to-br from-destructive via-destructive to-destructive/80 text-destructive-foreground shadow-destructive/25 shadow-lg before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/20 before:to-transparent before:opacity-0 before:transition-opacity hover:scale-[1.02] hover:shadow-destructive/30 hover:shadow-xl hover:before:opacity-100 active:scale-[0.98]",
15        outline:
16          "border-2 border-input bg-background/50 shadow-sm backdrop-blur-sm hover:scale-[1.02] hover:border-accent hover:bg-accent hover:text-accent-foreground hover:shadow-md active:scale-[0.98]",
17        secondary:
18          "bg-gradient-to-br from-secondary via-secondary to-secondary/80 text-secondary-foreground shadow-lg shadow-secondary/25 before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/20 before:to-transparent before:opacity-0 before:transition-opacity hover:scale-[1.02] hover:shadow-secondary/30 hover:shadow-xl hover:before:opacity-100 active:scale-[0.98]",
19        ghost:
20          "backdrop-blur-sm hover:scale-[1.02] hover:bg-accent/80 hover:text-accent-foreground active:scale-[0.98]",
21        link: "text-primary underline-offset-4 transition-colors hover:text-primary/80 hover:underline",
22        shimmer:
23// … truncated