react-customizable-dropdown 1.0.2 → 1.0.3

package/dist/dropdown.es.js

@@ -1,248 +1,438 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { useState as j, useRef as M, useMemo as z, useEffect as U } from "react";
-const le = ({
-  options: g,
-  value: l,
-  onChange: x,
-  placeholder: E = "Select...",
-  multiSelect: S = !1,
-  searchable: a = !1,
-  disabled: y = !1,
-  loading: N = !1,
-  className: q = "",
-  style: H = {},
-  theme: T,
-  label: V,
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { useState as M, useRef as E, useEffect as W, useMemo as U } from "react";
+const t = {
+  container: {
+    position: "relative",
+    width: "100%"
+  },
+  containerDisabled: {
+    opacity: 0.6,
+    cursor: "not-allowed"
+  },
+  label: {
+    display: "block",
+    marginBottom: "4px",
+    fontSize: "14px",
+    fontWeight: 500,
+    color: "#374151",
+    cursor: "pointer"
+  },
+  trigger: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    cursor: "pointer",
+    transition: "all 0.2s",
+    border: "1px solid #d1d5db",
+    borderRadius: "8px",
+    outline: "none"
+  },
+  triggerContent: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "4px",
+    flex: 1,
+    overflow: "hidden"
+  },
+  searchInput: {
+    flex: 1,
+    outline: "none",
+    border: "none",
+    background: "transparent",
+    minWidth: "60px",
+    fontSize: "inherit",
+    color: "inherit",
+    padding: 0,
+    margin: 0
+  },
+  placeholder: {
+    color: "#9ca3af"
+  },
+  multiTag: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "2px 8px",
+    borderRadius: "4px",
+    fontSize: "14px"
+  },
+  multiTagRemove: {
+    marginLeft: "4px",
+    cursor: "pointer",
+    fontWeight: "bold",
+    opacity: 0.8
+  },
+  actionsContainer: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    marginLeft: "8px"
+  },
+  spinner: {
+    width: "16px",
+    height: "16px",
+    border: "2px solid",
+    borderTopColor: "transparent",
+    borderRadius: "50%",
+    animation: "dropdown-spin 1s linear infinite"
+  },
+  clearButton: {
+    padding: "4px",
+    borderRadius: "50%",
+    transition: "background-color 0.2s",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  icon: {
+    width: "12px",
+    height: "12px",
+    color: "#9ca3af"
+  },
+  chevronContainer: {
+    transition: "transform 0.2s"
+  },
+  chevronIcon: {
+    width: "16px",
+    height: "16px",
+    color: "#6b7280"
+  },
+  menu: {
+    position: "absolute",
+    zIndex: 50,
+    width: "100%",
+    marginTop: "4px",
+    border: "1px solid #d1d5db",
+    borderRadius: "8px",
+    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+    maxHeight: "240px",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column"
+  },
+  loadingContainer: {
+    padding: "32px 16px",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    color: "#9ca3af"
+  },
+  loadingSpinner: {
+    width: "24px",
+    height: "24px",
+    border: "2px solid",
+    borderTopColor: "transparent",
+    borderRadius: "50%",
+    marginRight: "8px",
+    animation: "dropdown-spin 1s linear infinite"
+  },
+  optionsList: {
+    padding: "4px 0",
+    overflowY: "auto",
+    margin: 0,
+    listStyle: "none"
+  },
+  option: {
+    padding: "8px 16px",
+    cursor: "pointer",
+    transition: "background-color 0.15s",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  optionDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  optionContent: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  sublabel: {
+    fontSize: "12px",
+    color: "#6b7280",
+    marginTop: "2px"
+  },
+  checkIcon: {
+    width: "16px",
+    height: "16px",
+    flexShrink: 0
+  },
+  noOptions: {
+    padding: "8px 16px",
+    color: "#6b7280",
+    textAlign: "center",
+    fontSize: "14px"
+  }
+}, re = () => {
+  if (typeof document > "u") return;
+  const f = "dropdown-keyframes";
+  if (document.getElementById(f)) return;
+  const n = document.createElement("style");
+  n.id = f, n.textContent = `
+    @keyframes dropdown-spin {
+      to { transform: rotate(360deg); }
+    }
+  `, document.head.appendChild(n);
+}, se = ({
+  options: f,
+  value: n,
+  onChange: C,
+  placeholder: H = "Select...",
+  multiSelect: B = !1,
+  searchable: u = !1,
+  disabled: b = !1,
+  loading: L = !1,
+  className: Y = "",
+  style: q = {},
+  theme: I,
+  label: z,
   labelClassName: G = "",
-  optionClassName: O = "",
-  selectedOptionClassName: L = "",
+  optionClassName: D = "",
+  selectedOptionClassName: v = "",
   menuClassName: J = "",
-  triggerClassName: B = "",
-  triggerStyle: Q = {},
-  arrowIcon: P,
-  arrowIconClassName: X = "",
-  labelField: k = "label",
-  valueField: d = "value",
-  sublabelField: R = "sublabel",
-  sublabelClassName: Y = ""
+  triggerClassName: Q = "",
+  triggerStyle: X = {},
+  arrowIcon: V,
+  arrowIconClassName: Z = "",
+  labelField: m = "label",
+  valueField: c = "value",
+  sublabelField: P = "sublabel",
+  sublabelClassName: _ = ""
 }) => {
-  const [n, f] = j(!1), [b, A] = j(""), [p, h] = j(-1), D = M(null), $ = M(null), w = M(null), Z = z(() => {
+  const [i, g] = M(!1), [w, R] = M(""), [x, y] = M(-1), A = E(null), j = E(null), S = E(null);
+  W(() => {
+    re();
+  }, []);
+  const s = U(() => {
     const e = {
       primaryColor: "#3b82f6",
-      // blue-500
       backgroundColor: "#ffffff",
       hoverColor: "#eff6ff",
-      // blue-50
       textColor: "#1f2937",
-      // gray-800
       padding: "0.5rem 1rem",
       menuBackgroundColor: "#ffffff",
       optionTextColor: "#1f2937",
       selectedOptionTextColor: "#3b82f6",
       selectedOptionBackgroundColor: "#eff6ff",
       multiSelectSelectedOptionTextColor: "#1e40af",
-      // blue-800
       multiSelectSelectedOptionBackgroundColor: "#dbeafe",
-      // blue-100
       focusBorderColor: "#3b82f6"
-      // blue-500 (defaults to primaryColor)
-    }, t = T || {}, o = t.selectedOptionTextColor ?? t.primaryColor ?? e.selectedOptionTextColor, i = t.selectedOptionBackgroundColor ?? t.hoverColor ?? e.selectedOptionBackgroundColor, c = t.multiSelectSelectedOptionTextColor ?? "#1e40af", u = t.multiSelectSelectedOptionBackgroundColor ?? "#dbeafe", s = {
-      ...e,
-      ...t,
-      menuBackgroundColor: t.menuBackgroundColor ?? t.backgroundColor ?? e.menuBackgroundColor,
-      optionTextColor: t.optionTextColor ?? t.textColor ?? e.optionTextColor,
-      selectedOptionTextColor: o,
-      selectedOptionBackgroundColor: i,
-      multiSelectSelectedOptionTextColor: c,
-      multiSelectSelectedOptionBackgroundColor: u,
-      focusBorderColor: t.focusBorderColor ?? t.primaryColor ?? e.focusBorderColor
-    };
+    }, o = I || {}, l = o.selectedOptionTextColor ?? o.primaryColor ?? e.selectedOptionTextColor, p = o.selectedOptionBackgroundColor ?? o.hoverColor ?? e.selectedOptionBackgroundColor, d = o.multiSelectSelectedOptionTextColor ?? "#1e40af", a = o.multiSelectSelectedOptionBackgroundColor ?? "#dbeafe";
     return {
-      "--dd-primary": s.primaryColor,
-      "--dd-bg": s.backgroundColor,
-      "--dd-hover": s.hoverColor,
-      "--dd-text": s.textColor,
-      "--dd-padding": s.padding,
-      "--dd-menu-bg": s.menuBackgroundColor,
-      "--dd-option-text": s.optionTextColor,
-      "--dd-selected-text": s.selectedOptionTextColor,
-      "--dd-selected-bg": s.selectedOptionBackgroundColor,
-      "--dd-multi-selected-text": s.multiSelectSelectedOptionTextColor,
-      "--dd-multi-selected-bg": s.multiSelectSelectedOptionBackgroundColor,
-      "--dd-focus-border": s.focusBorderColor,
-      ...H
+      ...e,
+      ...o,
+      menuBackgroundColor: o.menuBackgroundColor ?? o.backgroundColor ?? e.menuBackgroundColor,
+      optionTextColor: o.optionTextColor ?? o.textColor ?? e.optionTextColor,
+      selectedOptionTextColor: l,
+      selectedOptionBackgroundColor: p,
+      multiSelectSelectedOptionTextColor: d,
+      multiSelectSelectedOptionBackgroundColor: a,
+      focusBorderColor: o.focusBorderColor ?? o.primaryColor ?? e.focusBorderColor
     };
-  }, [T, H]);
-  U(() => {
-    const e = (t) => {
-      D.current && !D.current.contains(t.target) && f(!1);
+  }, [I]);
+  W(() => {
+    const e = (o) => {
+      A.current && !A.current.contains(o.target) && g(!1);
     };
     return document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
   }, []);
-  const I = () => {
-    y || (f(!n), n || (h(-1), setTimeout(() => {
-      a && w.current && w.current.focus();
+  const K = () => {
+    b || (g(!i), i || (y(-1), setTimeout(() => {
+      u && S.current && S.current.focus();
     }, 0)));
-  }, _ = () => {
-    a ? n || (f(!0), h(-1), setTimeout(() => {
-      w.current && w.current.focus();
-    }, 0)) : I();
-  }, C = (() => {
-    if (l == null) return [];
-    if (Array.isArray(l))
-      return g.filter((t) => l.includes(t[d]));
-    const e = g.find((t) => t[d] === l);
+  }, F = () => {
+    u ? i || (g(!0), y(-1), setTimeout(() => {
+      S.current && S.current.focus();
+    }, 0)) : K();
+  }, k = (() => {
+    if (n == null) return [];
+    if (Array.isArray(n))
+      return f.filter((o) => n.includes(o[c]));
+    const e = f.find((o) => o[c] === n);
     return e ? [e] : [];
-  })(), W = (e, t) => {
-    if (t?.stopPropagation(), e.disabled) return;
-    let o, i;
-    if (S) {
-      const c = Array.isArray(l) ? l : l ? [l] : [];
-      c.includes(e[d]) ? o = c.filter((s) => s !== e[d]) : o = [...c, e[d]], i = g.filter(
-        (s) => o.includes(s[d])
+  })(), N = (e, o) => {
+    if (o?.stopPropagation(), e.disabled) return;
+    let l, p;
+    if (B) {
+      const d = Array.isArray(n) ? n : n ? [n] : [];
+      d.includes(e[c]) ? l = d.filter((O) => O !== e[c]) : l = [...d, e[c]], p = f.filter(
+        (O) => l.includes(O[c])
       );
     } else
-      o = e[d], i = e, f(!1), A("");
-    x && x(o, i);
-  }, F = (e, t) => {
-    if (t.stopPropagation(), !x) return;
-    const i = (Array.isArray(l) ? l : l ? [l] : []).filter((u) => u !== e), c = g.filter(
-      (u) => i.includes(u[d])
+      l = e[c], p = e, g(!1), R("");
+    C && C(l, p);
+  }, ee = (e, o) => {
+    if (o.stopPropagation(), !C) return;
+    const p = (Array.isArray(n) ? n : n ? [n] : []).filter((a) => a !== e), d = f.filter(
+      (a) => p.includes(a[c])
     );
-    x(i, c);
-  }, ee = (e) => {
-    if (e.stopPropagation(), n && a) {
-      A(""), f(!1);
+    C(p, d);
+  }, oe = (e) => {
+    if (e.stopPropagation(), i && u) {
+      R(""), g(!1);
       return;
     }
-    x && x(S ? [] : "", S ? [] : []);
-  }, v = z(
-    () => g.filter((e) => !a || !b ? !0 : (typeof e[k] == "string" ? e[k] : String(e[d])).toLowerCase().includes(b.toLowerCase())),
-    [g, a, b]
-  ), K = (e) => {
-    if (!y)
+    C && C(B ? [] : "", B ? [] : []);
+  }, T = U(
+    () => f.filter((e) => !u || !w ? !0 : (typeof e[m] == "string" ? e[m] : String(e[c])).toLowerCase().includes(w.toLowerCase())),
+    [f, u, w, m, c]
+  ), $ = (e) => {
+    if (!b)
       switch (e.key) {
         case "Enter":
-          e.preventDefault(), n ? p >= 0 && p < v.length && W(v[p]) : f(!0);
+          e.preventDefault(), i ? x >= 0 && x < T.length && N(T[x]) : g(!0);
           break;
         case "Escape":
-          n && (e.preventDefault(), f(!1));
+          i && (e.preventDefault(), g(!1));
           break;
         case "ArrowDown":
-          e.preventDefault(), n ? h(
-            (t) => t < v.length - 1 ? t + 1 : t
-          ) : (f(!0), h(0));
+          e.preventDefault(), i ? y(
+            (o) => o < T.length - 1 ? o + 1 : o
+          ) : (g(!0), y(0));
           break;
         case "ArrowUp":
-          e.preventDefault(), n && h((t) => t > 0 ? t - 1 : t);
+          e.preventDefault(), i && y((o) => o > 0 ? o - 1 : o);
           break;
       }
   };
-  U(() => {
-    if (n && $.current && p >= 0) {
-      const e = $.current, t = e.children[p];
-      if (t) {
-        const o = e.scrollTop, i = o + e.clientHeight, c = t.offsetTop, u = c + t.clientHeight;
-        c < o ? e.scrollTop = c : u > i && (e.scrollTop = u - e.clientHeight);
+  W(() => {
+    if (i && j.current && x >= 0) {
+      const e = j.current, o = e.children[x];
+      if (o) {
+        const l = e.scrollTop, p = l + e.clientHeight, d = o.offsetTop, a = d + o.clientHeight;
+        d < l ? e.scrollTop = d : a > p && (e.scrollTop = a - e.clientHeight);
       }
     }
-  }, [p, n]);
-  const te = (e) => Array.isArray(l) ? l.includes(e) : l === e;
-  return /* @__PURE__ */ m(
+  }, [x, i]);
+  const te = (e) => Array.isArray(n) ? n.includes(e) : n === e;
+  return /* @__PURE__ */ h(
     "div",
     {
-      ref: D,
-      className: `relative w-full ${q} ${y ? "opacity-60 cursor-not-allowed" : ""}`,
-      style: Z,
-      onKeyDown: K,
+      ref: A,
+      className: Y,
+      style: {
+        ...t.container,
+        ...b ? t.containerDisabled : {},
+        ...q
+      },
+      onKeyDown: $,
       children: [
-        V && /* @__PURE__ */ r(
+        z && /* @__PURE__ */ r(
           "label",
           {
-            className: `block mb-1 text-sm font-medium text-gray-700 cursor-pointer ${G}`,
-            onClick: I,
-            style: T ? { color: T.textColor } : void 0,
-            children: V
+            className: G,
+            onClick: K,
+            style: {
+              ...t.label,
+              ...I?.textColor ? { color: I.textColor } : {}
+            },
+            children: z
           }
         ),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ h(
           "div",
           {
-            onClick: _,
-            className: `
-          flex items-center justify-between
-          w-full
-          bg-[var(--dd-bg)]
-          cursor-pointer
-          transition-all duration-200
-          text-[var(--dd-text)]
-          ${B || "border rounded-lg"}
-        `,
+            onClick: F,
+            className: Q,
             style: {
-              padding: B ? void 0 : "var(--dd-padding)",
-              minHeight: B ? void 0 : "42px",
-              borderColor: B ? void 0 : n ? "var(--dd-focus-border)" : "#d1d5db",
-              outline: "none",
-              ...Q
+              ...t.trigger,
+              backgroundColor: s.backgroundColor,
+              color: s.textColor,
+              padding: s.padding,
+              minHeight: "42px",
+              borderColor: i ? s.focusBorderColor : "#d1d5db",
+              ...X
             },
             role: "button",
-            tabIndex: a ? -1 : 0,
+            tabIndex: u ? -1 : 0,
             "aria-haspopup": "listbox",
-            "aria-expanded": n,
+            "aria-expanded": i,
             children: [
-              /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-1 flex-1 overflow-hidden", children: a && (n || C.length === 0) ? /* @__PURE__ */ r(
+              /* @__PURE__ */ r("div", { style: t.triggerContent, children: u && (i || k.length === 0) ? /* @__PURE__ */ r(
                 "input",
                 {
-                  ref: w,
+                  ref: S,
                   type: "text",
-                  value: b,
-                  onChange: (e) => A(e.target.value),
-                  onKeyDown: K,
-                  placeholder: C.length === 0 ? E : "Search...",
-                  className: "flex-1 outline-none bg-transparent min-w-[60px]",
+                  value: w,
+                  onChange: (e) => R(e.target.value),
+                  onKeyDown: $,
+                  placeholder: k.length === 0 ? H : "Search...",
+                  style: {
+                    ...t.searchInput,
+                    color: s.textColor
+                  },
                   onClick: (e) => {
-                    e.stopPropagation(), n || f(!0);
+                    e.stopPropagation(), i || g(!0);
                   },
-                  disabled: y
+                  disabled: b
                 }
-              ) : C.length === 0 ? /* @__PURE__ */ r("span", { className: "text-gray-400", children: E }) : S ? C.map((e) => /* @__PURE__ */ m(
+              ) : k.length === 0 ? /* @__PURE__ */ r("span", { style: t.placeholder, children: H }) : B ? k.map((e) => /* @__PURE__ */ h(
                 "span",
                 {
-                  className: "inline-flex items-center px-2 py-0.5 rounded text-sm animate-fadeIn",
                   style: {
-                    backgroundColor: "var(--dd-multi-selected-bg)",
-                    color: "var(--dd-multi-selected-text)"
+                    ...t.multiTag,
+                    backgroundColor: s.multiSelectSelectedOptionBackgroundColor,
+                    color: s.multiSelectSelectedOptionTextColor
                   },
-                  onClick: (t) => t.stopPropagation(),
+                  onClick: (o) => o.stopPropagation(),
                   children: [
-                    e[k],
+                    e[m],
                     /* @__PURE__ */ r(
                       "span",
                       {
-                        className: "ml-1 cursor-pointer font-bold",
-                        style: { color: "currentColor", opacity: 0.8 },
-                        onClick: (t) => F(e[d], t),
+                        style: {
+                          ...t.multiTagRemove,
+                          color: s.multiSelectSelectedOptionTextColor
+                        },
+                        onClick: (o) => ee(e[c], o),
                         children: "×"
                       }
                     )
                   ]
                 },
-                e[d]
-              )) : /* @__PURE__ */ r("span", { className: "truncate", children: C[0][k] }) }),
-              /* @__PURE__ */ m("div", { className: "flex items-center gap-2 ml-2", children: [
-                N && /* @__PURE__ */ r("div", { className: "animate-spin h-4 w-4 border-2 border-[var(--dd-primary)] border-t-transparent rounded-full" }),
-                !N && !y && (C.length > 0 || n && a && b) && /* @__PURE__ */ r(
+                e[c]
+              )) : /* @__PURE__ */ r(
+                "span",
+                {
+                  style: {
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: k[0][m]
+                }
+              ) }),
+              /* @__PURE__ */ h("div", { style: t.actionsContainer, children: [
+                L && /* @__PURE__ */ r(
+                  "div",
+                  {
+                    style: {
+                      ...t.spinner,
+                      borderColor: s.primaryColor,
+                      borderTopColor: "transparent"
+                    }
+                  }
+                ),
+                !L && !b && (k.length > 0 || i && u && w) && /* @__PURE__ */ r(
                   "div",
                   {
-                    onClick: ee,
-                    className: "p-1 hover:bg-gray-100 rounded-full transition-colors z-10",
-                    title: n && a ? "Clear search" : "Clear selection",
+                    onClick: oe,
+                    style: t.clearButton,
+                    title: i && u ? "Clear search" : "Clear selection",
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = "#f3f4f6";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    },
                     children: /* @__PURE__ */ r(
                       "svg",
                       {
-                        className: "w-3 h-3 text-gray-400 hover:text-gray-600",
+                        style: t.icon,
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
@@ -262,11 +452,15 @@ const le = ({
                 /* @__PURE__ */ r(
                   "div",
                   {
-                    className: `transform transition-transform duration-200 ${n ? "rotate-180" : ""} ${X}`,
-                    children: P || /* @__PURE__ */ r(
+                    className: Z,
+                    style: {
+                      ...t.chevronContainer,
+                      transform: i ? "rotate(180deg)" : "rotate(0deg)"
+                    },
+                    children: V || /* @__PURE__ */ r(
                       "svg",
                       {
-                        className: "w-4 h-4 text-gray-500",
+                        style: t.chevronIcon,
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
@@ -287,49 +481,63 @@ const le = ({
             ]
           }
         ),
-        n && /* @__PURE__ */ r(
+        i && /* @__PURE__ */ r(
           "div",
           {
-            className: `absolute z-50 w-full mt-1 bg-[var(--dd-menu-bg)] border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-hidden flex flex-col animate-enter ${J}`,
-            children: N ? /* @__PURE__ */ m("div", { className: "px-4 py-8 flex justify-center items-center text-gray-400", children: [
-              /* @__PURE__ */ r("div", { className: "animate-spin h-6 w-6 border-2 border-[var(--dd-primary)] border-t-transparent rounded-full mr-2" }),
+            className: J,
+            style: {
+              ...t.menu,
+              backgroundColor: s.menuBackgroundColor
+            },
+            children: L ? /* @__PURE__ */ h("div", { style: t.loadingContainer, children: [
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  style: {
+                    ...t.loadingSpinner,
+                    borderColor: s.primaryColor,
+                    borderTopColor: "transparent"
+                  }
+                }
+              ),
               "Loading options..."
-            ] }) : /* @__PURE__ */ r("ul", { ref: $, className: "py-1 overflow-y-auto", role: "listbox", children: v.length === 0 ? /* @__PURE__ */ r("li", { className: "px-4 py-2 text-gray-500 text-center text-sm", children: "No options found" }) : v.map((e, t) => {
-              const o = te(e[d]), i = t === p;
-              return /* @__PURE__ */ m(
+            ] }) : /* @__PURE__ */ r("ul", { ref: j, style: t.optionsList, role: "listbox", children: T.length === 0 ? /* @__PURE__ */ r("li", { style: t.noOptions, children: "No options found" }) : T.map((e, o) => {
+              const l = te(e[c]), p = o === x, d = e.disabled;
+              let a = "transparent";
+              return l ? a = s.selectedOptionBackgroundColor : p && (a = s.hoverColor), /* @__PURE__ */ h(
                 "li",
                 {
-                  className: `
-                        px-4 py-2 cursor-pointer transition-colors duration-150 flex items-center justify-between
-                        text-[var(--dd-option-text)]
-                        ${O}
-                        ${o ? L : ""}
-                        `,
+                  className: `${D} ${l ? v : ""}`,
                   style: {
-                    backgroundColor: o && L ? void 0 : i && !O ? "var(--dd-hover)" : o ? "var(--dd-selected-bg)" : O ? void 0 : "transparent",
-                    color: o && L || O ? void 0 : o ? "var(--dd-selected-text)" : "var(--dd-option-text)",
-                    fontWeight: o ? 500 : 400
+                    ...t.option,
+                    ...d ? t.optionDisabled : {},
+                    backgroundColor: D || v ? void 0 : a,
+                    color: D || v ? void 0 : l ? s.selectedOptionTextColor : s.optionTextColor,
+                    fontWeight: l ? 500 : 400
                   },
-                  onMouseEnter: () => h(t),
+                  onMouseEnter: () => y(o),
                   role: "option",
-                  "aria-selected": o,
-                  onClick: (c) => W(e, c),
+                  "aria-selected": l,
+                  onClick: (O) => N(e, O),
                   children: [
-                    /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
-                      /* @__PURE__ */ r("span", { children: e[k] }),
-                      e[R] && /* @__PURE__ */ r(
+                    /* @__PURE__ */ h("div", { style: t.optionContent, children: [
+                      /* @__PURE__ */ r("span", { children: e[m] }),
+                      e[P] && /* @__PURE__ */ r(
                         "span",
                         {
-                          className: `text-xs text-gray-500 mt-0.5 ${Y}`,
-                          children: e[R]
+                          className: _,
+                          style: t.sublabel,
+                          children: e[P]
                         }
                       )
                     ] }),
-                    o && /* @__PURE__ */ r(
+                    l && /* @__PURE__ */ r(
                       "svg",
                       {
-                        className: "w-4 h-4",
-                        style: { color: "var(--dd-selected-text)" },
+                        style: {
+                          ...t.checkIcon,
+                          color: s.selectedOptionTextColor
+                        },
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
@@ -346,7 +554,7 @@ const le = ({
                     )
                   ]
                 },
-                e[d]
+                e[c]
               );
             }) })
           }
@@ -356,5 +564,5 @@ const le = ({
   );
 };
 export {
-  le as Dropdown
+  se as Dropdown
 };

package/dist/dropdown.umd.js

@@ -1,14 +1,5 @@
-(function(x,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],o):(x=typeof globalThis<"u"?globalThis:x||self,o(x.Dropdown={},x.jsxRuntime,x.React))})(this,(function(x,o,a){"use strict";const q=({options:h,value:l,onChange:m,placeholder:$="Select...",multiSelect:T=!1,searchable:f=!1,disabled:k=!1,loading:L=!1,className:z="",style:E={},theme:O,label:H,labelClassName:U="",optionClassName:B="",selectedOptionClassName:j="",menuClassName:G="",triggerClassName:N="",triggerStyle:J={},arrowIcon:P,arrowIconClassName:Q="",labelField:w="label",valueField:d="value",sublabelField:V="sublabel",sublabelClassName:X=""})=>{const[n,u]=a.useState(!1),[b,D]=a.useState(""),[g,C]=a.useState(-1),A=a.useRef(null),M=a.useRef(null),S=a.useRef(null),Y=a.useMemo(()=>{const e={primaryColor:"#3b82f6",backgroundColor:"#ffffff",hoverColor:"#eff6ff",textColor:"#1f2937",padding:"0.5rem 1rem",menuBackgroundColor:"#ffffff",optionTextColor:"#1f2937",selectedOptionTextColor:"#3b82f6",selectedOptionBackgroundColor:"#eff6ff",multiSelectSelectedOptionTextColor:"#1e40af",multiSelectSelectedOptionBackgroundColor:"#dbeafe",focusBorderColor:"#3b82f6"},t=O||{},r=t.selectedOptionTextColor??t.primaryColor??e.selectedOptionTextColor,i=t.selectedOptionBackgroundColor??t.hoverColor??e.selectedOptionBackgroundColor,c=t.multiSelectSelectedOptionTextColor??"#1e40af",p=t.multiSelectSelectedOptionBackgroundColor??"#dbeafe",s={...e,...t,menuBackgroundColor:t.menuBackgroundColor??t.backgroundColor??e.menuBackgroundColor,optionTextColor:t.optionTextColor??t.textColor??e.optionTextColor,selectedOptionTextColor:r,selectedOptionBackgroundColor:i,multiSelectSelectedOptionTextColor:c,multiSelectSelectedOptionBackgroundColor:p,focusBorderColor:t.focusBorderColor??t.primaryColor??e.focusBorderColor};return{"--dd-primary":s.primaryColor,"--dd-bg":s.backgroundColor,"--dd-hover":s.hoverColor,"--dd-text":s.textColor,"--dd-padding":s.padding,"--dd-menu-bg":s.menuBackgroundColor,"--dd-option-text":s.optionTextColor,"--dd-selected-text":s.selectedOptionTextColor,"--dd-selected-bg":s.selectedOptionBackgroundColor,"--dd-multi-selected-text":s.multiSelectSelectedOptionTextColor,"--dd-multi-selected-bg":s.multiSelectSelectedOptionBackgroundColor,"--dd-focus-border":s.focusBorderColor,...E}},[O,E]);a.useEffect(()=>{const e=t=>{A.current&&!A.current.contains(t.target)&&u(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);const I=()=>{k||(u(!n),n||(C(-1),setTimeout(()=>{f&&S.current&&S.current.focus()},0)))},Z=()=>{f?n||(u(!0),C(-1),setTimeout(()=>{S.current&&S.current.focus()},0)):I()},y=(()=>{if(l==null)return[];if(Array.isArray(l))return h.filter(t=>l.includes(t[d]));const e=h.find(t=>t[d]===l);return e?[e]:[]})(),W=(e,t)=>{if(t?.stopPropagation(),e.disabled)return;let r,i;if(T){const c=Array.isArray(l)?l:l?[l]:[];c.includes(e[d])?r=c.filter(s=>s!==e[d]):r=[...c,e[d]],i=h.filter(s=>r.includes(s[d]))}else r=e[d],i=e,u(!1),D("");m&&m(r,i)},_=(e,t)=>{if(t.stopPropagation(),!m)return;const i=(Array.isArray(l)?l:l?[l]:[]).filter(p=>p!==e),c=h.filter(p=>i.includes(p[d]));m(i,c)},F=e=>{if(e.stopPropagation(),n&&f){D(""),u(!1);return}m&&m(T?[]:"",T?[]:[])},v=a.useMemo(()=>h.filter(e=>!f||!b?!0:(typeof e[w]=="string"?e[w]:String(e[d])).toLowerCase().includes(b.toLowerCase())),[h,f,b]),K=e=>{if(!k)switch(e.key){case"Enter":e.preventDefault(),n?g>=0&&g<v.length&&W(v[g]):u(!0);break;case"Escape":n&&(e.preventDefault(),u(!1));break;case"ArrowDown":e.preventDefault(),n?C(t=>t<v.length-1?t+1:t):(u(!0),C(0));break;case"ArrowUp":e.preventDefault(),n&&C(t=>t>0?t-1:t);break}};a.useEffect(()=>{if(n&&M.current&&g>=0){const e=M.current,t=e.children[g];if(t){const r=e.scrollTop,i=r+e.clientHeight,c=t.offsetTop,p=c+t.clientHeight;c<r?e.scrollTop=c:p>i&&(e.scrollTop=p-e.clientHeight)}}},[g,n]);const R=e=>Array.isArray(l)?l.includes(e):l===e;return o.jsxs("div",{ref:A,className:`relative w-full ${z} ${k?"opacity-60 cursor-not-allowed":""}`,style:Y,onKeyDown:K,children:[H&&o.jsx("label",{className:`block mb-1 text-sm font-medium text-gray-700 cursor-pointer ${U}`,onClick:I,style:O?{color:O.textColor}:void 0,children:H}),o.jsxs("div",{onClick:Z,className:`
-          flex items-center justify-between
-          w-full
-          bg-[var(--dd-bg)]
-          cursor-pointer
-          transition-all duration-200
-          text-[var(--dd-text)]
-          ${N||"border rounded-lg"}
-        `,style:{padding:N?void 0:"var(--dd-padding)",minHeight:N?void 0:"42px",borderColor:N?void 0:n?"var(--dd-focus-border)":"#d1d5db",outline:"none",...J},role:"button",tabIndex:f?-1:0,"aria-haspopup":"listbox","aria-expanded":n,children:[o.jsx("div",{className:"flex flex-wrap gap-1 flex-1 overflow-hidden",children:f&&(n||y.length===0)?o.jsx("input",{ref:S,type:"text",value:b,onChange:e=>D(e.target.value),onKeyDown:K,placeholder:y.length===0?$:"Search...",className:"flex-1 outline-none bg-transparent min-w-[60px]",onClick:e=>{e.stopPropagation(),n||u(!0)},disabled:k}):y.length===0?o.jsx("span",{className:"text-gray-400",children:$}):T?y.map(e=>o.jsxs("span",{className:"inline-flex items-center px-2 py-0.5 rounded text-sm animate-fadeIn",style:{backgroundColor:"var(--dd-multi-selected-bg)",color:"var(--dd-multi-selected-text)"},onClick:t=>t.stopPropagation(),children:[e[w],o.jsx("span",{className:"ml-1 cursor-pointer font-bold",style:{color:"currentColor",opacity:.8},onClick:t=>_(e[d],t),children:"×"})]},e[d])):o.jsx("span",{className:"truncate",children:y[0][w]})}),o.jsxs("div",{className:"flex items-center gap-2 ml-2",children:[L&&o.jsx("div",{className:"animate-spin h-4 w-4 border-2 border-[var(--dd-primary)] border-t-transparent rounded-full"}),!L&&!k&&(y.length>0||n&&f&&b)&&o.jsx("div",{onClick:F,className:"p-1 hover:bg-gray-100 rounded-full transition-colors z-10",title:n&&f?"Clear search":"Clear selection",children:o.jsx("svg",{className:"w-3 h-3 text-gray-400 hover:text-gray-600",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:o.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})}),o.jsx("div",{className:`transform transition-transform duration-200 ${n?"rotate-180":""} ${Q}`,children:P||o.jsx("svg",{className:"w-4 h-4 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:o.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]})]}),n&&o.jsx("div",{className:`absolute z-50 w-full mt-1 bg-[var(--dd-menu-bg)] border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-hidden flex flex-col animate-enter ${G}`,children:L?o.jsxs("div",{className:"px-4 py-8 flex justify-center items-center text-gray-400",children:[o.jsx("div",{className:"animate-spin h-6 w-6 border-2 border-[var(--dd-primary)] border-t-transparent rounded-full mr-2"}),"Loading options..."]}):o.jsx("ul",{ref:M,className:"py-1 overflow-y-auto",role:"listbox",children:v.length===0?o.jsx("li",{className:"px-4 py-2 text-gray-500 text-center text-sm",children:"No options found"}):v.map((e,t)=>{const r=R(e[d]),i=t===g;return o.jsxs("li",{className:`
-                        px-4 py-2 cursor-pointer transition-colors duration-150 flex items-center justify-between
-                        text-[var(--dd-option-text)]
-                        ${B}
-                        ${r?j:""}
-                        `,style:{backgroundColor:r&&j?void 0:i&&!B?"var(--dd-hover)":r?"var(--dd-selected-bg)":B?void 0:"transparent",color:r&&j||B?void 0:r?"var(--dd-selected-text)":"var(--dd-option-text)",fontWeight:r?500:400},onMouseEnter:()=>C(t),role:"option","aria-selected":r,onClick:c=>W(e,c),children:[o.jsxs("div",{className:"flex flex-col",children:[o.jsx("span",{children:e[w]}),e[V]&&o.jsx("span",{className:`text-xs text-gray-500 mt-0.5 ${X}`,children:e[V]})]}),r&&o.jsx("svg",{className:"w-4 h-4",style:{color:"var(--dd-selected-text)"},fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:o.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:3,d:"M5 13l4 4L19 7"})})]},e[d])})})})]})};x.Dropdown=q,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})}));
+(function(h,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],t):(h=typeof globalThis<"u"?globalThis:h||self,t(h.Dropdown={},h.jsxRuntime,h.React))})(this,(function(h,t,f){"use strict";const r={container:{position:"relative",width:"100%"},containerDisabled:{opacity:.6,cursor:"not-allowed"},label:{display:"block",marginBottom:"4px",fontSize:"14px",fontWeight:500,color:"#374151",cursor:"pointer"},trigger:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",cursor:"pointer",transition:"all 0.2s",border:"1px solid #d1d5db",borderRadius:"8px",outline:"none"},triggerContent:{display:"flex",flexWrap:"wrap",gap:"4px",flex:1,overflow:"hidden"},searchInput:{flex:1,outline:"none",border:"none",background:"transparent",minWidth:"60px",fontSize:"inherit",color:"inherit",padding:0,margin:0},placeholder:{color:"#9ca3af"},multiTag:{display:"inline-flex",alignItems:"center",padding:"2px 8px",borderRadius:"4px",fontSize:"14px"},multiTagRemove:{marginLeft:"4px",cursor:"pointer",fontWeight:"bold",opacity:.8},actionsContainer:{display:"flex",alignItems:"center",gap:"8px",marginLeft:"8px"},spinner:{width:"16px",height:"16px",border:"2px solid",borderTopColor:"transparent",borderRadius:"50%",animation:"dropdown-spin 1s linear infinite"},clearButton:{padding:"4px",borderRadius:"50%",transition:"background-color 0.2s",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"},icon:{width:"12px",height:"12px",color:"#9ca3af"},chevronContainer:{transition:"transform 0.2s"},chevronIcon:{width:"16px",height:"16px",color:"#6b7280"},menu:{position:"absolute",zIndex:50,width:"100%",marginTop:"4px",border:"1px solid #d1d5db",borderRadius:"8px",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",maxHeight:"240px",overflow:"hidden",display:"flex",flexDirection:"column"},loadingContainer:{padding:"32px 16px",display:"flex",justifyContent:"center",alignItems:"center",color:"#9ca3af"},loadingSpinner:{width:"24px",height:"24px",border:"2px solid",borderTopColor:"transparent",borderRadius:"50%",marginRight:"8px",animation:"dropdown-spin 1s linear infinite"},optionsList:{padding:"4px 0",overflowY:"auto",margin:0,listStyle:"none"},option:{padding:"8px 16px",cursor:"pointer",transition:"background-color 0.15s",display:"flex",alignItems:"center",justifyContent:"space-between"},optionDisabled:{opacity:.5,cursor:"not-allowed"},optionContent:{display:"flex",flexDirection:"column"},sublabel:{fontSize:"12px",color:"#6b7280",marginTop:"2px"},checkIcon:{width:"16px",height:"16px",flexShrink:0},noOptions:{padding:"8px 16px",color:"#6b7280",textAlign:"center",fontSize:"14px"}},q=()=>{if(typeof document>"u")return;const u="dropdown-keyframes";if(document.getElementById(u))return;const n=document.createElement("style");n.id=u,n.textContent=`
+    @keyframes dropdown-spin {
+      to { transform: rotate(360deg); }
+    }
+  `,document.head.appendChild(n)},$=({options:u,value:n,onChange:y,placeholder:W="Select...",multiSelect:D=!1,searchable:g=!1,disabled:w=!1,loading:L=!1,className:U="",style:Y={},theme:I,label:H,labelClassName:G="",optionClassName:v="",selectedOptionClassName:j="",menuClassName:J="",triggerClassName:Q="",triggerStyle:X={},arrowIcon:z,arrowIconClassName:Z="",labelField:k="label",valueField:c="value",sublabelField:P="sublabel",sublabelClassName:_=""})=>{const[i,x]=f.useState(!1),[S,M]=f.useState(""),[C,b]=f.useState(-1),A=f.useRef(null),E=f.useRef(null),T=f.useRef(null);f.useEffect(()=>{q()},[]);const s=f.useMemo(()=>{const e={primaryColor:"#3b82f6",backgroundColor:"#ffffff",hoverColor:"#eff6ff",textColor:"#1f2937",padding:"0.5rem 1rem",menuBackgroundColor:"#ffffff",optionTextColor:"#1f2937",selectedOptionTextColor:"#3b82f6",selectedOptionBackgroundColor:"#eff6ff",multiSelectSelectedOptionTextColor:"#1e40af",multiSelectSelectedOptionBackgroundColor:"#dbeafe",focusBorderColor:"#3b82f6"},o=I||{},l=o.selectedOptionTextColor??o.primaryColor??e.selectedOptionTextColor,p=o.selectedOptionBackgroundColor??o.hoverColor??e.selectedOptionBackgroundColor,d=o.multiSelectSelectedOptionTextColor??"#1e40af",a=o.multiSelectSelectedOptionBackgroundColor??"#dbeafe";return{...e,...o,menuBackgroundColor:o.menuBackgroundColor??o.backgroundColor??e.menuBackgroundColor,optionTextColor:o.optionTextColor??o.textColor??e.optionTextColor,selectedOptionTextColor:l,selectedOptionBackgroundColor:p,multiSelectSelectedOptionTextColor:d,multiSelectSelectedOptionBackgroundColor:a,focusBorderColor:o.focusBorderColor??o.primaryColor??e.focusBorderColor}},[I]);f.useEffect(()=>{const e=o=>{A.current&&!A.current.contains(o.target)&&x(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);const V=()=>{w||(x(!i),i||(b(-1),setTimeout(()=>{g&&T.current&&T.current.focus()},0)))},R=()=>{g?i||(x(!0),b(-1),setTimeout(()=>{T.current&&T.current.focus()},0)):V()},m=(()=>{if(n==null)return[];if(Array.isArray(n))return u.filter(o=>n.includes(o[c]));const e=u.find(o=>o[c]===n);return e?[e]:[]})(),K=(e,o)=>{if(o?.stopPropagation(),e.disabled)return;let l,p;if(D){const d=Array.isArray(n)?n:n?[n]:[];d.includes(e[c])?l=d.filter(B=>B!==e[c]):l=[...d,e[c]],p=u.filter(B=>l.includes(B[c]))}else l=e[c],p=e,x(!1),M("");y&&y(l,p)},F=(e,o)=>{if(o.stopPropagation(),!y)return;const p=(Array.isArray(n)?n:n?[n]:[]).filter(a=>a!==e),d=u.filter(a=>p.includes(a[c]));y(p,d)},ee=e=>{if(e.stopPropagation(),i&&g){M(""),x(!1);return}y&&y(D?[]:"",D?[]:[])},O=f.useMemo(()=>u.filter(e=>!g||!S?!0:(typeof e[k]=="string"?e[k]:String(e[c])).toLowerCase().includes(S.toLowerCase())),[u,g,S,k,c]),N=e=>{if(!w)switch(e.key){case"Enter":e.preventDefault(),i?C>=0&&C<O.length&&K(O[C]):x(!0);break;case"Escape":i&&(e.preventDefault(),x(!1));break;case"ArrowDown":e.preventDefault(),i?b(o=>o<O.length-1?o+1:o):(x(!0),b(0));break;case"ArrowUp":e.preventDefault(),i&&b(o=>o>0?o-1:o);break}};f.useEffect(()=>{if(i&&E.current&&C>=0){const e=E.current,o=e.children[C];if(o){const l=e.scrollTop,p=l+e.clientHeight,d=o.offsetTop,a=d+o.clientHeight;d<l?e.scrollTop=d:a>p&&(e.scrollTop=a-e.clientHeight)}}},[C,i]);const oe=e=>Array.isArray(n)?n.includes(e):n===e;return t.jsxs("div",{ref:A,className:U,style:{...r.container,...w?r.containerDisabled:{},...Y},onKeyDown:N,children:[H&&t.jsx("label",{className:G,onClick:V,style:{...r.label,...I?.textColor?{color:I.textColor}:{}},children:H}),t.jsxs("div",{onClick:R,className:Q,style:{...r.trigger,backgroundColor:s.backgroundColor,color:s.textColor,padding:s.padding,minHeight:"42px",borderColor:i?s.focusBorderColor:"#d1d5db",...X},role:"button",tabIndex:g?-1:0,"aria-haspopup":"listbox","aria-expanded":i,children:[t.jsx("div",{style:r.triggerContent,children:g&&(i||m.length===0)?t.jsx("input",{ref:T,type:"text",value:S,onChange:e=>M(e.target.value),onKeyDown:N,placeholder:m.length===0?W:"Search...",style:{...r.searchInput,color:s.textColor},onClick:e=>{e.stopPropagation(),i||x(!0)},disabled:w}):m.length===0?t.jsx("span",{style:r.placeholder,children:W}):D?m.map(e=>t.jsxs("span",{style:{...r.multiTag,backgroundColor:s.multiSelectSelectedOptionBackgroundColor,color:s.multiSelectSelectedOptionTextColor},onClick:o=>o.stopPropagation(),children:[e[k],t.jsx("span",{style:{...r.multiTagRemove,color:s.multiSelectSelectedOptionTextColor},onClick:o=>F(e[c],o),children:"×"})]},e[c])):t.jsx("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:m[0][k]})}),t.jsxs("div",{style:r.actionsContainer,children:[L&&t.jsx("div",{style:{...r.spinner,borderColor:s.primaryColor,borderTopColor:"transparent"}}),!L&&!w&&(m.length>0||i&&g&&S)&&t.jsx("div",{onClick:ee,style:r.clearButton,title:i&&g?"Clear search":"Clear selection",onMouseEnter:e=>{e.currentTarget.style.backgroundColor="#f3f4f6"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent"},children:t.jsx("svg",{style:r.icon,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})}),t.jsx("div",{className:Z,style:{...r.chevronContainer,transform:i?"rotate(180deg)":"rotate(0deg)"},children:z||t.jsx("svg",{style:r.chevronIcon,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]})]}),i&&t.jsx("div",{className:J,style:{...r.menu,backgroundColor:s.menuBackgroundColor},children:L?t.jsxs("div",{style:r.loadingContainer,children:[t.jsx("div",{style:{...r.loadingSpinner,borderColor:s.primaryColor,borderTopColor:"transparent"}}),"Loading options..."]}):t.jsx("ul",{ref:E,style:r.optionsList,role:"listbox",children:O.length===0?t.jsx("li",{style:r.noOptions,children:"No options found"}):O.map((e,o)=>{const l=oe(e[c]),p=o===C,d=e.disabled;let a="transparent";return l?a=s.selectedOptionBackgroundColor:p&&(a=s.hoverColor),t.jsxs("li",{className:`${v} ${l?j:""}`,style:{...r.option,...d?r.optionDisabled:{},backgroundColor:v||j?void 0:a,color:v||j?void 0:l?s.selectedOptionTextColor:s.optionTextColor,fontWeight:l?500:400},onMouseEnter:()=>b(o),role:"option","aria-selected":l,onClick:B=>K(e,B),children:[t.jsxs("div",{style:r.optionContent,children:[t.jsx("span",{children:e[k]}),e[P]&&t.jsx("span",{className:_,style:r.sublabel,children:e[P]})]}),l&&t.jsx("svg",{style:{...r.checkIcon,color:s.selectedOptionTextColor},fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:3,d:"M5 13l4 4L19 7"})})]},e[c])})})})]})};h.Dropdown=$,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-customizable-dropdown",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A highly customizable, accessible, and premium React Dropdown component with built-in search, multi-select, field mapping, sublabels, and extensive theming options.",
   "type": "module",
   "main": "./dist/dropdown.umd.js",