@edu-tosel/design 1.0.86 → 1.0.88

package/card/design/RollCard.design.js

@@ -24,7 +24,7 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
     };
     return (_jsxs(Card, { option: {
             width: "2xl",
-            height: !isFixed && isOpen ? "xs" : "3xs",
+            height: !isFixed && isOpen ? "2xs" : "4xs",
             background: isDisabled || flag ? "bg-green-dark/10" : "bg-white",
             className: "p-7.5 flex flex-col gap-y-6",
         }, children: [_jsxs(Shelf.Row, { className: "justify-between", children: [_jsxs(Shelf.Col, { className: "gap-y-2.5", children: [_jsxs(Shelf.Row, { className: "gap-x-2.5 items-center", children: [titles.icon && _jsx("img", { src: titles.icon, alt: "icon" }), _jsx("div", { className: "text-xl leading-none font-pretendard-bold text-green-dark", children: titles.title })] }), _jsx("div", { className: "leading-none", children: titles.subtitle })] }), _jsxs("div", { className: "flex gap-3.5 items-center", children: [_jsx(Label, { title: !isDisabled

package/layout/template/Tab.js

@@ -20,7 +20,7 @@ export default function Tab({ tabs, option, state, }) {
         displays: "hidden xl:flex xl:items-center xl:gap-2.5",
         sizes: "w-auto",
         paddings: "p-2.5",
-        backgrounds: boundary ?? "bg-white/30",
+        backgrounds: boundary ?? "bg-gray-light",
         styles: "rounded-xl ",
     };
     const button = {

package/modal/design/Modal.design.d.ts

@@ -1,2 +1,2 @@
 import { ModalProps } from "../../interface/Modal";
-export default function ModalDesign({ titles, showAction, children, option, debug, }: ModalProps): import("react").ReactPortal | null;
+export default function ModalProvider(props: ModalProps): JSX.Element | null;

package/modal/design/Modal.design.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ReactDOM from "react-dom";
+import { createPortal } from "react-dom";
 import { useTransition, animated } from "react-spring";
 import { useActionStore } from "../../store";
 import { cn } from "../../util";
@@ -25,20 +25,39 @@ const heightSize = {
     "2xl": "max-w-176",
     full: "h-full",
 };
-export default function ModalDesign({ titles, showAction, children, option, debug, }) {
-    const { isVisible, event } = showAction ?? {};
-    const { position, width, height, noClose, noBackground, isShadow } = option ?? {};
+export default function ModalProvider(props) {
+    const { isVisible } = props.showAction ?? {};
+    const { position, noBackground } = props.option ?? {};
     const [detection, setDetection] = useState(null);
-    const { setIsOwn, removeModal } = useActionStore();
+    const { setIsOwn } = useActionStore();
     useEffect(() => {
         setDetection(document.getElementById("portal"));
     }, []);
+    const transitions = useTransition(isVisible, {
+        from: { opacity: 0 },
+        enter: { opacity: 1 },
+        leave: { opacity: 0 },
+        config: { duration: 200 },
+    });
     const background = {
         positions: "z-50 fixed top-0 left-0",
-        displays: position ?? "flex items-center justify-center ",
+        displays: !position && "flex items-center justify-center ",
         sizes: "min-h-screen w-full ",
         styles: !noBackground && "bg-black/10 backdrop-blur-sm ",
     };
+    const positionContainer = {
+        positions: "absolute z-45",
+        position,
+    };
+    return (detection &&
+        (!position
+            ? createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), onClick: () => setIsOwn(true), children: _jsx(ModalDesign, { ...props }) }))), document.body)
+            : transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(positionContainer), onClick: () => setIsOwn(true), children: _jsx(ModalDesign, { ...props }) })))));
+}
+function ModalDesign({ titles, showAction, children, option, debug, }) {
+    const { removeModal } = useActionStore();
+    const { width, height, noClose, isShadow } = option ?? {};
+    const { event } = showAction ?? {};
     const container = {
         paddings: "p-5",
         sizes: `${heightSize[height ?? "lg"]} ${widthSize[width ?? "md"]}`,
@@ -50,12 +69,5 @@ export default function ModalDesign({ titles, showAction, children, option, debu
         displays: "flex flex-col items-end",
         sizes: "w-full min-h-[83px]",
     };
-    const transitions = useTransition(isVisible, {
-        from: { opacity: 0 },
-        enter: { opacity: 1 },
-        leave: { opacity: 0 },
-        config: { duration: 200 },
-    });
-    return (detection &&
-        ReactDOM.createPortal(transitions((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(background), onClick: () => setIsOwn(true), children: _jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx(LineBreaks, { texts: titles.subtitle, className: "mt-5 text-base leading-none text-end font-pretendard-bold" })] }), children, !noClose && event && (_jsx(SVG.Close, { onClick: () => removeModal(event), className: "absolute top-5 left-5" }))] }) }))), document.body));
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx(LineBreaks, { texts: titles.subtitle, className: "mt-5 text-base leading-none text-end font-pretendard-bold" })] }), children, !noClose && event && (_jsx(SVG.Close, { onClick: () => removeModal(event), className: "absolute top-5 left-5" }))] }));
 }

package/modal/template/Confirm/Confirm.js

@@ -12,6 +12,7 @@ export default function Confirm(props) {
         sizes: "w-full h-60",
     };
     return (_jsx(ConfirmModalDesign, { ...props, children: _jsx("div", { className: cn(container), children: props.widgets?.map((widget, index) => (_createElement(ConfirmModalWidget, { ...widget, key: index }))) }), option: {
+            ...props.option,
             width: "md",
             height: "lg",
         } }));

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.86
+1.0.88