@ascendkit/nextjs 0.3.6 → 0.3.7

package/dist/client/provider.js

@@ -274,15 +274,15 @@ export function AscendKitProvider({ publicKey = process.env.NEXT_PUBLIC_ASCENDKI
                 if (message)
                     setAuthNotification({ variant, message });
             }, localization: {
-                SIGN_IN: environmentName ? `Log in to ${environmentName}` : "Log In",
+                SIGN_IN: environmentName ? `Log in to ${environmentName}` : "Log in",
                 SIGN_IN_DESCRIPTION: credentialsEnabled
-                    ? "Enter your credentials to continue"
+                    ? "Enter your email below to log in to your account"
                     : magicLinkEnabled
-                        ? "Enter your email to receive a sign-in link"
+                        ? "Enter your email to receive a secure sign-in link"
                         : "Choose how you'd like to sign in",
-                SIGN_UP: environmentName ? `Sign up for ${environmentName}` : "Sign Up",
-                SIGN_UP_DESCRIPTION: "Enter your information to create an account",
-                SIGN_IN_WITH: "",
+                SIGN_UP: environmentName ? `Sign up for ${environmentName}` : "Sign up",
+                SIGN_UP_DESCRIPTION: "Enter your information to create your account",
+                SIGN_IN_WITH: "Continue with",
                 DISABLED_CREDENTIALS_DESCRIPTION: socialProviders.length === 1
                     ? `Continue with ${socialProviders[0].charAt(0).toUpperCase() + socialProviders[0].slice(1)} to sign in`
                     : "Choose how you'd like to continue",

package/dist/components/auth-card.d.ts

@@ -1,7 +1,30 @@
 import { type AuthViewProps } from "@daveyplate/better-auth-ui";
+type AscendKitAuthCardDensity = "comfortable" | "compact";
+type AscendKitAuthCardAlignment = "left" | "center";
+interface AscendKitAuthCardTheme {
+    card?: string;
+    foreground?: string;
+    mutedForeground?: string;
+    border?: string;
+    input?: string;
+    primary?: string;
+    primaryForeground?: string;
+    accent?: string;
+    accentForeground?: string;
+    radius?: string;
+    shadow?: string;
+}
 interface AscendKitAuthCardProps extends Omit<AuthViewProps, "view"> {
     /** Which view to show. Defaults to "SIGN_IN". */
     view?: AuthViewProps["view"];
+    /** Visual density of the built-in AscendKit styling. */
+    density?: AscendKitAuthCardDensity;
+    /** Content alignment for the header and footer chrome. */
+    alignment?: AscendKitAuthCardAlignment;
+    /** Optional eyebrow text rendered above the auth title. */
+    eyebrow?: string | null;
+    /** Optional theme token overrides for the built-in card styling. */
+    theme?: AscendKitAuthCardTheme;
 }
 /**
  * Drop-in auth card powered by Better Auth UI.

package/dist/components/auth-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth-card.d.ts","sourceRoot":"","sources":["../../src/components/auth-card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAK1E,UAAU,sBAAuB,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;IAClE,iDAAiD;IACjD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAoM9D"}
+{"version":3,"file":"auth-card.d.ts","sourceRoot":"","sources":["../../src/components/auth-card.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAK1E,KAAK,wBAAwB,GAAG,aAAa,GAAG,SAAS,CAAC;AAC1D,KAAK,0BAA0B,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,UAAU,sBAAsB;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAuB,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;IAClE,iDAAiD;IACjD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,wDAAwD;IACxD,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,0BAA0B,CAAC;IACvC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,oEAAoE;IACpE,KAAK,CAAC,EAAE,sBAAsB,CAAC;CAChC;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAonB9D"}

package/dist/components/auth-card.js

@@ -1,9 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { AuthView } from "@daveyplate/better-auth-ui";
 import { useAscendKitContext } from "../client/provider";
 import { BrandingBadge } from "./branding-badge";
+function joinClasses(...values) {
+    return values.filter(Boolean).join(" ");
+}
 /**
  * Drop-in auth card powered by Better Auth UI.
  *
@@ -17,10 +20,29 @@ import { BrandingBadge } from "./branding-badge";
  * ```
  */
 export function AscendKitAuthCard(props) {
+    const { density = "comfortable", alignment = "left", eyebrow = "Secure access", theme, ...authViewProps } = props;
     const { settingsLoaded, settingsError, refreshSettings, authNotification, clearAuthNotification } = useAscendKitContext();
+    const wrapperRef = useRef(null);
+    const hasEyebrow = typeof eyebrow === "string" && eyebrow.trim().length > 0;
     useEffect(() => {
         void refreshSettings();
     }, [refreshSettings]);
+    useEffect(() => {
+        const root = wrapperRef.current;
+        if (!root)
+            return;
+        const buttons = root.querySelectorAll(".ak-baui-provider-button");
+        for (const button of buttons) {
+            const walker = document.createTreeWalker(button, NodeFilter.SHOW_TEXT);
+            let textNode = null;
+            while ((textNode = walker.nextNode())) {
+                if (textNode.textContent?.trim()) {
+                    textNode.textContent = textNode.textContent.replace(/^Continue with\s+/i, "").trim();
+                    break;
+                }
+            }
+        }
+    }, [settingsLoaded, authViewProps.view, authViewProps.socialLayout]);
     // Auto-dismiss notification after 8 seconds
     useEffect(() => {
         if (!authNotification)
@@ -46,6 +68,50 @@ export function AscendKitAuthCard(props) {
         : authNotification?.variant === "info"
             ? "ak-auth-notification--info"
             : "ak-auth-notification--success";
+    const wrapperStyle = {
+        ["--ak-auth-eyebrow"]: hasEyebrow ? JSON.stringify(eyebrow) : undefined,
+        ["--ak-auth-card"]: theme?.card,
+        ["--ak-auth-foreground"]: theme?.foreground,
+        ["--ak-auth-muted-foreground"]: theme?.mutedForeground,
+        ["--ak-auth-border"]: theme?.border,
+        ["--ak-auth-input"]: theme?.input,
+        ["--ak-auth-primary"]: theme?.primary,
+        ["--ak-auth-primary-foreground"]: theme?.primaryForeground,
+        ["--ak-auth-accent"]: theme?.accent,
+        ["--ak-auth-accent-foreground"]: theme?.accentForeground,
+        ["--ak-auth-radius"]: theme?.radius,
+        ["--ak-auth-shadow"]: theme?.shadow,
+    };
+    const mergedClassNames = {
+        ...authViewProps.classNames,
+        base: joinClasses("ak-baui-card", authViewProps.classNames?.base),
+        header: joinClasses("ak-baui-header", authViewProps.classNames?.header),
+        title: joinClasses("ak-baui-title", authViewProps.classNames?.title),
+        description: joinClasses("ak-baui-description", authViewProps.classNames?.description),
+        content: joinClasses("ak-baui-content", authViewProps.classNames?.content),
+        continueWith: joinClasses("ak-baui-continue", authViewProps.classNames?.continueWith),
+        separator: joinClasses("ak-baui-separator", authViewProps.classNames?.separator),
+        footer: joinClasses("ak-baui-footer", authViewProps.classNames?.footer),
+        footerLink: joinClasses("ak-baui-footer-link", authViewProps.classNames?.footerLink),
+        form: {
+            ...authViewProps.classNames?.form,
+            base: joinClasses("ak-baui-form", authViewProps.classNames?.form?.base),
+            label: joinClasses("ak-baui-label", authViewProps.classNames?.form?.label),
+            input: joinClasses("ak-baui-input", authViewProps.classNames?.form?.input),
+            error: joinClasses("ak-baui-error", authViewProps.classNames?.form?.error),
+            button: joinClasses("ak-baui-button", authViewProps.classNames?.form?.button),
+            primaryButton: joinClasses("ak-baui-button-primary", authViewProps.classNames?.form?.primaryButton),
+            secondaryButton: joinClasses("ak-baui-button-secondary", authViewProps.classNames?.form?.secondaryButton),
+            outlineButton: joinClasses("ak-baui-button-outline", authViewProps.classNames?.form?.outlineButton),
+            providerButton: joinClasses("ak-baui-provider-button", authViewProps.classNames?.form?.providerButton),
+            forgotPasswordLink: joinClasses("ak-baui-forgot-link", authViewProps.classNames?.form?.forgotPasswordLink),
+            icon: joinClasses("ak-baui-icon", authViewProps.classNames?.form?.icon),
+            checkbox: joinClasses("ak-baui-checkbox", authViewProps.classNames?.form?.checkbox),
+            otpInput: joinClasses("ak-baui-otp-input", authViewProps.classNames?.form?.otpInput),
+            otpInputContainer: joinClasses("ak-baui-otp-input-container", authViewProps.classNames?.form?.otpInputContainer),
+            qrCode: joinClasses("ak-baui-qr", authViewProps.classNames?.form?.qrCode),
+        },
+    };
     return (_jsxs("div", { children: [authNotification && (_jsxs("div", { className: `ak-auth-notification ${notifClass}`, role: "alert", children: [_jsx("p", { className: "ak-auth-notification-msg", children: authNotification.message }), _jsx("button", { type: "button", className: "ak-auth-notification-close", onClick: clearAuthNotification, "aria-label": "Dismiss", children: "\u2715" }), _jsx("style", { children: `
             .ak-auth-notification {
               display: flex;
@@ -124,17 +190,334 @@ export function AscendKitAuthCard(props) {
                 --ak-notif-info-border: rgba(59, 130, 246, 0.2);
               }
             }
-          ` })] })), _jsxs("div", { className: "ak-auth-view-wrapper", children: [_jsx(AuthView, { ...props, socialLayout: props.socialLayout ?? "vertical", classNames: {
-                            content: "overflow-x-hidden",
-                            continueWith: "w-full min-w-0",
-                            separator: "min-w-0 flex-1",
-                            ...props.classNames,
-                        } }), _jsx("style", { children: `
+          ` })] })), _jsxs("div", { ref: wrapperRef, className: `ak-auth-view-wrapper ak-auth-density-${density} ak-auth-align-${alignment}${hasEyebrow ? " ak-auth-has-eyebrow" : ""}`, style: wrapperStyle, children: [_jsx(AuthView, { ...authViewProps, socialLayout: authViewProps.socialLayout ?? "vertical", classNames: mergedClassNames }), _jsx("style", { children: `
           /*
-           * Fallback styles for Better Auth UI's Tailwind utility classes.
-           * These ensure correct rendering when the host app's Tailwind config
-           * does not scan node_modules/@daveyplate/better-auth-ui.
-           * Each rule uses .ak-auth-view-wrapper to avoid leaking into the host app.
+           * Scoped fallback theme tokens and semantic classes for Better Auth UI.
+           * This keeps AscendKitAuthCard working even when the host app does not
+           * scan node_modules or define shadcn/ui theme variables.
+           */
+          .ak-auth-view-wrapper {
+            --background: #f7f8fc;
+            --foreground: var(--ak-auth-foreground, #f3f6ff);
+            --card: var(--ak-auth-card, linear-gradient(180deg, rgba(19, 25, 42, 0.94) 0%, rgba(12, 17, 30, 0.98) 100%));
+            --card-foreground: var(--ak-auth-foreground, #f3f6ff);
+            --popover: #ffffff;
+            --popover-foreground: #0f172a;
+            --primary: var(--ak-auth-primary, #f6f7fb);
+            --primary-foreground: var(--ak-auth-primary-foreground, #0f172a);
+            --secondary: rgba(255, 255, 255, 0.04);
+            --secondary-foreground: var(--ak-auth-foreground, #f3f6ff);
+            --muted: rgba(255, 255, 255, 0.04);
+            --muted-foreground: var(--ak-auth-muted-foreground, #94a3b8);
+            --accent: var(--ak-auth-accent, rgba(255, 255, 255, 0.06));
+            --accent-foreground: var(--ak-auth-accent-foreground, #f3f6ff);
+            --destructive: #dc2626;
+            --destructive-foreground: #ffffff;
+            --border: var(--ak-auth-border, rgba(148, 163, 184, 0.18));
+            --input: var(--ak-auth-input, rgba(148, 163, 184, 0.2));
+            --ring: #7dd3fc;
+            --ring-offset-background: #050816;
+            --ak-shell-radius: var(--ak-auth-radius, 26px);
+            --ak-shell-shadow: var(--ak-auth-shadow, 0 28px 80px rgba(2, 6, 23, 0.42));
+            --ak-inner-surface: rgba(7, 11, 23, 0.52);
+            --ak-inner-surface-strong: rgba(7, 11, 23, 0.74);
+            color: var(--foreground);
+          }
+          html.dark .ak-auth-view-wrapper,
+          :root.dark .ak-auth-view-wrapper {
+            --background: #020617;
+            --foreground: #f8fafc;
+            --card: var(--ak-auth-card, linear-gradient(180deg, rgba(19, 25, 42, 0.94) 0%, rgba(12, 17, 30, 0.98) 100%));
+            --card-foreground: var(--ak-auth-foreground, #f8fafc);
+            --popover: #0f172a;
+            --popover-foreground: #f8fafc;
+            --primary: var(--ak-auth-primary, #f8fafc);
+            --primary-foreground: var(--ak-auth-primary-foreground, #0f172a);
+            --secondary: rgba(255, 255, 255, 0.04);
+            --secondary-foreground: var(--ak-auth-foreground, #f8fafc);
+            --muted: rgba(255, 255, 255, 0.04);
+            --muted-foreground: var(--ak-auth-muted-foreground, #94a3b8);
+            --accent: var(--ak-auth-accent, rgba(255, 255, 255, 0.06));
+            --accent-foreground: var(--ak-auth-accent-foreground, #f8fafc);
+            --destructive: #ef4444;
+            --destructive-foreground: #ffffff;
+            --border: var(--ak-auth-border, rgba(255, 255, 255, 0.14));
+            --input: var(--ak-auth-input, rgba(255, 255, 255, 0.14));
+            --ring: #60a5fa;
+            --ring-offset-background: #020617;
+          }
+          .ak-auth-view-wrapper .ak-baui-card {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            max-width: 31.5rem;
+            border: 1px solid var(--border);
+            border-radius: var(--ak-shell-radius);
+            background: var(--card);
+            color: var(--card-foreground);
+            box-shadow: var(--ak-shell-shadow);
+            backdrop-filter: blur(18px);
+            overflow: hidden;
+            position: relative;
+          }
+          .ak-auth-view-wrapper .ak-baui-card::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            background:
+              radial-gradient(circle at top left, rgba(125, 211, 252, 0.12), transparent 32%),
+              radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.05), transparent 24%);
+          }
+          .ak-auth-view-wrapper .ak-baui-header {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            padding: 2.25rem 2.25rem 0;
+            position: relative;
+            z-index: 1;
+          }
+          .ak-auth-view-wrapper .ak-baui-header::before {
+            content: var(--ak-auth-eyebrow);
+            display: inline-flex;
+            align-self: flex-start;
+            margin-bottom: 0.1rem;
+            padding: 0.33rem 0.7rem;
+            border: 1px solid rgba(125, 211, 252, 0.18);
+            border-radius: 999px;
+            background: rgba(125, 211, 252, 0.08);
+            color: rgba(191, 219, 254, 0.92);
+            font-size: 0.7rem;
+            line-height: 1;
+            font-weight: 700;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+          }
+          .ak-auth-view-wrapper:not(.ak-auth-has-eyebrow) .ak-baui-header::before {
+            display: none;
+          }
+          .ak-auth-view-wrapper .ak-baui-title {
+            margin: 0;
+            font-size: clamp(2.25rem, 3.8vw, 2.75rem);
+            line-height: 1;
+            letter-spacing: -0.04em;
+            font-weight: 750;
+            color: var(--card-foreground);
+          }
+          .ak-auth-view-wrapper .ak-baui-description {
+            margin: 0;
+            max-width: 28rem;
+            font-size: 1rem;
+            line-height: 1.6;
+            color: var(--muted-foreground);
+          }
+          .ak-auth-view-wrapper .ak-baui-content {
+            display: grid;
+            gap: 1.2rem;
+            padding: 1.9rem 2.25rem 2.25rem;
+            overflow-x: hidden;
+            position: relative;
+            z-index: 1;
+          }
+          .ak-auth-view-wrapper .ak-baui-form {
+            display: grid;
+            width: 100%;
+            gap: 1.5rem;
+            padding: 1.4rem;
+            border: 1px solid rgba(148, 163, 184, 0.1);
+            border-radius: calc(var(--ak-shell-radius) - 8px);
+            background:
+              linear-gradient(180deg, rgba(6, 10, 21, 0.6) 0%, rgba(7, 12, 24, 0.76) 100%);
+            box-shadow:
+              inset 0 1px 0 rgba(255, 255, 255, 0.03),
+              0 18px 32px rgba(2, 6, 23, 0.18);
+          }
+          .ak-auth-view-wrapper .ak-baui-form .flex.items-center.justify-between {
+            gap: 0.75rem;
+          }
+          .ak-auth-view-wrapper .ak-baui-label {
+            font-size: 0.95rem;
+            line-height: 1.35rem;
+            font-weight: 600;
+            color: var(--card-foreground);
+          }
+          .ak-auth-view-wrapper .ak-baui-input {
+            width: 100%;
+            min-width: 0;
+            min-height: 3.15rem;
+            padding: 0.8rem 0.95rem;
+            border: 1px solid var(--input);
+            border-radius: calc(var(--ak-shell-radius) - 12px);
+            background: rgba(9, 14, 26, 0.9);
+            color: var(--foreground);
+            box-sizing: border-box;
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
+          }
+          .ak-auth-view-wrapper .ak-baui-input::placeholder {
+            color: var(--muted-foreground);
+          }
+          .ak-auth-view-wrapper .ak-baui-input:focus-visible,
+          .ak-auth-view-wrapper .ak-baui-input:focus {
+            outline: none;
+            border-color: var(--ring);
+            box-shadow:
+              0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent),
+              inset 0 1px 0 rgba(255, 255, 255, 0.02);
+          }
+          .ak-auth-view-wrapper .ak-baui-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            min-height: 3.15rem;
+            width: 100%;
+            border-radius: calc(var(--ak-shell-radius) - 12px);
+            border: 1px solid transparent;
+            padding: 0.85rem 1.1rem;
+            font-size: 1rem;
+            line-height: 1.35rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.15s, background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
+          }
+          .ak-auth-view-wrapper .ak-baui-button:disabled {
+            opacity: 0.65;
+            cursor: not-allowed;
+          }
+          .ak-auth-view-wrapper .ak-baui-button-primary {
+            background:
+              linear-gradient(180deg, color-mix(in srgb, var(--primary) 94%, white) 0%, var(--primary) 100%);
+            color: var(--primary-foreground);
+            box-shadow:
+              0 14px 34px rgba(248, 250, 252, 0.09),
+              inset 0 1px 0 rgba(255, 255, 255, 0.45);
+          }
+          .ak-auth-view-wrapper .ak-baui-button-primary:hover:not(:disabled) {
+            opacity: 0.95;
+            transform: translateY(-1px);
+          }
+          .ak-auth-view-wrapper .ak-baui-button-outline,
+          .ak-auth-view-wrapper .ak-baui-provider-button {
+            background: rgba(4, 8, 18, 0.86);
+            border-color: var(--border);
+            color: var(--foreground);
+          }
+          .ak-auth-view-wrapper .ak-baui-button-outline:hover:not(:disabled),
+          .ak-auth-view-wrapper .ak-baui-provider-button:hover:not(:disabled) {
+            background: color-mix(in srgb, var(--accent) 96%, rgba(6, 10, 20, 0.48));
+            transform: translateY(-1px);
+          }
+          .ak-auth-view-wrapper .ak-baui-provider-button {
+            justify-content: center;
+            letter-spacing: -0.01em;
+            font-weight: 600;
+          }
+          .ak-auth-view-wrapper .ak-baui-icon {
+            width: 1.1rem;
+            height: 1.1rem;
+            flex-shrink: 0;
+          }
+          .ak-auth-view-wrapper .ak-baui-error {
+            font-size: 0.875rem;
+            line-height: 1.25rem;
+            color: var(--destructive);
+          }
+          .ak-auth-view-wrapper .ak-baui-forgot-link,
+          .ak-auth-view-wrapper .ak-baui-footer-link {
+            color: var(--foreground);
+            font-weight: 600;
+            text-decoration: none;
+          }
+          .ak-auth-view-wrapper .ak-baui-forgot-link:hover,
+          .ak-auth-view-wrapper .ak-baui-footer-link:hover {
+            color: color-mix(in srgb, var(--foreground) 88%, white);
+            text-decoration: underline;
+            text-underline-offset: 0.16em;
+          }
+          .ak-auth-view-wrapper .ak-baui-continue {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            min-width: 0;
+            gap: 1rem;
+            margin: 0.2rem 0 0.05rem;
+          }
+          .ak-auth-view-wrapper .ak-baui-continue span {
+            white-space: nowrap;
+            text-transform: uppercase;
+            letter-spacing: 0.18em;
+            font-size: 0.69rem;
+            line-height: 1rem;
+            color: var(--muted-foreground);
+          }
+          .ak-auth-view-wrapper .ak-baui-separator {
+            flex: 1 1 0%;
+            min-width: 0;
+            background: var(--border);
+            opacity: 0.62;
+          }
+          .ak-auth-view-wrapper .ak-baui-footer {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 0.4rem;
+            padding: 0.25rem 2.25rem 2.25rem;
+            color: var(--muted-foreground);
+            font-size: 0.92rem;
+            line-height: 1.45rem;
+            position: relative;
+            z-index: 1;
+          }
+          .ak-auth-view-wrapper .ak-baui-checkbox {
+            border-color: var(--input);
+          }
+          .ak-auth-view-wrapper .ak-baui-otp-input {
+            border-color: var(--input);
+            border-radius: 0.5rem;
+          }
+          .ak-auth-view-wrapper .ak-baui-otp-input-container,
+          .ak-auth-view-wrapper .ak-baui-qr {
+            width: 100%;
+          }
+          .ak-auth-view-wrapper.ak-auth-align-center .ak-baui-header,
+          .ak-auth-view-wrapper.ak-auth-align-center .ak-baui-footer {
+            align-items: center;
+            text-align: center;
+          }
+          .ak-auth-view-wrapper.ak-auth-align-center .ak-baui-description {
+            margin-left: auto;
+            margin-right: auto;
+          }
+          .ak-auth-view-wrapper.ak-auth-align-center .ak-baui-header::before {
+            align-self: center;
+          }
+          .ak-auth-view-wrapper.ak-auth-density-compact .ak-baui-header {
+            padding: 1.6rem 1.6rem 0;
+          }
+          .ak-auth-view-wrapper.ak-auth-density-compact .ak-baui-content {
+            padding: 1.3rem 1.6rem 1.6rem;
+          }
+          .ak-auth-view-wrapper.ak-auth-density-compact .ak-baui-footer {
+            padding: 0.15rem 1.6rem 1.6rem;
+          }
+          .ak-auth-view-wrapper.ak-auth-density-compact .ak-baui-title {
+            font-size: clamp(1.85rem, 3vw, 2.1rem);
+          }
+          .ak-auth-view-wrapper.ak-auth-density-compact .ak-baui-description {
+            font-size: 0.92rem;
+            line-height: 1.45;
+          }
+          .ak-auth-view-wrapper.ak-auth-density-compact .ak-baui-form {
+            padding: 1rem;
+          }
+          .ak-auth-view-wrapper.ak-auth-density-compact .ak-baui-button,
+          .ak-auth-view-wrapper.ak-auth-density-compact .ak-baui-input {
+            min-height: 2.8rem;
+          }
+
+          /*
+           * Minimal utility fallbacks for Better Auth UI internals that still
+           * rely on Tailwind-generated classes.
            */
           .ak-auth-view-wrapper .size-4 { width: 1rem; height: 1rem; }
           .ak-auth-view-wrapper .size-5 { width: 1.25rem; height: 1.25rem; }
@@ -156,13 +539,51 @@ export function AscendKitAuthCard(props) {
           .ak-auth-view-wrapper .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
           .ak-auth-view-wrapper .font-semibold { font-weight: 600; }
           .ak-auth-view-wrapper .rounded-md { border-radius: 0.375rem; }
+          .ak-auth-view-wrapper .rounded-xl { border-radius: 0.75rem; }
           .ak-auth-view-wrapper .rounded-lg { border-radius: 0.5rem; }
           .ak-auth-view-wrapper .min-w-0 { min-width: 0; }
           .ak-auth-view-wrapper .overflow-x-hidden { overflow-x: hidden; }
           .ak-auth-view-wrapper .text-center { text-align: center; }
           .ak-auth-view-wrapper .p-2 { padding: 0.5rem; }
           .ak-auth-view-wrapper .p-4 { padding: 1rem; }
+          .ak-auth-view-wrapper .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
           .ak-auth-view-wrapper .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+          .ak-auth-view-wrapper .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+          .ak-auth-view-wrapper .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
           .ak-auth-view-wrapper .h-9 { height: 2.25rem; }
+          .ak-auth-view-wrapper .border { border: 1px solid var(--border); }
+          .ak-auth-view-wrapper .bg-card { background: var(--card); }
+          .ak-auth-view-wrapper .bg-background { background: var(--background); }
+          .ak-auth-view-wrapper .text-card-foreground { color: var(--card-foreground); }
+          .ak-auth-view-wrapper .text-foreground { color: var(--foreground); }
+          .ak-auth-view-wrapper .text-muted-foreground { color: var(--muted-foreground); }
+          .ak-auth-view-wrapper .border-input { border-color: var(--input); }
+          .ak-auth-view-wrapper .shadow-sm,
+          .ak-auth-view-wrapper .shadow-xs { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
+
+          @media (max-width: 640px) {
+            .ak-auth-view-wrapper .ak-baui-card {
+              max-width: 100%;
+            }
+            .ak-auth-view-wrapper .ak-baui-header {
+              padding: 1.55rem 1.2rem 0;
+            }
+            .ak-auth-view-wrapper .ak-baui-content {
+              padding: 1.2rem 1.2rem 1.35rem;
+            }
+            .ak-auth-view-wrapper .ak-baui-footer {
+              padding: 0.2rem 1.2rem 1.35rem;
+              flex-wrap: wrap;
+            }
+            .ak-auth-view-wrapper .ak-baui-title {
+              font-size: 2rem;
+            }
+            .ak-auth-view-wrapper .ak-baui-description {
+              font-size: 0.95rem;
+            }
+            .ak-auth-view-wrapper .ak-baui-form {
+              padding: 1rem;
+            }
+          }
         ` })] }), _jsx(BrandingBadge, {})] }));
 }

package/dist/components/auth-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth-modal.d.ts","sourceRoot":"","sources":["../../src/components/auth-modal.tsx"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,wBAAgB,SAAS,4CA2HxB"}
+{"version":3,"file":"auth-modal.d.ts","sourceRoot":"","sources":["../../src/components/auth-modal.tsx"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,wBAAgB,SAAS,4CA2IxB"}

package/dist/components/auth-modal.js

@@ -49,61 +49,77 @@ export function AuthModal() {
           left: 50%;
           transform: translate(-50%, -50%);
           margin: 0;
-          border: none;
-          border-radius: 12px;
+          border: 1px solid rgba(255, 255, 255, 0.08);
+          border-radius: 28px;
           padding: 0;
-          max-width: 420px;
-          width: 90vw;
+          max-width: 560px;
+          width: min(92vw, 560px);
           max-height: 90vh;
           overflow-y: auto;
-          background: var(--ak-modal-bg, #fff);
-          color: var(--ak-modal-color, #1a1a1a);
-          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+          background:
+            linear-gradient(180deg, rgba(9, 12, 20, 0.98) 0%, rgba(4, 6, 13, 0.98) 100%);
+          color: var(--ak-modal-color, #f5f5f5);
+          box-shadow: 0 36px 120px rgba(0, 0, 0, 0.48);
           z-index: 9999;
         }
         .ak-auth-modal::backdrop {
-          background: rgba(0, 0, 0, 0.5);
-          backdrop-filter: blur(4px);
-          -webkit-backdrop-filter: blur(4px);
+          background: rgba(2, 6, 23, 0.72);
+          backdrop-filter: blur(14px);
+          -webkit-backdrop-filter: blur(14px);
         }
         .ak-auth-modal-content {
           position: relative;
-          padding: 32px 24px 24px;
+          padding: 28px 28px 22px;
         }
         .ak-auth-modal-close {
           position: absolute;
-          top: 12px;
-          right: 12px;
-          background: none;
-          border: none;
-          font-size: 18px;
+          top: 14px;
+          right: 14px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          background: rgba(255, 255, 255, 0.03);
+          border: 1px solid rgba(255, 255, 255, 0.08);
+          font-size: 22px;
           cursor: pointer;
-          color: var(--ak-modal-muted, #888);
+          color: var(--ak-modal-muted, rgba(255, 255, 255, 0.7));
           line-height: 1;
-          padding: 4px 8px;
-          border-radius: 4px;
+          padding: 0;
+          border-radius: 999px;
+          transition: background-color 0.15s, color 0.15s, transform 0.15s;
         }
         .ak-auth-modal-close:hover {
-          color: var(--ak-modal-color, #1a1a1a);
-          background: var(--ak-modal-hover-bg, rgba(0, 0, 0, 0.05));
+          color: var(--ak-modal-color, #fff);
+          background: var(--ak-modal-hover-bg, rgba(255, 255, 255, 0.08));
+          transform: translateY(-1px);
         }
 
         /* Dark mode: Tailwind class-based (html.dark) */
         :root.dark .ak-auth-modal,
         html.dark .ak-auth-modal {
-          --ak-modal-bg: #0a0a0a;
           --ak-modal-color: #f5f5f5;
-          --ak-modal-muted: #888;
-          --ak-modal-hover-bg: rgba(255, 255, 255, 0.1);
+          --ak-modal-muted: rgba(255, 255, 255, 0.7);
+          --ak-modal-hover-bg: rgba(255, 255, 255, 0.12);
         }
 
         /* Dark mode: system preference fallback */
         @media (prefers-color-scheme: dark) {
           .ak-auth-modal:not(.ak-light) {
-            --ak-modal-bg: #0a0a0a;
             --ak-modal-color: #f5f5f5;
-            --ak-modal-muted: #888;
-            --ak-modal-hover-bg: rgba(255, 255, 255, 0.1);
+            --ak-modal-muted: rgba(255, 255, 255, 0.7);
+            --ak-modal-hover-bg: rgba(255, 255, 255, 0.12);
+          }
+        }
+
+        @media (max-width: 640px) {
+          .ak-auth-modal {
+            width: min(94vw, 560px);
+            border-radius: 24px;
+          }
+          .ak-auth-modal-content {
+            padding: 18px 16px 14px;
           }
         }
       ` })] }));

package/dist/components/branding-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"branding-badge.d.ts","sourceRoot":"","sources":["../../src/components/branding-badge.tsx"],"names":[],"mappings":"AAIA,wBAAgB,aAAa,mDAgC5B"}
+{"version":3,"file":"branding-badge.d.ts","sourceRoot":"","sources":["../../src/components/branding-badge.tsx"],"names":[],"mappings":"AAIA,wBAAgB,aAAa,mDAqC5B"}

package/dist/components/branding-badge.js

@@ -7,10 +7,11 @@ export function BrandingBadge() {
         return null;
     return (_jsxs("div", { className: "ak-branding-badge", children: [_jsxs("a", { href: "https://ascendkit.dev?ref=auth", target: "_blank", rel: "noopener noreferrer", className: "ak-branding-link", children: ["Powered by ", _jsx("strong", { children: "AscendKit" })] }), _jsx("style", { children: `
         .ak-branding-badge {
-          margin-top: 12px;
+          margin-top: 16px;
           text-align: center;
           font-size: 12px;
-          color: var(--ak-muted-color, #888);
+          letter-spacing: 0.01em;
+          color: var(--ak-muted-color, rgba(148, 163, 184, 0.88));
         }
         .ak-branding-link {
           color: inherit;
@@ -19,5 +20,9 @@ export function BrandingBadge() {
         .ak-branding-link:hover {
           text-decoration: underline;
         }
+        .ak-branding-link strong {
+          font-weight: 700;
+          color: color-mix(in srgb, currentColor 82%, white);
+        }
       ` })] }));
 }

package/dist/shared/version.d.ts

@@ -1,2 +1,2 @@
-export declare const SDK_VERSION = "0.3.6";
+export declare const SDK_VERSION = "0.3.7";
 //# sourceMappingURL=version.d.ts.map

package/dist/shared/version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.3.6";
+export const SDK_VERSION = "0.3.7";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ascendkit/nextjs",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "AscendKit SDK for Next.js and React",
   "author": "ascendkit.dev",
   "license": "MIT",