@draftlab/auth 0.0.3 → 0.1.0

package/dist/themes/theme.js

@@ -1,3 +1,120 @@
-import { THEME_DRAFTAUTH, THEME_SST, THEME_SUPABASE, THEME_TERMINAL, THEME_VERCEL, getTheme, setTheme } from "../theme-CswaLtbW.js";
+//#region src/themes/theme.ts
+/**
+* Built-in default Draft Auth theme.
+*/
+const 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');
+  `
+};
+/**
+* Built-in theme based on [Terminal](https://terminal.shop).
+*/
+const THEME_TERMINAL = {
+	title: "terminal",
+	radius: "none",
+	favicon: "https://www.terminal.shop/favicon.svg",
+	logo: {
+		dark: "https://www.terminal.shop/images/logo-white.svg",
+		light: "https://www.terminal.shop/images/logo-black.svg"
+	},
+	primary: "#ff5e00",
+	background: {
+		dark: "rgb(0, 0, 0)",
+		light: "rgb(255, 255, 255)"
+	},
+	font: { family: "Geist Mono, monospace" },
+	css: `
+    @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100;200;300;400;500;600;700;800;900&display=swap');
+  `
+};
+/**
+* Built-in theme based on [SST](https://sst.dev).
+*/
+const THEME_SST = {
+	title: "SST",
+	favicon: "https://sst.dev/favicon.svg",
+	logo: {
+		dark: "https://sst.dev/favicon.svg",
+		light: "https://sst.dev/favicon.svg"
+	},
+	background: {
+		dark: "#1a1a2d",
+		light: "rgb(255, 255, 255)"
+	},
+	primary: "#f3663f",
+	font: { family: "Rubik, sans-serif" },
+	css: `
+    @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@100;200;300;400;500;600;700;800;900&display=swap');
+  `
+};
+/**
+* Built-in theme based on [Supabase](https://supabase.com).
+*/
+const THEME_SUPABASE = {
+	title: "Supabase",
+	logo: {
+		dark: "https://supabase.com/dashboard/_next/image?url=%2Fdashboard%2Fimg%2Fsupabase-dark.svg&w=128&q=75",
+		light: "https://supabase.com/dashboard/_next/image?url=%2Fdashboard%2Fimg%2Fsupabase-light.svg&w=128&q=75"
+	},
+	background: {
+		dark: "#171717",
+		light: "#f8f8f8"
+	},
+	primary: {
+		dark: "#006239",
+		light: "#72e3ad"
+	},
+	font: { family: "Varela Round, sans-serif" },
+	css: `
+    @import url('https://fonts.googleapis.com/css2?family=Varela+Round:wght@100;200;300;400;500;600;700;800;900&display=swap');
+  `
+};
+/**
+* Built-in theme based on [Vercel](https://vercel.com).
+*/
+const THEME_VERCEL = {
+	title: "Vercel",
+	logo: {
+		dark: "https://vercel.com/mktng/_next/static/media/vercel-logotype-dark.e8c0a742.svg",
+		light: "https://vercel.com/mktng/_next/static/media/vercel-logotype-light.700a8d26.svg"
+	},
+	background: {
+		dark: "black",
+		light: "white"
+	},
+	primary: {
+		dark: "white",
+		light: "black"
+	},
+	font: { family: "Geist, sans-serif" },
+	css: `
+    @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap');
+  `
+};
+/**
+* @internal
+*/
+const setTheme = (value) => {
+	globalThis.DRAFTAUTH_THEME = value;
+};
+/**
+* @internal
+*/
+const getTheme = () => {
+	return globalThis.DRAFTAUTH_THEME || THEME_DRAFTAUTH;
+};
 
+//#endregion
 export { THEME_DRAFTAUTH, THEME_SST, THEME_SUPABASE, THEME_TERMINAL, THEME_VERCEL, getTheme, setTheme };

package/dist/ui/base.d.ts

@@ -1,43 +1,30 @@
+import { Theme } from "../themes/theme.js";
+import * as preact4 from "preact";
+import { ComponentChildren } from "preact";
+
 //#region src/ui/base.d.ts
-type PropsWithChildren<P = {}> = P & {
-  children?: string;
-};
+
 /**
- * Base layout component for Draft Auth UI.
- * Provides theming, responsive design, and consistent styling across all auth screens.
- *
- * ## Features
- *
- * - **Theme Support**: Light/dark mode with custom colors and fonts
- * - **Responsive Design**: Adapts to different screen sizes
- * - **Custom Branding**: Support for custom logos and styling
- * - **CSS Variables**: Uses CSS custom properties for theming
- *
- * @example
- * ```tsx
- * <Layout size="small">
- *   <div>Your auth form content</div>
- * </Layout>
- * ```
- */
-/**
- * Props for the Layout component.
+ * Props for the Layout component
  */
 interface LayoutProps {
-  /**
-   * Optional size variant for the layout container.
-   *
-   * @default undefined (normal size)
-   */
-  readonly size?: "small";
+  children: ComponentChildren;
+  theme?: Theme;
+  title?: string;
+  size?: "small";
 }
 /**
- * Main layout component that wraps all authentication UI screens.
- * Handles theming, logo display, and provides consistent styling.
- *
- * @param props - Layout props including children and optional size
- * @returns Complete HTML document as a string with theming and branding applied
+ * Base Layout component that provides the foundational structure for all auth UIs
+ */
+declare const Layout: ({
+  children,
+  theme,
+  title,
+  size
+}: LayoutProps) => preact4.JSX.Element;
+/**
+ * Helper function to render a Preact component to HTML string
  */
-declare const Layout: (props: PropsWithChildren<LayoutProps>) => string;
+declare const renderToHTML: (component: ComponentChildren) => string;
 //#endregion
-export { Layout, LayoutProps };
+export { Layout, LayoutProps, renderToHTML };

package/dist/ui/base.js

@@ -1,4 +1,389 @@
-import "../theme-CswaLtbW.js";
-import { Layout } from "../base-DRutbxgL.js";
+import { getTheme } from "../themes/theme.js";
+import { render } from "preact-render-to-string";
+import { jsx, jsxs } from "preact/jsx-runtime";
 
-export { Layout };
+//#region src/ui/base.tsx
+const css = `@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-component="center"][data-size="small"] {
+	width: 300px;
+}
+
+[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-component="button"][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-component="button"] [data-slot="icon"] {
+	width: 16px;
+	height: 16px;
+}
+
+[data-component="button"] [data-slot="icon"] svg {
+	width: 100%;
+	height: 100%;
+}
+
+[data-component="form"] {
+	max-width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin: 0;
+}
+
+[data-component="input"] {
+	height: 2.5rem;
+	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
+		);
+	border-radius: calc(var(--border-radius) * 0.25rem);
+	background: var(--color-background);
+	color: var(--color-high);
+	padding: 0 0.75rem;
+	font-size: var(--font-size-sm);
+	font-family: var(--font-family);
+}
+
+[data-component="input"]:focus {
+	outline: none;
+	border-color: var(--color-primary);
+}
+
+[data-component="input"]::placeholder {
+	color: oklch(
+		from var(--color-high) 
+		l 
+		c 
+		h / 
+		0.6
+	);
+}
+
+[data-component="form-alert"] {
+	padding: 0.75rem;
+	border-radius: calc(var(--border-radius) * 0.25rem);
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	font-size: var(--font-size-sm);
+}
+
+[data-component="form-alert"][data-color="danger"] {
+	background: var(--color-background-error);
+	color: var(--color-error);
+	border: 1px solid var(--color-error);
+}
+
+[data-component="form-alert"][data-color="success"] {
+	background: var(--color-background-success);
+	color: var(--color-success);
+	border: 1px solid var(--color-success);
+}
+
+[data-component="form-alert"] [data-slot="icon-success"] {
+	display: none;
+}
+
+[data-component="form-alert"] [data-slot="icon-danger"] {
+	display: none;
+}
+
+[data-component="form-alert"][data-color="success"] [data-slot="icon-success"] {
+	display: block;
+	width: 16px;
+	height: 16px;
+}
+
+[data-component="form-alert"][data-color="danger"] [data-slot="icon-danger"] {
+	display: block;
+	width: 16px;
+	height: 16px;
+}
+
+[data-component="link"] {
+	color: var(--color-primary);
+	text-decoration: none;
+	font-size: var(--font-size-sm);
+}
+
+[data-component="link"]:hover {
+	text-decoration: underline;
+}
+
+[data-component="form-footer"] {
+	display: flex;
+	gap: 1rem;
+	font-size: 0.75rem;
+	align-items: center;
+	justify-content: center;
+}
+
+[data-component="form-footer"]:has(> :nth-child(2)) {
+	justify-content: space-between;
+}
+
+[data-component="logo-default"] {
+	margin: 0 auto;
+	height: 2.5rem;
+	width: auto;
+}
+
+@media (prefers-color-scheme: light) {
+	[data-component="logo-default"] {
+		color: var(--color-high);
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	[data-component="logo-default"] {
+		color: var(--color-high);
+	}
+}
+`;
+/**
+* Base Layout component that provides the foundational structure for all auth UIs
+*/
+const Layout = ({ children, theme, title, size }) => {
+	const currentTheme = theme || getTheme();
+	/**
+	* Gets a theme value for a specific key and color mode.
+	*/
+	const getThemeValue = (key, mode) => {
+		if (!currentTheme?.[key]) return;
+		if (typeof currentTheme[key] === "string") return currentTheme[key];
+		return currentTheme[key][mode];
+	};
+	/**
+	* Calculates border radius value based on theme configuration.
+	*/
+	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";
+		}
+	};
+	/**
+	* Checks if both light and dark logo variants are available.
+	*/
+	const hasCustomLogo = Boolean(getThemeValue("logo", "light") && getThemeValue("logo", "dark"));
+	/**
+	* CSS custom properties for theming.
+	*/
+	const themeStyles = [
+		`--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()}`
+	].join("; ");
+	const faviconHtml = currentTheme?.favicon ? `<link href="${currentTheme.favicon}" rel="icon" />` : `
+			<link href="https://openauth.js.org/favicon.ico" rel="icon" sizes="48x48" />
+			<link href="https://openauth.js.org/favicon.svg" media="(prefers-color-scheme: light)" rel="icon" />
+			<link href="https://openauth.js.org/favicon-dark.svg" media="(prefers-color-scheme: dark)" rel="icon" />
+			<link href="https://openauth.js.org/favicon.svg" rel="shortcut icon" type="image/svg+xml" />
+		  `;
+	const logoHtml = hasCustomLogo ? `
+			<img
+				alt="Logo Light"
+				data-component="logo"
+				data-mode="light"
+				src="${getThemeValue("logo", "light") || ""}"
+			/>
+			<img
+				alt="Logo Dark"
+				data-component="logo"
+				data-mode="dark"
+				src="${getThemeValue("logo", "dark") || ""}"
+			/>
+		  ` : `
+			<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"
+			>
+				<title>Draft Auth Logo</title>
+				<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"
+				/>
+			</svg>
+		  `;
+	return /* @__PURE__ */ jsxs("html", {
+		lang: "en",
+		style: themeStyles,
+		children: [/* @__PURE__ */ jsxs("head", { children: [
+			/* @__PURE__ */ jsx("title", { children: title || currentTheme?.title || "Draft Auth" }),
+			/* @__PURE__ */ jsx("meta", { charset: "utf-8" }),
+			/* @__PURE__ */ jsx("meta", {
+				content: "width=device-width, initial-scale=1",
+				name: "viewport"
+			}),
+			/* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: faviconHtml } }),
+			/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: css } }),
+			currentTheme?.css && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: currentTheme.css } })
+		] }), /* @__PURE__ */ jsx("body", { children: /* @__PURE__ */ jsx("div", {
+			"data-component": "root",
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-component": "center",
+				"data-size": size || "",
+				children: [/* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: logoHtml } }), children]
+			})
+		}) })]
+	});
+};
+/**
+* Helper function to render a Preact component to HTML string
+*/
+const renderToHTML = (component) => {
+	if (!component) return "";
+	return render(component);
+};
+
+//#endregion
+export { Layout, renderToHTML };