@edu-tosel/design 1.0.61 → 1.0.63

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,5 @@
 import { LabelWidget } from "./widget";
-import { DataField, OnClick } from "./Property";
+import { DataField, OnClick, Size } from "./Property";
 import { Color } from "./Color";
 export interface ActionEvent {
     event: string;
@@ -15,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;
     };
@@ -41,7 +34,7 @@ export interface RowProps<T> {
     onClick?: OnClick<T>;
     buttons?: LabelWidget[];
     dot?: Color;
-    options?: {
+    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 { ActionProps } from "./Action";
 import { InputWidget, LabelWidget, SelectWidget } from "./widget";
-interface OptionsProps {
+interface BoardOption {
     className?: string;
     width?: Size;
     height?: Size;
     color?: string;
     background?: string;
     border?: string;
+    boundary?: string;
     isRounded?: boolean;
     noPadding?: boolean;
     noMobile?: boolean;
@@ -15,8 +16,8 @@ interface OptionsProps {
 export interface BoardProps<B> {
     header?: BoardHeaderProps<B>;
     children?: React.ReactNode;
-    action?: EventsProps;
-    options?: OptionsProps;
+    action?: ActionProps;
+    option?: BoardOption;
     debug?: string;
     buttons?: LabelWidget[];
 }
@@ -28,12 +29,10 @@ export interface BoardHeaderProps<B> {
         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/Layout.d.ts

@@ -33,7 +33,7 @@ export interface DashboardHeaderProps {
     logo?: ReactNode;
     notification: NotificationProps;
     menu?: MenuProps;
-    options?: {
+    option?: {
         background?: string;
         text?: string;
         className?: string;
@@ -43,7 +43,7 @@ export interface DashboardProps {
     header: DashboardHeaderProps;
     navigations: ReactNode[];
     children: ReactNode;
-    options?: {
+    option?: {
         background?: string;
     };
 }

package/interface/Modal.d.ts

@@ -1,7 +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;
@@ -16,7 +16,7 @@ interface ModalProps {
     children: ReactNode;
     showAction?: ShowAction;
     className?: string;
-    options?: Partial<Options>;
+    option?: Partial<Option>;
     debug?: string;
 }
 interface ConfirmModalProps extends ModalProps {
@@ -24,7 +24,7 @@ interface ConfirmModalProps extends ModalProps {
 }
 interface AlertModalProps extends Omit<ModalProps, "children"> {
     scripts: Scripts;
-    options?: {
+    option?: {
         buttons?: Button[];
     };
 }

package/interface/Property.d.ts

@@ -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}
@@ -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/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

@@ -11,7 +11,7 @@ export declare const WidgetType: {
 };
 export type WidgetType = (typeof WidgetType)[keyof typeof WidgetType];
 export interface Widget {
-    options?: {
+    option?: {
         className?: string;
         width?: Size;
         height?: Size;

package/layout/design/DataField.design.d.ts

@@ -1,2 +1,2 @@
 import { DataFieldProps } from "../../interface";
-export default function DataFieldDesign<T extends Record<string, any>>({ id, dataField, options, }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function DataFieldDesign<T extends Record<string, any>>({ id, dataField, option, }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/design/DataField.design.js

@@ -1,14 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { useActionStore } from "../../store";
-export default function DataFieldDesign({ id, dataField, options, }) {
+const heightSize = {
+    sm: "h-10",
+    md: "h-13.75",
+};
+export default function DataFieldDesign({ id, dataField, option, }) {
     const { order, setOrder } = useActionStore();
-    const { padding, position } = options ?? {};
+    const { padding, position, height } = option ?? {};
     const orders = order[id] ?? [];
     const container = {
         positions: position && position,
         displays: "flex items-center",
-        sizes: "w-full h-13.75",
+        sizes: `w-full ${heightSize[height ?? "md"]}`,
         paddings: padding && padding,
         styles: "bg-white box-shadow-sm font-pretendard-bold",
     };

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

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

package/layout/design/Row.design.js

@@ -3,8 +3,8 @@ import { useId } from "react";
 import { ColorSet } from "../../interface";
 import { cn } from "../../util";
 import { Label } from "../../widget";
-export default function RowDesign({ item, dataField, options, onClick, buttons, dot, }) {
-    const { size, padding, text, noHover, className, isPointer } = options ?? {};
+export default function RowDesign({ item, dataField, option, onClick, buttons, dot, }) {
+    const { size, padding, text, noHover, className, isPointer } = option ?? {};
     const id = useId();
     const container = {
         positions: "relative",
@@ -26,9 +26,9 @@ export default function RowDesign({ item, dataField, options, onClick, buttons,
         styles: "rounded-full",
     };
     return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [typeof dot !== "undefined" && _jsx("div", { className: cn(flagBox) }), dataField &&
-                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",
+                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, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
+                        background: option?.background ?? "bg-crimson-dark",
+                        text: option?.text ?? "text-white",
                         width: "xs",
                         height: "xs",
                     } }, id + title))) })] }));

package/layout/design/Shelf.design.d.ts

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

package/layout/design/Shelf.design.js

@@ -1,9 +1,9 @@
 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, }) {
+export default function Shelf({ children, className, option, titles, debug, }) {
     const { title, titleColor } = titles ?? {};
-    const { titleSize, subtitleSize, isSize } = options ?? {};
+    const { titleSize, subtitleSize, isSize } = option ?? {};
     const container = {
         displays: "flex flex-col gap-6",
         sizes: isSize && "w-full h-full lg:h-auto",

package/layout/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Action } from "./template/Action";
 export { default as Home } from "./template/home";
-export * from "./template/Dashboard";
+export * from "./template/dashboard";
 export { default as Promotion } from "./template/Promotion";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";

package/layout/index.js

@@ -1,6 +1,6 @@
 export { default as Action } from "./template/Action";
 export { default as Home } from "./template/home";
-export * from "./template/Dashboard";
+export * from "./template/dashboard";
 export { default as Promotion } from "./template/Promotion";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";

package/layout/template/Action.d.ts

@@ -1,4 +1,13 @@
-import { ReplaceProps, ShowProps } from "../../interface/Action";
+import React from "react";
+import { Replace as _Replace, Show as _Show } from "../../interface";
+interface ShowProps {
+    actions?: _Show[];
+    children: React.ReactNode;
+}
+interface ReplaceProps {
+    actions?: _Replace[];
+    children?: React.ReactNode;
+}
 declare function Show({ actions, children }: ShowProps): import("react/jsx-runtime").JSX.Element;
 declare function Replace({ actions, children }: ReplaceProps): import("react/jsx-runtime").JSX.Element;
 declare const Action: {

package/layout/template/DataField.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataFieldDesign from "../design/DataField.design";
 function Board({ id, dataField }) {
-    return (_jsx(DataFieldDesign, { id: id, dataField: dataField, options: {
+    return (_jsx(DataFieldDesign, { id: id, dataField: dataField, option: {
             position: "fixed top-34 xl:top-0 left-0 xl:relative z-20",
             padding: "px-2 xs:px-4 xl:px-7.5",
         } }));
 }
 function Card({ id, dataField }) {
-    return (_jsx(DataFieldDesign, { id: id, dataField: dataField, options: { padding: "px-2 xs:px-4 xl:px-7.5" } }));
+    return (_jsx(DataFieldDesign, { id: id, dataField: dataField, option: {
+            height: "sm",
+            padding: "px-2 xs:px-4 xl:px-7.5",
+        } }));
 }
 const DataField = {
     Board,