@vpdev2/metakyc-sdk 1.0.62 → 1.0.63

package/dist/index.js

@@ -1690,6 +1690,8 @@ class dr {
       danger: t.danger,
       info: t.info,
       background: t.background,
+      // alias used by Input, Select, SearchableSelect, MultiSelect components
+      "input-bg": t.background,
       surface: t.surface,
       border: t.border,
       "text-primary": t.textPrimary,
@@ -2513,34 +2515,45 @@ const V = ({
     }
   );
 }, me = Ue(
-  ({ label: e, error: t, helperText: n, leftIcon: a, rightIcon: i, className: o, ...c }, d) => /* @__PURE__ */ s("div", { className: "w-full", children: [
-    e && /* @__PURE__ */ s("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: [
-      e,
-      c.required && /* @__PURE__ */ r("span", { className: "text-danger-500 ml-1", children: "*" })
-    ] }),
+  ({ label: e, error: t, helperText: n, leftIcon: a, rightIcon: i, className: o, style: c, ...d }, u) => /* @__PURE__ */ s("div", { className: "w-full", children: [
+    e && /* @__PURE__ */ s(
+      "label",
+      {
+        className: "block text-sm font-medium mb-1",
+        style: { color: "var(--metakyc-text-primary, #374151)" },
+        children: [
+          e,
+          d.required && /* @__PURE__ */ r("span", { className: "text-danger-500 ml-1", children: "*" })
+        ]
+      }
+    ),
     /* @__PURE__ */ s("div", { className: "relative", children: [
       a && /* @__PURE__ */ r("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: a }),
       /* @__PURE__ */ r(
         "input",
         {
-          ref: d,
+          ref: u,
           className: oe(
             "block w-full rounded-lg border px-3 py-2 text-sm transition-colors",
-            "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent",
-            "disabled:bg-gray-100 disabled:cursor-not-allowed",
-            t ? "border-danger-500 focus:ring-danger-500" : "border-gray-300 dark:border-gray-600",
-            "dark:bg-gray-800 dark:text-white",
+            "focus:outline-none focus:ring-2 focus:ring-offset-0",
+            "disabled:opacity-60 disabled:cursor-not-allowed",
             a ? "pl-10" : "",
             i ? "pr-10" : "",
             o
           ),
-          ...c
+          style: {
+            backgroundColor: "var(--metakyc-input-bg, #ffffff)",
+            color: "var(--metakyc-text-primary, #111827)",
+            borderColor: t ? "var(--metakyc-danger, #ef4444)" : "var(--metakyc-border, #d1d5db)",
+            ...c
+          },
+          ...d
         }
       ),
       i && /* @__PURE__ */ r("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: i })
     ] }),
-    t && /* @__PURE__ */ r("p", { className: "mt-1 text-sm text-danger-500", children: t }),
-    !t && n && /* @__PURE__ */ r("p", { className: "mt-1 text-sm text-gray-500", children: n })
+    t && /* @__PURE__ */ r("p", { className: "mt-1 text-sm", style: { color: "var(--metakyc-danger, #ef4444)" }, children: t }),
+    !t && n && /* @__PURE__ */ r("p", { className: "mt-1 text-sm", style: { color: "var(--metakyc-text-secondary, #6b7280)" }, children: n })
   ] })
 );
 me.displayName = "Input";
@@ -3285,10 +3298,17 @@ const Cr = ({
   ] });
 }, Ar = Ue(
   ({ countryCode: e = "+1", onCountryCodeChange: t, className: n, ...a }, i) => /* @__PURE__ */ s("div", { className: "w-full", children: [
-    a.label && /* @__PURE__ */ s("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: [
-      a.label,
-      a.required && /* @__PURE__ */ r("span", { className: "text-danger-500 ml-1", children: "*" })
-    ] }),
+    a.label && /* @__PURE__ */ s(
+      "label",
+      {
+        className: "block text-sm font-medium mb-1",
+        style: { color: "var(--metakyc-text-primary, #374151)" },
+        children: [
+          a.label,
+          a.required && /* @__PURE__ */ r("span", { className: "text-danger-500 ml-1", children: "*" })
+        ]
+      }
+    ),
     /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ r(
         "input",
@@ -3298,9 +3318,13 @@ const Cr = ({
           onChange: (o) => t == null ? void 0 : t(o.target.value),
           className: oe(
             "w-20 rounded-lg border px-3 py-2 text-sm",
-            "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent",
-            "border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+            "focus:outline-none focus:ring-2 focus:ring-offset-0"
           ),
+          style: {
+            backgroundColor: "var(--metakyc-input-bg, #ffffff)",
+            color: "var(--metakyc-text-primary, #111827)",
+            borderColor: "var(--metakyc-border, #d1d5db)"
+          },
           placeholder: "+1"
         }
       ),