analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1,247 lines (1,228 loc) • 62.6 kB
JavaScript
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
var _chunkCMUIZOUVjs = require('./chunk-CMUIZOUV.js');
var _chunkRIVDFVR5js = require('./chunk-RIVDFVR5.js');
var _chunkBJMKBBN3js = require('./chunk-BJMKBBN3.js');
var _chunk34ST3MKOjs = require('./chunk-34ST3MKO.js');
var _chunkANT66KVKjs = require('./chunk-ANT66KVK.js');
var _chunkTN3AYOMVjs = require('./chunk-TN3AYOMV.js');
// src/components/Card/Card.tsx
var _react = require('react');
var _CaretRight = require('@phosphor-icons/react/dist/csr/CaretRight');
var _ChatCircleText = require('@phosphor-icons/react/dist/csr/ChatCircleText');
var _CheckCircle = require('@phosphor-icons/react/dist/csr/CheckCircle');
var _Clock = require('@phosphor-icons/react/dist/csr/Clock');
var _DotsThreeVertical = require('@phosphor-icons/react/dist/csr/DotsThreeVertical');
var _Play = require('@phosphor-icons/react/dist/csr/Play');
var _SpeakerHigh = require('@phosphor-icons/react/dist/csr/SpeakerHigh');
var _SpeakerLow = require('@phosphor-icons/react/dist/csr/SpeakerLow');
var _SpeakerSimpleX = require('@phosphor-icons/react/dist/csr/SpeakerSimpleX');
var _XCircle = require('@phosphor-icons/react/dist/csr/XCircle');
var _jsxruntime = 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 = _react.forwardRef.call(void 0,
({
children,
variant = "default",
layout = "horizontal",
padding = "medium",
minHeight = "medium",
cursor = "default",
className = "",
onClick,
onKeyDown,
...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];
const isInteractive = !!onClick;
const handleKeyDown = (e) => {
if (isInteractive && ["Enter", " "].includes(e.key)) {
e.preventDefault();
e.currentTarget.click();
}
_optionalChain([onKeyDown, 'optionalCall', _ => _(e)]);
};
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
ref,
className: _chunkTN3AYOMVjs.cn.call(void 0,
baseClasses,
paddingClasses,
minHeightClasses,
layoutClasses,
cursorClasses,
className
),
onClick,
onKeyDown: handleKeyDown,
tabIndex: isInteractive ? 0 : void 0,
role: isInteractive ? "button" : void 0,
...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 = _react.forwardRef.call(void 0,
({
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__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
ref,
className: _chunkTN3AYOMVjs.cn.call(void 0,
"w-full flex flex-col rounded-xl",
extended && "border border-border-50 bg-background",
className
),
...props,
children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex flex-col gap-1 items-center justify-center p-4",
actionCardClasses,
extended ? "rounded-t-xl" : "rounded-xl"
),
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"span",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"size-7.5 rounded-full flex items-center justify-center",
actionIconClasses
),
children: icon
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "2xs",
weight: "medium",
className: "text-text-800 uppercase truncate",
children: title
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"p",
{
className: _chunkTN3AYOMVjs.cn.call(void 0, "text-lg font-bold truncate", actionSubTitleClasses),
children: subTitle
}
)
]
}
),
extended && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center gap-2.5 pb-9.5 pt-2.5", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"p",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"text-2xs font-medium uppercase truncate",
actionHeaderClasses
),
children: header
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBJMKBBN3js.Badge_default, { size: "large", action: "info", children: description })
] })
]
}
);
}
);
var CardQuestions = _react.forwardRef.call(void 0,
({
header,
state = "undone",
className,
onClickButton,
valueButton,
...props
}, ref) => {
const getStateConfig = () => {
switch (state) {
case "done":
return {
label: "Realizado",
buttonLabel: "Ver Resultado",
badgeAction: "success"
};
case "pending":
return {
label: "Aguardando corre\xE7\xE3o",
buttonLabel: "Ver Resultado",
badgeAction: "info"
};
default:
return {
label: "N\xE3o Realizado",
buttonLabel: "Responder",
badgeAction: "error"
};
}
};
const { label, buttonLabel, badgeAction } = getStateConfig();
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "medium",
className: _chunkTN3AYOMVjs.cn.call(void 0, "justify-between gap-4", className),
...props,
children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "font-bold text-xs text-text-950 truncate", children: header }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-row gap-6 items-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBJMKBBN3js.Badge_default, { size: "medium", variant: "solid", action: badgeAction, children: label }) })
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-shrink-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
size: "extra-small",
onClick: () => _optionalChain([onClickButton, 'optionalCall', _2 => _2(valueButton)]),
className: "min-w-fit",
children: buttonLabel
}
) })
]
}
);
}
);
var CardProgress = _react.forwardRef.call(void 0,
({
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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
showDates && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-row gap-6 items-center", children: [
initialDate && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-text-800 font-semibold", children: "In\xEDcio" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-text-600", children: initialDate })
] }),
endDate && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-text-800 font-semibold", children: "Fim" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-text-600", children: endDate })
] })
] }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkCMUIZOUVjs.ProgressBar_default,
{
size: "small",
value: progress,
variant: progressVariant,
"data-testid": "progress-bar"
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "xs",
weight: "medium",
className: _chunkTN3AYOMVjs.cn.call(void 0,
"text-text-950 leading-none tracking-normal text-center flex-none"
),
children: [
Math.round(progress),
"%"
]
}
)
] })
] }),
vertical: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-text-800", children: subhead })
};
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
CardBase,
{
ref,
layout: isHorizontal ? "horizontal" : "vertical",
padding: "none",
minHeight: "medium",
cursor: "pointer",
className: _chunkTN3AYOMVjs.cn.call(void 0, isHorizontal ? "h-20" : "", className),
...props,
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"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__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"p-4 flex flex-col justify-between w-full h-full",
!isHorizontal && "gap-4"
),
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "sm", weight: "bold", className: "text-text-950 truncate", children: header }),
contentComponent[direction]
]
}
)
]
}
);
}
);
var CardTopic = _react.forwardRef.call(void 0,
({
header,
subHead,
progress,
showPercentage = false,
progressVariant = "blue",
className = "",
...props
}, ref) => {
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
CardBase,
{
ref,
layout: "vertical",
padding: "small",
minHeight: "medium",
cursor: "pointer",
className: _chunkTN3AYOMVjs.cn.call(void 0, "justify-center gap-2 py-2 px-4", className),
...props,
children: [
subHead && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: text }),
index < subHead.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: "\u2022" })
] }, `${text} - ${index}`)) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-text-950 font-bold truncate", children: header }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkCMUIZOUVjs.ProgressBar_default,
{
size: "small",
value: progress,
variant: progressVariant,
"data-testid": "progress-bar"
}
),
showPercentage && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "xs",
weight: "medium",
className: _chunkTN3AYOMVjs.cn.call(void 0,
"text-text-950 leading-none tracking-normal text-center flex-none"
),
children: [
Math.round(progress),
"%"
]
}
)
] })
]
}
);
}
);
var CardPerformance = _react.forwardRef.call(void 0,
({
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__ */ _jsxruntime.jsxs.call(void 0,
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "none",
className: _chunkTN3AYOMVjs.cn.call(void 0,
actionVariant == "caret" ? "cursor-pointer" : "",
className
),
onClick: () => actionVariant == "caret" && _optionalChain([onClickButton, 'optionalCall', _3 => _3(valueButton)]),
...props,
children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full flex flex-col justify-between gap-2", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-row justify-between items-center gap-2", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-lg font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
actionVariant === "button" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
variant: "outline",
size: "extra-small",
onClick: () => _optionalChain([onClickButton, 'optionalCall', _4 => _4(valueButton)]),
className: "min-w-fit flex-shrink-0",
children: "Ver Aula"
}
)
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full", children: hasProgress ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkCMUIZOUVjs.ProgressBar_default,
{
value: progress,
label: `${progress}% ${labelProgress}`,
variant: progressVariant
}
) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs text-text-600 truncate", children: description }) })
] }),
actionVariant == "caret" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_CaretRight.CaretRightIcon,
{
className: "size-4.5 text-text-800 cursor-pointer",
"data-testid": "caret-icon"
}
)
]
}
);
}
);
var CardResults = _react.forwardRef.call(void 0,
({
header,
correct_answers,
incorrect_answers,
icon,
direction = "col",
color = "#B7DFFF",
className,
...props
}, ref) => {
const isRow = direction == "row";
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
CardBase,
{
ref,
layout: "horizontal",
padding: "none",
minHeight: "medium",
className: _chunkTN3AYOMVjs.cn.call(void 0, "items-stretch cursor-pointer pr-4", className),
...props,
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"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__ */ _jsxruntime.jsx.call(void 0, _chunkRIVDFVR5js.IconRender_default, { iconName: icon, color: "currentColor", size: 20 })
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full flex flex-row justify-between items-center", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"p-4 flex flex-wrap justify-between w-full h-full",
isRow ? "flex-row items-center gap-2" : "flex-col"
),
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-bold text-text-950 flex-1", children: header }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex flex-wrap flex-row gap-1 items-center", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
_chunkBJMKBBN3js.Badge_default,
{
action: "success",
variant: "solid",
size: "large",
iconLeft: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircle.CheckCircleIcon, {}),
children: [
correct_answers,
" Corretas"
]
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
_chunkBJMKBBN3js.Badge_default,
{
action: "error",
variant: "solid",
size: "large",
iconLeft: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCircle.XCircleIcon, {}),
children: [
incorrect_answers,
" Incorretas"
]
}
)
] })
]
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CaretRight.CaretRightIcon, { className: "min-w-6 min-h-6 text-text-800" })
] })
]
}
);
}
);
var CardStatus = _react.forwardRef.call(void 0,
({ 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__ */ _jsxruntime.jsx.call(void 0, _CheckCircle.CheckCircleIcon, {});
case "incorrect":
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCircle.XCircleIcon, {});
case "pending":
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Clock.ClockIcon, {});
default:
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCircle.XCircleIcon, {});
}
};
const getActionBadge = (status2) => {
switch (status2) {
case "correct":
return "success";
case "incorrect":
return "error";
case "pending":
return "info";
default:
return "info";
}
};
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "medium",
className: _chunkTN3AYOMVjs.cn.call(void 0, "items-center cursor-pointer", className),
...props,
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex justify-between w-full h-full flex-row items-center gap-2", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex flex-row gap-1 items-center flex-shrink-0", children: [
status && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkBJMKBBN3js.Badge_default,
{
action: getActionBadge(status),
variant: "solid",
size: "medium",
iconLeft: getIconBadge(status),
children: getLabelBadge(status)
}
),
label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-text-800", children: label })
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CaretRight.CaretRightIcon, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer flex-shrink-0 ml-2" })
] })
}
);
}
);
var CardSettings = _react.forwardRef.call(void 0,
({ header, className, icon, ...props }, ref) => {
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
CardBase,
{
ref,
layout: "horizontal",
padding: "small",
minHeight: "none",
className: _chunkTN3AYOMVjs.cn.call(void 0,
"border-none items-center gap-2 text-text-700",
className
),
...props,
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "[&>svg]:size-6", children: icon }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "w-full text-sm truncate", children: header }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CaretRight.CaretRightIcon, { size: 24, className: "cursor-pointer" })
]
}
);
}
);
var CardSupport = _react.forwardRef.call(void 0,
({ header, className, direction = "col", children, ...props }, ref) => {
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "none",
className: _chunkTN3AYOMVjs.cn.call(void 0,
"border-none items-center gap-2 text-text-700",
className
),
...props,
children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"w-full flex",
direction == "col" ? "flex-col" : "flex-row items-center"
),
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-full min-w-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-text-950 font-bold truncate", children: header }) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex flex-row gap-1", children })
]
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CaretRight.CaretRightIcon, { className: "text-text-800 cursor-pointer", size: 24 })
]
}
);
}
);
var CardForum = _react.forwardRef.call(void 0,
({
title,
content,
comments,
onClickComments,
valueComments,
onClickProfile,
valueProfile,
className = "",
date,
hour,
...props
}, ref) => {
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "none",
variant: "minimal",
className: _chunkTN3AYOMVjs.cn.call(void 0, "w-auto h-auto gap-3", className),
...props,
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"button",
{
type: "button",
"aria-label": "Ver perfil",
onClick: () => _optionalChain([onClickProfile, 'optionalCall', _5 => _5(valueProfile)]),
className: "min-w-8 h-8 rounded-full bg-background-950"
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-row gap-1 items-center flex-wrap", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs font-semibold text-primary-700 truncate", children: title }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-xs text-text-600", children: [
"\u2022 ",
date,
" \u2022 ",
hour
] })
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-text-950 text-sm line-clamp-2 truncate", children: content }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"button",
{
type: "button",
"aria-label": "Ver coment\xE1rios",
onClick: () => _optionalChain([onClickComments, 'optionalCall', _6 => _6(valueComments)]),
className: "text-text-600 flex flex-row gap-2 items-center",
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ChatCircleText.ChatCircleTextIcon, { "aria-hidden": "true", size: 16 }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-xs", children: [
comments,
" respostas"
] })
]
}
)
] })
]
}
);
}
);
var CardAudio = _react.forwardRef.call(void 0,
({
src,
title,
onPlay,
onPause,
onEnded,
onAudioTimeUpdate,
loop = false,
preload = "metadata",
tracks,
className,
...props
}, ref) => {
const [isPlaying, setIsPlaying] = _react.useState.call(void 0, false);
const [currentTime, setCurrentTime] = _react.useState.call(void 0, 0);
const [duration, setDuration] = _react.useState.call(void 0, 0);
const [volume, setVolume] = _react.useState.call(void 0, 1);
const [showVolumeControl, setShowVolumeControl] = _react.useState.call(void 0, false);
const [showSpeedMenu, setShowSpeedMenu] = _react.useState.call(void 0, false);
const [playbackRate, setPlaybackRate] = _react.useState.call(void 0, 1);
const audioRef = _react.useRef.call(void 0, null);
const volumeControlRef = _react.useRef.call(void 0, null);
const speedMenuRef = _react.useRef.call(void 0, 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) {
_optionalChain([audioRef, 'access', _7 => _7.current, 'optionalAccess', _8 => _8.pause, 'call', _9 => _9()]);
setIsPlaying(false);
_optionalChain([onPause, 'optionalCall', _10 => _10()]);
} else {
_optionalChain([audioRef, 'access', _11 => _11.current, 'optionalAccess', _12 => _12.play, 'call', _13 => _13(), 'optionalAccess', _14 => _14.catch, 'call', _15 => _15(() => {
})]);
setIsPlaying(true);
_optionalChain([onPlay, 'optionalCall', _16 => _16()]);
}
};
const handleTimeUpdate = () => {
const current = _nullishCoalesce(_optionalChain([audioRef, 'access', _17 => _17.current, 'optionalAccess', _18 => _18.currentTime]), () => ( 0));
const total = _nullishCoalesce(_optionalChain([audioRef, 'access', _19 => _19.current, 'optionalAccess', _20 => _20.duration]), () => ( 0));
setCurrentTime(current);
setDuration(total);
_optionalChain([onAudioTimeUpdate, 'optionalCall', _21 => _21(current, total)]);
};
const handleLoadedMetadata = () => {
setDuration(_nullishCoalesce(_optionalChain([audioRef, 'access', _22 => _22.current, 'optionalAccess', _23 => _23.duration]), () => ( 0)));
};
const handleEnded = () => {
setIsPlaying(false);
setCurrentTime(0);
_optionalChain([onEnded, 'optionalCall', _24 => _24()]);
};
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 && Number.isFinite(newTime)) {
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__ */ _jsxruntime.jsx.call(void 0, _SpeakerSimpleX.SpeakerSimpleXIcon, { size: 24 });
}
if (volume < 0.5) {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SpeakerLow.SpeakerLowIcon, { size: 24 });
}
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SpeakerHigh.SpeakerHighIcon, { size: 24 });
};
_react.useEffect.call(void 0, () => {
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__ */ _jsxruntime.jsxs.call(void 0,
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "none",
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex flex-row w-auto h-14 items-center gap-2",
className
),
...props,
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"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__ */ _jsxruntime.jsx.call(void 0,
"track",
{
kind: track.kind,
src: track.src,
srcLang: track.srcLang,
label: track.label,
default: track.default
},
track.src
)) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"track",
{
kind: "captions",
src: "data:text/vtt;base64,",
srcLang: "pt",
label: "Sem legendas dispon\xEDveis"
}
)
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-0.5", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-1 h-4 bg-current rounded-sm" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-1 h-4 bg-current rounded-sm" })
] }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Play.PlayIcon, { size: 24 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-text-800 text-md font-medium min-w-[2.5rem]", children: formatTime(currentTime) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 relative", "data-testid": "progress-bar", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"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();
e.currentTarget.click();
}
},
"aria-label": "Barra de progresso do \xE1udio",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: "h-full bg-primary-600 rounded-full transition-all duration-100",
style: {
width: duration > 0 ? `${currentTime / duration * 100}%` : "0%"
}
}
)
}
) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-text-800 text-md font-medium min-w-[2.5rem]", children: formatTime(duration) }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative h-6", ref: volumeControlRef, children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"button",
{
type: "button",
onClick: toggleVolumeControl,
className: "cursor-pointer text-text-950 hover:text-primary-600",
"aria-label": "Controle de volume",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 flex items-center justify-center", children: getVolumeIcon() })
}
),
showVolumeControl && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"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__ */ _jsxruntime.jsx.call(void 0,
"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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative h-6", ref: speedMenuRef, children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"button",
{
type: "button",
onClick: toggleSpeedMenu,
className: "cursor-pointer text-text-950 hover:text-primary-600",
"aria-label": "Op\xE7\xF5es de velocidade",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _DotsThreeVertical.DotsThreeVerticalIcon, { size: 24 })
}
),
showSpeedMenu && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0,
"button",
{
type: "button",
onClick: () => handleSpeedChange(speed),
className: _chunkTN3AYOMVjs.cn.call(void 0,
"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 = _react.forwardRef.call(void 0,
({
title,
duration,
info,
backgroundColor,
comingSoon = false,
disabled = false,
className,
onClick,
onKeyDown,
...props
}, ref) => {
const backgroundClass = SIMULADO_BACKGROUND_CLASSES[backgroundColor];
const isInteractive = !comingSoon && !disabled;
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
CardBase,
{
ref,
layout: "horizontal",
padding: "medium",
minHeight: "none",
cursor: isInteractive ? "pointer" : "default",
"aria-disabled": isInteractive ? void 0 : true,
onClick: isInteractive ? onClick : void 0,
onKeyDown: isInteractive ? onKeyDown : void 0,
className: _chunkTN3AYOMVjs.cn.call(void 0,
backgroundClass,
isInteractive ? "hover:shadow-soft-shadow-2 transition-shadow duration-200" : "opacity-60 pointer-events-none",
className
),
...props,
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex justify-between items-center w-full gap-4", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
comingSoon ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 min-w-0", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "lg",
weight: "bold",
className: "text-text-950 truncate",
children: title
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkBJMKBBN3js.Badge_default,
{
size: "small",
variant: "solid",
action: "info",
className: "flex-shrink-0",
"data-testid": "badge-em-breve",
children: "Em breve"
}
)
] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "lg", weight: "bold", className: "text-text-950 truncate", children: title }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-4 text-text-700", children: [
duration && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Clock.ClockIcon, { size: 16, className: "flex-shrink-0" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "sm", children: duration })
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkANT66KVKjs.Text_default, { size: "sm", className: "truncate", children: info })
] })
] }),
isInteractive && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_CaretRight.CaretRightIcon,
{
size: 24,
className: "text-text-800 flex-shrink-0",
"data-testid": "caret-icon"
}
)
] })
}
);
}
);
var CardTest = _react.forwardRef.call(void 0,
({
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__ */ _jsxruntime.jsx.call(void 0,
"button",
{
ref,
type: "button",
className: _chunkTN3AYOMVjs.cn.call(void 0,
`${baseClasses} ${interactiveClasses} ${selectedClasses} ${className}`.trim()
),
onClick: handleClick,
onKeyDown: handleKeyDown,
"aria-pressed": selected,
...props,
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col justify-between gap-[27px] flex-grow min-h-[67px] w-full min-w-0", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "md",
weight: "bold",
className: "text-text-950 tracking-[0.2px] leading-[19px] truncate",
children: title
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-row justify-start items-end gap-4 w-full", children: [
duration && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-row items-center gap-1 flex-shrink-0", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Clock.ClockIcon, { size: 16, className: "text-text-700" }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "sm",
className: "text-text-700 leading-[21px] whitespace-nowrap",
children: duration
}
)
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "sm",
className: "text-text-700 leading-[21px] flex-grow truncate",
children: displayInfo
}
)
] })
] })
}
);
}
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
ref,
className: _chunkTN3AYOMVjs.cn.call(void 0, `${baseClasses} ${className}`.trim()),
...props,
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col justify-between gap-[27px] flex-grow min-h-[67px] w-full min-w-0", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkANT66KVKjs.Text_default,
{
size: "md",
weight: "bold",
className: "text-text-950 tracking-[0.2px] leading-[19px] truncate",
children: title
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-row justify-start items-end gap-4 w-full", children: [
duration && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-row items-center gap-1 flex-shrink-0", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Clock.ClockIcon, { size: 16, className: "text-text-700" }),