Fillable Button

1"use client";
2 
3import * as React from "react";
4 
5import { type VariantProps, cva } from "class-variance-authority";
6import gsap from "gsap";
7 
8import { cn } from "@/lib/utils";
9 
10const overlayVariants = cva(
11    "pointer-events-none absolute left-0 top-0 block aspect-square w-[170%] -translate-x-1/2 -translate-y-1/2 rounded-full",
12    {
13        variants: {
14            variant: {
15                default: "bg-black dark:bg-white",
16                outline: "bg-zinc-300 dark:bg-zinc-600",
17                destructive: "bg-destructive",
18                secondary: "bg-secondary-foreground",
19                ghost: "bg-muted",
20                link: "",
21            },
22        },
23        defaultVariants: {
24            variant: "default",
25        },
26    },
27);
28 
29const buttonVariants = cva(
30    "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md 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:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors",
31    {
32        variants: {
33            variant: {
34                default:
35                    "relative bg-primary text-primary-foreground dark:hover:text-black overflow-hidden rounded-full! px-6 py-3.5 tracking-tight after:absolute after:inset-0 after:rounded-full after:pointer-events-none after:content-[''] ",
36                outline:
37                    "relative overflow-hidden rounded-full bg-transparent text-foreground px-6 py-3.5 tracking-tight after:absolute after:inset-0 after:rounded-full after:border-2 after:border-zinc-300 dark:after:border-zinc-600 after:pointer-events-none after:content-[''] ",
38                destructive:
39                    "relative bg-destructive/10 dark:bg-destructive/20 text-destructive hover:text-background overflow-hidden rounded-full! px-6 py-3.5 tracking-tight",
40                secondary:
41                    "relative bg-secondary text-secondary-foreground hover:text-background overflow-hidden rounded-full! px-6 py-3.5 tracking-tight",
42                ghost: "relative bg-transparent text-foreground hover:text-accent-foreground overflow-hidden rounded-full! px-6 py-3.5 tracking-tight",
43                link: "relative text-primary",
44            },
45            size: {
46// … truncated