@edu-tosel/design 1.0.60 → 1.0.62

package/card/template/InfoCard/Product.js

@@ -10,11 +10,11 @@ export default function Product({ titles, data }) {
         displays: "flex flex-col mt-2.5",
         sizes: "h-19.25 w-full",
     };
-    return (_jsx(InfoCardDesign, { titles: titles, options: {
+    return (_jsx(InfoCardDesign, { titles: titles, option: {
             titleBorder: "border-jr-blue",
             width: "sm",
             height: "xs",
-        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "text-sm", children: ["\uC77C\uC2DC: ", date] }), _jsxs("div", { className: "text-sm", children: ["\uC694\uCCAD\uC790: ", requester ?? "No Data"] }), _jsxs("div", { className: "text-sm", children: ["\uC218\uC2E0\uC790: ", receiver ?? "No Data"] })] }), _jsx(Label.Button, { title: status ?? "", onClick: () => console.log("click"), options: {
+        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "text-sm", children: ["\uC77C\uC2DC: ", date] }), _jsxs("div", { className: "text-sm", children: ["\uC694\uCCAD\uC790: ", requester ?? "No Data"] }), _jsxs("div", { className: "text-sm", children: ["\uC218\uC2E0\uC790: ", receiver ?? "No Data"] })] }), _jsx(Label.Button, { title: status ?? "", onClick: () => console.log("click"), option: {
                         width: "sm",
                         height: "xs",
                         className: cn(label),

package/card/template/InfoCard/Student.js

@@ -14,11 +14,11 @@ export default function Student({ titles, image, data, onClick }) {
         sizes: "w-22.5 h-6.4",
         styles: "bg-white-off text-sm rounded-md",
     };
-    return (_jsx(InfoCardDesign, { titles: titles, image: image, options: {
+    return (_jsx(InfoCardDesign, { titles: titles, image: image, option: {
             titleBorder: "border-blue-navy",
             width: "sm",
             height: "xs",
-        }, children: _jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: _jsx("div", { className: "flex items-center gap-5", children: _jsx("span", { className: "text-sm", children: data.belong }) }) }), _jsx(Label.Button, { title: "\uC0C1\uC138\uBCF4\uAE30", onClick: onClick, options: {
+        }, children: _jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: _jsx("div", { className: "flex items-center gap-5", children: _jsx("span", { className: "text-sm", children: data.belong }) }) }), _jsx(Label.Button, { title: "\uC0C1\uC138\uBCF4\uAE30", onClick: onClick, option: {
                         width: "sm",
                         height: "xs",
                         text: "text-white hover:text-blue-navy",

package/card/template/NavCard.d.ts

@@ -1,7 +1,7 @@
 import { NavCardBannerProps, NavCardButtonProps, NavCardButtonInLayProps } from "../../interface";
-declare function Banner({ titles, options }: NavCardBannerProps): import("react/jsx-runtime").JSX.Element;
-declare function _Button({ titles, onClick, options }: NavCardButtonProps): import("react/jsx-runtime").JSX.Element;
-declare function ButtonInLay({ titles, buttonInLay, options, }: NavCardButtonInLayProps): import("react/jsx-runtime").JSX.Element;
+declare function Banner({ titles, option }: NavCardBannerProps): import("react/jsx-runtime").JSX.Element;
+declare function _Button({ titles, onClick, option }: NavCardButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonInLay({ titles, buttonInLay, option }: NavCardButtonInLayProps): import("react/jsx-runtime").JSX.Element;
 declare function BannerAndButtonInLay({ banner, buttonInLay, }: {
     banner: NavCardBannerProps;
     buttonInLay: NavCardButtonInLayProps;

package/card/template/NavCard.js

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import NavCardDesign from "../design/NavCard.design";
-function Banner({ titles, options }) {
-    return (_jsx(NavCardDesign, { titles: titles, options: { ...options, width: options?.width ?? "xl", height: "sm" } }));
+function Banner({ titles, option }) {
+    return (_jsx(NavCardDesign, { titles: titles, option: { ...option, width: option?.width ?? "xl", height: "sm" } }));
 }
-function _Button({ titles, onClick, options }) {
-    return (_jsx(NavCardDesign, { titles: titles, options: {
-            ...options,
+function _Button({ titles, onClick, option }) {
+    return (_jsx(NavCardDesign, { titles: titles, option: {
+            ...option,
             onClick,
-            width: options?.width ?? "xs",
-            height: options?.height ?? "sm",
+            width: option?.width ?? "xs",
+            height: option?.height ?? "sm",
         } }));
 }
-function ButtonInLay({ titles, buttonInLay, options, }) {
-    return (_jsx(NavCardDesign, { titles: titles, options: {
-            ...options,
-            width: options?.width ?? "xs",
-            height: options?.height ?? "sm",
+function ButtonInLay({ titles, buttonInLay, option }) {
+    return (_jsx(NavCardDesign, { titles: titles, option: {
+            ...option,
+            width: option?.width ?? "xs",
+            height: option?.height ?? "sm",
             buttonInLay: {
                 disabled: buttonInLay.disabled,
                 ...buttonInLay,
@@ -27,11 +27,11 @@ function ButtonInLay({ titles, buttonInLay, options, }) {
 function BannerAndButtonInLay({ banner, buttonInLay, }) {
     const bannerProps = {
         ...banner,
-        options: { ...banner.options, noShadow: true },
+        option: { ...banner.option, noShadow: true },
     };
     const buttonInLayProps = {
         ...buttonInLay,
-        options: { ...buttonInLay.options, noShadow: true },
+        option: { ...buttonInLay.option, noShadow: true },
     };
     return (_jsxs("div", { className: "flex w-full", children: [_jsx("div", { className: "box-shadow rounded-xl w-full", children: _jsx(Banner, { ...bannerProps }) }), _jsx("div", { className: "box-shadow rounded-xl", children: _jsx(ButtonInLay, { ...buttonInLayProps }) })] }));
 }

package/card/template/ProgressCard/Large.d.ts

@@ -0,0 +1,2 @@
+import { ProgressCardProps } from "../../../interface";
+export default function ProgressCardLG({ titles, steps, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/{ProgressCard.js → ProgressCard/Large.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import SVG from "../../asset/SVG";
-import { cn } from "../../util";
-import CardDesign from "../design/Card.design";
+import SVG from "../../../asset/SVG";
+import { cn } from "../../../util";
+import CardDesign from "../../design/Card.design";
 const bg = {
     green: "bg-green-dark",
     blue: "bg-blue-navy",
@@ -14,7 +14,7 @@ const text = {
     green: "text-green-dark",
     blue: "text-blue-navy",
 };
-export default function ProgressCard({ titles, steps, theme, }) {
+export default function ProgressCardLG({ titles, steps, theme, }) {
     const progressBox = {
         positions: "absolute top-7.5 left-7.5",
         displays: "flex",
@@ -35,8 +35,8 @@ export default function ProgressCard({ titles, steps, theme, }) {
         steps.filter(([_, value]) => !!value).length,
         steps.length,
     ].join("/");
-    return (_jsxs(CardDesign, { options: {
+    return (_jsxs(CardDesign, { option: {
             width: "2xl",
             height: "2xs",
-        }, children: [_jsx("div", { className: cn(progressBox), children: steps.map(([key, value]) => (_jsxs("div", { className: cn(stepBox(value)), children: [_jsx("div", { children: key }), _jsx(SVG.Operation.Checked, { flag: value, size: 25, theme: theme })] }, key))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsx("div", { className: "text-base leading-none", children: titles.subtitle })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full w-${occupied} ${bg[theme ?? "green"]}` }) })] }));
+        }, children: [_jsx("div", { className: cn(progressBox), children: steps.map(([{ title }, value]) => (_jsxs("div", { className: cn(stepBox(value)), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: value, size: 25, theme: theme })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsx("div", { className: "text-base leading-none", children: titles.subtitle })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full w-${occupied} ${bg[theme ?? "green"]}` }) })] }));
 }

package/card/template/ProgressCard/Small.d.ts

@@ -0,0 +1,2 @@
+import { ProgressCardProps } from "../../../interface";
+export default function ProgressCardSmall({ titles, steps, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/ProgressCard/Small.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SVG from "../../../asset/SVG";
+import { cn } from "../../../util";
+import CardDesign from "../../design/Card.design";
+const bgLight = {
+    green: "bg-green-dark/10",
+    blue: "bg-blue-navy/10",
+};
+const text = {
+    green: "text-green-dark",
+    blue: "text-blue-navy",
+};
+export default function ProgressCardSmall({ titles, steps, theme = "green", }) {
+    const progressBox = {
+        positions: "absolute top-2.5 left-2.5",
+        displays: "flex",
+        sizes: "w-75 h-16",
+    };
+    const stepBox = (flag) => ({
+        displays: "flex-1 flex flex-col justify-between",
+        sizes: "h-full",
+        backgrounds: flag ? bgLight[theme ?? "green"] : "bg-transparent",
+        boundaries: "rounded-[10px] p-2.5",
+        texts: flag ? "text-gray-dark" : "text-gray-medium",
+    });
+    const titleBox = {
+        positions: "absolute top-4.5 right-6",
+        displays: "flex flex-col items-end gap-y-3",
+    };
+    return (_jsxs(CardDesign, { option: {
+            width: "md",
+            height: "4xs",
+        }, children: [_jsx("div", { className: cn(progressBox), children: steps.map(([{ title, subtitle }, value]) => (_jsxs("div", { className: cn(stepBox(value)), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "leading-none text-[12px] font-pretendard-bold", children: title }), _jsx(SVG.Operation.Checked, { flag: value, size: 25, theme: theme })] }), _jsx("div", { className: `text-[12px] ${text[theme]}`, children: subtitle })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-[20px] leading-none font-pretendard-bold ${text[theme]}`, children: titles.title }), _jsx("div", { className: `text-[12px] leading-none ${text[theme]}`, children: titles.subtitle })] })] }));
+}

package/card/template/ProgressCard/index.d.ts

@@ -0,0 +1,7 @@
+import LG from "./Large";
+import SM from "./Small";
+declare const ProgressCard: {
+    LG: typeof LG;
+    SM: typeof SM;
+};
+export default ProgressCard;

package/card/template/ProgressCard/index.js

@@ -0,0 +1,7 @@
+import LG from "./Large";
+import SM from "./Small";
+const ProgressCard = {
+    LG,
+    SM,
+};
+export default ProgressCard;

package/card/template/TableCard.js

@@ -4,10 +4,11 @@ function TableCard(props) {
     return _jsx(TableCardDesign, { ...props });
 }
 function Log(props) {
-    return (_jsx(TableCardDesign, { dataField: props.dataField, dataSet: props.dataSet, options: {
-            ...props.options,
+    return (_jsx(TableCardDesign, { dataField: props.dataField, dataSet: props.dataSet, option: {
+            ...props.option,
+            height: "md",
             rowHeight: "h-5",
-            onClick: props.options?.onClick,
+            onClick: props.option?.onClick,
             text: "text-white",
             padding: "p-7.5",
             noHeader: true,

package/globals.css

@@ -65,11 +65,12 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 .box-shadow {
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
 }
-
-.box-shadow-sm {
+.box-shadow-md {
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
 }
-
+.box-shadow-sm {
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
+}
 .border-gradient-green-to-red {
 }
 

package/interface/Action.d.ts

@@ -1,5 +1,6 @@
-import { HTMLLabelElement } from "./HTMLElement";
-import { DataField, OnClick } from "./Property";
+import { LabelWidget } from "./widget";
+import { DataField, OnClick, Size } from "./Property";
+import { Color } from "./Color";
 export interface ActionEvent {
     event: string;
     type: "view" | "modal";
@@ -14,22 +15,15 @@ export interface ShowAction {
     event: string;
     isVisible: boolean;
 }
-export interface ShowProps {
-    actions?: Show[];
-    children: React.ReactNode;
-}
-export interface ReplaceProps {
-    actions?: Replace[];
-    children?: React.ReactNode;
-}
-export interface EventsProps {
-    replaces?: Action<boolean | string | null | undefined>[];
-    shows?: Action<boolean | string>[];
+export interface ActionProps {
+    replaces?: Replace[];
+    shows?: Show[];
 }
 export interface DataFieldProps<T> {
     id: string;
     dataField?: DataField<T>;
-    options?: {
+    option?: {
+        height?: Size;
         position?: string;
         padding?: string;
     };
@@ -38,9 +32,9 @@ export interface RowProps<T> {
     item: T;
     dataField?: DataField<T>;
     onClick?: OnClick<T>;
-    buttons?: HTMLLabelElement[];
-    flag?: boolean;
-    options?: {
+    buttons?: LabelWidget[];
+    dot?: Color;
+    option?: {
         height?: string;
         size?: string;
         padding?: string;

package/interface/Board.d.ts

@@ -1,13 +1,14 @@
 import { DataField, DataSet, Size, Titles } from "./Property";
-import { EventsProps } from "./Action";
-import { HTMLInput, HTMLLabelElement, HTMLSelectElement } from "./HTMLElement";
-interface OptionsProps {
+import { ActionProps } from "./Action";
+import { InputWidget, LabelWidget, SelectWidget } from "./widget";
+interface BoardOption {
     className?: string;
     width?: Size;
     height?: Size;
     color?: string;
     background?: string;
     border?: string;
+    boundary?: string;
     isRounded?: boolean;
     noPadding?: boolean;
     noMobile?: boolean;
@@ -15,25 +16,23 @@ interface OptionsProps {
 export interface BoardProps<B> {
     header?: BoardHeaderProps<B>;
     children?: React.ReactNode;
-    action?: EventsProps;
-    options?: OptionsProps;
+    action?: ActionProps;
+    option?: BoardOption;
     debug?: string;
-    buttons?: HTMLLabelElement[];
+    buttons?: LabelWidget[];
 }
 export interface BoardHeaderProps<B> {
     titles?: Omit<Titles, "subtitle"> & {
         icon?: string;
     };
     tag?: {
-        selects?: HTMLSelectElement<B>[];
-        inputs?: HTMLInput[];
+        selects?: SelectWidget<B>[];
+        inputs?: InputWidget[];
     };
-    options?: {
-        titleBorder?: string;
-        colors?: {
-            bgColor?: string;
-            textColor?: string;
-        };
+    option?: {
+        background?: string;
+        text?: string;
+        boundary?: string;
     };
 }
 export interface CanvasBoardProps<B> extends BoardProps<B> {

package/interface/Card.d.ts

@@ -1,6 +1,7 @@
-import { Button, DataField, DataSet, Disabled, OnClick, Size, State, Titles } from "./Property";
+import { Button, DataField, DataSet, Disabled, OnClick, Size, State, Step, Titles } from "./Property";
+import { Theme } from "./Theme";
 import { Flexify } from "./UtilityType";
-interface CardOptions {
+interface CardOption {
     className?: string;
     boundary?: string;
     rounded?: string;
@@ -19,7 +20,7 @@ interface CardOptions {
 export interface CardProps {
     children: React.ReactNode;
     header?: React.ReactNode;
-    options?: CardOptions;
+    option?: CardOption;
     debug?: string;
 }
 export interface ChartCardProps extends Omit<CardProps, "children"> {
@@ -59,7 +60,7 @@ interface NavCardImage {
 }
 export interface NavCardProps extends Omit<CardProps, "children"> {
     titles: Titles;
-    options?: CardOptions & {
+    option?: CardOption & {
         buttonInLay?: ButtonInLay;
         image?: NavCardImage;
     };
@@ -77,9 +78,9 @@ export interface InfoCardProps extends CardProps {
     topRight?: React.ReactNode;
     button?: Button;
     image?: string;
-    options?: {
+    option?: {
         titleBorder?: string;
-    } & CardOptions;
+    } & CardOption;
 }
 export interface InfoCardExamDataREGProps extends Omit<InfoCardProps, "children"> {
     data?: {
@@ -114,7 +115,7 @@ export interface AddCardProps extends Omit<CardProps, "children"> {
 export interface TableCardProps<T> extends Omit<CardProps, "children"> {
     dataSet: Flexify<DataSet<T>, "renderItem">;
     dataField?: DataField<T>;
-    options?: CardOptions & {
+    option?: CardOption & {
         className?: string;
         limit?: number;
         rowHeight?: string;
@@ -131,4 +132,9 @@ export interface RollCardProps extends CardProps {
     isFixed?: boolean;
     disabled?: [boolean, OnClick];
 }
+export interface ProgressCardProps {
+    titles: Titles;
+    steps: Step[];
+    theme?: Theme;
+}
 export {};

package/interface/Color.d.ts

@@ -0,0 +1,3 @@
+export type Color = "red" | "green" | "blue" | "yellow";
+declare const ColorSet: Record<Color, string>;
+export { ColorSet };

package/interface/Color.js

@@ -0,0 +1,7 @@
+const ColorSet = {
+    red: "bg-red-500",
+    green: "bg-green-500",
+    blue: "bg-blue-500",
+    yellow: "bg-yellow-500",
+};
+export { ColorSet };

package/interface/Layout.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { OnClick, State } from "./Property";
 import { ShowAction } from "./Action";
 interface Notification {
@@ -29,10 +30,10 @@ export interface MenuProps {
 }
 export interface DashboardHeaderProps {
     title: string;
-    logo?: React.ReactNode;
+    logo?: ReactNode;
     notification: NotificationProps;
     menu?: MenuProps;
-    options?: {
+    option?: {
         background?: string;
         text?: string;
         className?: string;
@@ -40,9 +41,9 @@ export interface DashboardHeaderProps {
 }
 export interface DashboardProps {
     header: DashboardHeaderProps;
-    navigations: React.ReactNode[];
-    children: React.ReactNode;
-    options?: {
+    navigations: ReactNode[];
+    children: ReactNode;
+    option?: {
         background?: string;
     };
 }

package/interface/Modal.d.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from "react";
 import { Button, Scripts, Size, State, Titles } from "./Property";
 import { ShowAction } from "./Action";
-interface Options {
+interface Option {
     width: Size;
     height: Size;
     padding: boolean;
@@ -12,10 +13,10 @@ interface Options {
 }
 interface ModalProps {
     titles: Titles;
-    children: React.ReactNode;
+    children: ReactNode;
     showAction?: ShowAction;
     className?: string;
-    options?: Partial<Options>;
+    option?: Partial<Option>;
     debug?: string;
 }
 interface ConfirmModalProps extends ModalProps {
@@ -23,7 +24,7 @@ interface ConfirmModalProps extends ModalProps {
 }
 interface AlertModalProps extends Omit<ModalProps, "children"> {
     scripts: Scripts;
-    options?: {
+    option?: {
         buttons?: Button[];
     };
 }

package/interface/Overlay.d.ts

@@ -1,4 +1,4 @@
-import { HTMLElementFrame, HTMLLabelElement } from "./HTMLElement";
+import { WidgetFrame, LabelWidget } from "./widget";
 import { Titles } from "./Property";
 import { ShowAction } from "./Action";
 export interface OverlayProps {
@@ -9,6 +9,6 @@ export interface OverlayProps {
 export interface InfoOverlayProps extends OverlayProps {
 }
 export interface ManageOverlayProps extends OverlayProps {
-    elements?: HTMLElementFrame[];
-    buttons?: HTMLLabelElement[];
+    elements?: WidgetFrame[];
+    buttons?: LabelWidget[];
 }

package/interface/Property.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
 import { Replace } from "./Action";
-import { HTMLLabelElement } from "./HTMLElement";
+import { LabelWidget } from "./widget";
 /**
  * State type for the React component
  * @template T
@@ -27,7 +27,7 @@ export type State<T> = [T, StateAction<T>];
  * @property {"full"} full - Full size
  */
 export type ImageSize = "sub" | "full";
-export type Size = "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
+export type Size = "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "auto";
 /**
  * Image size type
  * @enum {string}
@@ -37,7 +37,7 @@ export type Size = "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2
  * @property {"full"} full - Full size
  */
 export type OnClick<Request = unknown, Response = unknown> = (prop?: Request) => Response | ((prop?: Request) => Promise<Response>);
-export interface Button extends HTMLLabelElement {
+export interface Button extends LabelWidget {
 }
 export type FileRead = string | ArrayBuffer | null;
 export type Disabled = boolean | OnClick;
@@ -54,7 +54,7 @@ export type Titles = {
     subtitleColor?: string;
 };
 export type DataSet<T = any> = {
-    items?: T[];
+    items: T[];
     renderItem: (item: T, index?: number) => React.ReactNode;
     titles?: Titles;
     interaction?: React.ReactNode;
@@ -83,4 +83,5 @@ export interface Order {
     orderBy: string;
     orderHow: "asc" | "desc" | "";
 }
+export type Step = [Titles, boolean];
 export {};

package/interface/Shelf.d.ts

@@ -1,6 +1,6 @@
 import { Button, Titles } from "./Property";
-import { EventsProps } from "./Action";
-interface Options<T> {
+import { ActionProps } from "./Action";
+interface Option<T> {
     titleSize?: string;
     subtitleSize?: string;
     overflowScroll?: boolean;
@@ -11,12 +11,12 @@ interface Options<T> {
 }
 export interface ShelfProps<T> {
     children: React.ReactNode;
-    action?: EventsProps & {
+    action?: ActionProps & {
         tabs?: Button[];
     };
     titles?: Titles;
     debug?: string;
     className?: string;
-    options?: Options<T>;
+    option?: Option<T>;
 }
 export {};

package/interface/index.d.ts

@@ -1,9 +1,9 @@
 export * from "./Action";
 export * from "./Card";
-export * from "./HTMLElement";
+export * from "./Color";
+export * from "./widget";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";
 export * from "./Theme";
 export * from "./Shelf";
-export * from "./widget";

package/interface/index.js

@@ -1,9 +1,9 @@
 export * from "./Action";
 export * from "./Card";
-export * from "./HTMLElement";
+export * from "./Color";
+export * from "./widget";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";
 export * from "./Theme";
 export * from "./Shelf";
-export * from "./widget";

package/interface/widget/Carousel.d.ts

@@ -1,6 +1,6 @@
 import { Titles } from "../Property";
 export type { CarouselContent };
-interface Options {
+interface Option {
     background: string;
     text: string;
 }
@@ -8,5 +8,5 @@ interface CarouselContent<T> {
     tag: T;
     titles: Titles;
     image?: string;
-    options?: Partial<Options>;
+    option?: Partial<Option>;
 }

package/interface/widget/Switch.d.ts

@@ -7,13 +7,13 @@ export type Display = Record<string, {
     title: string;
     icon?: string;
 }>;
-interface Options {
+interface Option {
     size?: Size;
     text?: string;
     className?: string;
 }
 export interface SwitchProps<T> extends Switch<T> {
     display?: Display;
-    options?: Options;
+    option?: Option;
 }
 export {};

package/interface/widget/index.d.ts

@@ -1,2 +1,57 @@
+import { Color } from "../Color";
+import { Disabled, OnClick, Size, State } from "../Property";
 export * from "./Carousel";
 export * from "./Switch";
+export declare const WidgetType: {
+    readonly TEXT: "text";
+    readonly BUTTON: "button";
+    readonly INPUT: "input";
+    readonly SELECT: "select";
+    readonly TOGGLE: "toggle";
+};
+export type WidgetType = (typeof WidgetType)[keyof typeof WidgetType];
+export interface Widget {
+    option?: {
+        className?: string;
+        width?: Size;
+        height?: Size;
+        background?: string;
+        text?: string;
+        disabled?: Disabled;
+        rounded?: string;
+    };
+}
+export interface LabelWidget extends Widget {
+    title: string;
+    hoverState?: State<boolean>;
+    onClick?: OnClick;
+}
+export type SelectOption<T> = [T, string];
+export interface SelectWidget<T> extends Widget {
+    state: State<T>;
+    selectOptions?: SelectOption<T>[];
+    placeholder?: string;
+}
+type InputType = "text" | "password" | "date" | "email" | "phone" | "number";
+export interface InputWidget extends Widget {
+    state: State<string> | State<string | undefined>;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    placeholder?: string;
+    flag?: boolean;
+    type?: InputType;
+    label?: LabelWidget;
+}
+export interface CheckBoxWidget extends Widget {
+    state: State<boolean>;
+    labels: string;
+    color: Color;
+}
+export interface WidgetFrame {
+    title: string;
+    type: WidgetType;
+    state: State<any>;
+    selectOptions?: SelectOption<string | number>[];
+    labels?: [string | boolean, string][];
+    disabled?: Disabled;
+    onClick?: OnClick;
+}