@edu-tosel/design 1.0.289 → 1.0.291

package/layout/template/home/layout/Carousel.d.ts

@@ -1,4 +1,9 @@
 import { CarouselContent } from "../../../../interface";
-export default function Carousel({ contents, }: {
+interface CarouselOption {
+    isStatic?: boolean;
+}
+export default function Carousel({ contents, option, }: {
     contents: CarouselContent[];
+    option?: CarouselOption;
 }): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/home/layout/Carousel.js

@@ -7,15 +7,14 @@ import { LineBreaks } from "../../../../text";
 import SVG from "../../../../asset/SVG";
 import { tagString } from "../../../../interface/domain";
 import useResponsive from "../../../../hook/useResponsive";
-export default function Carousel({ contents, }) {
+export default function Carousel({ contents, option, }) {
     const [index, setIndex] = useState(0);
     const [flag, inTime] = useEase(10000, 1000);
     const [loaded, setLoaded] = useState(false);
     const isMD = useResponsive("md");
     const isXL = useResponsive("xl");
     const intervalRef = useRef(null);
-    const { tag, titles, image, option } = contents[index];
-    const { text, background } = option ?? {};
+    const { tag, titles, image } = contents[index];
     // Transition animation using react-spring
     const transitionStyles = useSpring({
         opacity: loaded ? 1 : 0,
@@ -36,7 +35,9 @@ export default function Carousel({ contents, }) {
         }, 3000);
     }, [contents.length]);
     useEffect(() => {
-        resetTimer(); // timerstarts after mounting component
+        if (!option?.isStatic) {
+            resetTimer(); // timerstarts after mounting component
+        }
         return () => {
             // clear timer after unmounting component
             if (intervalRef.current) {
@@ -59,7 +60,7 @@ export default function Carousel({ contents, }) {
         displays: "relative flex justify-center items-center",
         sizes: "w-full h-fit md:h-80 ml:h-100",
         textstyle: "break-keep",
-        background,
+        background: contents[index].option?.background,
         animations: "duration-300",
     };
     const titleWrapper = {
@@ -81,7 +82,7 @@ export default function Carousel({ contents, }) {
     const body = {
         displays: "flex flex-none flex-col items-center justify-center md:flex-row",
         sizes: "w-full max-w-256 h-full",
-        text: text ?? "text-gray-dark",
+        text: contents[index].option?.text ?? "text-gray-dark",
         animations: "duration-500",
     };
     const tagBox = {

package/package.json

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

package/slidemodal/index.d.ts

@@ -0,0 +1 @@
+export { default as SlideModal } from "./template";

package/slidemodal/index.js

@@ -0,0 +1 @@
+export { default as SlideModal } from "./template";

package/slidemodal/template/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ModalProps } from "../../interface";
+type Theme = "green" | "red" | "blue";
+interface Props extends ModalProps {
+    children: React.ReactNode;
+    theme: Theme;
+}
+declare function SlideModal({ titles, children, theme, option, showAction }: Props): "" | import("react/jsx-runtime").JSX.Element | undefined;
+export default SlideModal;

package/slidemodal/template/index.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { useActionStore } from "../../store";
+function SlideModal({ titles, children, theme, option, showAction }) {
+    const { removeModal } = useActionStore();
+    const { isVisible, event } = showAction ?? {};
+    const { buttons: btns } = option ?? {};
+    const container = {
+        positions: "fixed inset-0 z-100",
+        displays: "flex flex-col justify-center items-center",
+        backgrounds: "bg-black/20 backdrop-blur-sm duration-300",
+        animation: isVisible
+            ? "opacity-100 pointer-events-auto"
+            : "opacity-0 pointer-events-none",
+    };
+    const boxPositionWrapper = {
+        displays: "flex flex-col justify-end items-center",
+        sizes: "w-full h-full",
+    };
+    const tagWrapper = {
+        displays: "flex flex-col rounded-tl-lg rounded-tr-lg bg-white",
+        sizes: "w-full h-fit max-w-120",
+        spacings: "p-5 gap-5",
+        position: isVisible ? "translate-y-0" : "translate-y-full",
+        animation: "duration-300",
+        pointer: "pointer-events-auto",
+    };
+    const titleWrapper = {
+        displays: "flex flex-col gap-2",
+        sizes: "w-full",
+    };
+    const titleText = {
+        sizes: "w-full",
+        textStyles: "font-bold text-lg leading-none",
+        colors: "text-gray-dark",
+    };
+    const subtitleText = {
+        sizes: "w-full",
+        textStyles: "font-medium text-sm leading-none",
+        colors: "text-gray-medium",
+    };
+    const themeColors = {
+        green: "green-dark",
+        blue: "blue-navy",
+        red: "crimson-dark",
+    };
+    const buttonStyles = (btn) => !btn.disabled
+        ? cn("flex justify-center items-center w-full h-fit rounded-lg p-3", `${btn.option?.background}`, `${btn.option?.className}`)
+        : "flex justify-center items-center w-full h-fit rounded-lg p-3 bg-gray-light text-gray-dark cursor-not-allowed";
+    return (event && (_jsx("div", { className: cn(container), onClick: () => removeModal(event), children: _jsx("div", { className: cn(boxPositionWrapper), children: _jsxs("div", { className: cn(tagWrapper), onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "w-full flex justify-between items-start", children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleText), children: titles.title }), _jsx("div", { className: cn(subtitleText), children: titles.subtitle })] }), _jsx("div", { className: "size-6 flex justify-center items-center cursor-pointer", onClick: () => removeModal(event), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-6", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18 18 6M6 6l12 12" }) }) })] }), _jsx("div", { className: "w-full flex flex-wrap max-h-100 overflow-scroll", children: children }), btns && (_jsx("div", { className: "w-full flex justify-center gap-2 cursor-pointer flex-col sm:flex-row", children: btns.map((btn, index) => btn ? (_jsx("div", { className: cn(buttonStyles(btn), btns.length === 1 ? "w-full" : "w-1/2 sm:w-full"), onClick: !btn.disabled ? btn.onClick : undefined, children: btn.title }, index)) : null) }))] }) }) })));
+}
+export default SlideModal;

package/version.txt

@@ -1 +1 @@
-1.0.289
+1.0.291

package/modalV2/index.d.ts

@@ -1 +0,0 @@
-export { default as ModalV2 } from "./template";

package/modalV2/index.js

@@ -1 +0,0 @@
-export { default as ModalV2 } from "./template";

package/modalV2/template/index.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-interface Button {
-    active: boolean;
-    type: ButtonType;
-    options?: {
-        title: string;
-        onClick: () => void;
-    };
-}
-type Theme = "green" | "red" | "blue";
-type ButtonType = "main" | "sub";
-declare function ModalV2({ titles, openState, contents, theme, btns, }: {
-    titles: {
-        title: string;
-        subtitle: string;
-    };
-    openState: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
-    contents: React.ReactNode;
-    theme: Theme;
-    btns?: Button[];
-}): import("react/jsx-runtime").JSX.Element;
-export default ModalV2;

package/modalV2/template/index.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../util";
-function ModalV2({ titles, openState, contents, theme, btns, }) {
-    const [isOpen, setIsOpen] = openState;
-    const container = {
-        positions: "fixed inset-0 z-100",
-        displays: "flex flex-col justify-center items-center",
-        backgrounds: "bg-black/20 backdrop-blur-sm duration-300",
-        animation: isOpen
-            ? "opacity-100 pointer-events-auto"
-            : "opacity-0 pointer-events-none",
-    };
-    const boxPositionWrapper = {
-        displays: "flex flex-col justify-end items-center",
-        sizes: "w-full h-full",
-    };
-    const tagWrapper = {
-        displays: "flex flex-col rounded-tl-lg rounded-tr-lg bg-white",
-        sizes: "w-full h-fit max-w-120",
-        spacings: "p-5 gap-5",
-        position: isOpen ? "translate-y-0" : "translate-y-full",
-        animation: "duration-300",
-        pointer: "pointer-events-auto",
-    };
-    const titleWrapper = {
-        displays: "flex flex-col gap-2",
-        sizes: "w-full",
-    };
-    const titleText = {
-        sizes: "w-full",
-        textStyles: "font-bold text-lg leading-none",
-        colors: "text-gray-dark",
-    };
-    const subtitleText = {
-        sizes: "w-full",
-        textStyles: "font-medium text-sm leading-none",
-        colors: "text-gray-medium",
-    };
-    const themeColors = {
-        green: "green-dark",
-        blue: "blue-navy",
-        red: "crimson-dark",
-    };
-    const buttonStyles = (btn) => btn.active
-        ? cn("flex justify-center items-center w-full h-fit rounded-lg p-3", btn.type === "main"
-            ? `bg-${themeColors[theme]} text-white`
-            : `bg-${themeColors[theme]}/10 text-${themeColors[theme]}`)
-        : "flex justify-center items-center w-full h-fit rounded-lg p-3 bg-gray-light text-gray-dark cursor-not-allowed";
-    return (_jsx("div", { className: cn(container), onClick: () => setIsOpen(false), children: _jsx("div", { className: cn(boxPositionWrapper), children: _jsxs("div", { className: cn(tagWrapper), onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "w-full flex justify-between items-start", children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleText), children: titles.title }), _jsx("div", { className: cn(subtitleText), children: titles.subtitle })] }), _jsx("div", { className: "size-6 flex justify-center items-center cursor-pointer", onClick: () => setIsOpen(false), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-6", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18 18 6M6 6l12 12" }) }) })] }), _jsx("div", { className: "w-full flex flex-wrap max-h-100 overflow-scroll", children: contents }), btns && (_jsx("div", { className: "w-full flex justify-center gap-2 cursor-pointer flex-col sm:flex-row", children: btns.map((btn, index) => btn ? (_jsx("div", { className: cn(buttonStyles(btn), btns.length === 1 ? "w-full" : "w-1/2 sm:w-full"), onClick: btn.active ? btn.options?.onClick : undefined, children: btn.options?.title }, index)) : null) }))] }) }) }));
-}
-export default ModalV2;