Add pill component

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/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;
+}