@edu-tosel/design 1.0.66 → 1.0.68

package/card/design/TableCard.design.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { useActionStore } from "../../store";
 import { cn, sortByOrder } from "../../util";
 import Card from "./Card.design";
-import { DataField, Action, Row } from "../..";
+import { DataField, Action, Row, Lock } from "../..";
+import { Obstacle } from "../..";
 export default function TableCardDesign({ dataSet, dataField, option, }) {
-    const { width, height, padding, boundary } = option ?? {};
+    const { width, height, padding, boundary, isDisabled, disabledScript } = option ?? {};
     const { order } = useActionStore();
     const id = useId();
     const orders = order[id] ?? [];
@@ -20,5 +21,7 @@ export default function TableCardDesign({ dataSet, dataField, option, }) {
             height: height ?? "3xl",
             overflow: "overflow-y-scroll overflow-x-hidden",
             noPadding: true,
-        }, children: _jsx(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))) }) }));
+        }, 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: {
+                        position: "top-10",
+                    }, children: _jsx(Lock, { script: disabledScript }) })] }) }));
 }

package/card/template/ConfirmCard/index.d.ts

@@ -4,6 +4,9 @@ interface ConfirmCardProps {
     action?: Omit<ActionProps, "shows">;
     children?: React.ReactNode;
     buttons: [LabelWidget, LabelWidget];
+    option?: {
+        className?: string;
+    };
 }
 export default function ConfirmCard(props: ConfirmCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/card/template/ConfirmCard/index.js

@@ -3,17 +3,17 @@ import { cn } from "../../../util";
 import { LineBreaks, Action, Label } from "../../..";
 import CardDesign from "../../design/Card.design";
 export default function ConfirmCard(props) {
-    const { action } = props ?? {};
+    const { action, option } = props ?? {};
     return (_jsxs(CardDesign, { option: {
             width: "md",
             height: "lg",
             className: "p-5",
-        }, children: [_jsx(Header, { titles: props.titles }), _jsx(Action.Replace, { actions: action?.replaces, children: props.children }), _jsx("div", { className: "absolute bottom-5 left-5 flex justify-between gap-2.5", children: props.buttons.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: { ...option, width: "lg", height: "sm" } }, title))) })] }));
+        }, children: [_jsx(Header, { titles: props.titles }), _jsx("div", { className: option?.className, children: _jsx(Action.Replace, { actions: action?.replaces, children: props.children }) }), _jsx("div", { className: "absolute bottom-5 left-5 flex justify-between gap-2.5", children: props.buttons.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: { ...option, width: "lg", height: "sm" } }, title))) })] }));
 }
 function Header({ titles }) {
     const titleBox = {
         displays: "flex flex-col items-end",
         sizes: "w-full",
     };
-    return (_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx(LineBreaks, { texts: titles.subtitle, className: "mt-5 text-base leading-none text-end font-pretendard-bold" })] }));
+    return (_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx(LineBreaks, { texts: titles.subtitle, className: "mt-5 text-base leading-none text-end font-pretendard-medium" })] }));
 }

package/card/template/ProgressCard/Large.d.ts

@@ -1,2 +1,2 @@
 import { ProgressCardProps } from "../../../interface";
-export default function ProgressCardLG({ titles, steps, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;
+export default function ProgressCardLG({ titles, checks, displays, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/ProgressCard/Large.js

@@ -14,7 +14,7 @@ const text = {
     green: "text-green-dark",
     blue: "text-blue-navy",
 };
-export default function ProgressCardLG({ titles, steps, theme, }) {
+export default function ProgressCardLG({ titles, checks, displays, theme, }) {
     const progressBox = {
         positions: "absolute top-7.5 left-7.5",
         displays: "flex",
@@ -32,11 +32,11 @@ export default function ProgressCardLG({ titles, steps, theme, }) {
         displays: "flex flex-col items-end gap-y-3",
     };
     const occupied = [
-        steps.filter(([_, value]) => !!value).length,
-        steps.length,
+        checks.map((value) => !!value).length,
+        displays.length,
     ].join("/");
     return (_jsxs(CardDesign, { option: {
             width: "2xl",
             height: "2xs",
-        }, children: [_jsx("div", { className: cn(progressBox), children: steps.map(([{ title }, value]) => (_jsxs("div", { className: cn(stepBox(value)), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: value, 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 w-${occupied} ${bg[theme ?? "green"]}` }) })] }));
 }

package/card/template/ProgressCard/Small.d.ts

@@ -1,2 +1,2 @@
 import { ProgressCardProps } from "../../../interface";
-export default function ProgressCardSmall({ titles, steps, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;
+export default function ProgressCardSmall({ titles, displays, checks, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/ProgressCard/Small.js

@@ -10,7 +10,7 @@ const text = {
     green: "text-green-dark",
     blue: "text-blue-navy",
 };
-export default function ProgressCardSmall({ titles, steps, theme = "green", }) {
+export default function ProgressCardSmall({ titles, displays, checks, theme = "green", }) {
     const progressBox = {
         positions: "absolute top-2.5 left-2.5",
         displays: "flex",
@@ -30,5 +30,5 @@ export default function ProgressCardSmall({ titles, steps, theme = "green", }) {
     return (_jsxs(CardDesign, { option: {
             width: "md",
             height: "5xs",
-        }, children: [_jsx("div", { className: cn(progressBox), children: steps.map(([{ title, subtitle }, value]) => (_jsxs("div", { className: cn(stepBox(value)), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "leading-none text-[12px] font-pretendard-bold", children: title }), _jsx(SVG.Operation.Checked, { flag: value, size: 25, theme: theme })] }), _jsx("div", { className: `text-[12px] ${text[theme]}`, children: subtitle })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-[20px] leading-none font-pretendard-bold ${text[theme]}`, children: titles.title }), _jsx("div", { className: `text-[12px] leading-none ${text[theme]}`, children: titles.subtitle })] })] }));
+        }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title, subtitle }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "leading-none text-[12px] font-pretendard-bold", children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: theme })] }), _jsx("div", { className: `text-[12px] ${text[theme]}`, children: subtitle })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-[20px] leading-none font-pretendard-bold ${text[theme]}`, children: titles.title }), _jsx("div", { className: `text-[12px] leading-none ${text[theme]}`, children: titles.subtitle })] })] }));
 }

package/interaction/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Loading } from "./template/Loading";
 export { default as NoData } from "./template/NoData";
+export { default as Lock } from "./template/Lock";

package/interaction/index.js

@@ -1,2 +1,3 @@
 export { default as Loading } from "./template/Loading";
 export { default as NoData } from "./template/NoData";
+export { default as Lock } from "./template/Lock";

package/interaction/template/Lock.d.ts

@@ -0,0 +1,3 @@
+export default function Lock({ script }: {
+    script?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/interaction/template/Lock.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Lock({ script }) {
+    return (_jsxs("div", { className: "flex flex-col gap-y-3 items-center", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M16.5 10.5V6.75C16.5 5.55653 16.0259 4.41193 15.182 3.56802C14.3381 2.72411 13.1935 2.25 12 2.25C10.8065 2.25 9.66193 2.72411 8.81802 3.56802C7.97411 4.41193 7.5 5.55653 7.5 6.75V10.5M6.75 21.75H17.25C17.8467 21.75 18.419 21.5129 18.841 21.091C19.2629 20.669 19.5 20.0967 19.5 19.5V12.75C19.5 12.1533 19.2629 11.581 18.841 11.159C18.419 10.7371 17.8467 10.5 17.25 10.5H6.75C6.15326 10.5 5.58097 10.7371 5.15901 11.159C4.73705 11.581 4.5 12.1533 4.5 12.75V19.5C4.5 20.0967 4.73705 20.669 5.15901 21.091C5.58097 21.5129 6.15326 21.75 6.75 21.75Z", stroke: "#173A8B", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("div", { className: "text-xs text-blue-navy", children: script })] }));
+}

package/interface/Card.d.ts

@@ -1,4 +1,4 @@
-import { Button, Disabled, OnClick, Size, State, Step, Titles } from "./Property";
+import { Button, Disabled, OnClick, Size, State, Titles } from "./Property";
 import { DataSet, DataField } from "./Data";
 import { Theme } from "./Theme";
 import { Flexify } from "./UtilityType";
@@ -126,6 +126,8 @@ export interface TableCardProps<T> extends Omit<CardProps, "children"> {
         noHover?: boolean;
         noRowPadding?: boolean;
         noHeader?: boolean;
+        isDisabled?: boolean;
+        disabledScript?: string;
     };
 }
 export interface RollCardProps extends CardProps {
@@ -138,7 +140,8 @@ export interface RollCardProps extends CardProps {
 }
 export interface ProgressCardProps {
     titles: Titles;
-    steps: Step[];
+    checks: boolean[];
+    displays: Titles[];
     theme?: Theme;
 }
 export {};

package/interface/widget/Obstacle.d.ts

@@ -0,0 +1,10 @@
+import { Disabled } from "../Property";
+export interface ObstacleProps {
+    disabled?: Disabled;
+    children?: React.ReactNode;
+    option?: {
+        position?: string;
+        size?: string;
+        background?: string;
+    };
+}

package/interface/widget/Obstacle.js

@@ -0,0 +1 @@
+export {};

package/interface/widget/Select.d.ts

@@ -0,0 +1,23 @@
+import { Size, State } from "../Property";
+interface SelectOption<T> {
+    title: string;
+    value: T;
+    icon?: string;
+}
+export interface SelectSwitchProps<T> {
+    state: State<T>;
+    selectOptions: SelectOption<T>[];
+    option?: {
+        size?: Size;
+        text?: string;
+        className?: string;
+    };
+}
+export interface SelectHandleProps<T> {
+    state: State<T>;
+    options: SelectOption<T>[];
+    option?: {
+        className?: string;
+    };
+}
+export {};

package/interface/widget/Select.js

@@ -0,0 +1 @@
+export {};

package/layout/design/DataField.design.js

@@ -16,7 +16,7 @@ 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 ",

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.66",
+  "version": "1.0.68",
   "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.66
+1.0.68

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",

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/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<T>;
+    selectOptions: T[];
+}
+export default function Pagination<T>({ state, selectOptions, }: PaginationProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/widget/template/Pagination.js

@@ -0,0 +1,21 @@
+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, selectOptions, }) {
+    const [value, setValue] = 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",
+    };
+    const index = selectOptions.indexOf(value);
+    return (_jsxs("div", { className: cn(container), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => {
+                    if (index > 1)
+                        setValue(selectOptions[index - 1]);
+                } }), _jsxs("div", { className: "flex items-center gap-x-[3px] text-white", children: [index + 1, _jsx("div", { className: "text-gray-medium text-base font-pretendard-bold", children: "/" }), selectOptions.length] }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => {
+                    if (index < selectOptions.length - 1)
+                        setValue(selectOptions[index + 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,9 @@
+import { State } from "../../../interface";
+interface SwipeProps<T> {
+    title: string;
+    state: State<T>;
+    selectOptions: T[];
+    children: React.ReactNode;
+}
+export default function Swipe<T>({ title, state, selectOptions, children, }: SwipeProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/widget/template/Select/Swipe.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Pagination from "../Pagination";
+import { cn } from "../../../util";
+export default function Swipe({ title, state, selectOptions, children, }) {
+    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: state, selectOptions: 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 {};

package/widget/template/Select/Tag.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 || {
+        selectHow: "plural",
+    };
+    const container = {
+        sizes: "w-full",
+        displays: "grid grid-cols-4 gap-2.5",
+        className,
+    };
+    const isSelectedStyle = [
+        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",
+    });
+    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/index.d.ts

@@ -1,6 +1,14 @@
 import _Select from "./Select";
 import LG from "./Select.LG";
+import Tag from "./Tag";
+import Handle from "./Handle";
+import Switch from "./Switch";
+import Swipe from "./Swipe";
 declare const Select: typeof _Select & {
     LG: typeof LG;
+    Tag: typeof Tag;
+    Handle: typeof Handle;
+    Switch: typeof Switch;
+    Swipe: typeof Swipe;
 };
 export default Select;

package/widget/template/Select/index.js

@@ -1,4 +1,8 @@
 import _Select from "./Select";
 import LG from "./Select.LG";
-const Select = Object.assign(_Select, { LG });
+import Tag from "./Tag";
+import Handle from "./Handle";
+import Switch from "./Switch";
+import Swipe from "./Swipe";
+const Select = Object.assign(_Select, { LG, Tag, Handle, Switch, Swipe });
 export default Select;

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

@@ -1,3 +1,17 @@
-import { SwitchProps } from "../../../interface";
-declare function Switch<T>({ state, values, display, option }: SwitchProps<T>): import("react/jsx-runtime").JSX.Element;
-export default Switch;
+import { Size, State } from "../../../interface";
+interface Option<T> {
+    title: string;
+    value: T;
+    icon?: string;
+}
+interface SelectSwitchProps<T> {
+    state: State<T>;
+    selectOptions: Option<T>[];
+    option?: {
+        size?: Size;
+        text?: string;
+        className?: string;
+    };
+}
+declare function SelectSwitch<T>({ state, selectOptions, option, }: SelectSwitchProps<T>): import("react/jsx-runtime").JSX.Element;
+export default SelectSwitch;

package/widget/template/Switch/Switch.js

@@ -5,12 +5,12 @@ const paddingSize = {
     lg: "p-2.5",
 };
 const widthSize = {
-    md: "w-25",
-    lg: "w-47.5",
+    md: "w-81",
+    lg: "w-100",
 };
 const heightSize = {
-    md: "h-7.5",
-    lg: "h-15",
+    md: "h-10.5",
+    lg: "h-20",
 };
 const gapSize = {
     md: "gap-x-1.5",
@@ -20,25 +20,24 @@ const textSize = {
     md: "text-sm",
     lg: "text-base",
 };
-function Switch({ state, values, display, option }) {
+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 p-2.5",
+        styles: "rounded-full bg-gray-light",
         className,
     };
     const button = (flag) => ({
-        sizes: `${widthSize[size ?? "md"]} ${heightSize[size ?? "md"]}`,
         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: values?.map((value) => {
-            const { title, icon } = (display && display[value]) ?? {};
+    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 Switch;
+export default SelectSwitch;

package/widget/template/Obstacle.d.ts

@@ -1,4 +0,0 @@
-import { Disabled } from "../../interface";
-export default function Obstacle({ disabled }: {
-    disabled?: Disabled;
-}): false | import("react/jsx-runtime").JSX.Element | undefined;

package/widget/template/Obstacle.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../util";
-export default function Obstacle({ disabled }) {
-    const obstacle = {
-        positions: "absolute top-0 left-0",
-        sizes: "w-full h-full",
-        background: "bg-white/30",
-    };
-    return (disabled && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle) })));
-}