0.0.9

.gitignore

@@ -7,10 +7,7 @@ dist
 *.local
 .tanstack
 *.tgz
-test/coverage
+coverage
-
-# Editor directories and files
-.vscode
 
 # Sonarqube
 sonarBuild.sh

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+	"sonarlint.connectedMode.project": {
+		"connectionId": "mattrixwvSonarqube",
+		"projectKey": "MattrixwvReactComponents"
+	}
+}

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,11 +18,13 @@ export default function MattrixwvCheckbox({
 	children
 }: Readonly<CheckboxProps>){
 	return (
+		<Field
+			className="flex flex-row items-center justify-center gap-x-2"
+		>
 			<Checkbox
-			id={id}
+				data-testid="mattrixwv-checkbox"
 				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,
@@ -36,10 +37,10 @@ export default function MattrixwvCheckbox({
 				onChange={onChange}
 				value={value}
 				disabled={disabled}
-			aria-labelledby={`${id}Label`}
 			>
 				{/* Checkbox */}
 				<div
+					data-testid="mattrixwv-checkbox-graphic"
 					className={clsx(
 						className,
 						{
@@ -68,16 +69,17 @@ export default function MattrixwvCheckbox({
 						/>
 					</svg>
 				</div>
+			</Checkbox>
 			{/* Label */}
 				{
 					children &&
-				<span
+					<Label
-					id={`${id}Label`}
+						data-testid="mattrixwv-checkbox-label"
 						className={labelClassName}
 					>
 						{children}
-				</span>
+					</Label>
 				}
-		</Checkbox>
+		</Field>
 	);
 }

lib/component/pill/DangerPill.tsx

@@ -0,0 +1,20 @@
+import type { PillProps } from "$/types/PillTypes";
+import clsx from "clsx";
+import Pill from "./Pill";
+
+
+export default function DangerPill({
+	className,
+	...props
+}: Readonly<PillProps>){
+	return (
+		<Pill
+			data-testid="mattrixwv-danger-pill"
+			className={clsx(
+				className,
+				"bg-danger text-white"
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/pill/DarkPill.tsx

@@ -0,0 +1,20 @@
+import type { PillProps } from "$/types/PillTypes";
+import clsx from "clsx";
+import Pill from "./Pill";
+
+
+export default function DarkPill({
+	className,
+	...props
+}: Readonly<PillProps>){
+	return (
+		<Pill
+			data-testid="mattrixwv-dark-pill"
+			className={clsx(
+				className,
+				"bg-dark text-white"
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/pill/InfoPill.tsx

@@ -0,0 +1,20 @@
+import type { PillProps } from "$/types/PillTypes";
+import clsx from "clsx";
+import Pill from "./Pill";
+
+
+export default function InfoPill({
+	className,
+	...props
+}: Readonly<PillProps>){
+	return (
+		<Pill
+			data-testid="mattrixwv-info-pill"
+			className={clsx(
+				className,
+				"bg-info text-black"
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/pill/LightPill.tsx

@@ -0,0 +1,20 @@
+import type { PillProps } from "$/types/PillTypes";
+import clsx from "clsx";
+import Pill from "./Pill";
+
+
+export default function LightPill({
+	className,
+	...props
+}: Readonly<PillProps>){
+	return (
+		<Pill
+			data-testid="mattrixwv-light-pill"
+			className={clsx(
+				className,
+				"bg-light text-black"
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/pill/MoltenPill.tsx

@@ -0,0 +1,20 @@
+import type { PillProps } from "$/types/PillTypes";
+import clsx from "clsx";
+import Pill from "./Pill";
+
+
+export default function MoltenPill({
+	className,
+	...props
+}: Readonly<PillProps>){
+	return (
+		<Pill
+			data-testid="mattrixwv-molten-pill"
+			className={clsx(
+				className,
+				"bg-molten text-black"
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/pill/Pill.tsx

@@ -0,0 +1,26 @@
+import type { PillProps } from "$/types/PillTypes";
+import clsx from "clsx";
+
+
+export default function Pill({
+	className,
+	rounding = "full",
+	...props
+}: Readonly<PillProps>){
+	return (
+		<div
+			data-testid="mattrixwv-pill"
+			className={clsx(
+				className,
+				"px-2 text-sm whitespace-nowrap",
+				{
+					"rounded-sm": rounding === "sm",
+					"rounded": rounding === "md",
+					"rounded-lg": rounding === "lg",
+					"rounded-full": rounding === "full"
+				}
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/pill/PrimaryPill.tsx

@@ -0,0 +1,20 @@
+import type { PillProps } from "$/types/PillTypes";
+import clsx from "clsx";
+import Pill from "./Pill";
+
+
+export default function PrimaryPill({
+	className,
+	...props
+}: Readonly<PillProps>){
+	return (
+		<Pill
+			data-testid="mattrixwv-primary-pill"
+			className={clsx(
+				className,
+				"bg-primary text-white"
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/pill/SecondaryPill.tsx

@@ -0,0 +1,20 @@
+import type { PillProps } from "$/types/PillTypes";
+import clsx from "clsx";
+import Pill from "./Pill";
+
+
+export default function SecondaryPill({
+	className,
+	...props
+}: Readonly<PillProps>){
+	return (
+		<Pill
+			data-testid="mattrixwv-secondary-pill"
+			className={clsx(
+				className,
+				"bg-secondary text-white"
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/pill/SuccessPill.tsx

@@ -0,0 +1,20 @@
+import type { PillProps } from "$/types/PillTypes";
+import clsx from "clsx";
+import Pill from "./Pill";
+
+
+export default function SuccessPill({
+	className,
+	...props
+}: Readonly<PillProps>){
+	return (
+		<Pill
+			data-testid="mattrixwv-success-pill"
+			className={clsx(
+				className,
+				"bg-success text-black"
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/pill/TertiaryPill.tsx

@@ -0,0 +1,20 @@
+import type { PillProps } from "$/types/PillTypes";
+import clsx from "clsx";
+import Pill from "./Pill";
+
+
+export default function TertiaryPill({
+	className,
+	...props
+}: Readonly<PillProps>){
+	return (
+		<Pill
+			data-testid="mattrixwv-tertiary-pill"
+			className={clsx(
+				className,
+				"bg-tertiary text-white"
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/pill/WarningPill.tsx

@@ -0,0 +1,20 @@
+import type { PillProps } from "$/types/PillTypes";
+import clsx from "clsx";
+import Pill from "./Pill";
+
+
+export default function WarningPill({
+	className,
+	...props
+}: Readonly<PillProps>){
+	return (
+		<Pill
+			data-testid="mattrixwv-warning-pill"
+			className={clsx(
+				className,
+				"bg-warning text-black"
+			)}
+			{...props}
+		/>
+	);
+}

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;

lib/types/PillTypes.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+
+
+export type PillRounding = "none" | "sm" | "md" | "lg" | "full";
+
+
+export interface PillProps extends ComponentProps<"div"> {
+	rounding?: PillRounding;
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "mattrixwv-components",
-	"version": "0.0.8",
+	"version": "0.0.9",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "mattrixwv-components",
-			"version": "0.0.8",
+			"version": "0.0.9",
 			"devDependencies": {
 				"@eslint/js": "^9.39.2",
 				"@tailwindcss/vite": "^4.1.18",

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mattrixwv-components",
 	"private": false,
-	"version": "0.0.8",
+	"version": "0.0.9",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
@@ -18,12 +18,14 @@
 		"versionMinor": "npm version minor",
 		"versionMajor": "npm version major"
 	},
+	"dependencies": {
+		"clsx": "^2.1.1",
+		"react-icons": "^5.5.0"
+	},
 	"peerDependencies": {
 		"@headlessui/react": "^2.2.9",
-		"clsx": "^2.1.1",
 		"react": "^19.2.3",
-		"react-dom": "^19.2.3",
+		"react-dom": "^19.2.3"
-		"react-icons": "^5.5.0"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.39.2",

src/main.tsx

@@ -18,7 +18,7 @@ declare module "@tanstack/react-router" {
 createRoot(document.getElementById('root')!).render(
 	<StrictMode>
 		<ThemeProvider defaultTheme="dark">
-			<ToasterProvider className="bg-zinc-700 text-white px-4 py-2 min-w-32 max-w-128 rounded-lg gap-y-4">
+			<ToasterProvider className="bg-zinc-700 text-white px-4 py-2 min-w-32 max-w-lg rounded-lg gap-y-4">
 				<RouterProvider router={router}/>
 			</ToasterProvider>
 		</ThemeProvider>

src/routeTree.gen.ts

@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as TabIndexRouteImport } from './routes/tab/index'
 import { Route as ProgressIndexRouteImport } from './routes/progress/index'
+import { Route as PillIndexRouteImport } from './routes/pill/index'
 import { Route as ModalIndexRouteImport } from './routes/modal/index'
 import { Route as MessageIndexRouteImport } from './routes/message/index'
 import { Route as LoadingIndexRouteImport } from './routes/loading/index'
@@ -33,6 +34,11 @@ const ProgressIndexRoute = ProgressIndexRouteImport.update({
   path: '/progress/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const PillIndexRoute = PillIndexRouteImport.update({
+  id: '/pill/',
+  path: '/pill/',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ModalIndexRoute = ModalIndexRouteImport.update({
   id: '/modal/',
   path: '/modal/',
@@ -66,6 +72,7 @@ export interface FileRoutesByFullPath {
   '/loading': typeof LoadingIndexRoute
   '/message': typeof MessageIndexRoute
   '/modal': typeof ModalIndexRoute
+  '/pill': typeof PillIndexRoute
   '/progress': typeof ProgressIndexRoute
   '/tab': typeof TabIndexRoute
 }
@@ -76,6 +83,7 @@ export interface FileRoutesByTo {
   '/loading': typeof LoadingIndexRoute
   '/message': typeof MessageIndexRoute
   '/modal': typeof ModalIndexRoute
+  '/pill': typeof PillIndexRoute
   '/progress': typeof ProgressIndexRoute
   '/tab': typeof TabIndexRoute
 }
@@ -87,6 +95,7 @@ export interface FileRoutesById {
   '/loading/': typeof LoadingIndexRoute
   '/message/': typeof MessageIndexRoute
   '/modal/': typeof ModalIndexRoute
+  '/pill/': typeof PillIndexRoute
   '/progress/': typeof ProgressIndexRoute
   '/tab/': typeof TabIndexRoute
 }
@@ -99,6 +108,7 @@ export interface FileRouteTypes {
     | '/loading'
     | '/message'
     | '/modal'
+    | '/pill'
     | '/progress'
     | '/tab'
   fileRoutesByTo: FileRoutesByTo
@@ -109,6 +119,7 @@ export interface FileRouteTypes {
     | '/loading'
     | '/message'
     | '/modal'
+    | '/pill'
     | '/progress'
     | '/tab'
   id:
@@ -119,6 +130,7 @@ export interface FileRouteTypes {
     | '/loading/'
     | '/message/'
     | '/modal/'
+    | '/pill/'
     | '/progress/'
     | '/tab/'
   fileRoutesById: FileRoutesById
@@ -130,6 +142,7 @@ export interface RootRouteChildren {
   LoadingIndexRoute: typeof LoadingIndexRoute
   MessageIndexRoute: typeof MessageIndexRoute
   ModalIndexRoute: typeof ModalIndexRoute
+  PillIndexRoute: typeof PillIndexRoute
   ProgressIndexRoute: typeof ProgressIndexRoute
   TabIndexRoute: typeof TabIndexRoute
 }
@@ -157,6 +170,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProgressIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/pill/': {
+      id: '/pill/'
+      path: '/pill'
+      fullPath: '/pill'
+      preLoaderRoute: typeof PillIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/modal/': {
       id: '/modal/'
       path: '/modal'
@@ -202,6 +222,7 @@ const rootRouteChildren: RootRouteChildren = {
   LoadingIndexRoute: LoadingIndexRoute,
   MessageIndexRoute: MessageIndexRoute,
   ModalIndexRoute: ModalIndexRoute,
+  PillIndexRoute: PillIndexRoute,
   ProgressIndexRoute: ProgressIndexRoute,
   TabIndexRoute: TabIndexRoute,
 }

src/routes/__root.tsx

@@ -11,6 +11,7 @@ const navLinks = [
 	{ to: "/loading", label: "Loading" },
 	{ to: "/message", label: "Message" },
 	{ to: "/modal", label: "Modal" },
+	{ to: "/pill", label: "Pill" },
 	{ to: "/progress", label: "Progress" },
 	{ to: "/tab", label: "Tab" }
 ];
@@ -20,7 +21,7 @@ export const Route = createRootRoute({
 	component: () => (
 		<>
 			<NavBar
-				className="bg-neutral-300 dark:bg-neutral-900 h-12"
+				className="bg-neutral-300 dark:bg-neutral-900 h-12 gap-x-4"
 			>
 				<div
 					className="flex flex-row items-center justify-end gap-x-4"

src/routes/message/index.tsx

@@ -1,13 +1,13 @@
 import { DangerMessageBlock, DarkMessageBlock, LightMessageBlock, PrimaryMessageBlock, SecondaryMessageBlock, SuccessMessageBlock, TertiaryMessageBlock, WarningMessageBlock } from '$/component/message';
-import InfoMessageBlock from '$/component/message/InfoMessageBlock';
+import InfoMessageBlock from "$/component/message/InfoMessageBlock";
-import MoltenMessageBlock from '$/component/message/MoltenMessageBlock';
+import MoltenMessageBlock from "$/component/message/MoltenMessageBlock";
-import { MattrixwvTabGroup } from '$/component/tab';
+import { MattrixwvTabGroup } from "$/component/tab";
-import type { MessageBlockProps } from '$/types/MessageTypes';
+import type { MessageBlockProps } from "$/types/MessageTypes";
-import type { TabGroupContent } from '$/types/TabTypes';
+import type { TabGroupContent } from "$/types/TabTypes";
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute } from "@tanstack/react-router";
 
 
-export const Route = createFileRoute('/message/')({
+export const Route = createFileRoute("/message/")({
 	component: MessagePage
 });
 

src/routes/pill/index.tsx

@@ -0,0 +1,56 @@
+import DangerPill from "$/component/pill/DangerPill";
+import DarkPill from "$/component/pill/DarkPill";
+import InfoPill from "$/component/pill/InfoPill";
+import LightPill from "$/component/pill/LightPill";
+import MoltenPill from "$/component/pill/MoltenPill";
+import PrimaryPill from "$/component/pill/PrimaryPill";
+import SecondaryPill from "$/component/pill/SecondaryPill";
+import SuccessPill from "$/component/pill/SuccessPill";
+import TertiaryPill from "$/component/pill/TertiaryPill";
+import WarningPill from "$/component/pill/WarningPill";
+import type { PillProps } from "$/types/PillTypes";
+import { createFileRoute } from "@tanstack/react-router";
+
+
+export const Route = createFileRoute("/pill/")({
+	component: PillPage
+});
+
+
+function PillPage(){
+	return (
+		<div className="flex flex-col items-center justify-center gap-y-8">
+			<PillLayout PillType={PrimaryPill} pillName="Primary"/>
+			<PillLayout PillType={SecondaryPill} pillName="Secondary"/>
+			<PillLayout PillType={TertiaryPill} pillName="Tertiary"/>
+			<PillLayout PillType={InfoPill} pillName="Info"/>
+			<PillLayout PillType={SuccessPill} pillName="Success"/>
+			<PillLayout PillType={WarningPill} pillName="Warning"/>
+			<PillLayout PillType={DangerPill} pillName="Danger"/>
+			<PillLayout PillType={MoltenPill} pillName="Molten"/>
+			<PillLayout PillType={DarkPill} pillName="Dark"/>
+			<PillLayout PillType={LightPill} pillName="Light"/>
+		</div>
+	);
+}
+
+function PillLayout({
+	PillType,
+	pillName
+}: Readonly<{
+	PillType: (props: PillProps) => React.ReactNode;
+	pillName: string;
+}>){
+	return (
+		<div className="flex flex-col items-center justify-center gap-y-2">
+			<h2 className="text-2xl">{pillName}</h2>
+			<div className="flex flex-row items-center justify-center gap-x-8">
+				<PillType rounding="none">None</PillType>
+				<PillType rounding="sm">Small</PillType>
+				<PillType rounding="md">Medium</PillType>
+				<PillType rounding="lg">Large</PillType>
+				<PillType rounding="full">Full</PillType>
+			</div>
+		</div>
+	);
+}

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");
+	});
+});

test/component/pill/DangerPill.test.tsx

@@ -0,0 +1,84 @@
+import DangerPill from "$/component/pill/DangerPill";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+const textContent = "Testing";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<DangerPill>{textContent}</DangerPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-danger-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-danger", "text-white");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});
+
+describe("Rounding", () => {
+	it("Renders with no rounding", () => {
+		render(<DangerPill rounding="none">{textContent}</DangerPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-danger-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-danger", "text-white");
+	});
+	it("Renders with small rounding", () => {
+		render(<DangerPill rounding="sm">{textContent}</DangerPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-danger-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-danger", "text-white");
+		expect(pillDiv).toHaveClass("rounded-sm");
+	});
+	it("Renders with medium rounding", () => {
+		render(<DangerPill rounding="md">{textContent}</DangerPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-danger-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-danger", "text-white");
+		expect(pillDiv).toHaveClass("rounded");
+	});
+	it("Renders with large rounding", () => {
+		render(<DangerPill rounding="lg">{textContent}</DangerPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-danger-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-danger", "text-white");
+		expect(pillDiv).toHaveClass("rounded-lg");
+	});
+	it("Renders with full rounding", () => {
+		render(<DangerPill rounding="full">{textContent}</DangerPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-danger-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-danger", "text-white");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});

test/component/pill/DarkPill.test.tsx

@@ -0,0 +1,84 @@
+import DarkPill from "$/component/pill/DarkPill";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+const textContent = "Testing";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<DarkPill>{textContent}</DarkPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-dark-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-dark", "text-white");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});
+
+describe("Rounding", () => {
+	it("Renders with no rounding", () => {
+		render(<DarkPill rounding="none">{textContent}</DarkPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-dark-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-dark", "text-white");
+	});
+	it("Renders with small rounding", () => {
+		render(<DarkPill rounding="sm">{textContent}</DarkPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-dark-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-dark", "text-white");
+		expect(pillDiv).toHaveClass("rounded-sm");
+	});
+	it("Renders with medium rounding", () => {
+		render(<DarkPill rounding="md">{textContent}</DarkPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-dark-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-dark", "text-white");
+		expect(pillDiv).toHaveClass("rounded");
+	});
+	it("Renders with large rounding", () => {
+		render(<DarkPill rounding="lg">{textContent}</DarkPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-dark-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-dark", "text-white");
+		expect(pillDiv).toHaveClass("rounded-lg");
+	});
+	it("Renders with full rounding", () => {
+		render(<DarkPill rounding="full">{textContent}</DarkPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-dark-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-dark", "text-white");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});

test/component/pill/InfoPill.test.tsx

@@ -0,0 +1,84 @@
+import InfoPill from "$/component/pill/InfoPill";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+const textContent = "Testing";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<InfoPill>{textContent}</InfoPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-info-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-info", "text-black");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});
+
+describe("Rounding", () => {
+	it("Renders with no rounding", () => {
+		render(<InfoPill rounding="none">{textContent}</InfoPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-info-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-info", "text-black");
+	});
+	it("Renders with small rounding", () => {
+		render(<InfoPill rounding="sm">{textContent}</InfoPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-info-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-info", "text-black");
+		expect(pillDiv).toHaveClass("rounded-sm");
+	});
+	it("Renders with medium rounding", () => {
+		render(<InfoPill rounding="md">{textContent}</InfoPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-info-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-info", "text-black");
+		expect(pillDiv).toHaveClass("rounded");
+	});
+	it("Renders with large rounding", () => {
+		render(<InfoPill rounding="lg">{textContent}</InfoPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-info-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-info", "text-black");
+		expect(pillDiv).toHaveClass("rounded-lg");
+	});
+	it("Renders with full rounding", () => {
+		render(<InfoPill rounding="full">{textContent}</InfoPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-info-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-info", "text-black");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});

test/component/pill/LightPill.test.tsx

@@ -0,0 +1,84 @@
+import LightPill from "$/component/pill/LightPill";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+const textContent = "Testing";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<LightPill>{textContent}</LightPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-light-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-light", "text-black");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});
+
+describe("Rounding", () => {
+	it("Renders with no rounding", () => {
+		render(<LightPill rounding="none">{textContent}</LightPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-light-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-light", "text-black");
+	});
+	it("Renders with small rounding", () => {
+		render(<LightPill rounding="sm">{textContent}</LightPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-light-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-light", "text-black");
+		expect(pillDiv).toHaveClass("rounded-sm");
+	});
+	it("Renders with medium rounding", () => {
+		render(<LightPill rounding="md">{textContent}</LightPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-light-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-light", "text-black");
+		expect(pillDiv).toHaveClass("rounded");
+	});
+	it("Renders with large rounding", () => {
+		render(<LightPill rounding="lg">{textContent}</LightPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-light-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-light", "text-black");
+		expect(pillDiv).toHaveClass("rounded-lg");
+	});
+	it("Renders with full rounding", () => {
+		render(<LightPill rounding="full">{textContent}</LightPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-light-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-light", "text-black");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});

test/component/pill/MoltenPill.test.tsx

@@ -0,0 +1,84 @@
+import MoltenPill from "$/component/pill/MoltenPill";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+const textContent = "Testing";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<MoltenPill>{textContent}</MoltenPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-molten-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-molten", "text-black");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});
+
+describe("Rounding", () => {
+	it("Renders with no rounding", () => {
+		render(<MoltenPill rounding="none">{textContent}</MoltenPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-molten-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-molten", "text-black");
+	});
+	it("Renders with small rounding", () => {
+		render(<MoltenPill rounding="sm">{textContent}</MoltenPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-molten-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-molten", "text-black");
+		expect(pillDiv).toHaveClass("rounded-sm");
+	});
+	it("Renders with medium rounding", () => {
+		render(<MoltenPill rounding="md">{textContent}</MoltenPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-molten-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-molten", "text-black");
+		expect(pillDiv).toHaveClass("rounded");
+	});
+	it("Renders with large rounding", () => {
+		render(<MoltenPill rounding="lg">{textContent}</MoltenPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-molten-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-molten", "text-black");
+		expect(pillDiv).toHaveClass("rounded-lg");
+	});
+	it("Renders with full rounding", () => {
+		render(<MoltenPill rounding="full">{textContent}</MoltenPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-molten-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-molten", "text-black");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});

test/component/pill/Pill.test.tsx

@@ -0,0 +1,78 @@
+import Pill from "$/component/pill/Pill";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+const textContent = "Testing";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<Pill>{textContent}</Pill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});
+
+describe("Rounding", () => {
+	it("Renders with no rounding", () => {
+		render(<Pill rounding="none">{textContent}</Pill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+	});
+	it("Renders with small rounding", () => {
+		render(<Pill rounding="sm">{textContent}</Pill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("rounded-sm");
+	});
+	it("Renders with medium rounding", () => {
+		render(<Pill rounding="md">{textContent}</Pill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("rounded");
+	});
+	it("Renders with large rounding", () => {
+		render(<Pill rounding="lg">{textContent}</Pill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("rounded-lg");
+	});
+	it("Renders with full rounding", () => {
+		render(<Pill rounding="full">{textContent}</Pill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});

test/component/pill/PrimaryPill.test.tsx

@@ -0,0 +1,84 @@
+import PrimaryPill from "$/component/pill/PrimaryPill";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+const textContent = "Testing";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<PrimaryPill>{textContent}</PrimaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-primary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-primary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});
+
+describe("Rounding", () => {
+	it("Renders with no rounding", () => {
+		render(<PrimaryPill rounding="none">{textContent}</PrimaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-primary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-primary", "text-white");
+	});
+	it("Renders with small rounding", () => {
+		render(<PrimaryPill rounding="sm">{textContent}</PrimaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-primary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-primary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-sm");
+	});
+	it("Renders with medium rounding", () => {
+		render(<PrimaryPill rounding="md">{textContent}</PrimaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-primary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-primary", "text-white");
+		expect(pillDiv).toHaveClass("rounded");
+	});
+	it("Renders with large rounding", () => {
+		render(<PrimaryPill rounding="lg">{textContent}</PrimaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-primary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-primary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-lg");
+	});
+	it("Renders with full rounding", () => {
+		render(<PrimaryPill rounding="full">{textContent}</PrimaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-primary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-primary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});

test/component/pill/SecondaryPill.test.tsx

@@ -0,0 +1,84 @@
+import SecondaryPill from "$/component/pill/SecondaryPill";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+const textContent = "Testing";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<SecondaryPill>{textContent}</SecondaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-secondary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-secondary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});
+
+describe("Rounding", () => {
+	it("Renders with no rounding", () => {
+		render(<SecondaryPill rounding="none">{textContent}</SecondaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-secondary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-secondary", "text-white");
+	});
+	it("Renders with small rounding", () => {
+		render(<SecondaryPill rounding="sm">{textContent}</SecondaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-secondary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-secondary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-sm");
+	});
+	it("Renders with medium rounding", () => {
+		render(<SecondaryPill rounding="md">{textContent}</SecondaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-secondary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-secondary", "text-white");
+		expect(pillDiv).toHaveClass("rounded");
+	});
+	it("Renders with large rounding", () => {
+		render(<SecondaryPill rounding="lg">{textContent}</SecondaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-secondary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-secondary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-lg");
+	});
+	it("Renders with full rounding", () => {
+		render(<SecondaryPill rounding="full">{textContent}</SecondaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-secondary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-secondary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});

test/component/pill/SuccessPill.test.tsx

@@ -0,0 +1,84 @@
+import SuccessPill from "$/component/pill/SuccessPill";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+const textContent = "Testing";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<SuccessPill>{textContent}</SuccessPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-success-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-success", "text-black");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});
+
+describe("Rounding", () => {
+	it("Renders with no rounding", () => {
+		render(<SuccessPill rounding="none">{textContent}</SuccessPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-success-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-success", "text-black");
+	});
+	it("Renders with small rounding", () => {
+		render(<SuccessPill rounding="sm">{textContent}</SuccessPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-success-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-success", "text-black");
+		expect(pillDiv).toHaveClass("rounded-sm");
+	});
+	it("Renders with medium rounding", () => {
+		render(<SuccessPill rounding="md">{textContent}</SuccessPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-success-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-success", "text-black");
+		expect(pillDiv).toHaveClass("rounded");
+	});
+	it("Renders with large rounding", () => {
+		render(<SuccessPill rounding="lg">{textContent}</SuccessPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-success-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-success", "text-black");
+		expect(pillDiv).toHaveClass("rounded-lg");
+	});
+	it("Renders with full rounding", () => {
+		render(<SuccessPill rounding="full">{textContent}</SuccessPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-success-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-success", "text-black");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});

test/component/pill/TertiaryPill.test.tsx

@@ -0,0 +1,84 @@
+import TertiaryPill from "$/component/pill/TertiaryPill";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+const textContent = "Testing";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<TertiaryPill>{textContent}</TertiaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-tertiary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});
+
+describe("Rounding", () => {
+	it("Renders with no rounding", () => {
+		render(<TertiaryPill rounding="none">{textContent}</TertiaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-tertiary", "text-white");
+	});
+	it("Renders with small rounding", () => {
+		render(<TertiaryPill rounding="sm">{textContent}</TertiaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-tertiary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-sm");
+	});
+	it("Renders with medium rounding", () => {
+		render(<TertiaryPill rounding="md">{textContent}</TertiaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-tertiary", "text-white");
+		expect(pillDiv).toHaveClass("rounded");
+	});
+	it("Renders with large rounding", () => {
+		render(<TertiaryPill rounding="lg">{textContent}</TertiaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-tertiary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-lg");
+	});
+	it("Renders with full rounding", () => {
+		render(<TertiaryPill rounding="full">{textContent}</TertiaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-tertiary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});

test/component/pill/WarningPill.test.tsx

@@ -0,0 +1,84 @@
+import WarningPill from "$/component/pill/WarningPill";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+const textContent = "Testing";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<WarningPill>{textContent}</WarningPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-warning-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-warning", "text-black");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});
+
+describe("Rounding", () => {
+	it("Renders with no rounding", () => {
+		render(<WarningPill rounding="none">{textContent}</WarningPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-warning-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-warning", "text-black");
+	});
+	it("Renders with small rounding", () => {
+		render(<WarningPill rounding="sm">{textContent}</WarningPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-warning-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-warning", "text-black");
+		expect(pillDiv).toHaveClass("rounded-sm");
+	});
+	it("Renders with medium rounding", () => {
+		render(<WarningPill rounding="md">{textContent}</WarningPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-warning-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-warning", "text-black");
+		expect(pillDiv).toHaveClass("rounded");
+	});
+	it("Renders with large rounding", () => {
+		render(<WarningPill rounding="lg">{textContent}</WarningPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-warning-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-warning", "text-black");
+		expect(pillDiv).toHaveClass("rounded-lg");
+	});
+	it("Renders with full rounding", () => {
+		render(<WarningPill rounding="full">{textContent}</WarningPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-warning-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-warning", "text-black");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});

vite.config.ts

@@ -83,6 +83,10 @@ export default defineConfig({
 	test: {
 		globals: true,
 		environment: "jsdom",
-		setupFiles: [ "test/vitest.setup.ts" ]
+		setupFiles: [ "test/vitest.setup.ts" ],
+		coverage: {
+			provider: "v8",
+			reporter: [ "html", "text", "lcov" ]
+		}
 	}
 });