fix(toggleswitch): disable + checked state and deprecated html event replacement

app/docs/components/forms/forms.mdx

@@ -456,6 +456,7 @@ Use the `<ToggleSwitch>` component to ask users to enable or disable an option s
     <ToggleSwitch checked={props.switch1} label="Toggle me" onChange={props.setSwitch1} />
     <ToggleSwitch checked={props.switch2} label="Toggle me (checked)" onChange={props.setSwitch2} />
     <ToggleSwitch checked={false} disabled label="Toggle me (disabled)" onChange={() => undefined} />
+    <ToggleSwitch checked={true} disabled label="Toggle me (disabled)" onChange={() => undefined} />
     <ToggleSwitch checked={props.switch3} onChange={props.setSwitch3} />
   </div>
 </CodePreview>

src/components/ToggleSwitch/ToggleSwitch.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps, FC, KeyboardEvent, MouseEvent } from 'react';
+import type { ComponentProps, FC, KeyboardEvent } from 'react';
 import { useId } from 'react';
 import { twMerge } from 'tailwind-merge';
 import type { DeepPartial, FlowbiteBoolean, FlowbiteColors } from '../../';
@@ -47,13 +47,14 @@
 
   const toggle = (): void => onChange(!checked);
 
-  const handleClick = (event: MouseEvent<HTMLButtonElement>): void => {
-    event.preventDefault();
+  const handleClick = (): void => {
     toggle();
   };
 
-  const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>): void => {
-    event.preventDefault();
+  const handleOnKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {
+    if (event.code == 'Enter') {
+      event.preventDefault();
+    }
   };
 
   return (
@@ -67,7 +68,7 @@
         disabled={disabled}
         id={`${id}-flowbite-toggleswitch`}
         onClick={handleClick}
-        onKeyPress={handleKeyPress}
+        onKeyDown={handleOnKeyDown}
         role="switch"
         tabIndex={0}
         type="button"
@@ -79,7 +80,7 @@
           className={twMerge(
             theme.toggle.base,
             theme.toggle.checked[checked ? 'on' : 'off'],
-            !disabled && checked && theme.toggle.checked.color[color],
+            checked && theme.toggle.checked.color[color],
           )}
         />
         {label?.length ? (
@@ -90,7 +91,7 @@
           >
             {label}
           </span>
         ) : null}
       </button>
     </>
   );