Pop Button

1import * as React from "react";
2import { Slot } from "@radix-ui/react-slot";
3import { cn } from "@/lib/utils";
4 
5type Color =
6  | "default"
7  | "blue"
8  | "purple"
9  | "pink"
10  | "red"
11  | "orange"
12  | "yellow"
13  | "green"
14  | "teal"
15  | "cyan"
16  | "indigo"
17  | "violet"
18  | "rose"
19  | "amber"
20  | "lime"
21  | "sky"
22  | "slate"
23  | "gray"
24  | "zinc"
25  | "neutral"
26  | "stone"
27  | "fuchsia"
28  | "emerald";
29 
30type SizeVariant = "sm" | "default" | "lg";
31 
32export interface PopButtonProps
33  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
34  color?: Color;
35  size?: SizeVariant;
36  children: React.ReactNode;
37  asChild?: boolean;
38}
39 
40const PopButton = React.forwardRef<HTMLButtonElement, PopButtonProps>(
41  (
42    { className, color = "default", size = "default", children, asChild = false, ...props },
43    ref,
44  ) => {
45    const Comp = asChild ? Slot : "button";
46 
47    const baseClasses =
48      "font-pop inline-flex select-none transition-all items-center justify-center whitespace-nowrap rounded-xl ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground active:border-b-2 active:scale-y-95 border-x-2 border-t-2 border-b-4 origin-bottom";
49 
50    const colors: Record<Color, string> = {
51      default:
52        "bg-white hover:bg-gray-50 border-neutral-300 text-neutral-900 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-100",
53      blue: "bg-blue-500 hover:bg-blue-600 border-blue-800 text-white",
54      purple: "bg-purple-500 hover:bg-purple-600 border-purple-800 text-white",
55      pink: "bg-pink-500 hover:bg-pink-600 border-pink-800 text-white",
56      red: "bg-red-500 hover:bg-red-600 border-red-800 text-white",
57      orange: "bg-orange-500 hover:bg-orange-600 border-orange-800 text-white",
58      yellow: "bg-yellow-500 hover:bg-yellow-600 border-yellow-800 text-white",
59      green: "bg-green-500 hover:bg-green-600 border-green-800 text-white",
60      teal: "bg-teal-500 hover:bg-teal-600 border-teal-800 text-white",
61      cyan: "bg-cyan-500 hover:bg-cyan-600 border-cyan-800 text-white",
62      indigo: "bg-indigo-500 hover:bg-indigo-600 border-indigo-800 text-white",
63      violet: "bg-violet-500 hover:bg-violet-600 border-violet-800 text-white",
64      rose: "bg-rose-500 hover:bg-rose-600 border-rose-800 text-white",
65      amber: "bg-amber-500 hover:bg-amber-600 border-amber-800 text-white",
66// … truncated