@draftlab/auth 0.15.0 → 0.16.0

package/dist/esm/ui/base.js

@@ -0,0 +1,478 @@
+// src/themes/theme.ts
+var THEME_DRAFTAUTH = {
+  title: "Draft Auth",
+  radius: "none",
+  background: {
+    dark: "black",
+    light: "white"
+  },
+  primary: {
+    dark: "white",
+    light: "black"
+  },
+  font: {
+    family: "IBM Plex Sans, sans-serif"
+  },
+  css: `
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');
+  `
+};
+var getTheme = () => {
+  return globalThis.DRAFTAUTH_THEME || THEME_DRAFTAUTH;
+};
+
+// src/ui/ui.css
+var ui_default = `@import url("https://unpkg.com/tailwindcss@3.4.15/src/css/preflight.css");
+
+:root {
+	--color-background-dark: #0e0e11;
+	--color-background-light: #ffffff;
+	--color-primary-dark: #6772e5;
+	--color-primary-light: #6772e5;
+
+	--color-background-success-dark: oklch(0.3 0.04 172);
+	--color-background-success-light: oklch(
+		from var(--color-background-success-dark) 0.83 c h
+	);
+	--color-success-dark: oklch(
+		from var(--color-background-success-dark) 0.92 c h
+	);
+	--color-success-light: oklch(
+		from var(--color-background-success-dark) 0.25 c h
+	);
+
+	--color-background-error-dark: oklch(0.32 0.07 15);
+	--color-background-error-light: oklch(
+		from var(--color-background-error-dark) 0.92 c h
+	);
+	--color-error-dark: oklch(from var(--color-background-error-dark) 0.92 c h);
+	--color-error-light: oklch(from var(--color-background-error-dark) 0.25 c h);
+
+	--border-radius: 0;
+
+	--color-background: var(--color-background-dark);
+	--color-primary: var(--color-primary-dark);
+
+	--color-background-success: var(--color-background-success-dark);
+	--color-success: var(--color-success-dark);
+	--color-background-error: var(--color-background-error-dark);
+	--color-error: var(--color-error-dark);
+
+	@media (prefers-color-scheme: light) {
+		--color-background: var(--color-background-light);
+		--color-primary: var(--color-primary-light);
+
+		--color-background-success: var(--color-background-success-light);
+		--color-success: var(--color-success-light);
+		--color-background-error: var(--color-background-error-light);
+		--color-error: var(--color-error-light);
+	}
+
+	--color-high: oklch(
+		from var(--color-background) clamp(0, calc((l - 0.714) * -1000), 1) 0 0
+	);
+	--color-low: oklch(
+		from var(--color-background) clamp(0, calc((l - 0.714) * 1000), 1) 0 0
+	);
+	--lightness-high: color-mix(
+		in oklch,
+		var(--color-high) 0%,
+		oklch(var(--color-high) 0 0)
+	);
+	--lightness-low: color-mix(
+		in oklch,
+		var(--color-low) 0%,
+		oklch(var(--color-low) 0 0)
+	);
+	--font-family:
+		ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+		"Segoe UI Symbol", "Noto Color Emoji";
+	--font-scale: 1;
+
+	--font-size-xs: calc(0.75rem * var(--font-scale));
+	--font-size-sm: calc(0.875rem * var(--font-scale));
+	--font-size-md: calc(1rem * var(--font-scale));
+	--font-size-lg: calc(1.125rem * var(--font-scale));
+	--font-size-xl: calc(1.25rem * var(--font-scale));
+	--font-size-2xl: calc(1.5rem * var(--font-scale));
+}
+
+[data-component="root"] {
+	font-family: var(--font-family);
+	background-color: var(--color-background);
+	padding: 1rem;
+	color: white;
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	user-select: none;
+	color: var(--color-high);
+}
+
+[data-component="center"] {
+	width: 380px;
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+
+	&[data-size="small"] {
+		width: 300px;
+	}
+}
+
+[data-component="link"] {
+	text-decoration: underline;
+	text-underline-offset: 0.125rem;
+	font-weight: 600;
+}
+
+[data-component="label"] {
+	display: flex;
+	gap: 0.75rem;
+	flex-direction: column;
+	font-size: var(--font-size-xs);
+}
+
+[data-component="logo"] {
+	margin: 0 auto;
+	height: 2.5rem;
+	width: auto;
+	display: none;
+
+	@media (prefers-color-scheme: light) {
+		&[data-mode="light"] {
+			display: block;
+		}
+	}
+
+	@media (prefers-color-scheme: dark) {
+		&[data-mode="dark"] {
+			display: block;
+		}
+	}
+}
+
+[data-component="logo-default"] {
+	margin: 0 auto;
+	height: 2.5rem;
+	width: auto;
+
+	@media (prefers-color-scheme: light) {
+		color: var(--color-high);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		color: var(--color-high);
+	}
+}
+
+[data-component="input"] {
+	width: 100%;
+	height: 2.5rem;
+	padding: 0 1rem;
+	border: 1px solid transparent;
+	--background: oklch(
+		from var(--color-background)
+			calc(l + (-0.06 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.03)) c h
+	);
+	background: var(--background);
+	border-color: oklch(
+		from var(--color-background)
+			calc(
+				clamp(
+					0.22,
+					l +
+					(-0.12 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.06),
+					0.88
+				)
+			)
+			c h
+	);
+	border-radius: calc(var(--border-radius) * 0.25rem);
+	font-size: var(--font-size-sm);
+	outline: none;
+
+	&:focus {
+		border-color: oklch(
+			from var(--color-background)
+				calc(
+					clamp(
+						0.3,
+						l +
+						(-0.2 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.1),
+						0.7
+					)
+				)
+				c h
+		);
+	}
+
+	&:user-invalid:not(:focus) {
+		border-color: oklch(0.4 0.09 7.91);
+	}
+}
+
+[data-component="button"] {
+	height: 2.5rem;
+	cursor: pointer;
+	border: 0;
+	font-weight: 500;
+	font-size: var(--font-size-sm);
+	border-radius: calc(var(--border-radius) * 0.25rem);
+	display: flex;
+	gap: 0.75rem;
+	align-items: center;
+	justify-content: center;
+	background: var(--color-primary);
+	color: oklch(
+		from var(--color-primary) clamp(0, calc((l - 0.714) * -1000), 1) 0 0
+	);
+
+	&[data-color="ghost"] {
+		background: transparent;
+		color: var(--color-high);
+		border: 1px solid
+			oklch(
+				from var(--color-background)
+					calc(
+						clamp(
+							0.22,
+							l +
+							(-0.12 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.06),
+							0.88
+						)
+					)
+					c h
+			);
+	}
+
+	[data-slot="icon"] {
+		width: 16px;
+		height: 16px;
+
+		svg {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+
+[data-component="form"] {
+	max-width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin: 0;
+}
+
+[data-component="form-alert"] {
+	height: 2.5rem;
+	display: flex;
+	align-items: center;
+	padding: 0 1rem;
+	border-radius: calc(var(--border-radius) * 0.25rem);
+	background: var(--color-background-error);
+	color: var(--color-error);
+	text-align: left;
+	font-size: 0.75rem;
+	gap: 0.5rem;
+
+	&[data-color="success"] {
+		background: var(--color-background-success);
+		color: var(--color-success);
+
+		[data-slot="icon-success"] {
+			display: block;
+		}
+		[data-slot="icon-danger"] {
+			display: none;
+		}
+	}
+
+	&:has([data-slot="message"]:empty) {
+		display: none;
+	}
+
+	[data-slot="icon-success"],
+	[data-slot="icon-danger"] {
+		width: 1rem;
+		height: 1rem;
+	}
+	[data-slot="icon-success"] {
+		display: none;
+	}
+}
+
+[data-component="form-footer"] {
+	display: flex;
+	gap: 1rem;
+	font-size: 0.75rem;
+	align-items: center;
+	justify-content: center;
+
+	&:has(> :nth-child(2)) {
+		justify-content: space-between;
+	}
+}
+
+[data-component="title"] {
+	font-size: var(--font-size-2xl);
+	font-weight: 600;
+	margin: 0 0 0.5rem 0;
+	color: var(--color-high);
+	text-align: center;
+}
+
+[data-component="description"] {
+	font-size: var(--font-size-sm);
+	color: var(--color-high);
+	margin: 0 0 1.5rem 0;
+	text-align: center;
+	opacity: 0.8;
+}
+`;
+
+// src/ui/base.tsx
+import { jsxDEV, Fragment } from "hono/jsx/jsx-dev-runtime";
+var ICON_DRAFTAUTH = /* @__PURE__ */ jsxDEV("svg", {
+  "aria-label": "Draft Auth Logo",
+  "data-component": "logo-default",
+  fill: "none",
+  height: "51",
+  viewBox: "0 0 51 51",
+  width: "51",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [
+    /* @__PURE__ */ jsxDEV("title", {
+      children: "Draft Auth Logo"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("path", {
+      d: "M0 50.2303V0.12854H50.1017V50.2303H0ZM3.08002 11.8326H11.7041V3.20856H3.08002V11.8326ZM14.8526 11.8326H23.4766V3.20856H14.8526V11.8326ZM26.5566 11.8326H35.1807V3.20856H26.5566V11.8326ZM38.3292 11.8326H47.0217V3.20856H38.3292V11.8326ZM3.08002 23.6052H11.7041V14.9811H3.08002V23.6052ZM14.8526 23.6052H23.4766V14.9811H14.8526V23.6052ZM26.5566 23.6052H35.1807V14.9811H26.5566V23.6052ZM38.3292 23.6052H47.0217V14.9811H38.3292V23.6052ZM3.08002 35.3092H11.7041V26.6852H3.08002V35.3092ZM14.8526 35.3092H23.4766V26.6852H14.8526V35.3092ZM26.5566 35.3092H35.1807V26.6852H26.5566V35.3092ZM38.3292 35.3092H47.0217V26.6852H38.3292V35.3092ZM3.08002 47.1502H11.7041V38.3893H3.08002V47.1502ZM14.8526 47.1502H23.4766V38.3893H14.8526V47.1502ZM26.5566 47.1502H35.1807V38.3893H26.5566V47.1502ZM38.3292 47.1502H47.0217V38.3893H38.3292V47.1502Z",
+      fill: "currentColor"
+    }, undefined, false, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+var Layout = (props) => {
+  const currentTheme = props.theme || getTheme();
+  const getThemeValue = (key, mode) => {
+    if (!currentTheme?.[key]) {
+      return;
+    }
+    if (typeof currentTheme[key] === "string") {
+      return currentTheme[key];
+    }
+    return currentTheme[key][mode];
+  };
+  const getBorderRadius = () => {
+    switch (currentTheme?.radius) {
+      case "none":
+        return "0";
+      case "sm":
+        return "1";
+      case "md":
+        return "1.25";
+      case "lg":
+        return "1.5";
+      case "full":
+        return "1000000000001";
+      default:
+        return "1";
+    }
+  };
+  const hasCustomLogo = Boolean(getThemeValue("logo", "light") && getThemeValue("logo", "dark"));
+  return /* @__PURE__ */ jsxDEV("html", {
+    lang: "en",
+    style: {
+      "--color-background-light": getThemeValue("background", "light"),
+      "--color-background-dark": getThemeValue("background", "dark"),
+      "--color-primary-light": getThemeValue("primary", "light"),
+      "--color-primary-dark": getThemeValue("primary", "dark"),
+      "--font-family": currentTheme?.font?.family,
+      "--font-scale": currentTheme?.font?.scale,
+      "--border-radius": getBorderRadius()
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV("head", {
+        children: [
+          /* @__PURE__ */ jsxDEV("title", {
+            children: props.title || currentTheme?.title || "Draft Auth"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("meta", {
+            charset: "utf-8"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("meta", {
+            name: "viewport",
+            content: "width=device-width, initial-scale=1"
+          }, undefined, false, undefined, this),
+          currentTheme?.favicon ? /* @__PURE__ */ jsxDEV("link", {
+            rel: "icon",
+            href: currentTheme.favicon
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Fragment, {
+            children: [
+              /* @__PURE__ */ jsxDEV("link", {
+                rel: "icon",
+                href: "https://openauth.js.org/favicon.ico",
+                sizes: "48x48"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("link", {
+                rel: "icon",
+                href: "https://openauth.js.org/favicon.svg",
+                media: "(prefers-color-scheme: light)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("link", {
+                rel: "icon",
+                href: "https://openauth.js.org/favicon-dark.svg",
+                media: "(prefers-color-scheme: dark)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("link", {
+                rel: "shortcut icon",
+                href: "https://openauth.js.org/favicon.svg",
+                type: "image/svg+xml"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("style", {
+            dangerouslySetInnerHTML: { __html: ui_default }
+          }, undefined, false, undefined, this),
+          currentTheme?.css && /* @__PURE__ */ jsxDEV("style", {
+            dangerouslySetInnerHTML: { __html: currentTheme.css }
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("body", {
+        children: /* @__PURE__ */ jsxDEV("div", {
+          "data-component": "root",
+          children: /* @__PURE__ */ jsxDEV("div", {
+            "data-component": "center",
+            "data-size": props.size,
+            children: [
+              hasCustomLogo ? /* @__PURE__ */ jsxDEV(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsxDEV("img", {
+                    "data-component": "logo",
+                    src: getThemeValue("logo", "light"),
+                    "data-mode": "light",
+                    alt: "Logo Light"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("img", {
+                    "data-component": "logo",
+                    src: getThemeValue("logo", "dark"),
+                    "data-mode": "dark",
+                    alt: "Logo Dark"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this) : ICON_DRAFTAUTH,
+              props.children
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+export {
+  Layout
+};

package/dist/esm/ui/code.js

@@ -0,0 +1,186 @@
+// src/ui/code.tsx
+import { UnknownStateError } from "../error";
+import { run } from "../util";
+import { Layout } from "./base";
+import { FormAlert } from "./form";
+import { jsxDEV } from "hono/jsx/jsx-dev-runtime";
+var DEFAULT_COPY = {
+  email_placeholder: "Email",
+  email_invalid: "Email address is not valid",
+  button_continue: "Continue",
+  code_info: "We'll send a pin code to your email.",
+  code_placeholder: "Code",
+  code_invalid: "Invalid code",
+  code_sent: "Code sent to ",
+  code_resent: "Code resent to ",
+  code_didnt_get: "Didn't get code?",
+  code_resend: "Resend"
+};
+var getErrorMessage = (error, copy) => {
+  if (!error?.type)
+    return;
+  switch (error.type) {
+    case "invalid_code":
+      return copy.code_invalid;
+    case "invalid_claim":
+      return copy.email_invalid;
+  }
+};
+var getSuccessMessage = (state, copy) => {
+  if (state.type === "start" || !state.claims)
+    return;
+  const contact = state.claims.email || state.claims.phone || "";
+  const prefix = state.resend ? copy.code_resent : copy.code_sent;
+  return {
+    message: `${prefix}${contact}`,
+    contact
+  };
+};
+var CodeUI = (options) => {
+  const copy = {
+    ...DEFAULT_COPY,
+    ...options.copy
+  };
+  const mode = options.mode || "email";
+  return {
+    sendCode: options.sendCode,
+    request: async (_req, state, form, error) => {
+      if (state.type === "start") {
+        const success = getSuccessMessage(state || { type: "start" }, copy);
+        const jsx = /* @__PURE__ */ jsxDEV(Layout, {
+          children: /* @__PURE__ */ jsxDEV("form", {
+            "data-component": "form",
+            method: "post",
+            children: [
+              run(() => {
+                if (success) {
+                  return /* @__PURE__ */ jsxDEV(FormAlert, {
+                    message: success.message,
+                    color: "success"
+                  }, undefined, false, undefined, this);
+                }
+                return /* @__PURE__ */ jsxDEV(FormAlert, {
+                  message: getErrorMessage(error, copy)
+                }, undefined, false, undefined, this);
+              }),
+              /* @__PURE__ */ jsxDEV("input", {
+                "data-component": "input",
+                type: mode === "email" ? "email" : "tel",
+                name: mode,
+                placeholder: copy.email_placeholder,
+                value: form?.get(mode)?.toString() || "",
+                autoComplete: mode,
+                required: true
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("input", {
+                type: "hidden",
+                name: "action",
+                value: "request"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("button", {
+                "data-component": "button",
+                type: "submit",
+                children: copy.button_continue
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                "data-component": "description",
+                children: copy.code_info
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this);
+        return new Response(jsx.toString(), {
+          headers: {
+            "Content-Type": "text/html"
+          }
+        });
+      }
+      if (state.type === "code") {
+        const success = getSuccessMessage(state, copy);
+        const contact = state.type === "code" ? state.claims?.[mode] || "" : "";
+        const jsx = /* @__PURE__ */ jsxDEV(Layout, {
+          children: [
+            /* @__PURE__ */ jsxDEV("form", {
+              "data-component": "form",
+              method: "post",
+              children: [
+                run(() => {
+                  if (success) {
+                    return /* @__PURE__ */ jsxDEV(FormAlert, {
+                      message: success.message,
+                      color: "success"
+                    }, undefined, false, undefined, this);
+                  }
+                  return /* @__PURE__ */ jsxDEV(FormAlert, {
+                    message: getErrorMessage(error, copy)
+                  }, undefined, false, undefined, this);
+                }),
+                /* @__PURE__ */ jsxDEV("input", {
+                  name: "action",
+                  type: "hidden",
+                  value: "verify"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("input", {
+                  "data-component": "input",
+                  type: "text",
+                  name: "code",
+                  placeholder: copy.code_placeholder,
+                  "aria-label": "6-digit verification code",
+                  autoComplete: "one-time-code",
+                  inputMode: "numeric",
+                  maxLength: 6,
+                  minLength: 6,
+                  pattern: "[0-9]{6}",
+                  required: true
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("button", {
+                  "data-component": "button",
+                  type: "submit",
+                  children: copy.button_continue
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV("form", {
+              method: "post",
+              children: [
+                /* @__PURE__ */ jsxDEV("input", {
+                  name: "action",
+                  type: "hidden",
+                  value: "resend"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("input", {
+                  name: mode,
+                  type: "hidden",
+                  value: contact
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("div", {
+                  "data-component": "form-footer",
+                  children: /* @__PURE__ */ jsxDEV("span", {
+                    children: [
+                      copy.code_didnt_get,
+                      " ",
+                      /* @__PURE__ */ jsxDEV("button", {
+                        type: "submit",
+                        "data-component": "link",
+                        children: copy.code_resend
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this);
+        return new Response(jsx.toString(), {
+          headers: {
+            "Content-Type": "text/html"
+          }
+        });
+      }
+      throw new UnknownStateError;
+    }
+  };
+};
+export {
+  CodeUI
+};

package/dist/esm/ui/form.js

@@ -0,0 +1,46 @@
+// src/ui/form.tsx
+import { jsxDEV } from "hono/jsx/jsx-dev-runtime";
+function FormAlert(props) {
+  const { message, color = "danger" } = props;
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-component": "form-alert",
+    "data-color": color,
+    children: [
+      /* @__PURE__ */ jsxDEV("svg", {
+        "aria-hidden": "true",
+        "data-slot": "icon-success",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        "stroke-width": "1.5",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ jsxDEV("path", {
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          d: "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("svg", {
+        "aria-hidden": "true",
+        "data-slot": "icon-danger",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        "stroke-width": "1.5",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ jsxDEV("path", {
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        "data-slot": "message",
+        children: message
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  FormAlert
+};