analytica-frontend-lib 1.2.80 → 1.2.81

package/dist/QuestionsData/index.d.ts

@@ -0,0 +1,50 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Data structure for questions statistics
+ */
+export interface QuestionsDataItem {
+    /** Total number of questions answered */
+    total: number;
+    /** Number of correct answers */
+    corretas: number;
+    /** Number of incorrect answers */
+    incorretas: number;
+    /** Number of blank (unanswered) questions */
+    emBranco?: number;
+}
+/**
+ * Props for the QuestionsData component
+ */
+export interface QuestionsDataProps extends HTMLAttributes<HTMLDivElement> {
+    /** Card title */
+    title?: string;
+    /** Question statistics data */
+    data: QuestionsDataItem;
+    /** Whether to show blank questions bar */
+    showEmBranco?: boolean;
+    /** Maximum value for the chart scale (defaults to total) */
+    maxValue?: number;
+    /** Height of the chart area in pixels */
+    chartHeight?: number;
+}
+/**
+ * QuestionsData component - displays a vertical bar chart showing
+ * question statistics (total, correct, incorrect, and optionally blank).
+ *
+ * @example
+ * ```tsx
+ * <QuestionsData
+ *   title="Dados de questões"
+ *   data={{
+ *     total: 120,
+ *     corretas: 80,
+ *     incorretas: 30,
+ *     emBranco: 10,
+ *   }}
+ *   showEmBranco
+ * />
+ * ```
+ */
+export declare const QuestionsData: ({ title, data, showEmBranco, maxValue, chartHeight, className, ...props }: QuestionsDataProps) => import("react/jsx-runtime").JSX.Element;
+export default QuestionsData;
+//# sourceMappingURL=QuestionsData.d.ts.map

package/dist/QuestionsData/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionsData.d.ts","sourceRoot":"","sources":["../../../src/components/QuestionsData/QuestionsData.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,IAAI,EAAE,iBAAiB,CAAC;IACxB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAwJD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,aAAa,GAAI,2EAQ3B,kBAAkB,4CA8GpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/QuestionsData/index.js

@@ -0,0 +1,281 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/QuestionsData/QuestionsData.tsx
+var QuestionsData_exports = {};
+__export(QuestionsData_exports, {
+  QuestionsData: () => QuestionsData,
+  default: () => QuestionsData_default
+});
+module.exports = __toCommonJS(QuestionsData_exports);
+
+// src/utils/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/Text/Text.tsx
+var import_jsx_runtime = 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_runtime.jsx)(
+    Component,
+    {
+      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
+      ...props,
+      children
+    }
+  );
+};
+var Text_default = Text;
+
+// src/components/QuestionsData/QuestionsData.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var BAR_COLORS = {
+  total: "bg-info-600",
+  corretas: "bg-success-200",
+  incorretas: "bg-warning-400",
+  emBranco: "bg-background-300"
+};
+var calculateYAxisTicks = (maxValue) => {
+  if (maxValue <= 0) return [0];
+  const niceMax = Math.ceil(maxValue / 10) * 10;
+  const step = niceMax / 4;
+  return [
+    niceMax,
+    Math.round(step * 3),
+    Math.round(step * 2),
+    Math.round(step),
+    0
+  ];
+};
+var LegendItem = ({ color, label }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("w-2 h-2 rounded-full", color) }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text_default, { size: "xs", weight: "medium", className: "text-text-600", children: label })
+] });
+var DataBar = ({
+  label,
+  value,
+  maxValue,
+  colorClass,
+  chartHeight
+}) => {
+  const percentage = maxValue === 0 ? 0 : value / maxValue * 100;
+  const barHeight = percentage / 100 * chartHeight;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col items-center gap-2 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "w-full flex items-end justify-center",
+        style: { height: chartHeight },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: cn(
+              "w-16 rounded-lg transition-all duration-300",
+              colorClass
+            ),
+            style: { height: `${barHeight}px` }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text_default, { size: "xs", weight: "medium", className: "text-text-600 text-center", children: label })
+  ] });
+};
+var GridLines = ({
+  ticks,
+  chartHeight
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: "absolute inset-0 flex flex-col justify-between pointer-events-none",
+      style: { height: chartHeight },
+      children: ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: "w-full border-t border-dashed border-border-200",
+          style: { marginTop: index === 0 ? 0 : void 0 }
+        },
+        `${tick}-${index}`
+      ))
+    }
+  );
+};
+var YAxis = ({
+  ticks,
+  chartHeight
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "div",
+  {
+    className: "flex flex-col justify-between items-end pr-3",
+    style: { height: chartHeight },
+    "aria-hidden": "true",
+    children: ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Text_default,
+      {
+        size: "xs",
+        weight: "medium",
+        className: "text-text-500",
+        children: tick
+      },
+      `${tick}-${index}`
+    ))
+  }
+);
+var QuestionsData = ({
+  title = "Dados de quest\xF5es",
+  data,
+  showEmBranco = false,
+  maxValue,
+  chartHeight = 180,
+  className,
+  ...props
+}) => {
+  const chartMaxValue = maxValue ?? data.total;
+  const yAxisTicks = calculateYAxisTicks(chartMaxValue);
+  const adjustedMaxValue = yAxisTicks[0];
+  const blankSuffix = showEmBranco && data.emBranco !== void 0 ? `, ${data.emBranco} em branco` : "";
+  const chartDescription = `Gr\xE1fico de barras mostrando ${data.total} quest\xF5es respondidas, ${data.corretas} corretas, ${data.incorretas} incorretas${blankSuffix}`;
+  const barItems = [
+    {
+      key: "total",
+      label: "Total",
+      legendLabel: "Total de quest\xF5es respondidas",
+      value: data.total,
+      colorClass: BAR_COLORS.total
+    },
+    {
+      key: "corretas",
+      label: "Corretas",
+      legendLabel: "Quest\xF5es corretas",
+      value: data.corretas,
+      colorClass: BAR_COLORS.corretas
+    },
+    {
+      key: "incorretas",
+      label: "Incorretas",
+      legendLabel: "Quest\xF5es incorretas",
+      value: data.incorretas,
+      colorClass: BAR_COLORS.incorretas
+    }
+  ];
+  if (showEmBranco && data.emBranco !== void 0) {
+    barItems.push({
+      key: "emBranco",
+      label: "Em branco",
+      legendLabel: "Quest\xF5es em branco",
+      value: data.emBranco,
+      colorClass: BAR_COLORS.emBranco
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col p-5 gap-4 bg-background border border-border-50 rounded-xl",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Text_default,
+          {
+            as: "h3",
+            size: "lg",
+            weight: "bold",
+            className: "text-text-950 tracking-[0.2px]",
+            children: title
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-row flex-wrap gap-x-6 gap-y-2 mb-4", children: barItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          LegendItem,
+          {
+            color: BAR_COLORS[item.key],
+            label: item.legendLabel
+          },
+          item.key
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-row", "aria-label": chartDescription, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(YAxis, { ticks: yAxisTicks, chartHeight }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-1 relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GridLines, { ticks: yAxisTicks, chartHeight }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-row flex-1 gap-4 relative z-10", children: barItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              DataBar,
+              {
+                label: item.label,
+                value: item.value,
+                maxValue: adjustedMaxValue,
+                colorClass: item.colorClass,
+                chartHeight
+              },
+              item.key
+            )) })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var QuestionsData_default = QuestionsData;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  QuestionsData
+});
+//# sourceMappingURL=index.js.map

package/dist/QuestionsData/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/QuestionsData/QuestionsData.tsx","../../src/utils/utils.ts","../../src/components/Text/Text.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\n\n/**\n * Data structure for questions statistics\n */\nexport interface QuestionsDataItem {\n  /** Total number of questions answered */\n  total: number;\n  /** Number of correct answers */\n  corretas: number;\n  /** Number of incorrect answers */\n  incorretas: number;\n  /** Number of blank (unanswered) questions */\n  emBranco?: number;\n}\n\n/**\n * Props for the QuestionsData component\n */\nexport interface QuestionsDataProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card title */\n  title?: string;\n  /** Question statistics data */\n  data: QuestionsDataItem;\n  /** Whether to show blank questions bar */\n  showEmBranco?: boolean;\n  /** Maximum value for the chart scale (defaults to total) */\n  maxValue?: number;\n  /** Height of the chart area in pixels */\n  chartHeight?: number;\n}\n\n/**\n * Bar item configuration\n */\ninterface BarItemConfig {\n  key: string;\n  label: string;\n  legendLabel: string;\n  value: number;\n  colorClass: string;\n}\n\n/**\n * Color classes for bars and legend dots using design system tokens\n */\nconst BAR_COLORS = {\n  total: 'bg-info-600',\n  corretas: 'bg-success-200',\n  incorretas: 'bg-warning-400',\n  emBranco: 'bg-background-300',\n} as const;\n\n/**\n * Calculate Y-axis tick values based on max value\n */\nconst calculateYAxisTicks = (maxValue: number): number[] => {\n  if (maxValue <= 0) return [0];\n\n  // Round up to nearest \"nice\" number for the max tick\n  const niceMax = Math.ceil(maxValue / 10) * 10;\n\n  // Generate 5 ticks including 0 and max\n  const step = niceMax / 4;\n  return [\n    niceMax,\n    Math.round(step * 3),\n    Math.round(step * 2),\n    Math.round(step),\n    0,\n  ];\n};\n\n/**\n * Legend item component\n */\nconst LegendItem = ({ color, label }: { color: string; label: string }) => (\n  <div className=\"flex flex-row items-center gap-2\">\n    <div className={cn('w-2 h-2 rounded-full', color)} />\n    <Text size=\"xs\" weight=\"medium\" className=\"text-text-600\">\n      {label}\n    </Text>\n  </div>\n);\n\n/**\n * Individual vertical bar component\n */\nconst DataBar = ({\n  label,\n  value,\n  maxValue,\n  colorClass,\n  chartHeight,\n}: {\n  label: string;\n  value: number;\n  maxValue: number;\n  colorClass: string;\n  chartHeight: number;\n}) => {\n  const percentage = maxValue === 0 ? 0 : (value / maxValue) * 100;\n  const barHeight = (percentage / 100) * chartHeight;\n\n  return (\n    <div className=\"flex flex-col items-center gap-2 flex-1\">\n      {/* Bar container */}\n      <div\n        className=\"w-full flex items-end justify-center\"\n        style={{ height: chartHeight }}\n      >\n        <div\n          className={cn(\n            'w-16 rounded-lg transition-all duration-300',\n            colorClass\n          )}\n          style={{ height: `${barHeight}px` }}\n        />\n      </div>\n\n      {/* Label */}\n      <Text size=\"xs\" weight=\"medium\" className=\"text-text-600 text-center\">\n        {label}\n      </Text>\n    </div>\n  );\n};\n\n/**\n * Grid lines component for the chart background\n */\nconst GridLines = ({\n  ticks,\n  chartHeight,\n}: {\n  ticks: number[];\n  chartHeight: number;\n}) => {\n  return (\n    <div\n      className=\"absolute inset-0 flex flex-col justify-between pointer-events-none\"\n      style={{ height: chartHeight }}\n    >\n      {ticks.map((tick, index) => (\n        <div\n          key={`${tick}-${index}`}\n          className=\"w-full border-t border-dashed border-border-200\"\n          style={{ marginTop: index === 0 ? 0 : undefined }}\n        />\n      ))}\n    </div>\n  );\n};\n\n/**\n * Y-Axis component\n */\nconst YAxis = ({\n  ticks,\n  chartHeight,\n}: {\n  ticks: number[];\n  chartHeight: number;\n}) => (\n  <div\n    className=\"flex flex-col justify-between items-end pr-3\"\n    style={{ height: chartHeight }}\n    aria-hidden=\"true\"\n  >\n    {ticks.map((tick, index) => (\n      <Text\n        key={`${tick}-${index}`}\n        size=\"xs\"\n        weight=\"medium\"\n        className=\"text-text-500\"\n      >\n        {tick}\n      </Text>\n    ))}\n  </div>\n);\n\n/**\n * QuestionsData component - displays a vertical bar chart showing\n * question statistics (total, correct, incorrect, and optionally blank).\n *\n * @example\n * ```tsx\n * <QuestionsData\n *   title=\"Dados de questões\"\n *   data={{\n *     total: 120,\n *     corretas: 80,\n *     incorretas: 30,\n *     emBranco: 10,\n *   }}\n *   showEmBranco\n * />\n * ```\n */\nexport const QuestionsData = ({\n  title = 'Dados de questões',\n  data,\n  showEmBranco = false,\n  maxValue,\n  chartHeight = 180,\n  className,\n  ...props\n}: QuestionsDataProps) => {\n  // Calculate the maximum value for the scale\n  const chartMaxValue = maxValue ?? data.total;\n\n  // Calculate Y-axis ticks\n  const yAxisTicks = calculateYAxisTicks(chartMaxValue);\n  const adjustedMaxValue = yAxisTicks[0]; // Use the nice max for calculations\n\n  // Build accessible chart description\n  const blankSuffix =\n    showEmBranco && data.emBranco !== undefined\n      ? `, ${data.emBranco} em branco`\n      : '';\n  const chartDescription = `Gráfico de barras mostrando ${data.total} questões respondidas, ${data.corretas} corretas, ${data.incorretas} incorretas${blankSuffix}`;\n\n  // Build bar items configuration\n  const barItems: BarItemConfig[] = [\n    {\n      key: 'total',\n      label: 'Total',\n      legendLabel: 'Total de questões respondidas',\n      value: data.total,\n      colorClass: BAR_COLORS.total,\n    },\n    {\n      key: 'corretas',\n      label: 'Corretas',\n      legendLabel: 'Questões corretas',\n      value: data.corretas,\n      colorClass: BAR_COLORS.corretas,\n    },\n    {\n      key: 'incorretas',\n      label: 'Incorretas',\n      legendLabel: 'Questões incorretas',\n      value: data.incorretas,\n      colorClass: BAR_COLORS.incorretas,\n    },\n  ];\n\n  // Add blank questions bar if enabled\n  if (showEmBranco && data.emBranco !== undefined) {\n    barItems.push({\n      key: 'emBranco',\n      label: 'Em branco',\n      legendLabel: 'Questões em branco',\n      value: data.emBranco,\n      colorClass: BAR_COLORS.emBranco,\n    });\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col p-5 gap-4 bg-background border border-border-50 rounded-xl',\n        className\n      )}\n      {...props}\n    >\n      {/* Header */}\n      <Text\n        as=\"h3\"\n        size=\"lg\"\n        weight=\"bold\"\n        className=\"text-text-950 tracking-[0.2px]\"\n      >\n        {title}\n      </Text>\n\n      {/* Legend */}\n      <div className=\"flex flex-row flex-wrap gap-x-6 gap-y-2 mb-4\">\n        {barItems.map((item) => (\n          <LegendItem\n            key={item.key}\n            color={BAR_COLORS[item.key as keyof typeof BAR_COLORS]}\n            label={item.legendLabel}\n          />\n        ))}\n      </div>\n\n      {/* Chart */}\n      <div className=\"flex flex-row\" aria-label={chartDescription}>\n        {/* Y-Axis */}\n        <YAxis ticks={yAxisTicks} chartHeight={chartHeight} />\n\n        {/* Spacer between Y-axis and chart */}\n        <div className=\"w-4\" />\n\n        {/* Chart area with grid and bars */}\n        <div className=\"flex-1 relative\">\n          {/* Grid lines */}\n          <GridLines ticks={yAxisTicks} chartHeight={chartHeight} />\n\n          {/* Bars */}\n          <div className=\"flex flex-row flex-1 gap-4 relative z-10\">\n            {barItems.map((item) => (\n              <DataBar\n                key={item.key}\n                label={item.label}\n                value={item.value}\n                maxValue={adjustedMaxValue}\n                colorClass={item.colorClass}\n                chartHeight={chartHeight}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default QuestionsData;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\nexport {\n  getSelectedIdsFromCategories,\n  toggleArrayItem,\n  toggleSingleValue,\n  areFiltersEqual,\n} from './activityFilters';\nexport {\n  mapQuestionTypeToEnum,\n  mapQuestionTypeToEnumRequired,\n} from './questionTypeUtils';\nexport {\n  getStatusBadgeConfig,\n  formatTimeSpent,\n  formatQuestionNumbers,\n  formatDateToBrazilian,\n} from './activityDetailsUtils';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n  hexColor: string | undefined,\n  isDark: boolean\n): string | undefined {\n  if (!hexColor) return undefined;\n  // Remove o '#' se existir\n  let color = hexColor.replace(/^#/, '').toLowerCase();\n\n  if (isDark) {\n    // Se está em dark mode, sempre remove opacidade se existir\n    if (color.length === 8) {\n      color = color.slice(0, 6);\n    }\n    return `#${color}`;\n  } else {\n    // Se não está em dark mode (light mode)\n    let resultColor: string;\n    if (color.length === 6) {\n      // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n      resultColor = `#${color}4d`;\n    } else if (color.length === 8) {\n      // Já tem opacidade, retorna como está\n      resultColor = `#${color}`;\n    } else {\n      // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n      resultColor = `#${color}`;\n    }\n    return resultColor;\n  }\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n"],"mappings":"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","names":["import_jsx_runtime"]}

package/dist/QuestionsData/index.mjs

@@ -0,0 +1,254 @@
+// src/utils/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/Text/Text.tsx
+import { jsx } from "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__ */ jsx(
+    Component,
+    {
+      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
+      ...props,
+      children
+    }
+  );
+};
+var Text_default = Text;
+
+// src/components/QuestionsData/QuestionsData.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var BAR_COLORS = {
+  total: "bg-info-600",
+  corretas: "bg-success-200",
+  incorretas: "bg-warning-400",
+  emBranco: "bg-background-300"
+};
+var calculateYAxisTicks = (maxValue) => {
+  if (maxValue <= 0) return [0];
+  const niceMax = Math.ceil(maxValue / 10) * 10;
+  const step = niceMax / 4;
+  return [
+    niceMax,
+    Math.round(step * 3),
+    Math.round(step * 2),
+    Math.round(step),
+    0
+  ];
+};
+var LegendItem = ({ color, label }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2", children: [
+  /* @__PURE__ */ jsx2("div", { className: cn("w-2 h-2 rounded-full", color) }),
+  /* @__PURE__ */ jsx2(Text_default, { size: "xs", weight: "medium", className: "text-text-600", children: label })
+] });
+var DataBar = ({
+  label,
+  value,
+  maxValue,
+  colorClass,
+  chartHeight
+}) => {
+  const percentage = maxValue === 0 ? 0 : value / maxValue * 100;
+  const barHeight = percentage / 100 * chartHeight;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 flex-1", children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "w-full flex items-end justify-center",
+        style: { height: chartHeight },
+        children: /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              "w-16 rounded-lg transition-all duration-300",
+              colorClass
+            ),
+            style: { height: `${barHeight}px` }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx2(Text_default, { size: "xs", weight: "medium", className: "text-text-600 text-center", children: label })
+  ] });
+};
+var GridLines = ({
+  ticks,
+  chartHeight
+}) => {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "absolute inset-0 flex flex-col justify-between pointer-events-none",
+      style: { height: chartHeight },
+      children: ticks.map((tick, index) => /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "w-full border-t border-dashed border-border-200",
+          style: { marginTop: index === 0 ? 0 : void 0 }
+        },
+        `${tick}-${index}`
+      ))
+    }
+  );
+};
+var YAxis = ({
+  ticks,
+  chartHeight
+}) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    className: "flex flex-col justify-between items-end pr-3",
+    style: { height: chartHeight },
+    "aria-hidden": "true",
+    children: ticks.map((tick, index) => /* @__PURE__ */ jsx2(
+      Text_default,
+      {
+        size: "xs",
+        weight: "medium",
+        className: "text-text-500",
+        children: tick
+      },
+      `${tick}-${index}`
+    ))
+  }
+);
+var QuestionsData = ({
+  title = "Dados de quest\xF5es",
+  data,
+  showEmBranco = false,
+  maxValue,
+  chartHeight = 180,
+  className,
+  ...props
+}) => {
+  const chartMaxValue = maxValue ?? data.total;
+  const yAxisTicks = calculateYAxisTicks(chartMaxValue);
+  const adjustedMaxValue = yAxisTicks[0];
+  const blankSuffix = showEmBranco && data.emBranco !== void 0 ? `, ${data.emBranco} em branco` : "";
+  const chartDescription = `Gr\xE1fico de barras mostrando ${data.total} quest\xF5es respondidas, ${data.corretas} corretas, ${data.incorretas} incorretas${blankSuffix}`;
+  const barItems = [
+    {
+      key: "total",
+      label: "Total",
+      legendLabel: "Total de quest\xF5es respondidas",
+      value: data.total,
+      colorClass: BAR_COLORS.total
+    },
+    {
+      key: "corretas",
+      label: "Corretas",
+      legendLabel: "Quest\xF5es corretas",
+      value: data.corretas,
+      colorClass: BAR_COLORS.corretas
+    },
+    {
+      key: "incorretas",
+      label: "Incorretas",
+      legendLabel: "Quest\xF5es incorretas",
+      value: data.incorretas,
+      colorClass: BAR_COLORS.incorretas
+    }
+  ];
+  if (showEmBranco && data.emBranco !== void 0) {
+    barItems.push({
+      key: "emBranco",
+      label: "Em branco",
+      legendLabel: "Quest\xF5es em branco",
+      value: data.emBranco,
+      colorClass: BAR_COLORS.emBranco
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col p-5 gap-4 bg-background border border-border-50 rounded-xl",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(
+          Text_default,
+          {
+            as: "h3",
+            size: "lg",
+            weight: "bold",
+            className: "text-text-950 tracking-[0.2px]",
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { className: "flex flex-row flex-wrap gap-x-6 gap-y-2 mb-4", children: barItems.map((item) => /* @__PURE__ */ jsx2(
+          LegendItem,
+          {
+            color: BAR_COLORS[item.key],
+            label: item.legendLabel
+          },
+          item.key
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row", "aria-label": chartDescription, children: [
+          /* @__PURE__ */ jsx2(YAxis, { ticks: yAxisTicks, chartHeight }),
+          /* @__PURE__ */ jsx2("div", { className: "w-4" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
+            /* @__PURE__ */ jsx2(GridLines, { ticks: yAxisTicks, chartHeight }),
+            /* @__PURE__ */ jsx2("div", { className: "flex flex-row flex-1 gap-4 relative z-10", children: barItems.map((item) => /* @__PURE__ */ jsx2(
+              DataBar,
+              {
+                label: item.label,
+                value: item.value,
+                maxValue: adjustedMaxValue,
+                colorClass: item.colorClass,
+                chartHeight
+              },
+              item.key
+            )) })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var QuestionsData_default = QuestionsData;
+export {
+  QuestionsData,
+  QuestionsData_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/QuestionsData/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/utils.ts","../../src/components/Text/Text.tsx","../../src/components/QuestionsData/QuestionsData.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\nexport {\n  getSelectedIdsFromCategories,\n  toggleArrayItem,\n  toggleSingleValue,\n  areFiltersEqual,\n} from './activityFilters';\nexport {\n  mapQuestionTypeToEnum,\n  mapQuestionTypeToEnumRequired,\n} from './questionTypeUtils';\nexport {\n  getStatusBadgeConfig,\n  formatTimeSpent,\n  formatQuestionNumbers,\n  formatDateToBrazilian,\n} from './activityDetailsUtils';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n  hexColor: string | undefined,\n  isDark: boolean\n): string | undefined {\n  if (!hexColor) return undefined;\n  // Remove o '#' se existir\n  let color = hexColor.replace(/^#/, '').toLowerCase();\n\n  if (isDark) {\n    // Se está em dark mode, sempre remove opacidade se existir\n    if (color.length === 8) {\n      color = color.slice(0, 6);\n    }\n    return `#${color}`;\n  } else {\n    // Se não está em dark mode (light mode)\n    let resultColor: string;\n    if (color.length === 6) {\n      // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n      resultColor = `#${color}4d`;\n    } else if (color.length === 8) {\n      // Já tem opacidade, retorna como está\n      resultColor = `#${color}`;\n    } else {\n      // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n      resultColor = `#${color}`;\n    }\n    return resultColor;\n  }\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n  /** Content to be displayed */\n  children?: ReactNode;\n  /** Text size variant */\n  size?:\n    | '2xs'\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl';\n  /** Font weight variant */\n  weight?:\n    | 'hairline'\n    | 'light'\n    | 'normal'\n    | 'medium'\n    | 'semibold'\n    | 'bold'\n    | 'extrabold'\n    | 'black';\n  /** Color variant - white for light backgrounds, black for dark backgrounds */\n  color?: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n  /** HTML tag to render */\n  as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n *   This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n *   Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n *   Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n  children,\n  size = 'md',\n  weight = 'normal',\n  color = 'text-text-950',\n  as,\n  className = '',\n  ...props\n}: TextProps<T>) => {\n  let sizeClasses = '';\n  let weightClasses = '';\n\n  // Text size classes mapping\n  const sizeClassMap = {\n    '2xs': 'text-2xs',\n    xs: 'text-xs',\n    sm: 'text-sm',\n    md: 'text-md',\n    lg: 'text-lg',\n    xl: 'text-xl',\n    '2xl': 'text-2xl',\n    '3xl': 'text-3xl',\n    '4xl': 'text-4xl',\n    '5xl': 'text-5xl',\n    '6xl': 'text-6xl',\n  } as const;\n\n  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n  // Font weight classes mapping\n  const weightClassMap = {\n    hairline: 'font-hairline',\n    light: 'font-light',\n    normal: 'font-normal',\n    medium: 'font-medium',\n    semibold: 'font-semibold',\n    bold: 'font-bold',\n    extrabold: 'font-extrabold',\n    black: 'font-black',\n  } as const;\n\n  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n  const baseClasses = 'font-primary';\n  const Component = as ?? ('p' as ElementType);\n\n  return (\n    <Component\n      className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Text;\n","import { HTMLAttributes } from 'react';\nimport Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\n\n/**\n * Data structure for questions statistics\n */\nexport interface QuestionsDataItem {\n  /** Total number of questions answered */\n  total: number;\n  /** Number of correct answers */\n  corretas: number;\n  /** Number of incorrect answers */\n  incorretas: number;\n  /** Number of blank (unanswered) questions */\n  emBranco?: number;\n}\n\n/**\n * Props for the QuestionsData component\n */\nexport interface QuestionsDataProps extends HTMLAttributes<HTMLDivElement> {\n  /** Card title */\n  title?: string;\n  /** Question statistics data */\n  data: QuestionsDataItem;\n  /** Whether to show blank questions bar */\n  showEmBranco?: boolean;\n  /** Maximum value for the chart scale (defaults to total) */\n  maxValue?: number;\n  /** Height of the chart area in pixels */\n  chartHeight?: number;\n}\n\n/**\n * Bar item configuration\n */\ninterface BarItemConfig {\n  key: string;\n  label: string;\n  legendLabel: string;\n  value: number;\n  colorClass: string;\n}\n\n/**\n * Color classes for bars and legend dots using design system tokens\n */\nconst BAR_COLORS = {\n  total: 'bg-info-600',\n  corretas: 'bg-success-200',\n  incorretas: 'bg-warning-400',\n  emBranco: 'bg-background-300',\n} as const;\n\n/**\n * Calculate Y-axis tick values based on max value\n */\nconst calculateYAxisTicks = (maxValue: number): number[] => {\n  if (maxValue <= 0) return [0];\n\n  // Round up to nearest \"nice\" number for the max tick\n  const niceMax = Math.ceil(maxValue / 10) * 10;\n\n  // Generate 5 ticks including 0 and max\n  const step = niceMax / 4;\n  return [\n    niceMax,\n    Math.round(step * 3),\n    Math.round(step * 2),\n    Math.round(step),\n    0,\n  ];\n};\n\n/**\n * Legend item component\n */\nconst LegendItem = ({ color, label }: { color: string; label: string }) => (\n  <div className=\"flex flex-row items-center gap-2\">\n    <div className={cn('w-2 h-2 rounded-full', color)} />\n    <Text size=\"xs\" weight=\"medium\" className=\"text-text-600\">\n      {label}\n    </Text>\n  </div>\n);\n\n/**\n * Individual vertical bar component\n */\nconst DataBar = ({\n  label,\n  value,\n  maxValue,\n  colorClass,\n  chartHeight,\n}: {\n  label: string;\n  value: number;\n  maxValue: number;\n  colorClass: string;\n  chartHeight: number;\n}) => {\n  const percentage = maxValue === 0 ? 0 : (value / maxValue) * 100;\n  const barHeight = (percentage / 100) * chartHeight;\n\n  return (\n    <div className=\"flex flex-col items-center gap-2 flex-1\">\n      {/* Bar container */}\n      <div\n        className=\"w-full flex items-end justify-center\"\n        style={{ height: chartHeight }}\n      >\n        <div\n          className={cn(\n            'w-16 rounded-lg transition-all duration-300',\n            colorClass\n          )}\n          style={{ height: `${barHeight}px` }}\n        />\n      </div>\n\n      {/* Label */}\n      <Text size=\"xs\" weight=\"medium\" className=\"text-text-600 text-center\">\n        {label}\n      </Text>\n    </div>\n  );\n};\n\n/**\n * Grid lines component for the chart background\n */\nconst GridLines = ({\n  ticks,\n  chartHeight,\n}: {\n  ticks: number[];\n  chartHeight: number;\n}) => {\n  return (\n    <div\n      className=\"absolute inset-0 flex flex-col justify-between pointer-events-none\"\n      style={{ height: chartHeight }}\n    >\n      {ticks.map((tick, index) => (\n        <div\n          key={`${tick}-${index}`}\n          className=\"w-full border-t border-dashed border-border-200\"\n          style={{ marginTop: index === 0 ? 0 : undefined }}\n        />\n      ))}\n    </div>\n  );\n};\n\n/**\n * Y-Axis component\n */\nconst YAxis = ({\n  ticks,\n  chartHeight,\n}: {\n  ticks: number[];\n  chartHeight: number;\n}) => (\n  <div\n    className=\"flex flex-col justify-between items-end pr-3\"\n    style={{ height: chartHeight }}\n    aria-hidden=\"true\"\n  >\n    {ticks.map((tick, index) => (\n      <Text\n        key={`${tick}-${index}`}\n        size=\"xs\"\n        weight=\"medium\"\n        className=\"text-text-500\"\n      >\n        {tick}\n      </Text>\n    ))}\n  </div>\n);\n\n/**\n * QuestionsData component - displays a vertical bar chart showing\n * question statistics (total, correct, incorrect, and optionally blank).\n *\n * @example\n * ```tsx\n * <QuestionsData\n *   title=\"Dados de questões\"\n *   data={{\n *     total: 120,\n *     corretas: 80,\n *     incorretas: 30,\n *     emBranco: 10,\n *   }}\n *   showEmBranco\n * />\n * ```\n */\nexport const QuestionsData = ({\n  title = 'Dados de questões',\n  data,\n  showEmBranco = false,\n  maxValue,\n  chartHeight = 180,\n  className,\n  ...props\n}: QuestionsDataProps) => {\n  // Calculate the maximum value for the scale\n  const chartMaxValue = maxValue ?? data.total;\n\n  // Calculate Y-axis ticks\n  const yAxisTicks = calculateYAxisTicks(chartMaxValue);\n  const adjustedMaxValue = yAxisTicks[0]; // Use the nice max for calculations\n\n  // Build accessible chart description\n  const blankSuffix =\n    showEmBranco && data.emBranco !== undefined\n      ? `, ${data.emBranco} em branco`\n      : '';\n  const chartDescription = `Gráfico de barras mostrando ${data.total} questões respondidas, ${data.corretas} corretas, ${data.incorretas} incorretas${blankSuffix}`;\n\n  // Build bar items configuration\n  const barItems: BarItemConfig[] = [\n    {\n      key: 'total',\n      label: 'Total',\n      legendLabel: 'Total de questões respondidas',\n      value: data.total,\n      colorClass: BAR_COLORS.total,\n    },\n    {\n      key: 'corretas',\n      label: 'Corretas',\n      legendLabel: 'Questões corretas',\n      value: data.corretas,\n      colorClass: BAR_COLORS.corretas,\n    },\n    {\n      key: 'incorretas',\n      label: 'Incorretas',\n      legendLabel: 'Questões incorretas',\n      value: data.incorretas,\n      colorClass: BAR_COLORS.incorretas,\n    },\n  ];\n\n  // Add blank questions bar if enabled\n  if (showEmBranco && data.emBranco !== undefined) {\n    barItems.push({\n      key: 'emBranco',\n      label: 'Em branco',\n      legendLabel: 'Questões em branco',\n      value: data.emBranco,\n      colorClass: BAR_COLORS.emBranco,\n    });\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col p-5 gap-4 bg-background border border-border-50 rounded-xl',\n        className\n      )}\n      {...props}\n    >\n      {/* Header */}\n      <Text\n        as=\"h3\"\n        size=\"lg\"\n        weight=\"bold\"\n        className=\"text-text-950 tracking-[0.2px]\"\n      >\n        {title}\n      </Text>\n\n      {/* Legend */}\n      <div className=\"flex flex-row flex-wrap gap-x-6 gap-y-2 mb-4\">\n        {barItems.map((item) => (\n          <LegendItem\n            key={item.key}\n            color={BAR_COLORS[item.key as keyof typeof BAR_COLORS]}\n            label={item.legendLabel}\n          />\n        ))}\n      </div>\n\n      {/* Chart */}\n      <div className=\"flex flex-row\" aria-label={chartDescription}>\n        {/* Y-Axis */}\n        <YAxis ticks={yAxisTicks} chartHeight={chartHeight} />\n\n        {/* Spacer between Y-axis and chart */}\n        <div className=\"w-4\" />\n\n        {/* Chart area with grid and bars */}\n        <div className=\"flex-1 relative\">\n          {/* Grid lines */}\n          <GridLines ticks={yAxisTicks} chartHeight={chartHeight} />\n\n          {/* Bars */}\n          <div className=\"flex flex-row flex-1 gap-4 relative z-10\">\n            {barItems.map((item) => (\n              <DataBar\n                key={item.key}\n                label={item.label}\n                value={item.value}\n                maxValue={adjustedMaxValue}\n                colorClass={item.colorClass}\n                chartHeight={chartHeight}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default QuestionsData;\n"],"mappings":"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","names":["jsx"]}