Warcraft Checkbox

1"use client";
2 
3import * as React from "react";
4import { Checkbox as CheckboxPrimitive } from "radix-ui";
5import { cva, type VariantProps } from "class-variance-authority";
6 
7import { cn } from "@/lib/utils";
8 
9import "@/components/ui/warcraftcn/styles/warcraft.css";
10 
11const checkboxVariants = cva(
12  "inline-flex items-center gap-3 cursor-pointer select-none fantasy mb-2 font-bold",
13  {
14    variants: {
15      faction: {
16        default: "text-yellow-800 dark:text-yellow-100",
17        orc: "text-red-700 dark:text-red-100",
18        elf: "text-green-700 dark:text-green-100",
19        human: "text-blue-700 dark:text-blue-100",
20        undead: "text-purple-700 dark:text-purple-100",
21      },
22    },
23    defaultVariants: {
24      faction: "default",
25    },
26  }
27);
28 
29type Faction = "default" | "orc" | "elf" | "human" | "undead";
30 
31interface CheckboxProps
32  extends Omit<
33      React.ComponentProps<typeof CheckboxPrimitive.Root>,
34      "children" | "asChild"
35    >,
36    VariantProps<typeof checkboxVariants> {
37  faction?: Faction;
38  children?: React.ReactNode;
39}
40 
41function Checkbox({
42  faction = "default",
43  children,
44  className,
45  disabled,
46  id,
47  ...props
48}: CheckboxProps) {
49  return (
50    <label
51      htmlFor={id}
52      className={cn(
53        checkboxVariants({ faction }),
54        disabled && "opacity-50 cursor-not-allowed"
55      )}
56    >
57      <CheckboxPrimitive.Root
58        data-slot="checkbox"
59        className={cn("wc-checkbox", `wc-checkbox-${faction}`, className)}
60        disabled={disabled}
61        id={id}
62        {...props}
63      >
64        <CheckboxPrimitive.Indicator />
65      </CheckboxPrimitive.Root>
66      {children}
67    </label>
68  );
69}
70 
71export { Checkbox, checkboxVariants };
72export type { CheckboxProps, Faction };