@edu-tosel/design 1.0.42 → 1.0.44

package/card/design/InfoCard.design.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
 import Card from "./Card.design";
-export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, options, children, }) {
+export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, image, options, children, }) {
     const { titleBorder, text } = options ?? {};
     const container = {
         displays: "flex flex-col",
@@ -20,5 +20,5 @@ export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, o
             displays: "flex flex-col-reverse",
         },
     };
-    return (_jsxs(Card, { options: { ...options, className: cn(container) }, debug: debug, children: [_jsxs("div", { className: cn(topBox.container), children: [_jsxs("div", { className: "text-gray-dim ", children: [_jsx("div", { className: cn(topBox.titleText), children: title }), _jsx("div", { className: cn(topBox.subtitleText), children: subtitle ?? "" })] }), topRight] }), children] }));
+    return (_jsxs(Card, { options: { ...options, className: cn(container) }, debug: debug, children: [_jsxs("div", { className: cn(topBox.container), children: [_jsxs("div", { className: "text-gray-dim ", children: [_jsx("div", { className: cn(topBox.titleText), children: title }), _jsx("div", { className: cn(topBox.subtitleText), children: subtitle ?? "" })] }), topRight] }), image && (_jsx("div", { className: "absolute right-5 top-5 w-22.5 h-22.5", children: _jsx("div", { className: "relative h-full w-full rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md ", src: image }) }) })), children] }));
 }

package/card/template/InfoCard/Academy.d.ts

@@ -0,0 +1,20 @@
+import { Button as ButtonProp, InfoCardProps } from "../../../interface";
+interface AcademyCardProps extends Omit<InfoCardProps, "children"> {
+    buttons: ButtonProp[];
+    data: {
+        address: string;
+    };
+}
+interface StudentCardProps extends Omit<InfoCardProps, "titles" | "children"> {
+    data: {
+        academy: string;
+        name: string;
+        birthday: string;
+        createdAt: string;
+    };
+}
+declare function Academy({ titles, data, buttons }: AcademyCardProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Academy {
+    var Digital: ({ image, data }: StudentCardProps) => import("react/jsx-runtime").JSX.Element;
+}
+export default Academy;

package/card/template/InfoCard/Academy.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InfoCardDesign } from "../../design/InfoCard.design";
+import SVG from "../../../asset/SVG";
+import { Label } from "../../../html";
+function Academy({ titles, data, buttons }) {
+    return (_jsx(InfoCardDesign, { titles: titles, options: {
+            titleBorder: "border-green-dark",
+            background: "",
+            boundary: "",
+            width: "xs",
+            height: "md",
+        }, children: _jsxs("div", { className: "mt-2.5 flex flex-col gap-2.5", children: [_jsx("div", { className: "w-full", children: data.address }), _jsx("div", { className: "flex gap-2.5", children: buttons.map(({ title, onClick }, index) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+                            background: !index ? "bg-gray-medium" : "bg-green-dark",
+                            text: "text-white",
+                            width: "sm",
+                            height: "xs",
+                        } }, index))) })] }) }));
+}
+function Digital({ image, data }) {
+    return (_jsx(InfoCardDesign, { options: {
+            width: "md",
+            height: "lg",
+            titleBorder: "border-crimson-burgundy",
+            boundary: "border-2 border-crimson-burgundy",
+        }, titles: {
+            title: "Digital Student Card",
+            subtitle: "디지털 학생증",
+        }, image: image, children: _jsxs("div", { className: "mt-5.5", children: [_jsxs("div", { className: "flex flex-col gap-y-3 text-gray-dark", children: [_jsx("div", { className: "text-xl h-6 font-pretendard-bold leading-none", children: data.academy }), _jsxs("div", { className: "h-10.5", children: [_jsxs("div", { className: "leading-none", children: ["\uC774\uB984: ", data.name, " / \uC0DD\uB144\uC6D4\uC77C: ", data.birthday] }), _jsx("div", { children: data.createdAt })] }), _jsx("div", { className: "text-xs leading-none", children: "*\uCE74\uB4DC\uB97C \uB20C\uB7EC \uD559\uC6D0\uC815\uBCF4\uB97C \uD655\uC778\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] }), _jsx(SVG.TOSEL, { className: "absolute bottom-5 right-5" })] }) }));
+}
+Academy.Digital = Digital;
+export default Academy;

package/card/template/InfoCard/Grade.d.ts

@@ -5,12 +5,11 @@ interface Data {
     level: string;
     levelString: string;
     levelColor: string;
-    profileImage: string;
     score: number;
     grade: number;
 }
 export interface GradeProps extends Omit<InfoCardProps, "children"> {
     data: Partial<Data>;
 }
-export default function Grade({ titles, data }: GradeProps): import("react/jsx-runtime").JSX.Element;
+export default function Grade({ titles, image, data }: GradeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/card/template/InfoCard/Grade.js

@@ -3,7 +3,7 @@ import { Label } from "../../../html";
 import { cn } from "../../../util";
 import { InfoCardDesign } from "../../design/InfoCard.design";
 import { label } from "./static/label";
-export default function Grade({ titles, data }) {
+export default function Grade({ titles, image, data }) {
     const container = {
         positions: "relative",
         displays: "flex flex-col justify-between mt-2.5",
@@ -15,7 +15,7 @@ export default function Grade({ titles, data }) {
         styles: "bg-white-off text-sm rounded-md",
         text: data.levelColor,
     };
-    return (_jsx(InfoCardDesign, { titles: titles, options: {
+    return (_jsx(InfoCardDesign, { titles: titles, image: image, options: {
             titleBorder: "border-blue-navy",
             width: "sm",
             height: "xs",
@@ -25,5 +25,5 @@ export default function Grade({ titles, data }) {
                         text: "text-white hover:text-blue-navy",
                         background: "bg-blue-navy hover:bg-gray-light",
                         className: cn(label),
-                    } }), _jsx("div", { className: "absolute right-5 top-5 w-22.5 h-22.5", children: _jsx("div", { className: "relative h-full w-full rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md ", src: data.profileImage }) }) })] }) }));
+                    } })] }) }));
 }

package/card/template/InfoCard/PersonalInformation.js

@@ -40,7 +40,7 @@ export default function PersonalInformation({ titles, theme = "red", button, dat
             height: "md",
             background: color.background[theme],
             boundary: `border-3 ${color.border[theme]}`,
-        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(body.container), children: [_jsx("div", { className: cn(body.belong), children: data.info }), _jsx("div", { className: cn(body.username), children: data.username }), _jsx("div", { className: cn(body.name), children: data.name }), _jsxs("div", { className: cn(body.subInfo), children: [_jsx("div", { children: data.email }), _jsx("div", { children: data.phone })] })] }), button && (_jsx(Label.Button, { title: button[0], onClick: button[1], options: {
+        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(body.container), children: [_jsx("div", { className: cn(body.belong), children: data.info }), _jsx("div", { className: cn(body.username), children: data.username }), _jsx("div", { className: cn(body.name), children: data.name }), _jsxs("div", { className: cn(body.subInfo), children: [_jsx("div", { children: data.email }), _jsx("div", { children: data.phone })] })] }), button && (_jsx(Label.Button, { title: button.title, onClick: button.onClick, options: {
                         width: "md",
                         background: color.background.button[theme],
                         text: "text-white",

package/card/template/InfoCard/Student.d.ts

@@ -2,11 +2,10 @@ import { InfoCardProps, OnClick } from "./../../../interface";
 interface Data {
     belong: string;
     birthday: string;
-    profileImage: string;
 }
 interface StudentInfo extends Omit<InfoCardProps, "children"> {
     data: Partial<Data>;
     onClick?: OnClick;
 }
-export default function Student({ titles, data, onClick }: StudentInfo): import("react/jsx-runtime").JSX.Element;
+export default function Student({ titles, image, data, onClick }: StudentInfo): import("react/jsx-runtime").JSX.Element;
 export {};

package/card/template/InfoCard/Student.js

@@ -3,7 +3,7 @@ import { Label } from "../../../html";
 import { cn } from "../../../util";
 import { InfoCardDesign } from "../../design/InfoCard.design";
 import { label } from "./static/label";
-export default function Student({ titles, data, onClick }) {
+export default function Student({ titles, image, data, onClick }) {
     const container = {
         positions: "relative",
         displays: "flex flex-col justify-between mt-2.5",
@@ -14,7 +14,7 @@ export default function Student({ titles, data, onClick }) {
         sizes: "w-22.5 h-6.4",
         styles: "bg-white-off text-sm rounded-md",
     };
-    return (_jsx(InfoCardDesign, { titles: titles, options: {
+    return (_jsx(InfoCardDesign, { titles: titles, image: image, options: {
             titleBorder: "border-blue-navy",
             width: "sm",
             height: "xs",
@@ -24,5 +24,5 @@ export default function Student({ titles, data, onClick }) {
                         text: "text-white hover:text-blue-navy",
                         background: "bg-blue-navy hover:bg-gray-light",
                         className: cn(label),
-                    } }), _jsx("div", { className: "absolute right-5 top-5 w-22.5 h-22.5", children: _jsx("div", { className: "relative h-full w-full rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md ", src: data.profileImage }) }) })] }) }));
+                    } })] }) }));
 }

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

@@ -1,3 +1,4 @@
+import Academy from "./Academy";
 import Exam from "./Exam";
 import Finance from "./Finance";
 import Grade from "./Grade";
@@ -6,6 +7,7 @@ import PersonalInformation from "./PersonalInformation";
 import Product from "./Product";
 import Student from "./Student";
 declare const InfoCard: {
+    Academy: typeof Academy;
     PersonalInformation: typeof PersonalInformation;
     Exam: typeof Exam;
     ExamData: {

package/card/template/InfoCard/index.js

@@ -1,3 +1,4 @@
+import Academy from "./Academy";
 import Exam from "./Exam";
 import ExamData from "./ExamData";
 import Finance from "./Finance";
@@ -7,6 +8,7 @@ import PersonalInformation from "./PersonalInformation";
 import Product from "./Product";
 import Student from "./Student";
 const InfoCard = {
+    Academy,
     PersonalInformation,
     Exam,
     ExamData,

package/html/design/Label.design.js

@@ -27,7 +27,7 @@ export default function LabelDesign({ title, onClick, options, hoverState, }) {
         texts: text ?? "text-gray-dim",
         animation: "duration-500",
         fonts: "font-pretendard-light",
-        styles: height !== "xs" ? "rounded-xl" : "rounded-md text-xs",
+        styles: height !== "xs" ? "rounded-lgx" : "rounded-md text-xs",
     };
     return (_jsx("div", { className: className, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: title }), _jsx(Obstacle, { disabled: disabled })] }) }));
 }

package/html/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Input } from "./widget/Input";
+export { default as Input } from "./template/Input";
 export { default as Select } from "./template/Select";
 export { default as DatePicker } from "./widget/DatePicker";
 export { default as Label } from "./template/Label";

package/html/index.js

@@ -1,4 +1,4 @@
-export { default as Input } from "./widget/Input";
+export { default as Input } from "./template/Input";
 export { default as Select } from "./template/Select";
 export { default as DatePicker } from "./widget/DatePicker";
 export { default as Label } from "./template/Label";

package/html/template/Input.d.ts

@@ -0,0 +1,6 @@
+import { HTMLInput } from "../../interface";
+declare function Input({ state, onKeyDown, placeholder, options }: HTMLInput): import("react/jsx-runtime").JSX.Element;
+declare namespace Input {
+    var LG: ({ state, placeholder, flag, type, label }: HTMLInput) => import("react/jsx-runtime").JSX.Element;
+}
+export default Input;

package/html/template/Input.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState, useRef } from "react";
+import { cn, gradient } from "../../util";
+import Obstacle from "../widget/Obstacle";
+import Label from "./Label";
+const widthSize = {
+    xs: "w-28",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+function Input({ state, onKeyDown, placeholder, options }) {
+    const { width, disabled } = options ?? {};
+    const [value, setValue] = state;
+    const id = useId();
+    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 })] }));
+}
+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",
+        animation: value || onFocus ? "top-2.625 text-xs" : "top-4.375 text-base",
+    };
+    const inputBox = {
+        sizes: "w-102.5 h-13.5",
+        paddings: `${placeholder && "pt-3"} pl-5`,
+        fonts: "text-sm",
+        background: flag === true
+            ? "bg-green-dark/10"
+            : flag === false
+                ? "bg-crimson-burgundy/10 text-crimson-burgundy"
+                : "bg-gray-light",
+        styles: "bg-gray-light rounded-md outline-none",
+        animation: onFocus ? "border-2 border-green-dark box-shadow" : "border-0",
+    };
+    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, options: {
+                    width: "sm",
+                    height: "xs",
+                    className: "absolute top-3.5 right-3.75",
+                    background: label.options?.background ?? gradient.bg.greenToRed,
+                    text: label.options?.text ?? "text-white",
+                    ...label.options,
+                } }))] }));
+}
+Input.LG = LG;
+export default Input;

package/html/widget/DatePicker.d.ts

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

package/html/widget/EmailInput.d.ts

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

package/html/widget/EmailInput.js

@@ -10,7 +10,7 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function EmailInput({ state, placeholder, options, }) {
+export default function EmailInput({ state, placeholder, options }) {
     const { width } = options ?? {};
     const id = useId();
     const [value, setValue] = state;

package/html/widget/Toggle.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
 const widthSize = {
     xs: "w-32",
     sm: "w-48",
@@ -9,6 +10,11 @@ const widthSize = {
     full: "w-full",
 };
 export default function Toggle({ state: [chekced, setChecked], labels, options, }) {
-    const { disabled } = options ?? {};
-    return (_jsxs("div", { className: "w-24 h-6 flex items-center", children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: typeof disabled === "boolean" && disabled, type: "checkbox", className: "toggle bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), _jsx("div", { className: "ml-2 transition-all text-xs", children: labels.map(([status, label]) => (status === chekced ? label : "")) })] }));
+    const { disabled, className } = options ?? {};
+    const container = {
+        displays: "flex items-center",
+        sizes: "h-6",
+        className,
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: typeof disabled === "boolean" && disabled, type: "checkbox", className: "toggle bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), labels && (_jsx("div", { className: "ml-2 transition-all text-xs", children: labels.map(([status, label]) => (status === chekced ? label : "")) }))] }));
 }

package/index.d.ts

@@ -5,6 +5,5 @@ export * from "./layout";
 export * from "./html";
 export * from "./interaction";
 export * from "./modal";
-export * from "./navigation";
 export * from "./overlay";
 export * from "./text";

package/index.js

@@ -5,6 +5,5 @@ export * from "./layout";
 export * from "./html";
 export * from "./interaction";
 export * from "./modal";
-export * from "./navigation";
 export * from "./overlay";
 export * from "./text";

package/interface/Board.d.ts

@@ -1,11 +1,13 @@
 import { DataField, DataSet, Size, Titles } from "./Property";
 import { EventsProps } from "./Widget";
-import { HTMLInputElement, HTMLLabelElement, HTMLSelectElement } from "./HTMLElement";
+import { HTMLInput, HTMLLabelElement, HTMLSelectElement } from "./HTMLElement";
 interface OptionsProps {
     className?: string;
     width?: Size;
     height?: Size;
     color?: string;
+    background?: string;
+    border?: string;
     isRounded?: boolean;
     noPadding?: boolean;
     noMobile?: boolean;
@@ -24,7 +26,7 @@ export interface BoardHeaderProps<B> {
     };
     tag?: {
         selects?: HTMLSelectElement<B>[];
-        inputs?: HTMLInputElement[];
+        inputs?: HTMLInput[];
     };
     options?: {
         titleBorder?: string;

package/interface/Card.d.ts

@@ -1,4 +1,4 @@
-import { Button, DataField, DataSet, Disabled, ImageSize, OnClick, Size, Titles } from "./Property";
+import { Button, DataField, DataSet, Disabled, ImageSize, OnClick, Size, State, Titles } from "./Property";
 interface CardOptions {
     className?: string;
     boundary?: string;
@@ -9,6 +9,7 @@ interface CardOptions {
     text?: string;
     border?: string;
     onClick?: OnClick;
+    onMouse?: State<boolean>;
     overflow?: "hiden" | "y-scroll" | "auto";
     noPadding?: boolean;
     padding?: string | false;
@@ -72,6 +73,7 @@ export interface InfoCardProps extends CardProps {
     titles: Titles;
     topRight?: React.ReactNode;
     button?: Button;
+    image?: string;
     options?: {
         titleBorder?: string;
     } & CardOptions;

package/interface/HTMLElement.d.ts

@@ -15,6 +15,7 @@ export interface HTMLElement {
         background?: string;
         text?: string;
         disabled?: Disabled;
+        rounded?: string;
     };
 }
 export interface HTMLLabelElement extends HTMLElement {
@@ -28,14 +29,18 @@ export interface HTMLSelectElement<T> extends HTMLElement {
     selectOptions?: SelectOption<T>[];
     placeholder?: string;
 }
-export interface HTMLInputElement extends HTMLElement {
+type HTMLInputType = "text" | "password" | "date" | "email" | "phone" | "number";
+export interface HTMLInput extends HTMLElement {
     state: State<string> | State<string | undefined>;
     onKeyDown?: (e: React.KeyboardEvent) => void;
     placeholder?: string;
+    flag?: boolean;
+    type?: HTMLInputType;
+    label?: HTMLLabelElement;
 }
 export interface HTMLToggleElement extends HTMLElement {
     state: State<boolean>;
-    labels: [[true, string], [false, string]];
+    labels?: [[true, string], [false, string]];
 }
 export type ColorType = "red" | "blue" | "green";
 export interface HTMLCheckBoxElement extends HTMLElement {
@@ -52,3 +57,4 @@ export interface HTMLElementFrame {
     disabled?: Disabled;
     onClick?: OnClick;
 }
+export {};

package/interface/Layout.d.ts

@@ -1,4 +1,5 @@
-import { OnClick } from "./Property";
+import { OnClick, State } from "./Property";
+import { ShowAction } from "./Widget";
 interface Notification {
     id: number;
     userId: number;
@@ -8,15 +9,29 @@ interface Notification {
     createdAt: Date;
     updatedAt: Date;
 }
+interface NotificationProps {
+    notifications?: Partial<Notification>[];
+    flag: boolean;
+    onClick: OnClick;
+    color?: string;
+}
+export interface MenuProps {
+    action?: ShowAction;
+    profile?: {
+        name: string;
+        belong: string;
+        image: string;
+    };
+    input?: {
+        password: State<string | undefined>;
+    };
+    onClick: OnClick;
+}
 export interface DashboardHeaderProps {
     title: string;
     logo?: React.ReactNode;
-    notification: {
-        notifications?: Partial<Notification>[];
-        flag: boolean;
-        onClick: OnClick;
-        color?: string;
-    };
+    notification: NotificationProps;
+    menu?: MenuProps;
     options?: {
         background?: string;
         text?: string;
@@ -31,8 +46,15 @@ export interface DashboardProps {
         background?: string;
     };
 }
+export interface MyPageProps extends DashboardProps {
+    profile: {
+        image: string;
+        username: string;
+        email: string;
+    };
+}
 export interface DashboardNotification {
-    isVisible?: boolean;
+    action?: ShowAction;
     notifications?: Partial<Notification>[];
 }
 export {};

package/interface/Modal.d.ts

@@ -1,23 +1,27 @@
-import { Button, Scripts, Size } from "./Property";
-export interface ModalProps {
-    isVisible?: boolean;
-    event?: string;
+import { Button, Scripts, Size, Titles } from "./Property";
+import { ShowAction } from "./Widget";
+interface Options {
+    width: Size;
+    height: Size;
+    padding: boolean;
+    buttons: Button[];
+    noClose: boolean;
+}
+interface ModalProps {
+    titles: Titles;
     children: React.ReactNode;
+    action?: ShowAction;
     className?: string;
-    options?: {
-        width?: Size;
-        height?: Size;
-        padding?: boolean;
-        buttons?: Button[];
-        isCloseButton?: boolean;
-        closeButtonColor?: string;
-    };
+    options?: Partial<Options>;
     debug?: string;
 }
-export interface AlertModalProps extends Omit<ModalProps, "children"> {
-    title: string;
+interface ConfirmModalProps extends ModalProps {
+    buttons: [Button, Button];
+}
+interface AlertModalProps extends Omit<ModalProps, "children"> {
     scripts: Scripts;
     options?: {
         buttons?: Button[];
     };
 }
+export type { ModalProps, ConfirmModalProps, AlertModalProps };

package/interface/Overlay.d.ts

@@ -1,9 +1,9 @@
 import { HTMLElementFrame, HTMLLabelElement } from "./HTMLElement";
 import { Titles } from "./Property";
+import { ShowAction } from "./Widget";
 export interface OverlayProps {
     titles: Titles;
-    isVisible?: boolean;
-    event?: string;
+    action?: ShowAction;
     children?: React.ReactNode;
 }
 export interface InfoOverlayProps extends OverlayProps {

package/interface/Property.d.ts

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
 import { Replace } from "./Widget";
+import { HTMLLabelElement } from "./HTMLElement";
 /**
  * State type for the React component
  * @template T
@@ -36,11 +37,13 @@ export type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "
  * @property {"full"} full - Full size
  */
 export type OnClick<T = unknown> = (prop?: T) => unknown | ((prop?: T) => Promise<unknown>);
-export type Button = [string, OnClick];
+export interface Button extends HTMLLabelElement {
+}
+export type FileRead = string | ArrayBuffer | null;
 export type Disabled = boolean | OnClick;
 export type Scripts = {
     script: string;
-    subScript?: string;
+    subscript?: string | string[];
 };
 export type Titles = {
     title: string;

package/interface/Widget.d.ts

@@ -10,6 +10,10 @@ type Event<T extends boolean | string | null | undefined> = [
 ];
 export type Show = Event<boolean | string>;
 export type Replace = Event<boolean | string | null | undefined>;
+export interface ShowAction {
+    event: string;
+    isVisible: boolean;
+}
 export interface ShowProps {
     widgets?: Show[];
     children: React.ReactNode;

package/layout/design/Tab.design.js

@@ -15,8 +15,8 @@ export default function Tab({ tabs, textColor, }) {
         sizes: "h-9 w-32 ",
         font: textColor ?? "text-green-dark",
     };
-    return (_jsx("div", { className: cn(container), children: tabs.map(([title, onClick], index) => (_jsx("button", { onClick: () => {
+    return (_jsx("div", { className: cn(container), children: tabs.map(({ title, onClick }, index) => (_jsx("button", { onClick: () => {
                 setTabsSelection(tabsSelection.map((_, i) => i === index));
-                return onClick();
+                return onClick && onClick();
             }, className: cn(button, `${tabsSelection[index] && "bg-white rounded-2xl"}`), children: title }, title))) }));
 }

package/layout/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Events } from "./template/Events";
-export { default as Dashboard } from "./template/Dashboard";
+export * from "./template/Dashboard";
+export { default as Promotion } from "./template/Promotion";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";

package/layout/index.js

@@ -1,5 +1,6 @@
 export { default as Events } from "./template/Events";
-export { default as Dashboard } from "./template/Dashboard";
+export * from "./template/Dashboard";
+export { default as Promotion } from "./template/Promotion";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";

package/layout/template/Dashboard.d.ts

@@ -1,5 +1,22 @@
 import Layout from "../widget/dashboard/Layout";
+import MyPageLayout from "../widget/dashboard/mypage/Layout";
+import Profile from "../widget/dashboard/mypage/Profile";
 declare const Dashboard: {
     Layout: typeof Layout;
 };
-export default Dashboard;
+declare const MyPage: {
+    Layout: typeof MyPageLayout;
+    Card: {
+        Profile: typeof Profile;
+        Navigate: {
+            Academy: ({ onClick }: {
+                onClick: import("../../interface").OnClick;
+            }) => import("react/jsx-runtime").JSX.Element;
+            Payment: ({ onClick }: {
+                onClick: import("../../interface").OnClick;
+            }) => import("react/jsx-runtime").JSX.Element;
+        };
+    };
+};
+export { default as buttonClassNames } from "./../widget/dashboard/buttonClassNames";
+export { Dashboard, MyPage };