{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-01",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "card",
    "input",
    "separator"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/auth-01.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { MdLock, MdEmail, MdVisibility, MdVisibilityOff } from \"react-icons/md\";\nimport { FaGithub, FaMicrosoft, FaSlack } from \"react-icons/fa\";\n\nexport interface SocialProvider {\n  /** Display name of the provider */\n  name: string;\n  /** React node for the provider icon */\n  icon: React.ReactNode;\n  /** Callback fired when this provider is clicked */\n  onClick?: () => void;\n}\n\nexport interface Auth1Props {\n  /** Brand / product name */\n  brandName?: string;\n  /** Short descriptor below the brand */\n  brandDescriptor?: string;\n  /** Badge text shown above the heading */\n  badgeText?: string;\n  /** Main heading */\n  heading?: string;\n  /** Sub-copy below the heading */\n  subheading?: string;\n  /** Email field label */\n  emailLabel?: string;\n  /** Email field placeholder */\n  emailPlaceholder?: string;\n  /** Password field label */\n  passwordLabel?: string;\n  /** Password field placeholder */\n  passwordPlaceholder?: string;\n  /** Label for the primary submit button */\n  submitLabel?: string;\n  /** Social / OAuth providers */\n  socialProviders?: SocialProvider[];\n  /** Text between social buttons and email form */\n  dividerText?: string;\n  /** Forgot password link text */\n  forgotPasswordText?: string;\n  /** Callback when forgot password is clicked */\n  onForgotPassword?: () => void;\n  /** Bottom prompt text (before the link) */\n  bottomPromptText?: string;\n  /** Bottom prompt link text */\n  bottomPromptLinkText?: string;\n  /** Callback when bottom prompt link is clicked */\n  onBottomPromptClick?: () => void;\n  /** Callback when form is submitted */\n  onSubmit?: (email: string, password: string) => void;\n  /** Footer note text */\n  footerNote?: string;\n}\n\nconst DEFAULT_SOCIAL_PROVIDERS: SocialProvider[] = [\n  {\n    name: \"GitHub\",\n    icon: <FaGithub className=\"h-4 w-4\" />,\n  },\n  {\n    name: \"Microsoft\",\n    icon: <FaMicrosoft className=\"h-4 w-4\" />,\n  },\n  {\n    name: \"Slack\",\n    icon: <FaSlack className=\"h-4 w-4\" />,\n  },\n];\n\nexport function Auth1({\n  heading = \"Access your workspace\",\n  subheading = \"Connect with your team and deploy with confidence.\",\n\n  submitLabel = \"Continue to workspace\",\n  socialProviders = DEFAULT_SOCIAL_PROVIDERS,\n  dividerText = \"or use your credentials\",\n\n  bottomPromptText = \"First time here?\",\n  bottomPromptLinkText = \"Request an invite\",\n  onBottomPromptClick,\n  onSubmit,\n}: Auth1Props) {\n  const [email, setEmail] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  const [showPassword, setShowPassword] = useState(false);\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    onSubmit?.(email, password);\n  };\n\n  return (\n    <div className=\"flex min-h-screen w-full items-center justify-center px-4 py-12\">\n      <div className=\"w-full max-w-sm space-y-5\">\n        <Card className=\"border-border bg-muted dark:bg-muted gap-0 rounded-4xl p-2\">\n          <div className=\"bg-background h-full w-full rounded-3xl px-2 py-6 shadow-[0_2px_4px_0px_rgba(0,0,0,0.12)]\">\n            <CardHeader className=\"space-y-3 pb-4 text-center\">\n              <div className=\"space-y-1\">\n                <CardTitle className=\"text-xl font-extrabold tracking-tight sm:text-2xl\">\n                  {heading}\n                </CardTitle>\n                <CardDescription className=\"text-sm leading-relaxed\">\n                  {subheading}\n                </CardDescription>\n              </div>\n            </CardHeader>\n\n            <CardContent className=\"space-y-4\">\n              <form onSubmit={handleSubmit} className=\"space-y-4\">\n                <div className=\"space-y-2\">\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=\"Auth1-email\"\n                      type=\"email\"\n                      placeholder=\"Email\"\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-9 pl-10\"\n                      required\n                    />\n                  </div>\n\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=\"Auth1-password\"\n                      type={showPassword ? \"text\" : \"password\"}\n                      placeholder=\"Password\"\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-9 pr-10 pl-10\"\n                      required\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 ? (\n                        <MdVisibilityOff className=\"h-4 w-4\" />\n                      ) : (\n                        <MdVisibility className=\"h-4 w-4\" />\n                      )}\n                    </button>\n                  </div>\n                </div>\n\n                <Button\n                  type=\"submit\"\n                  className=\"from-primary to-primary/70 dark:to-primary/60 h-11 w-full bg-gradient-to-b text-sm font-semibold\"\n                >\n                  {submitLabel}\n                </Button>\n              </form>\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              <div className=\"grid grid-cols-3 gap-2.5\">\n                {socialProviders.map((provider) => (\n                  <Button\n                    key={provider.name}\n                    variant=\"outline\"\n                    type=\"button\"\n                    className=\"bg-muted h-10 gap-1.5 border-0 text-xs font-medium shadow-xs\"\n                    onClick={provider.onClick}\n                  >\n                    {provider.icon}\n                  </Button>\n                ))}\n              </div>\n            </CardContent>\n          </div>\n\n          <CardFooter className=\"justify-center border-0 pt-5\">\n            <p className=\"text-muted-foreground text-sm\">\n              {bottomPromptText}{\" \"}\n              <button\n                type=\"button\"\n                onClick={onBottomPromptClick}\n                className=\"text-primary font-semibold underline-offset-4 transition-all hover:underline\"\n              >\n                {bottomPromptLinkText}\n              </button>\n            </p>\n          </CardFooter>\n        </Card>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/auth-01.tsx"
    }
  ],
  "type": "registry:ui"
}