MattrixwvReactComponents/lib/component/input/checkbox/MattrixwvCheckbox.tsx

import type { CheckboxProps } from "$/types/InputTypes";
import { Checkbox } from "@headlessui/react";
import clsx from "clsx";


export default function MattrixwvCheckbox({
	id,
	className,
	labelClassName,
	name,
	size = "sm",
	box = true,
	onChange,
	checked,
	defaultChecked,
	strokeWidth = 2,
	value,
	children
}: CheckboxProps){
	return (
		<Checkbox
			id={id}
			className={clsx(
				"group cursor-pointer",
				"flex flex-row items-center justify-center gap-x-2"
			)}
			name={name}
			checked={checked}
			defaultChecked={defaultChecked}
			onChange={onChange}
			value={value}
		>
			<div
				className={clsx(
					className,
					{
						"rounded border": box
					},
					{
						"": size === "none",
						"size-3": size === "xs",
						"size-4": size === "sm",
						"size-5": size === "md",
						"size-6": size === "lg",
						"size-7": size === "xl"
					}
				)}
			>
				<svg
					viewBox="0 0 14 14"
					fill="none"
				>
					<path
						d="M3 8L6 11L11 3.5"
						strokeWidth={strokeWidth}
						strokeLinecap="round"
						strokeLinejoin="round"
					/>
				</svg>
			</div>
			{
				children &&
				<div
					className={labelClassName}
				>
					{children}
				</div>
			}
		</Checkbox>
	);
}