chore: fix aria label warnings

app/components/Switch.tsx

@@ -1,34 +1,61 @@
-import { Switch as AriaSwitch } from 'react-aria-components';
+import { useRef } from 'react';
+import {
+	AriaSwitchProps,
+	VisuallyHidden,
+	useFocusRing,
+	useSwitch,
+} from 'react-aria';
+import { useToggleState } from 'react-stately';
 import cn from '~/utils/cn';
 
-type SwitchProps = Parameters<typeof AriaSwitch>[0] & {
-	readonly label: string;
-};
+export interface SwitchProps extends AriaSwitchProps {
+	label: string;
+	className?: string;
+}
 
 export default function Switch(props: SwitchProps) {
+	const state = useToggleState(props);
+	const ref = useRef<HTMLInputElement | null>(null);
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const { inputProps } = useSwitch(
+		{
+			...props,
+			'aria-label': props.label,
+		},
+		state,
+		ref,
+	);
+
 	return (
-		<AriaSwitch
-			{...props}
-			aria-label={props.label}
-			className="group flex gap-2 items-center"
-		>
+		<label className="flex items-center gap-x-2">
+			<VisuallyHidden elementType="span">
+				<input
+					{...inputProps}
+					{...focusProps}
+					aria-label={props.label}
+					ref={ref}
+				/>
+			</VisuallyHidden>
 			<div
+				aria-hidden
 				className={cn(
-					'flex h-[26px] w-[44px] p-[4px] shrink-0',
-					'rounded-full outline-none group-focus-visible:ring-2',
-					'bg-main-600/50 dark:bg-main-600/20 group-selected:bg-main-700',
-					props.isDisabled && 'opacity-50 cursor-not-allowed',
-					props.className,
+					'flex h-[28px] w-[46px] p-[4px] shrink-0 rounded-full',
+					'bg-headplane-300 dark:bg-headplane-700',
+					'border border-transparent dark:border-headplane-800',
+					state.isSelected && 'bg-headplane-900 dark:bg-headplane-950',
+					isFocusVisible && 'ring-2',
+					props.isDisabled && 'opacity-50',
 				)}
 			>
 				<span
 					className={cn(
 						'h-[18px] w-[18px] transform rounded-full',
-						'bg-white transition duration-100 ease-in-out',
+						'bg-white transition duration-50 ease-in-out',
 						'translate-x-0 group-selected:translate-x-[100%]',
+						state.isSelected && 'translate-x-[100%]',
 					)}
 				/>
 			</div>
-		</AriaSwitch>
+		</label>
 	);
 }