@edu-tosel/design 1.0.56 → 1.0.58

package/globals.css

@@ -1,226 +1,226 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@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");
-}
-
-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-sm {
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-}
-
-.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-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;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@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");
+}
+
+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-sm {
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+}
+
+.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-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;
+}

package/interface/Action.d.ts

@@ -39,6 +39,7 @@ export interface RowProps<T> {
     dataField?: DataField<T>;
     onClick?: OnClick<T>;
     buttons?: HTMLLabelElement[];
+    flag?: boolean;
     options?: {
         height?: string;
         size?: string;

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

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

package/layout/design/Row.design.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../../util";
 import { Label } from "../../widget";
-export default function RowDesign({ item, dataField, options, onClick, buttons, }) {
+export default function RowDesign({ item, dataField, options, onClick, buttons, flag, }) {
     const { size, padding, text, noHover, className, isPointer } = options ?? {};
     const id = useId();
     const container = {
@@ -18,7 +18,13 @@ export default function RowDesign({ item, dataField, options, onClick, buttons,
         styles: "truncate",
         className,
     };
-    return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [dataField &&
+    const flagBox = (flag) => ({
+        positions: "absolute left-3.5",
+        backgrounds: flag ? "bg-green-500" : "bg-red-500",
+        sizes: "w-2 h-2",
+        styles: "rounded-full",
+    });
+    return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [typeof flag !== "undefined" && _jsx("div", { className: cn(flagBox(flag)) }), dataField &&
                 Object.keys(dataField).map((key) => (_jsx("div", { className: cn(`w-${dataField[key]?.size}/100`, itemBox), children: String(item[key]) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
                         background: options?.background ?? "bg-crimson-dark",
                         text: options?.text ?? "text-white",

package/layout/template/Row.d.ts

@@ -1,11 +1,11 @@
 import { RowProps } from "../../interface";
-declare function Row<T>({ item, dataField, onClick, buttons }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Row<T>({ item, dataField, onClick, buttons, flag }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Row {
-    var Card: <T>({ item, dataField, onClick, buttons, height, noPadding, noHover, }: Omit<RowProps<T>, "options"> & {
+    var Card: <T>({ item, dataField, onClick, buttons, height, noPadding, noHover, flag, }: Omit<RowProps<T>, "options"> & {
         height?: string | undefined;
         noPadding?: boolean | undefined;
         noHover?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    var Board: <T>({ item, dataField, onClick, buttons, options }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
+    var Board: <T>({ item, dataField, onClick, buttons, flag, options, }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
 }
 export default Row;

package/layout/template/Row.js

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

package/modal/template/Confirm/Alert.d.ts

@@ -0,0 +1,9 @@
+import { Scripts } from "../../../interface";
+import { ConfirmModalProps } from "../../../interface/Modal";
+interface AlertProps extends Omit<ConfirmModalProps, "children"> {
+    scripts: Scripts & {
+        alert?: string;
+    };
+}
+export type { AlertProps };
+export default function Alert(props: AlertProps): import("react/jsx-runtime").JSX.Element;

package/modal/template/Confirm/Alert.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "../../../text";
+import { cn } from "../../../util";
+import ConfirmModalDesign from "../../design/ConfirmModal.design";
+export default function Alert(props) {
+    const container = {
+        displays: "flex flex-col gap-3 justify-center items-center",
+        margins: "mt-2.5",
+        sizes: "w-full h-60",
+    };
+    return (_jsx(ConfirmModalDesign, { ...props, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: "leading-none text-xl font-pretendard-bold", children: props.scripts.script }), _jsx(LineBreaks, { className: "text-center", texts: props.scripts.subscript }), _jsx("div", { className: "leading-none font-pretendard-bold text-crimson-burgundy", children: props.scripts.alert })] }), options: {
+            width: "md",
+            height: "lg",
+        } }));
+}

package/modal/template/Confirm/Confirm.d.ts

@@ -1,9 +1,2 @@
-import { Scripts } from "../../../interface";
 import { ConfirmModalProps } from "../../../interface/Modal";
-interface ConfirmProps extends Omit<ConfirmModalProps, "children"> {
-    scripts: Scripts & {
-        alert?: string;
-    };
-}
-export type { ConfirmProps };
-export default function Confirm(props: ConfirmProps): import("react/jsx-runtime").JSX.Element;
+export default function Confirm(props: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/template/Confirm/Confirm.js

@@ -1,14 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LineBreaks } from "../../../text";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../../util";
 import ConfirmModalDesign from "../../design/ConfirmModal.design";
 export default function Confirm(props) {
     const container = {
-        displays: "flex flex-col gap-3 justify-center items-center",
+        displays: "flex flex-col",
         margins: "mt-2.5",
         sizes: "w-full h-60",
     };
-    return (_jsx(ConfirmModalDesign, { ...props, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: "leading-none text-xl font-pretendard-bold", children: props.scripts.script }), _jsx(LineBreaks, { className: "text-center", texts: props.scripts.subscript }), _jsx("div", { className: "leading-none font-pretendard-bold text-crimson-burgundy", children: props.scripts.alert })] }), options: {
+    return (_jsx(ConfirmModalDesign, { ...props, children: _jsx("div", { className: cn(container), children: props.children }), options: {
             width: "md",
             height: "lg",
         } }));

package/modal/template/Confirm/index.d.ts

@@ -1,6 +1,7 @@
-import { ConfirmProps } from "./Confirm";
-declare function ConfirmModal(props: ConfirmProps): import("react/jsx-runtime").JSX.Element;
+import { ConfirmModalProps } from "../../../interface/Modal";
+declare function ConfirmModal(props: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ConfirmModal {
+    var Alert: typeof import("./Alert").default;
     var Input: typeof import("./Input").default;
     var Reimage: typeof import("./Reimage").default;
     var Switch: typeof import("./Switch").default;

package/modal/template/Confirm/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Confirm from "./Confirm";
+import Alert from "./Alert";
 import Input from "./Input";
 import Reimage from "./Reimage";
 import Tag from "./Tag";
@@ -7,6 +8,7 @@ import Switch from "./Switch";
 function ConfirmModal(props) {
     return _jsx(Confirm, { ...props });
 }
+ConfirmModal.Alert = Alert;
 ConfirmModal.Input = Input;
 ConfirmModal.Reimage = Reimage;
 ConfirmModal.Switch = Switch;

package/package.json

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