@edu-tosel/design 1.0.41 → 1.0.43

package/layout/widget/dashboard/mypage/Profile.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, gradient } from "../../../../util";
+import Card from "../../../../card/design/Card.design";
+import { Label, Toggle } from "../../../../html";
+import { useId } from "react";
+function Profile({ name, birthday, image, modify, }) {
+    return (_jsxs(Card, { options: {
+            className: "flex gap-x-7.5 items-center pl-5",
+            width: "md",
+            height: "2xs",
+            boundary: "border-1 border-black",
+        }, children: [_jsx("div", { className: "w-20 h-20 overflow-hidden rounded-md", children: _jsx("img", { src: image, alt: "profile-image", className: "bg-cover" }) }), _jsxs("div", { className: "flex flex-col h-20", children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold text-gray-dark", children: name }), _jsx("div", { className: "leading-none text-gray-medium mt-1.25", children: birthday }), _jsxs("div", { className: "flex gap-3 mt-auto", children: [_jsx(Label.Button, { title: "\uC2E4\uBA85 \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.name }), _jsx(Label.Button, { title: "\uC0DD\uC77C \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.birthday })] })] })] }));
+}
+function Detail({ titles, infos, toggle, }) {
+    const infoBox = {
+        displays: "flex ",
+        sizes: "w-full",
+        styles: "text-green-dark",
+    };
+    const id = useId();
+    return (_jsxs(Card, { options: {
+            className: "pt-5 px-5",
+            width: "md",
+            height: "xs",
+            background: gradient.bg.greenToRedSoft,
+            boundary: "",
+        }, children: [_jsxs("div", { className: "h-13.25 flex flex-col text-gray-dark border-b-1 border-crimson-burgundy", children: [_jsx("div", { className: "text-xl font-pretendard-bold h-6 leading-none", children: titles.title }), _jsx("div", { className: "h-4.75 leading-none", children: titles.subtitle })] }), _jsx("div", { className: "mt-4.25 flex flex-col gap-2.5 ", children: infos?.map(({ title, content, button }, index) => (_jsxs("div", { className: cn(infoBox), children: [title === "phone" ? (_jsx("svg", { className: "mr-3", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M10.9375 1.5625H8.59375C7.97215 1.5625 7.37601 1.80943 6.93647 2.24897C6.49693 2.68851 6.25 3.28465 6.25 3.90625V21.0937C6.25 21.7154 6.49693 22.3115 6.93647 22.751C7.37601 23.1906 7.97215 23.4375 8.59375 23.4375H16.4062C17.0279 23.4375 17.624 23.1906 18.0635 22.751C18.5031 22.3115 18.75 21.7154 18.75 21.0937V3.90625C18.75 3.28465 18.5031 2.68851 18.0635 2.24897C17.624 1.80943 17.0279 1.5625 16.4062 1.5625H14.0625M10.9375 1.5625V3.125H14.0625V1.5625M10.9375 1.5625H14.0625M10.9375 21.0937H14.0625", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) : title === "email" ? (_jsx("svg", { className: "mr-3", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M22.6562 9.37501V10.3188C22.6563 10.7419 22.5417 11.1572 22.3248 11.5205C22.1078 11.8838 21.7965 12.1816 21.424 12.3823L14.676 16.0156M2.34375 9.37501V10.3188C2.34373 10.7419 2.45828 11.1572 2.67525 11.5205C2.89221 11.8838 3.20348 12.1816 3.57604 12.3823L10.324 16.0156M10.324 16.0156L11.3885 15.4427C11.7301 15.2587 12.112 15.1624 12.5 15.1624C12.888 15.1624 13.2699 15.2587 13.6115 15.4427L14.6771 16.0156L19.5312 18.6302M10.324 16.0156L5.46875 18.6302M22.6562 20.3125C22.6562 20.9341 22.4093 21.5303 21.9698 21.9698C21.5302 22.4093 20.9341 22.6563 20.3125 22.6563H4.6875C4.0659 22.6563 3.46976 22.4093 3.03022 21.9698C2.59068 21.5303 2.34375 20.9341 2.34375 20.3125V9.21251C2.34373 8.78934 2.45828 8.37407 2.67525 8.01075C2.89221 7.64744 3.20348 7.34964 3.57604 7.14897L11.3885 2.94168C11.7301 2.75769 12.112 2.66138 12.5 2.66138C12.888 2.66138 13.2699 2.75769 13.6115 2.94168L21.424 7.14897C21.7964 7.34956 22.1075 7.64719 22.3245 8.01031C22.5414 8.37342 22.6561 8.78848 22.6562 9.21147V20.3125Z", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) : (_jsx("div", { className: "font-pretendard-bold mr-5 w-7", children: title })), _jsx("div", { className: "leading-none flex items-center w-60", children: content }), _jsx(Label.Button, { title: button.title, onClick: button.onClick, options: {
+                                className: "ml-auto",
+                                background: gradient.bg.greenToRed,
+                                text: "text-white",
+                                width: "sm",
+                                height: "xs",
+                            } })] }, id + index))) }), toggle && (_jsxs("div", { className: "flex gap-2.5 items-center absolute bottom-5 right-5", children: [_jsx("div", { className: "text-xs leading-none text-green-dark", children: "\uD559\uC6D0\uC73C\uB85C \uBC1B\uAE30" }), _jsx(Toggle, { state: toggle })] }))] }));
+}
+function Preview({ image, username, email, }) {
+    const container = {
+        displays: "hidden xl:flex flex-col justify-center items-center gap-5",
+        sizes: "w-51 h-46.5",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "relative w-21 h-21 rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md", src: image, alt: "profile-image" }) }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "text-xl h-5.25 leading-none font-pretendard-bold", children: username }), _jsx("div", { className: "text-xs h-5.25 leading-none flex justify-center items-center", children: email })] })] }));
+}
+Profile.Detail = Detail;
+Profile.Preview = Preview;
+export default Profile;

package/layout/widget/promotion/Layout.d.ts

@@ -0,0 +1,3 @@
+export default function Layout({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/widget/promotion/Layout.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Thumbnail from "./Thumbnail";
+export default function Layout({ children }) {
+    return (_jsxs("div", { className: "w-[1168px] h-full flex", children: [_jsx(Thumbnail, {}), children] }));
+}

package/layout/widget/promotion/Thumbnail.d.ts

@@ -0,0 +1 @@
+export default function Thumbnail(): import("react/jsx-runtime").JSX.Element;

package/layout/widget/promotion/Thumbnail.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineBellSlash } from "react-icons/hi2";
+import { MdComputer } from "react-icons/md";
+import { CiCreditCard1 } from "react-icons/ci";
+import { IoShareSocialOutline } from "react-icons/io5";
+import { MdAccessTime } from "react-icons/md";
+import { IoIosSchool } from "react-icons/io";
+export default function Thumbnail() {
+    return (_jsxs("div", { className: "w-[288px] flex flex-col mr-20", children: [_jsx("img", { src: "https://grepp-programmers.s3.amazonaws.com/production/file_resource/6246/Dev_Thumnail_Full_stack_Deceloper_3.png", alt: "", className: "w-full object-cover " }), _jsxs("div", { className: "font-bold text-left text-2xl p-1 mb-2 mt-2", children: ["[3\uAE30] K-Digital Training: ", _jsx("br", {}), "\uD0C0\uC785\uC2A4\uD06C\uB9BD\uD2B8\uB85C \uD568\uAED8\uD558\uB294 \uC6F9 \uD480 \uC0AC\uC774\uD074 \uAC1C\uBC1C(React, Node.js)"] }), _jsx("div", { className: "h-10", children: _jsx("button", { className: "w-full h-10 rounded-md bg-gradient-to-r from-violet-500 to-fuchsia-500 font-bold text-white", children: "\uD558\uB7EC\uAC00\uAE30" }) }), _jsxs("div", { className: "h-14 pt-4 pb-4 text-xs text-slate-300 flex justify-center items-center", children: [_jsx(HiOutlineBellSlash, { className: "mr-2" }), "\uC2E0\uCCAD \uC885\uB8CC\uC77C : ~2024-03-21"] }), _jsxs("div", { className: "h-auto pt-2 w-90/100", children: [_jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx("div", { className: "w-6", children: _jsx(IoIosSchool, { className: "mr-2" }) }), "\uC2E0\uCCAD \uAE30\uAC04 : 2024-04-19 ~ 2024-09-05 \uC885\uB8CC\uC77C \uC774\uD6C4 \uBB34\uC81C\uD55C \uC218\uAC15"] }), _jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx("div", { className: "w-6", children: _jsx(MdComputer, { className: "mr-2" }) }), "\uC628/\uC624\uD504\uB77C\uC778 \uCF54\uC2A4"] }), _jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx(CiCreditCard1, { className: "mr-2" }), "\u20A939,000"] }), _jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx(IoShareSocialOutline, { className: "mr-2" }), "\uACF5\uC720\uD558\uAE30"] }), _jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx(MdAccessTime, { className: "mr-2" }), "2024-05-02 \uB9C8\uC9C0\uB9C9 \uC5C5\uB370\uC774\uD2B8"] })] })] }));
+}

package/modal/design/ConfirmModal.design.d.ts

@@ -0,0 +1,2 @@
+import { ConfirmModalProps } from "../../interface/Modal";
+export default function ConfirmModalDesign({ titles, action, buttons, children, options, }: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/design/ConfirmModal.design.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from "../../html";
+import { cn } from "../../util";
+import ModalDesign from "../design/Modal.design";
+export default function ConfirmModalDesign({ titles, action, buttons, children, options, }) {
+    const container = {
+        displays: "flex flex-col",
+    };
+    const buttonBox = {
+        positions: "absolute bottom-5 left-5",
+        displays: "flex gap-2.5",
+    };
+    return (_jsx(ModalDesign, { titles: titles, action: action, options: options, children: _jsxs("div", { className: cn(container), children: [children, _jsx("div", { className: cn(buttonBox), children: buttons.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+                            ...options,
+                            width: "lg",
+                            height: "sm",
+                        } }, title))) })] }) }));
+}

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

@@ -1,2 +1,2 @@
 import { ModalProps } from "../../interface/Modal";
-export default function ModalDesign({ isVisible, event, children, options, debug, }: ModalProps): import("react").ReactPortal | null;
+export default function ModalDesign({ titles, action, children, options, debug, }: ModalProps): import("react").ReactPortal | null;

package/modal/design/Modal.design.js

@@ -5,10 +5,12 @@ import { useWidgetStore } from "../../store";
 import { cn } from "../../util";
 import isDebug from "../../util/isDebug";
 import { useEffect, useState } from "react";
+import SVG from "../../asset/SVG";
+import { LineBreaks } from "./../../text/LineBreaks";
 const widthSize = {
     xs: "w-2/3 min-w-76 max-w-176",
     sm: "w-2/3 min-w-76 max-w-176",
-    md: "w-2/3 min-w-76 max-w-176",
+    md: "max-w-112.5",
     lg: "w-full min-w-76 max-w-360",
     xl: "w-2/3 min-w-76 max-w-360",
     "2xl": "w-2/3 min-w-76 max-w-360",
@@ -18,13 +20,14 @@ const heightSize = {
     xs: "",
     sm: "h-100",
     md: "h-72 sm:h-48",
-    lg: "h-120",
+    lg: "h-112.5",
     xl: "h-180",
-    "2xl": "w-2/3 min-w-76 max-w-176",
+    "2xl": "max-w-176",
     full: "h-full",
 };
-export default function ModalDesign({ isVisible, event, children, options, debug, }) {
-    const { buttons, width, height, closeButtonColor, isCloseButton } = options ?? {};
+export default function ModalDesign({ titles, action, children, options, debug, }) {
+    const { isVisible, event } = action ?? {};
+    const { width, height, noClose } = options ?? {};
     const [detection, setDetection] = useState(null);
     const { setIsOwn, removeModal } = useWidgetStore();
     useEffect(() => {
@@ -37,27 +40,14 @@ export default function ModalDesign({ isVisible, event, children, options, debug
         styles: "bg-black/10 backdrop-blur-sm ",
     };
     const container = {
-        paddings: "pl-25 pt-18 pb-12",
-        sizes: `${heightSize[height ?? "sm"]} ${widthSize[width ?? "md"]}`,
+        paddings: "p-5",
+        sizes: `${heightSize[height ?? "lg"]} ${widthSize[width ?? "md"]}`,
         styles: "rounded-xl bg-white relative overflow-hidden",
         debug: debug && isDebug(`border-2 border-${debug}`),
     };
-    const button = {
-        container: {
-            positions: "absolute bottom-8 right-10",
-            displays: "flex justify-end gap-4",
-        },
-        body: {
-            paddings: "px-8 py-2 ",
-            styles: "rounded-2xl bg-black text-2xl font-pretendard-bold text-white",
-        },
-    };
-    const closeButton = {
-        positions: "absolute top-5 left-7",
-        displays: "flex justify-center items-center",
-        sizes: "h-9 w-9",
-        background: closeButtonColor ?? "bg-black",
-        styles: "rounded-full",
+    const titleBox = {
+        displays: "flex flex-col items-end",
+        sizes: "w-full",
     };
     const transitions = useTransition(isVisible, {
         from: { opacity: 0 },
@@ -66,5 +56,8 @@ export default function ModalDesign({ isVisible, event, children, options, debug
         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: [children, buttons ? (_jsx("div", { className: cn(button.container), children: buttons.map(([text, onClick]) => (_jsx("button", { className: cn(button.body), onClick: onClick, children: text }, text))) })) : null, isCloseButton && event && (_jsx("button", { className: cn(closeButton), onClick: () => removeModal(event), children: _jsx("div", { className: "x-shape" }) }))] }) }))), document.body));
+        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("div", { className: "mt-5", children: LineBreaks({
+                                    texts: titles.subtitle,
+                                    className: "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));
 }

package/modal/index.d.ts

@@ -1 +1,2 @@
 export { default as Modal } from "./template";
+export { default as ConfirmModal } from "./template/ConfirmModal";

package/modal/index.js

@@ -1 +1,2 @@
 export { default as Modal } from "./template";
+export { default as ConfirmModal } from "./template/ConfirmModal";

package/modal/template/Alert.d.ts

@@ -1,2 +1,2 @@
 import { AlertModalProps } from "../../interface/Modal";
-export default function Alert({ isVisible, title, scripts, options, }: AlertModalProps): import("react/jsx-runtime").JSX.Element;
+export default function Alert({ titles, action, scripts, options, }: AlertModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/template/Alert.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ModalDesign from "../design/Modal.design";
-export default function Alert({ isVisible, title, scripts, options, }) {
-    const { script, subScript } = scripts ?? {};
+export default function Alert({ titles, action, scripts, options, }) {
+    const { script } = scripts ?? {};
     const { buttons } = options ?? {};
-    return (_jsx(ModalDesign, { isVisible: isVisible, className: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: _jsx("div", { className: "flex flex-col gap-3", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "text-3xl font-pretendard-bold", children: title }), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-pretendard-bold", children: script })] }) }) }));
+    return (_jsx(ModalDesign, { titles: titles, action: action, className: "pt-18 px-25", options: { buttons }, children: _jsx("div", { className: "flex flex-col gap-3", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-pretendard-bold", children: script })] }) }) }));
 }

package/modal/template/ConfirmModal/Input.d.ts

@@ -0,0 +1,10 @@
+import { ConfirmModalProps } from "../../../interface/Modal";
+import { HTMLInputElement } from "../../../interface";
+interface InputProps extends Omit<ConfirmModalProps, "children"> {
+    inputs: (HTMLInputElement & {
+        title: string;
+    })[];
+    data?: string;
+}
+export default function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/modal/template/ConfirmModal/Input.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ConfirmModal from "../../design/ConfirmModal.design";
+import { Input as _Input } from "../../../html";
+export default function Input(props) {
+    const { buttons, inputs } = props;
+    return (_jsx(ConfirmModal, { ...props, buttons: buttons, children: _jsx("div", { className: "flex flex-col gap-3", children: inputs.map((input, index) => (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "font-pretendard-bold", children: input.title }), _jsx(_Input.LG, { ...input })] }, index))) }) }));
+}

package/modal/template/ConfirmModal/index.d.ts

@@ -0,0 +1,5 @@
+import Input from "./Input";
+declare const ConfirmModal: {
+    Input: typeof Input;
+};
+export default ConfirmModal;

package/modal/template/ConfirmModal/index.js

@@ -0,0 +1,5 @@
+import Input from "./Input";
+const ConfirmModal = {
+    Input,
+};
+export default ConfirmModal;

package/modal/template/Input.d.ts

@@ -1,6 +1,6 @@
 import { State } from "../../interface";
 import { ModalProps } from "../../interface/Modal";
-export default function Input<T>({ isVisible, event, title, options, state, }: Omit<ModalProps, "children"> & {
+export default function Input<T>({ titles, action, options, state, }: Omit<ModalProps, "children"> & {
     title?: string;
     state: State<T>;
 }): import("react/jsx-runtime").JSX.Element;

package/modal/template/Input.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import ModalDesign from "../design/Modal.design";
-export default function Input({ isVisible, event, title, options, state, }) {
+export default function Input({ titles, action, options, state, }) {
     const { buttons } = options ?? {};
-    return (_jsxs(ModalDesign, { isVisible: isVisible, event: event, className: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: [_jsx("div", { className: "text-xl font-pretendard-bold", children: title }), _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) })] }));
+    return (_jsx(ModalDesign, { titles: titles, action: action, className: "pt-18 px-25", options: { buttons }, children: _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) }) }));
 }

package/overlay/template/Info.d.ts

@@ -1,2 +1,2 @@
 import { InfoOverlayProps } from "../../interface/Overlay";
-export default function Info({ event, isVisible, }: Omit<InfoOverlayProps, "titles">): import("react/jsx-runtime").JSX.Element;
+export default function Info({ action }: Omit<InfoOverlayProps, "titles">): import("react/jsx-runtime").JSX.Element;

package/overlay/template/Info.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import OverlayDesign from "../widget/Overlay.design";
-export default function Info({ event, isVisible, }) {
-    return (_jsx(OverlayDesign, { titles: { title: "유저 관리" }, event: event, isVisible: isVisible, children: _jsx("div", { children: "TEST" }) }));
+export default function Info({ action }) {
+    return (_jsx(OverlayDesign, { titles: { title: "유저 관리" }, action: action, children: _jsx("div", { children: "TEST" }) }));
 }

package/overlay/template/Manage.d.ts

@@ -1,2 +1,2 @@
 import { ManageOverlayProps } from "../../interface";
-export default function Manage({ titles, isVisible, event, elements, buttons, }: ManageOverlayProps): import("react/jsx-runtime").JSX.Element;
+export default function Manage({ titles, action, elements, buttons, }: ManageOverlayProps): import("react/jsx-runtime").JSX.Element;

package/overlay/template/Manage.js

@@ -4,13 +4,13 @@ import OverlayDesign from "../widget/Overlay.design";
 import Frame from "../widget/Frame.design";
 import { useId } from "react";
 import { cn } from "../../util";
-export default function Manage({ titles, isVisible, event, elements, buttons, }) {
+export default function Manage({ titles, action, elements, buttons, }) {
     const id = useId();
     const body = {
         sizes: "w-full min-h-160 xl:h-120 ",
         styles: "overflow-y-scroll",
     };
-    return (_jsxs(OverlayDesign, { titles: titles, event: event, isVisible: isVisible, children: [_jsx("div", { className: cn(body), children: elements?.map(({ title, type, labels, state, selectOptions, disabled }) => {
+    return (_jsxs(OverlayDesign, { titles: titles, action: action, children: [_jsx("div", { className: cn(body), children: elements?.map(({ title, type, labels, state, selectOptions, disabled }) => {
                     if (type === "text")
                         return (_jsx(Frame, { title: title, children: _jsx("div", { className: "text-base pl-4", children: state[0] }) }, id + title));
                     if (type === "select")

package/overlay/widget/Overlay.design.d.ts

@@ -1,2 +1,2 @@
 import { OverlayProps } from "../../interface";
-export default function OverlayDesign({ titles, children, event, isVisible, }: OverlayProps): JSX.Element;
+export default function OverlayDesign({ titles, children, action, }: OverlayProps): JSX.Element;

package/overlay/widget/Overlay.design.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTransition, animated } from "react-spring";
 import { cn } from "../../util";
 import { useWidgetStore } from "../../store";
-export default function OverlayDesign({ titles, children, event, isVisible, }) {
+export default function OverlayDesign({ titles, children, action, }) {
     const { removeView, setIsOwn } = useWidgetStore();
     const { title } = titles;
+    const { isVisible, event } = action ?? {};
     const container = {
         positions: "absolute top-0 right-0 z-30",
         sizes: "h-full",

package/package.json

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

package/tailwind.config.ts

@@ -65,6 +65,7 @@ export default {
         "gray-light-super": "#D9D9D9",
         "gray-medium": "#7F7F7F",
         "gray-dim": "#4C4C4C",
+        "gray-dark": "#4C4C4C",
         "silver-lavender": "#E7E9F2",
         "silver-latte": "#FBF3E4",
         "silver-pale": "#DFD8CA",
@@ -92,7 +93,9 @@ export default {
         0.5: "0.125rem",
         1: "0.25rem",
         1.25: "0.3125rem",
+        1.5: "0.375rem",
         2.125: "0.53125rem",
+        2.25: "0.5625rem",
         2.5: "0.625rem",
         2.625: "0.65625rem",
         3.5: "0.875rem",
@@ -102,10 +105,12 @@ export default {
         4.5: "1.125rem",
         4.75: "1.1875rem",
         5.25: "1.3125rem",
+        5.5: "1.375rem",
         5.75: "1.4375rem",
         6.25: "1.5625rem",
         6.4: "1.6rem",
         6.5: "1.625rem",
+        6.75: "1.6875rem",
         7: "1.75rem",
         7.5: "1.875rem",
         8: "2rem",
@@ -114,15 +119,20 @@ export default {
         9.25: "2.3125rem",
         9.5: "2.375rem",
         10.25: "2.5625rem",
+        10.5: "2.625rem",
         11: "2.75rem",
         11.25: "2.8125rem",
         11.375: "2.84375rem",
+        11.5: "2.875rem",
         12: "3rem",
+        12.25: "3.0625rem",
+        13: "3.25rem",
         13.25: "3.3125rem",
         13.5: "3.375rem",
         13.75: "3.4375rem",
         14: "3.5rem",
         14.125: "3.53125rem",
+        14.25: "3.5625rem",
         14.5: "3.625rem",
         15: "3.75rem",
         15.5: "3.875rem",
@@ -135,6 +145,7 @@ export default {
         19.5: "4.875rem",
         20: "5rem",
         20.5: "5.125rem",
+        20.75: "5.1875rem",
         21: "5.25rem",
         21.5: "5.375rem",
         21.75: "5.4375rem",
@@ -162,12 +173,14 @@ export default {
         43: "10.75rem",
         44: "11rem",
         45: "11.25rem",
+        46.5: "11.625rem",
         48: "12rem",
         49: "12.25rem",
         50: "12.5rem",
         51: "12.75rem",
         52: "13rem",
         52.5: "13.125rem",
+        53.75: "13.4375rem",
         54: "13.5rem",
         55: "13.75rem",
         56: "14rem",
@@ -185,6 +198,7 @@ export default {
         84: "21rem",
         85: "21.25rem",
         88: "22rem",
+        88.5: "22.125rem",
         90: "22.5rem",
         92: "23rem",
         96: "24rem",
@@ -299,6 +313,7 @@ export default {
         1500: "1500ms",
         1600: "1600ms",
         1650: "1650ms",
+        1700: "1700ms",
         1750: "1750ms",
         1800: "1800ms",
         1950: "1950ms",
@@ -359,6 +374,7 @@ export default {
         40: ".4",
       },
       fontSize: {
+        "2xs": "0.625rem",
         xs: "0.75rem",
         sm: "0.875rem",
         base: "1rem",

package/version.txt

@@ -1 +1 @@
-1.0.41
+1.0.43

package/html/widget/Input.d.ts

@@ -1,2 +0,0 @@
-import { HTMLInputElement } from "../../interface";
-export default function Input({ state, onKeyDown, placeholder, options, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Input.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { cn } from "../../util";
-import Obstacle from "./Obstacle";
-const widthSize = {
-    xs: "w-28",
-    sm: "w-48",
-    md: "w-64",
-    lg: "w-96",
-    xl: "w-128",
-    "2xl": "w-144",
-    full: "w-full",
-};
-export default function Input({ state, onKeyDown, placeholder, options, }) {
-    const { width, disabled } = options ?? {};
-    const id = useId();
-    const [value, setValue] = state;
-    const container = {
-        positions: "relative",
-        width: `${widthSize[width ?? "xs"]} h-8`,
-        displays: "flex items-center",
-    };
-    const body = {
-        styles: "rounded-md bg-slate-200 text-xs",
-        sizes: "w-full h-full",
-        paddings: "pl-4",
-        pseudo: "focus:outline-none focus:bg-white focus:text-black box-shadow-focus",
-        effect: `transition-all`,
-    };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("input", { className: cn(body), id: id, type: "text", value: value, placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }));
-}

package/navigation/index.d.ts

@@ -1 +0,0 @@
-export * from "./Navigation";

package/navigation/index.js

@@ -1 +0,0 @@
-export * from "./Navigation";