react-customizable-dropdown 1.0.1 → 1.0.3

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from "react";
+import type { DropdownProps } from "./Dropdown.types";
+export declare const Dropdown: FC<DropdownProps>;

package/dist/components/Dropdown/Dropdown.types.d.ts

@@ -0,0 +1,81 @@
+import type { ReactNode, CSSProperties } from "react";
+export interface DropdownOption {
+    value?: any;
+    label?: any;
+    sublabel?: any;
+    disabled?: boolean;
+    group?: string;
+    [key: string]: any;
+}
+export interface DropdownTheme {
+    primaryColor?: string;
+    backgroundColor?: string;
+    hoverColor?: string;
+    textColor?: string;
+    padding?: string;
+    menuBackgroundColor?: string;
+    optionTextColor?: string;
+    selectedOptionTextColor?: string;
+    selectedOptionBackgroundColor?: string;
+    multiSelectSelectedOptionTextColor?: string;
+    multiSelectSelectedOptionBackgroundColor?: string;
+    focusBorderColor?: string;
+}
+export interface DropdownProps {
+    /** Label for the dropdown */
+    label?: ReactNode;
+    /** Custom classes for the label */
+    labelClassName?: string;
+    /** Custom classes for dropdown option items */
+    optionClassName?: string;
+    /** Custom classes for selected options in the dropdown list (when dropdown is open) */
+    selectedOptionClassName?: string;
+    /** Custom classes for the dropdown menu wrapper/container */
+    menuClassName?: string;
+    /** Custom classes for the dropdown trigger/field area */
+    triggerClassName?: string;
+    /** Inline styles for the dropdown trigger/field area */
+    triggerStyle?: CSSProperties;
+    /** Custom arrow/chevron icon component to display instead of the default */
+    arrowIcon?: ReactNode;
+    /** Custom class name for the arrow icon wrapper */
+    arrowIconClassName?: string;
+    /** Field name for the label from the option object (defaults to 'label') */
+    labelField?: string;
+    /** Field name for the value from the option object (defaults to 'value') */
+    valueField?: string;
+    /** Field name for the sublabel from the option object (defaults to 'sublabel') */
+    sublabelField?: string;
+    /** Custom classes for the sublabel */
+    sublabelClassName?: string;
+    /** Array of options to display */
+    options: DropdownOption[];
+    /** Current selected value(s) */
+    value?: any;
+    /** Callback when selection changes */
+    onChange?: (value: any, option?: DropdownOption | DropdownOption[]) => void;
+    /** Placeholder text when nothing is selected */
+    placeholder?: string;
+    /** Whether to allow selecting multiple options */
+    multiSelect?: boolean;
+    /** Whether to show a search input */
+    searchable?: boolean;
+    /** Custom functionality to handle search externally */
+    onSearch?: (query: string) => void;
+    /** Debounce delay for search in ms */
+    searchDebounce?: number;
+    /** Disable the entire dropdown */
+    disabled?: boolean;
+    /** Custom theme overrides */
+    theme?: DropdownTheme;
+    /** Whether the options are currently loading */
+    loading?: boolean;
+    /** Custom render function for options */
+    renderOption?: (option: DropdownOption) => ReactNode;
+    /** Custom render function for selected value */
+    renderValue?: (value: DropdownOption | DropdownOption[]) => ReactNode;
+    /** Custom class names */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+}

package/dist/components/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Dropdown";
+export * from "./Dropdown.types";

package/dist/dropdown.es.js

@@ -1,511 +1,442 @@
-import ce, { useState as re, useRef as te, useMemo as oe, useEffect as ne } from "react";
-var G = { exports: {} }, M = {};
-var se;
-function ie() {
-  if (se) return M;
-  se = 1;
-  var x = /* @__PURE__ */ Symbol.for("react.transitional.element"), a = /* @__PURE__ */ Symbol.for("react.fragment");
-  function h(R, f, d) {
-    var k = null;
-    if (d !== void 0 && (k = "" + d), f.key !== void 0 && (k = "" + f.key), "key" in f) {
-      d = {};
-      for (var E in f)
-        E !== "key" && (d[E] = f[E]);
-    } else d = f;
-    return f = d.ref, {
-      $$typeof: x,
-      type: R,
-      key: k,
-      ref: f !== void 0 ? f : null,
-      props: d
-    };
+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"
   }
-  return M.Fragment = a, M.jsx = h, M.jsxs = h, M;
-}
-var W = {};
-var le;
-function de() {
-  return le || (le = 1, process.env.NODE_ENV !== "production" && (function() {
-    function x(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === D ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case O:
-          return "Fragment";
-        case z:
-          return "Profiler";
-        case K:
-          return "StrictMode";
-        case q:
-          return "Suspense";
-        case F:
-          return "SuspenseList";
-        case N:
-          return "Activity";
-      }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), e.$$typeof) {
-          case Z:
-            return "Portal";
-          case A:
-            return e.displayName || "Context";
-          case Q:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case p:
-            var o = e.render;
-            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case u:
-            return o = e.displayName || null, o !== null ? o : x(e.type) || "Memo";
-          case g:
-            o = e._payload, e = e._init;
-            try {
-              return x(e(o));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function a(e) {
-      return "" + e;
-    }
-    function h(e) {
-      try {
-        a(e);
-        var o = !1;
-      } catch {
-        o = !0;
-      }
-      if (o) {
-        o = console;
-        var s = o.error, c = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return s.call(
-          o,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          c
-        ), a(e);
-      }
-    }
-    function R(e) {
-      if (e === O) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === g)
-        return "<...>";
-      try {
-        var o = x(e);
-        return o ? "<" + o + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function f() {
-      var e = T.A;
-      return e === null ? null : e.getOwner();
-    }
-    function d() {
-      return Error("react-stack-top-frame");
-    }
-    function k(e) {
-      if (_.call(e, "key")) {
-        var o = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (o && o.isReactWarning) return !1;
-      }
-      return e.key !== void 0;
+}, 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); }
     }
-    function E(e, o) {
-      function s() {
-        S || (S = !0, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          o
-        ));
-      }
-      s.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: s,
-        configurable: !0
-      });
-    }
-    function X() {
-      var e = x(this.type);
-      return H[e] || (H[e] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), e = this.props.ref, e !== void 0 ? e : null;
-    }
-    function V(e, o, s, c, y, $) {
-      var i = s.ref;
-      return e = {
-        $$typeof: B,
-        type: e,
-        key: o,
-        props: s,
-        _owner: c
-      }, (i !== void 0 ? i : null) !== null ? Object.defineProperty(e, "ref", {
-        enumerable: !1,
-        get: X
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.defineProperty(e, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: y
-      }), Object.defineProperty(e, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: $
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function j(e, o, s, c, y, $) {
-      var i = o.children;
-      if (i !== void 0)
-        if (c)
-          if (Y(i)) {
-            for (c = 0; c < i.length; c++)
-              L(i[c]);
-            Object.freeze && Object.freeze(i);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else L(i);
-      if (_.call(o, "key")) {
-        i = x(e);
-        var r = Object.keys(o).filter(function(l) {
-          return l !== "key";
-        });
-        c = 0 < r.length ? "{key: someKey, " + r.join(": ..., ") + ": ...}" : "{key: someKey}", ee[i + c] || (r = 0 < r.length ? "{" + r.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          c,
-          i,
-          r,
-          i
-        ), ee[i + c] = !0);
-      }
-      if (i = null, s !== void 0 && (h(s), i = "" + s), k(o) && (h(o.key), i = "" + o.key), "key" in o) {
-        s = {};
-        for (var t in o)
-          t !== "key" && (s[t] = o[t]);
-      } else s = o;
-      return i && E(
-        s,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), V(
-        e,
-        i,
-        s,
-        f(),
-        y,
-        $
-      );
-    }
-    function L(e) {
-      U(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === g && (e._payload.status === "fulfilled" ? U(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-    }
-    function U(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === B;
-    }
-    var C = ce, B = /* @__PURE__ */ Symbol.for("react.transitional.element"), Z = /* @__PURE__ */ Symbol.for("react.portal"), O = /* @__PURE__ */ Symbol.for("react.fragment"), K = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), Q = /* @__PURE__ */ Symbol.for("react.consumer"), A = /* @__PURE__ */ Symbol.for("react.context"), p = /* @__PURE__ */ Symbol.for("react.forward_ref"), q = /* @__PURE__ */ Symbol.for("react.suspense"), F = /* @__PURE__ */ Symbol.for("react.suspense_list"), u = /* @__PURE__ */ Symbol.for("react.memo"), g = /* @__PURE__ */ Symbol.for("react.lazy"), N = /* @__PURE__ */ Symbol.for("react.activity"), D = /* @__PURE__ */ Symbol.for("react.client.reference"), T = C.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, _ = Object.prototype.hasOwnProperty, Y = Array.isArray, P = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    C = {
-      react_stack_bottom_frame: function(e) {
-        return e();
-      }
-    };
-    var S, H = {}, I = C.react_stack_bottom_frame.bind(
-      C,
-      d
-    )(), J = P(R(d)), ee = {};
-    W.Fragment = O, W.jsx = function(e, o, s) {
-      var c = 1e4 > T.recentlyCreatedOwnerStacks++;
-      return j(
-        e,
-        o,
-        s,
-        !1,
-        c ? Error("react-stack-top-frame") : I,
-        c ? P(R(e)) : J
-      );
-    }, W.jsxs = function(e, o, s) {
-      var c = 1e4 > T.recentlyCreatedOwnerStacks++;
-      return j(
-        e,
-        o,
-        s,
-        !0,
-        c ? Error("react-stack-top-frame") : I,
-        c ? P(R(e)) : J
-      );
-    };
-  })()), W;
-}
-var ae;
-function ue() {
-  return ae || (ae = 1, process.env.NODE_ENV === "production" ? G.exports = ie() : G.exports = de()), G.exports;
-}
-var n = ue();
-const me = ({
-  options: x,
-  value: a,
-  onChange: h,
-  placeholder: R = "Select...",
-  multiSelect: f = !1,
-  searchable: d = !1,
-  disabled: k = !1,
-  loading: E = !1,
-  className: X = "",
-  style: V = {},
-  theme: j,
-  label: L,
-  labelClassName: U = "",
-  optionClassName: C = "",
-  selectedOptionClassName: B = "",
-  menuClassName: Z = "",
-  triggerClassName: O = "",
-  triggerStyle: K = {},
-  arrowIcon: z,
-  arrowIconClassName: Q = "",
-  labelField: A = "label",
-  valueField: p = "value",
-  sublabelField: q = "sublabel",
-  sublabelClassName: F = ""
+  `, 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: D = "",
+  selectedOptionClassName: v = "",
+  menuClassName: J = "",
+  triggerClassName: Q = "",
+  triggerStyle: X = {},
+  arrowIcon: V,
+  arrowIconClassName: Z = "",
+  labelField: m = "label",
+  valueField: c = "value",
+  sublabelField: P = "sublabel",
+  sublabelClassName: _ = ""
 }) => {
-  const [u, g] = re(!1), [N, D] = re(""), [T, _] = re(-1), Y = te(null), P = te(null), S = te(null), H = oe(() => {
-    const r = {
+  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 = j || {}, l = t.selectedOptionTextColor ?? t.primaryColor ?? r.selectedOptionTextColor, v = t.selectedOptionBackgroundColor ?? t.hoverColor ?? r.selectedOptionBackgroundColor, b = t.multiSelectSelectedOptionTextColor ?? "#1e40af", w = t.multiSelectSelectedOptionBackgroundColor ?? "#dbeafe", m = {
-      ...r,
-      ...t,
-      menuBackgroundColor: t.menuBackgroundColor ?? t.backgroundColor ?? r.menuBackgroundColor,
-      optionTextColor: t.optionTextColor ?? t.textColor ?? r.optionTextColor,
-      selectedOptionTextColor: l,
-      selectedOptionBackgroundColor: v,
-      multiSelectSelectedOptionTextColor: b,
-      multiSelectSelectedOptionBackgroundColor: w,
-      focusBorderColor: t.focusBorderColor ?? t.primaryColor ?? r.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": m.primaryColor,
-      "--dd-bg": m.backgroundColor,
-      "--dd-hover": m.hoverColor,
-      "--dd-text": m.textColor,
-      "--dd-padding": m.padding,
-      "--dd-menu-bg": m.menuBackgroundColor,
-      "--dd-option-text": m.optionTextColor,
-      "--dd-selected-text": m.selectedOptionTextColor,
-      "--dd-selected-bg": m.selectedOptionBackgroundColor,
-      "--dd-multi-selected-text": m.multiSelectSelectedOptionTextColor,
-      "--dd-multi-selected-bg": m.multiSelectSelectedOptionBackgroundColor,
-      "--dd-focus-border": m.focusBorderColor,
-      ...V
+      ...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
     };
-  }, [j, V]);
-  ne(() => {
-    const r = (t) => {
-      Y.current && !Y.current.contains(t.target) && g(!1);
+  }, [I]);
+  W(() => {
+    const e = (o) => {
+      A.current && !A.current.contains(o.target) && g(!1);
     };
-    return document.addEventListener("mousedown", r), () => {
-      document.removeEventListener("mousedown", r);
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
     };
   }, []);
-  const I = () => {
-    k || (g(!u), u || (_(-1), setTimeout(() => {
-      d && S.current && S.current.focus();
+  const K = () => {
+    b || (g(!i), i || (y(-1), setTimeout(() => {
+      u && S.current && S.current.focus();
     }, 0)));
-  }, J = () => {
-    d ? u || (g(!0), _(-1), setTimeout(() => {
+  }, F = () => {
+    u ? i || (g(!0), y(-1), setTimeout(() => {
       S.current && S.current.focus();
-    }, 0)) : I();
-  }, e = (() => {
-    if (a == null) return [];
-    if (Array.isArray(a))
-      return x.filter((t) => a.includes(t[p]));
-    const r = x.find((t) => t[p] === a);
-    return r ? [r] : [];
-  })(), o = (r, t) => {
-    if (t?.stopPropagation(), r.disabled) return;
-    let l, v;
-    if (f) {
-      const b = Array.isArray(a) ? a : a ? [a] : [];
-      b.includes(r[p]) ? l = b.filter((m) => m !== r[p]) : l = [...b, r[p]], v = x.filter(
-        (m) => l.includes(m[p])
+    }, 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] : [];
+  })(), 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
-      l = r[p], v = r, g(!1), D("");
-    h && h(l, v);
-  }, s = (r, t) => {
-    if (t.stopPropagation(), !h) return;
-    const v = (Array.isArray(a) ? a : a ? [a] : []).filter((w) => w !== r), b = x.filter(
-      (w) => v.includes(w[p])
+      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])
     );
-    h(v, b);
-  }, c = (r) => {
-    if (r.stopPropagation(), u && d) {
-      D(""), g(!1);
+    C(p, d);
+  }, oe = (e) => {
+    if (e.stopPropagation(), i && u) {
+      R(""), g(!1);
       return;
     }
-    h && h(f ? [] : "", f ? [] : []);
-  }, y = oe(
-    () => x.filter((r) => !d || !N ? !0 : (typeof r[A] == "string" ? r[A] : String(r[p])).toLowerCase().includes(N.toLowerCase())),
-    [x, d, N]
-  ), $ = (r) => {
-    if (!k)
-      switch (r.key) {
+    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":
-          r.preventDefault(), u ? T >= 0 && T < y.length && o(y[T]) : g(!0);
+          e.preventDefault(), i ? x >= 0 && x < T.length && N(T[x]) : g(!0);
           break;
         case "Escape":
-          u && (r.preventDefault(), g(!1));
+          i && (e.preventDefault(), g(!1));
           break;
         case "ArrowDown":
-          r.preventDefault(), u ? _(
-            (t) => t < y.length - 1 ? t + 1 : t
-          ) : (g(!0), _(0));
+          e.preventDefault(), i ? y(
+            (o) => o < T.length - 1 ? o + 1 : o
+          ) : (g(!0), y(0));
           break;
         case "ArrowUp":
-          r.preventDefault(), u && _((t) => t > 0 ? t - 1 : t);
+          e.preventDefault(), i && y((o) => o > 0 ? o - 1 : o);
           break;
       }
   };
-  ne(() => {
-    if (u && P.current && T >= 0) {
-      const r = P.current, t = r.children[T];
-      if (t) {
-        const l = r.scrollTop, v = l + r.clientHeight, b = t.offsetTop, w = b + t.clientHeight;
-        b < l ? r.scrollTop = b : w > v && (r.scrollTop = w - r.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);
       }
     }
-  }, [T, u]);
-  const i = (r) => Array.isArray(a) ? a.includes(r) : a === r;
-  return /* @__PURE__ */ n.jsxs(
+  }, [x, i]);
+  const te = (e) => Array.isArray(n) ? n.includes(e) : n === e;
+  return /* @__PURE__ */ h(
     "div",
     {
-      ref: Y,
-      className: `relative w-full ${X} ${k ? "opacity-60 cursor-not-allowed" : ""}`,
-      style: H,
+      ref: A,
+      className: Y,
+      style: {
+        ...t.container,
+        ...b ? t.containerDisabled : {},
+        ...q
+      },
       onKeyDown: $,
       children: [
-        L && /* @__PURE__ */ n.jsx(
+        z && /* @__PURE__ */ r(
           "label",
           {
-            className: `block mb-1 text-sm font-medium text-gray-700 cursor-pointer ${U}`,
-            onClick: I,
-            style: j ? { color: j.textColor } : void 0,
-            children: L
+            className: G,
+            onClick: K,
+            style: {
+              ...t.label,
+              ...I?.textColor ? { color: I.textColor } : {}
+            },
+            children: z
           }
         ),
-        /* @__PURE__ */ n.jsxs(
+        /* @__PURE__ */ h(
           "div",
           {
-            onClick: J,
-            className: `
-          flex items-center justify-between
-          w-full
-          bg-[var(--dd-bg)]
-          cursor-pointer
-          transition-all duration-200
-          text-[var(--dd-text)]
-          ${O || "border rounded-lg"}
-        `,
+            onClick: F,
+            className: Q,
             style: {
-              padding: O ? void 0 : "var(--dd-padding)",
-              minHeight: O ? void 0 : "42px",
-              borderColor: O ? void 0 : u ? "var(--dd-focus-border)" : "#d1d5db",
-              outline: "none",
-              ...K
+              ...t.trigger,
+              backgroundColor: s.backgroundColor,
+              color: s.textColor,
+              padding: s.padding,
+              minHeight: "42px",
+              borderColor: i ? s.focusBorderColor : "#d1d5db",
+              ...X
             },
             role: "button",
-            tabIndex: d ? -1 : 0,
+            tabIndex: u ? -1 : 0,
             "aria-haspopup": "listbox",
-            "aria-expanded": u,
+            "aria-expanded": i,
             children: [
-              /* @__PURE__ */ n.jsx("div", { className: "flex flex-wrap gap-1 flex-1 overflow-hidden", children: d && (u || e.length === 0) ? /* @__PURE__ */ n.jsx(
+              /* @__PURE__ */ r("div", { style: t.triggerContent, children: u && (i || k.length === 0) ? /* @__PURE__ */ r(
                 "input",
                 {
                   ref: S,
                   type: "text",
-                  value: N,
-                  onChange: (r) => D(r.target.value),
+                  value: w,
+                  onChange: (e) => R(e.target.value),
                   onKeyDown: $,
-                  placeholder: e.length === 0 ? R : "Search...",
-                  className: "flex-1 outline-none bg-transparent min-w-[60px]",
-                  onClick: (r) => {
-                    r.stopPropagation(), u || g(!0);
+                  placeholder: k.length === 0 ? H : "Search...",
+                  style: {
+                    ...t.searchInput,
+                    color: s.textColor
                   },
-                  disabled: k
+                  onClick: (e) => {
+                    e.stopPropagation(), i || g(!0);
+                  },
+                  disabled: b
                 }
-              ) : e.length === 0 ? /* @__PURE__ */ n.jsx("span", { className: "text-gray-400", children: R }) : f ? e.map((r) => /* @__PURE__ */ n.jsxs(
+              ) : 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: [
-                    r[A],
-                    /* @__PURE__ */ n.jsx(
+                    e[m],
+                    /* @__PURE__ */ r(
                       "span",
                       {
-                        className: "ml-1 cursor-pointer font-bold",
-                        style: { color: "currentColor", opacity: 0.8 },
-                        onClick: (t) => s(r[p], t),
+                        style: {
+                          ...t.multiTagRemove,
+                          color: s.multiSelectSelectedOptionTextColor
+                        },
+                        onClick: (o) => ee(e[c], o),
                         children: "×"
                       }
                     )
                   ]
                 },
-                r[p]
-              )) : /* @__PURE__ */ n.jsx("span", { className: "truncate", children: e[0][A] }) }),
-              /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-2 ml-2", children: [
-                E && /* @__PURE__ */ n.jsx("div", { className: "animate-spin h-4 w-4 border-2 border-[var(--dd-primary)] border-t-transparent rounded-full" }),
-                !E && !k && (e.length > 0 || u && d && N) && /* @__PURE__ */ n.jsx(
+                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: c,
-                    className: "p-1 hover:bg-gray-100 rounded-full transition-colors z-10",
-                    title: u && d ? "Clear search" : "Clear selection",
-                    children: /* @__PURE__ */ n.jsx(
+                    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",
-                        children: /* @__PURE__ */ n.jsx(
+                        children: /* @__PURE__ */ r(
                           "path",
                           {
                             strokeLinecap: "round",
@@ -518,18 +449,22 @@ const me = ({
                     )
                   }
                 ),
-                /* @__PURE__ */ n.jsx(
+                /* @__PURE__ */ r(
                   "div",
                   {
-                    className: `transform transition-transform duration-200 ${u ? "rotate-180" : ""} ${Q}`,
-                    children: z || /* @__PURE__ */ n.jsx(
+                    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",
-                        children: /* @__PURE__ */ n.jsx(
+                        children: /* @__PURE__ */ r(
                           "path",
                           {
                             strokeLinecap: "round",
@@ -546,53 +481,67 @@ const me = ({
             ]
           }
         ),
-        u && /* @__PURE__ */ n.jsx(
+        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 ${Z}`,
-            children: E ? /* @__PURE__ */ n.jsxs("div", { className: "px-4 py-8 flex justify-center items-center text-gray-400", children: [
-              /* @__PURE__ */ n.jsx("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__ */ n.jsx("ul", { ref: P, className: "py-1 overflow-y-auto", role: "listbox", children: y.length === 0 ? /* @__PURE__ */ n.jsx("li", { className: "px-4 py-2 text-gray-500 text-center text-sm", children: "No options found" }) : y.map((r, t) => {
-              const l = i(r[p]), v = t === T;
-              return /* @__PURE__ */ n.jsxs(
+            ] }) : /* @__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)]
-                        ${C}
-                        ${l ? B : ""}
-                        `,
+                  className: `${D} ${l ? v : ""}`,
                   style: {
-                    backgroundColor: l && B ? void 0 : v && !C ? "var(--dd-hover)" : l ? "var(--dd-selected-bg)" : C ? void 0 : "transparent",
-                    color: l && B || C ? void 0 : l ? "var(--dd-selected-text)" : "var(--dd-option-text)",
+                    ...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: () => _(t),
+                  onMouseEnter: () => y(o),
                   role: "option",
                   "aria-selected": l,
-                  onClick: (b) => o(r, b),
+                  onClick: (O) => N(e, O),
                   children: [
-                    /* @__PURE__ */ n.jsxs("div", { className: "flex flex-col", children: [
-                      /* @__PURE__ */ n.jsx("span", { children: r[A] }),
-                      r[q] && /* @__PURE__ */ n.jsx(
+                    /* @__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 ${F}`,
-                          children: r[q]
+                          className: _,
+                          style: t.sublabel,
+                          children: e[P]
                         }
                       )
                     ] }),
-                    l && /* @__PURE__ */ n.jsx(
+                    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",
-                        children: /* @__PURE__ */ n.jsx(
+                        children: /* @__PURE__ */ r(
                           "path",
                           {
                             strokeLinecap: "round",
@@ -605,7 +554,7 @@ const me = ({
                     )
                   ]
                 },
-                r[p]
+                e[c]
               );
             }) })
           }
@@ -615,5 +564,5 @@ const me = ({
   );
 };
 export {
-  me as Dropdown
+  se as Dropdown
 };

package/dist/dropdown.umd.js

@@ -1,19 +1,5 @@
-(function(A,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],m):(A=typeof globalThis<"u"?globalThis:A||self,m(A.Dropdown={},A.React))})(this,(function(A,m){"use strict";var H={exports:{}},Y={};var oe;function le(){if(oe)return Y;oe=1;var g=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function v(S,f,d){var y=null;if(d!==void 0&&(y=""+d),f.key!==void 0&&(y=""+f.key),"key"in f){d={};for(var C in f)C!=="key"&&(d[C]=f[C])}else d=f;return f=d.ref,{$$typeof:g,type:S,key:y,ref:f!==void 0?f:null,props:d}}return Y.Fragment=a,Y.jsx=v,Y.jsxs=v,Y}var I={};var ne;function ae(){return ne||(ne=1,process.env.NODE_ENV!=="production"&&(function(){function g(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===V?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case X:return"Profiler";case F:return"StrictMode";case $:return"Suspense";case re:return"SuspenseList";case B:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case q:return"Portal";case P:return e.displayName||"Context";case ee:return(e._context.displayName||"Context")+".Consumer";case x:var o=e.render;return e=e.displayName,e||(e=o.displayName||o.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case u:return o=e.displayName||null,o!==null?o:g(e.type)||"Memo";case b:o=e._payload,e=e._init;try{return g(e(o))}catch{}}return null}function a(e){return""+e}function v(e){try{a(e);var o=!1}catch{o=!0}if(o){o=console;var s=o.error,c=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return s.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",c),a(e)}}function S(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===b)return"<...>";try{var o=g(e);return o?"<"+o+">":"<...>"}catch{return"<...>"}}function f(){var e=T.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function y(e){if(w.call(e,"key")){var o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function C(e,o){function s(){O||(O=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",o))}s.isReactWarning=!0,Object.defineProperty(e,"key",{get:s,configurable:!0})}function Q(){var e=g(this.type);return Z[e]||(Z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function J(e,o,s,c,E,M){var i=s.ref;return e={$$typeof:L,type:e,key:o,props:s,_owner:c},(i!==void 0?i:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:Q}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:E}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:M}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,o,s,c,E,M){var i=o.children;if(i!==void 0)if(c)if(U(i)){for(c=0;c<i.length;c++)W(i[c]);Object.freeze&&Object.freeze(i)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else W(i);if(w.call(o,"key")){i=g(e);var r=Object.keys(o).filter(function(l){return l!=="key"});c=0<r.length?"{key: someKey, "+r.join(": ..., ")+": ...}":"{key: someKey}",te[i+c]||(r=0<r.length?"{"+r.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,c,i,r,i),te[i+c]=!0)}if(i=null,s!==void 0&&(v(s),i=""+s),y(o)&&(v(o.key),i=""+o.key),"key"in o){s={};for(var t in o)t!=="key"&&(s[t]=o[t])}else s=o;return i&&C(s,typeof e=="function"?e.displayName||e.name||"Unknown":e),J(e,i,s,f(),E,M)}function W(e){G(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===b&&(e._payload.status==="fulfilled"?G(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function G(e){return typeof e=="object"&&e!==null&&e.$$typeof===L}var _=m,L=Symbol.for("react.transitional.element"),q=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),F=Symbol.for("react.strict_mode"),X=Symbol.for("react.profiler"),ee=Symbol.for("react.consumer"),P=Symbol.for("react.context"),x=Symbol.for("react.forward_ref"),$=Symbol.for("react.suspense"),re=Symbol.for("react.suspense_list"),u=Symbol.for("react.memo"),b=Symbol.for("react.lazy"),B=Symbol.for("react.activity"),V=Symbol.for("react.client.reference"),T=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,w=Object.prototype.hasOwnProperty,U=Array.isArray,D=console.createTask?console.createTask:function(){return null};_={react_stack_bottom_frame:function(e){return e()}};var O,Z={},z=_.react_stack_bottom_frame.bind(_,d)(),K=D(S(d)),te={};I.Fragment=j,I.jsx=function(e,o,s){var c=1e4>T.recentlyCreatedOwnerStacks++;return N(e,o,s,!1,c?Error("react-stack-top-frame"):z,c?D(S(e)):K)},I.jsxs=function(e,o,s){var c=1e4>T.recentlyCreatedOwnerStacks++;return N(e,o,s,!0,c?Error("react-stack-top-frame"):z,c?D(S(e)):K)}})()),I}var se;function ce(){return se||(se=1,process.env.NODE_ENV==="production"?H.exports=le():H.exports=ae()),H.exports}var n=ce();const ie=({options:g,value:a,onChange:v,placeholder:S="Select...",multiSelect:f=!1,searchable:d=!1,disabled:y=!1,loading:C=!1,className:Q="",style:J={},theme:N,label:W,labelClassName:G="",optionClassName:_="",selectedOptionClassName:L="",menuClassName:q="",triggerClassName:j="",triggerStyle:F={},arrowIcon:X,arrowIconClassName:ee="",labelField:P="label",valueField:x="value",sublabelField:$="sublabel",sublabelClassName:re=""})=>{const[u,b]=m.useState(!1),[B,V]=m.useState(""),[T,w]=m.useState(-1),U=m.useRef(null),D=m.useRef(null),O=m.useRef(null),Z=m.useMemo(()=>{const r={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=N||{},l=t.selectedOptionTextColor??t.primaryColor??r.selectedOptionTextColor,k=t.selectedOptionBackgroundColor??t.hoverColor??r.selectedOptionBackgroundColor,h=t.multiSelectSelectedOptionTextColor??"#1e40af",R=t.multiSelectSelectedOptionBackgroundColor??"#dbeafe",p={...r,...t,menuBackgroundColor:t.menuBackgroundColor??t.backgroundColor??r.menuBackgroundColor,optionTextColor:t.optionTextColor??t.textColor??r.optionTextColor,selectedOptionTextColor:l,selectedOptionBackgroundColor:k,multiSelectSelectedOptionTextColor:h,multiSelectSelectedOptionBackgroundColor:R,focusBorderColor:t.focusBorderColor??t.primaryColor??r.focusBorderColor};return{"--dd-primary":p.primaryColor,"--dd-bg":p.backgroundColor,"--dd-hover":p.hoverColor,"--dd-text":p.textColor,"--dd-padding":p.padding,"--dd-menu-bg":p.menuBackgroundColor,"--dd-option-text":p.optionTextColor,"--dd-selected-text":p.selectedOptionTextColor,"--dd-selected-bg":p.selectedOptionBackgroundColor,"--dd-multi-selected-text":p.multiSelectSelectedOptionTextColor,"--dd-multi-selected-bg":p.multiSelectSelectedOptionBackgroundColor,"--dd-focus-border":p.focusBorderColor,...J}},[N,J]);m.useEffect(()=>{const r=t=>{U.current&&!U.current.contains(t.target)&&b(!1)};return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[]);const z=()=>{y||(b(!u),u||(w(-1),setTimeout(()=>{d&&O.current&&O.current.focus()},0)))},K=()=>{d?u||(b(!0),w(-1),setTimeout(()=>{O.current&&O.current.focus()},0)):z()},e=(()=>{if(a==null)return[];if(Array.isArray(a))return g.filter(t=>a.includes(t[x]));const r=g.find(t=>t[x]===a);return r?[r]:[]})(),o=(r,t)=>{if(t?.stopPropagation(),r.disabled)return;let l,k;if(f){const h=Array.isArray(a)?a:a?[a]:[];h.includes(r[x])?l=h.filter(p=>p!==r[x]):l=[...h,r[x]],k=g.filter(p=>l.includes(p[x]))}else l=r[x],k=r,b(!1),V("");v&&v(l,k)},s=(r,t)=>{if(t.stopPropagation(),!v)return;const k=(Array.isArray(a)?a:a?[a]:[]).filter(R=>R!==r),h=g.filter(R=>k.includes(R[x]));v(k,h)},c=r=>{if(r.stopPropagation(),u&&d){V(""),b(!1);return}v&&v(f?[]:"",f?[]:[])},E=m.useMemo(()=>g.filter(r=>!d||!B?!0:(typeof r[P]=="string"?r[P]:String(r[x])).toLowerCase().includes(B.toLowerCase())),[g,d,B]),M=r=>{if(!y)switch(r.key){case"Enter":r.preventDefault(),u?T>=0&&T<E.length&&o(E[T]):b(!0);break;case"Escape":u&&(r.preventDefault(),b(!1));break;case"ArrowDown":r.preventDefault(),u?w(t=>t<E.length-1?t+1:t):(b(!0),w(0));break;case"ArrowUp":r.preventDefault(),u&&w(t=>t>0?t-1:t);break}};m.useEffect(()=>{if(u&&D.current&&T>=0){const r=D.current,t=r.children[T];if(t){const l=r.scrollTop,k=l+r.clientHeight,h=t.offsetTop,R=h+t.clientHeight;h<l?r.scrollTop=h:R>k&&(r.scrollTop=R-r.clientHeight)}}},[T,u]);const i=r=>Array.isArray(a)?a.includes(r):a===r;return n.jsxs("div",{ref:U,className:`relative w-full ${Q} ${y?"opacity-60 cursor-not-allowed":""}`,style:Z,onKeyDown:M,children:[W&&n.jsx("label",{className:`block mb-1 text-sm font-medium text-gray-700 cursor-pointer ${G}`,onClick:z,style:N?{color:N.textColor}:void 0,children:W}),n.jsxs("div",{onClick:K,className:`
-          flex items-center justify-between
-          w-full
-          bg-[var(--dd-bg)]
-          cursor-pointer
-          transition-all duration-200
-          text-[var(--dd-text)]
-          ${j||"border rounded-lg"}
-        `,style:{padding:j?void 0:"var(--dd-padding)",minHeight:j?void 0:"42px",borderColor:j?void 0:u?"var(--dd-focus-border)":"#d1d5db",outline:"none",...F},role:"button",tabIndex:d?-1:0,"aria-haspopup":"listbox","aria-expanded":u,children:[n.jsx("div",{className:"flex flex-wrap gap-1 flex-1 overflow-hidden",children:d&&(u||e.length===0)?n.jsx("input",{ref:O,type:"text",value:B,onChange:r=>V(r.target.value),onKeyDown:M,placeholder:e.length===0?S:"Search...",className:"flex-1 outline-none bg-transparent min-w-[60px]",onClick:r=>{r.stopPropagation(),u||b(!0)},disabled:y}):e.length===0?n.jsx("span",{className:"text-gray-400",children:S}):f?e.map(r=>n.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:[r[P],n.jsx("span",{className:"ml-1 cursor-pointer font-bold",style:{color:"currentColor",opacity:.8},onClick:t=>s(r[x],t),children:"×"})]},r[x])):n.jsx("span",{className:"truncate",children:e[0][P]})}),n.jsxs("div",{className:"flex items-center gap-2 ml-2",children:[C&&n.jsx("div",{className:"animate-spin h-4 w-4 border-2 border-[var(--dd-primary)] border-t-transparent rounded-full"}),!C&&!y&&(e.length>0||u&&d&&B)&&n.jsx("div",{onClick:c,className:"p-1 hover:bg-gray-100 rounded-full transition-colors z-10",title:u&&d?"Clear search":"Clear selection",children:n.jsx("svg",{className:"w-3 h-3 text-gray-400 hover:text-gray-600",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})}),n.jsx("div",{className:`transform transition-transform duration-200 ${u?"rotate-180":""} ${ee}`,children:X||n.jsx("svg",{className:"w-4 h-4 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]})]}),u&&n.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 ${q}`,children:C?n.jsxs("div",{className:"px-4 py-8 flex justify-center items-center text-gray-400",children:[n.jsx("div",{className:"animate-spin h-6 w-6 border-2 border-[var(--dd-primary)] border-t-transparent rounded-full mr-2"}),"Loading options..."]}):n.jsx("ul",{ref:D,className:"py-1 overflow-y-auto",role:"listbox",children:E.length===0?n.jsx("li",{className:"px-4 py-2 text-gray-500 text-center text-sm",children:"No options found"}):E.map((r,t)=>{const l=i(r[x]),k=t===T;return n.jsxs("li",{className:`
-                        px-4 py-2 cursor-pointer transition-colors duration-150 flex items-center justify-between
-                        text-[var(--dd-option-text)]
-                        ${_}
-                        ${l?L:""}
-                        `,style:{backgroundColor:l&&L?void 0:k&&!_?"var(--dd-hover)":l?"var(--dd-selected-bg)":_?void 0:"transparent",color:l&&L||_?void 0:l?"var(--dd-selected-text)":"var(--dd-option-text)",fontWeight:l?500:400},onMouseEnter:()=>w(t),role:"option","aria-selected":l,onClick:h=>o(r,h),children:[n.jsxs("div",{className:"flex flex-col",children:[n.jsx("span",{children:r[P]}),r[$]&&n.jsx("span",{className:`text-xs text-gray-500 mt-0.5 ${re}`,children:r[$]})]}),l&&n.jsx("svg",{className:"w-4 h-4",style:{color:"var(--dd-selected-text)"},fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:3,d:"M5 13l4 4L19 7"})})]},r[x])})})})]})};A.Dropdown=ie,Object.defineProperty(A,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/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./components/Dropdown";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-customizable-dropdown",
-  "version": "1.0.1",
+  "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",
@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "rimraf dist && tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -59,7 +59,6 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
-  "dependencies": {},
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@types/node": "^24.10.1",
@@ -74,6 +73,7 @@
     "postcss": "^8.5.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "rimraf": "^6.1.2",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",