{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-04",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "input",
    "label",
    "separator",
    "switch"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/auth-04.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { FaEye, FaEyeSlash } from \"react-icons/fa\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { FcGoogle } from \"react-icons/fc\";\n\ninterface LoginFormProps {\n  brandName?: string;\n  brandTagline?: string;\n  onGoogleLogin?: () => void;\n  onLogin?: (email: string, password: string, remember: boolean) => void;\n  onForgotPassword?: () => void;\n  onCreateAccount?: () => void;\n  copyrightYear?: number;\n  footerLinks?: { label: string; href: string }[];\n}\n\nexport default function LoginPage({\n  brandName = \"Watermelon\",\n  onGoogleLogin,\n  onLogin,\n  onForgotPassword,\n  onCreateAccount,\n  copyrightYear = 2026,\n  footerLinks = [\n    { label: \"Privacy\", href: \"#\" },\n    { label: \"Terms\", href: \"#\" },\n    { label: \"Support\", href: \"#\" },\n  ],\n}: LoginFormProps) {\n  const [email, setEmail] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  const [showPassword, setShowPassword] = useState(false);\n  const [remember, setRemember] = useState(false);\n\n  const handleSubmit = () => {\n    onLogin?.(email, password, remember);\n  };\n\n  return (\n    <div className=\"bg-background flex  w-full min-h-screen flex-col\">\n      <div className=\"flex flex-1 flex-col lg:flex-row\">\n        <div className=\"bg-background/50 relative hidden flex-col justify-between overflow-hidden p-12 lg:flex lg:w-1/2\">\n          <>\n            <img\n              src=\"https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=2070&auto=format&fit=crop\"\n              alt=\"Modern workspace\"\n              className=\"absolute inset-0 h-full w-full object-cover\"\n            />\n            <div className=\"absolute inset-0 bg-black/30\" />\n          </>\n        </div>\n\n        <div className=\"flex flex-1 items-center justify-center px-6 py-12 sm:px-12\">\n          <div className=\"w-full max-w-md space-y-8\">\n            <div className=\"space-y-1\">\n              <h2 className=\"text-foreground text-3xl font-bold tracking-tight\">\n                Welcome back\n              </h2>\n              <p className=\"text-muted-foreground text-sm\">\n                Sign in to pick up right where you left off.\n              </p>\n            </div>\n\n            <Button\n              variant=\"outline\"\n              className=\"bg-muted w-full gap-2 border-0 font-medium\"\n              onClick={onGoogleLogin}\n            >\n              <FcGoogle className=\"text-base\" />\n              Continue with Google\n            </Button>\n\n            <div className=\"flex items-center gap-3\">\n              <Separator className=\"flex-1\" />\n              <span className=\"text-muted-foreground text-sm font-medium tracking-widest\">\n                or\n              </span>\n              <Separator className=\"flex-1\" />\n            </div>\n\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"email\" className=\"text-sm font-medium\">\n                Work Email\n              </Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"you@company.com\"\n                value={email}\n                onChange={(e) => setEmail(e.target.value)}\n                className=\"bg-muted focus-visible:ring-primary/20 focus-visible:border-primary/50 h-10 border-transparent ring-0\"\n              />\n            </div>\n\n            <div className=\"space-y-1\">\n              <div className=\"flex items-center justify-between\">\n                <Label htmlFor=\"password\" className=\"text-sm font-medium\">\n                  Password\n                </Label>\n                <button\n                  type=\"button\"\n                  onClick={onForgotPassword}\n                  className=\"text-primary text-xs underline-offset-4 transition-all hover:underline\"\n                >\n                  Forgot password?\n                </button>\n              </div>\n              <div className=\"relative\">\n                <Input\n                  id=\"password\"\n                  type={showPassword ? \"text\" : \"password\"}\n                  placeholder=\"••••••••••\"\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                  className=\"bg-muted focus-visible:ring-primary/20 focus-visible:border-primary/50 h-10 border-transparent pr-10 ring-0\"\n                />\n                <button\n                  type=\"button\"\n                  onClick={() => setShowPassword((v) => !v)}\n                  className=\"text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2 transition-colors\"\n                  aria-label=\"Toggle password visibility\"\n                >\n                  {showPassword ? <FaEyeSlash /> : <FaEye />}\n                </button>\n              </div>\n            </div>\n\n            <div className=\"flex items-center gap-3\">\n              <Switch\n                id=\"remember\"\n                checked={remember}\n                onCheckedChange={setRemember}\n              />\n              <Label\n                htmlFor=\"remember\"\n                className=\"text-muted-foreground cursor-pointer text-sm select-none\"\n              >\n                Keep me signed in for 30 days\n              </Label>\n            </div>\n\n            <Button\n              className=\"h-11 w-full text-base font-semibold\"\n              onClick={handleSubmit}\n            >\n              Sign In\n            </Button>\n\n            <p className=\"text-muted-foreground text-center text-sm\">\n              New here?{\" \"}\n              <button\n                type=\"button\"\n                onClick={onCreateAccount}\n                className=\"text-primary font-medium underline-offset-4 transition-all hover:underline\"\n              >\n                Create a free account\n              </button>\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <footer className=\"border-border text-muted-foreground flex flex-col items-center justify-between gap-2 border-t px-6 py-4 text-xs sm:flex-row\">\n        <span>\n          © {copyrightYear} {brandName}. All rights reserved.\n        </span>\n        <div className=\"flex items-center gap-4\">\n          {footerLinks.map((link) => (\n            <a\n              key={link.label}\n              href={link.href}\n              className=\"hover:text-foreground transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </div>\n      </footer>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/auth-04.tsx"
    }
  ],
  "type": "registry:ui"
}