@edu-tosel/design 1.0.76 → 1.0.78

package/card/template/ProgressCard/Large.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { widthSizes } from "../../../asset/sizes";
 import SVG from "../../../asset/SVG";
 import { cn } from "../../../util";
 import CardDesign from "../../design/Card.design";
@@ -31,12 +32,9 @@ export default function ProgressCardLG({ titles, checks, displays, theme, }) {
         positions: "absolute top-12 right-12",
         displays: "flex flex-col items-end gap-y-3",
     };
-    const occupied = [
-        checks.map((value) => !!value).length,
-        displays.length,
-    ].join("/");
+    const occupied = Math.round((checks.filter((value) => !!value).length / displays.length) * 100);
     return (_jsxs(CardDesign, { option: {
             width: "2xl",
             height: "2xs",
-        }, 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"]}` }) })] }));
+        }, 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 ${widthSizes[occupied]} ${bg[theme ?? "green"]}` }) })] }));
 }

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

@@ -1,2 +1,2 @@
 import { ProgressCardProps } from "../../../interface";
-export default function ProgressCardSmall({ titles, displays, checks, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;
+export default function ProgressCardSmall({ titles, displays, checks, nowFocus, 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, displays, checks, theme = "green", }) {
+export default function ProgressCardSmall({ titles, displays, checks, nowFocus, theme = "green", }) {
     const progressBox = {
         positions: "absolute top-2.5 left-2.5",
         displays: "flex",
@@ -24,11 +24,14 @@ export default function ProgressCardSmall({ titles, displays, checks, theme = "g
         texts: flag ? "text-gray-dark" : "text-gray-medium",
     });
     const titleBox = {
-        positions: "absolute top-4.5 right-6",
+        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",
+        backgrounds: nowFocus === true ? bgLight[theme ?? "green"] : "bg-transparent",
+        boundaries: "rounded-[10px] pt-2 pr-3.5",
     };
     return (_jsxs(CardDesign, { option: {
             width: "md",
             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 })] })] }));
+        }, 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 })] })] }));
 }

package/interface/Card.d.ts

@@ -141,6 +141,7 @@ export interface RollCardProps extends CardProps {
 export interface ProgressCardProps {
     titles: Titles;
     checks: boolean[];
+    nowFocus?: number | boolean;
     displays: Titles[];
     theme?: Theme;
 }

package/package.json

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

package/tailwind.config.ts

@@ -56,9 +56,10 @@ export default {
         "red-crimson": "#760023",
         "red-velvet": "#AC647A",
         "green-dark": "#105652",
-        "green-light": "#DFE6E5",
+        "green-light": "#DFE5E4",
         "blue-sky": "#44C5F3",
         "blue-navy": "#173A8B",
+        "blue-navy-light": "#E1E4EB",
         "blue-pastel": "#CED6E6",
         "violet-light": "#9979F6",
         "gray-light": "#F0F0F0",
@@ -173,6 +174,7 @@ export default {
         28.78: "7.195rem",
         29: "7.25rem",
         30: "7.5rem",
+        32.5: "8.125rem",
         34: "8.5rem",
         36: "9rem",
         36.5: "9.125rem",

package/version.txt

@@ -1 +1 @@
-1.0.76
+1.0.78