@vaultix.ai/react 0.3.6 → 0.3.8

package/dist/index.d.mts

@@ -87,6 +87,13 @@ interface VaultixContextValue {
      * Controls which login methods and OAuth providers are rendered by <SignIn /> and <SignUp />.
      */
     appConfig: AppConfig | null;
+    /**
+     * True once the /api/v1/app/config fetch has settled (success OR failure).
+     * <SignIn /> and <SignUp /> render a skeleton until this is true so the
+     * default full set of methods/providers never flashes before narrowing
+     * to the app's configured set.
+     */
+    appConfigLoaded: boolean;
     signOut: (redirectUrl?: string) => Promise<void>;
     /** Update the current user's profile. Resolves with the updated user. */
     updateUser: (params: UpdateUserParams) => Promise<VaultixUser>;

package/dist/index.d.ts

@@ -87,6 +87,13 @@ interface VaultixContextValue {
      * Controls which login methods and OAuth providers are rendered by <SignIn /> and <SignUp />.
      */
     appConfig: AppConfig | null;
+    /**
+     * True once the /api/v1/app/config fetch has settled (success OR failure).
+     * <SignIn /> and <SignUp /> render a skeleton until this is true so the
+     * default full set of methods/providers never flashes before narrowing
+     * to the app's configured set.
+     */
+    appConfigLoaded: boolean;
     signOut: (redirectUrl?: string) => Promise<void>;
     /** Update the current user's profile. Resolves with the updated user. */
     updateUser: (params: UpdateUserParams) => Promise<VaultixUser>;

package/dist/index.js

@@ -113,6 +113,7 @@ function VaultixProvider({
   const [session, setSession] = (0, import_react.useState)(null);
   const [organization, setOrganization] = (0, import_react.useState)(null);
   const [appConfig, setAppConfig] = (0, import_react.useState)(null);
+  const [appConfigLoaded, setAppConfigLoaded] = (0, import_react.useState)(false);
   const jwtRef = (0, import_react.useRef)(null);
   const refreshTimerRef = (0, import_react.useRef)(null);
   const clearAuth = (0, import_react.useCallback)(() => {
@@ -224,6 +225,8 @@ function VaultixProvider({
           setAppConfig(cfg);
         }
       } catch {
+      } finally {
+        if (!cancelled) setAppConfigLoaded(true);
       }
     }
     hydrate();
@@ -287,6 +290,7 @@ function VaultixProvider({
     isSignedIn: !!session,
     apiOrigin,
     appConfig,
+    appConfigLoaded,
     signOut,
     updateUser,
     connectPlatform
@@ -438,8 +442,11 @@ function SignIn({
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
   let appConfig = null;
+  let appConfigLoaded = true;
   try {
-    appConfig = useVaultixContext().appConfig;
+    const ctx = useVaultixContext();
+    appConfig = ctx.appConfig;
+    appConfigLoaded = ctx.appConfigLoaded;
   } catch {
   }
   const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
@@ -711,6 +718,39 @@ function SignIn({
     "forgot-verify": `Code sent to ${email}`,
     "forgot-reset": "Choose a new password"
   };
+  if (!appConfigLoaded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.clsx)(
+          "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl",
+          "backdrop-blur-[16px]",
+          className
+        ),
+        style: { background: cardBg },
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4 animate-pulse",
+                style: { background: primaryColor ?? "linear-gradient(to bottom right, #7c3aed, #2563eb)" },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LockIcon, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-5 w-32 mx-auto rounded bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-3 w-44 mx-auto mt-2 rounded bg-white/5 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-8 pb-8 space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
@@ -719,7 +759,7 @@ function SignIn({
         "backdrop-blur-[16px]",
         className
       ),
-      style: { background: cardBg },
+      style: { background: cardBg, color: textColor },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -896,25 +936,32 @@ function SignIn({
   );
 }
 function Input({ onChange, className, primaryColor, ...props }) {
+  const restBorder = "color-mix(in srgb, currentColor 18%, transparent)";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "input",
     {
       ...props,
       onChange: (e) => onChange(e.target.value),
       className: (0, import_clsx.clsx)(
-        "w-full bg-white/5 border border-white/8 rounded-xl px-4 py-2.5",
-        "text-sm text-white/90 placeholder:text-[#475569]",
+        "w-full rounded-xl px-4 py-2.5",
+        "text-sm placeholder:text-[#94a3b8]",
         "focus:outline-none transition-colors",
-        !primaryColor && "focus:border-purple-500/60",
         className
       ),
-      style: primaryColor ? { "--vx-focus": primaryColor } : void 0,
+      style: {
+        color: "inherit",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: restBorder,
+        background: "color-mix(in srgb, currentColor 4%, transparent)",
+        ...primaryColor ? { "--vx-focus": primaryColor } : {}
+      },
       onFocus: (e) => {
-        if (primaryColor) e.currentTarget.style.borderColor = `${primaryColor}99`;
+        e.currentTarget.style.borderColor = primaryColor ? `${primaryColor}99` : "color-mix(in srgb, currentColor 40%, transparent)";
         props.onFocus?.(e);
       },
       onBlur: (e) => {
-        if (primaryColor) e.currentTarget.style.borderColor = "";
+        e.currentTarget.style.borderColor = restBorder;
         props.onBlur?.(e);
       }
     }
@@ -962,11 +1009,19 @@ function OAuthButton({
       onClick,
       className: (0, import_clsx.clsx)(
         "w-full flex items-center justify-center gap-3 px-4 py-2.5 rounded-xl",
-        "text-sm font-medium text-white/80",
-        "bg-white/5 border border-white/10",
-        "hover:bg-white/10 hover:border-white/20",
-        "transition-all duration-150"
+        "text-sm font-medium transition-all duration-150"
       ),
+      style: {
+        color: "inherit",
+        border: "1px solid color-mix(in srgb, currentColor 22%, transparent)",
+        background: "color-mix(in srgb, currentColor 5%, transparent)"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "color-mix(in srgb, currentColor 12%, transparent)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "color-mix(in srgb, currentColor 5%, transparent)";
+      },
       children: [
         icon,
         label
@@ -1115,8 +1170,11 @@ function SignUp({
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
   let appConfig = null;
+  let appConfigLoaded = true;
   try {
-    appConfig = useVaultixContext().appConfig;
+    const ctx = useVaultixContext();
+    appConfig = ctx.appConfig;
+    appConfigLoaded = ctx.appConfigLoaded;
   } catch {
   }
   const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
@@ -1209,6 +1267,37 @@ function SignUp({
     } catch {
     }
   }
+  if (!appConfigLoaded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx2.clsx)(
+          "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl backdrop-blur-[16px]",
+          className
+        ),
+        style: { background: cardBg },
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4 animate-pulse",
+                style: { background: primaryColor ?? "linear-gradient(to bottom right, #7c3aed, #2563eb)" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-5 w-32 mx-auto rounded bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-3 w-44 mx-auto mt-2 rounded bg-white/5 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-8 pb-8 space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
@@ -1216,7 +1305,7 @@ function SignUp({
         "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl backdrop-blur-[16px]",
         className
       ),
-      style: { background: cardBg },
+      style: { background: cardBg, color: textColor },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1303,24 +1392,31 @@ function SignUp({
   );
 }
 function Input2({ onChange, className, primaryColor, ...props }) {
+  const restBorder = "color-mix(in srgb, currentColor 18%, transparent)";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "input",
     {
       ...props,
       onChange: (e) => onChange(e.target.value),
       className: (0, import_clsx2.clsx)(
-        "w-full bg-white/5 border border-white/8 rounded-xl px-4 py-2.5",
-        "text-sm text-white/90 placeholder:text-[#475569]",
+        "w-full rounded-xl px-4 py-2.5",
+        "text-sm placeholder:text-[#94a3b8]",
         "focus:outline-none transition-colors",
-        !primaryColor && "focus:border-emerald-500/60",
         className
       ),
+      style: {
+        color: "inherit",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: restBorder,
+        background: "color-mix(in srgb, currentColor 4%, transparent)"
+      },
       onFocus: (e) => {
-        if (primaryColor) e.currentTarget.style.borderColor = `${primaryColor}99`;
+        e.currentTarget.style.borderColor = primaryColor ? `${primaryColor}99` : "color-mix(in srgb, currentColor 40%, transparent)";
         props.onFocus?.(e);
       },
       onBlur: (e) => {
-        if (primaryColor) e.currentTarget.style.borderColor = "";
+        e.currentTarget.style.borderColor = restBorder;
         props.onBlur?.(e);
       }
     }
@@ -1359,11 +1455,19 @@ function OAuthButton2({
       onClick,
       className: (0, import_clsx2.clsx)(
         "w-full flex items-center justify-center gap-3 px-4 py-2.5 rounded-xl",
-        "text-sm font-medium text-white/80",
-        "bg-white/5 border border-white/10",
-        "hover:bg-white/10 hover:border-white/20",
-        "transition-all duration-150"
+        "text-sm font-medium transition-all duration-150"
       ),
+      style: {
+        color: "inherit",
+        border: "1px solid color-mix(in srgb, currentColor 22%, transparent)",
+        background: "color-mix(in srgb, currentColor 5%, transparent)"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "color-mix(in srgb, currentColor 12%, transparent)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "color-mix(in srgb, currentColor 5%, transparent)";
+      },
       children: [
         icon,
         label

package/dist/index.mjs

@@ -78,6 +78,7 @@ function VaultixProvider({
   const [session, setSession] = useState(null);
   const [organization, setOrganization] = useState(null);
   const [appConfig, setAppConfig] = useState(null);
+  const [appConfigLoaded, setAppConfigLoaded] = useState(false);
   const jwtRef = useRef(null);
   const refreshTimerRef = useRef(null);
   const clearAuth = useCallback(() => {
@@ -189,6 +190,8 @@ function VaultixProvider({
           setAppConfig(cfg);
         }
       } catch {
+      } finally {
+        if (!cancelled) setAppConfigLoaded(true);
       }
     }
     hydrate();
@@ -252,6 +255,7 @@ function VaultixProvider({
     isSignedIn: !!session,
     apiOrigin,
     appConfig,
+    appConfigLoaded,
     signOut,
     updateUser,
     connectPlatform
@@ -403,8 +407,11 @@ function SignIn({
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
   let appConfig = null;
+  let appConfigLoaded = true;
   try {
-    appConfig = useVaultixContext().appConfig;
+    const ctx = useVaultixContext();
+    appConfig = ctx.appConfig;
+    appConfigLoaded = ctx.appConfigLoaded;
   } catch {
   }
   const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
@@ -676,6 +683,39 @@ function SignIn({
     "forgot-verify": `Code sent to ${email}`,
     "forgot-reset": "Choose a new password"
   };
+  if (!appConfigLoaded) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl",
+          "backdrop-blur-[16px]",
+          className
+        ),
+        style: { background: cardBg },
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-8 pt-8 pb-6 text-center", children: [
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4 animate-pulse",
+                style: { background: primaryColor ?? "linear-gradient(to bottom right, #7c3aed, #2563eb)" },
+                children: /* @__PURE__ */ jsx2(LockIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { className: "h-5 w-32 mx-auto rounded bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ jsx2("div", { className: "h-3 w-44 mx-auto mt-2 rounded bg-white/5 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "px-8 pb-8 space-y-3", children: [
+            /* @__PURE__ */ jsx2("div", { className: "h-11 w-full rounded-lg bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ jsx2("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" }),
+            /* @__PURE__ */ jsx2("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -684,7 +724,7 @@ function SignIn({
         "backdrop-blur-[16px]",
         className
       ),
-      style: { background: cardBg },
+      style: { background: cardBg, color: textColor },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "px-8 pt-8 pb-6 text-center", children: [
           /* @__PURE__ */ jsx2(
@@ -861,25 +901,32 @@ function SignIn({
   );
 }
 function Input({ onChange, className, primaryColor, ...props }) {
+  const restBorder = "color-mix(in srgb, currentColor 18%, transparent)";
   return /* @__PURE__ */ jsx2(
     "input",
     {
       ...props,
       onChange: (e) => onChange(e.target.value),
       className: clsx(
-        "w-full bg-white/5 border border-white/8 rounded-xl px-4 py-2.5",
-        "text-sm text-white/90 placeholder:text-[#475569]",
+        "w-full rounded-xl px-4 py-2.5",
+        "text-sm placeholder:text-[#94a3b8]",
         "focus:outline-none transition-colors",
-        !primaryColor && "focus:border-purple-500/60",
         className
       ),
-      style: primaryColor ? { "--vx-focus": primaryColor } : void 0,
+      style: {
+        color: "inherit",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: restBorder,
+        background: "color-mix(in srgb, currentColor 4%, transparent)",
+        ...primaryColor ? { "--vx-focus": primaryColor } : {}
+      },
       onFocus: (e) => {
-        if (primaryColor) e.currentTarget.style.borderColor = `${primaryColor}99`;
+        e.currentTarget.style.borderColor = primaryColor ? `${primaryColor}99` : "color-mix(in srgb, currentColor 40%, transparent)";
         props.onFocus?.(e);
       },
       onBlur: (e) => {
-        if (primaryColor) e.currentTarget.style.borderColor = "";
+        e.currentTarget.style.borderColor = restBorder;
         props.onBlur?.(e);
       }
     }
@@ -927,11 +974,19 @@ function OAuthButton({
       onClick,
       className: clsx(
         "w-full flex items-center justify-center gap-3 px-4 py-2.5 rounded-xl",
-        "text-sm font-medium text-white/80",
-        "bg-white/5 border border-white/10",
-        "hover:bg-white/10 hover:border-white/20",
-        "transition-all duration-150"
+        "text-sm font-medium transition-all duration-150"
       ),
+      style: {
+        color: "inherit",
+        border: "1px solid color-mix(in srgb, currentColor 22%, transparent)",
+        background: "color-mix(in srgb, currentColor 5%, transparent)"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "color-mix(in srgb, currentColor 12%, transparent)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "color-mix(in srgb, currentColor 5%, transparent)";
+      },
       children: [
         icon,
         label
@@ -1080,8 +1135,11 @@ function SignUp({
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
   let appConfig = null;
+  let appConfigLoaded = true;
   try {
-    appConfig = useVaultixContext().appConfig;
+    const ctx = useVaultixContext();
+    appConfig = ctx.appConfig;
+    appConfigLoaded = ctx.appConfigLoaded;
   } catch {
   }
   const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
@@ -1174,6 +1232,37 @@ function SignUp({
     } catch {
     }
   }
+  if (!appConfigLoaded) {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: clsx2(
+          "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl backdrop-blur-[16px]",
+          className
+        ),
+        style: { background: cardBg },
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "px-8 pt-8 pb-6 text-center", children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4 animate-pulse",
+                style: { background: primaryColor ?? "linear-gradient(to bottom right, #7c3aed, #2563eb)" }
+              }
+            ),
+            /* @__PURE__ */ jsx3("div", { className: "h-5 w-32 mx-auto rounded bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ jsx3("div", { className: "h-3 w-44 mx-auto mt-2 rounded bg-white/5 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "px-8 pb-8 space-y-3", children: [
+            /* @__PURE__ */ jsx3("div", { className: "h-11 w-full rounded-lg bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ jsx3("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" }),
+            /* @__PURE__ */ jsx3("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -1181,7 +1270,7 @@ function SignUp({
         "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl backdrop-blur-[16px]",
         className
       ),
-      style: { background: cardBg },
+      style: { background: cardBg, color: textColor },
       children: [
         /* @__PURE__ */ jsxs2("div", { className: "px-8 pt-8 pb-6 text-center", children: [
           /* @__PURE__ */ jsx3(
@@ -1268,24 +1357,31 @@ function SignUp({
   );
 }
 function Input2({ onChange, className, primaryColor, ...props }) {
+  const restBorder = "color-mix(in srgb, currentColor 18%, transparent)";
   return /* @__PURE__ */ jsx3(
     "input",
     {
       ...props,
       onChange: (e) => onChange(e.target.value),
       className: clsx2(
-        "w-full bg-white/5 border border-white/8 rounded-xl px-4 py-2.5",
-        "text-sm text-white/90 placeholder:text-[#475569]",
+        "w-full rounded-xl px-4 py-2.5",
+        "text-sm placeholder:text-[#94a3b8]",
         "focus:outline-none transition-colors",
-        !primaryColor && "focus:border-emerald-500/60",
         className
       ),
+      style: {
+        color: "inherit",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: restBorder,
+        background: "color-mix(in srgb, currentColor 4%, transparent)"
+      },
       onFocus: (e) => {
-        if (primaryColor) e.currentTarget.style.borderColor = `${primaryColor}99`;
+        e.currentTarget.style.borderColor = primaryColor ? `${primaryColor}99` : "color-mix(in srgb, currentColor 40%, transparent)";
         props.onFocus?.(e);
       },
       onBlur: (e) => {
-        if (primaryColor) e.currentTarget.style.borderColor = "";
+        e.currentTarget.style.borderColor = restBorder;
         props.onBlur?.(e);
       }
     }
@@ -1324,11 +1420,19 @@ function OAuthButton2({
       onClick,
       className: clsx2(
         "w-full flex items-center justify-center gap-3 px-4 py-2.5 rounded-xl",
-        "text-sm font-medium text-white/80",
-        "bg-white/5 border border-white/10",
-        "hover:bg-white/10 hover:border-white/20",
-        "transition-all duration-150"
+        "text-sm font-medium transition-all duration-150"
       ),
+      style: {
+        color: "inherit",
+        border: "1px solid color-mix(in srgb, currentColor 22%, transparent)",
+        background: "color-mix(in srgb, currentColor 5%, transparent)"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "color-mix(in srgb, currentColor 12%, transparent)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "color-mix(in srgb, currentColor 5%, transparent)";
+      },
       children: [
         icon,
         label

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaultix.ai/react",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "Vaultix-ID React SDK — drop-in auth components for any React app",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",