Radio Button and Checkbox Created

lib/component/input/radio/DangerRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function DangerRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-red-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/DarkRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function DarkRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-black",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/InfoRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function InfoRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-cyan-500",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/LightRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function LightRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-white",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/MoltenRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function MoltenRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-orange-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/PrimaryRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function PrimaryRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-blue-500",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/RadioButton.tsx

@@ -0,0 +1,44 @@
+import type { RadioButtonProps } from "$/types/Input";
+import { Radio } from "@headlessui/react";
+import clsx from "clsx";
+
+
+export default function RadioButton({
+	id,
+	className,
+	labelClassName,
+	size = "sm",
+	value,
+	children
+}: RadioButtonProps){
+	return (
+		<Radio
+			id={id}
+			value={value}
+			className="group flex flex-row items-center justify-center gap-x-2 cursor-pointer"
+		>
+			<div
+				className={clsx(
+					"rounded-full not-group-data-checked:border",
+					className,
+					{
+						"": size === "none",
+						"size-3": size === "xs",
+						"size-4": size === "sm",
+						"size-5": size === "md",
+						"size-6": size === "lg",
+						"size-7": size === "xl"
+					}
+				)}
+			/>
+			{
+				children &&
+				<div
+					className={labelClassName}
+				>
+					{children}
+				</div>
+			}
+		</Radio>
+	);
+}

lib/component/input/radio/RadioList.tsx

@@ -0,0 +1,35 @@
+import type { RadioListProps } from "$/types/Input";
+import { RadioGroup } from "@headlessui/react";
+import clsx from "clsx";
+
+
+export default function RadioList({
+	id,
+	className,
+	name,
+	value,
+	onChange,
+	defaultValue,
+	direction = "horizontal",
+	children
+}: RadioListProps){
+	return (
+		<RadioGroup
+			id={id}
+			className={clsx(
+				"flex items-center justify-center",
+				className,
+				{
+					"flex-row gap-x-8": direction === "horizontal",
+					"flex-col gap-y-2": direction === "vertical"
+				}
+			)}
+			name={name}
+			value={value}
+			onChange={onChange}
+			defaultValue={defaultValue}
+		>
+			{children}
+		</RadioGroup>
+	);
+}

lib/component/input/radio/SecondaryRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function SecondaryRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-neutral-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/SuccessRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function SuccessRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-green-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/TertiaryRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function TertiaryRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-purple-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/WarningRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/Input";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function WarningRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-yellow-500",
+				className
+			)}
+			{...props}
+		/>
+	);
+}