@_mustachio/openauth 0.6.0

package/dist/esm/ui/base.js

@@ -0,0 +1,407 @@
+// 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;
+  }
+}
+`;
+
+// src/ui/theme.ts
+var THEME_OPENAUTH = {
+  title: "OpenAuth",
+  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');
+  `
+};
+function getTheme() {
+  return globalThis.OPENAUTH_THEME || THEME_OPENAUTH;
+}
+
+// src/ui/base.tsx
+import { jsxDEV, Fragment } from "hono/jsx/jsx-dev-runtime";
+function Layout(props) {
+  const theme = getTheme();
+  function get(key, mode) {
+    if (!theme)
+      return;
+    if (!theme[key])
+      return;
+    if (typeof theme[key] === "string")
+      return theme[key];
+    return theme[key][mode];
+  }
+  const radius = (() => {
+    if (theme?.radius === "none")
+      return "0";
+    if (theme?.radius === "sm")
+      return "1";
+    if (theme?.radius === "md")
+      return "1.25";
+    if (theme?.radius === "lg")
+      return "1.5";
+    if (theme?.radius === "full")
+      return "1000000000001";
+    return "1";
+  })();
+  const hasLogo = get("logo", "light") && get("logo", "dark");
+  return /* @__PURE__ */ jsxDEV("html", {
+    style: {
+      "--color-background-light": get("background", "light"),
+      "--color-background-dark": get("background", "dark"),
+      "--color-primary-light": get("primary", "light"),
+      "--color-primary-dark": get("primary", "dark"),
+      "--font-family": theme?.font?.family,
+      "--font-scale": theme?.font?.scale,
+      "--border-radius": radius
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV("head", {
+        children: [
+          /* @__PURE__ */ jsxDEV("title", {
+            children: theme?.title || "OpenAuthJS"
+          }, 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),
+          theme?.favicon ? /* @__PURE__ */ jsxDEV("link", {
+            rel: "icon",
+            href: theme?.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),
+          theme?.css && /* @__PURE__ */ jsxDEV("style", {
+            dangerouslySetInnerHTML: { __html: theme.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: [
+              hasLogo ? /* @__PURE__ */ jsxDEV(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsxDEV("img", {
+                    "data-component": "logo",
+                    src: get("logo", "light"),
+                    "data-mode": "light"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("img", {
+                    "data-component": "logo",
+                    src: get("logo", "dark"),
+                    "data-mode": "dark"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this) : ICON_OPENAUTH,
+              props.children
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+var ICON_OPENAUTH = /* @__PURE__ */ jsxDEV("svg", {
+  "data-component": "logo-default",
+  width: "51",
+  height: "51",
+  viewBox: "0 0 51 51",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /* @__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, false, undefined, this);
+export {
+  Layout
+};

package/dist/esm/ui/code.js

@@ -0,0 +1,151 @@
+// src/ui/code.tsx
+import { UnknownStateError } from "../error.js";
+import { Layout } from "./base.js";
+import { FormAlert } from "./form.js";
+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"
+};
+function CodeUI(props) {
+  const copy = {
+    ...DEFAULT_COPY,
+    ...props.copy
+  };
+  const mode = props.mode ?? "email";
+  return {
+    sendCode: props.sendCode,
+    length: 6,
+    request: async (_req, state, _form, error) => {
+      if (state.type === "start") {
+        const jsx = /* @__PURE__ */ jsxDEV(Layout, {
+          children: [
+            /* @__PURE__ */ jsxDEV("form", {
+              "data-component": "form",
+              method: "post",
+              children: [
+                error?.type === "invalid_claim" && /* @__PURE__ */ jsxDEV(FormAlert, {
+                  message: copy.email_invalid
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("input", {
+                  type: "hidden",
+                  name: "action",
+                  value: "request"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("input", {
+                  "data-component": "input",
+                  autofocus: true,
+                  type: mode === "email" ? "email" : "tel",
+                  name: mode === "email" ? "email" : "phone",
+                  inputmode: mode === "email" ? "email" : "numeric",
+                  required: true,
+                  placeholder: copy.email_placeholder
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("button", {
+                  "data-component": "button",
+                  children: copy.button_continue
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV("p", {
+              "data-component": "form-footer",
+              children: copy.code_info
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this);
+        return new Response(jsx.toString(), {
+          headers: {
+            "Content-Type": "text/html"
+          }
+        });
+      }
+      if (state.type === "code") {
+        const jsx = /* @__PURE__ */ jsxDEV(Layout, {
+          children: [
+            /* @__PURE__ */ jsxDEV("form", {
+              "data-component": "form",
+              class: "form",
+              method: "post",
+              children: [
+                error?.type === "invalid_code" && /* @__PURE__ */ jsxDEV(FormAlert, {
+                  message: copy.code_invalid
+                }, undefined, false, undefined, this),
+                state.type === "code" && /* @__PURE__ */ jsxDEV(FormAlert, {
+                  message: (state.resend ? copy.code_resent : copy.code_sent) + state.claims.email,
+                  color: "success"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("input", {
+                  type: "hidden",
+                  name: "action",
+                  value: "verify"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("input", {
+                  "data-component": "input",
+                  autofocus: true,
+                  minLength: 6,
+                  maxLength: 6,
+                  type: "text",
+                  name: "code",
+                  required: true,
+                  inputmode: "numeric",
+                  autocomplete: "one-time-code",
+                  placeholder: copy.code_placeholder
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("button", {
+                  "data-component": "button",
+                  children: copy.button_continue
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV("form", {
+              method: "post",
+              children: [
+                Object.entries(state.claims).map(([key, value]) => /* @__PURE__ */ jsxDEV("input", {
+                  type: "hidden",
+                  name: key,
+                  value,
+                  className: "hidden"
+                }, key, false, undefined, this)),
+                /* @__PURE__ */ jsxDEV("input", {
+                  type: "hidden",
+                  name: "action",
+                  value: "resend"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("div", {
+                  "data-component": "form-footer",
+                  children: /* @__PURE__ */ jsxDEV("span", {
+                    children: [
+                      copy.code_didnt_get,
+                      " ",
+                      /* @__PURE__ */ jsxDEV("button", {
+                        "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,43 @@
+// src/ui/form.tsx
+import { jsxDEV } from "hono/jsx/jsx-dev-runtime";
+function FormAlert(props) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-component": "form-alert",
+    "data-color": props.color,
+    children: [
+      /* @__PURE__ */ jsxDEV("svg", {
+        "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", {
+        "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: props.message
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  FormAlert
+};