@edu-tosel/design 1.0.76 → 1.0.77

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.77",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/tailwind.config.ts

@@ -173,6 +173,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.77