@edu-tosel/design 1.0.65 → 1.0.67

package/asset/SVG.d.ts

@@ -14,6 +14,8 @@ declare const SVG: {
     Close: typeof Close;
     Direction: {
         Right: ({ className }: Direction) => import("react/jsx-runtime").JSX.Element;
+        Asc: () => import("react/jsx-runtime").JSX.Element;
+        Desc: () => import("react/jsx-runtime").JSX.Element;
     };
     Email: typeof Email;
     Icon: {

package/asset/svg/Direction.d.ts

@@ -2,7 +2,11 @@ interface Direction {
     className?: string;
 }
 declare function Right({ className }: Direction): import("react/jsx-runtime").JSX.Element;
+declare function Asc(): import("react/jsx-runtime").JSX.Element;
+declare function Desc(): import("react/jsx-runtime").JSX.Element;
 declare const Direction: {
     Right: typeof Right;
+    Asc: typeof Asc;
+    Desc: typeof Desc;
 };
 export default Direction;

package/asset/svg/Direction.js

@@ -1,8 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 function Right({ className }) {
     return (_jsxs("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z", fill: "#105652", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12.75 15L15.75 12M15.75 12L12.75 9M15.75 12H8.25", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 }
+function Asc() {
+    const id = useId();
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.15859 15.0437C6.7079 15.9134 7.27152 17 8.17239 17H15.8279C16.7282 17 17.2919 15.9134 16.8417 15.0437L13.0145 7.65229C12.5638 6.78257 11.4365 6.78257 10.9858 7.65229L7.15859 15.0437Z", fill: "#105652" }) }, id));
+}
+function Desc() {
+    const id = useId();
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.8414 8.95628C17.2921 8.08657 16.7285 7 15.8276 7L8.1721 7C7.27176 7 6.70813 8.08657 7.15831 8.95628L10.9855 16.3477C11.4362 17.2174 12.5635 17.2174 13.0142 16.3477L16.8414 8.95628Z", fill: "#105652" }) }, id));
+}
 const Direction = {
     Right,
+    Asc,
+    Desc,
 };
 export default Direction;

package/asset/svg/Direction.tsx

@@ -1,3 +1,4 @@
+import { useId } from "react";
 interface Direction {
   className?: string;
 }
@@ -30,7 +31,46 @@ function Right({ className }: Direction) {
   );
 }
 
+function Asc() {
+  const id = useId();
+  return (
+    <svg
+      key={id}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.15859 15.0437C6.7079 15.9134 7.27152 17 8.17239 17H15.8279C16.7282 17 17.2919 15.9134 16.8417 15.0437L13.0145 7.65229C12.5638 6.78257 11.4365 6.78257 10.9858 7.65229L7.15859 15.0437Z"
+        fill="#105652"
+      />
+    </svg>
+  );
+}
+function Desc() {
+  const id = useId();
+  return (
+    <svg
+      key={id}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.8414 8.95628C17.2921 8.08657 16.7285 7 15.8276 7L8.1721 7C7.27176 7 6.70813 8.08657 7.15831 8.95628L10.9855 16.3477C11.4362 17.2174 12.5635 17.2174 13.0142 16.3477L16.8414 8.95628Z"
+        fill="#105652"
+      />
+    </svg>
+  );
+}
+
 const Direction = {
   Right,
+  Asc,
+  Desc,
 };
 export default Direction;

package/card/design/Card.design.js

@@ -15,18 +15,19 @@ const widthSize = {
     auto: "w-auto",
 };
 const heightSize = {
-    "4xs": "h-21",
-    "3xs": "h-30",
-    "2xs": "h-40",
-    xs: "h-45",
-    sm: "h-52.5",
-    md: "h-67.5",
-    lg: "h-112.5",
-    xl: "h-125.5",
-    "2xl": "h-127.5",
-    "3xl": "h-138.5",
-    full: "h-full",
-    auto: "h-auto min-h-80",
+    "5xs": "h-21", // 84px
+    "4xs": "h-30", // 120px
+    "3xs": "h-40", // 160px
+    "2xs": "h-45", // 180px
+    xs: "h-50", // 200px
+    sm: "h-52.5", // 210px
+    md: "h-67.5", // 270px
+    lg: "h-112.5", // 450px
+    xl: "h-125.5", // 502px
+    "2xl": "h-127.5", // 510px
+    "3xl": "h-138.5", // 554px
+    full: "h-full", // 100%
+    auto: "h-auto min-h-80", // 100%
 };
 export default function CardDesign({ header, children, option, debug, }) {
     const { setIsOwn } = useActionStore();

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

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

package/card/design/CustomCard.design.js

@@ -0,0 +1,23 @@
+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] }));
+}

package/card/design/TableCard.design.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { useActionStore } from "../../store";
 import { cn, sortByOrder } from "../../util";
 import Card from "./Card.design";
-import { DataField, Action, Row } from "../..";
+import { DataField, Action, Row, Lock } from "../..";
+import { Obstacle } from "../..";
 export default function TableCardDesign({ dataSet, dataField, option, }) {
-    const { width, height, padding, boundary } = option ?? {};
+    const { width, height, padding, boundary, isDisabled, disabledScript } = option ?? {};
     const { order } = useActionStore();
     const id = useId();
     const orders = order[id] ?? [];
@@ -20,5 +21,7 @@ export default function TableCardDesign({ dataSet, dataField, option, }) {
             height: height ?? "3xl",
             overflow: "overflow-y-scroll overflow-x-hidden",
             noPadding: true,
-        }, children: _jsx(Action.Replace, { actions: dataSet?.replaces, children: sortByOrder({ items: dataSet?.items, orders }).map((item, index) => dataSet.renderItem ? (dataSet.renderItem(item)) : (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, id + index))) }) }));
+        }, children: _jsxs(Action.Replace, { actions: dataSet?.replaces, children: [sortByOrder({ items: dataSet?.items, orders }).map((item, index) => dataSet.renderItem ? (dataSet.renderItem(item)) : (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, id + index))), _jsx(Obstacle, { disabled: isDisabled }), _jsx(Obstacle.Blur, { disabled: isDisabled, option: {
+                        position: "top-10",
+                    }, children: _jsx(Lock, { script: disabledScript }) })] }) }));
 }

package/card/index.d.ts

@@ -1,6 +1,7 @@
 export { default as AddCard } from "./template/AddCard";
 export { default as ChartCard } from "./template/ChartCard";
 export { default as ConfirmCard } from "./template/ConfirmCard";
+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";

package/card/index.js

@@ -1,6 +1,7 @@
 export { default as AddCard } from "./template/AddCard";
 export { default as ChartCard } from "./template/ChartCard";
 export { default as ConfirmCard } from "./template/ConfirmCard";
+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";

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

@@ -4,6 +4,9 @@ interface ConfirmCardProps {
     action?: Omit<ActionProps, "shows">;
     children?: React.ReactNode;
     buttons: [LabelWidget, LabelWidget];
+    option?: {
+        className?: string;
+    };
 }
 export default function ConfirmCard(props: ConfirmCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/card/template/ConfirmCard/index.js

@@ -3,17 +3,17 @@ import { cn } from "../../../util";
 import { LineBreaks, Action, Label } from "../../..";
 import CardDesign from "../../design/Card.design";
 export default function ConfirmCard(props) {
-    const { action } = props ?? {};
+    const { action, option } = props ?? {};
     return (_jsxs(CardDesign, { option: {
             width: "md",
             height: "lg",
             className: "p-5",
-        }, children: [_jsx(Header, { titles: props.titles }), _jsx(Action.Replace, { actions: action?.replaces, children: props.children }), _jsx("div", { className: "absolute bottom-5 left-5 flex justify-between gap-2.5", children: props.buttons.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: { ...option, width: "lg", height: "sm" } }, title))) })] }));
+        }, children: [_jsx(Header, { titles: props.titles }), _jsx("div", { className: option?.className, children: _jsx(Action.Replace, { actions: action?.replaces, children: props.children }) }), _jsx("div", { className: "absolute bottom-5 left-5 flex justify-between gap-2.5", children: props.buttons.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: { ...option, width: "lg", height: "sm" } }, title))) })] }));
 }
 function Header({ titles }) {
     const titleBox = {
         displays: "flex flex-col items-end",
         sizes: "w-full",
     };
-    return (_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx(LineBreaks, { texts: titles.subtitle, className: "mt-5 text-base leading-none text-end font-pretendard-bold" })] }));
+    return (_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx(LineBreaks, { texts: titles.subtitle, className: "mt-5 text-base leading-none text-end font-pretendard-medium" })] }));
 }

package/card/template/CustomCard.d.ts

@@ -0,0 +1,3 @@
+import { CustomCardProps } from "./../../interface";
+declare function CustomCard(props: CustomCardProps): import("react/jsx-runtime").JSX.Element;
+export default CustomCard;

package/card/template/CustomCard.js

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

package/card/template/InfoCard/Academy.d.ts

@@ -13,7 +13,7 @@ interface StudentCardProps extends Omit<InfoCardProps, "titles" | "children"> {
         createdAt: string;
     };
 }
-declare function Academy({ titles, data, buttons }: AcademyCardProps): import("react/jsx-runtime").JSX.Element;
+declare function Academy({ titles, data, buttons, option }: AcademyCardProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Academy {
     var Digital: ({ image, data }: StudentCardProps) => import("react/jsx-runtime").JSX.Element;
 }

package/card/template/InfoCard/Academy.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InfoCardDesign } from "../../design/InfoCard.design";
 import SVG from "../../../asset/SVG";
 import { Label } from "../../../widget";
-function Academy({ titles, data, buttons }) {
+function Academy({ titles, data, buttons, option }) {
     return (_jsx(InfoCardDesign, { titles: titles, option: {
+            ...option,
             titleBorder: "border-green-dark",
             background: "",
-            boundary: "",
-            width: "xs",
-            height: "md",
+            width: option?.width ?? "xs",
+            height: option?.height ?? "md",
         }, children: _jsxs("div", { className: "mt-2.5 flex flex-col gap-2.5", children: [_jsx("div", { className: "w-full", children: data.address }), _jsx("div", { className: "flex gap-2.5", children: buttons.map(({ title, onClick }, index) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
                             background: !index ? "bg-gray-medium" : "bg-green-dark",
                             text: "text-white",

package/card/template/NavCard.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import NavCardDesign from "../design/NavCard.design";
 function Banner({ titles, option }) {
-    return (_jsx(NavCardDesign, { titles: titles, option: { ...option, width: option?.width ?? "xl", height: "sm" } }));
+    return (_jsx(NavCardDesign, { titles: titles, option: {
+            ...option,
+            width: option?.width ?? "xl",
+            height: option?.height ?? "sm",
+        } }));
 }
 function _Button({ titles, onClick, option }) {
     return (_jsx(NavCardDesign, { titles: titles, option: {

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

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

package/card/template/ProgressCard/Large.js

@@ -14,7 +14,7 @@ const text = {
     green: "text-green-dark",
     blue: "text-blue-navy",
 };
-export default function ProgressCardLG({ titles, steps, theme, }) {
+export default function ProgressCardLG({ titles, checks, displays, theme, }) {
     const progressBox = {
         positions: "absolute top-7.5 left-7.5",
         displays: "flex",
@@ -32,11 +32,11 @@ export default function ProgressCardLG({ titles, steps, theme, }) {
         displays: "flex flex-col items-end gap-y-3",
     };
     const occupied = [
-        steps.filter(([_, value]) => !!value).length,
-        steps.length,
+        checks.map((value) => !!value).length,
+        displays.length,
     ].join("/");
     return (_jsxs(CardDesign, { option: {
             width: "2xl",
             height: "2xs",
-        }, 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"]}` }) })] }));
+        }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], 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

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

package/card/template/ProgressCard/Small.js

@@ -10,7 +10,7 @@ const text = {
     green: "text-green-dark",
     blue: "text-blue-navy",
 };
-export default function ProgressCardSmall({ titles, steps, theme = "green", }) {
+export default function ProgressCardSmall({ titles, displays, checks, theme = "green", }) {
     const progressBox = {
         positions: "absolute top-2.5 left-2.5",
         displays: "flex",
@@ -29,6 +29,6 @@ export default function ProgressCardSmall({ titles, steps, theme = "green", }) {
     };
     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 })] })] }));
+            height: "5xs",
+        }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title, subtitle }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), 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: 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/interaction/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Loading } from "./template/Loading";
 export { default as NoData } from "./template/NoData";
+export { default as Lock } from "./template/Lock";

package/interaction/index.js

@@ -1,2 +1,3 @@
 export { default as Loading } from "./template/Loading";
 export { default as NoData } from "./template/NoData";
+export { default as Lock } from "./template/Lock";

package/interaction/template/Lock.d.ts

@@ -0,0 +1,3 @@
+export default function Lock({ script }: {
+    script?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/interaction/template/Lock.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Lock({ script }) {
+    return (_jsxs("div", { className: "flex flex-col gap-y-3 items-center", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M16.5 10.5V6.75C16.5 5.55653 16.0259 4.41193 15.182 3.56802C14.3381 2.72411 13.1935 2.25 12 2.25C10.8065 2.25 9.66193 2.72411 8.81802 3.56802C7.97411 4.41193 7.5 5.55653 7.5 6.75V10.5M6.75 21.75H17.25C17.8467 21.75 18.419 21.5129 18.841 21.091C19.2629 20.669 19.5 20.0967 19.5 19.5V12.75C19.5 12.1533 19.2629 11.581 18.841 11.159C18.419 10.7371 17.8467 10.5 17.25 10.5H6.75C6.15326 10.5 5.58097 10.7371 5.15901 11.159C4.73705 11.581 4.5 12.1533 4.5 12.75V19.5C4.5 20.0967 4.73705 20.669 5.15901 21.091C5.58097 21.5129 6.15326 21.75 6.75 21.75Z", stroke: "#173A8B", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("div", { className: "text-xs text-blue-navy", children: script })] }));
+}

package/interface/Action.d.ts

@@ -1,5 +1,6 @@
 import { LabelWidget } from "./widget";
-import { DataField, OnClick, Size } from "./Property";
+import { OnClick, Size } from "./Property";
+import { DataField, DataFieldType } from "./Data";
 import { Color } from "./Color";
 export interface ActionEvent {
     event: string;
@@ -44,4 +45,8 @@ export interface RowProps<T> {
         className?: string;
     };
 }
+export interface RowElementProps {
+    item: string;
+    data?: DataFieldType;
+}
 export {};

package/interface/Board.d.ts

@@ -1,4 +1,5 @@
-import { DataField, DataSet, Size, Titles } from "./Property";
+import { Size, Titles } from "./Property";
+import { DataSet, DataField } from "./Data";
 import { ActionProps } from "./Action";
 import { InputWidget, LabelWidget, SelectWidget } from "./widget";
 interface BoardOption {

package/interface/Card.d.ts

@@ -1,4 +1,5 @@
-import { Button, DataField, DataSet, Disabled, OnClick, Size, State, Step, Titles } from "./Property";
+import { Button, Disabled, OnClick, Size, State, Titles } from "./Property";
+import { DataSet, DataField } from "./Data";
 import { Theme } from "./Theme";
 import { Flexify } from "./UtilityType";
 interface CardOption {
@@ -44,6 +45,9 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
         score: number;
     };
 }
+export interface CustomCardProps extends Flexify<CardProps, "children"> {
+    titles: Titles;
+}
 export interface ButtonInLay {
     title: string;
     onClick: OnClick;
@@ -122,6 +126,8 @@ export interface TableCardProps<T> extends Omit<CardProps, "children"> {
         noHover?: boolean;
         noRowPadding?: boolean;
         noHeader?: boolean;
+        isDisabled?: boolean;
+        disabledScript?: string;
     };
 }
 export interface RollCardProps extends CardProps {
@@ -134,7 +140,8 @@ export interface RollCardProps extends CardProps {
 }
 export interface ProgressCardProps {
     titles: Titles;
-    steps: Step[];
+    checks: boolean[];
+    displays: Titles[];
     theme?: Theme;
 }
 export {};

package/interface/Data.d.ts

@@ -0,0 +1,41 @@
+import { Replace } from "./Action";
+import { OnClick, Titles } from "./Property";
+export interface DataPackage<T> {
+    dataField: DataField<T>;
+    dataSet: Omit<DataSet<T>, "renderItem">;
+}
+export type DataSet<T = any> = {
+    items?: T[];
+    renderItem: (item: T, index?: number) => React.ReactNode;
+    titles?: Titles;
+    interaction?: React.ReactNode;
+    onClick?: OnClick<T>;
+    replaces?: Replace[];
+};
+type DataFieldProps = {
+    title: string | number;
+    size: string | number;
+    data?: DataFieldType;
+};
+export type DataField<T = any> = Partial<{
+    [p in keyof T]: Partial<DataFieldProps>;
+}>;
+export type DataFieldType = DataFiledTypeText | DataSelectRoll;
+type DataFiledTypeText = {
+    type: "text";
+};
+interface SelectRollOption {
+    key: string;
+    value: string;
+    option?: {
+        text?: string;
+        background?: string;
+    };
+}
+type DataSelectRoll = {
+    type: "selectRoll";
+    options: SelectRollOption[];
+};
+declare function isDataSelectRoll(obj: any): obj is DataSelectRoll;
+export type { DataFiledTypeText, DataSelectRoll };
+export { isDataSelectRoll };

package/interface/Data.js

@@ -0,0 +1,4 @@
+function isDataSelectRoll(obj) {
+    return typeof obj === "object" && obj.type === "selectRoll";
+}
+export { isDataSelectRoll };

package/interface/Property.d.ts

@@ -1,5 +1,4 @@
 import { Dispatch, SetStateAction } from "react";
-import { Replace } from "./Action";
 import { LabelWidget } from "./widget";
 /**
  * State type for the React component
@@ -18,16 +17,21 @@ export type State<T> = [T, StateAction<T>];
  * @enum {string}
  * @readonly
  * @description - Size type for the component
+ * @property {"5xs"} 5xs - Five extra small size
+ * @property {"4xs"} 4xs - Four extra small size
+ * @property {"3xs"} 3xs - Three extra small size
+ * @property {"2xs"} 2xs - Double extra small size
  * @property {"xs"} xs - Extra small size
  * @property {"sm"} sm - Small size
  * @property {"md"} md - Medium size
  * @property {"lg"} lg - Large size
  * @property {"xl"} xl - Extra large size
  * @property {"2xl"} 2xl - Double extra large size
+ * @property {"3xl"} 3xl - Three extra large size
+ * @property {"full"} full - Full size
  * @property {"full"} full - Full size
  */
-export type ImageSize = "sub" | "full";
-export type Size = "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "auto";
+export type Size = "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "auto";
 /**
  * Image size type
  * @enum {string}
@@ -36,6 +40,7 @@ export type Size = "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2
  * @property {"sub"} sub - Sub size
  * @property {"full"} full - Full size
  */
+export type ImageSize = "sub" | "full";
 export type OnClick<Request = unknown, Response = unknown> = (prop?: Request) => Response | ((prop?: Request) => Promise<Response>);
 export interface Button extends LabelWidget {
 }
@@ -53,26 +58,6 @@ export type Titles = {
     titleColor?: string;
     subtitleColor?: string;
 };
-export type DataSet<T = any> = {
-    items?: T[];
-    renderItem: (item: T, index?: number) => React.ReactNode;
-    titles?: Titles;
-    interaction?: React.ReactNode;
-    onClick?: OnClick<T>;
-    replaces?: Replace[];
-};
-type DataFieldType = {
-    title: string | number;
-    type: string;
-    size: string | number;
-};
-export type DataField<T = any> = Partial<{
-    [p in keyof T]: Partial<DataFieldType>;
-}>;
-export interface DataPackage<T> {
-    dataField: DataField<T>;
-    dataSet: Omit<DataSet<T>, "renderItem">;
-}
 export interface Log<K extends string, T extends string | number> {
     prints: K[];
     logs: {
@@ -84,4 +69,3 @@ export interface Order {
     orderHow: "asc" | "desc" | "";
 }
 export type Step = [Titles, boolean];
-export {};

package/interface/index.d.ts

@@ -1,7 +1,8 @@
+export * from "./widget";
 export * from "./Action";
 export * from "./Card";
 export * from "./Color";
-export * from "./widget";
+export * from "./Data";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";

package/interface/index.js

@@ -1,7 +1,8 @@
+export * from "./widget";
 export * from "./Action";
 export * from "./Card";
 export * from "./Color";
-export * from "./widget";
+export * from "./Data";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";

package/interface/widget/Obstacle.d.ts

@@ -0,0 +1,10 @@
+import { Disabled } from "../Property";
+export interface ObstacleProps {
+    disabled?: Disabled;
+    children?: React.ReactNode;
+    option?: {
+        position?: string;
+        size?: string;
+        background?: string;
+    };
+}

package/interface/widget/Obstacle.js

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

package/interface/widget/Select.d.ts

@@ -0,0 +1,23 @@
+import { Size, State } from "../Property";
+interface SelectOption<T> {
+    title: string;
+    value: T;
+    icon?: string;
+}
+export interface SelectSwitchProps<T> {
+    state: State<T>;
+    selectOptions: SelectOption<T>[];
+    option?: {
+        size?: Size;
+        text?: string;
+        className?: string;
+    };
+}
+export interface SelectHandleProps<T> {
+    state: State<T>;
+    options: SelectOption<T>[];
+    option?: {
+        className?: string;
+    };
+}
+export {};

package/interface/widget/Select.js

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

package/interface/widget/index.d.ts

@@ -41,6 +41,7 @@ export interface InputWidget extends Widget {
     type?: InputType;
     label?: LabelWidget;
     maxLength?: number;
+    disabled?: Disabled;
 }
 export interface CheckBoxWidget extends Widget {
     state: State<boolean>;