{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-auth-split-screen",
  "title": "AuthSplitScreen",
  "description": "Shell de layout de tela dividida (split-screen) completo com vitrine da marca, depoimento e estatísticas.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@lema-ds/ds-background-glow",
    "@lema-ds/avatar",
    "@lema-ds/ui-i18n"
  ],
  "files": [
    {
      "path": "components/ds/ds-auth-split-screen.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { BackgroundGlow } from \"./ds-background-glow\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\n\n// ── Types ──\n\nexport interface AuthTestimonial {\n  quote: string\n  author: string\n  role: string\n  avatarSrc?: string\n}\n\nexport interface AuthStat {\n  label: string\n  value: string\n}\n\nexport interface AuthSplitScreenProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof authSplitScreenVariants> {\n  logo?: React.ReactNode\n  appName?: string\n  testimonial?: AuthTestimonial\n  stats?: AuthStat[]\n  brandHeadline?: string\n  brandDescription?: string\n}\n\n// ── Variants ──\n\nexport const authSplitScreenVariants = cva(\n  \"relative grid min-h-screen w-full lg:grid-cols-2\",\n  {\n    variants: {\n      reverse: {\n        true: \"lg:[&>*:first-child]:order-2 lg:[&>*:last-child]:order-1\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      reverse: false,\n    },\n  }\n)\n\n// ── Component ──\n\nexport const AuthSplitScreen = React.forwardRef<\n  HTMLDivElement,\n  AuthSplitScreenProps\n>(\n  (\n    {\n      className,\n      reverse = false,\n      logo,\n      appName = \"LEMA-DS\",\n      testimonial,\n      stats,\n      brandHeadline = \"Transforming research and innovation into real impact\",\n      brandDescription = \"The official ecosystem of digital systems and products of the Federal University of Paraíba.\",\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(authSplitScreenVariants({ reverse }), className)}\n        {...props}\n      >\n        {/* Column 1: Form Area */}\n        <div className=\"flex flex-col justify-between p-6 sm:p-10 lg:p-12\">\n          {/* Top Logo */}\n          <div className=\"flex items-center gap-2.5\">\n            {logo || (\n              <div className=\"flex size-9 items-center justify-center rounded-xl bg-primary text-sm font-bold text-primary-foreground shadow-xs\">\n                L\n              </div>\n            )}\n            <span className=\"text-base font-bold tracking-tight text-foreground\">\n              {appName}\n            </span>\n          </div>\n\n          {/* Centered Form */}\n          <div className=\"mx-auto flex w-full max-w-sm flex-col justify-center py-10\">\n            {children}\n          </div>\n\n          {/* Footer */}\n          <div className=\"flex flex-wrap items-center justify-between gap-4 border-t border-border/40 pt-4 text-xs text-muted-foreground\">\n            <span>© {new Date().getFullYear()} UFPB · LEMA</span>\n            <div className=\"flex gap-4\">\n              <a\n                href=\"#\"\n                className=\"underline underline-offset-4 hover:text-foreground\"\n              >\n                Privacy\n              </a>\n              <a\n                href=\"#\"\n                className=\"underline underline-offset-4 hover:text-foreground\"\n              >\n                Terms\n              </a>\n              <a\n                href=\"#\"\n                className=\"underline underline-offset-4 hover:text-foreground\"\n              >\n                Help\n              </a>\n            </div>\n          </div>\n        </div>\n\n        {/* Column 2: Brand Showcase Panel (Hidden on mobile) */}\n        <div className=\"relative hidden flex-col justify-between overflow-hidden border-l border-border/60 bg-muted/25 p-10 lg:flex xl:p-14\">\n          {/* Ambient Glow Background */}\n          <BackgroundGlow variant=\"aurora\" tone=\"primary\" />\n\n          {/* Brand Tagline */}\n          <div className=\"relative z-10 max-w-lg\">\n            <span className=\"inline-flex items-center rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary\">\n              Universidade Federal da Paraíba\n            </span>\n            <h2 className=\"mt-4 text-3xl leading-tight font-extrabold tracking-tight text-foreground xl:text-4xl\">\n              {brandHeadline}\n            </h2>\n            <p className=\"mt-3 text-sm leading-relaxed text-muted-foreground\">\n              {brandDescription}\n            </p>\n          </div>\n\n          {/* Stats in middle if provided */}\n          {stats && stats.length > 0 && (\n            <div className=\"relative z-10 my-8 grid max-w-md grid-cols-2 gap-4\">\n              {stats.map((stat, i) => (\n                <div\n                  key={i}\n                  className=\"flex flex-col gap-1 rounded-xl border border-border/60 bg-background/50 p-4 shadow-xs backdrop-blur-xs\"\n                >\n                  <span className=\"text-2xl font-bold tracking-tight text-foreground\">\n                    {stat.value}\n                  </span>\n                  <span className=\"text-xs font-medium text-muted-foreground\">\n                    {stat.label}\n                  </span>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {/* Bottom Testimonial */}\n          {testimonial && (\n            <div className=\"relative z-10 rounded-2xl border border-border/60 bg-card/60 p-6 shadow-sm backdrop-blur-md\">\n              <p className=\"text-sm leading-relaxed text-foreground/90 italic\">\n                &ldquo;{testimonial.quote}&rdquo;\n              </p>\n              <div className=\"mt-4 flex items-center gap-3\">\n                <Avatar className=\"size-10 border border-border/80\">\n                  {testimonial.avatarSrc && (\n                    <AvatarImage\n                      src={testimonial.avatarSrc}\n                      alt={testimonial.author}\n                    />\n                  )}\n                  <AvatarFallback className=\"text-xs font-semibold\">\n                    {testimonial.author.slice(0, 2).toUpperCase()}\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"flex flex-col\">\n                  <span className=\"text-xs leading-tight font-semibold text-foreground\">\n                    {testimonial.author}\n                  </span>\n                  <span className=\"text-xs text-muted-foreground\">\n                    {testimonial.role}\n                  </span>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    )\n  }\n)\nAuthSplitScreen.displayName = \"AuthSplitScreen\"\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}