@vpdev2/metakyc-sdk 1.0.29 → 1.0.30

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(
@@ -2708,12 +2709,12 @@ 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(
+      c && /* @__PURE__ */ o("div", { className: "metakyc-multiselect-dropdown 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: "metakyc-multiselect-search-wrapper p-2 border-b border-gray-100 dark:border-gray-700", children: /* @__PURE__ */ n(
           "input",
           {
             type: "text",
@@ -2722,7 +2723,7 @@ const ar = ({
             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"
+            className: "metakyc-multiselect-search 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(
@@ -2730,9 +2731,10 @@ const ar = ({
           {
             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) && "bg-blue-50 dark:bg-blue-900/20"
+              e.includes(p.value) && "metakyc-multiselect-option-selected bg-blue-50 dark:bg-blue-900/20"
             ),
             children: [
               /* @__PURE__ */ n(
@@ -2749,7 +2751,7 @@ const ar = ({
           },
           p.value
         )) }),
-        e.length > 0 && /* @__PURE__ */ n("div", { className: "p-2 border-t border-gray-100 dark:border-gray-700", children: /* @__PURE__ */ o(
+        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",