@edu-tosel/design 1.0.37 → 1.0.39

package/board/design/Board.design.js

@@ -5,9 +5,9 @@ const widthSize = {
     xs: "w-20",
     sm: "w-24",
     md: "w-28",
-    lg: "w-full max-w-280",
+    lg: "w-3/10 max-w-135",
     xl: "w-full",
-    "2xl": "w-40",
+    "2xl": "w-full max-w-320",
     full: "w-full",
     auto: "w-auto",
 };
@@ -23,10 +23,11 @@ const heightSize = {
 };
 export function Board({ children, widgets, options, debug, buttons, }) {
     const { shows } = widgets ?? {};
-    const { width, height, isRounded, className } = options ?? {};
+    const { width, height, isRounded, className, noMobile } = options ?? {};
     const container = {
         positions: "relative",
         width: widthSize[width ?? "full"],
+        noMobile: noMobile && "hidden xl:block",
         debug: debug && isDebug(`border-2  border-${debug}`),
     };
     const body = {

package/board/template/ManageBoard.js

@@ -6,7 +6,7 @@ import { cn, sortByOrder } from "../../util";
 import { useWidgetStore } from "../../store";
 import { useId } from "react";
 export default function ManageBoard({ header, dataSets, dataField, widgets, options, buttons, }) {
-    const { className, noPadding } = options ?? {};
+    const { className, noPadding, width, noMobile } = options ?? {};
     const { order } = useWidgetStore();
     const id = useId();
     const orders = order[id] ?? [];
@@ -16,6 +16,10 @@ export default function ManageBoard({ header, dataSets, dataField, widgets, opti
         paddings: `${!noPadding ? "pt-7.5 pb-60 px-2 xs:pl-4 xl:pl-7.5 xl:pb-7.5 " : ""} `,
         styles: "overflow-y-scroll",
     };
-    return (_jsxs(Board, { widgets: widgets, buttons: buttons, options: { isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), dataField && _jsx(DataField.Board, { id: id, dataField: dataField }), _jsx("div", { className: cn(container), children: _jsx(Events.Replace, { widgets: widgets?.replaces, children: dataSets.map(({ titles, items, renderItem, interaction }, index) => (_jsxs(Shelf.Wrap, { titles: titles, options: { gap: "x" }, className: className, children: [items &&
+    return (_jsxs(Board, { widgets: widgets, buttons: buttons, options: {
+            width,
+            isRounded: true,
+            noMobile,
+        }, children: [header && _jsx(BoardHeader, { ...header }), dataField && _jsx(DataField.Board, { id: id, dataField: dataField }), _jsx("div", { className: cn(container), children: _jsx(Events.Replace, { widgets: widgets?.replaces, children: dataSets.map(({ titles, items, renderItem, interaction }, index) => (_jsxs(Shelf.Wrap, { titles: titles, options: { gap: "x" }, className: className, children: [items &&
                                 sortByOrder({ items, orders })?.map((item) => renderItem(item)), interaction] }, id + index))) }) })] }));
 }

package/board/widget/Header.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { cn } from "../../util";
 import { Input, Select } from "../../html";
 export default function BoardHeader({ titles, tag, options, }) {
-    const { title, icon } = titles ?? {};
+    const { title, icon, titleColor } = titles ?? {};
     const { selects, inputs } = tag ?? {};
-    const { colors } = options ?? {};
+    const { colors, titleBorder } = options ?? {};
     const { bgColor, textColor } = colors ?? {
         bgColor: "white",
         textColor: "black",
@@ -14,11 +14,11 @@ export default function BoardHeader({ titles, tag, options, }) {
         paddings: "px-7.5",
         styles: `${bgColor} ${textColor}`,
         sizes: "w-full h-19",
-        border: "border-b-2 border-green-dark",
+        border: `border-b-2 ${titleBorder ?? "border-green-dark"}`,
     };
     const block = {
         displays: "xl:hidden block ",
         sizes: "w-full h-19",
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: "text-2xl font-pretendard-bold text-green-dark", children: title })] }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ selectOptions, options, state }, index) => (_jsx("div", { className: "flex items-center gap-2", children: _jsx(Select, { options: options, selectOptions: selectOptions, state: state }, title) }, index))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: `text-2xl font-pretendard-bold ${titleColor}`, children: title })] }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ selectOptions, options, state }, index) => (_jsx("div", { className: "flex items-center gap-2", children: _jsx(Select, { options: options, selectOptions: selectOptions, state: state }, title) }, index))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
 }

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

@@ -1,2 +1,16 @@
-import { InfoCardExamProps } from "../../../interface";
-export default function Exam({ titles, data }: InfoCardExamProps): import("react/jsx-runtime").JSX.Element;
+import { InfoCardProps } from "../../../interface";
+interface Data {
+    button: {
+        title: string;
+        hoverTitle?: string;
+    };
+    examDate: string;
+    endDate: string;
+    manager: string;
+    isPublic: boolean;
+}
+export interface ExamProps extends Omit<InfoCardProps, "children"> {
+    data: Data;
+}
+export default function Exam({ titles, data, options }: ExamProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/template/InfoCard/Exam.js

@@ -3,16 +3,23 @@ import { Label } from "../../../html";
 import { cn } from "../../../util";
 import { InfoCardDesign } from "../../design/InfoCard.design";
 import { label } from "./static/label";
-export default function Exam({ titles, data }) {
-    const { status, isPublic, manager, examDate, endDate } = data;
+export default function Exam({ titles, data, options }) {
+    const { button, isPublic, manager, examDate, endDate } = data;
+    const { onClick, titleBorder } = options ?? {};
     const container = {
         positions: "relative",
         displays: "flex flex-col justify-between mt-2.5",
         sizes: "h-19.25 w-full",
     };
     return (_jsx(InfoCardDesign, { titles: titles, options: {
-            titleBorder: "border-red-crimson",
+            titleBorder: titleBorder ?? "border-red-crimson",
             width: "sm",
             height: "xs",
-        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-4 font-pretendard-bold ", children: [manager, " / ", isPublic ? "공개시험" : "비공개시험"] }), _jsxs("div", { children: [_jsxs("div", { className: "text-xs", children: ["\uC811\uC218\uB9C8\uAC10: ", endDate] }), _jsxs("div", { className: "text-xs", children: ["\uC2DC\uD5D8\uC77C: ", examDate] })] })] }), _jsx(Label.Button, { title: status, onClick: () => { }, options: { width: "sm", height: "xs", className: cn(label) } })] }) }));
+        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-4 font-pretendard-bold ", children: [manager, " / ", isPublic ? "공개시험" : "비공개시험"] }), _jsxs("div", { children: [_jsxs("div", { className: "text-xs", children: ["\uC811\uC218\uB9C8\uAC10: ", endDate] }), _jsxs("div", { className: "text-xs", children: ["\uC2DC\uD5D8\uC77C: ", examDate] })] })] }), _jsx(Label.Button, { title: button.title, hoverTitle: button.hoverTitle, onClick: onClick, options: {
+                        width: "sm",
+                        height: "xs",
+                        className: cn(label),
+                        text: "text-white hover:text-crimson-burgundy",
+                        background: "bg-crimson-burgundy hover:bg-gray-light",
+                    } })] }) }));
 }

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

@@ -1,8 +1,13 @@
-import { DataPackage, InfoCardProps, State } from "../../../interface";
+import { DataPackage, InfoCardProps, OnClick, State } from "../../../interface";
 export interface InfoCardFinanceProps<N, C> extends Omit<InfoCardProps, "children"> {
     data: {
         taxRate: number;
         taxState: State<boolean>;
+        result: string;
+        download: OnClick;
+        latestDownloadDate: string;
+        refresh: OnClick;
+        lock: State<boolean>;
         dataSets?: {
             title: string;
             sum: number | string;

package/card/template/InfoCard/Finance.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toggle } from "../../../html";
 import { cn } from "../../../util";
 import { InfoCardDesign } from "../../design/InfoCard.design";
 import { useId } from "react";
@@ -13,7 +14,10 @@ export default function Finance({ titles, data, }) {
             titleBorder: "border-green-dark",
             width: "2xl",
             height: "xl",
-        }, topRight: _jsxs("div", { className: "flex items-center gap-2.5 text-xs ", children: [_jsx("button", { onClick: () => setTaxOn(!taxOn), className: cn("w-4 h-4 rounded-md", taxOn ? "bg-green-dark" : "border-1") }), _jsxs("div", { children: ["\uC0AC\uC5C5\uC18C\uB4DD\uC138 ", taxRate, "%"] })] }), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "flex gap-7.5 mt-4.25 border-b-1 border-green-dark pb-2.5 ", children: dataSets?.map(({ title, sum, tax, total, rate, amount, number, result }, index) => (_jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx("div", { className: "font-pretendard-bold text-green-dark", children: title }), _jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: "flex flex-col justify-between w-20", children: [number && (_jsx(Numbers, { title: number.title, dataSet: number.dataSet, dataField: number.dataField })), _jsx(Result, { title: "\uBE44\uC728", amount: `${rate}%` })] }), amount && (_jsxs("div", { className: "flex flex-col", children: [_jsx(Amount, { title: amount.title, dataSet: amount.dataSet, dataField: amount.dataField }), _jsxs("div", { className: "flex flex-col gap-1.5 mt-2.5", children: [_jsx(Result, { title: "\uD569\uACC4", amount: sum, cnTitle: "text-gray-dim" }), _jsx(Result, { title: "\uC0AC\uC5C5\uC18C\uB4DD\uC138", amount: `${typeof tax === "number" && tax ? "-" : ""}${tax.toLocaleString()}`, cnTitle: "text-gray-dim", cnAmount: "text-crimson-burgundy" }), _jsx(Result, { title: "\uCD1D\uACC4", amount: total, background: "bg-green-dark/10", cnTitle: "font-pretendard-bold" })] }), _jsx(Result, { title: "\uC9C0\uAE09\uBD84", amount: result, background: "bg-green-dark", cnTitle: "font-pretendard-bold text-white", className: "text-white mt-5" })] }))] })] }, id + index))) }), _jsx("div", { className: "flex items-center h-15.5", children: _jsx("div", { className: "w-45 h-10 bg-gray-light rounded-md" }) })] }) }));
+        }, topRight: _jsxs("div", { className: "flex items-center gap-2.5 text-xs ", children: [_jsx("button", { onClick: () => setTaxOn(!taxOn), className: cn("w-4 h-4 rounded-md", taxOn ? "bg-green-dark" : "border-1") }), _jsxs("div", { children: ["\uC0AC\uC5C5\uC18C\uB4DD\uC138 ", taxRate, "%"] })] }), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "flex gap-7.5 mt-4.25 border-b-1 border-green-dark pb-2.5 ", children: dataSets?.map(({ title, sum, tax, total, rate, amount, number, result }, index) => (_jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx("div", { className: "font-pretendard-bold text-green-dark", children: title }), _jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: "flex flex-col justify-between w-20", children: [number && (_jsx(Numbers, { title: number.title, dataSet: number.dataSet, dataField: number.dataField })), _jsx(Result, { title: "\uBE44\uC728", amount: `${rate}%` })] }), amount && (_jsxs("div", { className: "flex flex-col", children: [_jsx(Amount, { title: amount.title, dataSet: amount.dataSet, dataField: amount.dataField }), _jsxs("div", { className: "flex flex-col gap-1.5 mt-2.5", children: [_jsx(Result, { title: "\uD569\uACC4", amount: sum, cnTitle: "text-gray-dim" }), _jsx(Result, { title: "\uC0AC\uC5C5\uC18C\uB4DD\uC138", amount: `${typeof tax === "number" && tax ? "-" : ""}${tax.toLocaleString()}`, cnTitle: "text-gray-dim", cnAmount: "text-crimson-burgundy" }), _jsx(Result, { title: "\uCD1D\uACC4", amount: total, background: "bg-green-dark/10", cnTitle: "font-pretendard-bold" })] }), _jsx(Result, { title: "\uC9C0\uAE09\uBD84", amount: result, background: "bg-green-dark", cnTitle: "font-pretendard-bold text-white", className: "text-white mt-5" })] }))] })] }, id + index))) }), _jsx("div", { className: "flex items-center w-full h-15.5", children: _jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsx("div", { className: "w-45 h-10 bg-gray-light rounded-md flex justify-center items-center text-sm font-pretendard-bold text-green-dark", children: data.result }), _jsxs("div", { className: "flex items-center gap-2.5", children: [_jsxs("div", { className: "text-xs text-gray-dim", children: ["\uB9C8\uC9C0\uB9C9 \uB2E4\uC6B4\uB85C\uB4DC: ", data.latestDownloadDate] }), _jsx("button", { onClick: data.refresh, className: "w-6.25 h-6.25 rounded-md box-shadow flex justify-center items-center", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M13.3526 7.78995H17.5126L14.8618 5.13745C14.0084 4.28401 12.9453 3.67028 11.7795 3.35795C10.6137 3.04563 9.38616 3.04572 8.22037 3.35822C7.05459 3.67072 5.99162 4.28461 5.13832 5.13817C4.28501 5.99174 3.67145 7.0549 3.35932 8.22078M2.48765 16.3699V12.2099M2.48765 12.2099H6.64765M2.48765 12.2099L5.13765 14.8624C5.99108 15.7159 7.05414 16.3296 8.21997 16.6419C9.3858 16.9543 10.6133 16.9542 11.7791 16.6417C12.9449 16.3292 14.0078 15.7153 14.8611 14.8617C15.7145 14.0082 16.328 12.945 16.6402 11.7791M17.5126 3.62995V7.78828", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("button", { className: "bg-green-dark text-white w-22.5 h-6.25 text-xs rounded-md", onClick: data.download, children: "\uC5D1\uC140 \uB2E4\uC6B4\uB85C\uB4DC" }), _jsx(Toggle, { labels: [
+                                            [true, "잠금"],
+                                            [false, "수정 중"],
+                                        ], state: data.lock })] })] }) })] }) }));
 }
 function Numbers({ title, dataSet, dataField, }) {
     const id = useId();

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

@@ -1,2 +1,16 @@
-import { InfoCardGradeProps } from "../../../interface";
-export default function Grade({ titles, data }: InfoCardGradeProps): import("react/jsx-runtime").JSX.Element;
+import { InfoCardProps } from "../../../interface";
+interface Data {
+    position: string;
+    age: number;
+    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 {};

package/card/template/InfoCard/Grade.js

@@ -19,7 +19,7 @@ export default function Grade({ titles, data }) {
             titleBorder: "border-blue-navy",
             width: "sm",
             height: "xs",
-        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-5", children: [_jsx("div", { className: cn(levelBox), children: data.levelString }), _jsx("span", { className: "text-sm", children: "\uD559\uC6D0\uC0DD, 23\uC138" })] }), _jsxs("div", { className: "absolute bottom-0 left-0 flex items-end gap-8 text-blue-navy", children: [_jsxs("div", { className: "w-20 h-12 flex justify-end items-end", children: [_jsx("div", { className: "leading-none text-4xl font-pretendard-bold", children: data.score }), _jsx("div", { children: "\uC810" })] }), _jsxs("div", { className: "w-14 h-12 flex justify-end items-end", children: [_jsx("div", { className: "leading-none text-4xl font-pretendard-bold", children: data.grade }), _jsx("div", { children: "\uB4F1\uAE09" })] })] })] }), _jsx(Label.Button, { title: "\uC0C1\uC138\uBCF4\uAE30", onClick: () => { }, options: {
+        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-5", children: [_jsx("div", { className: cn(levelBox), children: data.levelString }), _jsxs("span", { className: "text-sm", children: [data.position, ", ", data.age, "\uC138"] })] }), _jsxs("div", { className: "absolute bottom-0 left-0 flex items-end gap-8 text-blue-navy", children: [_jsxs("div", { className: "w-20 h-12 flex justify-end items-end", children: [_jsx("div", { className: "leading-none text-4xl font-pretendard-bold", children: data.score }), _jsx("div", { children: "\uC810" })] }), _jsxs("div", { className: "w-14 h-12 flex justify-end items-end", children: [_jsx("div", { className: "leading-none text-4xl font-pretendard-bold", children: data.grade }), _jsx("div", { children: "\uB4F1\uAE09" })] })] })] }), _jsx(Label.Button, { title: "\uC0C1\uC138\uBCF4\uAE30", onClick: () => { }, options: {
                         width: "sm",
                         height: "xs",
                         text: "text-white hover:text-blue-navy",

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

@@ -1,2 +1,13 @@
-import { InfoCardPersonalInformationProps } from "../../../interface";
-export default function PersonalInformation({ titles, data, }: InfoCardPersonalInformationProps): import("react/jsx-runtime").JSX.Element;
+import { InfoCardProps } from "../../../interface";
+interface InfoCardPersonalInformationProps extends Omit<InfoCardProps, "children"> {
+    theme?: "red" | "blue";
+    data: {
+        info: string;
+        username: string;
+        name: string;
+        email: string;
+        phone: string;
+    };
+}
+export default function PersonalInformation({ titles, data, theme, }: InfoCardPersonalInformationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/template/InfoCard/PersonalInformation.js

@@ -1,28 +1,48 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn, gradient } from "../../../util";
 import { label } from "./static/label";
 import { Label } from "../../..";
 import { InfoCardDesign } from "../../design/InfoCard.design";
-export default function PersonalInformation({ titles, data, }) {
+const color = {
+    red: "#910023",
+    blue: "#173A8B",
+    background: {
+        red: "bg-crimson-burgundy",
+        blue: "bg-blue-navy",
+        gradient: {
+            red: gradient.bg.greenToRed,
+            blue: gradient.bg.lab,
+        },
+    },
+    border: {
+        red: "border-crimson-burgundy/30",
+        blue: "border-blue-navy/30",
+    },
+    text: {
+        red: "text-crimson-burgundy",
+        blue: "text-blue-navy",
+    },
+};
+export default function PersonalInformation({ titles, data, theme = "red", }) {
     const body = {
         container: "flex flex-col pt-5.75",
-        belong: "text-crimson-burgundy",
+        belong: color.text[theme],
         username: "text-gray-dim font-pretendard-bold",
-        name: "text-xl font-pretendard-bold text-crimson-burgundy",
+        name: `text-xl font-pretendard-bold ${color.text[theme]}`,
         subInfo: {
             displays: "flex flex-col mt-7.5",
             fonts: "text-xs text-gray-dim",
         },
     };
-    return (_jsx(InfoCardDesign, { titles: titles, options: {
-            titleBorder: "border-crimson-burgundy",
+    return (_jsx(InfoCardDesign, { titles: titles, topRight: _jsxs("div", { className: "flex items-end gap-2.5", children: [_jsx("div", { className: `text-sm underline leading-none ${color.text[theme]}`, children: "\uC218\uC815\uD558\uAE30" }), _jsxs("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_3677_836)", children: [_jsx("path", { d: "M18.3495 25H1.3316C1.14591 25 1 24.8525 1 24.6647V4.61373C1 4.53326 1.03979 4.43938 1.09285 4.38573L5.33737 0.0938841C5.33737 0.0938841 5.48328 0 5.56286 0H18.3362C18.5219 0 18.6678 0.147532 18.6678 0.3353V9.2677C18.6678 9.45547 18.5219 9.603 18.3362 9.603C18.1505 9.603 18.0046 9.45547 18.0046 9.2677V0.670601H5.70877L1.66321 4.76127V24.3294H18.0179V15.8396C18.0179 15.6518 18.1638 15.5043 18.3495 15.5043C18.5352 15.5043 18.6811 15.6518 18.6811 15.8396V24.6647C18.6811 24.8525 18.5352 25 18.3495 25Z", fill: color[theme] }), _jsx("path", { d: "M1.33158 4.9489C1.252 4.9489 1.15915 4.92208 1.09283 4.85502C0.960187 4.7209 0.960187 4.50631 1.09283 4.3856L5.33735 0.0937542C5.46999 -0.040366 5.68222 -0.040366 5.80159 0.0937542C5.93424 0.227874 5.93424 0.442467 5.80159 0.563175L1.57034 4.85502C1.57034 4.85502 1.42443 4.9489 1.33158 4.9489Z", fill: color[theme] }), _jsx("path", { d: "M5.56286 4.96245H1.3316C1.14591 4.94903 1 4.8015 1 4.61373C1 4.42597 1.14591 4.27843 1.3316 4.27843H5.23126V0.3353C5.23126 0.147532 5.37716 0 5.56286 0C5.74856 0 5.89446 0.147532 5.89446 0.3353V4.62715C5.89446 4.72103 5.85467 4.8015 5.80161 4.86856C5.74856 4.93562 5.65571 4.96245 5.56286 4.96245Z", fill: color[theme] }), _jsx("path", { d: "M13.4019 18.0259C13.3091 18.0259 13.2295 17.9857 13.1632 17.932C13.0836 17.8516 13.0571 17.7443 13.0703 17.637L13.4417 15.719C13.4417 15.719 13.4815 15.5983 13.5346 15.5447L20.233 8.77162C20.233 8.77162 20.3789 8.67773 20.4717 8.67773C20.5646 8.67773 20.6442 8.71797 20.7105 8.77162L22.2491 10.3274C22.3818 10.4615 22.3818 10.6761 22.2491 10.7968L15.5507 17.5699C15.5507 17.5699 15.4446 17.6504 15.3783 17.6638L13.4815 18.0393C13.4815 18.0393 13.4417 18.0393 13.4152 18.0393L13.4019 18.0259ZM14.0784 15.9336L13.8264 17.2614L15.1395 17.0066L21.5328 10.542L20.4717 9.46904L14.0784 15.9336Z", fill: color[theme] }), _jsx("path", { d: "M22.7665 10.1129C22.6736 10.1129 22.594 10.0726 22.5277 10.019L20.9891 8.46318C20.8564 8.32906 20.8564 8.11447 20.9891 7.99376L21.891 7.08174C22.0104 6.96103 22.2359 6.96103 22.3553 7.08174L23.8939 8.63754C23.8939 8.63754 23.9868 8.78507 23.9868 8.87895C23.9868 8.97284 23.947 9.05331 23.8939 9.12037L22.992 10.0324C22.992 10.0324 22.846 10.1263 22.7532 10.1263L22.7665 10.1129ZM21.7053 8.22176L22.7665 9.29472L23.2042 8.85213L22.143 7.77917L21.7053 8.22176Z", fill: color[theme] }), _jsx("path", { d: "M18.4689 12.9026C18.3893 12.9026 18.2964 12.8757 18.2301 12.8087C18.0975 12.6745 18.0975 12.46 18.2301 12.3392L21.0023 9.53614C21.1349 9.40202 21.3472 9.40202 21.4665 9.53614C21.5992 9.67026 21.5992 9.88485 21.4665 10.0056L18.6943 12.8087C18.6943 12.8087 18.5484 12.9026 18.4556 12.9026H18.4689Z", fill: color[theme] }), _jsx("path", { d: "M15.2987 17.6504C15.2192 17.6504 15.1263 17.6235 15.06 17.5565L13.5214 16.0007C13.3887 15.8666 13.3887 15.652 13.5214 15.5313C13.654 15.3971 13.8662 15.3971 13.9856 15.5313L15.5242 17.087C15.6569 17.2212 15.6569 17.4358 15.5242 17.5565C15.4579 17.6235 15.3783 17.6504 15.2855 17.6504H15.2987Z", fill: color[theme] }), _jsx("path", { d: "M15.763 8.30244H3.90485C3.71915 8.30244 3.57324 8.1549 3.57324 7.96714C3.57324 7.77937 3.71915 7.63184 3.90485 7.63184H15.763C15.9487 7.63184 16.0946 7.77937 16.0946 7.96714C16.0946 8.1549 15.9487 8.30244 15.763 8.30244Z", fill: color[theme] }), _jsx("path", { d: "M15.763 11.32H3.90485C3.71915 11.32 3.57324 11.1725 3.57324 10.9847C3.57324 10.7969 3.71915 10.6494 3.90485 10.6494H15.763C15.9487 10.6494 16.0946 10.7969 16.0946 10.9847C16.0946 11.1725 15.9487 11.32 15.763 11.32Z", fill: color[theme] }), _jsx("path", { d: "M13.1102 14.3513H3.90485C3.71915 14.3513 3.57324 14.2037 3.57324 14.016C3.57324 13.8282 3.71915 13.6807 3.90485 13.6807H13.1102C13.2958 13.6807 13.4418 13.8282 13.4418 14.016C13.4418 14.2037 13.2958 14.3513 13.1102 14.3513Z", fill: color[theme] }), _jsx("path", { d: "M11.7837 17.3688H3.90485C3.71915 17.3688 3.57324 17.2213 3.57324 17.0335C3.57324 16.8458 3.71915 16.6982 3.90485 16.6982H11.7837C11.9694 16.6982 12.1153 16.8458 12.1153 17.0335C12.1153 17.2213 11.9694 17.3688 11.7837 17.3688Z", fill: color[theme] }), _jsx("path", { d: "M15.763 20.3864H3.90485C3.71915 20.3864 3.57324 20.2389 3.57324 20.0511C3.57324 19.8634 3.71915 19.7158 3.90485 19.7158H15.763C15.9487 19.7158 16.0946 19.8634 16.0946 20.0511C16.0946 20.2389 15.9487 20.3864 15.763 20.3864Z", fill: color[theme] })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_3677_836", children: _jsx("rect", { width: "25", height: "25", fill: "white" }) }) })] })] }), options: {
+            titleBorder: color.border[theme],
             width: "md",
             height: "md",
-            background: gradient.bg.greenToRedSoft,
-            boundary: "border-3 border-crimson-burgundy/30",
-        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(body.container), children: [_jsxs("div", { className: cn(body.belong), children: [data.school, "/", data.academy] }), _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 })] })] }), _jsx(Label.Button, { title: "\uD559\uC6D0 \uB4F1\uB85D\uD558\uAE30", onClick: () => { }, options: {
+            background: color.background.gradient[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 })] })] }), _jsx(Label.Button, { title: "\uD559\uC6D0 \uB4F1\uB85D\uD558\uAE30", onClick: () => { }, options: {
                         width: "md",
-                        background: "bg-crimson-burgundy",
+                        background: color.background[theme],
                         text: "text-white",
                         className: cn(label),
                     } })] }) }));

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

@@ -0,0 +1,12 @@
+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 {};

package/card/template/InfoCard/Student.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 }) {
+    const container = {
+        positions: "relative",
+        displays: "flex flex-col justify-between mt-2.5",
+        sizes: "h-19.5 w-full",
+    };
+    const levelBox = {
+        displays: "flex justify-center items-center ",
+        sizes: "w-22.5 h-6.4",
+        styles: "bg-white-off text-sm rounded-md",
+    };
+    return (_jsx(InfoCardDesign, { titles: titles, options: {
+            titleBorder: "border-blue-navy",
+            width: "sm",
+            height: "xs",
+        }, children: _jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: _jsx("div", { className: "flex items-center gap-5", children: _jsx("span", { className: "text-sm", children: data.belong }) }) }), _jsx(Label.Button, { title: "\uC0C1\uC138\uBCF4\uAE30", onClick: onClick, options: {
+                        width: "sm",
+                        height: "xs",
+                        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

@@ -4,6 +4,7 @@ import Grade from "./Grade";
 import Item from "./Item";
 import PersonalInformation from "./PersonalInformation";
 import Product from "./Product";
+import Student from "./Student";
 declare const InfoCard: {
     PersonalInformation: typeof PersonalInformation;
     Exam: typeof Exam;
@@ -15,5 +16,6 @@ declare const InfoCard: {
     Product: typeof Product;
     Item: typeof Item;
     Grade: typeof Grade;
+    Student: typeof Student;
 };
 export default InfoCard;

package/card/template/InfoCard/index.js

@@ -5,6 +5,7 @@ import Grade from "./Grade";
 import Item from "./Item";
 import PersonalInformation from "./PersonalInformation";
 import Product from "./Product";
+import Student from "./Student";
 const InfoCard = {
     PersonalInformation,
     Exam,
@@ -13,5 +14,6 @@ const InfoCard = {
     Product,
     Item,
     Grade,
+    Student,
 };
 export default InfoCard;

package/html/design/Label.design.d.ts

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

package/html/design/Label.design.js

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

package/html/template/Label.d.ts

@@ -1,6 +1,8 @@
 import { HTMLLabelElement } from "../../interface";
 declare function Label({ title, options }: Omit<HTMLLabelElement, "onClick">): import("react/jsx-runtime").JSX.Element;
 declare namespace Label {
-    var Button: ({ title, onClick, options }: HTMLLabelElement) => import("react/jsx-runtime").JSX.Element;
+    var Button: ({ title, hoverTitle, onClick, options, }: Omit<HTMLLabelElement, "hoverState"> & {
+        hoverTitle?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
 }
 export default Label;

package/html/template/Label.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import LabelDesign from "../design/Label.design";
 function Label({ title, options }) {
-    return (_jsx(LabelDesign, { title: title, options: { ...options, width: "sm", height: "xs" } }));
+    const [hover, setHover] = useState(false);
+    return (_jsx(LabelDesign, { title: title, hoverState: [hover, setHover], options: { ...options, width: "sm", height: "xs" } }));
 }
-function Button({ title, onClick, options }) {
-    return (_jsx(LabelDesign, { title: title, onClick: onClick, options: {
+function Button({ title, hoverTitle, onClick, options, }) {
+    const [hover, setHover] = useState(false);
+    return (_jsx(LabelDesign, { title: hoverTitle ? (!hover ? title : hoverTitle) : title, onClick: onClick, hoverState: [hover, setHover], options: {
             ...options,
             width: options?.width ?? "md",
             height: options?.height ?? "sm",

package/html/widget/Toggle.js

@@ -10,5 +10,5 @@ const widthSize = {
 };
 export default function Toggle({ state: [chekced, setChecked], labels, options, }) {
     const { disabled } = options ?? {};
-    return (_jsxs("div", { className: "w-24 h-6 flex", 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", children: labels.map(([status, label]) => (status === chekced ? label : "")) })] }));
+    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 : "")) })] }));
 }

package/interface/Board.d.ts

@@ -8,6 +8,7 @@ interface OptionsProps {
     color?: string;
     isRounded?: boolean;
     noPadding?: boolean;
+    noMobile?: boolean;
 }
 export interface BoardProps<B> {
     header?: BoardHeaderProps<B>;
@@ -26,6 +27,7 @@ export interface BoardHeaderProps<B> {
         inputs?: HTMLInputElement[];
     };
     options?: {
+        titleBorder?: string;
         colors?: {
             bgColor?: string;
             textColor?: string;

package/interface/Card.d.ts

@@ -76,25 +76,6 @@ 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;
-        examDate: string;
-        endDate: string;
-        manager: string;
-        isPublic: boolean;
-    };
-}
 export interface InfoCardExamDataREGProps extends Omit<InfoCardProps, "children"> {
     data?: {
         scores: number[];
@@ -120,16 +101,6 @@ export interface InfoCardItemProps extends Omit<InfoCardProps, "children"> {
         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;

package/interface/HTMLElement.d.ts

@@ -19,6 +19,7 @@ export interface HTMLElement {
 }
 export interface HTMLLabelElement extends HTMLElement {
     title: string;
+    hoverState?: State<boolean>;
     onClick?: OnClick;
 }
 export type SelectOption<T> = [T, string];

package/interface/Layout.d.ts

@@ -18,7 +18,7 @@ export interface DashboardHeaderProps {
         notifications?: Partial<Notification>[];
         flag: boolean;
         onClick: OnClick;
-        bgColor?: string;
+        color?: string;
     };
     options?: {
         background?: string;

package/interface/Shelf.d.ts

@@ -7,6 +7,7 @@ interface Options<T> {
     width?: T;
     height?: number;
     gap?: "xy" | "x" | "y" | "none";
+    isSize?: boolean;
 }
 export interface ShelfProps<T> {
     children: React.ReactNode;

package/interface/Widget.d.ts

@@ -40,6 +40,7 @@ export interface RowProps<T> {
         size?: string;
         padding?: string;
         text?: string;
+        isPointer?: boolean;
         noHover?: boolean;
         className?: string;
     };

package/layout/design/Row.design.js

@@ -3,7 +3,7 @@ import { useId } from "react";
 import { cn } from "../../util";
 import { Label } from "../../html";
 export default function RowDesign({ item, dataField, options, onClick, buttons, }) {
-    const { size, padding, text, noHover, className } = options ?? {};
+    const { size, padding, text, noHover, className, isPointer } = options ?? {};
     const id = useId();
     const container = {
         positions: "relative",
@@ -12,6 +12,7 @@ export default function RowDesign({ item, dataField, options, onClick, buttons,
         paddings: padding,
         text: text,
         styles: !noHover && "hover:bg-gray-100 duration-100",
+        cursor: isPointer && "cursor-pointer",
     };
     const itemBox = {
         styles: "truncate",

package/layout/design/Shelf.design.js

@@ -3,9 +3,10 @@ import { LineBreaks } from "../../text";
 import { cn, isDebug } from "../../util";
 export default function Shelf({ children, className, options, titles, debug, }) {
     const { title, titleColor } = titles ?? {};
-    const { titleSize, subtitleSize } = options ?? {};
+    const { titleSize, subtitleSize, isSize } = options ?? {};
     const container = {
         displays: "flex flex-col gap-6",
+        sizes: isSize && "w-full h-full lg:h-auto",
         debug: debug && isDebug(`border-2  border-${debug}`),
     };
     const titleBox = {
@@ -20,7 +21,7 @@ export default function Shelf({ children, className, options, titles, debug, })
         },
     };
     const childrenBox = {
-        sizes: "w-full",
+        sizes: "w-full h-full",
         className,
     };
     return (_jsxs("div", { className: cn(container), children: [titles && (_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.title), children: title }), _jsx(LineBreaks, { className: cn(titleBox.subtitle), texts: titles?.subtitle })] })), _jsx("div", { className: cn(childrenBox), children: children })] }));

package/layout/design/Tab.design.d.ts

@@ -1,4 +1,5 @@
 import { Button } from "../../interface";
-export default function Tab({ tabs }: {
+export default function Tab({ tabs, textColor, }: {
     tabs: Button[];
+    textColor?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/layout/design/Tab.design.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../util";
-export default function Tab({ tabs }) {
+export default function Tab({ tabs, textColor, }) {
     const [tabsSelection, setTabsSelection] = useState(tabs.map((_, i) => i === 0));
     const container = {
         positions: "xl:absolute xl:-bottom-18 xl:left-0 z-5",
@@ -10,8 +10,13 @@ export default function Tab({ tabs }) {
         paddings: "px-2.5",
         styles: "bg-white/30 rounded-xl ",
     };
+    const button = {
+        styles: "rounded-md duration-500 ",
+        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: () => {
                 setTabsSelection(tabsSelection.map((_, i) => i === index));
                 return onClick();
-            }, className: `text-green-dark duration-500 h-9 w-32 rounded-md ${tabsSelection[index] && "bg-white rounded-2xl"}`, children: title }, title))) }));
+            }, 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 { default as Sign } from "./template/Sign";
 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,6 @@
 export { default as Events } from "./template/Events";
 export { default as Dashboard } from "./template/Dashboard";
+export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";

package/layout/template/Gallery.d.ts

@@ -1,7 +1,10 @@
 import { Button, EventsProps } from "../../interface";
-export default function Gallery({ widgets, children, }: {
+export default function Gallery({ widgets, children, options, }: {
     widgets?: EventsProps & {
         tabs?: Button[];
     };
     children: React.ReactNode;
+    options?: {
+        tabTextColor?: string;
+    };
 }): import("react/jsx-runtime").JSX.Element;

package/layout/template/Gallery.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Events from "./Events";
 import Tab from "../design/Tab.design";
-export default function Gallery({ widgets, children, }) {
-    return (_jsxs("div", { className: "relative w-full flex", children: [_jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx(Events.Show, { widgets: widgets?.shows, children: children }) }), widgets?.tabs && _jsx(Tab, { tabs: widgets?.tabs })] }));
+export default function Gallery({ widgets, children, options, }) {
+    const { tabTextColor } = options ?? {};
+    return (_jsxs("div", { className: "relative w-full flex", children: [_jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx(Events.Show, { widgets: widgets?.shows, children: children }) }), widgets?.tabs && _jsx(Tab, { tabs: widgets?.tabs, textColor: tabTextColor })] }));
 }

package/layout/template/Row.d.ts

@@ -6,6 +6,6 @@ declare namespace Row {
         noPadding?: boolean | undefined;
         noHover?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    var Board: <T>({ item, dataField, onClick, buttons }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
+    var Board: <T>({ item, dataField, onClick, buttons, options }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
 }
 export default Row;

package/layout/template/Row.js

@@ -9,9 +9,10 @@ function Row({ item, dataField, onClick, buttons }) {
             className: "text-center",
         } }));
 }
-function Board({ item, dataField, onClick, buttons }) {
+function Board({ item, dataField, onClick, buttons, options }) {
     const id = useId();
     return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, options: {
+            ...options,
             size: "w-full h-12",
             padding: "px-2 xs:px-4 xl:px-7.5",
             text: "text-xl",

package/layout/template/Shelf.d.ts

@@ -3,6 +3,6 @@ declare function Shelf({ titles, debug, children }: ShelfProps<string | number>)
 declare namespace Shelf {
     var Wrap: ({ className, titles, children, debug, options, }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
     var Row: ({ titles, children, debug }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
-    var Col: ({ titles, children, debug }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
+    var Col: ({ titles, children, debug, className, }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
 }
 export default Shelf;

package/layout/template/Shelf.js

@@ -9,7 +9,7 @@ const gap = {
 };
 function Shelf({ titles, debug, children }) {
     const container = {
-        displays: "inline-flex flex-col gap-12 w-full",
+        displays: "inline-flex flex-col gap-12",
     };
     return (_jsx(ShelfDesign, { titles: titles, className: cn(container), debug: debug, children: children }));
 }
@@ -31,11 +31,13 @@ function Row({ titles, children, debug }) {
     return (_jsx(ShelfDesign, { titles: titles, className: cn(container), options: {
             titleSize: "text-lg xl:text-2xl",
             subtitleSize: "text-sm",
+            isSize: true,
         }, debug: debug, children: children }));
 }
-function Col({ titles, children, debug }) {
+function Col({ titles, children, debug, className, }) {
     const container = {
-        displays: "flex flex-col flex-wrap gap-y-5",
+        displays: "flex flex-col flex-wrap",
+        className: className ?? "gap-y-7.5",
     };
     return (_jsx(ShelfDesign, { titles: titles, className: cn(container), options: {
             titleSize: "text-lg xl:text-2xl",

package/layout/template/Sign.d.ts

@@ -0,0 +1,13 @@
+import Box from "../widget/sign/Box";
+import Button from "../widget/sign/Button";
+import Check from "../widget/sign/Check";
+import Input from "../widget/sign/Input";
+import Layout from "../widget/sign/Layout";
+declare const Sign: {
+    Box: typeof Box;
+    Button: typeof Button;
+    Check: typeof Check;
+    Input: typeof Input;
+    Layout: typeof Layout;
+};
+export default Sign;

package/layout/template/Sign.js

@@ -0,0 +1,13 @@
+import Box from "../widget/sign/Box";
+import Button from "../widget/sign/Button";
+import Check from "../widget/sign/Check";
+import Input from "../widget/sign/Input";
+import Layout from "../widget/sign/Layout";
+const Sign = {
+    Box,
+    Button,
+    Check,
+    Input,
+    Layout,
+};
+export default Sign;

package/layout/widget/dashboard/Header.js

@@ -6,7 +6,7 @@ import { Events } from "../..";
 import Notification from "./Notification";
 export function Header({ title, logo, notification, options, }) {
     const { setView, setIsOwn } = useWidgetStore();
-    const { notifications, flag, onClick, bgColor } = notification;
+    const { notifications, flag, onClick, color } = notification;
     const { text, background, className } = options ?? {};
     const container = {
         positions: "fixed xl:static top-0 left-0 z-40",
@@ -17,15 +17,15 @@ export function Header({ title, logo, notification, options, }) {
         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-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Events.Show, { widgets: [
+    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" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Events.Show, { widgets: [
                         ["notification", _jsx(Notification, { notifications: notifications })],
                         ["menu", _jsx(Menu, { image: "/images/hani.png" })],
                     ], children: [_jsxs("button", { className: "relative", onClick: () => {
                                 setIsOwn(true);
                                 onClick && onClick();
                                 return setView("notification");
-                            }, children: [_jsx("svg", { 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: bgColor ?? "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), flag && (_jsxs("div", { className: "absolute top-0 right-0", children: [_jsx("div", { className: "absolute w-2 h-2 rounded-full bg-red-500" }), _jsx("div", { className: " w-2 h-2 rounded-full  bg-red-400 animate-ping duration-1000" })] }))] }), _jsx("svg", { className: "cursor-pointer", onClick: () => {
+                            }, children: [_jsx("svg", { 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: color ?? "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), flag && (_jsxs("div", { className: "absolute top-0 right-0", children: [_jsx("div", { className: "absolute w-2 h-2 rounded-full bg-red-500" }), _jsx("div", { className: " w-2 h-2 rounded-full  bg-red-400 animate-ping duration-1000" })] }))] }), _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: bgColor ?? "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) })] }));
+                            }, 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: color ?? "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) })] }));
 }

package/layout/widget/sign/Box.d.ts

@@ -0,0 +1,10 @@
+interface BoxProps {
+    children: React.ReactNode;
+    sizes?: string;
+    className?: string;
+}
+declare function Box({ sizes, children, className }: BoxProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Box {
+    var Fix: ({ children, className }: Omit<BoxProps, "sizes">) => import("react/jsx-runtime").JSX.Element;
+}
+export default Box;

package/layout/widget/sign/Box.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../util";
+function Box({ sizes, children, className }) {
+    const container = {
+        sizes: sizes ?? "w-112.5 p-5",
+        style: "box-shadow bg-white rounded-xl",
+        className,
+    };
+    return _jsx("div", { className: cn(container), children: children });
+}
+function Fix({ children, className }) {
+    return (_jsx(Box, { className: className, sizes: "w-112.5 h-67.5 pt-10.25 px-5 pb-5", children: children }));
+}
+Box.Fix = Fix;
+export default Box;

package/layout/widget/sign/Button.d.ts

@@ -0,0 +1,28 @@
+import { OnClick, State } from "../../../interface";
+interface ButtonProps {
+    title: string;
+    onClick: OnClick;
+    disabled?: boolean;
+    size?: string;
+}
+interface SelectButtonProps {
+    state: State<string>;
+    buttons: {
+        type: string;
+        icon: string;
+        title: string;
+    }[];
+}
+interface SelectButtonWithTitleProps extends SelectButtonProps {
+    title: string;
+}
+declare function Button({ title, onClick, disabled, size }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Button {
+    var Inner: ({ title, onClick }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    var Choose: typeof Selection;
+}
+declare function Selection({ buttons, state }: SelectButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Selection {
+    var WithTitle: ({ buttons, title, state }: SelectButtonWithTitleProps) => import("react/jsx-runtime").JSX.Element;
+}
+export default Button;

package/layout/widget/sign/Button.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, gradient } from "../../../util";
+function Button({ title, onClick, disabled, size }) {
+    const container = {
+        sizes: size ?? "w-112.5 h-13.5",
+        displays: "flex items-center justify-center",
+        backgrounds: !disabled ? gradient.bg.greenToRed : "bg-gray-medium",
+        cursors: !disabled ? "cursor-pointer" : "cursor-default",
+        styles: "rounded-lgx text-white",
+    };
+    return (_jsx("div", { onClick: () => {
+            if (disabled)
+                return;
+            return onClick();
+        }, className: cn(container), children: title }));
+}
+function Inner({ title, onClick }) {
+    return _jsx(Button, { title: title, onClick: onClick, size: "w-102.5 h-13.5" });
+}
+function Selection({ buttons, state }) {
+    const [value, setValue] = state;
+    const container = (type) => {
+        return {
+            displays: "flex flex-1 justify-center items-center gap-3",
+            sizes: "h-15",
+            backgrounds: value === type ? "bg-green-dark/10" : "bg-gray-light",
+            styles: "rounded-lgx",
+        };
+    };
+    return (_jsx("div", { className: "flex gap-2.5", children: buttons.map(({ icon, title, type }) => (_jsxs("button", { className: cn(container(type)), onClick: () => setValue(type), children: [_jsx("img", { src: icon }), _jsx("div", { children: title })] }, type))) }));
+}
+function WithTitle({ buttons, title, state }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Selection, { buttons: buttons, state: state })] }));
+}
+Button.Inner = Inner;
+Button.Choose = Selection;
+Selection.WithTitle = WithTitle;
+export default Button;

package/layout/widget/sign/Check.d.ts

@@ -0,0 +1,15 @@
+import { State } from "../../../interface";
+interface CheckProps {
+    state: State<boolean>;
+    sizes?: string;
+    element?: React.ReactNode;
+}
+declare function Check({ state, sizes, element }: CheckProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Check {
+    var Box: typeof CheckWithBox;
+}
+declare function CheckWithBox({ state, element, }: {
+    state: State<boolean>;
+    element?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export default Check;

package/layout/widget/sign/Check.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+function Check({ state, sizes, element }) {
+    const [value, setValue] = state;
+    const container = {
+        displays: "flex items-center gap-3",
+        sizes: sizes ?? "w-112.5 h-6 pl-5",
+    };
+    const checkbox = {
+        displays: "flex justify-center items-center",
+        sizes: "w-6 h-6 ",
+        styles: "border-gray-light border-1 rounded-md",
+        backgrounds: value ? "bg-green-dark" : "bg-white",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("button", { onClick: () => setValue(!value), className: cn(checkbox), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "11", viewBox: "0 0 12 11", fill: "none", children: _jsx("path", { d: "M1 6.14286L4.75 10L11 1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("div", { children: element })] }));
+}
+function CheckWithBox({ state, element, }) {
+    const container = {
+        displays: "flex items-center",
+        sizes: "w-112.5 h-15 pl-5",
+        styles: "box-shadow rounded-lgx",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsx(Check, { state: state, sizes: "h-6", element: element }) }));
+}
+Check.Box = CheckWithBox;
+export default Check;

package/layout/widget/sign/Input.d.ts

@@ -0,0 +1,15 @@
+import { State } from "../../../interface";
+interface InputProps {
+    state: State<string>;
+    placeholder: string;
+    flag?: boolean;
+    type?: "text" | "password" | "date" | "email" | "phone" | "number";
+}
+interface InputWithTitleProps extends InputProps {
+    title: string;
+}
+declare function Input({ state, placeholder, flag, type }: InputProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Input {
+    var WithTitle: ({ title, placeholder, state, flag, type, }: InputWithTitleProps) => import("react/jsx-runtime").JSX.Element;
+}
+export default Input;

package/layout/widget/sign/Input.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../../util";
+function Input({ state, placeholder, flag, type }) {
+    const [value, setValue] = state;
+    const [onFocus, setOnFocus] = useState(false);
+    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 pl-5 pt-3",
+        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", { className: cn(placeholderBox), children: placeholder }), _jsx("input", { className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => setValue(e.target.value), type: type ?? "text" })] }));
+}
+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, { placeholder: placeholder, state: state, flag: flag, type: type })] }));
+}
+Input.WithTitle = WithTitle;
+export default Input;

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

@@ -0,0 +1,7 @@
+interface LayoutProps {
+    children: React.ReactNode;
+    steps?: boolean[];
+    script?: string;
+}
+export default function Layout({ children, steps, script }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/widget/sign/Layout.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function Layout({ children, steps, script }) {
+    const container = {
+        positions: "relative",
+        sizes: "w-full min-h-screen overflow-hidden",
+        displays: "flex flex-col items-center justify-center",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("img", { src: "/images/logos/tosel.png", width: 180, height: 40 }), _jsx("div", { className: "mt-12", children: script }), _jsx("div", { className: "flex gap-5 my-5", children: steps?.map((step, index) => (_jsx(Light, { flag: step }, index))) }), children] }));
+}
+function Light({ flag }) {
+    const container = {
+        sizes: "w-2.5 h-2.5",
+        styles: "rounded-full",
+        backgrounds: flag ? "bg-green-dark" : "bg-gray-light-super",
+    };
+    return _jsx("div", { className: cn(container) });
+}

package/navigation/Navigation.js

@@ -15,7 +15,7 @@ export const buttonClassNames = (href, nowPath, color) => {
             ? `${bg} ${selectedText}`
             : "bg-white text-black"
         : (!isDark ? "bg-white " : "bg-black ") +
-            `xl:bg-transparent xl:hover:bg-white/50 hover:text-green-dark ${text} dark:text-white`;
+            `xl:bg-transparent xl:hover:bg-white/50 ${text} dark:text-white`;
     return [cn(container), toggle].join(" ");
 };
 export function NavigationContainer({ children, }) {

package/package.json

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

package/tailwind.config.ts

@@ -62,6 +62,7 @@ export default {
         "blue-pastel": "#CED6E6",
         "violet-light": "#9979F6",
         "gray-light": "#F0F0F0",
+        "gray-light-super": "#D9D9D9",
         "gray-medium": "#7F7F7F",
         "gray-dim": "#4C4C4C",
         "silver-lavender": "#E7E9F2",
@@ -91,10 +92,13 @@ export default {
         0.5: "0.125rem",
         1: "0.25rem",
         1.25: "0.3125rem",
+        2.125: "0.53125rem",
         2.5: "0.625rem",
+        2.625: "0.65625rem",
         3.5: "0.875rem",
         3.75: "0.9375rem",
         4.25: "1.0625rem",
+        4.375: "1.09375rem",
         4.5: "1.125rem",
         4.75: "1.1875rem",
         5.25: "1.3125rem",
@@ -115,6 +119,7 @@ export default {
         11.375: "2.84375rem",
         12: "3rem",
         13.25: "3.3125rem",
+        13.5: "3.375rem",
         13.75: "3.4375rem",
         14: "3.5rem",
         14.125: "3.53125rem",
@@ -138,6 +143,7 @@ export default {
         23: "5.75rem",
         23.75: "5.9375rem",
         25: "6.25rem",
+        25.75: "6.4375rem",
         26: "6.5rem",
         27: "6.75rem",
         27.5: "6.875rem",
@@ -184,6 +190,7 @@ export default {
         96: "24rem",
         98: "24.5rem",
         100: "25rem",
+        102.5: "25.625rem",
         104: "26rem",
         106: "26.5rem",
         108: "27rem",
@@ -271,21 +278,40 @@ export default {
         100: "25rem",
         128: "32rem",
       },
+      borderRadius: {
+        lgx: "0.625rem",
+      },
       transitionDelay: {
+        450: "450ms",
+        600: "600ms",
         750: "750ms",
+        800: "800ms",
         900: "900ms",
         1000: "1000ms",
+        1050: "1050ms",
+        1100: "1100ms",
+        1150: "1150ms",
+        1200: "1200ms",
         1250: "1250ms",
-        1350: "1200ms",
+        1300: "1300ms",
+        1350: "1350ms",
+        1400: "1400ms",
         1500: "1500ms",
         1600: "1600ms",
+        1650: "1650ms",
         1750: "1750ms",
         1800: "1800ms",
+        1950: "1950ms",
         2000: "2000ms",
         2100: "2100ms",
+        2200: "2200ms",
         2250: "2250ms",
+        2400: "2400ms",
         2500: "2500ms",
+        2550: "2550ms",
+        2600: "2600ms",
         2700: "2700ms",
+        2800: "2800ms",
         3000: "3000ms",
         3300: "3300ms",
         3900: "3900ms",

package/util/calculateAge.d.ts

@@ -0,0 +1,2 @@
+declare const calculateAge: (birthDateString: string) => number;
+export default calculateAge;

package/util/calculateAge.js

@@ -0,0 +1,10 @@
+const calculateAge = (birthDateString) => {
+    const birthDate = new Date(birthDateString);
+    const today = new Date();
+    const thisYear = today.getFullYear();
+    const thisYearBirthday = new Date(thisYear, birthDate.getMonth(), birthDate.getDate());
+    return today >= thisYearBirthday
+        ? thisYear - birthDate.getFullYear()
+        : thisYear - birthDate.getFullYear() - 1;
+};
+export default calculateAge;

package/util/colors.d.ts

@@ -7,6 +7,7 @@ export declare const colorsByLevel: {
 };
 export declare const gradientBackground: {
     lab: string;
+    labSoft: string;
     greenToRed: string;
     greenToRedSoft: string;
 };
@@ -17,6 +18,7 @@ export declare const gradientBorder: {
 export declare const gradient: {
     bg: {
         lab: string;
+        labSoft: string;
         greenToRed: string;
         greenToRedSoft: string;
     };

package/util/colors.js

@@ -7,6 +7,7 @@ export const colorsByLevel = {
 };
 export const gradientBackground = {
     lab: "bg-gradient-to-br from-violet-light/20 to-blue-sky/40 ",
+    labSoft: "bg-gradient-to-br from-[#797EF6]/32 to-[#44C5F3]/20",
     greenToRed: "bg-gradient-to-r from-green-dark to-red-crimson",
     greenToRedSoft: "bg-gradient-to-r from-green-dark/20 to-red-crimson/20",
 };

package/version.txt

@@ -1 +1 @@
-1.0.37
+1.0.39