Updates

2026-10-01 08:02:47 +01:00
parent 6392457ffb
commit 3dc9f12ad4
104 changed files with 6536 additions and 1037 deletions
@@ -1,16 +1,21 @@
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import {
+    type DetailedHTMLProps,
+    type HTMLAttributes,
+    useEffect,
+    useState,
+} from "react";
 import { twMerge } from "tailwind-merge";

 export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
 > & {
-    active?: boolean;
-    setActive?: React.Dispatch<React.SetStateAction<boolean | undefined>>;
    circleProps?: DetailedHTMLProps<
        HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >;
+    default_active?: boolean;
+    changeHandler?: (checked: boolean) => void;
 };

 /**
@@ -20,10 +25,24 @@ export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
 */
 export default function Toggle({
    circleProps,
-    active,
-    setActive,
+    default_active,
+    changeHandler,
    ...props
 }: TWUI_TOGGLE_PROPS) {
+    const [active, setActive] = useState(default_active || false);
+    const [ready, setReady] = useState(false);
+
+    useEffect(() => {
+        if (!ready) return;
+        changeHandler?.(active);
+    }, [active]);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setReady(true);
+        }, 200);
+    }, []);
+
    return (
        <div
            {...props}
@@ -32,9 +51,11 @@ export default function Toggle({
                "border border-slate-300 dark:border-white/30 border-solid rounded-full",
                active ? "justify-end" : "justify-start",
                "twui-toggle-wrapper",
-                props.className
+                props.className,
            )}
-            onClick={() => setActive?.(!active)}
+            onClick={() => {
+                setActive(!active);
+            }}
        >
            {typeof active == "undefined" ? (
                <div className="w-3.5 h-3.5 twui-toggle-circle"></div>
@@ -47,7 +68,7 @@ export default function Toggle({
                            ? "bg-blue-600 dark:bg-blue-500"
                            : "bg-slate-300 dark:bg-white/40",
                        "twui-toggle-circle",
-                        circleProps?.className
+                        circleProps?.className,
                    )}
                ></div>
            )}