@edu-tosel/design 1.0.287 → 1.0.289

package/modalV2/index.d.ts

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

package/modalV2/index.js

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

package/modalV2/template/index.d.ts

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,51 @@
+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;

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.287
+1.0.289