{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "login",
    "type": "registry:block",
    "title": "Login screen",
    "description": "A centred sign-in card with an email field, a primary action, a separator and social sign-in buttons.",
    "registryDependencies": [
        "tokens",
        "tokens-console",
        "input",
        "button",
        "separator"
    ],
    "meta": {
        "category": "Blocks",
        "layout": "screen",
        "theme": "console"
    },
    "files": [
        {
            "path": "blocks/login.html",
            "type": "registry:file",
            "target": "blocks/login.html",
            "content": "<!-- Login block\n     A sign-in screen composed from input, button and separator, under the\n     console theme. Replace the wordmark with the real logo asset in use. -->\n\n<div class=\"dp-block-login\">\n  <div class=\"dp-login-card\">\n    <div class=\"dp-login-logo\">Dataprovider.com</div>\n\n    <div class=\"dp-field\">\n      <label class=\"dp-label\" for=\"login-email\">Email address</label>\n      <input class=\"dp-input\" id=\"login-email\" type=\"email\" placeholder=\"you@company.com\" />\n    </div>\n\n    <button class=\"dp-btn\" type=\"button\" data-variant=\"primary\">Continue</button>\n\n    <div class=\"dp-separator-labelled dp-login-sep\">OR</div>\n\n    <div class=\"dp-login-social\">\n      <button class=\"dp-btn\" type=\"button\" data-variant=\"outline\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path fill=\"#4285F4\" d=\"M21.6 12.2c0-.6-.1-1.2-.2-1.8H12v3.4h5.4a4.6 4.6 0 0 1-2 3v2.5h3.2c1.9-1.7 3-4.3 3-7.1\"/>\n          <path fill=\"#34A853\" d=\"M12 22c2.7 0 5-1 6.6-2.7l-3.2-2.5c-.9.6-2 1-3.4 1-2.6 0-4.8-1.7-5.6-4.1H3.1v2.6A10 10 0 0 0 12 22\"/>\n          <path fill=\"#FBBC05\" d=\"M6.4 13.7a6 6 0 0 1 0-3.8V7.3H3.1a10 10 0 0 0 0 9z\"/>\n          <path fill=\"#EA4335\" d=\"M12 5.9c1.5 0 2.8.5 3.8 1.5l2.8-2.8A10 10 0 0 0 3.1 7.3l3.3 2.6C7.2 7.5 9.4 5.9 12 5.9\"/>\n        </svg>\n        Continue with Google\n      </button>\n      <button class=\"dp-btn\" type=\"button\" data-variant=\"outline\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <rect width=\"24\" height=\"24\" rx=\"3\" fill=\"#0a66c2\"/>\n          <path fill=\"#fff\" d=\"M7 9.5H4.6V19H7zM5.8 8.2A1.4 1.4 0 1 0 5.8 5.4a1.4 1.4 0 0 0 0 2.8M19.4 19H17v-4.6c0-1.1-.4-1.9-1.4-1.9-.8 0-1.2.5-1.4 1-.1.2-.1.5-.1.8V19h-2.4s.03-8 0-8.8h2.4v1.2c.3-.5.9-1.2 2.2-1.2 1.6 0 2.8 1 2.8 3.3z\"/>\n        </svg>\n        Continue with LinkedIn\n      </button>\n      <button class=\"dp-btn\" type=\"button\" data-variant=\"outline\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <rect x=\"2\" y=\"2\" width=\"9\" height=\"9\" fill=\"#f25022\"/>\n          <rect x=\"13\" y=\"2\" width=\"9\" height=\"9\" fill=\"#7fba00\"/>\n          <rect x=\"2\" y=\"13\" width=\"9\" height=\"9\" fill=\"#00a4ef\"/>\n          <rect x=\"13\" y=\"13\" width=\"9\" height=\"9\" fill=\"#ffb900\"/>\n        </svg>\n        Continue with Microsoft Account\n      </button>\n    </div>\n  </div>\n</div>\n"
        },
        {
            "path": "blocks/login.css",
            "type": "registry:file",
            "target": "blocks/login.css",
            "content": "/* Login block\n   A centred sign-in card composed from the input, button and separator\n   components. Shown under the console theme. */\n\n.dp-block-login {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100%;\n  padding: var(--dp-space-12) var(--dp-space-6);\n  background: var(--dp-bg);\n}\n\n.dp-login-card {\n  width: 100%;\n  max-width: 25rem;\n  background: var(--dp-surface);\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-xl);\n  box-shadow: var(--dp-shadow-lg);\n  padding: var(--dp-space-10) var(--dp-space-8);\n}\n\n.dp-login-logo {\n  margin: 0 0 var(--dp-space-8);\n  text-align: center;\n  font-size: var(--dp-text-xl);\n  font-weight: var(--dp-weight-extrabold);\n  letter-spacing: 0.02em;\n  text-transform: uppercase;\n  color: var(--dp-brand-purple, var(--dp-navy));\n}\n\n.dp-login-card .dp-field {\n  margin-bottom: var(--dp-space-4);\n}\n\n.dp-login-card > .dp-btn {\n  width: 100%;\n}\n\n.dp-login-sep {\n  margin: var(--dp-space-5) 0;\n}\n\n.dp-login-social {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dp-space-3);\n}\n\n.dp-login-social .dp-btn {\n  width: 100%;\n  justify-content: flex-start;\n  gap: var(--dp-space-3);\n  font-weight: var(--dp-weight-semibold);\n}\n\n.dp-login-social .dp-btn svg {\n  width: 1.15rem;\n  height: 1.15rem;\n}\n"
        }
    ]
}