@edu-tosel/design 1.0.94 → 1.0.96

package/card/design/SubmitCard.design.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { LabelWidget } from "../../interface";
+export interface SubmitCardProps {
+    children?: ReactNode;
+    button?: LabelWidget;
+}
+export default function SubmitCardDesign({ children, button, }: SubmitCardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/SubmitCard.design.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CardDesign from "./Card.design";
+import { Label } from "../../widget";
+export default function SubmitCardDesign({ children, button, }) {
+    return (_jsxs(CardDesign, { option: {
+            width: "lg",
+            height: "lg",
+            className: "p-5",
+        }, children: [children, button && (_jsx(Label.Button, { ...button, option: {
+                    className: "absolute bottom-5 right-5",
+                } }))] }));
+}

package/card/index.d.ts

@@ -7,3 +7,4 @@ export { default as NavCard } from "./template/NavCard";
 export { default as ProgressCard } from "./template/ProgressCard";
 export { default as RollCard } from "./template/RollCard";
 export { default as TableCard } from "./template/TableCard";
+export { default as SubmitCard } from "./template/SubmitCard";

package/card/index.js

@@ -7,3 +7,4 @@ export { default as NavCard } from "./template/NavCard";
 export { default as ProgressCard } from "./template/ProgressCard";
 export { default as RollCard } from "./template/RollCard";
 export { default as TableCard } from "./template/TableCard";
+export { default as SubmitCard } from "./template/SubmitCard";

package/card/template/ProgressCard/Small.d.ts

@@ -1,2 +1,2 @@
 import { ProgressCardProps } from "../../../interface";
-export default function ProgressCardSmall({ titles, displays, checks, nowFocus, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;
+export default function ProgressCardSmall({ titles, displays, checks, nowFocus, theme, option, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/ProgressCard/Small.js

@@ -10,7 +10,8 @@ const text = {
     green: "text-green-dark",
     blue: "text-blue-navy",
 };
-export default function ProgressCardSmall({ titles, displays, checks, nowFocus, theme = "green", }) {
+export default function ProgressCardSmall({ titles, displays, checks, nowFocus, theme = "green", option, }) {
+    const { size = "md" } = option ?? {};
     const progressBox = {
         positions: "absolute top-2.5 left-2.5",
         displays: "flex",
@@ -25,13 +26,21 @@ export default function ProgressCardSmall({ titles, displays, checks, nowFocus,
     });
     const titleBox = {
         positions: "absolute top-2.5 right-2.5",
-        sizes: "max-w-32.5 w-full h-16",
-        displays: "flex flex-col items-end gap-y-3",
+        sizes: "max-w-40 w-full h-16",
+        displays: "flex flex-col items-end",
         backgrounds: nowFocus === true ? bgLight[theme ?? "green"] : "bg-transparent",
-        boundaries: "rounded-[10px] pt-2 pr-3.5",
+        boundaries: "rounded-[10px]",
+        styles: titles.size === "md"
+            ? "pt-2 pr-3.5 gap-y-3"
+            : "justify-center gap-y-1.5 pr-2",
+    };
+    const titleStyle = {
+        texts: "leading-none",
+        sizes: titles.size === "sm" ? "text-[12px]" : "text-[20px] font-pretendard-bold",
+        styles: text[theme],
     };
     return (_jsxs(CardDesign, { option: {
-            width: "md",
+            width: size ?? "md",
             height: "5xs",
-        }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title, subtitle }, index) => (_jsxs("div", { className: cn(stepBox(index === nowFocus)), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "leading-none text-[12px] font-pretendard-bold", children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: "green" })] }), _jsx("div", { className: `text-[12px] ${text[theme]}`, children: subtitle })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-[20px] leading-none font-pretendard-bold ${text[theme]}`, children: titles.title }), _jsx("div", { className: `text-[12px] leading-none ${text[theme]}`, children: titles.subtitle })] })] }));
+        }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title, subtitle }, index) => (_jsxs("div", { className: cn(stepBox(index === nowFocus)), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "leading-none text-[12px] font-pretendard-bold", children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: "green" })] }), _jsx("div", { className: `text-[12px] ${text[theme]}`, children: subtitle })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: cn(titleStyle), children: titles.title }), _jsx("div", { className: `text-[12px] leading-none ${text[theme]}`, children: titles.subtitle })] })] }));
 }

package/card/template/SubmitCard/index.d.ts

@@ -0,0 +1,2 @@
+import { SubmitCardProps } from "../../design/SubmitCard.design";
+export default function SubmitCard(props: SubmitCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/SubmitCard/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SubmitCardDesign from "../../design/SubmitCard.design";
+export default function SubmitCard(props) {
+    return _jsx(SubmitCardDesign, { ...props });
+}

package/interface/Card.d.ts

@@ -144,5 +144,8 @@ export interface ProgressCardProps {
     nowFocus?: number | boolean;
     displays: Titles[];
     theme?: Theme;
+    option?: {
+        size?: Size;
+    };
 }
 export {};

package/interface/Layout.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { OnClick, State } from "./Property";
+import { Button, OnClick, State } from "./Property";
 import { ShowAction } from "./Action";
 interface Notification {
     id: number;
@@ -14,7 +14,6 @@ interface NotificationProps {
     notifications?: Partial<Notification>[];
     flag: boolean;
     onClick: OnClick;
-    color?: string;
 }
 export interface MenuProps {
     showAction?: ShowAction;
@@ -26,7 +25,8 @@ export interface MenuProps {
     input?: {
         password: State<string | undefined>;
     };
-    onClick: OnClick;
+    medium?: Button[];
+    bottom: Button[];
 }
 export interface DashboardHeaderProps {
     title: string;
@@ -34,9 +34,11 @@ export interface DashboardHeaderProps {
     notification: NotificationProps;
     menu?: MenuProps;
     option?: {
+        onClick?: OnClick;
         background?: string;
         text?: string;
         className?: string;
+        iconColor?: string;
     };
 }
 export interface DashboardProps {

package/interface/Property.d.ts

@@ -58,6 +58,7 @@ export type Titles = {
     color?: string;
     titleColor?: string;
     subtitleColor?: string;
+    size?: Size;
 };
 export interface Log<K extends string, T extends string | number> {
     prints: K[];

package/interface/TextBox.d.ts

@@ -0,0 +1,20 @@
+import { Size, Titles } from "./Property";
+export interface TextBoxDesignProps {
+    titles: Titles;
+    option?: {
+        isCenter?: boolean;
+        size?: Size;
+        className?: string;
+    };
+    children?: React.ReactNode;
+}
+export interface TextBoxProps extends Omit<TextBoxDesignProps, "children"> {
+}
+export interface TextBoxWithImageProps extends TextBoxProps {
+    image: {
+        src: string;
+        width?: string;
+        height?: string;
+        className?: string;
+    };
+}

package/interface/TextBox.js

@@ -0,0 +1 @@
+export {};

package/interface/index.d.ts

@@ -9,3 +9,4 @@ export * from "./Overlay";
 export * from "./Property";
 export * from "./Theme";
 export * from "./Shelf";
+export * from "./TextBox";

package/interface/index.js

@@ -9,3 +9,4 @@ export * from "./Overlay";
 export * from "./Property";
 export * from "./Theme";
 export * from "./Shelf";
+export * from "./TextBox";

package/layout/design/TextBox.design.d.ts

@@ -0,0 +1,2 @@
+import { TextBoxDesignProps } from "../../interface";
+export default function TextBoxDesign({ titles, children, option, }: TextBoxDesignProps): import("react/jsx-runtime").JSX.Element;

package/layout/design/TextBox.design.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "../../text";
+import { cn } from "../../util";
+const titleSize = {
+    md: "text-[16px]",
+    lg: "text-[20px]",
+};
+const subtitleSize = {
+    md: "text-[12px]",
+    lg: "text-[16px]",
+};
+export default function TextBoxDesign({ titles, children, option, }) {
+    const { title, subtitle, titleColor, color, subtitleColor } = titles;
+    const { size, isCenter, className } = option ?? {};
+    console.log(isCenter);
+    const container = {
+        displays: "flex flex-col",
+        center: isCenter && "items-center",
+        styles: color,
+        className: className ?? "gap-y-2",
+    };
+    const titleBox = {
+        colors: titleColor ?? color ?? "text-gray-dark",
+        sizes: titleSize[size ?? "md"],
+        fonts: "font-pretendard-bold",
+        styles: "leading-tight",
+    };
+    const subtitleBox = {
+        colors: subtitleColor ?? color ?? "text-gray-medium",
+        sizes: subtitleSize[size ?? "md"],
+        center: isCenter && "text-center",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(titleBox), children: title }), children, _jsx(LineBreaks, { texts: subtitle, className: cn(subtitleBox) })] }));
+}

package/layout/index.d.ts

@@ -8,3 +8,4 @@ export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
 export { default as Tab } from "./template/Tab";
+export { default as TextBox } from "./template/TextBox";

package/layout/index.js

@@ -8,3 +8,4 @@ export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
 export { default as Tab } from "./template/Tab";
+export { default as TextBox } from "./template/TextBox";

package/layout/template/TextBox.d.ts

@@ -0,0 +1,7 @@
+import { TextBoxProps, TextBoxWithImageProps } from "../../interface";
+declare function TitleBox(props: TextBoxProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TitleBox {
+    var Image: typeof TitleBoxWithImage;
+}
+declare function TitleBoxWithImage({ titles, image, option }: TextBoxWithImageProps): import("react/jsx-runtime").JSX.Element;
+export default TitleBox;

package/layout/template/TextBox.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TextBoxDesign from "../design/TextBox.design";
+function TitleBox(props) {
+    return _jsx(TextBoxDesign, { ...props });
+}
+function TitleBoxWithImage({ titles, image, option }) {
+    return (_jsx(TextBoxDesign, { titles: titles, option: { isCenter: true, size: "lg", className: "gap-y-8", ...option }, children: _jsx("img", { src: image.src, width: image.width, height: image.height, className: image.className }) }));
+}
+TitleBox.Image = TitleBoxWithImage;
+export default TitleBox;

package/layout/template/dashboard/Header.js

@@ -8,8 +8,8 @@ import SVG from "../../../asset/SVG";
 import { Label } from "../../../widget";
 export function Header({ title, logo, notification, menu, option, }) {
     const { setView, setIsOwn } = useActionStore();
-    const { notifications, flag, onClick, color } = notification;
-    const { text, background, className } = option ?? {};
+    const { notifications, flag, onClick } = notification;
+    const { text, background, className, iconColor } = option ?? {};
     const container = {
         positions: "fixed xl:static top-0 left-0 z-40",
         displays: "flex items-center justify-between ",
@@ -26,13 +26,13 @@ export function Header({ title, logo, notification, menu, option, }) {
                                 setIsOwn(true);
                                 onClick && onClick();
                                 return setView("notification");
-                            }, color: color }), menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
+                            }, color: iconColor }), menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
                                 setIsOwn(true);
                                 return setView("menu");
-                            }, color: color })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC\uB85C", onClick: menu?.onClick, option: {
+                            }, color: iconColor })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC", onClick: () => option?.onClick && option.onClick(), option: {
                                 width: "sm",
                                 height: "xs",
-                                text: "text-white",
                                 background: gradient.bg.greenToRed,
+                                text: "text-white",
                             } }))] }) })] }));
 }

package/layout/template/dashboard/Layout.js

@@ -9,9 +9,8 @@ export default function Layout({ header, navigations, children, option, }) {
     const { title, option: headerOption, logo, notification, menu } = header;
     const { background } = option ?? {};
     useEffect(() => {
-        if (isOwn) {
+        if (isOwn)
             return setIsOwn(false);
-        }
         return clearView();
     }, [flag]);
     const container = {

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

@@ -1,2 +1,2 @@
 import { MenuProps } from "../../../interface";
-export default function Menu({ showAction, profile, input, onClick, }: MenuProps): JSX.Element;
+export default function Menu({ showAction, profile, input, medium, bottom, }: MenuProps): JSX.Element;

package/layout/template/dashboard/Menu.js

@@ -3,7 +3,7 @@ import { useTransition, animated } from "react-spring";
 import { cn, gradient } from "../../../util";
 import { useActionStore } from "../../../store";
 import { Label } from "../../../widget";
-export default function Menu({ showAction, profile, input, onClick, }) {
+export default function Menu({ showAction, profile, input, medium, bottom, }) {
     const { isVisible } = showAction ?? {};
     const { setIsOwn, removeModal } = useActionStore();
     const container = {
@@ -18,10 +18,14 @@ export default function Menu({ showAction, profile, input, onClick, }) {
         leave: { opacity: 0 },
         config: { duration: 200 },
     });
-    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: "h-17.75 flex gap-12 justify-center items-center text-black border-b-2 pb-2.5", children: [_jsxs("div", { children: [_jsx("div", { children: profile?.name }), _jsx("div", { className: "text-xs", children: profile?.belong })] }), _jsx("div", { className: "relative w-15 h-15 rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md", src: profile?.image, alt: "profile-image" }) })] }), _jsxs("div", { className: "flex flex-col gap-2.5 pt-2.5", children: [_jsx("input", { className: "w-47.5 h-6.25 border-2 text-black", value: input?.password[0], onChange: (e) => input?.password[1](e.target.value), type: "password" }), _jsxs("div", { className: "flex gap-2.5", children: [_jsx(Label.Button, { title: "\uCDE8\uC18C", onClick: () => removeModal("menu"), option: {
+    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: "h-17.75 flex gap-12 justify-center items-center text-black border-b-2 pb-2.5", children: [_jsxs("div", { children: [_jsx("div", { children: profile?.name }), _jsx("div", { className: "text-xs", children: profile?.belong })] }), _jsx("div", { className: "relative w-15 h-15 rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md", src: profile?.image, alt: "profile-image" }) })] }), _jsxs("div", { className: "flex flex-col gap-2.5 pt-2.5", children: [_jsx("input", { className: "w-47.5 h-6.25 border-2 text-black", value: input?.password[0], onChange: (e) => input?.password[1](e.target.value), type: "password" }), medium?.map((button) => (_jsx(Label.Button, { title: button.title, onClick: button.onClick, option: {
+                            ...button.option,
+                            width: "full",
+                            height: "xs",
+                        } }))), _jsxs("div", { className: "flex gap-2.5", children: [_jsx(Label.Button, { title: bottom[0].title, onClick: bottom[0].onClick, option: {
                                     width: "sm",
                                     height: "xs",
-                                } }), _jsx(Label.Button, { title: "\uD655\uC778", onClick: onClick, option: {
+                                } }), _jsx(Label.Button, { title: bottom[1].title, onClick: bottom[1].onClick, option: {
                                     background: gradient.bg.greenToRed,
                                     text: "text-white",
                                     width: "sm",

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.94
+1.0.96