@edu-tosel/design 1.0.8 → 1.0.10

package/board/index.d.ts

@@ -1,3 +1,4 @@
 import "../globals.css";
 export { default as CanvasBoard } from "./template/CanvasBoard";
 export { default as ManageBoard } from "./template/ManageBoard";
+export { default as PaperBoard } from "./template/PaperBoard";

package/board/index.js

@@ -1,3 +1,4 @@
 import "../globals.css";
 export { default as CanvasBoard } from "./template/CanvasBoard";
 export { default as ManageBoard } from "./template/ManageBoard";
+export { default as PaperBoard } from "./template/PaperBoard";

package/board/template/PaperBoard.d.ts

@@ -0,0 +1,2 @@
+import { PaperBoardProps } from "../../interface/Board";
+export default function PaperBoard({ children, debug }: PaperBoardProps): import("react/jsx-runtime").JSX.Element;

package/board/template/PaperBoard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { Board } from "../widget/Board";
+export default function PaperBoard({ children, debug }) {
+    const container = {
+        displays: "flex flex-col items-center gap-7.5",
+        paddings: "px-4 pt-3",
+    };
+    return (_jsx(Board, { options: { width: "lg", height: "full" }, debug: debug, children: _jsx("div", { className: cn(container), children: children }) }));
+}

package/board/widget/Board.d.ts

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

package/board/widget/Board.js

@@ -1,14 +1,42 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useWidgetStore } from "../../store";
 import Tab from "./Tab";
-export function Board({ children, widgets }) {
+import { cn } from "../../util";
+const widthSize = {
+    xs: "w-20",
+    sm: "w-24",
+    md: "w-28",
+    lg: "w-full max-w-280",
+    xl: "w-full",
+    "2xl": "w-40",
+    full: "w-full",
+    auto: "w-auto",
+};
+const heightSize = {
+    xs: "h-20",
+    sm: "h-24",
+    md: "h-28",
+    lg: "h-full xl:h-178 xl:min-h-0",
+    xl: "h-36",
+    "2xl": "h-40",
+    full: "min-h-screen h-full",
+    auto: "h-auto",
+};
+export function Board({ children, widgets, options, debug }) {
     const { events } = useWidgetStore();
     const { components, tabs } = widgets ?? {};
-    const classNames = [
-        `h-full xl:min-h-0 `,
-        "xl:rounded-xl bg-white relative w-full z-10 overflow-hidden",
-    ].join(" ");
-    return (_jsxs("div", { className: "h-full xl:min-h-0 xl:h-178 w-full relative ", children: [_jsxs("div", { className: classNames, children: [children, components?.map(([flag, Component]) => {
+    const { width, height } = options ?? {};
+    const container = {
+        positions: "relative",
+        width: widthSize[width ?? "full"],
+        debug: debug && import.meta.env.MODE && `border-2  border-${debug}`,
+    };
+    const body = {
+        positions: "relative z-10 ",
+        sizes: `w-full ${heightSize[height ?? "lg"]} overflow-hidden `,
+        styles: "xl:rounded-xl bg-white",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(body), children: [children, components?.map(([flag, Component]) => {
                         if (typeof flag === "boolean")
                             return flag ? _jsx(_Fragment, { children: Component }) : null;
                         return events?.some(({ event }) => event === flag) ? (_jsx(_Fragment, { children: Component })) : null;

package/board/widget/DataField.js

@@ -20,5 +20,5 @@ export default function BoardDataField({ dataField, }) {
         displays: "xl:hidden block ",
         sizes: container.sizes,
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container.positions, container.displays, container.sizes, container.styles), children: _jsx("div", { className: cn(dataFieldContainer.displays, dataFieldContainer.sizes, dataFieldContainer.paddings, dataFieldContainer.styles), children: Object.entries(fields).map(([key, value]) => (_jsx("div", { className: `w-${`${sizes[key]}/100` ?? "auto"}`, children: _jsxs("button", { onClick: () => setOrder(key), className: "flex items-center gap-1", children: [_jsx("div", { children: value }), _jsx("div", { className: "text-xs", children: orderBy === key ? (orderHow === "asc" ? "▼" : "▲") : "" })] }) }, key))) }) }), _jsx("div", { className: cn(block.sizes, block.displays) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(dataFieldContainer), children: Object.entries(fields).map(([key, value]) => (_jsx("div", { className: `w-${`${sizes[key]}/100` ?? "auto"}`, children: _jsxs("button", { onClick: () => setOrder(key), className: "flex items-center gap-1", children: [_jsx("div", { children: value }), _jsx("div", { className: "text-xs", children: orderBy === key ? (orderHow === "asc" ? "▼" : "▲") : "" })] }) }, key))) }) }), _jsx("div", { className: cn(block) })] }));
 }

package/board/widget/Header.js

@@ -18,5 +18,5 @@ export default function BoardHeader({ title, tags, options, }) {
         displays: "xl:hidden block ",
         sizes: container.sizes,
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container.positions, container.paddings, container.sizes, container.styles), children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ width, title, options, onChange }) => (_jsx(Select, { width: width, title: title, selectOptions: options, onChange: onChange }, title))), inputs?.map(({ width, title, placeholder, onChange }) => (_jsx(Input, { width: width, title: title, placeholder: placeholder, onChange: onChange }, title + placeholder)))] })] }), _jsx("div", { className: cn(block.sizes, block.displays) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ width, title, options, onChange }) => (_jsx(Select, { width: width, title: title, selectOptions: options, onChange: onChange }, title))), inputs?.map(({ width, title, placeholder, onChange }) => (_jsx(Input, { width: width, title: title, placeholder: placeholder, onChange: onChange }, title + placeholder)))] })] }), _jsx("div", { className: cn(block) })] }));
 }

package/board/widget/Tab.js

@@ -3,12 +3,14 @@ import { useState } from "react";
 import { cn } from "../../util";
 export default function Tab({ tabs }) {
     const [tabsSelection, setTabsSelection] = useState(tabs.map((_, i) => i === 0));
-    const positions = "xl:absolute xl:-bottom-14 xl:left-0 z-5";
-    const displays = "hidden xl:flex xl:items-end xl:gap-4";
-    const sizes = "xl:h-16";
-    const paddings = "xl:px-8 xl:pb-2 ";
-    const styles = "bg-white/50 rounded-b-xl ";
-    return (_jsx("div", { className: cn(displays, positions, sizes, paddings, styles), children: tabs.map(([title, onClick], index) => (_jsx("button", { onClick: () => {
+    const container = {
+        positions: "xl:absolute xl:-bottom-14 xl:left-0 z-5",
+        displays: "hidden xl:flex xl:items-end xl:gap-4",
+        sizes: "xl:h-16",
+        paddings: "xl:px-8 xl:pb-2 ",
+        styles: "bg-white/50 rounded-b-xl ",
+    };
+    return (_jsx("div", { className: cn(container), children: tabs.map(([title, onClick], index) => (_jsx("button", { onClick: () => {
                 setTabsSelection(tabsSelection.map((_, i) => i === index));
                 return onClick();
             }, className: `h-9 w-32 rounded-md ${tabsSelection[index]

package/card/index.d.ts

@@ -4,3 +4,4 @@ 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";

package/card/index.js

@@ -4,3 +4,4 @@ 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";

package/card/template/ChartCard.d.ts

@@ -1,2 +1,2 @@
 import { ChartCardProps } from "../../interface/Card";
-export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;
+export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, options, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/ChartCard.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Area, Bar, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
 import { Card } from "../widget/Card";
-export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, }) {
-    return (_jsx(Card, { options: { width: "xl", height: "lg", text: { size: "xs" } }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, children: [_jsx(XAxis, { dataKey: xAxis }), _jsx(YAxis, { dataKey: yAxis }), _jsx(Tooltip, {}), lines?.map((line) => (_jsx(Line, { ...line }, line.dataKey))), bars?.map((bar) => (_jsx(Bar, { ...bar }, bar.dataKey))), areas?.map((area) => (_jsx(Area, { ...area }, area.dataKey)))] }) }) }));
+export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, options, }) {
+    const { width, height } = options ?? {};
+    return (_jsx(Card, { options: {
+            width: width ?? "xl",
+            height: height ?? "lg",
+            text: { size: "xs" },
+        }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, children: [_jsx(XAxis, { dataKey: xAxis }), _jsx(YAxis, { dataKey: yAxis }), _jsx(Tooltip, {}), lines?.map((line) => (_jsx(Line, { ...line }, line.dataKey))), bars?.map((bar) => (_jsx(Bar, { ...bar }, bar.dataKey))), areas?.map((area) => (_jsx(Area, { ...area }, area.dataKey)))] }) }) }));
 }

package/card/template/InfoCard.d.ts

@@ -1,2 +1,2 @@
 import { InfoCardProps } from "../../interface/Card";
-export default function InfoCard({ type }: InfoCardProps): import("react/jsx-runtime").JSX.Element;
+export default function InfoCard({ type, titles, button }: InfoCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/InfoCard.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Deck } from "../..";
 import { Card } from "../widget/Card";
-export default function InfoCard({ type }) {
-    return (_jsxs(Deck, { children: [_jsx(Card, { options: { width: "xs", height: "lg" }, children: _jsxs("div", { className: "p-5", children: [_jsx("div", { children: type }), _jsx("div", {})] }) }), _jsx(Card, { options: { width: "md" }, children: _jsxs("div", { className: "p-5", children: [_jsx("div", { children: type }), _jsx("div", {})] }) })] }));
+import { sizeBySetting, bgColorBySetting, lineColorBySetting, fontColorBySetting, btnSizeBySetting, } from "./InfoCardCssCase";
+export default function InfoCard({ type, titles, button }) {
+    return (_jsx(Card, { options: {
+            width: sizeBySetting.widthSize[type],
+            height: sizeBySetting.heightSize[type],
+        }, children: _jsxs("div", { className: "relative w-full h-full p-5 bg-" + `${bgColorBySetting[type]}`, children: [_jsxs("div", { className: `h-18 w-full border-b-2 border-[${lineColorBySetting[type]}] flex justify-between`, children: [_jsxs("div", { className: "w-auto", children: [_jsx("div", { className: "h-9 font-bold text-xl text-" + `${titles.color}`, children: titles.title }), _jsx("div", { className: "h-8 text-md font-thin ", children: titles.subTitle })] }), _jsx("div", { className: `w-auto flex flex-col-reverse text-${fontColorBySetting} p-2`, children: _jsx("span", { className: `text-xs font-thin font-semibold inline-block align-bottom `, children: "\uC218\uC815\uD558\uAE30" }) })] }), _jsx("div", {}), _jsx("div", { className: `absolute bottom-4 right-4 ${button.display}`, children: _jsx("button", { className: `text-white rounded-md bg-${button.color} ${btnSizeBySetting[type]} flex justify-center items-center`, children: button.title }) })] }) }));
 }

package/card/template/InfoCardCssCase.d.ts

@@ -0,0 +1,25 @@
+import { Size } from "../../interface/Property";
+export declare const sizeBySetting: {
+    widthSize: Record<string, Size>;
+    heightSize: Record<string, Size>;
+};
+export declare const bgColorBySetting: {
+    information: string;
+    profile: string;
+    profileSmall: string;
+};
+export declare const lineColorBySetting: {
+    information: string;
+    profile: string;
+    profileSmall: string;
+};
+export declare const fontColorBySetting: {
+    information: string;
+    profile: string;
+    profileSmall: string;
+};
+export declare const btnSizeBySetting: {
+    information: string;
+    profile: string;
+    profileSmall: string;
+};

package/card/template/InfoCardCssCase.js

@@ -0,0 +1,32 @@
+export const sizeBySetting = {
+    widthSize: {
+        information: "md",
+        profile: "sm",
+        profileSmall: "xs",
+    },
+    heightSize: {
+        information: "lg",
+        profile: "md",
+        profileSmall: "lg",
+    },
+};
+export const bgColorBySetting = {
+    information: "gradient-to-r from-green-dark/20 to-red-crimson/20",
+    profile: "white",
+    profileSmall: "white",
+};
+export const lineColorBySetting = {
+    information: "#760023",
+    profile: "#173A8B",
+    profileSmall: "#173A8B",
+};
+export const fontColorBySetting = {
+    information: "red-crimson",
+    profile: "blue-navy",
+    profileSmall: "blue-navy",
+};
+export const btnSizeBySetting = {
+    information: "w-45 h-11",
+    profile: "w-22 h-7 text-xs",
+    profileSmall: "w-45 h-11",
+};

package/card/template/PropfileCard.d.ts

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

package/card/template/PropfileCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "../widget/Card";
+import { gradient } from "../../util";
+export default function ProfileCard({ titles, button }) {
+    return (_jsx(Card, { options: { width: "lg", height: "lg" }, children: _jsxs("div", { className: "relative w-full h-full p-5 bg-" + `${gradient.green_to_red}`, children: [_jsxs("div", { className: "h-18 w-full border-b-2 border-[#760023] flex justify-between", children: [_jsxs("div", { className: "w-auto", children: [_jsx("div", { className: "h-9 font-bold text-xl text-" + `${titles.color}`, children: titles.title }), _jsx("div", { className: "h-8 text-md font-thin ", children: titles.subTitle })] }), _jsx("div", { className: "w-auto flex flex-col-reverse text-red-crimson p-2", children: _jsx("span", { className: "text-xs font-thin border-b-1 border-[#760023] font-semibold inline-block align-bottom ", children: "\uC218\uC815\uD558\uAE30" }) })] }), _jsx("div", {}), _jsx("div", { className: `absolute bottom-4 right-4 ${button.display}`, children: _jsx("button", { className: `text-white rounded-md bg-${button.color} w-45 h-11 flex justify-center items-center`, children: button.title }) })] }) }));
+}

package/card/template/ReportCard.d.ts

@@ -0,0 +1,20 @@
+import { Titles } from "../../interface";
+export default function ReportCard({ titles, type, dataSets, dataField, }: {
+    titles: Titles;
+    type: "table" | "chart";
+    dataSets: {
+        items: Record<string, string | number>[];
+    };
+    dataField: {
+        fields: Record<string, string>;
+        axis?: {
+            x: string;
+            y: string;
+        };
+        lines?: {
+            dataKey: string;
+            stroke: string;
+        }[];
+        sizes?: Record<string, string>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/card/template/ReportCard.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "../../text";
+import { cn } from "../../util";
+import ChartCard from "./ChartCard";
+import TableCard from "./TableCard";
+export default function ReportCard({ titles, type, dataSets, dataField, }) {
+    const { title, subtitle } = titles;
+    const { axis, fields, lines, sizes } = dataField;
+    const container = {
+        displays: "flex flex-col gap-4",
+    };
+    const titleBox = {
+        container: "flex flex-col gap-1",
+        title: "text-lg font-bold",
+        subtitle: "text-sm",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.title), children: title }), _jsx(LineBreaks, { className: cn(titleBox.subtitle), texts: subtitle })] }), type === "table" && sizes ? (_jsx(TableCard, { sizes: sizes, fields: fields, data: dataSets.items, options: {
+                    width: "full",
+                    height: "auto",
+                } })) : axis && type === "chart" ? (_jsx(ChartCard, { data: dataSets.items, xAxis: axis.x, yAxis: axis.y, lines: lines, options: {
+                    width: "full",
+                } })) : null] }));
+}

package/card/template/RowCard.js

@@ -11,7 +11,7 @@ export default function RowCard({ row, fields, sizes, }) {
             height: "xs",
             boundary: "none",
             rounded: "none",
-        }, children: _jsxs("div", { className: "flex items-center h-full", children: [entries.map(([type, key, value]) => (_jsx("div", { className: `w-${`${sizes[key]}/100` ?? "auto"}`, children: Array.isArray(type) && type[0] === "select" ? (_jsx(Select, { type: type, entry: [key, value], row: rowState, setRow: setRowState }, key + type + value.toString())) : (_jsx("div", { className: "w-full truncate", children: value ?? "No Data" }, key + value.toString())) }, key))), _jsx("button", { onClick: () => {
+        }, children: _jsxs("div", { className: "flex items-center h-full", children: [entries.map(([type, key, value]) => (_jsx("div", { className: `w-${`${sizes[key]}/100` ?? "auto"}`, children: Array.isArray(type) && type[0] === "select" ? (_jsx(Select, { type: type, entry: [key, value], row: rowState, setRow: setRowState }, key + type + value.toString())) : (_jsx("div", { className: "w-full truncate", children: value ?? "No Data" }, key)) }, key))), _jsx("button", { onClick: () => {
                         setTempData(row);
                         setView("sideMenu");
                     }, children: "click" })] }) }));

package/card/template/TableCard.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
 import { Card } from "../widget/Card";
 export default function TableCard({ data, fields, sizes, options, }) {
-    const { color } = options ?? {};
-    const { background: bgColor, text: textColor } = color ?? {};
+    const { width, height, background, text, overflow } = options ?? {};
+    const { color: bgColor } = background ?? {};
+    const { color: textColor } = text ?? {};
     const keys = Object.keys(fields);
+    const container = {
+        text: "text-xs xs:text-sm sm:text-base",
+    };
     const fieldsClassNames = [
         `flex h-11 items-center  font-bold pl-4`,
         `bg-${bgColor ?? "gray-300"} text-${textColor ?? "black"}`,
     ].join(" ");
-    return (_jsx(Card, { options: { width: "lg", height: "lg" }, children: _jsxs("div", { className: "overflow-hidden text-xs xs:text-sm sm:text-base", children: [_jsx("div", { className: fieldsClassNames, children: keys.map((key) => (_jsx("div", { className: `w-${sizes[key]}`, children: fields[key] }, key))) }), data.map((row, index) => (_jsx("div", { className: "flex items-center pl-4 h-11 ", children: keys.map((key) => (_jsx("div", { className: `truncate w-${sizes[key] ?? "auto"}`, children: row[key] }, key))) }, index)))] }) }));
+    return (_jsx(Card, { options: { width: width ?? "lg", height: height ?? "lg", overflow }, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: fieldsClassNames, children: keys.map((key) => (_jsx("div", { className: `w-${sizes[key]}`, children: fields[key] }, key))) }), data.map((row, index) => (_jsx("div", { className: "flex items-center pl-4 h-11 ", children: keys.map((key) => (_jsx("div", { className: `truncate w-${sizes[key] ?? "auto"}`, children: row[key] }, key))) }, index)))] }) }));
 }

package/card/template/TrumpCard.js

@@ -15,5 +15,5 @@ export default function TrumpCard({ titles, options }) {
             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: { width: width ?? "xs", onClick: onClick }, children: [_jsxs("div", { className: `absolute top-8 left-8 w-48 flex flex-col gap-2 z-10 text-${titleColor}`, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx(LineBreaks, { gap: 0, texts: subTitle ?? [""] }), subButton ? (_jsx("button", { className: `text-white rounded-md bg-${buttonBgColor} w-45 h-11 flex justify-center items-center`, onClick: buttonAction, children: buttonText })) : null] }), path ? (_jsx("img", { src: path, alt: "trump-image", loading: "lazy", className: imageClassNames() })) : null] }));
+    return (_jsxs(Card, { options: { width: width ?? "xs", onClick }, children: [_jsxs("div", { className: `absolute top-8 left-8 w-48 flex flex-col gap-2 z-10 text-${titleColor}`, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx(LineBreaks, { texts: subTitle ?? [""] }), subButton ? (_jsx("button", { className: `text-white rounded-md bg-${buttonBgColor} w-45 h-11 flex justify-center items-center`, onClick: buttonAction, children: buttonText })) : null] }), path ? (_jsx("img", { src: path, alt: "trump-image", loading: "lazy", className: imageClassNames() })) : null] }));
 }

package/card/widget/Card.d.ts

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

package/card/widget/Card.js

@@ -4,10 +4,11 @@ const widthSize = {
     xs: "w-full md:w-60",
     sm: "w-full md:w-90",
     md: "w-full md:w-112.5",
-    lg: "w-full md:w-127.5",
+    lg: "w-full lg:w-127.5",
     xl: "w-full lg:w-187.5",
     "2xl": "w-full lg:w-247.5",
     full: "w-full",
+    auto: "w-auto",
 };
 const heightSize = {
     xs: "min-h-16",
@@ -16,10 +17,13 @@ const heightSize = {
     lg: "h-80",
     xl: "h-125",
     "2xl": "",
+    full: "h-full",
+    auto: "h-auto min-h-80",
 };
-export function Card({ children, options }) {
-    const { boundary, rounded, height, width, text, onClick } = options ?? {};
+export function Card({ children, options, debug }) {
+    const { boundary, rounded, height, width, text, background, onClick, overflow, } = options ?? {};
     const { size: textSize, color: textColor } = text ?? {};
+    const { color: bgColor } = background ?? {};
     const setBoundary = () => {
         if (boundary === "shadow")
             return "box-shadow";
@@ -29,17 +33,16 @@ export function Card({ children, options }) {
             return "";
         return "box-shadow";
     };
-    const sizes = [
-        `${heightSize[height ?? "sm"]}`,
-        `${widthSize[width ?? "sm"]}`,
-    ].join(" ");
-    const positions = "relative";
-    const styles = [
-        `${onClick ? "cursor-pointer" : ""}`,
-        `text-${textSize ?? "base"}`,
-        setBoundary(),
-        `rounded-${rounded ?? "xl"}`,
-        `bg-white/80 duration-500  overflow-hidden`,
-    ].join(" ");
-    return (_jsx("div", { onClick: onClick, className: cn(sizes, positions, styles), children: children }));
+    const container = {
+        positions: "relative",
+        sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "sm"]}`,
+        onClick: onClick ? "cursor-pointer" : "",
+        text: `text-${textSize ?? "base"}`,
+        boundary: setBoundary(),
+        rounded: `rounded-${rounded ?? "xl"}`,
+        bgColor: `bg-${bgColor ?? "white/80"}`,
+        styles: "duration-500  overflow-hidden",
+        debug: debug && import.meta.env.MODE && `border-2  border-${debug}`,
+    };
+    return (_jsx("div", { onClick: onClick, className: cn(container), children: children }));
 }

package/deck/Deck.d.ts

@@ -1,16 +1,18 @@
-/// <reference types="react" />
-export declare function Deck<T extends string | number>({ children, titles, options, }: {
+export declare function Deck<T extends string | number>({ children, titles, options, debug, }: {
     children: React.ReactNode;
     titles?: {
         title: string;
-        subTitle?: string;
+        subtitle?: string;
         gapTitle?: number;
     };
     options?: {
+        flex?: "col" | "row";
+        justify?: "between";
         overflowScroll?: boolean;
         width?: T;
         height?: number;
         gapX?: number;
         gapY?: number;
     };
+    debug?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/deck/Deck.js

@@ -1,15 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../util";
-export function Deck({ children, titles, options, }) {
-    const { title, subTitle, gapTitle } = titles ?? {};
-    const { height, gapX, gapY, overflowScroll } = options ?? {};
+export function Deck({ children, titles, options, debug, }) {
+    const { title, subtitle, gapTitle } = titles ?? {};
+    const { flex, height, justify, gapX, gapY, overflowScroll } = options ?? {};
     const container = {
-        positions: `flex flex-col gap-${gapTitle ?? 4}`,
-        sizes: `sm:w-full  h-${height ?? "auto"} `,
+        displays: `flex flex-col gap-${gapTitle ?? 4}`,
+        sizes: `w-full h-${height ?? "auto"} `,
+        debug: debug &&
+            import.meta.env.MODE === "development" &&
+            `border-2 border-${debug}`,
     };
     const body = {
-        positions: `flex flex-col sm:flex-row sm:w-full gap-x-${gapX ?? 7.5} gap-y-${gapY ?? 5}`,
+        displays: `flex flex-col sm:flex-${flex ?? "row"} gap-y-${gapY ?? 5}`,
+        justify: `justify-${justify ?? "start"}`,
+        gapX: `${`gap-x-${gapX ?? 7.5}`}`,
+        sizes: "sm:w-full ",
         styles: `${overflowScroll ? "overflow-x-scroll" : ""} duration-500`,
     };
-    return (_jsxs("div", { className: cn(container.positions, container.sizes), children: [_jsxs("div", { className: "pl-1", children: [_jsx("div", { className: "text-xl xl:text-2xl font-bold", children: title }), _jsx("div", { className: "", children: subTitle })] }), _jsx("div", { className: cn(body.positions, body.styles), children: children })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { children: [_jsx("div", { className: "text-xl xl:text-2xl font-bold", children: title }), _jsx("div", { className: "", children: subtitle })] }), _jsx("div", { className: cn(body), children: children })] }));
 }

package/interaction/template/Exception.js

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
 export default function Exception({ exceptions, children }) {
     if (!exceptions)
         return _jsx(_Fragment, { children: children });
     const trueComponents = exceptions
         .filter(([exception]) => exception)
-        .map(([, component]) => component);
+        .map(([, Component], index) => (_jsx(Fragment, { children: Component }, index)));
     return _jsx(_Fragment, { children: trueComponents.length > 0 ? trueComponents : children });
 }

package/interaction/widget/LoadingSpinner.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // NOTE: This is Prototype code and should be replaced with a proper loading spinner
 export default function LoadingSpinner() {
-    return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: _jsx("div", { className: "h-16 w-16 animate-spin rounded-full border-6 border-black border-r-transparent flex justify-center items-center", children: _jsx("div", { className: "h-12 w-12 animate-spin rounded-full border-6 border-red-500 border-r-transparent " }) }) }));
+    return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: _jsx("div", { className: "w-30 h-30", children: _jsxs("svg", { "aria-hidden": "true", className: "inline w-4 h-4 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), _jsx("path", { d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" })] }) }) }));
 }

package/interaction/widget/LoadingWorm.d.ts

@@ -0,0 +1 @@
+export default function LoadingWorm(): import("react/jsx-runtime").JSX.Element;

package/interaction/widget/LoadingWorm.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, gradient, useEase } from "../../util";
+export default function LoadingWorm() {
+    const numbers = [-2, -1, 0, 1, 2];
+    const ease = useEase(1000, 500);
+    return (_jsx("div", { className: "w-full h-full flex justify-center items-center", children: _jsx("div", { className: "relative  w-25 h-22 ", children: numbers.map((number) => (_jsx(SubComponent, { index: number, ease: ease }, number))) }) }));
+}
+function SubComponent({ index, ease, }) {
+    const [flag, timer] = ease;
+    const positions = [
+        `absolute`,
+        index < 0
+            ? `-left-${flag ? Math.abs(index) * 4 : 0}`
+            : `left-${flag ? Math.abs(index) * 4 : 0}`,
+        index < 0
+            ? `-top-${flag ? Math.abs(index) * 4 : 0}`
+            : `top-${flag ? Math.abs(index) * 4 : 0}`,
+        `z-${50 - index}`,
+    ].join(" ");
+    const sizes = "w-25 h-22";
+    const styles = `duration-${timer} rounded-lg bg-${gradient.lab}`;
+    return (_jsxs("div", { className: cn(positions, sizes, styles), children: [_jsxs("div", { children: ["Index is ", index] }), _jsxs("div", { className: "text-xs", children: [timer, "ms \uB3D9\uC548 ", flag.toString()] })] }));
+}

package/interface/Board.d.ts

@@ -1,6 +1,8 @@
 import { Dispatch } from "react";
 import { Button, Size } from "./Property";
 interface OptionsProps {
+    width?: Size;
+    height?: Size;
     color?: string;
 }
 interface WidgetsProps {
@@ -12,6 +14,7 @@ export interface BoardProps {
     children?: React.ReactNode;
     widgets?: WidgetsProps;
     options?: OptionsProps;
+    debug?: string;
 }
 export interface BoardHeaderProps {
     title?: string;
@@ -41,7 +44,7 @@ export interface ManageBoardProps<T> extends BoardProps {
         dataSets: {
             title?: string;
             items: T[] | undefined;
-            renderItem: (items: T) => React.ReactNode;
+            renderItem: (item: T) => React.ReactNode;
         }[];
         dataField?: {
             fields: Record<string, string>;
@@ -54,4 +57,6 @@ export interface ManageBoardProps<T> extends BoardProps {
         menu?: React.ReactNode;
     } & WidgetsProps;
 }
+export interface PaperBoardProps extends BoardProps {
+}
 export {};

package/interface/Card.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ImageSize, Size } from "./Property";
 /**
  * CardProps is an interface.
@@ -19,6 +18,9 @@ export interface CardProps {
         rounded?: string;
         height?: Size;
         width?: Size;
+        background?: {
+            color?: string;
+        };
         text?: {
             size?: string;
             color?: string;
@@ -26,8 +28,9 @@ export interface CardProps {
         onClick?: () => unknown | (() => Promise<unknown>);
         overflow?: "hiden" | "auto";
     };
+    debug?: string;
 }
-export interface ChartCardProps {
+export interface ChartCardProps extends Omit<CardProps, "children"> {
     data: Record<string, string | number>[];
     xAxis: string;
     yAxis: string;
@@ -44,16 +47,10 @@ export interface ChartCardProps {
         fill: string;
     }[];
 }
-export interface TableCardProps {
+export interface TableCardProps extends Omit<CardProps, "children"> {
     data: Record<string, string | number>[];
     fields: Record<string, string>;
     sizes: Record<string, string>;
-    options?: {
-        color?: {
-            background: string;
-            text: string;
-        };
-    };
 }
 export interface TrumpCardProps {
     titles: {
@@ -72,5 +69,15 @@ export interface TrumpCardProps {
     };
 }
 export interface InfoCardProps {
-    type: "information" | "profile" | "prpfileSmall";
+    type: "information" | "profile" | "profileSmall";
+    titles: {
+        title: string;
+        subTitle?: string[];
+        color?: string;
+    };
+    button: {
+        title: string;
+        display: "inline-block" | "none";
+        color?: string;
+    };
 }

package/interface/Interaction.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ExceptionProps {
     exceptions?: [boolean, React.ReactNode][];
     children: React.ReactNode;

package/interface/Modal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Button, Scripts, Size } from "./Property";
 export interface ModalProps {
     children: React.ReactNode;

package/interface/Property.d.ts

@@ -1,3 +1,15 @@
+import { Dispatch, SetStateAction } from "react";
+/**
+ * State type for the React component
+ * @template T
+ * @description - State type for the component
+ * @property {T} 0 - State value
+ * @property {Dispatch<SetStateAction<T>>} 1 - State setter
+ * @example
+ * const [state, setState] = useState<T>(initialState);
+ * @typedef {Array<T, Dispatch<SetStateAction<T>>>} State
+ */
+export type State<T> = [T, Dispatch<SetStateAction<T>>];
 /**
  * Size type
  * @enum {string}
@@ -11,7 +23,7 @@
  * @property {"2xl"} 2xl - Double extra large size
  * @property {"full"} full - Full size
  */
-export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
 /**
  * Image size type
  * @enum {string}
@@ -29,7 +41,7 @@ export type Scripts = {
 };
 export type Titles = {
     title: string;
-    subTitle?: string[];
+    subtitle?: string | string[];
     color?: string;
 };
 export interface Log<K extends string, T extends string | number> {

package/interface/Property.js

@@ -1,14 +1 @@
-/**
- * Size type
- * @enum {string}
- * @readonly
- * @description - Size type for the component
- * @property {"xs"} xs - Extra small size
- * @property {"sm"} sm - Small size
- * @property {"md"} md - Medium size
- * @property {"lg"} lg - Large size
- * @property {"xl"} xl - Extra large size
- * @property {"2xl"} 2xl - Double extra large size
- * @property {"full"} full - Full size
- */
 export {};

package/layout/dashboard/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function DashboardLayout({ subject, colors, navigations, children, }: {
     subject: [string, string, string];
     colors?: [string, string];

package/modal/TestModal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Button } from "../interface";
 export default function TestModal({ children, options, }: {
     children: React.ReactNode;

package/navigation/Navigation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const buttonClassNames: (href: string, nowPath: string, color?: [string, string]) => string;
 export declare function NavigationContainer({ children, }: {
     children: React.ReactNode;

package/package.json

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

package/shelf/Shelf.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function Shelf({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/tailwind.config.ts

@@ -55,8 +55,8 @@ export default {
         "jr-blue-light": "#D6EEFF",
         "hj-blue": "#385EAB",
         "hj-blue-light": "#A8BFE5",
+        // Gradation Colors
       },
-
       maxHeight: {
         44: "11rem",
         "9/10": "90%",
@@ -85,6 +85,7 @@ export default {
         36: "9rem",
         38: "9.5rem",
         40: "10rem",
+        41: "10.25rem",
         42: "10.5rem",
         44: "11rem",
         45: "11.25rem",
@@ -279,11 +280,13 @@ export default {
         "2/10": "5%",
         "1/5": "20%",
         "2/5": "40%",
+        "4/5": "80%",
         "1/4": "25%",
         "1/3": "33.3333333%",
         "5/100": "5%",
         "10/100": "10%",
         "15/100": "15%",
+        "36/100": "36%",
         "43/100": "43%",
         "46/100": "46%",
       },
@@ -416,6 +419,23 @@ export default {
         "7/10": "70%",
         "9/10": "90%",
       },
+      zIndex: {
+        "50": "50",
+        "49": "49",
+        "48": "48",
+        "47": "47",
+        "46": "46",
+        "45": "45",
+        "44": "44",
+        "43": "43",
+        "42": "42",
+        "41": "41",
+        "40": "40",
+        "30": "30",
+        "20": "20",
+        "10": "10",
+        "0": "0",
+      },
     },
   },
   safelist: [
@@ -476,6 +496,9 @@ export default {
     {
       pattern: /left-.*/,
     },
+    {
+      pattern: /-left-.*/,
+    },
     {
       pattern: /right*.*/,
     },
@@ -520,6 +543,12 @@ export default {
     {
       pattern: /delay-.*/,
     },
+    {
+      pattern: /overflow-.*/,
+    },
+    {
+      pattern: /duration-.*/,
+    },
   ],
   plugins: [tailwindcssAnimate],
 } satisfies Config;

package/text/LineBreaks.d.ts

@@ -1,4 +1,4 @@
-export declare function LineBreaks({ texts, gap }: {
-    texts: string[];
-    gap?: number;
+export declare function LineBreaks({ texts, className, }: {
+    texts?: string[] | string;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/text/LineBreaks.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { col } from "../util";
-export function LineBreaks({ texts, gap }) {
-    return (_jsx("div", { className: col(gap), children: texts.map((text, index) => (_jsx("div", { className: "leading-tight", children: text }, index))) }));
+export function LineBreaks({ texts, className, }) {
+    return (_jsx("div", { className: className, children: typeof texts === "string"
+            ? texts
+            : texts?.map((text, index) => (_jsx("div", { className: "leading-tight", children: text }, index))) }));
 }

package/util/classNames.d.ts

@@ -1 +1,5 @@
-export default function classNames(...props: string[]): string;
+type ClassNames = string | {
+    [key: string]: string | undefined | false;
+};
+export default function classNames(...props: ClassNames[]): string;
+export {};

package/util/classNames.js

@@ -1,4 +1,17 @@
 export default function classNames(...props) {
-    const array = props.map((prop) => prop.split(" "));
-    return array.flat().join(" ");
+    const classNames = props.reduce((acc, cur) => {
+        if (typeof cur === "string") {
+            return [...acc, cur];
+        }
+        if (typeof cur === "object") {
+            const values = Object.values(cur).map((value) => {
+                if (!value)
+                    return "";
+                return value;
+            });
+            return [...acc, ...values];
+        }
+        return acc;
+    }, []);
+    return classNames.join(" ");
 }

package/util/colors.d.ts

@@ -7,4 +7,5 @@ export declare const colorsByLevel: {
 };
 export declare const gradient: {
     lab: string;
+    green_to_red: string;
 };

package/util/colors.js

@@ -7,4 +7,5 @@ export const colorsByLevel = {
 };
 export const gradient = {
     lab: "gradient-to-br from-violet-light/20 to-blue-sky/40 ",
+    green_to_red: "gradient-to-r from-green-dark/20 to-red-crimson/20",
 };

package/util/hooks.d.ts

@@ -0,0 +1,4 @@
+export declare function useEase(inTime: number, outTime: number): readonly [boolean, number];
+type Event = readonly [boolean, string];
+export declare function useEvents(args: Event[]): string[];
+export {};

package/util/hooks.js

@@ -0,0 +1,26 @@
+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) {
+    const [events, setEvents] = useState([]);
+    args.forEach(([flag, event]) => {
+        useEffect(() => {
+            if (flag) {
+                setEvents((prev) => {
+                    if (!prev.includes(event))
+                        return [...prev, event];
+                    return prev;
+                });
+            }
+        }, [flag]);
+    });
+    return events;
+}

package/util/index.d.ts

@@ -2,6 +2,8 @@ export { default as cn } from "./classNames";
 export * from "./colors";
 export * from "./display";
 export * from "./displayResponsive";
+export * from "./hooks";
 export * from "./pattern";
 export * from "./position";
 export * from "./shape";
+export * from "./hooks";

package/util/index.js

@@ -2,6 +2,8 @@ export { default as cn } from "./classNames";
 export * from "./colors";
 export * from "./display";
 export * from "./displayResponsive";
+export * from "./hooks";
 export * from "./pattern";
 export * from "./position";
 export * from "./shape";
+export * from "./hooks";

package/version.txt

@@ -1 +1 @@
-1.0.8
+1.0.10