{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "login-02",
  "title": "Split Brand Login",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/login-02/Login02.svelte",
      "content": "<script lang=\"ts\">\n  import { Palette, ShieldCheck, Zap } from '@lucide/svelte'\n  // @lucide/svelte no longer ships brand icons, so the GitHub mark is inlined\n  // (same as the React twin) instead of importing a `Github` icon.\n  import { Button } from '$lib/components/ui/button'\n  import { Input } from '$lib/components/ui/input'\n  import { Label } from '$lib/components/ui/label'\n  import { Separator } from '$lib/components/ui/separator'\n\n  interface Login02Props {\n    onSubmit?: (payload: { email: string; password: string }) => void\n    onForgotPassword?: () => void\n    onSignUp?: () => void\n    onOAuth?: (provider: 'github' | 'google') => void\n  }\n\n  let { onSubmit, onForgotPassword, onSignUp, onOAuth }: Login02Props = $props()\n\n  let email = $state('')\n  let password = $state('')\n\n  function handleSubmit(e: SubmitEvent) {\n    e.preventDefault()\n    onSubmit?.({ email, password })\n  }\n\n  // ----- Optional: zod validation -----\n  // HTML5 `type=\"email\"` + `required` already block obviously bad input,\n  // but for typed parsing + custom rules drop in zod. Add `zod` to your\n  // project, uncomment, and route `handleSubmit` through `loginSchema.parse`.\n  //\n  // import { z } from 'zod'\n  // const loginSchema = z.object({\n  //   email: z.string().email('Enter a valid email'),\n  //   password: z.string().min(1, 'Password is required'),\n  // })\n  // function handleSubmit(e: SubmitEvent) {\n  //   e.preventDefault()\n  //   const parsed = loginSchema.safeParse({ email, password })\n  //   if (!parsed.success) {\n  //     // surface parsed.error.flatten().fieldErrors however you want\n  //     return\n  //   }\n  //   onSubmit?.(parsed.data)\n  // }\n</script>\n\n<div data-slot=\"login-02\" class=\"grid min-h-svh lg:grid-cols-2\">\n  <!-- Brand / marketing panel -->\n  <aside\n    class=\"border-border relative hidden flex-col justify-between overflow-hidden border-r p-12 lg:flex\"\n    style=\"background: color-mix(in oklch, var(--primary) 6%, var(--card))\"\n  >\n    <div class=\"text-foreground relative z-[1] flex items-center gap-2.5\">\n      <div\n        class=\"text-background font-display grid size-8 place-items-center rounded-md font-bold\"\n        style=\"background: var(--primary)\"\n      >\n        U\n      </div>\n      <span class=\"font-display text-base font-semibold\">Your Product</span>\n    </div>\n\n    <div class=\"relative z-[1] max-w-md\">\n      <p class=\"text-muted-foreground/80 mb-3 text-xs font-medium tracking-[0.14em] uppercase\">Why teams switch</p>\n      <h2 class=\"font-display text-3xl leading-tight font-semibold tracking-tight text-balance\">\n        Ship features in\n        <em class=\"font-display font-semibold not-italic\" style=\"color: var(--primary)\">hours</em>, not sprints.\n      </h2>\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        Reusable components, opinionated defaults, and a registry that keeps your team writing product code instead of\n        reinventing the same UI.\n      </p>\n\n      <ul class=\"mt-8 space-y-3 text-sm\">\n        <li class=\"flex items-start gap-3\">\n          <Zap class=\"mt-0.5 size-4 shrink-0\" style=\"color: var(--primary)\" />\n          <span class=\"text-foreground\">One-command install, full source ownership</span>\n        </li>\n        <li class=\"flex items-start gap-3\">\n          <ShieldCheck class=\"mt-0.5 size-4 shrink-0\" style=\"color: var(--primary)\" />\n          <span class=\"text-foreground\">SOC 2 compliant, SSO out of the box</span>\n        </li>\n        <li class=\"flex items-start gap-3\">\n          <Palette class=\"mt-0.5 size-4 shrink-0\" style=\"color: var(--primary)\" />\n          <span class=\"text-foreground\">Themeable tokens, dark mode, RTL ready</span>\n        </li>\n      </ul>\n    </div>\n\n    <p class=\"text-muted-foreground/70 relative z-[1] text-xs\">© {new Date().getFullYear()} Your Product, Inc.</p>\n  </aside>\n\n  <!-- Form panel -->\n  <div class=\"flex items-center justify-center p-6 sm:p-12\">\n    <div class=\"w-full max-w-sm space-y-6\">\n      <div class=\"space-y-1.5 text-center lg:text-left\">\n        <h1 class=\"font-display text-3xl font-semibold tracking-tight\">Welcome back</h1>\n        <p class=\"text-muted-foreground text-sm\">Sign in to continue to your workspace.</p>\n      </div>\n\n      <form class=\"space-y-4\" onsubmit={handleSubmit}>\n        <div class=\"space-y-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            bind:value={email}\n            type=\"email\"\n            placeholder=\"you@example.com\"\n            autocomplete=\"email\"\n            required\n          />\n        </div>\n        <div class=\"space-y-2\">\n          <div class=\"flex items-center justify-between\">\n            <Label for=\"password\">Password</Label>\n            <button\n              type=\"button\"\n              class=\"text-muted-foreground hover:text-foreground text-xs transition-colors\"\n              onclick={() => onForgotPassword?.()}\n            >\n              Forgot?\n            </button>\n          </div>\n          <Input id=\"password\" bind:value={password} type=\"password\" autocomplete=\"current-password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">Sign in</Button>\n      </form>\n\n      <div class=\"relative\">\n        <Separator />\n        <span\n          class=\"bg-background text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-xs tracking-wider uppercase\"\n        >\n          Or\n        </span>\n      </div>\n\n      <div class=\"grid grid-cols-2 gap-2\">\n        <Button type=\"button\" variant=\"outline\" onclick={() => onOAuth?.('google')}>\n          <svg viewBox=\"0 0 24 24\" class=\"size-4\" aria-hidden=\"true\">\n            <path\n              fill=\"#4285F4\"\n              d=\"M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z\"\n            />\n            <path\n              fill=\"#34A853\"\n              d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n            />\n            <path\n              fill=\"#FBBC05\"\n              d=\"M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z\"\n            />\n            <path\n              fill=\"#EA4335\"\n              d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z\"\n            />\n          </svg>\n          Google\n        </Button>\n        <Button type=\"button\" variant=\"outline\" onclick={() => onOAuth?.('github')}>\n          <svg viewBox=\"0 0 24 24\" class=\"size-4\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              d=\"M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z\"\n            />\n          </svg>\n          GitHub\n        </Button>\n      </div>\n\n      <p class=\"text-muted-foreground text-center text-xs\">\n        Don't have an account?\n        <button type=\"button\" class=\"text-foreground ml-1 font-medium hover:underline\" onclick={() => onSignUp?.()}>\n          Sign up\n        </button>\n      </p>\n    </div>\n  </div>\n</div>\n",
      "type": "registry:page",
      "target": "~/src/lib/components/blocks/login-02/Login02.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/label.json",
    "https://uipkge.dev/r/svelte/separator.json"
  ],
  "description": "Split-layout login. Brand/marketing panel on the left (logo, headline, value-prop bullets, copyright) and the form on the right (email + password, SSO row, sign-up link). Collapses to single-column form-only on small screens. Edit the brand panel inline to swap product copy + bullet icons.",
  "categories": [
    "auth"
  ]
}