{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sign-in-page",
  "title": "Sign-in page",
  "description": "Split-screen sign-in and sign-up with passkey, inline validation and a brand panel with a customer quote.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/manniche/sign-in-page/sign-in-page.tsx",
      "content": "// A split-screen sign-in page. \"Sign in\" and \"Create account\" share one form and swap with two radio buttons and :has(),\n// and fields show their error state with :user-invalid, so it all works without JavaScript. Colours come from the theme tokens.\nimport { ArrowRight, Fingerprint, KeyRound, Mail, Star } from 'lucide-react'\n\nfunction Logo({ className }: { className?: string }) {\n  return (\n    <a href=\"#top\" className={`flex items-center gap-2 font-semibold tracking-tight ${className ?? ''}`}>\n      <svg viewBox=\"0 0 24 24\" className=\"size-7\" aria-hidden>\n        <rect width=\"24\" height=\"24\" rx=\"7\" className=\"fill-primary\" />\n        <path d=\"M6 15c3-2 9-2 12 0M6 10.5c3-2 9-2 12 0\" fill=\"none\" strokeWidth=\"2\" strokeLinecap=\"round\" className=\"stroke-primary-foreground\" />\n      </svg>\n      Quayside\n    </a>\n  )\n}\n\nconst field =\n  'peer h-11 w-full rounded-xl border bg-card px-3.5 text-sm outline-none transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground/70 hover:border-foreground/25 focus:border-ring focus:ring-4 focus:ring-ring/15 user-invalid:border-destructive user-invalid:ring-destructive/15'\n\n/** Sign-in page: form with passkey, email link and password, a sign-up variant, and a brand panel with a customer quote. */\nexport function SignInPage() {\n  return (\n    <div id=\"top\" className=\"group/auth grid min-h-dvh bg-background font-sans text-foreground antialiased lg:grid-cols-2\">\n      <div className=\"flex flex-col px-4 py-6 sm:px-10\">\n        <div className=\"flex items-center justify-between\">\n          <Logo />\n          <a href=\"#help\" className=\"text-sm text-muted-foreground transition-colors hover:text-foreground\">\n            Need help?\n          </a>\n        </div>\n\n        <main className=\"mx-auto flex w-full max-w-sm flex-1 flex-col justify-center py-12\">\n          <div className=\"transition-[opacity,translate] duration-500 ease-out-quint starting:translate-y-2 starting:opacity-0\">\n            <h1 className=\"text-3xl font-semibold tracking-tight\">\n              <span className=\"group-has-[[value=signup]:checked]/auth:hidden\">Welcome back</span>\n              <span className=\"hidden group-has-[[value=signup]:checked]/auth:inline\">Open your shop</span>\n            </h1>\n            <p className=\"mt-2 text-muted-foreground\">\n              <span className=\"group-has-[[value=signup]:checked]/auth:hidden\">Sign in to see today’s orders.</span>\n              <span className=\"hidden group-has-[[value=signup]:checked]/auth:inline\">14 days free. No card needed.</span>\n            </p>\n\n            <fieldset className=\"mt-8 grid grid-cols-2 rounded-xl bg-muted p-1 text-sm font-medium\">\n              <legend className=\"sr-only\">Choose</legend>\n              {[\n                ['signin', 'Sign in'],\n                ['signup', 'Create account'],\n              ].map(([value, label]) => (\n                <label\n                  key={value}\n                  className=\"cursor-pointer rounded-lg py-2 text-center text-muted-foreground transition-[background-color,color,box-shadow] duration-200 has-checked:bg-background has-checked:text-foreground has-checked:shadow-sm has-focus-visible:ring-2 has-focus-visible:ring-ring\"\n                >\n                  <input type=\"radio\" name=\"auth-mode\" value={value} defaultChecked={value === 'signin'} className=\"sr-only\" />\n                  {label}\n                </label>\n              ))}\n            </fieldset>\n\n            <button\n              type=\"button\"\n              className=\"mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-xl border bg-card text-sm font-medium transition-[background-color,scale] duration-150 ease-out hover:bg-muted active:scale-[0.98]\"\n            >\n              <Fingerprint className=\"size-4 text-primary\" aria-hidden />\n              Continue with a passkey\n            </button>\n\n            <div className=\"my-6 flex items-center gap-3 text-xs text-muted-foreground\">\n              <span className=\"h-px flex-1 bg-border\" />\n              or with email\n              <span className=\"h-px flex-1 bg-border\" />\n            </div>\n\n            <form className=\"space-y-4\" action=\"#\">\n              <div className=\"hidden space-y-1.5 group-has-[[value=signup]:checked]/auth:block\">\n                <label htmlFor=\"auth-shop\" className=\"text-sm font-medium\">\n                  Shop name\n                </label>\n                <input id=\"auth-shop\" name=\"shop\" placeholder=\"Linden Homeware\" className={field} />\n              </div>\n\n              <div className=\"space-y-1.5\">\n                <label htmlFor=\"auth-email\" className=\"text-sm font-medium\">\n                  Email\n                </label>\n                <div className=\"relative\">\n                  <input id=\"auth-email\" name=\"email\" type=\"email\" required autoComplete=\"email\" placeholder=\"you@shop.com\" className={`${field} pl-10`} />\n                  <Mail\n                    className=\"pointer-events-none absolute top-5.5 left-3.5 size-4 -translate-y-1/2 text-muted-foreground peer-focus:text-primary\"\n                    aria-hidden\n                  />\n                  <p className=\"mt-1.5 hidden text-xs text-destructive peer-user-invalid:block\">Enter an email address like name@shop.com.</p>\n                </div>\n              </div>\n\n              <div className=\"space-y-1.5\">\n                <div className=\"flex items-center justify-between\">\n                  <label htmlFor=\"auth-password\" className=\"text-sm font-medium\">\n                    Password\n                  </label>\n                  <a\n                    href=\"#reset\"\n                    className=\"text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline group-has-[[value=signup]:checked]/auth:hidden\"\n                  >\n                    Forgot it?\n                  </a>\n                </div>\n                <div className=\"relative\">\n                  <input\n                    id=\"auth-password\"\n                    name=\"password\"\n                    type=\"password\"\n                    required\n                    minLength={8}\n                    autoComplete=\"current-password\"\n                    placeholder=\"At least 8 characters\"\n                    className={`${field} pl-10`}\n                  />\n                  <KeyRound\n                    className=\"pointer-events-none absolute top-5.5 left-3.5 size-4 -translate-y-1/2 text-muted-foreground peer-focus:text-primary\"\n                    aria-hidden\n                  />\n                  <p className=\"mt-1.5 hidden text-xs text-destructive peer-user-invalid:block\">Use at least 8 characters.</p>\n                </div>\n              </div>\n\n              <label className=\"flex cursor-pointer items-center gap-2.5 text-sm text-muted-foreground group-has-[[value=signup]:checked]/auth:hidden\">\n                <input type=\"checkbox\" name=\"remember\" defaultChecked className=\"size-4 rounded accent-primary\" />\n                Keep me signed in on this device\n              </label>\n              <label className=\"hidden cursor-pointer items-start gap-2.5 text-sm text-muted-foreground group-has-[[value=signup]:checked]/auth:flex\">\n                <input type=\"checkbox\" name=\"news\" className=\"mt-0.5 size-4 rounded accent-primary\" />\n                Send me one email a month with tips for new shops\n              </label>\n\n              <button\n                type=\"submit\"\n                className=\"group/submit flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-primary text-sm font-medium text-primary-foreground shadow-sm shadow-primary/30 transition-[filter,scale] duration-150 ease-out hover:brightness-110 active:scale-[0.98]\"\n              >\n                <span className=\"group-has-[[value=signup]:checked]/auth:hidden\">Sign in</span>\n                <span className=\"hidden group-has-[[value=signup]:checked]/auth:inline\">Create account</span>\n                <ArrowRight className=\"size-4 transition-transform duration-200 group-hover/submit:translate-x-0.5\" aria-hidden />\n              </button>\n            </form>\n\n            <p className=\"mt-6 text-center text-xs text-pretty text-muted-foreground\">\n              By continuing you agree to the{' '}\n              <a href=\"#terms\" className=\"underline underline-offset-4 hover:text-foreground\">\n                terms\n              </a>{' '}\n              and the{' '}\n              <a href=\"#privacy\" className=\"underline underline-offset-4 hover:text-foreground\">\n                privacy notice\n              </a>\n              .\n            </p>\n          </div>\n        </main>\n\n        <p className=\"text-xs text-muted-foreground\">© 2026 Quayside. A template from Manniche UI.</p>\n      </div>\n\n      <aside className=\"relative hidden overflow-hidden bg-primary p-10 text-primary-foreground lg:flex lg:flex-col\">\n        <svg aria-hidden className=\"absolute inset-0 size-full opacity-[0.12]\">\n          <defs>\n            <pattern id=\"auth-waves\" width=\"56\" height=\"28\" patternUnits=\"userSpaceOnUse\">\n              <path d=\"M0 14c14-10 28-10 28 0s14 10 28 0\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n            </pattern>\n          </defs>\n          <rect width=\"100%\" height=\"100%\" fill=\"url(#auth-waves)\" />\n        </svg>\n        <div aria-hidden className=\"absolute -right-24 -bottom-24 size-96 rounded-full bg-primary-foreground/10 blur-2xl\" />\n\n        <div className=\"relative mt-auto max-w-lg\">\n          <ul className=\"mb-10 grid grid-cols-3 gap-3\">\n            {[\n              ['4,000', 'shops'],\n              ['€0', 'cut of sales'],\n              ['2 min', 'to first sale'],\n            ].map(([n, l]) => (\n              <li\n                key={l}\n                className=\"rounded-2xl bg-primary-foreground/10 p-4 backdrop-blur-sm transition-[opacity,translate] duration-700 ease-out-quint starting:translate-y-3 starting:opacity-0\"\n              >\n                <p className=\"text-2xl font-semibold tracking-tight\">{n}</p>\n                <p className=\"text-sm text-primary-foreground/75\">{l}</p>\n              </li>\n            ))}\n          </ul>\n          <figure>\n            <span className=\"flex gap-0.5\" aria-label=\"5 out of 5\">\n              {Array.from({ length: 5 }, (_, i) => (\n                <Star key={i} className=\"size-4 fill-current\" aria-hidden />\n              ))}\n            </span>\n            <blockquote className=\"mt-4 text-2xl leading-snug font-medium text-balance\">\n              “We moved our shop over on a Sunday and took the first order before dinner. The admin is the calmest software we use.”\n            </blockquote>\n            <figcaption className=\"mt-6 flex items-center gap-3\">\n              <span className=\"grid size-10 place-items-center rounded-full bg-primary-foreground text-sm font-semibold text-primary\">ER</span>\n              <span>\n                <span className=\"block font-medium\">Ella Rasmussen</span>\n                <span className=\"block text-sm text-primary-foreground/75\">Owner, Saltwork Ceramics</span>\n              </span>\n            </figcaption>\n          </figure>\n        </div>\n      </aside>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "cssVars": {
    "theme": {
      "color-success": "var(--success)",
      "ease-out-quint": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "light": {
      "success": "oklch(0.55 0.13 155)"
    },
    "dark": {
      "success": "oklch(0.72 0.13 155)"
    }
  },
  "categories": [
    "templates"
  ],
  "type": "registry:block"
}