{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "wizard-form-shadcnui",
  "type": "registry:component",
  "title": "Wizard Form",
  "description": "Multi-step wizard form with animated transitions, validation, and progress tracking",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/forms/wizard-form.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, type Variants } from \"framer-motion\";\nimport {\n  ArrowLeft,\n  ArrowRight,\n  Check,\n  FileCheck,\n  MapPin,\n  Settings,\n  User,\n} from \"lucide-react\";\nimport { useState } from \"react\";\n\n// ============================================================================\n// ANIMATION VARIANTS\n// ============================================================================\n\nconst containerVariants: Variants = {\n  hidden: { opacity: 0, scale: 0.95 },\n  visible: {\n    opacity: 1,\n    scale: 1,\n    transition: {\n      duration: 0.5,\n      ease: \"easeOut\",\n      staggerChildren: 0.1,\n    },\n  },\n};\n\nconst contentVariants: Variants = {\n  hidden: { opacity: 0, x: 20 },\n  visible: {\n    opacity: 1,\n    x: 0,\n    transition: { duration: 0.4, ease: \"easeOut\" },\n  },\n};\n\n// ============================================================================\n// DATA\n// ============================================================================\n\nconst STEPS = [\n  { id: 1, name: \"Personal Info\", description: \"Basic details\", icon: User },\n  { id: 2, name: \"Address\", description: \"Location info\", icon: MapPin },\n  { id: 3, name: \"Preferences\", description: \"Customization\", icon: Settings },\n  { id: 4, name: \"Review\", description: \"Final check\", icon: FileCheck },\n];\n\n// ============================================================================\n// COMPONENTS\n// ============================================================================\n\nfunction SidebarStep({\n  step,\n  currentStep,\n}: {\n  step: (typeof STEPS)[0];\n  currentStep: number;\n}) {\n  const Icon = step.icon;\n  const isCompleted = currentStep > step.id;\n  const isCurrent = currentStep === step.id;\n\n  return (\n    <div className=\"relative flex items-center gap-4 py-4\">\n      {/* Vertical Line */}\n      {step.id !== STEPS.length && (\n        <div className=\"absolute left-6 top-10 h-full w-[2px] bg-border/30\">\n          <motion.div\n            className=\"h-full w-full bg-primary\"\n            initial={{ height: \"0%\" }}\n            animate={{ height: isCompleted ? \"100%\" : \"0%\" }}\n            transition={{ duration: 0.4 }}\n          />\n        </div>\n      )}\n\n      {/* Icon Bubble */}\n      <motion.div\n        className={cn(\n          \"relative z-10 flex h-12 w-12 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-300\",\n          isCompleted\n            ? \"border-primary bg-primary text-primary-foreground\"\n            : isCurrent\n              ? \"border-primary bg-background text-primary shadow-[0_0_0_4px_rgba(var(--primary),0.1)]\"\n              : \"border-border/50 bg-background/50 text-muted-foreground\"\n        )}\n        whileHover={{ scale: 1.05 }}\n      >\n        {isCompleted ? (\n          <Check className=\"h-5 w-5\" strokeWidth={3} />\n        ) : (\n          <Icon className=\"h-5 w-5\" />\n        )}\n      </motion.div>\n\n      {/* Text Info */}\n      <div className=\"flex flex-col\">\n        <span\n          className={cn(\n            \"text-sm font-semibold transition-colors duration-300\",\n            isCurrent || isCompleted\n              ? \"text-foreground\"\n              : \"text-muted-foreground\"\n          )}\n        >\n          {step.name}\n        </span>\n        <span className=\"text-xs text-muted-foreground/70\">\n          {step.description}\n        </span>\n      </div>\n    </div>\n  );\n}\n\nfunction InputField({\n  label,\n  placeholder,\n  type = \"text\",\n}: {\n  label: string;\n  placeholder: string;\n  type?: string;\n}) {\n  return (\n    <div className=\"space-y-2\">\n      <Label\n        htmlFor={label.toLowerCase().replace(/\\s/g, \"-\")}\n        className=\"text-sm font-medium\"\n      >\n        {label} <span className=\"text-destructive\">*</span>\n      </Label>\n      <Input\n        id={label.toLowerCase().replace(/\\s/g, \"-\")}\n        type={type}\n        placeholder={placeholder}\n        className=\"rounded-lg border-border/40 bg-background/40 backdrop-blur transition-all focus:border-primary/50 focus:bg-background/60\"\n      />\n    </div>\n  );\n}\n\nfunction ReviewItem({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex items-center justify-between rounded-lg border border-border/20 bg-background/40 p-3 backdrop-blur transition-colors hover:bg-background/60\">\n      <dt className=\"text-sm text-muted-foreground\">{label}</dt>\n      <dd className=\"text-sm font-medium text-foreground\">{value}</dd>\n    </div>\n  );\n}\n\n// ============================================================================\n// MAIN COMPONENT\n// ============================================================================\n\nexport function WizardForm() {\n  const [currentStep, setCurrentStep] = useState(1);\n\n  const handleNext = () => {\n    if (currentStep < STEPS.length) {\n      setCurrentStep(currentStep + 1);\n    }\n  };\n\n  const handleBack = () => {\n    if (currentStep > 1) {\n      setCurrentStep(currentStep - 1);\n    }\n  };\n\n  return (\n    <div className=\"relative min-h-screen overflow-hidden bg-background p-6 lg:p-12 w-full\">\n      <div className=\"mx-auto max-w-6xl\">\n        {/* Header Section */}\n        <div className=\"mb-12 text-center\">\n          <Badge\n            variant=\"outline\"\n            className=\"mb-4 inline-flex items-center gap-2 rounded-full border-primary/20 bg-primary/5 px-4 py-1.5 text-xs font-medium uppercase tracking-wider text-primary backdrop-blur\"\n          >\n            <span className=\"h-1.5 w-1.5 rounded-full bg-primary animate-pulse\" />\n            Wizard Form\n          </Badge>\n          <h1 className=\"mb-3 text-3xl font-bold tracking-tight text-foreground md:text-4xl\">\n            Account Setup\n          </h1>\n          <p className=\"text-muted-foreground\">\n            Complete the steps below to verify your profile\n          </p>\n        </div>\n\n        {/* Main Card Container */}\n        <motion.div\n          variants={containerVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          className=\"relative overflow-hidden rounded-3xl border border-border/40 bg-background/40 backdrop-blur-xl\"\n        >\n          {/* Glass Gradient Overlay */}\n          <div className=\"absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-transparent pointer-events-none\" />\n\n          <div className=\"grid lg:grid-cols-[320px_1fr]\">\n            {/* Left Sidebar - Steps */}\n            <div className=\"border-b border-border/40 bg-background/30 p-8 lg:border-b-0 lg:border-r\">\n              <div className=\"space-y-1\">\n                {STEPS.map((step) => (\n                  <SidebarStep\n                    key={step.id}\n                    step={step}\n                    currentStep={currentStep}\n                  />\n                ))}\n              </div>\n            </div>\n\n            {/* Right Content Area */}\n            <div className=\"flex flex-col p-8 lg:p-12\">\n              <div className=\"flex-1\">\n                <motion.div\n                  key={currentStep}\n                  variants={contentVariants}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  className=\"space-y-8\"\n                >\n                  {/* Step Header */}\n                  <div>\n                    <h2 className=\"text-2xl font-semibold text-foreground\">\n                      {STEPS[currentStep - 1].name}\n                    </h2>\n                    <p className=\"text-sm text-muted-foreground\">\n                      {STEPS[currentStep - 1].description}\n                    </p>\n                  </div>\n\n                  {/* Form Content */}\n                  <div className=\"min-h-[300px]\">\n                    {currentStep === 1 && (\n                      <div className=\"grid gap-6 md:grid-cols-2\">\n                        <InputField label=\"First Name\" placeholder=\"John\" />\n                        <InputField label=\"Last Name\" placeholder=\"Doe\" />\n                        <InputField\n                          label=\"Email\"\n                          placeholder=\"john@example.com\"\n                          type=\"email\"\n                        />\n                        <InputField\n                          label=\"Phone\"\n                          placeholder=\"+1 (555) 000-0000\"\n                          type=\"tel\"\n                        />\n                      </div>\n                    )}\n\n                    {currentStep === 2 && (\n                      <div className=\"space-y-6\">\n                        <InputField\n                          label=\"Street Address\"\n                          placeholder=\"123 Main St\"\n                        />\n                        <div className=\"grid gap-6 md:grid-cols-3\">\n                          <InputField label=\"City\" placeholder=\"New York\" />\n                          <InputField label=\"State\" placeholder=\"NY\" />\n                          <InputField label=\"ZIP Code\" placeholder=\"10001\" />\n                        </div>\n                      </div>\n                    )}\n\n                    {currentStep === 3 && (\n                      <div className=\"space-y-8\">\n                        <div className=\"space-y-4\">\n                          <Label className=\"text-base\">\n                            Notification Method\n                          </Label>\n                          <div className=\"grid gap-4 sm:grid-cols-3\">\n                            {[\"Email\", \"SMS\", \"Both\"].map((option) => (\n                              <label\n                                key={option}\n                                className=\"relative flex cursor-pointer flex-col items-center gap-2 rounded-xl border border-border/40 bg-background/40 p-4 text-center transition-all hover:border-primary/50 hover:bg-background/60 has-[:checked]:border-primary has-[:checked]:bg-primary/5\"\n                              >\n                                <input\n                                  type=\"radio\"\n                                  name=\"notification\"\n                                  className=\"sr-only\"\n                                />\n                                <span className=\"text-sm font-medium\">\n                                  {option}\n                                </span>\n                              </label>\n                            ))}\n                          </div>\n                        </div>\n\n                        <div className=\"space-y-4\">\n                          <Label className=\"text-base\">Theme Preference</Label>\n                          <div className=\"grid gap-4 sm:grid-cols-3\">\n                            {[\"Auto\", \"Light\", \"Dark\"].map((option) => (\n                              <label\n                                key={option}\n                                className=\"relative flex cursor-pointer flex-col items-center gap-2 rounded-xl border border-border/40 bg-background/40 p-4 text-center transition-all hover:border-primary/50 hover:bg-background/60 has-[:checked]:border-primary has-[:checked]:bg-primary/5\"\n                              >\n                                <input\n                                  type=\"radio\"\n                                  name=\"theme\"\n                                  className=\"sr-only\"\n                                />\n                                <span className=\"text-sm font-medium\">\n                                  {option}\n                                </span>\n                              </label>\n                            ))}\n                          </div>\n                        </div>\n                      </div>\n                    )}\n\n                    {currentStep === 4 && (\n                      <div className=\"space-y-6\">\n                        <div className=\"rounded-xl border border-border/40 bg-background/20 p-6\">\n                          <h3 className=\"mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground\">\n                            Personal Information\n                          </h3>\n                          <div className=\"grid gap-3\">\n                            <ReviewItem label=\"Full Name\" value=\"John Doe\" />\n                            <ReviewItem\n                              label=\"Email Address\"\n                              value=\"john@example.com\"\n                            />\n                            <ReviewItem\n                              label=\"Phone Number\"\n                              value=\"+1 (555) 000-0000\"\n                            />\n                          </div>\n                        </div>\n\n                        <div className=\"rounded-xl border border-border/40 bg-background/20 p-6\">\n                          <h3 className=\"mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground\">\n                            Address Details\n                          </h3>\n                          <div className=\"grid gap-3\">\n                            <ReviewItem label=\"Street\" value=\"123 Main St\" />\n                            <ReviewItem\n                              label=\"Location\"\n                              value=\"New York, NY 10001\"\n                            />\n                          </div>\n                        </div>\n                      </div>\n                    )}\n                  </div>\n                </motion.div>\n              </div>\n\n              {/* Footer / Navigation */}\n              <div className=\"mt-8 flex items-center justify-between border-t border-border/40 pt-8\">\n                <Button\n                  variant=\"ghost\"\n                  onClick={handleBack}\n                  disabled={currentStep === 1}\n                  className=\"gap-2 text-muted-foreground hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed\"\n                >\n                  <ArrowLeft className=\"h-4 w-4\" />\n                  Back\n                </Button>\n                <Button\n                  onClick={handleNext}\n                  className=\"gap-2 rounded-full bg-primary px-8 hover:bg-primary/90\"\n                >\n                  {currentStep === STEPS.length ? (\n                    <>\n                      Submit\n                      <Check className=\"h-4 w-4\" />\n                    </>\n                  ) : (\n                    <>\n                      Next Step\n                      <ArrowRight className=\"h-4 w-4\" />\n                    </>\n                  )}\n                </Button>\n              </div>\n            </div>\n          </div>\n        </motion.div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/wizard-form-shadcnui.tsx"
    }
  ]
}