{
  "name": "layouts-authlayout",
  "type": "registry:component",
  "dependencies": [
    "@radix-ui/react-icons"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/layouts/AuthLayout.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { CheckIcon, ExclamationTriangleIcon } from \"@radix-ui/react-icons\";\nimport type { ReactNode } from \"react\";\nimport { responsive } from \"../../lib/layout-constants.js\";\nimport { cn } from \"../../lib/utils.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Card, CardContent } from \"../ui/card.js\";\nimport { Progress } from \"../ui/progress.js\";\nimport { Separator } from \"../ui/separator.js\";\n\nexport interface AuthLayoutProps {\n\tchildren: ReactNode;\n\ttitle?: string;\n\tsubtitle?: string;\n\tshowProgress?: boolean;\n\tprogressStep?: number;\n\ttotalSteps?: number;\n\tclassName?: string;\n}\n\nexport function AuthLayout({\n\tchildren,\n\ttitle,\n\tsubtitle,\n\tshowProgress = false,\n\tprogressStep = 1,\n\ttotalSteps = 3,\n\tclassName = \"\",\n}: AuthLayoutProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"min-h-screen bg-background text-foreground flex flex-col\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{/* Site Header */}\n\t\t\t{(title || subtitle) && (\n\t\t\t\t<div className=\"px-4 py-6 text-center\">\n\t\t\t\t\t{title && <h1 className=\"text-3xl font-bold text-center\">{title}</h1>}\n\t\t\t\t\t{subtitle && (\n\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground text-center\">\n\t\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Main Content Area */}\n\t\t\t<div className=\"flex-1 flex items-center justify-center p-4\">\n\t\t\t\t<div className=\"w-full max-w-[400px]\">\n\t\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t\t{/* Progress Indicator */}\n\t\t\t\t\t\t{showProgress && totalSteps > 1 && (\n\t\t\t\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t\t\t\t<div className=\"flex justify-between\">\n\t\t\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\tStep {progressStep} of {totalSteps}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t{Math.round((progressStep / totalSteps) * 100)}%\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<Progress\n\t\t\t\t\t\t\t\t\tvalue={(progressStep / totalSteps) * 100}\n\t\t\t\t\t\t\t\t\tclassName=\"h-2\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{/* Main Content */}\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport interface CenteredLayoutProps {\n\tchildren: ReactNode;\n\tmaxWidth?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n\tpadding?: \"none\" | \"sm\" | \"md\" | \"lg\";\n\tclassName?: string;\n}\n\nexport function CenteredLayout({\n\tchildren,\n\tmaxWidth = \"md\",\n\tpadding = \"md\",\n\tclassName = \"\",\n}: CenteredLayoutProps) {\n\tconst containerSizes = {\n\t\tsm: \"max-w-sm\",\n\t\tmd: \"max-w-md\",\n\t\tlg: \"max-w-lg\",\n\t\txl: \"max-w-xl\",\n\t};\n\n\tconst paddingValues = {\n\t\tnone: \"p-0\",\n\t\tsm: \"p-2\",\n\t\tmd: \"p-3 sm:p-4\",\n\t\tlg: \"p-4 sm:p-6\",\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"min-h-screen bg-background text-foreground\", className)}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"min-h-screen flex items-center justify-center\",\n\t\t\t\t\tpaddingValues[padding],\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<div className={cn(\"w-full\", containerSizes[maxWidth])}>{children}</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport interface AuthCardProps {\n\tchildren: ReactNode;\n\ttitle?: string;\n\tsubtitle?: string;\n\tfooter?: ReactNode;\n\tvariant?: \"default\" | \"outlined\" | \"elevated\";\n\tclassName?: string;\n}\n\nexport function AuthCard({\n\tchildren,\n\ttitle,\n\tsubtitle,\n\tfooter,\n\tvariant = \"default\",\n\tclassName = \"\",\n}: AuthCardProps) {\n\tconst cardVariants = {\n\t\tdefault: \"\",\n\t\toutlined: \"border\",\n\t\televated: \"shadow-lg\",\n\t};\n\n\treturn (\n\t\t<Card className={cn(cardVariants[variant], className)}>\n\t\t\t<CardContent className=\"p-6 sm:p-8\">\n\t\t\t\t<div className=\"flex flex-col gap-4 sm:gap-6\">\n\t\t\t\t\t{/* Card Header */}\n\t\t\t\t\t{(title || subtitle) && (\n\t\t\t\t\t\t<div className=\"flex flex-col items-center gap-1 sm:gap-2\">\n\t\t\t\t\t\t\t{title && (\n\t\t\t\t\t\t\t\t<h2 className=\"text-xl sm:text-2xl font-bold text-center\">\n\t\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{subtitle && (\n\t\t\t\t\t\t\t\t<p className=\"text-xs sm:text-sm text-muted-foreground text-center\">\n\t\t\t\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Card Content */}\n\t\t\t\t\t<div className=\"flex flex-col gap-4 sm:gap-6\">{children}</div>\n\n\t\t\t\t\t{/* Card Footer */}\n\t\t\t\t\t{footer && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Separator className=\"my-4\" />\n\t\t\t\t\t\t\t<div>{footer}</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n\nexport interface LoadingLayoutProps {\n\ttitle?: string;\n\tmessage?: string;\n\tshowSpinner?: boolean;\n\tclassName?: string;\n}\n\nexport function LoadingLayout({\n\ttitle = \"Loading...\",\n\tmessage,\n\tshowSpinner = true,\n\tclassName = \"\",\n}: LoadingLayoutProps) {\n\treturn (\n\t\t<CenteredLayout className={className}>\n\t\t\t<div className=\"flex flex-col items-center gap-3 sm:gap-4 p-6 sm:p-8\">\n\t\t\t\t{showSpinner && (\n\t\t\t\t\t<div className=\"animate-spin rounded-full h-8 w-8 sm:h-12 sm:w-12 border-b-2 border-primary\" />\n\t\t\t\t)}\n\n\t\t\t\t<h3 className=\"text-lg sm:text-xl font-bold text-center\">{title}</h3>\n\n\t\t\t\t{message && (\n\t\t\t\t\t<p className=\"text-xs sm:text-sm text-muted-foreground text-center\">\n\t\t\t\t\t\t{message}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</CenteredLayout>\n\t);\n}\n\nexport interface ErrorLayoutProps {\n\ttitle?: string;\n\tmessage: string;\n\tactionLabel?: string;\n\tonAction?: () => void;\n\tclassName?: string;\n}\n\nexport function ErrorLayout({\n\ttitle = \"Something went wrong\",\n\tmessage,\n\tactionLabel = \"Try Again\",\n\tonAction,\n\tclassName = \"\",\n}: ErrorLayoutProps) {\n\treturn (\n\t\t<CenteredLayout className={className}>\n\t\t\t<div className=\"flex flex-col items-center gap-4 sm:gap-6 p-6 sm:p-8\">\n\t\t\t\t{/* Error Icon */}\n\t\t\t\t<div className=\"w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-red-100 flex items-center justify-center\">\n\t\t\t\t\t<ExclamationTriangleIcon className=\"w-6 h-6 text-red-600\" />\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"flex flex-col items-center gap-1 sm:gap-2\">\n\t\t\t\t\t<h3 className=\"text-lg sm:text-xl font-bold text-center\">{title}</h3>\n\n\t\t\t\t\t<p className=\"text-xs sm:text-sm text-muted-foreground text-center\">\n\t\t\t\t\t\t{message}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t{onAction && (\n\t\t\t\t\t<Button onClick={onAction} size=\"default\">\n\t\t\t\t\t\t{actionLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</CenteredLayout>\n\t);\n}\n\nexport interface SuccessLayoutProps {\n\ttitle?: string;\n\tmessage: string;\n\tactionLabel?: string;\n\tonAction?: () => void;\n\tclassName?: string;\n}\n\nexport function SuccessLayout({\n\ttitle = \"Success!\",\n\tmessage,\n\tactionLabel = \"Continue\",\n\tonAction,\n\tclassName = \"\",\n}: SuccessLayoutProps) {\n\treturn (\n\t\t<CenteredLayout className={className}>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex flex-col items-center\",\n\t\t\t\t\t`gap-${responsive.gap.spacious}`,\n\t\t\t\t\t`p-${responsive.spacing.sectionPadding}`,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{/* Success Icon */}\n\t\t\t\t<div className=\"w-16 h-16 rounded-full bg-green-100 flex items-center justify-center\">\n\t\t\t\t\t<CheckIcon className=\"w-8 h-8 text-green-600\" />\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex flex-col items-center\",\n\t\t\t\t\t\t`gap-${responsive.gap.tight}`,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<h3 className=\"text-2xl font-bold text-center\">{title}</h3>\n\n\t\t\t\t\t<p className=\"text-sm text-muted-foreground text-center\">{message}</p>\n\t\t\t\t</div>\n\n\t\t\t\t{onAction && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onAction}\n\t\t\t\t\t\tclassName=\"bg-green-600 hover:bg-green-700\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{actionLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</CenteredLayout>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/authlayout.tsx"
    }
  ]
}