@edu-tosel/design 1.0.19 → 1.0.21

package/interaction/widget/Sign.design.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+export default function SignDesign({ script, color, className, }) {
+    const container = {
+        displays: "flex flex-col justify-center items-center gap-2",
+        sizes: "w-full h-16.25",
+        className,
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: [_jsx("path", { d: "M8.75 23.75H31.25M8.75 23.75C7.42392 23.75 6.15215 23.2232 5.21447 22.2855C4.27678 21.3479 3.75 20.0761 3.75 18.75M8.75 23.75C7.42392 23.75 6.15215 24.2768 5.21447 25.2145C4.27678 26.1521 3.75 27.4239 3.75 28.75C3.75 30.0761 4.27678 31.3479 5.21447 32.2855C6.15215 33.2232 7.42392 33.75 8.75 33.75H31.25C32.5761 33.75 33.8479 33.2232 34.7855 32.2855C35.7232 31.3479 36.25 30.0761 36.25 28.75C36.25 27.4239 35.7232 26.1521 34.7855 25.2145C33.8479 24.2768 32.5761 23.75 31.25 23.75M31.25 23.75C32.5761 23.75 33.8479 23.2232 34.7855 22.2855C35.7232 21.3479 36.25 20.0761 36.25 18.75M3.75 18.75C3.75 17.4239 4.27678 16.1521 5.21447 15.2145C6.15215 14.2768 7.42392 13.75 8.75 13.75H31.25C32.5761 13.75 33.8479 14.2768 34.7855 15.2145C35.7232 16.1521 36.25 17.4239 36.25 18.75M3.75 18.75C3.75 17.1272 4.27633 15.5482 5.25 14.25L9.56167 8.5C10.0856 7.8014 10.765 7.23438 11.5461 6.84385C12.3272 6.45332 13.1884 6.25 14.0617 6.25M36.25 18.75C36.25 17.1272 35.7237 15.5482 34.75 14.25L30.4383 8.5C29.375 7.08333 27.7083 6.25 25.9383 6.25M31.25 28.75H31.2633V28.7633H31.25V28.75ZM31.25 18.75H31.2633V18.7633H31.25V18.75ZM26.25 28.75H26.2633V28.7633H26.25V28.75ZM26.25 18.75H26.2633V18.7633H26.25V18.75Z", stroke: color ?? "#910023", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M18 4L22 8M22 4L18 8", stroke: color ?? "#910023", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("div", { className: "text-sm", children: script })] }));
+}

package/interface/Board.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
 import { DataField, Size, State, Titles } from "./Property";
 import { EventsProps } from "./Widget";
+import { HTMLInputElement, HTMLLabelElement } from "./HTMLElement";
 interface OptionsProps {
     classNames?: string;
     width?: Size;
@@ -10,28 +10,25 @@ interface OptionsProps {
     noPadding?: boolean;
 }
 export interface BoardProps {
+    header?: BoardHeaderProps;
     children?: React.ReactNode;
     widgets?: EventsProps;
     options?: OptionsProps;
     debug?: string;
+    buttons?: HTMLLabelElement[];
 }
 export interface BoardHeaderProps {
-    titles?: Titles & {
+    titles?: Omit<Titles, "subtitle"> & {
         icon?: string;
     };
-    tags?: {
+    tag?: {
         selects?: {
             title: string;
             state: State<string>;
             options: [string | number, string][];
             width?: Size;
         }[];
-        inputs?: {
-            state: State<string>;
-            placeholder?: string;
-            title?: string;
-            width?: Size;
-        }[];
+        inputs?: HTMLInputElement[];
     };
     options?: {
         colors?: {
@@ -40,20 +37,18 @@ export interface BoardHeaderProps {
         };
     };
 }
+export interface CanvasBoardProps extends BoardProps {
+}
 export interface ManageBoardProps<T> extends BoardProps {
-    data: {
-        dataSets: {
-            items: T[] | undefined;
-            renderItem: (item: T) => React.ReactNode;
-            titles?: Titles;
-            interaction?: React.ReactNode;
-        }[];
-        dataField?: {
-            [p in keyof T]?: Partial<DataField>;
-        };
-        gap?: number;
+    dataSets: {
+        items: T[] | undefined;
+        renderItem: (item: T) => React.ReactNode;
+        titles?: Titles;
+        interaction?: React.ReactNode;
+    }[];
+    dataField?: {
+        [p in keyof T]?: Partial<DataField>;
     };
-    header?: BoardHeaderProps;
 }
 export interface PaperBoardProps extends BoardProps {
 }

package/interface/Card.d.ts

@@ -1,7 +1,7 @@
 import { Button, DataField, ImageSize, OnClick, Size, Titles } from "./Property";
 interface CardOptions {
     classNames?: string;
-    boundary?: "shadow" | "border" | "none";
+    boundary?: string;
     rounded?: string;
     height?: Size;
     width?: Size;
@@ -11,6 +11,7 @@ interface CardOptions {
     onClick?: OnClick;
     overflow?: "hiden" | "y-scroll" | "auto";
     noPadding?: boolean;
+    padding?: string | false;
     noShadow?: boolean;
 }
 export interface CardProps {
@@ -74,6 +75,16 @@ export interface InfoCardProps extends CardProps {
         titleBorder?: string;
     } & CardOptions;
 }
+export interface InfoCardPersonalInformationProps extends Omit<InfoCardProps, "children"> {
+    data: {
+        school: string;
+        academy: string;
+        username: string;
+        name: string;
+        email: string;
+        phone: string;
+    };
+}
 export interface InfoCardExamProps extends Omit<InfoCardProps, "children"> {
     data: {
         status: string;
@@ -83,6 +94,17 @@ export interface InfoCardExamProps extends Omit<InfoCardProps, "children"> {
         isPublic: boolean;
     };
 }
+export interface InfoCardExamDataREGProps extends Omit<InfoCardProps, "children"> {
+    data?: {
+        scores: number[];
+    };
+}
+export interface InfoCardExamDataOLYProps extends Omit<InfoCardProps, "children"> {
+    data?: {
+        score: number;
+        prize: string | null;
+    };
+}
 export interface InfoCardProductProps extends Omit<InfoCardProps, "children"> {
     data: {
         date?: string;
@@ -92,16 +114,42 @@ export interface InfoCardProductProps extends Omit<InfoCardProps, "children"> {
         button?: Button;
     };
 }
+export interface InfoCardItemProps extends Omit<InfoCardProps, "children"> {
+    data: {
+        item: string;
+    };
+}
+export interface InfoCardGradeProps extends Omit<InfoCardProps, "children"> {
+    data: {
+        level?: string;
+        levelString?: string;
+        levelColor?: string;
+        profileImage?: string;
+        score?: number;
+        grade?: number;
+    };
+}
 export interface AddCardProps extends Omit<CardProps, "children"> {
     title?: string;
     icon?: string;
     onClick: OnClick;
 }
 export interface TableCardProps<T> extends Omit<CardProps, "children"> {
-    dataSets: T[];
+    dataSet: {
+        items: T[];
+        onClick?: OnClick<T>;
+        noData?: React.ReactNode;
+    };
     dataField: {
         [p in keyof T]?: Partial<DataField>;
     };
-    options?: CardOptions;
+    options?: CardOptions & {
+        className?: string;
+        limit?: number;
+        rowHeight?: string;
+        noHover?: boolean;
+        noRowPadding?: boolean;
+        noHeader?: boolean;
+    };
 }
 export {};

package/interface/HTMLElement.d.ts

@@ -27,6 +27,7 @@ export interface HTMLSelectElement extends HTMLElement {
 }
 export interface HTMLInputElement extends HTMLElement {
     state: State<string>;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
     placeholder?: string;
 }
 export interface HTMLToggleElement extends HTMLElement {

package/interface/Property.d.ts

@@ -34,7 +34,7 @@ export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
  * @property {"sub"} sub - Sub size
  * @property {"full"} full - Full size
  */
-export type OnClick = () => unknown | (() => Promise<unknown>);
+export type OnClick<T = unknown> = (prop?: T) => unknown | ((prop?: T) => Promise<unknown>);
 export type Button = [string, OnClick];
 export type Scripts = {
     script: string;
@@ -45,6 +45,8 @@ export type Titles = {
     subtitle?: string | string[];
     isSub?: boolean;
     color?: string;
+    titleColor?: string;
+    subtitleColor?: string;
 };
 export type DataField = {
     title: string | number;

package/interface/Widget.d.ts

@@ -32,15 +32,17 @@ export interface DataFieldProps<T> {
     };
 }
 export interface RowProps<T> {
-    onClick?: OnClick;
-    dataSet: T;
+    onClick?: OnClick<T>;
+    item: T;
     dataField?: {
         [p in keyof T]?: Partial<DataField>;
     };
     options?: {
+        height?: string;
         size?: string;
         padding?: string;
         text?: string;
+        noHover?: boolean;
     };
 }
 export {};

package/layout/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Events } from "./template/Events";
-export { default as Dashboard } from "./template/dashboard";
+export { default as Dashboard } from "./template/Dashboard";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";

package/layout/index.js

@@ -1,5 +1,5 @@
 export { default as Events } from "./template/Events";
-export { default as Dashboard } from "./template/dashboard";
+export { default as Dashboard } from "./template/Dashboard";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";

package/layout/template/Dashboard.d.ts

@@ -0,0 +1,5 @@
+import Layout from "../widget/dashboard/Layout";
+declare const Dashboard: {
+    Layout: typeof Layout;
+};
+export default Dashboard;

package/layout/template/Dashboard.js

@@ -0,0 +1,5 @@
+import Layout from "../widget/dashboard/Layout";
+const Dashboard = {
+    Layout,
+};
+export default Dashboard;

package/layout/template/Row.d.ts

@@ -1,6 +1,10 @@
 import { RowProps } from "../../interface";
-declare function Board<T extends Record<string, any>>({ dataSet, dataField, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
-declare function Card<T extends Record<string, any>>({ dataSet, dataField, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Board<T extends Record<string, any>>({ item, dataField, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Card<T extends Record<string, any>>({ item, dataField, onClick, height, noPadding, noHover, }: Omit<RowProps<T>, "options"> & {
+    height?: string;
+    noPadding?: boolean;
+    noHover?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
 declare const Row: {
     Board: typeof Board;
     Card: typeof Card;

package/layout/template/Row.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import RowDesign from "../widget/Row.design";
-function Board({ dataSet, dataField, onClick, }) {
+function Board({ item, dataField, onClick, }) {
     const id = useId();
-    return (_jsx(RowDesign, { onClick: onClick, dataSet: dataSet, dataField: dataField, options: {
+    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, options: {
             size: "w-full h-12",
             padding: "px-2 xs:px-4 xl:px-7.5",
             text: "text-xl",
         } }, id));
 }
-function Card({ dataSet, dataField, onClick, }) {
+function Card({ item, dataField, onClick, height, noPadding, noHover, }) {
     const id = useId();
-    return (_jsx(RowDesign, { onClick: onClick, dataSet: dataSet, dataField: dataField, options: {
-            size: "w-full h-10",
-            padding: "px-2 xs:px-4 xl:px-7.5",
+    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, options: {
+            size: `w-full ${height ?? "h-12"}`,
+            padding: !noPadding ? "px-2 xs:px-4 xl:px-7.5" : "",
             text: "text-base",
+            noHover,
         } }, id));
 }
 const Row = {

package/layout/widget/Row.design.d.ts

@@ -1,2 +1,2 @@
 import { RowProps } from "../../interface";
-export default function RowDesign<T extends Record<string, any>>({ dataSet, dataField, options, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function RowDesign<T extends Record<string, any>>({ item, dataField, options, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/widget/Row.design.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../../util";
-export default function RowDesign({ dataSet, dataField, options, onClick, }) {
-    const { size, padding, text } = options ?? {};
+export default function RowDesign({ item, dataField, options, onClick, }) {
+    const { size, padding, text, noHover } = options ?? {};
     const id = useId();
     const container = {
         displays: "flex items-center ",
         sizes: size,
         paddings: padding,
         text: text,
-        styles: "hover:bg-gray-100 duration-100",
+        styles: !noHover && "hover:bg-gray-100 duration-100",
     };
-    return (_jsx("div", { className: cn(container), onClick: onClick, children: dataField &&
-            Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100 truncate`, children: dataSet[key] }, id + key))) }));
+    return (_jsx("div", { className: cn(container), onClick: () => onClick?.(), children: dataField &&
+            Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100 truncate`, children: item[key] }, id + key))) }));
 }

package/layout/widget/dashboard/Header.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import { useWidgetStore } from "../../../store";
+import Menu from "./Menu";
+import { Events } from "../..";
+export function Header({ title, logo, options }) {
+    const { events, setView, setIsOwn } = useWidgetStore();
+    const { text, background, className } = options ?? {};
+    const { isDark, setDark } = useWidgetStore();
+    const container = {
+        positions: "fixed xl:static top-0 left-0 z-40",
+        displays: "flex items-center justify-between ",
+        sizes: "h-15 w-full",
+        background: `${background ?? "bg-white"} dark:bg-black`,
+        text: `${text ?? "text-black"} dark:text-white`,
+        styles: "px-5 xl:px-8 2xl:px-16 ",
+        className,
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? (_jsx("a", { href: logo.href, children: _jsx("img", { src: logo.image, alt: "logo", className: "h-6.25 w-28.78" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Events.Show, { widgets: [["menu", _jsx(Menu, { image: "/images/hani.png" })]], children: [_jsx("svg", { className: "cursor-pointer", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938", stroke: "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("svg", { className: "cursor-pointer", onClick: () => {
+                                setIsOwn(true);
+                                return setView("menu");
+                            }, xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M18.7313 19.5053C18.0034 18.5416 17.0618 17.7601 15.9804 17.2223C14.8991 16.6846 13.7077 16.4052 12.5 16.4063C11.2924 16.4052 10.101 16.6846 9.01964 17.2223C7.93832 17.7601 6.99664 18.5416 6.26878 19.5053M18.7313 19.5053C20.1516 18.2419 21.1533 16.5767 21.6054 14.7304C22.0576 12.884 21.9378 10.9439 21.262 9.16722C20.5862 7.39055 19.3862 5.86128 17.8213 4.78224C16.2564 3.7032 14.4004 3.12537 12.4995 3.12537C10.5986 3.12537 8.74267 3.7032 7.17775 4.78224C5.61282 5.86128 4.41288 7.39055 3.73705 9.16722C3.06122 10.9439 2.94144 12.884 3.3936 14.7304C3.84575 16.5767 4.84847 18.2419 6.26878 19.5053M18.7313 19.5053C17.0167 21.0346 14.7976 21.8783 12.5 21.8751C10.2021 21.8786 7.98361 21.0349 6.26878 19.5053M15.625 10.1563C15.625 10.9851 15.2958 11.78 14.7097 12.366C14.1237 12.9521 13.3288 13.2813 12.5 13.2813C11.6712 13.2813 10.8764 12.9521 10.2903 12.366C9.70427 11.78 9.37503 10.9851 9.37503 10.1563C9.37503 9.32751 9.70427 8.53265 10.2903 7.9466C10.8764 7.36055 11.6712 7.03131 12.5 7.03131C13.3288 7.03131 14.1237 7.36055 14.7097 7.9466C15.2958 8.53265 15.625 9.32751 15.625 10.1563Z", stroke: "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) })] }));
+}

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

@@ -0,0 +1,2 @@
+import { DashboardProps } from "../../../interface";
+export default function Layout({ header, navigations, children, options, }: DashboardProps): import("react/jsx-runtime").JSX.Element;

package/layout/{template/dashboard/index.js → widget/dashboard/Layout.js}

@@ -4,7 +4,7 @@ import { NavigationContainer } from "../../../navigation";
 import { Header } from "./Header";
 import { cn } from "../../../util";
 import { useWidgetStore } from "../../../store";
-function Layout({ header, navigations, children, options }) {
+export default function Layout({ header, navigations, children, options, }) {
     const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useWidgetStore();
     const { title, options: headerOptions, logo } = header;
     const { background } = options ?? {};
@@ -27,7 +27,3 @@ function Layout({ header, navigations, children, options }) {
     };
     return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, options: headerOptions, logo: logo }), _jsxs("div", { className: cn(body), children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
 }
-const Dashboard = {
-    Layout,
-};
-export default Dashboard;

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

@@ -0,0 +1,4 @@
+export default function Menu({ isVisible, image, }: {
+    isVisible?: boolean;
+    image: string;
+}): JSX.Element;

package/layout/widget/dashboard/Menu.js

@@ -0,0 +1,20 @@
+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 Menu({ isVisible, image, }) {
+    const { setIsOwn } = useWidgetStore();
+    const container = {
+        displays: "flex flex-col",
+        positions: "absolute top-8 right-0 z-45 ",
+        sizes: "w-72 ",
+        styles: " bg-white box-shadow",
+    };
+    const transitions = useTransition(isVisible, {
+        from: { opacity: 0 },
+        enter: { opacity: 1 },
+        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-48 flex gap-12 justify-center items-center text-black", children: [_jsx("img", { src: image, className: "rounded-full w-20 h-20" }), _jsxs("div", { children: [_jsx("div", { children: "\uD31C\uD558\uB2C8" }), _jsx("div", { className: "text-xs", children: "\uB274\uC9C4\uC2A4 \uCD08\uB4F1\uD559\uAD50" })] })] }), _jsx("a", { href: "/user", className: "flex justify-center py-3 px-5 hover:bg-gray-light", children: "\uB300\uC2DC\uBCF4\uB4DC" }), _jsx("a", { href: "/mypage", className: "flex justify-center py-3 px-5 hover:bg-gray-light", children: "My Page" })] })));
+}

package/modal/widget/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;
+export default function ModalDesign({ isVisible, event, children, options, debug, }: ModalProps): import("react").ReactPortal | null;

package/modal/widget/Modal.design.js

@@ -4,6 +4,7 @@ import { useTransition, animated } from "react-spring";
 import { useWidgetStore } from "../../store";
 import { cn } from "../../util";
 import isDebug from "../../util/isDebug";
+import { useEffect, useState } from "react";
 const widthSize = {
     xs: "w-2/3 min-w-76 max-w-176",
     sm: "w-2/3 min-w-76 max-w-176",
@@ -24,7 +25,11 @@ const heightSize = {
 };
 export default function ModalDesign({ isVisible, event, children, options, debug, }) {
     const { buttons, width, height, closeButtonColor, isCloseButton } = options ?? {};
+    const [detection, setDetection] = useState(null);
     const { setIsOwn, removeModal } = useWidgetStore();
+    useEffect(() => {
+        setDetection(document.getElementById("portal"));
+    }, []);
     const background = {
         positions: "z-50 fixed top-0 left-0",
         displays: "flex items-center justify-center ",
@@ -60,5 +65,6 @@ export default function ModalDesign({ isVisible, event, children, options, debug
         leave: { opacity: 0 },
         config: { duration: 200 },
     });
-    return 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);
+    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));
 }

package/navigation/Navigation.js

@@ -8,7 +8,7 @@ export const buttonClassNames = (href, nowPath, color) => {
     const container = {
         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-2xl xl:pl-5 font-bold ",
+        styles: "xl:rounded-lg xl:pl-5 font-bold ",
     };
     const toggle = checkPathMatch(href, nowPath)
         ? !isDark

package/package.json

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

package/tailwind.config.ts

@@ -49,6 +49,7 @@ export default {
         "white-off": "#F5F5F5",
         "red-burgundy": "#933652",
         "crimson-burgundy": "#910023",
+        "crimson-burgundy-light": "#EDDFE2",
         "crimson-dark": "#760023",
         "red-crimson": "#760023",
         "red-velvet": "#AC647A",
@@ -91,6 +92,7 @@ export default {
         4.25: "1.0625rem",
         4.75: "1.1875rem",
         5.25: "1.3125rem",
+        5.75: "1.4375rem",
         6.25: "1.5625rem",
         6.4: "1.6rem",
         6.5: "1.625rem",
@@ -102,6 +104,7 @@ export default {
         10.25: "2.5625rem",
         11: "2.75rem",
         11.25: "2.8125rem",
+        11.375: "2.84375rem",
         12: "3rem",
         13.25: "3.3125rem",
         13.75: "3.4375rem",
@@ -111,6 +114,7 @@ export default {
         15: "3.75rem",
         16: "4rem",
         18: "4.5rem",
+        18.5: "4.625rem",
         18.75: "4.6875rem",
         19: "4.75rem",
         19.25: "4.8125rem",
@@ -131,6 +135,7 @@ export default {
         30: "7.5rem",
         34: "8.5rem",
         36: "9rem",
+        36.75: "9.1875rem",
         38: "9.5rem",
         40: "10rem",
         41: "10.25rem",
@@ -175,6 +180,7 @@ export default {
         120: "30rem",
         122: "30.5rem",
         124: "31rem",
+        125: "31.25rem",
         126: "31.5rem",
         127.5: "31.875rem",
         128: "32rem",

package/util/colors.d.ts

@@ -10,10 +10,18 @@ export declare const gradientBackground: {
     greenToRed: string;
     greenToRedSoft: string;
 };
+export declare const gradientBorder: {
+    greenToRed: string;
+    greenToRedSoft: string;
+};
 export declare const gradient: {
     bg: {
         lab: string;
         greenToRed: string;
         greenToRedSoft: string;
     };
+    border: {
+        greenToRed: string;
+        greenToRedSoft: string;
+    };
 };

package/util/colors.js

@@ -10,6 +10,11 @@ export const gradientBackground = {
     greenToRed: "bg-gradient-to-r from-green-dark to-red-crimson",
     greenToRedSoft: "bg-gradient-to-r from-green-dark/20 to-red-crimson/20",
 };
+export const gradientBorder = {
+    greenToRed: "border-gradient-to-r from-green-dark to-crimson-burgundy",
+    greenToRedSoft: "border-gradient-to-r from-green-dark/20 to-red-crimson/20",
+};
 export const gradient = {
     bg: gradientBackground,
+    border: gradientBorder,
 };

package/util/index.d.ts

@@ -4,7 +4,6 @@ export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
 export { default as checkPathMatch } from "./checkPathMatch";
 export * from "./colors";
-export * from "./hooks";
 export * from "./pattern";
 export * from "./shape";
-export * from "./hooks";
+export * from "../hook";

package/util/index.js

@@ -4,7 +4,6 @@ export { default as isDebug } from "./isDebug";
 export { default as sortByOrder } from "./sortByOrder";
 export { default as checkPathMatch } from "./checkPathMatch";
 export * from "./colors";
-export * from "./hooks";
 export * from "./pattern";
 export * from "./shape";
-export * from "./hooks";
+export * from "../hook";

package/version.txt

@@ -1 +1 @@
-1.0.19
+1.0.21

package/layout/template/dashboard/Header.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { cn } from "../../../util";
-import { useWidgetStore } from "../../../store";
-export function Header({ title, logo, options }) {
-    const { text, background, className } = options ?? {};
-    const { isDark, setDark } = useWidgetStore();
-    const [isOpen, setIsOpen] = useState(false);
-    const container = {
-        positions: "fixed xl:static top-0 left-0 z-40",
-        displays: "flex items-center justify-between ",
-        sizes: "h-15 w-full",
-        background: `${background ?? "bg-white"} dark:bg-black`,
-        text: `${text ?? "text-black"} dark:text-white`,
-        styles: "px-5 xl:px-8 2xl:px-16 ",
-        className,
-    };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? (_jsx("a", { href: logo.href, children: _jsx("img", { src: logo.image, alt: "logo", className: "h-6.25 w-28.78" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-bold", children: title })] }), _jsx("button", { onClick: setDark, children: "DARK" })] }));
-}

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

@@ -1,6 +0,0 @@
-import { DashboardProps } from "../../../interface";
-declare function Layout({ header, navigations, children, options }: DashboardProps): import("react/jsx-runtime").JSX.Element;
-declare const Dashboard: {
-    Layout: typeof Layout;
-};
-export default Dashboard;

package/util/hooks.d.ts

@@ -1,4 +0,0 @@
-export declare function useEase(inTime: number, outTime: number): readonly [boolean, number];
-type Event = readonly [boolean, string];
-export declare function useEvents(args: Event[]): string[];
-export {};