{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sign-in",
  "type": "registry:ui",
  "title": "Sign In Dialog",
  "description": "A responsive sign in form dialog with email and password inputs - drawer on mobile, modal on desktop.",
  "registryDependencies": [
    "button",
    "checkbox",
    "input",
    "label",
    "https://revola.sameerjs.com/r/revola.json"
  ],
  "files": [
    {
      "path": "registry/revola/examples/origin-ui/forms/authentication/sign-in.tsx",
      "content": "import { useId } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\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 SignInDialog() {\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 In\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>Welcome back</ResponsiveDialogTitle>\n              <ResponsiveDialogDescription>\n                Enter your credentials to login to your account.\n              </ResponsiveDialogDescription>\n            </ResponsiveDialogHeader>\n          </div>\n          <form className=\"space-y-5\">\n            <div className=\"space-y-4\">\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            <div className=\"flex justify-between gap-2\">\n              <div className=\"flex items-center gap-2\">\n                <Checkbox id={`${id}-remember`} />\n                <Label htmlFor={`${id}-remember`} className=\"font-normal text-muted-foreground\">\n                  Remember me\n                </Label>\n              </div>\n              <a className=\"text-sm underline hover:no-underline\" href=\"#\">\n                Forgot password?\n              </a>\n            </div>\n            <Button type=\"button\" className=\"w-full\">\n              Sign in\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            Login with Google\n          </Button>\n        </div>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}