{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sign-up",
  "type": "registry:ui",
  "title": "Sign Up Dialog",
  "description": "A responsive sign up form dialog with name, email and password inputs - drawer on mobile, modal on desktop.",
  "registryDependencies": [
    "button",
    "input",
    "label",
    "https://revola.sameerjs.com/r/revola.json"
  ],
  "files": [
    {
      "path": "registry/revola/examples/origin-ui/forms/authentication/sign-up.tsx",
      "content": "import { useId } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  ResponsiveDialogTrigger,\n} from \"@/components/ui/revola\";\n\nexport default function SignUpDialog() {\n  const id = useId();\n  return (\n    <ResponsiveDialog>\n      <ResponsiveDialogTrigger asChild>\n        <Button variant=\"outline\" className=\"h-12 rounded-full px-6 capitalize\">\n          Sign Up\n        </Button>\n      </ResponsiveDialogTrigger>\n      <ResponsiveDialogContent className=\"sm:max-w-sm\">\n        <div className=\"space-y-4 overflow-y-auto p-6\">\n          <div className=\"flex flex-col items-center gap-2\">\n            <div className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\" aria-hidden=\"true\">\n              <svg\n                className=\"stroke-zinc-800 dark:stroke-zinc-100\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 32 32\"\n                aria-hidden=\"true\"\n              >\n                <circle cx=\"16\" cy=\"16\" r=\"12\" fill=\"none\" strokeWidth=\"8\" />\n              </svg>\n            </div>\n            <ResponsiveDialogHeader className=\"sm:text-center\">\n              <ResponsiveDialogTitle>Sign up Revola</ResponsiveDialogTitle>\n              <ResponsiveDialogDescription>We just need a few details to get you started.</ResponsiveDialogDescription>\n            </ResponsiveDialogHeader>\n          </div>\n\n          <form className=\"space-y-5\">\n            <div className=\"space-y-4\">\n              <div className=\"space-y-2\">\n                <Label htmlFor={`${id}-name`}>Full name</Label>\n                <Input\n                  required\n                  type=\"text\"\n                  id={`${id}-name`}\n                  placeholder=\"Matt Welsh\"\n                  className=\"[&:-webkit-autofill]:shadow-[0_0_0_30px_theme(colors.input)_inset]\"\n                />\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor={`${id}-email`}>Email</Label>\n                <Input\n                  required\n                  type=\"email\"\n                  id={`${id}-email`}\n                  placeholder=\"hi@yourcompany.com\"\n                  className=\"[&:-webkit-autofill]:shadow-[0_0_0_30px_theme(colors.input)_inset]\"\n                />\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor={`${id}-password`}>Password</Label>\n                <Input\n                  required\n                  type=\"password\"\n                  id={`${id}-password`}\n                  placeholder=\"Enter your password\"\n                  className=\"[&:-webkit-autofill]:shadow-[0_0_0_30px_theme(colors.input)_inset]\"\n                />\n              </div>\n            </div>\n            <Button type=\"button\" className=\"w-full\">\n              Sign up\n            </Button>\n          </form>\n          <div className=\"flex items-center gap-3 before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border\">\n            <span className=\"text-xs text-muted-foreground\">Or</span>\n          </div>\n          <Button variant=\"outline\" className=\"w-full\">\n            Continue with Google\n          </Button>\n          <p className=\"text-center text-xs text-muted-foreground\">\n            By signing up you agree to our{\" \"}\n            <a className=\"underline hover:no-underline\" href=\"#\">\n              Terms\n            </a>\n            .\n          </p>\n        </div>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}