{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-05",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "checkbox",
    "input",
    "label",
    "separator"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/auth-05.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { MdLock, MdEmail, MdArrowForward, MdAutoAwesome } from \"react-icons/md\";\nimport { FaGithub } from \"react-icons/fa\";\nimport { FcGoogle } from \"react-icons/fc\";\n\nexport interface AuthFeature {\n  icon: React.ReactNode;\n  title: string;\n  description: string;\n}\n\nexport interface Auth5Props {\n  /** Brand / product name shown in the form panel */\n  brandName?: string;\n  /** Tag line shown below brand name */\n  tagline?: string;\n  /** Heading for the feature panel */\n  panelHeading?: string;\n  /** Sub-copy for the feature panel */\n  panelSubtext?: string;\n  /** List of features shown in the right panel */\n  features?: AuthFeature[];\n  /** Text for the primary CTA button */\n  submitLabel?: string;\n  /** Callback when the form is submitted */\n  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;\n  /** Link href for the sign-up page */\n  signUpHref?: string;\n  /** Link href for forgot password */\n  forgotPasswordHref?: string;\n}\n\nexport function Auth5({\n  brandName = \"Nucleus\",\n  submitLabel = \"Sign in\",\n  onSubmit,\n  signUpHref = \"#\",\n  forgotPasswordHref = \"#\",\n}: Auth5Props) {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col p-1 lg:flex-row\">\n      <section className=\"bg-background flex flex-1 flex-col items-center justify-center px-6 py-16 sm:px-10 lg:max-w-xl lg:px-16\">\n        <div className=\"w-full max-w-sm space-y-8\">\n          <div className=\"space-y-1\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"bg-primary flex h-8 w-8 items-center justify-center rounded-lg\">\n                <MdAutoAwesome className=\"text-primary-foreground h-4 w-4\" />\n              </span>\n              <span className=\"text-foreground text-xl font-bold tracking-tight\">\n                {brandName}\n              </span>\n            </div>\n          </div>\n\n          <div className=\"space-y-1\">\n            <h1 className=\"text-foreground text-2xl font-extrabold tracking-tight\">\n              Welcome back\n            </h1>\n            <p className=\"text-muted-foreground text-sm\">\n              Sign in to continue to your workspace.\n            </p>\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-3\">\n            <Button\n              variant=\"outline\"\n              type=\"button\"\n              className=\"bg-muted dark:bg-muted h-10 gap-2 text-sm font-medium shadow-[inset_0_1px_0_0_rgba(255,255,255,1),0px_0px_0px_0.5px_rgba(0,0,0,0.08),0px_1px_2px_-1px_rgba(0,0,0,0.08),0px_2px_4px_0px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.25),0px_0px_0px_0.5px_rgba(255,255,255,0.03),0px_1px_2px_-1px_rgba(255,255,255,0.08),0px_2px_4px_0px_rgba(255,255,255,0.08)]\"\n            >\n              <FcGoogle className=\"h-4 w-4\" />\n              Google\n            </Button>\n            <Button\n              variant=\"outline\"\n              type=\"button\"\n              className=\"bg-muted dark:bg-muted h-10 gap-2 text-sm font-medium shadow-[inset_0_1px_0_0_rgba(255,255,255,1),0px_0px_0px_0.5px_rgba(0,0,0,0.08),0px_1px_2px_-1px_rgba(0,0,0,0.08),0px_2px_4px_0px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.25),0px_0px_0px_0.5px_rgba(255,255,255,0.03),0px_1px_2px_-1px_rgba(255,255,255,0.08),0px_2px_4px_0px_rgba(255,255,255,0.08)]\"\n            >\n              <FaGithub className=\"h-4 w-4\" />\n              GitHub\n            </Button>\n          </div>\n\n          <div className=\"flex items-center gap-3\">\n            <Separator className=\"flex-1\" />\n            <span className=\"text-muted-foreground shrink-0 text-xs\">\n              or continue with email\n            </span>\n            <Separator className=\"flex-1\" />\n          </div>\n\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              onSubmit?.(e);\n            }}\n            className=\"space-y-5\"\n          >\n            <div className=\"space-y-1.5\">\n              <Label htmlFor=\"Auth5-email\" className=\"text-sm font-medium\">\n                Email address\n              </Label>\n              <div className=\"relative\">\n                <MdEmail className=\"text-muted-foreground absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2\" />\n                <Input\n                  id=\"Auth5-email\"\n                  type=\"email\"\n                  placeholder=\"you@company.com\"\n                  className=\"bg-muted focus-visible:ring-primary/20 focus-visible:border-primary/50 h-11 border-0 pl-10 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_1px_4px_0px_rgba(0,0,0,0.08)]\"\n                  required\n                />\n              </div>\n            </div>\n\n            <div className=\"space-y-1.5\">\n              <div className=\"flex items-center justify-between\">\n                <Label htmlFor=\"Auth5-password\" className=\"text-sm font-medium\">\n                  Password\n                </Label>\n                <a\n                  href={forgotPasswordHref}\n                  className=\"text-primary text-xs font-medium hover:underline\"\n                >\n                  Forgot password?\n                </a>\n              </div>\n              <div className=\"relative\">\n                <MdLock className=\"text-muted-foreground absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2\" />\n                <Input\n                  id=\"Auth5-password\"\n                  type=\"password\"\n                  placeholder=\"••••••••••\"\n                  className=\"bg-muted focus-visible:ring-primary/20 focus-visible:border-primary/50 h-11 border-0 pl-10 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_1px_4px_0px_rgba(0,0,0,0.08)]\"\n                  required\n                />\n              </div>\n            </div>\n\n            <div className=\"flex items-center gap-2\">\n              <Checkbox id=\"Auth5-remember\" />\n              <Label\n                htmlFor=\"Auth5-remember\"\n                className=\"text-muted-foreground cursor-pointer text-sm\"\n              >\n                Keep me signed in\n              </Label>\n            </div>\n\n            <Button\n              type=\"submit\"\n              className=\"from-primary to-primary/70 h-11 w-full gap-2 bg-linear-to-b font-semibold text-white shadow-sm\"\n            >\n              {submitLabel}\n              <MdArrowForward className=\"h-4 w-4\" />\n            </Button>\n          </form>\n\n          <p className=\"text-muted-foreground text-center text-sm\">\n            Don&apos;t have an account?{\" \"}\n            <a\n              href={signUpHref}\n              className=\"text-primary font-medium hover:underline\"\n            >\n              Create one for free\n            </a>\n          </p>\n        </div>\n      </section>\n\n      <section className=\"relative hidden flex-1 flex-col items-center justify-center overflow-hidden rounded-4xl bg-white p-10 lg:flex lg:p-16\">\n        <img\n          src=\"https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=2072&auto=format&fit=crop\"\n          alt=\"Developer workspace\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n        />\n      </section>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/auth-05.tsx"
    }
  ],
  "type": "registry:ui"
}