@dravyn/auth-ui 0.1.1

package/dist/screens/ForgotResetScreen.js

@@ -0,0 +1,245 @@
+"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/ForgotResetScreen.tsx
+var ForgotResetScreen_exports = {};
+__export(ForgotResetScreen_exports, {
+  ForgotPasswordScreen: () => ForgotPasswordScreen,
+  ResetPasswordScreen: () => ResetPasswordScreen
+});
+module.exports = __toCommonJS(ForgotResetScreen_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 ForgotPasswordScreen = ({
+  logo,
+  brandName = "Dravyn",
+  apiBase = process.env.NEXT_PUBLIC_AUTH_API_URL ?? "http://localhost:3001"
+}) => {
+  const [email, setEmail] = import_react.default.useState("");
+  const [loading, setLoading] = import_react.default.useState(false);
+  const [error, setError] = import_react.default.useState("");
+  const [sent, setSent] = import_react.default.useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!email.trim()) {
+      setError("Email address is required.");
+      return;
+    }
+    if (!/\S+@\S+\.\S+/.test(email)) {
+      setError("Enter a valid email address.");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch(`${apiBase}/auth/forgot-password`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: email.trim().toLowerCase() })
+      });
+      if (res.ok || res.status === 404) {
+        sessionStorage.setItem("dravyn_reset_email", email.trim().toLowerCase());
+        setSent(true);
+      } else {
+        const d = await res.json();
+        setError(d.message ?? "Something went wrong. Try again.");
+      }
+    } catch {
+      setError("Unable to connect.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (sent) {
+    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("div", { className: "dauth-otp-icon" }, "\u2713"), /* @__PURE__ */ import_react.default.createElement("h1", { className: "dauth-title" }, "Check your inbox"), /* @__PURE__ */ import_react.default.createElement("p", { className: "dauth-sub" }, "If ", /* @__PURE__ */ import_react.default.createElement("strong", { style: { color: "var(--dauth-text)" } }, email), " is registered, you'll receive a reset code shortly."), /* @__PURE__ */ import_react.default.createElement(
+      import_ui.Button,
+      {
+        variant: "primary",
+        fullWidth: true,
+        style: { marginTop: 20 },
+        onClick: () => window.location.href = "/auth/reset-password"
+      },
+      "Enter reset code"
+    ), /* @__PURE__ */ import_react.default.createElement("p", { className: "dauth-footer-text" }, /* @__PURE__ */ import_react.default.createElement("a", { href: "/auth/login", className: "dauth-link" }, "Back to sign in"))));
+  }
+  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" }, "Reset your password"), /* @__PURE__ */ import_react.default.createElement("p", { className: "dauth-sub" }, "Enter your email and we'll send you a reset code."), error && /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 14 } }, /* @__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(
+    import_ui2.Input,
+    {
+      label: "Email address",
+      type: "email",
+      placeholder: "you@example.com",
+      value: email,
+      onChange: (e) => setEmail(e.target.value),
+      autoComplete: "email",
+      required: true
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(import_ui.Button, { type: "submit", variant: "primary", fullWidth: true, loading, style: { marginTop: 8 } }, "Send reset code")), /* @__PURE__ */ import_react.default.createElement("p", { className: "dauth-footer-text" }, "Remember it?", " ", /* @__PURE__ */ import_react.default.createElement("a", { href: "/auth/login", className: "dauth-link" }, "Back to sign in"))));
+};
+var ResetPasswordScreen = ({
+  logo,
+  brandName = "Dravyn",
+  apiBase = process.env.NEXT_PUBLIC_AUTH_API_URL ?? "http://localhost:3001",
+  redirectTo = "/auth/login"
+}) => {
+  const email = typeof sessionStorage !== "undefined" ? sessionStorage.getItem("dravyn_reset_email") ?? "" : "";
+  const [otp, setOtp] = import_react.default.useState(["", "", "", "", "", ""]);
+  const [password, setPassword] = import_react.default.useState("");
+  const [confirm, setConfirm] = import_react.default.useState("");
+  const [showPass, setShowPass] = import_react.default.useState(false);
+  const [loading, setLoading] = import_react.default.useState(false);
+  const [error, setError] = import_react.default.useState("");
+  const [done, setDone] = import_react.default.useState(false);
+  const inputRefs = import_react.default.useRef([]);
+  const handleOtpInput = (i, val) => {
+    if (val.length > 1) {
+      const digits = val.replace(/\D/g, "").slice(0, 6).split("");
+      const next2 = [...otp];
+      digits.forEach((d, idx) => {
+        if (idx < 6) next2[idx] = d;
+      });
+      setOtp(next2);
+      inputRefs.current[Math.min(digits.length, 5)]?.focus();
+      return;
+    }
+    const digit = val.replace(/\D/g, "");
+    const next = [...otp];
+    next[i] = digit;
+    setOtp(next);
+    if (digit && i < 5) inputRefs.current[i + 1]?.focus();
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const code = otp.join("");
+    if (code.length < 6) {
+      setError("Enter the complete 6-digit code.");
+      return;
+    }
+    if (!password) {
+      setError("Enter a new password.");
+      return;
+    }
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters.");
+      return;
+    }
+    if (password !== confirm) {
+      setError("Passwords do not match.");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch(`${apiBase}/auth/reset-password`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, otp: code, newPassword: password })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.message ?? "Reset failed. Check the code and try again.");
+        return;
+      }
+      sessionStorage.removeItem("dravyn_reset_email");
+      setDone(true);
+    } catch {
+      setError("Unable to connect.");
+    } 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" }));
+  if (done) {
+    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-otp-icon", style: { color: "var(--dauth-green)" } }, "\u2713"), /* @__PURE__ */ import_react.default.createElement("h1", { className: "dauth-title" }, "Password reset!"), /* @__PURE__ */ import_react.default.createElement("p", { className: "dauth-sub" }, "Your password has been updated. You can now sign in."), /* @__PURE__ */ import_react.default.createElement(
+      import_ui.Button,
+      {
+        variant: "primary",
+        fullWidth: true,
+        style: { marginTop: 20 },
+        onClick: () => window.location.href = redirectTo
+      },
+      "Sign in"
+    )));
+  }
+  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" }, "Set new password"), /* @__PURE__ */ import_react.default.createElement("p", { className: "dauth-sub" }, "Enter the code we sent you and choose a new password."), error && /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 14 } }, /* @__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", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-label" }, "Reset code"), /* @__PURE__ */ import_react.default.createElement("div", { className: "dauth-otp-boxes", style: { marginTop: 6 } }, otp.map((d, i) => /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      key: i,
+      ref: (el) => {
+        inputRefs.current[i] = el;
+      },
+      className: `dauth-otp-box ${d ? "dauth-otp-box--filled" : ""}`,
+      type: "text",
+      inputMode: "numeric",
+      maxLength: 6,
+      value: d,
+      onChange: (e) => handleOtpInput(i, e.target.value),
+      onKeyDown: (e) => {
+        if (e.key === "Backspace" && !d && i > 0) inputRefs.current[i - 1]?.focus();
+      },
+      "aria-label": `Digit ${i + 1}`
+    }
+  )))), /* @__PURE__ */ import_react.default.createElement(
+    import_ui2.Input,
+    {
+      label: "New password",
+      type: showPass ? "text" : "password",
+      placeholder: "Min. 8 characters",
+      value: password,
+      onChange: (e) => setPassword(e.target.value),
+      rightIcon: /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "dauth-eye",
+          onClick: () => setShowPass((v) => !v)
+        },
+        showPass ? /* @__PURE__ */ import_react.default.createElement(EyeOffIcon, null) : /* @__PURE__ */ import_react.default.createElement(EyeIcon, null)
+      )
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_ui2.Input,
+    {
+      label: "Confirm new password",
+      type: showPass ? "text" : "password",
+      placeholder: "Re-enter password",
+      value: confirm,
+      onChange: (e) => setConfirm(e.target.value)
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(import_ui.Button, { type: "submit", variant: "primary", fullWidth: true, loading, style: { marginTop: 8 } }, "Reset password"))));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ForgotPasswordScreen,
+  ResetPasswordScreen
+});
+//# sourceMappingURL=ForgotResetScreen.js.map

package/dist/screens/ForgotResetScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/screens/ForgotResetScreen.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\n// ── ForgotPasswordScreen ──────────────────────────────────────────────────────\n\nexport interface ForgotPasswordScreenProps {\n  logo?:      React.ReactNode;\n  brandName?: string;\n  apiBase?:   string;\n}\n\nexport const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = ({\n  logo,\n  brandName = 'Dravyn',\n  apiBase   = process.env.NEXT_PUBLIC_AUTH_API_URL ?? 'http://localhost:3001',\n}) => {\n  const [email,   setEmail]   = React.useState('');\n  const [loading, setLoading] = React.useState(false);\n  const [error,   setError]   = React.useState('');\n  const [sent,    setSent]    = React.useState(false);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!email.trim()) { setError('Email address is required.'); return; }\n    if (!/\\S+@\\S+\\.\\S+/.test(email)) { setError('Enter a valid email address.'); return; }\n\n    setLoading(true);\n    setError('');\n    try {\n      const res = await fetch(`${apiBase}/auth/forgot-password`, {\n        method:  'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body:    JSON.stringify({ email: email.trim().toLowerCase() }),\n      });\n      // Always show success — don't reveal if email exists\n      if (res.ok || res.status === 404) {\n        sessionStorage.setItem('dravyn_reset_email', email.trim().toLowerCase());\n        setSent(true);\n      } else {\n        const d = await res.json();\n        setError(d.message ?? 'Something went wrong. Try again.');\n      }\n    } catch {\n      setError('Unable to connect.');\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  if (sent) {\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          <div className=\"dauth-otp-icon\">✓</div>\n          <h1 className=\"dauth-title\">Check your inbox</h1>\n          <p className=\"dauth-sub\">\n            If <strong style={{ color: 'var(--dauth-text)' }}>{email}</strong> is\n            registered, you'll receive a reset code shortly.\n          </p>\n          <Button\n            variant=\"primary\"\n            fullWidth\n            style={{ marginTop: 20 }}\n            onClick={() => window.location.href = '/auth/reset-password'}\n          >\n            Enter reset code\n          </Button>\n          <p className=\"dauth-footer-text\">\n            <a href=\"/auth/login\" className=\"dauth-link\">Back to sign in</a>\n          </p>\n        </div>\n      </div>\n    );\n  }\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\">Reset your password</h1>\n        <p className=\"dauth-sub\">\n          Enter your email and we'll send you a reset code.\n        </p>\n\n        {error && <div style={{ marginBottom: 14 }}><Alert variant=\"danger\">{error}</Alert></div>}\n\n        <form onSubmit={handleSubmit} noValidate>\n          <div className=\"dauth-fields\">\n            <Input\n              label=\"Email address\"\n              type=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              autoComplete=\"email\"\n              required\n            />\n          </div>\n          <Button type=\"submit\" variant=\"primary\" fullWidth loading={loading} style={{ marginTop: 8 }}>\n            Send reset code\n          </Button>\n        </form>\n\n        <p className=\"dauth-footer-text\">\n          Remember it?{' '}\n          <a href=\"/auth/login\" className=\"dauth-link\">Back to sign in</a>\n        </p>\n      </div>\n    </div>\n  );\n};\n\n// ── ResetPasswordScreen ───────────────────────────────────────────────────────\n\nexport interface ResetPasswordScreenProps {\n  logo?:       React.ReactNode;\n  brandName?:  string;\n  apiBase?:    string;\n  redirectTo?: string;\n}\n\nexport const ResetPasswordScreen: React.FC<ResetPasswordScreenProps> = ({\n  logo,\n  brandName  = 'Dravyn',\n  apiBase    = process.env.NEXT_PUBLIC_AUTH_API_URL ?? 'http://localhost:3001',\n  redirectTo = '/auth/login',\n}) => {\n  const email = typeof sessionStorage !== 'undefined'\n    ? sessionStorage.getItem('dravyn_reset_email') ?? '' : '';\n\n  const [otp,      setOtp]      = React.useState(['', '', '', '', '', '']);\n  const [password, setPassword] = React.useState('');\n  const [confirm,  setConfirm]  = React.useState('');\n  const [showPass, setShowPass] = React.useState(false);\n  const [loading,  setLoading]  = React.useState(false);\n  const [error,    setError]    = React.useState('');\n  const [done,     setDone]     = React.useState(false);\n  const inputRefs = React.useRef<(HTMLInputElement | null)[]>([]);\n\n  const handleOtpInput = (i: number, val: string) => {\n    if (val.length > 1) {\n      const digits = val.replace(/\\D/g, '').slice(0, 6).split('');\n      const next = [...otp];\n      digits.forEach((d, idx) => { if (idx < 6) next[idx] = d; });\n      setOtp(next);\n      inputRefs.current[Math.min(digits.length, 5)]?.focus();\n      return;\n    }\n    const digit = val.replace(/\\D/g, '');\n    const next = [...otp]; next[i] = digit; setOtp(next);\n    if (digit && i < 5) inputRefs.current[i + 1]?.focus();\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    const code = otp.join('');\n    if (code.length < 6)         { setError('Enter the complete 6-digit code.'); return; }\n    if (!password)               { setError('Enter a new password.'); return; }\n    if (password.length < 8)     { setError('Password must be at least 8 characters.'); return; }\n    if (password !== confirm)    { setError('Passwords do not match.'); return; }\n\n    setLoading(true);\n    setError('');\n    try {\n      const res = await fetch(`${apiBase}/auth/reset-password`, {\n        method:  'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body:    JSON.stringify({ email, otp: code, newPassword: password }),\n      });\n      const data = await res.json();\n      if (!res.ok) { setError(data.message ?? 'Reset failed. Check the code and try again.'); return; }\n      sessionStorage.removeItem('dravyn_reset_email');\n      setDone(true);\n    } catch {\n      setError('Unable to connect.');\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  if (done) {\n    return (\n      <div className=\"dauth-root\">\n        <div className=\"dauth-card\">\n          <div className=\"dauth-otp-icon\" style={{ color: 'var(--dauth-green)' }}>✓</div>\n          <h1 className=\"dauth-title\">Password reset!</h1>\n          <p className=\"dauth-sub\">Your password has been updated. You can now sign in.</p>\n          <Button variant=\"primary\" fullWidth style={{ marginTop: 20 }}\n            onClick={() => window.location.href = redirectTo}>\n            Sign in\n          </Button>\n        </div>\n      </div>\n    );\n  }\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\">Set new password</h1>\n        <p className=\"dauth-sub\">Enter the code we sent you and choose a new password.</p>\n\n        {error && <div style={{ marginBottom: 14 }}><Alert variant=\"danger\">{error}</Alert></div>}\n\n        <form onSubmit={handleSubmit} noValidate>\n          {/* OTP row */}\n          <div className=\"dauth-fields\">\n            <div>\n              <div className=\"dauth-label\">Reset code</div>\n              <div className=\"dauth-otp-boxes\" style={{ marginTop: 6 }}>\n                {otp.map((d, i) => (\n                  <input key={i}\n                    ref={el => { inputRefs.current[i] = el; }}\n                    className={`dauth-otp-box ${d ? 'dauth-otp-box--filled' : ''}`}\n                    type=\"text\" inputMode=\"numeric\" maxLength={6}\n                    value={d} onChange={e => handleOtpInput(i, e.target.value)}\n                    onKeyDown={e => { if (e.key === 'Backspace' && !d && i > 0) inputRefs.current[i-1]?.focus(); }}\n                    aria-label={`Digit ${i + 1}`}\n                  />\n                ))}\n              </div>\n            </div>\n\n            <Input\n              label=\"New password\"\n              type={showPass ? 'text' : 'password'}\n              placeholder=\"Min. 8 characters\"\n              value={password}\n              onChange={e => setPassword(e.target.value)}\n              rightIcon={\n                <button type=\"button\" className=\"dauth-eye\"\n                  onClick={() => setShowPass(v => !v)}>\n                  {showPass ? <EyeOffIcon /> : <EyeIcon />}\n                </button>\n              }\n            />\n            <Input\n              label=\"Confirm new password\"\n              type={showPass ? 'text' : 'password'}\n              placeholder=\"Re-enter password\"\n              value={confirm}\n              onChange={e => setConfirm(e.target.value)}\n            />\n          </div>\n\n          <Button type=\"submit\" variant=\"primary\" fullWidth loading={loading} style={{ marginTop: 8 }}>\n            Reset password\n          </Button>\n        </form>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","names":["import_ui","React","next"]}

package/dist/screens/ForgotResetScreen.mjs

@@ -0,0 +1,11 @@
+"use client";
+import {
+  ForgotPasswordScreen,
+  ResetPasswordScreen
+} from "../chunk-FAI3ERB3.mjs";
+import "../chunk-6BBGRN4E.mjs";
+export {
+  ForgotPasswordScreen,
+  ResetPasswordScreen
+};
+//# sourceMappingURL=ForgotResetScreen.mjs.map

package/dist/screens/ForgotResetScreen.mjs.map

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

package/dist/screens/LoginScreen.css

@@ -0,0 +1,235 @@
+/* src/screens/auth.css */
+.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);
+}
+.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);
+  }
+}
+.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;
+}
+.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;
+}
+.dauth-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-bottom: 14px;
+}
+.dauth-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.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);
+}
+.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);
+}
+.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));
+}
+.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;
+}
+.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);
+}
+.dauth-resend {
+  text-align: center;
+  font-size: 13px;
+  color: var(--dui-text-muted, #888);
+  margin: 14px 0 4px;
+}
+.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;
+}
+.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;
+}
+: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);
+}
+.dauth-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--dauth-label);
+}
+@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;
+  }
+}
+/*# sourceMappingURL=LoginScreen.css.map */

package/dist/screens/LoginScreen.css.map

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

package/dist/screens/LoginScreen.d.mts

@@ -0,0 +1,36 @@
+import React from 'react';
+
+/**
+ * Dravyn Auth — LoginScreen
+ * Drop this into any Next.js / React project.
+ * Requires: @dravyn/ui (or dravyn-ui) and @dravyn/auth-js
+ *
+ * Usage (Next.js App Router):
+ *   import { LoginScreen } from '@dravyn/auth-ui'
+ *   export default function LoginPage() {
+ *     return <LoginScreen redirectTo="/dashboard" />
+ *   }
+ */
+
+interface LoginScreenProps {
+    /** Where to send the user after a successful login */
+    redirectTo?: string;
+    /** Show / hide the "Create account" link */
+    showRegisterLink?: boolean;
+    /** Called with the JWT on success — use this OR redirectTo */
+    onSuccess?: (token: string, user: AuthUser) => void;
+    /** Override the logo node */
+    logo?: React.ReactNode;
+    /** Your brand name shown in the UI */
+    brandName?: string;
+    /** API base URL — defaults to NEXT_PUBLIC_AUTH_API_URL env var */
+    apiBase?: string;
+}
+interface AuthUser {
+    id: string;
+    email: string;
+    name: string;
+}
+declare const LoginScreen: React.FC<LoginScreenProps>;
+
+export { LoginScreen, type LoginScreenProps };

package/dist/screens/LoginScreen.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+
+/**
+ * Dravyn Auth — LoginScreen
+ * Drop this into any Next.js / React project.
+ * Requires: @dravyn/ui (or dravyn-ui) and @dravyn/auth-js
+ *
+ * Usage (Next.js App Router):
+ *   import { LoginScreen } from '@dravyn/auth-ui'
+ *   export default function LoginPage() {
+ *     return <LoginScreen redirectTo="/dashboard" />
+ *   }
+ */
+
+interface LoginScreenProps {
+    /** Where to send the user after a successful login */
+    redirectTo?: string;
+    /** Show / hide the "Create account" link */
+    showRegisterLink?: boolean;
+    /** Called with the JWT on success — use this OR redirectTo */
+    onSuccess?: (token: string, user: AuthUser) => void;
+    /** Override the logo node */
+    logo?: React.ReactNode;
+    /** Your brand name shown in the UI */
+    brandName?: string;
+    /** API base URL — defaults to NEXT_PUBLIC_AUTH_API_URL env var */
+    apiBase?: string;
+}
+interface AuthUser {
+    id: string;
+    email: string;
+    name: string;
+}
+declare const LoginScreen: React.FC<LoginScreenProps>;
+
+export { LoginScreen, type LoginScreenProps };