@edu-tosel/design 1.0.95 → 1.0.97

package/card/design/Card.design.d.ts

@@ -1,2 +1,2 @@
 import { CardProps } from "../../interface/Card";
-export default function CardDesign({ header, children, option, debug, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export default function CardDesign({ header, disabled, children, option, debug, }: CardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/Card.design.js

@@ -1,6 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, isDebug } from "../../util";
 import { useActionStore } from "../../store";
+import { Action } from "../../layout";
+import { Obstacle } from "../../widget";
 const widthSize = {
     "4xs": "w-15",
     "3xs": "w-40",
@@ -27,10 +29,13 @@ const heightSize = {
     "2xl": "h-127.5", // 510px
     "3xl": "h-138.5", // 554px
     full: "h-full", // 100%
-    auto: "h-auto min-h-80", // 100%
+    auto: "h-auto p-5", // 100%
 };
-export default function CardDesign({ header, children, option, debug, }) {
+export default function CardDesign({ header, disabled, children, option, debug, }) {
     const { setIsOwn } = useActionStore();
+    const { isDisabled, obstacle, disabledAction } = disabled ?? {
+        isDisabled: false,
+    };
     const { className, boundary, rounded, height, width, text, background, onClick, onMouse, overflow, } = option ?? {};
     const container = {
         positions: "relative",
@@ -49,5 +54,5 @@ export default function CardDesign({ header, children, option, debug, }) {
         overflow,
         className,
     };
-    return (_jsxs("div", { onMouseEnter: onMouse ? () => onMouse[1](true) : () => { }, onMouseLeave: onMouse ? () => onMouse[1](false) : () => { }, className: cn(container), children: [header && _jsx(_Fragment, { children: header }), _jsx("div", { onClick: onClick && onClick, className: cn(body), children: children })] }));
+    return (_jsx("div", { onMouseEnter: onMouse ? () => onMouse[1](true) : () => { }, onMouseLeave: onMouse ? () => onMouse[1](false) : () => { }, className: cn(container), children: _jsxs(Action.Show, { actions: [[isDisabled, obstacle ?? _jsx(Obstacle.Blur, {})]], children: [header && _jsx(_Fragment, { children: header }), _jsx("div", { onClick: onClick && onClick, className: cn(body), children: children })] }) }));
 }

package/card/design/ControlCard.design.d.ts

@@ -0,0 +1,2 @@
+import { ControlCardProps } from "../../interface";
+export default function ControlCardDesign<T>({ contents, option, }: ControlCardProps<T>): import("react/jsx-runtime").JSX.Element;

package/card/design/ControlCard.design.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CardDesign from "./Card.design";
+import { cn } from "../../util";
+import { LineBreaks } from "../../text";
+import { Label, Select } from "../../widget";
+export default function ControlCardDesign({ contents, option, }) {
+    return (_jsx(CardDesign, { option: {
+            className: "flex flex-col gap-y-5",
+            width: "lg",
+            height: "auto",
+            ...option,
+        }, children: contents.map((content) => (_jsx(ContentBox, { ...content }, content.titles.title))) }));
+}
+function ContentBox({ titles, widget }) {
+    const { title, subtitle, titleColor, icon } = titles;
+    const container = {
+        displays: "flex justify-between",
+    };
+    const titleBox = {
+        displays: "flex",
+        sizes: "h-6",
+        fonts: "font-pretendard-bold",
+        color: titleColor ?? "text-green-dark",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-x-3", children: [_jsxs("div", { className: "flex gap-x-3 items-start", children: [icon && _jsx("img", { src: icon, width: 24 }), _jsx("div", { className: cn(titleBox), children: title })] }), _jsx(LineBreaks, { texts: subtitle, className: "mt-0.5" })] }), widget && _jsx(WidgetOption, { ...widget })] }));
+}
+function WidgetOption({ type, data }) {
+    if (type === "button")
+        return (_jsx(Label.Button, { ...data, option: {
+                width: "3xs",
+                height: "3xs",
+                text: "text-xs",
+            } }));
+    if (type === "selectSwitch")
+        return (_jsx(Select.Switch, { ...data, option: {
+                size: "sm",
+            } }));
+    if (type === "selectToggle")
+        return _jsx(Select.Toggle, { ...data });
+    return null;
+}

package/card/design/CustomCard.design.d.ts

@@ -1,2 +1,2 @@
 import { CustomCardProps } from "../../interface";
-export default function CustomCardDesign({ titles, option, children, }: CustomCardProps): import("react/jsx-runtime").JSX.Element;
+export default function CustomCardDesign({ titles, disabled, option, children, }: CustomCardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/CustomCard.design.js

@@ -1,23 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../util";
 import CardDesign from "./Card.design";
-export default function CustomCardDesign({ titles, option, children, }) {
-    const titleBox = {
-        positions: "relative z-10",
-        displays: "flex flex-col gap-3",
-    };
-    const titleStyle = {
-        fonts: "font-pretendard-bold leading-tight text-[16px]",
-        styles: titles.titleColor,
-    };
-    const subtitleStyle = {
-        fonts: "font-pretendard-medium leading-tight text-[12px]",
-        styles: titles.subtitleColor,
-    };
-    return (_jsxs(CardDesign, { option: {
-            ...option,
-            width: option?.width ?? "lg",
-            height: option?.height ?? "4xs",
-            className: option?.className ?? "p-5",
-        }, children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: cn(titleStyle), children: titles.title }), _jsx("div", { className: cn(subtitleStyle), children: titles.subtitle })] }), children ?? null] }));
+import TitleBox from "./widget/TitleBox.design";
+export default function CustomCardDesign({ titles, disabled, option, children, }) {
+    return (_jsxs("div", { children: [_jsx(TitleBox, { titles: titles }), _jsx(CardDesign, { disabled: disabled, option: {
+                    ...option,
+                    width: option?.width ?? "lg",
+                    height: option?.height ?? "auto",
+                    className: option?.className,
+                }, children: children ?? null })] }));
 }

package/card/design/ReceiptCard.design.d.ts

@@ -0,0 +1 @@
+export default function ReceiptCard(): import("react/jsx-runtime").JSX.Element;

package/card/design/ReceiptCard.design.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CardDesign from "./Card.design";
+export default function ReceiptCard() {
+    return (_jsx(CardDesign, { children: _jsx("div", {}) }));
+}

package/card/design/SubmitCard.design.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { LabelWidget } from "../../interface";
+export interface SubmitCardProps {
+    children?: ReactNode;
+    button?: LabelWidget;
+}
+export default function SubmitCardDesign({ children, button, }: SubmitCardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/SubmitCard.design.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CardDesign from "./Card.design";
+import { Label } from "../../widget";
+export default function SubmitCardDesign({ children, button, }) {
+    return (_jsxs(CardDesign, { option: {
+            width: "lg",
+            height: "lg",
+            className: "p-5",
+        }, children: [children, button && (_jsx(Label.Button, { ...button, option: {
+                    className: "absolute bottom-5 right-5",
+                } }))] }));
+}

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

@@ -1,2 +1,2 @@
 import { TableCardProps } from "../../interface";
-export default function TableCardDesign<T>({ dataSet, dataField, option, }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function TableCardDesign<T>({ header, dataSet, dataField, option, }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;

package/card/design/TableCard.design.js

@@ -6,16 +6,21 @@ import Card from "./Card.design";
 import { DataField, Action, Row, Lock } from "../..";
 import { Obstacle } from "../..";
 import { v4 } from "uuid";
-export default function TableCardDesign({ dataSet, dataField, option, }) {
+export default function TableCardDesign({ header, dataSet, dataField, option, }) {
     const { width, height, padding, boundary, isDisabled, disabledScript } = option ?? {};
     const { order } = useActionStore();
     const id = useId();
     const orders = order[id] ?? [];
     const container = {
         className: option?.className,
-        paddings: padding ?? "pb-10",
+        paddings: !header ? "pb-10" : "pb-25",
     };
-    return (_jsx(Card, { header: !option?.noHeader && _jsx(DataField.Card, { id: id, dataField: dataField }), option: {
+    const headerBox = {
+        displays: "flex items-center justify-center",
+        sizes: "w-full h-15",
+        styles: "overflow-hidden",
+    };
+    return (_jsx(Card, { header: !option?.noHeader && (_jsxs("div", { children: [_jsx(DataField.Card, { id: id, dataField: dataField }), header && _jsx("div", { className: cn(headerBox), children: header })] })), option: {
             boundary,
             className: cn(container),
             width: width ?? "lg",

package/card/design/widget/TitleBox.design.d.ts

@@ -0,0 +1,4 @@
+import { Titles } from "../../../interface";
+export default function TitleBox({ titles }: {
+    titles?: Titles;
+}): import("react/jsx-runtime").JSX.Element | null;

package/card/design/widget/TitleBox.design.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function TitleBox({ titles }) {
+    const { title, titleColor } = titles ?? {};
+    const titleBox = {
+        displays: "flex items-center",
+        sizes: "w-full h-[44px]",
+        texts: "text-[20px]",
+        fonts: "font-pretendard-bold leading-tight",
+        boundaries: "pl-5",
+        styles: titleColor,
+    };
+    if (!titles)
+        return null;
+    return _jsx("div", { className: cn(titleBox), children: title });
+}

package/card/index.d.ts

@@ -1,9 +1,11 @@
 export { default as AddCard } from "./template/AddCard";
 export { default as ChartCard } from "./template/ChartCard";
 export { default as ConfirmCard } from "./template/ConfirmCard";
+export { default as ControlCard } from "./template/ControlCard";
 export { default as CustomCard } from "./template/CustomCard";
 export { default as InfoCard } from "./template/InfoCard";
 export { default as NavCard } from "./template/NavCard";
 export { default as ProgressCard } from "./template/ProgressCard";
 export { default as RollCard } from "./template/RollCard";
 export { default as TableCard } from "./template/TableCard";
+export { default as SubmitCard } from "./template/SubmitCard";

package/card/index.js

@@ -1,9 +1,11 @@
 export { default as AddCard } from "./template/AddCard";
 export { default as ChartCard } from "./template/ChartCard";
 export { default as ConfirmCard } from "./template/ConfirmCard";
+export { default as ControlCard } from "./template/ControlCard";
 export { default as CustomCard } from "./template/CustomCard";
 export { default as InfoCard } from "./template/InfoCard";
 export { default as NavCard } from "./template/NavCard";
 export { default as ProgressCard } from "./template/ProgressCard";
 export { default as RollCard } from "./template/RollCard";
 export { default as TableCard } from "./template/TableCard";
+export { default as SubmitCard } from "./template/SubmitCard";

package/card/template/ControlCard.d.ts

@@ -0,0 +1,4 @@
+import { ControlCardProps, Titles } from "../../interface";
+export default function ControlCard<T>(props: ControlCardProps<T> & {
+    titles?: Titles;
+}): import("react/jsx-runtime").JSX.Element;

package/card/template/ControlCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ControlCardDesign from "../design/ControlCard.design";
+import TitleBox from "../design/widget/TitleBox.design";
+export default function ControlCard(props) {
+    return (_jsxs("div", { children: [_jsx(TitleBox, { titles: props.titles }), _jsx(ControlCardDesign, { ...props })] }));
+}

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

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

package/card/template/ProgressCard/Small.js

@@ -10,7 +10,8 @@ const text = {
     green: "text-green-dark",
     blue: "text-blue-navy",
 };
-export default function ProgressCardSmall({ titles, displays, checks, nowFocus, theme = "green", }) {
+export default function ProgressCardSmall({ titles, displays, checks, nowFocus, theme = "green", option, }) {
+    const { size = "md" } = option ?? {};
     const progressBox = {
         positions: "absolute top-2.5 left-2.5",
         displays: "flex",
@@ -25,13 +26,21 @@ export default function ProgressCardSmall({ titles, displays, checks, nowFocus,
     });
     const titleBox = {
         positions: "absolute top-2.5 right-2.5",
-        sizes: "max-w-32.5 w-full h-16",
-        displays: "flex flex-col items-end gap-y-3",
+        sizes: "max-w-40 w-full h-16",
+        displays: "flex flex-col items-end",
         backgrounds: nowFocus === true ? bgLight[theme ?? "green"] : "bg-transparent",
-        boundaries: "rounded-[10px] pt-2 pr-3.5",
+        boundaries: "rounded-[10px]",
+        styles: titles.size === "md"
+            ? "pt-2 pr-3.5 gap-y-3"
+            : "justify-center gap-y-1.5 pr-2",
+    };
+    const titleStyle = {
+        texts: "leading-none",
+        sizes: titles.size === "sm" ? "text-[12px]" : "text-[20px] font-pretendard-bold",
+        styles: text[theme],
     };
     return (_jsxs(CardDesign, { option: {
-            width: "md",
+            width: size ?? "md",
             height: "5xs",
-        }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title, subtitle }, index) => (_jsxs("div", { className: cn(stepBox(index === nowFocus)), 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: checks[index], size: 25, theme: "green" })] }), _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 })] })] }));
+        }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title, subtitle }, index) => (_jsxs("div", { className: cn(stepBox(index === nowFocus)), 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: checks[index], size: 25, theme: "green" })] }), _jsx("div", { className: `text-[12px] ${text[theme]}`, children: subtitle })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: cn(titleStyle), children: titles.title }), _jsx("div", { className: `text-[12px] leading-none ${text[theme]}`, children: titles.subtitle })] })] }));
 }

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

@@ -0,0 +1,2 @@
+import { SubmitCardProps } from "../../design/SubmitCard.design";
+export default function SubmitCard(props: SubmitCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/SubmitCard/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SubmitCardDesign from "../../design/SubmitCard.design";
+export default function SubmitCard(props) {
+    return _jsx(SubmitCardDesign, { ...props });
+}

package/card/template/TableCard.d.ts

@@ -1,5 +1,7 @@
-import { TableCardProps } from "../../interface";
-declare function TableCard<T>(props: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
+import { TableCardProps, Titles } from "../../interface";
+declare function TableCard<T>(props: TableCardProps<T> & {
+    titles?: Titles;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace TableCard {
     var Log: <T>(props: TableCardProps<T>) => import("react/jsx-runtime").JSX.Element;
 }

package/card/template/TableCard.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import TableCardDesign from "../design/TableCard.design";
+import TitleBox from "../design/widget/TitleBox.design";
 function TableCard(props) {
-    return _jsx(TableCardDesign, { ...props });
+    return (_jsxs("div", { children: [_jsx(TitleBox, { titles: props.titles }), _jsx(TableCardDesign, { ...props })] }));
 }
 function Log(props) {
     return (_jsx(TableCardDesign, { dataField: props.dataField, dataSet: props.dataSet, option: {

package/interface/Card.d.ts

@@ -2,6 +2,8 @@ import { Button, Disabled, OnClick, Size, State, Titles } from "./Property";
 import { DataSet, DataField } from "./Data";
 import { Theme } from "./Theme";
 import { Flexify } from "./UtilityType";
+import { ButtonWidgetOption, SelectSwitchWidgetOption, SelectToggleWidgetOption } from "./widget/WidgetOption";
+import { ReactNode } from "react";
 interface CardOption {
     className?: string;
     boundary?: string;
@@ -19,10 +21,15 @@ interface CardOption {
     noShadow?: boolean;
 }
 export interface CardProps {
-    children: React.ReactNode;
-    header?: React.ReactNode;
+    children: ReactNode;
+    header?: ReactNode;
     option?: CardOption;
     debug?: string;
+    disabled?: {
+        isDisabled: boolean;
+        obstacle?: ReactNode;
+        disabledAction?: OnClick;
+    };
 }
 export interface ChartCardProps extends Omit<CardProps, "children"> {
     data: Record<string, string | number>[];
@@ -46,7 +53,7 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
     };
 }
 export interface CustomCardProps extends Flexify<CardProps, "children"> {
-    titles: Titles;
+    titles?: Titles;
 }
 export interface ButtonInLay {
     title: string;
@@ -79,7 +86,7 @@ export interface NavCardButtonInLayProps extends NavCardProps {
 }
 export interface InfoCardProps extends CardProps {
     titles: Titles;
-    topRight?: React.ReactNode;
+    topRight?: ReactNode;
     button?: Button;
     image?: string;
     option?: {
@@ -130,7 +137,7 @@ export interface TableCardProps<T> extends Omit<CardProps, "children"> {
         disabledScript?: string;
     };
 }
-export interface RollCardProps extends CardProps {
+export interface RollCardProps extends Omit<CardProps, "disabled"> {
     titles: Titles & {
         icon?: string;
     };
@@ -144,5 +151,17 @@ export interface ProgressCardProps {
     nowFocus?: number | boolean;
     displays: Titles[];
     theme?: Theme;
+    option?: {
+        size?: Size;
+    };
+}
+export type ControlContentWidgetOption<T> = ButtonWidgetOption | SelectSwitchWidgetOption<T> | SelectToggleWidgetOption<T>;
+export interface ControlContent<T> {
+    titles: Titles;
+    widget?: ControlContentWidgetOption<T>;
+}
+export interface ControlCardProps<T> {
+    contents: ControlContent<T>[];
+    option?: CardOption;
 }
 export {};

package/interface/Property.d.ts

@@ -58,6 +58,8 @@ export type Titles = {
     color?: string;
     titleColor?: string;
     subtitleColor?: string;
+    size?: Size;
+    icon?: string;
 };
 export interface Log<K extends string, T extends string | number> {
     prints: K[];

package/interface/TextBox.d.ts

@@ -0,0 +1,20 @@
+import { Size, Titles } from "./Property";
+export interface TextBoxDesignProps {
+    titles: Titles;
+    option?: {
+        isCenter?: boolean;
+        size?: Size;
+        className?: string;
+    };
+    children?: React.ReactNode;
+}
+export interface TextBoxProps extends Omit<TextBoxDesignProps, "children"> {
+}
+export interface TextBoxWithImageProps extends TextBoxProps {
+    image: {
+        src: string;
+        width?: string;
+        height?: string;
+        className?: string;
+    };
+}

package/interface/TextBox.js

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

package/interface/index.d.ts

@@ -9,3 +9,4 @@ export * from "./Overlay";
 export * from "./Property";
 export * from "./Theme";
 export * from "./Shelf";
+export * from "./TextBox";

package/interface/index.js

@@ -9,3 +9,4 @@ export * from "./Overlay";
 export * from "./Property";
 export * from "./Theme";
 export * from "./Shelf";
+export * from "./TextBox";

package/interface/widget/Box.d.ts

@@ -0,0 +1,25 @@
+interface BoxOption {
+    titleColor?: string;
+    background?: string;
+}
+export interface BoxProps {
+    title: string;
+    option?: BoxOption;
+}
+export interface CountBoxProps extends BoxProps {
+    count: number;
+    total?: number;
+    option?: BoxOption & {
+        countColor?: string;
+        totalColor?: string;
+    };
+}
+export interface CountWithScriptBoxProps extends BoxProps {
+    count?: number;
+    script?: string | string[];
+    option?: BoxOption & {
+        countColor?: string;
+        scriptColor?: string;
+    };
+}
+export {};

package/interface/widget/Box.js

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

package/interface/widget/Cluster.d.ts

@@ -0,0 +1,18 @@
+import { BoxProps, CountBoxProps, CountWithScriptBoxProps } from "./Box";
+interface BoxWidgetOption {
+    type: "box";
+    data: BoxProps;
+}
+interface CountBoxWidgetOption {
+    type: "countBox";
+    data: CountBoxProps;
+}
+interface CountWithScriptBoxWidgetOption {
+    type: "countWithScriptBox";
+    data: CountWithScriptBoxProps;
+}
+export type ClusterWidgetOption = BoxWidgetOption | CountBoxWidgetOption | CountWithScriptBoxWidgetOption;
+export interface ClusterProps {
+    widgets: ClusterWidgetOption[][];
+}
+export {};

package/interface/widget/Cluster.js

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

package/interface/widget/Obstacle.d.ts

@@ -1,7 +1,9 @@
+import { ShowAction } from "../Action";
 import { Disabled } from "../Property";
 export interface ObstacleProps {
     disabled?: Disabled;
     children?: React.ReactNode;
+    showAction?: ShowAction;
     option?: {
         position?: string;
         size?: string;

package/interface/widget/Select.d.ts

@@ -49,4 +49,11 @@ export interface SelectPaginationProps<T> {
         className?: string;
     };
 }
+export interface SelectToggleProps<T> {
+    state: State<T>;
+    selectOptions: [SelectOptionInput<T>, SelectOptionInput<T>];
+    option?: {
+        className?: string;
+    };
+}
 export {};

package/interface/widget/WidgetOption.d.ts

@@ -0,0 +1,13 @@
+import { LabelWidget, SelectSwitchProps, SelectToggleProps } from ".";
+export interface ButtonWidgetOption {
+    type: "button";
+    data: LabelWidget;
+}
+export interface SelectSwitchWidgetOption<T> {
+    type: "selectSwitch";
+    data: SelectSwitchProps<T>;
+}
+export interface SelectToggleWidgetOption<T> {
+    type: "selectToggle";
+    data: SelectToggleProps<T>;
+}

package/interface/widget/WidgetOption.js

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

package/interface/widget/index.d.ts

@@ -1,7 +1,9 @@
 import { Color } from "../Color";
 import { Disabled, OnClick, Size, State } from "../Property";
 import { SelectOptionInput } from "./Select";
+export * from "./Box";
 export * from "./Carousel";
+export * from "./Cluster";
 export * from "./Switch";
 export * from "./Select";
 export declare const WidgetType: {
@@ -20,7 +22,7 @@ export interface Widget {
         background?: string;
         text?: string;
         disabled?: Disabled;
-        rounded?: string;
+        boundary?: string;
         isDark?: boolean;
     };
 }

package/interface/widget/index.js

@@ -1,4 +1,6 @@
+export * from "./Box";
 export * from "./Carousel";
+export * from "./Cluster";
 export * from "./Switch";
 export * from "./Select";
 export const WidgetType = {

package/layout/design/TextBox.design.d.ts

@@ -0,0 +1,2 @@
+import { TextBoxDesignProps } from "../../interface";
+export default function TextBoxDesign({ titles, children, option, }: TextBoxDesignProps): import("react/jsx-runtime").JSX.Element;

package/layout/design/TextBox.design.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "../../text";
+import { cn } from "../../util";
+const titleSize = {
+    md: "text-[16px]",
+    lg: "text-[20px]",
+};
+const subtitleSize = {
+    md: "text-[12px]",
+    lg: "text-[16px]",
+};
+export default function TextBoxDesign({ titles, children, option, }) {
+    const { title, subtitle, titleColor, color, subtitleColor } = titles;
+    const { size, isCenter, className } = option ?? {};
+    console.log(isCenter);
+    const container = {
+        displays: "flex flex-col",
+        center: isCenter && "items-center",
+        styles: color,
+        className: className ?? "gap-y-2",
+    };
+    const titleBox = {
+        colors: titleColor ?? color ?? "text-gray-dark",
+        sizes: titleSize[size ?? "md"],
+        fonts: "font-pretendard-bold",
+        styles: "leading-tight",
+    };
+    const subtitleBox = {
+        colors: subtitleColor ?? color ?? "text-gray-medium",
+        sizes: subtitleSize[size ?? "md"],
+        center: isCenter && "text-center",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(titleBox), children: title }), children, _jsx(LineBreaks, { texts: subtitle, className: cn(subtitleBox) })] }));
+}

package/layout/index.d.ts

@@ -8,3 +8,4 @@ export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
 export { default as Tab } from "./template/Tab";
+export { default as TextBox } from "./template/TextBox";

package/layout/index.js

@@ -8,3 +8,4 @@ export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
 export { default as Tab } from "./template/Tab";
+export { default as TextBox } from "./template/TextBox";

package/layout/template/TextBox.d.ts

@@ -0,0 +1,7 @@
+import { TextBoxProps, TextBoxWithImageProps } from "../../interface";
+declare function TitleBox(props: TextBoxProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TitleBox {
+    var Image: typeof TitleBoxWithImage;
+}
+declare function TitleBoxWithImage({ titles, image, option }: TextBoxWithImageProps): import("react/jsx-runtime").JSX.Element;
+export default TitleBox;

package/layout/template/TextBox.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TextBoxDesign from "../design/TextBox.design";
+function TitleBox(props) {
+    return _jsx(TextBoxDesign, { ...props });
+}
+function TitleBoxWithImage({ titles, image, option }) {
+    return (_jsx(TextBoxDesign, { titles: titles, option: { isCenter: true, size: "lg", className: "gap-y-8", ...option }, children: _jsx("img", { src: image.src, width: image.width, height: image.height, className: image.className }) }));
+}
+TitleBox.Image = TitleBoxWithImage;
+export default TitleBox;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.95",
+  "version": "1.0.97",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.95
+1.0.97

package/widget/design/Label.design.js

@@ -2,24 +2,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Obstacle } from "../..";
 const widthSize = {
+    "3xs": "w-7",
     "2xs": "w-10",
     xs: "w-20",
     sm: "w-22.5",
     md: "w-45",
     lg: "w-50",
+    full: "w-full",
 };
 const heightSize = {
-    "2xs": "h-6.25",
+    "3xs": "h-5.5", // 22px
+    "2xs": "h-6.25", // 25px
     xs: "h-7.5",
     sm: "h-11.25",
     md: "h-12.25",
 };
 export default function LabelDesign({ title, onClick, option, hoverState, }) {
     const [hover, setHover] = hoverState ?? [false, () => { }];
-    const { width, height, text, background, className, disabled } = option ?? {};
+    const { width, height, text, background, className, disabled, boundary } = option ?? {};
     const container = {
         positions: "relative z-10",
         sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
+        className,
     };
     const body = {
         positions: "absolute top-0 left-0",
@@ -30,7 +34,9 @@ export default function LabelDesign({ title, onClick, option, hoverState, }) {
         texts: text ?? "text-gray-dim",
         animation: "duration-500",
         fonts: "font-pretendard-light",
-        styles: height !== "xs" ? "rounded-lgx" : "rounded-md text-xs",
+        styles: height === "xs" || height === "2xs" || height === "3xs"
+            ? "rounded-md text-xs"
+            : "rounded-lgx",
     };
-    return (_jsx("div", { className: className, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: title }), _jsx(Obstacle, { disabled: disabled })] }) }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: title }), _jsx(Obstacle, { disabled: disabled })] }));
 }

package/widget/design/Obstacle.design.d.ts

@@ -1,2 +1,2 @@
 import { ObstacleProps } from "../../interface/widget/Obstacle";
-export default function ObstacleDesign({ disabled, children, option, }: ObstacleProps): false | import("react/jsx-runtime").JSX.Element | undefined;
+export default function ObstacleDesign({ showAction, disabled, children, option, }: ObstacleProps): false | import("react/jsx-runtime").JSX.Element | undefined;

package/widget/design/Obstacle.design.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../util";
-export default function ObstacleDesign({ disabled, children, option, }) {
+export default function ObstacleDesign({ showAction, disabled, children, option, }) {
+    const { isVisible } = showAction ?? {};
     const { position, background, size } = option ?? {};
     const obstacle = {
         default: "absolute z-20",
@@ -9,5 +10,5 @@ export default function ObstacleDesign({ disabled, children, option, }) {
         sizes: "w-full h-full",
         background: background ?? "bg-white/30",
     };
-    return (disabled && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle), children: children })));
+    return ((isVisible || disabled) && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle), children: children })));
 }

package/widget/index.d.ts

@@ -1,4 +1,6 @@
+export { default as Box } from "./template/Box";
 export { default as Input } from "./template/Input";
+export { default as Cluster } from "./template/Cluster";
 export { default as Counter } from "./template/Counter";
 export { default as Select } from "./template/Select";
 export { default as DatePicker } from "./template/DatePicker";

package/widget/index.js

@@ -1,4 +1,6 @@
+export { default as Box } from "./template/Box";
 export { default as Input } from "./template/Input";
+export { default as Cluster } from "./template/Cluster";
 export { default as Counter } from "./template/Counter";
 export { default as Select } from "./template/Select";
 export { default as DatePicker } from "./template/DatePicker";

package/widget/template/Box/CountBox.d.ts

@@ -0,0 +1,2 @@
+import { CountBoxProps } from "../../../interface";
+export default function CountBox({ title, count, total, option, }: CountBoxProps): import("react/jsx-runtime").JSX.Element;

package/widget/template/Box/CountBox.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function CountBox({ title, count, total, option, }) {
+    const { background, titleColor, countColor } = option ?? {};
+    const container = {
+        displays: "flex flex-col gap-y-1",
+        sizes: "flex-1 h-[62px]",
+        boundaries: "rounded-[8px] pt-2.5 pl-2.5",
+        backgrounds: background ?? "bg-gray-light/30",
+    };
+    const titleBox = {
+        texts: "text-xs",
+        color: titleColor ?? "text-gray-medium",
+    };
+    const countBox = {
+        texts: "text-[20px]",
+        color: countColor ?? "text-black",
+    };
+    const totalBox = {
+        color: "text-gray-dark",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(titleBox), children: title }), _jsxs("div", { className: "flex items-end leading-tight font-pretendard-bold", children: [_jsx("div", { className: cn(countBox), children: count }), total && (_jsxs("div", { className: "flex items-end text-xs", children: [_jsx("div", { className: "text-gray-medium", children: "/" }), _jsx("div", { className: cn(totalBox), children: total })] }))] })] }));
+}

package/widget/template/Box/CountWithScript.d.ts

@@ -0,0 +1,2 @@
+import { CountWithScriptBoxProps } from "../../../interface";
+export default function CountWithScriptBox({ title, count, script, option, }: CountWithScriptBoxProps): import("react/jsx-runtime").JSX.Element;

package/widget/template/Box/CountWithScript.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import { LineBreaks } from "../../../text";
+export default function CountWithScriptBox({ title, count, script, option, }) {
+    const { background, countColor, scriptColor } = option ?? {};
+    const container = {
+        displays: "flex justify-between items-start",
+        sizes: "flex-1 h-[75px]",
+        boundaries: "pt-2.5 pl-2.5 pr-[14px] rounded-[8px]",
+        backgrounds: background ?? "bg-gray-light/30",
+    };
+    const countBox = {
+        texts: "text-[20px]",
+        color: countColor ?? "text-black",
+        fonts: "font-pretendard-bold",
+    };
+    const scriptBox = {
+        texts: "text-xs",
+        color: scriptColor ?? "text-gray-medium",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex flex-col gap-y-1.5", children: [_jsx("div", { className: "text-[16px] leading-tight font-pretendard-bold", children: title }), _jsx(LineBreaks, { texts: script, className: cn(scriptBox) })] }), count && _jsx("div", { className: cn(countBox), children: count })] }));
+}

package/widget/template/Box/InfoBox.d.ts

@@ -0,0 +1 @@
+export default function InfoBox(): import("react/jsx-runtime").JSX.Element;

package/widget/template/Box/InfoBox.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function InfoBox() {
+    return _jsx("div", {});
+}

package/widget/template/Box/index.d.ts

@@ -0,0 +1,9 @@
+import { BoxProps } from "../../../interface";
+import CountBox from "./CountBox";
+import CountWithScriptBox from "./CountWithScript";
+declare function Box({ title }: BoxProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Box {
+    var Count: typeof CountBox;
+    var CountWithScript: typeof CountWithScriptBox;
+}
+export default Box;

package/widget/template/Box/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CountBox from "./CountBox";
+import CountWithScriptBox from "./CountWithScript";
+function Box({ title }) {
+    return _jsx("div", { className: "border-2 flex-1 h-16", children: title });
+}
+Box.Count = CountBox;
+Box.CountWithScript = CountWithScriptBox;
+export default Box;

package/widget/template/Cluster/index.d.ts

@@ -0,0 +1,2 @@
+import { ClusterProps } from "../../../interface";
+export default function Cluster({ widgets }: ClusterProps): import("react/jsx-runtime").JSX.Element;

package/widget/template/Cluster/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "../..";
+import { cn } from "../../../util";
+export default function Cluster({ widgets }) {
+    const container = {
+        displays: "flex flex-col gap-y-3",
+        sizes: "w-full",
+    };
+    const body = {
+        displays: "flex gap-x-2.5",
+        sizes: "w-full",
+    };
+    return (_jsx("div", { className: cn(container), children: widgets.map((columns) => (_jsx("div", { className: cn(body), children: columns.map((column, index) => (_jsx(ClusterWidget, { ...column }, index))) }))) }));
+}
+function ClusterWidget({ type, data }) {
+    if (type === "box")
+        return _jsx(Box, { ...data });
+    if (type === "countBox")
+        return _jsx(Box.Count, { ...data });
+    if (type === "countWithScriptBox")
+        return _jsx(Box.CountWithScript, { ...data });
+    return null;
+}

package/widget/template/Select/Switch.js

@@ -2,25 +2,40 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toSelectOption, } from "../../../interface/widget/Select";
 import { cn } from "../../../util";
 const paddingSize = {
+    sm: "p-1",
     md: "p-1.5",
     lg: "p-2.5",
 };
 const widthSize = {
+    sm: "w-auto",
     md: "w-81",
     lg: "w-100",
 };
 const heightSize = {
+    sm: "h-7.5",
     md: "h-10.5",
     lg: "h-20",
 };
 const gapSize = {
+    sm: "gap-x-1",
     md: "gap-x-1.5",
     lg: "gap-x-2.5",
 };
 const textSize = {
+    sm: "text-xs",
     md: "text-sm",
     lg: "text-base",
 };
+const buttonSize = {
+    sm: "w-[29px] h-[22px]",
+    md: "w-7 h-7",
+    lg: "w-12 h-12",
+};
+const boundarySize = {
+    sm: "rounded-[4px]",
+    md: "rounded-full",
+    lg: "rounded-full",
+};
 function SelectSwitch({ state, selectOptions: selectOptionsInput, option, }) {
     const selectOptions = selectOptionsInput.map(toSelectOption);
     const { text, size, className } = option ?? {};
@@ -31,14 +46,16 @@ function SelectSwitch({ state, selectOptions: selectOptionsInput, option, }) {
         sizes: `${widthSize[size ?? "md"]} ${heightSize[size ?? "md"]}`,
         displays: `flex ${gapSize[size ?? "md"]}`,
         paddings: paddingSize[size ?? "md"],
-        styles: "rounded-full bg-gray-light",
+        styles: "bg-gray-light",
+        boundaries: boundarySize[size ?? "md"],
     };
     const button = (flag) => ({
         displays: "flex flex-1 gap-x-3 justify-center items-center",
         backgrounds: flag ? "bg-white" : "bg-transparent",
+        sizes: size === "sm" && buttonSize[size ?? "sm"],
         text,
         textSizes: textSize[size ?? "md"],
-        styles: "rounded-full ",
+        boundaries: boundarySize[size ?? "md"],
     });
     return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(body), children: selectOptions?.map(({ value, icon, title }) => (_jsxs("button", { onClick: () => state[1](value), className: cn(button(value === state[0])), children: [icon && _jsx("img", { src: icon }), _jsx("div", { children: title })] }, String(value)))) }) }));
 }

package/widget/template/Select/Toggle.d.ts

@@ -0,0 +1,2 @@
+import { SelectToggleProps } from "../../../interface";
+export default function SelectToggle<T>({ state, selectOptions: selectOptionsInput, }: SelectToggleProps<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Toggle.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toSelectOption } from "../../../interface";
+import { cn } from "../../../util";
+export default function SelectToggle({ state, selectOptions: selectOptionsInput, }) {
+    const selectOptions = selectOptionsInput?.map(toSelectOption);
+    const [value, setValue] = state;
+    const isOff = value === selectOptions[0].value;
+    const container = {
+        positions: "relative",
+        displays: "flex items-center",
+        sizes: "w-10 h-4.5",
+        backgrounds: isOff ? "bg-crimson-burgundy" : "bg-green-dark",
+        boundaries: "rounded-full p-0.5",
+    };
+    const controller = {
+        positions: "absolute",
+        locations: isOff ? "left-0.5" : "left-[calc(100%-1rem)]",
+        sizes: "w-[14px] h-[14px]",
+        backgrounds: "bg-white",
+        boundaries: "rounded-full",
+        animations: "duration-200",
+    };
+    const toggle = () => {
+        if (value === selectOptions[0].value)
+            return setValue(selectOptions[1].value);
+        return setValue(selectOptions[0].value);
+    };
+    return (_jsx("button", { onClick: toggle, className: cn(container), children: _jsx("div", { className: cn(controller) }) }));
+}

package/widget/template/Select/index.d.ts

@@ -5,6 +5,7 @@ import Handle from "./Handle";
 import Switch from "./Switch";
 import Swipe from "./Swipe";
 import Pagination from "./Pagination";
+import Toggle from "./Toggle";
 declare const Select: typeof _Select & {
     LG: typeof LG;
     Tag: typeof Tag;
@@ -12,5 +13,6 @@ declare const Select: typeof _Select & {
     Switch: typeof Switch;
     Swipe: typeof Swipe;
     Pagination: typeof Pagination;
+    Toggle: typeof Toggle;
 };
 export default Select;

package/widget/template/Select/index.js

@@ -5,6 +5,7 @@ import Handle from "./Handle";
 import Switch from "./Switch";
 import Swipe from "./Swipe";
 import Pagination from "./Pagination";
+import Toggle from "./Toggle";
 const Select = Object.assign(_Select, {
     LG,
     Tag,
@@ -12,5 +13,6 @@ const Select = Object.assign(_Select, {
     Switch,
     Swipe,
     Pagination,
+    Toggle,
 });
 export default Select;