{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-03",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "input",
    "label",
    "separator",
    "tabs"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/auth-03.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\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 { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport {\n  MdEmail,\n  MdLock,\n  MdPerson,\n  MdVisibility,\n  MdVisibilityOff,\n  MdArrowForward,\n} from \"react-icons/md\";\nimport { FaGithub, FaGoogle } from \"react-icons/fa\";\n\nexport interface Auth3SocialProvider {\n  /** Unique key for the provider */\n  id: string;\n  /** Display label */\n  label: string;\n  /** Filled icon node */\n  icon: React.ReactNode;\n  /** Click handler */\n  onClick?: () => void;\n}\n\nexport interface Auth3Props {\n  /** Brand / product name */\n  brandName?: string;\n  /** One-line brand descriptor */\n  brandDescriptor?: string;\n  /** Social OAuth providers shown above the form */\n  socialProviders?: Auth3SocialProvider[];\n  /** Divider text between social and email form */\n  dividerText?: string;\n  /** Label for the sign-in submit button */\n  signInLabel?: string;\n  /** Label for the sign-up submit button */\n  signUpLabel?: string;\n  /** Forgot-password link text */\n  forgotPasswordText?: string;\n  /** Callback when forgot-password is clicked */\n  onForgotPassword?: () => void;\n  /** Callback when sign-in form is submitted */\n  onSignIn?: (email: string, password: string) => void;\n  /** Callback when sign-up form is submitted */\n  onSignUp?: (name: string, email: string, password: string) => void;\n  /** Terms of service link href */\n  termsHref?: string;\n  /** Privacy policy link href */\n  privacyHref?: string;\n}\n\nconst DEFAULT_SOCIAL_PROVIDERS: Auth3SocialProvider[] = [\n  {\n    id: \"google\",\n    label: \"Google\",\n    icon: <FaGoogle className=\"h-4 w-4\" />,\n  },\n  {\n    id: \"github\",\n    label: \"GitHub\",\n    icon: <FaGithub className=\"h-4 w-4\" />,\n  },\n];\n\ninterface PasswordInputProps {\n  id: string;\n  placeholder: string;\n  value: string;\n  onChange: (v: string) => void;\n  autoComplete?: string;\n}\n\nfunction PasswordInput({\n  id,\n  placeholder,\n  value,\n  onChange,\n}: PasswordInputProps) {\n  const [visible, setVisible] = useState(false);\n\n  return (\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={id}\n        type={visible ? \"text\" : \"password\"}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        className=\"bg-muted focus-visible:ring-primary/20 focus-visible:border-primary/50 h-10 rounded-none border-transparent pr-10 pl-10 shadow-none\"\n        required\n      />\n      <button\n        type=\"button\"\n        onClick={() => setVisible((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={visible ? \"Hide password\" : \"Show password\"}\n      >\n        {visible ? (\n          <MdVisibilityOff className=\"h-4 w-4\" />\n        ) : (\n          <MdVisibility className=\"h-4 w-4\" />\n        )}\n      </button>\n    </div>\n  );\n}\n\nexport function Auth3({\n  socialProviders = DEFAULT_SOCIAL_PROVIDERS,\n  dividerText = \"or\",\n  signInLabel = \"Sign in\",\n  signUpLabel = \"Create account\",\n  forgotPasswordText = \"Forgot password?\",\n  onForgotPassword,\n  onSignIn,\n  onSignUp,\n  termsHref = \"#\",\n  privacyHref = \"#\",\n}: Auth3Props) {\n  const [siEmail, setSiEmail] = useState(\"\");\n  const [siPassword, setSiPassword] = useState(\"\");\n\n  const [suName, setSuName] = useState(\"\");\n  const [suEmail, setSuEmail] = useState(\"\");\n  const [suPassword, setSuPassword] = useState(\"\");\n\n  const handleSignIn = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    onSignIn?.(siEmail, siPassword);\n  };\n\n  const handleSignUp = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    onSignUp?.(suName, suEmail, suPassword);\n  };\n\n  return (\n    <div className=\"bg-background flex min-h-screen w-full items-center justify-center px-4 py-16\">\n      <div className=\"w-full max-w-md space-y-8\">\n        <div className=\"border-border bg-card rounded-none border shadow-sm\">\n          <Tabs defaultValue=\"signin\" className=\"w-full\">\n            <TabsList className=\"border-border bg-muted grid h-12! w-full grid-cols-2 rounded-t-none rounded-b-none border-b p-1\">\n              <TabsTrigger\n                value=\"signin\"\n                className=\"data-[state=active]:bg-background rounded-none text-sm font-medium data-[state=active]:shadow-sm\"\n              >\n                Sign in\n              </TabsTrigger>\n              <TabsTrigger\n                value=\"signup\"\n                className=\"data-[state=active]:bg-background rounded-none text-sm font-medium data-[state=active]:shadow-sm\"\n              >\n                Create account\n              </TabsTrigger>\n            </TabsList>\n\n            <TabsContent value=\"signin\" className=\"p-4\">\n              <form onSubmit={handleSignIn} className=\"space-y-4\">\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {socialProviders.map((provider) => (\n                    <Button\n                      key={provider.id}\n                      variant=\"outline\"\n                      type=\"button\"\n                      className=\"bg-muted h-10 gap-2 rounded-none border-0 text-sm font-medium shadow-none\"\n                      onClick={provider.onClick}\n                    >\n                      {provider.icon}\n                      {provider.label}\n                    </Button>\n                  ))}\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <Separator className=\"flex-1\" />\n                  <span className=\"text-muted-foreground shrink-0 text-xs\">\n                    {dividerText}\n                  </span>\n                  <Separator className=\"flex-1\" />\n                </div>\n                <div className=\"space-y-1.5\">\n                  <Label\n                    htmlFor=\"auth3-si-email\"\n                    className=\"text-sm font-medium\"\n                  >\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=\"auth3-si-email\"\n                      type=\"email\"\n                      placeholder=\"you@company.com\"\n                      value={siEmail}\n                      onChange={(e) => setSiEmail(e.target.value)}\n                      autoComplete=\"email\"\n                      className=\"bg-muted focus-visible:ring-primary/20 focus-visible:border-primary/50 h-10 rounded-none border-transparent pl-10 shadow-none\"\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\n                      htmlFor=\"auth3-si-password\"\n                      className=\"text-sm font-medium\"\n                    >\n                      Password\n                    </Label>\n                    <button\n                      type=\"button\"\n                      onClick={onForgotPassword}\n                      className=\"text-primary rounded-none text-xs underline-offset-4 transition-all hover:underline\"\n                    >\n                      {forgotPasswordText}\n                    </button>\n                  </div>\n                  <PasswordInput\n                    id=\"auth3-si-password\"\n                    placeholder=\"••••••••••\"\n                    value={siPassword}\n                    onChange={setSiPassword}\n                    autoComplete=\"current-password\"\n                  />\n                </div>\n\n                {/* Submit */}\n                <Button\n                  type=\"submit\"\n                  className=\"h-10 w-full gap-2 rounded-none font-semibold shadow-[0px_0px_4px_1px_rgba(0,0,0,0.05),inset_0_0px_4px_1px_rgba(255,255,255,0.45),inset_0_1px_0px_0px_rgba(255,255,255,0.35)]\"\n                >\n                  {signInLabel}\n                  <MdArrowForward className=\"h-4 w-4\" />\n                </Button>\n              </form>\n            </TabsContent>\n\n            <TabsContent value=\"signup\" className=\"space-y-5 p-6\">\n              <div className=\"grid grid-cols-2 gap-3\">\n                {socialProviders.map((provider) => (\n                  <Button\n                    key={provider.id}\n                    variant=\"outline\"\n                    type=\"button\"\n                    className=\"bg-muted h-10 gap-2 rounded-none border-0 text-sm font-medium shadow-none\"\n                    onClick={provider.onClick}\n                  >\n                    {provider.icon}\n                    {provider.label}\n                  </Button>\n                ))}\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                  {dividerText}\n                </span>\n                <Separator className=\"flex-1\" />\n              </div>\n\n              <form onSubmit={handleSignUp} className=\"space-y-4\">\n                <div className=\"space-y-1.5\">\n                  <Label\n                    htmlFor=\"auth3-su-name\"\n                    className=\"text-sm font-medium\"\n                  >\n                    Full name\n                  </Label>\n                  <div className=\"relative\">\n                    <MdPerson className=\"text-muted-foreground absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2\" />\n                    <Input\n                      id=\"auth3-su-name\"\n                      type=\"text\"\n                      placeholder=\"Jane Smith\"\n                      value={suName}\n                      onChange={(e) => setSuName(e.target.value)}\n                      autoComplete=\"name\"\n                      className=\"bg-muted focus-visible:ring-primary/20 focus-visible:border-primary/50 h-10 rounded-none border-0 border-transparent pl-10 shadow-none\"\n                      required\n                    />\n                  </div>\n                </div>\n\n                <div className=\"space-y-1.5\">\n                  <Label\n                    htmlFor=\"auth3-su-email\"\n                    className=\"text-sm font-medium\"\n                  >\n                    Work email\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=\"auth3-su-email\"\n                      type=\"email\"\n                      placeholder=\"jane@company.com\"\n                      value={suEmail}\n                      onChange={(e) => setSuEmail(e.target.value)}\n                      className=\"bg-muted focus-visible:ring-primary/20 focus-visible:border-primary/50 h-10 rounded-none border-0 border-transparent pl-10 shadow-none\"\n                      required\n                    />\n                  </div>\n                </div>\n\n                <div className=\"space-y-1.5\">\n                  <Label\n                    htmlFor=\"auth3-su-password\"\n                    className=\"text-sm font-medium\"\n                  >\n                    Password\n                  </Label>\n                  <PasswordInput\n                    id=\"auth3-su-password\"\n                    placeholder=\"At least 8 characters\"\n                    value={suPassword}\n                    onChange={setSuPassword}\n                  />\n                </div>\n\n                <Button\n                  type=\"submit\"\n                  className=\"mt-2 h-10 w-full gap-2 rounded-none font-semibold shadow-[0px_0px_4px_1px_rgba(0,0,0,0.05),inset_0_0px_4px_1px_rgba(255,255,255,0.45),inset_0_1px_0px_0px_rgba(255,255,255,0.35)]\"\n                >\n                  {signUpLabel}\n                  <MdArrowForward className=\"h-4 w-4\" />\n                </Button>\n\n                <p className=\"text-muted-foreground text-center text-xs leading-relaxed\">\n                  By creating an account you agree to our{\" \"}\n                  <a\n                    href={termsHref}\n                    className=\"text-primary underline-offset-4 hover:underline\"\n                  >\n                    Terms of Service\n                  </a>{\" \"}\n                  and{\" \"}\n                  <a\n                    href={privacyHref}\n                    className=\"text-primary underline-offset-4 hover:underline\"\n                  >\n                    Privacy Policy\n                  </a>\n                  .\n                </p>\n              </form>\n            </TabsContent>\n          </Tabs>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/auth-03.tsx"
    }
  ],
  "type": "registry:ui"
}