@edu-tosel/design 1.0.19 → 1.0.21

package/board/template/CanvasBoard.d.ts

@@ -1,2 +1,2 @@
-import { BoardProps } from "../../interface/Board";
-export default function CanvasBoard({ children, options, widgets, }: BoardProps): import("react/jsx-runtime").JSX.Element;
+import { CanvasBoardProps } from "../../interface/Board";
+export default function CanvasBoard({ header, children, options, widgets, buttons, }: CanvasBoardProps): import("react/jsx-runtime").JSX.Element;

package/board/template/CanvasBoard.js

@@ -1,11 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Events } from "../..";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Events, Label } from "../..";
 import { cn } from "../../util";
 import { Board } from "../widget/Board.design";
-export default function CanvasBoard({ children, options, widgets, }) {
+import BoardHeader from "../widget/Header";
+export default function CanvasBoard({ header, children, options, widgets, buttons, }) {
     const layouts = "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ";
     const sizes = "h-full ";
     const paddings = "pb-36 xl:pb-6 px-2 xs:px-4 xl:pl-7.5 xl:pr-2 pt-2 xs:pt-4 xl:pt-7.5";
     const styles = "overflow-y-scroll ";
-    return (_jsx(Board, { widgets: widgets, options: { ...options, isRounded: true }, children: _jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }) }));
+    return (_jsxs("div", { className: "relative w-full", children: [_jsxs(Board, { widgets: widgets, options: { ...options, isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), _jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) })] }), _jsx("div", { className: "absolute -bottom-18.5 right-0", 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/ManageBoard.d.ts

@@ -1,4 +1,4 @@
 import { ManageBoardProps } from "../../interface/Board";
 export default function ManageBoard<K extends string, T extends {
     [p in K]: any;
-}>({ header, data, widgets, options }: ManageBoardProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ header, dataSets, dataField, widgets, options }: ManageBoardProps<T>): import("react/jsx-runtime").JSX.Element;

package/board/template/ManageBoard.js

@@ -5,9 +5,8 @@ import BoardHeader from "../widget/Header";
 import { cn, sortByOrder } from "../../util";
 import { useWidgetStore } from "../../store";
 import { useId } from "react";
-export default function ManageBoard({ header, data, widgets, options }) {
+export default function ManageBoard({ header, dataSets, dataField, widgets, options }) {
     const { classNames, noPadding } = options ?? {};
-    const { dataSets, dataField } = data;
     const { order } = useWidgetStore();
     const id = useId();
     const orders = order[id] ?? [];

package/board/widget/Header.d.ts

@@ -1,2 +1,2 @@
 import { BoardHeaderProps } from "./../../interface/Board";
-export default function BoardHeader({ titles, tags, options, }: BoardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default function BoardHeader({ titles, tag, options, }: BoardHeaderProps): import("react/jsx-runtime").JSX.Element;

package/board/widget/Header.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Input, Select } from "../../html";
-export default function BoardHeader({ titles, tags, options, }) {
+export default function BoardHeader({ titles, tag, options, }) {
     const { title, icon } = titles ?? {};
-    const { selects, inputs } = tags ?? {};
+    const { selects, inputs } = tag ?? {};
     const { colors } = options ?? {};
     const { bgColor, textColor } = colors ?? {
         bgColor: "white",
@@ -20,5 +20,5 @@ export default function BoardHeader({ titles, tags, options, }) {
         displays: "xl:hidden block ",
         sizes: "w-full h-22",
     };
-    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-bold text-green-dark", children: title })] }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ width, title, options, state }, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: title }), _jsx(Select, { options: { width }, selectOptions: options, state: state }, title)] }, index))), inputs?.map(({ width, title, placeholder, state }, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: title }), _jsx(Input, { placeholder: placeholder, state: state, options: { width } })] }, 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-bold text-green-dark", children: title })] }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ width, title, options, state }, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: title }), _jsx(Select, { options: { width }, selectOptions: options, state: state }, title)] }, index))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
 }

package/card/index.d.ts

@@ -3,4 +3,3 @@ export { default as ChartCard } from "./template/ChartCard";
 export { default as InfoCard } from "./template/InfoCard";
 export { default as NavCard } from "./template/NavCard";
 export { default as TableCard } from "./template/TableCard";
-export { default as TrumpCard } from "./widget/NavCard.design";

package/card/index.js

@@ -3,4 +3,3 @@ export { default as ChartCard } from "./template/ChartCard";
 export { default as InfoCard } from "./template/InfoCard";
 export { default as NavCard } from "./template/NavCard";
 export { default as TableCard } from "./template/TableCard";
-export { default as TrumpCard } from "./widget/NavCard.design";

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 "../widget/Card.design";
 export default function AddCard({ title, icon, onClick, options, }) {
     const { width } = options ?? {};
     const container = {

package/card/template/ChartCard.js

@@ -1,6 +1,6 @@
 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 "../widget/Card.design";
 export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, options, average, }) {
     const { width, height } = options ?? {};
     return (_jsxs(Card, { options: {

package/card/template/InfoCard.d.ts

@@ -1,23 +1,18 @@
-import { InfoCardExamProps, InfoCardProductProps, InfoCardProps } from "../../interface";
+import { InfoCardPersonalInformationProps, InfoCardExamProps, InfoCardGradeProps, InfoCardItemProps, InfoCardProductProps, InfoCardExamDataREGProps, InfoCardExamDataOLYProps } from "../../interface";
+declare function PersonalInformation({ titles, data, }: InfoCardPersonalInformationProps): import("react/jsx-runtime").JSX.Element;
 declare function Exam({ titles, data }: InfoCardExamProps): import("react/jsx-runtime").JSX.Element;
+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 function Product({ titles, data }: InfoCardProductProps): import("react/jsx-runtime").JSX.Element;
-declare function Item({ titles, data, }: Omit<InfoCardProps, "children"> & {
-    data: {
-        item: string;
-    };
-}): import("react/jsx-runtime").JSX.Element;
-declare function Grade({ titles, data, }: Omit<InfoCardProps, "children"> & {
-    data: {
-        level?: string;
-        levelString?: string;
-        levelColor?: string;
-        profileImage?: string;
-        score?: number;
-        grade?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;
+declare function Item({ titles, data }: InfoCardItemProps): import("react/jsx-runtime").JSX.Element;
+declare function Grade({ titles, data }: InfoCardGradeProps): import("react/jsx-runtime").JSX.Element;
 declare const InfoCard: {
+    PersonalInformation: typeof PersonalInformation;
     Exam: typeof Exam;
+    ExamData: {
+        REG: typeof ExamDataREG;
+        OLY: typeof ExamDataOLY;
+    };
     Product: typeof Product;
     Item: typeof Item;
     Grade: typeof Grade;

package/card/template/InfoCard.js

@@ -1,11 +1,34 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useNavigate } from "react-router-dom";
 import { InfoCardDesign } from "../widget/InfoCard.design";
-import { Label } from "../..";
-import { cn } from "../../util";
+import { Events, Label, NoData } from "../..";
+import { cn, gradient } from "../../util";
 const label = {
     positions: "absolute bottom-5 right-5",
 };
+function PersonalInformation({ titles, data, }) {
+    const body = {
+        container: "flex flex-col pt-5.75",
+        belong: "text-crimson-burgundy",
+        username: "text-gray-dim font-bold",
+        name: "text-xl font-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),
+                    } })] }) }));
+}
 function Exam({ titles, data }) {
     const { status, isPublic, manager, examDate, endDate } = data;
     const container = {
@@ -13,12 +36,59 @@ function Exam({ titles, data }) {
         displays: "flex flex-col justify-between mt-2.5",
         sizes: "h-19.25 w-full",
     };
-    const navigate = useNavigate();
     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-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: () => navigate("/admin/grades/1"), 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-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) } })] }) }));
+}
+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-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-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-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."] })] }) }) }) }));
 }
 function Product({ titles, data }) {
     const { date, status, receiver, requester } = data;
@@ -39,7 +109,7 @@ function Product({ titles, data }) {
                         text: "hover:text-white",
                     } })] }) }));
 }
-function Item({ titles, data, }) {
+function Item({ titles, data }) {
     const { item } = data;
     return (_jsx(InfoCardDesign, { titles: titles, options: {
             titleBorder: "border-blue-navy",
@@ -47,7 +117,7 @@ function Item({ titles, data, }) {
             height: "xs",
         }, children: _jsx("div", { children: item }) }));
 }
-function Grade({ titles, data, }) {
+function Grade({ titles, data }) {
     const container = {
         positions: "relative",
         displays: "flex flex-col justify-between mt-2.5",
@@ -72,7 +142,12 @@ function Grade({ titles, data, }) {
                     } }), _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 }) }) })] }) }));
 }
 const InfoCard = {
+    PersonalInformation,
     Exam,
+    ExamData: {
+        REG: ExamDataREG,
+        OLY: ExamDataOLY,
+    },
     Product,
     Item,
     Grade,

package/card/template/NavCard.js

@@ -33,7 +33,7 @@ function BannerAndButtonInLay({ banner, buttonInLay, }) {
         ...buttonInLay,
         options: { ...buttonInLay.options, noShadow: true },
     };
-    return (_jsxs("div", { className: "flex", children: [_jsx("div", { className: "box-shadow rounded-xl", children: _jsx(Banner, { ...bannerProps }) }), _jsx("div", { className: "box-shadow rounded-xl", children: _jsx(ButtonInLay, { ...buttonInLayProps }) })] }));
+    return (_jsxs("div", { className: "flex w-full", children: [_jsx("div", { className: "box-shadow rounded-xl w-full", children: _jsx(Banner, { ...bannerProps }) }), _jsx("div", { className: "box-shadow rounded-xl w-full", children: _jsx(ButtonInLay, { ...buttonInLayProps }) })] }));
 }
 const NavCard = {
     Banner,

package/card/template/TableCard.d.ts

@@ -1,4 +1,8 @@
 import { TableCardProps } from "../../interface";
-export default function TableCard<K extends string, T extends {
+declare function TableCard<K extends string, T extends {
     [p in K]: any;
-}>({ dataSets, dataField, options }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
+}>(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;
+}
+export default TableCard;

package/card/template/TableCard.js

@@ -1,22 +1,20 @@
 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 { DataField, Row } from "../../layout";
-export default function TableCard({ dataSets, dataField, options }) {
-    const { width, height } = options ?? {};
-    const { order, setOrder } = useWidgetStore();
-    const id = useId();
-    const orders = order[id] ?? [];
-    const container = {
-        paddings: "pt-4 pb-14",
-    };
-    return (_jsx(Card, { header: _jsx(DataField.Card, { id: id, dataField: dataField }), options: {
-            classNames: cn(container),
-            width: width ?? "full",
-            height: height ?? "lg",
-            overflow: "y-scroll",
-            noPadding: true,
-        }, children: sortByOrder(dataSets, orders).map((dataSet, index) => (_jsx(Row.Card, { dataSet: dataSet, dataField: dataField }, id + index))) }));
+import TableCardDesign from "../widget/TableCard.design";
+function TableCard(props) {
+    return _jsx(TableCardDesign, { ...props });
 }
+function Log(props) {
+    return (_jsx(TableCardDesign, { dataField: props.dataField, dataSet: props.dataSet, options: {
+            ...props.options,
+            rowHeight: "h-5",
+            onClick: props.options?.onClick,
+            text: "text-white",
+            padding: "p-7.5",
+            noHeader: true,
+            noHover: true,
+            noRowPadding: true,
+            className: "flex flex-col gap-2.5",
+        } }));
+}
+TableCard.Log = Log;
+export default TableCard;

package/card/widget/Card.design.d.ts

@@ -1,2 +1,2 @@
 import { CardProps } from "../../interface/Card";
-export declare function Card({ header, children, options, debug }: CardProps): import("react/jsx-runtime").JSX.Element;
+export default function CardDesign({ header, children, options, debug, }: CardProps): import("react/jsx-runtime").JSX.Element;

package/card/widget/Card.design.js

@@ -21,7 +21,7 @@ const heightSize = {
     full: "h-full",
     auto: "h-auto min-h-80",
 };
-export function Card({ header, children, options, debug }) {
+export default function CardDesign({ header, children, options, debug, }) {
     const { setIsOwn } = useWidgetStore();
     const { classNames, boundary, rounded, height, width, text, background, onClick, overflow, noShadow, } = options ?? {};
     const setBoundary = () => {
@@ -29,8 +29,8 @@ export function Card({ header, children, options, debug }) {
             return "";
         if (boundary === "shadow")
             return "box-shadow";
-        if (boundary === "border")
-            return "border-2";
+        if (boundary?.includes("border"))
+            return boundary;
         if (boundary === "none")
             return "";
         return "box-shadow";

package/card/widget/InfoCard.design.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
-import { Card } from "./Card.design";
+import Card from "./Card.design";
 export function InfoCardDesign({ titles: { title, subtitle }, debug, options, children, }) {
     const { titleBorder, text } = options ?? {};
     const container = {

package/card/widget/NavCard.design.d.ts

@@ -1,2 +1,2 @@
 import { NavCardProps } from "../../interface";
-export default function NavCard({ titles, options }: NavCardProps): import("react/jsx-runtime").JSX.Element;
+export default function NavCardDesign({ titles, options }: NavCardProps): import("react/jsx-runtime").JSX.Element;

package/card/widget/NavCard.design.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Label } from "../../html";
 import { LineBreaks } from "../../text";
 import { cn } from "../../util";
-import { Card } from "./Card.design";
-export default function NavCard({ titles, options }) {
-    const { title, subtitle, color: titleColor } = titles;
+import Card from "./Card.design";
+export default function NavCardDesign({ titles, options }) {
+    const { title, subtitle, color, titleColor, subtitleColor } = titles;
     const { width, image, buttonInLay } = options ?? {};
     const { path, size } = image ?? { size: "sub" };
     const flag = !buttonInLay && width === "xl";
@@ -13,17 +13,23 @@ export default function NavCard({ titles, options }) {
             positons: `absolute z-10 ${flag ? "left-12 top-0" : "top-7.5 left-7.5"}`,
             sizes: flag && "h-full",
             displays: `flex flex-col ${flag ? "gap-7.5 justify-center" : "gap-2.5"}`,
-            styles: `${titleColor ?? "text-gray-dim"}`,
+            styles: `${color ?? "text-gray-dim"}`,
+        },
+        title: {
+            fonts: `${flag ? "text-2xl h-6.75" : "text-xl h-6"} font-bold`,
+            styles: (!color && titleColor) ?? "text-gray-dim",
+        },
+        subtitle: {
+            fonts: "text-base h-10",
+            styles: (!color && subtitleColor) ?? "text-gray-dim",
         },
-        title: `${flag ? "text-2xl h-6.75" : "text-xl h-6"} font-bold`,
-        subtitle: "text-base h-10",
     };
     const imageClassNames = () => {
         if (size === "full")
             return "w-full h-full object-cover";
         return "absolute bottom-0 right-0 w-full xs:w-auto max-w-120 z-0 max-h-44 object-contain";
     };
-    return (_jsxs(Card, { options: options, children: [_jsxs("div", { className: cn(textBox.container), children: [_jsx("div", { className: cn(textBox.title), children: title }), _jsx(LineBreaks, { className: "subtitle", texts: subtitle ?? "" })] }), buttonInLay && (_jsx(Label.Button, { title: buttonInLay.title, onClick: buttonInLay.onClick, options: {
+    return (_jsxs(Card, { options: options, children: [_jsxs("div", { className: cn(textBox.container), children: [_jsx("div", { className: cn(textBox.title), children: title }), _jsx(LineBreaks, { className: cn(textBox.subtitle), texts: subtitle ?? "" })] }), buttonInLay && (_jsx(Label.Button, { title: buttonInLay.title, onClick: buttonInLay.onClick, options: {
                     disabled: buttonInLay.disabled,
                     className: "absolute bottom-7.5 left-7.5",
                     background: buttonInLay?.background,

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

@@ -0,0 +1,4 @@
+import { TableCardProps } from "../../interface";
+export default function TableCardDesign<K extends string, T extends {
+    [p in K]: any;
+}>({ dataSet, dataField, options }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;

package/card/widget/TableCard.design.js

@@ -0,0 +1,28 @@
+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 { DataField, Events, NoData, Row } from "../..";
+export default function TableCardDesign({ dataSet, dataField, options }) {
+    const { width, height } = options ?? {};
+    const { order } = useWidgetStore();
+    const id = useId();
+    const orders = order[id] ?? [];
+    const container = {
+        paddings: options?.padding ?? "pt-4 pb-14",
+        className: options?.className,
+    };
+    return (_jsx(Card, { header: !options?.noHeader && _jsx(DataField.Card, { id: id, dataField: dataField }), options: {
+            classNames: cn(container),
+            width: width ?? "full",
+            height: height ?? "lg",
+            overflow: "y-scroll",
+            noPadding: true,
+        }, children: _jsx(Events.Replace, { widgets: [
+                [
+                    dataSet.items.length === 0,
+                    dataSet.noData ?? _jsx(NoData.Script, { script: "No Data" }),
+                ],
+            ], 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))) }) }));
+}

package/globals.css

@@ -60,6 +60,9 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
 }
 
+.border-gradient-green-to-red {
+}
+
 .x-shape {
   position: relative;
   width: 0.83625rem;

package/hook/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useEase } from "./useEase";
+export { default as useEvents } from "./useEvents";

package/hook/index.js

@@ -0,0 +1,2 @@
+export { default as useEase } from "./useEase";
+export { default as useEvents } from "./useEvents";

package/hook/useEase.d.ts

@@ -0,0 +1 @@
+export default function useEase(inTime: number, outTime: number): readonly [boolean, number];

package/hook/useEase.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from "react";
+export default function useEase(inTime, outTime) {
+    const [flag, setFlag] = useState(false);
+    useEffect(() => {
+        const id = setTimeout(() => {
+            setFlag((prev) => !prev);
+        }, flag ? inTime : outTime);
+        return () => clearTimeout(id);
+    }, [flag, inTime, outTime]);
+    return [flag, flag ? inTime : outTime];
+}

package/hook/useEvents.d.ts

@@ -0,0 +1,3 @@
+type Event = readonly [boolean, string];
+export default function useEvents(args: Event[]): string[];
+export {};

package/{util/hooks.js → hook/useEvents.js}

@@ -1,15 +1,5 @@
 import { useEffect, useState } from "react";
-export function useEase(inTime, outTime) {
-    const [flag, setFlag] = useState(false);
-    useEffect(() => {
-        const id = setTimeout(() => {
-            setFlag((prev) => !prev);
-        }, flag ? inTime : outTime);
-        return () => clearTimeout(id);
-    }, [flag, inTime, outTime]);
-    return [flag, flag ? inTime : outTime];
-}
-export function useEvents(args) {
+export default function useEvents(args) {
     const [events, setEvents] = useState([]);
     args.forEach(([flag, event]) => {
         useEffect(() => {

package/html/template/Label.d.ts

@@ -1,8 +1,6 @@
-import { HTMLLabelElement, OnClick } from "../../interface";
+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 & {
-        onClick: OnClick;
-    }) => import("react/jsx-runtime").JSX.Element;
+    var Button: ({ title, onClick, options }: HTMLLabelElement) => import("react/jsx-runtime").JSX.Element;
 }
 export default Label;

package/html/template/Label.js

@@ -3,7 +3,7 @@ import LabelDesign from "./../widget/Label.design";
 function Label({ title, options }) {
     return (_jsx(LabelDesign, { title: title, options: { ...options, width: "sm", height: "xs" } }));
 }
-function Button({ title, onClick, options, }) {
+function Button({ title, onClick, options }) {
     return (_jsx(LabelDesign, { title: title, onClick: onClick, options: {
             ...options,
             width: options?.width ?? "md",

package/html/widget/Input.d.ts

@@ -1,2 +1,2 @@
 import { HTMLInputElement } from "../../interface";
-export default function Input({ state, placeholder, options, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;
+export default function Input({ state, onKeyDown, placeholder, options, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Input.js

@@ -10,15 +10,15 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function Input({ state, placeholder, options, }) {
+export default function Input({ state, onKeyDown, placeholder, options, }) {
     const { width } = options ?? {};
     const id = useId();
     const [value, setValue] = state;
     const container = {
-        width: `${widthSize[width ?? "md"]} h-8`,
+        width: `${widthSize[width ?? "xs"]} h-8`,
         styles: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-slate-200 text-xs",
         pseudo: "focus:outline-none focus:bg-white focus:text-black box-shadow-focus",
         effect: `transition-all`,
     };
-    return (_jsx("input", { className: cn(container), id: id, type: "text", placeholder: placeholder ?? "ID를 입력해주세요", onChange: (e) => setValue(e.target.value) }));
+    return (_jsx("input", { className: cn(container), id: id, type: "text", placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }));
 }

package/interaction/template/NoData.d.ts

@@ -1,5 +1,13 @@
-declare function Script(): import("react/jsx-runtime").JSX.Element;
+declare function Script(props: {
+    script?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Sign(props: {
+    script: string;
+    color?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 declare const NoData: {
     Script: typeof Script;
+    Sign: typeof Sign;
 };
 export default NoData;

package/interaction/template/NoData.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ScriptDesign from "../widget/Script.design";
-function Script() {
-    return _jsx(ScriptDesign, { script: "No Data" });
+import SignDesign from "../widget/Sign.design";
+function Script(props) {
+    return _jsx(ScriptDesign, { ...props });
+}
+function Sign(props) {
+    return _jsx(SignDesign, { ...props });
 }
 const NoData = {
     Script,
+    Sign,
 };
 export default NoData;

package/interaction/widget/Script.design.d.ts

@@ -1,3 +1,3 @@
 export default function Script({ script }: {
-    script: string;
+    script?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/interaction/widget/Script.design.js

@@ -1,4 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
 export default function Script({ script }) {
-    return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: script }));
+    const container = {
+        displays: "flex items-center justify-center",
+        sizes: "w-full h-full",
+        fonts: "text-xl",
+    };
+    return _jsx("div", { className: cn(container), children: script ?? "No Data" });
 }

package/interaction/widget/Sign.design.d.ts

@@ -0,0 +1,5 @@
+export default function SignDesign({ script, color, className, }: {
+    script: string;
+    color?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;