"use client" /** * @name Welcome 04 * @description Interactive onboarding wizard with multi-step setup. * Guides users through initial configuration with progress tracking. * * @slots welcome, welcome-container, welcome-content, welcome-progress, * welcome-progress-bar, welcome-step-indicator, welcome-heading, * welcome-description, welcome-step-content, welcome-actions, * welcome-back, welcome-next, welcome-skip * @variant wizard * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { ArrowLeft, ArrowRight, Check } from "lucide-react" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface WizardStep { id: string /** Step title */ title: string /** Step description */ description: string /** Step content label */ content: string } interface Welcome04Props { /** Wizard steps */ steps?: WizardStep[] /** Skip button text */ skipText?: string /** Complete button text */ completeText?: string /** Additional CSS classes */ className?: string /** Base ID for multi-instance safety */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultSteps: WizardStep[] = [ { id: "step-1", title: "Create your profile", description: "Tell us a bit about yourself to personalize your experience.", content: "Profile Setup Form", }, { id: "step-2", title: "Choose your interests", description: "Select topics that matter to you for tailored recommendations.", content: "Interest Selection Grid", }, { id: "step-3", title: "Connect your accounts", description: "Link your existing accounts for a seamless experience.", content: "Account Connections", }, { id: "step-4", title: "Set your preferences", description: "Configure notifications and display settings.", content: "Preferences Panel", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Welcome04({ steps = defaultSteps, skipText = "Skip for now", completeText = "Complete Setup", className, idBase = "welcome-04", }: Welcome04Props) { const [currentStep, setCurrentStep] = React.useState(0) const totalSteps = steps.length const progress = ((currentStep + 1) / totalSteps) * 100 const isLastStep = currentStep === totalSteps - 1 const headingId = `${idBase}-heading` const goToNext = () => { if (currentStep < totalSteps - 1) { setCurrentStep(currentStep + 1) } } const goToPrev = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1) } } return (

{/* Progress Bar */}

Step {currentStep + 1} of {totalSteps} {Math.round(progress)}% complete

{/* Step Content */}

{steps[currentStep].title}

{steps[currentStep].description}

{/* Placeholder Content */}

{steps[currentStep].content}

{/* Actions */}

) } export default Welcome04 export { Welcome04, type Welcome04Props }