@deepnoid/ui 0.1.19 → 0.1.21

package/dist/components/select/select.js

@@ -105,7 +105,7 @@ __export(select_exports, {
   default: () => select_default
 });
 module.exports = __toCommonJS(select_exports);
-var import_react2 = require("react");
+var import_react = require("react");
 var import_react_dom = require("react-dom");
 
 // src/utils/tailwind-variants.ts
@@ -345,62 +345,6 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   }
 };
 
-// src/components/select/useSelect.tsx
-var import_react = require("react");
-var useSelect = ({ options, defaultOption, onChange }) => {
-  const [selectedOption, setSelectedOption] = (0, import_react.useState)(defaultOption);
-  const [targetRect, setTargetRect] = (0, import_react.useState)(null);
-  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react.useState)(0);
-  const selectWrapperRef = (0, import_react.useRef)(null);
-  const optionWrapperRef = (0, import_react.useRef)(null);
-  const calculatePositionWithScroll = (targetRect2, optionWrapperHeight2) => {
-    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
-    const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
-    const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + 4);
-    const spaceAbove = targetRect2.y - 4;
-    const top = spaceBelow < optionWrapperHeight2 && spaceAbove > optionWrapperHeight2 ? targetRect2.y - optionWrapperHeight2 - 4 : targetRect2.y + targetRect2.height + 4;
-    return {
-      top: top + scrollTop,
-      left: targetRect2.x + scrollLeft
-    };
-  };
-  const handleToggleSelect = () => {
-    if (selectWrapperRef.current) {
-      const rect = selectWrapperRef.current.getBoundingClientRect();
-      setTargetRect((prevRect) => prevRect ? null : { x: rect.x, y: rect.y, width: rect.width, height: rect.height });
-    }
-  };
-  const handleChangeOption = (option) => {
-    onChange == null ? void 0 : onChange(option);
-    setSelectedOption(option);
-    handleToggleSelect();
-  };
-  (0, import_react.useEffect)(() => {
-    const onClickOutside = (e) => {
-      if (optionWrapperRef.current && !optionWrapperRef.current.contains(e.target)) {
-        setTargetRect(null);
-      }
-    };
-    window.addEventListener("mousedown", onClickOutside);
-    return () => window.removeEventListener("mousedown", onClickOutside);
-  }, []);
-  (0, import_react.useEffect)(() => {
-    if (optionWrapperRef.current) {
-      setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
-    }
-  }, [targetRect]);
-  return {
-    selectedOption,
-    targetRect,
-    optionWrapperHeight,
-    selectWrapperRef,
-    optionWrapperRef,
-    handleToggleSelect,
-    handleChangeOption,
-    calculatePositionWithScroll
-  };
-};
-
 // src/components/icon/template.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var template = {
@@ -839,23 +783,89 @@ var template = {
       }
     );
   },
-  // ----------------------------------- old ---------------------------------
-  // ** Status **
-  plus: ({ className, fill }) => {
+  exclamation: ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
       {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
         fill: "none",
+        className,
+        children: fill ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M11.264 2.37077C11.2832 2.37715 11.3024 2.38353 11.3223 2.3901C12.3182 2.72483 13.1824 3.30575 13.9306 4.03468C13.9575 4.06039 13.9843 4.08609 14.0119 4.11257C14.1806 4.27693 14.33 4.45208 14.4754 4.63713C14.4981 4.66509 14.5208 4.69305 14.5442 4.72185C15.0188 5.31801 15.3774 6.01161 15.6224 6.73137C15.6303 6.75453 15.6382 6.77768 15.6464 6.80155C16.1308 8.2413 16.1125 9.82918 15.6224 11.2641C15.6105 11.2995 15.6105 11.2995 15.5983 11.3356C15.3948 11.9315 15.1066 12.5059 14.7335 13.0141C14.7221 13.0297 14.7107 13.0453 14.6989 13.0614C14.313 13.5865 13.8736 14.0779 13.3571 14.4772C13.3155 14.5109 13.3155 14.5109 13.273 14.5454C12.6801 15.0224 11.982 15.3801 11.264 15.6247C11.2408 15.6326 11.2177 15.6406 11.1938 15.6487C9.43757 16.2402 7.50979 16.0678 5.85241 15.2592C4.96204 14.8102 4.13267 14.1489 3.52213 13.3583C3.49962 13.3305 3.47711 13.3028 3.45392 13.2742C2.32855 11.8738 1.85507 9.99621 2.03839 8.22438C2.17342 7.0638 2.58402 5.9339 3.26407 4.98139C3.27714 4.96288 3.29022 4.94436 3.30369 4.92529C3.51689 4.62523 3.75292 4.35545 4.00958 4.09206C4.03773 4.06274 4.06588 4.03342 4.09403 4.00409C4.26597 3.8279 4.44681 3.67012 4.6404 3.5183C4.6683 3.49563 4.69621 3.47296 4.72496 3.4496C6.54339 2.00006 9.08031 1.63201 11.264 2.37077Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M9.36648 5.85289C9.53634 5.9647 9.6533 6.12598 9.71812 6.32867C9.73452 6.40467 9.74201 6.47516 9.74238 6.55312C9.74254 6.57462 9.74269 6.59612 9.74284 6.61826C9.7429 6.64157 9.74296 6.66489 9.74302 6.68891C9.74315 6.71368 9.74329 6.73845 9.74344 6.76397C9.74385 6.84591 9.7441 6.92785 9.74431 7.00979C9.7444 7.03785 9.74448 7.06592 9.74457 7.09484C9.74497 7.22817 9.74528 7.3615 9.74545 7.49483C9.74568 7.66315 9.74639 7.83146 9.74732 7.99978C9.74787 8.11787 9.74805 8.23596 9.74812 8.35405C9.74823 8.41042 9.74847 8.46679 9.74886 8.52316C9.75351 9.23268 9.75351 9.23268 9.54833 9.48966C9.39246 9.65505 9.20768 9.73677 8.98973 9.75C8.78199 9.74035 8.59485 9.64627 8.44906 9.48814C8.28258 9.27909 8.24899 9.03597 8.25049 8.7678C8.25038 8.7429 8.25027 8.718 8.25015 8.69234C8.24987 8.61081 8.25006 8.5293 8.25027 8.44777C8.25023 8.39068 8.25017 8.33358 8.25009 8.27649C8.24999 8.15716 8.25013 8.03783 8.25043 7.9185C8.25079 7.76594 8.25058 7.6134 8.2502 7.46085C8.24997 7.34306 8.25004 7.22527 8.25021 7.10748C8.25025 7.05125 8.2502 6.99501 8.25005 6.93877C8.24989 6.86005 8.25014 6.78135 8.25049 6.70263C8.25036 6.67965 8.25023 6.65668 8.2501 6.63301C8.25225 6.37163 8.32078 6.1648 8.48128 5.96879C8.72644 5.71507 9.07274 5.68973 9.36648 5.85289Z",
+              fill: "white"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M9.34541 10.8369C9.52938 10.9471 9.67125 11.1068 9.73271 11.3148C9.77656 11.529 9.73613 11.7317 9.62145 11.916C9.49889 12.0867 9.3528 12.1846 9.14957 12.2412C8.92053 12.2704 8.73922 12.2283 8.55045 12.0972C8.38043 11.959 8.27865 11.7781 8.25072 11.5592C8.24266 11.3506 8.30179 11.162 8.43381 10.9998C8.68322 10.7451 9.02878 10.6749 9.34541 10.8369Z",
+              fill: "white"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M5.03711 3.84082C6.60875 2.5881 8.77805 2.2038 10.7188 2.72754L11.1035 2.84473L11.1064 2.8457C11.125 2.85187 11.144 2.85694 11.1631 2.86328V2.86426C11.9606 3.13233 12.6739 3.57547 13.3125 4.14258L13.582 4.39258L13.585 4.39551L13.666 4.47363C13.7385 4.54442 13.8078 4.61844 13.876 4.69629L14.082 4.94629L14.0869 4.95215L14.1562 5.03711C14.5346 5.51326 14.8361 6.06221 15.0586 6.6416L15.1494 6.89258V6.89355L15.1738 6.96387C15.5931 8.21222 15.6047 9.58552 15.2295 10.8506L15.1494 11.1025L15.1484 11.1045C15.1368 11.1391 15.1363 11.1401 15.125 11.1738C14.9596 11.6581 14.7354 12.1232 14.4541 12.542L14.3301 12.7178L14.3291 12.7197C14.3181 12.7348 14.3072 12.7501 14.2959 12.7656C13.9281 13.2659 13.5205 13.7197 13.0518 14.082L13.3457 14.4629L13.0508 14.0811L13.042 14.0889L12.958 14.1572C12.4859 14.5367 11.9342 14.8378 11.3535 15.0605L11.1025 15.1514H11.1016C11.0793 15.159 11.0571 15.1669 11.0342 15.1748C9.51234 15.6873 7.84224 15.5817 6.36426 14.9443L6.07129 14.8096C5.3482 14.4439 4.67072 13.9288 4.1377 13.3203L3.91797 13.0527L3.91016 13.0439L3.84277 12.959H3.8418C2.81057 11.6744 2.36571 9.93549 2.53516 8.28223C2.64545 7.33424 2.95228 6.41319 3.44727 5.60938L3.6709 5.27148L3.67285 5.26953C3.6858 5.2512 3.69858 5.23275 3.71191 5.21387L3.71094 5.21289C3.85636 5.00834 4.01615 4.81758 4.18945 4.62891L4.36816 4.44141L4.37012 4.43848C4.39734 4.41013 4.42493 4.38187 4.45215 4.35352C4.52879 4.27498 4.60794 4.19996 4.69043 4.12695L4.94922 3.91211L4.95605 3.90625C4.98272 3.88459 5.00872 3.86211 5.03613 3.83984L5.03711 3.84082Z",
+              stroke: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M9.36648 5.85289C9.53634 5.9647 9.6533 6.12598 9.71812 6.32867C9.73452 6.40467 9.74201 6.47516 9.74238 6.55312C9.74254 6.57462 9.74269 6.59612 9.74284 6.61826C9.7429 6.64157 9.74296 6.66489 9.74302 6.68891C9.74315 6.71368 9.74329 6.73845 9.74344 6.76397C9.74385 6.84591 9.7441 6.92785 9.74431 7.00979C9.7444 7.03785 9.74448 7.06592 9.74457 7.09484C9.74497 7.22817 9.74528 7.3615 9.74545 7.49483C9.74568 7.66315 9.74639 7.83146 9.74732 7.99978C9.74787 8.11787 9.74805 8.23596 9.74812 8.35405C9.74823 8.41042 9.74847 8.46679 9.74886 8.52316C9.75351 9.23268 9.75351 9.23268 9.54833 9.48966C9.39246 9.65505 9.20768 9.73677 8.98973 9.75C8.78199 9.74035 8.59485 9.64627 8.44906 9.48814C8.28258 9.27909 8.24899 9.03597 8.25049 8.7678C8.25038 8.7429 8.25027 8.718 8.25015 8.69234C8.24987 8.61081 8.25006 8.5293 8.25027 8.44777C8.25023 8.39068 8.25017 8.33358 8.25009 8.27649C8.24999 8.15716 8.25013 8.03783 8.25043 7.9185C8.25079 7.76594 8.25058 7.6134 8.2502 7.46085C8.24997 7.34306 8.25004 7.22527 8.25021 7.10748C8.25025 7.05125 8.2502 6.99501 8.25005 6.93877C8.24989 6.86005 8.25014 6.78135 8.25049 6.70263C8.25036 6.67965 8.25023 6.65668 8.2501 6.63301C8.25225 6.37163 8.32078 6.1648 8.48128 5.96879C8.72644 5.71507 9.07274 5.68973 9.36648 5.85289Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M9.34541 10.8369C9.52938 10.9471 9.67125 11.1068 9.73271 11.3148C9.77656 11.529 9.73613 11.7317 9.62145 11.916C9.49889 12.0867 9.3528 12.1846 9.14957 12.2412C8.92053 12.2704 8.73922 12.2283 8.55045 12.0972C8.38043 11.959 8.27865 11.7781 8.25072 11.5592C8.24266 11.3506 8.30179 11.162 8.43381 10.9998C8.68322 10.7451 9.02878 10.6749 9.34541 10.8369Z",
+              fill: "currentColor"
+            }
+          )
+        ] })
+      }
+    );
+  },
+  close: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
         xmlns: "http://www.w3.org/2000/svg",
+        width: "27",
+        height: "27",
+        viewBox: "0 0 27 27",
+        fill: "none",
         className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 4.5V19.5M19.5 12H4.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M6.24339 6.2645C6.39943 6.10887 6.61095 6.02146 6.83149 6.02146C7.05203 6.02146 7.26355 6.10887 7.41959 6.2645L13.4893 12.3255L19.5589 6.2645C19.6351 6.18285 19.727 6.11736 19.8291 6.07194C19.9312 6.02652 20.0414 6.0021 20.1531 6.00013C20.2648 5.99816 20.3758 6.01869 20.4795 6.06048C20.5831 6.10228 20.6772 6.16449 20.7562 6.2434C20.8353 6.32232 20.8976 6.41632 20.9394 6.51979C20.9813 6.62327 21.0018 6.73411 20.9999 6.84569C20.9979 6.95727 20.9734 7.06732 20.928 7.16926C20.8825 7.27119 20.8169 7.36294 20.7351 7.43902L14.6655 13.5L20.7351 19.561C20.8169 19.6371 20.8825 19.7288 20.928 19.8307C20.9734 19.9327 20.9979 20.0427 20.9999 20.1543C21.0018 20.2659 20.9813 20.3767 20.9394 20.4802C20.8976 20.5837 20.8353 20.6777 20.7562 20.7566C20.6772 20.8355 20.5831 20.8977 20.4795 20.9395C20.3758 20.9813 20.2648 21.0018 20.1531 20.9999C20.0414 20.9979 19.9312 20.9735 19.8291 20.9281C19.727 20.8826 19.6351 20.8172 19.5589 20.7355L13.4893 14.6745L7.41959 20.7355C7.26183 20.8823 7.05317 20.9622 6.83757 20.9584C6.62196 20.9546 6.41626 20.8674 6.26378 20.7151C6.1113 20.5629 6.02396 20.3575 6.02016 20.1422C6.01635 19.9269 6.09638 19.7185 6.24339 19.561L12.313 13.5L6.24339 7.43902C6.08754 7.2832 6 7.07198 6 6.85176C6 6.63154 6.08754 6.42032 6.24339 6.2645Z",
+            fill: "currentColor"
+          }
+        )
       }
     );
   },
-  close: ({ className, fill }) => {
+  // ----------------------------------- old ---------------------------------
+  // ** Status **
+  plus: ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
       {
@@ -865,7 +875,7 @@ var template = {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 18L18 6M6 6L18 18", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 4.5V19.5M19.5 12H4.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
       }
     );
   },
@@ -4305,300 +4315,371 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
 };
 var Icon_default = Icon;
 
-// src/components/select/option.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Option = (props) => {
-  const { base, option, icon } = optionStyle(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      title: props.option.value,
-      className: base(),
-      onClick: () => props.onClick(props.option),
-      ref: (node) => {
-        props.isSelected && (node == null ? void 0 : node.scrollIntoView());
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: option(), children: props.children }),
-        props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: icon(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "check", size: props.size }) })
-      ]
+// src/utils/clsx.ts
+function clsx(...args) {
+  var i = 0, tmp, x, str = "";
+  while (i < args.length) {
+    if (tmp = args[i++]) {
+      if (x = toVal(tmp)) {
+        str && (str += " ");
+        str += x;
+      }
     }
-  );
-};
-var option_default = Option;
-var optionStyle = tv({
-  slots: {
-    base: ["w-full", "flex", "items-center", "justify-between", , "overflow-hidden"],
-    option: ["text-ellipsis overflow-hidden "],
-    icon: ""
-  },
-  variants: {
-    variant: {
-      solid: {},
-      normal: {},
-      line: {}
-    },
-    color: {
-      primary: {
-        base: ["border-primary-main", "hover:bg-primary-soft", "hover:text-primary-main"],
-        icon: "text-primary-main"
-      },
-      secondary: {
-        base: ["border-secondary-main", "hover:bg-secondary-soft", "hover:text-secondary-main"],
-        icon: "text-secondary-main"
+  }
+  return str;
+}
+function toVal(mix) {
+  var k, y, str = "";
+  if (typeof mix === "string" || typeof mix === "number") {
+    str += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      var len = mix.length;
+      for (k = 0; k < len; k++) {
+        if (mix[k]) {
+          if (y = toVal(mix[k])) {
+            str && (str += " ");
+            str += y;
+          }
+        }
       }
-    },
-    size: {
-      sm: {
-        base: "text-sm px-[6px] py-[4.5px]"
-      },
-      md: {
-        base: "text-md px-[8px] py-[6.5px]"
-      },
-      lg: {
-        base: "text-lg px-[10px] py-[8px]"
-      },
-      xl: {
-        base: "text-xl px-[10px] py-[8px]"
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ");
+          str += y;
+        }
       }
     }
-  },
-  defaultVariants: {
-    variant: "normal",
-    color: "primary",
-    size: "md"
   }
-});
+  return str;
+}
 
 // src/components/select/select.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Select = (0, import_react2.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Select = (0, import_react.forwardRef)((originalProps, ref) => {
+  var _a;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
-  const { classNames, options, defaultOption, onChange, ...inputProps } = props;
-  const slots = (0, import_react2.useMemo)(() => select({ ...variantProps }), [variantProps]);
   const {
-    targetRect,
-    selectedOption,
-    optionWrapperHeight,
-    selectWrapperRef,
-    optionWrapperRef,
-    handleToggleSelect,
-    handleChangeOption,
-    calculatePositionWithScroll
-  } = useSelect({
+    label,
     options,
-    defaultOption,
-    onChange
-  });
+    helperText,
+    errorText,
+    classNames,
+    defaultSelectedOptions = [],
+    onChange,
+    multiple,
+    ...inputProps
+  } = props;
+  const slots = (0, import_react.useMemo)(() => select({ ...variantProps }), [variantProps]);
+  const [selectedOptions, setSelectedOptions] = (0, import_react.useState)(defaultSelectedOptions);
+  const [targetRect, setTargetRect] = (0, import_react.useState)(null);
+  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react.useState)(0);
+  const [isVisible, setIsVisible] = (0, import_react.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const selectWrapperRef = (0, import_react.useRef)(null);
+  const optionWrapperRef = (0, import_react.useRef)(null);
+  const handleToggleSelect = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      setTimeout(() => setIsVisible(false), 150);
+    } else {
+      if (selectWrapperRef.current) {
+        const rect = selectWrapperRef.current.getBoundingClientRect();
+        setTargetRect(rect);
+        setIsVisible(true);
+        requestAnimationFrame(() => setIsOpen(true));
+      }
+    }
+  };
+  const calculatePositionWithScroll = (rect, height) => {
+    const scrollTop = window.scrollY;
+    const scrollLeft = window.scrollX;
+    const spaceBelow = window.innerHeight - (rect.y + rect.height + 4);
+    const spaceAbove = rect.y - 4;
+    const top = spaceBelow < height && spaceAbove > height ? rect.y - height - 4 : rect.y + rect.height + 4;
+    return {
+      top: top + scrollTop,
+      left: rect.x + scrollLeft
+    };
+  };
+  const handleChangeOption = (option) => {
+    let nextOptions;
+    if (multiple) {
+      const exists = selectedOptions.some((o) => o.key === option.key);
+      nextOptions = exists ? selectedOptions.filter((o) => o.key !== option.key) : [...selectedOptions, option];
+    } else {
+      nextOptions = [option];
+      setIsOpen(false);
+      setTimeout(() => setIsVisible(false), 150);
+    }
+    setSelectedOptions(nextOptions);
+    onChange == null ? void 0 : onChange(nextOptions);
+  };
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      var _a2;
+      if (optionWrapperRef.current && !optionWrapperRef.current.contains(e.target) && !((_a2 = selectWrapperRef.current) == null ? void 0 : _a2.contains(e.target))) {
+        setIsOpen(false);
+        setTimeout(() => setIsVisible(false), 150);
+      }
+    };
+    window.addEventListener("mousedown", handleClickOutside);
+    return () => window.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (optionWrapperRef.current) {
+      setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
+    }
+  }, [targetRect]);
   const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  const getBaseProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getLabelProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames]
-  );
-  const getSelectWrapperProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.selectWrapper({ class: classNames == null ? void 0 : classNames.selectWrapper }),
-      ref: selectWrapperRef,
-      onClick: handleToggleSelect
-    }),
-    [slots, classNames]
-  );
-  const getSelectProps = (0, import_react2.useCallback)(
-    () => ({
-      ...inputProps,
-      ref,
-      className: slots.select({ class: classNames == null ? void 0 : classNames.select }),
-      value: (selectedOption == null ? void 0 : selectedOption.value) || "",
-      readOnly: true,
-      size: 0
-    }),
-    [slots, classNames, inputProps, selectedOption, ref]
-  );
-  const getOptionsWrapperProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
-      ref: optionWrapperRef
-    }),
-    [slots, classNames]
-  );
-  const getErrorMessageProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
-    }),
-    [slots, classNames]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ...getBaseProps(), children: [
-      props.label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { ...getLabelProps(), children: props.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-expanded": !!targetRect, ...getSelectWrapperProps(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { ...getSelectProps() }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: !!targetRect ? "arrow-triangle-up" : "arrow-triangle-down", size: originalProps.size, fill: true })
-      ] }),
-      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { ...getErrorMessageProps(), children: props.errorMessage })
-    ] }),
-    targetRect && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  const displayValue = multiple ? selectedOptions.map((opt) => opt.value).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.value) || "";
+  const Option = ({
+    option,
+    isSelected,
+    onClick
+  }) => {
+    const slot = select({ ...variantProps, isSelected });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { title: option.value, onClick, className: clsx(slot.option({ class: classNames == null ? void 0 : classNames.option })), children: [
+      option.value,
+      isSelected && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "check", size: originalProps.size })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: clsx(
+          slots.base({ class: classNames == null ? void 0 : classNames.base }),
+          variantProps.direction === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
+        ),
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                "data-expanded": isOpen,
+                className: clsx(
+                  slots.selectWrapper({ class: classNames == null ? void 0 : classNames.selectWrapper }),
+                  inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                ),
+                ref: selectWrapperRef,
+                onClick: handleToggleSelect,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "input",
+                    {
+                      ...inputProps,
+                      ref,
+                      className: clsx(
+                        slots.select({ class: classNames == null ? void 0 : classNames.select }),
+                        inputProps.readOnly ? "!text-body-foreground placeholder:text-body-foreground" : ""
+                      ),
+                      value: displayValue,
+                      readOnly: true,
+                      size: 0
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    Icon_default,
+                    {
+                      name: "brace-up",
+                      size: originalProps.size,
+                      className: `transition-transform duration-200 ${isOpen ? "rotate-0" : "rotate-180"}`
+                    }
+                  )
+                ]
+              }
+            ),
+            helperText && !errorText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.helperText({ class: classNames == null ? void 0 : classNames.helperText }), children: helperText }),
+            errorText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: clsx("error", slots.errorText({ class: classNames == null ? void 0 : classNames.errorText })), children: errorText })
+          ] })
+        ]
+      }
+    ),
+    isVisible && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
-          ...getOptionsWrapperProps(),
+          ref: optionWrapperRef,
+          className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
           style: {
             position: "absolute",
             top: position == null ? void 0 : position.top,
             left: position == null ? void 0 : position.left,
-            width: targetRect.width
+            width: targetRect == null ? void 0 : targetRect.width,
+            zIndex: 1e3,
+            opacity: isOpen ? 1 : 0,
+            transform: isOpen ? "translateY(0)" : "translateY(-0.25rem)",
+            transition: "opacity 150ms ease-out, transform 150ms ease-out"
           },
-          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            option_default,
-            {
-              variant: originalProps.variant,
-              size: originalProps.size,
-              color: originalProps.color,
-              option,
-              isSelected: (selectedOption == null ? void 0 : selectedOption.key) === option.key,
-              onClick: () => handleChangeOption(option),
-              children: option.value
-            },
-            option.key
-          ))
+          children: options.map((option) => {
+            const isSelected = selectedOptions.some((o) => o.key === option.key);
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Option,
+              {
+                option,
+                isSelected,
+                onClick: () => handleChangeOption(option)
+              },
+              option.key
+            );
+          })
         }
       ),
       document.body
-    ) })
+    )
   ] });
 });
 Select.displayName = "Select";
 var select_default = Select;
 var select = tv({
   slots: {
-    base: ["group/select", "flex flex-col"],
-    label: ["flex", "items-center"],
+    base: ["group/select", "flex"],
+    vertical: ["flex-col"],
+    horizon: ["flex-row", "gap-0"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
+    wrapper: ["flex", "flex-col"],
     selectWrapper: [
       "flex",
       "items-center",
-      "bg-transparent",
-      "border-neutral-main",
-      "transition duration-200",
-      "group-has-[p]/select:border-danger-main",
-      "group-has-[p]/select:text-danger-main",
-      "group-has-[p]/select:bg-danger-soft"
+      "justify-between",
+      "border",
+      "cursor-pointer",
+      "text-neutral-main",
+      "hover:bg-trans-soft",
+      "group-has-[p.error]/select:border-danger-main",
+      "group-has-[p.error]/select:bg-danger-soft",
+      "group-has-[p.error]/select:text-danger-main",
+      "group-has-[p.error]/select:hover:bg-danger-soft"
     ],
     select: [
-      "w-full",
       "bg-transparent",
-      "text-foreground",
-      "cursor-inherit",
-      "cursor-pointer",
+      "w-full",
+      "outline-none",
       "placeholder:text-neutral-main",
-      "group-has-[p]/select:text-danger-main",
-      "focus-visible:outline-none"
+      "text-neutral-dark",
+      "group-has-[p.error]/select:text-danger-main",
+      "group-has-[p.error]/select:placeholder:text-danger-main"
     ],
-    optionsWrapper: ["w-[240px]", "border", "bg-background", "cursor-pointer", "overflow-y-auto"],
-    errorMessage: ["text-danger-main"]
+    optionsWrapper: ["border", "rounded", "bg-white", "shadow", "overflow-auto"],
+    option: ["flex", "justify-between", "items-center", "cursor-pointer"],
+    helperText: ["text-neutral-main"],
+    errorText: ["text-danger-main"],
+    readonly: ["pointer-events-none", "!bg-trans-soft"]
   },
   variants: {
-    variant: {
-      solid: {
-        selectWrapper: "bg-trans-soft hover:bg-trans-light data-[expanded=true]:bg-trans-light group-has-[p]/select:bg-danger-soft"
-      },
-      normal: {
-        selectWrapper: "border hover:bg-trans-soft data-[expanded=true]:bg-trans-soft"
-      },
-      line: {
-        selectWrapper: "border-b !rounded-none hover:bg-trans-soft data-[expanded=true]:bg-trans-soft",
-        optionsWrapper: "!rounded-none"
-      }
-    },
     color: {
       primary: {
-        selectWrapper: "data-[expanded=true]:border-primary-main text-primary-main",
-        optionsWrapper: "border-primary-main",
-        select: "data-[expanded=true]:text-primary-main"
+        selectWrapper: ["hover:text-primary-main"],
+        option: ["hover:bg-primary-soft", "hover:text-primary-main"]
       },
       secondary: {
-        selectWrapper: "data-[expanded=true]:border-secondary-main text-secondary-main",
-        optionsWrapper: "border-secondary-main",
-        select: "data-[expanded=true]:text-secondary-main"
+        selectWrapper: ["hover:text-secondary-main"],
+        select: ["text-secondary-main"],
+        option: ["hover:bg-secondary-soft", "hover:text-secondary-main"]
       }
     },
     size: {
       sm: {
-        base: "text-sm gap-[6px]",
-        selectWrapper: "w-[240px] h-[24px] px-[6px] py-[4.5px] gap-[6px] rounded-sm",
-        optionsWrapper: "max-h-[96px] rounded-sm",
-        errorMessage: "text-sm"
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        wrapper: ["gap-[4px]"],
+        selectWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]"],
+        select: ["text-sm"],
+        option: ["px-[4px]", "py-[3px]", "text-sm"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
       },
       md: {
-        base: "text-md gap-[8px]",
-        selectWrapper: "w-[240px] h-[30px] px-[8px] py-[6.5px] gap-[8px] rounded-md",
-        optionsWrapper: "max-h-[120px] rounded-md",
-        errorMessage: "text-md"
+        base: ["text-md", "gap-[6px]", "rounded-md"],
+        label: ["text-md"],
+        wrapper: ["gap-[6px]"],
+        selectWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]"],
+        select: ["text-md"],
+        option: ["px-[6px]", "py-[5.5px]", "text-md"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
       },
       lg: {
-        base: "text-lg gap-[10px]",
-        selectWrapper: "w-[240px] h-[36px] px-[10px] py-[8px] gap-[10px] rounded-lg",
-        optionsWrapper: "max-h-[144px] rounded-lg",
-        errorMessage: "text-lg"
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        wrapper: ["gap-[8px]"],
+        selectWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]"],
+        select: ["text-lg"],
+        option: ["px-[8px]", "py-[8px]", "text-lg"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
       },
       xl: {
-        base: "text-lg gap-[10px]",
-        selectWrapper: "w-[240px] h-[36px] px-[10px] py-[8px] gap-[10px] rounded-xl",
-        optionsWrapper: "max-h-[144px] rounded-xl",
-        errorMessage: "text-xl"
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        wrapper: ["gap-[10px]"],
+        selectWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]"],
+        select: ["text-xl"],
+        option: ["px-[10px]", "py-[11.5px]"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
       }
     },
-    radius: {
-      default: "",
-      none: {
-        selectWrapper: "rounded-none",
-        optionsWrapper: "rounded-none"
-      },
-      full: {
-        selectWrapper: "rounded-full"
-      }
+    direction: {
+      vertical: "",
+      horizon: ""
     },
-    fullWidth: {
+    full: {
       true: {
-        selectWrapper: "w-full",
-        optionsWrapper: "w-full"
+        base: ["w-full"],
+        wrapper: ["w-full"],
+        selectWrapper: ["w-full"]
       }
     },
-    isDisabled: {
+    disabled: {
       true: {
-        base: "cursor-default",
-        selectWrapper: "bg-neutral-soft border-neutral-light text-neutral-light pointer-events-none",
-        select: "text-neutral-light focus:text-neutral-light",
-        label: "text-neutral-light"
+        base: ["pointer-events-none"],
+        selectWrapper: [
+          "bg-neutral-soft",
+          "border-neutral-light",
+          "group-has-[p.error]/select:text-danger-light",
+          "group-has-[p.error]/select:bg-danger-soft",
+          "group-has-[p.error]/select:border-danger-light"
+        ],
+        select: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/select:text-danger-light",
+          "group-has-[p.error]/select:placeholder:text-danger-light"
+        ],
+        helperText: ["!text-neutral-light"],
+        errorText: ["!text-danger-light"]
       }
     },
-    isRequired: {
-      true: {
-        label: "after:content-['*'] after:text-danger-main after:ml-0.5"
-      }
+    isSelected: {
+      true: "",
+      false: ""
     }
   },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md",
-    fullWidth: false,
-    isDisabled: false,
-    isRequired: false
-  },
   compoundVariants: [
     {
-      isDisabled: true,
-      isRequired: true,
+      color: "primary",
+      isSelected: true,
+      class: {
+        option: "bg-primary-soft text-primary-main"
+      }
+    },
+    {
+      color: "secondary",
+      isSelected: true,
       class: {
-        label: "after:text-danger-light"
+        option: "bg-secondary-soft text-secondary-main"
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    direction: "vertical",
+    disabled: false,
+    readonly: false
+  }
 });