@edu-tosel/design 1.0.12 → 1.0.14

package/card/widget/Card.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../util";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, isDebug } from "../../util";
 const widthSize = {
     xs: "w-full md:w-60",
     sm: "w-full md:w-90",
@@ -12,7 +12,7 @@ const widthSize = {
 };
 const heightSize = {
     xs: "min-h-16",
-    sm: "h-72 sm:h-48",
+    sm: "h-48",
     md: "h-72 sm:h-48",
     lg: "h-80",
     xl: "h-125",
@@ -20,9 +20,9 @@ const heightSize = {
     full: "h-full",
     auto: "h-auto min-h-80",
 };
-export function Card({ children, options, debug }) {
+export function Card({ header, children, options, debug }) {
     const { classNames, boundary, rounded, height, width, text, background, onClick, overflow, } = options ?? {};
-    const { size: textSize, color: textColor } = text ?? {};
+    const { size: textSize } = text ?? {};
     const { color: bgColor } = background ?? {};
     const setBoundary = () => {
         if (boundary === "shadow")
@@ -37,12 +37,33 @@ export function Card({ children, options, debug }) {
         positions: "relative",
         sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "sm"]}`,
         onClick: onClick ? "cursor-pointer" : "",
-        text: `text-${textSize ?? "base"}`,
+        text: `text-${textSize ?? "base"} text-black dark:text-white`,
         boundary: setBoundary(),
         rounded: `rounded-${rounded ?? "xl"}`,
-        bgColor: `bg-${bgColor ?? "white/80"}`,
-        styles: "duration-500  overflow-hidden",
-        debug: debug && import.meta.env.MODE && `border-2  border-${debug}`,
+        bgColor: `bg-${bgColor ?? "white/80"} dark:bg-black/80`,
+        styles: "duration-500 ",
+        debug: debug && isDebug(`border-2  border-${debug}`),
+        overflow: "overflow-hidden",
     };
-    return (_jsx("div", { onClick: onClick, className: cn(container, `${classNames}`), children: children }));
+    const headerStyle = {
+        container: {
+            positions: "relative",
+            sizes: "h-11 ",
+        },
+        body: {
+            positions: "absolute top-0 left-0",
+            displays: "flex items-center pl-4",
+            sizes: "w-full h-full",
+            styles: `bg-${bgColor ?? "gray-300"} text-black font-bold`,
+        },
+        block: {
+            sizes: "w-full h-full",
+        },
+    };
+    const body = {
+        sizes: "h-full",
+        overflow: `overflow-${overflow ?? "hidden"}`,
+        classNames,
+    };
+    return (_jsxs("div", { className: cn(container), children: [header && (_jsxs("div", { className: cn(headerStyle.container), children: [_jsx("div", { className: cn(headerStyle.body), children: header }), _jsx("div", { className: cn(headerStyle.block) })] })), _jsx("div", { onClick: onClick, className: cn(body), children: children })] }));
 }

package/deck/index.d.ts

@@ -1 +1 @@
-export * from "./Deck";
+export { default as Deck } from "./template/Deck";

package/deck/index.js

@@ -1 +1 @@
-export * from "./Deck";
+export { default as Deck } from "./template/Deck";

package/deck/template/Deck.d.ts

@@ -0,0 +1,6 @@
+import { DeckProps } from "../../interface/Deck";
+declare function Deck<T extends string | number>(props: DeckProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace Deck {
+    var Sub: <T extends string | number>({ titles, children, options, debug, }: DeckProps<T>) => import("react/jsx-runtime").JSX.Element;
+}
+export default Deck;

package/deck/template/Deck.design.d.ts

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

package/deck/template/Deck.design.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, isDebug } from "../../util";
+import { Deck } from "./../widget/Deck";
+export default function DeckDesign({ children, titles, options, debug, }) {
+    const { title, subtitle, isSub } = titles ?? {};
+    const { height } = options ?? {};
+    const container = {
+        displays: "flex flex-col gap-4",
+        sizes: `w-full h-${height ?? "auto"} `,
+        debug: debug && isDebug(`border-2 border-${debug}`),
+    };
+    const titleBox = {
+        container: "flex flex-col gap-1",
+        title: {
+            text: isSub ? "text-base xl:text-lg" : "text-xl xl:text-2xl",
+            font: "font-bold",
+        },
+        subtitle: isSub ? "text-xs xl:text-sm" : "text-sm xl:text-base",
+    };
+    return (_jsxs("div", { className: cn(container), children: [titles && (_jsxs("div", { children: [_jsx("div", { className: cn(titleBox.title), children: title }), _jsx("div", { className: cn(titleBox.subtitle), children: subtitle })] })), _jsx(Deck, { children: children })] }));
+}

package/deck/template/Deck.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DeckDesign from "./Deck.design";
+function Deck(props) {
+    return _jsx(DeckDesign, { ...props });
+}
+function Sub({ titles, children, options, debug, }) {
+    const { title, subtitle } = titles ?? { title: "" };
+    return (_jsx(DeckDesign, { titles: { title, subtitle, isSub: true }, debug: debug, ...options, children: children }));
+}
+Deck.Sub = Sub;
+export default Deck;

package/deck/widget/Deck.d.ts

@@ -0,0 +1,2 @@
+import { DeckProps } from "../../interface/Deck";
+export declare function Deck<T extends string | number>({ children, options, }: DeckProps<T>): import("react/jsx-runtime").JSX.Element;

package/deck/widget/Deck.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+export function Deck({ children, options, }) {
+    const { flex, justify, gapX, gapY, overflowScroll } = options ?? {};
+    const body = {
+        displays: `flex flex-col flex-wrap gap-y-${gapY ?? 5}`,
+        flex: flex === "col" ? "sm:flex-col" : "sm:flex-row",
+        justify: `justify-${justify ?? "start"}`,
+        gapX: `${`gap-x-${gapX ?? 7.5}`}`,
+        sizes: "sm:w-full ",
+        styles: `${overflowScroll ? "overflow-x-scroll" : ""} duration-500`,
+    };
+    return _jsx("div", { className: cn(body), children: children });
+}

package/globals.css

@@ -19,11 +19,28 @@
 
 @font-face {
   font-family: "Megrim";
-  src: url("./asset/fonts/Megrim.ttf") format("trueType");
+  src: url("./asset/fonts/Megrim.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Times-Newer-Roman-Bold";
+  src: url("./asset/fonts/TimesNewerRoman-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Times-Newer-Roman-BoldItalic";
+  src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
+}
+
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
 }
 
 ::-webkit-scrollbar {
   width: 3px;
+  padding-right: 10px;
 }
 
 ::-webkit-scrollbar-track {
@@ -65,3 +82,12 @@
 .x-shape::after {
   transform: translate(-50%, -50%) rotate(-45deg);
 }
+
+.border-inner {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.asdfasdf:hover {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}

package/html/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Button } from "./widget/Button";
+export { default as Input } from "./widget/Input";
+export { default as Select } from "./widget/Select";

package/html/index.js

@@ -0,0 +1,3 @@
+export { default as Button } from "./widget/Button";
+export { default as Input } from "./widget/Input";
+export { default as Select } from "./widget/Select";

package/html/widget/Button.d.ts

@@ -0,0 +1,2 @@
+import { HTMLButtonElement } from "../../interface";
+export default function Button({ title, onClick }: HTMLButtonElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Button.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+const widthSize = {
+    md: "w-45",
+    lg: "w-50",
+};
+const heightSize = {
+    md: "h-11",
+};
+export default function Button({ title, onClick }) {
+    const container = {
+        sizes: "",
+    };
+    return (_jsx("button", { onClick: onClick, className: cn(container), children: title }));
+}

package/html/widget/Input.d.ts

@@ -0,0 +1,2 @@
+import { HTMLInputElement } from "../../interface";
+export default function Input({ onChange, placeholder, options, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Input.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../util";
+const widthSize = {
+    xs: "w-28",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+export default function Input({ onChange, placeholder, options, }) {
+    const { width } = options ?? {};
+    const id = useId();
+    const container = {
+        width: `${widthSize[width ?? "md"]} h-10`,
+        styles: "rounded-full pl-4 border-4",
+    };
+    return (_jsx("input", { className: cn(container), id: id, type: "text", placeholder: placeholder ?? "", onChange: (e) => onChange(e.target.value) }));
+}

package/html/widget/Select.d.ts

@@ -0,0 +1,2 @@
+import { HTMLSelectElement } from "../../interface";
+export default function Select({ onChange, selectOptions, options, }: HTMLSelectElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Select.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { useState, useEffect } from "react";
+import { BiChevronDown } from "react-icons/bi";
+import { useWidgetStore } from "../../store";
+import { cn } from "../../util";
+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 Select({ onChange, selectOptions, options, }) {
+    const arrayId = useId();
+    // isActive 드롭다운 이벤트 통제
+    const { flag } = useWidgetStore();
+    useEffect(() => {
+        if (!isButton)
+            setIsActive(false);
+        return setIsButton(false);
+    }, [flag]);
+    const [isActive, setIsActive] = useState(false);
+    const [isButton, setIsButton] = useState(false);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const handleItemClick = (title) => {
+        setSelectedItem(title);
+        setIsActive(false);
+    };
+    // css
+    const levels = [
+        "CoCoon",
+        "PreStarter",
+        "Starter",
+        "Basic",
+        "Junior",
+        "HighJunior",
+    ];
+    const colorMap = {
+        CoCoon: "bg-cocoon-green",
+        PreStarter: "bg-ps-pink",
+        Starter: "bg-st-orange",
+        Basic: "bg-ba-yellow",
+        Junior: "bg-jr-blue",
+        HighJunior: "bg-hj-blue",
+    };
+    const isActiveCss = () => {
+        if (isActive)
+            return `shadow-md border-inner rounded-md`;
+    };
+    const tagCss = `bg-slate-200 p-1 pl-2 pr-2 rounded-md`;
+    const dropdownTop = selectOptions && selectOptions.length > 6 ? "top-24" : "top-12";
+    const { width } = options ?? {};
+    const dropdown = {
+        size: `${widthSize[width ?? "sm"]} h-10`,
+        styles: "cursor-pointer pt-4 pb-4 pl-4 pr-4 font-bold text-sm bg-white",
+        display: `flex items-center`,
+        hover: `hover:rounded-md`,
+        effect: `transition-all`,
+        function: `${isActiveCss()}`,
+        etc: "asdfasdf",
+    };
+    const dropdownInput = {
+        size: `${widthSize[width ?? "sm"]} h-10 `,
+        styles: "shadow-md text-sm p-4 font-bold bg-white text-left cursor-text border-1 rounded-md ",
+        display: "absolute top-12 flex items-center z-10 ",
+        focus: "focus:outline-none focus:border-[#44C5F3] focus:border-1 ",
+    };
+    const dropdownContent = {
+        size: `${widthSize[width ?? "sm"]} min-h-8 max-h-48 overflow-y-auto `,
+        styles: `text-sm mt-1 border-1 rounded-md`,
+        display: `absolute z-40`,
+        function: `${dropdownTop}`,
+    };
+    const dropdownItem = {
+        size: `${widthSize[width ?? "full"]} h-8 `,
+        styles: `text-sm text-left p-4 font-bold cursor-pointer `,
+        display: `flex items-center z-40`,
+        hover: `hover:bg-slate-200 `,
+        effect: `transition-all `,
+    };
+    // input
+    const [searchTerm, setSearchTerm] = useState("");
+    const filteredOptions = selectOptions?.filter(([_, title]) => title.toLowerCase().includes(searchTerm.toLowerCase())) || [];
+    // Keyboard event handling
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!isActive)
+                return;
+            // Arrow Up
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                const currentIndex = filteredOptions.findIndex(([_, title]) => title === selectedItem);
+                const newIndex = currentIndex === -1
+                    ? 0
+                    : (currentIndex - 1 + filteredOptions.length) %
+                        filteredOptions.length;
+                setSelectedItem(filteredOptions[newIndex][1]);
+                setSelectedIndex(newIndex);
+            }
+            // Arrow Down
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                const currentIndex = filteredOptions.findIndex(([_, title]) => title === selectedItem);
+                const newIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % filteredOptions.length;
+                setSelectedItem(filteredOptions[newIndex][1]);
+                setSelectedIndex(newIndex);
+            }
+            // Enter
+            if (event.key === "Enter") {
+                if (selectedItem) {
+                    setIsActive(false);
+                    onChange(selectedItem);
+                }
+            }
+            // Esc
+            if (event.key === "Escape") {
+                setIsActive(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        // 선택된 항목 스크롤을 조정하는 함수
+        const scrollIntoView = () => {
+            if (selectedIndex === -1)
+                return;
+            const dropdownContent = document.querySelector(".dropdown-content");
+            if (!dropdownContent)
+                return;
+            const selectedItemElement = dropdownContent.children[selectedIndex];
+            if (!selectedItemElement)
+                return;
+            const dropdownRect = dropdownContent.getBoundingClientRect();
+            const selectedItemRect = selectedItemElement.getBoundingClientRect();
+            if (selectedItemRect.top < dropdownRect.top) {
+                dropdownContent.scrollTop -= dropdownRect.top - selectedItemRect.top;
+            }
+            else if (selectedItemRect.bottom > dropdownRect.bottom) {
+                dropdownContent.scrollTop +=
+                    selectedItemRect.bottom - dropdownRect.bottom;
+            }
+        };
+        scrollIntoView();
+        window.addEventListener("resize", scrollIntoView);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("resize", scrollIntoView);
+        };
+    }, [isActive, selectedIndex, filteredOptions, selectedItem, onChange]);
+    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: cn(dropdown), onClick: () => {
+                    setIsActive(!isActive);
+                    setIsButton(true);
+                }, children: [_jsx("div", { className: `w-4 h-4 mr-2 ${selectedItem && colorMap[selectedItem]
+                            ? colorMap[selectedItem]
+                            : "hidden"}` }), _jsx("div", { className: `${!selectedItem || levels.includes(selectedItem) ? "" : tagCss}`, children: selectedItem || (_jsx("span", { className: "text-zinc-400", children: "\uC635\uC158\uC744 \uC120\uD0DD\uD558\uC138\uC694" })) }), isActive && _jsx(BiChevronDown, { className: "ml-auto" })] }), isActive && selectOptions && selectOptions.length > 6 && (_jsx("input", { type: "text", placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(dropdownInput), value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })), isActive && filteredOptions && (_jsx("div", { className: "dropdown-content " + cn(dropdownContent), children: filteredOptions.map(([id, title], index) => (_jsxs("div", { className: cn(dropdownItem) +
+                        (selectedIndex === index ? "bg-slate-200" : "bg-white"), onClick: () => handleItemClick(title), children: [_jsx("div", { className: `w-4 h-4 mr-2 ${colorMap[title] && levels.includes(title)
+                                ? colorMap[title]
+                                : "hidden"}` }), _jsx("div", { className: `${levels.includes(title) ? "" : tagCss}`, children: title })] }, id))) }))] }));
+}

package/index.d.ts

@@ -3,9 +3,10 @@ export * from "./board";
 export * from "./card";
 export * from "./deck";
 export * from "./layout";
+export * from "./html";
 export * from "./interaction";
 export * from "./menu";
 export * from "./modal";
 export * from "./navigation";
-export * from "./shelf";
+export * from "./overlay";
 export * from "./text";

package/index.js

@@ -3,9 +3,10 @@ export * from "./board";
 export * from "./card";
 export * from "./deck";
 export * from "./layout";
+export * from "./html";
 export * from "./interaction";
 export * from "./menu";
 export * from "./modal";
 export * from "./navigation";
-export * from "./shelf";
+export * from "./overlay";
 export * from "./text";

package/interface/Board.d.ts

@@ -1,19 +1,17 @@
-import { Dispatch } from "react";
-import { Button, Size } from "./Property";
+import React, { Dispatch, SetStateAction } from "react";
+import { DataField, Size } from "./Property";
+import { EventsProps } from "./Widget";
 interface OptionsProps {
+    classNames?: string;
     width?: Size;
     height?: Size;
     color?: string;
     isRounded?: boolean;
-}
-interface WidgetsProps {
-    exceptions?: [boolean, React.ReactNode][];
-    components?: [boolean | string, React.ReactNode][];
-    tabs?: Button[];
+    noPadding?: boolean;
 }
 export interface BoardProps {
     children?: React.ReactNode;
-    widgets?: WidgetsProps;
+    widgets?: EventsProps;
     options?: OptionsProps;
     debug?: string;
 }
@@ -22,14 +20,14 @@ export interface BoardHeaderProps {
     tags?: {
         selects?: {
             title: string;
-            onChange: Dispatch<string>;
+            onChange: Dispatch<SetStateAction<string>>;
             options: [string | number, string][];
             width?: Size;
         }[];
         inputs?: {
-            title: string;
             onChange: Dispatch<string>;
-            placeholder: string;
+            placeholder?: string;
+            title?: string;
             width?: Size;
         }[];
     };
@@ -44,19 +42,17 @@ export interface ManageBoardProps<T> extends BoardProps {
     data: {
         dataSets: {
             title?: string;
+            subtitle?: string;
             items: T[] | undefined;
             renderItem: (item: T) => React.ReactNode;
+            interaction?: React.ReactNode;
         }[];
         dataField?: {
-            fields: Record<string, string>;
-            sizes: Record<string, string>;
+            [p in keyof T]: DataField;
         };
         gap?: number;
     };
     header?: BoardHeaderProps;
-    widgets?: {
-        menu?: React.ReactNode;
-    } & WidgetsProps;
 }
 export interface PaperBoardProps extends BoardProps {
 }

package/interface/Card.d.ts

@@ -1,4 +1,23 @@
-import { ImageSize, Size } from "./Property";
+import { Button, DataField, ImageSize, OnClick, Size, Titles } from "./Property";
+interface CardOptions {
+    classNames?: string;
+    boundary?: "shadow" | "border" | "none";
+    rounded?: string;
+    height?: Size;
+    width?: Size;
+    background?: {
+        color?: string;
+    };
+    text?: {
+        size?: string;
+        color?: string;
+    };
+    border?: {
+        color?: string;
+    };
+    onClick?: () => unknown | (() => Promise<unknown>);
+    overflow?: "hiden" | "y-scroll" | "auto";
+}
 /**
  * CardProps is an interface.
  * @interface CardProps
@@ -13,22 +32,8 @@ import { ImageSize, Size } from "./Property";
  */
 export interface CardProps {
     children: React.ReactNode;
-    options?: {
-        classNames?: string;
-        boundary?: "shadow" | "border" | "none";
-        rounded?: string;
-        height?: Size;
-        width?: Size;
-        background?: {
-            color?: string;
-        };
-        text?: {
-            size?: string;
-            color?: string;
-        };
-        onClick?: () => unknown | (() => Promise<unknown>);
-        overflow?: "hiden" | "auto";
-    };
+    header?: React.ReactNode;
+    options?: CardOptions;
     debug?: string;
 }
 export interface ChartCardProps extends Omit<CardProps, "children"> {
@@ -52,17 +57,15 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
         score: number;
     };
 }
-export interface TableCardProps extends Omit<CardProps, "children"> {
-    data: Record<string, string | number>[];
-    fields: Record<string, string>;
-    sizes: Record<string, string>;
+export interface TableCardProps<T> extends Omit<CardProps, "children"> {
+    dataSets: T[];
+    dataField: {
+        [p in keyof T]: DataField;
+    };
+    options?: CardOptions;
 }
 export interface TrumpCardProps {
-    titles: {
-        title: string;
-        subTitle?: string[];
-        color?: string;
-    };
+    titles: Titles;
     options?: {
         width?: Size;
         image?: {
@@ -73,16 +76,16 @@ export interface TrumpCardProps {
         subButton?: [string, string, () => unknown | (() => Promise<unknown>)];
     };
 }
-export interface InfoCardProps {
-    type: "information" | "profile" | "profileSmall";
-    titles: {
-        title: string;
-        subTitle?: string[];
-        color?: string;
-    };
-    button: {
-        title: string;
-        display: "inline-block" | "none";
-        color?: string;
-    };
+export interface InfoCardProps extends CardProps {
+    titles: Titles;
+    button?: Button;
+    options?: {
+        titleBorderColor?: string;
+        rightTextColor?: string;
+        buttonBackgroundColor?: string;
+    } & CardOptions;
+}
+export interface AddCardProps extends Omit<CardProps, "children"> {
+    onClick: OnClick;
 }
+export {};

package/{deck → interface}/Deck.d.ts

@@ -1,10 +1,7 @@
-export declare function Deck<T extends string | number>({ children, titles, options, debug, }: {
+import { Titles } from "./Property";
+export interface DeckProps<T> {
     children: React.ReactNode;
-    titles?: {
-        title: string;
-        subtitle?: string;
-        gapTitle?: number;
-    };
+    titles?: Titles;
     options?: {
         flex?: "col" | "row";
         justify?: "between";
@@ -15,4 +12,4 @@ export declare function Deck<T extends string | number>({ children, titles, opti
         gapY?: number;
     };
     debug?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}

package/interface/Deck.js

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

package/interface/HTMLElement.d.ts

@@ -1,10 +1,10 @@
 import { Dispatch } from "react";
-import { Size } from "./Property";
-export type HTMLElementType = "text" | "input" | "select";
+import { OnClick, Size } from "./Property";
+export type HTMLElementType = "text" | "button" | "input" | "select";
 export interface HTMLElement {
-    title: string;
-    onChange: Dispatch<string>;
-    width?: Size;
+    options?: {
+        width?: Size;
+    };
 }
 export interface HTMLElementSetting {
     [key: string]: {
@@ -15,9 +15,15 @@ export interface HTMLElementSetting {
         onChnage?: Dispatch<string>;
     };
 }
+export interface HTMLButtonElement extends HTMLElement {
+    title: string;
+    onClick: OnClick;
+}
 export interface HTMLSelectElement extends HTMLElement {
+    onChange: Dispatch<string>;
     selectOptions?: [string | number, string][];
 }
 export interface HTMLInputElement extends HTMLElement {
+    onChange: Dispatch<string>;
     placeholder?: string;
 }