{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-auth-card",
  "title": "Auth Card",
  "description": "Shell de autenticação unificado com variantes centered/muted/split/cover — consolida shadcn login-01..05 e signup-01..05.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@lema-ds/card",
    "@lema-ds/skeleton",
    "@lema-ds/ui-i18n",
    "@lema-ds/ds-locale-provider"
  ],
  "files": [
    {
      "path": "components/ds/ds-auth-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { GalleryVerticalEndIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { UI_I18N, type UILocale } from \"@/lib/ui-i18n\"\nimport { useUILocale } from \"@/components/ui/ds-locale-provider\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\n\n// ── Types ──\n\nexport interface AuthCardProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof authCardVariants> {\n  mode?: \"login\" | \"signup\"\n  title?: string\n  description?: string\n  imageSrc?: string\n  imageAlt?: string\n  logo?: React.ReactNode\n  appName?: string\n  locale?: UILocale\n  loading?: boolean\n}\n\n// ── Variants ──\n\nexport const authCardVariants = cva(\"flex flex-col gap-6\", {\n  variants: {\n    variant: {\n      default: \"\",\n      muted: \"bg-muted\",\n      centered: \"\",\n    },\n    layout: {\n      default: \"\",\n      split: \"\",\n      cover: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    layout: \"default\",\n  },\n})\n\n// ── Component ──\n\nexport function AuthCard({\n  mode = \"login\",\n  title,\n  description,\n  imageSrc,\n  imageAlt = \"Cover image\",\n  logo,\n  appName = \"Acme Inc.\",\n  variant = \"default\",\n  layout = \"default\",\n  locale: localeProp,\n  loading = false,\n  className,\n  children,\n  ...props\n}: AuthCardProps) {\n  const locale = useUILocale(localeProp)\n  const tAuth = UI_I18N[locale]?.auth ?? UI_I18N[\"en-US\"].auth\n  const tCard = UI_I18N[locale]?.authCard ?? UI_I18N[\"en-US\"].authCard\n  const isCover = layout === \"cover\" || layout === \"split\"\n\n  const resolvedTitle =\n    title ?? (mode === \"login\" ? tCard.welcomeBack : tCard.createAccount)\n  const resolvedDescription =\n    description ??\n    (mode === \"login\" ? tCard.welcomeDescription : tCard.createDescription)\n\n  if (loading) {\n    return (\n      <div\n        data-slot=\"auth-card-skeleton\"\n        className={cn(\"flex w-full max-w-sm flex-col gap-4\", className)}\n        {...props}\n      >\n        <Skeleton className=\"h-8 w-32 self-center\" />\n        <Skeleton className=\"h-40 w-full rounded-xl\" />\n        <Skeleton className=\"h-10 w-full rounded-lg\" />\n        <Skeleton className=\"h-10 w-full rounded-lg\" />\n      </div>\n    )\n  }\n\n  // Cover / split layout: image + card side-by-side (shadcn login-02 / login-04)\n  if (isCover) {\n    return (\n      <div\n        data-slot=\"auth-card\"\n        data-variant={variant}\n        data-layout={layout}\n        className={cn(\"flex min-h-svh w-full\", className)}\n        {...props}\n      >\n        {/* Form side */}\n        <div className=\"flex w-full flex-col gap-4 p-6 md:p-10 lg:max-w-[50%] lg:p-12\">\n          <div className=\"flex justify-center gap-2 md:justify-start\">\n            <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n              <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n                {logo ?? (\n                  <GalleryVerticalEndIcon\n                    className=\"size-4\"\n                    aria-hidden=\"true\"\n                  />\n                )}\n              </div>\n              {appName}\n            </a>\n          </div>\n          <div className=\"flex flex-1 items-center justify-center\">\n            <div className=\"w-full max-w-sm\">\n              <Card className={cn(layout === \"cover\" && \"overflow-hidden p-0\")}>\n                <CardContent\n                  className={cn(\n                    layout === \"cover\" ? \"grid p-0 md:grid-cols-2\" : \"p-6\"\n                  )}\n                >\n                  {layout === \"cover\" ? (\n                    <>\n                      <div className=\"flex flex-col gap-6 p-6 md:p-8\">\n                        <div className=\"flex flex-col items-center gap-2 text-center\">\n                          <h1 className=\"text-2xl font-bold\">\n                            {resolvedTitle}\n                          </h1>\n                          <p className=\"text-sm text-balance text-muted-foreground\">\n                            {resolvedDescription}\n                          </p>\n                        </div>\n                        {children}\n                      </div>\n                      <div className=\"relative hidden bg-muted md:block\">\n                        {/* eslint-disable-next-line @next/next/no-img-element */}\n                        <img\n                          src={imageSrc ?? \"/placeholder.svg\"}\n                          alt={imageAlt}\n                          loading=\"lazy\"\n                          decoding=\"async\"\n                          className=\"absolute inset-0 h-full w-full object-cover\"\n                        />\n                      </div>\n                    </>\n                  ) : (\n                    <div className=\"flex flex-col gap-6\">\n                      <div className=\"flex flex-col items-center gap-2 text-center\">\n                        <h1 className=\"text-2xl font-bold\">{resolvedTitle}</h1>\n                        <p className=\"text-sm text-balance text-muted-foreground\">\n                          {resolvedDescription}\n                        </p>\n                      </div>\n                      {children}\n                    </div>\n                  )}\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n        </div>\n        {/* Image side (split) */}\n        {layout === \"split\" && (\n          <div className=\"relative hidden bg-muted lg:block lg:flex-1\">\n            {/* eslint-disable-next-line @next/next/no-img-element */}\n            <img\n              src={imageSrc ?? \"/placeholder.svg\"}\n              alt={imageAlt}\n              loading=\"lazy\"\n              decoding=\"async\"\n              className=\"absolute inset-0 h-full w-full object-cover\"\n            />\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  // Default centered layouts (shadcn login-01, login-03, login-05)\n  if (variant === \"muted\") {\n    return (\n      <div\n        data-slot=\"auth-card\"\n        className={cn(\n          \"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"flex w-full max-w-sm flex-col gap-6\">\n          <a\n            href=\"#\"\n            className=\"flex items-center gap-2 self-center font-medium\"\n          >\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              {logo ?? (\n                <GalleryVerticalEndIcon className=\"size-4\" aria-hidden=\"true\" />\n              )}\n            </div>\n            {appName}\n          </a>\n          <div className=\"flex flex-col gap-6\">\n            <div className=\"flex flex-col items-center gap-2 text-center\">\n              <h1 className=\"text-2xl font-bold\">{resolvedTitle}</h1>\n              <p className=\"text-sm text-balance text-muted-foreground\">\n                {resolvedDescription}\n              </p>\n            </div>\n            {children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      data-slot=\"auth-card\"\n      className={cn(\n        \"flex min-h-svh w-full items-center justify-center p-6 md:p-10\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"w-full max-w-sm\">\n        <Card>\n          <CardContent className=\"p-6\">\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">{resolvedTitle}</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  {resolvedDescription}\n                </p>\n              </div>\n              {children}\n            </div>\n            <div className=\"mt-6 flex items-center justify-center gap-1 text-xs text-muted-foreground\">\n              <span>\n                {mode === \"login\" ? tCard.noAccount : tCard.hasAccount}\n              </span>\n              <a\n                href=\"#\"\n                className=\"font-medium text-primary underline-offset-4 hover:underline\"\n              >\n                {mode === \"login\" ? tCard.signUp : tCard.signIn}\n              </a>\n            </div>\n            <p className=\"sr-only\">{tAuth.orContinueWith}</p>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "auth",
    "layout"
  ],
  "type": "registry:block"
}