@dravyn/auth-ui 0.1.1

package/dist/screens/RegisterScreen.js

@@ -0,0 +1,189 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/screens/RegisterScreen.tsx
+var RegisterScreen_exports = {};
+__export(RegisterScreen_exports, {
+  RegisterScreen: () => RegisterScreen
+});
+module.exports = __toCommonJS(RegisterScreen_exports);
+var import_react = __toESM(require("react"));
+var import_ui = require("@dravyn/ui");
+var import_ui2 = require("@dravyn/ui");
+var import_ui3 = require("@dravyn/ui");
+var RegisterScreen = ({
+  redirectTo = "/auth/verify",
+  onSuccess,
+  logo,
+  brandName = "Dravyn",
+  apiBase = process.env.NEXT_PUBLIC_AUTH_API_URL ?? "http://localhost:3001",
+  extraFields,
+  requireOTP = true
+}) => {
+  const [form, setForm] = import_react.default.useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+    confirm: ""
+  });
+  const [showPass, setShowPass] = import_react.default.useState(false);
+  const [loading, setLoading] = import_react.default.useState(false);
+  const [error, setError] = import_react.default.useState("");
+  const [fieldErrs, setFieldErrs] = import_react.default.useState({});
+  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
+  const validate = () => {
+    const errs = {};
+    if (!form.firstName.trim()) errs.firstName = "First name is required.";
+    if (!form.lastName.trim()) errs.lastName = "Last name is required.";
+    if (!form.email.trim()) errs.email = "Email is required.";
+    else if (!/\S+@\S+\.\S+/.test(form.email)) errs.email = "Enter a valid email.";
+    if (!form.password) errs.password = "Password is required.";
+    else if (form.password.length < 8) errs.password = "Password must be at least 8 characters.";
+    if (form.confirm !== form.password) errs.confirm = "Passwords do not match.";
+    return errs;
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const errs = validate();
+    if (Object.keys(errs).length) {
+      setFieldErrs(errs);
+      return;
+    }
+    setFieldErrs({});
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch(`${apiBase}/auth/register`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          firstName: form.firstName.trim(),
+          lastName: form.lastName.trim(),
+          email: form.email.trim().toLowerCase(),
+          password: form.password
+        })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.message ?? "Registration failed.");
+        return;
+      }
+      if (requireOTP) {
+        sessionStorage.setItem("dravyn_pending_email", form.email.trim().toLowerCase());
+        window.location.href = redirectTo;
+      } else {
+        localStorage.setItem("dravyn_token", data.accessToken);
+        localStorage.setItem("dravyn_user", JSON.stringify(data.user));
+        if (onSuccess) onSuccess(data.accessToken, data.user);
+        else window.location.href = redirectTo;
+      }
+    } catch {
+      setError("Unable to connect. Check your internet connection.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const EyeIcon = () => /* @__PURE__ */ import_react.default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }), /* @__PURE__ */ import_react.default.createElement("circle", { cx: "12", cy: "12", r: "3" }));
+  const EyeOffIcon = () => /* @__PURE__ */ import_react.default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }), /* @__PURE__ */ import_react.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" }));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-root" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-card" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-brand" }, logo ?? /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-logo-default" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "dauth-logo-dot" }), brandName)), /* @__PURE__ */ import_react.default.createElement("h1", { className: "dauth-title" }, "Create your account"), /* @__PURE__ */ import_react.default.createElement("p", { className: "dauth-sub" }, "Join ", brandName, " \u2014 it's free"), error && /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_ui3.Alert, { variant: "danger" }, error)), /* @__PURE__ */ import_react.default.createElement("form", { onSubmit: handleSubmit, noValidate: true }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-fields" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-row" }, /* @__PURE__ */ import_react.default.createElement(
+    import_ui2.Input,
+    {
+      label: "First name",
+      placeholder: "Jeremiah",
+      value: form.firstName,
+      onChange: set("firstName"),
+      error: fieldErrs.firstName,
+      required: true
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_ui2.Input,
+    {
+      label: "Last name",
+      placeholder: "Adeniyi",
+      value: form.lastName,
+      onChange: set("lastName"),
+      error: fieldErrs.lastName,
+      required: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(
+    import_ui2.Input,
+    {
+      label: "Email address",
+      type: "email",
+      placeholder: "you@example.com",
+      value: form.email,
+      onChange: set("email"),
+      error: fieldErrs.email,
+      autoComplete: "email",
+      required: true
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_ui2.Input,
+    {
+      label: "Password",
+      type: showPass ? "text" : "password",
+      placeholder: "Min. 8 characters",
+      value: form.password,
+      onChange: set("password"),
+      error: fieldErrs.password,
+      hint: !fieldErrs.password ? "At least 8 characters." : void 0,
+      rightIcon: /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "dauth-eye",
+          onClick: () => setShowPass((v) => !v),
+          "aria-label": showPass ? "Hide" : "Show"
+        },
+        showPass ? /* @__PURE__ */ import_react.default.createElement(EyeOffIcon, null) : /* @__PURE__ */ import_react.default.createElement(EyeIcon, null)
+      ),
+      autoComplete: "new-password",
+      required: true
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_ui2.Input,
+    {
+      label: "Confirm password",
+      type: showPass ? "text" : "password",
+      placeholder: "Re-enter your password",
+      value: form.confirm,
+      onChange: set("confirm"),
+      error: fieldErrs.confirm,
+      autoComplete: "new-password",
+      required: true
+    }
+  ), extraFields), /* @__PURE__ */ import_react.default.createElement(import_ui.Button, { type: "submit", variant: "primary", fullWidth: true, loading, style: { marginTop: 8 } }, "Create account")), /* @__PURE__ */ import_react.default.createElement("p", { className: "dauth-footer-text", style: { marginTop: 20 } }, "Already have an account?", " ", /* @__PURE__ */ import_react.default.createElement("a", { href: "/auth/login", className: "dauth-link" }, "Sign in")), /* @__PURE__ */ import_react.default.createElement("p", { className: "dauth-terms" }, "By creating an account you agree to our", " ", /* @__PURE__ */ import_react.default.createElement("a", { href: "/terms", className: "dauth-link" }, "Terms of Service"), " ", "and", " ", /* @__PURE__ */ import_react.default.createElement("a", { href: "/privacy", className: "dauth-link" }, "Privacy Policy"), ".")));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RegisterScreen
+});
+//# sourceMappingURL=RegisterScreen.js.map

package/dist/screens/RegisterScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/screens/RegisterScreen.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Button } from '@dravyn/ui';\nimport { Input }  from '@dravyn/ui';\nimport { Alert }  from '@dravyn/ui';\nimport './auth.css';\n\nexport interface RegisterScreenProps {\n  redirectTo?:     string;\n  onSuccess?:      (token: string, user: AuthUser) => void;\n  logo?:           React.ReactNode;\n  brandName?:      string;\n  apiBase?:        string;\n  /** Extra fields to collect — rendered after the core fields */\n  extraFields?:    React.ReactNode;\n  /** If true, redirect to OTP screen after register instead of auto-login */\n  requireOTP?:     boolean;\n}\n\ninterface AuthUser {\n  id: string; email: string; name: string;\n}\n\nexport const RegisterScreen: React.FC<RegisterScreenProps> = ({\n  redirectTo  = '/auth/verify',\n  onSuccess,\n  logo,\n  brandName   = 'Dravyn',\n  apiBase     = process.env.NEXT_PUBLIC_AUTH_API_URL ?? 'http://localhost:3001',\n  extraFields,\n  requireOTP  = true,\n}) => {\n  const [form, setForm] = React.useState({\n    firstName: '', lastName: '', email: '', password: '', confirm: '',\n  });\n  const [showPass,  setShowPass]  = React.useState(false);\n  const [loading,   setLoading]   = React.useState(false);\n  const [error,     setError]     = React.useState('');\n  const [fieldErrs, setFieldErrs] = React.useState<Record<string, string>>({});\n\n  const set = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) =>\n    setForm(f => ({ ...f, [k]: e.target.value }));\n\n  const validate = () => {\n    const errs: Record<string, string> = {};\n    if (!form.firstName.trim())          errs.firstName = 'First name is required.';\n    if (!form.lastName.trim())           errs.lastName  = 'Last name is required.';\n    if (!form.email.trim())              errs.email     = 'Email is required.';\n    else if (!/\\S+@\\S+\\.\\S+/.test(form.email)) errs.email = 'Enter a valid email.';\n    if (!form.password)                  errs.password  = 'Password is required.';\n    else if (form.password.length < 8)   errs.password  = 'Password must be at least 8 characters.';\n    if (form.confirm !== form.password)  errs.confirm   = 'Passwords do not match.';\n    return errs;\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    const errs = validate();\n    if (Object.keys(errs).length) { setFieldErrs(errs); return; }\n    setFieldErrs({});\n    setLoading(true);\n    setError('');\n\n    try {\n      const res = await fetch(`${apiBase}/auth/register`, {\n        method:  'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({\n          firstName: form.firstName.trim(),\n          lastName:  form.lastName.trim(),\n          email:     form.email.trim().toLowerCase(),\n          password:  form.password,\n        }),\n      });\n      const data = await res.json();\n      if (!res.ok) { setError(data.message ?? 'Registration failed.'); return; }\n\n      if (requireOTP) {\n        // Store email for OTP screen to use\n        sessionStorage.setItem('dravyn_pending_email', form.email.trim().toLowerCase());\n        window.location.href = redirectTo;\n      } else {\n        localStorage.setItem('dravyn_token', data.accessToken);\n        localStorage.setItem('dravyn_user',  JSON.stringify(data.user));\n        if (onSuccess) onSuccess(data.accessToken, data.user);\n        else window.location.href = redirectTo;\n      }\n    } catch {\n      setError('Unable to connect. Check your internet connection.');\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const EyeIcon    = () => <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>;\n  const EyeOffIcon = () => <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M9.88 9.88a3 3 0 1 0 4.24 4.24\"/><path d=\"M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68\"/><path d=\"M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61\"/><line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\"/></svg>;\n\n  return (\n    <div className=\"dauth-root\">\n      <div className=\"dauth-card\">\n        <div className=\"dauth-brand\">\n          {logo ?? <div className=\"dauth-logo-default\"><span className=\"dauth-logo-dot\" />{brandName}</div>}\n        </div>\n\n        <h1 className=\"dauth-title\">Create your account</h1>\n        <p className=\"dauth-sub\">Join {brandName} — it's free</p>\n\n        {error && <div style={{ marginBottom: 16 }}><Alert variant=\"danger\">{error}</Alert></div>}\n\n        <form onSubmit={handleSubmit} noValidate>\n          <div className=\"dauth-fields\">\n            <div className=\"dauth-row\">\n              <Input\n                label=\"First name\"\n                placeholder=\"Jeremiah\"\n                value={form.firstName}\n                onChange={set('firstName')}\n                error={fieldErrs.firstName}\n                required\n              />\n              <Input\n                label=\"Last name\"\n                placeholder=\"Adeniyi\"\n                value={form.lastName}\n                onChange={set('lastName')}\n                error={fieldErrs.lastName}\n                required\n              />\n            </div>\n\n            <Input\n              label=\"Email address\"\n              type=\"email\"\n              placeholder=\"you@example.com\"\n              value={form.email}\n              onChange={set('email')}\n              error={fieldErrs.email}\n              autoComplete=\"email\"\n              required\n            />\n\n            <Input\n              label=\"Password\"\n              type={showPass ? 'text' : 'password'}\n              placeholder=\"Min. 8 characters\"\n              value={form.password}\n              onChange={set('password')}\n              error={fieldErrs.password}\n              hint={!fieldErrs.password ? 'At least 8 characters.' : undefined}\n              rightIcon={\n                <button type=\"button\" className=\"dauth-eye\"\n                  onClick={() => setShowPass(v => !v)}\n                  aria-label={showPass ? 'Hide' : 'Show'}>\n                  {showPass ? <EyeOffIcon /> : <EyeIcon />}\n                </button>\n              }\n              autoComplete=\"new-password\"\n              required\n            />\n\n            <Input\n              label=\"Confirm password\"\n              type={showPass ? 'text' : 'password'}\n              placeholder=\"Re-enter your password\"\n              value={form.confirm}\n              onChange={set('confirm')}\n              error={fieldErrs.confirm}\n              autoComplete=\"new-password\"\n              required\n            />\n\n            {/* Slot for extra fields (university, department, etc.) */}\n            {extraFields}\n          </div>\n\n          <Button type=\"submit\" variant=\"primary\" fullWidth loading={loading} style={{ marginTop: 8 }}>\n            Create account\n          </Button>\n        </form>\n\n        <p className=\"dauth-footer-text\" style={{ marginTop: 20 }}>\n          Already have an account?{' '}\n          <a href=\"/auth/login\" className=\"dauth-link\">Sign in</a>\n        </p>\n\n        <p className=\"dauth-terms\">\n          By creating an account you agree to our{' '}\n          <a href=\"/terms\" className=\"dauth-link\">Terms of Service</a>{' '}\n          and{' '}\n          <a href=\"/privacy\" className=\"dauth-link\">Privacy Policy</a>.\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","names":["import_ui","React"]}

package/dist/screens/RegisterScreen.mjs

@@ -0,0 +1,9 @@
+"use client";
+import {
+  RegisterScreen
+} from "../chunk-35G4WYX3.mjs";
+import "../chunk-6BBGRN4E.mjs";
+export {
+  RegisterScreen
+};
+//# sourceMappingURL=RegisterScreen.mjs.map

package/dist/screens/RegisterScreen.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@dravyn/auth-ui",
+  "version": "0.1.1",
+  "description": "Dravyn Auth UI — Pre-built authentication screens for React/Next.js",
+  "author": "Durotoye Jeremiah Adeniyi <team@dravyn.it.com>",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./auth.css": "./src/screens/auth.css"
+  },
+  "files": [
+    "dist",
+    "src/screens/auth.css"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "@types/node": "^20.0.0",
+    "tsup": "^8.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}

package/src/screens/auth.css

@@ -0,0 +1,260 @@
+/*
+  Dravyn Auth UI — Styles
+  Consumes @dravyn/ui CSS custom properties.
+  Import tokens first: import 'dravyn-ui/tokens'
+  Then import this file once: import '@dravyn/auth-ui/auth.css'
+*/
+
+/* ── Root / centred layout ──────────────────────────────────────────────── */
+.dauth-root {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dui-bg, #0d0d0d);
+  padding: 24px 16px;
+  font-family: var(--dui-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+}
+
+/* ── Card ───────────────────────────────────────────────────────────────── */
+.dauth-card {
+  width: 100%;
+  max-width: 420px;
+  background: var(--dui-bg-raised, #161616);
+  border: 0.5px solid var(--dui-border-strong, rgba(255,255,255,0.16));
+  border-radius: 16px;
+  padding: 36px 32px 32px;
+  animation: dauth-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes dauth-in {
+  from { opacity: 0; transform: translateY(10px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0)    scale(1);    }
+}
+
+/* ── Brand / logo ───────────────────────────────────────────────────────── */
+.dauth-brand {
+  margin-bottom: 24px;
+}
+
+.dauth-logo-default {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--dui-text, #f0f0f0);
+  letter-spacing: -0.01em;
+}
+
+.dauth-logo-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--dui-teal-400, #4ecdc4);
+  flex-shrink: 0;
+}
+
+/* ── Headings ────────────────────────────────────────────────────────────── */
+.dauth-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--dui-text, #f0f0f0);
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  margin: 0 0 6px;
+}
+
+.dauth-sub {
+  font-size: 13.5px;
+  color: var(--dui-text-muted, #888);
+  line-height: 1.55;
+  margin: 0 0 22px;
+}
+
+/* ── Form fields ─────────────────────────────────────────────────────────── */
+.dauth-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-bottom: 14px;
+}
+
+.dauth-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+/* ── Password wrap (holds input + forgot link) ───────────────────────────── */
+.dauth-password-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.dauth-forgot {
+  font-size: 12px;
+  color: var(--dui-text-muted, #888);
+  text-decoration: none;
+  align-self: flex-end;
+  transition: color 0.15s;
+}
+
+.dauth-forgot:hover { color: var(--dui-teal-400, #4ecdc4); }
+
+/* ── Show/hide password button ───────────────────────────────────────────── */
+.dauth-eye {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--dui-text-hint, #555);
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  transition: color 0.15s;
+}
+.dauth-eye:hover { color: var(--dui-text-muted, #888); }
+
+/* ── Divider ─────────────────────────────────────────────────────────────── */
+.dauth-divider {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 18px 0;
+  color: var(--dui-text-hint, #555);
+  font-size: 12px;
+}
+.dauth-divider::before,
+.dauth-divider::after {
+  content: '';
+  flex: 1;
+  height: 0.5px;
+  background: var(--dui-border, rgba(255,255,255,0.07));
+}
+
+/* ── Google OAuth button ─────────────────────────────────────────────────── */
+.dauth-google-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background: transparent;
+  border: 0.5px solid var(--dui-border-strong, rgba(255,255,255,0.16));
+  border-radius: 8px;
+  padding: 10px 18px;
+  font-family: var(--dui-font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--dui-text, #f0f0f0);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+.dauth-google-btn:hover:not(:disabled) {
+  background: var(--dui-bg-overlay, #1e1e1e);
+  border-color: rgba(255,255,255,0.24);
+}
+.dauth-google-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ── OTP boxes ───────────────────────────────────────────────────────────── */
+.dauth-otp-icon {
+  font-size: 28px;
+  margin-bottom: 12px;
+  color: var(--dui-teal-400, #4ecdc4);
+}
+
+.dauth-otp-boxes {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin: 20px 0 8px;
+}
+
+.dauth-otp-box {
+  width: 46px;
+  height: 54px;
+  background: var(--dui-bg, #0d0d0d);
+  border: 0.5px solid var(--dui-border-strong, rgba(255,255,255,0.16));
+  border-radius: 8px;
+  color: var(--dui-text, #f0f0f0);
+  font-size: 22px;
+  font-weight: 700;
+  font-family: var(--dui-font-sans);
+  text-align: center;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  caret-color: var(--dui-teal-400, #4ecdc4);
+}
+
+.dauth-otp-box:focus {
+  border-color: var(--dui-teal-400, #4ecdc4);
+  box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.12);
+}
+
+.dauth-otp-box--filled {
+  border-color: var(--dui-teal-400, #4ecdc4);
+  background: rgba(78, 205, 196, 0.04);
+}
+
+/* ── Resend row ──────────────────────────────────────────────────────────── */
+.dauth-resend {
+  text-align: center;
+  font-size: 13px;
+  color: var(--dui-text-muted, #888);
+  margin: 14px 0 4px;
+}
+
+/* ── Links ───────────────────────────────────────────────────────────────── */
+.dauth-link {
+  color: var(--dui-teal-400, #4ecdc4);
+  text-decoration: none;
+  font-weight: 500;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  padding: 0;
+  transition: opacity 0.15s;
+}
+.dauth-link:hover { opacity: 0.8; }
+
+/* ── Footer text + terms ─────────────────────────────────────────────────── */
+.dauth-footer-text {
+  text-align: center;
+  font-size: 13px;
+  color: var(--dui-text-muted, #888);
+  margin-top: 18px;
+}
+
+.dauth-terms {
+  text-align: center;
+  font-size: 11.5px;
+  color: var(--dui-text-hint, #555);
+  margin-top: 12px;
+  line-height: 1.6;
+}
+
+/* ── CSS variable aliases (readable names inside auth components) ─────────── */
+:root {
+  --dauth-text:  var(--dui-text,       #f0f0f0);
+  --dauth-muted: var(--dui-text-muted, #888888);
+  --dauth-teal:  var(--dui-teal-400,   #4ecdc4);
+  --dauth-green: #22c55e;
+  --dauth-label: var(--dui-text-muted, #888888);
+}
+
+/* ── Label helper (used in ResetPasswordScreen) ───────────────────────────── */
+.dauth-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--dauth-label);
+}
+
+/* ── Responsive ──────────────────────────────────────────────────────────── */
+@media (max-width: 480px) {
+  .dauth-card { padding: 28px 20px 24px; }
+  .dauth-row  { grid-template-columns: 1fr; }
+  .dauth-otp-box { width: 40px; height: 48px; font-size: 20px; }
+}