analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
6,170 lines • 237 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/Quiz/Quiz.tsx
var Quiz_exports = {};
__export(Quiz_exports, {
Quiz: () => Quiz,
QuizContent: () => QuizContent,
QuizFooter: () => QuizFooter,
QuizHeader: () => QuizHeader,
QuizQuestionList: () => QuizQuestionList,
QuizTitle: () => QuizTitle,
getCompletionTitle: () => getCompletionTitle,
getExitConfirmationText: () => getExitConfirmationText,
getFinishConfirmationText: () => getFinishConfirmationText,
getQuizArticle: () => getQuizArticle,
getQuizPreposition: () => getQuizPreposition,
getQuizTypeConfig: () => getQuizTypeConfig,
getTypeLabel: () => getTypeLabel
});
module.exports = __toCommonJS(Quiz_exports);
var import_phosphor_react10 = require("phosphor-react");
// src/components/Badge/Badge.tsx
var import_phosphor_react = require("phosphor-react");
// src/utils/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
// src/components/Quiz/useQuizStore.ts
var import_zustand = require("zustand");
var import_middleware = require("zustand/middleware");
var MINUTE_INTERVAL_MS = 6e4;
var useQuizStore = (0, import_zustand.create)()(
(0, import_middleware.devtools)(
(set, get) => {
let timerInterval = null;
let minuteCallbackInterval = null;
const startTimer = () => {
if (get().isFinished) {
return;
}
if (timerInterval) {
clearInterval(timerInterval);
}
timerInterval = setInterval(() => {
const { timeElapsed } = get();
set({ timeElapsed: timeElapsed + 1 });
}, 1e3);
};
const stopTimer = () => {
if (timerInterval) {
clearInterval(timerInterval);
timerInterval = null;
}
};
const setMinuteCallback = (callback) => {
set({ minuteCallback: callback });
};
const startMinuteCallback = () => {
const { minuteCallback, isFinished } = get();
if (isFinished || !minuteCallback) {
return;
}
if (minuteCallbackInterval) {
clearInterval(minuteCallbackInterval);
}
minuteCallbackInterval = setInterval(() => {
const {
minuteCallback: currentCallback,
isFinished: currentIsFinished
} = get();
if (currentIsFinished || !currentCallback) {
stopMinuteCallback();
return;
}
currentCallback();
}, MINUTE_INTERVAL_MS);
};
const stopMinuteCallback = () => {
if (minuteCallbackInterval) {
clearInterval(minuteCallbackInterval);
minuteCallbackInterval = null;
}
};
return {
// Initial State
quiz: null,
currentQuestionIndex: 0,
selectedAnswers: {},
userAnswers: [],
timeElapsed: 0,
isStarted: false,
isFinished: false,
userId: "",
variant: "default",
minuteCallback: null,
dissertativeCharLimit: void 0,
questionsResult: null,
currentQuestionResult: null,
// Setters
setQuiz: (quiz) => set({ quiz }),
setUserId: (userId) => set({ userId }),
setUserAnswers: (userAnswers) => set({ userAnswers }),
getUserId: () => get().userId,
setVariant: (variant) => set({ variant }),
setQuestionResult: (questionsResult) => set({ questionsResult }),
setDissertativeCharLimit: (limit) => set({ dissertativeCharLimit: limit }),
getDissertativeCharLimit: () => get().dissertativeCharLimit,
// Navigation
goToNextQuestion: () => {
const { currentQuestionIndex, getTotalQuestions } = get();
const totalQuestions = getTotalQuestions();
if (currentQuestionIndex < totalQuestions - 1) {
set({ currentQuestionIndex: currentQuestionIndex + 1 });
}
},
goToPreviousQuestion: () => {
const { currentQuestionIndex } = get();
if (currentQuestionIndex > 0) {
set({ currentQuestionIndex: currentQuestionIndex - 1 });
}
},
goToQuestion: (index) => {
const { getTotalQuestions } = get();
const totalQuestions = getTotalQuestions();
if (index >= 0 && index < totalQuestions) {
set({ currentQuestionIndex: index });
}
},
selectAnswer: (questionId, answerId) => {
const { quiz, userAnswers } = get();
if (!quiz) return;
const activityId = quiz.id;
const userId = get().getUserId();
if (!userId || userId === "") {
return;
}
const question = quiz.questions.find((q) => q.id === questionId);
if (!question) return;
const existingAnswerIndex = userAnswers.findIndex(
(answer) => answer.questionId === questionId
);
const newUserAnswer = {
questionId,
activityId,
userId,
answer: question.questionType === "DISSERTATIVA" /* DISSERTATIVA */ ? answerId : null,
optionId: question.questionType === "DISSERTATIVA" /* DISSERTATIVA */ ? null : answerId,
questionType: question.questionType,
answerStatus: "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */
};
let updatedUserAnswers;
if (existingAnswerIndex !== -1) {
updatedUserAnswers = [...userAnswers];
updatedUserAnswers[existingAnswerIndex] = newUserAnswer;
} else {
updatedUserAnswers = [...userAnswers, newUserAnswer];
}
set({
userAnswers: updatedUserAnswers
});
},
selectMultipleAnswer: (questionId, answerIds) => {
const { quiz, userAnswers } = get();
if (!quiz) return;
const activityId = quiz.id;
const userId = get().getUserId();
if (!userId || userId === "") {
return;
}
const question = quiz.questions.find((q) => q.id === questionId);
if (!question) return;
const filteredUserAnswers = userAnswers.filter(
(answer) => answer.questionId !== questionId
);
const newUserAnswers = answerIds.map(
(answerId) => ({
questionId,
activityId,
userId,
answer: null,
// selectMultipleAnswer is for non-dissertative questions
optionId: answerId,
// selectMultipleAnswer should only set optionId
questionType: question.questionType,
answerStatus: "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */
})
);
const updatedUserAnswers = [
...filteredUserAnswers,
...newUserAnswers
];
set({
userAnswers: updatedUserAnswers
});
},
selectDissertativeAnswer: (questionId, answer) => {
const { quiz, userAnswers, dissertativeCharLimit } = get();
if (!quiz) return;
const activityId = quiz.id;
const userId = get().getUserId();
if (!userId || userId === "") {
return;
}
const question = quiz.questions.find((q) => q.id === questionId);
if (!question || question.questionType !== "DISSERTATIVA" /* DISSERTATIVA */) {
return;
}
let validatedAnswer = answer;
if (dissertativeCharLimit !== void 0 && answer.length > dissertativeCharLimit) {
validatedAnswer = answer.substring(0, dissertativeCharLimit);
}
const existingAnswerIndex = userAnswers.findIndex(
(answerItem) => answerItem.questionId === questionId
);
const newUserAnswer = {
questionId,
activityId,
userId,
answer: validatedAnswer,
optionId: null,
questionType: "DISSERTATIVA" /* DISSERTATIVA */,
answerStatus: "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */
};
let updatedUserAnswers;
if (existingAnswerIndex !== -1) {
updatedUserAnswers = [...userAnswers];
updatedUserAnswers[existingAnswerIndex] = newUserAnswer;
} else {
updatedUserAnswers = [...userAnswers, newUserAnswer];
}
set({
userAnswers: updatedUserAnswers
});
},
skipQuestion: () => {
const { getCurrentQuestion, userAnswers, quiz } = get();
const currentQuestion = getCurrentQuestion();
if (!quiz) return;
if (currentQuestion) {
const activityId = quiz.id;
const userId = get().getUserId();
if (!userId || userId === "") {
return;
}
const existingAnswerIndex = userAnswers.findIndex(
(answer) => answer.questionId === currentQuestion.id
);
const newUserAnswer = {
questionId: currentQuestion.id,
activityId,
userId,
answer: null,
optionId: null,
questionType: currentQuestion.questionType,
answerStatus: "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */
};
let updatedUserAnswers;
if (existingAnswerIndex !== -1) {
updatedUserAnswers = [...userAnswers];
updatedUserAnswers[existingAnswerIndex] = newUserAnswer;
} else {
updatedUserAnswers = [...userAnswers, newUserAnswer];
}
set({
userAnswers: updatedUserAnswers
});
}
},
skipCurrentQuestionIfUnanswered: () => {
const { getCurrentQuestion, getCurrentAnswer, skipQuestion } = get();
const currentQuestion = getCurrentQuestion();
const currentAnswer = getCurrentAnswer();
if (!currentQuestion) return;
if (!currentAnswer || currentAnswer.optionId === null && currentAnswer.answer === null) {
skipQuestion();
}
},
addUserAnswer: (questionId, answerId) => {
const { quiz, userAnswers } = get();
if (!quiz) return;
const activityId = quiz.id;
const userId = get().getUserId();
if (!userId || userId === "") {
return;
}
const question = quiz.questions.find((q) => q.id === questionId);
if (!question) return;
const existingAnswerIndex = userAnswers.findIndex(
(answer) => answer.questionId === questionId
);
const newUserAnswer = {
questionId,
activityId,
userId,
answer: question.questionType === "DISSERTATIVA" /* DISSERTATIVA */ ? answerId || null : null,
optionId: question.questionType !== "DISSERTATIVA" /* DISSERTATIVA */ ? answerId || null : null,
questionType: question.questionType,
answerStatus: "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */
};
if (existingAnswerIndex !== -1) {
const updatedUserAnswers = [...userAnswers];
updatedUserAnswers[existingAnswerIndex] = newUserAnswer;
set({ userAnswers: updatedUserAnswers });
} else {
set({ userAnswers: [...userAnswers, newUserAnswer] });
}
},
startQuiz: () => {
set({ isStarted: true, timeElapsed: 0 });
startTimer();
startMinuteCallback();
},
finishQuiz: () => {
set({ isFinished: true });
stopTimer();
stopMinuteCallback();
},
resetQuiz: () => {
stopTimer();
stopMinuteCallback();
set({
quiz: null,
currentQuestionIndex: 0,
selectedAnswers: {},
userAnswers: [],
timeElapsed: 0,
isStarted: false,
isFinished: false,
userId: "",
variant: "default",
minuteCallback: null,
dissertativeCharLimit: void 0,
questionsResult: null,
currentQuestionResult: null
});
},
// Timer
updateTime: (time) => set({ timeElapsed: time }),
startTimer,
stopTimer,
// Minute Callback
setMinuteCallback,
startMinuteCallback,
stopMinuteCallback,
// Getters
getCurrentQuestion: () => {
const { currentQuestionIndex, quiz } = get();
if (!quiz) {
return null;
}
return quiz.questions[currentQuestionIndex];
},
getTotalQuestions: () => {
const { quiz } = get();
return quiz?.questions?.length || 0;
},
getAnsweredQuestions: () => {
const { userAnswers } = get();
return userAnswers.filter(
(answer) => answer.optionId !== null || answer.answer !== null
).length;
},
getUnansweredQuestions: () => {
const { quiz, userAnswers } = get();
if (!quiz) return [];
const unansweredQuestions = [];
quiz.questions.forEach((question, index) => {
const userAnswer = userAnswers.find(
(answer) => answer.questionId === question.id
);
const isAnswered = userAnswer && (userAnswer.optionId !== null || userAnswer.answer !== null);
const isSkipped = userAnswer && userAnswer.optionId === null && userAnswer.answer === null;
if (!isAnswered && !isSkipped) {
unansweredQuestions.push(index + 1);
}
});
return unansweredQuestions;
},
getSkippedQuestions: () => {
const { userAnswers } = get();
return userAnswers.filter(
(answer) => answer.optionId === null && answer.answer === null
).length;
},
getProgress: () => {
const { getTotalQuestions, getAnsweredQuestions } = get();
const total = getTotalQuestions();
const answered = getAnsweredQuestions();
return total > 0 ? answered / total * 100 : 0;
},
isQuestionAnswered: (questionId) => {
const { userAnswers } = get();
const userAnswer = userAnswers.find(
(answer) => answer.questionId === questionId
);
return userAnswer ? userAnswer.optionId !== null || userAnswer.answer !== null : false;
},
isQuestionSkipped: (questionId) => {
const { userAnswers } = get();
const userAnswer = userAnswers.find(
(answer) => answer.questionId === questionId
);
return userAnswer ? userAnswer.optionId === null && userAnswer.answer === null : false;
},
getCurrentAnswer: () => {
const { getCurrentQuestion, userAnswers } = get();
const currentQuestion = getCurrentQuestion();
if (!currentQuestion) return void 0;
const userAnswer = userAnswers.find(
(answer) => answer.questionId === currentQuestion.id
);
const hasAnswerContent = (ua) => !!ua && (ua.optionId !== null && ua.optionId !== "" || ua.answer !== null && ua.answer !== "");
if (!hasAnswerContent(userAnswer)) {
return void 0;
}
return userAnswer;
},
getAllCurrentAnswer: () => {
const { getCurrentQuestion, userAnswers } = get();
const currentQuestion = getCurrentQuestion();
if (!currentQuestion) return void 0;
const userAnswer = userAnswers.filter(
(answer) => answer.questionId === currentQuestion.id
);
return userAnswer;
},
getQuizTitle: () => {
const { quiz } = get();
return quiz?.title || "Quiz";
},
formatTime: (seconds) => {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
},
getUserAnswers: () => {
const { userAnswers } = get();
return userAnswers;
},
getUnansweredQuestionsFromUserAnswers: () => {
const { quiz, userAnswers } = get();
if (!quiz) return [];
const unansweredQuestions = [];
quiz.questions.forEach((question, index) => {
const userAnswer = userAnswers.find(
(answer) => answer.questionId === question.id
);
const hasAnswer = userAnswer && (userAnswer.optionId !== null || userAnswer.answer !== null);
const isSkipped = userAnswer && userAnswer.optionId === null && userAnswer.answer === null;
if (!hasAnswer || isSkipped) {
unansweredQuestions.push(index + 1);
}
});
return unansweredQuestions;
},
getQuestionsGroupedBySubject: () => {
const { getQuestionResult, quiz, variant } = get();
const questions = variant == "result" ? getQuestionResult()?.answers : quiz?.questions;
if (!questions) return {};
const groupedQuestions = {};
questions.forEach((question) => {
const subjectId = question.knowledgeMatrix?.[0]?.subject?.id || "Sem mat\xE9ria";
if (!groupedQuestions[subjectId]) {
groupedQuestions[subjectId] = [];
}
groupedQuestions[subjectId].push(question);
});
return groupedQuestions;
},
// New methods for userAnswers
getUserAnswerByQuestionId: (questionId) => {
const { userAnswers } = get();
return userAnswers.find((answer) => answer.questionId === questionId) || null;
},
isQuestionAnsweredByUserAnswers: (questionId) => {
const { userAnswers } = get();
const answer = userAnswers.find(
(answer2) => answer2.questionId === questionId
);
return answer ? answer.optionId !== null || answer.answer !== null : false;
},
getQuestionStatusFromUserAnswers: (questionId) => {
const { userAnswers } = get();
const answer = userAnswers.find(
(answer2) => answer2.questionId === questionId
);
if (!answer) return "unanswered";
if (answer.optionId === null) return "skipped";
return "answered";
},
getUserAnswersForActivity: () => {
const { userAnswers } = get();
return userAnswers;
},
setCurrentQuestion: (question) => {
const { quiz, variant, questionsResult } = get();
if (!quiz) return;
let questionIndex = 0;
if (variant == "result") {
if (!questionsResult) return;
const questionResult = questionsResult.answers.find((q) => q.id === question.id) ?? questionsResult.answers.find((q) => q.questionId === question.id);
if (!questionResult) return;
questionIndex = quiz.questions.findIndex(
(q) => q.id === questionResult.questionId
);
} else {
questionIndex = quiz.questions.findIndex(
(q) => q.id === question.id
);
}
if (questionIndex === -1) {
return;
}
set({ currentQuestionIndex: questionIndex });
},
setAnswerStatus: (questionId, status) => {
const { userAnswers } = get();
const existingAnswerIndex = userAnswers.findIndex(
(answer) => answer.questionId === questionId
);
if (existingAnswerIndex !== -1) {
const updatedUserAnswers = [...userAnswers];
updatedUserAnswers[existingAnswerIndex] = {
...updatedUserAnswers[existingAnswerIndex],
answerStatus: status
};
set({ userAnswers: updatedUserAnswers });
}
},
getAnswerStatus: (questionId) => {
const { userAnswers } = get();
const userAnswer = userAnswers.find(
(answer) => answer.questionId === questionId
);
return userAnswer ? userAnswer.answerStatus : null;
},
getQuestionIndex: (questionId) => {
const { questionsResult, variant, quiz } = get();
if (variant == "result") {
if (!questionsResult) return 0;
let idx = questionsResult.answers.findIndex(
(q) => q.questionId === questionId
);
if (idx === -1) {
idx = questionsResult.answers.findIndex(
(q) => q.id === questionId
);
}
return idx !== -1 ? idx + 1 : 0;
} else {
if (!quiz) return 0;
const idx = quiz.questions.findIndex((q) => q.id === questionId);
return idx !== -1 ? idx + 1 : 0;
}
},
// Question Result
getQuestionResultByQuestionId: (questionId) => {
const { questionsResult } = get();
const question = questionsResult?.answers.find(
(answer) => answer.questionId === questionId
);
return question || null;
},
getQuestionResultStatistics: () => {
const { questionsResult } = get();
return questionsResult?.statistics || null;
},
getQuestionResult: () => {
const { questionsResult } = get();
return questionsResult;
},
setQuestionsResult: (questionsResult) => {
set({ questionsResult });
},
setCurrentQuestionResult: (currentQuestionResult) => {
set({ currentQuestionResult });
},
getCurrentQuestionResult: () => {
const { currentQuestionResult } = get();
return currentQuestionResult;
}
};
},
{
name: "quiz-store"
}
)
);
// src/utils/utils.ts
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// src/components/Badge/Badge.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var VARIANT_ACTION_CLASSES = {
solid: {
error: "bg-error-background text-error-700 focus-visible:outline-none",
warning: "bg-warning text-warning-800 focus-visible:outline-none",
success: "bg-success text-success-800 focus-visible:outline-none",
info: "bg-info text-info-800 focus-visible:outline-none",
muted: "bg-background-muted text-background-800 focus-visible:outline-none"
},
outlined: {
error: "bg-error text-error-700 border border-error-300 focus-visible:outline-none",
warning: "bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none",
success: "bg-success text-success-800 border border-success-300 focus-visible:outline-none",
info: "bg-info text-info-800 border border-info-300 focus-visible:outline-none",
muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
},
exams: {
exam1: "bg-exam-1 text-info-700 focus-visible:outline-none",
exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
},
examsOutlined: {
exam1: "bg-exam-1 text-info-700 border border-info-700 focus-visible:outline-none",
exam2: "bg-exam-2 text-typography-1 border border-typography-1 focus-visible:outline-none",
exam3: "bg-exam-3 text-typography-2 border border-typography-2 focus-visible:outline-none",
exam4: "bg-exam-4 text-success-700 border border-success-700 focus-visible:outline-none"
},
resultStatus: {
negative: "bg-error text-error-800 focus-visible:outline-none",
positive: "bg-success text-success-800 focus-visible:outline-none"
},
notification: "text-primary"
};
var SIZE_CLASSES = {
small: "text-2xs px-2 py-1",
medium: "text-xs px-2 py-1",
large: "text-sm px-2 py-1"
};
var SIZE_CLASSES_ICON = {
small: "size-3",
medium: "size-3.5",
large: "size-4"
};
var Badge = ({
children,
iconLeft,
iconRight,
size = "medium",
variant = "solid",
action = "error",
className = "",
notificationActive = false,
...props
}) => {
const sizeClasses = SIZE_CLASSES[size];
const sizeClassesIcon = SIZE_CLASSES_ICON[size];
const variantActionMap = VARIANT_ACTION_CLASSES[variant] || {};
const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
const baseClasses = "inline-flex items-center justify-center rounded-xs font-normal gap-1 relative";
const baseClassesIcon = "flex items-center";
if (variant === "notification") {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
notificationActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
"data-testid": "notification-dot",
className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
}
)
]
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
...props,
children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
children,
iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
]
}
);
};
var Badge_default = Badge;
// src/components/Alternative/Alternative.tsx
var import_phosphor_react2 = require("phosphor-react");
// src/components/Radio/Radio.tsx
var import_react = require("react");
var import_zustand2 = require("zustand");
// src/components/Text/Text.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Text = ({
children,
size = "md",
weight = "normal",
color = "text-text-950",
as,
className = "",
...props
}) => {
let sizeClasses = "";
let weightClasses = "";
const sizeClassMap = {
"2xs": "text-2xs",
xs: "text-xs",
sm: "text-sm",
md: "text-md",
lg: "text-lg",
xl: "text-xl",
"2xl": "text-2xl",
"3xl": "text-3xl",
"4xl": "text-4xl",
"5xl": "text-5xl",
"6xl": "text-6xl"
};
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
const weightClassMap = {
hairline: "font-hairline",
light: "font-light",
normal: "font-normal",
medium: "font-medium",
semibold: "font-semibold",
bold: "font-bold",
extrabold: "font-extrabold",
black: "font-black"
};
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
const baseClasses = "font-primary";
const Component = as ?? "p";
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Component,
{
className: cn(baseClasses, sizeClasses, weightClasses, color, className),
...props,
children
}
);
};
var Text_default = Text;
// src/components/Radio/Radio.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var SIZE_CLASSES2 = {
small: {
radio: "w-5 h-5",
textSize: "sm",
spacing: "gap-1.5",
borderWidth: "border-2",
dotSize: "w-2.5 h-2.5",
labelHeight: "h-5"
},
medium: {
radio: "w-6 h-6",
textSize: "md",
spacing: "gap-2",
borderWidth: "border-2",
dotSize: "w-3 h-3",
labelHeight: "h-6"
},
large: {
radio: "w-7 h-7",
textSize: "lg",
spacing: "gap-2",
borderWidth: "border-2",
dotSize: "w-3.5 h-3.5",
labelHeight: "h-7"
},
extraLarge: {
radio: "w-8 h-8",
textSize: "xl",
spacing: "gap-3",
borderWidth: "border-2",
dotSize: "w-4 h-4",
labelHeight: "h-8"
}
};
var BASE_RADIO_CLASSES = "rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
var STATE_CLASSES = {
default: {
unchecked: "border-border-400 bg-background hover:border-border-500",
checked: "border-primary-950 bg-background hover:border-primary-800"
},
hovered: {
unchecked: "border-border-500 bg-background",
checked: "border-info-700 bg-background"
},
focused: {
unchecked: "border-border-400 bg-background",
checked: "border-primary-950 bg-background"
},
invalid: {
unchecked: "border-border-400 bg-background",
checked: "border-primary-950 bg-background"
},
disabled: {
unchecked: "border-border-400 bg-background cursor-not-allowed",
checked: "border-primary-950 bg-background cursor-not-allowed"
}
};
var DOT_CLASSES = {
default: "bg-primary-950",
hovered: "bg-info-700",
focused: "bg-primary-950",
invalid: "bg-primary-950",
disabled: "bg-primary-950"
};
var Radio = (0, import_react.forwardRef)(
({
label,
size = "medium",
state = "default",
errorMessage,
helperText,
className = "",
labelClassName = "",
checked: checkedProp,
defaultChecked = false,
disabled,
id,
name,
value,
onChange,
...props
}, ref) => {
const generatedId = (0, import_react.useId)();
const inputId = id ?? `radio-${generatedId}`;
const inputRef = (0, import_react.useRef)(null);
const [internalChecked, setInternalChecked] = (0, import_react.useState)(defaultChecked);
const isControlled = checkedProp !== void 0;
const checked = isControlled ? checkedProp : internalChecked;
const handleChange = (event) => {
const newChecked = event.target.checked;
if (!isControlled) {
setInternalChecked(newChecked);
}
if (event.target) {
event.target.blur();
}
onChange?.(event);
};
const currentState = disabled ? "disabled" : state;
const sizeClasses = SIZE_CLASSES2[size];
const actualRadioSize = sizeClasses.radio;
const actualDotSize = sizeClasses.dotSize;
const radioVariant = checked ? "checked" : "unchecked";
const stylingClasses = STATE_CLASSES[currentState][radioVariant];
const getBorderWidth = () => {
if (currentState === "focused") {
return "border-2";
}
return sizeClasses.borderWidth;
};
const borderWidthClass = getBorderWidth();
const radioClasses = cn(
BASE_RADIO_CLASSES,
actualRadioSize,
borderWidthClass,
stylingClasses,
className
);
const dotClasses = cn(
actualDotSize,
"rounded-full",
DOT_CLASSES[currentState],
"transition-all duration-200"
);
const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
const getTextColor = () => {
if (currentState === "disabled") {
return checked ? "text-text-900" : "text-text-600";
}
if (currentState === "focused") {
return "text-text-900";
}
return checked ? "text-text-900" : "text-text-600";
};
const getCursorClass = () => {
return currentState === "disabled" ? "cursor-not-allowed" : "cursor-pointer";
};
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"div",
{
className: cn(
"flex flex-row items-center",
isWrapperNeeded ? cn("p-1 border-2", wrapperBorderColor, "rounded-lg gap-1.5") : sizeClasses.spacing,
disabled ? "opacity-40" : ""
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"input",
{
ref: (node) => {
inputRef.current = node;
if (typeof ref === "function") ref(node);
else if (ref) ref.current = node;
},
type: "radio",
id: inputId,
checked,
disabled,
name,
value,
onChange: handleChange,
className: "sr-only",
style: {
position: "absolute",
left: "-9999px",
visibility: "hidden"
},
...props
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"button",
{
type: "button",
className: radioClasses,
disabled,
"aria-pressed": checked,
onClick: (e) => {
e.preventDefault();
if (!disabled) {
if (inputRef.current) {
inputRef.current.click();
inputRef.current.blur();
}
}
},
onKeyDown: (e) => {
if ((e.key === "Enter" || e.key === " ") && !disabled) {
e.preventDefault();
if (inputRef.current) {
inputRef.current.click();
inputRef.current.blur();
}
}
},
children: checked && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: dotClasses })
}
),
label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
className: cn(
"flex flex-row items-center",
sizeClasses.labelHeight,
"flex-1 min-w-0"
),
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Text_default,
{
as: "label",
htmlFor: inputId,
size: sizeClasses.textSize,
weight: "normal",
className: cn(
getCursorClass(),
"select-none leading-normal flex items-center font-roboto truncate",
labelClassName
),
color: getTextColor(),
children: label
}
)
}
)
]
}
),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Text_default,
{
size: "sm",
weight: "normal",
className: "mt-1.5 truncate",
color: "text-error-600",
children: errorMessage
}
),
helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Text_default,
{
size: "sm",
weight: "normal",
className: "mt-1.5 truncate",
color: "text-text-500",
children: helperText
}
)
] });
}
);
Radio.displayName = "Radio";
var createRadioGroupStore = (name, defaultValue, disabled, onValueChange) => (0, import_zustand2.create)((set, get) => ({
value: defaultValue,
setValue: (value) => {
if (!get().disabled) {
set({ value });
get().onValueChange?.(value);
}
},
onValueChange,
disabled,
name
}));
var useRadioGroupStore = (externalStore) => {
if (!externalStore) {
throw new Error("RadioGroupItem must be used within a RadioGroup");
}
return externalStore;
};
var injectStore = (children, store) => import_react.Children.map(children, (child) => {
if (!(0, import_react.isValidElement)(child)) return child;
const typedChild = child;
const shouldInject = typedChild.type === RadioGroupItem;
return (0, import_react.cloneElement)(typedChild, {
...shouldInject ? { store } : {},
...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
});
});
var RadioGroup = (0, import_react.forwardRef)(
({
value: propValue,
defaultValue = "",
onValueChange,
name: propName,
disabled = false,
className = "",
children,
...props
}, ref) => {
const generatedId = (0, import_react.useId)();
const name = propName || `radio-group-${generatedId}`;
const storeRef = (0, import_react.useRef)(null);
storeRef.current ??= createRadioGroupStore(
name,
defaultValue,
disabled,
onValueChange
);
const store = storeRef.current;
const { setValue } = (0, import_zustand2.useStore)(store, (s) => s);
(0, import_react.useEffect)(() => {
const currentValue = store.getState().value;
if (currentValue && onValueChange) {
onValueChange(currentValue);
}
}, []);
(0, import_react.useEffect)(() => {
if (propValue !== void 0) {
setValue(propValue);
}
}, [propValue, setValue]);
(0, import_react.useEffect)(() => {
store.setState({ disabled });
}, [disabled, store]);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
ref,
className,
role: "radiogroup",
"aria-label": name,
...props,
children: injectStore(children, store)
}
);
}
);
RadioGroup.displayName = "RadioGroup";
var RadioGroupItem = (0, import_react.forwardRef)(
({
value,
store: externalStore,
disabled: itemDisabled,
size = "medium",
state = "default",
className = "",
id,
...props
}, ref) => {
const store = useRadioGroupStore(externalStore);
const {
value: groupValue,
setValue,
disabled: groupDisabled,
name
} = (0, import_zustand2.useStore)(store);
const generatedId = (0, import_react.useId)();
const inputId = id ?? `radio-item-${generatedId}`;
const isChecked = groupValue === value;
const isDisabled = groupDisabled || itemDisabled;
const currentState = isDisabled ? "disabled" : state;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Radio,
{
ref,
id: inputId,
name,
value,
checked: isChecked,
disabled: isDisabled,
size,
state: currentState,
className,
onChange: (e) => {
if (e.target.checked && !isDisabled) {
setValue(value);
}
},
...props
}
);
}
);
RadioGroupItem.displayName = "RadioGroupItem";
// src/components/Alternative/Alternative.tsx
var import_react2 = require("react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var AlternativesList = ({
alternatives,
name,
defaultValue,
value,
onValueChange,
disabled = false,
layout = "default",
className = "",
mode = "interactive",
selectedValue
}) => {
const uniqueId = (0, import_react2.useId)();
const groupName = name || `alternatives-${uniqueId}`;
const [actualValue, setActualValue] = (0, import_react2.useState)(value);
const isReadonly = mode === "readonly";
const getStatusStyles2 = (status, isReadonly2) => {
const hoverClass = isReadonly2 ? "" : "hover:bg-background-50";
switch (status) {
case "correct":
return "bg-success-background border-success-300";
case "incorrect":
return "bg-error-background border-error-300";
default:
return `bg-background border-border-100 ${hoverClass}`;
}
};
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" });
case "incorrect":
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.XCircle, {}), children: "Resposta incorreta" });
default:
return null;
}
};
const getLayoutClasses = () => {
switch (layout) {
case "compact":
return "gap-2";
case "detailed":
return "gap-4";
default:
return "gap-3.5";
}
};
const renderReadonlyAlternative = (alternative) => {
const alternativeId = alternative.value;
const isUserSelected = selectedValue === alternative.value;
const isCorrectAnswer = alternative.status === "correct";
let displayStatus = void 0;
if (isUserSelected && !isCorrectAnswer) {
displayStatus = "incorrect";
} else if (isCorrectAnswer) {
displayStatus = "correct";
}
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";
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: radioClasses, children: isUserSelected && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: dotClasses }) });
};
if (layout === "detailed") {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"div",
{
className: cn(
"border-2 rounded-lg p-4 w-full",
statusStyles,
alternative.disabled ? "opacity-50" : ""
),
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-1", children: renderRadio() }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"p",
{
className: cn(
"block font-medium",
selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"
),
children: alternative.label
}
),
alternative.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-text-600 mt-1", children: alternative.description })
] })
] }),
statusBadge && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0", children: statusBadge })
] })
},
alternativeId
);
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"div",
{
className: cn(
"flex flex-row justify-between items-start gap-2 p-2 rounded-lg w-full",
statusStyles,
alternative.disabled ? "opacity-50" : ""
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
renderRadio(),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"span",
{
className: cn(
"flex-1",
selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"
),
children: alternative.label
}
)
] }),
statusBadge && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0", children: statusBadge })
]
},
alternativeId
);
};
if (isReadonly) {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"div",
{
className: cn("flex flex-col", getLayoutClasses(), "w-full", className),
children: alternatives.map(
(alternative) => renderReadonlyAlternative(alternative)
)
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
RadioGroup,
{
name: groupName,
defaultValue,
value,
onValueChange: (value2) => {
setActualValue(value2);
onValueChange?.(value2);
},
disabled,
className: cn("flex flex-col", getLayoutClasses(), className),
children: alternatives.map((alternative, index) => {
const alternativeId = alternative.value || `alt-${index}`;
const statusStyles = getStatusStyles2(alternative.status, false);
const statusBadge = getStatusBadge2(alternative.status);
if (layout === "detailed") {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"div",
{
className: cn(
"border-2 rounded-lg p-4 transition-all",
statusStyles,
alternative.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
),
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
RadioGroupItem,
{
value: alternative.value,
id: alternativeId,
disabled: alternative.disabled,
className: "mt-1"
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"label",
{
htmlFor: alternativeId,
className: cn(
"block font-medium",
actualValue === alternative.value ? "text-text-950" : "text-text-600",
alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"
),
children: alternative.label
}
),
alternative.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-text-600 mt-1", children: alternative.description })
] })
] }),
statusBadge && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0", children: statusBadge })
] })
},
alternativeId
);
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"div",
{
className: cn(
"flex flex-row justify-between gap-2 items-start p-2 rounded-lg transition-all",
statusStyles,
alternative.disabled ? "opacity-50 cursor-not-allowed" : ""
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
RadioGroupItem,
{
value: alternative.value,
id: alternativeId,
disabled: alternative.disabled
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"label",
{
htmlFor: alternativeId,
className: cn(
"flex-1",
actualValue === alternative.value ? "text-text-950" : "text-text-600",
alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"
),
children: alternative.label
}
)
] }),
statusBadge && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0", children: statusBadge })
]
},
alternativeId
);
})
}
);
};
var HeaderAlternative = (0, import_react2.forwardRef)(
({ className, title, subTitle, content, ...props }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"div",
{
ref,
className: cn(
"bg-background p-4 flex flex-col gap-4 rounded-xl",
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex flex-col", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-text-950 font-bold text-lg", children: title }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-text-700 text-sm ", children: subTitle })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-text-950 text-md", children: content })
]
}
);
}
);
// src/components/Button/Button.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var VARIANT_ACTION_CLASSES2 = {
solid: {
primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
},
outline: {
primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
},
link: {
primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
}
};
var SIZE_CLASSES3 = {
"extra-small": "text-xs px-3.5 py-2",
small: "text-sm px-4 py-2.5",
medium: "text-md px-5 py-2.5",
large: "text-lg px-6 py-3",
"extra-large": "text-lg px-7 py-3.5"
};
var Button = ({
children,
iconLeft,
iconRight,
size = "medium",
variant = "solid",
action = "primary",
className = "",
disabled,
type = "button",
...props
}) => {
const sizeClasses = SIZE_CLASSES3[size];
const variantClasses = VARIANT_ACTION_CLASSES2[variant][action];
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"button",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
disabled,
type,
...props,
children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
children,
iconRight && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
]
}
);
};
var Button_default = Button;
// src/components/IconButton/IconButton.tsx
var import_react3 = require("react");
var import_jsx_runtime6 = require("react/jsx-runtime");
var IconButton = (0, import_react3.forwardRef)(
({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
const baseClasses = [
"inline-flex",
"items-center",
"justify-center",
"rounded-lg",
"font-medium",
"bg-transparent",
"text-text-950",
"cursor-pointer",
"hover:bg-primary-600",
"hover:text-text",
"focus-visible:outline-none",
"focus-visible:ring-2",
"focus-visible:ring-offset-0",
"focus-visible:ring-indicator-info",
"disabled:opacity-50",
"disabled:cursor-not-allowed",
"disabled:pointer-events-none"
];
const sizeClasses = {
sm: ["w-6", "h-6", "text-sm"],
md: ["w-10", "h-10", "text-base"]
};
const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
const allClasses = [
...baseClasses,
...sizeClasses[size],
...activeClasses
].join(" ");
const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"button",
{
ref,
type: "button",
className: cn(allClasses, className),
disabled,
"aria-pressed": active,
"aria-label": ariaLabel,
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex items-center justify-center", children: icon })
}
);
}
);
IconButton.displayName = "IconButton";
var IconButton_default = IconButton;
// src/components/Quiz/Quiz.tsx
var import_react14 = require("react");
// src/components/AlertDialog/AlertDialog.tsx
var import_react4 = require("react");
var import_jsx_runtime7 = require("react/jsx-runtime");
var SIZE_CLASSES4 = {
"extra-small": "w-screen max-w-[324px]",
small: "w-screen max-w-[378px]",
medium: "w-screen max-w-[459px]",
large: "w-screen max-w-[578px]",
"extra-large": "w-screen max-w-[912px]"
};
var AlertDialog = (0, import_react4.forwardRef)(
({
description,
cancelButtonLabel = "Cancelar",
submitButtonLabel = "Deletar",
title,
isOpen,
closeOnBackdropClick = true,
closeOnEscape = true,
className = "",
onSubmit,
onChangeOpen,
submitValue,
onCancel,
cancelValue,
size = "medium",
...props
}, ref) => {
(0, import_react4.useEffect)(() => {
if (!isOpen || !closeOnEscape) return;
const handleEscape = (event) => {
if (event.key === "Escape") {
onChangeOpen(false);
}
};
document.addEventListener("keydown", handleEscape);
return () => document.removeEventListener("keydown", handleEscape);
}, [isOpen, closeOnEscape]);
(0, import_react4.useEffect)(() => {
if (isOpen) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
}
return () => {
document.body.style.overflow = "unset";
};
}, [isOpen]);
const handleBackdropClick = (event) => {
if (event.target === event.currentTarget && closeOnBackdropClick) {
onChangeOpen(false);
}
};
const handleBackdropKeyDown = (event) => {
if (event.key === "Escape" && closeOnEscape) {
onChangeOpen(false);
}
};
const handleSubmit = () => {
onChangeOpen(false);
onSubmit?.(submitValue);
};
const handleCancel = () => {
onChangeOpen(false);
onCancel?.(cancelValue);
};
const sizeClasses = SIZE_CLASSES4[size];
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"div",
{
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm",
onClick: handleBackdropClick,
onKeyDown: handleBackdropKeyDown,
"data-testid": "alert-dialog-overlay",
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
"div",
{
ref,
className: cn(
"bg-background border border-border-100 rounded-lg shadow-lg p-6 m-3",
sizeClasses,
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"h2",
{
id: "alert-dialog-title",
className: "pb-3 text-xl font-semibold text-text-950",
children: title
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"p",
{
id: "alert-dialog-description",
className: "text-text-700 text-sm",
children: description
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-row items-center justify-end pt-4 gap-3", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button_default, { variant: "outline", size: "small", onClick: handleCancel, children: cancelButtonLabel }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
Button_default,
{
variant: "solid",
size: "small",
action: "negative",
onClick: handleSubmit,
children: submitButtonLabel
}
)
] })
]
}
)
}
) });
}
);
AlertDialog.displayName = "AlertDialog";
// src/components/Modal/Modal.tsx
var import_react5 = require("react");
var import_phosphor_react3 = require("phosphor-react");
// src/components/Modal/utils/videoUtils.ts
var isYouTubeUrl = (url) => {
const youtubeRegex = /^(https?:\/\/)?((www|m|music)\.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\/.+/i;
return youtubeRegex.test(url);
};
var isValidYouTubeHost = (host) => {
if (host === "youtu.be") return "youtu.be";
const isValidYouTubeCom = host === "youtube.com" || host.endsWith(".youtube.com") && /^(www|m|music)\.youtube\.com$/.test(host);
if (isValidYouTubeCom) return "youtube";
const isValidNoCookie = host === "youtube-nocookie.com" || host.endsWith(".youtube-nocookie.com") && /^(www|m|music)\.youtube-nocookie\.com$/.test(host);
if (isValidNoCookie) return "nocookie";
return null;
};
var extractYoutuBeId = (pathname) => {
const firstSeg = pathname.split("/").filter(Boolean)[0];
return firstSeg || null;
};
var extractYouTubeId = (pathname, searchParams) => {
const parts = pathname.split("/").filter(Boolean);
const [first, second] = parts;
if (first === "embed" && second) return second;
if (first === "shorts" && second) return second;
if (first === "live" && second) return second;
const v = searchParams.get("v");
if (v) return v;
return null;
};
var getYouTubeVideoId = (url) => {
try {
const u = new URL(url);
const hostType = isValidYouTubeHost(u.hostname.toLowerCase());
if (!hostType) return null;
if (hostType === "youtu.be") {
return extractYoutuBeId(u.pathname);
}
return extractYouTubeId(u.pathname, u.searchParams);
} catch {
return null;
}
};
var getYouTubeEmbedUrl = (videoId) => {
return `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=0&rel=0&modestbranding=1`;
};
// src/components/Modal/Modal.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var SIZE_CLASSES5 = {
xs: "max-w-[360px]",
sm: "max-w-[420px]",
md: "max-w-[510px]",
lg: "max-w-[640px]",
xl: "max-w-[970px]"
};
var Modal = ({
isOpen,
onClose,
title,
children,
size = "md",
className = "",
closeOnEscape = true,
footer,
hideCloseButton = false,
variant = "default",
description,
image,
imageAlt,
actionLink,
actionLabel,
contentClassName = ""
}) => {
const titleId = (0, import_react5.useId)();
(0, import_react5.useEffect)(() => {
if (!isOpen || !closeOnEscape) return;
const handleEscape = (event) => {
if (event.key === "Escape") {
onClose();
}
};
document.addEventListener("keydown", handleEscape);
return () => document.removeEventListener("keydown", handleEscape);
}, [isOpen, closeOnEscape, onClose]);
(0, import_react5.useEffect)(() => {
if (!isOpen) return;
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
const originalOverflow = document.body.style.overflow;
const originalPaddingRight = document.body.style.paddingRight;
document.body.style.overflow = "hidden";
if (scrollbarWidth > 0) {
document.body.style.paddingRight = `${scrollbarWidth}px`;
const overlay = document.createElement("div");
overlay.id = "modal-scrollbar-overlay";
overlay.style.cssText = `
position: fixed;
top: 0;
right: 0;
width: ${scrollbarWidth}px;
height: 100vh;
background-color: rgb(0 0 0 / 0.6);
z-index: 40;
pointer-events: none;
`;
document.body.appendChild(overlay);
}
return () => {
document.body.style.overflow = originalOverflow;
document.body.style.paddingRight = originalPaddingRight;
const overlay = document.getElementById("modal-scrollbar-overlay");
if (overlay) {
overlay.remove();
}
};
}, [isOpen]);
if (!isOpen) return null;
const sizeClasses = SIZE_CLASSES5[size];
const baseClasses = "bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
const dialogResetClasses = "p-0 m-0 border-none outline-none max-h-none static";
const modalClasses = cn(
baseClasses,
sizeClasses,
dialogResetClasses,
className
);
const normalizeUrl = (href) => /^https?:\/\//i.test(href) ? href : `https://${href}`;
const handleActionClick = () => {
if (actionLink) {
window.open(normalizeUrl(actionLink), "_blank", "noopener,noreferrer");
}
};
if (variant === "activity") {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
"dialog",
{
className: modalClasses,
"aria-labelledby": titleId,
"aria-modal": "true",
open: true,
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-end p-6 pb-0", children: !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"button",
{
onClick: onClose,
className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
"aria-label": "Fechar modal",
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react3.X, { size: 18 })
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center px-6 pb-6 gap-5", children: [
image && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"img",
{
src: image,
alt: imageAlt ?? "",
className: "w-[122px] h-[122px] object-contain"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"h2",
{
id: titleId,
className: "text-lg font-semibold text-text-950 text-center",
children: title
}
),
description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-md leading-[21px]", children: description }),
actionLink && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "w-full", children: [
(() => {
const normalized = normalizeUrl(actionLink);
const isYT = isYouTubeUrl(normalized);
if (!isYT) return null;
const id = getYouTubeVideoId(normalized);
if (!id) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
Button_default,
{
variant: "solid",
action: "primary",
size: "large",
className: "w-full",
onClick: handleActionClick,
children: actionLabel || "Iniciar Atividade"
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"iframe",
{
src: getYouTubeEmbedUrl(id),
className: "w-full aspect-video rounded-lg",
allowFullScreen: true,
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
title: "V\xEDdeo YouTube"
}
);
})(),
!isYouTubeUrl(normalizeUrl(actionLink)) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
Button_default,
{
variant: "solid",
action: "primary",
size: "large",
className: "w-full",
onClick: handleActionClick,
children: actionLabel || "Iniciar Atividade"
}
)
] })
] })
]
}
) });
}
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
"dialog",
{
className: modalClasses,
"aria-labelledby": titleId,
"aria-modal": "true",
open: true,
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { id: titleId, className: "text-lg font-semibold text-text-950", children: title }),
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"button",
{
onClick: onClose,
className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
"aria-label": "Fechar modal",
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react3.X, { size: 18 })
}
)
] }),
children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("px-6 pb-6", contentClassName), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
footer && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
]
}
) });
};
var Modal_default = Modal;
// src/components/Select/Select.tsx
var import_zustand3 = require("zustand");
var import_react6 = require("react");
var import_phosphor_react4 = require("phosphor-react");
var import_jsx_runtime9 = require("react/jsx-runtime");
var VARIANT_CLASSES = {
outlined: "border-2 rounded-lg focus:border-primary-950",
underlined: "border-b-2 focus:border-primary-950",
rounded: "border-2 rounded-full focus:border-primary-950"
};
var SIZE_CLASSES6 = {
small: "text-sm",
medium: "text-md",
large: "text-lg",
"extra-large": "text-lg"
};
var HEIGHT_CLASSES = {
small: "h-8",
medium: "h-9",
large: "h-10",
"extra-large": "h-12"
};
var PADDING_CLASSES = {
small: "px-2 py-1",
medium: "px-3 py-2",
large: "px-4 py-3",
"extra-large": "px-5 py-4"
};
var SIDE_CLASSES = {
top: "bottom-full -translate-y-1",
right: "top-full translate-y-1",
bottom: "top-full translate-y-1",
left: "top-full translate-y-1"
};
var ALIGN_CLASSES = {
start: "left-0",
center: "left-1/2 -translate-x-1/2",
end: "right-0"
};
function createSelectStore(onValueChange) {
return (0, import_zustand3.create)((set) => ({
open: false,
setOpen: (open) => set({ open }),
value: "",
setValue: (value) => set({ value }),
selectedLabel: "",
setSelectedLabel: (label) => set({ selectedLabel: label }),
onValueChange
}));
}
var useSelectStore = (externalStore) => {
if (!externalStore) {
throw new Error(
"Component must be used within a Select (store is missing)"
);
}
return externalStore;
};
function getLabelAsNode(children) {
if (typeof children === "string" || typeof children === "number") {
return children;
}
const flattened = import_react6.Children.toArray(children);
if (flattened.length === 1) return flattened[0];
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: flattened });
}
var injectStore2 = (children, store, size, selectId) => {
return import_react6.Children.map(children, (child) => {
if ((0, import_react6.isValidElement)(child)) {
const typedChild = child;
const newProps = {
store
};
if (typedChild.type === SelectTrigger) {
newProps.size = size;
newProps.selectId = selectId;
}
if (typedChild.props.children) {
newProps.children = injectStore2(
typedChild.props.children,
store,
size,
selectId
);
}
return (0, import_react6.cloneElement)(typedChild, newProps);
}
return child;
});
};
var Select = ({
children,
defaultValue = "",
className,
value: propValue,
onValueChange,
size = "small",
label,
helperText,
errorMessage,
id
}) => {
const storeRef = (0, import_react6.useRef)(null);
storeRef.current ??= createSelectStore(onValueChange);
const store = storeRef.current;
const selectRef = (0, import_react6.useRef)(null);
const { open, setOpen, setValue, selectedLabel } = (0, import_zustand3.useStore)(store, (s) => s);
const generatedId = (0, import_react6.useId)();
const selectId = id ?? `select-${generatedId}`;
const findLabelForValue = (children2, targetValue) => {
let found = null;
const search = (nodes) => {
import_react6.Children.forEach(nodes, (child) => {
if (!(0, import_react6.isValidElement)(child)) return;
const typedChild = child;
if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
if (typeof typedChild.props.children === "string")
found = typedChild.props.children;
}
if (typedChild.props.children && !found)
search(typedChild.props.children);
});
};
search(children2);
return found;
};
(0, import_react6.useEffect)(() => {
if (!selectedLabel && defaultValue) {
const label2 = findLabelForValue(children, defaultValue);
if (label2) store.setState({ selectedLabel: label2 });
}
}, [children, defaultValue, selectedLabel]);
(0, import_react6.useEffect)(() => {
const handleClickOutside = (event) => {
if (selectRef.current && !selectRef.current.contains(event.target)) {
setOpen(false);
}
};
const handleArrowKeys = (event) => {
const selectContent = selectRef.current?.querySelector('[role="menu"]');
if (selectContent) {
event.preventDefault();
const items = Array.from(
selectContent.querySelectorAll(
'[role="menuitem"]:not([aria-disabled="true"])'
)
).filter((el) => el instanceof HTMLElement);
const focused = document.activeElement;
const currentIndex = items.findIndex((item) => item === focused);
let nextIndex = 0;
if (event.key === "ArrowDown") {
nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
} else {
nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
}
items[nextIndex]?.focus();
}
};
if (open) {
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("keydown", handleArrowKeys);
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("keydown", handleArrowKeys);
};
}, [open]);
(0, import_react6.useEffect)(() => {
if (propValue) {
setValue(propValue);
const label2 = findLabelForValue(children, propValue);
if (label2) store.setState({ selectedLabel: label2 });
}
}, [propValue]);
const sizeClasses = SIZE_CLASSES6[size];
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("w-full", className), children: [
label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"label",
{
htmlFor: selectId,
className: cn("block font-bold text-text-900 mb-1.5", sizeClasses),
children: label
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("relative w-full"), 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: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_phosphor_react4.WarningCircle, { size: 16 }),
" ",
errorMessage
] })
] })
] });
};
var SelectValue = ({
placeholder,
store: externalStore
}) => {
const store = useSelectStore(externalStore);
const selectedLabel = (0, import_zustand3.useStore)(store, (s) => s.selectedLabel);
const value = (0, import_zustand3.useStore)(store, (s) => s.value);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-inherit flex gap-2 items-center", children: selectedLabel || placeholder || value });
};
var SelectTrigger = (0, import_react6.forwardRef)(
({
className,
invalid = false,
variant = "outlined",
store: externalStore,
disabled,
size = "medium",
selectId,
...props
}, ref) => {
const store = useSelectStore(externalStore);
const open = (0, import_zustand3.useStore)(store, (s) => s.open);
const toggleOpen = () => store.setState({ open: !open });
const variantClasses = VARIANT_CLASSES[variant];
const heightClasses = HEIGHT_CLASSES[size];
const paddingClasses = PADDING_CLASSES[size];
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
"button",
{
ref,
id: selectId,
className: cn(
"flex w-full items-center justify-between border-border-300",
heightClasses,
paddingClasses,
invalid && `${variant == "underlined" ? "border-b-2" : "border-2"} border-indicator-error text-text-600`,
disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground",
!invalid && !disabled ? "text-text-700" : "",
variantClasses,
className
),
onClick: toggleOpen,
"aria-expanded": open,
"aria-haspopup": "listbox",
"aria-controls": open ? "select-content" : void 0,
...props,
children: [
props.children,
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
import_phosphor_react4.CaretDown,
{
className: cn(
"h-[1em] w-[1em] opacity-50 transition-transform",
open ? "rotate-180" : ""
)
}
)
]
}
);
}
);
SelectTrigger.displayName = "SelectTrigger";
var SelectContent = (0, import_react6.forwardRef)(
({
children,
className,
align = "start",
side = "bottom",
store: externalStore,
...props
}, ref) => {
const store = useSelectStore(externalStore);
const open = (0, import_zustand3.useStore)(store, (s) => s.open);
if (!open) return null;
const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"div",
{
role: "menu",
ref,
className: cn(
"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
),
...props,
children
}
);
}
);
SelectContent.displayName = "SelectContent";
var SelectItem = (0, import_react6.forwardRef)(
({
className,
children,
value,
disabled = false,
store: externalStore,
...props
}, ref) => {
const store = useSelectStore(externalStore);
const {
value: selectedValue,
setValue,
setOpen,
setSelectedLabel,
onValueChange
} = (0, import_zustand3.useStore)(store, (s) => s);
const handleClick = (e) => {
const labelNode = getLabelAsNode(children);
if (!disabled) {
setValue(value);
setSelectedLabel(labelNode);
setOpen(false);
onValueChange?.(value);
}
props.onClick?.(e);
};
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
"div",
{
role: "menuitem",
"aria-disabled": disabled,
ref,
className: `
bg-secondary focus-visible:bg-background-50
relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
${className}
${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
${selectedValue === value && "bg-background-50"}
`,
onClick: handleClick,
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") handleClick(e);
},
tabIndex: disabled ? -1 : 0,
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_phosphor_react4.Check, { className: "" }) }),
children
]
}
);
}
);
SelectItem.displayName = "SelectItem";
var Select_default = Select;
// src/components/Quiz/QuizContent.tsx
var import_react11 = require("react");
// src/components/TextArea/TextArea.tsx
var import_react7 = require("react");
var import_phosphor_react5 = require("phosphor-react");
var import_jsx_runtime10 = require("react/jsx-runtime");
var SIZE_CLASSES7 = {
small: {
textarea: "h-24 text-sm",
// 96px height, 14px font
textSize: "sm"
},
medium: {
textarea: "h-24 text-base",
// 96px height, 16px font
textSize: "md"
},
large: {
textarea: "h-24 text-lg",
// 96px height, 18px font
textSize: "lg"
},
extraLarge: {
textarea: "h-24 text-xl",
// 96px height, 20px font
textSize: "xl"
}
};
var BASE_TEXTAREA_CLASSES = "w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200";
var STATE_CLASSES2 = {
default: {
base: "border-border-300 bg-background text-text-600",
hover: "hover:border-border-400",
focus: "focus:border-border-500"
},
hovered: {
base: "border-border-400 bg-background text-text-600",
hover: "",
focus: "focus:border-border-500"
},
focused: {
base: "border-2 border-primary-950 bg-background text-text-900",
hover: "",
focus: ""
},
invalid: {
base: "border-2 border-red-700 bg-white text-gray-800",
hover: "hover:border-red-700",
focus: "focus:border-red-700"
},
disabled: {
base: "border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40",
hover: "",
focus: ""
}
};
var TextArea = (0, import_react7.forwardRef)(
({
label,
size = "medium",
state = "default",
errorMessage,
helperMessage,
className = "",
labelClassName = "",
disabled,
id,
onChange,
placeholder,
required,
showCharacterCount = false,
maxLength,
value,
...props
}, ref) => {
const generatedId = (0, import_react7.useId)();
const inputId = id ?? `textarea-${generatedId}`;
const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
const currentLength = typeof value === "string" ? value.length : 0;
const isNearLimit = maxLength && currentLength >= maxLength * 0.8;
const handleChange = (event) => {
onChange?.(event);
};
const handleFocus = (event) => {
setIsFocused(true);
props.onFocus?.(event);
};
const handleBlur = (event) => {
setIsFocused(false);
props.onBlur?.(event);
};
let currentState = disabled ? "disabled" : state;
if (isFocused && currentState !== "invalid" && currentState !== "disabled") {
currentState = "focused";
}
const sizeClasses = SIZE_CLASSES7[size];
const stateClasses = STATE_CLASSES2[currentState];
const textareaClasses = cn(
BASE_TEXTAREA_CLASSES,
sizeClasses.textarea,
stateClasses.base,
stateClasses.hover,
stateClasses.focus,
className
);
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col`, children: [
label && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
Text_default,
{
as: "label",
htmlFor: inputId,
size: sizeClasses.textSize,
weight: "medium",
color: "text-text-950",
className: cn("mb-1.5", labelClassName),
children: [
label,
" ",
required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-indicator-error", children: "*" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"textarea",
{
ref,
id: inputId,
disabled,
onChange: handleChange,
onFocus: handleFocus,
onBlur: handleBlur,
className: textareaClasses,
placeholder,
required,
maxLength,
value,
...props
}
),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error mt-1.5", children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_phosphor_react5.WarningCircle, { size: 16 }),
" ",
errorMessage
] }),
!errorMessage && showCharacterCount && maxLength && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
Text_default,
{
size: "sm",
weight: "normal",
className: `mt-1.5 ${isNearLimit ? "text-indicator-warning" : "text-text-500"}`,
children: [
currentLength,
"/",
maxLength,
" caracteres"
]
}
),
!errorMessage && helperMessage && !(showCharacterCount && maxLength) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
] });
}
);
TextArea.displayName = "TextArea";
var TextArea_default = TextArea;
// src/components/MultipleChoice/MultipleChoice.tsx
var import_react10 = require("react");
// src/components/CheckBox/CheckboxList.tsx
var import_react9 = require("react");
var import_zustand4 = require("zustand");
// src/components/CheckBox/CheckBox.tsx
var import_react8 = require("react");
var import_phosphor_react6 = require("phosphor-react");
var import_jsx_runtime11 = require("react/jsx-runtime");
var SIZE_CLASSES8 = {
small: {
checkbox: "w-4 h-4",
// 16px x 16px
textSize: "sm",
spacing: "gap-1.5",
// 6px
borderWidth: "border-2",
iconSize: 14,
// pixels for Phosphor icons
labelHeight: "h-[21px]"
},
medium: {
checkbox: "w-5 h-5",
// 20px x 20px
textSize: "md",
spacing: "gap-2",
// 8px
borderWidth: "border-2",
iconSize: 16,
// pixels for Phosphor icons
labelHeight: "h-6"
},
large: {
checkbox: "w-6 h-6",
// 24px x 24px
textSize: "lg",
spacing: "gap-2",
// 8px
borderWidth: "border-[3px]",
// 3px border
iconSize: 20,
// pixels for Phosphor icons
labelHeight: "h-[27px]"
}
};
var BASE_CHECKBOX_CLASSES = "rounded border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
var STATE_CLASSES3 = {
default: {
unchecked: "border-border-400 bg-background hover:border-border-500",
checked: "border-primary-950 bg-primary-950 text-text hover:border-primary-800 hover:bg-primary-800"
},
hovered: {
unchecked: "border-border-500 bg-background",
checked: "border-primary-800 bg-primary-800 text-text"
},
focused: {
unchecked: "border-indicator-info bg-background ring-2 ring-indicator-info/20",
checked: "border-indicator-info bg-primary-950 text-text ring-2 ring-indicator-info/20"
},
invalid: {
unchecked: "border-error-700 bg-background hover:border-error-600",
checked: "border-error-700 bg-primary-950 text-text"
},
disabled: {
unchecked: "border-border-400 bg-background cursor-not-allowed opacity-40",
checked: "border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40"
}
};
var CheckBox = (0, import_react8.forwardRef)(
({
label,
size = "medium",
state = "default",
indeterminate = false,
errorMessage,
helperText,
className = "",
labelClassName = "",
checked: checkedProp,
disabled,
id,
onChange,
...props
}, ref) => {
const generatedId = (0, import_react8.useId)();
const inputId = id ?? `checkbox-${generatedId}`;
const [internalChecked, setInternalChecked] = (0, import_react8.useState)(false);
const isControlled = checkedProp !== void 0;
const checked = isControlled ? checkedProp : internalChecked;
const handleChange = (event) => {
if (!isControlled) {
setInternalChecked(event.target.checked);
}
onChange?.(event);
};
const currentState = disabled ? "disabled" : state;
const sizeClasses = SIZE_CLASSES8[size];
const checkVariant = checked || indeterminate ? "checked" : "unchecked";
const stylingClasses = STATE_CLASSES3[currentState][checkVariant];
const borderWidthClass = state === "focused" || state === "hovered" && size === "large" ? "border-[3px]" : sizeClasses.borderWidth;
const checkboxClasses = cn(
BASE_CHECKBOX_CLASSES,
sizeClasses.checkbox,
borderWidthClass,
stylingClasses,
className
);
const renderIcon = () => {
if (indeterminate) {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
import_phosphor_react6.Minus,
{
size: sizeClasses.iconSize,
weight: "bold",
color: "currentColor"
}
);
}
if (checked) {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
import_phosphor_react6.Check,
{
size: sizeClasses.iconSize,
weight: "bold",
color: "currentColor"
}
);
}
return null;
};
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col", children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
"div",
{
className: cn(
"flex flex-row items-center",
sizeClasses.spacing,
disabled ? "opacity-40" : ""
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"input",
{
ref,
type: "checkbox",
id: inputId,
checked,
disabled,
onChange: handleChange,
className: "sr-only",
...props
}
),
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"div",
{
className: cn(
"flex flex-row items-center",
sizeClasses.labelHeight
),
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
Text_default,
{
as: "label",
htmlFor: inputId,
size: sizeClasses.textSize,
weight: "normal",
className: cn(
"cursor-pointer select-none leading-[150%] flex items-center font-roboto",
labelClassName
),
children: label
}
)
}
)
]
}
),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
Text_default,
{
size: "sm",
weight: "normal",
className: "mt-1.5",
color: "text-error-600",
children: errorMessage
}
),
helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
Text_default,
{
size: "sm",
weight: "normal",
className: "mt-1.5",
color: "text-text-500",
children: helperText
}
)
] });
}
);
CheckBox.displayName = "CheckBox";
var CheckBox_default = CheckBox;
// src/components/CheckBox/CheckboxList.tsx
var import_jsx_runtime12 = require("react/jsx-runtime");
var createCheckboxListStore = (name, defaultValues, disabled, onValuesChange) => (0, import_zustand4.create)((set, get) => ({
values: defaultValues,
setValues: (values) => {
if (!get().disabled) {
set({ values });
get().onValuesChange?.(values);
}
},
toggleValue: (value) => {
if (!get().disabled) {
const currentValues = get().values;
const newValues = currentValues.includes(value) ? currentValues.filter((v) => v !== value) : [...currentValues, value];
set({ values: newValues });
get().onValuesChange?.(newValues);
}
},
onValuesChange,
disabled,
name
}));
var useCheckboxListStore = (externalStore) => {
if (!externalStore) {
throw new Error("CheckboxListItem must be used within a CheckboxList");
}
return externalStore;
};
var injectStore3 = (children, store) => import_react9.Children.map(children, (child) => {
if (!(0, import_react9.isValidElement)(child)) return child;
const typedChild = child;
const shouldInject = typedChild.type === CheckboxListItem;
return (0, import_react9.cloneElement)(typedChild, {
...shouldInject ? { store } : {},
...typedChild.props.children ? { children: injectStore3(typedChild.props.children, store) } : {}
});
});
var CheckboxList = (0, import_react9.forwardRef)(
({
values: propValues,
defaultValues = [],
onValuesChange,
name: propName,
disabled = false,
className = "",
children,
...props
}, ref) => {
const generatedId = (0, import_react9.useId)();
const name = propName || `checkbox-list-${generatedId}`;
const storeRef = (0, import_react9.useRef)(null);
storeRef.current ??= createCheckboxListStore(
name,
defaultValues,
disabled,
onValuesChange
);
const store = storeRef.current;
const { setValues } = (0, import_zustand4.useStore)(store, (s) => s);
(0, import_react9.useEffect)(() => {
const currentValues = store.getState().values;
if (currentValues.length > 0 && onValuesChange) {
onValuesChange(currentValues);
}
}, []);
(0, import_react9.useEffect)(() => {
if (propValues !== void 0) {
setValues(propValues);
}
}, [propValues, setValues]);
(0, import_react9.useEffect)(() => {
store.setState({ disabled });
}, [disabled, store]);
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
"div",
{
ref,
className: cn("flex flex-col gap-2 w-full", className),
"aria-label": name,
...props,
children: injectStore3(children, store)
}
);
}
);
CheckboxList.displayName = "CheckboxList";
var CheckboxListItem = (0, import_react9.forwardRef)(
({
value,
store: externalStore,
disabled: itemDisabled,
size = "medium",
state = "default",
className = "",
id,
...props
}, ref) => {
const store = useCheckboxListStore(externalStore);
const {
values: groupValues,
toggleValue,
disabled: groupDisabled,
name
} = (0, import_zustand4.useStore)(store);
const generatedId = (0, import_react9.useId)();
const inputId = id ?? `checkbox-item-${generatedId}`;
const isChecked = groupValues.includes(value);
const isDisabled = groupDisabled || itemDisabled;
const currentState = isDisabled ? "disabled" : state;
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
CheckBox_default,
{
ref,
id: inputId,
name,
value,
checked: isChecked,
disabled: isDisabled,
size,
state: currentState,
className,
onChange: () => {
if (!isDisabled) {
toggleValue(value);
}
},
...props
}
);
}
);
CheckboxListItem.displayName = "CheckboxListItem";
var CheckboxList_default = CheckboxList;
// src/components/MultipleChoice/MultipleChoice.tsx
var import_phosphor_react7 = require("phosphor-react");
var import_jsx_runtime13 = require("react/jsx-runtime");
var MultipleChoiceList = ({
disabled = false,
className = "",
choices,
name,
selectedValues,
onHandleSelectedValues,
mode = "interactive"
}) => {
const [actualValue, setActualValue] = (0, import_react10.useState)(selectedValues);
(0, import_react10.useEffect)(() => {
setActualValue(selectedValues);
}, [selectedValues]);
const getStatusBadge2 = (status) => {
switch (status) {
case "correct":
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_phosphor_react7.CheckCircle, {}), children: "Resposta correta" });
case "incorrect":
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_phosphor_react7.XCircle, {}), children: "Resposta incorreta" });
default:
return null;
}
};
const getStatusStyles2 = (status) => {
switch (status) {
case "correct":
return "bg-success-background border-success-300";
case "incorrect":
return "bg-error-background border-error-300";
default:
return `bg-background border-border-100`;
}
};
const renderVisualCheckbox = (isSelected, isDisabled) => {
const checkboxClasses = cn(
"w-5 h-5 rounded border-2 cursor-default transition-all duration-200 flex items-center justify-center",
isSelected ? "border-primary-950 bg-primary-950 text-text" : "border-border-400 bg-background",
isDisabled && "opacity-40 cursor-not-allowed"
);
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: checkboxClasses, children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_phosphor_react7.Check, { size: 16, weight: "bold" }) });
};
if (mode === "readonly") {
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("flex flex-col gap-2", className), children: choices.map((choice, i) => {
const isSelected = actualValue?.includes(choice.value) || false;
const statusStyles = getStatusStyles2(choice.status);
const statusBadge = getStatusBadge2(choice.status);
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
"div",
{
className: cn(
"flex flex-row justify-between gap-2 items-start p-2 rounded-lg transition-all",
statusStyles,
choice.disabled ? "opacity-50 cursor-not-allowed" : ""
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
renderVisualCheckbox(isSelected, choice.disabled || disabled),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"span",
{
className: cn(
"flex-1",
isSelected || choice.status && choice.status != "neutral" ? "text-text-950" : "text-text-600",
choice.disabled || disabled ? "cursor-not-allowed" : "cursor-default"
),
children: choice.label
}
)
] }),
statusBadge && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex-shrink-0", children: statusBadge })
]
},
`readonly-${choice.value}-${i}`
);
}) });
}
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"div",
{
className: cn(
"flex flex-row justify-between gap-2 items-start p-2 rounded-lg transition-all",
disabled ? "opacity-50 cursor-not-allowed" : "",
className
),
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
CheckboxList_default,
{
name,
values: actualValue,
onValuesChange: (v) => {
setActualValue(v);
onHandleSelectedValues?.(v);
},
disabled,
children: choices.map((choice, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
"div",
{
className: "flex flex-row gap-2 items-center",
children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
CheckboxListItem,
{
value: choice.value,
id: `interactive-${choice.value}-${i}`,
disabled: choice.disabled || disabled
}
),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"label",
{
htmlFor: `interactive-${choice.value}-${i}`,
className: cn(
"flex-1",
actualValue?.includes(choice.value) ? "text-text-950" : "text-text-600",
choice.disabled || disabled ? "cursor-not-allowed" : "cursor-pointer"
),
children: choice.label
}
)
]
},
`interactive-${choice.value}-${i}`
))
}
)
}
);
};
// src/components/Quiz/QuizContent.tsx
var import_phosphor_react8 = require("phosphor-react");
// src/assets/img/mock-image-question.png
var mock_image_question_default = "../mock-image-question-HEZCLFDL.png";
// src/components/Quiz/QuizContent.tsx
var import_jsx_runtime14 = require("react/jsx-runtime");
var getStatusBadge = (status) => {
switch (status) {
case "correct":
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_phosphor_react8.CheckCircle, {}), children: "Resposta correta" });
case "incorrect":
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_phosphor_react8.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 QuizSubTitle = (0, import_react11.forwardRef)(
({ subTitle, ...props }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-4 pb-2 pt-6", ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "font-bold text-lg text-text-950", children: subTitle }) });
}
);
var QuizContainer = (0, import_react11.forwardRef)(({ children, className, ...props }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime14.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 QuizAlternative = ({ paddingBottom }) => {
const {
getCurrentQuestion,
selectAnswer,
getQuestionResultByQuestionId,
getCurrentAnswer,
variant
} = useQuizStore();
const currentQuestion = getCurrentQuestion();
const currentQuestionResult = getQuestionResultByQuestionId(
currentQuestion?.id || ""
);
const currentAnswer = getCurrentAnswer();
const alternatives = currentQuestion?.options?.map((option) => {
let status = "neutral" /* NEUTRAL */;
if (variant === "result") {
const isCorrectOption = currentQuestionResult?.options?.find((op) => op.id === option.id)?.isCorrect || false;
const isSelected = currentQuestionResult?.selectedOptions.some(
(selectedOption) => selectedOption.optionId === option.id
);
const shouldShowCorrectAnswers = currentQuestionResult?.answerStatus !== "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */ && currentQuestionResult?.answerStatus !== "NAO_RESPONDIDO" /* NAO_RESPONDIDO */;
if (shouldShowCorrectAnswers) {
if (isCorrectOption) {
status = "correct" /* CORRECT */;
} else if (isSelected && !isCorrectOption) {
status = "incorrect" /* INCORRECT */;
} else {
status = "neutral" /* NEUTRAL */;
}
} else {
status = "neutral" /* NEUTRAL */;
}
}
return {
label: option.option,
value: option.id,
status
};
});
if (!alternatives)
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: "N\xE3o h\xE1 Alternativas" }) });
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
AlternativesList,
{
mode: variant === "default" ? "interactive" : "readonly",
name: `question-${currentQuestion?.id || "1"}`,
layout: "compact",
alternatives,
value: variant === "result" ? currentQuestionResult?.selectedOptions[0]?.optionId || "" : currentAnswer?.optionId || "",
selectedValue: variant === "result" ? currentQuestionResult?.selectedOptions[0]?.optionId || "" : currentAnswer?.optionId || "",
onValueChange: (value) => {
if (currentQuestion) {
selectAnswer(currentQuestion.id, value);
}
}
},
`question-${currentQuestion?.id || "1"}`
) }) })
] });
};
var QuizMultipleChoice = ({ paddingBottom }) => {
const {
getCurrentQuestion,
selectMultipleAnswer,
getAllCurrentAnswer,
getQuestionResultByQuestionId,
variant
} = useQuizStore();
const currentQuestion = getCurrentQuestion();
const allCurrentAnswers = getAllCurrentAnswer();
const currentQuestionResult = getQuestionResultByQuestionId(
currentQuestion?.id || ""
);
const prevSelectedValuesRef = (0, import_react11.useRef)([]);
const prevQuestionIdRef = (0, import_react11.useRef)("");
const allCurrentAnswerIds = (0, import_react11.useMemo)(() => {
return allCurrentAnswers?.map((answer) => answer.optionId) || [];
}, [allCurrentAnswers]);
const selectedValues = (0, import_react11.useMemo)(() => {
return allCurrentAnswerIds?.filter((id) => id !== null) || [];
}, [allCurrentAnswerIds]);
const stableSelectedValues = (0, import_react11.useMemo)(() => {
const currentQuestionId = currentQuestion?.id || "";
const hasQuestionChanged = prevQuestionIdRef.current !== currentQuestionId;
if (hasQuestionChanged) {
prevQuestionIdRef.current = currentQuestionId;
prevSelectedValuesRef.current = selectedValues;
return selectedValues;
}
const hasValuesChanged = JSON.stringify(prevSelectedValuesRef.current) !== JSON.stringify(selectedValues);
if (hasValuesChanged) {
prevSelectedValuesRef.current = selectedValues;
return selectedValues;
}
if (variant == "result") {
return currentQuestionResult?.selectedOptions.map((op) => op.optionId) || [];
} else {
return prevSelectedValuesRef.current;
}
}, [
selectedValues,
currentQuestion?.id,
variant,
currentQuestionResult?.selectedOptions
]);
const handleSelectedValues = (0, import_react11.useCallback)(
(values) => {
if (currentQuestion) {
selectMultipleAnswer(currentQuestion.id, values);
}
},
[currentQuestion, selectMultipleAnswer]
);
const questionKey = (0, import_react11.useMemo)(
() => `question-${currentQuestion?.id || "1"}`,
[currentQuestion?.id]
);
const choices = currentQuestion?.options?.map((option) => {
let status = "neutral" /* NEUTRAL */;
if (variant === "result") {
const isCorrectOption = currentQuestionResult?.options?.find((op) => op.id === option.id)?.isCorrect || false;
const isSelected = currentQuestionResult?.selectedOptions?.some(
(op) => op.optionId === option.id
);
const shouldShowCorrectAnswers = currentQuestionResult?.answerStatus !== "PENDENTE_AVALIACAO" /* PENDENTE_AVALIACAO */ && currentQuestionResult?.answerStatus !== "NAO_RESPONDIDO" /* NAO_RESPONDIDO */;
if (shouldShowCorrectAnswers) {
if (isCorrectOption) {
status = "correct" /* CORRECT */;
} else if (isSelected && !isCorrectOption) {
status = "incorrect" /* INCORRECT */;
} else {
status = "neutral" /* NEUTRAL */;
}
} else {
status = "neutral" /* NEUTRAL */;
}
}
return {
label: option.option,
value: option.id,
status
};
});
if (!choices)
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: "N\xE3o h\xE1 Escolhas Multiplas" }) });
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
MultipleChoiceList,
{
choices,
name: questionKey,
selectedValues: stableSelectedValues,
onHandleSelectedValues: handleSelectedValues,
mode: variant === "default" ? "interactive" : "readonly"
},
questionKey
) }) })
] });
};
var QuizDissertative = ({ paddingBottom }) => {
const {
getCurrentQuestion,
getCurrentAnswer,
selectDissertativeAnswer,
getQuestionResultByQuestionId,
variant,
getDissertativeCharLimit
} = useQuizStore();
const currentQuestion = getCurrentQuestion();
const currentQuestionResult = getQuestionResultByQuestionId(
currentQuestion?.id || ""
);
const currentAnswer = getCurrentAnswer();
const textareaRef = (0, import_react11.useRef)(null);
const charLimit = getDissertativeCharLimit();
const handleAnswerChange = (value) => {
if (currentQuestion) {
selectDissertativeAnswer(currentQuestion.id, value);
}
};
const adjustTextareaHeight = (0, import_react11.useCallback)(() => {
if (textareaRef.current) {
textareaRef.current.style.height = "auto";
const scrollHeight = textareaRef.current.scrollHeight;
const minHeight = 120;
const maxHeight = 400;
const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
textareaRef.current.style.height = `${newHeight}px`;
}
}, []);
(0, import_react11.useEffect)(() => {
adjustTextareaHeight();
}, [currentAnswer, adjustTextareaHeight]);
if (!currentQuestion) {
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-text-600 text-md", children: "Nenhuma quest\xE3o dispon\xEDvel" }) });
}
const localAnswer = (variant == "result" ? currentQuestionResult?.answer : currentAnswer?.answer) || "";
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizSubTitle, { subTitle: "Resposta" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizContainer, { className: cn(variant != "result" && paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-4 max-h-[600px] overflow-y-auto", children: variant === "default" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
TextArea_default,
{
ref: textareaRef,
placeholder: "Escreva sua resposta",
value: localAnswer,
onChange: (e) => handleAnswerChange(e.target.value),
rows: 4,
className: "min-h-[120px] max-h-[400px] resize-none overflow-y-auto",
maxLength: charLimit,
showCharacterCount: !!charLimit
}
) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-text-600 text-md whitespace-pre-wrap", children: localAnswer || "Nenhuma resposta fornecida" }) }) }) }),
variant === "result" && currentQuestionResult?.answerStatus == "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */ && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizSubTitle, { subTitle: "Observa\xE7\xE3o do professor" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-text-600 text-md whitespace-pre-wrap", children: currentQuestionResult?.teacherFeedback }) })
] })
] });
};
var QuizTrueOrFalse = ({ paddingBottom }) => {
const { variant } = useQuizStore();
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.fromCodePoint(97 + index);
const isDefaultVariant = variant === "default";
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsxs)(
"section",
{
className: "flex flex-col gap-2",
children: [
/* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)("p", { className: "text-text-900 text-sm", children: getLetterByIndex(index).concat(") ").concat(option.label) }),
isDefaultVariant ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Select_default, { size: "medium", children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectTrigger, { className: "w-[180px]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectValue, { placeholder: "Selecione opc\xE3o" }) }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(SelectContent, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectItem, { value: "V", children: "Verdadeiro" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectItem, { value: "F", children: "Falso" })
] })
] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex-shrink-0", children: getStatusBadge(variantCorrect) })
]
}
),
!isDefaultVariant && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "flex flex-row gap-2 items-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-text-800 text-2xs", children: "Resposta selecionada: V" }),
!option.isCorrect && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-text-800 text-2xs", children: "Resposta correta: F" })
] })
]
},
option.label.concat(`-${index}`)
);
}) }) })
] });
};
var QuizConnectDots = ({ paddingBottom }) => {
const { variant } = useQuizStore();
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
},
{
option: "Baleia",
dotOption: "Grama",
correctOption: "Peixe",
isCorrect: false
}
];
const [userAnswers, setUserAnswers] = (0, import_react11.useState)(() => {
if (variant === "result") {
return mockUserAnswers;
}
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.fromCodePoint(97 + index);
const isDefaultVariant = variant === "default";
const assignedDots = new Set(
userAnswers.map((a) => a.dotOption).filter(Boolean)
);
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsxs)("section", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)("p", { className: "text-text-900 text-sm", children: getLetterByIndex(index) + ") " + option.label }),
isDefaultVariant ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
Select_default,
{
size: "medium",
value: answer.dotOption || void 0,
onValueChange: (value) => handleSelectDot(index, value),
children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectTrigger, { className: "w-[180px]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectValue, { placeholder: "Selecione op\xE7\xE3o" }) }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectContent, { children: dotsOptions.filter(
(dot) => !assignedDots.has(dot.label) || answer.dotOption === dot.label
).map((dot) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectItem, { value: dot.label, children: dot.label }, dot.label)) })
]
}
) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex-shrink-0", children: answer.isCorrect === null ? null : getStatusBadge(variantCorrect) })
]
}
),
!isDefaultVariant && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "flex flex-row gap-2 items-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-text-800 text-2xs", children: [
"Resposta selecionada: ",
answer.dotOption || "Nenhuma"
] }),
!answer.isCorrect && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-text-800 text-2xs", children: [
"Resposta correta: ",
answer.correctOption
] })
] })
] }, option.label);
}) }) })
] });
};
var QuizFill = ({ paddingBottom }) => {
const { variant } = useQuizStore();
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_react11.useState)({});
const baseId = (0, import_react11.useId)();
const getAvailableOptionsForSelect = (selectId) => {
const usedOptions = new Set(
Object.entries(answers).filter(([key]) => key !== selectId).map(([, value]) => value)
);
return options.filter((option) => !usedOptions.has(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_runtime14.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_runtime14.jsxs)(
Select_default,
{
value: selectedValue,
onValueChange: (value) => handleSelectChange(selectId, value),
className: "inline-flex mb-2.5",
children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectTrigger, { className: "inline-flex w-auto min-w-[140px] h-8 mx-1 bg-background border-gray-300", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectValue, { placeholder: "Selecione op\xE7\xE3o" }) }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectContent, { children: availableOptionsForThisSelect.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)(import_phosphor_react8.CheckCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_phosphor_react8.XCircle, {});
return /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.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_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizContainer, { className: "h-auto pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-6 px-4 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)("span", { children: element.element }, element.id))
}
) }) }),
variant === "result" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizSubTitle, { subTitle: "Resultado" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizContainer, { className: "h-auto pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-6 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"div",
{
className: cn("text-lg text-text-900 leading-8", paddingBottom),
children: renderTextWithSelects(exampleText, true).map((element) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: element.element }, element.id))
}
) }) })
] })
] });
};
var QuizImageQuestion = ({ paddingBottom }) => {
const { variant } = useQuizStore();
const correctPositionRelative = { x: 0.48, y: 0.45 };
const calculateCorrectRadiusRelative = () => {
const circleWidthRelative = 0.15;
const circleHeightRelative = 0.3;
const averageRadius = (circleWidthRelative + circleHeightRelative) / 4;
const tolerance = 0.02;
return averageRadius + tolerance;
};
const correctRadiusRelative = calculateCorrectRadiusRelative();
const mockUserAnswerRelative = { x: 0.72, y: 0.348 };
const [clickPositionRelative, setClickPositionRelative] = (0, import_react11.useState)(variant == "result" ? mockUserAnswerRelative : null);
const convertToRelativeCoordinates = (x, y, rect) => {
const safeWidth = Math.max(rect.width, 1e-3);
const safeHeight = Math.max(rect.height, 1e-3);
const xRelative = Math.max(0, Math.min(1, x / safeWidth));
const yRelative = Math.max(0, Math.min(1, y / safeHeight));
return { x: xRelative, y: yRelative };
};
const handleImageClick = (event) => {
if (variant === "result") return;
const rect = event.currentTarget.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const positionRelative = convertToRelativeCoordinates(x, y, rect);
setClickPositionRelative(positionRelative);
};
const handleKeyboardActivate = () => {
if (variant === "result") return;
setClickPositionRelative({ x: 0.5, y: 0.5 });
};
const isCorrect = () => {
if (!clickPositionRelative) return false;
const distance = Math.sqrt(
Math.pow(clickPositionRelative.x - correctPositionRelative.x, 2) + Math.pow(clickPositionRelative.y - correctPositionRelative.y, 2)
);
return distance <= correctRadiusRelative;
};
const getUserCircleColorClasses = () => {
if (variant === "default") {
return "bg-indicator-primary/70 border-[#F8CC2E]";
}
if (variant === "result") {
return isCorrect() ? "bg-success-600/70 border-white" : "bg-indicator-error/70 border-white";
}
return "bg-success-600/70 border-white";
};
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizSubTitle, { subTitle: "Clique na \xE1rea correta" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
"div",
{
"data-testid": "quiz-image-container",
className: "space-y-6 p-3 relative inline-block",
children: [
variant == "result" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
"div",
{
"data-testid": "quiz-legend",
className: "flex items-center gap-4 text-xs",
children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-3 h-3 rounded-full bg-indicator-primary/70 border border-[#F8CC2E]" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-text-600 font-medium text-sm", children: "\xC1rea correta" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-3 h-3 rounded-full bg-success-600/70 border border-white" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-text-600 font-medium text-sm", children: "Resposta correta" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-3 h-3 rounded-full bg-indicator-error/70 border border-white" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-text-600 font-medium text-sm", children: "Resposta incorreta" })
] })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
"button",
{
"data-testid": "quiz-image-button",
type: "button",
className: "relative cursor-pointer w-full h-full border-0 bg-transparent p-0",
onClick: handleImageClick,
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleKeyboardActivate();
}
},
"aria-label": "\xC1rea da imagem interativa",
children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"img",
{
"data-testid": "quiz-image",
src: mock_image_question_default,
alt: "Question",
className: "w-full h-auto rounded-md"
}
),
variant === "result" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"div",
{
"data-testid": "quiz-correct-circle",
className: "absolute rounded-full bg-indicator-primary/70 border-4 border-[#F8CC2E] pointer-events-none",
style: {
minWidth: "50px",
maxWidth: "160px",
width: "15%",
aspectRatio: "1 / 1",
left: `calc(${correctPositionRelative.x * 100}% - 7.5%)`,
top: `calc(${correctPositionRelative.y * 100}% - 15%)`
}
}
),
clickPositionRelative && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"div",
{
"data-testid": "quiz-user-circle",
className: `absolute rounded-full border-4 pointer-events-none ${getUserCircleColorClasses()}`,
style: {
minWidth: "30px",
maxWidth: "52px",
width: "5%",
aspectRatio: "1 / 1",
left: `calc(${clickPositionRelative.x * 100}% - 2.5%)`,
top: `calc(${clickPositionRelative.y * 100}% - 2.5%)`
}
}
)
]
}
)
]
}
) })
] });
};
// src/components/Card/Card.tsx
var import_react13 = require("react");
// src/components/ProgressBar/ProgressBar.tsx
var import_jsx_runtime15 = require("react/jsx-runtime");
var SIZE_CLASSES9 = {
small: {
container: "h-1",
// 4px height (h-1 = 4px in Tailwind)
bar: "h-1",
// 4px height for the fill bar
spacing: "gap-2",
// 8px gap between label and progress bar
layout: "flex-col",
// vertical layout for small
borderRadius: "rounded-full"
// 9999px border radius
},
medium: {
container: "h-2",
// 8px height (h-2 = 8px in Tailwind)
bar: "h-2",
// 8px height for the fill bar
spacing: "gap-2",
// 8px gap between progress bar and label
layout: "flex-row items-center",
// horizontal layout for medium
borderRadius: "rounded-lg"
// 8px border radius
}
};
var VARIANT_CLASSES2 = {
blue: {
background: "bg-background-300",
// Background track color (#D5D4D4)
fill: "bg-primary-700"
// Blue for activity progress (#2271C4)
},
green: {
background: "bg-background-300",
// Background track color (#D5D4D4)
fill: "bg-success-200"
// Green for performance (#84D3A2)
}
};
var calculateProgressValues = (value, max) => {
const safeValue = isNaN(value) ? 0 : value;
const clampedValue = Math.max(0, Math.min(safeValue, max));
const percentage = max === 0 ? 0 : clampedValue / max * 100;
return { clampedValue, percentage };
};
var shouldShowHeader = (label, showPercentage, showHitCount) => {
return !!(label || showPercentage || showHitCount);
};
var getDisplayPriority = (showHitCount, showPercentage, label, clampedValue, max, percentage) => {
if (showHitCount) {
return {
type: "hitCount",
content: `${Math.round(clampedValue)} de ${max}`,
hasMetrics: true
};
}
if (showPercentage) {
return {
type: "percentage",
content: `${Math.round(percentage)}%`,
hasMetrics: true
};
}
return {
type: "label",
content: label,
hasMetrics: false
};
};
var getCompactLayoutConfig = ({
showPercentage,
showHitCount,
percentage,
clampedValue,
max,
label,
percentageClassName,
labelClassName
}) => {
const displayPriority = getDisplayPriority(
showHitCount,
showPercentage,
label,
clampedValue,
max,
percentage
);
return {
color: displayPriority.hasMetrics ? "text-primary-600" : "text-primary-700",
className: displayPriority.hasMetrics ? percentageClassName : labelClassName,
content: displayPriority.content
};
};
var getDefaultLayoutDisplayConfig = (size, label, showPercentage) => ({
showHeader: size === "small" && !!(label || showPercentage),
showPercentage: size === "medium" && showPercentage,
showLabel: size === "medium" && !!label && !showPercentage
// Only show label when percentage is not shown
});
var renderStackedHitCountDisplay = (showHitCount, showPercentage, clampedValue, max, percentage, percentageClassName) => {
if (!showHitCount && !showPercentage) return null;
const displayPriority = getDisplayPriority(
showHitCount,
showPercentage,
null,
// label is not relevant for stacked layout metrics display
clampedValue,
max,
percentage
);
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"div",
{
className: cn(
"text-xs font-medium leading-[14px] text-right",
percentageClassName
),
children: displayPriority.type === "hitCount" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-success-200", children: Math.round(clampedValue) }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-text-600", children: [
" de ",
max
] })
] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Text_default, { size: "xs", weight: "medium", className: "text-success-200", children: [
Math.round(percentage),
"%"
] })
}
);
};
var ProgressBarBase = ({
clampedValue,
max,
percentage,
label,
variantClasses,
containerClassName,
fillClassName
}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
"div",
{
className: cn(
containerClassName,
variantClasses.background,
"overflow-hidden relative"
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"progress",
{
value: clampedValue,
max,
"aria-label": typeof label === "string" ? `${label}: ${Math.round(percentage)}% complete` : `Progress: ${Math.round(percentage)}% of ${max}`,
className: "absolute inset-0 w-full h-full opacity-0"
}
),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"div",
{
className: cn(
fillClassName,
variantClasses.fill,
"transition-all duration-300 ease-out"
),
style: { width: `${percentage}%` }
}
)
]
}
);
var StackedLayout = ({
className,
label,
showPercentage,
showHitCount,
labelClassName,
percentageClassName,
clampedValue,
max,
percentage,
variantClasses,
dimensions
}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
"div",
{
className: cn(
"flex flex-col items-start gap-2",
dimensions.width,
dimensions.height,
className
),
children: [
shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-row justify-between items-center w-full h-[19px]", children: [
label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
Text_default,
{
as: "div",
size: "md",
weight: "medium",
className: cn("text-text-600 leading-[19px]", labelClassName),
children: label
}
),
renderStackedHitCountDisplay(
showHitCount,
showPercentage,
clampedValue,
max,
percentage,
percentageClassName
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
ProgressBarBase,
{
clampedValue,
max,
percentage,
label,
variantClasses,
containerClassName: "w-full h-2 rounded-lg",
fillClassName: "h-2 rounded-lg shadow-hard-shadow-3"
}
)
]
}
);
var CompactLayout = ({
className,
label,
showPercentage,
showHitCount,
labelClassName,
percentageClassName,
clampedValue,
max,
percentage,
variantClasses,
dimensions
}) => {
const {
color,
className: compactClassName,
content
} = getCompactLayoutConfig({
showPercentage,
showHitCount,
percentage,
clampedValue,
max,
label,
percentageClassName,
labelClassName
});
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
"div",
{
className: cn(
"flex flex-col items-start gap-1",
dimensions.width,
dimensions.height,
className
),
children: [
shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
Text_default,
{
as: "div",
size: "sm",
weight: "medium",
color,
className: cn("leading-4 w-full", compactClassName),
children: content
}
),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
ProgressBarBase,
{
clampedValue,
max,
percentage,
label,
variantClasses,
containerClassName: "w-full h-1 rounded-full",
fillClassName: "h-1 rounded-full"
}
)
]
}
);
};
var DefaultLayout = ({
className,
size,
sizeClasses,
variantClasses,
label,
showPercentage,
labelClassName,
percentageClassName,
clampedValue,
max,
percentage
}) => {
const gapClass = size === "medium" ? "gap-2" : sizeClasses.spacing;
const progressBarClass = size === "medium" ? "flex-grow" : "w-full";
const displayConfig = getDefaultLayoutDisplayConfig(
size,
label,
showPercentage
);
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex", sizeClasses.layout, gapClass, className), children: [
displayConfig.showHeader && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-row items-center justify-between w-full", children: [
label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
Text_default,
{
as: "div",
size: "xs",
weight: "medium",
className: cn(
"text-text-950 leading-none tracking-normal text-center",
labelClassName
),
children: label
}
),
showPercentage && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
Text_default,
{
size: "xs",
weight: "medium",
className: cn(
"text-text-950 leading-none tracking-normal text-center",
percentageClassName
),
children: [
Math.round(percentage),
"%"
]
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
ProgressBarBase,
{
clampedValue,
max,
percentage,
label,
variantClasses,
containerClassName: cn(
progressBarClass,
sizeClasses.container,
sizeClasses.borderRadius
),
fillClassName: cn(
sizeClasses.bar,
sizeClasses.borderRadius,
"shadow-hard-shadow-3"
)
}
),
displayConfig.showPercentage && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
Text_default,
{
size: "xs",
weight: "medium",
className: cn(
"text-text-950 leading-none tracking-normal text-center flex-none",
percentageClassName
),
children: [
Math.round(percentage),
"%"
]
}
),
displayConfig.showLabel && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
Text_default,
{
as: "div",
size: "xs",
weight: "medium",
className: cn(
"text-text-950 leading-none tracking-normal text-center flex-none",
labelClassName
),
children: label
}
)
] });
};
var ProgressBar = ({
value,
max = 100,
size = "medium",
variant = "blue",
layout = "default",
label,
showPercentage = false,
showHitCount = false,
className = "",
labelClassName = "",
percentageClassName = "",
stackedWidth,
stackedHeight,
compactWidth,
compactHeight
}) => {
const { clampedValue, percentage } = calculateProgressValues(value, max);
const sizeClasses = SIZE_CLASSES9[size];
const variantClasses = VARIANT_CLASSES2[variant];
if (layout === "stacked") {
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
StackedLayout,
{
className,
label,
showPercentage,
showHitCount,
labelClassName,
percentageClassName,
clampedValue,
max,
percentage,
variantClasses,
dimensions: {
width: stackedWidth ?? "w-[380px]",
height: stackedHeight ?? "h-[35px]"
}
}
);
}
if (layout === "compact") {
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
CompactLayout,
{
className,
label,
showPercentage,
showHitCount,
labelClassName,
percentageClassName,
clampedValue,
max,
percentage,
variantClasses,
dimensions: {
width: compactWidth ?? "w-[131px]",
height: compactHeight ?? "h-[24px]"
}
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
DefaultLayout,
{
className,
size,
sizeClasses,
variantClasses,
label,
showPercentage,
labelClassName,
percentageClassName,
clampedValue,
max,
percentage
}
);
};
var ProgressBar_default = ProgressBar;
// src/components/Card/Card.tsx
var import_phosphor_react9 = require("phosphor-react");
// src/components/IconRender/IconRender.tsx
var import_react12 = require("react");
var PhosphorIcons = __toESM(require("phosphor-react"));
// src/assets/icons/subjects/ChatPT.tsx
var import_jsx_runtime16 = require("react/jsx-runtime");
var ChatPT = ({ size, color }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
"svg",
{
width: size,
height: size,
viewBox: "0 0 32 32",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
"path",
{
d: "M27 6H5.00004C4.4696 6 3.9609 6.21071 3.58582 6.58579C3.21075 6.96086 3.00004 7.46957 3.00004 8V28C2.99773 28.3814 3.10562 28.7553 3.31074 29.0768C3.51585 29.3984 3.80947 29.6538 4.15629 29.8125C4.42057 29.9356 4.7085 29.9995 5.00004 30C5.46954 29.9989 5.92347 29.8315 6.28129 29.5275L6.29254 29.5187L10.375 26H27C27.5305 26 28.0392 25.7893 28.4142 25.4142C28.7893 25.0391 29 24.5304 29 24V8C29 7.46957 28.7893 6.96086 28.4142 6.58579C28.0392 6.21071 27.5305 6 27 6ZM27 24H10C9.75992 24.0001 9.52787 24.0866 9.34629 24.2437L5.00004 28V8H27V24Z",
fill: color
}
),
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
"path",
{
d: "M21.1758 12V20.5312H19.7168V12H21.1758ZM23.8535 12V13.1719H17.0625V12H23.8535Z",
fill: color
}
),
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
"path",
{
d: "M13.2402 17.3496H11.0195V16.1836H13.2402C13.627 16.1836 13.9395 16.1211 14.1777 15.9961C14.416 15.8711 14.5898 15.6992 14.6992 15.4805C14.8125 15.2578 14.8691 15.0039 14.8691 14.7188C14.8691 14.4492 14.8125 14.1973 14.6992 13.9629C14.5898 13.7246 14.416 13.5332 14.1777 13.3887C13.9395 13.2441 13.627 13.1719 13.2402 13.1719H11.4707V20.5312H10V12H13.2402C13.9004 12 14.4609 12.1172 14.9219 12.3516C15.3867 12.582 15.7402 12.9023 15.9824 13.3125C16.2246 13.7188 16.3457 14.1836 16.3457 14.707C16.3457 15.2578 16.2246 15.7305 15.9824 16.125C15.7402 16.5195 15.3867 16.8223 14.9219 17.0332C14.4609 17.2441 13.9004 17.3496 13.2402 17.3496Z",
fill: color
}
)
]
}
);
// src/assets/icons/subjects/ChatEN.tsx
var import_jsx_runtime17 = require("react/jsx-runtime");
var ChatEN = ({ size, color }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
"svg",
{
width: size,
height: size,
viewBox: "0 0 32 32",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
"path",
{
d: "M27 6H5.00004C4.4696 6 3.9609 6.21071 3.58582 6.58579C3.21075 6.96086 3.00004 7.46957 3.00004 8V28C2.99773 28.3814 3.10562 28.7553 3.31074 29.0768C3.51585 29.3984 3.80947 29.6538 4.15629 29.8125C4.42057 29.9356 4.7085 29.9995 5.00004 30C5.46954 29.9989 5.92347 29.8315 6.28129 29.5275L6.29254 29.5187L10.375 26H27C27.5305 26 28.0392 25.7893 28.4142 25.4142C28.7893 25.0391 29 24.5304 29 24V8C29 7.46957 28.7893 6.96086 28.4142 6.58579C28.0392 6.21071 27.5305 6 27 6ZM27 24H10C9.75992 24.0001 9.52787 24.0866 9.34629 24.2437L5.00004 28V8H27V24Z",
fill: color
}
),
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
"path",
{
d: "M22.5488 12V20.5312H21.0781L17.252 14.4199V20.5312H15.7812V12H17.252L21.0898 18.123V12H22.5488Z",
fill: color
}
),
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
"path",
{
d: "M14.584 19.3652V20.5312H10.0547V19.3652H14.584ZM10.4707 12V20.5312H9V12H10.4707ZM13.9922 15.5625V16.7109H10.0547V15.5625H13.9922ZM14.5547 12V13.1719H10.0547V12H14.5547Z",
fill: color
}
)
]
}
);
// src/assets/icons/subjects/ChatES.tsx
var import_jsx_runtime18 = require("react/jsx-runtime");
var ChatES = ({ size, color }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
"svg",
{
width: size,
height: size,
viewBox: "0 0 32 32",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
"path",
{
d: "M27 6H5.00004C4.4696 6 3.9609 6.21071 3.58582 6.58579C3.21075 6.96086 3.00004 7.46957 3.00004 8V28C2.99773 28.3814 3.10562 28.7553 3.31074 29.0768C3.51585 29.3984 3.80947 29.6538 4.15629 29.8125C4.42057 29.9356 4.7085 29.9995 5.00004 30C5.46954 29.9989 5.92347 29.8315 6.28129 29.5275L6.29254 29.5187L10.375 26H27C27.5305 26 28.0392 25.7893 28.4142 25.4142C28.7893 25.0391 29 24.5304 29 24V8C29 7.46957 28.7893 6.96086 28.4142 6.58579C28.0392 6.21071 27.5305 6 27 6ZM27 24H10C9.75992 24.0001 9.52787 24.0866 9.34629 24.2437L5.00004 28V8H27V24Z",
fill: color
}
),
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
"path",
{
d: "M21.1426 17.8027C21.1426 17.627 21.1152 17.4707 21.0605 17.334C21.0098 17.1973 20.918 17.0723 20.7852 16.959C20.6523 16.8457 20.4648 16.7363 20.2227 16.6309C19.9844 16.5215 19.6797 16.4102 19.3086 16.2969C18.9023 16.1719 18.5273 16.0332 18.1836 15.8809C17.8438 15.7246 17.5469 15.5449 17.293 15.3418C17.0391 15.1348 16.8418 14.8984 16.7012 14.6328C16.5605 14.3633 16.4902 14.0527 16.4902 13.7012C16.4902 13.3535 16.5625 13.0371 16.707 12.752C16.8555 12.4668 17.0645 12.2207 17.334 12.0137C17.6074 11.8027 17.9297 11.6406 18.3008 11.5273C18.6719 11.4102 19.082 11.3516 19.5312 11.3516C20.1641 11.3516 20.709 11.4688 21.166 11.7031C21.627 11.9375 21.9805 12.252 22.2266 12.6465C22.4766 13.041 22.6016 13.4766 22.6016 13.9531H21.1426C21.1426 13.6719 21.082 13.4238 20.9609 13.209C20.8438 12.9902 20.6641 12.8184 20.4219 12.6934C20.1836 12.5684 19.8809 12.5059 19.5137 12.5059C19.166 12.5059 18.877 12.5586 18.6465 12.6641C18.416 12.7695 18.2441 12.9121 18.1309 13.0918C18.0176 13.2715 17.9609 13.4746 17.9609 13.7012C17.9609 13.8613 17.998 14.0078 18.0723 14.1406C18.1465 14.2695 18.2598 14.3906 18.4121 14.5039C18.5645 14.6133 18.7559 14.7168 18.9863 14.8145C19.2168 14.9121 19.4883 15.0059 19.8008 15.0957C20.2734 15.2363 20.6855 15.3926 21.0371 15.5645C21.3887 15.7324 21.6816 15.9238 21.916 16.1387C22.1504 16.3535 22.3262 16.5977 22.4434 16.8711C22.5605 17.1406 22.6191 17.4473 22.6191 17.791C22.6191 18.1504 22.5469 18.4746 22.4023 18.7637C22.2578 19.0488 22.0508 19.293 21.7812 19.4961C21.5156 19.6953 21.1953 19.8496 20.8203 19.959C20.4492 20.0645 20.0352 20.1172 19.5781 20.1172C19.168 20.1172 18.7637 20.0625 18.3652 19.9531C17.9707 19.8438 17.6113 19.6777 17.2871 19.4551C16.9629 19.2285 16.7051 18.9473 16.5137 18.6113C16.3223 18.2715 16.2266 17.875 16.2266 17.4219H17.6973C17.6973 17.6992 17.7441 17.9355 17.8379 18.1309C17.9355 18.3262 18.0703 18.4863 18.2422 18.6113C18.4141 18.7324 18.6133 18.8223 18.8398 18.8809C19.0703 18.9395 19.3164 18.9688 19.5781 18.9688C19.9219 18.9688 20.209 18.9199 20.4395 18.8223C20.6738 18.7246 20.8496 18.5879 20.9668 18.4121C21.084 18.2363 21.1426 18.0332 21.1426 17.8027Z",
fill: color
}
),
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
"path",
{
d: "M15.4512 18.834V20H10.9219V18.834H15.4512ZM11.3379 11.4688V20H9.86719V11.4688H11.3379ZM14.8594 15.0312V16.1797H10.9219V15.0312H14.8594ZM15.4219 11.4688V12.6406H10.9219V11.4688H15.4219Z",
fill: color
}
)
]
}
);
// src/components/IconRender/IconRender.tsx
var import_jsx_runtime19 = require("react/jsx-runtime");
var IconRender = ({
iconName,
color = "#000000",
size = 24,
weight = "regular"
}) => {
if (typeof iconName === "string") {
switch (iconName) {
case "Chat_PT":
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatPT, { size, color });
case "Chat_EN":
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatEN, { size, color });
case "Chat_ES":
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatES, { size, color });
default: {
const IconComponent = PhosphorIcons[iconName] || PhosphorIcons.Question;
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconComponent, { size, color, weight });
}
}
} else {
return (0, import_react12.cloneElement)(iconName, {
size,
color: "currentColor"
});
}
};
var IconRender_default = IconRender;
// src/components/Card/Card.tsx
var import_jsx_runtime20 = require("react/jsx-runtime");
var CARD_BASE_CLASSES = {
default: "w-full bg-background border border-border-50 rounded-xl",
compact: "w-full bg-background border border-border-50 rounded-lg",
minimal: "w-full bg-background border border-border-100 rounded-md"
};
var CARD_PADDING_CLASSES = {
none: "",
small: "p-2",
medium: "p-4",
large: "p-6"
};
var CARD_MIN_HEIGHT_CLASSES = {
none: "",
small: "min-h-16",
medium: "min-h-20",
large: "min-h-24"
};
var CARD_LAYOUT_CLASSES = {
horizontal: "flex flex-row",
vertical: "flex flex-col"
};
var CARD_CURSOR_CLASSES = {
default: "",
pointer: "cursor-pointer"
};
var CardBase = (0, import_react13.forwardRef)(
({
children,
variant = "default",
layout = "horizontal",
padding = "medium",
minHeight = "medium",
cursor = "default",
className = "",
...props
}, ref) => {
const baseClasses = CARD_BASE_CLASSES[variant];
const paddingClasses = CARD_PADDING_CLASSES[padding];
const minHeightClasses = CARD_MIN_HEIGHT_CLASSES[minHeight];
const layoutClasses = CARD_LAYOUT_CLASSES[layout];
const cursorClasses = CARD_CURSOR_CLASSES[cursor];
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"div",
{
ref,
className: cn(
baseClasses,
paddingClasses,
minHeightClasses,
layoutClasses,
cursorClasses,
className
),
...props,
children
}
);
}
);
var ACTION_CARD_CLASSES = {
warning: "bg-warning-background",
success: "bg-success-200",
error: "bg-error-100",
info: "bg-info-background"
};
var ACTION_ICON_CLASSES = {
warning: "bg-warning-300 text-text",
success: "bg-indicator-positive text-text-950",
error: "bg-indicator-negative text-text",
info: "bg-info-500 text-text"
};
var ACTION_SUBTITLE_CLASSES = {
warning: "text-warning-600",
success: "text-success-700",
error: "text-error-700",
info: "text-info-700"
};
var ACTION_HEADER_CLASSES = {
warning: "text-warning-300",
success: "text-success-300",
error: "text-error-300",
info: "text-info-300"
};
var CardActivitiesResults = (0, import_react13.forwardRef)(
({
icon,
title,
subTitle,
header,
extended = false,
action = "success",
description,
className,
...props
}, ref) => {
const actionCardClasses = ACTION_CARD_CLASSES[action];
const actionIconClasses = ACTION_ICON_CLASSES[action];
const actionSubTitleClasses = ACTION_SUBTITLE_CLASSES[action];
const actionHeaderClasses = ACTION_HEADER_CLASSES[action];
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
"div",
{
ref,
className: cn(
"w-full flex flex-col border border-border-50 bg-background rounded-xl",
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
"div",
{
className: cn(
"flex flex-col gap-1 items-center justify-center p-4",
actionCardClasses,
extended ? "rounded-t-xl" : "rounded-xl"
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"span",
{
className: cn(
"size-7.5 rounded-full flex items-center justify-center",
actionIconClasses
),
children: icon
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Text_default,
{
size: "2xs",
weight: "medium",
className: "text-text-800 uppercase truncate",
children: title
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"p",
{
className: cn("text-lg font-bold truncate", actionSubTitleClasses),
children: subTitle
}
)
]
}
),
extended && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center gap-2.5 pb-9.5 pt-2.5", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"p",
{
className: cn(
"text-2xs font-medium uppercase truncate",
actionHeaderClasses
),
children: header
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Badge_default, { size: "large", action: "info", children: description })
] })
]
}
);
}
);
var CardQuestions = (0, import_react13.forwardRef)(
({
header,
state = "undone",
className,
onClickButton,
valueButton,
...props
}, ref) => {
const isDone = state === "done";
const stateLabel = isDone ? "Realizado" : "N\xE3o Realizado";
const buttonLabel = isDone ? "Ver Resultado" : "Responder";
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "medium",
className: cn("justify-between gap-4", className),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("section", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-bold text-xs text-text-950 truncate", children: header }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-row gap-6 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Badge_default,
{
size: "medium",
variant: "solid",
action: isDone ? "success" : "error",
children: stateLabel
}
) })
] }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Button_default,
{
size: "extra-small",
onClick: () => onClickButton?.(valueButton),
className: "min-w-fit",
children: buttonLabel
}
) })
]
}
);
}
);
var CardProgress = (0, import_react13.forwardRef)(
({
header,
subhead,
initialDate,
endDate,
progress = 0,
direction = "horizontal",
icon,
color = "#B7DFFF",
progressVariant = "blue",
showDates = true,
className,
...props
}, ref) => {
const isHorizontal = direction === "horizontal";
const contentComponent = {
horizontal: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
showDates && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row gap-6 items-center", children: [
initialDate && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-text-800 font-semibold", children: "In\xEDcio" }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-text-600", children: initialDate })
] }),
endDate && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-text-800 font-semibold", children: "Fim" }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-text-600", children: endDate })
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
ProgressBar_default,
{
size: "small",
value: progress,
variant: progressVariant,
"data-testid": "progress-bar"
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
Text_default,
{
size: "xs",
weight: "medium",
className: cn(
"text-text-950 leading-none tracking-normal text-center flex-none"
),
children: [
Math.round(progress),
"%"
]
}
)
] })
] }),
vertical: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-text-800", children: subhead })
};
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
CardBase,
{
ref,
layout: isHorizontal ? "horizontal" : "vertical",
padding: "none",
minHeight: "medium",
cursor: "pointer",
className: cn(isHorizontal ? "h-20" : "", className),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"div",
{
className: cn(
"flex justify-center items-center [&>svg]:size-6 text-text-950",
isHorizontal ? "min-w-[80px] min-h-[80px] rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl",
!color.startsWith("#") ? `${color}` : ""
),
style: color.startsWith("#") ? { backgroundColor: color } : void 0,
"data-testid": "icon-container",
children: icon
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
"div",
{
className: cn(
"p-4 flex flex-col justify-between w-full h-full",
!isHorizontal && "gap-4"
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950 truncate", children: header }),
contentComponent[direction]
]
}
)
]
}
);
}
);
var CardTopic = (0, import_react13.forwardRef)(
({
header,
subHead,
progress,
showPercentage = false,
progressVariant = "blue",
className = "",
...props
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
CardBase,
{
ref,
layout: "vertical",
padding: "small",
minHeight: "medium",
cursor: "pointer",
className: cn("justify-center gap-2 py-2 px-4", className),
...props,
children: [
subHead && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react13.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: text }),
index < subHead.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "\u2022" })
] }, `${text} - ${index}`)) }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-text-950 font-bold truncate", children: header }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
ProgressBar_default,
{
size: "small",
value: progress,
variant: progressVariant,
"data-testid": "progress-bar"
}
),
showPercentage && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
Text_default,
{
size: "xs",
weight: "medium",
className: cn(
"text-text-950 leading-none tracking-normal text-center flex-none"
),
children: [
Math.round(progress),
"%"
]
}
)
] })
]
}
);
}
);
var CardPerformance = (0, import_react13.forwardRef)(
({
header,
progress,
description = "Sem dados ainda! Voc\xEA ainda n\xE3o fez um question\xE1rio neste assunto.",
actionVariant = "button",
progressVariant = "blue",
labelProgress = "",
className = "",
onClickButton,
valueButton,
...props
}, ref) => {
const hasProgress = progress !== void 0;
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "none",
className: cn(
actionVariant == "caret" ? "cursor-pointer" : "",
className
),
onClick: () => actionVariant == "caret" && onClickButton?.(valueButton),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full flex flex-col justify-between gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row justify-between items-center gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-lg font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
actionVariant === "button" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Button_default,
{
variant: "outline",
size: "extra-small",
onClick: () => onClickButton?.(valueButton),
className: "min-w-fit flex-shrink-0",
children: "Ver Aula"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-full", children: hasProgress ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
ProgressBar_default,
{
value: progress,
label: `${progress}% ${labelProgress}`,
variant: progressVariant
}
) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs text-text-600 truncate", children: description }) })
] }),
actionVariant == "caret" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
import_phosphor_react9.CaretRight,
{
className: "size-4.5 text-text-800 cursor-pointer",
"data-testid": "caret-icon"
}
)
]
}
);
}
);
var CardResults = (0, import_react13.forwardRef)(
({
header,
correct_answers,
incorrect_answers,
icon,
direction = "col",
color = "#B7DFFF",
className,
...props
}, ref) => {
const isRow = direction == "row";
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
CardBase,
{
ref,
layout: "horizontal",
padding: "none",
minHeight: "medium",
className: cn("items-stretch cursor-pointer pr-4", className),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"div",
{
className: cn(
"flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 min-h-full rounded-l-xl"
),
style: {
backgroundColor: color
},
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(IconRender_default, { iconName: icon, color: "currentColor", size: 20 })
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full flex flex-row justify-between items-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
"div",
{
className: cn(
"p-4 flex flex-wrap justify-between w-full h-full",
isRow ? "flex-row items-center gap-2" : "flex-col"
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm font-bold text-text-950 flex-1", children: header }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "flex flex-wrap flex-row gap-1 items-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
Badge_default,
{
action: "success",
variant: "solid",
size: "large",
iconLeft: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.CheckCircle, {}),
children: [
correct_answers,
" Corretas"
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
Badge_default,
{
action: "error",
variant: "solid",
size: "large",
iconLeft: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.XCircle, {}),
children: [
incorrect_answers,
" Incorretas"
]
}
)
] })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.CaretRight, { className: "min-w-6 min-h-6 text-text-800" })
] })
]
}
);
}
);
var CardStatus = (0, import_react13.forwardRef)(
({ header, className, status, label, ...props }, ref) => {
const getLabelBadge = (status2) => {
switch (status2) {
case "correct":
return "Correta";
case "incorrect":
return "Incorreta";
case "unanswered":
return "Em branco";
case "pending":
return "Avalia\xE7\xE3o pendente";
default:
return "Em branco";
}
};
const getIconBadge = (status2) => {
switch (status2) {
case "correct":
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.CheckCircle, {});
case "incorrect":
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.XCircle, {});
case "pending":
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.Clock, {});
default:
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.XCircle, {});
}
};
const getActionBadge = (status2) => {
switch (status2) {
case "correct":
return "success";
case "incorrect":
return "error";
case "pending":
return "info";
default:
return "info";
}
};
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "medium",
className: cn("items-center cursor-pointer", className),
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex justify-between w-full h-full flex-row items-center gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "flex flex-row gap-1 items-center flex-shrink-0", children: [
status && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Badge_default,
{
action: getActionBadge(status),
variant: "solid",
size: "medium",
iconLeft: getIconBadge(status),
children: getLabelBadge(status)
}
),
label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-text-800", children: label })
] }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.CaretRight, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer flex-shrink-0 ml-2" })
] })
}
);
}
);
var CardSettings = (0, import_react13.forwardRef)(
({ header, className, icon, ...props }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
CardBase,
{
ref,
layout: "horizontal",
padding: "small",
minHeight: "none",
className: cn(
"border-none items-center gap-2 text-text-700",
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "[&>svg]:size-6", children: icon }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "w-full text-sm truncate", children: header }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.CaretRight, { size: 24, className: "cursor-pointer" })
]
}
);
}
);
var CardSupport = (0, import_react13.forwardRef)(
({ header, className, direction = "col", children, ...props }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "none",
className: cn(
"border-none items-center gap-2 text-text-700",
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
"div",
{
className: cn(
"w-full flex",
direction == "col" ? "flex-col" : "flex-row items-center"
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-text-950 font-bold truncate", children: header }) }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex flex-row gap-1", children })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.CaretRight, { className: "text-text-800 cursor-pointer", size: 24 })
]
}
);
}
);
var CardForum = (0, import_react13.forwardRef)(
({
title,
content,
comments,
onClickComments,
valueComments,
onClickProfile,
valueProfile,
className = "",
date,
hour,
...props
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "none",
variant: "minimal",
className: cn("w-auto h-auto gap-3", className),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"button",
{
type: "button",
"aria-label": "Ver perfil",
onClick: () => onClickProfile?.(valueProfile),
className: "min-w-8 h-8 rounded-full bg-background-950"
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row gap-1 items-center flex-wrap", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xs font-semibold text-primary-700 truncate", children: title }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-xs text-text-600", children: [
"\u2022 ",
date,
" \u2022 ",
hour
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-text-950 text-sm line-clamp-2 truncate", children: content }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
"button",
{
type: "button",
"aria-label": "Ver coment\xE1rios",
onClick: () => onClickComments?.(valueComments),
className: "text-text-600 flex flex-row gap-2 items-center",
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.ChatCircleText, { "aria-hidden": "true", size: 16 }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-xs", children: [
comments,
" respostas"
] })
]
}
)
] })
]
}
);
}
);
var CardAudio = (0, import_react13.forwardRef)(
({
src,
title,
onPlay,
onPause,
onEnded,
onAudioTimeUpdate,
loop = false,
preload = "metadata",
tracks,
className,
...props
}, ref) => {
const [isPlaying, setIsPlaying] = (0, import_react13.useState)(false);
const [currentTime, setCurrentTime] = (0, import_react13.useState)(0);
const [duration, setDuration] = (0, import_react13.useState)(0);
const [volume, setVolume] = (0, import_react13.useState)(1);
const [showVolumeControl, setShowVolumeControl] = (0, import_react13.useState)(false);
const [showSpeedMenu, setShowSpeedMenu] = (0, import_react13.useState)(false);
const [playbackRate, setPlaybackRate] = (0, import_react13.useState)(1);
const audioRef = (0, import_react13.useRef)(null);
const volumeControlRef = (0, import_react13.useRef)(null);
const speedMenuRef = (0, import_react13.useRef)(null);
const formatTime = (time) => {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
};
const handlePlayPause = () => {
if (isPlaying) {
audioRef.current?.pause();
setIsPlaying(false);
onPause?.();
} else {
audioRef.current?.play();
setIsPlaying(true);
onPlay?.();
}
};
const handleTimeUpdate = () => {
const current = audioRef.current?.currentTime ?? 0;
const total = audioRef.current?.duration ?? 0;
setCurrentTime(current);
setDuration(total);
onAudioTimeUpdate?.(current, total);
};
const handleLoadedMetadata = () => {
setDuration(audioRef.current?.duration ?? 0);
};
const handleEnded = () => {
setIsPlaying(false);
setCurrentTime(0);
onEnded?.();
};
const handleProgressClick = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const width = rect.width;
const percentage = clickX / width;
const newTime = percentage * duration;
if (audioRef.current) {
audioRef.current.currentTime = newTime;
}
setCurrentTime(newTime);
};
const handleVolumeChange = (e) => {
const newVolume = parseFloat(e.target.value);
setVolume(newVolume);
if (audioRef.current) {
audioRef.current.volume = newVolume;
}
};
const toggleVolumeControl = () => {
setShowVolumeControl(!showVolumeControl);
setShowSpeedMenu(false);
};
const toggleSpeedMenu = () => {
setShowSpeedMenu(!showSpeedMenu);
setShowVolumeControl(false);
};
const handleSpeedChange = (speed) => {
setPlaybackRate(speed);
if (audioRef.current) {
audioRef.current.playbackRate = speed;
}
setShowSpeedMenu(false);
};
const getVolumeIcon = () => {
if (volume === 0) {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.SpeakerSimpleX, { size: 24 });
}
if (volume < 0.5) {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.SpeakerLow, { size: 24 });
}
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.SpeakerHigh, { size: 24 });
};
(0, import_react13.useEffect)(() => {
const handleClickOutside = (event) => {
if (volumeControlRef.current && !volumeControlRef.current.contains(event.target)) {
setShowVolumeControl(false);
}
if (speedMenuRef.current && !speedMenuRef.current.contains(event.target)) {
setShowSpeedMenu(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "none",
className: cn(
"flex flex-row w-auto h-14 items-center gap-2",
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"audio",
{
ref: audioRef,
src,
loop,
preload,
onTimeUpdate: handleTimeUpdate,
onLoadedMetadata: handleLoadedMetadata,
onEnded: handleEnded,
"data-testid": "audio-element",
"aria-label": title,
children: tracks ? tracks.map((track) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"track",
{
kind: track.kind,
src: track.src,
srcLang: track.srcLang,
label: track.label,
default: track.default
},
track.src
)) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"track",
{
kind: "captions",
src: "data:text/vtt;base64,",
srcLang: "pt",
label: "Sem legendas dispon\xEDveis"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"button",
{
type: "button",
onClick: handlePlayPause,
disabled: !src,
className: "cursor-pointer text-text-950 hover:text-primary-600 disabled:text-text-400 disabled:cursor-not-allowed",
"aria-label": isPlaying ? "Pausar" : "Reproduzir",
children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-6 h-6 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-0.5", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-1 h-4 bg-current rounded-sm" }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-1 h-4 bg-current rounded-sm" })
] }) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.Play, { size: 24 })
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-text-800 text-md font-medium min-w-[2.5rem]", children: formatTime(currentTime) }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 relative", "data-testid": "progress-bar", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"button",
{
type: "button",
className: "w-full h-2 bg-border-100 rounded-full cursor-pointer",
onClick: handleProgressClick,
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleProgressClick(
e
);
}
},
"aria-label": "Barra de progresso do \xE1udio",
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"div",
{
className: "h-full bg-primary-600 rounded-full transition-all duration-100",
style: {
width: duration > 0 ? `${currentTime / duration * 100}%` : "0%"
}
}
)
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-text-800 text-md font-medium min-w-[2.5rem]", children: formatTime(duration) }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative h-6", ref: volumeControlRef, children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"button",
{
type: "button",
onClick: toggleVolumeControl,
className: "cursor-pointer text-text-950 hover:text-primary-600",
"aria-label": "Controle de volume",
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-6 h-6 flex items-center justify-center", children: getVolumeIcon() })
}
),
showVolumeControl && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"button",
{
type: "button",
className: "absolute bottom-full right-0 mb-2 p-2 bg-background border border-border-100 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500",
onKeyDown: (e) => {
if (e.key === "Escape") {
setShowVolumeControl(false);
}
},
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"input",
{
type: "range",
min: "0",
max: "1",
step: "0.1",
value: volume,
onChange: handleVolumeChange,
onKeyDown: (e) => {
if (e.key === "ArrowUp" || e.key === "ArrowRight") {
e.preventDefault();
const newVolume = Math.min(
1,
Math.round((volume + 0.1) * 10) / 10
);
setVolume(newVolume);
if (audioRef.current) audioRef.current.volume = newVolume;
} else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
e.preventDefault();
const newVolume = Math.max(
0,
Math.round((volume - 0.1) * 10) / 10
);
setVolume(newVolume);
if (audioRef.current) audioRef.current.volume = newVolume;
}
},
className: "w-20 h-2 bg-border-100 rounded-lg appearance-none cursor-pointer",
style: {
background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${volume * 100}%, #e5e7eb ${volume * 100}%, #e5e7eb 100%)`
},
"aria-label": "Volume",
"aria-valuenow": Math.round(volume * 100),
"aria-valuemin": 0,
"aria-valuemax": 100
}
)
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative h-6", ref: speedMenuRef, children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"button",
{
type: "button",
onClick: toggleSpeedMenu,
className: "cursor-pointer text-text-950 hover:text-primary-600",
"aria-label": "Op\xE7\xF5es de velocidade",
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.DotsThreeVertical, { size: 24 })
}
),
showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute bottom-full right-0 mb-2 p-2 bg-background border border-border-100 rounded-lg shadow-lg min-w-24 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-col gap-1", children: [
{ speed: 1, label: "1x" },
{ speed: 1.5, label: "1.5x" },
{ speed: 2, label: "2x" }
].map(({ speed, label }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"button",
{
type: "button",
onClick: () => handleSpeedChange(speed),
className: cn(
"px-3 py-1 text-sm text-left rounded hover:bg-border-50 transition-colors",
playbackRate === speed ? "bg-primary-950 text-secondary-100 font-medium" : "text-text-950"
),
children: label
},
speed
)) }) })
] })
]
}
);
}
);
var SIMULADO_BACKGROUND_CLASSES = {
enem: "bg-exam-1",
prova: "bg-exam-2",
simuladao: "bg-exam-3",
vestibular: "bg-exam-4"
};
var CardSimulado = (0, import_react13.forwardRef)(
({ title, duration, info, backgroundColor, className, ...props }, ref) => {
const backgroundClass = SIMULADO_BACKGROUND_CLASSES[backgroundColor];
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "none",
cursor: "pointer",
className: cn(
`${backgroundClass} hover:shadow-soft-shadow-2 transition-shadow duration-200`,
className
),
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex justify-between items-center w-full gap-4", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text_default, { size: "lg", weight: "bold", className: "text-text-950 truncate", children: title }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-4 text-text-700", children: [
duration && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.Clock, { size: 16, className: "flex-shrink-0" }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text_default, { size: "sm", children: duration })
] }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text_default, { size: "sm", className: "truncate", children: info })
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
import_phosphor_react9.CaretRight,
{
size: 24,
className: "text-text-800 flex-shrink-0",
"data-testid": "caret-icon"
}
)
] })
}
);
}
);
var CardTest = (0, import_react13.forwardRef)(
({
title,
duration,
questionsCount,
additionalInfo,
selected = false,
onSelect,
className = "",
...props
}, ref) => {
const handleClick = () => {
if (onSelect) {
onSelect(!selected);
}
};
const handleKeyDown = (event) => {
if ((event.key === "Enter" || event.key === " ") && onSelect) {
event.preventDefault();
onSelect(!selected);
}
};
const isSelectable = !!onSelect;
const getQuestionsText = (count) => {
const singular = count === 1 ? "quest\xE3o" : "quest\xF5es";
return `${count} ${singular}`;
};
const displayInfo = questionsCount ? getQuestionsText(questionsCount) : additionalInfo || "";
const baseClasses = "flex flex-row items-center p-4 gap-2 w-full max-w-full bg-background shadow-soft-shadow-1 rounded-xl isolate border-0 text-left";
const interactiveClasses = isSelectable ? "cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-950 focus:ring-offset-2" : "";
const selectedClasses = selected ? "ring-2 ring-primary-950 ring-offset-2" : "";
if (isSelectable) {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"button",
{
ref,
type: "button",
className: cn(
`${baseClasses} ${interactiveClasses} ${selectedClasses} ${className}`.trim()
),
onClick: handleClick,
onKeyDown: handleKeyDown,
"aria-pressed": selected,
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col justify-between gap-[27px] flex-grow min-h-[67px] w-full min-w-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Text_default,
{
size: "md",
weight: "bold",
className: "text-text-950 tracking-[0.2px] leading-[19px] truncate",
children: title
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row justify-start items-end gap-4 w-full", children: [
duration && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row items-center gap-1 flex-shrink-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.Clock, { size: 16, className: "text-text-700" }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Text_default,
{
size: "sm",
className: "text-text-700 leading-[21px] whitespace-nowrap",
children: duration
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Text_default,
{
size: "sm",
className: "text-text-700 leading-[21px] flex-grow truncate",
children: displayInfo
}
)
] })
] })
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"div",
{
ref,
className: cn(`${baseClasses} ${className}`.trim()),
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col justify-between gap-[27px] flex-grow min-h-[67px] w-full min-w-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Text_default,
{
size: "md",
weight: "bold",
className: "text-text-950 tracking-[0.2px] leading-[19px] truncate",
children: title
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row justify-start items-end gap-4 w-full", children: [
duration && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row items-center gap-1 flex-shrink-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react9.Clock, { size: 16, className: "text-text-700" }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Text_default,
{
size: "sm",
className: "text-text-700 leading-[21px] whitespace-nowrap",
children: duration
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Text_default,
{
size: "sm",
className: "text-text-700 leading-[21px] flex-grow truncate min-w-0",
children: displayInfo
}
)
] })
] })
}
);
}
);
var SIMULATION_TYPE_STYLES = {
enem: {
background: "bg-exam-1",
badge: "exam1",
text: "Enem"
},
prova: {
background: "bg-exam-2",
badge: "exam2",
text: "Prova"
},
simulado: {
background: "bg-exam-3",
badge: "exam3",
text: "Simulad\xE3o"
},
vestibular: {
background: "bg-exam-4",
badge: "exam4",
text: "Vestibular"
}
};
var CardSimulationHistory = (0, import_react13.forwardRef)(({ data, onSimulationClick, className, ...props }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"div",
{
ref,
className: cn("w-full max-w-[992px] h-auto", className),
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-0", children: [
data.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
"div",
{
className: cn(
"flex flex-row justify-center items-start px-4 py-6 gap-2 w-full bg-background",
sectionIndex === 0 ? "rounded-t-3xl" : ""
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Text_default,
{
size: "xs",
weight: "bold",
className: "text-text-800 w-11 flex-shrink-0",
children: section.date
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-col gap-2 flex-1", children: section.simulations.map((simulation) => {
const typeStyles = SIMULATION_TYPE_STYLES[simulation.type];
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
CardBase,
{
layout: "horizontal",
padding: "medium",
minHeight: "none",
cursor: "pointer",
className: cn(
`${typeStyles.background} rounded-xl hover:shadow-soft-shadow-2
transition-shadow duration-200 h-auto min-h-[61px]`
),
onClick: () => onSimulationClick?.(simulation),
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex justify-between items-center w-full gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-wrap flex-col justify-between sm:flex-row gap-2 flex-1 min-w-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Text_default,
{
size: "lg",
weight: "bold",
className: "text-text-950 truncate",
children: simulation.title
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Badge_default,
{
variant: "examsOutlined",
action: typeStyles.badge,
size: "medium",
children: typeStyles.text
}
),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text_default, { size: "sm", className: "text-text-800 truncate", children: simulation.info })
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
import_phosphor_react9.CaretRight,
{
size: 24,
className: "text-text-800 flex-shrink-0",
"data-testid": "caret-icon"
}
)
] })
},
simulation.id
);
}) })
]
}
) }, section.date)),
data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-full h-6 bg-background rounded-b-3xl" })
] })
}
);
});
// src/components/Quiz/Quiz.tsx
var import_jsx_runtime21 = require("react/jsx-runtime");
var getQuizTypeConfig = (type) => {
const QUIZ_TYPE_CONFIG = {
["SIMULADO" /* SIMULADO */]: {
label: "Simulado",
article: "o",
preposition: "do"
},
["QUESTIONARIO" /* QUESTIONARIO */]: {
label: "Question\xE1rio",
article: "o",
preposition: "do"
},
["ATIVIDADE" /* ATIVIDADE */]: {
label: "Atividade",
article: "a",
preposition: "da"
}
};
const config = QUIZ_TYPE_CONFIG[type];
return config || QUIZ_TYPE_CONFIG["SIMULADO" /* SIMULADO */];
};
var getTypeLabel = (type) => {
return getQuizTypeConfig(type).label;
};
var getQuizArticle = (type) => {
return getQuizTypeConfig(type).article;
};
var getQuizPreposition = (type) => {
return getQuizTypeConfig(type).preposition;
};
var getCompletionTitle = (type) => {
const config = getQuizTypeConfig(type);
return `Voc\xEA concluiu ${config.article} ${config.label.toLowerCase()}!`;
};
var getExitConfirmationText = (type) => {
const config = getQuizTypeConfig(type);
return `Se voc\xEA sair ${config.preposition} ${config.label.toLowerCase()} agora, todas as respostas ser\xE3o perdidas.`;
};
var getFinishConfirmationText = (type) => {
const config = getQuizTypeConfig(type);
return `Tem certeza que deseja finalizar ${config.article} ${config.label.toLowerCase()}?`;
};
var Quiz = (0, import_react14.forwardRef)(({ children, className, variant = "default", ...props }, ref) => {
const { setVariant } = useQuizStore();
(0, import_react14.useEffect)(() => {
setVariant(variant);
}, [variant, setVariant]);
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: cn("flex flex-col", className), ...props, children });
});
var QuizTitle = (0, import_react14.forwardRef)(({ className, onBack, ...props }, ref) => {
const {
quiz,
currentQuestionIndex,
getTotalQuestions,
getQuizTitle,
timeElapsed,
formatTime,
isStarted
} = useQuizStore();
const [showExitConfirmation, setShowExitConfirmation] = (0, import_react14.useState)(false);
const totalQuestions = getTotalQuestions();
const quizTitle = getQuizTitle();
const handleBackClick = () => {
if (isStarted) {
setShowExitConfirmation(true);
} else {
actionOnBack();
}
};
const handleConfirmExit = () => {
setShowExitConfirmation(false);
actionOnBack();
};
const actionOnBack = () => {
if (onBack) {
onBack();
} else {
window.history.back();
}
};
const handleCancelExit = () => {
setShowExitConfirmation(false);
};
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
"div",
{
ref,
className: cn(
"flex flex-row justify-between items-center relative p-2",
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
IconButton_default,
{
icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react10.CaretLeft, { size: 24 }),
size: "md",
"aria-label": "Voltar",
onClick: handleBackClick
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "flex flex-col gap-2 text-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-text-950 font-bold text-md", children: quizTitle }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-text-600 text-xs", children: totalQuestions > 0 ? `${currentQuestionIndex + 1} de ${totalQuestions}` : "0 de 0" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex flex-row items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Badge_default, { variant: "outlined", action: "info", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react10.Clock, {}), children: isStarted ? formatTime(timeElapsed) : "00:00" }) })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
AlertDialog,
{
isOpen: showExitConfirmation,
onChangeOpen: setShowExitConfirmation,
title: "Deseja sair?",
description: getExitConfirmationText(quiz?.type || "SIMULADO" /* SIMULADO */),
cancelButtonLabel: "Voltar e revisar",
submitButtonLabel: "Sair Mesmo Assim",
onSubmit: handleConfirmExit,
onCancel: handleCancelExit
}
)
] });
});
var QuizHeader = () => {
const { getCurrentQuestion, getQuestionIndex } = useQuizStore();
const currentQuestion = getCurrentQuestion();
let currentId = currentQuestion && "questionId" in currentQuestion ? currentQuestion.questionId : currentQuestion?.id;
const questionIndex = getQuestionIndex(currentId);
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
HeaderAlternative,
{
title: currentQuestion ? `Quest\xE3o ${questionIndex.toString().padStart(2, "0")}` : "Quest\xE3o",
subTitle: currentQuestion?.knowledgeMatrix?.[0]?.topic?.name ?? "",
content: currentQuestion?.statement ?? ""
}
);
};
var QuizContent = ({ paddingBottom }) => {
const { getCurrentQuestion } = useQuizStore();
const currentQuestion = getCurrentQuestion();
const questionComponents = {
["ALTERNATIVA" /* ALTERNATIVA */]: QuizAlternative,
["MULTIPLA_ESCOLHA" /* MULTIPLA_ESCOLHA */]: QuizMultipleChoice,
["DISSERTATIVA" /* DISSERTATIVA */]: QuizDissertative,
["VERDADEIRO_FALSO" /* VERDADEIRO_FALSO */]: QuizTrueOrFalse,
["LIGAR_PONTOS" /* LIGAR_PONTOS */]: QuizConnectDots,
["PREENCHER" /* PREENCHER */]: QuizFill,
["IMAGEM" /* IMAGEM */]: QuizImageQuestion
};
const QuestionComponent = currentQuestion ? questionComponents[currentQuestion.questionType] : null;
return QuestionComponent ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(QuestionComponent, { paddingBottom }) : null;
};
var QuizQuestionList = ({
filterType = "all",
onQuestionClick
} = {}) => {
const {
getQuestionsGroupedBySubject,
goToQuestion,
getQuestionStatusFromUserAnswers,
getQuestionIndex
} = useQuizStore();
const groupedQuestions = getQuestionsGroupedBySubject();
const getQuestionStatus = (questionId) => {
return getQuestionStatusFromUserAnswers(questionId);
};
const filteredGroupedQuestions = Object.entries(groupedQuestions).reduce(
(acc, [subjectId, questions]) => {
const filteredQuestions = questions.filter((question) => {
const status = getQuestionStatus(question.id);
switch (filterType) {
case "answered":
return status === "answered";
case "unanswered":
return status === "unanswered" || status === "skipped";
default:
return true;
}
});
if (filteredQuestions.length > 0) {
acc[subjectId] = filteredQuestions;
}
return acc;
},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
{}
);
const getStatusLabel = (status) => {
switch (status) {
case "answered":
return "Respondida";
case "skipped":
return "Em branco";
default:
return "Em branco";
}
};
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-6 px-4 h-full", children: [
Object.entries(filteredGroupedQuestions).length == 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center justify-center text-gray-500 py-8 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-lg", children: "Nenhum resultado" }) }),
Object.entries(filteredGroupedQuestions).map(
([subjectId, questions]) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { className: "flex flex-col gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "pt-6 pb-4 flex flex-row gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-primary-500 p-1 rounded-sm flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react10.BookOpen, { size: 17, className: "text-white" }) }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-text-800 font-bold text-lg", children: questions?.[0]?.knowledgeMatrix?.[0]?.subject?.name ?? "Sem mat\xE9ria" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "flex flex-col gap-2", children: questions.map((question) => {
const status = getQuestionStatus(question.id);
const questionNumber = getQuestionIndex(question.id);
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
CardStatus,
{
header: `Quest\xE3o ${questionNumber.toString().padStart(2, "0")}`,
label: getStatusLabel(status),
onClick: () => {
goToQuestion(questionNumber - 1);
onQuestionClick?.();
}
},
question.id
);
}) })
] }, subjectId)
)
] });
};
var QuizFooter = (0, import_react14.forwardRef)(
({
className,
onGoToSimulated,
onDetailResult,
handleFinishSimulated,
onGoToNextModule,
onRepeat,
onTryLater,
resultImageComponent,
resultIncorrectImageComponent,
...props
}, ref) => {
const {
quiz,
currentQuestionIndex,
getTotalQuestions,
goToNextQuestion,
goToPreviousQuestion,
getUnansweredQuestionsFromUserAnswers,
getCurrentAnswer,
skipQuestion,
skipCurrentQuestionIfUnanswered,
getCurrentQuestion,
getQuestionStatusFromUserAnswers,
variant,
getQuestionResultStatistics
} = useQuizStore();
const totalQuestions = getTotalQuestions();
const isFirstQuestion = currentQuestionIndex === 0;
const isLastQuestion = currentQuestionIndex === totalQuestions - 1;
const currentAnswer = getCurrentAnswer();
const currentQuestion = getCurrentQuestion();
const isCurrentQuestionSkipped = currentQuestion ? getQuestionStatusFromUserAnswers(currentQuestion.id) === "skipped" : false;
const [activeModal, setActiveModal] = (0, import_react14.useState)(null);
const [filterType, setFilterType] = (0, import_react14.useState)("all");
const openModal = (modalName) => setActiveModal(modalName);
const closeModal = () => setActiveModal(null);
const isModalOpen = (modalName) => activeModal === modalName;
const unansweredQuestions = getUnansweredQuestionsFromUserAnswers();
const allQuestions = getTotalQuestions();
const stats = getQuestionResultStatistics();
const correctAnswers = stats?.correctAnswers;
const totalAnswers = stats?.totalAnswered;
const quizType = quiz?.type || "SIMULADO" /* SIMULADO */;
const quizTypeLabel = getTypeLabel(quizType);
const handleFinishQuiz = async () => {
skipCurrentQuestionIfUnanswered();
if (unansweredQuestions.length > 0) {
openModal("alertDialog");
return;
}
try {
if (handleFinishSimulated) {
await Promise.resolve(handleFinishSimulated());
}
if (quizType === "QUESTIONARIO" /* QUESTIONARIO */ && typeof correctAnswers === "number" && typeof totalAnswers === "number" && correctAnswers === totalAnswers) {
openModal("modalQuestionnaireAllCorrect");
return;
}
if (quizType === "QUESTIONARIO" /* QUESTIONARIO */ && typeof correctAnswers === "number" && correctAnswers === 0) {
openModal("modalQuestionnaireAllIncorrect");
return;
}
openModal("modalResult");
} catch (err) {
console.error("handleFinishSimulated failed:", err);
return;
}
};
const handleAlertSubmit = async () => {
try {
if (handleFinishSimulated) {
await Promise.resolve(handleFinishSimulated());
}
if (quizType === "QUESTIONARIO" /* QUESTIONARIO */ && typeof correctAnswers === "number" && typeof totalAnswers === "number" && correctAnswers === totalAnswers) {
openModal("modalQuestionnaireAllCorrect");
return;
}
if (quizType === "QUESTIONARIO" /* QUESTIONARIO */ && typeof correctAnswers === "number" && correctAnswers === 0) {
openModal("modalQuestionnaireAllIncorrect");
return;
}
openModal("modalResult");
} catch (err) {
console.error("handleFinishSimulated failed:", err);
closeModal();
return;
}
};
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
"footer",
{
ref,
className: cn(
"w-full px-2 bg-background lg:max-w-[1000px] not-lg:max-w-[calc(100vw-32px)] border-t border-border-50 fixed bottom-0 min-h-[80px] flex flex-row justify-between items-center",
className
),
...props,
children: variant === "default" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-row items-center gap-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
IconButton_default,
{
icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react10.SquaresFour, { size: 24, className: "text-text-950" }),
size: "md",
onClick: () => openModal("modalNavigate")
}
),
isFirstQuestion ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Button_default,
{
variant: "outline",
size: "small",
onClick: () => {
skipQuestion();
goToNextQuestion();
},
children: "Pular"
}
) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Button_default,
{
size: "medium",
variant: "link",
action: "primary",
iconLeft: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react10.CaretLeft, { size: 18 }),
onClick: () => {
goToPreviousQuestion();
},
children: "Voltar"
}
)
] }),
!isFirstQuestion && !isLastQuestion && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Button_default,
{
size: "small",
variant: "outline",
action: "primary",
onClick: () => {
skipQuestion();
goToNextQuestion();
},
children: "Pular"
}
),
isLastQuestion ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Button_default,
{
size: "medium",
variant: "solid",
action: "primary",
onClick: handleFinishQuiz,
children: "Finalizar"
}
) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Button_default,
{
size: "medium",
variant: "link",
action: "primary",
iconRight: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react10.CaretRight, { size: 18 }),
disabled: !currentAnswer && !isCurrentQuestionSkipped,
onClick: () => {
goToNextQuestion();
},
children: "Avan\xE7ar"
}
)
] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-row items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Button_default,
{
variant: "link",
action: "primary",
size: "medium",
onClick: () => openModal("modalResolution"),
children: "Ver resolu\xE7\xE3o"
}
) })
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
AlertDialog,
{
isOpen: isModalOpen("alertDialog"),
onChangeOpen: (open) => open ? openModal("alertDialog") : closeModal(),
title: `Finalizar ${quizTypeLabel.toLowerCase()}?`,
description: unansweredQuestions.length > 0 ? `Voc\xEA deixou as quest\xF5es ${unansweredQuestions.join(", ")} sem resposta. Finalizar agora pode impactar seu desempenho.` : getFinishConfirmationText(quizType),
cancelButtonLabel: "Voltar e revisar",
submitButtonLabel: "Finalizar Mesmo Assim",
onSubmit: handleAlertSubmit
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Modal_default,
{
isOpen: isModalOpen("modalResult"),
onClose: closeModal,
title: "",
closeOnEscape: false,
hideCloseButton: true,
size: "md",
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col w-full h-full items-center justify-center gap-4", children: [
resultImageComponent ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-[282px] h-auto", children: resultImageComponent }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-[282px] h-[200px] bg-gray-100 rounded-md flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-gray-500 text-sm", children: "Imagem de resultado" }) }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-2 text-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "text-text-950 font-bold text-lg", children: getCompletionTitle(quizType) }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-text-500 font-sm", children: [
"Voc\xEA acertou ",
correctAnswers ?? "--",
" de ",
allQuestions,
" ",
"quest\xF5es."
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "px-6 flex flex-row items-center gap-2 w-full", children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Button_default,
{
variant: "outline",
className: "w-full",
size: "small",
onClick: onGoToSimulated,
children: quizTypeLabel === "Question\xE1rio" ? "Ir para aulas" : `Ir para ${quizTypeLabel.toLocaleLowerCase()}s`
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button_default, { className: "w-full", onClick: onDetailResult, children: "Detalhar resultado" })
] })
] })
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Modal_default,
{
isOpen: isModalOpen("modalNavigate"),
onClose: closeModal,
title: "Quest\xF5es",
size: "lg",
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col w-full not-lg:h-[calc(100vh-200px)] lg:max-h-[687px] lg:h-[687px]", children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-row justify-between items-center py-6 pt-6 pb-4 border-b border-border-200 flex-shrink-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-text-950 font-bold text-lg", children: "Filtrar por" }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "max-w-[266px]", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Select_default, { value: filterType, onValueChange: setFilterType, children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
SelectTrigger,
{
variant: "rounded",
className: "max-w-[266px] min-w-[160px]",
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectValue, { placeholder: "Selecione uma op\xE7\xE3o" })
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(SelectContent, { children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectItem, { value: "all", children: "Todas" }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectItem, { value: "unanswered", children: "Em branco" }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectItem, { value: "answered", children: "Respondidas" })
] })
] }) })
] }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col gap-2 flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
QuizQuestionList,
{
filterType,
onQuestionClick: closeModal
}
) })
] })
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Modal_default,
{
isOpen: isModalOpen("modalResolution"),
onClose: closeModal,
title: "Resolu\xE7\xE3o",
size: "lg",
children: currentQuestion?.solutionExplanation
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Modal_default,
{
isOpen: isModalOpen("modalQuestionnaireAllCorrect"),
onClose: closeModal,
title: "",
closeOnEscape: false,
hideCloseButton: true,
size: "md",
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col w-full h-full items-center justify-center gap-4", children: [
resultImageComponent ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-[282px] h-auto", children: resultImageComponent }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-[282px] h-[200px] bg-gray-100 rounded-md flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-gray-500 text-sm", children: "Imagem de resultado" }) }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-2 text-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "text-text-950 font-bold text-lg", children: "\u{1F389} Parab\xE9ns!" }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-text-500 font-sm", children: "Voc\xEA concluiu o m\xF3dulo Movimento Uniforme." })
] }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "px-6 flex flex-row items-center gap-2 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button_default, { className: "w-full", onClick: onGoToNextModule, children: "Pr\xF3ximo m\xF3dulo" }) })
] })
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Modal_default,
{
isOpen: isModalOpen("modalQuestionnaireAllIncorrect"),
onClose: closeModal,
title: "",
closeOnEscape: false,
hideCloseButton: true,
size: "md",
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col w-full h-full items-center justify-center gap-4", children: [
resultIncorrectImageComponent ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-[282px] h-auto", children: resultIncorrectImageComponent }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-[282px] h-[200px] bg-gray-100 rounded-md flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-gray-500 text-sm", children: "Imagem de resultado" }) }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-2 text-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "text-text-950 font-bold text-lg", children: "\u{1F615} N\xE3o foi dessa vez..." }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-text-500 font-sm", children: "Voc\xEA tirou 0 no question\xE1rio, mas n\xE3o se preocupe! Isso \xE9 apenas uma oportunidade de aprendizado." }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-text-500 font-sm", children: "Que tal tentar novamente para melhorar sua nota? Estamos aqui para te ajudar a entender o conte\xFAdo e evoluir." }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-text-500 font-sm", children: "Clique em Repetir Question\xE1rio e mostre do que voc\xEA \xE9 capaz! \u{1F4AA}" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-row justify-center items-center gap-2 w-full", children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Button_default,
{
type: "button",
variant: "link",
size: "small",
className: "w-auto",
onClick: () => {
closeModal();
openModal("alertDialogTryLater");
},
children: "Tentar depois"
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Button_default,
{
variant: "outline",
size: "small",
className: "w-auto",
onClick: onDetailResult,
children: "Detalhar resultado"
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
Button_default,
{
className: "w-auto",
size: "small",
onClick: onGoToNextModule,
children: "Pr\xF3ximo m\xF3dulo"
}
)
] })
] })
}
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
AlertDialog,
{
isOpen: isModalOpen("alertDialogTryLater"),
onChangeOpen: (open) => open ? openModal("alertDialogTryLater") : closeModal(),
title: "Tentar depois?",
description: "Voc\xEA optou por refazer o question\xE1rio mais tarde.\n\nLembre-se: enquanto n\xE3o refazer o question\xE1rio, sua nota permanecer\xE1 0 no sistema.",
cancelButtonLabel: "Repetir question\xE1rio",
submitButtonLabel: "Tentar depois",
onSubmit: () => {
onTryLater?.();
closeModal();
},
onCancel: () => {
onRepeat?.();
closeModal();
}
}
)
] });
}
);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Quiz,
QuizContent,
QuizFooter,
QuizHeader,
QuizQuestionList,
QuizTitle,
getCompletionTitle,
getExitConfirmationText,
getFinishConfirmationText,
getQuizArticle,
getQuizPreposition,
getQuizTypeConfig,
getTypeLabel
});
//# sourceMappingURL=index.js.map