@edu-tosel/design 1.0.34 → 1.0.35

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 &&
+    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

@@ -16,14 +16,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 +50,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.js

@@ -19,5 +19,5 @@ export function InfoCardDesign({ titles: { title, subtitle }, debug, options, ch
             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", { className: "text-gray-dim ", children: [_jsx("div", { className: cn(topBox.titleText), children: title }), _jsx("div", { className: cn(topBox.subtitleText), children: subtitle ?? "" })] }) }), children] }));
+    return (_jsxs(Card, { options: { ...options, className: 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 → design}/TableCard.design.js

@@ -2,7 +2,7 @@ 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 }) {
     const { width, height } = options ?? {};
@@ -14,7 +14,7 @@ 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",

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 @@
+export default function Finance(): import("react/jsx-runtime").JSX.Element;

package/card/template/InfoCard/Finance.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InfoCardDesign } from "../../design/InfoCard.design";
+export default function Finance() {
+    return (_jsx(InfoCardDesign, { titles: {
+            title: "수수료 정산",
+        }, options: {
+            width: "2xl",
+            height: "xl",
+        }, children: _jsx("div", { children: "\u314B\u314B" }) }));
+}

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.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/html/{widget → design}/Label.design.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../util";
-import Obstacle from "./Obstacle";
+import Obstacle from "../widget/Obstacle";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",

package/html/template/Label.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import LabelDesign from "./../widget/Label.design";
+import LabelDesign from "../design/Label.design";
 function Label({ title, options }) {
     return (_jsx(LabelDesign, { title: title, options: { ...options, width: "sm", height: "xs" } }));
 }

package/html/template/Select.js

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

package/interface/Board.d.ts

@@ -2,7 +2,7 @@ import { DataField, Size, Titles } from "./Property";
 import { EventsProps } from "./Widget";
 import { HTMLInputElement, HTMLLabelElement, HTMLSelectElement } from "./HTMLElement";
 interface OptionsProps {
-    classNames?: string;
+    className?: string;
     width?: Size;
     height?: Size;
     color?: string;

package/interface/Card.d.ts

@@ -1,7 +1,7 @@
 import { Button, DataField, Disabled, ImageSize, OnClick, Size, Titles } from "./Property";
 import { Replace } from "./Widget";
 interface CardOptions {
-    classNames?: string;
+    className?: string;
     boundary?: string;
     rounded?: string;
     height?: Size;

package/interface/Modal.d.ts

@@ -3,7 +3,7 @@ export interface ModalProps {
     isVisible?: boolean;
     event?: string;
     children: React.ReactNode;
-    classNames?: string;
+    className?: string;
     options?: {
         width?: Size;
         height?: Size;

package/interface/Shelf.d.ts

@@ -6,8 +6,7 @@ interface Options<T> {
     overflowScroll?: boolean;
     width?: T;
     height?: number;
-    gapX?: number;
-    gapY?: number;
+    gap?: "xy" | "x" | "y" | "none";
 }
 export interface ShelfProps<T> {
     children: React.ReactNode;
@@ -16,7 +15,7 @@ export interface ShelfProps<T> {
     };
     titles?: Titles;
     debug?: string;
-    classNames?: string;
+    className?: string;
     options?: Options<T>;
 }
 export {};

package/layout/{widget → design}/Shelf.design.d.ts

@@ -1,2 +1,2 @@
 import { ShelfProps } from "../../interface";
-export default function Shelf<T extends string | number>({ children, classNames, options, titles, debug, }: ShelfProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function Shelf<T extends string | number>({ children, className, options, titles, debug, }: ShelfProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/{widget → design}/Shelf.design.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LineBreaks } from "../../text";
 import { cn, isDebug } from "../../util";
-export default function Shelf({ children, classNames, options, titles, debug, }) {
+export default function Shelf({ children, className, options, titles, debug, }) {
     const { titleSize, subtitleSize } = options ?? {};
     const container = {
-        displays: "flex flex-col gap-4",
+        displays: "flex flex-col gap-6",
         debug: debug && isDebug(`border-2  border-${debug}`),
     };
     const titleBox = {
-        container: "flex flex-col text-gray-dim",
+        container: "flex flex-col text-gray-dim h-6 leading-none",
         title: {
-            text: titleSize ?? "text-xl xl:text-3xl",
+            text: titleSize ?? "text-xl xl:text-xl",
             font: "font-pretendard-bold",
         },
         subtitle: {
@@ -19,7 +19,7 @@ export default function Shelf({ children, classNames, options, titles, debug, })
     };
     const childrenBox = {
         sizes: "w-full",
-        classNames,
+        className,
     };
     return (_jsxs("div", { className: cn(container), children: [titles && (_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.title), children: titles?.title }), _jsx(LineBreaks, { className: cn(titleBox.subtitle), texts: titles?.subtitle })] })), _jsx("div", { className: cn(childrenBox), children: children })] }));
 }

package/layout/template/DataField.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import DataFieldDesign from "../widget/DataField.design";
+import DataFieldDesign from "../design/DataField.design";
 function Board({ id, dataField }) {
     return (_jsx(DataFieldDesign, { id: id, dataField: dataField, options: {
             position: "fixed top-34 xl:top-0 left-0 xl:relative z-20",

package/layout/template/Gallery.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Events from "./Events";
-import Tab from "../widget/Tab.design";
+import Tab from "../design/Tab.design";
 export default function Gallery({ widgets, children, }) {
     return (_jsxs("div", { className: "relative w-full flex", children: [_jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx(Events.Show, { widgets: widgets?.shows, children: children }) }), widgets?.tabs && _jsx(Tab, { tabs: widgets?.tabs })] }));
 }

package/layout/template/Row.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import RowDesign from "../widget/Row.design";
+import RowDesign from "../design/Row.design";
 function Board({ item, dataField, onClick, buttons, }) {
     const id = useId();
     return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, options: {

package/layout/template/Shelf.d.ts

@@ -1,7 +1,7 @@
 import { ShelfProps } from "../../interface/Shelf";
 declare function Shelf({ titles, debug, children }: ShelfProps<string | number>): import("react/jsx-runtime").JSX.Element;
 declare namespace Shelf {
-    var Wrap: ({ classNames, titles, children, debug, }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
+    var Wrap: ({ className, titles, children, debug, options, }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
     var Row: ({ titles, children, debug }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
     var Col: ({ titles, children, debug }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
 }