@edu-tosel/design 1.0.77 → 1.0.79

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/interface/widget/Select.d.ts

@@ -1,12 +1,21 @@
+import { Widget } from ".";
 import { Size, State } from "../Property";
-interface SelectOption<T> {
+type SelectOptionTuple<T> = [T, string];
+export interface SelectOption<T> {
     title: string;
     value: T;
     icon?: string;
 }
+export type SelectOptionInput<T> = SelectOption<T> | SelectOptionTuple<T>;
+export declare function toSelectOption<T>(option: SelectOptionInput<T>): SelectOption<T>;
+export interface SelectWidget<T> extends Widget {
+    state: State<T>;
+    selectOptions?: SelectOptionInput<T>[];
+    placeholder?: string;
+}
 export interface SelectSwitchProps<T> {
     state: State<T>;
-    selectOptions: SelectOption<T>[];
+    selectOptions: SelectOptionInput<T>[];
     option?: {
         size?: Size;
         text?: string;
@@ -15,7 +24,7 @@ export interface SelectSwitchProps<T> {
 }
 export interface SelectHandleProps<T> {
     state: State<T>;
-    options: SelectOption<T>[];
+    selectOptions: SelectOptionInput<T>[];
     option?: {
         className?: string;
     };

package/interface/widget/Select.js

@@ -1 +1,9 @@
-export {};
+export function toSelectOption(option) {
+    if (Array.isArray(option)) {
+        const [value, title] = option;
+        return { value, title };
+    }
+    else {
+        return option;
+    }
+}

package/interface/widget/index.d.ts

@@ -1,7 +1,9 @@
 import { Color } from "../Color";
 import { Disabled, OnClick, Size, State } from "../Property";
+import { SelectOptionInput } from "./Select";
 export * from "./Carousel";
 export * from "./Switch";
+export * from "./Select";
 export declare const WidgetType: {
     readonly TEXT: "text";
     readonly BUTTON: "button";
@@ -27,12 +29,6 @@ export interface LabelWidget extends Widget {
     hoverState?: State<boolean>;
     onClick?: OnClick;
 }
-export type SelectOption<T> = [T, string];
-export interface SelectWidget<T> extends Widget {
-    state: State<T>;
-    selectOptions?: SelectOption<T>[];
-    placeholder?: string;
-}
 type InputType = "text" | "password" | "date" | "email" | "phone" | "number";
 export interface InputWidget extends Widget {
     state: State<string> | State<string | undefined>;
@@ -53,7 +49,7 @@ export interface WidgetFrame {
     title: string;
     type: WidgetType;
     state: State<any>;
-    selectOptions?: SelectOption<string | number>[];
+    selectOptions?: SelectOptionInput<string | number>[];
     labels?: [string | boolean, string][];
     disabled?: Disabled;
     onClick?: OnClick;

package/interface/widget/index.js

@@ -1,5 +1,6 @@
 export * from "./Carousel";
 export * from "./Switch";
+export * from "./Select";
 export const WidgetType = {
     TEXT: "text",
     BUTTON: "button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.77",
+  "version": "1.0.79",
   "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",

package/version.txt

@@ -1 +1 @@
-1.0.77
+1.0.79

package/widget/template/Select/Handle.d.ts

@@ -1,2 +1,2 @@
 import { SelectHandleProps } from "../../../interface/widget/Select";
-export default function SelectHandle<T>({ state, options, option, }: SelectHandleProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function SelectHandle<T>({ state, selectOptions: selectOptionsInput, option, }: SelectHandleProps<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Handle.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { widthSizes } from "../../../asset/sizes";
+import { toSelectOption, } from "../../../interface/widget/Select";
 import { cn, gradient } from "../../../util";
-export default function SelectHandle({ state, options, option, }) {
+export default function SelectHandle({ state, selectOptions: selectOptionsInput, option, }) {
+    const selectOptions = selectOptionsInput?.map(toSelectOption);
     const { className } = option ?? {};
-    const length = options?.length;
-    const valueIndex = Object.values(options)
+    const length = selectOptions?.length;
+    const valueIndex = Object.values(selectOptions)
         .map(({ value }) => value)
         ?.indexOf(state?.[0]);
     const container = {
@@ -24,7 +26,7 @@ export default function SelectHandle({ state, options, option, }) {
         sizes: "w-5 h-5",
         styles: "rounded-full bg-white",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(area), children: _jsx("div", { className: cn(handle) }) }), _jsx("div", { className: "absolute flex w-full h-full top-0 left-0", children: options?.map(({ value }) => (_jsx("button", { onClick: () => {
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(area), children: _jsx("div", { className: cn(handle) }) }), _jsx("div", { className: "absolute flex w-full h-full top-0 left-0", children: selectOptions?.map(({ value }) => (_jsx("button", { onClick: () => {
                         return state?.[1](value);
                     }, className: "flex flex-1 h-10 " }, value))) })] }));
 }

package/widget/template/Select/Select.LG.d.ts

@@ -1,2 +1,2 @@
 import { SelectWidget } from "../../../interface";
-export default function SelectLG<T>({ state, selectOptions, placeholder, option, }: SelectWidget<T>): import("react/jsx-runtime").JSX.Element;
+export default function SelectLG<T>({ state, selectOptions: selectOptionsInput, placeholder, option, }: SelectWidget<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toSelectOption, } from "../../../interface";
 import { useEffect, useId, useRef, useState } from "react";
 import { useActionStore } from "../../../store";
 import { useFlag } from "../../../hook";
@@ -14,7 +15,8 @@ const heightSize = {
     xs: "h-6.5",
     sm: "h-9",
 };
-export default function SelectLG({ state, selectOptions, placeholder, option, }) {
+export default function SelectLG({ state, selectOptions: selectOptionsInput, placeholder, option, }) {
+    const selectOptions = selectOptionsInput?.map(toSelectOption);
     const id = useId();
     const { isDark } = option ?? {};
     const { setIsOwn, setIsOwnId } = useActionStore();
@@ -23,7 +25,7 @@ export default function SelectLG({ state, selectOptions, placeholder, option, })
     const [search, setSearch] = useState("");
     const [isOpen, setIsOpen] = useState(false);
     const [isHover, setIsHover] = useState(false);
-    const [filteredOptions, setFilterdOptions] = useState([]);
+    const [filteredOptions, setFilterdOptions] = useState();
     const [index, setIndex] = useState();
     const listRef = useRef(null);
     const itemRefs = useRef([]);
@@ -34,8 +36,8 @@ export default function SelectLG({ state, selectOptions, placeholder, option, })
         if (typeof index === "undefined")
             return setIndex(0);
         if (e.key === "Enter") {
-            setText(filteredOptions[index][1]);
-            return setValue(filteredOptions[index][0]);
+            setText(filteredOptions[index]?.title);
+            return setValue(filteredOptions[index]?.value);
         }
         if (e.key === "ArrowDown") {
             setIndex((index + 1) % filteredOptions.length);
@@ -45,7 +47,7 @@ export default function SelectLG({ state, selectOptions, placeholder, option, })
         }
     };
     useEffect(() => {
-        setFilterdOptions(selectOptions?.filter(([_, text]) => text.includes(search)));
+        setFilterdOptions(selectOptions?.filter(({ title }) => title.includes(search)));
     }, [search, selectOptions]);
     useEffect(() => {
         if (typeof index === "number" && itemRefs.current[index]) {
@@ -103,12 +105,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(false)), 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.value)?.title })) : (_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: () => {
+                return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: filteredOptions?.map(({ value, title }, order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
                                 setValue(value);
-                                setText(text);
+                                setText(title);
                                 return setIsOpen(false);
-                            }, className: cn(label(order === index)), children: text }) }, id + value))) })));
+                            }, className: cn(label(order === index)), children: title }) }, id + value))) })));
             })] }));
 }

package/widget/template/Select/Select.d.ts

@@ -1,2 +1,2 @@
 import { SelectWidget } from "../../../interface";
-export default function Select<T>({ state, selectOptions, placeholder, option, }: SelectWidget<T>): import("react/jsx-runtime").JSX.Element;
+export default function Select<T>({ state, selectOptions: selectOptionsInput, placeholder, option, }: SelectWidget<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Select.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
+import { toSelectOption, } from "../../../interface";
 import { cn } from "../../../util";
 import { useTransition, animated } from "react-spring";
 import { useActionStore } from "../../../store";
@@ -13,7 +14,8 @@ const widthSize = {
 const heightSize = {
     xs: "h-6.5",
 };
-export default function Select({ state, selectOptions, placeholder, option, }) {
+export default function Select({ state, selectOptions: selectOptionsInput, placeholder, option, }) {
+    const selectOptions = selectOptionsInput?.map(toSelectOption);
     const id = useId();
     const { setIsOwn, setIsOwnId } = useActionStore();
     const [value, setValue] = state;
@@ -21,7 +23,7 @@ export default function Select({ state, selectOptions, placeholder, option, }) {
     const [search, setSearch] = useState("");
     const [isOpen, setIsOpen] = useState(false);
     const [isHover, setIsHover] = useState(false);
-    const [filteredOptions, setFilterdOptions] = useState([]);
+    const [filteredOptions, setFilterdOptions] = useState();
     const [index, setIndex] = useState();
     useFlag({ state: [false, setIsOpen], safe: "overlay" });
     const onKeyDown = (e) => {
@@ -30,8 +32,8 @@ export default function Select({ state, selectOptions, placeholder, option, }) {
         if (typeof index === "undefined")
             return setIndex(0);
         if (e.key === "Enter") {
-            setText(filteredOptions[index][1]);
-            return setValue(filteredOptions[index][0]);
+            setText(filteredOptions[index]?.title);
+            return setValue(filteredOptions[index]?.value);
         }
         if (e.key === "ArrowDown")
             return setIndex((index + 1) % filteredOptions.length);
@@ -39,9 +41,9 @@ export default function Select({ state, selectOptions, placeholder, option, }) {
             return setIndex((index - 1 + filteredOptions.length) % filteredOptions.length);
     };
     useEffect(() => {
-        setFilterdOptions(selectOptions?.filter(([_, text]) => text.includes(search)));
+        setFilterdOptions(selectOptions?.filter(({ title }) => text.includes(title)));
     }, [search, selectOptions]);
-    // scrollIntoView
+    // scrollIntoViews
     const listRef = useRef(null);
     const itemRefs = useRef([]);
     useEffect(() => {
@@ -107,12 +109,12 @@ export default function Select({ state, selectOptions, placeholder, option, }) {
             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), children: selectOptions?.find((option) => value === option.value)?.title })) : (_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: () => {
+                return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: filteredOptions?.map(({ value, title }, order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
                                 setValue(value);
-                                setText(text);
+                                setText(title);
                                 return setIsOpen(false);
-                            }, className: cn(label, order === index ? "w-full" : "w-auto"), children: text }) }, id + value))) })));
+                            }, className: cn(label, order === index ? "w-full" : "w-auto"), children: title }) }, id + value))) })));
             })] }));
 }

package/widget/template/Select/Switch.d.ts

@@ -1,3 +1,3 @@
 import { SelectSwitchProps } from "../../../interface/widget/Select";
-declare function SelectSwitch<T>({ state, selectOptions, option, }: SelectSwitchProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SelectSwitch<T>({ state, selectOptions: selectOptionsInput, option, }: SelectSwitchProps<T>): import("react/jsx-runtime").JSX.Element;
 export default SelectSwitch;

package/widget/template/Select/Switch.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toSelectOption, } from "../../../interface/widget/Select";
 import { cn } from "../../../util";
 const paddingSize = {
     md: "p-1.5",
@@ -20,7 +21,8 @@ const textSize = {
     md: "text-sm",
     lg: "text-base",
 };
-function SelectSwitch({ state, selectOptions, option, }) {
+function SelectSwitch({ state, selectOptions: selectOptionsInput, option, }) {
+    const selectOptions = selectOptionsInput.map(toSelectOption);
     const { text, size, className } = option ?? {};
     const container = {
         sizes: `${widthSize[size ?? "md"]} ${heightSize[size ?? "md"]}`,