{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "login",
    "title": "Login Form",
    "description": "A dark-themed login form with email/password fields, show/hide password toggle, Google OAuth button, forgot password link, and loading state.",
    "dependencies": [],
    "registryDependencies": [],
    "files": [
        {
            "path": "registry/default/login/login.tsx",
            "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { useState } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nexport interface LoginFormProps {\r\n    onSubmit?: (values: { email: string; password: string }) => void;\r\n    onGoogleSignIn?: () => void;\r\n    onForgotPassword?: () => void;\r\n    onSignUp?: () => void;\r\n    className?: string;\r\n}\r\n\r\nexport function LoginForm({\r\n    onSubmit,\r\n    onGoogleSignIn,\r\n    onForgotPassword,\r\n    onSignUp,\r\n    className,\r\n}: LoginFormProps) {\r\n    const [email, setEmail] = useState(\"\");\r\n    const [password, setPassword] = useState(\"\");\r\n    const [showPassword, setShowPassword] = useState(false);\r\n    const [loading, setLoading] = useState(false);\r\n\r\n    const handleSubmit = async (e: React.FormEvent) => {\r\n        e.preventDefault();\r\n        setLoading(true);\r\n        await onSubmit?.({ email, password });\r\n        setLoading(false);\r\n    };\r\n\r\n    return (\r\n        <div\r\n            className={cn(\r\n                \"w-full max-w-sm rounded-2xl border border-white/10 bg-[#0a0a0a]/90 backdrop-blur-xl p-8 shadow-2xl\",\r\n                className\r\n            )}\r\n        >\r\n            {/* Header */}\r\n            <div className=\"mb-8 text-center\">\r\n                <div className=\"mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-white/5 border border-white/10\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\" className=\"w-6 h-6 text-gray-300\">\r\n                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z\" />\r\n                    </svg>\r\n                </div>\r\n                <h1 className=\"text-2xl font-bold text-white tracking-tight\">Welcome back</h1>\r\n                <p className=\"mt-1 text-sm text-neutral-500\">Sign in to your account to continue</p>\r\n            </div>\r\n\r\n            {/* Google Sign-In */}\r\n            <button\r\n                type=\"button\"\r\n                onClick={onGoogleSignIn}\r\n                className=\"w-full flex items-center justify-center gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm font-medium text-gray-300 hover:bg-white/10 hover:text-white transition-all duration-200 mb-6\"\r\n            >\r\n                <svg viewBox=\"0 0 24 24\" className=\"w-4 h-4 shrink-0\" aria-hidden=\"true\">\r\n                    <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\" />\r\n                    <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" />\r\n                    <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\" />\r\n                    <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" />\r\n                </svg>\r\n                Continue with Google\r\n            </button>\r\n\r\n            {/* Divider */}\r\n            <div className=\"relative mb-6\">\r\n                <div className=\"absolute inset-0 flex items-center\">\r\n                    <div className=\"w-full border-t border-white/8\" />\r\n                </div>\r\n                <div className=\"relative flex justify-center text-xs\">\r\n                    <span className=\"bg-[#0a0a0a] px-3 text-neutral-600\">or continue with email</span>\r\n                </div>\r\n            </div>\r\n\r\n            {/* Form */}\r\n            <form onSubmit={handleSubmit} className=\"space-y-4\">\r\n                {/* Email */}\r\n                <div className=\"space-y-1.5\">\r\n                    <label htmlFor=\"login-email\" className=\"block text-sm font-medium text-neutral-400\">\r\n                        Email\r\n                    </label>\r\n                    <input\r\n                        id=\"login-email\"\r\n                        type=\"email\"\r\n                        autoComplete=\"email\"\r\n                        required\r\n                        value={email}\r\n                        onChange={(e) => setEmail(e.target.value)}\r\n                        placeholder=\"you@example.com\"\r\n                        className=\"w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-neutral-600 outline-none transition-all focus:border-white/25 focus:bg-white/8 focus:ring-0\"\r\n                    />\r\n                </div>\r\n\r\n                {/* Password */}\r\n                <div className=\"space-y-1.5\">\r\n                    <div className=\"flex items-center justify-between\">\r\n                        <label htmlFor=\"login-password\" className=\"block text-sm font-medium text-neutral-400\">\r\n                            Password\r\n                        </label>\r\n                        <button\r\n                            type=\"button\"\r\n                            onClick={onForgotPassword}\r\n                            className=\"text-xs text-neutral-500 hover:text-neutral-300 transition-colors\"\r\n                        >\r\n                            Forgot password?\r\n                        </button>\r\n                    </div>\r\n                    <div className=\"relative\">\r\n                        <input\r\n                            id=\"login-password\"\r\n                            type={showPassword ? \"text\" : \"password\"}\r\n                            autoComplete=\"current-password\"\r\n                            required\r\n                            value={password}\r\n                            onChange={(e) => setPassword(e.target.value)}\r\n                            placeholder=\"••••••••\"\r\n                            className=\"w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 pr-10 text-sm text-white placeholder-neutral-600 outline-none transition-all focus:border-white/25 focus:bg-white/8 focus:ring-0\"\r\n                        />\r\n                        <button\r\n                            type=\"button\"\r\n                            onClick={() => setShowPassword((v) => !v)}\r\n                            className=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-600 hover:text-neutral-300 transition-colors\"\r\n                            tabIndex={-1}\r\n                        >\r\n                            {showPassword ? (\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\" className=\"w-4 h-4\">\r\n                                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88\" />\r\n                                </svg>\r\n                            ) : (\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\" className=\"w-4 h-4\">\r\n                                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z\" />\r\n                                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" />\r\n                                </svg>\r\n                            )}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n\r\n                {/* Submit */}\r\n                <button\r\n                    type=\"submit\"\r\n                    disabled={loading}\r\n                    className=\"mt-2 w-full rounded-xl bg-white px-4 py-2.5 text-sm font-semibold text-black hover:bg-neutral-200 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200 shadow-lg shadow-white/5\"\r\n                >\r\n                    {loading ? (\r\n                        <span className=\"flex items-center justify-center gap-2\">\r\n                            <svg className=\"w-4 h-4 animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n                                <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\r\n                                <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\" />\r\n                            </svg>\r\n                            Signing in…\r\n                        </span>\r\n                    ) : (\r\n                        \"Sign in\"\r\n                    )}\r\n                </button>\r\n            </form>\r\n\r\n            {/* Footer */}\r\n            <p className=\"mt-6 text-center text-sm text-neutral-600\">\r\n                Don&apos;t have an account?{\" \"}\r\n                <button\r\n                    type=\"button\"\r\n                    onClick={onSignUp}\r\n                    className=\"text-neutral-300 font-medium hover:text-white transition-colors\"\r\n                >\r\n                    Sign up\r\n                </button>\r\n            </p>\r\n        </div>\r\n    );\r\n}\r\n",
            "type": "registry:component",
            "target": ""
        }
    ],
    "type": "registry:block"
}