{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-02",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "input",
    "label",
    "separator"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/auth-02.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\";\n\nimport {\n  MdPerson,\n  MdEmail,\n  MdLock,\n  MdArrowForward,\n} from \"react-icons/md\";\nimport { FaGoogle, FaApple } from \"react-icons/fa\";\n\nexport interface TrustStat {\n  value: string;\n  label: string;\n}\n\nexport interface Auth2Props {\n  /** Brand / product name */\n  brandName?: string;\n  /** Short brand descriptor shown below the name */\n  brandDescriptor?: string;\n  /** Main heading of the form */\n  heading?: string;\n  /** Sub-copy below the heading */\n  subheading?: string;\n  /** Badge text displayed above the heading */\n  badgeText?: string;\n  /** Trust stats rendered in the bottom strip */\n  trustStats?: TrustStat[];\n  /** Label for the primary submit button */\n  submitLabel?: string;\n  /** Href for the sign-in link */\n  signInHref?: string;\n  /** Href for the terms of service */\n  termsHref?: string;\n  /** Href for the privacy policy */\n  privacyHref?: string;\n  /** Callback when form is submitted */\n  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;\n}\n\nexport function Auth2({\n  heading = \"Create your free account\",\n  subheading = \"Join thousands of teams already building smarter, faster, and together.\",\n\n  submitLabel = \"Get started for free\",\n\n  onSubmit,\n}: Auth2Props) {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <main className=\"flex flex-1 items-center justify-center px-2\">\n        <div className=\"bg-muted w-full max-w-md space-y-3 rounded-4xl p-3 shadow-[inset_0_0_2px_0.5px_rgba(0,0,0,0.05)]\">\n          <div className=\"bg-background rounded-3xl p-4 shadow-xs sm:p-8\">\n            <div className=\"mb-4 space-y-1\">\n              <h1 className=\"text-foreground text-2xl font-extrabold tracking-tight sm:text-3xl\">\n                {heading}\n              </h1>\n              <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                {subheading}\n              </p>\n            </div>\n\n            <div className=\"grid grid-cols-2 gap-3\">\n              <div className=\"bg-muted rounded-xl p-1 shadow-[inset_0_0_2px_0.5px_rgba(0,0,0,0.05)]\">\n                <Button\n                  variant=\"outline\"\n                  type=\"button\"\n                  className=\"hover:bg-background/80 dark:bg-background dark:hover:bg-background/80 h-11 w-full gap-2 border-none text-sm font-medium shadow-xs\"\n                >\n                  <FaGoogle className=\"h-4 w-4\" />\n                  Google\n                </Button>\n              </div>\n              <div className=\"bg-muted rounded-xl p-1 shadow-[inset_0_0_2px_0.5px_rgba(0,0,0,0.05)]\">\n                <Button\n                  variant=\"outline\"\n                  type=\"button\"\n                  className=\"hover:bg-background/80 dark:bg-background dark:hover:bg-background/80 h-11 w-full gap-2 border-none text-sm font-medium shadow-xs\"\n                >\n                  <FaApple className=\"h-4 w-4\" />\n                  Apple\n                </Button>\n              </div>\n            </div>\n\n            <div className=\"my-4 flex items-center gap-3\">\n              <Separator className=\"flex-1\" />\n              <span className=\"text-muted-foreground shrink-0 text-xs\">\n                or sign up 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=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                <div className=\"space-y-1.5\">\n                  <Label\n                    htmlFor=\"auth2-firstname\"\n                    className=\"text-sm font-medium\"\n                  >\n                    First 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=\"auth2-firstname\"\n                      type=\"text \"\n                      placeholder=\"Alex\"\n                      autoComplete=\"given-name\"\n                      className=\"bg-muted focus-visible:ring-primary/20 h-11 border-none pl-10\"\n                      required\n                    />\n                  </div>\n                </div>\n\n                <div className=\"space-y-1.5\">\n                  <Label\n                    htmlFor=\"auth2-lastname\"\n                    className=\"text-sm font-medium\"\n                  >\n                    Last 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=\"auth2-lastname\"\n                      type=\"text\"\n                      placeholder=\"Rivera\"\n                      autoComplete=\"family-name\"\n                      className=\"bg-muted focus-visible:ring-primary/20 h-11 border-none pl-10\"\n                      required\n                    />\n                  </div>\n                </div>\n              </div>\n\n              <div className=\"space-y-1.5\">\n                <Label htmlFor=\"auth2-email\" className=\"text-sm font-medium\">\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=\"auth2-email\"\n                    type=\"email\"\n                    placeholder=\"alex@company.io\"\n                    autoComplete=\"email\"\n                    className=\"bg-muted focus-visible:ring-primary/20 h-11 border-none pl-10\"\n                    required\n                  />\n                </div>\n              </div>\n\n              <div className=\"space-y-1.5\">\n                <Label htmlFor=\"auth2-password\" className=\"text-sm font-medium\">\n                  Password\n                </Label>\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=\"auth2-password\"\n                    type=\"password\"\n                    placeholder=\"Min. 8 characters\"\n                    autoComplete=\"new-password\"\n                    className=\"bg-muted focus-visible:ring-primary/20 h-11 border-none pl-10\"\n                    required\n                    minLength={8}\n                  />\n                </div>\n                <p className=\"text-muted-foreground text-xs\">\n                  Use at least 8 characters with a mix of letters and numbers.\n                </p>\n              </div>\n              <Button\n                type=\"submit\"\n                className=\"from-primary to-primary/60 h-11 w-full gap-2 bg-linear-to-b font-semibold shadow-sm\"\n              >\n                {submitLabel}\n                <MdArrowForward className=\"h-4 w-4\" />\n              </Button>\n            </form>\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/auth-02.tsx"
    }
  ],
  "type": "registry:ui"
}