@edu-tosel/design 1.0.78 → 1.0.80

package/card/design/TableCard.design.js

@@ -5,6 +5,7 @@ import { cn, sortByOrder } from "../../util";
 import Card from "./Card.design";
 import { DataField, Action, Row, Lock } from "../..";
 import { Obstacle } from "../..";
+import { v4 } from "uuid";
 export default function TableCardDesign({ dataSet, dataField, option, }) {
     const { width, height, padding, boundary, isDisabled, disabledScript } = option ?? {};
     const { order } = useActionStore();
@@ -21,7 +22,12 @@ export default function TableCardDesign({ dataSet, dataField, option, }) {
             height: height ?? "3xl",
             overflow: "overflow-y-scroll overflow-x-hidden",
             noPadding: true,
-        }, children: _jsxs(Action.Replace, { actions: dataSet?.replaces, children: [sortByOrder({ items: dataSet?.items, orders }).map((item, index) => dataSet.renderItem ? (dataSet.renderItem(item)) : (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, id + index))), _jsx(Obstacle, { disabled: isDisabled }), _jsx(Obstacle.Blur, { disabled: isDisabled, option: {
+        }, children: _jsxs(Action.Replace, { actions: dataSet?.replaces, children: [sortByOrder({ items: dataSet?.items, orders }).map((item) => {
+                    const uuid = v4();
+                    if (dataSet.renderItem)
+                        return dataSet.renderItem(item);
+                    return (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, uuid));
+                }), _jsx(Obstacle, { disabled: isDisabled }), _jsx(Obstacle.Blur, { disabled: isDisabled, option: {
                         position: "top-10",
                     }, children: _jsx(Lock, { script: disabledScript }) })] }) }));
 }

package/interface/Action.d.ts

@@ -50,6 +50,6 @@ export interface RowElementProps<T> {
     item: T;
     entry: [string, unknown];
     stateAction?: (item: T) => void;
-    data?: DataFieldType;
+    data?: DataFieldType<T>;
 }
 export {};

package/interface/Data.d.ts

@@ -12,15 +12,15 @@ export type DataSet<T = any> = {
     onClick?: OnClick<T>;
     replaces?: Replace[];
 };
-type DataFieldProps = {
+type DataFieldProps<T> = {
     title: string | number;
     size: string | number;
-    data?: DataFieldType;
+    data?: DataFieldType<T>;
 };
 export type DataField<T = any> = Partial<{
-    [p in keyof T]: Partial<DataFieldProps>;
+    [p in keyof T]: Partial<DataFieldProps<T>>;
 }>;
-export type DataFieldType = DataFiledTypeText | DataSelectRoll | DataButton;
+export type DataFieldType<T> = DataFiledTypeText | DataSelectRoll | DataButton<T>;
 type DataFiledTypeText = {
     type: "text";
 };
@@ -37,15 +37,15 @@ type DataSelectRoll = {
     options: SelectRollOption[];
 };
 declare function isDataSelectRoll(obj: any): obj is DataSelectRoll;
-type DataButton = {
+type DataButton<T> = {
     type: "button";
-    onClick: OnClick;
+    onClick: OnClick<T>;
     hoverTitle?: string;
     option?: {
         text?: string;
         background?: string;
     };
 };
-declare function isDataButton(obj: any): obj is DataButton;
+declare function isDataButton<T>(obj: any): obj is DataButton<T>;
 export type { DataFiledTypeText, DataSelectRoll };
 export { isDataSelectRoll, isDataButton };

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/layout/design/DataField.design.d.ts

@@ -1,2 +1,2 @@
 import { DataFieldProps } from "../../interface";
-export default function DataFieldDesign<T extends Record<string, any>>({ id, dataField, option, }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function DataFieldDesign<T = any>({ id, dataField, option, }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/design/DataField.design.js

@@ -23,7 +23,8 @@ export default function DataFieldDesign({ id, dataField, option, }) {
         sizes: container.sizes,
     };
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: dataField &&
-                    Object.keys(dataField).map((key) => (_jsx("div", { className: widthSizes[dataField[key]?.size], children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center", children: [_jsx("div", { children: dataField[key]?.title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
+                    Object.keys(dataField).map((key) => (_jsx("div", { className: widthSizes[dataField[key]
+                            ?.size], children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center", children: [_jsx("div", { children: dataField[key]?.title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
                                         if (orderBy === key) {
                                             if (orderHow === "asc")
                                                 return _jsx(SVG.Direction.Asc, {});

package/layout/design/Row.design/index.js

@@ -45,6 +45,6 @@ function RowElement(props) {
         return _jsx(SelectRoll, { item: item, entry: props.entry, data: data });
     }
     if (isDataButton(data))
-        return (_jsx(Label.Button, { title: item[key], hoverTitle: data.hoverTitle, onClick: data.onClick, option: { ...data.option, width: "xs", height: "xs" } }));
+        return (_jsx(Label.Button, { title: item[key], hoverTitle: data.hoverTitle, onClick: () => data.onClick(item), option: { ...data.option, width: "xs", height: "xs" } }));
     return _jsx(_Fragment, { children: item[key] });
 }

package/layout/template/DataField.d.ts

@@ -1,5 +1,5 @@
 import { DataFieldProps } from "../../interface";
-declare function Board<T>({ id, dataField }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Board<T extends Record<string, any>>({ id, dataField, }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 declare function Card<T>({ id, dataField }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 declare const DataField: {
     Board: typeof Board;

package/layout/template/DataField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataFieldDesign from "../design/DataField.design";
-function Board({ id, dataField }) {
+function Board({ id, dataField, }) {
     return (_jsx(DataFieldDesign, { id: id, dataField: dataField, option: {
             position: "fixed top-34 xl:top-0 left-0 xl:relative z-20",
             padding: "px-2 xs:px-4 xl:px-7.5",

package/layout/template/Row.d.ts

@@ -1,11 +1,11 @@
 import { RowProps } from "../../interface";
 declare function Row<T>({ item, dataField, onClick, buttons, dot }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Row {
-    var Card: <T>({ item, dataField, stateAction, onClick, buttons, height, noPadding, noHover, dot, }: Omit<RowProps<T>, "option"> & {
+    var Board: <T>({ item, dataField, onClick, buttons, dot, option, }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
+    var Card: <T>({ item, dataField, stateAction, onClick, buttons, height, noPadding, noHover, dot, option, }: RowProps<T> & {
         height?: string | undefined;
         noPadding?: boolean | undefined;
         noHover?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    var Board: <T>({ item, dataField, onClick, buttons, dot, option, }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
 }
 export default Row;

package/layout/template/Row.js

@@ -18,15 +18,16 @@ function Board({ item, dataField, onClick, buttons, dot, option, }) {
             text: "text-xl",
         } }, id));
 }
-function Card({ item, dataField, stateAction, onClick, buttons, height, noPadding, noHover, dot, }) {
+function Card({ item, dataField, stateAction, onClick, buttons, height, noPadding, noHover, dot, option, }) {
     const id = useId();
     return (_jsx(RowDesign, { onClick: onClick, item: item, stateAction: stateAction, dataField: dataField, buttons: buttons, dot: dot, option: {
+            ...option,
             size: `w-full ${height ?? "h-15"}`,
             padding: !noPadding ? "px-2 xs:px-4 xl:px-5" : "",
             text: "text-base",
             noHover,
         } }, id));
 }
-Row.Card = Card;
 Row.Board = Board;
+Row.Card = Card;
 export default Row;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.78",
+  "version": "1.0.80",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -29,6 +29,7 @@
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.2.2",
+    "uuid": "^10.0.0",
     "zustand": "^4.5.0"
   },
   "devDependencies": {}

package/version.txt

@@ -1 +1 @@
-1.0.78
+1.0.80

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"]}`,