Add tests for checkbox

lib/component/input/checkbox/MattrixwvCheckbox.tsx

@@ -1,10 +1,9 @@
 import type { CheckboxProps } from "$/types/InputTypes";
-import { Checkbox } from "@headlessui/react";
+import { Checkbox, Field, Label } from "@headlessui/react";
 import clsx from "clsx";
 
 
 export default function MattrixwvCheckbox({
-	id = crypto.randomUUID().replaceAll("-", ""),
 	className,
 	labelClassName,
 	name,
@@ -19,65 +18,68 @@ export default function MattrixwvCheckbox({
 	children
 }: Readonly<CheckboxProps>){
 	return (
-		<Checkbox
-			id={id}
-			className={clsx(
-				"group",
-				"flex flex-row items-center justify-start gap-x-2",
-				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-				{
-					"cursor-pointer": !disabled,
-					"cursor-not-allowed": disabled
-				}
-			)}
-			name={name}
-			checked={checked}
-			defaultChecked={defaultChecked}
-			onChange={onChange}
-			value={value}
-			disabled={disabled}
-			aria-labelledby={`${id}Label`}
+		<Field
+			className="flex flex-row items-center justify-center gap-x-2"
 		>
-			{/* Checkbox */}
-			<div
+			<Checkbox
+				data-testid="mattrixwv-checkbox"
 				className={clsx(
-					className,
+					"group",
+					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
 					{
-						"border rounded": showBox
-					},
-					{
-						"": size === "none",
-						"size-3": size === "xs",
-						"size-4": size === "sm",
-						"size-5": size === "md",
-						"size-6": size === "lg",
-						"size-7": size === "xl"
+						"cursor-pointer": !disabled,
+						"cursor-not-allowed": disabled
 					}
 				)}
+				name={name}
+				checked={checked}
+				defaultChecked={defaultChecked}
+				onChange={onChange}
+				value={value}
+				disabled={disabled}
 			>
-				<svg
-					viewBox="0 0 14 14"
-					fill="none"
-					aria-hidden="true"
+				{/* Checkbox */}
+				<div
+					data-testid="mattrixwv-checkbox-graphic"
+					className={clsx(
+						className,
+						{
+							"border rounded": showBox
+						},
+						{
+							"": size === "none",
+							"size-3": size === "xs",
+							"size-4": size === "sm",
+							"size-5": size === "md",
+							"size-6": size === "lg",
+							"size-7": size === "xl"
+						}
+					)}
 				>
-					<path
-						d="M3 8L6 11L11 3.5"
-						strokeWidth={strokeWidth}
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					/>
-				</svg>
-			</div>
+					<svg
+						viewBox="0 0 14 14"
+						fill="none"
+						aria-hidden="true"
+					>
+						<path
+							d="M3 8L6 11L11 3.5"
+							strokeWidth={strokeWidth}
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						/>
+					</svg>
+				</div>
+			</Checkbox>
 			{/* Label */}
-			{
-				children &&
-				<span
-					id={`${id}Label`}
-					className={labelClassName}
-				>
-					{children}
-				</span>
-			}
-		</Checkbox>
+				{
+					children &&
+					<Label
+						data-testid="mattrixwv-checkbox-label"
+						className={labelClassName}
+					>
+						{children}
+					</Label>
+				}
+		</Field>
 	);
 }

lib/types/InputTypes.ts

@@ -128,7 +128,6 @@ export interface FileInputProps {
 export type CheckboxSize = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 
 export interface CheckboxProps {
-	id?: string;
 	className?: string;
 	labelClassName?: string;
 	name?: string;

test/component/input/checkbox/DangerCheckbox.test.tsx

@@ -0,0 +1,81 @@
+import DangerCheckbox from "$/component/input/checkbox/DangerCheckbox";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<DangerCheckbox/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-pointer");
+		expect(checkbox).not.toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-danger", "group-data-checked:stroke-white");
+	});
+	it("Renders disabled", () => {
+		render(<DangerCheckbox disabled/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-not-allowed");
+		expect(checkbox).toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-danger", "group-data-checked:stroke-white");
+	});
+	it("Renders with custom classes", () => {
+		const className = "custom-class";
+
+		render(<DangerCheckbox className={className}/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass(className);
+	});
+	it("Renders with label", () => {
+		const label = "Some Label";
+
+		render(<DangerCheckbox>{label}</DangerCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkboxLabel).toBeInTheDocument();
+		expect(checkboxLabel).toHaveTextContent(label);
+	});
+});
+
+describe("Box variants", () => {
+	it("Renders with box", () => {
+		render(<DangerCheckbox showBox={true}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-danger", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-danger");
+	});
+	it("Renders without box", () => {
+		render(<DangerCheckbox showBox={false}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-danger", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-danger");
+	});
+});

test/component/input/checkbox/DarkCheckbox.test.tsx

@@ -0,0 +1,81 @@
+import DarkCheckbox from "$/component/input/checkbox/DarkCheckbox";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<DarkCheckbox/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-pointer");
+		expect(checkbox).not.toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-dark", "group-data-checked:stroke-light");
+	});
+	it("Renders disabled", () => {
+		render(<DarkCheckbox disabled/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-not-allowed");
+		expect(checkbox).toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-dark", "group-data-checked:stroke-light");
+	});
+	it("Renders with custom classes", () => {
+		const className = "custom-class";
+
+		render(<DarkCheckbox className={className}/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass(className);
+	});
+	it("Renders with label", () => {
+		const label = "Some Label";
+
+		render(<DarkCheckbox>{label}</DarkCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkboxLabel).toBeInTheDocument();
+		expect(checkboxLabel).toHaveTextContent(label);
+	});
+});
+
+describe("Box variants", () => {
+	it("Renders with box", () => {
+		render(<DarkCheckbox showBox={true}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-dark", "group-data-checked:stroke-light");
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-dark");
+	});
+	it("Renders without box", () => {
+		render(<DarkCheckbox showBox={false}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-dark", "group-data-checked:stroke-light");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-dark");
+	});
+});

test/component/input/checkbox/InfoCheckbox.test.tsx

@@ -0,0 +1,81 @@
+import InfoCheckbox from "$/component/input/checkbox/InfoCheckbox";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<InfoCheckbox/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-pointer");
+		expect(checkbox).not.toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-info", "group-data-checked:stroke-white");
+	});
+	it("Renders disabled", () => {
+		render(<InfoCheckbox disabled/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-not-allowed");
+		expect(checkbox).toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-info", "group-data-checked:stroke-white");
+	});
+	it("Renders with custom classes", () => {
+		const className = "custom-class";
+
+		render(<InfoCheckbox className={className}/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass(className);
+	});
+	it("Renders with label", () => {
+		const label = "Some Label";
+
+		render(<InfoCheckbox>{label}</InfoCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkboxLabel).toBeInTheDocument();
+		expect(checkboxLabel).toHaveTextContent(label);
+	});
+});
+
+describe("Box variants", () => {
+	it("Renders with box", () => {
+		render(<InfoCheckbox showBox={true}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-info", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-info");
+	});
+	it("Renders without box", () => {
+		render(<InfoCheckbox showBox={false}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-info", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-info");
+	});
+});

test/component/input/checkbox/LightCheckbox.test.tsx

@@ -0,0 +1,81 @@
+import LightCheckbox from "$/component/input/checkbox/LightCheckbox";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<LightCheckbox/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-pointer");
+		expect(checkbox).not.toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark");
+	});
+	it("Renders disabled", () => {
+		render(<LightCheckbox disabled/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-not-allowed");
+		expect(checkbox).toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark");
+	});
+	it("Renders with custom classes", () => {
+		const className = "custom-class";
+
+		render(<LightCheckbox className={className}/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass(className);
+	});
+	it("Renders with label", () => {
+		const label = "Some Label";
+
+		render(<LightCheckbox>{label}</LightCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkboxLabel).toBeInTheDocument();
+		expect(checkboxLabel).toHaveTextContent(label);
+	});
+});
+
+describe("Box variants", () => {
+	it("Renders with box", () => {
+		render(<LightCheckbox showBox={true}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark");
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-light");
+	});
+	it("Renders without box", () => {
+		render(<LightCheckbox showBox={false}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-light");
+	});
+});

test/component/input/checkbox/MattrixwvCheckbox.test.tsx

@@ -0,0 +1,235 @@
+import { MattrixwvCheckbox } from "$/index";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+
+describe("Renders", () => {
+	it("Renders with default properties", () => {
+		render(<MattrixwvCheckbox/>);
+
+		//Checkbox
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox.id).toMatch(/_r_\d+/);
+		expect(checkbox).toHaveClass("group");
+		expect(checkbox).toHaveClass("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2");
+		expect(checkbox).toHaveClass("cursor-pointer");
+		expect(checkbox).not.toHaveAttribute("data-disabled");
+		expect(checkbox).not.toBeChecked();
+
+		//Visible checkbox
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+
+		//Label
+		const label = screen.queryByTestId("mattrixwv-checkbox-label");
+		expect(label).not.toBeInTheDocument();
+	});
+
+	it("Renders with default properties with custom name and class name", () => {
+		const className = "my-class-name";
+		const name = "my-name";
+
+		render(
+			<MattrixwvCheckbox
+				className={className}
+				name={name}
+			/>
+		);
+
+		//Checkbox
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("group");
+		expect(checkbox).toHaveClass("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2");
+		expect(checkbox).toHaveClass("cursor-pointer");
+		expect(checkbox).not.toBeChecked();
+		expect(checkbox).not.toHaveAttribute("aria-labelledby");
+
+		//Visible checkbox
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkbox).toContain(checkboxGraphic);
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass(className);
+
+		//Label
+		const label = screen.queryByTestId("mattrixwv-checkbox-label");
+		expect(label).not.toBeInTheDocument();
+	});
+	it("Renders with default properties disabled", () => {
+		render(<MattrixwvCheckbox disabled/>);
+
+		//Checkbox
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox.id).toMatch(/_r_\d+/);
+		expect(checkbox).toHaveClass("group");
+		expect(checkbox).toHaveClass("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2");
+		expect(checkbox).toHaveClass("cursor-not-allowed");
+		expect(checkbox).toHaveAttribute("data-disabled");
+		expect(checkbox).not.toBeChecked();
+
+		//Visible checkbox
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkbox).toContain(checkboxGraphic);
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+
+		//Label
+		const label = screen.queryByTestId("mattrixwv-checkbox-label");
+		expect(label).not.toBeInTheDocument();
+	});
+});
+
+describe("Checkbox", () => {
+	it("Renders with box", () => {
+		render(<MattrixwvCheckbox showBox={true}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+	});
+
+	it("Renders without box", () => {
+		render(<MattrixwvCheckbox showBox={false}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).not.toHaveClass("border", "rounded");
+	});
+});
+
+describe("Size", () => {
+	it("Renders with no size", () => {
+		render(<MattrixwvCheckbox size="none"/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic.className).not.toMatch(/size*/);
+	});
+	it("Renders with extra-small size", () => {
+		render(<MattrixwvCheckbox size="xs"/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-3");
+	});
+	it("Renders with small size", () => {
+		render(<MattrixwvCheckbox size="sm"/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+	});
+	it("Renders with medium size", () => {
+		render(<MattrixwvCheckbox size="md"/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-5");
+	});
+	it("Renders with large size", () => {
+		render(<MattrixwvCheckbox size="lg"/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-6");
+	});
+	it("Renders with extra-large size", () => {
+		render(<MattrixwvCheckbox size="xl"/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-7");
+	});
+});
+
+describe("Label", () => {
+	it("Renders with label", () => {
+		const textContent = "Text";
+
+		render(<MattrixwvCheckbox>{textContent}</MattrixwvCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveAttribute("aria-labelledby");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkbox).toContain(checkboxGraphic);
+		expect(checkboxGraphic).toBeInTheDocument();
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkbox).toAppearBefore(checkboxLabel);
+		expect(checkboxLabel.id).toMatch(/headlessui-label-_r_.+_/);
+		expect(checkboxLabel).toHaveTextContent(textContent);
+	});
+
+	it("Renders with label classes", () => {
+		const textContent = "Text";
+		const className = "custom-class-name";
+
+		render(<MattrixwvCheckbox labelClassName={className}>{textContent}</MattrixwvCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveAttribute("aria-labelledby");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkbox).toContain(checkboxGraphic);
+		expect(checkboxGraphic).toBeInTheDocument();
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkbox).toAppearBefore(checkboxLabel);
+		expect(checkboxLabel.id).toMatch(/headlessui-label-_r_.+_/);
+		expect(checkboxLabel).toHaveClass(className);
+		expect(checkboxLabel).toHaveTextContent(textContent);
+	});
+});
+
+describe("Checking", () => {
+	it("Renders checked", async () => {
+		render(<MattrixwvCheckbox checked/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toBeChecked();
+
+		await userEvent.click(checkbox);
+		expect(checkbox).toBeChecked();
+	});
+	it("Renders default checked", async () => {
+		render(<MattrixwvCheckbox defaultChecked/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toBeChecked();
+
+		await userEvent.click(checkbox);
+		expect(checkbox).not.toBeChecked();
+	});
+	it("Handles changes", async () => {
+		const label = "Some label";
+		const handleClick = vi.fn();
+
+		render(<MattrixwvCheckbox onChange={handleClick}>{label}</MattrixwvCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).not.toBeChecked();
+		expect(handleClick).toHaveBeenCalledTimes(0);
+
+		await userEvent.click(checkbox);
+		expect(checkbox).toBeChecked();
+		expect(handleClick).toHaveBeenCalledTimes(1);
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkboxLabel).toBeInTheDocument();
+		await userEvent.click(checkboxLabel);
+		expect(checkbox).not.toBeChecked();
+		expect(handleClick).toHaveBeenCalledTimes(2);
+	});
+});

test/component/input/checkbox/MoltenCheckbox.test.tsx

@@ -0,0 +1,81 @@
+import MoltenCheckbox from "$/component/input/checkbox/MoltenCheckbox";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<MoltenCheckbox/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-pointer");
+		expect(checkbox).not.toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-molten", "group-data-checked:stroke-white");
+	});
+	it("Renders disabled", () => {
+		render(<MoltenCheckbox disabled/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-not-allowed");
+		expect(checkbox).toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-molten", "group-data-checked:stroke-white");
+	});
+	it("Renders with custom classes", () => {
+		const className = "custom-class";
+
+		render(<MoltenCheckbox className={className}/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass(className);
+	});
+	it("Renders with label", () => {
+		const label = "Some Label";
+
+		render(<MoltenCheckbox>{label}</MoltenCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkboxLabel).toBeInTheDocument();
+		expect(checkboxLabel).toHaveTextContent(label);
+	});
+});
+
+describe("Box variants", () => {
+	it("Renders with box", () => {
+		render(<MoltenCheckbox showBox={true}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-molten", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-molten");
+	});
+	it("Renders without box", () => {
+		render(<MoltenCheckbox showBox={false}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-molten", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-molten");
+	});
+});

test/component/input/checkbox/PrimaryCheckbox.test.tsx

@@ -0,0 +1,81 @@
+import PrimaryCheckbox from "$/component/input/checkbox/PrimaryCheckbox";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<PrimaryCheckbox/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-pointer");
+		expect(checkbox).not.toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-primary", "group-data-checked:stroke-white");
+	});
+	it("Renders disabled", () => {
+		render(<PrimaryCheckbox disabled/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-not-allowed");
+		expect(checkbox).toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-primary", "group-data-checked:stroke-white");
+	});
+	it("Renders with custom classes", () => {
+		const className = "custom-class";
+
+		render(<PrimaryCheckbox className={className}/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass(className);
+	});
+	it("Renders with label", () => {
+		const label = "Some Label";
+
+		render(<PrimaryCheckbox>{label}</PrimaryCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkboxLabel).toBeInTheDocument();
+		expect(checkboxLabel).toHaveTextContent(label);
+	});
+});
+
+describe("Box variants", () => {
+	it("Renders with box", () => {
+		render(<PrimaryCheckbox showBox={true}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-primary", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-primary");
+	});
+	it("Renders without box", () => {
+		render(<PrimaryCheckbox showBox={false}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-primary", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-primary");
+	});
+});

test/component/input/checkbox/SecondaryCheckbox.test.tsx

@@ -0,0 +1,81 @@
+import SecondaryCheckbox from "$/component/input/checkbox/SecondaryCheckbox";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<SecondaryCheckbox/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-pointer");
+		expect(checkbox).not.toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-secondary", "group-data-checked:stroke-white");
+	});
+	it("Renders disabled", () => {
+		render(<SecondaryCheckbox disabled/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-not-allowed");
+		expect(checkbox).toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-secondary", "group-data-checked:stroke-white");
+	});
+	it("Renders with custom classes", () => {
+		const className = "custom-class";
+
+		render(<SecondaryCheckbox className={className}/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass(className);
+	});
+	it("Renders with label", () => {
+		const label = "Some Label";
+
+		render(<SecondaryCheckbox>{label}</SecondaryCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkboxLabel).toBeInTheDocument();
+		expect(checkboxLabel).toHaveTextContent(label);
+	});
+});
+
+describe("Box variants", () => {
+	it("Renders with box", () => {
+		render(<SecondaryCheckbox showBox={true}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-secondary", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-secondary");
+	});
+	it("Renders without box", () => {
+		render(<SecondaryCheckbox showBox={false}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-secondary", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-secondary");
+	});
+});

test/component/input/checkbox/SuccessCheckbox.test.tsx

@@ -0,0 +1,81 @@
+import SuccessCheckbox from "$/component/input/checkbox/SuccessCheckbox";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<SuccessCheckbox/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-pointer");
+		expect(checkbox).not.toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-success", "group-data-checked:stroke-white");
+	});
+	it("Renders disabled", () => {
+		render(<SuccessCheckbox disabled/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-not-allowed");
+		expect(checkbox).toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-success", "group-data-checked:stroke-white");
+	});
+	it("Renders with custom classes", () => {
+		const className = "custom-class";
+
+		render(<SuccessCheckbox className={className}/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass(className);
+	});
+	it("Renders with label", () => {
+		const label = "Some Label";
+
+		render(<SuccessCheckbox>{label}</SuccessCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkboxLabel).toBeInTheDocument();
+		expect(checkboxLabel).toHaveTextContent(label);
+	});
+});
+
+describe("Box variants", () => {
+	it("Renders with box", () => {
+		render(<SuccessCheckbox showBox={true}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-success", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-success");
+	});
+	it("Renders without box", () => {
+		render(<SuccessCheckbox showBox={false}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-success", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-success");
+	});
+});

test/component/input/checkbox/TertiaryCheckbox.test.tsx

@@ -0,0 +1,81 @@
+import TertiaryCheckbox from "$/component/input/checkbox/TertiaryCheckbox";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<TertiaryCheckbox/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-pointer");
+		expect(checkbox).not.toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-tertiary", "group-data-checked:stroke-white");
+	});
+	it("Renders disabled", () => {
+		render(<TertiaryCheckbox disabled/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-not-allowed");
+		expect(checkbox).toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-tertiary", "group-data-checked:stroke-white");
+	});
+	it("Renders with custom classes", () => {
+		const className = "custom-class";
+
+		render(<TertiaryCheckbox className={className}/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass(className);
+	});
+	it("Renders with label", () => {
+		const label = "Some Label";
+
+		render(<TertiaryCheckbox>{label}</TertiaryCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkboxLabel).toBeInTheDocument();
+		expect(checkboxLabel).toHaveTextContent(label);
+	});
+});
+
+describe("Box variants", () => {
+	it("Renders with box", () => {
+		render(<TertiaryCheckbox showBox={true}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-tertiary", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-tertiary");
+	});
+	it("Renders without box", () => {
+		render(<TertiaryCheckbox showBox={false}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-tertiary", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-tertiary");
+	});
+});

test/component/input/checkbox/WarningCheckbox.test.tsx

@@ -0,0 +1,81 @@
+import WarningCheckbox from "$/component/input/checkbox/WarningCheckbox";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<WarningCheckbox/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-pointer");
+		expect(checkbox).not.toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-warning", "group-data-checked:stroke-white");
+	});
+	it("Renders disabled", () => {
+		render(<WarningCheckbox disabled/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).toHaveClass("cursor-not-allowed");
+		expect(checkbox).toHaveAttribute("data-disabled");
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("border", "rounded");
+		expect(checkboxGraphic).toHaveClass("size-4");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-warning", "group-data-checked:stroke-white");
+	});
+	it("Renders with custom classes", () => {
+		const className = "custom-class";
+
+		render(<WarningCheckbox className={className}/>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass(className);
+	});
+	it("Renders with label", () => {
+		const label = "Some Label";
+
+		render(<WarningCheckbox>{label}</WarningCheckbox>);
+
+		const checkbox = screen.getByTestId("mattrixwv-checkbox");
+		expect(checkbox).toBeInTheDocument();
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+
+		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
+		expect(checkboxLabel).toBeInTheDocument();
+		expect(checkboxLabel).toHaveTextContent(label);
+	});
+});
+
+describe("Box variants", () => {
+	it("Renders with box", () => {
+		render(<WarningCheckbox showBox={true}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-warning", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-warning");
+	});
+	it("Renders without box", () => {
+		render(<WarningCheckbox showBox={false}/>);
+
+		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
+		expect(checkboxGraphic).toBeInTheDocument();
+		expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-warning", "group-data-checked:stroke-white");
+		expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-warning");
+	});
+});