analytica-frontend-lib 1.0.96 → 1.0.98

package/dist/Quiz/index.js

@@ -22,8 +22,10 @@ var Quiz_exports = {};
 __export(Quiz_exports, {
   Quiz: () => Quiz,
   QuizAlternative: () => QuizAlternative,
+  QuizConnectDots: () => QuizConnectDots,
   QuizContent: () => QuizContent,
   QuizDissertative: () => QuizDissertative,
+  QuizFill: () => QuizFill,
   QuizFooter: () => QuizFooter,
   QuizHeader: () => QuizHeader,
   QuizHeaderResult: () => QuizHeaderResult,
@@ -34,7 +36,9 @@ __export(Quiz_exports, {
   QuizResultHeaderTitle: () => QuizResultHeaderTitle,
   QuizResultPerformance: () => QuizResultPerformance,
   QuizResultTitle: () => QuizResultTitle,
-  QuizTitle: () => QuizTitle
+  QuizTitle: () => QuizTitle,
+  QuizTrueOrFalse: () => QuizTrueOrFalse,
+  getStatusBadge: () => getStatusBadge
 });
 module.exports = __toCommonJS(Quiz_exports);
 var import_phosphor_react9 = require("phosphor-react");
@@ -601,7 +605,7 @@ var AlternativesList = ({
   const groupName = name || `alternatives-${uniqueId}`;
   const [actualValue, setActualValue] = (0, import_react2.useState)(value);
   const isReadonly = mode === "readonly";
-  const getStatusStyles = (status, isReadonly2) => {
+  const getStatusStyles2 = (status, isReadonly2) => {
     const hoverClass = isReadonly2 ? "" : "hover:bg-background-50";
     switch (status) {
       case "correct":
@@ -612,7 +616,7 @@ var AlternativesList = ({
         return `bg-background border-border-100 ${hoverClass}`;
     }
   };
-  const getStatusBadge = (status) => {
+  const getStatusBadge2 = (status) => {
     switch (status) {
       case "correct":
         return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.CheckCircle, {}), children: "Resposta correta" });
@@ -642,8 +646,8 @@ var AlternativesList = ({
     } else if (isCorrectAnswer) {
       displayStatus = "correct";
     }
-    const statusStyles = getStatusStyles(displayStatus, true);
-    const statusBadge = getStatusBadge(displayStatus);
+    const statusStyles = getStatusStyles2(displayStatus, true);
+    const statusBadge = getStatusBadge2(displayStatus);
     const renderRadio = () => {
       const radioClasses = `w-6 h-6 rounded-full border-2 cursor-default transition-all duration-200 flex items-center justify-center ${isUserSelected ? "border-primary-950 bg-background" : "border-border-400 bg-background"}`;
       const dotClasses = "w-3 h-3 rounded-full bg-primary-950 transition-all duration-200";
@@ -734,8 +738,8 @@ var AlternativesList = ({
       className: cn("flex flex-col", getLayoutClasses(), className),
       children: alternatives.map((alternative, index) => {
         const alternativeId = alternative.value || `alt-${index}`;
-        const statusStyles = getStatusStyles(alternative.status, false);
-        const statusBadge = getStatusBadge(alternative.status);
+        const statusStyles = getStatusStyles2(alternative.status, false);
+        const statusBadge = getStatusBadge2(alternative.status);
         if (layout === "detailed") {
           return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
@@ -1830,7 +1834,7 @@ var Select = ({
     }
   }, [propValue]);
   const sizeClasses = SIZE_CLASSES6[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("w-auto", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("w-fit", className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "label",
       {
@@ -1839,7 +1843,7 @@ var Select = ({
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("relative"), ref: selectRef, children: injectStore2(children, store, size, selectId) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("relative w-fit"), ref: selectRef, children: injectStore2(children, store, size, selectId) }),
     (helperText || errorMessage) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
       helperText && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
       errorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
@@ -1932,7 +1936,7 @@ var SelectContent = (0, import_react6.forwardRef)(
         role: "menu",
         ref,
         className: cn(
-          "bg-secondary z-50 min-w-[210px] overflow-hidden rounded-md border p-1 shadow-md border-border-100",
+          "bg-secondary z-50 min-w-[210px] max-h-[300px] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md border-border-100",
           getPositionClasses(),
           className
         ),
@@ -4211,7 +4215,7 @@ var MultipleChoiceList = ({
   (0, import_react10.useEffect)(() => {
     setActualValue(selectedValues);
   }, [selectedValues]);
-  const getStatusBadge = (status) => {
+  const getStatusBadge2 = (status) => {
     switch (status) {
       case "correct":
         return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_phosphor_react7.CheckCircle, {}), children: "Resposta correta" });
@@ -4221,7 +4225,7 @@ var MultipleChoiceList = ({
         return null;
     }
   };
-  const getStatusStyles = (status) => {
+  const getStatusStyles2 = (status) => {
     switch (status) {
       case "correct":
         return "bg-success-background border-success-300";
@@ -4242,8 +4246,8 @@ var MultipleChoiceList = ({
   if (mode === "readonly") {
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("flex flex-col gap-2", className), children: choices.map((choice, i) => {
       const isSelected = actualValue?.includes(choice.value) || false;
-      const statusStyles = getStatusStyles(choice.status);
-      const statusBadge = getStatusBadge(choice.status);
+      const statusStyles = getStatusStyles2(choice.status);
+      const statusBadge = getStatusBadge2(choice.status);
       return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         "div",
         {
@@ -4465,6 +4469,24 @@ var TextArea_default = TextArea;
 
 // src/components/Quiz/Quiz.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
+var getStatusBadge = (status) => {
+  switch (status) {
+    case "correct":
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_phosphor_react9.CheckCircle, {}), children: "Resposta correta" });
+    case "incorrect":
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_phosphor_react9.XCircle, {}), children: "Resposta incorreta" });
+    default:
+      return null;
+  }
+};
+var getStatusStyles = (variantCorrect) => {
+  switch (variantCorrect) {
+    case "correct":
+      return "bg-success-background border-success-300";
+    case "incorrect":
+      return "bg-error-background border-error-300";
+  }
+};
 var Quiz = (0, import_react12.forwardRef)(({ children, className, ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
@@ -4543,58 +4565,55 @@ var QuizTitle = (0, import_react12.forwardRef)(
     );
   }
 );
+var QuizSubTitle = (0, import_react12.forwardRef)(
+  ({ subTitle, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "px-4 pb-2 pt-6", ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "font-bold text-lg text-text-950", children: subTitle }) });
+  }
+);
 var QuizHeader = () => {
-  const { getCurrentQuestion } = useQuizStore();
+  const { getCurrentQuestion, currentQuestionIndex } = useQuizStore();
   const currentQuestion = getCurrentQuestion();
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     HeaderAlternative,
     {
-      title: currentQuestion ? `Quest\xE3o ${currentQuestion.id}` : "Quest\xE3o",
+      title: currentQuestion ? `Quest\xE3o ${currentQuestionIndex + 1}` : "Quest\xE3o",
       subTitle: currentQuestion?.knowledgeMatrix?.[0]?.topicId ?? "",
       content: currentQuestion?.questionText ?? ""
     }
   );
 };
-var QuizContent = (0, import_react12.forwardRef)(({ type = "Alternativas", className, variant, ...props }, ref) => {
-  const { getCurrentQuestion, getCurrentAnswer } = useQuizStore();
+var QuizContainer = (0, import_react12.forwardRef)(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "bg-background rounded-t-xl px-4 pt-4 pb-[80px] h-auto flex flex-col gap-4 mb-auto",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+var QuizContent = (0, import_react12.forwardRef)(({ variant, paddingBottom }) => {
+  const { getCurrentQuestion } = useQuizStore();
   const currentQuestion = getCurrentQuestion();
-  const currentAnswer = getCurrentAnswer();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "px-4 pb-2 pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "font-bold text-lg text-text-950", children: type }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "div",
-      {
-        ref,
-        className: cn(
-          "bg-background rounded-t-xl px-4 pt-4 pb-[80px] h-full flex flex-col gap-4 mb-auto",
-          className
-        ),
-        ...props,
-        children: currentQuestion && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          currentQuestion.type === "ALTERNATIVA" /* ALTERNATIVA */ && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizAlternative, { variant }),
-          currentQuestion.type === "MULTIPLA_CHOICE" /* MULTIPLA_CHOICE */ && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizMultipleChoice, { variant }),
-          currentQuestion.type === "DISSERTATIVA" /* DISSERTATIVA */ && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizDissertative, { variant })
-        ] })
-      }
-    ),
-    currentQuestion?.type === "DISSERTATIVA" /* DISSERTATIVA */ && variant === "result" && currentAnswer?.answerStatus == "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */ && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "px-4 pb-2 pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "font-bold text-lg text-text-950", children: "Observa\xE7\xE3o do professor" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        "div",
-        {
-          ref,
-          className: cn(
-            "bg-background rounded-t-xl px-4 pt-4 pb-[80px] h-full flex flex-col gap-4 mb-auto",
-            className
-          ),
-          ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-600 text-md whitespace-pre-wrap", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. Mauris euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim." })
-        }
-      )
-    ] })
-  ] });
+  const questionComponents = {
+    ["ALTERNATIVA" /* ALTERNATIVA */]: QuizAlternative,
+    ["MULTIPLA_CHOICE" /* MULTIPLA_CHOICE */]: QuizMultipleChoice,
+    ["DISSERTATIVA" /* DISSERTATIVA */]: QuizDissertative,
+    ["VERDADEIRO_FALSO" /* VERDADEIRO_FALSO */]: QuizTrueOrFalse,
+    ["LIGAR_PONTOS" /* LIGAR_PONTOS */]: QuizConnectDots,
+    ["PREENCHER" /* PREENCHER */]: QuizFill
+  };
+  const QuestionComponent = currentQuestion ? questionComponents[currentQuestion.type] : null;
+  return QuestionComponent ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuestionComponent, { variant, paddingBottom }) : null;
 });
-var QuizAlternative = ({ variant = "default" }) => {
+var QuizAlternative = ({
+  variant = "default",
+  paddingBottom
+}) => {
   const { getCurrentQuestion, selectAnswer, getCurrentAnswer } = useQuizStore();
   const currentQuestion = getCurrentQuestion();
   const currentAnswer = getCurrentAnswer();
@@ -4618,26 +4637,30 @@ var QuizAlternative = ({ variant = "default" }) => {
   });
   if (!alternatives)
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "N\xE3o h\xE1 Alternativas" }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    AlternativesList,
-    {
-      mode: variant === "default" ? "interactive" : "readonly",
-      name: `question-${currentQuestion?.id || "1"}`,
-      layout: "compact",
-      alternatives,
-      value: currentAnswer?.optionId || "",
-      selectedValue: currentAnswer?.optionId || "",
-      onValueChange: (value) => {
-        if (currentQuestion) {
-          selectAnswer(currentQuestion.id, value);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      AlternativesList,
+      {
+        mode: variant === "default" ? "interactive" : "readonly",
+        name: `question-${currentQuestion?.id || "1"}`,
+        layout: "compact",
+        alternatives,
+        value: currentAnswer?.optionId || "",
+        selectedValue: currentAnswer?.optionId || "",
+        onValueChange: (value) => {
+          if (currentQuestion) {
+            selectAnswer(currentQuestion.id, value);
+          }
         }
-      }
-    },
-    `question-${currentQuestion?.id || "1"}`
-  ) });
+      },
+      `question-${currentQuestion?.id || "1"}`
+    ) }) })
+  ] });
 };
 var QuizMultipleChoice = ({
-  variant = "default"
+  variant = "default",
+  paddingBottom
 }) => {
   const { getCurrentQuestion, selectMultipleAnswer, getAllCurrentAnswer } = useQuizStore();
   const currentQuestion = getCurrentQuestion();
@@ -4695,20 +4718,24 @@ var QuizMultipleChoice = ({
   });
   if (!choices)
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "N\xE3o h\xE1 Escolhas Multiplas" }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    MultipleChoiceList,
-    {
-      choices,
-      name: questionKey,
-      selectedValues: stableSelectedValues,
-      onHandleSelectedValues: handleSelectedValues,
-      mode: variant === "default" ? "interactive" : "readonly"
-    },
-    questionKey
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      MultipleChoiceList,
+      {
+        choices,
+        name: questionKey,
+        selectedValues: stableSelectedValues,
+        onHandleSelectedValues: handleSelectedValues,
+        mode: variant === "default" ? "interactive" : "readonly"
+      },
+      questionKey
+    ) }) })
+  ] });
 };
 var QuizDissertative = ({
-  variant = "default"
+  variant = "default",
+  paddingBottom
 }) => {
   const { getCurrentQuestion, getCurrentAnswer, selectDissertativeAnswer } = useQuizStore();
   const currentQuestion = getCurrentQuestion();
@@ -4735,17 +4762,388 @@ var QuizDissertative = ({
   if (!currentQuestion) {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-600 text-md", children: "Nenhuma quest\xE3o dispon\xEDvel" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-4 max-h-[600px] overflow-y-auto", children: variant === "default" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    TextArea_default,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizSubTitle, { subTitle: "Resposta" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizContainer, { className: cn(variant != "result" && paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-4 max-h-[600px] overflow-y-auto", children: variant === "default" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      TextArea_default,
+      {
+        ref: textareaRef,
+        placeholder: "Escreva sua resposta",
+        value: currentAnswer?.answer || "",
+        onChange: (e) => handleAnswerChange(e.target.value),
+        rows: 4,
+        className: "min-h-[120px] max-h-[400px] resize-none overflow-y-auto"
+      }
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-600 text-md whitespace-pre-wrap", children: currentAnswer?.answer || "Nenhuma resposta fornecida" }) }) }) }),
+    variant === "result" && currentAnswer?.answerStatus == "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */ && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizSubTitle, { subTitle: "Observa\xE7\xE3o do professor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-600 text-md whitespace-pre-wrap", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. Mauris euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim." }) })
+    ] })
+  ] });
+};
+var QuizTrueOrFalse = ({
+  variant = "default",
+  paddingBottom
+}) => {
+  const options = [
+    {
+      label: "25 metros",
+      isCorrect: true
+    },
+    {
+      label: "30 metros",
+      isCorrect: false
+    },
+    {
+      label: "40 metros",
+      isCorrect: false
+    },
+    {
+      label: "50 metros",
+      isCorrect: false
+    }
+  ];
+  const getLetterByIndex = (index) => String.fromCharCode(97 + index);
+  const isDefaultVariant = variant == "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-col gap-3.5", children: options.map((option, index) => {
+      const variantCorrect = option.isCorrect ? "correct" : "incorrect";
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        "section",
+        {
+          className: "flex flex-col gap-2",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              "div",
+              {
+                className: cn(
+                  "flex flex-row justify-between items-center gap-2 p-2 rounded-md",
+                  !isDefaultVariant ? getStatusStyles(variantCorrect) : ""
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-900 text-sm", children: getLetterByIndex(index).concat(") ").concat(option.label) }),
+                  isDefaultVariant ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Select_default, { size: "medium", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectTrigger, { className: "w-[180px]", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectValue, { placeholder: "Selecione opc\xE3o" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SelectContent, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectItem, { value: "V", children: "Verdadeiro" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectItem, { value: "F", children: "Falso" })
+                    ] })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex-shrink-0", children: getStatusBadge(variantCorrect) })
+                ]
+              }
+            ),
+            !isDefaultVariant && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex flex-row gap-2 items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-800 text-2xs", children: "Resposta selecionada: V" }),
+              !option.isCorrect && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-800 text-2xs", children: "Resposta correta: F" })
+            ] })
+          ]
+        },
+        option.label.concat(`-${index}`)
+      );
+    }) }) })
+  ] });
+};
+var QuizConnectDots = ({
+  variant = "default",
+  paddingBottom
+}) => {
+  const dotsOptions = [
+    { label: "Ra\xE7\xE3o" },
+    { label: "Rato" },
+    { label: "Grama" },
+    { label: "Peixe" }
+  ];
+  const options = [
+    {
+      label: "Cachorro",
+      correctOption: "Ra\xE7\xE3o"
+    },
+    {
+      label: "Gato",
+      correctOption: "Rato"
+    },
+    {
+      label: "Cabra",
+      correctOption: "Grama"
+    },
+    {
+      label: "Baleia",
+      correctOption: "Peixe"
+    }
+  ];
+  const mockUserAnswers = [
+    {
+      option: "Cachorro",
+      dotOption: "Ra\xE7\xE3o",
+      correctOption: "Ra\xE7\xE3o",
+      isCorrect: true
+    },
+    {
+      option: "Gato",
+      dotOption: "Rato",
+      correctOption: "Rato",
+      isCorrect: true
+    },
+    {
+      option: "Cabra",
+      dotOption: "Peixe",
+      correctOption: "Grama",
+      isCorrect: false
+    },
     {
-      ref: textareaRef,
-      placeholder: "Escreva sua resposta",
-      value: currentAnswer?.answer || "",
-      onChange: (e) => handleAnswerChange(e.target.value),
-      rows: 4,
-      className: "min-h-[120px] max-h-[400px] resize-none overflow-y-auto"
+      option: "Baleia",
+      dotOption: "Grama",
+      correctOption: "Peixe",
+      isCorrect: false
+    }
+  ];
+  const [userAnswers, setUserAnswers] = (0, import_react12.useState)(() => {
+    if (variant === "result") {
+      return mockUserAnswers;
     }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-600 text-md whitespace-pre-wrap", children: currentAnswer?.answer || "Nenhuma resposta fornecida" }) }) });
+    return options.map((option) => ({
+      option: option.label,
+      dotOption: null,
+      correctOption: option.correctOption,
+      isCorrect: null
+    }));
+  });
+  const handleSelectDot = (optionIndex, dotValue) => {
+    setUserAnswers((prev) => {
+      const next = [...prev];
+      const { label: optionLabel, correctOption } = options[optionIndex];
+      next[optionIndex] = {
+        option: optionLabel,
+        dotOption: dotValue,
+        correctOption,
+        isCorrect: dotValue ? dotValue === correctOption : null
+      };
+      return next;
+    });
+  };
+  const getLetterByIndex = (index) => String.fromCharCode(97 + index);
+  const isDefaultVariant = variant === "default";
+  const assignedDots = new Set(
+    userAnswers.map((a) => a.dotOption).filter(Boolean)
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-col gap-3.5", children: options.map((option, index) => {
+      const answer = userAnswers[index];
+      const variantCorrect = answer.isCorrect ? "correct" : "incorrect";
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex flex-row justify-between items-center gap-2 p-2 rounded-md",
+              !isDefaultVariant ? getStatusStyles(variantCorrect) : ""
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-text-900 text-sm", children: getLetterByIndex(index) + ") " + option.label }),
+              isDefaultVariant ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                Select_default,
+                {
+                  size: "medium",
+                  value: answer.dotOption || void 0,
+                  onValueChange: (value) => handleSelectDot(index, value),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectTrigger, { className: "w-[180px]", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectValue, { placeholder: "Selecione op\xE7\xE3o" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectContent, { children: dotsOptions.filter(
+                      (dot) => !assignedDots.has(dot.label) || answer.dotOption === dot.label
+                    ).map((dot) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectItem, { value: dot.label, children: dot.label }, dot.label)) })
+                  ]
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex-shrink-0", children: answer.isCorrect === null ? null : getStatusBadge(variantCorrect) })
+            ]
+          }
+        ),
+        !isDefaultVariant && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex flex-row gap-2 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "text-text-800 text-2xs", children: [
+            "Resposta selecionada: ",
+            answer.dotOption || "Nenhuma"
+          ] }),
+          !answer.isCorrect && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "text-text-800 text-2xs", children: [
+            "Resposta correta: ",
+            answer.correctOption
+          ] })
+        ] })
+      ] }, option.label);
+    }) }) })
+  ] });
+};
+var QuizFill = ({
+  variant = "default",
+  paddingBottom = "pb-[80px]"
+}) => {
+  const options = [
+    "ci\xEAncia",
+    "disciplina",
+    "\xE1rea",
+    "especialidade",
+    "varia\xE7\xF5es"
+  ];
+  const exampleText = `A meteorologia \xE9 a {{ciencia}} que estuda os fen\xF4menos atmosf\xE9ricos e suas {{varia\xE7\xF5es}}. Esta disciplina cient\xEDfica tem como objetivo principal {{objetivo}} o comportamento da atmosfera terrestre.
+
+  Os meteorologistas utilizam diversos {{instrumentos}} para coletar dados atmosf\xE9ricos, incluindo term\xF4metros, bar\xF4metros e {{equipamentos}} modernos como radares meteorol\xF3gicos.`;
+  const mockUserAnswers = [
+    {
+      selectId: "ciencia",
+      userAnswer: "tecnologia",
+      correctAnswer: "ci\xEAncia",
+      isCorrect: false
+    },
+    {
+      selectId: "varia\xE7\xF5es",
+      userAnswer: "varia\xE7\xF5es",
+      correctAnswer: "varia\xE7\xF5es",
+      isCorrect: true
+    },
+    {
+      selectId: "objetivo",
+      userAnswer: "estudar",
+      correctAnswer: "compreender",
+      isCorrect: false
+    },
+    {
+      selectId: "instrumentos",
+      userAnswer: "ferramentas",
+      correctAnswer: "instrumentos",
+      isCorrect: false
+    },
+    {
+      selectId: "equipamentos",
+      userAnswer: "equipamentos",
+      correctAnswer: "equipamentos",
+      isCorrect: true
+    }
+  ];
+  const [answers, setAnswers] = (0, import_react12.useState)({});
+  const baseId = (0, import_react12.useId)();
+  const getAvailableOptionsForSelect = (selectId) => {
+    const usedOptions = Object.entries(answers).filter(([key]) => key !== selectId).map(([, value]) => value);
+    return options.filter((option) => !usedOptions.includes(option));
+  };
+  const handleSelectChange = (selectId, value) => {
+    const newAnswers = { ...answers, [selectId]: value };
+    setAnswers(newAnswers);
+  };
+  const renderResolutionElement = (selectId) => {
+    const mockAnswer = mockUserAnswers.find(
+      (answer) => answer.selectId === selectId
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "inline-flex mb-2.5 text-success-600 font-semibold text-md border-b-2 border-success-600", children: mockAnswer?.correctAnswer });
+  };
+  const renderDefaultElement = (selectId, startIndex, selectedValue, availableOptionsForThisSelect) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      Select_default,
+      {
+        value: selectedValue,
+        onValueChange: (value) => handleSelectChange(selectId, value),
+        className: "inline-flex mb-2.5",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectTrigger, { className: "inline-flex w-auto min-w-[140px] h-8 mx-1 bg-white border-gray-300", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectValue, { placeholder: "Selecione op\xE7\xE3o" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectContent, { children: availableOptionsForThisSelect.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectItem, { value: option, children: option }, `${option}-${index}`)) })
+        ]
+      },
+      `${selectId}-${startIndex}`
+    );
+  };
+  const renderResultElement = (selectId) => {
+    const mockAnswer = mockUserAnswers.find(
+      (answer) => answer.selectId === selectId
+    );
+    if (!mockAnswer) return null;
+    const action = mockAnswer.isCorrect ? "success" : "error";
+    const icon = mockAnswer.isCorrect ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_phosphor_react9.CheckCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_phosphor_react9.XCircle, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Badge_default,
+      {
+        variant: "solid",
+        action,
+        iconRight: icon,
+        size: "large",
+        className: "py-3 w-[180px] justify-between mb-2.5",
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-text-900", children: mockAnswer.userAnswer })
+      },
+      selectId
+    );
+  };
+  const renderTextWithSelects = (text, isResolution) => {
+    const elements = [];
+    let lastIndex = 0;
+    let elementCounter = 0;
+    const regex = /\{\{([\p{L}\p{M}\d_]+)\}\}/gu;
+    let match;
+    while ((match = regex.exec(text)) !== null) {
+      const [fullMatch, selectId] = match;
+      const startIndex = match.index;
+      if (startIndex > lastIndex) {
+        elements.push({
+          element: text.slice(lastIndex, startIndex),
+          id: `${baseId}-text-${++elementCounter}`
+        });
+      }
+      const selectedValue = answers[selectId];
+      const availableOptionsForThisSelect = getAvailableOptionsForSelect(selectId);
+      if (isResolution) {
+        elements.push({
+          element: renderResolutionElement(selectId),
+          id: `${baseId}-resolution-${++elementCounter}`
+        });
+      } else if (variant === "default") {
+        elements.push({
+          element: renderDefaultElement(
+            selectId,
+            startIndex,
+            selectedValue,
+            availableOptionsForThisSelect
+          ),
+          id: `${baseId}-select-${++elementCounter}`
+        });
+      } else {
+        const resultElement = renderResultElement(selectId);
+        if (resultElement) {
+          elements.push({
+            element: resultElement,
+            id: `${baseId}-result-${++elementCounter}`
+          });
+        }
+      }
+      lastIndex = match.index + fullMatch.length;
+    }
+    if (lastIndex < text.length) {
+      elements.push({
+        element: text.slice(lastIndex),
+        id: `${baseId}-text-${++elementCounter}`
+      });
+    }
+    return elements;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizContainer, { className: "h-auto pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-6 px-4 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        className: cn(
+          "text-lg text-text-900 leading-8 h-auto",
+          variant != "result" && paddingBottom
+        ),
+        children: renderTextWithSelects(exampleText).map((element) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: element.element }, element.id))
+      }
+    ) }) }),
+    variant === "result" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizSubTitle, { subTitle: "Resultado" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(QuizContainer, { className: "h-auto pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-6 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          className: cn("text-lg text-text-900 leading-8", paddingBottom),
+          children: renderTextWithSelects(exampleText, true).map((element) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: element.element }, element.id))
+        }
+      ) }) })
+    ] })
+  ] });
 };
 var QuizQuestionList = ({
   filterType = "all",
@@ -5289,8 +5687,10 @@ var QuizListResultByMateria = ({
 0 && (module.exports = {
   Quiz,
   QuizAlternative,
+  QuizConnectDots,
   QuizContent,
   QuizDissertative,
+  QuizFill,
   QuizFooter,
   QuizHeader,
   QuizHeaderResult,
@@ -5301,6 +5701,8 @@ var QuizListResultByMateria = ({
   QuizResultHeaderTitle,
   QuizResultPerformance,
   QuizResultTitle,
-  QuizTitle
+  QuizTitle,
+  QuizTrueOrFalse,
+  getStatusBadge
 });
 //# sourceMappingURL=index.js.map