"use client"; import React, { useState } from "react"; import { motion, AnimatePresence, Variants } from "framer-motion"; import { ArrowRight, ArrowLeft, Droplet, Sparkles, CheckCircle2 } from "lucide-react"; // --- TYPES --- export type LiquidTheme = "orange" | "indigo" | "emerald" | "rose"; export interface FormStep { id: string; title: string; description: string; content: React.ReactNode; isValid: boolean; } export interface LiquidMultiStepProps { steps: FormStep[]; onFinish: () => Promise; theme?: LiquidTheme; } export const LiquidMultiStepForm = ({ steps, onFinish, theme = "orange", }: LiquidMultiStepProps) => { const [currentIndex, setCurrentIndex] = useState(0); const [direction, setDirection] = useState(1); const [isProcessing, setIsProcessing] = useState(false); const [isSuccess, setIsSuccess] = useState(false); const activeStep = steps[currentIndex]; const themes: Record = { orange: { bg: "bg-orange-500", text: "text-orange-500", border: "border-orange-500", liquid: "bg-orange-50 dark:bg-orange-500/10", focusRing: "focus:ring-orange-500/20", }, indigo: { bg: "bg-indigo-500", text: "text-indigo-500", border: "border-indigo-500", liquid: "bg-indigo-50 dark:bg-indigo-500/10", focusRing: "focus:ring-indigo-500/20", }, emerald: { bg: "bg-emerald-500", text: "text-emerald-500", border: "border-emerald-500", liquid: "bg-emerald-50 dark:bg-emerald-500/10", focusRing: "focus:ring-emerald-500/20", }, rose: { bg: "bg-rose-500", text: "text-rose-500", border: "border-rose-500", liquid: "bg-rose-50 dark:bg-rose-500/10", focusRing: "focus:ring-rose-500/20", } }; const currentT = themes[theme]; const handleNext = async () => { if (!activeStep.isValid) return; if (currentIndex === steps.length - 1) { setIsProcessing(true); await onFinish(); setIsProcessing(false); setIsSuccess(true); return; } setDirection(1); setCurrentIndex((prev) => prev + 1); }; const handlePrev = () => { if (currentIndex === 0) return; setDirection(-1); setCurrentIndex((prev) => prev - 1); }; const contentVariants: Variants = { hidden: (dir: number) => ({ opacity: 0, y: dir > 0 ? 20 : -20, scale: 0.98, filter: "blur(4px)", }), visible: (dir: number) => ({ opacity: 1, y: 0, scale: 1, filter: "blur(0px)", transition: { type: "spring", stiffness: 150, damping: 20, mass: 0.5 }, }), exit: (dir: number) => ({ opacity: 0, y: dir < 0 ? 20 : -20, scale: 0.98, filter: "blur(4px)", transition: { duration: 0.2 }, }), }; if (isSuccess) { return (

Setup Complete

Your configuration has been securely saved to the vault.

); } return (

{steps.map((step, idx) => { const isPast = idx < currentIndex; const isActive = idx === currentIndex; return (

{isActive && ( )} {idx + 1}

); })}

{activeStep.title}

{activeStep.description}

{activeStep.content}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function LiquidMultiStepDemo() { const [formData, setFormData] = useState({ workspace: "", architecture: "", email: "" }); const handleComplete = async () => { await new Promise(resolve => setTimeout(resolve, 1500)); console.log("Final Data payload:", formData); }; const steps: FormStep[] = [ { id: "step-1-workspace", title: "Name your workspace.", description: "This is the unique identifier for your team's environment.", isValid: formData.workspace.length >= 3, content: (

Workspace Name setFormData({ ...formData, workspace: e.target.value })} placeholder="e.g. Acme Studio" className="w-full h-14 bg-neutral-100 dark:bg-neutral-900 border border-transparent focus:border-orange-500 focus:bg-white dark:focus:bg-neutral-950 rounded-xl px-4 text-neutral-900 dark:text-white font-bold text-lg outline-none transition-all focus:ring-4 focus:ring-orange-500/10 placeholder:text-neutral-400 dark:placeholder:text-neutral-600" />

) }, { id: "step-2-architecture", title: "Select architecture.", description: "Choose the foundational structure for your components.", isValid: formData.architecture !== "", content: (

{[ { id: "monolith", label: "Monolith", desc: "All-in-one unified codebase." }, { id: "micro", label: "Micro-frontends", desc: "Decoupled and scalable." } ].map((item) => { const isSelected = formData.architecture === item.id; return ( ) })}

) }, { id: "step-3-admin", title: "Admin credentials.", description: "Set up the primary contact for this vault instance.", isValid: formData.email.includes("@") && formData.email.includes("."), content: (

Admin Email

setFormData({ ...formData, email: e.target.value })} placeholder="admin@uixtra.com" className="w-full h-14 bg-neutral-100 dark:bg-neutral-900 border border-transparent focus:border-orange-500 focus:bg-white dark:focus:bg-neutral-950 rounded-xl pl-12 pr-4 text-neutral-900 dark:text-white font-bold text-lg outline-none transition-all focus:ring-4 focus:ring-orange-500/10 placeholder:text-neutral-400 dark:placeholder:text-neutral-600" />

) } ]; return (

); }