@edu-tosel/design 1.0.13 → 1.0.15

package/card/template/TrumpCard.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LineBreaks } from "../../text";
 import { Card } from "../widget/Card";
 export default function TrumpCard({ titles, options }) {
-    const { title, subTitle, color: titleColor } = titles;
+    const { title, subtitle, color: titleColor } = titles;
     const { onClick, width, image, subButton } = options ?? {};
     const [buttonText, buttonBgColor, buttonAction] = subButton ?? [
         null,
@@ -15,5 +15,5 @@ export default function TrumpCard({ titles, options }) {
             return "w-full h-full object-cover";
         return "absolute bottom-0 right-0 w-full xs:w-auto max-w-120 z-0 max-h-44 object-contain";
     };
-    return (_jsxs(Card, { options: { width: width ?? "xs", onClick }, children: [_jsxs("div", { className: `absolute top-8 left-8 w-48 flex flex-col gap-2 z-10 text-${titleColor}`, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx(LineBreaks, { texts: subTitle ?? [""] }), subButton ? (_jsx("button", { className: `text-white rounded-md bg-${buttonBgColor} w-45 h-11 flex justify-center items-center`, onClick: buttonAction, children: buttonText })) : null] }), path ? (_jsx("img", { src: path, alt: "trump-image", loading: "lazy", className: imageClassNames() })) : null] }));
+    return (_jsxs(Card, { options: { width: width ?? "xs", onClick }, children: [_jsxs("div", { className: `absolute top-8 left-8 w-48 flex flex-col gap-2 z-10 text-${titleColor}`, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx(LineBreaks, { texts: subtitle ?? "" }), subButton ? (_jsx("button", { className: `text-white rounded-md bg-${buttonBgColor} w-45 h-11 flex justify-center items-center`, onClick: buttonAction, children: buttonText })) : null] }), path ? (_jsx("img", { src: path, alt: "trump-image", loading: "lazy", className: imageClassNames() })) : null] }));
 }

package/card/widget/Card.d.ts

@@ -1,2 +1,2 @@
 import { CardProps } from "../../interface/Card";
-export declare function Card({ children, options, debug }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ header, children, options, debug }: CardProps): import("react/jsx-runtime").JSX.Element;

package/card/widget/Card.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../util";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, isDebug } from "../../util";
+import { useWidgetStore } from "../../store";
 const widthSize = {
     xs: "w-full md:w-60",
     sm: "w-full md:w-90",
@@ -11,18 +12,19 @@ const widthSize = {
     auto: "w-auto",
 };
 const heightSize = {
-    xs: "min-h-16",
-    sm: "h-72 sm:h-48",
-    md: "h-72 sm:h-48",
-    lg: "h-80",
+    xs: "h-12",
+    sm: "h-45",
+    md: "h-52.5",
+    lg: "h-67.5",
     xl: "h-125",
     "2xl": "",
     full: "h-full",
     auto: "h-auto min-h-80",
 };
-export function Card({ children, options, debug }) {
+export function Card({ header, children, options, debug }) {
+    const { setIsOwn } = useWidgetStore();
     const { classNames, boundary, rounded, height, width, text, background, onClick, overflow, } = options ?? {};
-    const { size: textSize, color: textColor } = text ?? {};
+    const { size: textSize } = text ?? {};
     const { color: bgColor } = background ?? {};
     const setBoundary = () => {
         if (boundary === "shadow")
@@ -37,12 +39,37 @@ export function Card({ children, options, debug }) {
         positions: "relative",
         sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "sm"]}`,
         onClick: onClick ? "cursor-pointer" : "",
-        text: `text-${textSize ?? "base"}`,
+        text: `text-${textSize ?? "base"} text-black dark:text-white`,
         boundary: setBoundary(),
         rounded: `rounded-${rounded ?? "xl"}`,
-        bgColor: `bg-${bgColor ?? "white/80"}`,
-        styles: "duration-500  overflow-hidden",
-        debug: debug && import.meta.env.MODE && `border-2  border-${debug}`,
+        bgColor: `bg-${bgColor ?? "white/80"} dark:bg-black/80`,
+        styles: "duration-500 ",
+        debug: debug && isDebug(`border-2  border-${debug}`),
+        overflow: "overflow-hidden",
     };
-    return (_jsx("div", { onClick: onClick, className: cn(container, `${classNames}`), children: children }));
+    const headerStyle = {
+        container: {
+            positions: "relative",
+            sizes: "h-11 ",
+        },
+        body: {
+            positions: "absolute top-0 left-0",
+            displays: "flex items-center pl-4",
+            sizes: "w-full h-full",
+            styles: `bg-${bgColor ?? "gray-300"} text-black font-bold`,
+        },
+        block: {
+            sizes: "w-full h-full",
+        },
+    };
+    const body = {
+        sizes: "h-full",
+        overflow: `overflow-${overflow ?? "hidden"}`,
+        classNames,
+    };
+    return (_jsxs("div", { className: cn(container), children: [header && (_jsxs("div", { className: cn(headerStyle.container), children: [_jsx("div", { className: cn(headerStyle.body), children: header }), _jsx("div", { className: cn(headerStyle.block) })] })), _jsx("div", { onClick: onClick &&
+                    (() => {
+                        setIsOwn(true);
+                        return onClick();
+                    }), className: cn(body), children: children })] }));
 }

package/deck/index.d.ts

@@ -1 +1 @@
-export * from "./Deck";
+export { default as Deck } from "./template/Deck";

package/deck/index.js

@@ -1 +1 @@
-export * from "./Deck";
+export { default as Deck } from "./template/Deck";

package/deck/template/Deck.d.ts

@@ -0,0 +1,6 @@
+import { DeckProps } from "../../interface/Deck";
+declare function Deck<T extends string | number>(props: DeckProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace Deck {
+    var Sub: <T extends string | number>({ titles, children, options, debug, }: DeckProps<T>) => import("react/jsx-runtime").JSX.Element;
+}
+export default Deck;

package/deck/template/Deck.design.d.ts

@@ -0,0 +1,2 @@
+import { DeckProps } from "../../interface/Deck";
+export default function DeckDesign<T extends string | number>({ children, titles, options, debug, }: DeckProps<T>): import("react/jsx-runtime").JSX.Element;

package/deck/template/Deck.design.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, isDebug } from "../../util";
+import { Deck } from "./../widget/Deck";
+export default function DeckDesign({ children, titles, options, debug, }) {
+    const { title, subtitle, isSub } = titles ?? {};
+    const { height } = options ?? {};
+    const container = {
+        displays: "flex flex-col gap-4",
+        sizes: `w-full h-${height ?? "auto"} `,
+        debug: debug && isDebug(`border-2 border-${debug}`),
+    };
+    const titleBox = {
+        container: "flex flex-col gap-1",
+        title: {
+            text: isSub ? "text-base xl:text-lg" : "text-xl xl:text-2xl",
+            font: "font-bold",
+        },
+        subtitle: isSub ? "text-xs xl:text-sm" : "text-sm xl:text-base",
+    };
+    return (_jsxs("div", { className: cn(container), children: [titles && (_jsxs("div", { children: [_jsx("div", { className: cn(titleBox.title), children: title }), _jsx("div", { className: cn(titleBox.subtitle), children: subtitle })] })), _jsx(Deck, { children: children })] }));
+}

package/deck/template/Deck.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DeckDesign from "./Deck.design";
+function Deck(props) {
+    return _jsx(DeckDesign, { ...props });
+}
+function Sub({ titles, children, options, debug, }) {
+    const { title, subtitle } = titles ?? { title: "" };
+    return (_jsx(DeckDesign, { titles: { title, subtitle, isSub: true }, debug: debug, ...options, children: children }));
+}
+Deck.Sub = Sub;
+export default Deck;

package/deck/widget/Deck.d.ts

@@ -0,0 +1,2 @@
+import { DeckProps } from "../../interface/Deck";
+export declare function Deck<T extends string | number>({ children, options, }: DeckProps<T>): import("react/jsx-runtime").JSX.Element;

package/deck/widget/Deck.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+export function Deck({ children, options, }) {
+    const { flex, justify, gapX, gapY, overflowScroll } = options ?? {};
+    const body = {
+        displays: `flex flex-col flex-wrap gap-y-${gapY ?? 5}`,
+        flex: flex === "col" ? "sm:flex-col" : "sm:flex-row",
+        justify: `justify-${justify ?? "start"}`,
+        gapX: `${`gap-x-${gapX ?? 7.5}`}`,
+        sizes: "sm:w-full ",
+        styles: `${overflowScroll ? "overflow-x-scroll" : ""} duration-500`,
+    };
+    return _jsx("div", { className: cn(body), children: children });
+}

package/globals.css

@@ -19,11 +19,28 @@
 
 @font-face {
   font-family: "Megrim";
-  src: url("./asset/fonts/Megrim.ttf") format("trueType");
+  src: url("./asset/fonts/Megrim.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Times-Newer-Roman-Bold";
+  src: url("./asset/fonts/TimesNewerRoman-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Times-Newer-Roman-BoldItalic";
+  src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
+}
+
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
 }
 
 ::-webkit-scrollbar {
   width: 3px;
+  padding-right: 10px;
 }
 
 ::-webkit-scrollbar-track {
@@ -39,6 +56,10 @@
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
 }
 
+.box-shadow-sm {
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+}
+
 .x-shape {
   position: relative;
   width: 0.83625rem;
@@ -65,3 +86,100 @@
 .x-shape::after {
   transform: translate(-50%, -50%) rotate(-45deg);
 }
+
+.border-inner {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.asdfasdf:hover {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+/* Date Picker Css */
+.react-datepicker__day--selected {
+  background-color: #105652 !important;
+}
+.react-datepicker__header {
+  background: white !important;
+  border: none !important;
+}
+.react-datepicker {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
+  border-radius: 0.375rem !important;
+  border: none !important;
+}
+.react-datepicker__day--keyboard-selected {
+  background-color: white !important;
+  color: black !important;
+}
+.react-datepicker__day--outside-month {
+  color: rgb(161 161 170) !important;
+}
+.react-datepicker__month-container {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.5rem;
+}
+.react-datepicker-popper {
+  transform: translate(0px 295px) !important;
+}
+.react-datepicker__input-container {
+  text-align: center !important;
+  border-radius: 0.375rem !important;
+  transition: all 0.3s;
+}
+.react-datepicker__input-container > input {
+  cursor: pointer !important;
+}
+.react-datepicker__input-container:hover {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
+}
+.react-datepicker__navigation {
+  top: 18px !important;
+}
+.react-datepicker__navigation--next {
+  right: 20px !important;
+}
+.react-datepicker__navigation--previous {
+  left: 182px !important;
+}
+.react-datepicker__current-month {
+  text-align: left !important;
+  margin-left: 16px !important;
+}
+.react-datepicker__triangle {
+  display: none !important;
+}
+.react-datepicker__children-container {
+  width: 16rem !important;
+}
+
+/* toggle button */
+[type="checkbox"]::before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  width: 1.1rem;
+  height: 1.1rem;
+  border-radius: 50%;
+  transform: scale(0.9);
+  background-color: white;
+  transition: left 100ms linear;
+}
+[type="checkbox"]:checked::before {
+  background-color: white;
+  left: 1.32rem;
+}
+[type="checkbox"]:checked {
+  background-color: #105652;
+}
+[type="checkbox"]:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+[type="checkbox"]:disabled + span {
+  opacity: 0.3;
+  cursor: not-allowed;
+}

package/html/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Button } from "./widget/Button";
+export { default as Input } from "./widget/Input";
+export { default as Select } from "./widget/Select";
+export { default as Toggle } from "./widget/Toggle";

package/html/index.js

@@ -0,0 +1,4 @@
+export { default as Button } from "./widget/Button";
+export { default as Input } from "./widget/Input";
+export { default as Select } from "./widget/Select";
+export { default as Toggle } from "./widget/Toggle";

package/html/widget/Button.d.ts

@@ -0,0 +1,2 @@
+import { HTMLButtonElement } from "../../interface";
+export default function Button({ title, onClick }: HTMLButtonElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Button.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+const widthSize = {
+    md: "w-45",
+    lg: "w-50",
+};
+const heightSize = {
+    md: "h-11",
+};
+export default function Button({ title, onClick }) {
+    const container = {
+        sizes: "",
+    };
+    return (_jsx("button", { onClick: onClick, className: cn(container), children: title }));
+}

package/html/widget/DatePicker.d.ts

@@ -0,0 +1,3 @@
+import { HTMLInputElement } from "../../interface";
+import "react-datepicker/dist/react-datepicker.css";
+export default function DatePicker({ options }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/DatePicker.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import ReactDatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import ko from "date-fns/locale/ko";
+import { useRef } from "react";
+const widthSize = {
+    xs: "w-28",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+export default function DatePicker({ options }) {
+    const { width } = options ?? {};
+    const [selectedDate, setSelectedDate] = useState(new Date());
+    const calRef = useRef(null);
+    return (_jsx("div", { children: _jsx(ReactDatePicker, { dateFormat: "yyyy\uB144 MM\uC6D4 dd\uC77C", icon: "fa fa-calendar", minDate: new Date("1900-01-01"), maxDate: new Date("2100-01-01"), selected: selectedDate, shouldCloseOnSelect: false, ref: calRef, onChange: (date) => setSelectedDate(date), locale: ko, className: "bg-slate-200 p-1 pl-4 pr-4 text-left rounded-md hover:bg-white focus:bg-white transition-all asdfasdf focus:outline-none w-68 h-10", children: _jsx("div", { className: "w-full h-auto flex justify-end items-end pr-4 pb-4", children: _jsx("button", { className: "p-2 bg-green-dark text-white rounded-md pr-4 pl-4 hover:opacity-85 hover:shadow-md transition-all", onClick: () => {
+                        calRef.current.setOpen(false);
+                    }, children: "\uC800\uC7A5\uD558\uAE30" }) }) }) }));
+}

package/html/widget/Input.d.ts

@@ -0,0 +1,2 @@
+import { HTMLInputElement } from "../../interface";
+export default function Input({ state, placeholder, options, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Input.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../util";
+const widthSize = {
+    xs: "w-28",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+export default function Input({ state, placeholder, options, }) {
+    const [_, onChange] = state;
+    const { width } = options ?? {};
+    const id = useId();
+    const container = {
+        width: `${widthSize[width ?? "md"]} h-10`,
+        styles: "rounded-full pl-4 border-4",
+    };
+    return (_jsx("input", { className: cn(container), id: id, type: "text", placeholder: placeholder ?? "", onChange: (e) => onChange(e.target.value) }));
+}

package/html/widget/Select.d.ts

@@ -0,0 +1,2 @@
+import { HTMLSelectElement } from "../../interface";
+export default function Select({ state, selectOptions, options, }: HTMLSelectElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Select.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { BiChevronDown } from "react-icons/bi";
+import { useWidgetStore } from "../../store";
+import { cn } from "../../util";
+const widthSize = {
+    xs: "w-32",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+export default function Select({ state, selectOptions, options, }) {
+    const [value, setValue] = state;
+    // isActive 드롭다운 이벤트 통제
+    const { flag } = useWidgetStore();
+    useEffect(() => {
+        if (!isButton)
+            setIsActive(false);
+        return setIsButton(false);
+    }, [flag]);
+    const [isActive, setIsActive] = useState(false);
+    const [isButton, setIsButton] = useState(false);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const handleItemClick = (title) => {
+        setSelectedItem(title);
+        setIsActive(false);
+    };
+    // css
+    const levels = [
+        "CoCoon",
+        "PreStarter",
+        "Starter",
+        "Basic",
+        "Junior",
+        "HighJunior",
+    ];
+    const colorMap = {
+        CoCoon: "bg-cocoon-green",
+        PreStarter: "bg-ps-pink",
+        Starter: "bg-st-orange",
+        Basic: "bg-ba-yellow",
+        Junior: "bg-jr-blue",
+        HighJunior: "bg-hj-blue",
+    };
+    const isActiveCss = () => {
+        if (isActive)
+            return `shadow-md border-inner rounded-md`;
+    };
+    const tagCss = `bg-slate-200 p-1 pl-2 pr-2 rounded-md`;
+    const dropdownTop = selectOptions && selectOptions.length > 6 ? "top-24" : "top-12";
+    const { width } = options ?? {};
+    const dropdown = {
+        size: `w-40 h-6`,
+        styles: "cursor-pointer pt-4 pb-4 pl-4 pr-4 font-bold text-sm bg-white",
+        display: `flex items-center`,
+        hover: `hover:rounded-md`,
+        effect: `transition-all`,
+        function: `${isActiveCss()}`,
+        etc: "asdfasdf",
+    };
+    const dropdownInput = {
+        size: `w-40 h-6 `,
+        styles: "shadow-md text-sm p-4 font-bold bg-white text-left cursor-text border-1 rounded-md ",
+        display: "absolute top-12 flex items-center z-10 ",
+        focus: "focus:outline-none focus:border-[#44C5F3] focus:border-1 ",
+    };
+    const dropdownContent = {
+        size: `w-40 min-h-6 max-h-48 overflow-y-auto `,
+        styles: `text-sm mt-1 border-1 rounded-md shadow-md`,
+        display: `absolute z-40`,
+        function: `${dropdownTop}`,
+    };
+    const dropdownItem = {
+        size: `${widthSize[width ?? "full"]} h-6 `,
+        styles: `text-sm text-left p-4 font-bold cursor-pointer `,
+        display: `flex items-center z-40`,
+        hover: `hover:bg-slate-200 `,
+        effect: `transition-all `,
+    };
+    // input
+    const [searchTerm, setSearchTerm] = useState("");
+    const filteredOptions = selectOptions?.filter(([_, title]) => title.toLowerCase().includes(searchTerm.toLowerCase())) || [];
+    // Keyboard event handling
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!isActive)
+                return;
+            // Arrow Up
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                const currentIndex = filteredOptions.findIndex(([_, title]) => title === selectedItem);
+                const newIndex = currentIndex === -1
+                    ? 0
+                    : (currentIndex - 1 + filteredOptions.length) %
+                        filteredOptions.length;
+                setSelectedItem(filteredOptions[newIndex][1]);
+                setSelectedIndex(newIndex);
+            }
+            // Arrow Down
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                const currentIndex = filteredOptions.findIndex(([_, title]) => title === selectedItem);
+                const newIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % filteredOptions.length;
+                setSelectedItem(filteredOptions[newIndex][1]);
+                setSelectedIndex(newIndex);
+            }
+            // Enter
+            if (event.key === "Enter") {
+                if (selectedItem) {
+                    setIsActive(false);
+                    setValue(selectedItem);
+                }
+            }
+            // Esc
+            if (event.key === "Escape") {
+                setIsActive(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        // 선택된 항목 스크롤을 조정하는 함수
+        const scrollIntoView = () => {
+            if (selectedIndex === -1)
+                return;
+            const dropdownContent = document.querySelector(".dropdown-content");
+            if (!dropdownContent)
+                return;
+            const selectedItemElement = dropdownContent.children[selectedIndex];
+            if (!selectedItemElement)
+                return;
+            const dropdownRect = dropdownContent.getBoundingClientRect();
+            const selectedItemRect = selectedItemElement.getBoundingClientRect();
+            if (selectedItemRect.top < dropdownRect.top) {
+                dropdownContent.scrollTop -= dropdownRect.top - selectedItemRect.top;
+            }
+            else if (selectedItemRect.bottom > dropdownRect.bottom) {
+                dropdownContent.scrollTop +=
+                    selectedItemRect.bottom - dropdownRect.bottom;
+            }
+        };
+        scrollIntoView();
+        window.addEventListener("resize", scrollIntoView);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("resize", scrollIntoView);
+        };
+    }, [isActive, selectedIndex, filteredOptions, selectedItem, setValue]);
+    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: cn(dropdown), onClick: () => {
+                    setIsActive(!isActive);
+                    setIsButton(true);
+                }, children: [_jsx("div", { className: `w-4 h-4 mr-2 ${selectedItem && colorMap[selectedItem]
+                            ? colorMap[selectedItem]
+                            : "hidden"}` }), _jsx("div", { className: `${!selectedItem || levels.includes(selectedItem) ? "" : tagCss}`, children: selectedItem || (_jsx("span", { className: "text-zinc-400", children: "\uC635\uC158\uC744 \uC120\uD0DD\uD558\uC138\uC694" })) }), isActive && _jsx(BiChevronDown, { className: "ml-auto" })] }), isActive && selectOptions && selectOptions.length > 6 && (_jsx("input", { type: "text", placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(dropdownInput), value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })), isActive && filteredOptions && (_jsx("div", { className: "dropdown-content " + cn(dropdownContent), children: filteredOptions.map(([id, title], index) => (_jsxs("div", { className: cn(dropdownItem) +
+                        (selectedIndex === index ? "bg-slate-200" : "bg-white"), onClick: () => handleItemClick(title), children: [_jsx("div", { className: `w-4 h-4 mr-2 ${colorMap[title] && levels.includes(title)
+                                ? colorMap[title]
+                                : "hidden"}` }), _jsx("div", { className: `${levels.includes(title) ? "" : tagCss}`, children: title })] }, id))) }))] }));
+}

package/html/widget/Toggle.d.ts

@@ -0,0 +1,2 @@
+import { HTMLToggleElement } from "../../interface";
+export default function Toggle({ state: [chekced, setChecked], isDisabled, labels, }: HTMLToggleElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Toggle.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const widthSize = {
+    xs: "w-32",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+export default function Toggle({ state: [chekced, setChecked], isDisabled, labels, }) {
+    return (_jsxs("div", { className: "w-24 h-6 flex", children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: isDisabled, type: "checkbox", className: "bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), _jsx("div", { className: "ml-2 transition-all", children: labels.map(([status, label]) => (status === chekced ? label : "")) })] }));
+}

package/index.d.ts

@@ -3,9 +3,9 @@ export * from "./board";
 export * from "./card";
 export * from "./deck";
 export * from "./layout";
+export * from "./html";
 export * from "./interaction";
-export * from "./menu";
 export * from "./modal";
 export * from "./navigation";
-export * from "./shelf";
+export * from "./overlay";
 export * from "./text";

package/index.js

@@ -3,9 +3,9 @@ export * from "./board";
 export * from "./card";
 export * from "./deck";
 export * from "./layout";
+export * from "./html";
 export * from "./interaction";
-export * from "./menu";
 export * from "./modal";
 export * from "./navigation";
-export * from "./shelf";
+export * from "./overlay";
 export * from "./text";