"use client" /** * @name Waitlist 07 * @description A multi-step waitlist with progress indicator. * Collects additional information through a stepped flow. * * @slots waitlist, waitlist-container, waitlist-content, waitlist-header, * waitlist-heading, waitlist-description, waitlist-progress, * waitlist-progress-step, waitlist-form, waitlist-form-field, * waitlist-form-label, waitlist-form-input, waitlist-form-select, * waitlist-actions, waitlist-back-button, waitlist-next-button, * waitlist-success, waitlist-success-icon, waitlist-success-title, * waitlist-success-message * @variant multi-step * * @registryDependencies button input * @dependencies lucide-react */ import * as React from "react" import { Check, CheckCircle2 } from "lucide-react" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Step { id: string /** Step title */ title: string /** Step description */ description: string } interface Waitlist07Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Steps configuration */ steps?: Step[] /** Form submit callback */ onSubmit?: (data: Record) => void /** Additional CSS classes */ className?: string /** Base ID for multi-instance safety */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultSteps: Step[] = [ { id: "step-1", title: "Email", description: "Enter your email address" }, { id: "step-2", title: "Details", description: "Tell us about yourself" }, { id: "step-3", title: "Confirm", description: "You're all set!" }, ] const roleOptions = [ "Designer", "Developer", "Product Manager", "Marketing", "Founder/Executive", "Other", ] // ============================================================================ // COMPONENT // ============================================================================ function Waitlist07({ heading = "Join the waitlist", description = "Complete the quick signup to secure your spot.", steps = defaultSteps, onSubmit, className, idBase = "waitlist-07", }: Waitlist07Props) { const [currentStep, setCurrentStep] = React.useState(0) const [formData, setFormData] = React.useState({ email: "", name: "", role: "", }) const headingId = `${idBase}-heading` const handleNext = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } if (currentStep === steps.length - 2) { onSubmit?.(formData) } } const handleBack = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1) } } const isComplete = currentStep === steps.length - 1 return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Progress Steps */}

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

{index < currentStep ? (

{index < steps.length - 1 && (

)} ))}

{/* Form Card */}

{!isComplete ? (

{ e.preventDefault() handleNext() }} > {currentStep === 0 && (

Email address setFormData({ ...formData, email: e.target.value })} required />

)} {currentStep === 1 && ( <>

Your name setFormData({ ...formData, name: e.target.value })} required />

Your role

)}

{currentStep > 0 && ( )}

) : (

You're on the list!

Thanks for joining, {formData.name}! We'll notify you at {formData.email} when we launch.

)}

) } export default Waitlist07 export { Waitlist07, type Waitlist07Props }