Created switches

lib/component/input/switch/MattrixwvSwitch.tsx

@@ -0,0 +1,108 @@
+import type { MattrixwvSwitchProps } from "$/types/Input";
+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>
+	);
+}