@draftlab/auth 0.0.4 → 0.1.1

package/dist/error.d.ts

@@ -10,7 +10,7 @@
  *   InvalidAuthorizationCodeError,
  *   OauthError,
  *   UnknownStateError
- * } from "@draftauth/core/error"
+ * } from "@draftlab/auth/error"
  *
  * try {
  *   await client.exchange(code, redirectUri)

package/dist/provider/code.d.ts

@@ -67,8 +67,8 @@ interface CodeProviderConfig<Claims extends Record<string, string> = Record<stri
    *     } else {
    *       return {
    *         type: "invalid_claim",
-   *         key: "contact",
-   *         value: "No email or phone provided"
+   *         key: "email",
+   *         value: "Email or phone number is required"
    *       }
    *     }
    *   } catch (error) {
@@ -152,7 +152,15 @@ interface CodeUserData<Claims extends Record<string, string> = Record<string, st
  *       }
  *     }
  *
- *     await emailService.send(claims.email, `Your verification code: ${code}`)
+ *     try {
+ *       await emailService.send(claims.email, `Your verification code: ${code}`)
+ *     } catch {
+ *       return {
+ *         type: "invalid_claim",
+ *         key: "delivery",
+ *         value: "Failed to send code"
+ *       }
+ *     }
  *   }
  * })
  *
@@ -168,15 +176,23 @@ interface CodeUserData<Claims extends Record<string, string> = Record<string, st
  *     }
  *   },
  *   sendCode: async (claims, code) => {
- *     if (claims.email) {
- *       await emailService.send(claims.email, `PIN: ${code}`)
- *     } else if (claims.phone) {
- *       await smsService.send(claims.phone, `PIN: ${code}`)
- *     } else {
+ *     try {
+ *       if (claims.email) {
+ *         await emailService.send(claims.email, `PIN: ${code}`)
+ *       } else if (claims.phone) {
+ *         await smsService.send(claims.phone, `PIN: ${code}`)
+ *       } else {
+ *         return {
+ *           type: "invalid_claim",
+ *           key: "email",
+ *           value: "Provide either email or phone number"
+ *         }
+ *       }
+ *     } catch {
  *       return {
  *         type: "invalid_claim",
- *         key: "contact",
- *         value: "Provide either email or phone number"
+ *         key: "delivery",
+ *         value: "Failed to send code"
  *       }
  *     }
  *   }

package/dist/provider/code.js

@@ -30,7 +30,15 @@ import { generateUnbiasedDigits, timingSafeCompare } from "../random.js";
 *       }
 *     }
 *
-*     await emailService.send(claims.email, `Your verification code: ${code}`)
+*     try {
+*       await emailService.send(claims.email, `Your verification code: ${code}`)
+*     } catch {
+*       return {
+*         type: "invalid_claim",
+*         key: "delivery",
+*         value: "Failed to send code"
+*       }
+*     }
 *   }
 * })
 *
@@ -46,15 +54,23 @@ import { generateUnbiasedDigits, timingSafeCompare } from "../random.js";
 *     }
 *   },
 *   sendCode: async (claims, code) => {
-*     if (claims.email) {
-*       await emailService.send(claims.email, `PIN: ${code}`)
-*     } else if (claims.phone) {
-*       await smsService.send(claims.phone, `PIN: ${code}`)
-*     } else {
+*     try {
+*       if (claims.email) {
+*         await emailService.send(claims.email, `PIN: ${code}`)
+*       } else if (claims.phone) {
+*         await smsService.send(claims.phone, `PIN: ${code}`)
+*       } else {
+*         return {
+*           type: "invalid_claim",
+*           key: "email",
+*           value: "Provide either email or phone number"
+*         }
+*       }
+*     } catch {
 *       return {
 *         type: "invalid_claim",
-*         key: "contact",
-*         value: "Provide either email or phone number"
+*         key: "delivery",
+*         value: "Failed to send code"
 *       }
 *     }
 *   }
@@ -124,18 +140,15 @@ const CodeProvider = (config) => {
 						claims,
 						code
 					}, formData);
-				}
-				if (action === "verify" && currentState?.type === "code") {
+				} else if (action === "verify" && currentState?.type === "code") {
 					const enteredCode = formData.get("code")?.toString();
 					if (!(currentState.code && enteredCode && timingSafeCompare(currentState.code, enteredCode))) return transition(c, {
 						...currentState,
 						resend: false
 					}, formData, { type: "invalid_code" });
 					await ctx.unset(c, "provider");
-					const successResponse = await ctx.success(c, { claims: currentState.claims });
-					return ctx.forward(c, successResponse);
+					return await ctx.success(c, { claims: currentState.claims });
 				}
-				return transition(c, { type: "start" }, formData);
 			});
 		}
 	};

package/dist/provider/password.d.ts

@@ -10,8 +10,8 @@ import { StandardSchemaV1 } from "@standard-schema/spec";
  * ## Quick Setup
  *
  * ```ts
- * import { PasswordUI } from "@draftauth/core/ui/password"
- * import { PasswordProvider } from "@draftauth/core/provider/password"
+ * import { PasswordUI } from "@draftlab/auth/ui/password"
+ * import { PasswordProvider } from "@draftlab/auth/provider/password"
  *
  * export default issuer({
  *   providers: {

package/dist/storage/memory.d.ts

@@ -9,7 +9,7 @@ import { StorageAdapter } from "./storage.js";
  *
  * ### Basic in-memory storage (development only)
  * ```ts
- * import { MemoryStorage } from "@draftauth/core/storage/memory"
+ * import { MemoryStorage } from "@draftlab/auth/storage/memory"
  *
  * const storage = MemoryStorage()
  *

package/dist/storage/unstorage.d.ts

@@ -13,7 +13,7 @@ import { Driver } from "unstorage";
  *
  * @example
  * ```ts
- * import { UnStorage } from "@draftauth/core/storage/unstorage"
+ * import { UnStorage } from "@draftlab/auth/storage/unstorage"
  * import redisDriver from "unstorage/drivers/redis"
  *
  * // Using Redis driver

package/dist/storage/unstorage.js

@@ -12,7 +12,7 @@ import { createStorage } from "unstorage";
 *
 * @example
 * ```ts
-* import { UnStorage } from "@draftauth/core/storage/unstorage"
+* import { UnStorage } from "@draftlab/auth/storage/unstorage"
 * import redisDriver from "unstorage/drivers/redis"
 *
 * // Using Redis driver

package/dist/themes/theme.d.ts

@@ -5,7 +5,7 @@
  * @example
  *
  * ```ts
- * import { THEME_SST } from "@draftauth/core/themes/theme"
+ * import { THEME_SST } from "@draftlab/auth/themes/theme"
  *
  * export default issuer({
  *   theme: THEME_SST,
@@ -16,7 +16,7 @@
  * Or define your own.
  *
  * ```ts
- * import type { Theme } from "@draftauth/core/themes/theme"
+ * import type { Theme } from "@draftlab/auth/themes/theme"
  *
  * const MY_THEME: Theme = {
  *   title: "Acne",

package/dist/ui/base.d.ts

@@ -1,43 +1,30 @@
+import { Theme } from "../themes/theme.js";
+import * as preact6 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) => preact6.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,6 +1,8 @@
 import { getTheme } from "../themes/theme.js";
+import { render } from "preact-render-to-string";
+import { jsx, jsxs } from "preact/jsx-runtime";
 
-//#region src/ui/base.ts
+//#region src/ui/base.tsx
 const css = `@import url("https://unpkg.com/tailwindcss@3.4.15/src/css/preflight.css");
 
 :root {
@@ -102,102 +104,6 @@ const css = `@import url("https://unpkg.com/tailwindcss@3.4.15/src/css/preflight
 	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-component="logo"][data-mode="light"] {
-		display: block;
-	}
-}
-
-@media (prefers-color-scheme: dark) {
-	[data-component="logo"][data-mode="dark"] {
-		display: block;
-	}
-}
-
-[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);
-	}
-}
-
-[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;
-}
-
-[data-component="input"]: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
-	);
-}
-
-[data-component="input"]:user-invalid:not(:focus) {
-	border-color: oklch(0.4 0.09 7.91);
-}
-
 [data-component="button"] {
 	height: 2.5rem;
 	cursor: pointer;
@@ -251,42 +157,93 @@ const css = `@import url("https://unpkg.com/tailwindcss@3.4.15/src/css/preflight
 	margin: 0;
 }
 
-[data-component="form-alert"] {
+[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;
-	padding: 0 1rem;
-	border-radius: calc(var(--border-radius) * 0.25rem);
+	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);
-	text-align: left;
-	font-size: 0.75rem;
-	gap: 0.5rem;
+	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-color="success"] [data-slot="icon-success"] {
-	display: block;
-}
-[data-component="form-alert"][data-color="success"] [data-slot="icon-danger"] {
+[data-component="form-alert"] [data-slot="icon-success"] {
 	display: none;
 }
 
-[data-component="form-alert"]:has([data-slot="message"]:empty) {
+[data-component="form-alert"] [data-slot="icon-danger"] {
 	display: none;
 }
 
-[data-component="form-alert"] [data-slot="icon-success"],
-[data-component="form-alert"] [data-slot="icon-danger"] {
-	width: 1rem;
-	height: 1rem;
+[data-component="form-alert"][data-color="success"] [data-slot="icon-success"] {
+	display: block;
+	width: 16px;
+	height: 16px;
 }
-[data-component="form-alert"] [data-slot="icon-success"] {
-	display: none;
+
+[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"] {
@@ -300,30 +257,62 @@ const css = `@import url("https://unpkg.com/tailwindcss@3.4.15/src/css/preflight
 [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);
+	}
+}
+
+/* Logo theme switching */
+[data-component="logo"][data-mode="light"] {
+	display: none;
+}
+
+[data-component="logo"][data-mode="dark"] {
+	display: block;
+}
+
+@media (prefers-color-scheme: light) {
+	[data-component="logo"][data-mode="light"] {
+		display: block;
+	}
+	
+	[data-component="logo"][data-mode="dark"] {
+		display: none;
+	}
+}
 `;
 /**
-* 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
 */
-const Layout = (props) => {
-	const theme = getTheme();
+const Layout = ({ children, theme, title, size }) => {
+	const currentTheme = theme || getTheme();
 	/**
 	* Gets a theme value for a specific key and color mode.
-	* Handles both string values and light/dark object configurations.
 	*/
 	const getThemeValue = (key, mode) => {
-		if (!theme?.[key]) return;
-		if (typeof theme[key] === "string") return theme[key];
-		return theme[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 (theme?.radius) {
+		switch (currentTheme?.radius) {
 			case "none": return "0";
 			case "sm": return "1";
 			case "md": return "1.25";
@@ -344,11 +333,11 @@ const Layout = (props) => {
 		`--color-background-dark: ${getThemeValue("background", "dark") || ""}`,
 		`--color-primary-light: ${getThemeValue("primary", "light") || ""}`,
 		`--color-primary-dark: ${getThemeValue("primary", "dark") || ""}`,
-		`--font-family: ${theme?.font?.family || ""}`,
-		`--font-scale: ${theme?.font?.scale || ""}`,
+		`--font-family: ${currentTheme?.font?.family || ""}`,
+		`--font-scale: ${currentTheme?.font?.scale || ""}`,
 		`--border-radius: ${getBorderRadius()}`
 	].join("; ");
-	const faviconHtml = theme?.favicon ? `<link href="${theme.favicon}" rel="icon" />` : `
+	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" />
@@ -367,56 +356,53 @@ const Layout = (props) => {
 				data-mode="dark"
 				src="${getThemeValue("logo", "dark") || ""}"
 			/>
-		  ` : DefaultDraftAuthLogo();
-	const childrenHtml = props.children || "";
-	return `
-		<!DOCTYPE html>
-		<html lang="en" style="${themeStyles}">
-			<head>
-				<title>${theme?.title || "Draft Auth"}</title>
-				<meta charset="utf-8" />
-				<meta content="width=device-width, initial-scale=1" name="viewport" />
-
-				${faviconHtml}
-
-				<!-- Base CSS styles -->
-				<style>${css}</style>
-
-				<!-- Custom theme CSS if provided -->
-				${theme?.css ? `<style>${theme.css}</style>` : ""}
-			</head>
-			<body>
-				<div data-component="root">
-					<div data-component="center" data-size="${props.size || ""}">
-						${logoHtml}
-						${childrenHtml}
-					</div>
-				</div>
-			</body>
-		</html>
-	`;
+		  ` : `
+			<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]
+			})
+		}) })]
+	});
 };
 /**
-* Default Draft Auth logo component.
-* Used when no custom logo is provided in the theme configuration.
+* Helper function to render a Preact component to HTML string
 */
-const DefaultDraftAuthLogo = () => `
-	<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>
-`;
+const renderToHTML = (component) => {
+	if (!component) return "";
+	return render(component);
+};
 
 //#endregion
-export { Layout };
+export { Layout, renderToHTML };