@edu-tosel/design 1.0.42 → 1.0.43

package/asset/SVG.d.ts

@@ -0,0 +1,7 @@
+import Close from "./svg/Close";
+import TOSEL from "./svg/TOSEL";
+declare const SVG: {
+    TOSEL: typeof TOSEL;
+    Close: typeof Close;
+};
+export default SVG;

package/asset/SVG.js

@@ -0,0 +1,7 @@
+import Close from "./svg/Close";
+import TOSEL from "./svg/TOSEL";
+const SVG = {
+    TOSEL,
+    Close,
+};
+export default SVG;

package/asset/SVG.tsx

@@ -0,0 +1,9 @@
+import Close from "./svg/Close";
+import TOSEL from "./svg/TOSEL";
+
+const SVG = {
+  TOSEL,
+  Close,
+};
+
+export default SVG;

package/asset/svg/Close.d.ts

@@ -0,0 +1,5 @@
+import { OnClick } from "../../interface";
+export default function Close({ onClick, className, }: {
+    onClick?: OnClick;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/asset/svg/Close.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+export default function Close({ onClick, className, }) {
+    const container = {
+        styles: onClick ? "cursor-pointer" : "",
+        className,
+    };
+    return (_jsxs("svg", { onClick: onClick, className: cn(container), xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [_jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#F0F0F0" }), _jsx("path", { d: "M19.7797 17.6997L23.8497 13.6397C24.4797 13.0997 24.5597 12.1597 24.0197 11.5297C23.4797 10.8997 22.5397 10.8197 21.9097 11.3597C21.8497 11.4097 21.7997 11.4597 21.7497 11.5197L17.6697 15.5797L13.5997 11.5097C13.0297 10.9097 12.0797 10.8697 11.4797 11.4397C10.8697 11.9997 10.8397 12.9497 11.3997 13.5597C11.4197 13.5897 11.4497 13.6097 11.4697 13.6297L15.5297 17.6997L11.4697 21.7597C10.8897 22.3497 10.8897 23.2897 11.4697 23.8797C12.0597 24.4697 13.0097 24.4697 13.5997 23.8797L17.6597 19.8197L21.7197 23.8897C21.9997 24.1797 22.3797 24.3397 22.7797 24.3297C23.6097 24.3297 24.2797 23.6597 24.2797 22.8297C24.2797 22.4297 24.1197 22.0497 23.8397 21.7697L19.7797 17.6997Z", fill: "#7F7F7F" })] }));
+}

package/asset/svg/Close.tsx

@@ -0,0 +1,32 @@
+import { OnClick } from "../../interface";
+import { cn } from "../../util";
+
+export default function Close({
+  onClick,
+  className,
+}: {
+  onClick?: OnClick;
+  className?: string;
+}) {
+  const container = {
+    styles: onClick ? "cursor-pointer" : "",
+    className,
+  };
+  return (
+    <svg
+      onClick={onClick}
+      className={cn(container)}
+      xmlns="http://www.w3.org/2000/svg"
+      width="36"
+      height="36"
+      viewBox="0 0 36 36"
+      fill="none"
+    >
+      <circle cx="18" cy="18" r="18" fill="#F0F0F0" />
+      <path
+        d="M19.7797 17.6997L23.8497 13.6397C24.4797 13.0997 24.5597 12.1597 24.0197 11.5297C23.4797 10.8997 22.5397 10.8197 21.9097 11.3597C21.8497 11.4097 21.7997 11.4597 21.7497 11.5197L17.6697 15.5797L13.5997 11.5097C13.0297 10.9097 12.0797 10.8697 11.4797 11.4397C10.8697 11.9997 10.8397 12.9497 11.3997 13.5597C11.4197 13.5897 11.4497 13.6097 11.4697 13.6297L15.5297 17.6997L11.4697 21.7597C10.8897 22.3497 10.8897 23.2897 11.4697 23.8797C12.0597 24.4697 13.0097 24.4697 13.5997 23.8797L17.6597 19.8197L21.7197 23.8897C21.9997 24.1797 22.3797 24.3397 22.7797 24.3297C23.6097 24.3297 24.2797 23.6597 24.2797 22.8297C24.2797 22.4297 24.1197 22.0497 23.8397 21.7697L19.7797 17.6997Z"
+        fill="#7F7F7F"
+      />
+    </svg>
+  );
+}

package/asset/svg/TOSEL.d.ts

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

package/asset/svg/TOSEL.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function TOSEL({ className }) {
+    return (_jsxs("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: "127", height: "28", viewBox: "0 0 127 28", fill: "none", children: [_jsxs("g", { clipPath: "url(#clip0_4049_13297)", children: [_jsx("path", { d: "M125.742 2.82682L125.211 2.07824H124.945V2.85802H124.613V0.842285H125.414C125.582 0.842285 125.746 0.908566 125.879 1.00604C126.011 1.1347 126.078 1.26727 126.078 1.42712C126.078 1.55578 126.043 1.68835 125.945 1.81701C125.879 1.91448 125.777 2.01195 125.644 2.04315L126.175 2.85412L125.742 2.82293V2.82682ZM125.574 1.65716C125.64 1.62596 125.676 1.52849 125.676 1.46221C125.676 1.36474 125.64 1.29846 125.574 1.26727C125.508 1.23607 125.406 1.20098 125.34 1.20098H124.941V1.75463H125.34C125.441 1.72344 125.508 1.68835 125.574 1.65716Z", fill: "black" }), _jsx("path", { d: "M125.242 0C124.207 0 123.41 0.810971 123.41 1.78959C123.41 2.76822 124.242 3.57919 125.242 3.57919C126.273 3.57919 127.073 2.76822 127.073 1.78959C127.109 0.81487 126.273 0 125.242 0ZM125.242 3.28287C124.41 3.28287 123.711 2.60057 123.711 1.78959C123.711 0.978624 124.41 0.292417 125.242 0.292417C126.074 0.292417 126.773 0.974725 126.773 1.78959C126.773 2.60446 126.074 3.28287 125.242 3.28287Z", fill: "black" }), _jsx("path", { d: "M99.561 11.1392H37.9883V16.2077H99.561V11.1392Z", fill: "url(#paint0_linear_4049_13297)" }), _jsx("path", { d: "M22.9794 5.86376H14.4266V26.9373H8.55285V5.86376H0V0.678223H22.9794V5.86766V5.86376Z", fill: "black" }), _jsx("path", { d: "M23.7871 13.7904C23.7871 5.83275 29.821 0 37.9872 0C46.1534 0 52.1872 5.83275 52.1872 13.7904C52.1872 21.7481 46.1534 27.5808 37.9872 27.5808C29.821 27.5808 23.7871 21.7481 23.7871 13.7904ZM46.3135 13.7904C46.3135 8.82711 42.7635 5.28301 37.9872 5.28301C33.2109 5.28301 29.6608 8.82711 29.6608 13.7904C29.6608 18.7186 33.2109 22.2978 37.9872 22.2978C42.7635 22.2978 46.3135 18.7225 46.3135 13.7904Z", fill: "black" }), _jsx("path", { d: "M76.4601 8.60493H70.3911C70.0357 6.31627 68.3251 4.93217 65.5171 4.93217C62.7092 4.93217 61.2563 6.02776 61.2563 7.60681C61.2563 9.57186 63.2911 10.2503 68.4228 11.3108C74.4918 12.5662 76.5577 15.5645 76.5577 19.4946C76.5577 24.5202 71.8127 27.5809 65.9389 27.5809C59.452 27.5809 54.707 24.068 54.4492 18.4613H60.4831C60.8072 20.9761 63.0021 22.6488 66.3568 22.6488C68.7469 22.6488 70.52 21.4557 70.52 19.748C70.52 17.6543 68.7469 16.816 64.0643 15.9466C58.3507 14.8822 55.2537 12.5311 55.2537 7.60291C55.2537 2.6747 59.9637 0.03125 65.9038 0.03125C71.7775 0.03125 76.1672 3.60654 76.4601 8.60103V8.60493Z", fill: "black" }), _jsx("path", { d: "M80.0059 0.678223H99.5641V5.77018H85.8796V21.8492H99.8531V26.9412H80.0059V0.682122V0.678223Z", fill: "black" }), _jsx("path", { d: "M109.669 0.678223V21.7518H122.806V26.9373H103.795V0.678223H109.669Z", fill: "black" })] }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "paint0_linear_4049_13297", x1: "37.9844", y1: "13.6734", x2: "99.5571", y2: "13.6734", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#760023", stopOpacity: "0" }), _jsx("stop", { offset: "1", stopColor: "#760023" })] }), _jsx("clipPath", { id: "clip0_4049_13297", children: _jsx("rect", { width: "127", height: "27.5808", fill: "white" }) })] })] }));
+}

package/asset/svg/TOSEL.tsx

@@ -0,0 +1,63 @@
+export default function TOSEL({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="127"
+      height="28"
+      viewBox="0 0 127 28"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_4049_13297)">
+        <path
+          d="M125.742 2.82682L125.211 2.07824H124.945V2.85802H124.613V0.842285H125.414C125.582 0.842285 125.746 0.908566 125.879 1.00604C126.011 1.1347 126.078 1.26727 126.078 1.42712C126.078 1.55578 126.043 1.68835 125.945 1.81701C125.879 1.91448 125.777 2.01195 125.644 2.04315L126.175 2.85412L125.742 2.82293V2.82682ZM125.574 1.65716C125.64 1.62596 125.676 1.52849 125.676 1.46221C125.676 1.36474 125.64 1.29846 125.574 1.26727C125.508 1.23607 125.406 1.20098 125.34 1.20098H124.941V1.75463H125.34C125.441 1.72344 125.508 1.68835 125.574 1.65716Z"
+          fill="black"
+        />
+        <path
+          d="M125.242 0C124.207 0 123.41 0.810971 123.41 1.78959C123.41 2.76822 124.242 3.57919 125.242 3.57919C126.273 3.57919 127.073 2.76822 127.073 1.78959C127.109 0.81487 126.273 0 125.242 0ZM125.242 3.28287C124.41 3.28287 123.711 2.60057 123.711 1.78959C123.711 0.978624 124.41 0.292417 125.242 0.292417C126.074 0.292417 126.773 0.974725 126.773 1.78959C126.773 2.60446 126.074 3.28287 125.242 3.28287Z"
+          fill="black"
+        />
+        <path
+          d="M99.561 11.1392H37.9883V16.2077H99.561V11.1392Z"
+          fill="url(#paint0_linear_4049_13297)"
+        />
+        <path
+          d="M22.9794 5.86376H14.4266V26.9373H8.55285V5.86376H0V0.678223H22.9794V5.86766V5.86376Z"
+          fill="black"
+        />
+        <path
+          d="M23.7871 13.7904C23.7871 5.83275 29.821 0 37.9872 0C46.1534 0 52.1872 5.83275 52.1872 13.7904C52.1872 21.7481 46.1534 27.5808 37.9872 27.5808C29.821 27.5808 23.7871 21.7481 23.7871 13.7904ZM46.3135 13.7904C46.3135 8.82711 42.7635 5.28301 37.9872 5.28301C33.2109 5.28301 29.6608 8.82711 29.6608 13.7904C29.6608 18.7186 33.2109 22.2978 37.9872 22.2978C42.7635 22.2978 46.3135 18.7225 46.3135 13.7904Z"
+          fill="black"
+        />
+        <path
+          d="M76.4601 8.60493H70.3911C70.0357 6.31627 68.3251 4.93217 65.5171 4.93217C62.7092 4.93217 61.2563 6.02776 61.2563 7.60681C61.2563 9.57186 63.2911 10.2503 68.4228 11.3108C74.4918 12.5662 76.5577 15.5645 76.5577 19.4946C76.5577 24.5202 71.8127 27.5809 65.9389 27.5809C59.452 27.5809 54.707 24.068 54.4492 18.4613H60.4831C60.8072 20.9761 63.0021 22.6488 66.3568 22.6488C68.7469 22.6488 70.52 21.4557 70.52 19.748C70.52 17.6543 68.7469 16.816 64.0643 15.9466C58.3507 14.8822 55.2537 12.5311 55.2537 7.60291C55.2537 2.6747 59.9637 0.03125 65.9038 0.03125C71.7775 0.03125 76.1672 3.60654 76.4601 8.60103V8.60493Z"
+          fill="black"
+        />
+        <path
+          d="M80.0059 0.678223H99.5641V5.77018H85.8796V21.8492H99.8531V26.9412H80.0059V0.682122V0.678223Z"
+          fill="black"
+        />
+        <path
+          d="M109.669 0.678223V21.7518H122.806V26.9373H103.795V0.678223H109.669Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_4049_13297"
+          x1="37.9844"
+          y1="13.6734"
+          x2="99.5571"
+          y2="13.6734"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#760023" stopOpacity="0" />
+          <stop offset="1" stopColor="#760023" />
+        </linearGradient>
+        <clipPath id="clip0_4049_13297">
+          <rect width="127" height="27.5808" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/board/design/Board.design.js

@@ -23,7 +23,7 @@ const heightSize = {
 };
 export function Board({ children, widgets, options, debug, buttons, }) {
     const { shows } = widgets ?? {};
-    const { width, height, isRounded, className, noMobile } = options ?? {};
+    const { width, height, isRounded, className, noMobile, background, border } = options ?? {};
     const container = {
         positions: "relative",
         width: widthSize[width ?? "full"],
@@ -33,13 +33,15 @@ export function Board({ children, widgets, options, debug, buttons, }) {
     const body = {
         positions: "relative",
         sizes: `w-full ${heightSize[height ?? "xl"]} overflow-hidden `,
-        styles: "bg-white text-black",
+        background: `${background ?? "bg-white"} dark:bg-black/80`,
+        border: border && border,
+        styles: "text-black",
         rounded: `rounded-none ${isRounded ? "xl:rounded-xl" : ""}`,
     };
     const button = {
         positions: "fixed bottom-20 right-4 xl:absolute xl:-bottom-18.5 xl:right-0",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), children: _jsx(Events.Show, { widgets: shows, children: _jsx("div", { className: "h-full " + className, children: children }) }) }), _jsx("div", { className: cn(button), children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), children: _jsx(Events.Show, { widgets: shows, children: _jsx("div", { className: `h-full ${className}`, children: children }) }) }), _jsx("div", { className: cn(button), children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
                         ...options,
                         text: "text-white",
                         background: "bg-crimson-burgundy",

package/board/template/CanvasBoard.d.ts

@@ -1,2 +1,2 @@
 import { CanvasBoardProps } from "../../interface/Board";
-export default function CanvasBoard<B>({ header, children, options, widgets, buttons, }: CanvasBoardProps<B>): import("react/jsx-runtime").JSX.Element;
+export default function CanvasBoard<B>({ header, children, widgets, buttons, options, }: CanvasBoardProps<B>): import("react/jsx-runtime").JSX.Element;

package/board/template/CanvasBoard.js

@@ -3,12 +3,13 @@ import { Events } from "../..";
 import { cn } from "../../util";
 import { Board } from "../design/Board.design";
 import BoardHeader from "../widget/Header";
-export default function CanvasBoard({ header, children, options, widgets, buttons, }) {
+export default function CanvasBoard({ header, children, widgets, buttons, options, }) {
     const body = {
-        displays: "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ",
+        displays: "flex flex-col lg:flex-row lg:flex-wrap gap-7.5",
         sizes: "h-full",
-        paddings: `${header ? "pb-55 xl:pb-25" : "pb-36 xl:pb-6"} px-2 xs:px-4 xl:pl-7.5 xl:pr-2 pt-2 xs:pt-4 xl:pt-7.5`,
+        paddings: `${header ? "pb-55 xl:pb-25" : "pb-36 xl:pb-6"} px-2 xs:px-4 xl:px-7.5 pt-2 xs:pt-4 xl:pt-7.5`,
         styles: "overflow-y-scroll",
+        classNames: options?.className,
     };
-    return (_jsxs(Board, { widgets: widgets, buttons: buttons, options: { ...options, isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), _jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx("div", { className: cn(body), children: children }) })] }));
+    return (_jsxs(Board, { widgets: widgets, buttons: buttons, options: { ...options, className: "", isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), _jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx("div", { className: cn(body), children: children }) })] }));
 }

package/board/template/ManageBoard.js

@@ -17,9 +17,8 @@ export default function ManageBoard({ header, dataSets, dataField, widgets, opti
         styles: "overflow-y-scroll",
     };
     return (_jsxs(Board, { widgets: widgets, buttons: buttons, options: {
-            width,
+            ...options,
             isRounded: true,
-            noMobile,
         }, children: [header && _jsx(BoardHeader, { ...header }), dataField && _jsx(DataField.Board, { id: id, dataField: dataField }), _jsx("div", { className: cn(container), children: _jsx(Events.Replace, { widgets: widgets?.replaces, children: dataSets.map(({ titles, items, renderItem, interaction }, index) => (_jsxs(Shelf.Wrap, { titles: titles, options: { gap: "x" }, className: className, children: [items &&
                                 sortByOrder({ items, orders })?.map((item) => renderItem(item)), interaction] }, id + index))) }) })] }));
 }

package/board/template/PaperBoard.js

@@ -6,5 +6,5 @@ export default function PaperBoard({ children, debug, options, }) {
     const container = {
         displays: "flex flex-col gap-7.5",
     };
-    return (_jsx(Board, { options: { width: "lg", height: "full", isRounded: false, className }, debug: debug, children: _jsx("div", { className: cn(container), children: children }) }));
+    return (_jsx(Board, { options: { width: "full", height: "full", isRounded: false, className }, debug: debug, children: _jsx("div", { className: cn(container), children: children }) }));
 }

package/board/widget/Header.js

@@ -5,14 +5,11 @@ export default function BoardHeader({ titles, tag, options, }) {
     const { title, icon, titleColor } = titles ?? {};
     const { selects, inputs } = tag ?? {};
     const { colors, titleBorder } = options ?? {};
-    const { bgColor, textColor } = colors ?? {
-        bgColor: "white",
-        textColor: "black",
-    };
+    const { bgColor, textColor } = colors ?? {};
     const container = {
         positions: "fixed top-15 xl:top-0 left-0 z-30 xl:relative flex items-center",
         paddings: "px-7.5",
-        styles: `${bgColor} ${textColor}`,
+        styles: `${bgColor ?? "bg-white"} ${textColor ?? "text-black"}`,
         sizes: "w-full h-19",
         border: `border-b-2 ${titleBorder ?? "border-green-dark"}`,
     };

package/card/design/Card.design.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { cn, isDebug } from "../../util";
 import { useWidgetStore } from "../../store";
 const widthSize = {
-    "2xs": "w-20",
+    "2xs": "w-53.75",
     xs: "w-full md:w-60",
     sm: "w-full md:w-90",
     md: "w-full md:w-112.5",
@@ -13,6 +13,7 @@ const widthSize = {
     auto: "w-auto",
 };
 const heightSize = {
+    "2xs": "h-30",
     xs: "h-45",
     sm: "h-52.5",
     md: "h-67.5",
@@ -24,24 +25,13 @@ const heightSize = {
 };
 export default function CardDesign({ header, children, options, debug, }) {
     const { setIsOwn } = useWidgetStore();
-    const { className, boundary, rounded, height, width, text, background, onClick, overflow, noShadow, } = options ?? {};
-    const setBoundary = () => {
-        if (noShadow)
-            return "";
-        if (boundary === "shadow")
-            return "box-shadow";
-        if (boundary?.includes("border"))
-            return boundary;
-        if (boundary === "none")
-            return "";
-        return "box-shadow";
-    };
+    const { className, boundary, rounded, height, width, text, background, onClick, onMouse, overflow, } = options ?? {};
     const container = {
         positions: "relative",
         sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
         onClick: onClick ? "cursor-pointer" : "",
         text: `${text ?? "text-base"} text-black dark:text-white`,
-        boundary: setBoundary(),
+        boundary: boundary ?? "box-shadow",
         rounded: `rounded-${rounded ?? "xl"}`,
         bgColor: `${background ?? "bg-white/80"} dark:bg-black/80`,
         styles: "duration-500 ",
@@ -49,9 +39,9 @@ export default function CardDesign({ header, children, options, debug, }) {
         overflow: "overflow-hidden",
     };
     const body = {
-        sizes: "h-full",
+        sizes: "w-full h-full",
         overflow: `overflow-${overflow ?? "hidden"}`,
         className,
     };
-    return (_jsxs("div", { className: cn(container), children: [header && _jsx(_Fragment, { children: header }), _jsx("div", { onClick: onClick && onClick, className: cn(body), children: children })] }));
+    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 })] }));
 }

package/card/design/InfoCard.design.d.ts

@@ -1,2 +1,2 @@
 import { InfoCardProps } from "../../interface/Card";
-export declare function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, options, children, }: InfoCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, image, options, children, }: InfoCardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/InfoCard.design.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
 import Card from "./Card.design";
-export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, options, children, }) {
+export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, image, options, children, }) {
     const { titleBorder, text } = options ?? {};
     const container = {
         displays: "flex flex-col",
@@ -20,5 +20,5 @@ export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, o
             displays: "flex flex-col-reverse",
         },
     };
-    return (_jsxs(Card, { options: { ...options, className: cn(container) }, debug: debug, children: [_jsxs("div", { className: cn(topBox.container), children: [_jsxs("div", { className: "text-gray-dim ", children: [_jsx("div", { className: cn(topBox.titleText), children: title }), _jsx("div", { className: cn(topBox.subtitleText), children: subtitle ?? "" })] }), topRight] }), children] }));
+    return (_jsxs(Card, { options: { ...options, className: cn(container) }, debug: debug, children: [_jsxs("div", { className: cn(topBox.container), children: [_jsxs("div", { className: "text-gray-dim ", children: [_jsx("div", { className: cn(topBox.titleText), children: title }), _jsx("div", { className: cn(topBox.subtitleText), children: subtitle ?? "" })] }), topRight] }), image && (_jsx("div", { className: "absolute right-5 top-5 w-22.5 h-22.5", children: _jsx("div", { className: "relative h-full w-full rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md ", src: image }) }) })), children] }));
 }

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

@@ -0,0 +1,20 @@
+import { Button as ButtonProp, InfoCardProps } from "../../../interface";
+interface AcademyCardProps extends Omit<InfoCardProps, "children"> {
+    buttons: ButtonProp[];
+    data: {
+        address: string;
+    };
+}
+interface StudentCardProps extends Omit<InfoCardProps, "titles" | "children"> {
+    data: {
+        academy: string;
+        name: string;
+        birthday: string;
+        createdAt: string;
+    };
+}
+declare function Academy({ titles, data, buttons }: AcademyCardProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Academy {
+    var Digital: ({ image, data }: StudentCardProps) => import("react/jsx-runtime").JSX.Element;
+}
+export default Academy;

package/card/template/InfoCard/Academy.js

@@ -0,0 +1,31 @@
+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 "../../../html";
+function Academy({ titles, data, buttons }) {
+    return (_jsx(InfoCardDesign, { titles: titles, options: {
+            titleBorder: "border-green-dark",
+            background: "",
+            boundary: "",
+            width: "xs",
+            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, options: {
+                            background: !index ? "bg-gray-medium" : "bg-green-dark",
+                            text: "text-white",
+                            width: "sm",
+                            height: "xs",
+                        } }, index))) })] }) }));
+}
+function Digital({ image, data }) {
+    return (_jsx(InfoCardDesign, { options: {
+            width: "md",
+            height: "lg",
+            titleBorder: "border-crimson-burgundy",
+            boundary: "border-2 border-crimson-burgundy",
+        }, titles: {
+            title: "Digital Student Card",
+            subtitle: "디지털 학생증",
+        }, image: image, children: _jsxs("div", { className: "mt-5.5", children: [_jsxs("div", { className: "flex flex-col gap-y-3 text-gray-dark", children: [_jsx("div", { className: "text-xl h-6 font-pretendard-bold leading-none", children: data.academy }), _jsxs("div", { className: "h-10.5", children: [_jsxs("div", { className: "leading-none", children: ["\uC774\uB984: ", data.name, " / \uC0DD\uB144\uC6D4\uC77C: ", data.birthday] }), _jsx("div", { children: data.createdAt })] }), _jsx("div", { className: "text-xs leading-none", children: "*\uCE74\uB4DC\uB97C \uB20C\uB7EC \uD559\uC6D0\uC815\uBCF4\uB97C \uD655\uC778\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] }), _jsx(SVG.TOSEL, { className: "absolute bottom-5 right-5" })] }) }));
+}
+Academy.Digital = Digital;
+export default Academy;

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

@@ -5,12 +5,11 @@ interface Data {
     level: string;
     levelString: string;
     levelColor: string;
-    profileImage: string;
     score: number;
     grade: number;
 }
 export interface GradeProps extends Omit<InfoCardProps, "children"> {
     data: Partial<Data>;
 }
-export default function Grade({ titles, data }: GradeProps): import("react/jsx-runtime").JSX.Element;
+export default function Grade({ titles, image, data }: GradeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/card/template/InfoCard/Grade.js

@@ -3,7 +3,7 @@ import { Label } from "../../../html";
 import { cn } from "../../../util";
 import { InfoCardDesign } from "../../design/InfoCard.design";
 import { label } from "./static/label";
-export default function Grade({ titles, data }) {
+export default function Grade({ titles, image, data }) {
     const container = {
         positions: "relative",
         displays: "flex flex-col justify-between mt-2.5",
@@ -15,7 +15,7 @@ export default function Grade({ titles, data }) {
         styles: "bg-white-off text-sm rounded-md",
         text: data.levelColor,
     };
-    return (_jsx(InfoCardDesign, { titles: titles, options: {
+    return (_jsx(InfoCardDesign, { titles: titles, image: image, options: {
             titleBorder: "border-blue-navy",
             width: "sm",
             height: "xs",
@@ -25,5 +25,5 @@ export default function Grade({ titles, data }) {
                         text: "text-white hover:text-blue-navy",
                         background: "bg-blue-navy hover:bg-gray-light",
                         className: cn(label),
-                    } }), _jsx("div", { className: "absolute right-5 top-5 w-22.5 h-22.5", children: _jsx("div", { className: "relative h-full w-full rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md ", src: data.profileImage }) }) })] }) }));
+                    } })] }) }));
 }

package/card/template/InfoCard/PersonalInformation.js

@@ -40,7 +40,7 @@ export default function PersonalInformation({ titles, theme = "red", button, dat
             height: "md",
             background: color.background[theme],
             boundary: `border-3 ${color.border[theme]}`,
-        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(body.container), children: [_jsx("div", { className: cn(body.belong), children: data.info }), _jsx("div", { className: cn(body.username), children: data.username }), _jsx("div", { className: cn(body.name), children: data.name }), _jsxs("div", { className: cn(body.subInfo), children: [_jsx("div", { children: data.email }), _jsx("div", { children: data.phone })] })] }), button && (_jsx(Label.Button, { title: button[0], onClick: button[1], options: {
+        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(body.container), children: [_jsx("div", { className: cn(body.belong), children: data.info }), _jsx("div", { className: cn(body.username), children: data.username }), _jsx("div", { className: cn(body.name), children: data.name }), _jsxs("div", { className: cn(body.subInfo), children: [_jsx("div", { children: data.email }), _jsx("div", { children: data.phone })] })] }), button && (_jsx(Label.Button, { title: button.title, onClick: button.onClick, options: {
                         width: "md",
                         background: color.background.button[theme],
                         text: "text-white",

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

@@ -2,11 +2,10 @@ import { InfoCardProps, OnClick } from "./../../../interface";
 interface Data {
     belong: string;
     birthday: string;
-    profileImage: string;
 }
 interface StudentInfo extends Omit<InfoCardProps, "children"> {
     data: Partial<Data>;
     onClick?: OnClick;
 }
-export default function Student({ titles, data, onClick }: StudentInfo): import("react/jsx-runtime").JSX.Element;
+export default function Student({ titles, image, data, onClick }: StudentInfo): import("react/jsx-runtime").JSX.Element;
 export {};

package/card/template/InfoCard/Student.js

@@ -3,7 +3,7 @@ import { Label } from "../../../html";
 import { cn } from "../../../util";
 import { InfoCardDesign } from "../../design/InfoCard.design";
 import { label } from "./static/label";
-export default function Student({ titles, data, onClick }) {
+export default function Student({ titles, image, data, onClick }) {
     const container = {
         positions: "relative",
         displays: "flex flex-col justify-between mt-2.5",
@@ -14,7 +14,7 @@ export default function Student({ titles, data, onClick }) {
         sizes: "w-22.5 h-6.4",
         styles: "bg-white-off text-sm rounded-md",
     };
-    return (_jsx(InfoCardDesign, { titles: titles, options: {
+    return (_jsx(InfoCardDesign, { titles: titles, image: image, options: {
             titleBorder: "border-blue-navy",
             width: "sm",
             height: "xs",
@@ -24,5 +24,5 @@ export default function Student({ titles, data, onClick }) {
                         text: "text-white hover:text-blue-navy",
                         background: "bg-blue-navy hover:bg-gray-light",
                         className: cn(label),
-                    } }), _jsx("div", { className: "absolute right-5 top-5 w-22.5 h-22.5", children: _jsx("div", { className: "relative h-full w-full rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md ", src: data.profileImage }) }) })] }) }));
+                    } })] }) }));
 }

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

@@ -1,3 +1,4 @@
+import Academy from "./Academy";
 import Exam from "./Exam";
 import Finance from "./Finance";
 import Grade from "./Grade";
@@ -6,6 +7,7 @@ import PersonalInformation from "./PersonalInformation";
 import Product from "./Product";
 import Student from "./Student";
 declare const InfoCard: {
+    Academy: typeof Academy;
     PersonalInformation: typeof PersonalInformation;
     Exam: typeof Exam;
     ExamData: {

package/card/template/InfoCard/index.js

@@ -1,3 +1,4 @@
+import Academy from "./Academy";
 import Exam from "./Exam";
 import ExamData from "./ExamData";
 import Finance from "./Finance";
@@ -7,6 +8,7 @@ import PersonalInformation from "./PersonalInformation";
 import Product from "./Product";
 import Student from "./Student";
 const InfoCard = {
+    Academy,
     PersonalInformation,
     Exam,
     ExamData,

package/html/design/Label.design.js

@@ -27,7 +27,7 @@ export default function LabelDesign({ title, onClick, options, hoverState, }) {
         texts: text ?? "text-gray-dim",
         animation: "duration-500",
         fonts: "font-pretendard-light",
-        styles: height !== "xs" ? "rounded-xl" : "rounded-md text-xs",
+        styles: height !== "xs" ? "rounded-lgx" : "rounded-md text-xs",
     };
     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 })] }) }));
 }

package/html/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Input } from "./widget/Input";
+export { default as Input } from "./template/Input";
 export { default as Select } from "./template/Select";
 export { default as DatePicker } from "./widget/DatePicker";
 export { default as Label } from "./template/Label";

package/html/index.js

@@ -1,4 +1,4 @@
-export { default as Input } from "./widget/Input";
+export { default as Input } from "./template/Input";
 export { default as Select } from "./template/Select";
 export { default as DatePicker } from "./widget/DatePicker";
 export { default as Label } from "./template/Label";

package/html/template/Input.d.ts

@@ -0,0 +1,6 @@
+import { HTMLInputElement } from "../../interface";
+declare function Input({ state, onKeyDown, placeholder, options }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;
+declare namespace Input {
+    var LG: ({ state, placeholder, flag, type }: HTMLInputElement) => import("react/jsx-runtime").JSX.Element;
+}
+export default Input;

package/html/template/Input.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { cn } from "../../util";
+import Obstacle from "../widget/Obstacle";
+const widthSize = {
+    xs: "w-28",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+function Input({ state, onKeyDown, placeholder, options }) {
+    const { width, disabled } = options ?? {};
+    const id = useId();
+    const [value, setValue] = state;
+    const container = {
+        positions: "relative",
+        width: `${widthSize[width ?? "xs"]} h-8`,
+        displays: "flex items-center",
+    };
+    const body = {
+        styles: "rounded-md bg-slate-200 text-xs",
+        sizes: "w-full h-full",
+        paddings: "pl-4",
+        pseudo: "focus:outline-none focus:bg-white focus:text-black box-shadow-focus",
+        effect: `transition-all`,
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("input", { className: cn(body), id: id, type: "text", value: value, placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }));
+}
+function LG({ state, placeholder, flag, type }) {
+    const [value, setValue] = state;
+    const [onFocus, setOnFocus] = useState(false);
+    const container = {
+        positions: "relative",
+    };
+    const placeholderBox = {
+        positions: "absolute left-5",
+        styles: "duration-300",
+        fonts: "leading-none text-gray-medium",
+        animation: value || onFocus ? "top-2.625 text-xs" : "top-4.375 text-base",
+    };
+    const inputBox = {
+        sizes: "w-102.5 h-13.5 pl-5 pt-3",
+        fonts: "text-sm",
+        background: flag === true
+            ? "bg-green-dark/10"
+            : flag === false
+                ? "bg-crimson-burgundy/10 text-crimson-burgundy"
+                : "bg-gray-light",
+        styles: "bg-gray-light rounded-md outline-none",
+        animation: onFocus ? "border-2 border-green-dark box-shadow" : "border-0",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(placeholderBox), children: placeholder }), _jsx("input", { className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => setValue(e.target.value), type: type ?? "text" })] }));
+}
+Input.LG = LG;
+export default Input;

package/html/widget/Toggle.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
 const widthSize = {
     xs: "w-32",
     sm: "w-48",
@@ -9,6 +10,11 @@ const widthSize = {
     full: "w-full",
 };
 export default function Toggle({ state: [chekced, setChecked], labels, options, }) {
-    const { disabled } = options ?? {};
-    return (_jsxs("div", { className: "w-24 h-6 flex items-center", children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: typeof disabled === "boolean" && disabled, type: "checkbox", className: "toggle bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), _jsx("div", { className: "ml-2 transition-all text-xs", children: labels.map(([status, label]) => (status === chekced ? label : "")) })] }));
+    const { disabled, className } = options ?? {};
+    const container = {
+        displays: "flex items-center",
+        sizes: "h-6",
+        className,
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: typeof disabled === "boolean" && disabled, type: "checkbox", className: "toggle bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), labels && (_jsx("div", { className: "ml-2 transition-all text-xs", children: labels.map(([status, label]) => (status === chekced ? label : "")) }))] }));
 }