@edu-tosel/design 1.0.35 → 1.0.37

package/board/template/ManageBoard.js

@@ -17,5 +17,5 @@ export default function ManageBoard({ header, dataSets, dataField, widgets, opti
         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, options: { gap: "x" }, className: className, children: [items &&
-                                sortByOrder(items, orders)?.map((item) => renderItem(item)), interaction] }, id + index))) }) })] }));
+                                sortByOrder({ items, orders })?.map((item) => renderItem(item)), interaction] }, id + index))) }) })] }));
 }

package/card/design/Card.design.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { cn, isDebug } from "../../util";
 import { useWidgetStore } from "../../store";
 const widthSize = {
+    "2xs": "w-20",
     xs: "w-full md:w-60",
     sm: "w-full md:w-90",
     md: "w-full md:w-112.5",

package/card/design/InfoCard.design.d.ts

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

package/card/design/InfoCard.design.js

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

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

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

package/card/design/TableCard.design.js

@@ -4,7 +4,7 @@ import { useWidgetStore } from "../../store";
 import { cn, sortByOrder } from "../../util";
 import Card from "./Card.design";
 import { DataField, Events, Row } from "../..";
-export default function TableCardDesign({ dataSet, dataField, options }) {
+export default function TableCardDesign({ dataSet, dataField, options, }) {
     const { width, height } = options ?? {};
     const { order } = useWidgetStore();
     const id = useId();
@@ -19,5 +19,5 @@ export default function TableCardDesign({ dataSet, dataField, options }) {
             height: height ?? "lg",
             overflow: "y-scroll",
             noPadding: true,
-        }, children: _jsx(Events.Replace, { widgets: dataSet?.replaces, children: sortByOrder(dataSet.items, orders).map((item, index) => (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: options?.rowHeight, noHover: options?.noHover, noPadding: options?.noRowPadding }, id + index))) }) }));
+        }, children: _jsx(Events.Replace, { widgets: dataSet?.replaces, children: sortByOrder({ items: dataSet?.items, orders }).map((item, index) => (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: options?.rowHeight, noHover: options?.noHover, noPadding: options?.noRowPadding }, id + index))) }) }));
 }

package/card/template/InfoCard/Finance.d.ts

@@ -1 +1,24 @@
-export default function Finance(): import("react/jsx-runtime").JSX.Element;
+import { DataPackage, InfoCardProps, State } from "../../../interface";
+export interface InfoCardFinanceProps<N, C> extends Omit<InfoCardProps, "children"> {
+    data: {
+        taxRate: number;
+        taxState: State<boolean>;
+        dataSets?: {
+            title: string;
+            sum: number | string;
+            tax: number | string;
+            total: number | string;
+            rate: number | string;
+            result: number | string;
+            number?: DataPackage<N> & {
+                title: string;
+            };
+            amount?: DataPackage<C> & {
+                title: string;
+            };
+        }[];
+    };
+}
+export default function Finance<N, C extends {
+    sum: number;
+}>({ titles, data, }: InfoCardFinanceProps<N, C>): import("react/jsx-runtime").JSX.Element;

package/card/template/InfoCard/Finance.js

@@ -1,10 +1,53 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
 import { InfoCardDesign } from "../../design/InfoCard.design";
-export default function Finance() {
+import { useId } from "react";
+export default function Finance({ titles, data, }) {
+    const { taxRate, taxState, dataSets } = data;
+    const [taxOn, setTaxOn] = taxState;
+    const id = useId();
     return (_jsx(InfoCardDesign, { titles: {
-            title: "수수료 정산",
+            title: titles.title,
+            subtitle: titles.subtitle,
         }, options: {
+            titleBorder: "border-green-dark",
             width: "2xl",
             height: "xl",
-        }, children: _jsx("div", { children: "\u314B\u314B" }) }));
+        }, topRight: _jsxs("div", { className: "flex items-center gap-2.5 text-xs ", children: [_jsx("button", { onClick: () => setTaxOn(!taxOn), className: cn("w-4 h-4 rounded-md", taxOn ? "bg-green-dark" : "border-1") }), _jsxs("div", { children: ["\uC0AC\uC5C5\uC18C\uB4DD\uC138 ", taxRate, "%"] })] }), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "flex gap-7.5 mt-4.25 border-b-1 border-green-dark pb-2.5 ", children: dataSets?.map(({ title, sum, tax, total, rate, amount, number, result }, index) => (_jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx("div", { className: "font-pretendard-bold text-green-dark", children: title }), _jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: "flex flex-col justify-between w-20", children: [number && (_jsx(Numbers, { title: number.title, dataSet: number.dataSet, dataField: number.dataField })), _jsx(Result, { title: "\uBE44\uC728", amount: `${rate}%` })] }), amount && (_jsxs("div", { className: "flex flex-col", children: [_jsx(Amount, { title: amount.title, dataSet: amount.dataSet, dataField: amount.dataField }), _jsxs("div", { className: "flex flex-col gap-1.5 mt-2.5", children: [_jsx(Result, { title: "\uD569\uACC4", amount: sum, cnTitle: "text-gray-dim" }), _jsx(Result, { title: "\uC0AC\uC5C5\uC18C\uB4DD\uC138", amount: `${typeof tax === "number" && tax ? "-" : ""}${tax.toLocaleString()}`, cnTitle: "text-gray-dim", cnAmount: "text-crimson-burgundy" }), _jsx(Result, { title: "\uCD1D\uACC4", amount: total, background: "bg-green-dark/10", cnTitle: "font-pretendard-bold" })] }), _jsx(Result, { title: "\uC9C0\uAE09\uBD84", amount: result, background: "bg-green-dark", cnTitle: "font-pretendard-bold text-white", className: "text-white mt-5" })] }))] })] }, id + index))) }), _jsx("div", { className: "flex items-center h-15.5", children: _jsx("div", { className: "w-45 h-10 bg-gray-light rounded-md" }) })] }) }));
+}
+function Numbers({ title, dataSet, dataField, }) {
+    const id = useId();
+    const itemBox = {
+        displays: "flex items-center justify-center ",
+        sizes: "w-1/2 h-5",
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-xs", children: title }), _jsxs("div", { className: "flex flex-col w-full h-36 pt-2.5 rounded-md bg-gray-light text-sm", children: [_jsx("div", { className: "flex items-center font-pretendard-bold", children: Object.keys(dataField).map((key) => (_jsx("div", { className: "flex items-center justify-center w-1/2 h-5", children: dataField[key]?.title }, key))) }), dataSet.items?.map((item, index) => (_jsx("div", { className: "flex items-center", children: dataField &&
+                            Object.keys(dataField).map((key, index) => (_jsx("div", { className: cn(itemBox, index % 2 === 0 ? "text-gray-dim" : "text-green-dark"), children: String(item[key]) }, key))) }, id + index)))] })] }));
+}
+function Amount({ title, dataSet, dataField, }) {
+    const id = useId();
+    const amountBox = {
+        displays: "flex items-center justify-end ",
+        sizes: "w-1/2 h-5 pr-2.5",
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-xs", children: title }), _jsxs("div", { className: "relative flex flex-col w-full h-36 pt-2.5 rounded-md bg-gray-light text-sm", children: [_jsx("div", { className: "absolute top-0 right-0 bg-green-light w-1/2 h-full rounded-md z-0" }), _jsx("div", { className: "flex items-center z-10", children: Object.keys(dataField).map((key) => (_jsx("div", { className: "flex items-center pl-2.5 text-start w-1/2 h-5 font-pretendard-bold", children: dataField[key]?.title }, key))) }), dataSet.items?.map((item, index) => (_jsx("div", { className: "flex items-center z-10", children: dataField &&
+                            Object.keys(dataField).map((key, index) => (_jsx("div", { className: cn(amountBox, index % 2 === 0 ? "text-gray-dim" : "text-green-dark"), children: Number(item[key]).toLocaleString() }, key))) }, id + index)))] })] }));
+}
+function Result({ title, amount, background, cnTitle, cnAmount, className, }) {
+    const container = {
+        displays: "flex items-center justify-between",
+        paddings: "px-2.5",
+        styles: "rounded-md w-full h-6 text-xs text-green-dark",
+        backgrounds: background ?? "bg-gray-light",
+        className,
+    };
+    const titleBox = {
+        styles: "w-20 text-center",
+        cnTitle,
+    };
+    const amountBox = {
+        styles: "w-20 text-end",
+        cnAmount,
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(titleBox), children: title }), _jsx("div", { className: cn(amountBox), children: amount?.toLocaleString() })] }));
 }

package/card/template/TableCard.d.ts

@@ -1,8 +1,6 @@
 import { TableCardProps } from "../../interface";
-declare function TableCard<K extends string, T extends {
-    [p in K]: any;
-}>(props: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function TableCard<T>(props: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace TableCard {
-    var Log: <K extends string, T extends { [p in K]: any; }>(props: TableCardProps<T>) => import("react/jsx-runtime").JSX.Element;
+    var Log: <T>(props: TableCardProps<T>) => import("react/jsx-runtime").JSX.Element;
 }
 export default TableCard;

package/globals.css

@@ -185,7 +185,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   width: 16rem !important;
 }
 /* toggle button */
-[type="checkbox"]::before {
+.toggle[type="checkbox"]::before {
   content: "";
   position: absolute;
   left: 1px;
@@ -197,18 +197,30 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   background-color: white;
   transition: left 100ms linear;
 }
-[type="checkbox"]:checked::before {
+.toggle[type="checkbox"]:checked::before {
   background-color: white;
   left: 1.32rem;
 }
-[type="checkbox"]:checked {
+.toggle[type="checkbox"]:checked {
   background-color: #105652;
 }
-[type="checkbox"]:disabled {
+.toggle[type="checkbox"]:disabled {
   opacity: 0.3;
   cursor: not-allowed;
 }
-[type="checkbox"]:disabled + span {
+.toggle[type="checkbox"]:disabled + span {
   opacity: 0.3;
   cursor: not-allowed;
 }
+
+/* checkbox */
+.check-box[type="checkbox"]:checked {
+  border-color: transparent;
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+  background-size: 150%;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+.check-box[type="checkbox"]:disabled {
+  background-color: #7f7f7f;
+}

package/hook/useFlag.d.ts

@@ -1,2 +1,5 @@
 import { State } from "../interface";
-export default function useFlag<T>(state: State<T>): void;
+export default function useFlag<T>({ safe, state, }: {
+    safe?: string;
+    state: State<T>;
+}): void;

package/hook/useFlag.js

@@ -1,12 +1,15 @@
 import { useEffect } from "react";
 import { useWidgetStore } from "../store";
-export default function useFlag(state) {
+export default function useFlag({ safe, state, }) {
     const [value, action] = state;
     const { flag, isOwn, setIsOwn } = useWidgetStore();
+    safe;
     useEffect(() => {
         if (isOwn) {
             return setIsOwn(false);
         }
-        return action(value);
+        else {
+            return action(value);
+        }
     }, [flag]);
 }

package/html/design/Select.design.js

@@ -14,14 +14,15 @@ const heightSize = {
 };
 export default function SelectDesign({ state, selectOptions, placeholder, options, }) {
     const id = useId();
-    const { setIsOwn } = useWidgetStore();
+    const { setIsOwn, setIsOwnId } = useWidgetStore();
     const [value, setValue] = state;
     const [text, setText] = useState("");
     const [search, setSearch] = useState("");
     const [isOpen, setIsOpen] = useState(false);
+    const [isHover, setIsHover] = useState(false);
     const [filteredOptions, setFilterdOptions] = useState([]);
     const [index, setIndex] = useState();
-    useFlag([false, setIsOpen]);
+    useFlag({ state: [false, setIsOpen], safe: "overlay" });
     const onKeyDown = (e) => {
         if (!filteredOptions)
             return;
@@ -41,21 +42,22 @@ export default function SelectDesign({ state, selectOptions, placeholder, option
     }, [search, selectOptions]);
     const isLong = selectOptions && selectOptions.length >= 4;
     const container = {
-        positions: "relative",
+        positions: "relative ",
         displays: "flex flex-col",
     };
     const button = {
         displays: "flex items-center",
         sizes: `${widthSize[options?.width ?? "md"]} ${heightSize[options?.height ?? "xs"]}`,
-        styles: "pl-1 rounded-md box-shadow focus:outline-none",
+        styles: "pl-1 rounded-md focus:outline-none duration-100 text-gray-400",
+        shadow: isOpen || isHover ? "box-shadow" : "shadow-none",
     };
     const input = {
-        positions: "absolute",
+        positions: "absolute z-30",
         layouts: cn(button),
         styles: "focus:outline-none text-xs pl-1.5",
     };
     const body = {
-        positions: "absolute",
+        positions: "absolute z-30",
         displays: "flex flex-col gap-1",
         sizes: `${widthSize[options?.width ?? "md"]} min-h-6.5 max-h-23.75`,
         paddings: "pl-1 py-1",
@@ -70,37 +72,33 @@ export default function SelectDesign({ state, selectOptions, placeholder, option
     };
     const inputTransition = useTransition(isOpen, {
         from: {
-            opacity: 0,
-            top: 0,
+            top: 32,
         },
         enter: {
-            opacity: 1,
             top: 32,
-            config: { duration: 150 },
         },
         leave: {
-            opacity: 0,
-            top: 0,
-            config: { duration: 0 },
+            top: 32,
+        },
+        config: {
+            duration: 0,
         },
     });
     const bodyTransitions = useTransition(isOpen, {
         from: {
-            opacity: 0,
-            top: 0,
+            top: isLong ? 64 : 32,
         },
         enter: {
-            opacity: 1,
             top: isLong ? 64 : 32,
-            config: { duration: 150 },
         },
         leave: {
-            opacity: 0,
-            top: 0,
-            config: { duration: 0 },
+            top: isLong ? 64 : 32,
+        },
+        config: {
+            duration: 0,
         },
     });
-    return (_jsxs("div", { className: cn(container), onKeyDown: onKeyDown, onClick: () => setIsOwn(true), children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), children: value ? (_jsx("div", { className: cn(label), children: selectOptions?.find((option) => value === option[0])?.[1] })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
+    return (_jsxs("div", { className: cn(container), onKeyDown: onKeyDown, onClick: () => setIsOwn(true), children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label), children: selectOptions?.find((option) => value === option[0])?.[1] })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
                 item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
                 return (item && (_jsx(animated.div, { style: styles, className: cn(body), children: filteredOptions?.map(([value, text], order) => (_jsx("section", { children: _jsx("button", { onClick: () => {
                                 setValue(value);

package/html/widget/CheckBox.d.ts

@@ -0,0 +1,2 @@
+import { HTMLCheckBoxElement } from "../../interface";
+export default function Checkbox({ state: [checked, setChecked], labels, options, color, }: HTMLCheckBoxElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/CheckBox.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const widthSize = {
+    xs: "w-32",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+export default function Checkbox({ state: [checked, setChecked], labels, options, color, }) {
+    const checkBoxColor = {
+        red: "checked:bg-[#910023]",
+        blue: "checked:bg-[#173A8B]",
+        green: "checked:bg-[#DFE6E5]",
+    };
+    const { disabled } = options ?? {};
+    return (_jsxs("div", { className: "w-auto h-6 flex items-center ", children: [_jsx("input", { type: "checkbox", className: `check-box mr-2 appearance-none w-6 h-6 border-2 border-[#E8EBF3] rounded-md ${checkBoxColor[color]} hover:box-shadow`, disabled: typeof disabled === "boolean" && disabled, checked: checked, onChange: (e) => setChecked(e.target.checked) }), _jsx("label", { htmlFor: "checkbox1", children: labels })] }));
+}

package/html/widget/Toggle.js

@@ -10,5 +10,5 @@ const widthSize = {
 };
 export default function Toggle({ state: [chekced, setChecked], labels, options, }) {
     const { disabled } = options ?? {};
-    return (_jsxs("div", { className: "w-24 h-6 flex", children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: typeof disabled === "boolean" && disabled, type: "checkbox", className: "bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), _jsx("div", { className: "ml-2 transition-all", children: labels.map(([status, label]) => (status === chekced ? label : "")) })] }));
+    return (_jsxs("div", { className: "w-24 h-6 flex", children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: typeof disabled === "boolean" && disabled, type: "checkbox", className: "toggle bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), _jsx("div", { className: "ml-2 transition-all", children: labels.map(([status, label]) => (status === chekced ? label : "")) })] }));
 }

package/interface/Board.d.ts

@@ -1,4 +1,4 @@
-import { DataField, Size, Titles } from "./Property";
+import { DataField, DataSet, Size, Titles } from "./Property";
 import { EventsProps } from "./Widget";
 import { HTMLInputElement, HTMLLabelElement, HTMLSelectElement } from "./HTMLElement";
 interface OptionsProps {
@@ -37,15 +37,8 @@ export interface CanvasBoardProps<B> extends BoardProps<B> {
 export interface ManageBoardProps<B, K extends string, T extends {
     [p in K]: any;
 }> extends BoardProps<B> {
-    dataSets: {
-        items: T[] | undefined;
-        renderItem: (item: T) => React.ReactNode;
-        titles?: Titles;
-        interaction?: React.ReactNode;
-    }[];
-    dataField?: {
-        [p in keyof T]?: Partial<DataField>;
-    };
+    dataSets: DataSet<T>[];
+    dataField?: DataField<T>;
 }
 export interface PaperBoardProps<B> extends BoardProps<B> {
 }

package/interface/Card.d.ts

@@ -1,5 +1,4 @@
-import { Button, DataField, Disabled, ImageSize, OnClick, Size, Titles } from "./Property";
-import { Replace } from "./Widget";
+import { Button, DataField, DataSet, Disabled, ImageSize, OnClick, Size, Titles } from "./Property";
 interface CardOptions {
     className?: string;
     boundary?: string;
@@ -71,6 +70,7 @@ export interface NavCardButtonInLayProps extends NavCardProps {
 }
 export interface InfoCardProps extends CardProps {
     titles: Titles;
+    topRight?: React.ReactNode;
     button?: Button;
     options?: {
         titleBorder?: string;
@@ -136,14 +136,8 @@ export interface AddCardProps extends Omit<CardProps, "children"> {
     onClick: OnClick;
 }
 export interface TableCardProps<T> extends Omit<CardProps, "children"> {
-    dataSet: {
-        items: T[];
-        onClick?: OnClick<T>;
-        replaces?: Replace[];
-    };
-    dataField: {
-        [p in keyof T]?: Partial<DataField>;
-    };
+    dataSet: Omit<DataSet<T>, "renderItem">;
+    dataField?: DataField<T>;
     options?: CardOptions & {
         className?: string;
         limit?: number;

package/interface/HTMLElement.d.ts

@@ -36,6 +36,12 @@ export interface HTMLToggleElement extends HTMLElement {
     state: State<boolean>;
     labels: [[true, string], [false, string]];
 }
+export type ColorType = "red" | "blue" | "green";
+export interface HTMLCheckBoxElement extends HTMLElement {
+    state: State<boolean>;
+    labels: string;
+    color: ColorType;
+}
 export interface HTMLElementFrame {
     title: string;
     type: HTMLElementType;

package/interface/Layout.d.ts

@@ -18,6 +18,7 @@ export interface DashboardHeaderProps {
         notifications?: Partial<Notification>[];
         flag: boolean;
         onClick: OnClick;
+        bgColor?: string;
     };
     options?: {
         background?: string;

package/interface/Property.d.ts

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction } from "react";
+import { Replace } from "./Widget";
 /**
  * State type for the React component
  * @template T
@@ -25,7 +26,7 @@ export type State<T> = [T, StateAction<T>];
  * @property {"full"} full - Full size
  */
 export type ImageSize = "sub" | "full";
-export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
+export type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
 /**
  * Image size type
  * @enum {string}
@@ -49,11 +50,26 @@ export type Titles = {
     titleColor?: string;
     subtitleColor?: string;
 };
-export type DataField = {
+export type DataSet<T = any> = {
+    items?: T[];
+    renderItem: (item: T) => React.ReactNode;
+    titles?: Titles;
+    interaction?: React.ReactNode;
+    onClick?: OnClick<T>;
+    replaces?: Replace[];
+};
+type DataFieldType = {
     title: string | number;
     type: string;
     size: string | number;
 };
+export type DataField<T = any> = Partial<{
+    [p in keyof T]: Partial<DataFieldType>;
+}>;
+export interface DataPackage<T> {
+    dataField: DataField<T>;
+    dataSet: Omit<DataSet<T>, "renderItem">;
+}
 export interface Log<K extends string, T extends string | number> {
     prints: K[];
     logs: {
@@ -64,3 +80,4 @@ export interface Order {
     orderBy: string;
     orderHow: "asc" | "desc" | "";
 }
+export {};

package/interface/Widget.d.ts

@@ -24,9 +24,7 @@ export interface EventsProps {
 }
 export interface DataFieldProps<T> {
     id: string;
-    dataField: {
-        [p in keyof T]?: Partial<DataField>;
-    };
+    dataField?: DataField<T>;
     options?: {
         position?: string;
         padding?: string;
@@ -34,9 +32,7 @@ export interface DataFieldProps<T> {
 }
 export interface RowProps<T> {
     item: T;
-    dataField?: {
-        [p in keyof T]?: Partial<DataField>;
-    };
+    dataField?: DataField<T>;
     onClick?: OnClick<T>;
     buttons?: HTMLLabelElement[];
     options?: {
@@ -45,6 +41,7 @@ export interface RowProps<T> {
         padding?: string;
         text?: string;
         noHover?: boolean;
+        className?: string;
     };
 }
 export {};

package/layout/design/Row.design.d.ts

@@ -1,2 +1,2 @@
 import { RowProps } from "../../interface";
-export default function RowDesign<T extends Record<string, any>>({ item, dataField, options, onClick, buttons, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function RowDesign<T>({ item, dataField, options, onClick, buttons, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/design/Row.design.js

@@ -3,7 +3,7 @@ import { useId } from "react";
 import { cn } from "../../util";
 import { Label } from "../../html";
 export default function RowDesign({ item, dataField, options, onClick, buttons, }) {
-    const { size, padding, text, noHover } = options ?? {};
+    const { size, padding, text, noHover, className } = options ?? {};
     const id = useId();
     const container = {
         positions: "relative",
@@ -13,8 +13,12 @@ export default function RowDesign({ item, dataField, options, onClick, buttons,
         text: text,
         styles: !noHover && "hover:bg-gray-100 duration-100",
     };
+    const itemBox = {
+        styles: "truncate",
+        className,
+    };
     return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [dataField &&
-                Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100 truncate`, children: item[key] }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+                Object.keys(dataField).map((key) => (_jsx("div", { className: cn(`w-${dataField[key]?.size}/100`, itemBox), children: String(item[key]) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
                         background: options?.background ?? "bg-crimson-dark",
                         text: options?.text ?? "text-white",
                         width: "xs",

package/layout/design/Shelf.design.js

@@ -2,16 +2,18 @@ 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, className, options, titles, debug, }) {
+    const { title, titleColor } = titles ?? {};
     const { titleSize, subtitleSize } = options ?? {};
     const container = {
         displays: "flex flex-col gap-6",
         debug: debug && isDebug(`border-2  border-${debug}`),
     };
     const titleBox = {
-        container: "flex flex-col text-gray-dim h-6 leading-none",
+        container: "flex flex-col h-6 leading-none",
         title: {
             text: titleSize ?? "text-xl xl:text-xl",
             font: "font-pretendard-bold",
+            titleColor: titleColor ?? "text-gray-dim",
         },
         subtitle: {
             text: subtitleSize ?? "text-base xl:text-lg",
@@ -21,5 +23,5 @@ export default function Shelf({ children, className, options, titles, debug, })
         sizes: "w-full",
         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 })] }));
+    return (_jsxs("div", { className: cn(container), children: [titles && (_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.title), children: title }), _jsx(LineBreaks, { className: cn(titleBox.subtitle), texts: titles?.subtitle })] })), _jsx("div", { className: cn(childrenBox), children: children })] }));
 }

package/layout/template/Row.d.ts

@@ -1,12 +1,11 @@
 import { RowProps } from "../../interface";
-declare function Board<T extends Record<string, any>>({ item, dataField, onClick, buttons, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
-declare function Card<T extends Record<string, any>>({ item, dataField, onClick, buttons, height, noPadding, noHover, }: Omit<RowProps<T>, "options"> & {
-    height?: string;
-    noPadding?: boolean;
-    noHover?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare const Row: {
-    Board: typeof Board;
-    Card: typeof Card;
-};
+declare function Row<T>({ item, dataField, onClick, buttons }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace Row {
+    var Card: <T>({ item, dataField, onClick, buttons, height, noPadding, noHover, }: Omit<RowProps<T>, "options"> & {
+        height?: string | undefined;
+        noPadding?: boolean | undefined;
+        noHover?: boolean | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Board: <T>({ item, dataField, onClick, buttons }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
+}
 export default Row;