@edu-tosel/design 1.0.67 → 1.0.69

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.67
+1.0.69

package/widget/template/Pagination.d.ts

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

package/widget/template/Pagination.js

@@ -1,8 +1,8 @@
 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;
+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",
@@ -10,11 +10,12 @@ export default function Pagination({ state, items }) {
         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 (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);
+                    if (index > 0)
+                        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/Swipe.d.ts

@@ -1,10 +1,9 @@
+import { State } from "../../../interface";
 interface SwipeProps<T> {
     title: string;
+    state: State<T>;
+    selectOptions: T[];
     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 default function Swipe<T>({ title, state, selectOptions, children, }: SwipeProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/widget/template/Select/Swipe.js

@@ -1,11 +1,9 @@
 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);
+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: page, items: selectOptions })] }), children] }));
+    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] }));
 }