@deepnoid/ui 0.1.120 → 0.1.121

package/dist/components/select/index.js

@@ -1724,22 +1724,28 @@ var template = {
       }
     );
   },
-  // ----------------------------------- old ---------------------------------
-  // ** Status **
-  check: ({ className, fill }) => {
+  check: ({ className }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
       {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
+        width: "27",
+        height: "28",
+        viewBox: "0 0 27 28",
+        fill: "none",
         className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4.5 12.75L10.5 18.75L19.5 5.25", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M21.9264 5.20931C22.1812 5.39338 22.3846 5.59774 22.4858 5.90334C22.5588 6.45228 22.3415 6.78579 22.0286 7.20666C21.9576 7.30047 21.8864 7.39405 21.8151 7.48762C21.6895 7.65415 21.5677 7.8235 21.4454 7.99253C21.2259 8.29482 21.0028 8.59408 20.7773 8.89185C20.4766 9.2892 20.1815 9.69044 19.889 10.094C19.8125 10.1993 19.7358 10.3044 19.659 10.4094C19.4079 10.7529 19.1577 11.0971 18.91 11.4431C18.8896 11.4716 18.8692 11.5001 18.8482 11.5294C18.7754 11.6314 18.703 11.7337 18.6307 11.8361C18.6035 11.8747 18.6035 11.8747 18.5756 11.9141C18.2362 12.3955 17.9059 12.8824 17.5821 13.3746C17.5478 13.4267 17.5478 13.4267 17.5128 13.4798C16.951 14.3338 16.425 15.1996 15.9364 16.0988C15.8817 16.1993 15.8266 16.2995 15.7713 16.3996C14.803 18.183 14.0974 20.1792 13.8032 22.1948C13.7275 22.4843 13.5304 22.7004 13.2862 22.8603C12.8671 23.0504 12.4792 23.0344 12.0524 22.8851C11.7159 22.6982 11.4492 22.3832 11.1807 22.1105C11.1305 22.06 11.1305 22.06 11.0793 22.0085C11.0463 21.9751 11.0133 21.9417 10.9793 21.9072C10.9355 21.8629 10.9355 21.8629 10.8908 21.8177C10.812 21.7336 10.738 21.6487 10.664 21.5606C10.4051 21.26 10.1208 20.9832 9.84198 20.7018C9.77941 20.6385 9.71685 20.5753 9.65429 20.512C9.52361 20.3798 9.39285 20.2478 9.26203 20.1158C9.0951 19.9473 8.92837 19.7787 8.76169 19.61C8.63267 19.4794 8.50355 19.349 8.37439 19.2186C8.3129 19.1564 8.25145 19.0943 8.19002 19.0321C7.78034 18.6148 7.78034 18.6148 7.3481 18.2218C7.26354 18.1493 7.18628 18.0708 7.1093 17.9902C6.97131 17.8488 6.8284 17.7169 6.67944 17.5876C6.56805 17.4895 6.45958 17.3885 6.35088 17.2873C6.15574 17.1075 5.95513 16.937 5.74972 16.7694C5.52338 16.5822 5.30225 16.3888 5.08115 16.1954C5.02902 16.1502 4.97647 16.1055 4.92361 16.0611C4.88291 16.0268 4.88291 16.0268 4.84139 15.9918C4.81684 15.9713 4.79228 15.9509 4.76699 15.9298C4.5693 15.7391 4.51301 15.5207 4.5 15.2507C4.5151 14.872 4.65787 14.6052 4.92439 14.3431C5.23566 14.0858 5.58225 13.9705 5.98399 13.9889C6.39409 14.0467 6.67261 14.2696 6.97788 14.5368C7.04531 14.5941 7.11275 14.6513 7.18024 14.7085C7.27801 14.7916 7.37519 14.8755 7.47238 14.9593C7.54704 15.0235 7.62196 15.0874 7.69694 15.1513C8.02915 15.4353 8.34957 15.7298 8.66619 16.0314C8.78965 16.1489 8.91524 16.2635 9.04232 16.3769C9.24098 16.556 9.42848 16.745 9.61441 16.9374C9.73206 17.0583 9.85175 17.1731 9.97956 17.283C10.2352 17.5064 10.4711 17.7507 10.7095 17.9925C10.7917 18.0758 10.8741 18.1589 10.9566 18.2419C11.4347 18.7249 11.4347 18.7249 11.6464 18.9799C11.7218 19.0675 11.8025 19.1485 11.8843 19.2299C11.898 19.1896 11.9116 19.1493 11.9257 19.1078C12.2024 18.2927 12.4869 17.488 12.8481 16.7062C12.8687 16.6616 12.8892 16.617 12.9104 16.571C13.6549 14.9617 14.5337 13.4385 15.5204 11.9689C15.553 11.9203 15.553 11.9203 15.5863 11.8707C16.0931 11.1161 16.6136 10.3732 17.1508 9.6404C17.2538 9.49984 17.3564 9.35903 17.4591 9.2182C17.5357 9.11296 17.6125 9.00777 17.6892 8.90257C17.7905 8.76367 17.8916 8.62462 17.9924 8.48543C18.2637 8.11165 18.5381 7.74072 18.8169 7.37269C19.0086 7.11969 19.1989 6.86631 19.381 6.6062C19.4144 6.55854 19.4478 6.51089 19.4823 6.46179C19.5085 6.42434 19.5085 6.42434 19.5353 6.38614C19.6584 6.21085 19.782 6.03602 19.9066 5.86184C19.9313 5.8267 19.9559 5.79157 19.9813 5.75537C20.4573 5.09349 21.1643 4.75205 21.9264 5.20931Z",
+            fill: "currentColor"
+          }
+        )
       }
     );
   },
+  // ----------------------------------- old ---------------------------------
+  // ** Status **
   "plus-circle": ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
@@ -5092,6 +5098,9 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     defaultSelectedOptions,
     onChange,
     multiple,
+    dropdownIconName = "brace-up",
+    optionIconName,
+    optionIconPlacement,
     ...inputProps
   } = props;
   const slots = (0, import_react.useMemo)(() => select({ ...variantProps }), [variantProps]);
@@ -5102,19 +5111,22 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
   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 isControlled = originalProps.value !== void 0;
+  const openSelect = () => {
+    if (selectWrapperRef.current) {
+      const rect = selectWrapperRef.current.getBoundingClientRect();
+      setTargetRect(rect);
+      setIsVisible(true);
+      requestAnimationFrame(() => setIsOpen(true));
     }
   };
+  const closeSelect = () => {
+    setIsOpen(false);
+    setTimeout(() => setIsVisible(false), 150);
+  };
+  const handleToggleSelect = () => {
+    isOpen ? closeSelect() : openSelect();
+  };
   const calculatePositionWithScroll = (rect, height) => {
     const scrollTop = window.scrollY;
     const scrollLeft = window.scrollX;
@@ -5133,8 +5145,7 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
       nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
     } else {
       nextOptions = [option];
-      setIsOpen(false);
-      setTimeout(() => setIsVisible(false), 150);
+      closeSelect();
     }
     setSelectedOptions(nextOptions);
     onChange == null ? void 0 : onChange(nextOptions);
@@ -5142,9 +5153,9 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
   (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);
+      const target = e.target;
+      if (optionWrapperRef.current && !optionWrapperRef.current.contains(target) && !((_a2 = selectWrapperRef.current) == null ? void 0 : _a2.contains(target))) {
+        closeSelect();
       }
     };
     window.addEventListener("mousedown", handleClickOutside);
@@ -5155,42 +5166,63 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
       setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
     }
   }, [targetRect]);
-  const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
-  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(", ") : ((_b = selectedOptions[0]) == null ? void 0 : _b.value) || "";
-  const Option = ({
-    option,
-    isSelected,
-    onClick
-  }) => {
-    const slot = select({ ...variantProps, isSelected });
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        role: "option",
-        title: option.label,
-        onClick,
-        className: clsx(slot.option({ class: classNames == null ? void 0 : classNames.option })),
-        children: [
-          option.label,
-          isSelected && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "check", size: originalProps.size })
-        ]
-      }
-    );
-  };
-  const isControlled = originalProps.value !== void 0;
   (0, import_react.useEffect)(() => {
     if (isControlled) {
       const valueArray = Array.isArray(originalProps.value) ? originalProps.value : [originalProps.value];
-      const matchedOptions = options.filter((opt) => valueArray.includes(opt.value));
-      setSelectedOptions(matchedOptions);
-    }
-  }, [originalProps.value, options]);
-  (0, import_react.useEffect)(() => {
-    if (!isControlled && defaultSelectedOptions) {
+      const matched = options.filter((opt) => valueArray.includes(opt.value));
+      setSelectedOptions(matched);
+    } else if (defaultSelectedOptions) {
       setSelectedOptions(defaultSelectedOptions);
     }
-  }, [defaultSelectedOptions]);
+  }, [originalProps.value, defaultSelectedOptions, options]);
+  const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
+  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
+  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_b = selectedOptions[0]) == null ? void 0 : _b.value) || "";
+  const renderOptions = () => {
+    if (!isVisible) return null;
+    return (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          ref: optionWrapperRef,
+          role: "listbox",
+          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 == 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) => {
+            const isSelected = selectedOptions.some((o) => o.value === option.value);
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                role: "option",
+                title: option.label,
+                onClick: () => handleChangeOption(option),
+                className: clsx(
+                  select({ ...variantProps, isSelected }).option({ class: classNames == null ? void 0 : classNames.option }),
+                  optionIconPlacement === "end" ? "justify-between" : ""
+                ),
+                children: [
+                  optionIconName && optionIconPlacement === "start" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: optionIconName, size: originalProps.size }),
+                  option.label,
+                  optionIconName && optionIconPlacement === "end" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: optionIconName, size: originalProps.size })
+                ]
+              },
+              option.value
+            );
+          })
+        }
+      ),
+      document.body
+    );
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
@@ -5232,7 +5264,7 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
                   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     Icon_default,
                     {
-                      name: "brace-up",
+                      name: dropdownIconName,
                       size: originalProps.size,
                       className: `transition-transform duration-200 ${isOpen ? "rotate-0" : "rotate-180"}`
                     }
@@ -5246,39 +5278,7 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
         ]
       }
     ),
-    isVisible && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "div",
-        {
-          ref: optionWrapperRef,
-          role: "listbox",
-          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 == 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) => {
-            const isSelected = selectedOptions.some((o) => o.value === option.value);
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              Option,
-              {
-                option,
-                isSelected,
-                onClick: () => handleChangeOption(option)
-              },
-              option.value
-            );
-          })
-        }
-      ),
-      document.body
-    )
+    renderOptions()
   ] });
 });
 Select.displayName = "Select";
@@ -5294,7 +5294,6 @@ var select = tv({
       "flex",
       "items-center",
       "justify-between",
-      "border",
       "cursor-pointer",
       "text-neutral-main",
       "hover:bg-trans-soft",
@@ -5312,22 +5311,59 @@ var select = tv({
       "group-has-[p.error]/select:text-danger-main",
       "group-has-[p.error]/select:placeholder:text-danger-main"
     ],
-    optionsWrapper: ["border", "rounded", "bg-body-background", "shadow", "overflow-auto"],
-    option: ["flex", "justify-between", "items-center", "cursor-pointer"],
+    optionsWrapper: ["bg-body-background", "overflow-auto", "flex", "flex-col", "gap-[10px]"],
+    option: [
+      "flex",
+      "items-center",
+      "cursor-pointer",
+      "text-neutral-dark",
+      "hover:bg-trans-soft",
+      "hover:text-neutral-strong"
+    ],
     helperMessage: ["text-neutral-main"],
     errorMessage: ["text-danger-main"],
     readonly: ["pointer-events-none", "!bg-trans-soft"]
   },
   variants: {
+    variant: {
+      solid: {
+        selectWrapper: ["border-transparent", "bg-trans-soft"],
+        option: [],
+        readonlyWrapper: ["!bg-trans-light"]
+      },
+      outline: {
+        selectWrapper: [
+          "border-neutral-light",
+          "border",
+          "group-has-[:hover]/select:bg-trans-soft",
+          "group-has-[:focus]/select:bg-body-background",
+          "group-has-[p.error]/select:border-danger-main"
+        ],
+        option: [],
+        readonlyWrapper: ["!bg-trans-soft"]
+      },
+      underline: {
+        selectWrapper: [
+          "bg-transparent",
+          "border-neutral-light",
+          "!rounded-none",
+          "group-has-[:hover]/select:bg-trans-soft",
+          "group-has-[:focus]/select:bg-body-background",
+          "group-has-[p.error]/select:border-danger-main"
+        ],
+        option: ["!rounded-none"],
+        readonlyWrapper: ["!bg-trans-soft"]
+      }
+    },
     color: {
       primary: {
         selectWrapper: ["text-primary-main"],
-        option: ["hover:bg-primary-soft", "hover:text-primary-main"],
+        option: [],
         helperMessage: ["text-primary-main"]
       },
       secondary: {
         selectWrapper: ["text-secondary-main"],
-        option: ["hover:bg-secondary-soft", "hover:text-secondary-main"],
+        option: [],
         helperMessage: ["text-secondary-main"]
       }
     },
@@ -5338,7 +5374,8 @@ var select = tv({
         wrapper: ["gap-[4px]"],
         selectWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]"],
         select: ["text-sm"],
-        option: ["px-[4px]", "py-[3px]", "text-sm"],
+        optionsWrapper: ["shadow-drop-sm", "rounded-sm", "p-[4px]"],
+        option: ["px-[4px]", "py-[3px]", "rounded-sm", "text-sm", "gap-[4px]"],
         helperMessage: ["text-sm"],
         errorMessage: ["text-sm"]
       },
@@ -5348,7 +5385,8 @@ var select = tv({
         wrapper: ["gap-[6px]"],
         selectWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]"],
         select: ["text-md"],
-        option: ["px-[6px]", "py-[5.5px]", "text-md"],
+        optionsWrapper: ["shadow-drop-md", "rounded-md", "p-[6px]"],
+        option: ["px-[6px]", "py-[5.5px]", "rounded-md", "text-md", "gap-[6px]"],
         helperMessage: ["text-sm"],
         errorMessage: ["text-sm"]
       },
@@ -5358,7 +5396,8 @@ var select = tv({
         wrapper: ["gap-[8px]"],
         selectWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]"],
         select: ["text-lg"],
-        option: ["px-[8px]", "py-[8px]", "text-lg"],
+        optionsWrapper: ["shadow-drop-lg", "rounded-lg", "p-[8px]"],
+        option: ["px-[8px]", "py-[8px]", "rounded-lg", "text-lg", "gap-[8px]"],
         helperMessage: ["text-md"],
         errorMessage: ["text-md"]
       },
@@ -5366,9 +5405,10 @@ var select = tv({
         base: ["text-xl", "gap-[10px]"],
         label: ["text-xl"],
         wrapper: ["gap-[10px]"],
-        selectWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]"],
+        selectWrapper: ["w-[240px]", "h-[50px]", "rounded-xl", "px-[10px]"],
         select: ["text-xl"],
-        option: ["px-[10px]", "py-[11.5px]"],
+        optionsWrapper: ["shadow-drop-xl", "rounded-xl", "p-[10px]"],
+        option: ["px-[10px]", "py-[11.5px]", , "rounded-xl", "text-xl", "gap-[10px]"],
         helperMessage: ["text-md"],
         errorMessage: ["text-md"]
       }
@@ -5410,22 +5450,83 @@ var select = tv({
     }
   },
   compoundVariants: [
+    {
+      variant: "outline",
+      size: "sm",
+      class: {
+        option: ["hover:shadow-[inset_0_0_0_1px_var(--dn-neutral-light)]"]
+      }
+    },
+    {
+      variant: "outline",
+      size: "md",
+      class: {
+        option: ["hover:shadow-[inset_0_0_0_1.25px_var(--dn-neutral-light)]"]
+      }
+    },
+    {
+      variant: "outline",
+      size: "lg",
+      class: {
+        option: ["hover:shadow-[inset_0_0_0_1.5px_var(--dn-neutral-light)]"]
+      }
+    },
+    {
+      variant: "outline",
+      size: "xl",
+      class: {
+        option: ["hover:shadow-[inset_0_0_0_1.75px_var(--dn-neutral-light)]"]
+      }
+    },
+    {
+      variant: "underline",
+      size: "sm",
+      class: {
+        selectWrapper: ["border-b-sm"],
+        option: ["hover:shadow-[inset_0_-1px_0_0_var(--dn-neutral-light)]"]
+      }
+    },
+    {
+      variant: "underline",
+      size: "md",
+      class: {
+        selectWrapper: ["border-b-md"],
+        option: ["hover:shadow-[inset_0_-1.25px_0_0_var(--dn-neutral-light)]"]
+      }
+    },
+    {
+      variant: "underline",
+      size: "lg",
+      class: {
+        selectWrapper: ["border-b-lg"],
+        option: ["hover:shadow-[inset_0_-1.5px_0_0_var(--dn-neutral-light)]"]
+      }
+    },
+    {
+      variant: "underline",
+      size: "xl",
+      class: {
+        selectWrapper: ["border-b-xl"],
+        option: ["hover:shadow-[inset_0_-1.75px_0_0_var(--dn-neutral-light)]"]
+      }
+    },
     {
       color: "primary",
       isSelected: true,
       class: {
-        option: "bg-primary-soft text-primary-main"
+        option: ["text-primary-main"]
       }
     },
     {
       color: "secondary",
       isSelected: true,
       class: {
-        option: "bg-secondary-soft text-secondary-main"
+        option: ["text-secondary-main"]
       }
     }
   ],
   defaultVariants: {
+    variant: "solid",
     color: "primary",
     size: "md",
     direction: "vertical",

package/dist/components/select/index.mjs

@@ -2,11 +2,11 @@
 import "../../chunk-QCEKPS7U.mjs";
 import {
   select_default
-} from "../../chunk-MIVGSJFF.mjs";
+} from "../../chunk-3YT4YJNJ.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
-import "../../chunk-EM2NIGNZ.mjs";
+import "../../chunk-YZ57UYAS.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-CTWYY7Z2.mjs";
+import "../../chunk-BG4DIGKH.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";