"use client"; import React, { useState, ReactNode, forwardRef } from "react"; import { motion, AnimatePresence, Variants } from "framer-motion"; import { ChevronRight, ChevronLeft, CheckCircle2, User, Mail, Lock, ShieldCheck, Globe, Rocket } from "lucide-react"; // --- TYPES --- export type FlowAccentColor = "orange" | "indigo" | "emerald"; export interface StepConfig { title: string; subtitle?: string; content: ReactNode; } export interface MultiStepFlowProps { steps?: StepConfig[]; onComplete?: (data: any) => void; accent?: FlowAccentColor; className?: string; } // --- SAFE COLOR MAPPING --- const themeMaps: Record = { orange: { bg: "bg-orange-500", text: "text-orange-500", border: "border-orange-500", btnHover: "hover:bg-orange-600", inputFocus: "focus:border-orange-500 focus:ring-orange-500/10", gradient: "from-orange-500 to-amber-500" }, indigo: { bg: "bg-indigo-500", text: "text-indigo-500", border: "border-indigo-500", btnHover: "hover:bg-indigo-600", inputFocus: "focus:border-indigo-500 focus:ring-indigo-500/10", gradient: "from-indigo-500 to-blue-500" }, emerald: { bg: "bg-emerald-500", text: "text-emerald-500", border: "border-emerald-500", btnHover: "hover:bg-emerald-600", inputFocus: "focus:border-emerald-500 focus:ring-emerald-500/10", gradient: "from-emerald-500 to-teal-500" } }; // --- INTERNAL REUSABLE INPUT --- interface FlowInputProps extends React.InputHTMLAttributes { label: string; icon: React.ReactNode; accentClass: string; } const InputField = forwardRef(({ label, icon, accentClass, className, ...props }, ref) => (

{label}

{icon}

)); InputField.displayName = "InputField"; const slideVariants: Variants = { enter: (direction: number) => ({ x: direction > 0 ? 40 : -40, opacity: 0, filter: "blur(4px)", }), center: { x: 0, opacity: 1, filter: "blur(0px)", transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] } }, exit: (direction: number) => ({ x: direction < 0 ? 40 : -40, opacity: 0, filter: "blur(4px)", transition: { duration: 0.3, ease: "easeInOut" } }), }; export const MultiStepFlowPro = ({ steps = [], onComplete, accent = "orange", className }: MultiStepFlowProps) => { const [currentStep, setCurrentStep] = useState(0); const [direction, setDirection] = useState(0); const [isFinished, setIsFinished] = useState(false); const currentTheme = themeMaps[accent]; const paginate = (newDirection: number) => { if (currentStep + newDirection >= 0 && currentStep + newDirection < steps.length) { setDirection(newDirection); setCurrentStep(currentStep + newDirection); } else if (currentStep + newDirection === steps.length) { setIsFinished(true); if (onComplete) onComplete({}); } }; return (

{/* PROGRESS TRACKER */}

{steps.map((step, idx) => (

{idx < currentStep || isFinished ? : idx + 1}

))}

{/* CONTENT AREA */}

{!isFinished ? (

{steps[currentStep].title}

{steps[currentStep].subtitle}

{steps[currentStep].content} ) : (

Welcome Aboard

Your professional workspace is ready. Let's build something amazing together.

)}

{/* CONTROLS */} {!isFinished && (

paginate(1)} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} className={` flex items-center gap-3 px-8 py-3.5 rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all shadow-lg outline-none ${currentStep === steps.length - 1 ? `${currentTheme.bg} text-white ${currentTheme.btnHover}` : "bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 hover:opacity-90"} `} > {currentStep === steps.length - 1 ? "Complete" : "Continue"}

)}

); }; // ========================================== // DEMO IMPLEMENTATION (3 STEPS) // ========================================== export default function MultiStepFlowDemo() { const stepsConfig: StepConfig[] = [ { title: "Profile info", subtitle: "How should we call you?", content: (

} placeholder="Alexis Uixtra" accentClass="focus:border-indigo-500 focus:ring-indigo-500/10" /> } placeholder="alexis@uixtra.com" type="email" accentClass="focus:border-indigo-500 focus:ring-indigo-500/10" />

) }, { title: "Organization", subtitle: "Tell us about your team.", content: (

} placeholder="Uixtra Labs" accentClass="focus:border-indigo-500 focus:ring-indigo-500/10" /> } placeholder="uixtra.com/workspace" accentClass="focus:border-indigo-500 focus:ring-indigo-500/10" />

) }, { title: "Security", subtitle: "Protect your workspace.", content: (

} type="password" placeholder="••••••••" accentClass="focus:border-indigo-500 focus:ring-indigo-500/10" />

) } ]; return (

); }