@edu-tosel/design 1.0.70 → 1.0.71

package/interface/widget/index.d.ts

@@ -19,6 +19,7 @@ export interface Widget {
         text?: string;
         disabled?: Disabled;
         rounded?: string;
+        isDark?: boolean;
     };
 }
 export interface LabelWidget extends Widget {

package/package.json

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

package/store/index.d.ts

@@ -19,6 +19,7 @@ interface ActionProps {
     isOwnId: string;
     setIsOwnId: (prop: string) => void;
     isDark: boolean;
+    dark: () => void;
     setDark: () => void;
 }
 export declare const useActionStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ActionProps>>;

package/store/index.js

@@ -65,5 +65,6 @@ export const useActionStore = create((set) => ({
     isOwnId: "",
     setIsOwnId: (prop) => set({ isOwnId: prop }),
     isDark: false,
+    dark: () => set(() => ({ isDark: true })),
     setDark: () => set((state) => ({ isDark: !state.isDark })),
 }));

package/version.txt

@@ -1 +1 @@
-1.0.70
+1.0.71

package/widget/template/Select/Select.LG.js

@@ -16,6 +16,7 @@ const heightSize = {
 };
 export default function SelectLG({ state, selectOptions, placeholder, option, }) {
     const id = useId();
+    const { isDark } = option ?? {};
     const { setIsOwn, setIsOwnId } = useActionStore();
     const [value, setValue] = state;
     const [text, setText] = useState("");
@@ -60,6 +61,7 @@ export default function SelectLG({ state, selectOptions, placeholder, option, })
         displays: "flex items-center",
         sizes: `${widthSize[option?.width ?? "md"]} ${heightSize[option?.height ?? "sm"]}`,
         styles: "pl-1 rounded-md focus:outline-none duration-100 text-gray-400",
+        backgrounds: isDark && "bg-[#282828]",
         shadow: isOpen || isHover ? "box-shadow" : "shadow-none",
     };
     const input = {
@@ -72,15 +74,23 @@ export default function SelectLG({ state, selectOptions, placeholder, option, })
         displays: "flex flex-col gap-1",
         sizes: `${widthSize[option?.width ?? "md"]} min-h-6.5 max-h-40`,
         paddings: "p-2",
-        styles: "bg-white box-shadow rounded-md box-shadow overflow-y-scroll",
+        backgrounds: !isDark ? "bg-white" : "bg-[#282828]",
+        styles: "box-shadow rounded-md box-shadow overflow-y-scroll",
     };
-    const label = {
+    const label = (flag) => ({
         displays: "flex items-center",
         sizes: "h-7 w-full",
         paddings: "px-2",
         styles: "rounded-sm duration-500",
-        fonts: "text-xs text-gray-dim hover:bg-green-dark hover:text-white",
-    };
+        backgrounds: !flag
+            ? !isDark
+                ? "hover:bg-green-dark"
+                : "bg-[#282828] hover:bg-[#8F7B39] "
+            : !isDark
+                ? "bg-green-dark"
+                : "bg-[#8F7B39]",
+        fonts: !isDark ? "text-xs text-gray-dim hover:text-white" : "text-white ",
+    });
     const inputTransition = useTransition(isOpen, {
         from: { top: 44 },
         enter: { top: 44 },
@@ -93,14 +103,12 @@ export default function SelectLG({ state, selectOptions, placeholder, option, })
         leave: { top: isLong ? 88 : 44 },
         config: { duration: 0 },
     });
-    return (_jsxs("div", { className: cn(container), onKeyDown: onKeyDown, onClick: () => setIsOwn(true), children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label), children: selectOptions?.find((option) => value === option[0])?.[1] })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
+    return (_jsxs("div", { className: cn(container), onKeyDown: onKeyDown, onClick: () => setIsOwn(true), children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label(false)), children: selectOptions?.find((option) => value === option[0])?.[1] })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
                 item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
                 return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: filteredOptions?.map(([value, text], order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
                                 setValue(value);
                                 setText(text);
                                 return setIsOpen(false);
-                            }, className: cn(label, order === index
-                                ? "bg-green-dark text-white w-full"
-                                : "w-auto"), children: text }) }, id + value))) })));
+                            }, className: cn(label(order === index)), children: text }) }, id + value))) })));
             })] }));
 }