@edu-tosel/design 1.0.34 → 1.0.36

package/board/{widget → design}/Board.design.js

@@ -23,7 +23,7 @@ const heightSize = {
 };
 export function Board({ children, widgets, options, debug, buttons, }) {
     const { shows } = widgets ?? {};
-    const { width, height, isRounded, classNames } = options ?? {};
+    const { width, height, isRounded, className } = options ?? {};
     const container = {
         positions: "relative",
         width: widthSize[width ?? "full"],
@@ -38,7 +38,7 @@ export function Board({ children, widgets, options, debug, buttons, }) {
     const button = {
         positions: "fixed bottom-20 right-4 xl:absolute xl:-bottom-18.5 xl:right-0",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), children: _jsx(Events.Show, { widgets: shows, children: _jsx("div", { className: "h-full " + classNames, children: children }) }) }), _jsx("div", { className: cn(button), children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), children: _jsx(Events.Show, { widgets: shows, children: _jsx("div", { className: "h-full " + className, children: children }) }) }), _jsx("div", { className: cn(button), children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
                         ...options,
                         text: "text-white",
                         background: "bg-crimson-burgundy",

package/board/template/CanvasBoard.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Events } from "../..";
 import { cn } from "../../util";
-import { Board } from "../widget/Board.design";
+import { Board } from "../design/Board.design";
 import BoardHeader from "../widget/Header";
 export default function CanvasBoard({ header, children, options, widgets, buttons, }) {
     const body = {

package/board/template/ManageBoard.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DataField, Events, Shelf } from "../..";
-import { Board } from "../widget/Board.design";
+import { Board } from "../design/Board.design";
 import BoardHeader from "../widget/Header";
 import { cn, sortByOrder } from "../../util";
 import { useWidgetStore } from "../../store";
 import { useId } from "react";
 export default function ManageBoard({ header, dataSets, dataField, widgets, options, buttons, }) {
-    const { classNames, noPadding } = options ?? {};
+    const { className, noPadding } = options ?? {};
     const { order } = useWidgetStore();
     const id = useId();
     const orders = order[id] ?? [];
@@ -16,6 +16,6 @@ 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, classNames: classNames, children: [items &&
-                                sortByOrder(items, orders)?.map((item) => renderItem(item)), interaction] }, id + index))) }) })] }));
+    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 &&
+                                sortByOrder({ items, orders })?.map((item) => renderItem(item)), interaction] }, id + index))) }) })] }));
 }

package/board/template/PaperBoard.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../util";
-import { Board } from "../widget/Board.design";
+import { Board } from "../design/Board.design";
 export default function PaperBoard({ children, debug, options, }) {
-    const { classNames } = options ?? {};
+    const { className } = options ?? {};
     const container = {
         displays: "flex flex-col gap-7.5",
     };
-    return (_jsx(Board, { options: { width: "lg", height: "full", isRounded: false, classNames }, debug: debug, children: _jsx("div", { className: cn(container), children: children }) }));
+    return (_jsx(Board, { options: { width: "lg", height: "full", isRounded: false, className }, debug: debug, children: _jsx("div", { className: cn(container), children: children }) }));
 }

package/card/{widget → design}/Card.design.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { cn, isDebug } from "../../util";
 import { useWidgetStore } from "../../store";
 const widthSize = {
+    "2xs": "w-20",
     xs: "w-full md:w-60",
     sm: "w-full md:w-90",
     md: "w-full md:w-112.5",
@@ -16,14 +17,14 @@ const heightSize = {
     sm: "h-52.5",
     md: "h-67.5",
     lg: "h-67.5",
-    xl: "h-125",
+    xl: "h-125.5",
     "2xl": "",
     full: "h-full",
     auto: "h-auto min-h-80",
 };
 export default function CardDesign({ header, children, options, debug, }) {
     const { setIsOwn } = useWidgetStore();
-    const { classNames, boundary, rounded, height, width, text, background, onClick, overflow, noShadow, } = options ?? {};
+    const { className, boundary, rounded, height, width, text, background, onClick, overflow, noShadow, } = options ?? {};
     const setBoundary = () => {
         if (noShadow)
             return "";
@@ -50,7 +51,7 @@ export default function CardDesign({ header, children, options, debug, }) {
     const body = {
         sizes: "h-full",
         overflow: `overflow-${overflow ?? "hidden"}`,
-        classNames,
+        className,
     };
     return (_jsxs("div", { className: cn(container), children: [header && _jsx(_Fragment, { children: header }), _jsx("div", { onClick: onClick && onClick, className: cn(body), children: children })] }));
 }

package/card/{widget → design}/InfoCard.design.d.ts

@@ -1,2 +1,2 @@
 import { InfoCardProps } from "../../interface/Card";
-export declare function InfoCardDesign({ titles: { title, subtitle }, debug, options, children, }: InfoCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, options, children, }: InfoCardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/InfoCard.design.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+import Card from "./Card.design";
+export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, options, children, }) {
+    const { titleBorder, text } = options ?? {};
+    const container = {
+        displays: "flex flex-col",
+        paddings: "pt-5 px-5",
+    };
+    const topBox = {
+        container: {
+            displays: "flex justify-between items-end",
+            sizes: "w-full h-13.25",
+            styles: `${titleBorder} border-b-2 pb-2.5`,
+        },
+        titleText: "h-6 font-pretendard-bold text-xl w-52 truncate leading-none",
+        subtitleText: "h-4.75 text-base font-extralight flex items-center leading-none",
+        right: {
+            fontColor: `${text ?? "text-black"}`,
+            displays: "flex flex-col-reverse",
+        },
+    };
+    return (_jsxs(Card, { options: { ...options, className: cn(container) }, debug: debug, children: [_jsxs("div", { className: cn(topBox.container), children: [_jsxs("div", { className: "text-gray-dim ", children: [_jsx("div", { className: cn(topBox.titleText), children: title }), _jsx("div", { className: cn(topBox.subtitleText), children: subtitle ?? "" })] }), topRight] }), children] }));
+}

package/card/design/TableCard.design.d.ts

@@ -0,0 +1,2 @@
+import { TableCardProps } from "../../interface";
+export default function TableCardDesign<T>({ dataSet, dataField, options, }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;

package/card/{widget → design}/TableCard.design.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { useWidgetStore } from "../../store";
 import { cn, sortByOrder } from "../../util";
-import Card from "../widget/Card.design";
+import Card from "./Card.design";
 import { DataField, Events, Row } from "../..";
-export default function TableCardDesign({ dataSet, dataField, options }) {
+export default function TableCardDesign({ dataSet, dataField, options, }) {
     const { width, height } = options ?? {};
     const { order } = useWidgetStore();
     const id = useId();
@@ -14,10 +14,10 @@ export default function TableCardDesign({ dataSet, dataField, options }) {
         className: options?.className,
     };
     return (_jsx(Card, { header: !options?.noHeader && _jsx(DataField.Card, { id: id, dataField: dataField }), options: {
-            classNames: cn(container),
+            className: cn(container),
             width: width ?? "full",
             height: height ?? "lg",
             overflow: "y-scroll",
             noPadding: true,
-        }, children: _jsx(Events.Replace, { widgets: dataSet?.replaces, children: sortByOrder(dataSet.items, orders).map((item, index) => (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: options?.rowHeight, noHover: options?.noHover, noPadding: options?.noRowPadding }, id + index))) }) }));
+        }, children: _jsx(Events.Replace, { widgets: dataSet?.replaces, children: sortByOrder({ items: dataSet?.items, orders }).map((item, index) => (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: options?.rowHeight, noHover: options?.noHover, noPadding: options?.noRowPadding }, id + index))) }) }));
 }

package/card/template/AddCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
-import Card from "../widget/Card.design";
+import Card from "../design/Card.design";
 export default function AddCard({ title, icon, onClick, options, }) {
     const { width } = options ?? {};
     const container = {
@@ -13,5 +13,5 @@ export default function AddCard({ title, icon, onClick, options, }) {
         sizes: "w-9 h-9",
         styles: "bg-gray-light rounded-full",
     };
-    return (_jsxs(Card, { options: { width, classNames: cn(container), onClick }, children: [icon && (_jsx("div", { className: cn(iconBody), children: _jsx("img", { src: icon }) })), title && _jsx("div", { children: title })] }));
+    return (_jsxs(Card, { options: { width, className: cn(container), onClick }, children: [icon && (_jsx("div", { className: cn(iconBody), children: _jsx("img", { src: icon }) })), title && _jsx("div", { children: title })] }));
 }

package/card/template/ChartCard.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Area, Bar, ComposedChart, Legend, Line, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
-import Card from "../widget/Card.design";
+import Card from "../design/Card.design";
 export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, options, average, }) {
     const { width, height } = options ?? {};
     return (_jsxs(Card, { options: {
-            classNames: "pt-4 pr-4",
+            className: "pt-4 pr-4",
             width: width ?? "full",
             height: height ?? "lg",
             text: "text-xs",

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

@@ -0,0 +1,2 @@
+import { InfoCardExamProps } from "../../../interface";
+export default function Exam({ titles, data }: InfoCardExamProps): import("react/jsx-runtime").JSX.Element;

package/card/template/InfoCard/Exam.js

@@ -0,0 +1,18 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } 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 Exam({ titles, data }) {
+    const { status, isPublic, manager, examDate, endDate } = data;
+    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",
+            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) } })] }) }));
+}

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

@@ -0,0 +1,8 @@
+import { InfoCardExamDataOLYProps, InfoCardExamDataREGProps } from "../../../interface";
+declare function ExamDataREG({ titles, data }: InfoCardExamDataREGProps): import("react/jsx-runtime").JSX.Element;
+declare function ExamDataOLY({ titles, data }: InfoCardExamDataOLYProps): import("react/jsx-runtime").JSX.Element;
+declare const ExamData: {
+    REG: typeof ExamDataREG;
+    OLY: typeof ExamDataOLY;
+};
+export default ExamData;

package/card/template/InfoCard/ExamData.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Events, NoData } from "../../..";
+import { InfoCardDesign } from "../../design/InfoCard.design";
+import { cn } from "../../../util";
+function ExamDataREG({ titles, data }) {
+    const container = {
+        positions: "relative",
+        displays: "flex flex-col gap-5",
+        sizes: "h-36.75 w-50 pt-5",
+    };
+    const dataBox = {
+        container: "flex justify-between",
+        rightBox: "flex items-end",
+        score: "text-4xl font-pretendard-bold leading-none",
+    };
+    const arr = [
+        ["part 1", data && data?.scores[0], "text-crimson-burgundy"],
+        ["part 2", data && data?.scores[1], "text-crimson-burgundy"],
+        [
+            "total",
+            data && data?.scores[0] + data?.scores[1],
+            "text-gray-dim border-t border-dashed border-gray-dim pt-1",
+        ],
+    ];
+    return (_jsx(InfoCardDesign, { titles: titles, options: {
+            width: "xs",
+            height: "md",
+            titleBorder: "border-crimson-burgundy",
+        }, children: _jsx(Events.Replace, { widgets: [
+                [
+                    !data,
+                    _jsx(NoData.Sign, { script: "\uC774\uC804 \uAE30\uB85D\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.", color: "#910023", className: "text-[#910023] mt-12" }),
+                ],
+            ], children: _jsx("div", { className: cn(container), children: arr.map(([part, score, styles]) => (_jsxs("div", { className: cn(dataBox.container, styles), children: [_jsx("div", { children: part }), _jsxs("div", { className: cn(dataBox.rightBox), children: [_jsx("div", { className: "text-4xl font-pretendard-bold leading-none", children: score }), _jsx("div", { children: "\uC810" })] })] }))) }) }) }));
+}
+function ExamDataOLY({ titles, data }) {
+    const container = {
+        displays: "flex justify-center",
+        sizes: "w-full",
+        margins: "mt-11.375",
+    };
+    const body = {
+        displays: "flex flex-col justify-between items-center",
+        sizes: "h-20",
+    };
+    return (_jsx(InfoCardDesign, { titles: titles, options: { width: "xs", height: "md", titleBorder: "border-green-dark" }, children: _jsx(Events.Replace, { widgets: [
+                [
+                    !data,
+                    _jsx(NoData.Sign, { script: "\uC774\uC804 \uAE30\uB85D\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.", color: "#105652", className: "text-[#105652] mt-12" }),
+                ],
+            ], children: _jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex items-end text-green-dark", children: [_jsx("div", { className: "text-4xl font-pretendard-bold leading-none ", children: data?.score }), _jsx("div", { children: "\uC810" })] }), _jsxs("div", { className: "text-gray-dim", children: [data?.prize, "\uC744 \uC218\uC0C1\uD558\uC600\uC2B5\uB2C8\uB2E4."] })] }) }) }) }));
+}
+const ExamData = {
+    REG: ExamDataREG,
+    OLY: ExamDataOLY,
+};
+export default ExamData;

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

@@ -0,0 +1,24 @@
+import { DataPackage, InfoCardProps, State } from "../../../interface";
+export interface InfoCardFinanceProps<N, C> extends Omit<InfoCardProps, "children"> {
+    data: {
+        taxRate: number;
+        taxState: State<boolean>;
+        dataSets?: {
+            title: string;
+            sum: number | string;
+            tax: number | string;
+            total: number | string;
+            rate: number | string;
+            result: number | string;
+            number?: DataPackage<N> & {
+                title: string;
+            };
+            amount?: DataPackage<C> & {
+                title: string;
+            };
+        }[];
+    };
+}
+export default function Finance<N, C extends {
+    sum: number;
+}>({ titles, data, }: InfoCardFinanceProps<N, C>): import("react/jsx-runtime").JSX.Element;

package/card/template/InfoCard/Finance.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import { InfoCardDesign } from "../../design/InfoCard.design";
+import { useId } from "react";
+export default function Finance({ titles, data, }) {
+    const { taxRate, taxState, dataSets } = data;
+    const [taxOn, setTaxOn] = taxState;
+    const id = useId();
+    return (_jsx(InfoCardDesign, { titles: {
+            title: titles.title,
+            subtitle: titles.subtitle,
+        }, options: {
+            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" }) })] }) }));
+}
+function Numbers({ title, dataSet, dataField, }) {
+    const id = useId();
+    const itemBox = {
+        displays: "flex items-center justify-center ",
+        sizes: "w-1/2 h-5",
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-xs", children: title }), _jsxs("div", { className: "flex flex-col w-full h-36 pt-2.5 rounded-md bg-gray-light text-sm", children: [_jsx("div", { className: "flex items-center font-pretendard-bold", children: Object.keys(dataField).map((key) => (_jsx("div", { className: "flex items-center justify-center w-1/2 h-5", children: dataField[key]?.title }, key))) }), dataSet.items?.map((item, index) => (_jsx("div", { className: "flex items-center", children: dataField &&
+                            Object.keys(dataField).map((key, index) => (_jsx("div", { className: cn(itemBox, index % 2 === 0 ? "text-gray-dim" : "text-green-dark"), children: String(item[key]) }, key))) }, id + index)))] })] }));
+}
+function Amount({ title, dataSet, dataField, }) {
+    const id = useId();
+    const amountBox = {
+        displays: "flex items-center justify-end ",
+        sizes: "w-1/2 h-5 pr-2.5",
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-xs", children: title }), _jsxs("div", { className: "relative flex flex-col w-full h-36 pt-2.5 rounded-md bg-gray-light text-sm", children: [_jsx("div", { className: "absolute top-0 right-0 bg-green-light w-1/2 h-full rounded-md z-0" }), _jsx("div", { className: "flex items-center z-10", children: Object.keys(dataField).map((key) => (_jsx("div", { className: "flex items-center pl-2.5 text-start w-1/2 h-5 font-pretendard-bold", children: dataField[key]?.title }, key))) }), dataSet.items?.map((item, index) => (_jsx("div", { className: "flex items-center z-10", children: dataField &&
+                            Object.keys(dataField).map((key, index) => (_jsx("div", { className: cn(amountBox, index % 2 === 0 ? "text-gray-dim" : "text-green-dark"), children: Number(item[key]).toLocaleString() }, key))) }, id + index)))] })] }));
+}
+function Result({ title, amount, background, cnTitle, cnAmount, className, }) {
+    const container = {
+        displays: "flex items-center justify-between",
+        paddings: "px-2.5",
+        styles: "rounded-md w-full h-6 text-xs text-green-dark",
+        backgrounds: background ?? "bg-gray-light",
+        className,
+    };
+    const titleBox = {
+        styles: "w-20 text-center",
+        cnTitle,
+    };
+    const amountBox = {
+        styles: "w-20 text-end",
+        cnAmount,
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(titleBox), children: title }), _jsx("div", { className: cn(amountBox), children: amount?.toLocaleString() })] }));
+}

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

@@ -0,0 +1,2 @@
+import { InfoCardGradeProps } from "../../../interface";
+export default function Grade({ titles, data }: InfoCardGradeProps): import("react/jsx-runtime").JSX.Element;

package/card/template/InfoCard/Grade.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 Grade({ titles, data }) {
+    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",
+        text: data.levelColor,
+    };
+    return (_jsx(InfoCardDesign, { titles: titles, options: {
+            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: {
+                        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/Item.d.ts

@@ -0,0 +1,2 @@
+import { InfoCardItemProps } from "../../../interface";
+export default function Item({ titles, data }: InfoCardItemProps): import("react/jsx-runtime").JSX.Element;

package/card/template/InfoCard/Item.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InfoCardDesign } from "../../design/InfoCard.design";
+export default function Item({ titles, data }) {
+    const { item } = data;
+    return (_jsx(InfoCardDesign, { titles: titles, options: {
+            titleBorder: "border-blue-navy",
+            width: "xs",
+            height: "xs",
+        }, children: _jsx("div", { children: item }) }));
+}

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

@@ -0,0 +1,2 @@
+import { InfoCardPersonalInformationProps } from "../../../interface";
+export default function PersonalInformation({ titles, data, }: InfoCardPersonalInformationProps): import("react/jsx-runtime").JSX.Element;

package/card/template/InfoCard/PersonalInformation.js

@@ -0,0 +1,29 @@
+import { jsxs as _jsxs, jsx as _jsx, 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 body = {
+        container: "flex flex-col pt-5.75",
+        belong: "text-crimson-burgundy",
+        username: "text-gray-dim font-pretendard-bold",
+        name: "text-xl font-pretendard-bold text-crimson-burgundy",
+        subInfo: {
+            displays: "flex flex-col mt-7.5",
+            fonts: "text-xs text-gray-dim",
+        },
+    };
+    return (_jsx(InfoCardDesign, { titles: titles, options: {
+            titleBorder: "border-crimson-burgundy",
+            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: {
+                        width: "md",
+                        background: "bg-crimson-burgundy",
+                        text: "text-white",
+                        className: cn(label),
+                    } })] }) }));
+}

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

@@ -0,0 +1,2 @@
+import { InfoCardProductProps } from "../../../interface";
+export default function Product({ titles, data }: InfoCardProductProps): import("react/jsx-runtime").JSX.Element;

package/card/template/InfoCard/Product.js

@@ -0,0 +1,24 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Label } from "../../..";
+import { cn } from "../../../util";
+import { InfoCardDesign } from "../../design/InfoCard.design";
+import { label } from "./static/label";
+export default function Product({ titles, data }) {
+    const { date, status, receiver, requester } = data;
+    const container = {
+        positions: "relative",
+        displays: "flex flex-col mt-2.5",
+        sizes: "h-19.25 w-full",
+    };
+    return (_jsx(InfoCardDesign, { titles: titles, options: {
+            titleBorder: "border-jr-blue",
+            width: "sm",
+            height: "xs",
+        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "text-sm", children: ["\uC77C\uC2DC: ", date] }), _jsxs("div", { className: "text-sm", children: ["\uC694\uCCAD\uC790: ", requester ?? "No Data"] }), _jsxs("div", { className: "text-sm", children: ["\uC218\uC2E0\uC790: ", receiver ?? "No Data"] })] }), _jsx(Label.Button, { title: status ?? "", onClick: () => console.log("click"), options: {
+                        width: "sm",
+                        height: "xs",
+                        className: cn(label),
+                        background: "bg-gray-light hover:bg-blue-sky",
+                        text: "hover:text-white",
+                    } })] }) }));
+}

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

@@ -0,0 +1,19 @@
+import Exam from "./Exam";
+import Finance from "./Finance";
+import Grade from "./Grade";
+import Item from "./Item";
+import PersonalInformation from "./PersonalInformation";
+import Product from "./Product";
+declare const InfoCard: {
+    PersonalInformation: typeof PersonalInformation;
+    Exam: typeof Exam;
+    ExamData: {
+        REG: ({ titles, data }: import("../../../interface").InfoCardExamDataREGProps) => import("react/jsx-runtime").JSX.Element;
+        OLY: ({ titles, data }: import("../../../interface").InfoCardExamDataOLYProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    Finance: typeof Finance;
+    Product: typeof Product;
+    Item: typeof Item;
+    Grade: typeof Grade;
+};
+export default InfoCard;

package/card/template/InfoCard/index.js

@@ -0,0 +1,17 @@
+import Exam from "./Exam";
+import ExamData from "./ExamData";
+import Finance from "./Finance";
+import Grade from "./Grade";
+import Item from "./Item";
+import PersonalInformation from "./PersonalInformation";
+import Product from "./Product";
+const InfoCard = {
+    PersonalInformation,
+    Exam,
+    ExamData,
+    Finance,
+    Product,
+    Item,
+    Grade,
+};
+export default InfoCard;

package/card/template/InfoCard/static/label.d.ts

@@ -0,0 +1,3 @@
+export declare const label: {
+    positions: string;
+};

package/card/template/InfoCard/static/label.js

@@ -0,0 +1,3 @@
+export const label = {
+    positions: "absolute bottom-5 right-5",
+};

package/card/template/NavCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import NavCardDesign from "../widget/NavCard.design";
+import NavCardDesign from "../design/NavCard.design";
 function Banner({ titles, options }) {
     return (_jsx(NavCardDesign, { titles: titles, options: { ...options, width: options?.width ?? "xl", height: "sm" } }));
 }

package/card/template/TableCard.d.ts

@@ -1,8 +1,6 @@
 import { TableCardProps } from "../../interface";
-declare function TableCard<K extends string, T extends {
-    [p in K]: any;
-}>(props: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function TableCard<T>(props: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace TableCard {
-    var Log: <K extends string, T extends { [p in K]: any; }>(props: TableCardProps<T>) => import("react/jsx-runtime").JSX.Element;
+    var Log: <T>(props: TableCardProps<T>) => import("react/jsx-runtime").JSX.Element;
 }
 export default TableCard;

package/card/template/TableCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import TableCardDesign from "../widget/TableCard.design";
+import TableCardDesign from "../design/TableCard.design";
 function TableCard(props) {
     return _jsx(TableCardDesign, { ...props });
 }

package/globals.css

@@ -185,7 +185,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   width: 16rem !important;
 }
 /* toggle button */
-[type="checkbox"]::before {
+.toggle[type="checkbox"]::before {
   content: "";
   position: absolute;
   left: 1px;
@@ -197,18 +197,30 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   background-color: white;
   transition: left 100ms linear;
 }
-[type="checkbox"]:checked::before {
+.toggle[type="checkbox"]:checked::before {
   background-color: white;
   left: 1.32rem;
 }
-[type="checkbox"]:checked {
+.toggle[type="checkbox"]:checked {
   background-color: #105652;
 }
-[type="checkbox"]:disabled {
+.toggle[type="checkbox"]:disabled {
   opacity: 0.3;
   cursor: not-allowed;
 }
-[type="checkbox"]:disabled + span {
+.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/hook/useFlag.d.ts

@@ -1,2 +1,5 @@
 import { State } from "../interface";
-export default function useFlag<T>(state: State<T>): void;
+export default function useFlag<T>({ safe, state, }: {
+    safe?: string;
+    state: State<T>;
+}): void;