feat: toggle disabled state

src/components/Toggle.tsx

 import { Dispatch, SetStateAction } from "react";
 import { Switch } from "@nextui-org/react";
+import { disabledCursor } from "./utils/classes.ts";
 
 type ToggleProps = {
+  isDisabled?: boolean;
   isSelected: boolean;
-  setIsSelected: Dispatch<SetStateAction<boolean>>;
+  setIsSelected?: Dispatch<SetStateAction<boolean>>;
   label?: string;
 };
 
-const Toggle = ({ isSelected, setIsSelected, label }: ToggleProps) => {
+const Toggle = ({
+  isDisabled = false,
+  isSelected,
+  setIsSelected,
+  label,
+}: ToggleProps) => {
   const selectedClass = isSelected
     ? "group-data-[selected=true]:ml-0 bg-primary"
     : "ml-[11px] bg-grey";
   return (
     <Switch
+      isDisabled={isDisabled}
       // Does not support "isRequired": https://github.com/nextui-org/nextui/issues/1610
       isSelected={isSelected}
       onValueChange={setIsSelected}
       color="default"
       classNames={{
+        base: disabledCursor(isDisabled),
         thumb: `h-[14px] w-[14px] ${selectedClass}`,
         wrapper:
           "h-[8px] w-[25px] p-0 overflow-visible bg-lightGrey dark:bg-mediumGrey",

src/components/utils/classes.ts

 export const disabledCursor = (isDisabled: boolean) => {
   if (!isDisabled) return "";
-  return "pointer-events-auto cursor-not-allowed opacity-100";
+  return "pointer-events-auto cursor-not-allowed opacity-50";
 };
 
 export const disabledBg = (isDisabled: boolean) => {

src/stories/Toggle.stories.tsx

@@ -19,3 +19,12 @@ export const SimpleToggle = () => {
     />
   );
 };
+
+export const DisabledToggle = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Toggle isDisabled={true} isSelected={true} label="I'm always right!" />
+      <Toggle isDisabled={true} isSelected={false} label="I'm always left!" />
+    </div>
+  );
+};