@edu-tosel/design 1.0.6 → 1.0.7

package/README.md

@@ -2,26 +2,6 @@
 
 TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
 
-## Tech Stack
-
-- tailwindcss 3.4.1
-- React 18
-- Vite 5
-
-## Getting Start
-
-```bash
-# 설치
-npm install @edu-tosel/design@latest
-
-# 개발환경
-npm install # 의존성 설치
-npm run dev # 개발자 환경에서 실행
-npm run test # jest 실행
-npm run build # 빌드
-npm run publish # npm 배포
-```
-
 ## Component
 
 컴포넌트들은 기본적으로 기능 단위로만 구성한다.

package/{src/board/index.tsx → board/index.d.ts}

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

package/board/index.js

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

package/board/template/CanvasBoard.d.ts

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

package/board/template/CanvasBoard.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 CanvasBoard({ children, options }) {
+    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-8 xl:pr-2 pt-2 xs:pt-4 xl:pt-8";
+    const styles = "overflow-y-scroll ";
+    return (_jsx(Board, { options: options, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
+}

package/board/template/ManageBoard.d.ts

@@ -0,0 +1,4 @@
+import { ManageBoardProps } from "../../interface/Board";
+type Item = Record<string, any>;
+export default function ManageBoard<T extends Item>({ header, data, widgets, }: ManageBoardProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/board/template/ManageBoard.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Deck } from "../../deck";
+import { cn } from "../../util";
+import { Board } from "../widget/Board";
+import BoardHeader from "../widget/Header";
+import BoardDataField from "../widget/DataField";
+import { useWidgetStore } from "../../store";
+import { Exception } from "../../interaction";
+export default function ManageBoard({ header, data, widgets, }) {
+    const { order: [orderBy, orderHow], } = useWidgetStore();
+    const { dataSets, dataField, gap } = data;
+    const positions = `flex flex-col gap-${gap ?? 0}`;
+    const sizes = `h-full ${dataField ? "xl:h-135" : "xl:h-158"}`;
+    const paddings = "pb-60 xl:pb-0 px-2 xs:px-4 xl:px-8";
+    const styles = "overflow-y-scroll";
+    return (_jsxs(Board, { widgets: widgets, children: [_jsx(BoardHeader, { ...header }), dataField && _jsx(BoardDataField, { dataField: dataField }), _jsx("div", { className: cn(positions, sizes, paddings, styles), children: _jsx(Exception, { exceptions: widgets?.exceptions, children: dataSets.map(({ title: deckTitle, items, renderItem }) => deckTitle ? (_jsx("div", { className: "pt-4", children: _jsx(Deck, { titles: { title: deckTitle ?? "" }, children: items?.map((item) => renderItem(item)) }) }, deckTitle)) : (items
+                        ?.slice()
+                        .sort((a, b) => {
+                        if (orderBy) {
+                            if (orderHow === "asc")
+                                return a[orderBy] > b[orderBy] ? 1 : -1;
+                            return a[orderBy] < b[orderBy] ? 1 : -1;
+                        }
+                        return 0;
+                    })
+                        .map((item) => renderItem(item)))) }) }), widgets?.menu] }));
+}

package/board/widget/Board.d.ts

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

package/board/widget/Board.js

@@ -0,0 +1,16 @@
+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 }) {
+    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]) => {
+                        if (typeof flag === "boolean")
+                            return flag ? _jsx(_Fragment, { children: Component }) : null;
+                        return events?.some(({ event }) => event === flag) ? (_jsx(_Fragment, { children: Component })) : null;
+                    })] }), tabs && _jsx(Tab, { tabs: tabs })] }));
+}

package/board/widget/DataField.d.ts

@@ -0,0 +1,6 @@
+export default function BoardDataField({ dataField, }: {
+    dataField: {
+        fields: Record<string, string>;
+        sizes: Record<string, string>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/board/widget/DataField.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { useWidgetStore } from "./../../store";
+export default function BoardDataField({ dataField, }) {
+    const { order: [orderBy, orderHow], setOrder, } = useWidgetStore();
+    const { fields, sizes } = dataField;
+    const container = {
+        positions: "fixed top-40 left-0  xl:static",
+        displays: "flex items-center",
+        styles: `bg-gray-200`,
+        sizes: "w-full h-23",
+    };
+    const dataFieldContainer = {
+        displays: "flex items-center",
+        sizes: "w-full h-12",
+        paddings: "px-2 xs:px-4 xl:px-8",
+        styles: "bg-white-off",
+    };
+    const block = {
+        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) })] }));
+}

package/board/widget/Header.d.ts

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

package/board/widget/Header.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { Input, Select } from "./Tags";
+export default function BoardHeader({ title, tags, options, }) {
+    const { selects, inputs } = tags ?? {};
+    const { colors } = options ?? {};
+    const { bgColor, textColor } = colors ?? {
+        bgColor: "gray-200",
+        textColor: "black",
+    };
+    const container = {
+        positions: "fixed top-20 left-0 xl:static flex items-center",
+        paddings: "px-12",
+        styles: `bg-${bgColor} text-${textColor} pl-12 pr-9`,
+        sizes: "w-full h-20",
+    };
+    const block = {
+        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) })] }));
+}

package/board/widget/Tab.d.ts

@@ -0,0 +1,4 @@
+import { Button } from "../../interface";
+export default function Tab({ tabs }: {
+    tabs: Button[];
+}): import("react/jsx-runtime").JSX.Element;

package/board/widget/Tab.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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: () => {
+                setTabsSelection(tabsSelection.map((_, i) => i === index));
+                return onClick();
+            }, className: `h-9 w-32 rounded-md ${tabsSelection[index]
+                ? "border-4 border-blue-500"
+                : "border-4 border-red-500"}`, children: title }, title))) }));
+}

package/board/widget/Tags.d.ts

@@ -0,0 +1,3 @@
+import { HTMLInputElement, HTMLSelectElement } from "../../interface/HTMLElement";
+export declare function Select({ title, width, onChange, selectOptions, }: HTMLSelectElement): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ title, onChange, placeholder, width, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;

package/board/widget/Tags.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+export function Select({ title, width, onChange, selectOptions, }) {
+    const id = useId();
+    const widthSize = {
+        xs: "w-32",
+        sm: "w-48",
+        md: "w-64",
+        lg: "w-96",
+        xl: "w-128",
+        "2xl": "w-144",
+        full: "w-full",
+    };
+    const classNames = `${widthSize[width ?? "md"]} h-10 rounded-full pl-4`;
+    return (_jsxs("div", { className: "flex justify-center items-center gap-4", children: [_jsx("label", { htmlFor: id, className: "font-bold", children: title }), _jsx("select", { id: id, onChange: (e) => onChange(e.target.value), className: classNames, children: selectOptions?.map(([id, title]) => (_jsx("option", { value: id, children: title }, id))) })] }));
+}
+export function Input({ title, onChange, placeholder, width, }) {
+    const id = useId();
+    const widthSize = {
+        xs: "w-28",
+        sm: "w-48",
+        md: "w-64",
+        lg: "w-96",
+        xl: "w-128",
+        "2xl": "w-144",
+        full: "w-full",
+    };
+    const classNames = `${widthSize[width ?? "md"]} h-10 rounded-full pl-4`;
+    return (_jsxs("div", { className: "flex justify-center items-center gap-4", children: [_jsx("label", { htmlFor: id, className: "font-bold", children: title }), _jsx("input", { className: classNames, id: id, type: "text", placeholder: placeholder ?? "", onChange: (e) => onChange(e.target.value) })] }));
+}

package/{src/card/index.tsx → card/index.d.ts}

@@ -1,6 +1,6 @@
-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 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";

package/card/index.js

@@ -0,0 +1,6 @@
+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";

package/card/template/ChartCard.d.ts

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

package/card/template/ChartCard.js

@@ -0,0 +1,6 @@
+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)))] }) }) }));
+}

package/card/template/InfoCard.d.ts

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

package/card/template/InfoCard.js

@@ -0,0 +1,6 @@
+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", {})] }) })] }));
+}

package/card/template/ProfileCard.d.ts

@@ -0,0 +1,14 @@
+type Level = "PS" | "ST" | "BA" | "JR" | "HJ";
+export default function ProfileCard({ info, gradeData, }: {
+    info: {
+        name: string;
+        birthday: string;
+        image?: string;
+    };
+    gradeData?: {
+        level?: Level;
+        score?: number;
+        grade?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/template/ProfileCard.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "../widget/Card";
+import { colorsByLevel } from "../../util";
+export default function ProfileCard({ info, gradeData, }) {
+    const { name, birthday, image } = info;
+    const { level, score, grade } = gradeData ?? {};
+    return (_jsx(Card, { options: { width: "sm" }, children: _jsxs("div", { className: "flex", children: [_jsx("img", { src: image, alt: "profile", className: "h-20 w-20 overflow-hidden rounded-full object-cover " }), _jsxs("div", { className: "ml-auto flex flex-col gap-4", children: [_jsxs("div", { className: "flex w-52 items-end gap-2 border-b-2 border-blue-navy pb-2", children: [_jsx("div", { className: "text-xl font-bold", children: name }), _jsx("div", { children: birthday })] }), _jsxs("div", { children: [_jsx("div", { children: "\uD559\uC6D0\uC0DD" }), _jsx("div", { children: level ? colorsByLevel[level] : "" })] })] })] }) }));
+}

package/card/template/RowCard.d.ts

@@ -0,0 +1,5 @@
+export default function RowCard<T extends Record<string, any>>({ row, fields, sizes, }: {
+    row: T;
+    fields: Partial<Record<keyof T, "text" | ["select", [string, string][]]>>;
+    sizes: Partial<Record<keyof T, string>>;
+}): import("react/jsx-runtime").JSX.Element;

package/card/template/RowCard.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "../widget/Card";
+import { useWidgetStore } from "../../store";
+import { useId, useState } from "react";
+export default function RowCard({ row, fields, sizes, }) {
+    const [rowState, setRowState] = useState(row);
+    const { setView, setTempData } = useWidgetStore();
+    const entries = Object.entries(fields).map(([key, type]) => [type, key, rowState[key]]);
+    return (_jsx(Card, { options: {
+            width: "full",
+            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: () => {
+                        setTempData(row);
+                        setView("sideMenu");
+                    }, children: "click" })] }) }));
+}
+function Select({ type, entry, row, setRow, }) {
+    const id = useId();
+    const [key, value] = entry;
+    return (_jsx("select", { value: value, onChange: (e) => setRow({
+            ...row,
+            [key]: e.target.value,
+        }), children: type[1].map(([value, title]) => (_jsx("option", { value: value, children: title }, id + value))) }, id));
+}

package/card/template/TableCard.d.ts

@@ -0,0 +1,2 @@
+import { TableCardProps } from "../../interface/Card";
+export default function TableCard({ data, fields, sizes, options, }: TableCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/TableCard.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "../widget/Card";
+export default function TableCard({ data, fields, sizes, options, }) {
+    const { color } = options ?? {};
+    const { background: bgColor, text: textColor } = color ?? {};
+    const keys = Object.keys(fields);
+    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)))] }) }));
+}

package/card/template/TrumpCard.d.ts

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

package/card/template/TrumpCard.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "../../text";
+import { Card } from "../widget/Card";
+export default function TrumpCard({ titles, options }) {
+    const { title, subTitle, color: titleColor } = titles;
+    const { onClick, width, image, subButton } = options ?? {};
+    const [buttonText, buttonBgColor, buttonAction] = subButton ?? [
+        null,
+        "red-crimson",
+        () => { },
+    ];
+    const { path, size } = image ?? { size: "sub" };
+    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: { 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] }));
+}

package/card/widget/Card.d.ts

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

package/card/widget/Card.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+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",
+    xl: "w-full lg:w-187.5",
+    "2xl": "w-full lg:w-247.5",
+    full: "w-full",
+};
+const heightSize = {
+    xs: "min-h-16",
+    sm: "h-72 sm:h-48",
+    md: "h-72 sm:h-48",
+    lg: "h-80",
+    xl: "h-125",
+    "2xl": "",
+};
+export function Card({ children, options }) {
+    const { boundary, rounded, height, width, text, onClick } = options ?? {};
+    const { size: textSize, color: textColor } = text ?? {};
+    const setBoundary = () => {
+        if (boundary === "shadow")
+            return "box-shadow";
+        if (boundary === "border")
+            return "border-2";
+        if (boundary === "none")
+            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 }));
+}

package/deck/Deck.d.ts

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

package/deck/Deck.js

@@ -0,0 +1,15 @@
+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 ?? {};
+    const container = {
+        positions: `flex flex-col gap-${gapTitle ?? 4}`,
+        sizes: `sm:w-full  h-${height ?? "auto"} `,
+    };
+    const body = {
+        positions: `flex flex-col sm:flex-row sm:w-full gap-x-${gapX ?? 7.5} gap-y-${gapY ?? 5}`,
+        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 })] }));
+}

package/{src/deck/index.tsx → deck/index.d.ts}

@@ -1 +1 @@
-export * from "./Deck";
+export * from "./Deck";

package/deck/index.js

@@ -0,0 +1 @@
+export * from "./Deck";

package/{src/index.tsx → index.d.ts}

@@ -1,11 +1,11 @@
-import "./globals.css";
-export * from "./board";
-export * from "./card";
-export * from "./deck";
-export * from "./layout";
-export * from "./interaction";
-export * from "./menu";
-export * from "./modal";
-export * from "./navigation";
-export * from "./shelf";
-export * from "./text";
+import "./globals.css";
+export * from "./board";
+export * from "./card";
+export * from "./deck";
+export * from "./layout";
+export * from "./interaction";
+export * from "./menu";
+export * from "./modal";
+export * from "./navigation";
+export * from "./shelf";
+export * from "./text";

package/index.js

@@ -0,0 +1,11 @@
+import "./globals.css";
+export * from "./board";
+export * from "./card";
+export * from "./deck";
+export * from "./layout";
+export * from "./interaction";
+export * from "./menu";
+export * from "./modal";
+export * from "./navigation";
+export * from "./shelf";
+export * from "./text";

package/interaction/Exception.d.ts

@@ -0,0 +1,2 @@
+import { ExceptionProps } from "../interface/Interaction";
+export default function Exception({ exceptions, children }: ExceptionProps): import("react/jsx-runtime").JSX.Element;

package/interaction/Exception.js

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

package/interaction/LoadingSpinner.d.ts

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

package/interaction/LoadingSpinner.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } 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 " }) }) }));
+}

package/interaction/NoData.d.ts

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

package/interaction/NoData.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function NoData() {
+    return (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: "NoData" }));
+}

package/{src/interaction/index.tsx → interaction/index.d.ts}

@@ -1,2 +1,2 @@
-export { default as Exception } from "./Exception";
-export { default as LoadingSpinner } from "./LoadingSpinner";
+export { default as Exception } from "./Exception";
+export { default as LoadingSpinner } from "./LoadingSpinner";

package/interaction/index.js

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

package/interface/Board.d.ts

@@ -0,0 +1,57 @@
+import { Dispatch } from "react";
+import { Button, Size } from "./Property";
+interface OptionsProps {
+    color?: string;
+}
+interface WidgetsProps {
+    exceptions?: [boolean, React.ReactNode][];
+    components?: [boolean | string, React.ReactNode][];
+    tabs?: Button[];
+}
+export interface BoardProps {
+    children?: React.ReactNode;
+    widgets?: WidgetsProps;
+    options?: OptionsProps;
+}
+export interface BoardHeaderProps {
+    title?: string;
+    tags?: {
+        selects?: {
+            title: string;
+            onChange: Dispatch<string>;
+            options: [string | number, string][];
+            width?: Size;
+        }[];
+        inputs?: {
+            title: string;
+            onChange: Dispatch<string>;
+            placeholder: string;
+            width?: Size;
+        }[];
+    };
+    options?: {
+        colors?: {
+            bgColor?: string;
+            textColor?: string;
+        };
+    };
+}
+export interface ManageBoardProps<T> extends BoardProps {
+    data: {
+        dataSets: {
+            title?: string;
+            items: T[] | undefined;
+            renderItem: (items: T) => React.ReactNode;
+        }[];
+        dataField?: {
+            fields: Record<string, string>;
+            sizes: Record<string, string>;
+        };
+        gap?: number;
+    };
+    header?: BoardHeaderProps;
+    widgets?: {
+        menu?: React.ReactNode;
+    } & WidgetsProps;
+}
+export {};

package/interface/Board.js

@@ -0,0 +1 @@
+export {};