{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "login",
  "type": "registry:component",
  "title": "Login",
  "description": "Simple Signup form",
  "dependencies": [
    "@react-three/fiber",
    "@react-three/drei",
    "three"
  ],
  "registryDependencies": [
    "input",
    "button",
    "label"
  ],
  "files": [
    {
      "path": "components/chatcn/3d/signup.tsx",
      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport { useContext, createContext } from \"react\";\nimport Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\nimport Image from \"next/image\";\n\ntype FormData = {\n  [key: string]: string;\n};\n\ntype SignupContextType = {\n  formData: FormData;\n  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  handleSubmit: (e: React.FormEvent) => void;\n};\n\nconst SignupContext = createContext<SignupContextType | undefined>(undefined);\nexport const useForm = () => {\n  const context = useContext(SignupContext);\n  if (!context) throw new Error(\"missing context\");\n  return context;\n};\nexport default function SignUpForm({\n  children,\n  className,\n  onSubmit,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  onSubmit?: (formData: FormData) => void;\n}) {\n  const [formData, setFormData] = useState({\n    fullName: \"\",\n    email: \"\",\n    password: \"\",\n    confirmPassword: \"\",\n  });\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    onSubmit?.(formData);\n    setFormData({\n      fullName: \"\",\n      email: \"\",\n      password: \"\",\n      confirmPassword: \"\",\n    });\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setFormData({\n      ...formData,\n      [e.target.name]: e.target.value,\n    });\n  };\n\n  return (\n    <SignupContext.Provider value={{ formData, handleChange, handleSubmit }}>\n      <form\n        onSubmit={handleSubmit}\n        className={cn(\n          \"w-full max-w-xl p-6 shadow-[0_0_10px_rgba(0,0,0,0.1)] rounded-lg bg-background mx-auto\",\n          className\n        )}\n      >\n        {children}\n      </form>\n    </SignupContext.Provider>\n  );\n}\nexport function SignUpHeader({\n  heading,\n  subheading,\n  className,\n}: {\n  heading: string;\n  subheading: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"mb-3 text-center\", className)}>\n      <h1 className=\"text-2xl font-semibold text-primary mb-1\">{heading}</h1>\n      <p className=\"text-muted-foreground text-md\">{subheading}</p>\n    </div>\n  );\n};\n\nexport function SignUpField({ children, className }: { children: React.ReactNode, className?:string }) {\n  return <div className={cn(\"space-y-2 py-2.5\", className)}>{children}</div>;\n};\nexport function SignUpLabel({\n  htmlFor,\n  children,\n  className,\n}: {\n  htmlFor: string;\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <Label htmlFor={htmlFor} className={cn(\"text-primary text-sm\", className)}>\n      {children}\n    </Label>\n  );\n};\ntype FormInputProps = {\n  name: \"fullName\" | \"email\" | \"password\" | \"confirmPassword\";\n  type: string;\n  placeholder: string;\n  minLength?: number;\n};\nexport function SignUpInput({\n  name,\n  type,\n  placeholder,\n  minLength,\n  className\n}: FormInputProps & { className?: string }) {\n  const { formData, handleChange } = useForm();\n  return (\n    <Input\n      id={name}\n      name={name}\n      type={type}\n      placeholder={placeholder}\n      value={formData[name]}\n      onChange={handleChange}\n      minLength={minLength}\n      className={cn(\"bg-muted/50 text-primary placeholder:text-gray-80 h-9 rounded-lg\", className)}\n    />\n  );\n};\n\nexport function SignUpHelperText({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <p className={cn(\"text-muted-foreground text-sm mt-2\", className)}>{children}</p>;\n}\n\nexport function SignUpActions({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn(\"space-y-3 pt-2\", className)}>{children}</div>;\n}\n\nexport function SignUpSubmitButton({\n  text = \"Submit\",\n  redirectTo,\n}: {\n  text?: string;\n  redirectTo?: string;\n}) {\n  if (redirectTo) {\n    return (\n      <Link href={redirectTo} className=\"block\">\n        <Button\n          type=\"button\"\n          className=\"w-full h-9 bg-primary text-secondary font-medium rounded-lg\"\n        >\n          {text}\n        </Button>\n      </Link>\n    );\n  }\n  return (\n    <Button\n      type=\"submit\"\n      className=\"w-full h-9 bg-primary text-secondary font-medium rounded-lg\"\n    >\n      {text}\n    </Button>\n  );\n};\nexport function SignUpSocialButton({\n  provider,\n  icon,\n  onClick,\n  redirectTo,\n}: {\n  provider: string;\n  icon?: React.ReactNode;\n  onClick?: () => void;\n  redirectTo?: string;\n}) {\n  const content = (\n    <>\n      {icon && <span className=\"text-lg\">{icon}</span>}\n      <span>{provider}</span>\n    </>\n  );\n\n  if (redirectTo) {\n    return (\n      <Link href={redirectTo} className=\"block\">\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          className=\"w-full h-12 flex items-center justify-center gap-2 bg-transparent border-gray-700 text-primary font-medium rounded-full\"\n        >\n          {content}\n        </Button>\n      </Link>\n    );\n  }\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      onClick={onClick}\n      className=\"w-full h-12 flex items-center justify-center gap-2 bg-transparent border-gray-700 text-primary font-medium rounded-full\"\n    >\n      {content}\n    </Button>\n  );\n};\n\nexport function SignUpLogo({ icon, className }: { icon: string; className?: string }) {\n  return <Image\n  src={icon}\n  alt=\"image\"\n  width={40}\n  height={40}\n  className={cn(className)}\n/>\n}\n\ntype FooterLink = {\n  text: string;\n  redirectTo: string;\n};\n\ntype FooterProps = {\n  footerText: string;\n  footerLink?: FooterLink;\n};\n\nexport function SignUpFooter({ footerText, footerLink, className }: FooterProps & { className?: string }) {\n  return (\n    <div className={cn(\"text-center pt-4\", className)}>\n      <span className=\"text-primary text-sm\">{footerText} </span>\n      {footerLink && (\n        <Link href={footerLink.redirectTo} className=\"text-muted-foreground text-md hover:underline\">\n          {footerLink.text}\n        </Link>\n      )}\n    </div>\n  );\n}\n\nexport function SignUpLayout({ left, right }: { left: React.ReactNode; right?: React.ReactNode }) {\n  return (\n    <div className={`flex min-h-screen ${right ? \"flex-row\" : \"flex-col justify-center items-center\"}`}>\n      <div className={`w-1/2 flex justify-center items-center`}>\n        {left}\n      </div>\n      {right && <div className=\"relative w-1/2\">{right}</div>}\n    </div>\n  );\n}\n\nexport function SignUpDivider({\n  text = \"OR\",\n  className,\n}: {\n  text?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"flex items-center my-4\", className)}>\n      <hr className=\"flex-grow border-muted\" />\n      <span className=\"mx-3 text-sm text-muted-foreground\">{text}</span>\n      <hr className=\"flex-grow border-muted\" />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}