{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-12",
  "description": "Multi-step split layout onboarding form.",
  "registryDependencies": [
    "button",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "registry/blocks/auth/12/onboarding-form.tsx",
      "content": "\"use client\";\n\nimport {\n  BuildingIcon,\n  CheckIcon,\n  ChevronRight,\n  SparklesIcon,\n  UserIcon,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { LogoIcon } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { cn } from \"@/lib/utils\";\n\nconst STEPS = [\n  { id: 1, title: \"Personal Details\", icon: UserIcon },\n  { id: 2, title: \"Your Goals\", icon: SparklesIcon },\n  { id: 3, title: \"Organization\", icon: BuildingIcon },\n];\n\nexport function OnboardingForm() {\n  const [currentStep, setCurrentStep] = useState(1);\n\n  return (\n    <div className=\"grid min-h-screen w-full lg:grid-cols-[400px_1fr]\">\n      {/* Sidebar Progress Tracker */}\n      <div className=\"hidden flex-col border-r bg-zinc-50/50 p-10 lg:flex dark:bg-zinc-950/20\">\n        <div className=\"mb-16 flex items-center gap-2\">\n          <LogoIcon className=\"size-6\" />\n          <span className=\"font-bold text-lg tracking-tight\">Freddy</span>\n        </div>\n\n        <div className=\"space-y-12\">\n          {STEPS.map((step) => {\n            const isActive = step.id === currentStep;\n            const isCompleted = step.id < currentStep;\n\n            return (\n              <div\n                className=\"group relative flex items-center gap-6\"\n                key={step.id}\n              >\n                {step.id !== 3 && (\n                  <div\n                    className={cn(\n                      \"absolute top-10 left-[19px] h-12 w-px bg-border transition-colors duration-500\",\n                      isCompleted && \"bg-primary/50\"\n                    )}\n                  />\n                )}\n\n                <div\n                  className={cn(\n                    \"relative z-10 flex size-10 items-center justify-center rounded-full border bg-background transition-all duration-500\",\n                    \"relative z-10 flex size-10 items-center justify-center rounded-full border bg-background transition-all duration-500\",\n                    isActive &&\n                      \"border-primary shadow-sm ring-4 ring-primary/10\",\n                    isCompleted &&\n                      \"border-primary bg-primary text-primary-foreground\",\n                    !(isActive || isCompleted) &&\n                      \"border-muted text-muted-foreground\"\n                  )}\n                >\n                  {isCompleted ? (\n                    <CheckIcon className=\"size-5\" strokeWidth={3} />\n                  ) : (\n                    <step.icon\n                      className={cn(\"size-4\", isActive && \"text-primary\")}\n                    />\n                  )}\n                </div>\n\n                <div className=\"flex flex-col\">\n                  <span\n                    className={cn(\n                      \"font-bold text-xs uppercase tracking-[0.2em] transition-colors\",\n                      isActive ? \"text-primary\" : \"text-muted-foreground/60\"\n                    )}\n                  >\n                    Step 0{step.id}\n                  </span>\n                  <span\n                    className={cn(\n                      \"font-semibold text-base tracking-tight transition-colors\",\n                      isActive ? \"text-foreground\" : \"text-muted-foreground\"\n                    )}\n                  >\n                    {step.title}\n                  </span>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n\n        <div className=\"mt-auto\">\n          <div className=\"rounded-3xl border bg-background/50 p-8 shadow-sm backdrop-blur-sm\">\n            <div className=\"mb-4 flex gap-1\">\n              {[1, 2, 3, 4, 5].map((i) => (\n                <svg\n                  className=\"size-3 fill-orange-400 text-orange-400\"\n                  key={i}\n                  viewBox=\"0 0 24 24\"\n                >\n                  <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" />\n                </svg>\n              ))}\n            </div>\n            <p className=\"font-medium text-sm text-zinc-600 italic leading-relaxed dark:text-zinc-400\">\n              \"Freddy UI has been a game changer for our team. We've built our\n              entire dashboard in weeks instead of months.\"\n            </p>\n            <div className=\"mt-6 flex items-center gap-3\">\n              <div className=\"size-10 rounded-full border border-border bg-linear-to-br from-zinc-200 to-zinc-300 dark:from-zinc-800 dark:to-zinc-900\" />\n              <div>\n                <p className=\"font-bold text-xs uppercase leading-none tracking-widest\">\n                  Alex Rivera\n                </p>\n                <p className=\"mt-1 font-medium text-[10px] text-muted-foreground uppercase tracking-wider\">\n                  Product Lead @ Acme\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Main Form Area */}\n      <div className=\"flex flex-col bg-background p-6 lg:p-12 xl:p-24\">\n        <div className=\"mb-16 flex items-center justify-between lg:hidden\">\n          <div className=\"flex items-center gap-2\">\n            <LogoIcon className=\"size-5\" />\n            <span className=\"font-bold text-base tracking-tight\">Freddy</span>\n          </div>\n          <span className=\"font-bold text-[10px] text-muted-foreground uppercase tracking-[0.2em]\">\n            Step {currentStep} / 03\n          </span>\n        </div>\n\n        <div className=\"mx-auto w-full max-w-[540px]\">\n          {/* Header */}\n          <div className=\"mb-12 space-y-3\">\n            <h2 className=\"font-bold text-4xl tracking-tightest sm:text-5xl lg:leading-[1.1]\">\n              {currentStep === 1 && \"Tell us about yourself\"}\n              {currentStep === 2 && \"What are you building?\"}\n              {currentStep === 3 && \"Where do you work?\"}\n            </h2>\n            <p className=\"font-medium text-lg text-muted-foreground\">\n              {currentStep === 1 &&\n                \"Personalize your experience to get the most out of Freddy.\"}\n              {currentStep === 2 &&\n                \"Choose your primary goal to help us suggest the right blocks.\"}\n              {currentStep === 3 &&\n                \"Connect your team or create a new workspace.\"}\n            </p>\n          </div>\n\n          {/* Form Content */}\n          <form className=\"space-y-10\" onSubmit={(e) => e.preventDefault()}>\n            {currentStep === 1 && (\n              <div className=\"grid gap-8\">\n                <div className=\"grid grid-cols-2 gap-6\">\n                  <div className=\"grid gap-3\">\n                    <Label\n                      className=\"font-bold text-[10px] text-muted-foreground/80 uppercase tracking-[0.15em]\"\n                      htmlFor=\"firstName\"\n                    >\n                      First Name\n                    </Label>\n                    <Input\n                      className=\"h-12 rounded-xl border-zinc-200 bg-zinc-50/50 px-4 transition-all focus:bg-background dark:border-zinc-800 dark:bg-zinc-900/50\"\n                      id=\"firstName\"\n                      placeholder=\"Jane\"\n                    />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label\n                      className=\"font-bold text-[10px] text-muted-foreground/80 uppercase tracking-[0.15em]\"\n                      htmlFor=\"lastName\"\n                    >\n                      Last Name\n                    </Label>\n                    <Input\n                      className=\"h-12 rounded-xl border-zinc-200 bg-zinc-50/50 px-4 transition-all focus:bg-background dark:border-zinc-800 dark:bg-zinc-900/50\"\n                      id=\"lastName\"\n                      placeholder=\"Doe\"\n                    />\n                  </div>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label\n                    className=\"font-bold text-[10px] text-muted-foreground/80 uppercase tracking-[0.15em]\"\n                    htmlFor=\"displayName\"\n                  >\n                    Display Name\n                  </Label>\n                  <div className=\"relative\">\n                    <span className=\"-translate-y-1/2 absolute top-1/2 left-4 font-medium text-muted-foreground/60\">\n                      @\n                    </span>\n                    <Input\n                      className=\"h-12 rounded-xl border-zinc-200 bg-zinc-50/50 pr-4 pl-10 transition-all focus:bg-background dark:border-zinc-800 dark:bg-zinc-900/50\"\n                      id=\"displayName\"\n                      placeholder=\"janedoe\"\n                    />\n                  </div>\n                </div>\n              </div>\n            )}\n\n            {currentStep === 2 && (\n              <div className=\"grid grid-cols-1 gap-5 sm:grid-cols-2\">\n                {[\n                  {\n                    label: \"SaaS Application\",\n                    description: \"Dashboards, forms, settings\",\n                    icon: \"🚀\",\n                  },\n                  {\n                    label: \"Ecommerce Store\",\n                    description: \"Product pages, checkout\",\n                    icon: \"🛍️\",\n                  },\n                  {\n                    label: \"Marketing Site\",\n                    description: \"Landing pages, waitlists\",\n                    icon: \"✨\",\n                  },\n                  {\n                    label: \"Internal Tools\",\n                    description: \"Admin panels, data tables\",\n                    icon: \"🛠️\",\n                  },\n                ].map((option) => (\n                  <button\n                    className=\"group flex flex-col gap-3 rounded-2xl border border-zinc-200 bg-zinc-50/50 p-6 text-left transition-all hover:border-primary hover:bg-background hover:shadow-primary/5 hover:shadow-xl dark:border-zinc-800 dark:bg-zinc-900/50 dark:hover:border-primary\"\n                    key={option.label}\n                    onClick={() => setCurrentStep(3)}\n                    type=\"button\"\n                  >\n                    <span className=\"mb-1 text-2xl\">{option.icon}</span>\n                    <span className=\"font-bold text-lg tracking-tight transition-colors group-hover:text-primary\">\n                      {option.label}\n                    </span>\n                    <span className=\"font-medium text-muted-foreground text-sm leading-snug\">\n                      {option.description}\n                    </span>\n                  </button>\n                ))}\n              </div>\n            )}\n\n            {currentStep === 3 && (\n              <div className=\"grid gap-8\">\n                <div className=\"grid gap-3\">\n                  <Label\n                    className=\"font-bold text-[10px] text-muted-foreground/80 uppercase tracking-[0.15em]\"\n                    htmlFor=\"orgName\"\n                  >\n                    Company Name\n                  </Label>\n                  <Input\n                    className=\"h-12 rounded-xl border-zinc-200 bg-zinc-50/50 px-4 transition-all focus:bg-background dark:border-zinc-800 dark:bg-zinc-900/50\"\n                    id=\"orgName\"\n                    placeholder=\"Acme Inc.\"\n                  />\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label\n                    className=\"font-bold text-[10px] text-muted-foreground/80 uppercase tracking-[0.15em]\"\n                    htmlFor=\"role\"\n                  >\n                    Your Role\n                  </Label>\n                  <Input\n                    className=\"h-12 rounded-xl border-zinc-200 bg-zinc-50/50 px-4 transition-all focus:bg-background dark:border-zinc-800 dark:bg-zinc-900/50\"\n                    id=\"role\"\n                    placeholder=\"Product Designer\"\n                  />\n                </div>\n              </div>\n            )}\n\n            {/* Navigation Buttons */}\n            <div className=\"flex items-center gap-6 pt-6\">\n              {currentStep > 1 && (\n                <Button\n                  className=\"h-12 px-6 font-bold text-muted-foreground text-xs uppercase tracking-widest transition-all hover:text-foreground\"\n                  onClick={() => setCurrentStep((prev) => prev - 1)}\n                  variant=\"ghost\"\n                >\n                  Back\n                </Button>\n              )}\n              <Button\n                className=\"group h-12 flex-1 px-8 font-bold text-sm tracking-tight shadow-primary/20 shadow-xl transition-all hover:scale-[1.02] active:scale-[0.98] sm:flex-none\"\n                onClick={() =>\n                  currentStep < 3 ? setCurrentStep((prev) => prev + 1) : null\n                }\n              >\n                {currentStep === 3 ? \"Complete Setup\" : \"Continue\"}\n                <ChevronRight className=\"ml-2 size-4 transition-transform group-hover:translate-x-1\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "800px",
    "isPinned": true,
    "createdAt": "2024-03-27"
  },
  "categories": [
    "auth"
  ],
  "type": "registry:block"
}