@moontra/moonui-pro 2.7.0 → 2.7.1

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import * as t from 'react';
 import t__default, { useState, useRef, useCallback, forwardRef, createContext, useEffect, useContext, useMemo, useLayoutEffect, useDebugValue, Component } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, CreditCard, Globe, ChevronLeft, Calendar as Calendar$1, Edit, Trash2, Clock, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, ZoomOut, ZoomIn, Download, FileSpreadsheet, FileJson, Maximize2, Move, Menu, Bell, CheckCheck, CheckCircle, Settings2, LogOut, Edit3, LayoutGrid, Upload, Share2, Save, CheckCircle2, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, Pin, Sun, Moon, Monitor, XCircle, Trophy, RotateCcw, ExternalLink, CalendarIcon, DollarSign, Users, Github, Star, GitFork, Activity, Server, EyeOff, RotateCw, Zap, Timer, Cpu, MemoryStick, HardDrive, Network, BarChart3, Video, Music, Archive, File as File$1, Columns, Grip, Unlock, Minimize2, Map as Map$1, Target, MoreVertical, BellOff, ArrowDownRight, ArrowUpRight } from 'lucide-react';
+import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, CreditCard, Globe, CheckCircle2, XCircle, RotateCcw, Download, Clock, HelpCircle, ChevronLeft, Calendar as Calendar$1, Edit, Trash2, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, ZoomOut, ZoomIn, FileSpreadsheet, FileJson, Maximize2, Move, Menu, Bell, CheckCheck, CheckCircle, Settings2, LogOut, Edit3, LayoutGrid, Upload, Share2, Save, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, Pin, Sun, Moon, Monitor, Star, ExternalLink, CalendarIcon, DollarSign, Users, Github, GitFork, Activity, Server, EyeOff, RotateCw, Zap, Timer, Cpu, MemoryStick, HardDrive, Network, BarChart3, Video, Music, Archive, File as File$1, Columns, Grip, Unlock, Minimize2, Map as Map$1, Target, MoreVertical, BellOff, ArrowDownRight, ArrowUpRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -72208,376 +72208,6 @@ function MoonUIMultiStepFormPro({
 function cn2(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-function shuffleArray(array2) {
-  const shuffled = [...array2];
-  for (let i3 = shuffled.length - 1; i3 > 0; i3--) {
-    const j = Math.floor(Math.random() * (i3 + 1));
-    [shuffled[i3], shuffled[j]] = [shuffled[j], shuffled[i3]];
-  }
-  return shuffled;
-}
-var MoonUIQuizFormPro = ({
-  title,
-  description,
-  questions: initialQuestions,
-  onComplete,
-  showTimer = true,
-  totalTimeLimit,
-  showProgress = true,
-  showQuestionNumbers = true,
-  allowReview = true,
-  allowSkip = true,
-  shuffleQuestions = false,
-  shuffleOptions = false,
-  passingScore = 70,
-  instantFeedback = false,
-  showHints = false,
-  className
-}) => {
-  const [questions] = useState(
-    () => shuffleQuestions ? shuffleArray(initialQuestions) : initialQuestions
-  );
-  const [answers, setAnswers] = useState({});
-  const [results, setResults] = useState([]);
-  const [timeRemaining, setTimeRemaining] = useState(totalTimeLimit || 0);
-  const [questionStartTime, setQuestionStartTime] = useState({});
-  const [showResults, setShowResults] = useState(false);
-  const [currentQuestionTime, setCurrentQuestionTime] = useState(0);
-  useEffect(() => {
-    if (!showTimer || !totalTimeLimit || showResults)
-      return;
-    const interval = setInterval(() => {
-      setTimeRemaining((prev) => {
-        if (prev <= 1) {
-          handleQuizComplete();
-          return 0;
-        }
-        return prev - 1;
-      });
-    }, 1e3);
-    return () => clearInterval(interval);
-  }, [showTimer, totalTimeLimit, showResults]);
-  useEffect(() => {
-    if (!showTimer || showResults)
-      return;
-    const interval = setInterval(() => {
-      setCurrentQuestionTime((prev) => prev + 1);
-    }, 1e3);
-    return () => clearInterval(interval);
-  }, [showTimer, showResults]);
-  const calculateScore = useCallback(() => {
-    let score = 0;
-    let totalScore = 0;
-    const quizResults = questions.map((question) => {
-      const answer = answers[question.id];
-      const points = question.points || 1;
-      totalScore += points;
-      let isCorrect = false;
-      if (answer !== void 0 && answer !== null && answer !== "") {
-        if (question.type === "single-choice" || question.type === "true-false") {
-          isCorrect = answer === question.correctAnswer;
-        } else if (question.type === "multiple-choice") {
-          const userAnswers = Array.isArray(answer) ? answer : [];
-          const correctAnswers = Array.isArray(question.correctAnswer) ? question.correctAnswer : [];
-          isCorrect = userAnswers.length === correctAnswers.length && userAnswers.every((a2) => correctAnswers.includes(a2));
-        }
-      }
-      const earnedPoints = isCorrect ? points : 0;
-      score += earnedPoints;
-      return {
-        questionId: question.id,
-        answer,
-        isCorrect,
-        points: earnedPoints,
-        timeSpent: questionStartTime[question.id] || 0
-      };
-    });
-    return { results: quizResults, score, totalScore };
-  }, [questions, answers, questionStartTime]);
-  const handleQuizComplete = async () => {
-    const { results: results2, score, totalScore } = calculateScore();
-    setResults(results2);
-    setShowResults(true);
-    if (onComplete) {
-      await onComplete(results2, score, totalScore);
-    }
-  };
-  const formatTime = (seconds) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins}:${secs.toString().padStart(2, "0")}`;
-  };
-  const wizardSteps = questions.map((question, index2) => ({
-    id: question.id,
-    title: `Question ${index2 + 1}`,
-    description: question.tags?.join(", "),
-    content: ({ updateStepData, goToNext }) => {
-      const currentAnswer = answers[question.id];
-      const questionOptions = shuffleOptions && question.options ? shuffleArray(question.options) : question.options;
-      useEffect(() => {
-        if (!questionStartTime[question.id]) {
-          setQuestionStartTime((prev) => ({
-            ...prev,
-            [question.id]: currentQuestionTime
-          }));
-        }
-      }, []);
-      const handleAnswerChange = (value) => {
-        setAnswers((prev) => ({ ...prev, [question.id]: value }));
-        if (instantFeedback && question.type !== "text") ;
-      };
-      return /* @__PURE__ */ jsxs(MoonUICardPro, { className: "border-0 shadow-none", children: [
-        /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-            showQuestionNumbers && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "secondary", children: [
-              "Question ",
-              index2 + 1,
-              " of ",
-              questions.length
-            ] }),
-            question.points && question.points > 1 && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "outline", children: [
-              question.points,
-              " points"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-xl", children: question.question }),
-          question.description && /* @__PURE__ */ jsx(MoonUICardDescriptionPro, { children: question.description })
-        ] }),
-        /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "space-y-4", children: [
-          question.image && /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: question.image,
-              alt: "Question illustration",
-              className: "w-full rounded-lg"
-            }
-          ),
-          question.type === "single-choice" && questionOptions && /* @__PURE__ */ jsx(
-            MoonUIRadioGroupPro,
-            {
-              value: currentAnswer || "",
-              onValueChange: handleAnswerChange,
-              children: questionOptions.map((option, optionIndex) => /* @__PURE__ */ jsxs(
-                motion.div,
-                {
-                  initial: { opacity: 0, x: -20 },
-                  animate: { opacity: 1, x: 0 },
-                  transition: { delay: optionIndex * 0.1 },
-                  className: "flex items-center space-x-2 p-3 rounded-lg hover:bg-muted/50 transition-colors",
-                  children: [
-                    /* @__PURE__ */ jsx(MoonUIRadioGroupItemPro, { value: String(option.value), id: `${question.id}-${option.value}` }),
-                    /* @__PURE__ */ jsx(
-                      MoonUILabelPro,
-                      {
-                        htmlFor: `${question.id}-${option.value}`,
-                        className: "flex-1 cursor-pointer",
-                        children: option.label || option.value
-                      }
-                    )
-                  ]
-                },
-                String(option.value)
-              ))
-            }
-          ),
-          question.type === "multiple-choice" && questionOptions && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: questionOptions.map((option, optionIndex) => /* @__PURE__ */ jsxs(
-            motion.div,
-            {
-              initial: { opacity: 0, x: -20 },
-              animate: { opacity: 1, x: 0 },
-              transition: { delay: optionIndex * 0.1 },
-              className: "flex items-center space-x-2 p-3 rounded-lg hover:bg-muted/50 transition-colors",
-              children: [
-                /* @__PURE__ */ jsx(
-                  MoonUICheckboxPro,
-                  {
-                    id: `${question.id}-${option.value}`,
-                    checked: (currentAnswer || []).includes(option.value),
-                    onCheckedChange: (checked) => {
-                      const current = currentAnswer || [];
-                      if (checked) {
-                        handleAnswerChange([...current, option.value]);
-                      } else {
-                        handleAnswerChange(current.filter((v) => v !== option.value));
-                      }
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  MoonUILabelPro,
-                  {
-                    htmlFor: `${question.id}-${option.value}`,
-                    className: "flex-1 cursor-pointer",
-                    children: option.label || option.value
-                  }
-                )
-              ]
-            },
-            String(option.value)
-          )) }),
-          question.type === "true-false" && /* @__PURE__ */ jsxs(
-            MoonUIRadioGroupPro,
-            {
-              value: currentAnswer?.toString() || "",
-              onValueChange: (value) => handleAnswerChange(value === "true"),
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 p-3 rounded-lg hover:bg-muted/50", children: [
-                  /* @__PURE__ */ jsx(MoonUIRadioGroupItemPro, { value: "true", id: `${question.id}-true` }),
-                  /* @__PURE__ */ jsx(MoonUILabelPro, { htmlFor: `${question.id}-true`, className: "flex-1 cursor-pointer", children: "True" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 p-3 rounded-lg hover:bg-muted/50", children: [
-                  /* @__PURE__ */ jsx(MoonUIRadioGroupItemPro, { value: "false", id: `${question.id}-false` }),
-                  /* @__PURE__ */ jsx(MoonUILabelPro, { htmlFor: `${question.id}-false`, className: "flex-1 cursor-pointer", children: "False" })
-                ] })
-              ]
-            }
-          ),
-          question.type === "text" && /* @__PURE__ */ jsx(
-            MoonUITextareaPro,
-            {
-              value: currentAnswer || "",
-              onChange: (e2) => handleAnswerChange(e2.target.value),
-              placeholder: "Type your answer here...",
-              className: "min-h-[120px]"
-            }
-          ),
-          question.type === "rating" && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsx(
-              MoonUISliderPro,
-              {
-                value: [currentAnswer || 5],
-                onValueChange: ([value]) => handleAnswerChange(value),
-                max: 10,
-                min: 1,
-                step: 1,
-                className: "w-full"
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "text-center text-2xl font-bold", children: [
-              currentAnswer || 5,
-              "/10"
-            ] })
-          ] }),
-          showHints && question.hint && /* @__PURE__ */ jsx(MoonUIAlertPro, { children: /* @__PURE__ */ jsxs(MoonUIAlertDescriptionPro, { children: [
-            /* @__PURE__ */ jsx("strong", { children: "Hint:" }),
-            " ",
-            question.hint
-          ] }) })
-        ] })
-      ] });
-    },
-    validation: () => {
-      if (question.required && !answers[question.id]) {
-        return false;
-      }
-      return true;
-    },
-    isOptional: !question.required
-  }));
-  if (showResults) {
-    const { score, totalScore } = calculateScore();
-    const percentage = Math.round(score / totalScore * 100);
-    const passed = percentage >= passingScore;
-    return /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: { opacity: 0, scale: 0.9 },
-        animate: { opacity: 1, scale: 1 },
-        className: cn("w-full max-w-2xl mx-auto", className),
-        children: /* @__PURE__ */ jsxs(MoonUICardPro, { children: [
-          /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "text-center", children: [
-            /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4", children: /* @__PURE__ */ jsx(Trophy, { className: cn(
-              "w-16 h-16",
-              passed ? "text-yellow-500" : "text-muted-foreground"
-            ) }) }),
-            /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-3xl", children: "Quiz Complete!" }),
-            /* @__PURE__ */ jsx(MoonUICardDescriptionPro, { children: "Here's how you performed" })
-          ] }),
-          /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "space-y-6", children: [
-            /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-              /* @__PURE__ */ jsxs("div", { className: "text-5xl font-bold mb-2", children: [
-                percentage,
-                "%"
-              ] }),
-              /* @__PURE__ */ jsx(MoonUIProgressPro, { value: percentage, className: "h-3 mb-4" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm text-muted-foreground", children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  "Score: ",
-                  score,
-                  "/",
-                  totalScore
-                ] }),
-                /* @__PURE__ */ jsx("span", { children: passed ? /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "success", children: "Passed" }) : /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "destructive", children: "Failed" }) })
-              ] })
-            ] }),
-            allowReview && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: "Review Answers" }),
-              results.map((result, index2) => {
-                const question = questions.find((q) => q.id === result.questionId);
-                return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-2 rounded-lg bg-muted/50", children: [
-                  /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
-                    showQuestionNumbers && `Q${index2 + 1}: `,
-                    question?.question.substring(0, 50),
-                    "..."
-                  ] }),
-                  /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: result.isCorrect ? "success" : "destructive", children: [
-                    result.points,
-                    "/",
-                    question?.points || 1
-                  ] })
-                ] }, result.questionId);
-              })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsxs(MoonUIButtonPro, { className: "flex-1", onClick: () => window.location.reload(), children: [
-                /* @__PURE__ */ jsx(RotateCcw, { className: "w-4 h-4 mr-2" }),
-                "Retake Quiz"
-              ] }),
-              /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", children: [
-                /* @__PURE__ */ jsx(Download, { className: "w-4 h-4 mr-2" }),
-                "Download Results"
-              ] }),
-              /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", children: [
-                /* @__PURE__ */ jsx(Share2, { className: "w-4 h-4 mr-2" }),
-                "Share"
-              ] })
-            ] })
-          ] })
-        ] })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
-    showTimer && totalTimeLimit && /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4" }),
-        /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", children: [
-          "Time Remaining: ",
-          formatTime(timeRemaining)
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        MoonUIProgressPro,
-        {
-          value: timeRemaining / totalTimeLimit * 100,
-          className: "w-32 h-2"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      MoonUIFormWizardPro,
-      {
-        steps: wizardSteps,
-        onComplete: handleQuizComplete,
-        allowStepSkip: allowSkip,
-        validateOnStepChange: true,
-        showProgressBar: showProgress,
-        progressType: "dots",
-        animationType: "slide"
-      }
-    )
-  ] });
-};
 var cardPatterns = {
   visa: /^4/,
   mastercard: /^5[1-5]/,
@@ -73109,6 +72739,609 @@ var MoonUIPhoneNumberInputPro = t__default.forwardRef(({
   ] });
 });
 MoonUIPhoneNumberInputPro.displayName = "MoonUIPhoneNumberInputPro";
+var quizFormVariants = cva(
+  "relative w-full rounded-lg border bg-card text-card-foreground shadow-sm",
+  {
+    variants: {
+      variant: {
+        default: "border-border",
+        exam: "border-primary/20 bg-primary/5",
+        personality: "border-secondary/20 bg-secondary/5"
+      },
+      size: {
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-8"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var MoonUIQuizFormPro = t__default.forwardRef(({
+  className,
+  variant,
+  size: size4,
+  questions: initialQuestions,
+  settings = {},
+  onComplete,
+  onProgress,
+  title,
+  description,
+  ...props
+}, ref) => {
+  const [questions, setQuestions] = useState([]);
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [userAnswers, setUserAnswers] = useState({});
+  const [showResults, setShowResults] = useState(false);
+  const [quizResult, setQuizResult] = useState(null);
+  const [timeLeft, setTimeLeft] = useState(
+    settings.timeLimit ? settings.timeLimit * 60 : null
+  );
+  const [questionStartTime, setQuestionStartTime] = useState(Date.now());
+  const [showHint, setShowHint] = useState(false);
+  const [attempts, setAttempts] = useState(0);
+  useEffect(() => {
+    let processedQuestions = [...initialQuestions];
+    if (settings.shuffleQuestions) {
+      processedQuestions = shuffleArray(processedQuestions);
+    }
+    if (settings.shuffleOptions) {
+      processedQuestions = processedQuestions.map((q) => {
+        if (q.options) {
+          return { ...q, options: shuffleArray([...q.options]) };
+        }
+        return q;
+      });
+    }
+    setQuestions(processedQuestions);
+  }, [initialQuestions, settings.shuffleQuestions, settings.shuffleOptions]);
+  useEffect(() => {
+    if (timeLeft === null || timeLeft <= 0 || showResults)
+      return;
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev === null || prev <= 1) {
+          handleComplete();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [timeLeft, showResults]);
+  useEffect(() => {
+    if (onProgress) {
+      onProgress(currentQuestionIndex + 1, questions.length);
+    }
+  }, [currentQuestionIndex, questions.length, onProgress]);
+  const currentQuestion = questions[currentQuestionIndex];
+  const shuffleArray = (array2) => {
+    const newArray = [...array2];
+    for (let i3 = newArray.length - 1; i3 > 0; i3--) {
+      const j = Math.floor(Math.random() * (i3 + 1));
+      [newArray[i3], newArray[j]] = [newArray[j], newArray[i3]];
+    }
+    return newArray;
+  };
+  const saveAnswer = (answer) => {
+    const timeSpent = Date.now() - questionStartTime;
+    setUserAnswers((prev) => ({
+      ...prev,
+      [currentQuestion.id]: {
+        questionId: currentQuestion.id,
+        answer,
+        timeSpent
+      }
+    }));
+  };
+  const handleNext = () => {
+    if (currentQuestionIndex < questions.length - 1) {
+      setCurrentQuestionIndex((prev) => prev + 1);
+      setQuestionStartTime(Date.now());
+      setShowHint(false);
+    } else {
+      handleComplete();
+    }
+  };
+  const handlePrevious = () => {
+    if (currentQuestionIndex > 0) {
+      setCurrentQuestionIndex((prev) => prev - 1);
+      setShowHint(false);
+    }
+  };
+  const handleComplete = () => {
+    const result = calculateResult();
+    setQuizResult(result);
+    setShowResults(true);
+    setAttempts((prev) => prev + 1);
+    if (onComplete) {
+      onComplete(result);
+    }
+  };
+  const calculateResult = () => {
+    let totalScore = 0;
+    let userScore = 0;
+    const answers = [];
+    questions.forEach((question) => {
+      const userAnswer = userAnswers[question.id];
+      const points = question.points || 1;
+      totalScore += points;
+      let isCorrect = false;
+      if (userAnswer?.answer && question.correctAnswer !== void 0) {
+        switch (question.type) {
+          case "single-choice":
+          case "true-false":
+          case "text":
+            isCorrect = userAnswer.answer === question.correctAnswer;
+            break;
+          case "multiple-choice":
+            if (Array.isArray(userAnswer.answer) && Array.isArray(question.correctAnswer)) {
+              isCorrect = userAnswer.answer.length === question.correctAnswer.length && userAnswer.answer.every((a2) => question.correctAnswer.includes(a2));
+            }
+            break;
+          case "matching":
+            if (typeof userAnswer.answer === "object" && typeof question.correctAnswer === "object") {
+              const correct = question.correctAnswer;
+              const user = userAnswer.answer;
+              isCorrect = Object.keys(correct).every((key) => correct[key] === user[key]);
+            }
+            break;
+          case "rating":
+            isCorrect = true;
+            break;
+        }
+      }
+      if (isCorrect) {
+        userScore += points;
+      }
+      answers.push({
+        questionId: question.id,
+        userAnswer: userAnswer?.answer || null,
+        correctAnswer: question.correctAnswer,
+        isCorrect,
+        points: isCorrect ? points : 0
+      });
+    });
+    const percentage = totalScore > 0 ? userScore / totalScore * 100 : 0;
+    const totalTimeSpent = Object.values(userAnswers).reduce(
+      (sum, answer) => sum + (answer.timeSpent || 0),
+      0
+    );
+    return {
+      score: userScore,
+      totalScore,
+      percentage,
+      passed: settings.passingScore ? percentage >= settings.passingScore : void 0,
+      answers,
+      timeSpent: totalTimeSpent,
+      completedAt: /* @__PURE__ */ new Date()
+    };
+  };
+  const handleRestart = () => {
+    setCurrentQuestionIndex(0);
+    setUserAnswers({});
+    setShowResults(false);
+    setQuizResult(null);
+    setTimeLeft(settings.timeLimit ? settings.timeLimit * 60 : null);
+    setQuestionStartTime(Date.now());
+    setShowHint(false);
+    if (settings.shuffleQuestions) {
+      setQuestions(shuffleArray([...initialQuestions]));
+    }
+  };
+  const handleDownloadResults = () => {
+    if (!quizResult)
+      return;
+    const data = {
+      title,
+      completedAt: quizResult.completedAt,
+      score: quizResult.score,
+      totalScore: quizResult.totalScore,
+      percentage: quizResult.percentage,
+      passed: quizResult.passed,
+      timeSpent: quizResult.timeSpent,
+      answers: quizResult.answers.map((a2) => {
+        const question = questions.find((q) => q.id === a2.questionId);
+        return {
+          question: question?.question,
+          userAnswer: a2.userAnswer,
+          correctAnswer: a2.correctAnswer,
+          isCorrect: a2.isCorrect,
+          points: a2.points
+        };
+      })
+    };
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+    const url2 = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url2;
+    link.download = `quiz-results-${Date.now()}.json`;
+    link.click();
+    URL.revokeObjectURL(url2);
+  };
+  const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
+  const renderQuestion = () => {
+    if (!currentQuestion)
+      return null;
+    const userAnswer = userAnswers[currentQuestion.id]?.answer;
+    switch (currentQuestion.type) {
+      case "single-choice":
+      case "true-false":
+        return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: currentQuestion.options?.map((option, index2) => /* @__PURE__ */ jsx(
+          motion.button,
+          {
+            initial: { opacity: 0, x: -20 },
+            animate: { opacity: 1, x: 0 },
+            transition: { delay: index2 * 0.1 },
+            onClick: () => saveAnswer(option),
+            className: cn(
+              "w-full text-left p-4 rounded-lg border transition-colors",
+              userAnswer === option ? "border-primary bg-primary/10" : "border-border hover:border-primary/50"
+            ),
+            children: option
+          },
+          index2
+        )) });
+      case "multiple-choice":
+        return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: currentQuestion.options?.map((option, index2) => {
+          const selected = Array.isArray(userAnswer) && userAnswer.includes(option);
+          return /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              initial: { opacity: 0, x: -20 },
+              animate: { opacity: 1, x: 0 },
+              transition: { delay: index2 * 0.1 },
+              onClick: () => {
+                const current = userAnswer || [];
+                const newAnswer = selected ? current.filter((a2) => a2 !== option) : [...current, option];
+                saveAnswer(newAnswer);
+              },
+              className: cn(
+                "w-full text-left p-4 rounded-lg border transition-colors",
+                selected ? "border-primary bg-primary/10" : "border-border hover:border-primary/50"
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx("div", { className: cn(
+                  "w-5 h-5 rounded border-2 transition-colors",
+                  selected ? "bg-primary border-primary" : "border-border"
+                ), children: selected && /* @__PURE__ */ jsx(CheckCircle2, { className: "w-full h-full text-primary-foreground" }) }),
+                option
+              ] })
+            },
+            index2
+          );
+        }) });
+      case "text":
+        return /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            children: /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                className: "w-full p-4 rounded-lg border border-input bg-background resize-none",
+                rows: 4,
+                placeholder: "Type your answer here...",
+                value: userAnswer || "",
+                onChange: (e2) => saveAnswer(e2.target.value)
+              }
+            )
+          }
+        );
+      case "rating":
+        const maxRating = currentQuestion.maxRating || 5;
+        const currentRating = typeof userAnswer === "number" ? userAnswer : 0;
+        return /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex justify-center gap-2", children: Array.from({ length: maxRating }, (_, i3) => i3 + 1).map((rating) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => saveAnswer(rating),
+                  className: "transition-transform hover:scale-110",
+                  children: /* @__PURE__ */ jsx(
+                    Star,
+                    {
+                      className: cn(
+                        "w-10 h-10 transition-colors",
+                        rating <= currentRating ? "fill-yellow-500 text-yellow-500" : "text-muted-foreground"
+                      )
+                    }
+                  )
+                },
+                rating
+              )) }),
+              currentQuestion.ratingLabels && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsx("span", { children: currentQuestion.ratingLabels[0] }),
+                /* @__PURE__ */ jsx("span", { children: currentQuestion.ratingLabels[1] })
+              ] })
+            ]
+          }
+        );
+      case "matching":
+        const matches2 = userAnswer || {};
+        return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx("h4", { className: "font-medium mb-2", children: "Match these items:" }),
+            currentQuestion.leftOptions?.map((left, index2) => /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, x: -20 },
+                animate: { opacity: 1, x: 0 },
+                transition: { delay: index2 * 0.1 },
+                className: "p-3 rounded-lg border bg-muted/50",
+                children: left
+              },
+              left
+            ))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx("h4", { className: "font-medium mb-2", children: "With these:" }),
+            currentQuestion.leftOptions?.map((left) => /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, x: 20 },
+                animate: { opacity: 1, x: 0 },
+                children: /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    className: "w-full p-3 rounded-lg border bg-background",
+                    value: matches2[left] || "",
+                    onChange: (e2) => saveAnswer({ ...matches2, [left]: e2.target.value }),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+                      currentQuestion.rightOptions?.map((right) => /* @__PURE__ */ jsx("option", { value: right, children: right }, right))
+                    ]
+                  }
+                )
+              },
+              left
+            ))
+          ] })
+        ] });
+      default:
+        return null;
+    }
+  };
+  if (showResults && quizResult) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(quizFormVariants({ variant, size: size4 }), className), ...props, children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, scale: 0.95 },
+        animate: { opacity: 1, scale: 1 },
+        className: "space-y-6",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold mb-2", children: "Quiz Completed!" }),
+            /* @__PURE__ */ jsxs("div", { className: "text-5xl font-bold mb-4", children: [
+              quizResult.percentage.toFixed(1),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
+              "You scored ",
+              quizResult.score,
+              " out of ",
+              quizResult.totalScore,
+              " points"
+            ] }),
+            quizResult.passed !== void 0 && /* @__PURE__ */ jsx("div", { className: cn(
+              "mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-full",
+              quizResult.passed ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"
+            ), children: quizResult.passed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(CheckCircle2, { className: "w-5 h-5" }),
+              "Passed"
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(XCircle, { className: "w-5 h-5" }),
+              "Failed"
+            ] }) })
+          ] }),
+          settings.allowReview && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: "Review Answers:" }),
+            quizResult.answers.map((answer, index2) => {
+              const question = questions.find((q) => q.id === answer.questionId);
+              if (!question)
+                return null;
+              return /* @__PURE__ */ jsx("div", { className: "p-4 rounded-lg border bg-muted/50", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+                answer.isCorrect ? /* @__PURE__ */ jsx(CheckCircle2, { className: "w-5 h-5 text-green-600 mt-0.5" }) : /* @__PURE__ */ jsx(XCircle, { className: "w-5 h-5 text-red-600 mt-0.5" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsxs("p", { className: "font-medium mb-2", children: [
+                    index2 + 1,
+                    ". ",
+                    question.question
+                  ] }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                    "Your answer: ",
+                    JSON.stringify(answer.userAnswer)
+                  ] }),
+                  !answer.isCorrect && question.correctAnswer !== void 0 && /* @__PURE__ */ jsxs("p", { className: "text-sm text-green-600 mt-1", children: [
+                    "Correct answer: ",
+                    JSON.stringify(question.correctAnswer)
+                  ] }),
+                  question.explanation && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-2", children: question.explanation })
+                ] })
+              ] }) }, answer.questionId);
+            })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [
+            (!settings.maxAttempts || attempts < settings.maxAttempts) && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleRestart,
+                className: "inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90",
+                children: [
+                  /* @__PURE__ */ jsx(RotateCcw, { className: "w-4 h-4" }),
+                  "Try Again"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleDownloadResults,
+                className: "inline-flex items-center gap-2 px-4 py-2 rounded-lg border hover:bg-muted",
+                children: [
+                  /* @__PURE__ */ jsx(Download, { className: "w-4 h-4" }),
+                  "Download Results"
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn(quizFormVariants({ variant, size: size4 }), className), ...props, children: [
+    (title || timeLeft !== null) && /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        title && /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: description })
+      ] }),
+      timeLeft !== null && /* @__PURE__ */ jsxs("div", { className: cn(
+        "flex items-center gap-2 px-3 py-1 rounded-full text-sm font-medium",
+        timeLeft < 60 ? "bg-red-100 text-red-700" : "bg-muted"
+      ), children: [
+        /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4" }),
+        formatTime(timeLeft)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground mb-2", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Question ",
+          currentQuestionIndex + 1,
+          " of ",
+          questions.length
+        ] }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          Math.round((currentQuestionIndex + 1) / questions.length * 100),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-2 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          className: "h-full bg-primary",
+          initial: { width: 0 },
+          animate: { width: `${(currentQuestionIndex + 1) / questions.length * 100}%` },
+          transition: { duration: 0.3 }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: currentQuestion && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, x: 20 },
+        animate: { opacity: 1, x: 0 },
+        exit: { opacity: 0, x: -20 },
+        className: "mb-6",
+        children: [
+          /* @__PURE__ */ jsxs("h3", { className: "text-lg font-semibold mb-4", children: [
+            currentQuestion.question,
+            currentQuestion.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+          ] }),
+          renderQuestion(),
+          settings.showHints && currentQuestion.hint && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setShowHint(!showHint),
+                className: "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground",
+                children: [
+                  /* @__PURE__ */ jsx(HelpCircle, { className: "w-4 h-4" }),
+                  showHint ? "Hide" : "Show",
+                  " Hint"
+                ]
+              }
+            ),
+            showHint && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, height: 0 },
+                animate: { opacity: 1, height: "auto" },
+                className: "mt-2 p-3 rounded-lg bg-muted/50 text-sm",
+                children: currentQuestion.hint
+              }
+            )
+          ] }),
+          settings.showInstantFeedback && userAnswers[currentQuestion.id] && currentQuestion.correctAnswer !== void 0 && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, y: 10 },
+              animate: { opacity: 1, y: 0 },
+              className: "mt-4",
+              children: (() => {
+                const userAnswer = userAnswers[currentQuestion.id].answer;
+                let isCorrect = false;
+                switch (currentQuestion.type) {
+                  case "single-choice":
+                  case "true-false":
+                    isCorrect = userAnswer === currentQuestion.correctAnswer;
+                    break;
+                }
+                return /* @__PURE__ */ jsxs("div", { className: cn(
+                  "p-3 rounded-lg flex items-start gap-2",
+                  isCorrect ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"
+                ), children: [
+                  isCorrect ? /* @__PURE__ */ jsx(CheckCircle2, { className: "w-5 h-5 mt-0.5" }) : /* @__PURE__ */ jsx(XCircle, { className: "w-5 h-5 mt-0.5" }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("p", { className: "font-medium", children: isCorrect ? "Correct!" : "Incorrect" }),
+                    currentQuestion.explanation && /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: currentQuestion.explanation })
+                  ] })
+                ] });
+              })()
+            }
+          )
+        ]
+      },
+      currentQuestion.id
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: handlePrevious,
+          disabled: currentQuestionIndex === 0,
+          className: cn(
+            "inline-flex items-center gap-2 px-4 py-2 rounded-lg transition-colors",
+            currentQuestionIndex === 0 ? "opacity-50 cursor-not-allowed bg-muted text-muted-foreground" : "bg-muted hover:bg-muted/80"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" }),
+            "Previous"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: currentQuestionIndex === questions.length - 1 ? handleComplete : handleNext,
+          disabled: currentQuestion?.required && !userAnswers[currentQuestion.id],
+          className: cn(
+            "inline-flex items-center gap-2 px-4 py-2 rounded-lg transition-colors",
+            currentQuestion?.required && !userAnswers[currentQuestion.id] ? "opacity-50 cursor-not-allowed bg-muted text-muted-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90"
+          ),
+          children: [
+            currentQuestionIndex === questions.length - 1 ? "Complete" : "Next",
+            /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+          ]
+        }
+      )
+    ] })
+  ] });
+});
+MoonUIQuizFormPro.displayName = "MoonUIQuizFormPro";
 
 // src/components/enhanced/index.ts
 var enhanced_exports = {};