@edu-tosel/design 1.0.309 → 1.0.311

package/interface/widget/Select.d.ts

@@ -37,6 +37,8 @@ export interface SelectTagProps<T> {
         className?: string;
         background?: string;
         text?: string;
+        unselectedHoverBackground?: string;
+        unselectedHoverText?: string;
     };
 }
 export interface SelectHandleProps<T> {

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.309
+1.0.311

package/widget/template/Select/Tag.js

@@ -3,7 +3,7 @@ import { cn } from "../../../util";
 import { selectOne, selectPlural } from "../../../util/select";
 export default function SelectTag(props) {
     const { state, selectOptions, selectHow, option } = props;
-    const { className, background, text } = option || {
+    const { className, background, text, unselectedHoverBackground, unselectedHoverText, } = option || {
         selectHow: "plural",
     };
     const container = {
@@ -15,14 +15,29 @@ export default function SelectTag(props) {
         background ?? "bg-green-dark",
         text ?? "text-white",
     ].join(" ");
-    const button = (key) => ({
-        sizes: "h-10",
-        styles: "rounded-full",
-        animations: "duration-300",
-        boundaries: state[0].includes(key)
-            ? isSelectedStyle
-            : "border border-gray-medium",
-    });
+    const unselectedHoverStyle = [
+        unselectedHoverBackground
+            ? unselectedHoverBackground.startsWith("hover:")
+                ? unselectedHoverBackground
+                : `hover:${unselectedHoverBackground.replace("bg-", "")}`
+            : "hover:bg-gray-light",
+        unselectedHoverText
+            ? unselectedHoverText.startsWith("hover:")
+                ? unselectedHoverText
+                : `hover:${unselectedHoverText.replace("text-", "")}`
+            : "hover:text-gray-dark",
+    ].join(" ");
+    const button = (key) => {
+        const isSelected = state[0].includes(key);
+        return {
+            sizes: "h-10",
+            styles: "rounded-md",
+            animations: "duration-300 transition-all",
+            boundaries: isSelected
+                ? isSelectedStyle // 선택된 태그는 호버 스타일 제거
+                : `bg-gray-light/50 text-gray-medium/80 ${unselectedHoverStyle}`,
+        };
+    };
     return (_jsx("div", { className: cn(container), children: selectOptions.map(({ title, value }) => (_jsx("button", { onClick: () => selectHow === "one"
                 ? selectOne({ state, key: value })
                 : selectPlural({ state, key: value }), className: cn(button(value)), children: title }, value))) }));

package/widget/template/Select/Toggle.js

@@ -6,17 +6,21 @@ export default function SelectToggle({ state, selectOptions: selectOptionsInput,
     const [value, setValue] = state;
     const isOff = value === selectOptions[0].value;
     const container = {
-        positions: "relative",
         displays: "flex items-center",
-        sizes: "w-10 h-4.5",
+        sizes: "w-10 h-fit",
         backgrounds: isOff ? "bg-crimson-burgundy" : "bg-green-dark",
         boundaries: "rounded-full p-0.5",
+        animations: "duration-300",
     };
-    const controller = {
+    const knobWrapper = {
+        displays: "relative",
+        sizes: "w-full h-4",
+    };
+    const knob = {
         positions: "absolute",
-        locations: isOff ? "left-0.5" : "left-[calc(100%-1rem)]",
-        sizes: "w-[14px] h-[14px]",
-        backgrounds: "bg-white",
+        locations: isOff ? "left-0" : "left-[calc(100%-1rem)]",
+        sizes: "size-4",
+        backgrounds: "bg-white shadow-main",
         boundaries: "rounded-full",
         animations: "duration-200",
     };
@@ -26,5 +30,5 @@ export default function SelectToggle({ state, selectOptions: selectOptionsInput,
         return setValue(selectOptions[0].value);
     };
     const selectedTitle = selectOptions?.find((option) => option.value === value)?.title;
-    return (_jsxs("div", { className: "flex items-center gap-x-1.5 ", children: [selectedTitle && option?.isText && (_jsx("div", { className: "text-sm leading-none", children: selectedTitle })), _jsx("button", { onClick: toggle, className: cn(container), children: _jsx("div", { className: cn(controller) }) })] }));
+    return (_jsxs("div", { className: "flex items-center gap-x-1.5 ", children: [selectedTitle && option?.isText && (_jsx("div", { className: "text-sm leading-none", children: selectedTitle })), _jsx("button", { onClick: toggle, className: cn(container), children: _jsx("div", { className: cn(knobWrapper), children: _jsx("div", { className: cn(knob) }) }) })] }));
 }