@questpie/admin 0.0.1

package/src/styles/index.css

@@ -0,0 +1,340 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/dm-sans";
+@import "@fontsource-variable/jetbrains-mono";
+
+@custom-variant dark (&:is(.dark *));
+
+/* =============================================================================
+   QUESTPIE Design System - Cyber-Minimalist Theme
+   
+   Core principles:
+   - Zero radius (sharp corners)
+   - Neon purple accents with glow effects
+   - Pitch-black foundation
+   - Backdrop blur for depth
+   ============================================================================= */
+
+:root {
+	/* Core Colors (Light mode - for completeness, but dark is primary) */
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(0.98 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.55 0.3 300);
+	--primary-foreground: oklch(1 0 0);
+	--secondary: oklch(0.96 0 0);
+	--secondary-foreground: oklch(0.55 0.3 300);
+	--muted: oklch(0.96 0 0);
+	--muted-foreground: oklch(0.5 0 0);
+	--accent: oklch(0.96 0 0);
+	--accent-foreground: oklch(0.2 0 0);
+	--destructive: oklch(0.58 0.22 27);
+	--border: oklch(0.9 0 0);
+	--input: oklch(0.9 0 0);
+	--ring: oklch(0.55 0.3 300 / 50%);
+
+	/* Chart Colors */
+	--chart-1: oklch(0.7 0.25 300);
+	--chart-2: oklch(0.65 0.28 310);
+	--chart-3: oklch(0.6 0.3 300);
+	--chart-4: oklch(0.55 0.3 300);
+	--chart-5: oklch(0.5 0.28 300);
+
+	/* QUESTPIE: Zero Radius */
+	--radius: 0px;
+
+	/* Sidebar */
+	--sidebar: oklch(0.98 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.55 0.3 300);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(0.96 0 0);
+	--sidebar-accent-foreground: oklch(0.2 0 0);
+	--sidebar-border: oklch(0.9 0 0);
+	--sidebar-ring: oklch(0.55 0.3 300 / 50%);
+}
+
+/* Dark Mode - QUESTPIE Primary Theme */
+.dark {
+	/* Depth Black Foundation */
+	--background: oklch(0.14 0 0);
+	--foreground: oklch(0.92 0.01 255);
+
+	/* Surface Black */
+	--card: oklch(0.18 0 0);
+	--card-foreground: oklch(0.92 0.01 255);
+
+	/* Popover */
+	--popover: oklch(0.18 0 0);
+	--popover-foreground: oklch(0.92 0.01 255);
+
+	/* Neon Purple Accent */
+	--primary: oklch(0.55 0.3 300);
+	--primary-foreground: oklch(1 0 0);
+
+	/* Neutral Surface */
+	--secondary: oklch(0.22 0 0);
+	--secondary-foreground: oklch(0.55 0.3 300);
+
+	/* Muted */
+	--muted: oklch(0.25 0 0);
+	--muted-foreground: oklch(0.7 0 0);
+
+	/* Accent */
+	--accent: oklch(0.25 0 0);
+	--accent-foreground: oklch(0.92 0.01 255);
+
+	/* Destructive */
+	--destructive: oklch(0.65 0.22 27);
+
+	/* Technical Border */
+	--border: oklch(0.32 0 0);
+	--input: oklch(0.28 0 0);
+
+	/* Glow Focus Ring */
+	--ring: oklch(0.55 0.3 300 / 50%);
+
+	/* Chart Colors */
+	--chart-1: oklch(0.7 0.25 300);
+	--chart-2: oklch(0.65 0.28 310);
+	--chart-3: oklch(0.6 0.3 300);
+	--chart-4: oklch(0.55 0.3 300);
+	--chart-5: oklch(0.5 0.28 300);
+
+	/* Sidebar */
+	--sidebar: oklch(0.16 0 0);
+	--sidebar-foreground: oklch(0.92 0.01 255);
+	--sidebar-primary: oklch(0.55 0.3 300);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(0.22 0 0);
+	--sidebar-accent-foreground: oklch(0.92 0.01 255);
+	--sidebar-border: oklch(0.32 0 0);
+	--sidebar-ring: oklch(0.55 0.3 300 / 50%);
+}
+
+@theme inline {
+	/* Typography */
+	--font-sans: "DM Sans Variable", ui-sans-serif, system-ui, sans-serif;
+	--font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
+
+	/* Color Variables */
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar: var(--sidebar);
+	--color-chart-5: var(--chart-5);
+	--color-chart-4: var(--chart-4);
+	--color-chart-3: var(--chart-3);
+	--color-chart-2: var(--chart-2);
+	--color-chart-1: var(--chart-1);
+	--color-ring: var(--ring);
+	--color-input: var(--input);
+	--color-border: var(--border);
+	--color-destructive: var(--destructive);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-accent: var(--accent);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-muted: var(--muted);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-secondary: var(--secondary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-primary: var(--primary);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-popover: var(--popover);
+	--color-card-foreground: var(--card-foreground);
+	--color-card: var(--card);
+	--color-foreground: var(--foreground);
+	--color-background: var(--background);
+
+	/* QUESTPIE: Zero Radius */
+	--radius-sm: 0px;
+	--radius-md: 0px;
+	--radius-lg: 0px;
+	--radius-xl: 0px;
+	--radius-2xl: 0px;
+	--radius-3xl: 0px;
+	--radius-4xl: 0px;
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background font-sans text-foreground;
+	}
+	html {
+		@apply font-sans;
+	}
+}
+
+/* =============================================================================
+   QUESTPIE Atmospheric Utilities
+   ============================================================================= */
+
+@utility bg-grid-quest {
+	background-image:
+		linear-gradient(to right, oklch(0.55 0.3 300 / 5%) 1px, transparent 1px),
+		linear-gradient(to bottom, oklch(0.55 0.3 300 / 5%) 1px, transparent 1px);
+	background-size: 24px 24px;
+}
+
+@utility glow-primary {
+	box-shadow: 0 0 20px oklch(0.55 0.3 300 / 30%);
+}
+
+@utility glow-primary-sm {
+	box-shadow: 0 0 8px oklch(0.55 0.3 300 / 25%);
+}
+
+@utility glow-destructive {
+	box-shadow: 0 0 20px oklch(0.65 0.22 27 / 30%);
+}
+
+@utility ambient-beam {
+	background: radial-gradient(
+		circle,
+		oklch(0.55 0.3 300 / 15%) 0%,
+		transparent 70%
+	);
+	filter: blur(100px);
+}
+
+/* =============================================================================
+   Rich Text Editor Styles
+   ============================================================================= */
+
+.qp-rich-text-editor__content {
+	min-height: 200px;
+	padding: 0.75rem;
+	outline: none;
+}
+
+.qp-rich-text-editor__content > *:first-child {
+	margin-top: 0;
+}
+
+.qp-rich-text-editor__content > *:last-child {
+	margin-bottom: 0;
+}
+
+.qp-rich-text-editor__content p {
+	margin: 0 0 0.75rem;
+}
+
+.qp-rich-text-editor__content h1 {
+	font-size: 1.5rem;
+	font-weight: 600;
+	margin: 1rem 0 0.75rem;
+}
+
+.qp-rich-text-editor__content h2 {
+	font-size: 1.25rem;
+	font-weight: 600;
+	margin: 1rem 0 0.75rem;
+}
+
+.qp-rich-text-editor__content h3 {
+	font-size: 1.125rem;
+	font-weight: 600;
+	margin: 1rem 0 0.75rem;
+}
+
+.qp-rich-text-editor__content ul,
+.qp-rich-text-editor__content ol {
+	padding-left: 1.5rem;
+	margin: 0.75rem 0;
+}
+
+.qp-rich-text-editor__content blockquote {
+	border-left: 2px solid var(--border);
+	padding-left: 0.75rem;
+	color: var(--muted-foreground);
+	margin: 0.75rem 0;
+}
+
+.qp-rich-text-editor__content code {
+	background: var(--muted);
+	padding: 0.1rem 0.25rem;
+	font-size: 0.875em;
+	font-family: var(--font-mono);
+}
+
+.qp-rich-text-editor__content pre {
+	background: var(--muted);
+	padding: 0.75rem;
+	overflow-x: auto;
+	font-family: var(--font-mono);
+}
+
+.qp-rich-text-editor__content hr {
+	border: none;
+	border-top: 1px solid var(--border);
+	margin: 1rem 0;
+}
+
+.qp-rich-text-editor__content table {
+	border-collapse: collapse;
+	margin: 1rem 0;
+	width: 100%;
+}
+
+.qp-rich-text-editor__content th,
+.qp-rich-text-editor__content td {
+	border: 1px solid var(--border);
+	padding: 0.5rem;
+	text-align: left;
+}
+
+.tippy-box[data-theme~="qp-rich-text-editor"] {
+	background: var(--popover);
+	color: var(--popover-foreground);
+	border: 1px solid var(--border);
+	box-shadow: 0 0 20px oklch(0 0 0 / 40%);
+}
+
+.qp-rich-text-editor__slash {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	padding: 0.5rem;
+	min-width: 220px;
+}
+
+.qp-rich-text-editor__slash-item {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.125rem;
+	padding: 0.5rem;
+	font-size: 0.75rem;
+	line-height: 1.2;
+	color: var(--foreground);
+}
+
+.qp-rich-text-editor__slash-item--active,
+.qp-rich-text-editor__slash-item:hover {
+	background: var(--muted);
+}
+
+.qp-rich-text-editor__slash-title {
+	font-weight: 600;
+}
+
+.qp-rich-text-editor__slash-description {
+	color: var(--muted-foreground);
+}
+
+.qp-rich-text-editor__slash-empty {
+	padding: 0.5rem;
+	font-size: 0.75rem;
+	color: var(--muted-foreground);
+}

package/src/utils/index.ts

@@ -0,0 +1,6 @@
+// Re-export cn helper from lib/utils
+export { cn } from "../lib/utils";
+
+/**
+ * Utility functions for admin package
+ */

package/src/views/auth/auth-layout.tsx

@@ -0,0 +1,77 @@
+/**
+ * Auth Layout - centered card layout for authentication pages
+ */
+
+import * as React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "../../components/ui/card";
+import { cn } from "../../lib/utils";
+
+export type AuthLayoutProps = {
+	/** Page title */
+	title: string;
+	/** Page description */
+	description?: string;
+	/** Logo component or element */
+	logo?: React.ReactNode;
+	/** Footer content (e.g., links to other auth pages) */
+	footer?: React.ReactNode;
+	/** Form content */
+	children: React.ReactNode;
+	/** Additional class name for the card */
+	className?: string;
+};
+
+/**
+ * Centered layout for authentication pages (login, register, forgot password, etc.)
+ *
+ * @example
+ * ```tsx
+ * <AuthLayout
+ *   title="Sign in"
+ *   description="Enter your credentials to access the admin panel"
+ *   logo={<Logo />}
+ *   footer={<Link to="/forgot-password">Forgot password?</Link>}
+ * >
+ *   <LoginForm />
+ * </AuthLayout>
+ * ```
+ */
+export function AuthLayout({
+	title,
+	description,
+	logo,
+	footer,
+	children,
+	className,
+}: AuthLayoutProps) {
+	return (
+		<div className="bg-background flex min-h-screen flex-col items-center justify-center p-4">
+			<div className="w-full max-w-sm space-y-6">
+				{/* Logo */}
+				{logo && <div className="flex justify-center">{logo}</div>}
+
+				{/* Main Card */}
+				<Card className={cn("w-full", className)}>
+					<CardHeader className="text-center">
+						<CardTitle className="text-lg">{title}</CardTitle>
+						{description && <CardDescription>{description}</CardDescription>}
+					</CardHeader>
+					<CardContent>{children}</CardContent>
+				</Card>
+
+				{/* Footer */}
+				{footer && (
+					<div className="text-muted-foreground text-center text-xs">
+						{footer}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/views/auth/forgot-password-form.tsx

@@ -0,0 +1,192 @@
+/**
+ * Forgot Password Form - request password reset email
+ */
+
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { Envelope, SpinnerGap, CheckCircle } from "@phosphor-icons/react";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import {
+	Field,
+	FieldContent,
+	FieldError,
+	FieldGroup,
+	FieldLabel,
+} from "../../components/ui/field";
+import { cn } from "../../lib/utils";
+
+export type ForgotPasswordFormValues = {
+	email: string;
+};
+
+export type ForgotPasswordFormProps = {
+	/** Called when form is submitted with valid data */
+	onSubmit: (values: ForgotPasswordFormValues) => Promise<void>;
+	/** Called when back to login link is clicked */
+	onBackToLoginClick?: () => void;
+	/** Default values */
+	defaultValues?: Partial<ForgotPasswordFormValues>;
+	/** Additional class name */
+	className?: string;
+	/** Error message from auth */
+	error?: string | null;
+};
+
+/**
+ * Forgot password form with email field
+ *
+ * @example
+ * ```tsx
+ * const authClient = createAdminAuthClient<typeof cms>({ baseURL: '...' })
+ *
+ * function ForgotPasswordPage() {
+ *   const [error, setError] = useState<string | null>(null)
+ *
+ *   const handleSubmit = async (values: ForgotPasswordFormValues) => {
+ *     const result = await authClient.forgetPassword({
+ *       email: values.email,
+ *       redirectTo: '/reset-password',
+ *     })
+ *     if (result.error) {
+ *       setError(result.error.message)
+ *     }
+ *   }
+ *
+ *   return (
+ *     <AuthLayout title="Forgot password">
+ *       <ForgotPasswordForm onSubmit={handleSubmit} error={error} />
+ *     </AuthLayout>
+ *   )
+ * }
+ * ```
+ */
+export function ForgotPasswordForm({
+	onSubmit,
+	onBackToLoginClick,
+	defaultValues,
+	className,
+	error,
+}: ForgotPasswordFormProps) {
+	const [isSuccess, setIsSuccess] = React.useState(false);
+
+	const {
+		register,
+		handleSubmit,
+		formState: { errors, isSubmitting },
+	} = useForm<ForgotPasswordFormValues>({
+		defaultValues: {
+			email: "",
+			...defaultValues,
+		},
+	});
+
+	const handleFormSubmit = handleSubmit(async (values) => {
+		await onSubmit(values);
+		if (!error) {
+			setIsSuccess(true);
+		}
+	});
+
+	// Success state
+	if (isSuccess) {
+		return (
+			<div className={cn("space-y-4 text-center", className)}>
+				<div className="bg-primary/10 mx-auto flex size-12 items-center justify-center rounded-full">
+					<CheckCircle className="text-primary size-6" weight="duotone" />
+				</div>
+				<div className="space-y-2">
+					<h3 className="text-sm font-medium">Check your email</h3>
+					<p className="text-muted-foreground text-xs">
+						We've sent a password reset link to your email address. Please check
+						your inbox and follow the instructions.
+					</p>
+				</div>
+				<Button
+					type="button"
+					variant="outline"
+					className="w-full"
+					onClick={onBackToLoginClick}
+				>
+					Back to login
+				</Button>
+			</div>
+		);
+	}
+
+	return (
+		<form onSubmit={handleFormSubmit} className={cn("space-y-4", className)}>
+			<p className="text-muted-foreground text-xs">
+				Enter your email address and we'll send you a link to reset your
+				password.
+			</p>
+
+			<FieldGroup>
+				{/* Email Field */}
+				<Field data-invalid={!!errors.email}>
+					<FieldLabel htmlFor="email">Email</FieldLabel>
+					<FieldContent>
+						<div className="relative">
+							<Envelope
+								className="text-muted-foreground absolute left-2 top-1/2 size-4 -translate-y-1/2"
+								weight="duotone"
+							/>
+							<Input
+								id="email"
+								type="email"
+								placeholder="you@example.com"
+								className="pl-8"
+								autoComplete="email"
+								aria-invalid={!!errors.email}
+								{...register("email", {
+									required: "Email is required",
+									pattern: {
+										value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+										message: "Invalid email address",
+									},
+								})}
+							/>
+						</div>
+						<FieldError>{errors.email?.message}</FieldError>
+					</FieldContent>
+				</Field>
+			</FieldGroup>
+
+			{/* Error Message */}
+			{error && (
+				<div className="bg-destructive/10 text-destructive rounded-md p-3 text-xs">
+					{error}
+				</div>
+			)}
+
+			{/* Submit Button */}
+			<Button
+				type="submit"
+				className="w-full"
+				size="lg"
+				disabled={isSubmitting}
+			>
+				{isSubmitting ? (
+					<>
+						<SpinnerGap className="animate-spin" weight="bold" />
+						Sending...
+					</>
+				) : (
+					"Send reset link"
+				)}
+			</Button>
+
+			{/* Back to Login Link */}
+			<p className="text-muted-foreground text-center text-xs">
+				Remember your password?{" "}
+				<button
+					type="button"
+					onClick={onBackToLoginClick}
+					className="text-primary hover:underline"
+				>
+					Back to login
+				</button>
+			</p>
+		</form>
+	);
+}

package/src/views/auth/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Auth views - authentication related components
+ */
+
+export { AuthLayout } from "./auth-layout";
+export type { AuthLayoutProps } from "./auth-layout";
+
+export { LoginForm } from "./login-form";
+export type { LoginFormProps, LoginFormValues } from "./login-form";
+
+export { ForgotPasswordForm } from "./forgot-password-form";
+export type {
+	ForgotPasswordFormProps,
+	ForgotPasswordFormValues,
+} from "./forgot-password-form";
+
+export { ResetPasswordForm } from "./reset-password-form";
+export type {
+	ResetPasswordFormProps,
+	ResetPasswordFormValues,
+} from "./reset-password-form";