Updates

components/elements/Toggle.tsx

@@ -6,7 +6,7 @@ export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
     HTMLDivElement
 > & {
     active?: boolean;
-    setActive?: React.Dispatch<React.SetStateAction<boolean>>;
+    setActive?: React.Dispatch<React.SetStateAction<boolean | undefined>>;
     circleProps?: DetailedHTMLProps<
         HTMLAttributes<HTMLDivElement>,
         HTMLDivElement
@@ -36,17 +36,21 @@ export default function Toggle({
             )}
             onClick={() => setActive?.(!active)}
         >
-            <div
-                {...circleProps}
-                className={twMerge(
-                    "w-3.5 h-3.5 rounded-full ",
-                    active
-                        ? "bg-blue-600 dark:bg-blue-500"
-                        : "bg-slate-300 dark:bg-white/40",
-                    "twui-toggle-circle",
-                    circleProps?.className
-                )}
-            ></div>
+            {typeof active == "undefined" ? (
+                <div className="w-3.5 h-3.5 twui-toggle-circle"></div>
+            ) : (
+                <div
+                    {...circleProps}
+                    className={twMerge(
+                        "w-3.5 h-3.5 rounded-full ",
+                        active
+                            ? "bg-blue-600 dark:bg-blue-500"
+                            : "bg-slate-300 dark:bg-white/40",
+                        "twui-toggle-circle",
+                        circleProps?.className
+                    )}
+                ></div>
+            )}
         </div>
     );
 }