@edu-tosel/design 1.0.310 → 1.0.312

package/layout/template/Event/One.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { useRef, useLayoutEffect } from "react";
 import { cn, isHTMLString } from "../../../util";
 import BannerMolecule from "./molecule/Banner";
 import gsap from "gsap";
@@ -20,7 +20,7 @@ export default function One({ event, button }) {
         sizes: "w-full xl:max-w-[796px]",
         spacing: "gap-y-8 ",
     };
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (!isMD)
             return;
         const ctx = gsap.context(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.310",
+  "version": "1.0.312",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.310
+1.0.312

package/widget/template/Select/Toggle.js

@@ -6,17 +6,21 @@ export default function SelectToggle({ state, selectOptions: selectOptionsInput,
     const [value, setValue] = state;
     const isOff = value === selectOptions[0].value;
     const container = {
-        positions: "relative",
         displays: "flex items-center",
-        sizes: "w-10 h-4.5",
+        sizes: "w-10 h-fit",
         backgrounds: isOff ? "bg-crimson-burgundy" : "bg-green-dark",
         boundaries: "rounded-full p-0.5",
+        animations: "duration-300",
     };
-    const controller = {
+    const knobWrapper = {
+        displays: "relative",
+        sizes: "w-full h-4",
+    };
+    const knob = {
         positions: "absolute",
-        locations: isOff ? "left-0.5" : "left-[calc(100%-1rem)]",
-        sizes: "w-[14px] h-[14px]",
-        backgrounds: "bg-white",
+        locations: isOff ? "left-0" : "left-[calc(100%-1rem)]",
+        sizes: "size-4",
+        backgrounds: "bg-white shadow-main",
         boundaries: "rounded-full",
         animations: "duration-200",
     };
@@ -26,5 +30,5 @@ export default function SelectToggle({ state, selectOptions: selectOptionsInput,
         return setValue(selectOptions[0].value);
     };
     const selectedTitle = selectOptions?.find((option) => option.value === value)?.title;
-    return (_jsxs("div", { className: "flex items-center gap-x-1.5 ", children: [selectedTitle && option?.isText && (_jsx("div", { className: "text-sm leading-none", children: selectedTitle })), _jsx("button", { onClick: toggle, className: cn(container), children: _jsx("div", { className: cn(controller) }) })] }));
+    return (_jsxs("div", { className: "flex items-center gap-x-1.5 ", children: [selectedTitle && option?.isText && (_jsx("div", { className: "text-sm leading-none", children: selectedTitle })), _jsx("button", { onClick: toggle, className: cn(container), children: _jsx("div", { className: cn(knobWrapper), children: _jsx("div", { className: cn(knob) }) }) })] }));
 }