{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "signup-page",
  "title": "Sign Up Page",
  "description": "A complete sign up page with multi-step validation, password strength indicator, confirm password matching, and terms agreement checkbox.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.eindev.ir/r/glass-card.json",
    "https://ui.eindev.ir/r/glass-button.json",
    "https://ui.eindev.ir/r/glass-input.json",
    "https://ui.eindev.ir/r/glass-checkbox.json"
  ],
  "files": [
    {
      "path": "registry/blocks/auth/signup-page.tsx",
      "content": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport { Eye, EyeOff, UserPlus, Check } from \"lucide-react\"\nimport { GlassCard, GlassCardContent, GlassCardDescription, GlassCardHeader, GlassCardTitle } from \"@/registry/liquid-glass/glass-card\"\nimport { GlassInput } from \"@/registry/liquid-glass/glass-input\"\nimport { GlassButton } from \"@/registry/liquid-glass/glass-button\"\nimport { GlassCheckbox } from \"@/registry/liquid-glass/glass-checkbox\"\nimport { Label } from \"@/components/ui/label\"\n\ninterface ValidationRules {\n  minLength: boolean\n  hasUpperCase: boolean\n  hasLowerCase: boolean\n  hasNumber: boolean\n  hasSpecial: boolean\n}\n\nexport default function SignupPageBlock() {\n  const [showPassword, setShowPassword] = useState(false)\n  const [showConfirmPassword, setShowConfirmPassword] = useState(false)\n  const [firstName, setFirstName] = useState(\"\")\n  const [lastName, setLastName] = useState(\"\")\n  const [email, setEmail] = useState(\"\")\n  const [password, setPassword] = useState(\"\")\n  const [confirmPassword, setConfirmPassword] = useState(\"\")\n  const [agreeToTerms, setAgreeToTerms] = useState(false)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const validatePassword = (pwd: string): ValidationRules => ({\n    minLength: pwd.length >= 8,\n    hasUpperCase: /[A-Z]/.test(pwd),\n    hasLowerCase: /[a-z]/.test(pwd),\n    hasNumber: /\\d/.test(pwd),\n    hasSpecial: /[!@#$%^&*(),.?\":{}|<>]/.test(pwd),\n  })\n\n  const validation = useMemo(() => validatePassword(password), [password])\n  const isPasswordValid = Object.values(validation).every(Boolean)\n  const passwordsMatch = password === confirmPassword && password.length > 0\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault()\n    if (!isPasswordValid || !passwordsMatch || !agreeToTerms) return\n\n    setIsLoading(true)\n    // Simulate API call\n    await new Promise((resolve) => setTimeout(resolve, 2000))\n    setIsLoading(false)\n    console.log({ firstName, lastName, email, password })\n  }\n\n  return (\n    <div className=\" flex items-center justify-center bg-linear-to-br from-slate-950 via-purple-900 to-slate-950 px-4 py-8\">\n      <GlassCard className=\"w-full max-w-md\">\n        <GlassCardHeader className=\"space-y-2 text-center\">\n          <div className=\"flex justify-center mb-2\">\n            <div className=\"p-2 rounded-lg bg-linear-to-br from-green-400 to-emerald-500\">\n              <UserPlus className=\"h-6 w-6 text-white\" />\n            </div>\n          </div>\n          <GlassCardTitle className=\"text-2xl\">Create Account</GlassCardTitle>\n          <GlassCardDescription>Join us today and get started</GlassCardDescription>\n        </GlassCardHeader>\n\n        <GlassCardContent>\n          <form onSubmit={handleSubmit} className=\"space-y-4\">\n            {/* Name Fields */}\n            <div className=\"grid grid-cols-2 gap-3\">\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"firstName\" className=\"text-white/80\">\n                  First Name\n                </Label>\n                <GlassInput\n                  id=\"firstName\"\n                  type=\"text\"\n                  placeholder=\"John\"\n                  value={firstName}\n                  onChange={(e) => setFirstName(e.target.value)}\n                  required\n                  className=\"bg-white/5\"\n                />\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"lastName\" className=\"text-white/80\">\n                  Last Name\n                </Label>\n                <GlassInput\n                  id=\"lastName\"\n                  type=\"text\"\n                  placeholder=\"Doe\"\n                  value={lastName}\n                  onChange={(e) => setLastName(e.target.value)}\n                  required\n                  className=\"bg-white/5\"\n                />\n              </div>\n            </div>\n\n            {/* Email Input */}\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"email\" className=\"text-white/80\">\n                Email Address\n              </Label>\n              <GlassInput\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"you@example.com\"\n                value={email}\n                onChange={(e) => setEmail(e.target.value)}\n                required\n                className=\"bg-white/5\"\n              />\n            </div>\n\n            {/* Password Input */}\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"password\" className=\"text-white/80\">\n                Password\n              </Label>\n              <div className=\"relative\">\n                <GlassInput\n                  id=\"password\"\n                  type={showPassword ? \"text\" : \"password\"}\n                  placeholder=\"••••••••\"\n                  value={password}\n                  onChange={(e) => setPassword(e.target.value)}\n                  required\n                  className=\"bg-white/5 pr-10\"\n                />\n                <button\n                  type=\"button\"\n                  onClick={() => setShowPassword(!showPassword)}\n                  className=\"absolute right-3 top-1/2 -translate-y-1/2 text-white/40 hover:text-white/60 transition-colors\"\n                >\n                  {showPassword ? <EyeOff className=\"h-4 w-4\" /> : <Eye className=\"h-4 w-4\" />}\n                </button>\n              </div>\n              {/* Password Strength Indicator */}\n              {password.length > 0 && (\n                <div className=\"space-y-2 p-3 rounded-lg bg-white/5 border border-white/10\">\n                  <p className=\"text-xs font-medium text-white/60 mb-2\">Password requirements:</p>\n                  <div className=\"grid grid-cols-2 gap-1.5\">\n                    {[\n                      { key: \"minLength\", label: \"8+ characters\" },\n                      { key: \"hasUpperCase\", label: \"Uppercase letter\" },\n                      { key: \"hasLowerCase\", label: \"Lowercase letter\" },\n                      { key: \"hasNumber\", label: \"Number\" },\n                      { key: \"hasSpecial\", label: \"Special character\" },\n                    ].map((rule) => (\n                      <div key={rule.key} className=\"flex items-center gap-1.5\">\n                        <div className={`h-1.5 w-1.5 rounded-full transition-colors ${validation[rule.key as keyof ValidationRules] ? \"bg-green-400\" : \"bg-white/20\"\n                          }`} />\n                        <span className={`text-xs transition-colors ${validation[rule.key as keyof ValidationRules] ? \"text-green-400\" : \"text-white/40\"\n                          }`}>\n                          {rule.label}\n                        </span>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              )}\n            </div>\n\n            {/* Confirm Password */}\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"confirmPassword\" className=\"text-white/80\">\n                Confirm Password\n              </Label>\n              <div className=\"relative\">\n                <GlassInput\n                  id=\"confirmPassword\"\n                  type={showConfirmPassword ? \"text\" : \"password\"}\n                  placeholder=\"••••••••\"\n                  value={confirmPassword}\n                  onChange={(e) => setConfirmPassword(e.target.value)}\n                  required\n                  disabled={!isPasswordValid}\n                  className=\"bg-white/5 pr-10 disabled:opacity-50\"\n                />\n                <button\n                  type=\"button\"\n                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}\n                  className=\"absolute right-3 top-1/2 -translate-y-1/2 text-white/40 hover:text-white/60 transition-colors\"\n                >\n                  {showConfirmPassword ? <EyeOff className=\"h-4 w-4\" /> : <Eye className=\"h-4 w-4\" />}\n                </button>\n              </div>\n              {passwordsMatch && isPasswordValid && (\n                <div className=\"flex items-center gap-2 text-xs text-green-400\">\n                  <Check className=\"h-3 w-3\" /> Passwords match\n                </div>\n              )}\n            </div>\n\n            {/* Terms Agreement */}\n            <div className=\"flex items-start gap-3 pt-2\">\n              <div className=\"pt-1\">\n                <GlassCheckbox id=\"terms\" checked={agreeToTerms} onCheckedChange={(checked) => {\n                  if (typeof checked === 'boolean') {\n                    setAgreeToTerms(checked)\n                  }\n                }} />\n              </div>\n              <Label htmlFor=\"terms\" className=\"text-white/70 cursor-pointer text-sm leading-relaxed font-normal flex-1 flex flex-wrap gap-x-1 gap-y-0.5\">\n                <span className=\"whitespace-nowrap\">\n                  I agree to the{\" \"}\n                  <a href=\"#\" className=\"text-cyan-400 hover:text-cyan-300 transition-colors\">\n                    Terms of Service\n                  </a>\n                </span>\n                <span className=\"whitespace-nowrap\">\n                  and{\" \"}\n                  <a href=\"#\" className=\"text-cyan-400 hover:text-cyan-300 transition-colors\">\n                    Privacy Policy\n                  </a>\n                </span>\n              </Label>\n            </div>\n\n            {/* Submit Button */}\n            <GlassButton\n              type=\"submit\"\n              variant=\"primary\"\n              className=\"w-full mt-6\"\n              disabled={isLoading || !isPasswordValid || !passwordsMatch || !agreeToTerms}\n            >\n              {isLoading ? (\n                <>\n                  <div className=\"h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin mr-2\" />\n                  Creating account...\n                </>\n              ) : (\n                <>\n                  <UserPlus className=\"h-4 w-4 mr-2\" />\n                  Sign Up\n                </>\n              )}\n            </GlassButton>\n\n            {/* Sign In Link */}\n            <p className=\"text-center text-sm text-white/60\">\n              Already have an account?{\" \"}\n              <a href=\"#\" className=\"text-cyan-400 hover:text-cyan-300 transition-colors font-medium\">\n                Sign in\n              </a>\n            </p>\n          </form>\n        </GlassCardContent>\n      </GlassCard>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "app/auth/signup/page.tsx"
    }
  ],
  "type": "registry:block"
}