Update themed components with refs and css

lib/component/input/switch/ButtonSwitch.tsx

@@ -1,8 +1,9 @@
 import type { MattrixwvButtonSwitchProps } from "$/types/InputTypes";
 import { Switch } from "@headlessui/react";
+import { forwardRef } from "react";
 
 
-export default function ButtonSwitch({
+const ButtonSwitch = forwardRef<HTMLButtonElement, MattrixwvButtonSwitchProps>(({
 	id,
 	className,
 	name,
@@ -13,7 +14,7 @@ export default function ButtonSwitch({
 	disabled,
 	onNode,
 	offNode
-}: MattrixwvButtonSwitchProps){
+}, ref ) => {
 	return (
 		<Switch
 			id={id}
@@ -24,6 +25,7 @@ export default function ButtonSwitch({
 			checked={checked}
 			onChange={onChange}
 			disabled={disabled}
+			ref={ref}
 		>
 			{({ checked }) => (
 				<>
@@ -32,4 +34,8 @@ export default function ButtonSwitch({
 			)}
 		</Switch>
 	);
-}
+});
+
+ButtonSwitch.displayName = "ButtonSwitch";
+
+export default ButtonSwitch;