@edu-tosel/design 1.0.155 → 1.0.157

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

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

package/card/template/InfoCard/Student.js

@@ -1,9 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Label } from "../../../widget";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
 import { InfoCardDesign } from "../../design/InfoCard.design";
-import { label } from "./static/label";
-export default function Student({ titles, image, data, onClick }) {
+export default function Student({ titles, image, data, option, }) {
     const container = {
         positions: "relative",
         displays: "flex flex-col justify-between mt-2.5",
@@ -18,11 +16,6 @@ export default function Student({ titles, image, data, onClick }) {
             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, option: {
-                        width: "sm",
-                        height: "xs",
-                        text: "text-white hover:text-blue-navy",
-                        background: "bg-blue-navy hover:bg-gray-light",
-                        className: cn(label),
-                    } })] }) }));
+            ...option,
+        }, children: _jsx("div", { className: cn(container), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm", children: data.academy }), _jsx("span", { className: "text-sm", children: data.belong })] }) }) }));
 }

package/card/template/NavCard.js

@@ -3,7 +3,7 @@ import NavCardDesign from "../design/NavCard.design";
 function Banner({ titles, option }) {
     return (_jsx(NavCardDesign, { titles: titles, option: {
             ...option,
-            width: option?.width ?? "xl",
+            width: option?.width ?? "2xl",
             height: option?.height ?? "sm",
             image: option?.image && {
                 ...option?.image,

package/card/template/ProgressCard/Large.js

@@ -35,7 +35,7 @@ export default function ProgressCardLG({ titles, checks, displays, theme, option
     const occupied = Math.round((checks.filter((value) => !!value).length / displays.length) * 100);
     return (_jsxs(CardDesign, { option: {
             ...option,
-            width: "2xl",
+            width: "3xl",
             height: "2xs",
         }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: theme })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsx("div", { className: "text-base leading-none", children: titles.subtitle })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full ${widthSizes[occupied]} ${bg[theme ?? "green"]}` }) })] }));
 }

package/globals.css

@@ -1,269 +1,269 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.image-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-@font-face {
-  font-family: "Pretendard-Medium";
-  src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Pretendard-Bold";
-  src: url("./asset/fonts/Pretendard-Bold.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Pretendard-Light";
-  src: url("./asset/fonts/Pretendard-Light.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Kostar";
-  src: url("./asset/fonts/Kostar.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "NicoMoji";
-  src: url("./asset/fonts/NicoMoji.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Megrim";
-  src: url("./asset/fonts/Megrim.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Times-Newer-Roman-Bold";
-  src: url("./asset/fonts/TimesNewerRoman-Bold.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Times-Newer-Roman-BoldItalic";
-  src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "PretendardVariable";
-  src: url("./asset/fonts/PretendardVariable.ttf") format("truetype");
-}
-
-input[type="date"]::-webkit-inner-spin-button,
-input[type="date"]::-webkit-calendar-picker-indicator {
-  display: none;
-  -webkit-appearance: none;
-}
-
-::-webkit-scrollbar {
-  width: 3px;
-  padding-right: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: #808080;
-  opacity: 0.5;
-  border-radius: 10px;
-}
-
-.box-shadow {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
-}
-.box-shadow-md {
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-}
-.box-shadow-sm {
-  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
-}
-.border-gradient-green-to-red {
-}
-
-.x-shape {
-  position: relative;
-  width: 0.83625rem;
-  height: 0.83625rem;
-}
-
-.x-shape::before,
-.x-shape::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 2.5px;
-  border-radius: 2px;
-  height: 100%;
-  background-color: white;
-  transform-origin: center;
-}
-
-.x-shape::before {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.x-shape::after {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-.border-inner {
-  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-.box-shadow-focus:focus {
-  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-.box-shadow-focus-red:focus {
-  box-shadow: 0px 0px 10px 0px #ff8383;
-}
-.box-green {
-  background: rgba(16, 86, 82, 0.1);
-  color: #105652;
-}
-.box-shadow-green-sm {
-  box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
-}
-.box-green-focus:focus {
-  background: white;
-  color: black;
-  box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
-}
-/* box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38); */
-.box-inner-shadow:hover {
-  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-/* Date Picker Css */
-.react-datepicker__day--selected {
-  background-color: #105652 !important;
-}
-.react-datepicker__header {
-  background: white !important;
-  border: none !important;
-}
-.react-datepicker {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
-  border-radius: 0.375rem !important;
-  border: none !important;
-}
-.react-datepicker__day--keyboard-selected {
-  background-color: white !important;
-  color: black !important;
-}
-.react-datepicker__day--outside-month {
-  color: rgb(161 161 170) !important;
-}
-.react-datepicker__month-container {
-  padding-top: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-bottom: 0.5rem;
-}
-.react-datepicker-popper {
-  transform: translate(0px 295px) !important;
-}
-.react-datepicker__input-container {
-  text-align: center !important;
-  border-radius: 0.375rem !important;
-  transition: all 0.3s;
-}
-.react-datepicker__input-container > input {
-  cursor: pointer !important;
-}
-.react-datepicker__input-container:hover {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
-}
-.react-datepicker__navigation {
-  top: 18px !important;
-}
-.react-datepicker__navigation--next {
-  right: 20px !important;
-}
-.react-datepicker__navigation--previous {
-  left: 182px !important;
-}
-.react-datepicker__current-month {
-  text-align: left !important;
-  margin-left: 16px !important;
-}
-.react-datepicker__triangle {
-  display: none !important;
-}
-.react-datepicker__children-container {
-  width: 16rem !important;
-}
-/* toggle button */
-.toggle[type="checkbox"]::before {
-  content: "";
-  position: absolute;
-  left: 1px;
-  top: 1px;
-  width: 1.1rem;
-  height: 1.1rem;
-  border-radius: 50%;
-  transform: scale(0.9);
-  background-color: white;
-  transition: left 100ms linear;
-}
-.toggle[type="checkbox"]:checked::before {
-  background-color: white;
-  left: 1.32rem;
-}
-.toggle[type="checkbox"]:checked {
-  background-color: #105652;
-}
-.toggle[type="checkbox"]:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-.toggle[type="checkbox"]:disabled + span {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-/* checkbox */
-.check-box[type="checkbox"]:checked {
-  border-color: transparent;
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
-  background-size: 150%;
-  background-position: 50%;
-  background-repeat: no-repeat;
-}
-.check-box[type="checkbox"]:disabled {
-  background-color: #7f7f7f;
-}
-.box-shadow-green:hover {
-  box-shadow: 0px 0px 20px 0px rgba(16, 86, 82, 0.5);
-}
-
-.fade-enter {
-  opacity: 0;
-}
-.fade-enter-active {
-  opacity: 1;
-  transition: opacity 0.5s ease-in-out;
-}
-.fade-exit {
-  opacity: 1;
-}
-.fade-exit-active {
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-}
-
-.text-gradient-green-to-red {
-  background: var(
-    --gradient-main,
-    linear-gradient(269deg, #760023 0%, #105652 100%)
-  );
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.image-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+@font-face {
+  font-family: "Pretendard-Medium";
+  src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Pretendard-Bold";
+  src: url("./asset/fonts/Pretendard-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Pretendard-Light";
+  src: url("./asset/fonts/Pretendard-Light.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Kostar";
+  src: url("./asset/fonts/Kostar.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "NicoMoji";
+  src: url("./asset/fonts/NicoMoji.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Megrim";
+  src: url("./asset/fonts/Megrim.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Times-Newer-Roman-Bold";
+  src: url("./asset/fonts/TimesNewerRoman-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Times-Newer-Roman-BoldItalic";
+  src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "PretendardVariable";
+  src: url("./asset/fonts/PretendardVariable.ttf") format("truetype");
+}
+
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+::-webkit-scrollbar {
+  width: 3px;
+  padding-right: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #808080;
+  opacity: 0.5;
+  border-radius: 10px;
+}
+
+.box-shadow {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
+}
+.box-shadow-md {
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+}
+.box-shadow-sm {
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
+}
+.border-gradient-green-to-red {
+}
+
+.x-shape {
+  position: relative;
+  width: 0.83625rem;
+  height: 0.83625rem;
+}
+
+.x-shape::before,
+.x-shape::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.5px;
+  border-radius: 2px;
+  height: 100%;
+  background-color: white;
+  transform-origin: center;
+}
+
+.x-shape::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.x-shape::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.border-inner {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.box-shadow-focus:focus {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.box-shadow-focus-red:focus {
+  box-shadow: 0px 0px 10px 0px #ff8383;
+}
+.box-green {
+  background: rgba(16, 86, 82, 0.1);
+  color: #105652;
+}
+.box-shadow-green-sm {
+  box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
+}
+.box-green-focus:focus {
+  background: white;
+  color: black;
+  box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
+}
+/* box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38); */
+.box-inner-shadow:hover {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+/* Date Picker Css */
+.react-datepicker__day--selected {
+  background-color: #105652 !important;
+}
+.react-datepicker__header {
+  background: white !important;
+  border: none !important;
+}
+.react-datepicker {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
+  border-radius: 0.375rem !important;
+  border: none !important;
+}
+.react-datepicker__day--keyboard-selected {
+  background-color: white !important;
+  color: black !important;
+}
+.react-datepicker__day--outside-month {
+  color: rgb(161 161 170) !important;
+}
+.react-datepicker__month-container {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.5rem;
+}
+.react-datepicker-popper {
+  transform: translate(0px 295px) !important;
+}
+.react-datepicker__input-container {
+  text-align: center !important;
+  border-radius: 0.375rem !important;
+  transition: all 0.3s;
+}
+.react-datepicker__input-container > input {
+  cursor: pointer !important;
+}
+.react-datepicker__input-container:hover {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
+}
+.react-datepicker__navigation {
+  top: 18px !important;
+}
+.react-datepicker__navigation--next {
+  right: 20px !important;
+}
+.react-datepicker__navigation--previous {
+  left: 182px !important;
+}
+.react-datepicker__current-month {
+  text-align: left !important;
+  margin-left: 16px !important;
+}
+.react-datepicker__triangle {
+  display: none !important;
+}
+.react-datepicker__children-container {
+  width: 16rem !important;
+}
+/* toggle button */
+.toggle[type="checkbox"]::before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  width: 1.1rem;
+  height: 1.1rem;
+  border-radius: 50%;
+  transform: scale(0.9);
+  background-color: white;
+  transition: left 100ms linear;
+}
+.toggle[type="checkbox"]:checked::before {
+  background-color: white;
+  left: 1.32rem;
+}
+.toggle[type="checkbox"]:checked {
+  background-color: #105652;
+}
+.toggle[type="checkbox"]:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.toggle[type="checkbox"]:disabled + span {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* checkbox */
+.check-box[type="checkbox"]:checked {
+  border-color: transparent;
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+  background-size: 150%;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+.check-box[type="checkbox"]:disabled {
+  background-color: #7f7f7f;
+}
+.box-shadow-green:hover {
+  box-shadow: 0px 0px 20px 0px rgba(16, 86, 82, 0.5);
+}
+
+.fade-enter {
+  opacity: 0;
+}
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+}
+.fade-exit {
+  opacity: 1;
+}
+.fade-exit-active {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.text-gradient-green-to-red {
+  background: var(
+    --gradient-main,
+    linear-gradient(269deg, #760023 0%, #105652 100%)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

package/interface/Property.d.ts

@@ -31,7 +31,7 @@ export type State<T> = [T, StateAction<T>];
  * @property {"full"} full - Full size
  * @property {"full"} full - Full size
  */
-export type Size = "xxxs" | "xxs" | "mmd" | "xm" | "ml" | "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "auto";
+export type Size = "xxxs" | "xxs" | "mmd" | "xm" | "ml" | "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | "auto";
 /**
  * Image size type
  * @enum {string}

package/layout/design/Row.design/index.js

@@ -36,6 +36,7 @@ export default function RowDesign({ item, stateAction, dataField, option, onClic
                         text: option?.text ?? "text-white",
                         width: "xs",
                         height: "xs",
+                        ...option,
                     } }, rowId + title))) })] }));
 }
 function RowElement(props) {

package/layout/index.d.ts

@@ -19,3 +19,4 @@ export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
 export { default as Gomito } from "./template/Gomito";
 export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
 export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
+export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";

package/layout/index.js

@@ -19,3 +19,4 @@ export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
 export { default as Gomito } from "./template/Gomito";
 export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
 export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
+export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";