1  import CheckIcon from "@assets/svg/files/check.svg";
 2  import { ButtonHTMLAttributes, FC } from "react";
 3  import { cva, type VariantProps } from "cva";
 4  
 5  const button = cva("button", {
 6    variants: {
 7      rounding: {
 8        sm: ["rounded-sm"],
 9        md: ["rounded"],
10        lg: ["rounded-lg"],
11        full: ["rounded-full"],
12      },
13      size: {
14        small: ["text-md", "p-1"],
15        medium: ["text-lg", "p-3"],
16        large: ["text-xl", "p-4"],
17      },
18      border: {
19        none: ["border-0"],
20        border: ["border"],
21        underline: ["border-0", "border-b", "!px-0", "!rounded-none", "!pb-0"],
22      },
23    },
24    compoundVariants: [
25      {
26        rounding: "md",
27        border: "border",
28        class: "",
29      },
30    ],
31    defaultVariants: {
32      rounding: "md",
33      size: "small",
34      border: "border",
35    },
36  });
37  
38  export interface CheckProps
39    extends ButtonHTMLAttributes<HTMLButtonElement>,
40      VariantProps<typeof button> {
41    checked: boolean;
42    icon?: any;
43    checkedBG?: string;
44  }
45  
46  export const CustomCheck: FC<CheckProps> = ({
47    className,
48    rounding,
49    size,
50    border,
51    icon,
52    checked,
53    checkedBG = "!bg-SelectRowColor",
54    ...props
55  }) => (
56    <button
57      className={`flex justify-center items-center cursor-pointer ${button({
58        rounding,
59        size,
60        border,
61        className,
62      })} ${checked ? checkedBG : "bg-transparent"}`}
63      {...props}
64    >
65      {icon ? (
66        icon
67      ) : (
68        <img
69          src={CheckIcon}
70          className={`w-[0.5] h-[0.5rem] ${!checked ? "invisible" : ""}`}
71          alt="check-icon"
72        />
73      )}
74    </button>
75  );