@edu-tosel/design 1.0.16 → 1.0.18

package/board/template/CanvasBoard.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../util";
-import { Board } from "../widget/Board";
+import { Board } from "../widget/Board.design";
 export default function CanvasBoard({ children, options, widgets, }) {
     const layouts = "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ";
     const sizes = "h-full ";
-    const paddings = "pb-36 xl:pb-0 px-2 xs:px-4 xl:pl-7.5 xl:pr-2 pt-2 xs:pt-4 xl:pt-7.5";
+    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("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
 }

package/board/template/ManageBoard.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Events, Shelf } from "../..";
-import { Board } from "../widget/Board";
+import { DataField, Events, Shelf } from "../..";
+import { Board } from "../widget/Board.design";
 import BoardHeader from "../widget/Header";
-import BoardDataField from "../widget/DataField";
 import { cn, sortByOrder } from "../../util";
 import { useWidgetStore } from "../../store";
 import { useId } from "react";
@@ -18,6 +17,6 @@ export default function ManageBoard({ header, data, widgets, options }) {
         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, options: { isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), dataField && _jsx(BoardDataField, { 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 &&
+    return (_jsxs(Board, { widgets: widgets, 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))) }) })] }));
 }

package/board/template/PaperBoard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../util";
-import { Board } from "../widget/Board";
+import { Board } from "../widget/Board.design";
 export default function PaperBoard({ children, debug, options, }) {
     const { classNames } = options ?? {};
     const container = {

package/board/widget/Header.js

@@ -12,7 +12,7 @@ export default function BoardHeader({ titles, tags, options, }) {
     const container = {
         positions: "fixed top-15 xl:top-0 left-0 z-20 xl:relative flex items-center",
         paddings: "px-7.5",
-        styles: `bg-${bgColor} text-${textColor}`,
+        styles: `${bgColor} ${textColor}`,
         sizes: "w-full h-19",
         border: "border-b-2 border-green-dark",
     };

package/card/index.d.ts

@@ -1,8 +1,6 @@
 export { default as AddCard } from "./template/AddCard";
-export { default as ProfileCard } from "./template/ProfileCard";
-export { default as TrumpCard } from "./template/TrumpCard";
 export { default as ChartCard } from "./template/ChartCard";
-export { default as TableCard } from "./template/TableCard";
-export { default as RowCard } from "./template/RowCard";
 export { default as InfoCard } from "./template/InfoCard";
-export { default as ReportCard } from "./template/ReportCard";
+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

@@ -1,8 +1,6 @@
 export { default as AddCard } from "./template/AddCard";
-export { default as ProfileCard } from "./template/ProfileCard";
-export { default as TrumpCard } from "./template/TrumpCard";
 export { default as ChartCard } from "./template/ChartCard";
-export { default as TableCard } from "./template/TableCard";
-export { default as RowCard } from "./template/RowCard";
 export { default as InfoCard } from "./template/InfoCard";
-export { default as ReportCard } from "./template/ReportCard";
+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";
+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,12 +1,12 @@
 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";
+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: {
             classNames: "pt-4 pr-4",
             width: width ?? "full",
             height: height ?? "lg",
-            text: { size: "xs" },
+            text: "text-xs",
         }, children: [_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, children: [_jsx(XAxis, { dataKey: xAxis }), _jsx(YAxis, { dataKey: yAxis }), _jsx(Tooltip, {}), _jsx(Legend, {}), lines?.map((line) => (_jsx(Line, { ...line }, line.dataKey))), bars?.map((bar) => (_jsx(Bar, { ...bar }, bar.dataKey))), areas?.map((area) => (_jsx(Area, { ...area }, area.dataKey))), average && (_jsx(_Fragment, { children: _jsx(ReferenceLine, { x: average.x, stroke: "#ff0000" }) }))] }) }), average && (_jsxs("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center text-3xl text-gray-300 font-bold", children: ["\uD3C9\uADE0: ", average?.score, "\uC810"] }))] }));
 }

package/card/template/InfoCard.d.ts

@@ -1,32 +1,25 @@
-import { InfoCardProps, Button } from "../../interface";
-declare function Exam({ titles, data, }: Omit<InfoCardProps, "children"> & {
-    data: {
-        status: string;
-        examDate: string;
-        endDate: string;
-        manager: string;
-        isPublic: boolean;
-    };
-}): import("react/jsx-runtime").JSX.Element;
-declare function Product({ titles, data, }: Omit<InfoCardProps, "children"> & {
+import { InfoCardExamProps, InfoCardProductProps, InfoCardProps } from "../../interface";
+declare function Exam({ titles, data }: InfoCardExamProps): 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: {
-        date?: string;
-        status?: string;
-        receiver?: string | null;
-        requester?: string | null;
-        button?: Button;
+        item: string;
     };
 }): import("react/jsx-runtime").JSX.Element;
-declare function Item({ titles, data, }: Omit<InfoCardProps, "children"> & {
+declare function Grade({ titles, data, }: Omit<InfoCardProps, "children"> & {
     data: {
-        item: string;
+        level?: string;
+        levelString?: string;
+        levelColor?: string;
+        profileImage?: string;
+        score?: number;
+        grade?: number;
     };
 }): import("react/jsx-runtime").JSX.Element;
-declare function Profile(props: Partial<InfoCardProps>): import("react/jsx-runtime").JSX.Element;
 declare const InfoCard: {
     Exam: typeof Exam;
     Product: typeof Product;
     Item: typeof Item;
-    Profile: typeof Profile;
+    Grade: typeof Grade;
 };
 export default InfoCard;

package/card/template/InfoCard.js

@@ -1,73 +1,80 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { InfoCardDesign } from "../widget/InfoCard.design";
+import { Label } from "../..";
 import { cn } from "../../util";
-import { InfoCardDesign } from "./InfoCard.design";
-function Exam({ titles, data, }) {
+const label = {
+    positions: "absolute bottom-5 right-5",
+};
+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",
     };
-    const style = {
-        positions: "absolute bottom-0 right-0",
-        sizes: "w-22 h-6",
-        displays: "flex justify-center items-center",
-        styles: "text-black rounded-md text-sm",
-        background: `bg-gray-light`,
-    };
+    const navigate = useNavigate();
     return (_jsx(InfoCardDesign, { titles: titles, options: {
-            titleBorderColor: "red-crimson",
-            rightTextColor: "red-crimson",
+            titleBorder: "border-red-crimson",
             width: "sm",
-            height: "sm",
-            buttonBackgroundColor: "gray-light",
-        }, 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("div", { className: cn(style), children: status })] }) }));
+            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) } })] }) }));
 }
-function Product({ titles, data, }) {
-    const { date, status, receiver, requester, button } = data;
+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",
     };
-    const style = {
-        positions: "absolute bottom-0 right-0",
-        sizes: "w-22 h-6",
-        displays: "flex justify-center items-center",
-        styles: "rounded-md text-sm",
-        animation: "text-black bg-gray-light hover:bg-blue-sky hover:text-white duration-500",
-    };
-    const [hover, setHover] = useState(false);
     return (_jsx(InfoCardDesign, { titles: titles, options: {
-            titleBorderColor: "jr-blue",
-            rightTextColor: "red-crimson",
+            titleBorder: "border-jr-blue",
             width: "sm",
-            height: "sm",
-            buttonBackgroundColor: "gray-light",
-        }, 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("button", { className: cn(style), onClick: () => button?.[1](), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: !hover ? status : button?.[0] ?? "완료" })] }) }));
+            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",
+                    } })] }) }));
 }
 function Item({ titles, data, }) {
     const { item } = data;
     return (_jsx(InfoCardDesign, { titles: titles, options: {
-            titleBorderColor: "blue-navy",
-            rightTextColor: "blue-navy",
+            titleBorder: "border-blue-navy",
             width: "xs",
-            height: "sm",
+            height: "xs",
         }, children: _jsx("div", { children: item }) }));
 }
-function Profile(props) {
-    return (_jsx(InfoCardDesign, { titles: { title: "ㅎㅇ" }, options: {
-            titleBorderColor: "blue-navy",
-            rightTextColor: "blue-navy",
+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: "md",
-        }, ...props, children: _jsx(_Fragment, {}) }));
+            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-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-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 }) }) })] }) }));
 }
 const InfoCard = {
     Exam,
     Product,
     Item,
-    Profile,
+    Grade,
 };
 export default InfoCard;

package/card/template/NavCard.d.ts

@@ -0,0 +1,15 @@
+import { NavCardBannerProps, NavCardButtonProps, NavCardButtonInLayProps } from "../../interface";
+declare function Banner({ titles, options }: NavCardBannerProps): import("react/jsx-runtime").JSX.Element;
+declare function _Button({ titles, onClick, options }: NavCardButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonInLay({ titles, buttonInLay, options, }: NavCardButtonInLayProps): import("react/jsx-runtime").JSX.Element;
+declare function BannerAndButtonInLay({ banner, buttonInLay, }: {
+    banner: NavCardBannerProps;
+    buttonInLay: NavCardButtonInLayProps;
+}): import("react/jsx-runtime").JSX.Element;
+declare const NavCard: {
+    Banner: typeof Banner;
+    Button: typeof _Button;
+    ButtonInLay: typeof ButtonInLay;
+    BannerAndButtonInLay: typeof BannerAndButtonInLay;
+};
+export default NavCard;

package/card/template/NavCard.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import NavCardDesign from "../widget/NavCard.design";
+function Banner({ titles, options }) {
+    return (_jsx(NavCardDesign, { titles: titles, options: { ...options, width: options?.width ?? "xl", height: "sm" } }));
+}
+function _Button({ titles, onClick, options }) {
+    return (_jsx(NavCardDesign, { titles: titles, options: {
+            ...options,
+            onClick,
+            width: options?.width ?? "xs",
+            height: options?.height ?? "sm",
+        } }));
+}
+function ButtonInLay({ titles, buttonInLay, options, }) {
+    return (_jsx(NavCardDesign, { titles: titles, options: {
+            ...options,
+            width: options?.width ?? "2xl",
+            height: options?.height ?? "sm",
+            buttonInLay: {
+                disabled: buttonInLay.disabled,
+                ...buttonInLay,
+                width: buttonInLay.width ?? "lg",
+                height: "sm",
+            },
+        } }));
+}
+function BannerAndButtonInLay({ banner, buttonInLay, }) {
+    const bannerProps = {
+        ...banner,
+        options: { ...banner.options, noShadow: true },
+    };
+    const buttonInLayProps = {
+        ...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 }) })] }));
+}
+const NavCard = {
+    Banner,
+    Button: _Button,
+    ButtonInLay,
+    BannerAndButtonInLay,
+};
+export default NavCard;

package/card/template/TableCard.js

@@ -1,30 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+import { Card } from "../widget/Card.design";
+import { DataField, Row } from "../../layout";
 export default function TableCard({ dataSets, dataField, options }) {
-    const { width, height, background, text } = options ?? {};
-    const { color: bgColor } = background ?? {};
-    const { color: textColor } = text ?? {};
+    const { width, height } = options ?? {};
     const { order, setOrder } = useWidgetStore();
     const id = useId();
     const orders = order[id] ?? [];
     const container = {
-        text: "text-xs xs:text-sm sm:text-base",
+        paddings: "pt-4 pb-14",
     };
-    return (_jsx(Card, { header: Object.entries(dataField)?.map(([key, { title, size }]) => (_jsx("div", { className: `w-${size}/100`, children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center gap-1", children: [_jsx("div", { children: title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
-                            if (orderBy === key) {
-                                if (orderHow === "asc")
-                                    return "▲";
-                                else if (orderHow === "desc")
-                                    return "▼";
-                                else
-                                    return "";
-                            }
-                        }) })] }) }, id + key))), options: {
+    return (_jsx(Card, { header: _jsx(DataField.Card, { id: id, dataField: dataField }), options: {
+            classNames: cn(container),
             width: width ?? "full",
             height: height ?? "lg",
             overflow: "y-scroll",
-        }, children: _jsx("div", { className: cn(container), children: sortByOrder(dataSets, orders).map((data, index) => (_jsx("div", { className: "flex items-center pl-4 h-11 ", children: Object.entries(data).map(([key, value]) => (_jsx("div", { className: `w-${dataField[key].size}/100`, children: String(value) }, id + key))) }, id + index))) }) }));
+            noPadding: true,
+        }, children: sortByOrder(dataSets, orders).map((dataSet, index) => (_jsx(Row.Card, { dataSet: dataSet, dataField: dataField }, id + index))) }));
 }

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, isDebug } from "../../util";
 import { useWidgetStore } from "../../store";
 const widthSize = {
@@ -12,9 +12,9 @@ const widthSize = {
     auto: "w-auto",
 };
 const heightSize = {
-    xs: "h-12",
-    sm: "h-45",
-    md: "h-52.5",
+    xs: "h-45",
+    sm: "h-52.5",
+    md: "h-67.5",
     lg: "h-67.5",
     xl: "h-125",
     "2xl": "",
@@ -23,10 +23,10 @@ const heightSize = {
 };
 export function Card({ header, children, options, debug }) {
     const { setIsOwn } = useWidgetStore();
-    const { classNames, boundary, rounded, height, width, text, background, onClick, overflow, } = options ?? {};
-    const { size: textSize } = text ?? {};
-    const { color: bgColor } = background ?? {};
+    const { classNames, boundary, rounded, height, width, text, background, onClick, overflow, noShadow, } = options ?? {};
     const setBoundary = () => {
+        if (noShadow)
+            return "";
         if (boundary === "shadow")
             return "box-shadow";
         if (boundary === "border")
@@ -37,37 +37,22 @@ export function Card({ header, children, options, debug }) {
     };
     const container = {
         positions: "relative",
-        sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "sm"]}`,
+        sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
         onClick: onClick ? "cursor-pointer" : "",
-        text: `text-${textSize ?? "base"} text-black dark:text-white`,
+        text: `${text ?? "text-base"} text-black dark:text-white`,
         boundary: setBoundary(),
         rounded: `rounded-${rounded ?? "xl"}`,
-        bgColor: `bg-${bgColor ?? "white/80"} dark:bg-black/80`,
+        bgColor: `${background ?? "bg-white/80"} dark:bg-black/80`,
         styles: "duration-500 ",
-        debug: debug && isDebug(`border-2  border-${debug}`),
+        debug: debug && isDebug(`border-2 ${debug}`),
         overflow: "overflow-hidden",
     };
-    const headerStyle = {
-        container: {
-            positions: "relative",
-            sizes: "h-11 ",
-        },
-        body: {
-            positions: "absolute top-0 left-0",
-            displays: "flex items-center pl-4",
-            sizes: "w-full h-full",
-            styles: `bg-${bgColor ?? "gray-300"} text-black font-bold`,
-        },
-        block: {
-            sizes: "w-full h-full",
-        },
-    };
     const body = {
         sizes: "h-full",
         overflow: `overflow-${overflow ?? "hidden"}`,
         classNames,
     };
-    return (_jsxs("div", { className: cn(container), children: [header && (_jsxs("div", { className: cn(headerStyle.container), children: [_jsx("div", { className: cn(headerStyle.body), children: header }), _jsx("div", { className: cn(headerStyle.block) })] })), _jsx("div", { onClick: onClick &&
+    return (_jsxs("div", { className: cn(container), children: [header && _jsx(_Fragment, { children: header }), _jsx("div", { onClick: onClick &&
                     (() => {
                         setIsOwn(true);
                         return onClick();

package/card/{template → widget}/InfoCard.design.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
-import { Card } from "../widget/Card";
+import { Card } from "./Card.design";
 export function InfoCardDesign({ titles: { title, subtitle }, debug, options, children, }) {
-    const { titleBorderColor, rightTextColor } = options ?? {};
+    const { titleBorder, text } = options ?? {};
     const container = {
         paddings: "pt-5 px-5",
     };
@@ -10,14 +10,14 @@ export function InfoCardDesign({ titles: { title, subtitle }, debug, options, ch
         container: {
             displays: "flex justify-between",
             sizes: "w-full h-13.25",
-            styles: `border-${titleBorderColor} border-b-2 pb-2.5`,
+            styles: `${titleBorder} border-b-2 pb-2.5`,
         },
-        titleText: "h-6 font-bold text-lg ",
-        subtitleText: "h-4.75 text-sm font-extralight",
+        titleText: "h-6 font-bold text-xl w-52 truncate",
+        subtitleText: "h-7 text-base font-extralight flex items-center",
         right: {
-            fontColor: `text-${rightTextColor ?? "black"}`,
+            fontColor: `${text ?? "text-black"}`,
             displays: "flex flex-col-reverse",
         },
     };
-    return (_jsxs(Card, { options: { ...options, classNames: cn(container) }, debug: debug, children: [_jsx("div", { className: cn(topBox.container), children: _jsxs("div", { children: [_jsx("div", { className: cn(topBox.titleText), children: title }), _jsx("div", { className: cn(topBox.subtitleText), children: subtitle ?? "No Data" })] }) }), children] }));
+    return (_jsxs(Card, { options: { ...options, classNames: cn(container) }, debug: debug, children: [_jsx("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 ?? "" })] }) }), children] }));
 }

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

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

package/card/widget/NavCard.design.js

@@ -0,0 +1,32 @@
+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;
+    const { width, image, buttonInLay } = options ?? {};
+    const { path, size } = image ?? { size: "sub" };
+    const flag = !buttonInLay && width === "xl";
+    const textBox = {
+        container: {
+            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"}`,
+        },
+        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: {
+                    disabled: buttonInLay.disabled,
+                    className: "absolute bottom-7.5 left-7.5",
+                    background: buttonInLay?.background,
+                    text: buttonInLay?.text,
+                } })), path ? (_jsx("img", { src: path, alt: "trump-image", loading: "lazy", className: imageClassNames() })) : null] }));
+}

package/globals.css

@@ -91,7 +91,24 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   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);
 }
-.asdfasdf:hover {
+.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);
 }
@@ -154,7 +171,6 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 .react-datepicker__children-container {
   width: 16rem !important;
 }
-
 /* toggle button */
 [type="checkbox"]::before {
   content: "";

package/html/index.d.ts

@@ -1,4 +1,5 @@
-export { default as Button } from "./widget/Button";
+export { default as DatePicker } from "./widget/DatePicker";
 export { default as Input } from "./widget/Input";
+export { default as Label } from "./template/Label";
 export { default as Select } from "./widget/Select";
 export { default as Toggle } from "./widget/Toggle";

package/html/index.js

@@ -1,4 +1,5 @@
-export { default as Button } from "./widget/Button";
+export { default as DatePicker } from "./widget/DatePicker";
 export { default as Input } from "./widget/Input";
+export { default as Label } from "./template/Label";
 export { default as Select } from "./widget/Select";
 export { default as Toggle } from "./widget/Toggle";

package/html/template/Label.d.ts

@@ -0,0 +1,8 @@
+import { HTMLLabelElement, OnClick } 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;
+}
+export default Label;

package/html/template/Label.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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, }) {
+    return (_jsx(LabelDesign, { title: title, onClick: onClick, options: {
+            ...options,
+            width: options?.width ?? "md",
+            height: options?.height ?? "sm",
+        } }));
+}
+Label.Button = Button;
+export default Label;

package/html/widget/DatePicker.js

@@ -17,7 +17,7 @@ export default function DatePicker({ options }) {
     const { width } = options ?? {};
     const [selectedDate, setSelectedDate] = useState(new Date());
     const calRef = useRef(null);
-    return (_jsx("div", { children: _jsx(ReactDatePicker, { dateFormat: "yyyy\uB144 MM\uC6D4 dd\uC77C", icon: "fa fa-calendar", minDate: new Date("1900-01-01"), maxDate: new Date("2100-01-01"), selected: selectedDate, shouldCloseOnSelect: false, ref: calRef, onChange: (date) => setSelectedDate(date), locale: ko, className: "bg-slate-200 p-1 pl-4 pr-4 text-left rounded-md hover:bg-white focus:bg-white transition-all asdfasdf focus:outline-none w-68 h-10", children: _jsx("div", { className: "w-full h-auto flex justify-end items-end pr-4 pb-4", children: _jsx("button", { className: "p-2 bg-green-dark text-white rounded-md pr-4 pl-4 hover:opacity-85 hover:shadow-md transition-all", onClick: () => {
+    return (_jsx("div", { children: _jsx(ReactDatePicker, { dateFormat: "yyyy\uB144 MM\uC6D4 dd\uC77C", icon: "fa fa-calendar", minDate: new Date("1900-01-01"), maxDate: new Date("2100-01-01"), selected: selectedDate, shouldCloseOnSelect: false, ref: calRef, onChange: (date) => setSelectedDate(date), locale: ko, className: "bg-slate-200 p-1 pl-2 pr-4 text-sm text-left rounded-md hover:bg-white focus:bg-white transition-all box-inner-shadow focus:outline-none w-68 h-8", children: _jsx("div", { className: "w-full h-auto flex justify-end items-end pr-4 pb-4", children: _jsx("button", { className: "p-2 bg-green-dark text-white rounded-md pr-4 pl-4 hover:opacity-85 hover:shadow-md transition-all", onClick: () => {
                         calRef.current.setOpen(false);
                     }, children: "\uC800\uC7A5\uD558\uAE30" }) }) }) }));
 }

package/html/widget/EmailInput.d.ts

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