// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Welcome 02 * @description A welcome screen with progress indicator and setup steps. * Great for guided onboarding flows. * * @slots welcome, welcome-container, welcome-card, welcome-badge, * welcome-heading, welcome-description, welcome-progress, * welcome-steps, welcome-step, welcome-step-icon, welcome-step-content, * welcome-step-title, welcome-step-description, welcome-actions * @variant guided * * @registryDependencies button card badge * @dependencies lucide-react */ import * as React from "react" import { Button } from "@/registry/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/registry/ui/card" import { Badge } from "@/registry/ui/badge" import { ArrowRight, Check, User, Building2, Settings, Bell } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface SetupStep { /** Step identifier */ id: string /** Icon component */ icon: React.ComponentType<{ className?: string; "aria-hidden"?: boolean | "true" | "false"; focusable?: "true" | "false" }> /** Step title */ title: string /** Step description */ description: string /** Is completed */ completed: boolean /** Is current step */ current?: boolean } interface Welcome02Props { /** User's name */ userName?: string /** Company/workspace name */ workspaceName?: string /** Setup steps */ steps?: SetupStep[] /** Callback when step is clicked */ onStepClick?: (stepId: string) => void /** Callback when skip is clicked */ onSkip?: () => void /** Callback when continue is clicked */ onContinue?: () => void /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultSteps: SetupStep[] = [ { id: "profile", icon: User, title: "Complete your profile", description: "Add your photo and personal details", completed: true, }, { id: "workspace", icon: Building2, title: "Set up your workspace", description: "Configure your team workspace settings", completed: false, current: true, }, { id: "preferences", icon: Settings, title: "Customize preferences", description: "Set your language and theme preferences", completed: false, }, { id: "notifications", icon: Bell, title: "Enable notifications", description: "Stay updated with important alerts", completed: false, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Welcome02({ userName = "John", workspaceName = "Acme Corp", steps = defaultSteps, onStepClick, onSkip, onContinue, className, }: Welcome02Props) { const completedCount = steps.filter((s) => s.completed).length const progress = Math.round((completedCount / steps.length) * 100) return (

{progress}% complete Welcome to {workspaceName}, {userName}! Complete these steps to get the most out of your experience. {/* Progress Bar */}

{/* Steps List */}

{steps.map((step) => ( ))}

{/* Actions */}

) } export default Welcome02 export { Welcome02, type Welcome02Props, type SetupStep }

{step.title}