@edu-tosel/design 1.0.65 → 1.0.67

package/layout/design/DataField.design.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { useActionStore } from "../../store";
+import { widthSizes } from "../../asset/sizes";
+import SVG from "../../asset/SVG";
 const heightSize = {
     sm: "h-10",
     md: "h-13.75",
@@ -14,21 +16,21 @@ export default function DataFieldDesign({ id, dataField, option, }) {
         displays: "flex items-center",
         sizes: `w-full ${heightSize[height ?? "md"]}`,
         paddings: padding && padding,
-        styles: "bg-white box-shadow-sm font-pretendard-bold",
+        styles: "bg-white box-shadow-sm font-pretendard-medium",
     };
     const block = {
         displays: "xl:hidden block ",
         sizes: container.sizes,
     };
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: dataField &&
-                    Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100`, 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", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.15859 15.0437C6.7079 15.9134 7.27152 17 8.17239 17H15.8279C16.7282 17 17.2919 15.9134 16.8417 15.0437L13.0145 7.65229C12.5638 6.78257 11.4365 6.78257 10.9858 7.65229L7.15859 15.0437Z", fill: "#105652" }) }, id + key + "asc"));
+                                                return _jsx(SVG.Direction.Asc, {});
                                             else if (orderHow === "desc")
-                                                return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.8414 8.95628C17.2921 8.08657 16.7285 7 15.8276 7L8.1721 7C7.27176 7 6.70813 8.08657 7.15831 8.95628L10.9855 16.3477C11.4362 17.2174 12.5635 17.2174 13.0142 16.3477L16.8414 8.95628Z", fill: "#105652" }) }, id + key + "asc"));
+                                                return _jsx(SVG.Direction.Desc, {});
                                             else
-                                                return "";
+                                                return null;
                                         }
                                     }) })] }) }, id + key))) }), position && _jsx("div", { className: cn(block) })] }));
 }

package/layout/design/Row.design/SelectRoll.d.ts

@@ -0,0 +1,7 @@
+import { DataSelectRoll } from "../../../interface";
+interface SelectRollProps {
+    item: string | number;
+    data: DataSelectRoll;
+}
+export default function SelectRoll({ item, data }: SelectRollProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/design/Row.design/SelectRoll.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../../util";
+export default function SelectRoll({ item, data }) {
+    const { options } = data ?? {};
+    const [isHover, setIsHover] = useState(false);
+    const keys = options?.map((option) => option.key);
+    const values = options?.map((option) => option.value);
+    const [index, setIndex] = useState(keys?.indexOf(String(item)) ?? 0);
+    const container = {
+        styles: "group cursor-default",
+        displays: "flex justify-center",
+        sizes: "w-[120px] ",
+    };
+    const body = {
+        positions: "relative",
+        displays: "flex justify-center items-center",
+        backgrounds: options[index].option?.background,
+        texts: options[index].option?.text,
+        sizes: "w-[120px] h-[30px]",
+        transitions: "duration-300",
+        hoverAct: isHover ? "w-[120px]" : "w-[100px]",
+        fonts: "text-[12px]",
+        styles: "rounded-[6px] leading-none overflow-hidden",
+    };
+    const toggle = {
+        positions: "absolute ",
+        displays: "flex justify-center items-center",
+        sizes: "w-[20px] h-full",
+        styles: "duration-300 text-gray-dark",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), onMouseLeave: () => setIsHover(false), onMouseEnter: () => setIsHover(true), children: [values[index], _jsx("button", { onClick: () => {
+                        if (index > 0)
+                            setIndex(index - 1);
+                    }, className: cn(toggle, "-left-4 group-hover:left-1"), children: "-" }), _jsx("button", { onClick: () => {
+                        if (index < keys.length - 1)
+                            setIndex(index + 1);
+                    }, className: cn(toggle, "-right-4 group-hover:right-1"), children: "+" })] }) }));
+}

package/layout/design/{Row.design.d.ts → Row.design/index.d.ts}

@@ -1,2 +1,2 @@
-import { RowProps } from "../../interface";
+import { RowProps } from "../../../interface";
 export default function RowDesign<T>({ item, dataField, option, onClick, buttons, dot, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/design/{Row.design.js → Row.design/index.js}

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId } from "react";
-import { ColorSet } from "../../interface";
-import { cn } from "../../util";
-import { Label } from "../../widget";
-import { widthSizes } from "../../asset/sizes";
+import { ColorSet, isDataSelectRoll, } from "../../../interface";
+import { cn } from "../../../util";
+import { Label } from "../../../widget";
+import { widthSizes } from "../../../asset/sizes";
+import SelectRoll from "./SelectRoll";
 export default function RowDesign({ item, dataField, option, onClick, buttons, dot, }) {
     const { size, padding, text, noHover, className, isPointer } = option ?? {};
     const id = useId();
@@ -27,10 +28,16 @@ export default function RowDesign({ item, dataField, option, onClick, buttons, d
         styles: "rounded-full",
     };
     return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [typeof dot !== "undefined" && _jsx("div", { className: cn(flagBox) }), dataField &&
-                Object.keys(dataField).map((key) => (_jsx("div", { className: cn(widthSizes[dataField[key]?.size], itemBox), children: String(item[key]) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
+                Object.keys(dataField).map((key) => (_jsx("div", { className: cn(widthSizes[dataField[key]?.size], itemBox), children: _jsx(RowElement, { data: dataField[key]?.data, item: item[key] }) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
                         background: option?.background ?? "bg-crimson-dark",
                         text: option?.text ?? "text-white",
                         width: "xs",
                         height: "xs",
                     } }, id + title))) })] }));
 }
+function RowElement(props) {
+    const { data } = props;
+    if (isDataSelectRoll(data))
+        return _jsx(SelectRoll, { item: props.item, data: data });
+    return _jsx(_Fragment, { children: props.item });
+}

package/layout/template/DataField.js

@@ -9,7 +9,7 @@ function Board({ id, dataField }) {
 function Card({ id, dataField }) {
     return (_jsx(DataFieldDesign, { id: id, dataField: dataField, option: {
             height: "sm",
-            padding: "px-2 xs:px-4 xl:px-7.5",
+            padding: "px-2 xs:px-4 xl:px-5",
         } }));
 }
 const DataField = {

package/layout/template/Gallery.d.ts

@@ -5,6 +5,8 @@ export default function Gallery({ action, children, option, }: {
     };
     children: React.ReactNode;
     option?: {
-        tabTextColor?: string;
+        text?: string;
+        background?: string;
+        boundary?: string;
     };
 }): import("react/jsx-runtime").JSX.Element;

package/layout/template/Gallery.js

@@ -3,12 +3,14 @@ import Action from "./Action";
 import Tab from "./Tab";
 import { cn } from "../../util";
 export default function Gallery({ action, children, option, }) {
-    const { tabTextColor } = option ?? {};
+    const { text, background, boundary } = option ?? {};
     const tabBox = {
         positions: "xl:absolute xl:-bottom-18 xl:left-0 z-5",
     };
     return (_jsxs("div", { className: "relative w-full flex", children: [_jsx(Action.Replace, { actions: action?.replaces, children: _jsx(Action.Show, { actions: action?.shows, children: children }) }), action?.tabs && (_jsx(Tab, { tabs: action?.tabs, option: {
                     className: cn(tabBox),
-                    text: tabTextColor,
+                    text,
+                    background,
+                    boundary,
                 } }))] }));
 }

package/layout/template/Row.js

@@ -22,7 +22,7 @@ function Card({ item, dataField, onClick, buttons, height, noPadding, noHover, d
     const id = useId();
     return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, dot: dot, option: {
             size: `w-full ${height ?? "h-15"}`,
-            padding: !noPadding ? "px-2 xs:px-4 xl:px-7.5" : "",
+            padding: !noPadding ? "px-2 xs:px-4 xl:px-5" : "",
             text: "text-base",
             noHover,
         } }, id));

package/layout/template/Tab.d.ts

@@ -5,6 +5,7 @@ interface Options {
     className?: string;
     width?: Size;
     height?: Size;
+    boundary?: string;
 }
 export default function Tab({ tabs, option, state, }: {
     tabs: (Button & {

package/layout/template/Tab.js

@@ -10,7 +10,7 @@ const heightSize = {
     lg: "h-9",
 };
 export default function Tab({ tabs, option, state, }) {
-    const { className, background, text, width, height } = option ?? {};
+    const { className, background, boundary, text, width, height } = option ?? {};
     const [tabsSelection, setTabsSelection] = state
         ? state
         : useState(tabs.map((_, i) => i === 0));
@@ -20,7 +20,7 @@ export default function Tab({ tabs, option, state, }) {
         displays: "hidden xl:flex xl:items-center xl:gap-2.5",
         sizes: "w-auto",
         paddings: "p-2.5",
-        backgrounds: background ?? "bg-white/30",
+        backgrounds: boundary ?? "bg-white/30",
         styles: "rounded-xl ",
     };
     const button = {
@@ -32,6 +32,8 @@ export default function Tab({ tabs, option, state, }) {
                 !isStatic &&
                     setTabsSelection(tabsSelection.map((_, i) => i === index));
                 return onClick && onClick();
-            }, className: cn(button, `${!isStatic && tabsSelection[index] && "bg-white rounded-2xl"}`, `${isStatic &&
+            }, className: cn(button, `${!isStatic &&
+                tabsSelection[index] &&
+                `${background ?? "bg-white"} rounded-2xl`}`, `${isStatic &&
                 `${option?.background ?? "bg-green-dark"} ${option?.text ?? "text-white"} `}`), children: title }, title))) }));
 }

package/modal/template/Confirm/Switch.d.ts

@@ -1,11 +1,7 @@
-import { SwitchProps } from "../../../interface";
 import { ConfirmModalProps } from "../../../interface/Modal";
+import { SelectSwitchProps } from "../../../interface/widget/Select";
 interface SwitchModalProps<T> extends ConfirmModalProps {
-    switch: SwitchProps<T>;
+    switch: SelectSwitchProps<T>;
 }
 declare function SwitchModal<T>(props: SwitchModalProps<T>): import("react/jsx-runtime").JSX.Element;
-declare namespace SwitchModal {
-    var Handle: typeof SwitchModalHandle;
-}
-declare function SwitchModalHandle<T>(props: Omit<SwitchModalProps<T>, "display">): import("react/jsx-runtime").JSX.Element;
 export default SwitchModal;

package/modal/template/Confirm/Switch.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Switch } from "../../../widget";
+import { Select } from "../../../widget";
 import ConfirmModalDesign from "../../design/ConfirmModal.design";
 import { cn } from "../../../util";
 function SwitchModalDesign(props) {
@@ -10,10 +10,6 @@ function SwitchModalDesign(props) {
     return (_jsx(ConfirmModalDesign, { ...props, children: _jsx("div", { className: cn(container), children: props.children }) }));
 }
 function SwitchModal(props) {
-    return (_jsx(SwitchModalDesign, { ...props, children: _jsxs(_Fragment, { children: [_jsx(Switch, { ...props.switch }), props.children] }) }));
+    return (_jsx(SwitchModalDesign, { ...props, children: _jsxs(_Fragment, { children: [_jsx(Select.Switch, { ...props.switch }), props.children] }) }));
 }
-function SwitchModalHandle(props) {
-    return (_jsx(SwitchModalDesign, { ...props, children: _jsxs(_Fragment, { children: [_jsx(Switch.Handle, { ...props.switch }), props.children] }) }));
-}
-SwitchModal.Handle = SwitchModalHandle;
 export default SwitchModal;

package/package.json

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

package/tailwind.config.ts

@@ -163,6 +163,7 @@ export default {
         22.5: "5.625rem",
         23: "5.75rem",
         23.25: "5.8125rem",
+        23.5: "5.875rem",
         23.75: "5.9375rem",
         25: "6.25rem",
         25.75: "6.4375rem",
@@ -209,6 +210,7 @@ export default {
         75: "18.75rem",
         76: "19rem",
         78: "20rem",
+        81: "20.25rem",
         82: "20.5rem",
         84: "21rem",
         85: "21.25rem",

package/version.txt

@@ -1 +1 @@
-1.0.65
+1.0.67

package/widget/design/Label.design.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
-import Obstacle from "../template/Obstacle";
+import { Obstacle } from "../..";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",
@@ -10,6 +10,7 @@ const widthSize = {
 const heightSize = {
     xs: "h-6.25",
     sm: "h-11.25",
+    md: "h-12.25",
 };
 export default function LabelDesign({ title, onClick, option, hoverState, }) {
     const [hover, setHover] = hoverState ?? [false, () => { }];

package/widget/design/Obstacle.design.d.ts

@@ -0,0 +1,2 @@
+import { ObstacleProps } from "../../interface/widget/Obstacle";
+export default function ObstacleDesign({ disabled, children, option, }: ObstacleProps): false | import("react/jsx-runtime").JSX.Element | undefined;

package/widget/design/Obstacle.design.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+export default function ObstacleDesign({ disabled, children, option, }) {
+    const { position, background, size } = option ?? {};
+    const obstacle = {
+        default: "absolute",
+        displays: "flex justify-center items-center",
+        positions: position ?? "top-0 left-0",
+        sizes: "w-full h-full",
+        background: background ?? "bg-white/30",
+    };
+    return (disabled && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle), children: children })));
+}

package/widget/index.d.ts

@@ -1,7 +1,9 @@
 export { default as Input } from "./template/Input";
+export { default as Counter } from "./template/Counter";
 export { default as Select } from "./template/Select";
 export { default as DatePicker } from "./template/DatePicker";
 export { default as CheckBox } from "./template/CheckBox";
 export { default as Label } from "./template/Label";
 export { default as Switch } from "./template/Switch";
 export { default as Toggle } from "./template/Toggle";
+export { default as Obstacle } from "./template/Obstacle";

package/widget/index.js

@@ -1,7 +1,9 @@
 export { default as Input } from "./template/Input";
+export { default as Counter } from "./template/Counter";
 export { default as Select } from "./template/Select";
 export { default as DatePicker } from "./template/DatePicker";
 export { default as CheckBox } from "./template/CheckBox";
 export { default as Label } from "./template/Label";
 export { default as Switch } from "./template/Switch";
 export { default as Toggle } from "./template/Toggle";
+export { default as Obstacle } from "./template/Obstacle";

package/widget/template/Counter.d.ts

@@ -0,0 +1,19 @@
+import { Titles } from "../../interface";
+interface Count {
+    title: string;
+    count: number;
+    option?: {
+        background?: string;
+        text?: string;
+    };
+}
+interface CounterProps {
+    titles: Titles;
+    counts: Count[];
+    option?: {
+        position?: string;
+        boundary?: string;
+    };
+}
+export default function Counter({ titles, counts, option }: CounterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/widget/template/Counter.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+export default function Counter({ titles, counts, option }) {
+    const { position, boundary } = option ?? {};
+    const container = {
+        default: "absolute",
+        displays: "flex justify-between items-end",
+        sizes: "w-full h-15",
+        positions: position ?? "top-5 right-0",
+        boundaries: boundary ?? "px-5",
+    };
+    const titleBox = {};
+    const countBox = {
+        displays: "flex gap-x-5",
+        sizes: "h-full",
+    };
+    const total = {
+        sizes: "w-12 h-full",
+        displays: "flex flex-col items-center justify-between",
+        backgrounds: "bg-gray-light",
+        styles: "rounded-[4px] p-1",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(titleBox), children: titles.title }), _jsxs("div", { className: cn(countBox), children: [_jsx("div", { className: "flex gap-x-2.5 h-full", children: counts?.map((count) => (_jsx(CountBox, { ...count }, count.title))) }), _jsxs("div", { className: cn(total), children: [_jsx("div", { className: "text-xs text-gray-medium leading-tight", children: "\uC804\uCCB4" }), _jsx("div", { className: "font-pretendard-bold w-full leading-none text-end ", children: Object.values(counts)
+                                    .map((count) => count.count)
+                                    .reduce((acc, cur) => acc + cur, 0) })] })] })] }));
+}
+function CountBox({ title, count, option }) {
+    const { background, text } = option ?? {};
+    const container = {
+        displays: "flex flex-col items-center justify-between",
+        sizes: "w-12 h-full",
+        boundaries: "pb-1 pr-1",
+    };
+    const titleBox = {
+        displays: "flex justify-center items-center",
+        fonts: "text-xs leading-none",
+        sizes: "w-12 h-5.5",
+        backgrounds: background ?? "bg-gray-light",
+        texts: text ?? "text-gray-medium",
+        styles: "rounded-[4px]",
+    };
+    const countBox = {
+        fonts: "font-pretendard-bold text-end leading-none",
+        sizes: "w-full",
+        boundaries: "pr-1",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(titleBox), children: title }), _jsx("div", { className: cn(countBox), children: count })] }));
+}

package/widget/template/Input/Form.d.ts

@@ -1,2 +1,2 @@
 import { InputWidget } from "../../../interface";
-export default function LG({ state, placeholder, isValid, type, label, maxLength, }: InputWidget): import("react/jsx-runtime").JSX.Element;
+export default function LG({ state, placeholder, isValid, type, label, maxLength, disabled, }: InputWidget): import("react/jsx-runtime").JSX.Element;

package/widget/template/Input/Form.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { cn, gradient } from "../../../util";
 import Label from "../Label";
-export default function LG({ state, placeholder, isValid, type, label, maxLength, }) {
+import Obstacle from "../Obstacle";
+export default function LG({ state, placeholder, isValid, type, label, maxLength, disabled, }) {
     const [value, setValue] = state;
     const [onFocus, setOnFocus] = useState(false);
     const ref = useRef(null);
@@ -44,5 +45,5 @@ export default function LG({ state, placeholder, isValid, type, label, maxLength
                     background: label.option?.background ?? gradient.bg.greenToRed,
                     text: label.option?.text ?? "text-white",
                     ...label.option,
-                } }))] }));
+                } })), _jsx(Obstacle, { disabled: disabled })] }));
 }

package/widget/template/Obstacle/index.d.ts

@@ -0,0 +1,6 @@
+import { ObstacleProps } from "../../../interface/widget/Obstacle";
+declare function Obstacle(props: ObstacleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Obstacle {
+    var Blur: (props: ObstacleProps) => import("react/jsx-runtime").JSX.Element;
+}
+export default Obstacle;

package/widget/template/Obstacle/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ObstacleDesign from "../../design/Obstacle.design";
+function Obstacle(props) {
+    return _jsx(ObstacleDesign, { ...props });
+}
+function Blur(props) {
+    return (_jsx(ObstacleDesign, { ...props, option: {
+            background: "bg-white/30 backdrop-blur-sm",
+            position: props.option?.position ?? "top-0 left-0",
+        } }));
+}
+Obstacle.Blur = Blur;
+export default Obstacle;

package/widget/template/Pagination.d.ts

@@ -0,0 +1,7 @@
+import { State } from "../../interface";
+interface PaginationProps<T> {
+    state: State<number>;
+    items?: T[];
+}
+export default function Pagination<T>({ state, items }: PaginationProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/widget/template/Pagination.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+import SVG from "../../asset/SVG";
+export default function Pagination({ state, items }) {
+    const [page, setPage] = state;
+    const container = {
+        displays: "flex items-center justify-between",
+        sizes: "w-23.5 h-6.25",
+        backgrounds: "bg-gray-dark",
+        boundaries: "rounded-full px-2.5",
+        fonts: "text-xs",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => {
+                    if (page > 1)
+                        setPage(page - 1);
+                } }), _jsxs("div", { className: "flex items-center gap-x-[3px] text-white", children: [page, _jsx("div", { className: "text-gray-medium text-base font-pretendard-bold", children: "/" }), items ? items.length : 1] }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => {
+                    if (items && items.length > page)
+                        setPage(page + 1);
+                } })] }));
+}

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

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

package/widget/template/Select/Handle.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { widthSizes } from "../../../asset/sizes";
+import { cn, gradient } from "../../../util";
+export default function SelectHandle({ state, options, option, }) {
+    const { className } = option ?? {};
+    const length = options?.length;
+    const valueIndex = Object.values(options)
+        .map(({ value }) => value)
+        ?.indexOf(state?.[0]);
+    const container = {
+        positions: "relative",
+        sizes: "w-102.5 h-10",
+        styles: "rounded-full bg-gray-light p-1.25",
+        className,
+    };
+    const area = {
+        sizes: `${widthSizes[Math.round(((valueIndex + 1) / length) * 100)]} h-7.5`,
+        displays: "flex justify-end",
+        background: gradient.bg.greenToRed,
+        styles: "rounded-full p-1.25",
+        animations: "duration-200",
+    };
+    const handle = {
+        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 state?.[1](value);
+                    }, className: "flex flex-1 h-10 " }, value))) })] }));
+}

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

@@ -0,0 +1,10 @@
+interface SwipeProps<T> {
+    title: string;
+    children: React.ReactNode;
+    selectOptions: {
+        title: string;
+        value: T;
+    }[];
+}
+export default function Swipe<T>({ title, children, selectOptions, }: SwipeProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/widget/template/Select/Swipe.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Pagination from "../Pagination";
+import { cn } from "../../../util";
+export default function Swipe({ title, children, selectOptions, }) {
+    const page = useState(1);
+    const container = {
+        displays: "flex flex-col gap-y-3",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("div", { children: title }), _jsx(Pagination, { state: page, items: selectOptions })] }), children] }));
+}

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

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

package/widget/template/Select/Switch.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+const paddingSize = {
+    md: "p-1.5",
+    lg: "p-2.5",
+};
+const widthSize = {
+    md: "w-81",
+    lg: "w-100",
+};
+const heightSize = {
+    md: "h-10.5",
+    lg: "h-20",
+};
+const gapSize = {
+    md: "gap-x-1.5",
+    lg: "gap-x-2.5",
+};
+const textSize = {
+    md: "text-sm",
+    lg: "text-base",
+};
+function SelectSwitch({ state, selectOptions, option, }) {
+    const { text, size, className } = option ?? {};
+    const container = {
+        sizes: `${widthSize[size ?? "md"]} ${heightSize[size ?? "md"]}`,
+        displays: `flex ${gapSize[size ?? "md"]}`,
+        paddings: paddingSize[size ?? "md"],
+        styles: "rounded-full bg-gray-light",
+        className,
+    };
+    const button = (flag) => ({
+        displays: "flex flex-1 gap-x-3 justify-center items-center",
+        backgrounds: flag ? "bg-white" : "bg-transparent",
+        text,
+        textSizes: textSize[size ?? "md"],
+        styles: "rounded-full ",
+    });
+    return (_jsx("div", { className: cn(container), children: selectOptions?.map(({ value, icon, title }) => {
+            return (_jsxs("button", { onClick: () => state[1](value), className: cn(button(value === state[0])), children: [icon && _jsx("img", { src: icon }), _jsx("div", { children: title })] }));
+        }) }));
+}
+export default SelectSwitch;

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

@@ -0,0 +1,16 @@
+import { State } from "../../../interface";
+interface SelectTagProps<T> {
+    state: State<T[]>;
+    selectOptions: {
+        title: string;
+        value: T;
+    }[];
+    selectHow?: "one" | "plural";
+    option?: {
+        className?: string;
+        background?: string;
+        text?: string;
+    };
+}
+export default function SelectTag<T>(props: SelectTagProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};