@akanjs/ui 0.0.151 → 0.0.152

package/esm/Popconfirm.js

@@ -1,9 +1,10 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //! 디자인 수정, 테마 적용 안됨
 import { clsx } from "@akanjs/client";
 import { usePage } from "@akanjs/next";
 import { animated, useSpring } from "@react-spring/web";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { BiMessageRoundedError } from "react-icons/bi";
 const Popconfirm = ({
   title,
@@ -44,43 +45,60 @@ const Popconfirm = ({
   const handleCancel = () => {
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "relative inline-block" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: clsx("trigger", triggerClassName),
-      onClick: (e) => {
-        e.stopPropagation();
-        setIsConfirming(true);
-      }
-    },
-    children
-  ), isConfirming && /* @__PURE__ */ React.createElement(
-    animated.div,
-    {
-      className: "popconfirm border-base-300 bg-base-100 absolute -right-2 bottom-0 z-10 translate-y-[106%] rounded-lg border p-4 shadow-xl",
-      style: popconfirmProps
-    },
-    /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx("trigger", triggerClassName),
+          onClick: (e) => {
+            e.stopPropagation();
+            setIsConfirming(true);
+          },
+          children
+        }
+      ),
+      isConfirming && /* @__PURE__ */ jsxs(
+        animated.div,
+        {
+          className: "popconfirm border-base-300 bg-base-100 absolute -right-2 bottom-0 z-10 translate-y-[106%] rounded-lg border p-4 shadow-xl",
+          style: popconfirmProps,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  "bg-base-100 border-base-300 popconfirm-deco absolute -top-2 size-4 rotate-45 rounded-sm border-t border-l",
+                  { "right-10": !decoClassName },
+                  decoClassName
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsx(BiMessageRoundedError, { className: "text-orange-500" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "mb-2 font-bold whitespace-nowrap", children: title }),
+                /* @__PURE__ */ jsx("div", { className: "mb-2 whitespace-nowrap", children: description })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+              /* @__PURE__ */ jsx("button", { className: "btn btn-xs btn-outline", onClick: handleCancel, ...cancelButtonProps, children: cancelText ?? l("util.cancel") }),
+              /* @__PURE__ */ jsx("button", { className: "btn btn-xs", onClick: handleConfirm, ...okButtonProps, children: okText ?? l("util.ok") })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    isConfirming && /* @__PURE__ */ jsx(
       "div",
       {
-        className: clsx(
-          "bg-base-100 border-base-300 popconfirm-deco absolute -top-2 size-4 rotate-45 rounded-sm border-t border-l",
-          { "right-10": !decoClassName },
-          decoClassName
-        )
-      }
-    ),
-    /* @__PURE__ */ React.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React.createElement(BiMessageRoundedError, { className: "text-orange-500" }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "mb-2 font-bold whitespace-nowrap" }, title), /* @__PURE__ */ React.createElement("div", { className: "mb-2 whitespace-nowrap" }, description))),
-    /* @__PURE__ */ React.createElement("div", { className: "flex justify-end gap-2" }, /* @__PURE__ */ React.createElement("button", { className: "btn btn-xs btn-outline", onClick: handleCancel, ...cancelButtonProps }, cancelText ?? l("util.cancel")), /* @__PURE__ */ React.createElement("button", { className: "btn btn-xs", onClick: handleConfirm, ...okButtonProps }, okText ?? l("util.ok")))
-  )), isConfirming && /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "absolute top-0 left-0 h-screen w-full",
-      onClick: () => {
-        setIsConfirming(false);
+        className: "absolute top-0 left-0 h-screen w-full",
+        onClick: () => {
+          setIsConfirming(false);
+        }
       }
-    }
-  ));
+    )
+  ] });
 };
 export {
   Popconfirm

package/esm/Radio.js

@@ -1,32 +1,36 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 const Radio = ({ value, children, disabled, className, onChange }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: clsx(`flex gap-2`, className) }, children.map((child, idx) => {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center gap-1", key: idx }, /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        type: "radio",
-        disabled,
-        className: "radio radio-primary radio-sm",
-        checked: value === child.props.value || value === idx,
-        onChange: () => {
-          onChange(child.props.value, idx);
+  return /* @__PURE__ */ jsx("div", { className: clsx(`flex gap-2`, className), children: children.map((child, idx) => {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "radio",
+          disabled,
+          className: "radio radio-primary radio-sm",
+          checked: value === child.props.value || value === idx,
+          onChange: () => {
+            onChange(child.props.value, idx);
+          }
         }
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        className: "bg-transparent",
-        onClick: () => {
-          onChange(child.props.value, idx);
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "bg-transparent",
+          onClick: () => {
+            onChange(child.props.value, idx);
+          },
+          children: child
         }
-      },
-      child
-    ));
-  }));
+      )
+    ] }, idx);
+  }) });
 };
 const Item = ({ value, className, children }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: clsx("", className) }, children);
+  return /* @__PURE__ */ jsx("div", { className: clsx("", className), children });
 };
 Radio.Item = Item;
 export {

package/esm/RecentTime.js

@@ -1,3 +1,4 @@
+import { jsx } from "react/jsx-runtime";
 import { dayjs } from "@akanjs/base";
 import { clsx } from "@akanjs/client";
 import { usePage } from "@akanjs/next";
@@ -18,39 +19,39 @@ const RecentTime = ({
   if (!date)
     return null;
   if (dayjs(0).isSame(date) || dayjs(-1).isSame(date))
-    return /* @__PURE__ */ React.createElement("span", null, "--:--");
+    return /* @__PURE__ */ jsx("span", { children: "--:--" });
   if (breakUnit === "second")
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm:ss") }, datejs.format(dateFormat));
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm:ss"), children: datejs.format(dateFormat) });
   if (Math.abs(diffSecs) < 60)
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
   else if (breakUnit === "minute")
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.format(dateFormat));
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.format(dateFormat) });
   const diffMins = Math.floor(diff / (1e3 * 60));
   if (Math.abs(diffMins) < 60)
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
   else if (breakUnit === "hour")
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.format(dateFormat));
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.format(dateFormat) });
   const diffHours = Math.floor(diff / (1e3 * 3600));
   if (Math.abs(diffHours) < 24)
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
   else if (breakUnit === "day")
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.format(dateFormat));
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.format(dateFormat) });
   const diffDays = Math.floor(diff / (1e3 * 3600 * 24));
   if (Math.abs(diffDays) < 7)
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
   else if (breakUnit === "week")
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.format(dateFormat));
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.format(dateFormat) });
   const diffWeeks = Math.floor(diff / (1e3 * 3600 * 24 * 7));
   if (Math.abs(diffWeeks) < 4)
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
   else if (breakUnit === "month")
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.format(dateFormat));
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.format(dateFormat) });
   const diffMonths = Math.floor(diff / (1e3 * 3600 * 24 * 30));
   if (Math.abs(diffMonths) < 12)
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
   else if (breakUnit === "year")
-    return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.format(dateFormat));
-  return /* @__PURE__ */ React.createElement("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm") }, datejs.fromNow());
+    return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.format(dateFormat) });
+  return /* @__PURE__ */ jsx("span", { className: clsx("tooltip", className), "data-tip": datejs.format("YYYY-MM-DD HH:mm"), children: datejs.fromNow() });
 };
 export {
   RecentTime

package/esm/Refresh.js

@@ -1,14 +1,15 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { BiLoaderAlt } from "react-icons/bi";
 import PullToRefresh from "react-simple-pull-to-refresh";
 const Refresh = ({ children, onRefresh }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     PullToRefresh,
     {
       onRefresh,
-      refreshingContent: /* @__PURE__ */ React.createElement("div", { className: "bg-base-100 fixed left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full shadow-sm" }, /* @__PURE__ */ React.createElement(BiLoaderAlt, { className: "animate-spin text-2xl" }))
-    },
-    children
+      refreshingContent: /* @__PURE__ */ jsx("div", { className: "bg-base-100 fixed left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full shadow-sm", children: /* @__PURE__ */ jsx(BiLoaderAlt, { className: "animate-spin text-2xl" }) }),
+      children
+    }
   );
 };
 export {

package/esm/ScreenNavigator.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "@akanjs/client";
 import { useDrag } from "@use-gesture/react";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
@@ -77,24 +78,24 @@ const ScreenNavigator = ({
       setCurrentMenu(menus[1]);
     }
   };
-  return /* @__PURE__ */ React.createElement(ScreenNavigatorContext.Provider, { value: { bind, xValue, onClickMenu, menus, currentMenu, setMenu } }, /* @__PURE__ */ React.createElement(a.div, { ...bind(), className: "flex h-full w-[200vw] overflow-x-scroll", style: { x: xValue }, ref }, children));
+  return /* @__PURE__ */ jsx(ScreenNavigatorContext.Provider, { value: { bind, xValue, onClickMenu, menus, currentMenu, setMenu }, children: /* @__PURE__ */ jsx(a.div, { ...bind(), className: "flex h-full w-[200vw] overflow-x-scroll", style: { x: xValue }, ref, children }) });
 };
 const NavbarItem = ({ menu, children, className }) => {
   const { onClickMenu, currentMenu } = useContext(ScreenNavigatorContext);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx(className, currentMenu === menu ? "opacity-100" : "opacity-40"),
       onClick: () => {
         onClickMenu(menu);
-      }
-    },
-    children
+      },
+      children
+    }
   );
 };
 ScreenNavigator.NavbarItem = NavbarItem;
 const Screen = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "h-full w-screen overflow-scroll", style: { touchAction: "pan-y" } }, children);
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-screen overflow-scroll", style: { touchAction: "pan-y" }, children });
 };
 ScreenNavigator.Screen = Screen;
 export {

package/esm/Select.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Enum } from "@akanjs/base";
 import { clsx } from "@akanjs/client";
 import { useDebounce, usePage } from "@akanjs/next";
@@ -94,149 +95,169 @@ const Select = ({
     else
       setSelectedValues([value]);
   }, [value]);
-  return /* @__PURE__ */ React.createElement("div", { className: clsx("relative min-w-[150px]", className), ref: dropdownRef }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-open": isOpen,
-      className: clsx(
-        "btn flex h-auto min-h-[40px] w-full cursor-pointer items-center px-0 py-1 pr-5 pl-1 focus:outline-hidden",
-        "bg-base-100 data-[open=true]:border-primary",
-        disabled && "cursor-not-allowed opacity-50",
-        selectClassName,
-        { "border-base-300": isOpen }
-      ),
-      onClick: () => {
-        setIsOpen(!isOpen);
-      }
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "flex w-full flex-wrap items-center gap-1" }, multiple ? /* @__PURE__ */ React.createElement(React.Fragment, null, value.map((v, index) => {
-      const optionValue = labeledOptions.find((option) => option.value === v);
-      if (!optionValue)
-        return null;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: index,
-          className: "bg-success/70 text-success-content flex items-center gap-2 rounded-lg px-2 py-1 text-xs"
-        },
-        renderSelected ? renderSelected(optionValue.value) : optionValue.label,
-        /* @__PURE__ */ React.createElement(
-          "button",
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onSelect(optionValue.value, index);
-            },
-            className: "opacity-50 duration-300 hover:opacity-100"
-          },
-          /* @__PURE__ */ React.createElement(BiX, { className: "text-base" })
-        )
-      );
-    })) : /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1" }, value ? /* @__PURE__ */ React.createElement(React.Fragment, null, (() => {
-      const optionValue = searchOptions.find((option) => selected(option.value));
-      if (!optionValue)
-        return null;
-      return renderSelected ? renderSelected(optionValue.value) : optionValue.label;
-    })()) : ""), searchable && /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        type: "text",
-        className: "input w-full flex-1 border-none bg-transparent shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none",
-        placeholder: selectedValues.length > 0 ? "" : placeholder,
-        value: searchText,
-        onChange: (e) => {
-          if (!isOpen)
-            setIsOpen(true);
-          if (!onSearch)
-            setSearchOptions(
-              labeledOptions.filter(
-                (option) => option.label.toString().toLowerCase().includes(e.target.value.toLowerCase())
-              )
-            );
-          setSearchText(e.target.value);
-          debouncedOnSearch(e.target.value);
-        },
-        onClick: (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          setIsOpen(!isOpen);
-        }
-      }
-    )),
-    multiple && selectedValues.length || !multiple && selectedValues[0] !== void 0 && selectedValues[0] !== null ? /* @__PURE__ */ React.createElement(
-      TiDelete,
-      {
-        className: "absolute right-8 z-[2] h-full text-lg duration-300 hover:cursor-pointer hover:opacity-50",
-        onClick: (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          setSearchText("");
-          setSelectedValues([]);
-          if (multiple)
-            onChange([], selectedValues);
-          else
-            onChange(null, selectedValues[0]);
-          setIsOpen(false);
-        }
-      }
-    ) : null,
-    /* @__PURE__ */ React.createElement(
-      BiChevronDown,
-      {
-        className: clsx("absolute top-1/2 right-2 -translate-y-1/2 text-lg duration-100", { "rotate-180": isOpen })
-      }
-    )
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-open": isOpen,
-      className: clsx(
-        "scrollbar-thin scrollbar-thumb-base-content/20 scrollbar-track scrollbar-track-base-content/40 bg-base-200 border-base-300 absolute z-20 mt-0.5 w-full overflow-y-scroll rounded-md shadow-lg transition-all",
-        "origin-center duration-200 data-[open=false]:h-0 data-[open=false]:border-none data-[open=true]:h-[270px] data-[open=true]:border",
-        selectorClassName
-      )
-    },
-    nullable && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs("div", { className: clsx("relative min-w-[150px]", className), ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "cursor-pointer p-2",
+        "data-open": isOpen,
+        className: clsx(
+          "btn flex h-auto min-h-[40px] w-full cursor-pointer items-center px-0 py-1 pr-5 pl-1 focus:outline-hidden",
+          "bg-base-100 data-[open=true]:border-primary",
+          disabled && "cursor-not-allowed opacity-50",
+          selectClassName,
+          { "border-base-300": isOpen }
+        ),
         onClick: () => {
-          setIsOpen(false);
-        }
+          setIsOpen(!isOpen);
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex w-full flex-wrap items-center gap-1", children: [
+            multiple ? /* @__PURE__ */ jsx(Fragment, { children: value.map((v, index) => {
+              const optionValue = labeledOptions.find((option) => option.value === v);
+              if (!optionValue)
+                return null;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "bg-success/70 text-success-content flex items-center gap-2 rounded-lg px-2 py-1 text-xs",
+                  children: [
+                    renderSelected ? renderSelected(optionValue.value) : optionValue.label,
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          onSelect(optionValue.value, index);
+                        },
+                        className: "opacity-50 duration-300 hover:opacity-100",
+                        children: /* @__PURE__ */ jsx(BiX, { className: "text-base" })
+                      }
+                    )
+                  ]
+                },
+                index
+              );
+            }) }) : /* @__PURE__ */ jsx("div", { className: "px-2 py-1", children: value ? /* @__PURE__ */ jsx(Fragment, { children: (() => {
+              const optionValue = searchOptions.find((option) => selected(option.value));
+              if (!optionValue)
+                return null;
+              return renderSelected ? renderSelected(optionValue.value) : optionValue.label;
+            })() }) : "" }),
+            searchable && /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: "input w-full flex-1 border-none bg-transparent shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none",
+                placeholder: selectedValues.length > 0 ? "" : placeholder,
+                value: searchText,
+                onChange: (e) => {
+                  if (!isOpen)
+                    setIsOpen(true);
+                  if (!onSearch)
+                    setSearchOptions(
+                      labeledOptions.filter(
+                        (option) => option.label.toString().toLowerCase().includes(e.target.value.toLowerCase())
+                      )
+                    );
+                  setSearchText(e.target.value);
+                  debouncedOnSearch(e.target.value);
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  setIsOpen(!isOpen);
+                }
+              }
+            )
+          ] }),
+          multiple && selectedValues.length || !multiple && selectedValues[0] !== void 0 && selectedValues[0] !== null ? /* @__PURE__ */ jsx(
+            TiDelete,
+            {
+              className: "absolute right-8 z-[2] h-full text-lg duration-300 hover:cursor-pointer hover:opacity-50",
+              onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setSearchText("");
+                setSelectedValues([]);
+                if (multiple)
+                  onChange([], selectedValues);
+                else
+                  onChange(null, selectedValues[0]);
+                setIsOpen(false);
+              }
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            BiChevronDown,
+            {
+              className: clsx("absolute top-1/2 right-2 -translate-y-1/2 text-lg duration-100", { "rotate-180": isOpen })
+            }
+          )
+        ]
       }
     ),
-    searchOptions.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, searchOptions.map((option, index) => {
-      const isSelected = selected(option.value);
-      return /* @__PURE__ */ React.createElement("div", { key: index, className: "group" }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: clsx(
-            "hover:bg-base-300 relative m-2 cursor-pointer rounded-sm p-2 duration-100 last:border-b-0",
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-open": isOpen,
+        className: clsx(
+          "scrollbar-thin scrollbar-thumb-base-content/20 scrollbar-track scrollbar-track-base-content/40 bg-base-200 border-base-300 absolute z-20 mt-0.5 w-full overflow-y-scroll rounded-md shadow-lg transition-all",
+          "origin-center duration-200 data-[open=false]:h-0 data-[open=false]:border-none data-[open=true]:h-[270px] data-[open=true]:border",
+          selectorClassName
+        ),
+        children: [
+          nullable && /* @__PURE__ */ jsx(
+            "div",
             {
-              selectedClassName: !multiple && isSelected,
-              "bg-success/70 text-success-content": isSelected
+              className: "cursor-pointer p-2",
+              onClick: () => {
+                setIsOpen(false);
+              }
             }
           ),
-          onClick: () => {
-            onSelect(option.value, index);
-            setSearchText("");
-          }
-        },
-        renderOption ? renderOption(option.value) : option.label,
-        /* @__PURE__ */ React.createElement("div", { className: clsx("absolute top-1/2 right-2 -translate-y-1/2 flex-wrap duration-200", {}) }, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: clsx("duration-200", {
-              "translate-y-0 opacity-100": isSelected,
-              "-translate-y-full opacity-0": !isSelected
-            })
-          },
-          /* @__PURE__ */ React.createElement(BiCheck, null)
-        ))
-      ), /* @__PURE__ */ React.createElement("div", { className: "h-px w-full px-2 group-last:hidden" }, /* @__PURE__ */ React.createElement("div", { className: "bg-base-content/10 size-full" })));
-    })) : /* @__PURE__ */ React.createElement("div", { className: "text-base-content/50 flex size-full flex-col items-center justify-center gap-2 p-2 text-center text-5xl" }, /* @__PURE__ */ React.createElement(BsQuestionCircleFill, null), /* @__PURE__ */ React.createElement("div", { className: "text-sm" }, l("shared.noOptions")))
-  ));
+          searchOptions.length > 0 ? /* @__PURE__ */ jsx(Fragment, { children: searchOptions.map((option, index) => {
+            const isSelected = selected(option.value);
+            return /* @__PURE__ */ jsxs("div", { className: "group", children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx(
+                    "hover:bg-base-300 relative m-2 cursor-pointer rounded-sm p-2 duration-100 last:border-b-0",
+                    {
+                      selectedClassName: !multiple && isSelected,
+                      "bg-success/70 text-success-content": isSelected
+                    }
+                  ),
+                  onClick: () => {
+                    onSelect(option.value, index);
+                    setSearchText("");
+                  },
+                  children: [
+                    renderOption ? renderOption(option.value) : option.label,
+                    /* @__PURE__ */ jsx("div", { className: clsx("absolute top-1/2 right-2 -translate-y-1/2 flex-wrap duration-200", {}), children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: clsx("duration-200", {
+                          "translate-y-0 opacity-100": isSelected,
+                          "-translate-y-full opacity-0": !isSelected
+                        }),
+                        children: /* @__PURE__ */ jsx(BiCheck, {})
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "h-px w-full px-2 group-last:hidden", children: /* @__PURE__ */ jsx("div", { className: "bg-base-content/10 size-full" }) })
+            ] }, index);
+          }) }) : /* @__PURE__ */ jsxs("div", { className: "text-base-content/50 flex size-full flex-col items-center justify-center gap-2 p-2 text-center text-5xl", children: [
+            /* @__PURE__ */ jsx(BsQuestionCircleFill, {}),
+            /* @__PURE__ */ jsx("div", { className: "text-sm", children: l("shared.noOptions") })
+          ] })
+        ]
+      }
+    )
+  ] });
 };
 export {
   Select