@edu-tosel/design 1.0.34 → 1.0.36

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

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

package/html/{widget → 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;
@@ -47,7 +48,8 @@ export default function SelectDesign({ state, selectOptions, placeholder, option
     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",
@@ -55,7 +57,7 @@ export default function SelectDesign({ state, selectOptions, placeholder, option
         styles: "focus:outline-none text-xs pl-1.5",
     };
     const body = {
-        positions: "absolute",
+        positions: "absolute z-40",
         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/template/Label.js

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

package/html/template/Select.js

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

package/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,20 @@
+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 ?? {};
+    console.log(checked);
+    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,8 +1,8 @@
-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 {
-    classNames?: string;
+    className?: string;
     width?: Size;
     height?: Size;
     color?: string;
@@ -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,7 +1,6 @@
-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 {
-    classNames?: string;
+    className?: string;
     boundary?: string;
     rounded?: string;
     height?: Size;
@@ -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/Modal.d.ts

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

package/interface/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/Shelf.d.ts

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

package/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

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

package/layout/{widget → 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/{widget → design}/Shelf.design.d.ts

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

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

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

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

package/layout/template/Gallery.js

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

package/layout/template/Row.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;

package/layout/template/Row.js

@@ -1,7 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import RowDesign from "../widget/Row.design";
-function Board({ item, dataField, onClick, buttons, }) {
+import RowDesign from "../design/Row.design";
+function Row({ item, dataField, onClick, buttons }) {
+    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, options: {
+            size: "w-full h-12",
+            noHover: true,
+            text: "text-xs",
+            className: "text-center",
+        } }));
+}
+function Board({ item, dataField, onClick, buttons }) {
     const id = useId();
     return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, options: {
             size: "w-full h-12",
@@ -18,8 +26,6 @@ function Card({ item, dataField, onClick, buttons, height, noPadding, noHover, }
             noHover,
         } }, id));
 }
-const Row = {
-    Board,
-    Card,
-};
+Row.Card = Card;
+Row.Board = Board;
 export default Row;

package/layout/template/Shelf.d.ts

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

package/layout/template/Shelf.js

@@ -1,18 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../util";
-import ShelfDesign from "../widget/Shelf.design";
+import ShelfDesign from "../design/Shelf.design";
+const gap = {
+    xy: "gap-7.5",
+    x: "gap-x-7.5",
+    y: "gap-y-7.5",
+    none: "gap-0",
+};
 function Shelf({ titles, debug, children }) {
     const container = {
         displays: "inline-flex flex-col gap-12 w-full",
     };
-    return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), debug: debug, children: children }));
+    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), debug: debug, children: children }));
 }
-function Wrap({ classNames, titles, children, debug, }) {
+function Wrap({ className, titles, children, debug, options, }) {
     const container = {
-        displays: "flex flex-row flex-wrap gap-x-7.5",
-        classNames,
+        displays: "flex flex-row flex-wrap",
+        gaps: gap[options?.gap ?? "xy"],
+        className,
     };
-    return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
+    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), options: {
             titleSize: "text-lg xl:text-2xl",
             subtitleSize: "text-sm",
         }, debug: debug, children: children }));
@@ -21,7 +28,7 @@ function Row({ titles, children, debug }) {
     const container = {
         displays: "flex flex-row gap-7.5",
     };
-    return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
+    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), options: {
             titleSize: "text-lg xl:text-2xl",
             subtitleSize: "text-sm",
         }, debug: debug, children: children }));
@@ -30,7 +37,7 @@ function Col({ titles, children, debug }) {
     const container = {
         displays: "flex flex-col flex-wrap gap-y-5",
     };
-    return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {
+    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), options: {
             titleSize: "text-lg xl:text-2xl",
             subtitleSize: "text-sm",
         }, debug: debug, children: children }));

package/layout/widget/dashboard/Header.js

@@ -6,7 +6,7 @@ import { Events } from "../..";
 import Notification from "./Notification";
 export function Header({ title, logo, notification, options, }) {
     const { setView, setIsOwn } = useWidgetStore();
-    const { notifications, flag, onClick } = notification;
+    const { notifications, flag, onClick, bgColor } = notification;
     const { text, background, className } = options ?? {};
     const container = {
         positions: "fixed xl:static top-0 left-0 z-40",
@@ -24,8 +24,8 @@ export function Header({ title, logo, notification, options, }) {
                                 setIsOwn(true);
                                 onClick && onClick();
                                 return setView("notification");
-                            }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938", stroke: "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), flag && (_jsxs("div", { className: "absolute top-0 right-0", children: [_jsx("div", { className: "absolute w-2 h-2 rounded-full bg-red-500" }), _jsx("div", { className: " w-2 h-2 rounded-full  bg-red-400 animate-ping duration-1000" })] }))] }), _jsx("svg", { className: "cursor-pointer", onClick: () => {
+                            }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938", stroke: bgColor ?? "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), flag && (_jsxs("div", { className: "absolute top-0 right-0", children: [_jsx("div", { className: "absolute w-2 h-2 rounded-full bg-red-500" }), _jsx("div", { className: " w-2 h-2 rounded-full  bg-red-400 animate-ping duration-1000" })] }))] }), _jsx("svg", { className: "cursor-pointer", onClick: () => {
                                 setIsOwn(true);
                                 return setView("menu");
-                            }, xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M18.7313 19.5053C18.0034 18.5416 17.0618 17.7601 15.9804 17.2223C14.8991 16.6846 13.7077 16.4052 12.5 16.4063C11.2924 16.4052 10.101 16.6846 9.01964 17.2223C7.93832 17.7601 6.99664 18.5416 6.26878 19.5053M18.7313 19.5053C20.1516 18.2419 21.1533 16.5767 21.6054 14.7304C22.0576 12.884 21.9378 10.9439 21.262 9.16722C20.5862 7.39055 19.3862 5.86128 17.8213 4.78224C16.2564 3.7032 14.4004 3.12537 12.4995 3.12537C10.5986 3.12537 8.74267 3.7032 7.17775 4.78224C5.61282 5.86128 4.41288 7.39055 3.73705 9.16722C3.06122 10.9439 2.94144 12.884 3.3936 14.7304C3.84575 16.5767 4.84847 18.2419 6.26878 19.5053M18.7313 19.5053C17.0167 21.0346 14.7976 21.8783 12.5 21.8751C10.2021 21.8786 7.98361 21.0349 6.26878 19.5053M15.625 10.1563C15.625 10.9851 15.2958 11.78 14.7097 12.366C14.1237 12.9521 13.3288 13.2813 12.5 13.2813C11.6712 13.2813 10.8764 12.9521 10.2903 12.366C9.70427 11.78 9.37503 10.9851 9.37503 10.1563C9.37503 9.32751 9.70427 8.53265 10.2903 7.9466C10.8764 7.36055 11.6712 7.03131 12.5 7.03131C13.3288 7.03131 14.1237 7.36055 14.7097 7.9466C15.2958 8.53265 15.625 9.32751 15.625 10.1563Z", stroke: "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) })] }));
+                            }, xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M18.7313 19.5053C18.0034 18.5416 17.0618 17.7601 15.9804 17.2223C14.8991 16.6846 13.7077 16.4052 12.5 16.4063C11.2924 16.4052 10.101 16.6846 9.01964 17.2223C7.93832 17.7601 6.99664 18.5416 6.26878 19.5053M18.7313 19.5053C20.1516 18.2419 21.1533 16.5767 21.6054 14.7304C22.0576 12.884 21.9378 10.9439 21.262 9.16722C20.5862 7.39055 19.3862 5.86128 17.8213 4.78224C16.2564 3.7032 14.4004 3.12537 12.4995 3.12537C10.5986 3.12537 8.74267 3.7032 7.17775 4.78224C5.61282 5.86128 4.41288 7.39055 3.73705 9.16722C3.06122 10.9439 2.94144 12.884 3.3936 14.7304C3.84575 16.5767 4.84847 18.2419 6.26878 19.5053M18.7313 19.5053C17.0167 21.0346 14.7976 21.8783 12.5 21.8751C10.2021 21.8786 7.98361 21.0349 6.26878 19.5053M15.625 10.1563C15.625 10.9851 15.2958 11.78 14.7097 12.366C14.1237 12.9521 13.3288 13.2813 12.5 13.2813C11.6712 13.2813 10.8764 12.9521 10.2903 12.366C9.70427 11.78 9.37503 10.9851 9.37503 10.1563C9.37503 9.32751 9.70427 8.53265 10.2903 7.9466C10.8764 7.36055 11.6712 7.03131 12.5 7.03131C13.3288 7.03131 14.1237 7.36055 14.7097 7.9466C15.2958 8.53265 15.625 9.32751 15.625 10.1563Z", stroke: bgColor ?? "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) })] }));
 }

package/modal/template/Alert.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ModalDesign from "../widget/Modal.design";
+import ModalDesign from "../design/Modal.design";
 export default function Alert({ isVisible, title, scripts, options, }) {
     const { script, subScript } = scripts ?? {};
     const { buttons } = options ?? {};
-    return (_jsx(ModalDesign, { isVisible: isVisible, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: _jsx("div", { className: "flex flex-col gap-3", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "text-3xl font-pretendard-bold", children: title }), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-pretendard-bold", children: script })] }) }) }));
+    return (_jsx(ModalDesign, { isVisible: isVisible, className: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: _jsx("div", { className: "flex flex-col gap-3", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "text-3xl font-pretendard-bold", children: title }), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-pretendard-bold", children: script })] }) }) }));
 }

package/modal/template/Input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ModalDesign from "../widget/Modal.design";
+import ModalDesign from "../design/Modal.design";
 export default function Input({ isVisible, event, title, options, state, }) {
     const { buttons } = options ?? {};
-    return (_jsxs(ModalDesign, { isVisible: isVisible, event: event, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: [_jsx("div", { className: "text-xl font-pretendard-bold", children: title }), _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) })] }));
+    return (_jsxs(ModalDesign, { isVisible: isVisible, event: event, className: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: [_jsx("div", { className: "text-xl font-pretendard-bold", children: title }), _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) })] }));
 }

package/overlay/widget/Overlay.design.js

@@ -27,5 +27,5 @@ export default function OverlayDesign({ titles, children, event, isVisible, }) {
         leave: { width: "10%", opacity: 0 },
         config: { duration: 300 },
     });
-    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: cn(body), children: [_jsx("div", { className: "font-pretendard-bold text-2xl", children: title }), _jsx("div", { className: "flex flex-col gap-3", children: children })] }), event && (_jsx("button", { onClick: () => removeView(event), className: cn(button), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M6.28003 5.22C6.13786 5.08752 5.94981 5.0154 5.75551 5.01882C5.56121 5.02225 5.37582 5.10096 5.23841 5.23838C5.101 5.37579 5.02228 5.56118 5.01886 5.75548C5.01543 5.94978 5.08755 6.13782 5.22003 6.28L8.94003 10L5.22003 13.72C5.14634 13.7887 5.08724 13.8715 5.04625 13.9635C5.00526 14.0555 4.98322 14.1548 4.98144 14.2555C4.97966 14.3562 4.99819 14.4562 5.03591 14.5496C5.07363 14.643 5.12977 14.7278 5.20099 14.799C5.27221 14.8703 5.35705 14.9264 5.45043 14.9641C5.54382 15.0018 5.64385 15.0204 5.74455 15.0186C5.84526 15.0168 5.94457 14.9948 6.03657 14.9538C6.12857 14.9128 6.21137 14.8537 6.28003 14.78L10 11.06L13.72 14.78C13.7887 14.8537 13.8715 14.9128 13.9635 14.9538C14.0555 14.9948 14.1548 15.0168 14.2555 15.0186C14.3562 15.0204 14.4562 15.0018 14.5496 14.9641C14.643 14.9264 14.7279 14.8703 14.7991 14.799C14.8703 14.7278 14.9264 14.643 14.9642 14.5496C15.0019 14.4562 15.0204 14.3562 15.0186 14.2555C15.0168 14.1548 14.9948 14.0555 14.9538 13.9635C14.9128 13.8715 14.8537 13.7887 14.78 13.72L11.06 10L14.78 6.28C14.9125 6.13782 14.9846 5.94978 14.9812 5.75548C14.9778 5.56118 14.8991 5.37579 14.7617 5.23838C14.6242 5.10096 14.4389 5.02225 14.2446 5.01882C14.0503 5.0154 13.8622 5.08752 13.72 5.22L10 8.94L6.28003 5.22Z", fill: "#7F7F7F" }) }) }))] })));
+    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn("overlay"), children: [_jsxs("div", { className: cn(body), children: [_jsx("div", { className: "font-pretendard-bold text-2xl", children: title }), _jsx("div", { className: "flex flex-col gap-3", children: children })] }), event && (_jsx("button", { onClick: () => removeView(event), className: cn(button), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M6.28003 5.22C6.13786 5.08752 5.94981 5.0154 5.75551 5.01882C5.56121 5.02225 5.37582 5.10096 5.23841 5.23838C5.101 5.37579 5.02228 5.56118 5.01886 5.75548C5.01543 5.94978 5.08755 6.13782 5.22003 6.28L8.94003 10L5.22003 13.72C5.14634 13.7887 5.08724 13.8715 5.04625 13.9635C5.00526 14.0555 4.98322 14.1548 4.98144 14.2555C4.97966 14.3562 4.99819 14.4562 5.03591 14.5496C5.07363 14.643 5.12977 14.7278 5.20099 14.799C5.27221 14.8703 5.35705 14.9264 5.45043 14.9641C5.54382 15.0018 5.64385 15.0204 5.74455 15.0186C5.84526 15.0168 5.94457 14.9948 6.03657 14.9538C6.12857 14.9128 6.21137 14.8537 6.28003 14.78L10 11.06L13.72 14.78C13.7887 14.8537 13.8715 14.9128 13.9635 14.9538C14.0555 14.9948 14.1548 15.0168 14.2555 15.0186C14.3562 15.0204 14.4562 15.0018 14.5496 14.9641C14.643 14.9264 14.7279 14.8703 14.7991 14.799C14.8703 14.7278 14.9264 14.643 14.9642 14.5496C15.0019 14.4562 15.0204 14.3562 15.0186 14.2555C15.0168 14.1548 14.9948 14.0555 14.9538 13.9635C14.9128 13.8715 14.8537 13.7887 14.78 13.72L11.06 10L14.78 6.28C14.9125 6.13782 14.9846 5.94978 14.9812 5.75548C14.9778 5.56118 14.8991 5.37579 14.7617 5.23838C14.6242 5.10096 14.4389 5.02225 14.2446 5.01882C14.0503 5.0154 13.8622 5.08752 13.72 5.22L10 8.94L6.28003 5.22Z", fill: "#7F7F7F" }) }) }))] })));
 }