react-customizable-dropdown 1.0.0

package/README.md

@@ -0,0 +1,114 @@
+# react-customizable-dropdown
+
+A highly customizable, accessible, and premium React Dropdown component built with TypeScript and Tailwind-inspired styling.
+
+## Features
+
+- 🎨 **Premium Aesthetics**: Smooth animations and modern design.
+- 🔍 **Searchable**: Built-in search functionality for large option sets.
+- 📦 **Multi-select**: Support for selecting multiple values with chip display.
+- 🛠️ **Field Mapping**: Use custom keys for `label`, `value`, and `sublabel`.
+- 📝 **Sublabels**: Support for descriptive subtext below each option.
+- ⌨️ **Keyboard Accessible**: Full support for arrow keys, enter, and escape.
+- 📱 **Responsive**: Works seamlessly on mobile and desktop.
+- 🎨 **Themable**: Easy customization via theme props.
+
+---
+
+## Installation
+
+```bash
+npm install react-customizable-dropdown
+# or
+yarn add react-customizable-dropdown
+# or
+pnpm add react-customizable-dropdown
+```
+
+## Basic Usage
+
+```tsx
+import { Dropdown } from "react-customizable-dropdown";
+import { useState } from "react";
+
+const options = [
+  { label: "Option 1", value: "1" },
+  { label: "Option 2", value: "2" },
+];
+
+function App() {
+  const [value, setValue] = useState("1");
+
+  return (
+    <Dropdown
+      options={options}
+      value={value}
+      onChange={setValue}
+      label="Select an Option"
+    />
+  );
+}
+```
+
+---
+
+## Advanced Features
+
+### 1. Dynamic Field Mapping
+
+If your data doesn't use the standard `label` and `value` keys, you can map them using props:
+
+```tsx
+const users = [
+  { id: 101, fullName: "John Doe", role: "Admin" },
+  { id: 102, fullName: "Jane Smith", role: "User" },
+];
+
+<Dropdown
+  options={users}
+  valueField="id" // Use 'id' for the value logic
+  labelField="fullName" // Use 'fullName' for the display label
+  sublabelField="role" // Use 'role' for the descriptive text
+  value={selectedUserId}
+  onChange={setSelectedUserId}
+/>;
+```
+
+### 2. Multi-Select & Searchable
+
+Enable multiple selections and search filter:
+
+```tsx
+<Dropdown
+  options={options}
+  multiSelect
+  searchable
+  placeholder="Search and select many..."
+/>
+```
+
+---
+
+## Props API
+
+| Prop            | Type                                 | Default       | Description                                |
+| :-------------- | :----------------------------------- | :------------ | :----------------------------------------- |
+| `options`       | `DropdownOption[]`                   | `[]`          | Array of option objects.                   |
+| `value`         | `any`                                | -             | Current selected value(s).                 |
+| `onChange`      | `(value: any, option?: any) => void` | -             | Callback when selection changes.           |
+| `label`         | `ReactNode`                          | -             | Label displayed above the dropdown.        |
+| `labelField`    | `string`                             | `"label"`     | Field name to use as labels in options.    |
+| `valueField`    | `string`                             | `"value"`     | Field name to use as values in options.    |
+| `sublabelField` | `string`                             | `"sublabel"`  | Field name to use as sublabels in options. |
+| `searchable`    | `boolean`                            | `false`       | Enable/disable search input.               |
+| `multiSelect`   | `boolean`                            | `false`       | Enable/disable multiple selection.         |
+| `disabled`      | `boolean`                            | `false`       | Disable the component.                     |
+| `loading`       | `boolean`                            | `false`       | Show a loading spinner.                    |
+| `placeholder`   | `string`                             | `"Select..."` | Placeholder text.                          |
+| `theme`         | `DropdownTheme`                      | -             | UI theme customization object.             |
+
+---
+
+## License
+
+MIT © [shiningsudipto]

package/dist/dropdown.es.js

@@ -0,0 +1,619 @@
+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
+    };
+  }
+  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;
+    }
+    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 = ""
+}) => {
+  const [u, g] = re(!1), [N, D] = re(""), [T, _] = re(-1), Y = te(null), P = te(null), S = te(null), H = oe(() => {
+    const r = {
+      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
+    };
+    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
+    };
+  }, [j, V]);
+  ne(() => {
+    const r = (t) => {
+      Y.current && !Y.current.contains(t.target) && g(!1);
+    };
+    return document.addEventListener("mousedown", r), () => {
+      document.removeEventListener("mousedown", r);
+    };
+  }, []);
+  const I = () => {
+    k || (g(!u), u || (_(-1), setTimeout(() => {
+      d && S.current && S.current.focus();
+    }, 0)));
+  }, J = () => {
+    d ? u || (g(!0), _(-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])
+      );
+    } 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])
+    );
+    h(v, b);
+  }, c = (r) => {
+    if (r.stopPropagation(), u && d) {
+      D(""), 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) {
+        case "Enter":
+          r.preventDefault(), u ? T >= 0 && T < y.length && o(y[T]) : g(!0);
+          break;
+        case "Escape":
+          u && (r.preventDefault(), g(!1));
+          break;
+        case "ArrowDown":
+          r.preventDefault(), u ? _(
+            (t) => t < y.length - 1 ? t + 1 : t
+          ) : (g(!0), _(0));
+          break;
+        case "ArrowUp":
+          r.preventDefault(), u && _((t) => t > 0 ? t - 1 : t);
+          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);
+      }
+    }
+  }, [T, u]);
+  const i = (r) => Array.isArray(a) ? a.includes(r) : a === r;
+  return /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      ref: Y,
+      className: `relative w-full ${X} ${k ? "opacity-60 cursor-not-allowed" : ""}`,
+      style: H,
+      onKeyDown: $,
+      children: [
+        L && /* @__PURE__ */ n.jsx(
+          "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
+          }
+        ),
+        /* @__PURE__ */ n.jsxs(
+          "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"}
+        `,
+            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
+            },
+            role: "button",
+            tabIndex: d ? -1 : 0,
+            "aria-haspopup": "listbox",
+            "aria-expanded": u,
+            children: [
+              /* @__PURE__ */ n.jsx("div", { className: "flex flex-wrap gap-1 flex-1 overflow-hidden", children: d && (u || e.length === 0) ? /* @__PURE__ */ n.jsx(
+                "input",
+                {
+                  ref: S,
+                  type: "text",
+                  value: N,
+                  onChange: (r) => D(r.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);
+                  },
+                  disabled: k
+                }
+              ) : e.length === 0 ? /* @__PURE__ */ n.jsx("span", { className: "text-gray-400", children: R }) : f ? e.map((r) => /* @__PURE__ */ 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[A],
+                    /* @__PURE__ */ n.jsx(
+                      "span",
+                      {
+                        className: "ml-1 cursor-pointer font-bold",
+                        style: { color: "currentColor", opacity: 0.8 },
+                        onClick: (t) => s(r[p], t),
+                        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(
+                  "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(
+                      "svg",
+                      {
+                        className: "w-3 h-3 text-gray-400 hover:text-gray-600",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: /* @__PURE__ */ n.jsx(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 2,
+                            d: "M6 18L18 6M6 6l12 12"
+                          }
+                        )
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ n.jsx(
+                  "div",
+                  {
+                    className: `transform transition-transform duration-200 ${u ? "rotate-180" : ""} ${Q}`,
+                    children: z || /* @__PURE__ */ n.jsx(
+                      "svg",
+                      {
+                        className: "w-4 h-4 text-gray-500",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: /* @__PURE__ */ n.jsx(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 2,
+                            d: "M19 9l-7 7-7-7"
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        u && /* @__PURE__ */ 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 ${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" }),
+              "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(
+                "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 : ""}
+                        `,
+                  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)",
+                    fontWeight: l ? 500 : 400
+                  },
+                  onMouseEnter: () => _(t),
+                  role: "option",
+                  "aria-selected": l,
+                  onClick: (b) => o(r, b),
+                  children: [
+                    /* @__PURE__ */ n.jsxs("div", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ n.jsx("span", { children: r[A] }),
+                      r[q] && /* @__PURE__ */ n.jsx(
+                        "span",
+                        {
+                          className: `text-xs text-gray-500 mt-0.5 ${F}`,
+                          children: r[q]
+                        }
+                      )
+                    ] }),
+                    l && /* @__PURE__ */ n.jsx(
+                      "svg",
+                      {
+                        className: "w-4 h-4",
+                        style: { color: "var(--dd-selected-text)" },
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: /* @__PURE__ */ n.jsx(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 3,
+                            d: "M5 13l4 4L19 7"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                },
+                r[p]
+              );
+            }) })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  me as Dropdown
+};

package/dist/dropdown.umd.js

@@ -0,0 +1,19 @@
+(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"})}));

package/dist/react-customizable-dropdown-bg.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 401 401"><defs><style>.cls-1{fill:#fff;stroke:#19365d;stroke-miterlimit:10;}.cls-2{fill:#5f6c7f;}.cls-3{fill:#c9cfd4;}.cls-4{fill:#4ab6eb;}.cls-5{fill:#3ca9e6;}.cls-6{fill:url(#linear-gradient);}.cls-7{fill:#f5faf5;}</style><linearGradient id="linear-gradient" x1="303.11" y1="382.48" x2="306.93" y2="500.21" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8fc857"/><stop offset="1" stop-color="#007400"/></linearGradient></defs><title>react-customizable-dropdown-bg</title><rect class="cls-1" x="0.5" y="0.5" width="400" height="400" rx="25" ry="25"/><path class="cls-2" d="M304.46,329.44H458.68c11.09,0,13.29,2.12,13.3,13,0,5.82.05,11.64,0,17.46,0,8.78-3,11.67-11.85,11.67q-67.19,0-134.38,0l-176,.06c-11.23,0-14-2.69-14-13.71,0-6,0-12,0-17.94,0-7,2.78-10.07,10.11-10.29,9.08-.28,18.18-.25,27.27-.25Q238.77,329.42,304.46,329.44Z" transform="translate(-102.54 -105.66)"/><path class="cls-3" d="M304.4,316.44H148.23c-9.76,0-12.79-2.94-12.79-12.37,0-5.82,0-11.64,0-17.45,0-8.58,3.45-11.9,12.35-11.9H422.45c12.89,0,25.78,0,38.67,0,8,0,10.65,2.63,10.66,10.5,0,7.11,0,14.22,0,21.33s-2.83,9.9-10.22,9.9Z" transform="translate(-102.54 -105.66)"/><path class="cls-4" d="M371.47,241.94c-1.45.79-1.85,1.7-1.46,3.51.88,4.1,1.27,8.29,1.8,12.46.2,1.56,1.58,4.2-1.57,3.81-2.65-.33-7,2.87-7.83-2.77-.47-3.2-1.33-6.34-1.65-9.55-.29-2.88-1.64-3.42-4.28-2.93-8.11,1.5-16.12,3.51-24.4,4.09-2.27.16-3.38,2.09-4.27,3.72-4,7.37-10.3,9.17-18.47,7.12,1.49-3.17,5-5,6.43-8.72H292.59l6.64,8.65c-7.33,1.28-13.48,1.51-17.38-5.64-2-3.74-5.45-5.3-10.1-5.69a130.2,130.2,0,0,1-19.9-3.76c-2.75-.68-3.52,0-3.88,2.41-.51,3.35-1.44,6.66-1.71,10-.41,5.05-4.23,2.8-6.72,3.21-3.41.56-3.26-1.84-3-4,.32-2.72.39-5.58,1.31-8.11,1.69-4.62.62-7.6-4.23-9.11l1-8.62c1.4-.42,2.55.3,3.77.75,2.1.77,3.43.21,4-2,2-7.33,5.15-14.23,8-21.26a6.27,6.27,0,0,0-.09-5.07c-2.62-6.41-5.18-12.86-7.52-19.37-.93-2.6-2-3.82-4.87-2.47a21.7,21.7,0,0,1-3.27,1c-.33-3.12-4.1-4.56-4-7.88,1.9-.83,3.75-1.78,5.7-2.44,1.74-.59,2.84-1.43,2.59-3.37,3.21.11,6.24-1.53,9.51-.93,5.13-.17,10-2.2,15-2.51,9.44-.57,17.55-3.29,22.94-11.43,3.19,1,4.22,3.93,6,6.23V163c-4.16,1.92-5,5.87-6.14,9.62a5.32,5.32,0,0,0-4.1,2.27c-6.54,9.52-13.23,18.93-18.49,29.24a6.17,6.17,0,0,0,.16,6.33A234.58,234.58,0,0,0,282,239.81c1.22,1.66,2.53,2.79,4.84,2.77,11.73-.07,23.46,0,35.19,0a4.62,4.62,0,0,0,4.12-2.11,224.32,224.32,0,0,0,18.78-30.16,6.13,6.13,0,0,0-.17-6.37A271.57,271.57,0,0,0,329.5,179c-2.88-4.12-6-7.14-11.46-6.68,0-6.69,1.55-7.94,11.32-9.36a9.61,9.61,0,0,0,2.54,1.35c8.5,1.56,17,3,25.53,4.53,2.26.4,2.85-.87,3.12-2.66.64-4.27,1.33-8.53,2-12.79,2.75-1.23,4.84-.42,6.41,2,.6.92,1.14,1.89,2.48,1.88.3,5.12-1.5,10-1.8,15.06l-1.13,9.26c-.81.15-1.59.28-1.93,1.21q-4.29,11.52-8.63,23a4.86,4.86,0,0,0,.3,3.7c2.73,7.21,5.46,14.43,8,21.7.78,2.2,1.71,2.9,3.91,1.62a13.41,13.41,0,0,1,3.26-.92c1.23,2.17,1.53,4.24-.63,6.08C371.6,239,371.45,240.46,371.47,241.94Zm-101.84-2.19-12.32-20.89c-2.92,5.3-4.17,10.14-5.65,14.9-.52,1.69-.15,2.74,1.79,3.19C258.55,238.12,263.58,239.68,269.62,239.75Zm81.86-21.33a226.13,226.13,0,0,1-13.14,21.82c6.48-1.3,11.75-2.4,17.05-3.4,2.1-.4,2.18-1.43,1.55-3.13C355.21,229.06,353.59,224.35,351.49,218.42Zm-81.74-43.64C263.84,176,258.9,176.94,254,178c-1.44.31-3.07.69-2.37,2.79,1.59,4.79,2.85,9.71,5.82,14.53Zm81.93,21.46c1.93-5.77,3.43-10.16,4.85-14.57.47-1.46.55-2.84-1.51-3.38a73.32,73.32,0,0,0-15.75-2.88Z" transform="translate(-102.54 -105.66)"/><path class="cls-5" d="M292.33,161.22c-1.75-2.3-2.77-5.26-6-6.23,2.75-3,5.44-6,8.28-9,1.34-1.38,2-2.29,0-3.81-8.76-6.94-17.76-13.4-29-16.08-10.38-2.49-16,.84-18.32,11.14-2.41,10.62-1,21.15,1,31.65-3.26-.6-6.29,1-9.51.93-2.86-10.12-3-20.43-2-30.78a32.46,32.46,0,0,1,2.93-10.24c4.82-10.6,13.19-15,24.83-12.77a68.71,68.71,0,0,1,32.59,16.34c4.85,4.23,7,4.45,12.26.64,8.68-6.24,17.67-12,27.94-15.43,17.71-5.95,30.06.95,33.61,18.91,1.35,6.83,1.89,13.78.36,20.72-1.34,0-1.88-1-2.48-1.88-1.57-2.4-3.66-3.22-6.41-2,0-6.77,0-13.55-2.63-20-2.81-6.81-7.08-9.16-14.39-7.69-12,2.42-21.92,8.83-31.26,16.27-2.22,1.77-1,3,.27,4.32A194.47,194.47,0,0,1,329.36,163c-9.77,1.42-11.28,2.67-11.32,9.36-10.62-.9-21.23.19-31.84.29,1.15-3.76,2-7.71,6.14-9.62H315.6c-.3-.93-.31-1.46-.59-1.75-2.77-3-5.69-5.79-8.35-8.84-1.72-2-2.93-1.82-4.72-.06C298.83,155.39,296.06,158.81,292.33,161.22Z" transform="translate(-102.54 -105.66)"/><path class="cls-5" d="M371.47,241.94c0-1.48.13-2.91,1.37-4,2.16-1.83,1.86-3.91.63-6.08,2.09-.93,4.2-1.83,6.26-2.81,7-3.32,14-6.58,19.5-12.15,6.45-6.52,6.46-12,.13-18.52a49.08,49.08,0,0,0-9-6.82c-6.82-4.35-14.7-6.46-21.89-10l1.13-9.26c10.72,3.4,21,7.63,30.32,14a39.81,39.81,0,0,1,9.49,9.14c6.23,8.42,6,16.75-.48,25-4.86,6.17-11.5,10.15-18.27,13.88A97.56,97.56,0,0,1,371.47,241.94Z" transform="translate(-102.54 -105.66)"/><path class="cls-5" d="M234.59,232l-1,8.62c-12.38-3.88-23.93-9.24-32.78-18.88-8.68-9.45-8.44-19.73.44-28.91,8.12-8.39,18.25-13.6,29.33-17.2-.09,3.32,3.68,4.77,4,7.88-6.22,3.29-12.9,5.67-18.76,9.68-15.09,10.31-15,18.75.15,28.83C221.9,226,228.47,228.59,234.59,232Z" transform="translate(-102.54 -105.66)"/><path class="cls-6" d="M472.11,397c0-9.6-2.9-12.41-12.72-12.42l-298.13-.06c-5.29,0-10.59-.12-15.87.06-6.25.21-9.73,3.76-9.77,9.83,0,7.44,0,14.88.06,22.32,0,2.64.34,5.19,2.92,6.79,2.59,3.57,6.5,3.31,10.28,3.31q51.92,0,103.85-.07c4.71,0,8.08,1.24,9.13,6.12-.68,4.06-3.32,5.59-7.31,5.56-4.27,0-8.54,0-12.8.13-1.65.07-3.95-.89-4.76,1.33s.09,4.33,2.13,5.91c4.12,3.17,8.16,6.44,12.23,9.67l9.26,7.76a58.77,58.77,0,0,0,11.55,9.47c6.38,7,14.38,12.24,21.47,18.47,8.43,7.39,11.24,7.59,19.83.23,7.53-6.45,16-11.91,22.42-19.56,1.5.15,2.35-.9,3.38-1.68,5.29-4,9.45-9.25,15.09-12.85,5.11-4,10.23-8,15.3-12,1.9-1.51,2.12-3.49,1.26-5.64-.67-1.7-2.21-1.07-3.39-1.09-4.43-.1-8.86,0-13.29-.09-7.17-.07-9-2.54-7.12-9.37,2-2.52,4.84-2.26,7.61-2.26q52.47,0,104.93-.1c2.09,0,4.1,0,6.2-1,6.84-3.41,6.4-9.21,5.78-15.19C471.79,406,472.1,401.5,472.11,397Z" transform="translate(-102.54 -105.66)"/><path class="cls-7" d="M351.49,218.42c2.11,5.93,3.73,10.64,5.46,15.3.63,1.69.56,2.73-1.55,3.13-5.3,1-10.58,2.1-17.05,3.4A226.13,226.13,0,0,0,351.49,218.42Z" transform="translate(-102.54 -105.66)"/><path class="cls-4" d="M304.23,229c-11.76-.13-21.93-10.12-21.78-21.41.16-11.8,9.75-20.64,22.25-20.52,11.74.11,21,9.21,21.1,20.64A21.24,21.24,0,0,1,304.23,229Z" transform="translate(-102.54 -105.66)"/></svg>

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "react-customizable-dropdown",
+  "version": "1.0.0",
+  "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",
+  "module": "./dist/dropdown.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/dropdown.es.js",
+      "require": "./dist/dropdown.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "react",
+    "next-js",
+    "dropdown",
+    "select",
+    "component",
+    "customizable",
+    "typescript",
+    "tailwind",
+    "multi-select",
+    "searchable",
+    "accessible",
+    "a11y",
+    "ui",
+    "form",
+    "input"
+  ],
+  "author": {
+    "name": "shiningsudipto",
+    "url": "https://github.com/shiningsudipto"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shiningsudipto/react-customizable-dropdown.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shiningsudipto/react-customizable-dropdown/issues"
+  },
+  "homepage": "https://github.com/shiningsudipto/react-customizable-dropdown",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "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",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}