@edu-tosel/design 1.0.42 → 1.0.43

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.42",
+  "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.42
+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";