@edu-tosel/design 1.0.164 → 1.0.166

package/card/design/RollCard.design.js

@@ -5,7 +5,7 @@ import { Action, Shelf } from "../../layout";
 import Card from "./Card.design";
 import { useEffect, useState } from "react";
 import { cn } from "../../util";
-import useMobile from "../../hook/useResponsive";
+import useResponsive from "../../hook/useResponsive";
 export default function RollCardDesign({ titles, state, disabled, isFixed, children, }) {
     const [isOpen, setIsOpen] = state;
     const [isDisabled, disabledFn] = disabled || [false, () => { }];
@@ -23,10 +23,11 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
         sizes: "h-full",
         styles: isFixed && "hidden",
     };
-    const isMobile = useMobile();
+    console.log(isFixed, isOpen);
+    const isMobile = useResponsive("md");
     return (_jsxs(Card, { option: {
             width: "3xl",
-            height: !isMobile ? (!isFixed && isOpen ? "2xs" : "4xs") : "2xs",
+            height: isMobile ? (!isFixed && isOpen ? "2xs" : "4xs") : "2xs",
             background: isDisabled || flag ? "bg-green-dark/10" : "bg-white",
             className: "p-7.5 flex flex-col gap-y-6",
         }, children: [_jsxs("div", { className: "flex flex-col gap-y-3.5 sm:flex-row justify-between", children: [_jsxs(Shelf.Col, { className: "gap-y-2.5", children: [_jsxs("div", { className: "flex gap-x-2.5 items-center", children: [titles.icon && _jsx("img", { src: titles.icon, alt: "icon" }), _jsx("div", { className: "text-xl leading-none font-pretendard-bold text-green-dark", children: titles.title })] }), _jsx("div", { className: "leading-none", children: titles.subtitle })] }), _jsxs("div", { className: "flex justify-between sm:justify-start gap-3.5 items-center", children: [_jsx(Label, { title: !isDisabled

package/interface/Data.d.ts

@@ -25,6 +25,7 @@ type DataFiledTypeText = {
     type: "text";
 };
 interface SelectRollOption {
+    id?: number;
     key: string;
     value: string;
     option?: {

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

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { cn } from "../../../util";
 import { useActionStore } from "../../../store";
 export default function SelectRoll({ item, entry, data, }) {
-    const { updateItem } = useActionStore();
+    const { items, updateItem } = useActionStore();
     const { options } = data ?? {};
     const [key, value] = entry;
     const [isHover, setIsHover] = useState(false);

package/layout/template/Regexam/OfflineExam.d.ts

@@ -1,2 +1,4 @@
 export default function OfflineExam(): import("react/jsx-runtime").JSX.Element;
 export declare function TableComponent(): import("react/jsx-runtime").JSX.Element;
+export declare function AnnualTableComponent(): import("react/jsx-runtime").JSX.Element;
+export declare function TimeTableComponent(): import("react/jsx-runtime").JSX.Element;

package/layout/template/Regexam/OfflineExam.js

@@ -7,11 +7,11 @@ import { useResponsive } from "../../../hook";
 gsap.registerPlugin(ScrollTrigger);
 export default function OfflineExam() {
     const isMD = useResponsive("md");
-    const isXL = useResponsive("xl");
     const scrollWrapperRef = useRef(null);
     useEffect(() => {
+        //stop scroll action while mobile
         if (!isMD)
-            return; // isMD가 true일 때 gsap 실행 방지
+            return;
         const ctx = gsap.context(() => {
             const scrollWrapper = scrollWrapperRef.current;
             if (scrollWrapper) {
@@ -56,11 +56,27 @@ export default function OfflineExam() {
         sizes: "w-full h-fit",
         textStyles: "font-medium text-gray-medium text-sm md:text-base",
     };
-    const grayBox = {
-        sizes: "w-full h-fit rounded-2xl",
-        spacings: "p-5 xxs:p-8 md:p-10  my-0 xs:my-10",
-        backgrounds: "bg-gray-light/50",
-        textstyles: "font-medium text-gray-dark text-base md:text-lg leading-loose",
+    //button styling
+    const AdvertButton = {
+        displays: "relative overflow-hidden flex justify-center items-center",
+        sizes: "h-fit w-full md:w-fit rounded-lg",
+        textstyles: "text-lg font-pretendard-medium text-center text-green-dark hover:text-white",
+        spacings: "px-3 py-2 md:mt-16 mt-10",
+        animations: "group duration-300",
+    };
+    //before hover gradient
+    const buttonBackground1 = {
+        displays: "absolute inset-0",
+        backgrounds: "bg-green-dark/10",
+    };
+    //after hover gradient
+    const buttonBackground2 = {
+        displays: "absolute inset-0",
+        backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
+        animation: "transition-opacity duration-300 opacity-0 group-hover:opacity-100",
+    };
+    const buttonText = {
+        textstyles: "text-lg font-pretendard-medium text-center relative z-10",
     };
     const scrollWrapper = {
         displays: "flex flex-col flex-shrink-0",
@@ -77,23 +93,111 @@ export default function OfflineExam() {
     };
     const miniDivider = {
         sizes: "w-full h-0.5 mt-1",
-        colors: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
+        colors: "bg-gradient-to-r from-crimson-burgundy to-green-dark flex-shrink-0",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(mainWrapper), children: [_jsxs("div", { className: cn(titleWrapper), ref: scrollWrapperRef, children: [_jsx("div", { className: cn(sectionTitle), children: "\uC815\uAE30\uC2DC\uD5D8 \uC548\uB0B4" }), _jsx("div", { className: cn(sectionSubTitle), children: "\uC5F0 4\uD68C, \uC624\uD504\uB77C\uC778\uC73C\uB85C \uAC1C\uCD5C\uB418\uB294 \uD1A0\uC140 \uC815\uAE30\uC2DC\uD5D8\uC785\uB2C8\uB2E4." })] }), _jsxs("div", { className: cn(scrollWrapper), children: [_jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC2DC\uD5D8\uAD6C\uC131" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC2DC\uD5D8\uC9C4\uD589" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC2DC\uD5D8\uAD6C\uC131" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TableComponent, {}) })] })] })] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(mainWrapper), children: [_jsxs("div", { className: cn(titleWrapper), ref: scrollWrapperRef, children: [_jsx("div", { className: cn(sectionTitle), children: "\uC815\uAE30\uC2DC\uD5D8 \uC548\uB0B4" }), _jsx("div", { className: cn(sectionSubTitle), children: "\uC5F0 4\uD68C, \uC624\uD504\uB77C\uC778\uC73C\uB85C \uAC1C\uCD5C\uB418\uB294 \uD1A0\uC140 \uC815\uAE30\uC2DC\uD5D8\uC785\uB2C8\uB2E4." }), isMD && (_jsxs("div", { onClick: () => (window.location.href = `https://olympiad.tosel.co.kr/dashboard`), className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] }))] }), _jsxs("div", { className: cn(scrollWrapper), children: [_jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC2DC\uD5D8\uAD6C\uC131" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC5F0\uAC04 \uC2DC\uD5D8 \uC77C\uC815" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(AnnualTableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uB2F9\uC77C \uC138\uBD80\uC77C\uC815" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TimeTableComponent, {}) }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("div", { className: "text-gray-medium font-medium text-sm", children: "*\uACE0\uC0AC\uC7A5 \uB0B4\uBD80\uC5D0\uB294 \uD559\uBD80\uBAA8\uC758 \uCD9C\uC785\uC774 \uC81C\uD55C\uB429\uB2C8\uB2E4." }), _jsx("div", { className: "text-gray-medium font-medium text-sm", children: "*\uC785\uC2E4\uB9C8\uAC10(13\uC2DC 10\uBD84)\uC2DC\uAC04\uC744 \uC900\uC218\uD574\uC8FC\uC2DC\uAE30 \uBC14\uB78D\uB2C8\uB2E4." })] })] })] }), !isMD && (_jsxs("div", { onClick: () => (window.location.href = `https://olympiad.tosel.co.kr/dashboard`), className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] }))] }) }));
 }
 export function TableComponent() {
     const data = [
-        { id: 1, level: "Cocon", age: "미취학 아동, 5-7세", info: "S1: 15문항/15분  S2: 15문항/15분", totalScore: "100점" },
-        { id: 2, level: "Pre-Starter", age: "초등학교 1-2학년", info: "S1: 15문항/15분  S2: 20문항/25분", totalScore: "100점" },
-        { id: 3, level: "Starter", age: "초등학교 3-4학년", info: "S1: 20문항/15분  S2: 20문항/25분", totalScore: "100점" },
-        { id: 4, level: "Basic", age: "초등학교 5-6학년", info: "S1: 30문항/20분  S2: 30문항/30분", totalScore: "100점" },
-        { id: 5, level: "Junior", age: "중학생", info: "S1: 30문항/20분  S2: 30문항/30분", totalScore: "100점" },
-        { id: 6, level: "High Junior", age: "고등학생", info: "S1: 30문항/25분  S2: 35문항/35분", totalScore: "100점" },
-        { id: 7, level: "Advanced", age: "대학생 및 성인", info: "S1: 70문항/45분  S2: 70문항/55분", totalScore: "990점" },
+        {
+            id: 1,
+            level: "Cocon",
+            age: "미취학 아동, 5-7세",
+            info1: "Section1: 15문항/15분",
+            info2: "Section2: 15문항/15분",
+            totalScore: "100점",
+        },
+        {
+            id: 2,
+            level: "Pre-Starter",
+            age: "초등학교 1-2학년",
+            info1: "Section1: 15문항/15분",
+            info2: "Section2: 20문항/25분",
+            totalScore: "100점",
+        },
+        {
+            id: 3,
+            level: "Starter",
+            age: "초등학교 3-4학년",
+            info1: "Section1: 20문항/15분",
+            info2: "Section2: 20문항/25분",
+            totalScore: "100점",
+        },
+        {
+            id: 4,
+            level: "Basic",
+            age: "초등학교 5-6학년",
+            info1: "Section1: 30문항/20분",
+            info2: "Section2: 30문항/30분",
+            totalScore: "100점",
+        },
+        {
+            id: 5,
+            level: "Junior",
+            age: "중학생",
+            info1: "Section1: 30문항/20분",
+            info2: "Section2: 30문항/30분",
+            totalScore: "100점",
+        },
+        {
+            id: 6,
+            level: "High Junior",
+            age: "고등학생",
+            info1: "Section1: 30문항/25분",
+            info2: "Section2: 35문항/35분",
+            totalScore: "100점",
+        },
+        {
+            id: 7,
+            level: "Advanced",
+            age: "대학생 및 성인",
+            info1: "Section1: 70문항/45분",
+            info2: "Section2: 70문항/55분",
+            totalScore: "990점",
+        },
     ];
-    const rowStyle = {
-        spacings: "p-2",
-        textStylings: "font-medium text-xs text-gray-medium"
-    };
-    return (_jsx("div", { className: "overflow-auto w-full scrollbar-hidden rounded-lg", children: _jsxs("div", { className: "min-w-[640px] w-full", children: [_jsxs("div", { className: "flex bg-gradient-to-r from-green-dark to-crimson-burgundy text-white font-semibold text-xs", children: [_jsx("div", { className: "sticky left-0 bg-green-dark p-2 flex-[1] shadow-main", children: "\uB808\uBCA8" }), _jsx("div", { className: "p-2 flex-[2]", children: "\uCD9C\uC81C\uC218\uC900" }), _jsx("div", { className: "p-2 flex-[3]", children: "\uBB38\uD56D \uC218, \uC2DC\uAC04" }), _jsx("div", { className: "p-2 flex-[1]", children: "\uCD1D\uC810" })] }), data.map((item) => (_jsxs("div", { className: "flex bg-white/60 font-medium text-xs text-gray-medium", children: [_jsx("div", { className: "sticky left-0 bg-white p-2 flex-[1] text-gray-dark", children: item.level }), _jsx("div", { className: "p-2 flex-[2]", children: item.age }), _jsx("div", { className: "p-2 flex-[3]", children: item.info }), _jsx("div", { className: "p-2 flex-[1]", children: item.totalScore })] }, item.id)))] }) }));
+    return (_jsx("div", { className: "overflow-auto w-full scrollbar-hidden rounded-lg", children: _jsxs("div", { className: "min-w-[640px] w-full", children: [_jsxs("div", { className: "flex bg-gradient-to-r from-green-dark to-crimson-burgundy text-white font-semibold text-sm", children: [_jsx("div", { className: "sticky left-0 bg-green-dark p-2 flex-[1] shadow-main", children: "\uB808\uBCA8" }), _jsx("div", { className: "p-2 flex-[2]", children: "\uCD9C\uC81C\uC218\uC900" }), _jsx("div", { className: "p-2 flex-[3]", children: "\uBB38\uD56D \uC218, \uC2DC\uAC04" }), _jsx("div", { className: "p-2 flex-[1]", children: "\uCD1D\uC810" })] }), data.map((item) => (_jsxs("div", { className: "flex bg-white/60 font-medium text-sm text-gray-medium ", children: [_jsx("div", { className: "sticky left-0 bg-white/90 p-2 flex-[1] text-gray-dark border-green-dark border-r-1", children: item.level }), _jsx("div", { className: "p-2 flex-[2]", children: item.age }), _jsxs("div", { className: "p-2 flex-[3] flex-col", children: [_jsx("div", { children: item.info1 }), _jsx("div", { children: item.info2 })] }), _jsx("div", { className: "p-2 flex-[1]", children: item.totalScore })] }, item.id)))] }) }));
+}
+export function AnnualTableComponent() {
+    const data = [
+        {
+            examNumber: "86",
+            dDay: "24.11.16",
+            regStartDay: "24.08.19",
+            regEndDay: "24.10.22",
+            resultDay: "24.12.05",
+        },
+        {
+            examNumber: "87",
+            dDay: "25.02.15",
+            regStartDay: "24.11.18",
+            regEndDay: "25.01.21",
+            resultDay: "24.03.06",
+        },
+        {
+            examNumber: "88",
+            dDay: "25.05.17",
+            regStartDay: "25.02.17",
+            regEndDay: "25.04.22",
+            resultDay: "24.06.05",
+        },
+        {
+            examNumber: "89",
+            dDay: "25.08.23",
+            regStartDay: "25.05.19",
+            regEndDay: "25.07.22",
+            resultDay: "24.09.04",
+        },
+        {
+            examNumber: "90",
+            dDay: "25.11.15",
+            regStartDay: "25.08.25",
+            regEndDay: "25.10.21",
+            resultDay: "24.12.04",
+        },
+    ];
+    return (_jsx("div", { className: "overflow-auto w-full scrollbar-hidden rounded-lg", children: _jsxs("div", { className: "min-w-[480px] w-full", children: [_jsxs("div", { className: "flex bg-gradient-to-r from-green-dark to-crimson-burgundy text-white font-semibold text-sm", children: [_jsx("div", { className: "sticky left-0 bg-green-dark p-2 flex-[1] shadow-main", children: "\uD68C\uCC28" }), _jsx("div", { className: "p-2 flex-[2]", children: "\uC2DC\uD5D8\uC77C\uC790" }), _jsx("div", { className: "p-2 flex-[3]", children: "\uC811\uC218\uAE30\uAC04" }), _jsx("div", { className: "p-2 flex-[2]", children: "\uC131\uC801\uBC1C\uD45C" })] }), data.map((item) => (_jsxs("div", { className: "flex bg-white/60 font-medium text-sm text-gray-medium ", children: [_jsxs("div", { className: "sticky left-0 bg-white/90 p-2 flex-[1] text-gray-dark border-green-dark border-r-1", children: [item.examNumber, "\uD68C"] }), _jsx("div", { className: "p-2 flex-[2] text-green-dark font-bold", children: item.dDay }), _jsxs("div", { className: "p-2 flex-[3] flex-col", children: [item.regStartDay, " ~ ", item.regEndDay] }), _jsx("div", { className: "p-2 flex-[2]", children: item.resultDay })] }, item.examNumber)))] }) }));
+}
+export function TimeTableComponent() {
+    return (_jsx("div", { className: "overflow-auto w-full scrollbar-hidden", children: _jsxs("div", { className: "min-w-[600px] w-full", children: [_jsxs("div", { className: "flex text-green-dark font-bold text-xs", children: [_jsx("div", { className: "sticky left-0 rounded-md p-2 flex-[2] text-xs" }), _jsx("div", { className: "p-2 flex-[1]" }), _jsx("div", { className: "p-2 flex-[4]", children: "13:10" }), _jsx("div", { className: "p-2 flex-[1]", children: "13:35" }), _jsx("div", { className: "p-2 flex-[2]", children: "13:40" }), _jsx("div", { className: "p-2 flex-[1]", children: "14:20" })] }), _jsxs("div", { className: "flex bg-white/50 text-gray-dark font-semibold text-xs rounded-md", children: [_jsxs("div", { className: "sticky left-0 bg-white/90 rounded-md p-2 flex-[2]", children: ["Pre-Starter ", _jsx("br", {}), " Starter"] }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uC785\uC2E4" }), _jsx("div", { className: "p-2 flex-[4] border-green-dark border-r-1 border-dashed", children: "\uC2DC\uD5D8\uC9C0 \uBC30\uBD80" }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uB300\uAE30" }), _jsx("div", { className: "p-2 flex-[2] border-green-dark border-r-1 border-dashed bg-green-light text-green-dark", children: "\uC2DC\uD5D8\uC9C4\uD589 / 40\uBD84" }), _jsx("div", { className: "p-2 flex-[1]" })] }), _jsxs("div", { className: "flex text-green-dark font-bold text-xs mt-4", children: [_jsx("div", { className: "sticky left-0 rounded-md p-2 flex-[2] text-lg" }), _jsx("div", { className: "p-2 flex-[1]" }), _jsx("div", { className: "p-2 flex-[2]", children: "13:10" }), _jsx("div", { className: "p-2 flex-[1]", children: "13:25" }), _jsx("div", { className: "p-2 flex-[4]", children: "13:30" }), _jsx("div", { className: "p-2 flex-[1]", children: "14:20" })] }), _jsxs("div", { className: "flex bg-white/50 text-gray-dark font-semibold text-xs rounded-md", children: [_jsxs("div", { className: "sticky left-0 bg-white/90 rounded-md p-2 flex-[2]", children: ["Pre-Starter ", _jsx("br", {}), " Starter"] }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uC785\uC2E4" }), _jsx("div", { className: "p-2 flex-[2] border-green-dark border-r-1 border-dashed", children: "\uC2DC\uD5D8\uC9C0 \uBC30\uBD80" }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uB300\uAE30" }), _jsx("div", { className: "p-2 flex-[4] border-green-dark border-r-1 border-dashed bg-green-light text-green-dark", children: "\uC2DC\uD5D8\uC9C4\uD589 / 50\uBD84" }), _jsx("div", { className: "p-2 flex-[1] bg" })] }), _jsxs("div", { className: "flex text-green-dark font-bold text-xs mt-4", children: [_jsx("div", { className: "sticky left-0 rounded-md p-2 flex-[2] text-lg" }), _jsx("div", { className: "p-2 flex-[1]" }), _jsx("div", { className: "p-2 flex-[2]", children: "13:10" }), _jsx("div", { className: "p-2 flex-[1]", children: "13:25" }), _jsx("div", { className: "p-2 flex-[4]", children: "13:30" }), _jsx("div", { className: "p-2 flex-[1] text-right", children: "14:30" })] }), _jsxs("div", { className: "flex bg-white/50 text-gray-dark font-semibold text-xs rounded-md", children: [_jsx("div", { className: "sticky left-0 bg-white/90 rounded-md p-2 flex-[2]", children: "High-Junior" }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uC785\uC2E4" }), _jsx("div", { className: "p-2 flex-[2] border-green-dark border-r-1 border-dashed", children: "\uC2DC\uD5D8\uC9C0 \uBC30\uBD80" }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uB300\uAE30" }), _jsx("div", { className: "p-2 flex-[4] bg-green-light text-green-dark", children: "\uC2DC\uD5D8\uC9C4\uD589 / 60\uBD84" }), _jsx("div", { className: "p-2 flex-[1] bg-green-light  border-green-dark border-r-1 border-dashed" })] })] }) }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.164
+1.0.166

package/widget/template/Select/Handle.js

@@ -13,11 +13,12 @@ export default function SelectHandle({ state, selectOptions: selectOptionsInput,
         className,
     };
     const body = {
-        positions: "relative",
+        positions: "relative ",
         sizes: "w-102.5 h-10",
         styles: "rounded-full bg-gray-light p-1.25",
     };
     const area = {
+        positions: "relative z-10",
         sizes: `${widthSizes[Math.round(((valueIndex + 1) / length) * 100)]} h-7.5`,
         displays: "flex justify-end",
         background: gradient.bg.greenToRed,
@@ -28,7 +29,7 @@ export default function SelectHandle({ state, selectOptions: selectOptionsInput,
         sizes: "w-5 h-5",
         styles: "rounded-full bg-white",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), 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))) })] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), 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 }) => (_jsxs("div", { className: "relative flex flex-1 items-center", children: [_jsx("button", { onClick: () => {
+                                    return state?.[1](value);
+                                }, className: "w-full h-10  pr-[12px] relative z-10" }, value), _jsx("div", { className: "absolute z-0 right-[18px] bg-black w-1 h-1 rounded-full" })] }))) })] }) }));
 }