"use client"; import React, { useState } from "react"; import { motion, HTMLMotionProps } from "framer-motion"; import { Mail, Lock, ArrowRight, Github, Loader2 } from "lucide-react"; // --- TYPES --- export type GlassAccentColor = "orange" | "indigo" | "emerald"; export interface GlassLoginProps extends Omit, "ref" | "children" | "onSubmit"> { title?: string; subtitle?: string; accent?: GlassAccentColor; onSubmitAction?: (data: { email: string; pass: string }) => Promise; /** React 19 native ref support */ ref?: React.Ref; } /** * Glass Login Pro (v2.1 Ultra) * A premium bimodal glassmorphism login form with integrated ambient orbs. * Optimized for React 19, strictly typed, and JIT-safe. */ export const GlassLoginBasic = ({ title = "Welcome Back", subtitle = "Enter your credentials to access the vault.", accent = "orange", onSubmitAction, className, ref, ...props }: GlassLoginProps) => { const [form, setForm] = useState({ email: "", pass: "" }); const [isSubmitting, setIsSubmitting] = useState(false); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (isSubmitting) return; setIsSubmitting(true); try { if (onSubmitAction) await onSubmitAction(form); else await new Promise(r => setTimeout(r, 1500)); // Demo delay } finally { setIsSubmitting(false); } }; // Safe Color Mapping for Tailwind JIT (Ambient Orbs & Accents) const themeMaps: Record = { orange: { orb1: "bg-orange-500/20 dark:bg-orange-500/30", orb2: "bg-amber-500/20 dark:bg-amber-500/30", text: "text-orange-500", ring: "focus-within:border-orange-500/50 focus-within:ring-orange-500/20", button: "hover:bg-orange-500 dark:hover:bg-orange-500" }, indigo: { orb1: "bg-indigo-500/20 dark:bg-indigo-500/30", orb2: "bg-purple-500/20 dark:bg-purple-500/30", text: "text-indigo-500", ring: "focus-within:border-indigo-500/50 focus-within:ring-indigo-500/20", button: "hover:bg-indigo-500 dark:hover:bg-indigo-500" }, emerald: { orb1: "bg-emerald-500/20 dark:bg-emerald-500/30", orb2: "bg-teal-500/20 dark:bg-teal-500/30", text: "text-emerald-500", ring: "focus-within:border-emerald-500/50 focus-within:ring-emerald-500/20", button: "hover:bg-emerald-500 dark:hover:bg-emerald-500" } }; const current = themeMaps[accent]; return (

{/* DECORATIVE AMBIENT ORBS */} {/* THE GLASS CARD */}

{title}

{subtitle}

{/* EMAIL INPUT */}

Email Address

setForm({ ...form, email: e.target.value })} placeholder="alexis@uixtra.com" className="w-full h-14 pl-12 pr-4 bg-transparent rounded-2xl text-neutral-900 dark:text-white placeholder:text-neutral-400 dark:placeholder:text-neutral-600 outline-none font-medium" />

{/* PASSWORD INPUT */}

Password

setForm({ ...form, pass: e.target.value })} placeholder="••••••••" className="w-full h-14 pl-12 pr-4 bg-transparent rounded-2xl text-neutral-900 dark:text-white placeholder:text-neutral-400 dark:placeholder:text-neutral-600 outline-none font-medium tracking-widest" />

{/* SIGN IN BUTTON */} {isSubmitting ? ( ) : ( <> Sign In )} {/* DIVIDER */}

Or continue with

{/* SOCIAL LOGIN */} GitHub

Don't have an account?

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function GlassLoginDemo() { return (

); }