main commit

2026-06-21 11:27:44 +02:00
commit f45e5197a4
44 changed files with 4511 additions and 0 deletions
@@ -0,0 +1,59 @@
+import { NotDerivate, useBox } from "@common/shared/utils/ui/vide";
+import { Atom } from "@rbxts/charm";
+import Vide, { Derivable, source } from "@rbxts/vide";
+
+/**
+ * Props of a toggle.
+ */
+interface ToggleProps {
+    /**
+     * A charm atom linked to the toggle.
+     */
+    Atom?: Atom<boolean>;
+    /**
+     * The position of the toggle in roblox ui.
+     */
+    Position?: Derivable<UDim2>;
+    /**
+     * The size of the toggle
+     */
+    Size?: Derivable<UDim2>;
+}
+
+/**
+ * A toggle is a UI component linked to an boolean.
+ * @param props Props of the toggle.
+ * @returns A Vide node with the toggle.
+ */
+export function Toggle(props: ToggleProps = {}) {
+    const [enable, setEnable] = useBox(props.Atom, false);
+    const sphereSize = source(0);
+    return (
+        <imagebutton
+            BackgroundColor3={new Color3(1, 1, 1)}
+            MouseButton1Click={() => setEnable(!enable())}
+            Position={props?.Position}
+            Size={props?.Size ?? UDim2.fromOffset(90, 30)}
+        >
+            <uicorner CornerRadius={new UDim(1, 0)} />
+            <uiaspectratioconstraint AspectRatio={1.8} />
+            <frame
+                BackgroundColor3={new Color3(0.5, 0.5, 0.5)}
+                Position={new UDim2(0, 2, 0, 2)}
+                Size={new UDim2(1, -4, 1, -4)}
+                Visible={NotDerivate(enable)}
+            >
+                <uicorner CornerRadius={new UDim(1, 0)} />
+            </frame>
+            <frame
+                AbsoluteSizeChanged={(value) => sphereSize(value.X)}
+                BackgroundColor3={new Color3(0, 0, 0)}
+                Position={() => (enable() ? new UDim2(1, -sphereSize() - 2, 0, 2) : new UDim2(0, 2, 0, 2))}
+                Size={new UDim2(1, -4, 1, -4)}
+            >
+                <uicorner CornerRadius={new UDim(1, 0)} />
+                <uiaspectratioconstraint AspectRatio={1} />
+            </frame>
+        </imagebutton>
+    );
+}