@edu-tosel/design 1.0.60 → 1.0.62

package/layout/{widget → template}/dashboard/mypage/Profile.js

@@ -19,12 +19,12 @@ function Profile({ name, birthday, image, modify }) {
         leave: { opacity: 0 },
         config: { duration: 250 },
     });
-    return (_jsxs(Card, { options: {
+    return (_jsxs(Card, { option: {
             className: "flex gap-x-7.5 items-center pl-5",
             width: "md",
             height: "3xs",
             boundary: "border-1 border-black",
-        }, children: [_jsxs("button", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: modify.image, className: "w-20 h-20 overflow-hidden rounded-md relative", children: [_jsx("img", { src: image, alt: "profile-image", className: "bg-cover" }), transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(hoverBox), children: [_jsx(SVG.Image, {}), _jsx("div", { className: "text-white text-xs leading-none", children: "\uC0AC\uC9C4 \uBC14\uAFB8\uAE30" })] })))] }), _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 })] })] })] }));
+        }, children: [_jsxs("button", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: modify.image, className: "w-20 h-20 overflow-hidden rounded-md relative", children: [_jsx("img", { src: image, alt: "profile-image", className: "bg-cover" }), transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(hoverBox), children: [_jsx(SVG.Image, {}), _jsx("div", { className: "text-white text-xs leading-none", children: "\uC0AC\uC9C4 \uBC14\uAFB8\uAE30" })] })))] }), _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", option: { width: "sm", height: "xs" }, onClick: modify.name }), _jsx(Label.Button, { title: "\uC0DD\uC77C \uC218\uC815", option: { width: "sm", height: "xs" }, onClick: modify.birthday })] })] })] }));
 }
 function Detail({ titles, infos, toggle, }) {
     const infoBox = {
@@ -33,13 +33,13 @@ function Detail({ titles, infos, toggle, }) {
         styles: "text-green-dark",
     };
     const id = useId();
-    return (_jsxs(Card, { options: {
+    return (_jsxs(Card, { option: {
             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.Phone, {})) : title === "email" ? (_jsx(SVG.Email, {})) : (_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: {
+        }, 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.Phone, {})) : title === "email" ? (_jsx(SVG.Email, {})) : (_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, option: {
                                 className: "ml-auto",
                                 background: gradient.bg.greenToRed,
                                 text: "text-white",

package/layout/template/dashboard/style.d.ts

@@ -0,0 +1,10 @@
+export interface NavigatorStyle {
+    href: string;
+    nowPath: string;
+    background?: string;
+    text?: string;
+}
+declare const style: {
+    nav: ({ href, nowPath, background, text, }: NavigatorStyle) => string;
+};
+export default style;

package/layout/template/dashboard/style.js

@@ -0,0 +1,16 @@
+import { checkPathMatch, cn } from "../../../util";
+const navigatorStyle = ({ href, nowPath, background = "bg-white", text = "text-white", }) => {
+    const style = {
+        displays: "flex flex-row items-center justify-center xl:justify-start gap-2.5",
+        sizes: " w-full xl:w-51 h-11 ",
+        styles: "xl:rounded-lg xl:pl-5 font-pretendard-bold",
+        texts: checkPathMatch(href, nowPath)
+            ? [background, text].join(" ")
+            : [text, "opacity-50 hover:opacity-100"].join(" "),
+    };
+    return cn(style);
+};
+const style = {
+    nav: navigatorStyle,
+};
+export default style;

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

@@ -2,9 +2,9 @@ import { Titles } from "../../../interface";
 interface NoticeOptions {
     className: string;
 }
-export default function Notice({ banners, options, }: {
+export default function Notice({ banners, option, }: {
     banners: BannerProps[];
-    options?: Partial<NoticeOptions>;
+    option?: Partial<NoticeOptions>;
 }): import("react/jsx-runtime").JSX.Element;
 type Tag = "REG" | "OLY";
 interface BannerProps {

package/layout/template/home/Notice.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SVG from "../../../asset/SVG";
 import { cn } from "../../../util";
-export default function Notice({ banners, options, }) {
-    const { className } = options ?? {};
+export default function Notice({ banners, option, }) {
+    const { className } = option ?? {};
     const container = {
         positions: "relative",
         backgrounds: "bg-[#F7F7F7]",

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

@@ -1,16 +1,16 @@
 interface PromotionOptions {
     className: string;
 }
-export default function Promotion({ banners, options, }: {
+export default function Promotion({ banners, option, }: {
     banners: BannerProps[];
-    options?: Partial<PromotionOptions>;
+    option?: Partial<PromotionOptions>;
 }): import("react/jsx-runtime").JSX.Element;
 interface BannerProps {
     image: {
         src: string;
         location?: string;
     };
-    options?: {
+    option?: {
         background?: string;
         boundary?: string;
     };

package/layout/template/home/Promotion.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SVG from "../../../asset/SVG";
 import { cn, gradient } from "../../../util";
-export default function Promotion({ banners, options, }) {
-    const { className } = options ?? {};
+export default function Promotion({ banners, option, }) {
+    const { className } = option ?? {};
     const container = {
         positions: "relative",
         displays: "flex flex-col",
@@ -24,8 +24,8 @@ export default function Promotion({ banners, options, }) {
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "font-pretendard-bold text-green-dark text-3xl", children: "\uD504\uB85C\uBAA8\uC158" }), _jsx("div", { className: cn(body), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.image.src))) }), _jsxs("div", { className: cn(buttonBox), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => { } }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => { } })] })] }));
 }
-function Banner({ image, options }) {
-    const { background, boundary } = options ?? {};
+function Banner({ image, option }) {
+    const { background, boundary } = option ?? {};
     const container = {
         positions: "relative",
         sizes: "w-260 h-125",

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

@@ -9,7 +9,7 @@ interface BannerProps {
         location?: string;
         isBlur?: boolean;
     };
-    options?: {
+    option?: {
         background?: string;
     };
 }

package/layout/template/home/Service.js

@@ -22,8 +22,8 @@ export default function Service({ banners }) {
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "font-pretendard-bold text-green-dark text-3xl", children: "\uD1A0\uC140\uC758 \uCC28\uBCC4\uD654\uB41C \uC11C\uBE44\uC2A4" }), _jsx("div", { className: cn(body), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }), _jsxs("div", { className: cn(buttonBox), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => { } }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => { } })] })] }));
 }
-function Banner({ titles, image, options }) {
-    const { background } = options ?? {};
+function Banner({ titles, image, option }) {
+    const { background } = option ?? {};
     const container = {
         positions: "relative",
         displays: "flex flex-col",

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

@@ -13,8 +13,8 @@ export default function Carousel({ contents, }) {
     //     setIndex((index + 1) % contents.length);
     //   }
     // }, [flag]);
-    const { tag, titles, image, options } = contents[index];
-    const { text, background } = options ?? {};
+    const { tag, titles, image, option } = contents[index];
+    const { text, background } = option ?? {};
     const container = {
         displays: "flex justify-center items-center",
         sizes: "w-full h-100",

package/layout/{widget → template}/sign/WithTitle.d.ts

@@ -1,5 +1,5 @@
-import { HTMLInput } from "../../../interface";
-interface InputWithTitleProps extends HTMLInput {
+import { InputWidget } from "../../../interface";
+interface InputWithTitleProps extends InputWidget {
     title: string;
 }
 declare function WithTitle({ title, placeholder, state, flag, type, }: InputWithTitleProps): import("react/jsx-runtime").JSX.Element;

package/layout/{widget → template}/sign/WithTitle.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from "../../../widget";
 function WithTitle({ title, placeholder, state, flag, type, }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Input.LG, { placeholder: placeholder, state: state, flag: flag, type: type })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Input.Form, { placeholder: placeholder, state: state, flag: flag, type: type })] }));
 }
 export default WithTitle;

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

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

package/modal/design/ConfirmModal.design.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Label } from "../../widget";
 import { cn } from "../../util";
 import ModalDesign from "../design/Modal.design";
-export default function ConfirmModalDesign({ titles, showAction, buttons, children, options, }) {
+export default function ConfirmModalDesign({ titles, showAction, buttons, children, option, }) {
     const container = {
         displays: "flex flex-col",
     };
@@ -10,8 +10,8 @@ export default function ConfirmModalDesign({ titles, showAction, buttons, childr
         positions: "absolute bottom-5 left-5",
         displays: "flex gap-2.5",
     };
-    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, 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,
+    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, option: option, children: _jsxs("div", { className: cn(container), children: [children, _jsx("div", { className: cn(buttonBox), children: buttons.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
+                            ...option,
                             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({ titles, showAction, children, options, debug, }: ModalProps): import("react").ReactPortal | null;
+export default function ModalDesign({ titles, showAction, children, option, debug, }: ModalProps): import("react").ReactPortal | null;

package/modal/design/Modal.design.js

@@ -25,9 +25,9 @@ const heightSize = {
     "2xl": "max-w-176",
     full: "h-full",
 };
-export default function ModalDesign({ titles, showAction, children, options, debug, }) {
+export default function ModalDesign({ titles, showAction, children, option, debug, }) {
     const { isVisible, event } = showAction ?? {};
-    const { position, width, height, noClose, noBackground, isShadow } = options ?? {};
+    const { position, width, height, noClose, noBackground, isShadow } = option ?? {};
     const [detection, setDetection] = useState(null);
     const { setIsOwn, removeModal } = useActionStore();
     useEffect(() => {
@@ -57,8 +57,5 @@ export default function ModalDesign({ titles, showAction, children, options, deb
         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("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));
+        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));
 }

package/modal/template/Alert.d.ts

@@ -1,2 +1,2 @@
 import { AlertModalProps } from "../../interface/Modal";
-export default function Alert({ titles, showAction, scripts, options, }: AlertModalProps): import("react/jsx-runtime").JSX.Element;
+export default function Alert({ titles, showAction, scripts, option, }: 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({ titles, showAction, scripts, options, }) {
+export default function Alert({ titles, showAction, scripts, option, }) {
     const { script } = scripts ?? {};
-    const { buttons } = options ?? {};
-    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, 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 })] }) }) }));
+    const { buttons } = option ?? {};
+    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, className: "pt-18 px-25", option: { 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/Confirm/Alert.js

@@ -8,7 +8,7 @@ export default function Alert(props) {
         margins: "mt-2.5",
         sizes: "w-full h-60",
     };
-    return (_jsx(ConfirmModalDesign, { ...props, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: "leading-none text-xl font-pretendard-bold", children: props.scripts.script }), _jsx(LineBreaks, { className: "text-center", texts: props.scripts.subscript }), _jsx("div", { className: "leading-none font-pretendard-bold text-crimson-burgundy", children: props.scripts.alert })] }), options: {
+    return (_jsx(ConfirmModalDesign, { ...props, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: "leading-none text-xl font-pretendard-bold", children: props.scripts.script }), _jsx(LineBreaks, { className: "text-center", texts: props.scripts.subscript }), _jsx("div", { className: "leading-none font-pretendard-bold text-crimson-burgundy", children: props.scripts.alert })] }), option: {
             width: "md",
             height: "lg",
         } }));

package/modal/template/Confirm/Confirm.js

@@ -7,7 +7,7 @@ export default function Confirm(props) {
         margins: "mt-2.5",
         sizes: "w-full h-60",
     };
-    return (_jsx(ConfirmModalDesign, { ...props, children: _jsx("div", { className: cn(container), children: props.children }), options: {
+    return (_jsx(ConfirmModalDesign, { ...props, children: _jsx("div", { className: cn(container), children: props.children }), option: {
             width: "md",
             height: "lg",
         } }));

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

@@ -1,7 +1,7 @@
 import { ConfirmModalProps } from "../../../interface/Modal";
-import { HTMLInput } from "../../../interface";
+import { InputWidget } from "../../../interface";
 interface InputProps extends Omit<ConfirmModalProps, "children"> {
-    inputs: (HTMLInput & {
+    inputs: (InputWidget & {
         title: string;
     })[];
 }

package/modal/template/Confirm/Input.js

@@ -3,5 +3,5 @@ import ConfirmModal from "../../design/ConfirmModal.design";
 import { Input as _Input } from "../../../widget";
 export default function Input(props) {
     const { inputs } = props;
-    return (_jsx(ConfirmModal, { ...props, 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))) }) }));
+    return (_jsx(ConfirmModal, { ...props, 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.Form, { ...input })] }, index))) }) }));
 }

package/modal/template/Confirm/Tag.d.ts

@@ -5,7 +5,7 @@ interface TagModalProps<T> extends Omit<ConfirmModalProps, "children"> {
         state: State<T[]>;
         tags: [T, string][];
         process?: [boolean, React.ReactNode];
-        options?: {
+        option?: {
             selectHow?: "one" | "plural";
         };
     };

package/modal/template/Confirm/Tag.js

@@ -4,8 +4,8 @@ import { cn } from "../../../util";
 import { selectOne, selectPlural } from "../../../util/select";
 import { animated, useTransition } from "react-spring";
 export default function Tag(props) {
-    const { state, tags, options, process } = props.tag;
-    const { selectHow } = options || { selectHow: "plural" };
+    const { state, tags, option, process } = props.tag;
+    const { selectHow } = option || { selectHow: "plural" };
     const button = (key) => ({
         sizes: "h-10",
         styles: "rounded-full",

package/modal/template/Input.d.ts

@@ -1,6 +1,6 @@
 import { State } from "../../interface";
 import { ModalProps } from "../../interface/Modal";
-export default function Input<T>({ titles, showAction, options, state, }: Omit<ModalProps, "children"> & {
+export default function Input<T>({ titles, showAction, option, 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 } from "react/jsx-runtime";
 import ModalDesign from "../design/Modal.design";
-export default function Input({ titles, showAction, options, state, }) {
-    const { buttons } = options ?? {};
-    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, 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) }) }));
+export default function Input({ titles, showAction, option, state, }) {
+    const { buttons } = option ?? {};
+    return (_jsx(ModalDesign, { titles: titles, showAction: showAction, className: "pt-18 px-25", option: { buttons }, children: _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) }) }));
 }

package/modal/template/Postcode.js

@@ -22,7 +22,7 @@ export default function PostcodeModal({ state, showAction, }) {
     return (_jsx(ModalDesign, { titles: {
             title: "주소를 검색하고 선택해주세요",
             subtitle: "주소를 검색하고 선택해주세요",
-        }, showAction: showAction, options: {
+        }, showAction: showAction, option: {
             width: "lg",
             height: "xl",
         }, children: _jsx(Suspense, { fallback: _jsx(Loading.Spinner, {}), children: isClient && (_jsx(DaumPostcodeEmbed, { onComplete: handler, className: "mt-16" })) }) }));

package/overlay/design/Overlay.design.js

@@ -9,7 +9,7 @@ export default function OverlayDesign({ titles, children, showAction, }) {
     const container = {
         positions: "absolute top-0 right-0 z-30",
         sizes: "h-full",
-        styles: "box-shadow-sm bg-white",
+        styles: "box-shadow-md bg-white",
     };
     const body = {
         positions: "relative",

package/overlay/template/Manage.js

@@ -16,18 +16,18 @@ export default function Manage({ titles, showAction, elements, buttons, }) {
                     if (type === "select")
                         return (_jsx(Frame, { title: title, children: _jsx(Select, { state: state, selectOptions: selectOptions }) }, id + title));
                     if (type === "toggle")
-                        return (_jsx(Frame, { title: title, children: _jsx(Toggle, { state: state, labels: labels, options: { disabled } }) }, id + title));
+                        return (_jsx(Frame, { title: title, children: _jsx(Toggle, { state: state, labels: labels, option: { disabled } }) }, id + title));
                     if (type === "input")
-                        return (_jsx(Frame, { title: title, children: _jsx(Input, { state: state, options: {
+                        return (_jsx(Frame, { title: title, children: _jsx(Input, { state: state, option: {
                                     width: "md",
                                     disabled,
                                 } }) }, id + title));
                     return null;
-                }) }), _jsx("div", { className: "absolute bottom-12 right-12 flex gap-4", children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+                }) }), _jsx("div", { className: "absolute bottom-12 right-12 flex gap-4", children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
                         width: "sm",
                         height: "xs",
-                        background: options?.background ?? "bg-crimson-dark",
-                        text: options?.text ?? "text-white",
+                        background: option?.background ?? "bg-crimson-dark",
+                        text: option?.text ?? "text-white",
                         disabled: !onClick ? true : false,
                     } }, id + title))) })] }));
 }

package/package.json

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

package/tailwind.config.ts

@@ -242,6 +242,7 @@ export default {
         132: "33rem",
         135: "33.75rem",
         136: "34rem",
+        138.5: "34.625rem",
         138.75: "34.6875rem",
         140: "35rem",
         144: "36rem",

package/version.txt

@@ -1 +1 @@
-1.0.60
+1.0.62

package/widget/design/Label.design.d.ts

@@ -1,2 +1,2 @@
-import { HTMLLabelElement } from "../../interface";
-export default function LabelDesign({ title, onClick, options, hoverState, }: HTMLLabelElement): import("react/jsx-runtime").JSX.Element;
+import { LabelWidget } from "../../interface";
+export default function LabelDesign({ title, onClick, option, hoverState, }: LabelWidget): import("react/jsx-runtime").JSX.Element;

package/widget/design/Label.design.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
-import Obstacle from "../Obstacle";
+import Obstacle from "../template/Obstacle";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",
@@ -11,9 +11,9 @@ const heightSize = {
     xs: "h-6.25",
     sm: "h-11.25",
 };
-export default function LabelDesign({ title, onClick, options, hoverState, }) {
+export default function LabelDesign({ title, onClick, option, hoverState, }) {
     const [hover, setHover] = hoverState ?? [false, () => { }];
-    const { width, height, text, background, className, disabled } = options ?? {};
+    const { width, height, text, background, className, disabled } = option ?? {};
     const container = {
         positions: "relative z-10",
         sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,

package/widget/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Input } from "./template/Input";
 export { default as Select } from "./template/Select";
-export { default as DatePicker } from "./DatePicker";
+export { default as DatePicker } from "./template/DatePicker";
+export { default as CheckBox } from "./template/CheckBox";
 export { default as Label } from "./template/Label";
 export { default as Switch } from "./template/Switch";
-export { default as Toggle } from "./Toggle";
+export { default as Toggle } from "./template/Toggle";

package/widget/index.js

@@ -1,6 +1,7 @@
 export { default as Input } from "./template/Input";
 export { default as Select } from "./template/Select";
-export { default as DatePicker } from "./DatePicker";
+export { default as DatePicker } from "./template/DatePicker";
+export { default as CheckBox } from "./template/CheckBox";
 export { default as Label } from "./template/Label";
 export { default as Switch } from "./template/Switch";
-export { default as Toggle } from "./Toggle";
+export { default as Toggle } from "./template/Toggle";

package/widget/template/CheckBox.d.ts

@@ -0,0 +1,2 @@
+import { CheckBoxWidget } from "../../interface";
+export default function Checkbox({ state: [checked, setChecked], labels, option, color, }: CheckBoxWidget): import("react/jsx-runtime").JSX.Element;

package/widget/{CheckBox.js → template/CheckBox.js}

@@ -8,12 +8,12 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function Checkbox({ state: [checked, setChecked], labels, options, color, }) {
+export default function Checkbox({ state: [checked, setChecked], labels, option, color, }) {
     const checkBoxColor = {
         red: "checked:bg-[#910023]",
         blue: "checked:bg-[#173A8B]",
         green: "checked:bg-[#DFE6E5]",
     };
-    const { disabled } = options ?? {};
+    const { disabled } = option ?? {};
     return (_jsxs("div", { className: "w-auto h-6 flex items-center ", children: [_jsx("input", { type: "checkbox", className: `check-box mr-2 appearance-none w-6 h-6 border-2 border-[#E8EBF3] rounded-md ${checkBoxColor[color]} hover:box-shadow`, disabled: typeof disabled === "boolean" && disabled, checked: checked, onChange: (e) => setChecked(e.target.checked) }), _jsx("label", { htmlFor: "checkbox1", children: labels })] }));
 }

package/widget/template/DatePicker.d.ts

@@ -0,0 +1,3 @@
+import { InputWidget } from "../../interface";
+import "react-datepicker/dist/react-datepicker.css";
+export default function DatePicker({ option }: InputWidget): import("react/jsx-runtime").JSX.Element;

package/widget/{DatePicker.js → template/DatePicker.js}

@@ -13,8 +13,8 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function DatePicker({ options }) {
-    const { width } = options ?? {};
+export default function DatePicker({ option }) {
+    const { width } = option ?? {};
     const [selectedDate, setSelectedDate] = useState(new Date());
     const calRef = useRef(null);
     return (_jsx("div", { children: _jsx(ReactDatePicker, { dateFormat: "yyyy\uB144 MM\uC6D4 dd\uC77C", icon: "fa fa-calendar", minDate: new Date("1900-01-01"), maxDate: new Date("2100-01-01"), selected: selectedDate, shouldCloseOnSelect: false, ref: calRef, onChange: (date) => setSelectedDate(date), locale: ko, className: "bg-slate-200 p-1 pl-2 pr-4 text-sm text-left rounded-md hover:bg-white focus:bg-white transition-all box-inner-shadow focus:outline-none w-68 h-8", children: _jsx("div", { className: "w-full h-auto flex justify-end items-end pr-4 pb-4", children: _jsx("button", { className: "p-2 bg-green-dark text-white rounded-md pr-4 pl-4 hover:opacity-85 hover:shadow-md transition-all", onClick: () => {

package/widget/template/EmailInput.d.ts

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

package/widget/{EmailInput.js → template/EmailInput.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
-import { cn } from "../util";
+import { cn } from "../../util";
 const widthSize = {
     xs: "w-28",
     sm: "w-48",
@@ -10,12 +10,12 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function EmailInput({ state, placeholder, options }) {
-    const { width } = options ?? {};
+export default function EmailInput({ state, placeholder, option, }) {
+    const { width } = option ?? {};
     const id = useId();
     const [value, setValue] = state;
     const [focused, setFocused] = useState(false);
-    const { text } = options ?? {};
+    const { text } = option ?? {};
     const isValidEmail = (email) => {
         return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
     };

package/widget/template/Input/Form.d.ts

@@ -0,0 +1,2 @@
+import { InputWidget } from "../../../interface";
+export default function LG({ state, placeholder, flag, type, label, }: InputWidget): import("react/jsx-runtime").JSX.Element;

package/widget/template/Input/Form.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { cn, gradient } from "../../../util";
+import Label from "../Label";
+export default function LG({ state, placeholder, flag, type, label, }) {
+    const [value, setValue] = state;
+    const [onFocus, setOnFocus] = useState(false);
+    const ref = useRef(null);
+    const container = {
+        positions: "relative",
+    };
+    const placeholderBox = {
+        positions: "absolute left-5",
+        styles: "duration-300",
+        fonts: "leading-none text-gray-medium font-pretendard-medium",
+        animation: value || onFocus ? "top-2.625 text-xs" : "top-4.375 text-base",
+    };
+    const styleByFlag = (flag) => {
+        if (typeof flag === "undefined")
+            return "bg-gray-light border-green-dark";
+        if (flag)
+            return "bg-green-dark/10 text-green-dark border-green-dark ";
+        return "bg-crimson-burgundy/10 text-crimson-burgundy border-crimson-burgundy";
+    };
+    const inputBox = {
+        styles: styleByFlag(flag),
+        sizes: "w-102.5 h-13.5",
+        paddings: `${placeholder && "pt-3"} pl-5`,
+        fonts: "text-sm",
+        boundaries: "rounded-md outline-none",
+        focuses: onFocus ? "border " : "border-0",
+        shadows: onFocus &&
+            !(flag === false) &&
+            "shadow-[0px_0px_10px_0px_rgba(16,86,82,0.38)]",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => setValue(e.target.value), type: type ?? "text" }), label && (_jsx(Label.Button, { title: label.title, onClick: label.onClick, option: {
+                    width: "sm",
+                    height: "xs",
+                    className: "absolute top-3.5 right-3.75",
+                    background: label.option?.background ?? gradient.bg.greenToRed,
+                    text: label.option?.text ?? "text-white",
+                    ...label.option,
+                } }))] }));
+}

package/widget/template/Input/index.d.ts

@@ -0,0 +1,6 @@
+import { InputWidget } from "../../../interface";
+declare function Input({ state, onKeyDown, placeholder, option }: InputWidget): import("react/jsx-runtime").JSX.Element;
+declare namespace Input {
+    var Form: typeof import("./Form").default;
+}
+export default Input;