Update themed components with refs and css

lib/component/input/switch/MattrixwvSwitch.tsx

@@ -1,10 +1,11 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import { Field, Label, Switch } from "@headlessui/react";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import { Fragment } from "react/jsx-runtime";
 
 
-export default function MattrixwvSwitch({
+const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	id,
 	className,
 	knobClassName,
@@ -19,7 +20,7 @@ export default function MattrixwvSwitch({
 	children,
 	offText,
 	onText
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<Field as={Fragment}>
 			<Switch
@@ -53,6 +54,7 @@ export default function MattrixwvSwitch({
 				checked={checked}
 				onChange={onChange}
 				disabled={disabled}
+				ref={ref}
 			>
 				{
 					offText &&
@@ -105,4 +107,8 @@ export default function MattrixwvSwitch({
 			</Label>
 		</Field>
 	);
-}
+});
+
+MattrixwvSwitch.displayName = "MattrixwvSwitch";
+
+export default MattrixwvSwitch;