@draftlab/auth 0.0.3 → 0.1.0

package/dist/base-DRutbxgL.js

@@ -1,422 +0,0 @@
-import { getTheme } from "./theme-CswaLtbW.js";
-
-//#region src/ui/base.ts
-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="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;
-	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="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-component="form-alert"][data-color="success"] {
-	background: var(--color-background-success);
-	color: 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"] {
-	display: none;
-}
-
-[data-component="form-alert"]:has([data-slot="message"]:empty) {
-	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-slot="icon-success"] {
-	display: none;
-}
-
-[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;
-}
-`;
-/**
-* 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
-*/
-const Layout = (props) => {
-	const 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];
-	};
-	/**
-	* Calculates border radius value based on theme configuration.
-	*/
-	const getBorderRadius = () => {
-		switch (theme?.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: ${theme?.font?.family || ""}`,
-		`--font-scale: ${theme?.font?.scale || ""}`,
-		`--border-radius: ${getBorderRadius()}`
-	].join("; ");
-	const faviconHtml = theme?.favicon ? `<link href="${theme.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") || ""}"
-			/>
-		  ` : 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>
-	`;
-};
-/**
-* Default Draft Auth logo component.
-* Used when no custom logo is provided in the theme configuration.
-*/
-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>
-`;
-
-//#endregion
-export { Layout };

package/dist/code-DJxdFR7p.d.ts

@@ -1,212 +0,0 @@
-import { Provider } from "./provider-tndlqCzp.js";
-
-//#region src/provider/code.d.ts
-
-/**
- * Configuration options for the PIN code authentication provider.
- *
- * @template Claims - Type of claims collected during authentication (email, phone, etc.)
- */
-interface CodeProviderConfig<Claims extends Record<string, string> = Record<string, string>> {
-  /**
-   * The length of the generated PIN code.
-   * Common values are 4, 6, or 8 digits.
-   *
-   * @default 6
-   *
-   * @example
-   * ```ts
-   * {
-   *   length: 4 // 4-digit PIN for easier entry
-   * }
-   * ```
-   */
-  readonly length?: number;
-  /**
-   * Request handler for rendering the authentication UI.
-   * Handles both the initial claim collection and PIN code entry screens.
-   *
-   * @param req - The HTTP request object
-   * @param state - Current authentication state (start or code verification)
-   * @param form - Form data from POST requests (if any)
-   * @param error - Authentication error to display (if any)
-   * @returns Promise resolving to the authentication page response
-   *
-   * @example
-   * ```ts
-   * request: async (req, state, form, error) => {
-   *   if (state.type === 'start') {
-   *     return new Response(renderClaimForm(form, error))
-   *   } else {
-   *     return new Response(renderCodeForm(state.claims.email, error))
-   *   }
-   * }
-   * ```
-   */
-  request: (req: Request, state: CodeProviderState, form?: FormData, error?: CodeProviderError) => Promise<Response>;
-  /**
-   * Callback for sending PIN codes to users via their preferred method.
-   * Should handle delivery via email, SMS, or other communication channels.
-   *
-   * @param claims - User claims containing contact information
-   * @param code - The generated PIN code to send
-   * @returns Promise resolving to undefined on success, or error object on failure
-   *
-   * @example
-   * ```ts
-   * sendCode: async (claims, code) => {
-   *   try {
-   *     if (claims.email) {
-   *       await emailService.send({
-   *         to: claims.email,
-   *         subject: 'Your verification code',
-   *         text: `Your PIN code is: ${code}`
-   *       })
-   *     } else if (claims.phone) {
-   *       await smsService.send(claims.phone, `PIN: ${code}`)
-   *     } else {
-   *       return {
-   *         type: "invalid_claim",
-   *         key: "contact",
-   *         value: "No email or phone provided"
-   *       }
-   *     }
-   *   } catch (error) {
-   *     return {
-   *       type: "invalid_claim",
-   *       key: "delivery",
-   *       value: "Failed to send code"
-   *     }
-   *   }
-   * }
-   * ```
-   */
-  sendCode: (claims: Claims, code: string) => Promise<CodeProviderError | undefined>;
-}
-/**
- * Authentication flow states for the PIN code provider.
- * The provider transitions between these states during authentication.
- */
-type CodeProviderState = {
-  /** Initial state: user enters their claims (email, phone, etc.) */
-  readonly type: "start";
-} | {
-  /** Code verification state: user enters the PIN code */
-  readonly type: "code";
-  /** Whether this is a code resend request */
-  readonly resend?: boolean;
-  /** The generated PIN code for verification */
-  readonly code: string;
-  /** User claims collected during the start phase */
-  readonly claims: Record<string, string>;
-};
-/**
- * Possible errors during PIN code authentication.
- */
-type CodeProviderError = {
-  /** The entered PIN code is incorrect */
-  readonly type: "invalid_code";
-} | {
-  /** A user claim is invalid or missing */
-  readonly type: "invalid_claim";
-  /** The claim field that failed validation */
-  readonly key: string;
-  /** The invalid value or error description */
-  readonly value: string;
-};
-/**
- * User data returned by successful PIN code authentication.
- *
- * @template Claims - Type of claims collected during authentication
- */
-interface CodeUserData<Claims extends Record<string, string> = Record<string, string>> {
-  /** The verified claims collected during authentication */
-  readonly claims: Claims;
-}
-/**
- * Creates a PIN code authentication provider.
- * Implements a flexible claim-based authentication flow with PIN verification.
- *
- * @template Claims - Type of claims to collect (email, phone, username, etc.)
- * @param config - PIN code provider configuration
- * @returns Provider instance implementing PIN code authentication
- *
- * @example
- * ```ts
- * // Email-based PIN authentication
- * const emailCodeProvider = CodeProvider<{ email: string }>({
- *   length: 6,
- *   request: async (req, state, form, error) => {
- *     if (state.type === 'start') {
- *       return new Response(renderEmailForm(form?.get('email'), error))
- *     } else {
- *       return new Response(renderPinForm(state.claims.email, error, state.resend))
- *     }
- *   },
- *   sendCode: async (claims, code) => {
- *     if (!claims.email || !isValidEmail(claims.email)) {
- *       return {
- *         type: "invalid_claim",
- *         key: "email",
- *         value: "Invalid email address"
- *       }
- *     }
- *
- *     await emailService.send(claims.email, `Your verification code: ${code}`)
- *   }
- * })
- *
- * // Multi-channel PIN authentication (email or phone)
- * const flexibleCodeProvider = CodeProvider<{ email?: string; phone?: string }>({
- *   length: 4,
- *   request: async (req, state, form, error) => {
- *     if (state.type === 'start') {
- *       return new Response(renderContactForm(form, error))
- *     } else {
- *       const contact = state.claims.email || state.claims.phone
- *       return new Response(renderPinForm(contact, error))
- *     }
- *   },
- *   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 {
- *       return {
- *         type: "invalid_claim",
- *         key: "contact",
- *         value: "Provide either email or phone number"
- *       }
- *     }
- *   }
- * })
- *
- * // Usage in issuer
- * export default issuer({
- *   providers: {
- *     email: emailCodeProvider,
- *     flexible: flexibleCodeProvider
- *   },
- *   success: async (ctx, value) => {
- *     if (value.provider === "code") {
- *       const email = value.claims.email
- *       const phone = value.claims.phone
- *
- *       // Look up or create user based on verified claims
- *       const userId = await findOrCreateUser({ email, phone })
- *
- *       return ctx.subject("user", { userId, email, phone })
- *     }
- *   }
- * })
- * ```
- */
-declare const CodeProvider: <Claims extends Record<string, string> = Record<string, string>>(config: CodeProviderConfig<Claims>) => Provider<CodeUserData<Claims>>;
-/**
- * Type helper for CodeProvider configuration options.
- * @internal
- */
-type CodeProviderOptions = Parameters<typeof CodeProvider>[0];
-//#endregion
-export { CodeProvider, CodeProviderConfig, CodeProviderError, CodeProviderOptions, CodeProviderState, CodeUserData };