@tomny-dev/uzi 0.6.3 → 0.7.0-pr.78.214.1.87d1ede

package/dist/index69.cjs

@@ -1,248 +1,443 @@
-"use client";
 const require_runtime = require("./index2.cjs");
 const require_cx = require("./index4.cjs");
-const require_data_table_module = require("./index68.cjs");
+const require_auth_pages_module = require("./index68.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/data-table/DataTable.tsx
-function DataTable({ data, columns, onRowAction, onSelectionChange, loading = false, emptyMessage = "No data found", pageSize = 10, selectable = false, rowKey = (row) => String(row.id ?? ""), className }) {
-	const [sortKey, setSortKey] = react.useState(null);
-	const [sortDir, setSortDir] = react.useState("asc");
-	const [page, setPage] = react.useState(1);
-	const [selected, setSelected] = react.useState(/* @__PURE__ */ new Set());
-	const handleSort = (key) => {
-		if (key === sortKey) setSortDir((d) => d === "asc" ? "desc" : "asc");
-		else {
-			setSortKey(key);
-			setSortDir("asc");
-		}
+//#region src/components/auth-pages/AuthPages.tsx
+function EyeIcon({ open }) {
+	if (open) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		className: require_auth_pages_module.default.eyeIcon,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z",
+			stroke: "currentColor",
+			strokeWidth: "2"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "12",
+			cy: "12",
+			r: "3",
+			stroke: "currentColor",
+			strokeWidth: "2"
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		className: require_auth_pages_module.default.eyeIcon,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94",
+				stroke: "currentColor",
+				strokeWidth: "2"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19",
+				stroke: "currentColor",
+				strokeWidth: "2"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+				x1: "1",
+				y1: "1",
+				x2: "23",
+				y2: "23",
+				stroke: "currentColor",
+				strokeWidth: "2"
+			})
+		]
+	});
+}
+function Field({ label, id, children, error }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_auth_pages_module.default.field,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				htmlFor: id,
+				className: require_auth_pages_module.default.label,
+				children: label
+			}),
+			children,
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_auth_pages_module.default.error,
+				children: error
+			})
+		]
+	});
+}
+function PasswordField({ id, label, placeholder, value, onChange, error }) {
+	const [show, setShow] = react.useState(false);
+	const toggleRef = react.useRef(null);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+		label: label ?? "Password",
+		id,
+		error,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_auth_pages_module.default.passwordWrapper,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				id,
+				type: show ? "text" : "password",
+				placeholder,
+				value,
+				onChange,
+				className: require_auth_pages_module.default.input
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				ref: toggleRef,
+				type: "button",
+				onClick: () => setShow((s) => !s),
+				className: require_auth_pages_module.default.toggle,
+				"aria-label": show ? "Hide password" : "Show password",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EyeIcon, { open: show })
+			})]
+		})
+	});
+}
+function CheckboxRow({ label, linkText, linkHref, checked, onChange }) {
+	if (!label) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_auth_pages_module.default.checkboxRow,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: require_auth_pages_module.default.checkboxLabel,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "checkbox",
+				className: require_auth_pages_module.default.checkbox,
+				checked,
+				onChange: (e) => onChange?.(e.target.checked)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
+		}), linkHref && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+			href: linkHref,
+			className: require_auth_pages_module.default.forgotLink,
+			children: linkText
+		})]
+	});
+}
+function SignInPage({ title = "Sign in", subtitle, footer, onSubmit, loading = false, brand, className, emailPlaceholder = "Email address", passwordPlaceholder = "Password", rememberLabel = "Remember me", forgotLinkText = "Forgot password?", forgotLinkHref }) {
+	const id = react.useId();
+	const [email, setEmail] = react.useState("");
+	const [password, setPassword] = react.useState("");
+	const [rememberMe, setRememberMe] = react.useState(false);
+	const [errors, setErrors] = react.useState({});
+	const [submitted, setSubmitted] = react.useState(false);
+	const validate = () => {
+		const newErrors = {};
+		if (!email.trim()) newErrors.email = "Email is required";
+		else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) newErrors.email = "Enter a valid email";
+		if (!password) newErrors.password = "Password is required";
+		setErrors(newErrors);
+		return Object.keys(newErrors).length === 0;
 	};
-	const toggleRow = (id) => {
-		const next = new Set(selected);
-		if (next.has(id)) next.delete(id);
-		else next.add(id);
-		setSelected(next);
-		onSelectionChange?.(Array.from(next));
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		setSubmitted(true);
+		if (!validate()) return;
+		onSubmit?.({
+			email,
+			password,
+			rememberMe
+		});
 	};
-	const toggleAll = () => {
-		const allKeys = displayedData.map((r) => rowKey(r));
-		const allSelected = allKeys.every((k) => selected.has(k));
-		const next = new Set(selected);
-		if (allSelected) allKeys.forEach((k) => next.delete(k));
-		else allKeys.forEach((k) => next.add(k));
-		setSelected(next);
-		onSelectionChange?.(Array.from(next));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_cx.cx(require_auth_pages_module.default.authLayout, className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_auth_pages_module.default.authCard,
+			children: [
+				brand && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_auth_pages_module.default.authBrand,
+					children: brand
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_auth_pages_module.default.authHeader,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+						className: require_auth_pages_module.default.authTitle,
+						children: title
+					}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: require_auth_pages_module.default.authSubtitle,
+						children: subtitle
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+					onSubmit: handleSubmit,
+					className: require_auth_pages_module.default.authForm,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+							label: emailPlaceholder,
+							id: id + "-email",
+							error: submitted ? errors.email : void 0,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								id: id + "-email",
+								type: "email",
+								placeholder: "you@example.com",
+								value: email,
+								onChange: (e) => setEmail(e.target.value),
+								className: require_auth_pages_module.default.input,
+								autoComplete: "email",
+								autoFocus: true
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PasswordField, {
+							label: passwordPlaceholder,
+							id: id + "-password",
+							placeholder: passwordPlaceholder,
+							value: password,
+							onChange: (e) => {
+								setPassword(e.target.value);
+								if (submitted) setSubmitted(false);
+							},
+							error: submitted ? errors.password : void 0
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxRow, {
+							label: rememberLabel,
+							linkText: forgotLinkText,
+							linkHref: forgotLinkHref,
+							checked: rememberMe,
+							onChange: (c) => {
+								setRememberMe(c);
+								if (submitted) setSubmitted(false);
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "submit",
+							disabled: loading,
+							className: require_auth_pages_module.default.submitButton,
+							children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_auth_pages_module.default.spinner }), "Signing in..."] }) : "Sign in"
+						})
+					]
+				}),
+				footer && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: require_auth_pages_module.default.divider }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_auth_pages_module.default.authFooter,
+					children: footer
+				})] })
+			]
+		})
+	});
+}
+function SignUpPage({ title = "Create an account", subtitle, footer, onSubmit, loading = false, brand, className, emailPlaceholder = "Email address", passwordPlaceholder = "Password", confirmPasswordPlaceholder = "Confirm password", checkboxLabel, checkboxLinkText, checkboxLinkHref }) {
+	const id = react.useId();
+	const [email, setEmail] = react.useState("");
+	const [password, setPassword] = react.useState("");
+	const [confirmPassword, setConfirmPassword] = react.useState("");
+	const [agreed, setAgreed] = react.useState(false);
+	const [errors, setErrors] = react.useState({});
+	const [submitted, setSubmitted] = react.useState(false);
+	const validate = () => {
+		const newErrors = {};
+		if (!email.trim()) newErrors.email = "Email is required";
+		else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) newErrors.email = "Enter a valid email";
+		if (!password) newErrors.password = "Password is required";
+		else if (password.length < 8) newErrors.password = "At least 8 characters";
+		if (password !== confirmPassword) newErrors.confirmPassword = "Passwords do not match";
+		if (!agreed) newErrors.agreed = "You must agree to continue";
+		setErrors(newErrors);
+		return Object.keys(newErrors).length === 0;
 	};
-	const totalPages = Math.max(1, Math.ceil(data.length / pageSize));
-	const safePage = Math.min(page, totalPages);
-	const columnSpan = columns.length + (selectable ? 1 : 0) + (onRowAction && onRowAction.length > 0 ? 1 : 0);
-	react.useEffect(() => {
-		if (page > totalPages) setPage(totalPages);
-	}, [
-		data.length,
-		page,
-		totalPages
-	]);
-	const sortedData = react.useMemo(() => {
-		if (!sortKey) return data;
-		const sortColumn = columns.find((column) => column.key === sortKey);
-		const getSortValue = (row) => {
-			if (sortColumn?.accessor) {
-				const accessed = sortColumn.accessor(row);
-				if (typeof accessed === "string" || typeof accessed === "number") return accessed;
-			}
-			return row[sortKey];
-		};
-		return [...data].sort((a, b) => {
-			const aVal = getSortValue(a);
-			const bVal = getSortValue(b);
-			if (aVal == null) return 1;
-			if (bVal == null) return -1;
-			let cmp = 0;
-			if (typeof aVal === "number" && typeof bVal === "number") cmp = aVal - bVal;
-			else cmp = String(aVal).localeCompare(String(bVal));
-			return sortDir === "asc" ? cmp : -cmp;
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		setSubmitted(true);
+		if (!validate()) return;
+		onSubmit?.({
+			email,
+			password,
+			agreed
 		});
-	}, [
-		columns,
-		data,
-		sortKey,
-		sortDir
-	]);
-	const displayedData = react.useMemo(() => {
-		const start = (safePage - 1) * pageSize;
-		return sortedData.slice(start, start + pageSize);
-	}, [
-		sortedData,
-		safePage,
-		pageSize
-	]);
-	const displayedKeys = react.useMemo(() => displayedData.map(rowKey), [displayedData, rowKey]);
-	const allPageSelected = displayedKeys.length > 0 && displayedKeys.every((k) => selected.has(k));
-	const somePageSelected = displayedKeys.length > 0 && displayedKeys.some((k) => selected.has(k));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_cx.cx(require_data_table_module.default.wrapper, className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_data_table_module.default.tableContainer,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-				className: require_data_table_module.default.table,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
-					className: require_data_table_module.default.thead,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
-						selectable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-							className: require_data_table_module.default.headerCell,
-							"aria-label": "Select all",
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_cx.cx(require_auth_pages_module.default.authLayout, className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_auth_pages_module.default.authCard,
+			children: [
+				brand && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_auth_pages_module.default.authBrand,
+					children: brand
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_auth_pages_module.default.authHeader,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+						className: require_auth_pages_module.default.authTitle,
+						children: title
+					}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: require_auth_pages_module.default.authSubtitle,
+						children: subtitle
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+					onSubmit: handleSubmit,
+					className: require_auth_pages_module.default.authForm,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+							label: emailPlaceholder,
+							id: id + "-email",
+							error: submitted ? errors.email : void 0,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								type: "checkbox",
-								checked: allPageSelected,
-								ref: (el) => {
-									if (el) el.indeterminate = somePageSelected && !allPageSelected;
+								id: id + "-email",
+								type: "email",
+								placeholder: "you@example.com",
+								value: email,
+								onChange: (e) => {
+									setEmail(e.target.value);
+									if (submitted) setSubmitted(false);
 								},
-								onChange: toggleAll,
-								className: require_data_table_module.default.checkbox,
-								"aria-label": "Select all rows on this page"
+								className: require_auth_pages_module.default.input,
+								autoComplete: "email",
+								autoFocus: true
 							})
 						}),
-						columns.map((col) => {
-							const ariaSort = col.sortable ? sortKey === col.key ? sortDir === "asc" ? "ascending" : "descending" : "none" : void 0;
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-								className: require_cx.cx(require_data_table_module.default.headerCell, col.width && require_data_table_module.default.headerCellFixed, col.align && require_data_table_module.default[`align${col.align.charAt(0).toUpperCase() + col.align.slice(1)}`]),
-								style: col.width ? { width: col.width } : void 0,
-								"aria-sort": ariaSort,
-								children: col.sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-									type: "button",
-									className: require_cx.cx(require_data_table_module.default.sortableHeader, require_data_table_module.default.clickableHeader),
-									onClick: () => handleSort(col.key),
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_data_table_module.default.headerLabel,
-										children: col.label
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: require_data_table_module.default.sortIcon,
-										"aria-hidden": "true",
-										children: sortKey === col.key ? sortDir === "asc" ? "▲" : "▼" : "▲▼"
-									})]
-								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: require_data_table_module.default.headerLabel,
-									children: col.label
-								})
-							}, col.key);
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PasswordField, {
+							label: passwordPlaceholder,
+							id: id + "-password",
+							placeholder: passwordPlaceholder,
+							value: password,
+							onChange: (e) => {
+								setPassword(e.target.value);
+								if (submitted) setSubmitted(false);
+							},
+							error: submitted ? errors.password : void 0
 						}),
-						onRowAction && onRowAction.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
-							className: require_data_table_module.default.headerCell,
-							style: { width: "5rem" },
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: require_data_table_module.default.headerLabel,
-								children: "Actions"
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PasswordField, {
+							label: confirmPasswordPlaceholder,
+							id: id + "-confirm",
+							placeholder: confirmPasswordPlaceholder,
+							value: confirmPassword,
+							onChange: (e) => {
+								setConfirmPassword(e.target.value);
+								if (submitted) setSubmitted(false);
+							},
+							error: submitted ? errors.confirmPassword : void 0
+						}),
+						checkboxLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: require_auth_pages_module.default.checkboxRow,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: require_auth_pages_module.default.checkboxLabel,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									id: id + "-agreed",
+									type: "checkbox",
+									checked: agreed,
+									onChange: (e) => {
+										setAgreed(e.target.checked);
+										if (submitted) setSubmitted(false);
+									},
+									className: require_auth_pages_module.default.checkbox
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: checkboxLinkText ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+									"I agree to the",
+									" ",
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+										href: checkboxLinkHref,
+										className: require_auth_pages_module.default.checkboxLink,
+										children: checkboxLinkText
+									})
+								] }) : checkboxLabel })]
 							})
+						}),
+						submitted && errors.agreed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_auth_pages_module.default.error,
+							children: errors.agreed
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "submit",
+							disabled: loading,
+							className: require_auth_pages_module.default.submitButton,
+							children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_auth_pages_module.default.spinner }), "Creating account..."] }) : "Create account"
 						})
-					] })
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
-					className: require_data_table_module.default.tbody,
-					children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("td", {
-						colSpan: columnSpan,
-						className: require_data_table_module.default.loadingCell,
+					]
+				}),
+				footer && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: require_auth_pages_module.default.divider }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_auth_pages_module.default.authFooter,
+					children: footer
+				})] })
+			]
+		})
+	});
+}
+function ForgotPasswordPage({ title = "Reset password", subtitle = "Enter your email and we'll send a reset link", footer, onSubmit, loading = false, brand, className, emailPlaceholder = "Email address", buttonText = "Send reset link", backLinkText = "Back to sign in", backLinkHref = "/signin" }) {
+	const id = react.useId();
+	const [email, setEmail] = react.useState("");
+	const [error, setError] = react.useState("");
+	const [sent, setSent] = react.useState(false);
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		if (!email.trim()) {
+			setError("Email is required");
+			return;
+		}
+		if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+			setError("Enter a valid email");
+			return;
+		}
+		onSubmit?.({ email });
+		setSent(true);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_cx.cx(require_auth_pages_module.default.authLayout, className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_auth_pages_module.default.authCard,
+			children: [
+				brand && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_auth_pages_module.default.authBrand,
+					children: brand
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_auth_pages_module.default.authHeader,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+						className: require_auth_pages_module.default.authTitle,
+						children: title
+					}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: require_auth_pages_module.default.authSubtitle,
+						children: subtitle
+					})]
+				}),
+				sent ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_auth_pages_module.default.sentMessage,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: require_auth_pages_module.default.sentText,
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: require_data_table_module.default.loadingRow,
-								"aria-busy": "true",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar })
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: require_data_table_module.default.loadingRow,
-								"aria-busy": "true",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar })
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: require_data_table_module.default.loadingRow,
-								"aria-busy": "true",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_data_table_module.default.skeletonBar })
-								]
-							})
+							"If an account exists for ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: email }),
+							", you'll receive a reset link shortly."
 						]
-					}) }) : data.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-						colSpan: columnSpan,
-						className: require_data_table_module.default.emptyCell,
-						children: emptyMessage
-					}) }) : displayedData.map((row) => {
-						const id = rowKey(row);
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
-							className: require_cx.cx(require_data_table_module.default.row, selected.has(id) && require_data_table_module.default.rowSelected),
-							children: [
-								selectable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-									className: require_data_table_module.default.cell,
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										type: "checkbox",
-										checked: selected.has(id),
-										onChange: () => toggleRow(id),
-										className: require_data_table_module.default.checkbox,
-										"aria-label": `Select row ${id}`
-									})
-								}),
-								columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-									className: require_cx.cx(require_data_table_module.default.cell, col.align && require_data_table_module.default[`align${col.align.charAt(0).toUpperCase() + col.align.slice(1)}`]),
-									children: col.accessor ? col.accessor(row) : String(row[col.key] ?? "")
-								}, `${id}-${col.key}`)),
-								onRowAction && onRowAction.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-									className: require_data_table_module.default.cell,
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: require_data_table_module.default.rowActions,
-										children: onRowAction.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-											type: "button",
-											className: require_data_table_module.default.actionBtn,
-											onClick: () => action.onClick(row),
-											children: action.label
-										}, action.label))
-									})
-								})
-							]
-						}, id);
-					})
-				})]
-			})
-		}), data.length > pageSize && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_data_table_module.default.pagination,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: require_data_table_module.default.paginationInfo,
-				children: [
-					"Page ",
-					safePage,
-					" of ",
-					totalPages
-				]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_data_table_module.default.paginationButtons,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: require_data_table_module.default.pageBtn,
-					disabled: safePage <= 1,
-					onClick: () => setPage((p) => Math.max(1, p - 1)),
-					"aria-label": "Previous page",
-					children: "←"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: require_data_table_module.default.pageBtn,
-					disabled: safePage >= totalPages,
-					onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
-					"aria-label": "Next page",
-					children: "→"
-				})]
-			})]
-		})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						href: backLinkHref,
+						className: require_auth_pages_module.default.backLink,
+						children: backLinkText
+					})]
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+					onSubmit: handleSubmit,
+					className: require_auth_pages_module.default.authForm,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+						label: emailPlaceholder,
+						id: id + "-email",
+						error,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							id: id + "-email",
+							type: "email",
+							placeholder: "you@example.com",
+							value: email,
+							onChange: (e) => {
+								setEmail(e.target.value);
+								setError("");
+							},
+							className: require_auth_pages_module.default.input,
+							autoComplete: "email",
+							autoFocus: true
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "submit",
+						disabled: loading,
+						className: require_auth_pages_module.default.submitButton,
+						children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_auth_pages_module.default.spinner }), "Sending..."] }) : buttonText
+					})]
+				}),
+				footer && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: require_auth_pages_module.default.divider }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: require_auth_pages_module.default.authFooter,
+					children: footer
+				})] })
+			]
+		})
 	});
 }
 //#endregion
-exports.DataTable = DataTable;
+exports.ForgotPasswordPage = ForgotPasswordPage;
+exports.SignInPage = SignInPage;
+exports.SignUpPage = SignUpPage;
 
 //# sourceMappingURL=index69.cjs.map