MattrixwvReactComponents/lib/component/input/switch/MattrixwvSwitch.tsx

import type { MattrixwvSwitchProps } from "$/types/InputTypes";
import { Field, Label, Switch } from "@headlessui/react";
import clsx from "clsx";
import { Fragment } from "react/jsx-runtime";


export default function MattrixwvSwitch({
	id,
	className,
	knobClassName,
	size = "sm",
	wide,
	name,
	value,
	defaultChecked,
	checked,
	onChange,
	disabled,
	children,
	offText,
	onText
}: MattrixwvSwitchProps){
	return (
		<Field as={Fragment}>
			<Switch
				id={id}
				className={clsx(
					"relative group inline-flex items-center rounded-full transition",
					className,
					{
						"cursor-pointer": !disabled,
						"cursor-default": disabled
					},
					{
						//Normal
						"h-4 w-7": size === "xs" && !wide,
						"h-5 w-9": size === "sm" && !wide,
						"h-6 w-11": size === "md" && !wide,
						"h-7 w-13": size === "lg" && !wide,
						"h-8 w-15": size === "xl" && !wide,

						//Wide
						"h-4 w-9": size === "xs" && wide,
						"h-5 w-11": size === "sm" && wide,
						"h-6 w-13": size === "md" && wide,
						"h-7 w-15": size === "lg" && wide,
						"h-8 w-17": size === "xl" && wide
					}
				)}
				name={name}
				value={value}
				defaultChecked={defaultChecked}
				checked={checked}
				onChange={onChange}
				disabled={disabled}
			>
				{
					offText &&
					<span className="block group-data-checked:hidden absolute right-2">{offText}</span>
				}
				{
					onText &&
					<span className="hidden group-data-checked:block absolute left-2">{onText}</span>
				}
				<span
					className={clsx(
						"rounded-full transition",
						knobClassName,
						//Size
						{
							"size-2": size === "xs",
							"size-3": size === "sm",
							"size-4": size === "md",
							"size-5": size === "lg",
							"size-6": size === "xl"
						},
						//Transitions
						{
							//Normal
							"translate-x-1 group-data-checked:translate-x-4": size === "xs" && !wide,
							"translate-x-1 group-data-checked:translate-x-5": size === "sm" && !wide,
							"translate-x-1 group-data-checked:translate-x-6": size === "md" && !wide,
							"translate-x-1 group-data-checked:translate-x-7": size === "lg" && !wide,
							"translate-x-1 group-data-checked:translate-x-8": size === "xl" && !wide,

							//Wide
							"translate-x-1 group-data-checked:translate-x-6 ": size === "xs" && wide,
							"translate-x-1 group-data-checked:translate-x-7 ": size === "sm" && wide,
							"translate-x-1 group-data-checked:translate-x-8 ": size === "md" && wide,
							"translate-x-1 group-data-checked:translate-x-9 ": size === "lg" && wide,
							"translate-x-1 group-data-checked:translate-x-10 ": size === "xl" && wide
						}
					)}
				/>
			</Switch>
			<Label
				className={clsx(
					{
						"cursor-pointer": !disabled,
						"cursor-default": disabled
					}
				)}
			>
				{children}
			</Label>
		</Field>
	);
}