@vpdev2/metakyc-sdk 1.0.29 → 1.0.31

package/dist/index.js

@@ -2671,7 +2671,7 @@ const ar = ({
     var m;
     return ((m = a.find((A) => A.value === p)) == null ? void 0 : m.label) || p;
   };
-  return /* @__PURE__ */ o("div", { className: "w-full", ref: f, children: [
+  return /* @__PURE__ */ o("div", { className: "w-full metakyc-multiselect", ref: f, children: [
     t && /* @__PURE__ */ o("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: [
       t,
       l && /* @__PURE__ */ n("span", { className: "text-red-500 ml-1", children: "*" })
@@ -2682,6 +2682,7 @@ const ar = ({
         {
           onClick: () => !i && d(!c),
           className: G(
+            "metakyc-multiselect-trigger",
             "min-h-[42px] w-full px-3 py-2 rounded-lg border text-sm transition-colors",
             "bg-white dark:bg-gray-800",
             "border-gray-300 dark:border-gray-600",
@@ -2689,10 +2690,10 @@ const ar = ({
             i ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
           ),
           children: [
-            e.length === 0 ? /* @__PURE__ */ n("span", { className: "text-gray-400 dark:text-gray-500 leading-6", children: s }) : /* @__PURE__ */ n("div", { className: "flex flex-wrap gap-1 pr-6", children: e.map((p) => /* @__PURE__ */ o(
+            e.length === 0 ? /* @__PURE__ */ n("span", { className: "metakyc-multiselect-placeholder text-gray-400 dark:text-gray-500 leading-6", children: s }) : /* @__PURE__ */ n("div", { className: "flex flex-wrap gap-1 pr-6", children: e.map((p) => /* @__PURE__ */ o(
               "span",
               {
-                className: "inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300 text-xs font-medium",
+                className: "metakyc-multiselect-chip inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300 text-xs font-medium",
                 children: [
                   b(p),
                   !i && /* @__PURE__ */ n(
@@ -2700,7 +2701,26 @@ const ar = ({
                     {
                       type: "button",
                       onClick: (m) => h(p, m),
-                      className: "hover:text-blue-600 dark:hover:text-blue-200 text-base leading-none -mr-0.5",
+                      className: "metakyc-multiselect-chip-remove",
+                      style: {
+                        background: "transparent",
+                        border: "none",
+                        padding: "0 0 0 2px",
+                        margin: 0,
+                        cursor: "pointer",
+                        fontSize: "14px",
+                        lineHeight: 1,
+                        fontWeight: "bold",
+                        display: "inline-flex",
+                        alignItems: "center",
+                        boxShadow: "none",
+                        transform: "none",
+                        minWidth: 0,
+                        width: "auto",
+                        height: "auto",
+                        letterSpacing: "normal",
+                        textTransform: "none"
+                      },
                       children: "×"
                     }
                   )
@@ -2708,63 +2728,72 @@ const ar = ({
               },
               p
             )) }),
-            /* @__PURE__ */ n("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-xs", children: c ? "▲" : "▼" })
+            /* @__PURE__ */ n("span", { className: "metakyc-multiselect-arrow absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-xs", children: c ? "▲" : "▼" })
           ]
         }
       ),
-      c && /* @__PURE__ */ o("div", { className: "absolute z-50 w-full mt-1 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 shadow-lg", children: [
-        /* @__PURE__ */ n("div", { className: "p-2 border-b border-gray-100 dark:border-gray-700", children: /* @__PURE__ */ n(
-          "input",
-          {
-            type: "text",
-            value: u,
-            onChange: (p) => y(p.target.value),
-            placeholder: "Search...",
-            autoFocus: !0,
-            onClick: (p) => p.stopPropagation(),
-            className: "w-full px-2 py-1.5 text-sm rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          }
-        ) }),
-        /* @__PURE__ */ n("ul", { className: "max-h-48 overflow-y-auto py-1", children: g.length === 0 ? /* @__PURE__ */ n("li", { className: "px-3 py-2 text-sm text-gray-500 dark:text-gray-400", children: "No results" }) : g.map((p) => /* @__PURE__ */ o(
-          "li",
-          {
-            onClick: () => v(p.value),
-            className: G(
-              "flex items-center gap-2 px-3 py-2 text-sm cursor-pointer",
-              "hover:bg-gray-50 dark:hover:bg-gray-700",
-              e.includes(p.value) && "bg-blue-50 dark:bg-blue-900/20"
-            ),
-            children: [
-              /* @__PURE__ */ n(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: e.includes(p.value),
-                  readOnly: !0,
-                  className: "rounded border-gray-300 text-blue-600 pointer-events-none"
-                }
-              ),
-              /* @__PURE__ */ n("span", { className: "text-gray-900 dark:text-gray-100", children: p.label })
-            ]
-          },
-          p.value
-        )) }),
-        e.length > 0 && /* @__PURE__ */ n("div", { className: "p-2 border-t border-gray-100 dark:border-gray-700", children: /* @__PURE__ */ o(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              r([]), y("");
-            },
-            className: "text-xs text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300",
-            children: [
-              "Clear all (",
-              e.length,
-              " selected)"
-            ]
-          }
-        ) })
-      ] })
+      c && /* @__PURE__ */ o(
+        "div",
+        {
+          className: "metakyc-multiselect-dropdown absolute z-50 w-full mt-1 rounded-lg shadow-lg",
+          style: { background: "inherit", border: "1px solid #d1d5db" },
+          children: [
+            /* @__PURE__ */ n("div", { className: "metakyc-multiselect-search-wrapper p-2", style: { borderBottom: "1px solid #e5e7eb" }, children: /* @__PURE__ */ n(
+              "input",
+              {
+                type: "text",
+                value: u,
+                onChange: (p) => y(p.target.value),
+                placeholder: "Search...",
+                autoFocus: !0,
+                onClick: (p) => p.stopPropagation(),
+                className: "metakyc-multiselect-search w-full px-2 py-1.5 text-sm rounded focus:outline-none focus:ring-1 focus:ring-blue-500",
+                style: { border: "1px solid #d1d5db" }
+              }
+            ) }),
+            /* @__PURE__ */ n("ul", { className: "max-h-48 overflow-y-auto py-1", children: g.length === 0 ? /* @__PURE__ */ n("li", { className: "px-3 py-2 text-sm text-gray-500 dark:text-gray-400", children: "No results" }) : g.map((p) => /* @__PURE__ */ o(
+              "li",
+              {
+                onClick: () => v(p.value),
+                className: G(
+                  "metakyc-multiselect-option",
+                  "flex items-center gap-2 px-3 py-2 text-sm cursor-pointer",
+                  "hover:bg-gray-50 dark:hover:bg-gray-700",
+                  e.includes(p.value) && "metakyc-multiselect-option-selected bg-blue-50 dark:bg-blue-900/20"
+                ),
+                children: [
+                  /* @__PURE__ */ n(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: e.includes(p.value),
+                      readOnly: !0,
+                      className: "rounded border-gray-300 text-blue-600 pointer-events-none"
+                    }
+                  ),
+                  /* @__PURE__ */ n("span", { className: "text-gray-900 dark:text-gray-100", children: p.label })
+                ]
+              },
+              p.value
+            )) }),
+            e.length > 0 && /* @__PURE__ */ n("div", { className: "metakyc-multiselect-clear p-2 border-t border-gray-100 dark:border-gray-700", children: /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  r([]), y("");
+                },
+                className: "text-xs text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300",
+                children: [
+                  "Clear all (",
+                  e.length,
+                  " selected)"
+                ]
+              }
+            ) })
+          ]
+        }
+      )
     ] })
   ] });
 }, sr = ({